In this tutorial, you will learn to create a simple website using Photoshop. Let’s name the site InfoAnimal.
I want to thank for the photos I used to : GusEliz, Lusi, Marcos_bh, Planetka, Zmaher , Pepoitana, Barky , Clix, Bjearwicke.
Step 1
Create a new document : 1000 pixels wide and 1100 pixels height.
First do the navigation menu. Select the Rectangular Marquee Tool, set it on Fixed size and place the selection at 93 pixels from the top of the page. You can measure the distance using Ruler Tool (don’t forget to press Shift key while you measure, it will help you draw a straight line).
Go to foreground color in your Tools Palette and set it to #0551ce. Then press Alt + Backspace to fill the selection.
Now let’s add some text. I used 4pt white Arial text, but you can use whatever font you like.
Step 2
In order to create the borders to the text, so it will look like buttons, press Ctrl + R to make the Rulers active. Now it will be easier to make the borders at equal distance from each other. Make the first vertical guide at 18pixels from the left side of the page, in order to have a nice padding in the page.
Create a new layer, grab the Pencil Tool and add one-pixel border between text, where the guides are. Choose for the color one that is a little brighter than the one you used to fill the navigation menu (#055dee).
Again, press Shift to draw a straight line.
After you’ve done that press Ctrl + ; to hide the guides.
Step 3
Now select all layers with the borders (click on each of them holding down Ctrl ) and then press Ctrl + E to merge the layers into one. Then rename your layer with a suggestive name and after that double click on it to open the Layer Style Palette and make the next settings:
It looks pretty good, but you can make it better.
Step 4
Make a new layer, take the Pen Tool again and draw one-pixel #04388d border to the bottom of the menu. Crete a new layer, Ctrl + click the menu’s layer to select it’s shape, and use the linear Gradient Tool to make a nice gradient over the menu, from blue to white.
Create a new layer again, take the Rectangular Marquee Tool and select the “Home” box. Using radial Gradient tool this time, draw the gradient in the selected area, and then put this layer under the Home’s text layer. Then change the color of “Home” text to black. Select all the layers of the menu and press Ctrl + G to group them. Rename the group “menu”.
And you are done with the menu.
Step 5
For this step you will create a simple photo galley with some pictures with animals.
Create a new layer, take the Rectangular Marquee Tool and make a 151px*1000px rectangle (you can use fixed size again). Fill it with #dfdedd.
Create a new layer again and with Pen Tool create an one-pixel top and bottom border using this color : #ff9c00.
Step 6
Open the rest of the pictures in Photoshop, and then place them into your project ( Drag & Drop).
Ctrl + T in order to transform the photos and make them fit into your gallery.
Make the image form the middle a little bigger. Then apply to all this Layer Style settings :
To the image from the middle apply a stroke : #e8ba87, to make it stand up.
Group them and this step is over.
Step 6
Now it’s time to create the sidebar.
Take the Rectangular Marquee Tool and create a shape with 381 pixels height and 160 pixels width. Align it with the first border of the menu, witch means 18 pixels from the left side of the page, and then fill it with #f7b041.
Go to Edit > Stroke and apply an on-pixel border. Choose Color and set it to #ce7f03.
Split the shape in 9 parts, using horizontal guides. Create new layer and use Pen Tool again to create the borders between each link in the sidebar. Draw an one-pixel line with this color : #d89b3a and another line under the first line using white color.
Step 7
Now select each block between links and apply a linear gradient, using a new layer for every block. For the first and the last block inverse the gradient colors.
Then write some text for the links.
You can write each link to it’s separate layer or you can write them in one layer, one link under the other one, and then apply this setting from the Character Palette (Window > Character):
Step 8
Now you will do the Content of the web.
Make a rectangular shape with 852 pixels width and 682 pixels height. Fill it with #e9e7e3.
The padding between top of the page and the shape has 380 pixels. The padding between the sidebar and the shape has 18 pixels.
Then set the guides this way :
Now select the area between the guides using Rectangular Marquee Tool and press the Delete key.
Step 9
It’s time to add some Layer Style :
Step 10
Open the next pictures and place them like you see below:
Add some text over the pictures:
Step 11
Ok .. let’s make the footer now.
Take the Rectangular Marquee Tool (for the last time in this project J ) and make a rectangular with this dimensions : 65 pixels height and 1000 pixels width. Fill it with #0852cf and apply a gradient. Then, in a new layer, take the Pen Tool and draw a border to the top.
After that copy the links form the navigation bar and paste them here.
You can add some more little details to your page and that is all.
I hope you had fun doing it and you learned something new, too !
Final result : (click to enlarge)
