Create an awesome background using patterns

This tutorial will show you how to create some flawless patterns, which we will use to create some amazing backgrounds that you can use for your desktop, websites, posters…whatever you want. The great thing about patterns is that once you get comfortable with them, they can be an important part of your Photoshop arsenal. Enjoy!

If you have a version that you created, I’d love to see it. Put a link to it in the comments below.

Create awesome backgrounds using patterns

Step 1

We are going to give you two different background patterns to work with, to get a better grasp of patterns, so to create the first one, lets open up a 100x100px document in Photoshop.

Create awesome backgrounds using patterns

Step 2

Make a circle at about the same side I did (around 10x10px) and fill it with a dark gray (make sure it isn’t black) by clicking on the foreground color, and the alt + delete. I used #333333.

Create awesome backgrounds using patterns

Step 3

Now we are going to give the circle an inner shadow. On the layers palette click on the circle with a “f” in it and go to inner shadow. Adjust your settings like I have below.

Create awesome backgrounds using patterns

Step 4

Time to make the pattern. Do control + J to duplicate the layer and move it over to the left. Duplicate the layer again and move it up to the top. Try to get the shapes to be equal distance apart from one another.

Create awesome backgrounds using patterns

Step 5

Continue duplicating and moving until you get something like this.

Create awesome backgrounds using patterns

Step 6

Now we are going to drag in some guides. Click and drag the ruler (this will give you a guide) and drag four guides out so they are in the middle of the circles like I have.

Create awesome backgrounds using patterns

Step 7

Click on your background layer and change the color to #CCCCCC. This will give it a darker feel to it.

Create awesome backgrounds using patterns

Step 8

Go to your layers palette, click on the right arrow on the top right and click flatten image.

Create awesome backgrounds using patterns

Step 9

Go to your rectangular marquee tool and make a box using the guides. If your box hangs over the edge of the guides you can get rid of it by using alt and dragging a box over the area you want to get rid of. Now go to edit>define pattern. Call it metal pattern and click OK. Thats it, now that pattern is done.

Create awesome backgrounds using patterns

Step 10

Now we are going to create our second pattern. Open up another 100x100px document.

Create awesome backgrounds using patterns

Step 11

First create a new layer. We are going to create a carbon fiber looking pattern, so we are going to take our square marquee tool and make a black box that is 4px wide by 2px tall. We can do this easily because if we zoom in (like to 800%) Photoshop snaps our square into place by one pixel increments.

Create awesome backgrounds using patterns

Step 12

Click the up arrow twice to move it up 2px and fill it with #333333. Repeat it with #666666, and then #999999, so that you have four different color blocks touching each other, 4px wide by 2px tall each. So it ends up being a rectangle 4px wide by 8px tall.

Create awesome backgrounds using patterns

Step 13

Duplicate the layer with control + J, move it to the right 4 times then down 4 times. Do that until you fill an area like I have. (It ends up being 5 layers/objects)

Create awesome backgrounds using patterns

Step 14

Flatten the image, like we did on the last pattern and select an area like I have here.

Create awesome backgrounds using patterns

Step 15

Now go to edit>Define Pattern, and call it carbon fiber

Create awesome backgrounds using patterns

Step 16

Lets go and open a new document, this will be the one we are working with. I’ll make mine 1680×1050

Create awesome backgrounds using patterns

Step 17

Create a new layer and use the pattern stamp tool to paint the entire document with either one of the patterns we created.

Create awesome backgrounds using patterns

Step 18

I am going to add in a focal point to this so lets create a square using the marquee tool and fill it with any color. We can add an image or icon to it later on. To center it on the page we are going to pull up our guides first click on the background layer then drag a guide to the middle of the document. Photoshop will snap the guide into place at the center. Hold down alt and shift and starting at the very middle, click and drag out to make a square right in the middle.

Create awesome backgrounds using patterns

Step 19

Now we are going to add some layer styles, so go in and add a shadow and bevel/emboss like I have below.

Create awesome backgrounds using patterns

Step 20

