Webby freebies » Icons http://www.webbyfreebies.com Just another WordPress weblog Mon, 07 Mar 2011 20:40:46 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How to Create a Nice Contact Website in Photoshop http://www.webbyfreebies.com/themes/how-to-create-a-nice-contact-website-in-photoshop/ http://www.webbyfreebies.com/themes/how-to-create-a-nice-contact-website-in-photoshop/#comments Wed, 02 Mar 2011 16:48:24 +0000 admin http://www.webbyfreebies.com/?p=1457 This is actually my first tutorial on Webby freebies. Since the blog really have to link to web design freebies, I will tell about different icon sets and texture which you can download and use for free. Below is a picture of how the results will look like.

Preview

1. Start with the background

Allright… Open a new document and size it to 1200×1200 or something like that. We are going to start to create a nice background. For that I use a flat color, in this case #121212, don’t use color overlay because we are going to add noise. Go to Filter > Noise > Add Noise and do like I did on the picture here:

Step 1

2. Add lights

We want some lights on the background to make it look a little bit more dynamic. Pick the brush tool, size it up to 620px and the hardness to 0%. Create a new layer and click one time in the middle of the document. Then set the layer opacity to 25%. Add the same amount of noise to this too. It should now look like the image below.

Step 2

3. Create the box

Use the Rounded Rectangle Tool with a radius of 3px and fix the size to 320×420 px. Now create a new layer and put a rectangle in the middle of the light that we did on the second step. Open Blending Options for the new layer and do like I did on the picture below.

Step 3

Step 3

4. Add the information

Now it is time to type the text about yourself. For the titles I use Arial, 14px, bold and for the normal text i use Arial, 12px, normal text-weight. I think you can figure out how to do it yourself. Take a look at the image and do like that. I also added the animated picture of myself in the right corner.

Step 4

5. Place the social network icons

For this you have to download an icon set. I use Simple circular social media icons pack for this one but you can ofcourse use another if you want. Start to open up the facebook icon, copy it and paste it on your document. Make sure that you put this new layer below the box-layer. Open Blending Options and change the settings so that it looks like this:

Step 5

Now you got a nice shadow on your little icon. Place the icon on the right side behind the box. It should look like this:

Step 5

Do this step over and over until you have all the icons that you want on your contact page.

6. You need a logo

In this case it is your name. You can actually do this step however you want but I will show you how I did. For my name I use the font Fertigo Pro with a font-size of 56px. This layer is also important to be placed below the box layer. Again, open Blending Options for this layer and change the settings as below.

Step 6

Result

This is how it should look right now and thats all! I hope that you have enjoyed my first tutorial on Webby freebies. Take a look at these icons that can be used instead of those I used in the tutorial.

Result

Three nice free icon sets

Social Media Bubbles: Icon Pack

Social Media Bubbles: Icon Pack

Preview and Download

Free Social Media Icon Set

Free Social Media Icon Set

Preview and Download

Social media icons

Social media icons

Preview and Download

]]> http://www.webbyfreebies.com/themes/how-to-create-a-nice-contact-website-in-photoshop/feed/ 0 Icons in modern web design: Examples and Resources http://www.webbyfreebies.com/icons-and-badges/icons-in-modern-web-design-examples-and-resources/ http://www.webbyfreebies.com/icons-and-badges/icons-in-modern-web-design-examples-and-resources/#comments Mon, 28 Feb 2011 17:40:24 +0000 admin http://www.webbyfreebies.com/?p=1403 Those of you who read Webby freebies regularly knows that I have made posts like Paper textures in modern web design, and Jeans textures in modern web design. In this post I show examples of some really cool websites that uses icons. Not only that, I also show you some fresh and nice free icon sets which you can download use when you make your next website.

Examples of websites

pixel pleasure

divplayers

ngenworks

ghosttown

david jonsson

walk with you

daniel marques

foxtie

designjunction

finer home

Icon sets to Download

Human 02

Human 02

Download

Set of social icons

Set of social icons

Download

Icon Pack: 256×256 Business Icons

icon_pack

Download

Star Trek Props: TOS 2

Star trek

Download

Office Icons

office icons

Download

15 Fantastic Collections of Free Icons

