In this Photoshop Tutorial, we’re going to be creating a Photoshop web layout that looks like this:
Let’s start the tutorial. Firstly, create a new document sized 1400×1500.
Create two new guides – one at 900px (vertical) and another at 125px (horizontal). Next, insert this image from SXC.hu, and try to align the tree in the image with the guides.
Then select the image layer, and rename it to ‘Background Image’, and adjust the Brightness and Contrast to the following:
After this, change the background to #040c07 (use the paint bucket tool and fill the background layer).
Then, with the selection tool, select the 200px from the bottom of the ‘Background Image’ layer, and fill it with a transparent to #040c07 gradient.
Drag two more vertical guides out, at 300px and 1100px. This marks the edge of our content box.
Then, put your logo above the 125px horizontal guide, and your motto below.
(my motto font is ‘Avant Guard’ size 36px)
Select the rounded rectangle tool, with an edge radius of 10px, and a fill colour of #1d0505. Then, between the vertical guides, draw a rectangle from just below the horizon (in the background image) to just below the bottom of the page.
Then open the rectangle Blending Options. Check the ‘Stroke’ setting, and set a 10px stroke with a colour of #e3ffca and a transparency of 30%.
Next, create a rectangle shape with the colour #5b1a1a between the 900px and the 1100px guides, from the top of the content box to the bottom. Right click the layer, and select ‘Create Clipping Mask’.
Then, with the Dark brown content box layer selected, choose the Rectangle Tool, and select 75px from the top of the box, between the brown sidebar and the main section. Make sure that the fill colour is the same as the content box (#1d0505)
Then open up the blending options, and ensure that there is a Gradient overlay (black to white) with 15% opacity.
Then in the space there, add in your menu items. I’m using the colour #afa688 and font size 24px. The font that I’ve used is Ornitons-Medium, but I reckon something like Myriad could work well.
Then, select the same font, and in size 60px (or less, depending on text), and a colour of #65481e write your heading (I’m writing ‘Grassroots Heritage’). Then open up the blending options, and add the ‘stroke’ effect with width 2px and colour # afa688.
After this, put in a paragraph of dummy text in # afa688 and size 18px Verdana.
Now select the rounded rectangle tool, and draw a rectangle between the ‘350px’ and ‘900px’ guides. The height of your box should be no less than 330px.
Then, get this image from sxc.hu, resize it to be slightly larger than your box, and then ensure that it is above the rectangle layer, then right click on the inserted image, and select ‘Create Clipping Mask’
Then, select the rounded rectangle and apply an inner glow with the following settings:
Then, just input some text for a company advert (I’ve used the font ‘Woodcut’ and written ‘Download the Summer Brochure’), and warped the text layer slightly)
After that’s done, get this image from SXC.hu, and rotate it to fit at the bottom of the content box. Then, select the magic wand tool with a tolerance of ‘60’ and delete the white space.
Place it above the content box layer, and above the sidebar layer, and create a clipping mask (see image below for how your layers should look).
The layer named ‘Shape 1′ is the content box layer (I forgot to rename it!)
Now this shoud be what it looks like
Then, to do the Sidebar ‘From the Blog’ section, we need to recreate the same style as our heading: Choose your font with size 24px and colour #65481e, then, in the blending options, apply a stroke of 2px afa688 and type ‘From the Blog’ and place it at the top of your sidebar. Then select the rounded rectangle tool and draw four 150px x 150px boxes. To each of these, apply the stroke with the following settings: Size: 6px, Opacity: 40%, and Colour: #a19c74.
Then, get four separate images of SXC.hu (I just took four random images from a search for ‘Farm’)
Then, place each image above a separate box, (both in position, and layer) and select ‘Create Clipping Mask’ (just right click the layer in the ‘Layers’ panel).
And that should be something near done!
There are, of course, plenty of other things to change – e.g. the Random coffee beans, etc – but this tutorial is designed to be a starting point, and for you to adjust to your preferences!
I’ve just decided that I don’t like this, so I’m going to use the same background image, and rework the layout for a different tutorial.
Please do comment and tell me how you’ve done, and if you’ve found these useful, subscribe for more posts to come!
Related posts:
