PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Vortex Effect Tech Style Web Buttons Ultima Abstract Transparent GIF Guide Fresh Tutorials:
Last Update: 2.14.2007
Online: 42 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com Tutorials Web Layouts Modern Layout Complete

Modern Layout Complete

In this tutorial you will learn the steps to create an entire website that is both sleek and maximizes the users viewable window area, allow you the webmaster to place as much content onto the screen at one time as possible without giving the layout a nasty "cluttered" look. In this example we will be designing a website for a fictional R&B Netradio station called "Mixtape Bodega", here is what we'll be creating:



Download File Download Modern Layout Complete Source Package

Go To Page: [ 1 2 3 ]


Page 3 of 3


Step # 17
Create a new layer. Next get out the Pencil Tool () and set it up like so:


Set your foreground color to: #FF7200

Draw 3 dots in the bottom right hand corner of your button to give it a little more detail as l've done here:


Finally the only thing left to do is to place the text onto the button. I didn't use any fancy fonts here, just a 10pt Tahoma (Windows standard font) with a color of white #FFFFFF:


Now you can easily copy these buttons by creating a folder, and placing each of the button layers into the folder and copying once for each button your layout needs, here's how mine ended up:


Here l've added my company logo and website name to the header area.


As well as a few images that are relevant to the pages theme:


At this point the page is nearly ready to be sliced up and coded. Here is how this particular web layout might look in a working environment for an R&B net radio website:


Thank you very much for reading this tutorial, l hope you've enjoined it! Please be sure to check out the reset of our href="http://www.photoshopforce.com/tutorials/index.php">layout tutorials while you're here!


Download File Download Modern Layout Complete Source Package



Author: Sacred M.
Discuss this tutorial on the PhotoshopForce.com Forums
Affiliates:
Kostenloses für den Webmaster Windows GUI MODS BladeWorkz - Photoshop Tutorials LooseMoose52 
Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily.
All Affiliates / Your Link Here
HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
© 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
Top of Page