fantastic icon sets

]]> http://www.webbyfreebies.com/icons-and-badges/icons-in-modern-web-design-examples-and-resources/feed/ 0 The Recipe for the Best Web Design in the World http://www.webbyfreebies.com/fonts/recipe-for-the-best-web-design/ http://www.webbyfreebies.com/fonts/recipe-for-the-best-web-design/#comments Thu, 24 Feb 2011 13:07:33 +0000 admin http://www.webbyfreebies.com/?p=1324 What’s he talking about? Yes, one can ask, but there is actually a recipe for how to make a really nice web design! All you need to cook this recipe, I have listed in this post. The post is simply about a few steps to make your new website from scratch in Photoshop.

1. A nice background texture

This is not necessary if you prefer plain backgrounds, but I think that it’s more fun with a bit pattern. Take a look at some examples that you can download and use for free. If you would like to see more textures then you can browse the Graphics category.

Brick & Stone: Texture Pack

stone

Download

10 Free High-Quality Jeans Textures

jeans

Download

9 Free Hi-Res Wood Panels Textures

wood

Download

2. Brushes

If you want to get some life into your website, it might be an idea to use different brushes to spice it up.

115 really cool splatter brushes for Photoshop

brushes

35+ Must Have And Fresh Free Nature Themed Photoshop Brushes

flower brushes

3. Icons

A few nice small icons can never be wrong right? You can find more icons in the Icons category.

Woven Fabric Social Media Icon Set

woven icon set

Download

Panda social network icons for free

Download

Archigraphs Collection Icons

Download

4. Fonts

Stylish Typography is very important for websites today. Here are some examples below.

GOTA

gota

Download

Fertigo

fertigo

Download

League Gothic

league gothic

Download

5. A little bit of love and fantasy

Now I can not help you anymore. Grab a cup of coffee, an LSD pill and drift away in your imagination. Just watch out for those pink elephants.

]]> http://www.webbyfreebies.com/fonts/recipe-for-the-best-web-design/feed/ 0 Fresh Icon Sets You Probably Haven’t Seen Before http://www.webbyfreebies.com/icons-and-badges/fresh-icon-sets-you-probably-havent-seen/ http://www.webbyfreebies.com/icons-and-badges/fresh-icon-sets-you-probably-havent-seen/#comments Sat, 20 Feb 2010 22:29:34 +0000 admin http://www.webbyfreebies.com/?p=1106 As you know, new icon sets are published every day on various web design blogs. I have monitored many of these blogs a long time and I thought, therefore, show some of the best-looking icon sets I’ve seen recently. I hope you will like them.

Application Icon Set

Free Mobile Berries Icon Set

Mobile Icon Set

Birdies

Woven Fabric Social Media Icon Set

Vintage Stamp Social Media Icon Pack

Political Characters Volume 2 – Free Icon Set

Vector Social Media Icons

Free Saint Valentine’s Day Icon Set

Media Icons from IconShock

]]> http://www.webbyfreebies.com/icons-and-badges/fresh-icon-sets-you-probably-havent-seen/feed/ 0 Absolute best freebies of 2009 http://www.webbyfreebies.com/fonts/absolute-best-freebies-of-2009/ http://www.webbyfreebies.com/fonts/absolute-best-freebies-of-2009/#comments Sat, 02 Jan 2010 14:31:47 +0000 admin http://www.webbyfreebies.com/?p=510 I’ve just blogged here on Webby freebies in about a month, but already know that I’m in the game. During this time, I have learned a lot about where to find the best freebies available and also talked to some really talented web designers. That is why I now can do this post with freebies that I think are worthy to be appointed to this year’s freebies 2009th. I have chosen to pick 3 freebies for this categories: Fonts, Icons and Themes. See and enjoy!

WordPress themes

Irresistible

This wonderful wordpress theme is made by Woothemes is one of my favorite themes this past year. Clean and simple, exactly how a website should look in my opinion.

Demo | Download

Magazeen

Magazeen wordpress theme, created by WeFunction and exclusively released on Smashing Magazine is a theme, built for bloggers who want to run their own magazine, like Webby freebies. If you don’t to buy a premium magazine theme, then this is a really good choice.

Demo | Download

Imprezz

