Gungurru Design Blog

Design A Shiny Premium Web 2.0 Download Button – Photoshop Tutorial

Joe Swinn — Sat, 24 Jul 2010 13:53:52 +0000

We often see these glossy download buttons all over the Internet, and today we’ll be designing a button in Adobe Photoshop, and the button design is easily flexible for your own uses for your website.

Firstly, for the purposes of this photoshop tutorial, we’ll use a canvas size of 600px by 200px.

Once this is done, use the rounded rectangle tool, with a radius of 10px.
Then, draw the rectangle to your chosen size – If you’re wanting to write multiple lines of text, like the example, drag it to around this size:

Then, open up the blending options for your brand new shape, and apply the following effects:

(For the outer Glow, I’m using the colour #e9e9e9)

(For the gradient Overlay, I’m using a gradient of #c4c4c4 to #ffffff – Note: I have checked the ‘Reverse’ box here)

(For the Stroke, I’m using a gradient of #ff5b5c to #febbbc)

Now for the next step (creating a white glassy effect), there are, I know, a number of different methods of doing it.
The method I use is to use the pen tool to create a shape directly above the original layer like this, and I’ve filled it with White (#ffffff):

Drop the Opacity of this new layer to 55% and already, the button is starting to take form.

Now, using a 54px Arial Bold font, with colour set to #444444, and the Tracking set to -25, write the text ‘Download’ (or whatever text you want to have here)

Then apply the following styles to it:

This gives an awesome letterpressed text effect. The gradient overlay is hidden enough to be discreet, but still gives a nice feel to the button.
Then, create a new line (in the same text layer), and using a size 24px of the same font, with the colour #e8e8e8, write your secondary line of text.

For Usability, it is often important to have the minor details in a smaller, lighter coloured font here, as the users can easily see the information which is important to them.
Next, we’re going to create the ribbon element which overlaps the button, with a little 3d-style effect to add another dimension to the button.
Select the Pen Tool, and create the following shape. If you need to (like I have), use a few guide lines to help align your arrow. It really doesnt matter what colour the arrow is, as we’re adding effect to it soon, which will change that.

Then, apply the following styles to your shape:

(For the Inner Glow effect, I’m using the colour #80271d)

(For the Gradient Overlay, I’m using the colours #871508 and #e4250f for each end of the gradient)

Next, for the 3d part below the ribbon, select the pen tool, and draw a shape like so behind the ribbon. Give it a dark red colour (I’ve chosen #990000)

For the arrowheads inside our glossy ribbon, select the Custom Shape tool, and use the ‘Arrow 2′ shape.

With that, draw an arrow, rotate it 90 degrees to be pointing downwards and to fit inside the ribbon, and change the shape colour to white (#ffffff).

Then Apply the following Inner Shadow, and duplicate the layer and place it just above:

And there you have it! A premium-style download button, created in Adobe Photoshop!

Now it is easily possible to adjust the colours of the buttons, and get some really good results – here’s what I got:

If you want a copy of the project files, the PSD file can be downloaded here (file size is 280KB)

Thanks for reading this graphic design tutorial – if you have any thoughts/improvements, feel free to comment!

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!

Design an Online Advert Set in Photoshop

Joe Swinn — Wed, 26 Aug 2009 21:35:34 +0000

It’s always good to know how to design online adverts – even if it means designing a ‘Your Ad Here’ ad, it’s still great to have one place where you can go to get all the information for Ad sizes, Ad Creation and Ad Animation. Hopefully, this tutorial will be a great resource for future reference when it comes to creating an online advert.

Ad sizes:

All of the major ad networks use a standard advert size (presumably so that publishers can easily switch their site from another advertising network), and this is great for advert designers.

Square/Almost Square shapes:

Large Rectangle: 336px x 280px

Medium Rectangle: 300px x 250px

Square: 250px x 250px

Small Square: 200px x 200px

Button: 125px x 125px (This type of advert can be seen in the right hand side of this page)

Small Rectangle: 180px x 150px

Skyscraper ads (Vertical Rectangles)

Vertical Banner: 120px x 240px

Skyscraper: 120px x 600px (click thumbnail for larger view)

Wide Skyscraper: 160px x 600px (click thumbnail for larger view)

Banner ads (Horizontal Rectangles)

Leaderboard: 728px x 90px (Click the image to see the full size)

Banner: 468px x 60px

Half Banner: 234px x 60px

Ad Tutorial

Now, we’re going to make a series of ads in Photoshop, in a modern, glossy style. The magical thing about these ads is that once a ‘Large Rectangle’ (336px x 280px) has been created, we can just move the elements around, and then resave the image. This is great for creating a series of adverts.

Create a new canvas in Photoshop – 336px by 280px.

Then draw a rectangle which covers the entire canvas. The colour I’m using is #b2ff67.

Then, open up the blending options, and apply the following settings:

The gradient is from #5d9724 to # b2ff67.

Next, select the text tool, with a font size of 60px, and using Rockwell font (You’ll have it if you have Microsoft Word. If not, use a font like Clarendon) and make sure that it’s Bold, and White (#ffffff). Write your main text in the centre of the page, and then, on a new line, reduce the font size, and write your motto. Note: Try to make the motto take up the same amount of space as the entire first line – its good visual impact.

Then, open up the text layer’s blending options. Apply the following styles: (the red-brown colour is #944023).

The stroke’s colour burn settings are great, so that it goes well with the background. If you want to polish off the effect, change an important word to a light colour (I’m using a light pink, because it’s part of the Gungurru site’s colour scheme).

Then, place the text right in the middle of your canvas, and select the pen tool. Then, draw a sun-rays design, like so, and then change the colour to #FFFFFF (if you haven’t done so already). Make sure that the rays are relatively large, so that you can resize the canvas for different advert sizes, and still have some awesome rays.

If, like me, you haven’t had all of the points really neatly in place, just select the ‘Direct Selection’ tool, and modify the inner paths. Try to get the like so, so that the rays look as though they’re coming from a source:

Then, change the blending mode to overlay, and the layer opacity to 30%.

Here’s what I’ve got upon saving the file as a Jpeg:

Now you can call that a complete work – and you can use this as-is, but if you want to animate this, read on:

Animating the advert

If you want to animate your advert (note, some advertising networks don’t accept animated adverts), duplicate your text layer, and bring it to the front of the canvas, and change the text to something advert-like. (Don’t worry that it’s overlapping the text that’s there at the moment). I’ve written “Tailored Websites from only $$$)”. Then, make the visibility of the new layer invisible (click on the eye icon next to the layer)

Then, open the animation settings box (Window>Animation), and do the following:

Change the view mode to ‘Frame Animation’ (a little button at the bottom right) and there should be one thumbnail which has a time length written underneath it.

Click on the time, and change the time to 2.0 seconds.

Then, create a new frame (there’s a little icon below that looks like the ‘new layer’ button)

With the new frame selected, make the ‘Tailored Websites…’ layer visible, and make the Original text layer invisible.

Then, to save the file, save for web & devices (Ctrl+Alt+Shift+S), and choose the following settings:

Now the animation is done! Here’s the result that I got:

Changing the ad size

If you want the advert to be all kinds of sizes, just change the canvas size, and move the elements to match:

I’ve changed the size to a ‘Banner’ size:

That concludes this tutorial! If you have found this useful, please do subscribe – I’ve got some new PSD to HTML tutorials coming up soon, and please do comment to tell me how you got on with this!

Why We Love Spoongraphics: A Visual, In-Depth Examination

Joe Swinn — Tue, 25 Aug 2009 09:34:02 +0000

Okay, It’s a fact. Spoongraphics (run by freelance graphic designer Chris Spooner) is one of the biggest Graphic Design Blogs around on the internet. If you’re a graphic designer, the chances are pretty high that you know who he is, and you’re probably subscribed to his blog, too.

Over the years, Chris Spooner has been a great inspiration to me, for his brilliant design (my personal favourite is the MyNiteLife logo – see the design process here) and his style of communication. But enough of the blubbering… At the end of this post, there is a short QA session with Chris Spooner! Read on to see it!

When you first log onto blog.spoongraphics.co.uk, you are confronted with this beautiful header:

Now, that seems to top every other header I can remember. Just look at the great use of swirl vector shapes, circles and arrows, and the paper-aeroplane, which provide the perfect backdrop to the ‘Post-it Note’ styled header. It’s some real eye-candy, and it brilliantly sets the colour scheme of the site. There’s really too much going on to describe, but it definitely makes a great impact.

The next thing that you notice is the brown-paper styled subscribers box, with the paper clip holding it to the header. The attention to detail is astounding, but the best part seems to be the rollover on the RSS Feed:

A really good part is the lucrative images used at the beginning of the tutorials – the image is a really strong part of getting you to read that post: and it’ll be worth it too: here’s one of the latest tutorials.

Notice the faint dotted border around the image, and the great ‘Read More’ button with it’s arrow.

Delving into the CSS, here is a look at the fonts used for this:

Title: GraublauWeb, Trebuchet MS… With a colour of #707070 and size 22px

Text: Arial, Colour #333333 and size 13px.

Next, we’ll look at the Sidebar Title – the background image is akin to a floral swirl, and it’s faint colour subtly adds to the beauty.

The search bar is delicate, and has a really fun style to it: It keeps within the ‘Post-it note’ or ‘page curl’ idea, and really makes the search important. What I find on some blogs, is that the search bar look similar to the newsletter sign-up form, or that it is part of an advert program. Instead, the text titled “I’m looking for…” will certainly not confuse you.

Next, just look at the Bullet Points: they’re a great use of bit’s of the Spoongraphics Logo.

And as a final part to the Blog section of the site: the jaw-dropping footer:

Now I have no idea how such a being can be created by mortals, but one thing’s for sure – it’s amazing. It’s been featured on countless posts about footers (here’s an example) and the brown paper texture is great, coupled with the beautiful fonts in light red, and the vector illustration above (I have no idea why it’s there, but it’s definitely the best bit)

Now onto the main portfolio site:

That’s definitely one of the largest content-sliders seen in a long time. Here are some things to notice about this page:

(The effect of hovering on the logo) yes, forgive me – this is a screenshot of the portfolio page, not the home page…

Look at the two columns used, the fact that the links have a beautiful background, and interestingly, the Asterisk next to his name: it’s a link to his personal blog!

Now onto the about page – look at the Round-up section and the detail there:

The fingerprints really help to build the ‘Dossier’ effect, and the worn effect on the word “Who?” is perfect. The signature is also a work of art!

An important thing of note is that the background is not a single colour, but a texture. It’s not immediately obvious, but if the site had a plain colour in place, it would look much less interesting.

The Portfolio page has a great view of Chris’ work, which displays in a great thumbnail view, but when clicked opens up in a lightbox style, as a huge content slider:

One of the joys of typing in a misspelt URL on spoongraphics.co.uk is that you are confronted with a brilliant 404 page:

The light humour is great, and the image (one of Chris’ Own) is just brilliant for those fortunate to come across it!

Short interview with Chris Spooner

1) What inspired you to use the colour scheme and collage effect that you use?

The blog started out as an extension of my main portfolio (but soon became the primary site on the domain!), so the original design simply continued my personal brand of browns/beiges. As the site developed I wanted to build something more creative, and paper based designs and collage effects are just styles that link in with my personal taste. Being pretty much a personal site, I had the creative freedom to build something that I liked.
2) What (do you think) is the most important part of any Portfolio/Blogging website?
I think the connection to the person behind the site has become an important part of any site, whether it’s a blog, portfolio or full business site. Having a personal dialect and links through to the owner’s personality with photos and casual profiles can really help users interact with the site and it’s owner.

3) How do you avoid designers block (if you have it)?
Sometimes I’ll simply not feel like designing anything, or things just won’t go right. Luckily though there’s always something else I can look into while the block is there. For instance I publish a creative roundup of web designs and design articles each week, so heading off and putting this post together can help clear my mind. It’s more of a straight forward task that doesn’t require any creative thought, plus, it can often help develop new ideas by checking out the content others are publishing.

The last word:

So what can we learn from Chris Spooners Website, for use in everyday design?

The header is king – it’s the first thing people see, and therefore, one of the most memorable bits.
Attention to detail – it makes Chris’ sites all the more interesting to browse (e.g. Search bar, rollovers, Bullet Points)
Fonts are the word! – They really build on your theme, so choose your fonts wisely.
Footers – they’re more interesting if the’re fun (mine’s not really anything to write home about though…)
Keep it friendly – it gives a good vibe
Leave no page on your site behind – Chris has made every page beautiful…
Have an interesting, but very User Friendly portfolio page.
404 Pages are cool – keep them that way (I’ve changed mine for the occasion)

Many thanks to Chris Spooner for allowing me to write this post!

Please do subscribe for more posts to come, tutorials, interviews and more.

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…

Design a Vintage WWII Poster: a Photoshop Tutorial

Joe Swinn — Tue, 18 Aug 2009 20:28:56 +0000

Ok. As a nice easy start to my tutorials, we’re going to create a World War II themed poster. Here’s a look at what we’ll be creating:

Now we’ve all seen these kinds of things in museums, history books, etc. It’s actually dead-simple, and gives a great end result, too.

Create a new photoshop file – make the canvas size 1500 x 1000

Get a large sized worn paper texture – I’m using http://www.sxc.hu/photo/319356 from SXC because it’s just right for the job.

Place the image on your canvas, and do some adjustments to make sure that it fits nicely. Note: If you can’t see the transform controls, just check the ‘show transform controls’ box at the top. When it is suitably adjusted, apply the transformation by selecting any tool from the panel, and then clicking ‘Apply’ in the dialogue box.

Get a normal picture of any flag of choice. I’m just using a large sized image of the Union Jack (the UK flag) from Google – try to get one of the flags which is a direct-on image of the flag.

Insert the flag image into your canvas, and make sure that it takes up the whole size of the canvas. Then select the flag layer, and apply the wave filter (filter>distort>wave) with the following settings: Now your flag should look like this. If it doesn’t, just play around with the settings until it looks similar.

Now drop the Opacity of the flag layer to ‘5%’

If necessary, delete any bits of white space around the old paper, to make the next step look more authentic. Do this using the magic wand tool, with a tolerance of around ‘10’. Just select the white space and delete.

If you look closely at the edges, the flag seems to go over the edges of the paper. To make the flag keep to the same size as the paper, ensure that the flag layer is above the worn paper layer, and then right click on the flag layer, and select ‘Create Clipping Mask’. This ensures that the union jack does not go over the edges of the worn paper.

Next get a good image of a plane. I got a great image of a spitfire off SXC: http://www.sxc.hu/photo/520632 now insert this into your Photoshop document.

Resize the image, so that it fits nicely inside the paper, with plenty of space around. Then use the magic wand tool to delete all of the white space around the plane. If you notice, the plane has also joined the clipping layer. It’s not really important, but if you want to remove this, just right click on the layer and select ‘Release Clipping Mask’. Then place the plane inside the top half of the canvas.

Now select the plane layer, and apply the ‘Dry Brush’ filter. Do this by selecting Filter>Artistic>Dry Brush. Now apply the following settings: Brush Size: 10 Brush Detail: 0 Texture: 1. Hit ‘Okay’ to apply the filter. Feel free to play around with the settings if you want to tweak the effect.

As you can see, the image of the spitfire is now less Photo-realistic, and now more artistic. This is just the effect that we want for our poster. To really make the effect complete, and to make the image blend into the paper, change the blending mode to ‘Linear Burn’. This darkens the image, and also lets the creases of the paper show through, to give a worn look.

Now select the ‘Pen Tool’ and make the Fill Colour #3a3a0c. This is a dark green colour. With that, draw a slanted bar across the canvas. Do this by just clicking where you want the four corners.

Next, drag the ‘Bar’ layer to just above the flag layer, and then right clicking, and selecting ‘Create Clipping Mask’. Now the bar will not cross beyond the (uneven) edges of the paper. Now change the blending mode of the layer to ‘Overlay’.

If it is necessary, try to align the rotation of some of the plane with the angle of your bar. This is just for layout purposes.

For the next step, you will need two good WWII style poster Fonts. I am using these two free fonts: Komika Axis (http://www.urbanfonts.com/fonts/Komika_Axis.htm) and DayPosterBlack (http://www.fontstock.net/2216/dayposterblack.html). Install the two fonts, and restart Photoshop.

Pick the font Komika Axis, and choose the Colour #999999 with a font size of ’60px’ and write your small text (for me, it is: ‘We’ll soon be back in’) then hit enter, and on the new line, change the font size to ‘120px’ and the font colour to ‘#333333’ and write your second lot of text (for me, it’s ‘Good Old Blighty’ – there’s nothing like a bit of old-fashioned slang!) Then select the blending mode, and change it to ‘Multiply’ and rotate the text to fit inside the bar.

Then select the font tool again, and change the font to ‘DayPosterBlack’ and the colour to ‘#3e3e00’ with a font size of 70px. Then, in the Top-Right corner of the canvas, write your text (I’m writing ‘Not Long, Chaps’). If any other bits of the composition need moving, so that your text can fit in, just shift it or resize it to fit.

Next, find an image of a WWII soldier. I found this one (http://www.sxc.hu/photo/306300) from SXC. Bring it into your composition, and erase everything but the soldier. The easiest way to do this (for a beginner) is to use the rubber tool to go around the edges. I just used a soft-edged 21px rubber-brush-tip. You don’t need to be too accurate – just go around the edges roughly because we’ll soon be using a filter on the image.

Resize the soldier a little, and put him in the bottom-left corner, and add the ‘Dry Brush’ filter once more: Filter>Artistic>Dry Brush with a Brush Size: ‘0’ Brush Detail: ‘10’ Texture: ‘1’. Hit ‘Okay’ to apply the filter. Now change the blending mode for the soldier to ‘Multiply’.

And that’s it! More tutorials and posts will be on the way. If you need, I’m usually around to help: email me at joe@gungurru.com

If you found this tutorial to be useful, feel free to subscribe to the Gungurru Design Blog.