Wednesday, 29 February 2012
Good news for all you guys following along with tutocity for the last few years, we plan on doing up the site and getting things all running again. First step will include a complete revamp of the sites design, next step we will start to create more tutorials including stage 2 of our famous 'Web Design Journal' tutorial where we will teach you how to turn the design into a fully working xhtml website!
 
search
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?
sendhil  - Senworld great job   |2011-02-06 05:27:19
its very useful for the beginer in webdesign!! you have done a great job
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 >>
 

Useful Sites

I have been building a list of useful websites to share on my blogs. The first site Melbourne Secrets is a blog about hidden secrets in Melbourne. About Melbourne is a blog all about great Melbourne Busineses. Thats Melbourne covers the same sort of concept but from a different angle. Melbourne Review is a website blog doing reviews on different Melbourne businesses.

Guide to Melbourne is a guide site about Melbourne Businesses, while best of Melbourne is all about the best businesses Melbourne has to offer. There are many businesses in Melbourne and top of melbourne picks out the best of the bunch. With all these things going on its hard to keep track of whats on in Melbourne.

Our last blog we setup is all about Melbourne, This site covers all topics about Melbourne.

Looking for cheap or luxury accommodation in Australia? Check out Accommodation Australia for a great variety Australia wide.

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:
 

Affordable Web Design Newcastle contact Xsite Design.

Greater Melbourne Blog
Online Melbourne Blogger
Eastern Suburbs Melbourne Blog
Eastern Suburbs Melbourne Blogger
Melbourne Online Blog
Rendering Melbourne
Emergency Plumbing Melbourne