Tuesday, 18 November 2008
It has been a big week for tutocity with our last 2 tutorials making the home page of www.good-tutorials.com and one of our designs was featured on deviantart. We hope to continue our recent success with our next group of tutorials that will be releasing soon.

We are currently working on setting up a comment module for our tutorials so that we can start getting some feedback from you guys!
 
search
Full Photoshop Website Design
Page 4 of 4

Step 7: Now we are going to add the menu items. Select the text tool and copy the font settings below.



Now type in your menu like I have in the image below. You can also change the color of one of the menu items like I have to show what page of the website you are currently on. Lower the layer opacity to about 50%




Step 8: Now we are going to create the footer. Duplicate the "MenuBg" layer and call it "FooterBg" Move the "FooterBg" layer so that it is placed just below your image. Then hit Ctrl+T to enter free transform mode. Stretch out the "FooterBg" layer untill it is the same width as your "Border" layer. Should look something like mine below.



Now double click on the "FooterBg" layer in the layers pallete to open up the layer style window. Copy the settings below. Remember to set the angle to 0°





Now add your footer text ontop of the "FooterBg" layer, I just used the same settings that we used for the menu items but with no antialiasing.

Finished result: Click on the image to see it in full size.



If you enjoyed this tutorial please show some support for the site by registring. Thank you!


Comments
Add New
Markus  - thanks   |2008-11-23 00:29:18
thanks for this tutorial.
it was a good lesson for me ;)
vetri vel  - hi   |2008-11-24 14:47:55
good very useful toturial
Mark  - Haha wonderful   |2008-11-30 12:36:14
This tutorial was easy to follow and the outcome was great! The website is
badass, thank you!
Keno  - Thumbs up   |2008-12-13 00:02:56
love it... simple but good
Bee  - This is awsome   |2009-05-09 01:36:27
Thank you!! :)
mark  - good info   |2009-07-17 04:30:37
thanks. a new skill for me
jitendra  - see this   |2009-08-02 03:19:47
good but it is not download ..i want to save this psd file.
Scott   |2009-08-03 07:48:02
Just do the tutorial yourself and you will get it..
Karen  - Full Photoshop Web Design   |2009-09-19 22:14:06
This tutorial was very easy to follow. With all my new photoshop skills I had
no trouble at all creating this.
I was wondering if you have any tutorials on
making buttons and linking the to other pages in a web site?
This was an awesome
tutorial I'll be sending this link to my fellow classmates. Thanks again for
such clear instructions.

Karen
anttyweb  - VeryGood   |2010-01-04 03:35:47
I feel very well
ahmed   |2010-06-21 16:47:19
nice lesson
Roby   |2010-07-22 10:47:51
This si amazing, but how do I turn it into html/css?
Write comment
Name:
Email:
 
Title:

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."


<< Start < Prev 1 2 3 4 Next > End >>
 
Name: Flash Website
Type: Flash
Description: In this tutorial we will show you the basics of creating a flash based website with minimal code.
Finished Preview:
 


Web Design
Web Design Melbourne