Subscribe Via RSS

3827 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Rockband Layout #1 Tutorial

October 9th, 2007 in Photoshop Tutorials by Richard Carpenter

Rockband Layout #1 Tutorial

1 Star2 Stars3 Stars4 Stars5 Stars4 Votes, Rating: 5.00
Loading ... Loading ...

Create a new document 800×700 pixels, fill the background in the color #1e1414. Now your going to need a picture of an amp of some sort, i just searched google for guitar amps, or you can use my picture.

When you have your picture open it up in photoshop and copy/paste it onto your layout canvas, your going to need to resize it to fit, remove the white background and shave it a little bit. Firstly press “ctrl + T” to resize it, select your desired cutting tool and cut away the background. Once you have done that you will need to cut off the handle. Here how my amp looks.

You will notice that i have removed the wording above the buttons and nobs (see image below).

To do this use either the smudge tool or the clone stamp tool, ive already written a tutorial on smoothing, its basically the same and will explain the tools listed above in more detail. The smooting tutorial can be found HERE.

Once you have done all that your layout should look like this. (see link below).

CLICK HERE TO SEE RESULT SO FAR.

Duplicate your amp layer and goto “edit > transform > flip vertical” use this layer to make a reflection, ive already written a tutorial on how to do reflections. My reflections tutorial can be found here.

Once you have your reflection in place add your footer information.

Next place your band title and web address at the top using a nice grundge type font. The font i used is “base 02″ and the colors i used are #cd9385 & #fbcf87.

Using the same font but with the color #402b26 add your navigation titles where you smoothed out the amp words.

CLICK HERE TO SEE RESULT SO FAR.

Now lets start to build out content area. Select the rectangular marquee tool and draw a box across your amp fill with the color #fbcf87.

Set your “background color” as #46312c and goto “filter > brush strokes > spatter” when the options load up set “spray radius” to about 20 and set “smoothness” to about 5, click ok, you should be left with this.

Do the same again adding 2 lines at the bottom.

You will notice on the image above i have more than one color on my rectangles. To ahcieve this effect brush some grundge brushes over the yellow box before applying the spatter filter. Label your area’s.

CLICK HERE TO SEE RESULT SO FAR.

Thats it all done, now with some content added it could be made to look like this.

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 364 posts.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

8 Responses to “Rockband Layout #1 Tutorial”

  1. rig says:

    hi

    how do actually implement this?? is it stretchable or fixed size and how do u code in dreamweaver?? u need to use slices for implementing it.

  2. ADMIN says:

    well easy way i think would be to use it within a flash site, OR could slice it up and code it in css.

  3. Dylan says:

    The spatter option will not work by me

  4. Dylan says:

    How can you do that background color when you use spatter ?

  5. Gabriel says:

    Hey Richard, this is nice. Post more grunge-like templates for us =D

    But I think I’d use a Meteoro. Whatever, Marshall is veery good hehe

  6. David Quigley says:

    Spatter isn’t working for me either. HELP! D:

  7. Billy says:

    I’m using Photoshop CS4 and the splatter option won’t work for me, no clue why, other options are working, but not this one. I can see I’m not the only one having this problem, any ideas what could be going wrong?

  8. Zack says:

    to apply splatter effect, change your background color to #46312c then use paint bucket tool to fill the color outside of the rectangle. go to filter>brush strokes>splatter then adjust the settings and hit ok. simply use magic wand tool to select unwanted areas and delete. splatter effect won’t work on single colored layer.

Leave a Reply