Gungurru Design Blog » Web Design

Design a Warm Nature Website Layout: a Photoshop Tutorial

Joe Swinn — Sat, 29 Aug 2009 17:54:51 +0000

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!

Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 2)

Joe Swinn — Mon, 24 Aug 2009 12:50:12 +0000

This is the second of a two part tutorial on Designing and Coding a Sleek Web 2.0 Style Website Layout. (Part one can be viewed here).

For this version, you will need your .PSD file from the original tutorial. If you want to start with what I got, please download the PSD file here. Note: There is one important change in this PSD file than the end result of the first part of this tutorial (the alignment of the ‘content-background’ layer). So if you want a better result, please download the PSD file.

First off, open up the PSD layout in Photoshop, and select the Slice tool (this is found behind the crop tool in the toolbar, default key ‘c’)

Now, make a vertical slice along the header background, right down to the zigzagged lines, and make sure that your slice will allow the image to be repeatable (this is really important for the CSS later on).

Then, make a slice around the logo (you can resize the edges of your slice by clicking and dragging them).

After this, slice around the top of the zigzagged lines which are below the ‘Call-to-action’ image. Make sure again that the image will be able to loop seamlessly horizontally. (Again, This is really important for later)

Then, slice around the 3 icon images (the globe, the clock and the twitter icon).

Then slice the Headings, A suitable part of the zigzagged grey footer, and the footer logo.

Now, there’s a really useful part of the ‘Slice Select’ tool (Different to the normal ‘Slice’ tool). This means that you can rename the sliced areas to a chosen name.

Just double click on the slice, and rename the parts to your choosing.

Here’s a list of what I’m renaming slices to:

Header zigzagged Background: ‘header-bg’

Header Logo: ‘header-logo’

Content zigzagged background: ‘content-bg’

Globe Icon, Clock Icon & Twitter: ‘icon-globe’, ‘icon-clock’ & ‘icon-twitter’

Headings: ‘we-are-global’, ‘we-are-fast’ & ‘twitter’

Footer Background: ‘footer-bg’

Footer Logo: ‘footer-logo’

Then click File>Save for Web & Devices (shortcut Alt+Control+Shift+S). Select PNG-8 as your image format, then click save. In the browse view, create a new folder on your Hard Drive named ‘site’. Then choose the following settings (ensure to check the ‘interlaced’ box, and click ‘Save’. Make sure that only ‘User Slices’ are exported.

Note: Photoshop should have automatically put the images into a folder named ‘images’ inside your ‘site’ folder, and if not, manually do this.

Now we have to manually delete some parts in the ‘header-bg.png’ and ‘content-bg.png’ files. Open them both up into Photoshop, and do the following (this is really important): Duplicate the background layer, and delete the original background layer. Don’t create a layer from background, or this won’t work. Now, select the magic want tool, and a tolerance of around 10, and delete the light blue colour right in the middle of the zigzag.

Now for the hardest part of this tutorial: open the info panel (default key f8), and draw a rectangular selection all the way around the ‘Call to action’ bit (the stuff with the blue gradient background), and make sure to include the zigzags within your selection. Now, in the info palette, have a look at the object size bit, and look at the height value (it has an H: 000 value, where 000 is your selection height – min is 360px) and remember the height for the next part:

Deselect that now (Ctrl+D / Mac Cmd+D), and move the entire ‘Call-to-action’ group into a new canvas. Make the canvas height the same height as your height value from the info palette earlier. Make the width 1300px, so that the background image will fit nicely inside.

Next, select the ‘Call-to-action background’ layer, and select the gradient tool with a linear gradient like so:

(a white to white gradient, with one side 0% opacity and the other side 100% opacity).

Then, draw white gradients from the outside in:

Then, try to centralise the content, but keeping the background in the same place.

Then, save the image as a jpg file in the ‘images’ folder that you have used earlier, and make sure that the quality is relatively high, so as to look sleeker in the final website.

That’s all we need to do in Photoshop! Now onto the coding! Arguably, we can say that the navigation hasn’t been exported yet, but I think we should leave that to CSS, but you can do an image sprite if you want to.

In the ‘site’ folder, create a new html file and call it index.html – then insert the standard tags and whatnot (i.e. doctype, head, html & body).

Then, create a new CSS stylesheet (call it styles.css) and link to it from the index.html file.

In the styles.css file, make sure that the body margin and padding are 0.
Header Styles
Create a #header div and apply the following:

#header {
width: 100%;
height: 201px;
background: url(images/header-bg.png) repeat-x;
position: relative;
z-index: 1;
}
#header img {
margin: 63px 0px 0px -470px;
border: none;
}

