In this Photoshop tutorial we will learn to draw the face of your site.
This is the layout at the end of the lesson.
Start by creating a new document size 650 * 550 px.
Fill it with that color # e6f2e6
Create a new layer. Draw a rectangle inside, backing off about 30 px from each side. Also fill with some color.
Click the button at the bottom of the layers palette and add styles:
Stroke Width 5 px, inside, color # 296750
Intermediate result:
Let’s start drawing site navigation.
Via , Draw a rectangular selection in the upper right corner of our layout.
Go to menu Select >> Modify >> Smooth selection (Selection – Modification – Optimize) to smooth edges.
Create a new layer, fill the selection with color. # 3b9710.
Now apply the styles:
1) Inner shadow:
Use color # 184702 for the shadow
2) Stroke size 3 px, inside, color #FFFFFF, that is white.
When you’re done, merge all button layers. Duplicate the layer several times and place the buttons at the same distance from each other.
Create a new layer.
Via draw a rectangle that will cover the bottom of the buttons. Fill the new selection with this color. # 8fd2fd
Apply Shadow style:
And make a white stroke size 3 px.
Now find a photo with a landscape … something neutral, like this:
Drag the photo with the landscape onto your work document.
Place the layer under the buttons and the blue rectangle. Remove unwanted parts.
That is what you need to strive for …
Take the same photo, make it smaller, place it on the left side of the header.
Using a soft-edge eraser, move around the edge of the image to make the transition softer.
Take the Text tool, Arial font, white color, size 11-12 px, and write the names of the links.
At the moment, that’s what we did.
On the empty blue space write the name of your site.
Site logo can add a light volume effect.
Create another layer. Draw a rectangular selection in the main layout window under the header (header)
Add a white stroke outside.
And gradient: from # 68b13a (top) to # 2c7e0e (down below)
Directly on top of the green rectangle, draw another one using our favorite selection and click “Delete”.
So you cut a hole in the green square.
Add text to this rectangle …
Repeat the same and make the second window in the green square. This will be the main text box.
And here is your result!
See you at www.https://photobecket.com!
