Web Design for My Chemical Romance Rock Band

Tags: template, website

16,088 views

11 Comments

(20 votes, average: 4.55 out of 5)

Hey guys, who is the big fan of My Chemical Romance, come here. I show you how to design a web template inspirited from My Chemical Romance. Firstly, we need to define My Chemical Romance’s styles. Looking at their website, it is dark, pale, funky, and mysterious. So we gonna follow that charateristics [dark, pale, funky, and mysterious]. There is some blood on their site as well, but I don’t like blood actually; and you may add blood to your design later ;-).

A couple of raw materials should be prepared. Okie, surf to Stock Image Exchange, and you would find those images.

We also need a My Chemical Romance logo. Go to http://www.mychemicalromance.com/ and please press print screen for the logo.

Alright, here we go. Let’s open your Photoshop, and I am now using Photoshop CS3 for the tutorial :-)

Step 1: processing My Chemical Romance logo.

Open your have-just-print-screen logo, and double click on the Background [layer panel] to make it become a layer.

Then, use Polygonal Lasso Tool to select the Logo area (just like you take a sissor and cut in real life)

like this..

then cut it..

after that, choose Magic Wand Tool to select the black background surrounding the logo, and delete it.
Note: you will need to uncheck the ’Contigous’ option, by do it that way, your Magic Wand is able to select all the black areas.

In order to make your selection edge smoothly, let’s go to Select > Modify > Feather

A smooth selection edge @ 0.5 pixel might be good enough.

In the end, you should have something like this..

Step 2: Make the logo rusty :-D

Use your previous download artwork

And drag it over the logo layer..

Okie, we are starting to do some magic here! Make sure that the rusty image is right over the logo layer, and no layer else is in between.
Right click on the Rusty Layer [on Layer panel], and choose ’Create Clipping Mask’.

The result should be..

Now you can move the Rusty layer to cover all the logo, scale it if possible.
Once you are satisfy with your Rusty Layer, let’s link these 2 layer together, so when you move 1 layer, the other follows accordingly.

NOTE: Clipping Mask is mainly used in this tutorial, so make sure that you get use to it at the begining.

Okie, the logo is ready. We move to the next step.

Step 3: Create the canvas for your design.

Make a new Photoshop Document, with the width @ 1280px, and height @ 900px.
The above resolution is based on my screen, you can change it to you screen.

Double click to the Background [on the Layer panel] to make it become a layer.

Then, go to that Layer Property, by double click over the layer [on Layer panel]. A box opens.
Select ’Gradient Overlay’.

Change the gradient from 100% Black to deep Grey.

Then drag-and-drop the logo you made before, into the document.

Drag the Square paper into the document..

Give the Square Paper some shadoe to make it look like 3D.

Then drag the scratched wall into the place..

Once again, we gonna do the ’Clipping Mask’. Make sure the Scratched Wall layer is right onto the Square Paper layer.
Then, right click on the Scratched Wall and choose ’Create Clipping Mask’

And you have..
(let’s play with some color adjustment to make the wall darker)

Step 4: add identity object to the layout, to create the look and feel.

Darkness and Mystery remind to some crime, so let put a finger index, that image often apears in crime movie ;-))

Then choose ’Darken’ blend mode, and adjust the Opacity for the Finger Index layer.

and you get this..

Next, add a paper for information, like introduction text.

Give the Paper layer some shadow..

Add some text.. Use ’serif’ font for reminding of the old time.

For the Gallery Show, we would put some frames, let’s say six frame, a special number.

Dellete the white space..

Because of the pale style, we will decrease the saturation of object’s colors.

Then duplicate one Frame into six..

Now, add the content to these frame..
These pictures can be download from music sites, or you can put your own photos. They will the thumbnails.

Resize the photo to fit in the frame..

Do similar to the rest..

Alright, what make you think of My Chemical Romance, I am talking about Brand Indentity here.
They alway use a symbol in most of their shows and website - the Fleur-De-Lis symbol.

The above decor will be the scroll bar.

Put some a music machine and a microphone..

Next, create a place to post a big photo of My Chemical Romance, big avatar.

Draw a rectangle shape..

Then rasterise the shape into bitmap..

Create a blur edge to bring a mood of mistery.
Select a smaller rectagle, then go to Select > Modify > Feather.

Choose the Feather of 8..

Then cut the Rectangle, and delete the extra part.

Drag a big photo of My Chemical Romance into the scene..

Here we go to another problem needed to solve. If you use a high resolution photo, needless to care about quality; However, most of the photos over the Internet have been compressed strongly due to the bandwidth.

I show you how to enhance a low/avarage photo into a good one, with just a few clicks.

For this task, I used Topaz Vivacity filter | a thirt-party Photoshop Plug-in.

After install the Plug-in, you would see like that..

This plug-in is time-saver, I’ll say ;-)

Then choose the photo as ’Clipping Mask’ and you have..

Alright, just a few step away, and we finish the artwork.

Add the last object, the metalic panel.

Change the color of the Metal Panel into yellow orange..

Make it pale..

Add some text over it.. (that could be your name.)

Finally, add some black blood by using blood brush (download here OR you can find and download these brush on Interner, it’s pretty easy to find, just google them.)

Hey yaa, our artwork is done !!!!

Download the PSD here

If you want to have the template, 9tutorials.com provide the package [xHML/CSS] @ US$5

(After purchasing the package will be sent to your mail box within 24 hours)

Copyright 2008 @ 9tutorials.com. All Right Reserved