We want to add a highlight on the background so it looks like our square is pressed in it not just laying on top. Take the square we made and do control + J to duplicate it. Drag it below the original square layer, click and drag the effects in the trash. Now do control + T , and we are going to make it bigger by holding down alt and shift and dragging it out.

Create awesome backgrounds using patterns

Step 21

Drop the fill down to 0%, then open up the layer styles and add an inner glow and outer glow like I have below.

Create awesome backgrounds using patterns

Step 22

We are going to select the top area of the square. To do this, use the ellipse tool create a circle and angle and adjust the size so it is something like what I have.

Create awesome backgrounds using patterns

Step 23

Hold down ctrl and click on the original square layer, then alt + control click on the circle layer. You should have the part of the square selected that the circle isn’t covering. Hide the circle, and click on the gradient tool. Change the color to white (make sure your gradient goes from white to 0% opacity), and make a gradient from the top left to the middle area of the circle.

Create awesome backgrounds using patterns

Step 24

Keep playing around until you get something you like.

Create awesome backgrounds using patterns

Step 25

Now we are going to darken the outer edge of the document. Click on the marquee tool, change the feather to 100px and click and drag a square around the entire document. Do control + shift + I to get the inverse selection, and fill it with black.

Create awesome backgrounds using patterns

Step 26

Finally put your logo or text in the box, in between the box layer and the refection layer.

Create awesome backgrounds using patterns

Final

Use this as a starting point, there is a lot you can do to enhance it. This is what I came up with. The carbon fiber effect uses the same steps, but with the different texture.

Want to know how I got that grunge effect? Check out part two of the tutorial.

With the carbon fiber pattern:

Create awesome backgrounds using patterns

With the metal pattern:

Create awesome backgrounds using patterns

Test-king provides 100% pass guarantee for all kind of IT exams including 70-270 and 642-982. Subscribe for 642-504 online prep course and guarantee pass your certification exams.

Visit PsPrint to get the best deals inonline printing services!

http://www.braindumps.com/C4120-782.htm
http://www.test-king.com/exams/C4090-455.htm
http://www.actualtests.com/exam-600-199.htm
http://www.certkiller.com/exam-640-692.htm
http://www.colgate.edu/
http://www.riverbed.com/




You might also like these articles...



Only comments in English will be approved!

