Business Website Layout
Tutorial by Richard Wilkins - Click to view Profile
Here is the image we will be making today:
Right, first you need to open photoshop (obviously). Now select "File> New" and use the settings below:
OK, now select the gradient tool from the tool bar (Hold down left click on fill bucket until a little menu comes up. Click on the gradient.).
Click on the little gradient which is directly under the "Image" and "Layer" options on the top menu. Use these Settings:
Now drag the gradient verticaly on the document making sure to cover the entire area.
It should look like this.
Now create a new layer (Shift + Ctrl + N). Fill with 225 degree scanlines. If you do not already have some scanlines in your patterns box please refer to this tutorial.Change the opacity level of the scanlines layer to 7%. Now you need to create a new layer (Shift + Ctrl + N) and lower the opacity to 14%. Then using the marquee tool with the Shift key held down, make these selections (the highlighted bits):
Fill them with white. Now create a rectangular selection between the top two rectangles and fill it with #c9c9c9. Using the font "Share-Regular" type this:
And use this layer style:
(The rest of the settings are the default ones.)
Now copy this image into the document: business photo
By using this brush, and the color #008db0 and the color #FFFFFF with a opacity of 50%, make a brush effect similar to this one:
Now create a selection with the rectangular marquee tool that is [225x200pixels] along side the picture. Fill it with #008db0.
Now using the font "Share-Regular" and a color of #FFFFFF create some text in this style:
Now merge the "Lorem Ipsum dolor sit amet consectetuer adipiscing" layer, the image layer and the [225x200pixel] block in #008db0 layer together. Now use this layer style on the new merged layer.
(The rest of the settings are the default ones.)
You should now have this:
OK, Now we are going to work on the top "sign in" bar. First lets do the "Your Basket: Empty" bit. Use a "Tahoma" font with size 13pt and no anti-aliasing. Now we need to put the shopping trolley in. Follow this movie:
Now using size 8 Tahoma with no anti-alias make a "date" text and a "sign in" button. Your image should now look like this:
OK, Now using a 17pt "Share-Regular" type in the words "Home", "About Us", "Portfolio", "Private Messages" and "Contact" on the white bar inbetween the logo and the advert.
Now we will do the emblem. From the custom shapes menu find the jigsaw. Make it about as high as the "Business Solutions" text and the color #c3c3c3. Move it next to "Solutions" and give the jigsaw piece layer this layer effect:
It should now look like this:
OK Now we are going to do the text. We are going to make the "Home" header first.
Using "Share-Regular" and a font size of 27pt, write "> Home" in the small white box under the advert. Now apply these layer effects to the text:
You should now have something like this:
OK, now using 27pt with the same font, put your text in the main text box. I will use the "Lorem Ipsum" placeholder text to demonstrate.
Now use the font "Silkscreen" and a size of 8pt with no anti-alias. Create the As-link box like this:
Horray! We are finished! If you would like to comment on this tutorial or the site in general please join the community!
