Create an awesome background using patterns

Tutorials by Tyler | March 31, 2009 | 102 Comments »



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 100×100px document in Photoshop.

Create awesome backgrounds using patterns

Step 2

Make a circle at about the same side I did (around 10×10px) 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 100×100px 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



Related Articles:



Only comments in English will be approved!

102 Comments

  1. Kayla
    31/03/2009

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

  2. joyoge designers' bookmark
    31/03/2009

    It looks really nice, thanks for the tut..

  3. Create an awesome background using patterns : Design Newz
    31/03/2009

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

  4. Brad C
    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. Create an awesome background using patterns | Feed Reader (Beta)
    01/04/2009

    [...] Visit Source. [...]

  6. Giles Dawe
    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.

  7. Create an awesome background using patterns | Photoshop
    01/04/2009

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

  8. Ian Stradling
    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.

  9. Lawrence77
    01/04/2009

    very good tutorial! :) thanks mate

    Now your site is bookmarked! ;)

  10. Tyler
    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

  11. dianne
    03/04/2009

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

  12. l8l9
    04/04/2009

    http://www.l8l9.com
    nice man

  13. mahal qoh
    05/04/2009

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

  14. moih60
    06/04/2009

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

  15. 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.

  16. Tyler
    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.

  17. Tutorials Room
    11/04/2009

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

    Waiting for your next tutorial :)

  18. myfr3ak
    11/04/2009

    Very nice! Great tutor my friend!

  19. 25 Photoshop Tutorials for Working with Textures | Vandelay Design Blog
    13/04/2009

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

  20. Website Design Kent
    13/04/2009

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

  21. Web Page Design For You » Blog Archive » 25 Photoshop Tutorials for Working with Textures
    13/04/2009

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

  22. designShrine » Resources Website Design » 25 Photoshop Tutorials for Working with Textures | Your Source for Interior, Web and Style Design
    13/04/2009

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

  23. Pradeep CD
    14/04/2009

    Nice logo…

    thanks for the tut…

  24. 25 Photoshop Tutorials for Working with Textures | FamousandSpicy
    14/04/2009

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

  25. 25 Photoshop Tutorials for Working with Textures « The Surrealistas
    14/04/2009

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

  26. akihp
    17/04/2009

    Very Nice! Keep it up!

  27. oleGey
    18/04/2009

    Fine!!!!

  28. Outstanding Website Background Guide: 60+ Impressive Resources | Noupe
    19/04/2009

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

  29. Wordpress Blog Services - Outstanding Website Background Guide: 60+ Impressive Resources
    19/04/2009

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

  30. Outstanding Website Background Guide: 60+ Impressive Resources | Feed Reader
    20/04/2009

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

  31. Free Cover, Graphic, Design, Logo, Image & Photo » Blog Archive » Outstanding Website Background Guide: 60+ Impressive Resources - 31th Edition
    20/04/2009

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

  32. AMB Album » Outstanding Website Background Guide: 60+ Impressive Resources
    20/04/2009

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

  33. S.M.Riyaz
    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.

  34. Tyler
    22/04/2009

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

  35. 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.

  36. Tyler
    22/04/2009

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

  37. Photoshop Tutorials | Grungy Background Pattern Photoshop Tutorial | Free Photoshop Tutorials | Forging Fire Studio
    22/04/2009

    [...] Launch tutorial Share and Enjoy: [...]

  38. 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!

  39. Tyler
    25/04/2009

    @Arve

    I made my circle around 10×10px. 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.

  40. 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!

  41. 克兰印象 » 60+优秀的网站背景资源
    25/04/2009

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

  42. Popietro
    25/04/2009

    Here is the result of your tut’s.

    Thanks a lot =)

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

  43. New Background | Vast Reality
    25/04/2009

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

  44. 33 Tutorials to Unleash the Photoshop Beast in You | Smashing Downloads
    27/04/2009

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

  45. 25 Photoshop Tutorials for Working with Textures | Designurimagination Blog - Let Your Imagination Fly
    27/04/2009

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

  46. huwaw69
    29/04/2009

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

  47. 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?

  48. Tyler
    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.

  49. photo retouching
    06/05/2009

    A really nice result in this easy to follow tutorial!

  50. Photoshop Weblog
    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 [...]

  51. Neue Links / Neustart-Magazin
    07/05/2009

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

  52. 25 Photoshop Tutorials for Working with Textures « Internet Turnkey Websites
    07/05/2009

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

  53. Robert
    08/05/2009

    Great tut. This is what I came up with

  54. Robert
    08/05/2009

    Sorry didn’t post the link
    http://i301.photobucket.com/albums/nn74/robbruguera/background.png

  55. Tyler
    08/05/2009

    That looks awesome. Nice job!

  56. 25 Photoshop Tutorials for Working with Textures « Vandhematharam
    12/05/2009

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

  57. 25 Photoshop Tutorials for Working with Textures « N3T.ir - Web Resources, Web Design News & Tips, Open Source
    13/05/2009

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

  58. Make High-Impact Backgrounds for Your Designs with Photoshop
    14/05/2009

    [...] 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". [...]

  59. Make High-Impact Backgrounds for Your Designs with Photoshop | Designurimagination Blog - Let Your Imagination Fly
    14/05/2009

    [...] 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". [...]

  60. Best Tutorials for Texture and Website Backgrounds - Hidden Pixels
    15/05/2009

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

  61. 25 Photoshop Tutorials for Working with Textures « Online Free Application Software Tips Tools Wallpapers
    16/05/2009

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

  62. FreeResourceKit.NET » Blog Archive » Make High-Impact Backgrounds for Your Designs with Photoshop
    16/05/2009

    [...] 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“. [...]

  63. Outstanding Website Background Guide: 60+ Impressive Resources
    16/05/2009

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

  64. Outstanding Website Background Guide: 60+ Impressive Resources | Misr IT Reader
    17/05/2009

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

  65. 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

  66. Make High-Impact Backgrounds for Your Designs with Photoshop | The Muliati.Com goBlog
    17/05/2009

    [...] 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 [...]

  67. Make High-Impact Backgrounds for Your Designs with Photoshop | Misr IT Reader
    21/05/2009

    [...] 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". [...]

  68. Google translation Widget for Blogger - Translate any website in English to 25 other languages | Today News, Technology, Wordpres
    26/05/2009

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

  69. Outbrain Post Rating Widget for Blogger | Today News, Technology, Wordpres
    26/05/2009

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

  70. Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc | Today News, Technology, Wordpres
    26/05/2009

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

  71. Add 125 x 125 ad section to Blogger | Today News, Technology, Wordpres
    26/05/2009

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

  72. Happy New year Friends | Today News, Technology, Wordpres
    26/05/2009

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

  73. 20+ Photoshop Working with Textures | Free Tools And Wallpapers
    27/05/2009

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

  74. 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?

  75. Tyler
    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 10×10px document and draw a circle the size of the document.

  76. Dmitry Marduk - Recommended Tutorials
    10/06/2009

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

  77. george brown
    12/06/2009

    Nice man!

  78. sucks
    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.

  79. Web Sitesi Arka Plan Kılavuzu:Etkileyici Kaynaklar | DandikSE.net - Wallpapers, Photos, Resimler, Pictures, Photography, Galleries, Galeri, Fotoğraflar, Duvarkağıtları
    24/06/2009

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

  80. 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 !! =)

  81. 145 Ultimate Round-Up Of Photoshop Tutorials and Resources | Tutorials | instantShift
    30/06/2009

    [...] Tutorial Link [...]

  82. 145 Ultimate Round-Up Of Photoshop Tutorials and Resources | KolayOnline
    30/06/2009

    [...] Tutorial Link [...]

  83. Okey
    02/07/2009

    Awesome! Truly awesome!! Thank You so much.

  84. MUZMMAL
    08/07/2009

    hi i am mzummal ur frinde

  85. 145 Ultimate Round-Up Of Photoshop Tutorials and Resources « 3dsmax tutorials
    17/07/2009

    [...] Tutorial Link [...]

  86. Trevion riley
    29/07/2009

    get this back ground

  87. iframe test | bjsnyder
    08/08/2009

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

  88. 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?

  89. Andy
    10/08/2009

    nvm it works now

  90. Greg
    11/08/2009

    Great tutorial

  91. 21 Photoshop Tutorials And Resources | Virtual Photography Studio - Digital Photography Business Guide To Resources, Products and Information
    18/09/2009

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

  92. YOGESH GAIKWAD
    26/09/2009

    very cool tutorial

  93. SEO Rab
    05/10/2009

    very excellent tutorial, thanks you for tutorial

  94. marle
    07/11/2009

    where do we go to make its damn idotic

  95. Thomas
    09/11/2009

    Wow thanks 4 this great Tut :=)

  96. honour chick
    02/12/2009

    great tutorial… very informative ;)

  97. Recommended Tutorials « Dmitry Marduk Blog
    05/12/2009

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

  98. Arni WebDesign
    02/01/2010

    very nice, thanks

  99. 30+ smashing tutorials for creating Texture and Background Effects in Photoshop @Smashing Tips
    05/01/2010

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

  100. Presentman
    10/01/2010

    Wow! Amazing effect. Very cool!

  101. 55 Photoshop Tutorials To Make Dreamy & Professional Background To Your Photos - Photoshop Website - Tutorials,Brushes & more..
    17/01/2010

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

  102. 30+ smashing tutorials for creating Texture and Background Effects in Photoshop | Smashing Tips
    23/01/2010

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

Leave a Reply