How to create an amazing grunge layout

A few articles ago, we looked at the trends and features of grunge style; today we’ll create, step by step, a great layout in that style. We’ll choose a fictitious client, whom we’ll call (long live the imagination!) Your Inspiration Grunge and – following our readers’ suggestions – is a musician. Actually, as we’ll see shortly, they’re two Jazz musicians.

Are you ready? Let’s get started!

download
Versione: 1.0
Pubblicato: 19 March 2010
Dimensione: 6.77 MB
Download: Your Inspiration Grunge

Step 1- Preparing the document in Photoshop

As usual, let’s open a new 1680px document and insert guides 360px from the side margins, in order to enclose the main content of our layout in a 960px space.

Step 2- the central section

We’ll leave a 218px margin at the top (sufficient space to insert, a bit later, the logo and navigation bar) and we’ll draw a black rectangle 1680px wide by 450px tall.

Now it’s time to start getting a bit dirty with our paintbrushes. On the web you can find hundreds of brushes with great spot or stroke effects. In this layout, we’re using these and others easily found online. In this phase, there aren’t any rules to follow, all it takes is a bit of aesthetic sense and good taste: we’ll take one of our paintbrushes and, using black, we’ll dirty-up the edges, top and bottom, of the rectangle.

The result, which obviously will vary depending upon the paintbrushes used, should nonetheless be similar to this:

In this manner, our rectangle looks more “worn” and less linear. Now we’ll insert the graphic elements inside this section. Following the client’s indications and my imagination, I decided to first add a photo of the two jazz singers.

Searching on the web I found this beautiful photo on sxc.hu which I impulsively decided was perfect for our layout. So, let’s add it to the document.

But as you can see, the image is definitely too big, and it also has a background color different from our #000. Therefore let’s shrink the image (by clicking on Edit >> Transform >> Scale and holding the Shift button to reduce the photo size while respecting the proportions and without deforming it) and then let’s crop a small bit off the bottom edge.

We’ll choose the blend mode “Exclusion” to blend the image background with the section color and to ensure that the singer’s hood is slightly outside of the black section. This makes the image more dynamic and gives a nice “3d” effect.

Now we’ll position the polaroid image on the right side (there are many available on deviantart, here and here) which serves to enhance the graphics of the central section.

Inside the polariod, I’ll add an image which I find appropriate for our layout and which adds some life to the central section. It could be a photo, an album cover, or a video. In our case, it’s a poster dedicated to Jazz.

At this point we’ll add, on top of our polariod, a call-to-action button which, obviously must have a style fitting for the graphics developed up to this point. This means nothing web 2.0 rounded or shaded, instead we’ll use a nice orange brushstroke accompanied by a handwriting font.