173 Comments

  1. 31/03/2009

    Good tutorial..very detailed. I love the look of the final background.

  2. It looks really nice, thanks for the tut..

  3. [...] Create an awesome background using patterns [...]

  4. 31/03/2009

    For your next tutorial you should take us from Step 26 to final, Love the grunge effect and would like to see how you go about creating it.

  5. 01/04/2009

    looks good, but err…what about different sized browsers and the actual file size of the background (jpg/png). If the background is duplicated, how would it match other parts..sorry doesn’t work for me.

  6. [...] Brushes Tutorials Shapes textures Stock Photos PSD Patterns Actions 3D Models Create an awesome background using patterns AUTHOR: denisdesigns.com [...]

  7. 01/04/2009

    Very well done, I like the dirty, grungy feel of the whole thing. I would like to see what you did with the carbon fiber pattern though.

  8. 01/04/2009

    very good tutorial! :) thanks mate

    Now your site is bookmarked! ;)

  9. 01/04/2009

    @Giles Dawe: This is just a starting point. I designed mine as a desktop background, but there are many things that you can do to transfer it to a website background. You can fade the left, right and bottom edges to black, or or you can have your entire background the repeating pattern without the grunge and make your logo a .png over it. Or you could create a larger pattern with the grungy pattern. Like I said, there is a lot you can do, this is just a starting point to show you how it is done. It is your job to impliment it.

    http://www.dannydiablo.de/
    That is a really nice example of the edges fading to black with the actual website being lit from the back, just as an example

  10. dianne
    03/04/2009

    this site has so much good information,keep it up
    i always finda new trick when i am here
    thanks

  11. 04/04/2009
  12. 05/04/2009

    i like to make my own layout with my own picture and i’d like you own website

  13. 06/04/2009

    good tutorial and amazing use for that patterns
    thanx and i add it to my blog favorites

  14. Webb
    07/04/2009

    This tutorial is great, except for Step 23, which is immensely confusing. I am using CS4, and whatever alt-control command the author is talking about to select the uncovered portion of the square simply does not work.

  15. 07/04/2009

    Sorry about that. It should read: Hold down alt and click on the original square layer, then alt + control click on the circle layer.

    alt and clicking on the square loads the layer, then alt + control clicking gets rid of the area the circle is covering.

  16. 11/04/2009

    Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com

    Waiting for your next tutorial :)

  17. 11/04/2009

    Very nice! Great tutor my friend!

  18. [...] Create an Awesome Background Using Patterns [...]

  19. 13/04/2009

    Excellent design article. Something i will be practising for sure!

  20. [...] Create an Awesome Background Using Patterns [...]

  21. 14/04/2009

    Nice logo…

    thanks for the tut…

  22. [...] Create an Awesome Background Using Patterns [...]

  23. [...] Create an Awesome Background Using Patterns [...]

  24. 17/04/2009

    Very Nice! Keep it up!

  25. 18/04/2009

    Fine!!!!

  26. [...] – Create an Awesome Background Using Patterns [...]

  27. [...] – Create an Awesome Background Using Patterns [...]

  28. [...] – Create an Awesome Background Using Patterns [...]

  29. [...] – Create an Awesome Background Using Patterns [...]

  30. 22/04/2009

    Excellent tutorial indeed.It’s help full even experienced photoshop users. I’d love to publish tutorials like in my blog too. Planning for some in near future. Thanks buddy for this great tut.

  31. 22/04/2009

    @S.M.Riyaz Thanks, I’m glad you like what we do!

  32. Don
    22/04/2009

    Terrible tutorial. Lost me at the start. I hate when they dont tell you how big of a circle to make.

  33. 22/04/2009

    @Don you can make the circles however big you want. I made mine 10x10px, but there is no exact science to it, whatever you think looks good.

  34. Arve
    25/04/2009

    Nice tut XD This is definitely how my header background should be!

    I’m still newbie and there are few things I didn’t understand…

    What is the size of the circle? I made a full 100×100 px and stopped there.

    Do I have to make a new larger layer or the 100×100 is the main layer and I just need to switch the circle into smaller size?

    Thanks for the this amazing tuts!

  35. 25/04/2009

    @Arve

    I made my circle around 10x10px. create the circle on a new layer so you can duplicate it. The document is 100×100 so you can duplicate the circle to make the pattern.

  36. Norman
    25/04/2009

    Love your tutorial. Learned an incredible amount from it.

    You might want to add this comment to step 23, when the white to transparency gradient is applied, you need to ensure that the gradient’s toolbar options has the transparency option checked. I have no idea why Photoshop requires this check box and why it just isn’t automatically set when a transparency gradient is selected. But spent a bunch of time trying to figure out why my gradient was solid white.

    Thanks again for a great tutorial!

  37. [...] – Create an Awesome Background Using Patterns [...]

  38. 25/04/2009

    Here is the result of your tut’s.

    Thanks a lot =)

    http://mad-popietro.deviantart.com/art/DeviantART-logo-120432022

  39. [...] Here was my source of Inspiration. [...]

  40. [...] 12- Create an awesome background using patterns {Tutorial} [...]

  41. [...] Create an Awesome Background Using Patterns [...]

  42. 29/04/2009

    Great Logo im gonna use this tutorial to make a button, a desktop menu button… thanks for the idea!

  43. Daniel
    02/05/2009

    after I have created the first pattern and flattened, I can’t seem to “Define Pattern” when I have created the marquee. Any help?

  44. 02/05/2009

    make sure that every layer is flattened in the document, then under the edit drop down menu it should be just below define brush preset.

    I hope that helps.

  45. 06/05/2009

    A really nice result in this easy to follow tutorial!

  46. 06/05/2009

    [...] können Flächen sehr schnell auch mit einer Struktur ausgestattet werden. Im Tutorial Create an awesome background using patterns wird gezeigt, wie eine Metalltextur mit zwei Varianten entsteht. Diese wird noch verfeinert und mit [...]

  47. [...] Create an awesome background using patterns | Denis Designs – Mit Hilfe von Hintergrundkacheln kann in Photoshop ein sehr cooler Hintergrund erzeugt werden. [...]

  48. [...] Create an Awesome Background Using Patterns [...]

  49. Robert
    08/05/2009

    Great tut. This is what I came up with

  50. Robert
    08/05/2009
  51. 08/05/2009

    That looks awesome. Nice job!

  52. [...] Create an Awesome Background Using Patterns [...]

  53. [...] I’m not going to show you how to create the patterns, but if you want to learn how to, you can go check out this tutorial I wrote called "Create an awesome background using patterns". [...]

  54. [...] I’m not going to show you how to create the patterns, but if you want to learn how to, you can go check out this tutorial I wrote called "Create an awesome background using patterns". [...]

  55. [...] Create an awesome background using patterns [...]

  56. [...] I’m not going to show you how to create the patterns, but if you want to learn how to, you can go check out this tutorial I wrote called “Create an awesome background using patterns“. [...]

  57. [...] – Create an Awesome Background Using Patterns [...]

  58. [...] – Create an Awesome Background Using Patterns [...]

  59. didgits2k
    17/05/2009

    Step 23 seems to be missing some steps. †he alt click and alt control click seems to be an incomplete instruction. Am I supposed to create a clipping path when I alt control click? I’m on CS3 and this step is not working

  60. [...] the patterns, but if you want to learn how to, you can go check out this tutorial I wrote called “Create an awesome background using patterns”. Lets take a look at how to add patterns to our design. I am going to take the carbon fiber [...]

  61. [...] I’m not going to show you how to create the patterns, but if you want to learn how to, you can go check out this tutorial I wrote called "Create an awesome background using patterns". [...]

  62. [...] C&#114e&#97te &#97n A&#119esome &#66&#97ck&#103&#114ound Usin&#103 P&#97tte&#114ns [...]

  63. [...] Create a&#110 Awesome Ba&#99kgro&#117&#110d Usi&#110g Patter&#110s [...]

  64. [...] Cr&#101at&#101 an A&#119&#101&#115o&#109&#101 Background U&#115ing &#80att&#101rn&#115 [...]

  65. [...] Crea&#116e an A&#119esome Backgroun&#100 Us&#105ng Pa&#116&#116erns [...]

  66. [...] Create an Awesome Ba&#99kgro&#117nd &#85s&#105ng Patterns [...]

  67. [...] Create an Awesome Background Using Patterns [...]

  68. André
    03/06/2009

    How do i do the circle in step two? It says that i should do a document that is 100×100 then i fixed the colours on the foreground then after that i am going to do a circle, but how?

  69. 03/06/2009

    you can use the circular marquee tool to draw a circle. It doesn’t have to be exactly the same size as mine, but somewhere around 10px. If you want it exact you can open up a 10x10px document and draw a circle the size of the document.

  70. [...] Create an awesome background using patterns [...]

  71. george brown
    12/06/2009

    Nice man!

  72. 17/06/2009

    there is a big banner or ads blocking half of this site and really hard to follow! you should make a video instead.

  73. Saigee
    26/06/2009

    i always admire how this type of background was made !! and have been searching all over the internet for a tutorial like this!! thank you very much, i learnt alot from you !! =)

  74. Okey
    02/07/2009

    Awesome! Truly awesome!! Thank You so much.

  75. MUZMMAL
    08/07/2009

    hi i am mzummal ur frinde

  76. 29/07/2009

    get this back ground

  77. [...] iframe test [...]

  78. Andy
    10/08/2009

    I try to darken the edges and the edges turn white. All the colors are on black. How do I fix it?

  79. Andy
    10/08/2009

    nvm it works now

  80. 11/08/2009

    Great tutorial

  81. YOGESH GAIKWAD
    26/09/2009

    very cool tutorial

  82. 05/10/2009

    very excellent tutorial, thanks you for tutorial

  83. 07/11/2009

    where do we go to make its damn idotic

  84. 09/11/2009

    Wow thanks 4 this great Tut :=)

  85. 02/12/2009

    great tutorial… very informative ;)

  86. [...] Create an awesome background using patterns [...]

  87. 02/01/2010

    very nice, thanks

  88. [...] Create an Awesome Background Using Patterns [...]

  89. 10/01/2010

    Wow! Amazing effect. Very cool!

  90. [...] Create an Awesome Background Using Patterns [...]

  91. 09/03/2010

    Cool photoshop effect! thanks!

  92. lizzy
    11/03/2010

    awsome

  93. 24/03/2010

    love it, thanks

  94. DNZ
    03/04/2010

    how do i put logo in it i dont understand :(

  95. [...] Awesome metallic background for text [...]

  96. 10/04/2010

    usefull effect! thanks!

  97. [...] Awesome metallic background for text [...]

  98. 13/04/2010

    very nice in all back ground designs thanks

  99. Shiqo
    14/04/2010

    mzuri sana…awesome

  100. [...] Create an Awesome Background Using Patterns [...]

  101. [...] 之后是本篇的主题:如何做这么个带小洞洞的图片~~ 需要的同学请看:Create an awesome background using patterns [...]

  102. [...] Sfondo metallico per il tuo [...]

  103. [...] – Effetto metallico su sfondo testo [...]

  104. [...] Sfondo metallico per il tuo [...]

  105. RyanTV
    30/04/2010

    I’d love for you to explan step 23 in a little more detail. I can’t seem to get the ctl + click and alt + control click to work properly. What tool are you on when you are doing this?

  106. RyanTV
    30/04/2010

    And I’ll parrot what some others said above, I’d love to see how you did the distressed look on the logo at the end. It turned out looking really cool.

  107. 03/05/2010

    RyanTV:

    Ctrl+Click is loading the layer. You should be able to hold down Ctrl and click on a layer and it will select everything in that layer. You can also click on the layer and go to Select>Load Selection to do the same thing.

    The Alt+Clicking on a layer subtracts everything that is on that layer, so if you have your whole document selected and you alt+click on a layer with just a square shape, it will remove the square shape from your selection.

    Hopefully that helps. Also, to the second comment, I have done a follow-up tutorial showing how to get the grunge effect:

    http://www.denisdesigns.com/blog/2009/04/create-a-grungy-background-using-patterns/

  108. 06/05/2010

    thanks a lot, very interesting tutorial

  109. [...] Create an awesome background using patterns [...]

  110. [...] Awesome metallic background for text [...]

  111. 26/06/2010

    Nice tutorials.. thank you for share admin.

  112. 20/07/2010

    Awesome metallic background for text …

  113. 09/08/2010

    One of the best tutorials I’ve seen around. Thank you so much.

  114. Guilherme
    12/08/2010

    Muito bom Gostei…

    Olha o meu..

    [img]http://a.imageshack.us/img641/7408/wallparacell2.png[/img]
    http://a.imageshack.us/img641/7408/wallparacell2.png

  115. 13/08/2010

    good titorial!

  116. 13/08/2010

    Very interesting tutorial!

  117. 13/08/2010

    nice job, godd lot!

  118. 08/09/2010

    no, subject was not disclosed

  119. Renan
    17/09/2010

    Very God!!!
    Tanks!

  120. Arkar
    05/10/2010

    Thank u very very much!!!

  121. [...] Awesome metallic background for text [...]

  122. Miguel
    31/01/2011
  123. [...] and just because, we love the metalesque featured image for this post from Denis Designs… nice work. Bookmark on Delicious Digg this post Recommend on Facebook share via Reddit [...]

  124. [...] Awesome metallic background for text [...]

  125. [...] Entrar al Tutorial: CLICK AQUI!! [...]

  126. [...] Create an Awesome Background Using Patterns [...]

  127. 06/03/2011

    looks great but I think the D and d don’t work so well :)

  128. 06/03/2011

    Can I ask if used textures or brushes for the grunge effect?

  129. [...] efecto Harley Davidson Aqua Feliz Año Nuevo texto 3-D con una cierta iluminación extremas Impresionante fondo metálico para el texto Jelly Fish Delicia Realista abrasador Efecto Fuego Brillante Caligrafía Increíble video-juego [...]

  130. [...] Entrar al Tutorial: CLICK AQUI!! [...]

  131. Jackson
    23/05/2011

    I don’t quite understand the part where you use the circle to select the top half of the square. It’s just not working for me.

  132. [...] [size=24]Awesome metallic background for text[/size] [...]

  133. [...] Awesome metallic background for text [...]

  134. [...] 1. Create an awesome background using patterns [...]

  135. 16/07/2011

    Hi just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers and both show the same outcome.

  136. [...] Awesome metallic background for text [...]

  137. I’d love for you to explan step 23 in a little more detail. I can’t seem to get the ctl + click and alt + control click to work properly. What tool are you on when you are doing this?

  138. 28/07/2011

    The crux of your writing while sounding agreeable initially, did not really settle perfectly with me after some time. Somewhere throughout the sentences you actually managed to make me a believer but just for a short while. I nevertheless have got a problem with your leaps in assumptions and one would do nicely to fill in those gaps. In the event you can accomplish that, I could certainly be fascinated.

  139. 30/07/2011

    Amazing post, thank you, I’ll save at this point you!

  140. 08/08/2011

    Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again soon!

  141. 10/08/2011

    Hello, thanks for your great tutorial!
    I used it here

    http://hydra-artwork.deviantart.com/#/d46332i

  142. 22/08/2011

    I agree with your Create an awesome background using patterns | Denis Designs | Free Photoshop Tutorials & Inspirations for Web & Graphic Designers, good post.

  143. 03/10/2011

    cool

  144. 03/10/2011

    cool

  145. [...] Awesome hard background for text [...]

  146. 13/10/2011

    This is a good post. great work.

  147. 15/10/2011

    I precisely desired to thank you so much once more. I do not know the things I could possibly have sorted out in the absence of those basics revealed by you about such industry. Completely was a real distressing problem for me personally, nevertheless looking at the very professional technique you resolved that made me to cry over gladness. I am grateful for this advice as well as hope that you recognize what a powerful job your are undertaking educating the rest with the aid of your websites. I know that you’ve never encountered any of us.

  148. 22/10/2011

    Hello There. I found your blog using msn. This is a really well written article. I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post. I will certainly comeback.

  149. 03/12/2011

    rubbish

  150. 18/12/2011

    You have noted very interesting points! ps decent website.

  151. 03/01/2012

    Fantastic goods from you, man. Create an awesome background using patterns | Denis Designs | Free Photoshop Tutorials & Inspirations for Web & Graphic Designers I’ve understand your stuff previous to and you’re just extremely magnificent. I actually like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it wise. I can’t wait to read far more from you. This is really a wonderful Create an awesome background using patterns | Denis Designs | Free Photoshop Tutorials & Inspirations for Web & Graphic Designers informations.

  152. [...] http://www.denisdesigns.com/blog/2009/03/create-an-awesome-background-using-patterns/ Tweet Mots-clefs :background, patterns, photoshop, tutorials Did you enjoy this article? Share it! [...]

  153. [...] Awesome metallic background for text [...]

  154. 25/01/2012

    Get the latest couple of coloured contact lenses for yourself come early july. Purchase a pair out of nikon the super assortment to choose from and offer the eyes up to 3 shades simultaneouslywith their triple tone lenses right here in New Zealand.You can also have a look at last customers’ images to judge which colour will suit you best.

  155. 27/01/2012

    hi ray its your cousin patricia from canada rafe and marions daughter. the celtic women were on the tv the other night and my daughter and i tatum watched it fabulous tatum was in awe. i am really sad now that i missed going down to toronto with robin and bill when you were here last. i wont make that mistake again. tatum wants to come along as well.