XD Designs
« Grunge Interface Tutorial »

Welcome Guest. Please Login or Register.
Sept 3, 2010, 2:18am

[Home] [New Topics] [Help] [Search] [Login] [Register]



XD Designs :: Other :: Free Tutorials :: Grunge Interface Tutorial
   [Search This Thread][Send Topic To Friend] [Print]
AuthorTopic: Grunge Interface Tutorial (Read 9,230 times)
Matt
Graphics Admin
*
member is offline

[avatar]

Great admin or greatest admin?


[homepage]

Joined: Mar 2006
Gender: Male
Posts: 4,891
Location: Indiana
Karma: 54
Grunge Interface Tutorial
« Thread Started on Jul 10, 2007, 12:51pm »
Like what you read? Why don't you take a few minutes to register? Then you'll have full access to all of our tutorials.



Grunge Interface Banner Walkthrough

If you are interested in creating a Grunge Interface Banner like This
one, this is the tutorial for you. :)

First, start off with a 700x200 px banner with a 2a2a2a background color.

[image]


Next, use the pen tool, marquee tools, or whatever your personal choice is for creating shapes in PS. Fill it in with white. This shape will be your banner's main background.

http://xd-designs.com/Tutorials/Grungeinterface/Image2.png


Next, use the Gradient tool, with the foreground colors of black and white, to create a nice background gradient. You will have to use the gradient that makes the gradient go from your foreground color
to transparent. Only make the gradient lines Vertically while holding down shift so that they are straight. I like to start by making two giant black areas at the top and bottom and then going over them
with white. Remember, if you don't like what you get, or the colors are too light or dark, try going to Image>Adjustments>Invert. If it's dark, that will make it light. If it's light, that'll make it dark.
If you like the color but not the gradient, you can go to Edit>Transform>Flip Vertically. That'll keep it the same color.

http://xd-designs.com/Tutorials/Grungeinterface/Image3.png


Now that you have the right background, it's time to mess with the blending options. Left click on the layer in the Layer's Pallete and select blending options.

http://xd-designs.com/Tutorials/Grungeinterface/Image4.png


Now copy these settings:

http://xd-designs.com/Tutorials/Grungeinterface/Image5.png


http://xd-designs.com/Tutorials/Grungeinterface/Image6.png


http://xd-designs.com/Tutorials/Grungeinterface/Image7.png


This is what I have. Yours will probably be different.

http://xd-designs.com/Tutorials/Grungeinterface/Image8.png


Next, take the Elyptical marquee tool and make a big circle partially on the banner. Fill this layer with white and lower its opacity to somewhere between 1% and 5%.

http://xd-designs.com/Tutorials/Grungeinterface/Image9.png


Repeat this on the otherside.

http://xd-designs.com/Tutorials/Grungeinterface/Image10.png


Now, near the bottom of the banner where you want your menu buttons to be, take the pencil tool at a size of 1px and the color black. Make a horizontal line accross the bottom of the image
while holding shift to make it straight. You should get something like this:

http://xd-designs.com/Tutorials/Grungeinterface/Image11.png


Next, choose a very light grey color and do the same right below the black line. You should get something like this:

http://xd-designs.com/Tutorials/Grungeinterface/Image12.png


An now for the fun part. Go grab some grunge brushes on deviantart.com by searching for them and just start brushing over the interface, alternating from black to white until you get
something that you like. Change that layer's blending option to overlay. You should have something like this:

http://xd-designs.com/Tutorials/Grungeinterface/Image13.png


Next, I made an orange orb with the elyptical marquee tool on the top left hand side while holding down shift. I filled it with an orange background and gave it a gradient overlay for some depth.
Then I gave it a bit of gloss by putting a white layer over it at about 5% opacity. I also added some grunge over it. I'm not showing you this because it may not tie into your banner if it doesn't
have a spot for an orb. Anyways, this is what I got:

http://xd-designs.com/Tutorials/Grungeinterface/Image14.png


I hope you've enjoyed this tutorial and hopefully you've learned something from it.:)

Thanks for reading. =D



Like what you read? Why don't you take a few minutes to register? Then you'll have full access to all of our tutorials.
« Last Edit: Jul 10, 2007, 12:51pm by Matt »Link to Post - Back to Top  IP: Logged
[image]


   [Search This Thread][Send Topic To Friend] [Print]

Click Here To Make This Board Ad-Free


This Board Hosted For FREE By ProBoards
Get Your Own Free Message Boards & Free Forums!
Terms of Service | Privacy Policy | Report Abuse | Mobile