Post by blanka on Apr 14, 2009 19:53:27 GMT -5
Web 2.0 Design Tutorial - Source File Download
If this is helpful please take your time to +rep me, thank you and enjoy.
In this tutorial, we'll put together a nice clean web 2.0 design in matter of a few steps. What looks like an advance design will just be designed with a simple tools like rectangle and gradient tools! Remember, the PSD is free to use and especially helpful to refer to. Good luck!
Step 1
So lets start this, are you ready? Open up a fresh new document (Ctrl+Shift+N) with 1024x768 dimensions.
Select the Paint Bucket Tool(G) and fill the default background layer with #131313. Are you lost yet? Hope not.
----------------------------
Step 2
At the moment, the background is very boring. We need to spice it up with some kind of background. So open up a black and white diagonal pattern or any other pattern on the net (black and white only). Can't find one? No worries, I supplied a diagonal pattern just for this tutorial. Save the image. Open it up on PS. Then Edit>Define Pattern.So now that with that pattern, apply it all over the document. Next, change the Blending Mode to Soft Light and lower the Opacity to about 3%.
----------------------------
Header
Now lets get to work on the most important part of a design, the header. The header is the first thing a visitor looks at so it is an essential to get it too look right and not screw it up. If some of the steps are not exactly clear to you, I would highly recommend that you refer to the PSD.
Enable the Rulers (View>Rulers) on your document and make sure the rulers are measured in pixels(double click Rulers > pixels). Create 4 guides near the top (exact pixels below).
1) 10px
2) 100px
3) 130px
4) 150px
Now, this might feel really redudant at first but it's good web design practice.
----------------------------
Step 3
Alright, now we going to start on the fun part! Create a large horizontal rectangle from the top of the document all the way down to the fourth guide using the Rectangle Tool (U). Color it #0d0d0d.
Got something like this? I hope so.
----------------------------
Step 4
Now we're going to create another horizontal rectangle but this time it's over our previous rectangle. Create a new layer (with the name "header_main") then create a rectangle from the top of the document all the way down to the second guide using the Rectangle Tool (U). Make this #232323.
Double click the layer style box. Select Gradient Overlay. Change the gradient colors from #000000 to transparent. Lower the Opacity to 66%.
You should have something like below. If not then please refer to the PSD or else you'll get lost throughout the tutorial.
Click the above image to see it better.
----------------------------
Step 5
To start off the logo create the main text for the logo with the Horizontal Type Tool (U). Use #85d9ed for the first half of the word(s) and #FFFFFF for the rest.Also to make it look even better, set the characters a bit closer. Window>Character. To add to that set the text to the settings below<BR>
Font: Reznor | Type: Regular| Size 30 | aa: Strong.
----------------------------
Step 6
Now create the sub text. But this time use #85d9ed for the first half and #FFFFFF for the rest. Place the sub text slighty under the main text and set the text to the settings below.<BR>
Font: Reznor | Type: Regular| Size 30 | aa: Strong.
----------------------------
Step 7
Brush near the your logo with the Brush Tool (B). Use a large soft brush with colors of #58afc0. Change the Blending Mode to Linear Dodge and lower the Opacity to 50%. Then create a new layer. brush with a smaller soft brush and set the Blend mode to Overlay. Results would vary.
----------------------------
Step 8
Now to start off a menu because the vistors are going have to navigate, right? Create a rectangle between the 2nd and 3rd guide. Color it #5bb2c2.
Double click the layer style box. Select Gradient Overlay. Change the gradient colors from #000000 to transparent. Change the Blending Mode to Overlay. And set the angle to 90 degrees.
----------------------------
Step 9
Grab the text tool, set the foreground color to #FFFFFF. Add in white text naviagtional text in the center of the naviagtional bar. Then Set the text to the settings below<BR>
Font: Trebuchet MS | Type: Bold | Size 11 | aa: None.
Add a sharp shadow by double clicking the layer style box. Select Drop Shadow. Change the color to black and set the Distance to 1 while leaving the rest to 0.
>
----------------------------
Step 10
Now we need to make the "roll over" menu. To do this we are going to use the Pen Tool (T) and make a black triangle. It's a bit hard to explain but follow what I did with the image below. After you've done that you may add a white drop shadow (via Layer Style) to give a more 3D feel. Refer to the image below if you are stuck.
Content
Off with the header, we are now going to enter the fun part, the conent. For this part, it's going to vary differently for each person so use creativiy! Also, since you are done the header you may now disable the guides(Ctrl + H) if it helps.
----------------------------
Step 11
Let's move on, shall we? Below the header create a large rectangle with the color #111111.
----------------------------
Step 12
Then again make another rectangle but this time make it about 35-40 pixels in height and have it extend outside of you rectangle by about 10 pixels in width. If this becomes confusing, no worries just see what I did in the PSD. Then follow the layers styles below.
Now open up the layer style box. Select Inner Shadow and change the blend mode to Overlay and Opacity to 75%. Change color to #FFFFFF, distance to 1, and angle to 90 degrees. The rest should have value of 0. This'll give a bevel and thus give more depth. Select Gradient Overlay and change the blend mode to Overlay and Opacity to 100%. Change color to #000000, and angle to 90 degrees. Hopefully, you should have something similar below.
----------------------------
Step 13
Step 12 gave it some depth but to make it pop out even more we are going to add in the "pop-out" effect. Doing this is quite easy with the pen tool. Now, one might think that the pen tool is hard to utilize but it's actually not.
Create a new layer under the gradient layer and grab the Pen Tool (P). With 3 clicks make a triangle like the image below.
Then double click that layer to bring up the Layer Style box. From there Select Gradient Overlay and change the blend mode to Overlay and Opacity to 100%. Change color to #000000, and angle to 90 degrees.
----------------------------
Step 14
Hope you didn't forget about the other side. Now, you can repeat step 15 but to make everything faster we are going to duplicate the layer that you did in Step 15 and reverse it (Edit>Transform>Flip Horiazonal) to the other side.
----------------------------
Step 15
Hmm, looks a bit empty don't you think? It's because we haven't fill in the meat(in other words content). So for this part, it's all up to your creativity to add in content on your website. Keep in mind though, make sure the main text has a color with good contrast to the background (#f4f4f4 works well). Also, making the headers blue (#5bc6d8) looks real nice.
Here's a contact form I designed.
Footer
We can't forget about the footer! You can relax now, all of the hard part is now gone.
----------------------------
Step 16
Last thing to do is to make a simple footer. Now when making footers, try to match the header as much as possible. Start off making rather large rectangle (with Rectangle Tool ).Fill this with #0a0a0a
----------------------------
Step 17
Make smaller rectangle over the previous one. This time fill it with #56adbe. <BR>
Select Gradient Overlay and change the Blend Mode to Overlay and lower the Opacity to 38%. Change color to #000000, and angle to 90 degrees.
----------------------------
Step 18
Only thing left in the footer is to add some text. There you go a web 2.0 design in less than 20 steps! If you got lost or something please look into the PSD for reference.
----------------------------
Step 19
Now your done! However, there are some things that are gonna need some touch up. Some parts need more bevels while some need more lighting. It's important that you go back and fix any parts that needs fixing.
----------------------------
If this is helpful please take your time to +rep me, thank you and enjoy.
In this tutorial, we'll put together a nice clean web 2.0 design in matter of a few steps. What looks like an advance design will just be designed with a simple tools like rectangle and gradient tools! Remember, the PSD is free to use and especially helpful to refer to. Good luck!
Step 1
So lets start this, are you ready? Open up a fresh new document (Ctrl+Shift+N) with 1024x768 dimensions.
Select the Paint Bucket Tool(G) and fill the default background layer with #131313. Are you lost yet? Hope not.
----------------------------
Step 2
At the moment, the background is very boring. We need to spice it up with some kind of background. So open up a black and white diagonal pattern or any other pattern on the net (black and white only). Can't find one? No worries, I supplied a diagonal pattern just for this tutorial. Save the image. Open it up on PS. Then Edit>Define Pattern.So now that with that pattern, apply it all over the document. Next, change the Blending Mode to Soft Light and lower the Opacity to about 3%.
----------------------------
Header
Now lets get to work on the most important part of a design, the header. The header is the first thing a visitor looks at so it is an essential to get it too look right and not screw it up. If some of the steps are not exactly clear to you, I would highly recommend that you refer to the PSD.
Enable the Rulers (View>Rulers) on your document and make sure the rulers are measured in pixels(double click Rulers > pixels). Create 4 guides near the top (exact pixels below).
1) 10px
2) 100px
3) 130px
4) 150px
Now, this might feel really redudant at first but it's good web design practice.
----------------------------
Step 3
Alright, now we going to start on the fun part! Create a large horizontal rectangle from the top of the document all the way down to the fourth guide using the Rectangle Tool (U). Color it #0d0d0d.
Got something like this? I hope so.
----------------------------
Step 4
Now we're going to create another horizontal rectangle but this time it's over our previous rectangle. Create a new layer (with the name "header_main") then create a rectangle from the top of the document all the way down to the second guide using the Rectangle Tool (U). Make this #232323.
Double click the layer style box. Select Gradient Overlay. Change the gradient colors from #000000 to transparent. Lower the Opacity to 66%.
You should have something like below. If not then please refer to the PSD or else you'll get lost throughout the tutorial.
Click the above image to see it better.
----------------------------
Step 5
To start off the logo create the main text for the logo with the Horizontal Type Tool (U). Use #85d9ed for the first half of the word(s) and #FFFFFF for the rest.Also to make it look even better, set the characters a bit closer. Window>Character. To add to that set the text to the settings below<BR>
Font: Reznor | Type: Regular| Size 30 | aa: Strong.
----------------------------
Step 6
Now create the sub text. But this time use #85d9ed for the first half and #FFFFFF for the rest. Place the sub text slighty under the main text and set the text to the settings below.<BR>
Font: Reznor | Type: Regular| Size 30 | aa: Strong.
----------------------------
Step 7
Brush near the your logo with the Brush Tool (B). Use a large soft brush with colors of #58afc0. Change the Blending Mode to Linear Dodge and lower the Opacity to 50%. Then create a new layer. brush with a smaller soft brush and set the Blend mode to Overlay. Results would vary.
----------------------------
Step 8
Now to start off a menu because the vistors are going have to navigate, right? Create a rectangle between the 2nd and 3rd guide. Color it #5bb2c2.
Double click the layer style box. Select Gradient Overlay. Change the gradient colors from #000000 to transparent. Change the Blending Mode to Overlay. And set the angle to 90 degrees.
----------------------------
Step 9
Grab the text tool, set the foreground color to #FFFFFF. Add in white text naviagtional text in the center of the naviagtional bar. Then Set the text to the settings below<BR>
Font: Trebuchet MS | Type: Bold | Size 11 | aa: None.
Add a sharp shadow by double clicking the layer style box. Select Drop Shadow. Change the color to black and set the Distance to 1 while leaving the rest to 0.
> ----------------------------
Step 10
Now we need to make the "roll over" menu. To do this we are going to use the Pen Tool (T) and make a black triangle. It's a bit hard to explain but follow what I did with the image below. After you've done that you may add a white drop shadow (via Layer Style) to give a more 3D feel. Refer to the image below if you are stuck.
Content
Off with the header, we are now going to enter the fun part, the conent. For this part, it's going to vary differently for each person so use creativiy! Also, since you are done the header you may now disable the guides(Ctrl + H) if it helps.
----------------------------
Step 11
Let's move on, shall we? Below the header create a large rectangle with the color #111111.
----------------------------
Step 12
Then again make another rectangle but this time make it about 35-40 pixels in height and have it extend outside of you rectangle by about 10 pixels in width. If this becomes confusing, no worries just see what I did in the PSD. Then follow the layers styles below.
Now open up the layer style box. Select Inner Shadow and change the blend mode to Overlay and Opacity to 75%. Change color to #FFFFFF, distance to 1, and angle to 90 degrees. The rest should have value of 0. This'll give a bevel and thus give more depth. Select Gradient Overlay and change the blend mode to Overlay and Opacity to 100%. Change color to #000000, and angle to 90 degrees. Hopefully, you should have something similar below.
----------------------------
Step 13
Step 12 gave it some depth but to make it pop out even more we are going to add in the "pop-out" effect. Doing this is quite easy with the pen tool. Now, one might think that the pen tool is hard to utilize but it's actually not.
Create a new layer under the gradient layer and grab the Pen Tool (P). With 3 clicks make a triangle like the image below.
Then double click that layer to bring up the Layer Style box. From there Select Gradient Overlay and change the blend mode to Overlay and Opacity to 100%. Change color to #000000, and angle to 90 degrees.
----------------------------
Step 14
Hope you didn't forget about the other side. Now, you can repeat step 15 but to make everything faster we are going to duplicate the layer that you did in Step 15 and reverse it (Edit>Transform>Flip Horiazonal) to the other side.
----------------------------
Step 15
Hmm, looks a bit empty don't you think? It's because we haven't fill in the meat(in other words content). So for this part, it's all up to your creativity to add in content on your website. Keep in mind though, make sure the main text has a color with good contrast to the background (#f4f4f4 works well). Also, making the headers blue (#5bc6d8) looks real nice.
Here's a contact form I designed.
Footer
We can't forget about the footer! You can relax now, all of the hard part is now gone.
----------------------------
Step 16
Last thing to do is to make a simple footer. Now when making footers, try to match the header as much as possible. Start off making rather large rectangle (with Rectangle Tool ).Fill this with #0a0a0a
----------------------------
Step 17
Make smaller rectangle over the previous one. This time fill it with #56adbe. <BR>
Select Gradient Overlay and change the Blend Mode to Overlay and lower the Opacity to 38%. Change color to #000000, and angle to 90 degrees.
----------------------------
Step 18
Only thing left in the footer is to add some text. There you go a web 2.0 design in less than 20 steps! If you got lost or something please look into the PSD for reference.
----------------------------
Step 19
Now your done! However, there are some things that are gonna need some touch up. Some parts need more bevels while some need more lighting. It's important that you go back and fix any parts that needs fixing.
----------------------------
