Web Courses Bangkok

Footer

The footer plays an important role in our web site as it is where we ask users to sign up for the newsletter, find us on the various social networks and find our office. It plays the final piece of our puzzle.

1. Make a large rectangle at the bottom of your design width 935px by 240px colour: #2c2c2c
2. Add three headers equal distance apart "Newsletter", "Social Networks" and "Contact WCB"
   Verdana, 12pt, Bold, #969696
3. Using the Line Tool , create three lines under the headings, use the same colour as the heading #969696

Newsletter

First of the columns is the newsletter. This will be a simple form and ask users to give their name and email.

1. Add the text "Email" Verdana, 12pt, Regular, #FFFFFF
2. Add a Rectangle width 256px, height 22px and colour #b9b9b9
3. Add "Name" and the final rectangle
4. Use the image button.gif as the button
5. Group all the layers and call the group "Newsletter".

Social Networks

1. Create the same header and underline as the newsletter
2. Add the social networks; File > Open then Copy and Paste into the design
   1. icon-facebook.gif
   2. icon-twitter.gif
   3. icon-audioboo.gif
   4. icon-linkedin.gif

Contact

Adding the contact details is just text, use Verdana, 12pt, Regular, #FFFFFF

1. "Email: This e-mail address is being protected from spambots. You need JavaScript enabled to view it "
2. "Tel: 08-6782-4118"
3. "Address: (make this line bold using the Properties Bar)
   12th Floor, 253 Asoke
   Sukhumvit 21
   Bangkok
   View Map" (make this line underline using the Paragraph Panel)

Well done !

Congratulations. As you can see there are a lot of steps in making a design, the more you get used to using Photoshop the quicker you will be able to make a design and use your creativity.

If you have any questions contact: This e-mail address is being protected from spambots. You need JavaScript enabled to view it

For more tutorials on Photoshop try:

• http://dzineblog.com/2008/07/best-photoshop-layout-design-tutorials.html
• http://psdtuts.com/interface-tutorials/create-a-sleek-high-end-web-design-from-scratch/
• http://www.adobetutorialz.com/articles/2896/1/Online-Photo-Portfolio