With the paintbrush, we’ll draw two strokes on the polaroid, choosing two different shades of warm orange (#f69f09 and #f35209).

Now let’s write on the brushstrokes, using the beautiful font Hand of Sean and highlighting some of the words more than others. The aesthetic asymmetry permits you to focus attention on certain concepts more than others. In our case, with the likely phrase “click to see the video” the words to emphasize are “click” and “video”. The rest is there just to complete the phrase.

The central section is ready! Now let’s work on the navigation bar and the logo for the top section of the layout.

With the same brushes used for the strokes in the central section, let’s go crazy painting the top section, this time using a nice full-bodied gray (#e7e6e6). This will be the background for the links and the logo.

3. The logo and the navigation links

First of all, let’s insert the logo on the left side, created using the font Frakturika.

…and now let’s work on the navigation bar. For the links, I decided to use the same font used on the two buttons, Hand of Sean.

To make the menu more interesting, I’ve added backgrounds beneath the links: a piece of scotch tape (which you can download for free here and here). I’ve also slightly rotated some of the links to make the menu more asymmetrical and creative.

Discography is an important page, seeing as it presents and promotes the discs of the group we’re designing the layout for. Therefore, it’s important that this menu link in some way stands out from the rest of the other links. Instead of using black, we’ll use orange for the link, and we’ll replace the scotch tape background with a black brushstroke.

Here’s the result:

In the meantime, seeing as white is too bright a color, we’ll modify the background with a more appropriate light gray (#d7d7d7)

Our homepage is taking shape, and it’s not half-bad!

4. Adding a catch phrase

We’ll add a short catch phrase to the top section, this time using the font Bitstream Vera Sans, nice and legible.

At this point, using the path pen tool we’ll create a line that follows the edge of the singer’s hood and stops just before the letter J.

Making sure you’ve specified the paintbrush as 3px wide and colored white, now you just have to go to the path window (if it’s not visible on the right, check the window menu to see if paths are checked), right click, choose “trace path” and choose the pen tool.

Here’s the result:

We’ll repeat the same process to the right of the catch phrase, obtaining this result:

5. Homepage content

Now we can focus our attention on the bottom section of the homepage which will contain a brief description on the left side and the latest news on the right.

Before taking care of these two columns, we’ll write a short welcome message, once again using the font Bitstream. The result? Let’s take a look.

We’ll insert two paths here, too, as we did with the catch phrase at the top:

6. The footer

We’re almost done with our layout. Now let’s look at the footer which, just like the central and top sections, will have a black “brushstroked” background.

Inside the footer we’ll definitely want to add the client’s information and the copyright, and also add a small section dedicated to twitter, where we can see the latest messages. All things considered, social networks are very import, especially for a musical group that can attain success by finding a way to widely reach a public audience.

On the left side, we’ll position the information, written in the classic yet timeless verdana…

And on the right we’ll add our tweets atop a gray (#151515) “brushstroked” background. You can find this great twitter icon on webdesignerdepot.

Let’s take a look at our layout:

7. Final touches

There’s one thing missing: let’s dirty-up the background, which is a bit to linear, too clean. To do so we’ll use this texture, found on the web:

We’ll drag it into our document and work with blending methods and opacity until we’ve achieved a good result. The text must however remain legible and the background should show a slight grainy dirtiness, scratched, used.

Here’s our grunge layout!

Conclusion

After having analyzed the characteristics of the grunge style, we succeeded in drawing a nice template in this style, aesthetically pleasing and at the same time relatively simple to create. Download the psd file, freely modify the layout, experiment, create: grunge is a creative style that’s truly stimulating.

download
Versione: 1.0
Pubblicato: 19 March 2010
Dimensione: 6.77 MB
Download: Your Inspiration Grunge

Other articles in our guide:

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design. Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

56 comments

  1. Anon
  2. Shawn
  3. Yogesh.S
  4. jacqualine
  5. Tom

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by mlane: How to create an amazing grunge …
  2. Tweets that mention How to create an amazing grunge layout | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Mike Lane, Hal, Todd Libby, Kornelia Rybitwa, will finch and others. will …
  3. How to create an amazing grunge layout | Your Inspiration Web | Photoshop Blog
    [...] Originally posted here: How to create an amazing grunge layout | Your Inspiration Web [...]
  4. How to design a corporate/business layout? | Your Inspiration Web
    [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
  5. 40 Grunge Web Design Tutorials, Resources and Inspiration | tripwire magazine
    [...] How to create an amazing grunge layout [...]
  6. 40 Grunge Web Design Tutorials, Resources and Inspiration | tripwire magazine
    [...] How to create an amazing grunge layout [...]
  7. March’s Fresh Photoshop Web Layout Tutorials
    [...] 19. How to create an amazing grunge layout [...]
  8. Styles in webdesign: the features of a web 2.0 layout | Your Inspiration Web
    [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
  9. 60 Web Design Photoshop Layout Tutorials From 2010 - Programming Blog
    [...] 48. How to Create an Amazing Grunge Layout [...]
  10. 60 Web Design Photoshop Layout Tutorials From 2010 | pro2go Designs Blog
    [...] 48. How to Create an Amazing Grunge Layout [...]
  11. 60 Web Design Photoshop Layout Tutorials From 2010 « Huy Nguyen's Blog
    [...] 48. How to Create an Amazing Grunge Layout [...]
  12. How to design a web 2.0 layout? tutorial and psd | Your Inspiration Web
    [...] and trends of the web 2.0 style, today we will draw up a third layout. After the corporate and grunge …
  13. 60 Web Design Photoshop Layout Tutorials From 2010 — The Trending Monster Info
    [...] 48. How to Create an Amazing Grunge Layout [...]
  14. 60 bài hướng dẫn thiết kế weblayout cực hay « Vietxitin's Blog
    [...] 48. How to Create an Amazing Grunge Layout [...]
  15. 60 Web Design Photoshop Layout Tutorial |
    [...] 48. How to Create an Amazing Grunge Layout [...]
  16. The features of the vintage style | Your Inspiration Web
    [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
  17. Styles in webdesign: the features of corporate/business layout | Your Inspiration Web
    [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
  18. 30+ How to Design – Layout Tutorials inc.PSD | GFC Theme
    [...] yourinspirationweb.com – Grunge Layout Tutorial [...]
  19. 5 Resources – July 20th 2010 | InspirationOverload
    [...] Tutorial – How to Create an Amazing Grunge Layout (Photoshop) [...]
  20. How to design a layout in magazine style? tutorial and psd | Your Inspiration Web
    [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
  21. Great Tutorials « greengator: MMC 3260 / 5015
    [...] Leave a Comment If you haven’t noticed there are a lot of good tutorials online from “How to …
  22. How to create an amazing grunge layout | manic subsidal
    [...] View the Tutorial [...]
  23. How to create an amazing grunge layout | Your Inspiration Web » Web Design
    [...] How to create an amazing grunge layout | Your Inspiration Web [...]
  24. Photoshop to create the mainstream corporate website design _ classical case of 60 Web Page Design | Web Page Design Templates | Html5 Template
    [...] 48. How to Create an Amazing Grunge Layout [...]
  25. 60 Web Design Photoshop Layout Tutorials From 2010
    […] 48. How to Create an Amazing Grunge Layout […]

Leave a Reply

Current day month ye@r *