Here’s the HTML for the header:

And so far it should look like this:

Now for the Call-to-action image. I’m going to call it #callto in the CSS, because it saves so much time to write it out!

#callto {
width: 100%;
height: 360px;
margin-top: -10px;
background: url(images/call-to-action.jpg) center no-repeat #fff;
position: relative;
z-index: 0;
}

The HTML is the following:

And now it should look like this:

Next part is the main content section. In the CSS, we’ll create two divs: #top and #content (why two separate ones? The #top div is for the zigzagged lines at the top, and the #content is for the blue box underneath. The reason that the zigzagged lines cannot be a part of the #content div is because the background colour is set as #2142 and would ruin the effect)

#top {
width: 100%;
height: 28px;
margin-top: -15px;
background: url(images/content-bg.png) top left repeat-x;
position: relative;
z-index: 1;
}
#content {
width: 100%;
min-height: 500px; /* This means that the box will look a nice size even with nothing in it */
background: #002142;
padding: 10px 0px 40px 0px;
}

The HTML for the content box is the following:

And this is what it should look like:

Now onto the navigation – with thanks to desizntech for this (this is using a mod of their code)

#nav {
background: #002142;
padding: 0px 0px 0px 20px;
height: 40px;
list-style: none;
font-family: "arial rounded mt bold", arial, "lucida console", sans-serif;
width: 876px;
}
#nav ul {
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
margin: 0;
padding:0px 30px 0px 0px;
}
#nav a {
display: block;
line-height: 30px;
margin: 0;
padding: 10px 20px;
font-size: 30px;
color: #fff;
text-decoration: none;
background: #none;
}
#nav a:hover {
text-decoration: none;
background: #66789c;
}
.current {
background: #66789c;
}

What you may need to modify is the #nav width. This is what it is so that the Menu can be centred.
And here’s the html for it:



Home


Portfolio


Services & Pricing


 Contact

And that should be the navigation styling!
This is what the site should look like now:

Next, we need to style the three columns. I’m just going to go right ahead and style it as an unordered list…

#columns {
list-style: none;
width: 890px;
padding-top: 30px;
}
#columns ul {
margin: 0 auto;
padding: 0;
}
#columns li {
display: inline-block;
text-align: center;
width: 280px;
vertical-align: top;
}
#columns p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
text-align: left;
padding: 0px 10px;
}
#columns img {
border: none;
}
.global {
padding: 0px 10px;
}
.fast {
padding: 0px 10px;
}
.twitter {
width: 290px;
}

And here’s the html to go with it:







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.

Now it should look like this:

Finally, onto the footer styles:

#footer {
background: url(images/footer-bg.png) repeat-x left top #ccc;
width: 100%;
min-height: 100px;
margin-top: -16px;
}
#footer p {
width: 890px;
background: url(images/footer-logo.png) no-repeat bottom right;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
padding-top: 50px;
}

And here’s the html to go with it:



Copyright Gungurru Web Design 2009

Note: that last div closes the div align center from earlier…

And, if I’ve managed to give correct instruction, the site should look something like this:

And that concludes this tutorial: Please do tell me what you think and how you got on with the tutorial! And if you have found this useful, and want to see more, just subscribe for the latest updates (there’s an interview with Chris Spooner coming up soon)!

Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 1)

Joe Swinn — Fri, 21 Aug 2009 16:18:03 +0000

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…