Advanced Search
Keywords

How to Make the Grungy Background Effect for the “My Concepts” Template

This entry was posted By Cubert on Monday, November 23rd, 2009 at 6:17 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

This Photoshop tutorial provides instructions for making the splash stained and grungy background image used in the BoxedArt template called “My Concepts“.

You can download the “My Concepts” template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

[ View and Download the My Concepts Template ]

In this Photoshop tutorial, we will walk you through the making of an interesting grunge background effect.

After starting Adobe Photoshop, create a new page (Ctrl-N) with the size of 1000px X 645px. Now fill the background with a light grey gradient. Next, set the foreground color #d4d2d3 and the background #eeefea . Get the gradient tool and stretch it half way down the page. You should get a background like this.

gradient

Now, go to filter > Noise > Add Noise. Add 9.5% of noise to it. The results should appear as shown below:
noise-9.5

gradient-noise

Now, you have the background’s first layer ready, and it’s time to add patterns and design elements to it. Start by adding a new layer SHIFT+CTRL+N, and then use the brush effect, which is available from www.deviantart.com. Here, we used the halftone brush, and select the foreground color to white. Now brush it on both side of the canvas, and you should get something like below:

halftone-brush

halftone

Next, let’s draw a rectangle at the center of the canvas by using the rectangular marquee tool, and fill it with a blue gradient in a diagonal way. (Foreground color #c3d8e3 with background color #7a9dba) Now, to add a shadow below the blue rectangle, hold on the CTRL key and click on the layer which contain the blue rectangle, and you will see the blue rectangle being selected.

rectangle

blue rectangle

Next, add another new layer below the blue rectangle and fill it with black. Then, deselect the layer by pressing CTRL-D. After that, go to Filter>Blur>Gaussian Blur – Radius 7.6pixel, and move the layer 3 pixels down and set the opacity to 20%. Then, add some glow to the blue by selecting the brush tool 200px, with the bright blue (#e2f6ff) and brush at the top and left side of the blue rectangle. Now, add a white strip area at the bottom and also a small darker blue (#7397b7) strip on top of it.

gaussian blur

Let’s go back to the background now, and start with another new layer. After your layer is created, draw a few strips and fill them with 3 florescence color, #21f2ff –Cyan, Magenta – #ff37fc and yellow #fffe4b.

addnoise

3stripes

Next, draw some circles on the top left. Draw a white circle first, and remember to add a new layer each time you do this. Next, draw another two circles, making each one smaller than the previous one, and make the color green color for the first circle (#90cdbc), and the other light blue (#e6f0f1). Now, merge (CTRL-E) the 4 layers together and set the opacity to 30%. We will also need to add some noise effects on the circles as well. Again go to Filter>Noise>Add Noise – 9%.

circles

We’re almost done with the grudge background, now let’s add in a picture to match the theme. For this template, we downloaded an image of pencils from bigstockphotos.com. Change the color scheme of the photo to black and white by clicking > Adjustment > Black & White. Put it at the top left corner of the canvas; change the blending mode of the layer to multiply, and the results are shown below:

pencil

Now for some final touch-ups… We added some crack brush effects on the top right corner below the blue rectangle. Then, we added some blue watercolor splashes (#baccd4) around the corner of the canvas and some light purple (#dad8e6) right behind the blue rectangle. Set these up to where you think it looks good or matches. All of the brushes used here can be downloaded from www.deviantart.com.

watercolor

Finally, we added a computer mouse photo on the bottom right corner of the blue rectangle to complete the design work place background. The background is now complete, and you can add in your website content on the blue rectangle area. Enjoy!

final

You can download the “My Concepts” template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

[ View and Download the My Concepts Template ]

('DiggThis') StumbleDelicious

Comments

Awesome web layouts with nice step by step tutorials
Thanks so much for posting it
Keep up good work
God Bless you :-)

User Just Someone says: December 24, 2009 at 5:02 am

Thanks for the tutorial !
Indeed Awesome ;)
Merry Christmas ;D

Cool and style background! Very nice!

Really a very nice howto!
Thanks for sharing with us and keep up the good work!

Love your tutorials. Your layouts are gorgeous. Will try this one, thank you! :)

Hi! thanks for this nice tutorial. actually sir i want to create a very simple but attractive background for my own website. recently i came across a twitter page and there i saw a background…which is my keen interest to make a background like that. can you help me.

this is the link from where u can check the background …..

http://twitter.com/collis

can u tell me how can i make one like that.

thanx in advance.

i shall be waiting for your response.

Hanan

[...] How to Make the Grungy Background Effect for the “My Concepts” Template [...]

[...] How to Make the Grungy Background Effect for the “My Concepts” Template [...]

[...] How to Make the Grungy Background Effect for the “My Concepts” Template [...]

Leave a Reply


  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost