Gungurru Web Design Blog

We’ve 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, we’re going to create one in Photoshop. In the next few days, I’m going to create a tutorial on how to code the Photoshop Layout into a working (X)HTML & CSS website. Here’s a look at what we’re 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 you’re having difficulty, just ensure that ‘Snap to Guides’ is on (View>Snap To>Guides).

Note: The points won’t 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 that’s 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. That’s 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. I’m 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 don’t 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, we’re going to insert our ‘Call-to-action’ Image and text. Get a large sized image which is suitable, and insert it into your composition. I’m 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 – I’ve 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 – I’m using Arial Rounded MT Bold with a size of 60px and a colour of #002142. For the highlighted text that you can see, I’m just using a purple colour randomly chosen (#791887). My text is ‘We Promote. We Inspire. You Enjoy. Simple.’ And I’ll admit – it’s not that fun… but it’ll do. It’s 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, (I’m using Arial Rounded MT Bold again) with size 30px and colour #FFFFFF. Then, write out your menu bits (I’m 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, you’re going to need to get the free Function Icon Set. Use it – it’s an invaluable tool for your designs. For the purpose of this tutorial, we’re 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 one’s 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 (I’m using dummy text from http://www.lipsum.com , which can generate dummy text for you). For the headings (for me, “We’re Global”), I’m just using Arial MT Rounded, with the colour #C0C0FF, font size 36px, and for the rest I’m 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 I’d 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 – I’m 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.

Part 2 of this tutorial is available here, and please do subscribe, so that you can be updated with the latest posts. Do comment to tell me how you got on with the tutorial – if there are any problems, just ask…

Related posts:

1. Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 2)
2. Design A Shiny Premium Web 2.0 Download Button – Photoshop Tutorial
3. Design a Warm Nature Website Layout: a Photoshop Tutorial
4. Design a Vintage WWII Poster: a Photoshop Tutorial
5. Design an Online Advert Set in Photoshop

Tags: blue, design, graphic, layout, photoshop, sleek, tutorial, web, web 2.0, website

This entry was posted on Friday, August 21st, 2009 at 5:18 pm and is filed under Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.