Create a Sleek Web 2.

0 Style Website Layout: a Photoshop

Tutorial (Part 1)

Weve all seen and marvelled at some of the brilliant business websites out there (have a look at
http://elitebydesign.com/30-most-inspirational-business-websites/), and today, were going to create
one in Photoshop. In the next few days, Im going to create a tutorial on how to code the Photoshop
Layout into a working (X)HTML & CSS website. Heres a look at what were going to make:

Create a new Photoshop Document with a size of 1000px by 1200px

Drag out two vertical guides at 100px and 900px, so that we can have a neat border to work with.

Now drag two horizontal guides at 190px and 200px. If you have trouble getting these to be accurate,
just zoom in, or use the Info Palette (default key F8)
Next, to create a zigzagged header background, create a new layer named Header and select the pen
tool, with a fill colour of #003366 (Dark Blue) and, while holding down shift, create a zigzagged line
all the way along the page (the shift key ensures that the angles are at 45 degrees), using the vertical
guides as aiming points. If youre having difficulty, just ensure that Snap to Guides is on
(View>Snap To>Guides).

Note: The points wont exactly fit on the page, so just go over the edge of the page a little to keep the
effect going.
Now, create the rest of the header by clicking in the top two corners while holding shift (to keep the
pen path straight), and finish the path by clicking back on the first point. Now you should have the
following shape:

When thats done, open the Blending Options, and apply a Gradient Overlay with the following
settings: Blend Mode: Multiply, Opacity: 35%, Style: Linear, and a Black to White Gradient. Thats the
header shape now done!
For the Web 2.0 Logo, select the Text tool, and choose a suitable font Dzine Blog have a great round-
up of free Web 2.0 fonts. Im going to use Arial Rounded MT Bold (most computers should have this)
and choose a font size of 60px and a colour of #76a6a6 (Light Blue). Then write your logo text, and
align it about half way up the header, with the left margin to its left.
Open up the text blending options: add a gradient overlay with a gradient which is black to white and
drop the opacity to 30%. Then add a Stroke, with the following settings: Size: 8px. Fill Type gradient
and the gradient should be #FFFFFF to #C2C2FF. Then hit OK. Then, in 18/24px white, write your
slogan underneath the logo.
If you love to keep your layers neatly organised, create a new group called Header and put all the
layers except the background layer inside it.
Now, we want to create the bottom of the page, and leave space for a Call-to-action image. Select the
Header layer, and duplicate it (Right Click, Duplicate layer). And take it out of the Header Group.
(Drag it above the Header group in the layer box) Now rotate the shape 180 degrees, and apply the
transformation.
Now, move the shape so that there is plenty of space between it and the header, and remove the
Gradient Overlay (open blending options, and then uncheck the Gradient Overlay box). Next, change
the colour of the shape to #002142 (If you dont know how to change the shape colour, just double
click the thumbnail colour in the Layers Box, and change the colour.
Then, with the Header Copy Layer selected, choose the Rectangular Marquee tool, and drag a
rectangle from the bottom of the shape to the bottom of the canvas.

Select the paint bucket tool, and fill the selection with the same Colour (#002142). If Photoshop asks if
you want to Rasterise the shape, click Okay, and then you will be able to fill the selection with the
colour.
Next, were going to insert our Call-to-action Image and text. Get a large sized image which is
suitable, and insert it into your composition. Im using Light Effects from SXC Images
(http://www.sxc.hu/photo/454273) which is great as it has loads of interesting shapes with the light.

Now, move the layer right to the back of your composition, just in front of the background layer, so the
image will now appear to be in between the zigzagged lines, and move the image so that you get an
interesting part in the gap. If you need to, adjust the colours or lightness Ive changed the opacity of
the image layer to 40%.
Create a new group called Call-to-action and place the image inside that layer. Also, make sure that it
is below the other layers, so the rest of the image does not show.
Then, create your call to action text Im using Arial Rounded MT Bold with a size of 60px and a
colour of #002142. For the highlighted text that you can see, Im just using a purple colour randomly
chosen (#791887). My text is We Promote. We Inspire. You Enjoy. Simple. And Ill admit its not
that fun but itll do. Its important to have highlighted text on your website, because it really makes
the good bits stand out (just have a look at http://www.gungurru.com and see what colours stand out

The next step in this tutorial is to get your image. I suggest that it should be an image of your work, a
pretty icon, or important image. I used some screenshots of some of my work from Safari (because it is
great eye-candy), and rotated them slightly. The rotation is great as visual impact. Just make sure that
they are in the Call-to-action layer, and behind the text.

Create a new group called navigation. Inside this, select your font tool, and in your favourite web 2.0
font, (Im using Arial Rounded MT Bold again) with size 30px and colour #FFFFFF. Then, write out
your menu bits (Im writing Home Portfolio Services & Pricing and Contact) and align them
evenly between your two side margins.

After this, select the rectangle tool, with the colour #FFFFFF, and draw a rectangle shape around the
Home Text. Give plenty of room at the side, and space at the top and bottom. Then Drop the Opacity
to 40%, and place the layer behind the Home Layer.
Create a new group called Content, and stick the Header-Copy Layer into it. For the next section,
youre going to need to get the free Function Icon Set. Use it its an invaluable tool for your designs.
For the purpose of this tutorial, were going to use the following icons: clock_48.png, globe_48.png &
twitter_48.png open them with Photoshop and stick them on your composition, in the Content
group, in front of the Header-copy Layer. Then rename them so you can remember which ones
which, and rename the Header-Copy layer to Content Background.
Now, align the 3 icons so that they get a third of the canvas each. Put the Globe on the left, the Clock in
the centre and the Twitter icon on the right.

Now, under each icon, style your text (Im using dummy text from http://www.lipsum.com , which can
generate dummy text for you). For the headings (for me, Were Global), Im just using Arial MT
Rounded, with the colour #C0C0FF, font size 36px, and for the rest Im using the font Arial With the
colour #CCCCCC, and font-size 18px. If you want to highlight certain bits, just use the purple colour
from earlier (#791887).

After this, duplicate the Content-Background Layer, and move it right to the bottom of the canvas,
and place it in a new group called Footer. Then select the paint bucket tool, and fill the shape with the
colour #CCCCCC.

Then, using the text tool, and with Arial, #791887 and a font size of 14px, write your footer copyright
text. You can also put a small version of your logo there too.
And who would risk making a Web 2.0 theme without a glossy Web 2.0 badge! (I forgot this in up until
now, so Id better add it in)
Select the Polygon tool, and make sure that it has 20 sides, and under Geometry options (the little
arrow next to the custom shape icon), tick the Star Box and the sides are indented by 10%. Ensure
that the colour is #791887, to keep with the style of the layout.

In the Call-to-action Group, draw out the shape in front of the image that you had selected (for me, it
was the rotated screenshots).
Now open up the blending options, and apply the following settings:
 (The Purple colour in the Stroke Settings is #791887)
Then just add your text Im using the Web 2.0 Font again, with size 40px and Colour #CCCCCC.
Then select both layers, and rotate them to a stylish angle.

And there we have it a Sleek(ish) web 2.0 themed website.