Imprezz is also a beautiful theme exclusively released on Smashing Magazine but made by ProductiveDreams. It can be used as a magazine or a personal blog.

Preview | Download

Fonts

SketchBlock Font

SketchBlock is a font that makes your web design look beautiful and personal, because of its handwritten appearance. Feel the colours at DeviantArt is the creator and has done a lot of more nice stuff, check out his gallery.

Download

Calluna

This is one of my favorites actually. It has been created during 1 and a half year of hard work and is a fully complete OpenType typeface.

Download

Mentone

Mentone is a sans-serif font that can be used for almost everything because of its regular look.

Download

Icons

New & Free Social Media Icon Set For Your Blog

The sweet icon set made by IconShock, exclusively for Noupe, is a free social media icon set that you can download for free and use on your blog.

Preview and Download

Lovely website icons pack 2

I would like to say wow! This icon package is one of the coolest I have ever seen on the net. Cheers LazyCrazy!

Preview and Download

Exclusive Free LBOI Icon Set For Designers By Iconshock

This icon set is also made by IconShock. It contains these 6 really stunning icons and is made exclusively for Little Box Of Ideas.

Download

]]> http://www.webbyfreebies.com/fonts/absolute-best-freebies-of-2009/feed/ 0 Panda social network icons for free http://www.webbyfreebies.com/icons-and-badges/panda-social-network-icons-for-free/ http://www.webbyfreebies.com/icons-and-badges/panda-social-network-icons-for-free/#comments Fri, 25 Dec 2009 18:44:35 +0000 admin http://www.webbyfreebies.com/?p=464 As I said in an earlier post, I was planning to create an icon set for social networking. And now I am finished. A simply call it Panda social network icons and that is exactly what it is. Check it out and feel free to download it from Six Revisions where I exclusively published it. Use them as the license on Six Revisions says.

Download

Preview

]]> http://www.webbyfreebies.com/icons-and-badges/panda-social-network-icons-for-free/feed/ 0 15 awesome free Christmas icon sets http://www.webbyfreebies.com/icons-and-badges/15-awesome-free-christmas-icon-sets/ http://www.webbyfreebies.com/icons-and-badges/15-awesome-free-christmas-icon-sets/#comments Mon, 21 Dec 2009 19:33:32 +0000 admin http://www.webbyfreebies.com/?p=405 Maybe you have seen my post about these really nice free Christmas WordPress themes and thought that totally changing theme is a big step and not that amusing all the time. Then you can scroll down and check out my list of these good looking Christmas icons that I have collected from a lot of great web design blogs, and of course DeviantArt.

Christmas holiday icons

Christmas dock icons

Xmas Pack

The real Christmas reloaded

Santa’s set

Christmas dock icons

Christmas XP

Winter holiday icons

Christmas mini pack

The day before Christmas

The polar express

Archigraphs xmas dock icons

Christmas feed icons

Smashing Christmas icons set

Dellixmas Christmas icon set

]]> http://www.webbyfreebies.com/icons-and-badges/15-awesome-free-christmas-icon-sets/feed/ 0 A bunch of sweet animal icon sets http://www.webbyfreebies.com/icons-and-badges/a-bunch-of-sweet-animal-icon-sets/ http://www.webbyfreebies.com/icons-and-badges/a-bunch-of-sweet-animal-icon-sets/#comments Thu, 17 Dec 2009 23:28:30 +0000 admin http://www.webbyfreebies.com/?p=377 There are many icon sets out there and I have already shown you some sweet twitter icons and badges, and also these social network icons. But this time I am going to show you my collection of cute animal icon sets. I will in a short while also present my own-made Panda social network icon set, that is surely as good looking as these. Wait and see. Enjoy these until further notice!

Feed Me Animals

rss_animal

Aries Icons

aries-icons

Cute critters free icon pack

cute_critters

Pool

pool

Ninja Bear Icons

ninja_bear_pw

Dino Icons

Dino_Icons

Mammoth Icons

mammoth_icons

Turbomilk’s Animals

animals

Zoom-eyed creatures

zoom_eyes

]]> http://www.webbyfreebies.com/icons-and-badges/a-bunch-of-sweet-animal-icon-sets/feed/ 0