How to Create a Nice Contact Website in Photoshop

Written by admin at March 2nd, 2011 in Icons . Themes and have 0 comments

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.

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:

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.

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.

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.

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:

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:

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.

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.

Three nice free icon sets

Share on social networks

About the Author

I am Karl

This is my homepage and all the content is written by me. I started it myself 2009 and it have been active since then. More about me can you read on the History page.

I also have to mention that I do not look that scary in real life. I just did the graphic element quite quickly in AI because I did not have time to do it better.