Creating Your Own Organic Textured Backgrounds

  • Tags:
  • Comments:
    204
  • Date:
    January 08, 2009

    • So two of the questions that I received most are, how I created the background texture on alifelski.com and also if people could outright take elements from my site and simply place them on theirs. With that, I would like to show everyone how I created my background in hopes that people will get inspired and create textured backgrounds of their own.

    1. 1.

      Once I established the overall concept of my site and knew I needed to produce a sky background, I set of to find images that would fit into my concept and could be worked into my style. These are the two photos I chose from istockphoto that I felt matched the look and feel I was going for on my site.

      Photos Used in background
    2. 2.

      With photos in hand I opened up a blank, bright white Photoshop document and got to work. A blue gradient was the first thing on the page, just to get a base for the sky.

      Photo of initial gradient
    3. 3.

      Next, I took the photo of the sky, chopped off the ground, softened the edges, and placed it directly on top of the gradient.

      Photo of new layer added
    4. 4.

      Then I took the cloud photo and put a multiply blend filter on it (at the top of the layers module) and then turned the opacity down a bit. One thing to note is that I’m never quite sure which blend filter to use to achieve the look I’m going for. I generally layer photos and then go down the blend filter list one by one until I’m happy with the result. So don’t feel bad if you don’t know what will work right away, experiment to find out what works best for you.

      Photo of new layer that has been blended
    5. 5.

      The next step was to add the other photo, again directly on top of the other layers. On this layer I applied the vivid light blending filter and again turned down the opacity.

      Photo of layer 3
    6. 6.

      At this stage I was starting to feel happy with the look of the texture but it was a bit bright for my purposes. So in order to achieve a darker look I added yet another blue gradient.

      Addition of second gradient
    7. 7.

      I positioned this new layer directly above the first gradient but below the photos so that their texture wouldn’t get lost below it. I also added an overlay blending filter to the gradient.

      Second gradient blended
    8. 8.

      Finally, I decided to duplicate my cloud photo and shifted the position so that the white clouds created some more interesting silhouettes.

      Addition of blended clouds

    So that’s it! Easier than some of you might have thought? I guess the challenge in making textured backgrounds is finding the right assets, having the right tone to match the content on your site, and being patient enough to keep experimenting. There are so many combinations out there, I would love to see what everyone comes up with.

    204 Comments

    1. inspirationbit 01/09 2:57am

      Thanks for unveiling the magic, Ali. The final result after playing with the layers and filters is stunning.

    2. Paul Kittredge 01/09 9:28am

      Seriously - magic it is. Thanks for the explanation! Maybe now people won’t steal your stuff anymore, just do it themselves…

    3. Karin Axelsson 01/09 10:39am

      Thank you very much! Beautiful work indeed!

    4. LorraineDesign 01/09 11:08am

      Awesome: the question I’ve been pondering in my head was how you set up it up so that it looks great no matter what the browser window is set to. Did you do anything special to the image to get it to repeat nicely?

    5. Jack Hoge 01/09 9:38pm

      I was totally convinced you used a concrete texture! Blast…

    6. Koko 01/10 1:45pm

      @Jack - Same here!

      Realy nice little tutorial, thanks for sharing that. It’s such a nice site and the textures are brilliant!

      What’s the font that you used for the right panel: “..also a neat freak..”, it’s so nice.

    7. Ali Felski 01/10 10:02pm

      @LorraineDesign I usually just make a copy of the image match it up side by side in photoshop and use the clone stamp tool to make it blend. It isn’t an exact science there is a bit of work involved matching up the edges.

      @Koko the font used is called Fling.

      Thanks for your comments :)

    8. Sean 01/13 10:10am

      Great stuff! Thank you.

    9. nick 01/16 11:14am

      Very creative, works great.

    10. Kitty 01/20 7:05am

      Thank you so much for such a brilliant and helpful tutorial. I’ll play around with this sometime, it looks like heaps of fun! Thanks for sharing.

      Keep up the brilliant work! [:

    11. Lorraine 01/21 1:01am

      Awesome: I’ll have to play around with that a bit. Thanks!

    12. Muhammad Habib 01/22 4:21pm

      Amazing!
      Thank you very much!!

    13. Bryan 01/22 5:34pm

      Amazing site, Ali.  I have been following Jeff Croft for a while now, and through a series of events I stumbled upon Jack’s and now your site.  Looks like I have 2 new blogs to frequent. :)

      Also, thanks for the tutorial.  As a graduate with a (now boring) Computer Science degree, I have been looking to instill some creativity into my work.  Unfortunately I have a lot of catching up to do, having never taken any art classes.  Tutorials like this greatly help me to understand how to take the ideas in my head and make them happen.

      Best of luck,

      Bryan

    14. Kevin 01/23 1:35pm

      Great little tutorial Ali. I love the textures you’ve create for this site. It reminds me of some Cyclone Design’s (cyclone-design.com) work. Sadly they seems to have vanished over the last couple of years.

    15. Greg Comstock 01/28 1:27pm

      Thanks for the demo, Ali! I plan on making swappable backgrounds on my site, and this tutorial has helped a lot!

    16. Nicole Feliciano 02/06 12:10pm

      What a gorgeous blog!  Congrats.

    17. fred 02/09 7:23am

      Thx, very nice !

    18. Antti 02/10 10:53am

      Very nice. Its great when people create beautiful works of art and create detailed tutorials about it. I like what you said about the blending modes. I play with them exactly like you do!

      Thanks for sharing,
      Antti
      Second Picture

    19. hedda 02/19 11:31pm

      Thanks for showing us your techniques! You do lovely work.

    20. Jennifer 02/20 2:01pm

      I keep coming across your site over and over again in all the design sites I read. Your designs are brilliant, and thank you so much for this quick tutorial!

    21. Kristine 02/22 9:46am

      I love this background technique and love the rain falling on your website too! Thank you for sharing! :)

    22. Julian S. 02/24 11:52pm

      Love your blog design!

    23. Holger 02/25 5:43am

      Realy simple with amazing result!
      Thanks

    24. Tom Bradshaw 02/26 11:29am

      I love your style! Thanks for the tutorial!

    25. BenSky 03/08 6:07am

      Very interesting to see how its done, beautiful site, thanks for sharing!

    26. Andrew 03/10 6:56am

      I don’t believe good results rely solely on complicated techniques… sometimes simple ones are all that’s required. Great texture that and a technique most can follow and experiment with… thanks for sharing!

    27. Melanie Rebane 03/15 11:36pm

      Congrats on your award at SXSW-Luv yr site.

    28. Tim 03/18 9:24am

      I love this design, its truly inspirational, great work.

    29. Ada 04/20 1:35pm

      im really glad for founded your site, you are a great designer.

      Congratulations!!!!

    30. z.Yleo77 04/23 8:32am

      a wondful tutorial

    31. Sam 04/28 11:08am

      thanks for the incredible tutorial, really like your style :)

    32. Jake Wedding 05/05 11:02am

      Wow… I really love these designs! Keep up the good work.

    33. Oak Stevens 05/11 11:58am

      These are sweet designs, totally love your style!

    34. RakDesign 05/19 11:46am

      this tutorial was really easy to follow and the finished product is exceptional, thank you so much Ali

    35. Vancouver photographer 05/27 4:58am

      Thanks for sharing this. Great little tutorial that’s easy to do.

    36. IdealHut 07/10 9:31pm

      Great tutorial! Thanks for sharing.

    37. Sajitha Jose 07/16 10:06am

      Thankyou so much for sharing this tutorial!.It did inspire me a lot!

    38. George Katsanos 07/26 1:08pm

      Hello ! Thanks for this but one question:
      I can’t get step (4). Maybe we use different Photoshop versions. I can either transform the photo layer as a multiply, add a new layer as a clipping mask, but for sure I can’t do what you have on the printscreen, (the layer besides that seems attached etc)

      would appreciate some help!

      Thanks

    39. angela zeballos 08/12 3:14pm

      Hey Ali
      Love your site and the textured background graphics…

      Don’t suppose you could let me know the file number of the istock photo green grunge background that you used in this tutorial? It will be perfect for a project I will be working on next week.

      Much appreciated if you can…

      you are a great inspiration
      thanks

    40. Valerie 08/26 11:05am

      Enjoying your entire site! Thanks for the inspiration.

    41. Christine Daniloff 08/27 4:45pm

      Thanks for sharing this. It’s really beautiful.

    42. Webdesigner 08/30 1:20pm

      This is indeed easier than I thought. Thanks for the nice tutorial.

      But can you tell me how to convert this piece of artwork into a repeating background image that I can use in the header of my website?

      I never get beyond this point because the left edge never matches the right one and vice versa.

      Your design looks great by the way.

      Best wishes from Germany.

    43. CMYK 08/31 11:24am

      great mini tutorial!!! :P

      I like this blog… see you!

    44. Identity Graphic Design 09/02 12:36pm

      Thanks for sharing. I shall be using this on something I’m working on…

    45. pfefferspray 09/07 7:16pm

      Hello!
      Thank you very much! Beautiful work indeed!

    46. Dawn Farias 09/08 6:48pm

      Thanks for this tutorial.  I truly love the result you came up with for your blog.  I made a freebie Blogger background with it. You can see it <a hreaf="http://www.dawnsdesignshop.com/2009/09/fall2-free-blogger-background.html">here</a>. 

      Thanks for this:
      I guess the challenge in making textured backgrounds is finding the right assets, having the right tone to match the content on your site, and being patient enough to keep experimenting.

    47. Haarentfernung 10/06 2:12pm

      Really great blog. Thank you.

    48. Enthaarung 10/09 5:52am

      This is a good inspiration for my holiday pictures!
      Thank you for the blog.

    49. Web design agency 10/09 7:22am

      Thanks for very useful information and materials.

    50. Fitness 10/14 7:30pm

      nice and creative

    51. Daniel 10/18 3:45pm

      wow, its awesome !

    52. pari sportif 10/20 11:53am

      This is really great ! Congrats for helping noobs with useful resource like that !

    53. Jobs Manhattan New York 10/26 3:48pm

      That’s a really nice looking texture that you ended up with there. I’ll definitely keep this bookmarked for some upcoming sites that I’m working on. I’m sure it will come in very handy.

    54. Anbieter Vergleich 11/02 5:08pm

      very good inspirations....awesome!

    55. Wendy 11/03 6:59am

      Wow!  This is REALLY beautiful.  I’m very in awe of your work! Thanks so much for sharing.

    56. interesting facts 11/04 5:57am

      this tutorial is awesome !

    57. Las Vegas lawyer 11/14 1:53am

      I’ve been looking to figure out how to do this.  My web designer did not even know, so now I can try to add this to our site.  Thank you for sharing this information.

    58. Michael 11/14 2:48pm

      Thanks for the demo

    59. Designer Leeds 11/18 12:10pm

      I stumbled across your blog, great read i’m a graphic designer in Leeds so all this information can help me a great deal. Keep up the good work i’ll be sure to check back.

      I’m going to use some of this for sure!

      Thanks for sharing

    60. JBlack 11/18 9:53pm

      Thank you not only for the lesson in ceating the organic background, but also for the very subtle and clever use of flash in your banner!!  It is elegant and intriguing.  Way to go!!

    61. martos 11/19 5:47am

      Thank you very much! Beautiful work.

    62. Hemant Singh 11/19 1:54pm

      Thanks a lot for this tutorial. Beautiful site.

    63. YaaCool 11/25 8:47am

      I love this site! Thank you for the great work.

    64. paris en ligne 11/25 6:25pm

      Excellent work, congratulations to the artist, thanks.

    65. Mark Brown 11/29 8:07am

      Wow, I love the design of your site, thanks for sharing the tips.

    66. unibet.fr 11/30 11:16am

      Excellent work, congratulations to the artist.

    67. xjeria 12/02 8:55pm

      Just love your blog. Can I ask where you got it or did you design it?

    68. Identity Graphic Designer 12/03 4:38pm

      Great technique and easy to follow. Nice header btw...love the bird!

    69. Patricia 12/08 12:54pm

      I absolutely love your site. Thank you for the tutorial!

    70. Silber kaufen 12/15 5:27am

      nice inspirations and great technique. awesome

    71. sang yeon 12/17 8:23pm

      nice insprirations and thanks

    72. ClubPenguinCheats 12/22 3:46am

      As a graduate with a (now boring) Computer Science degree, I have been looking to instill some creativity into my work.  Unfortunately I have a lot of catching up to do, having never taken any art classes.  Tutorials like this greatly help me to understand how to take the ideas in my head and make them happen.

    73. Reeta Sethi 12/25 11:14pm

      Earth Day – Reusable Bags, Grocery Bags, Totes, cotton bags
      Earth Day 2010 all people, regardless of race, gender, income, or geography,we all have a moral right to a healthy, sustainable environment. Our mission is to broaden and diversify the environmental movement worldwide, and to mobilize it as the most effective vehicle for promoting a healthy, sustainable environment. We at Crafts and Creations, encourage registered charities and offer them eco-friendly cotton canvas fabric bags / totes at no profit no loss basis.
      We wish to encourage Teachers, Schools, Universities and Churches to promote this campaign across the world.  Each one of us has to strive to create a healthy and sustainable environment and inform the public about the environmental issues – locally, nationally and globally.
      Earth Day 2009, April 22 marked the beginning of The Green Campaign.  Let us use, Organic Cotton bags, green totes, cotton bags, canvas bags and avoid usage of Plastics which are majorly responsible for the present Global Warming.
      The desire is to broaden environmental sustainability by reaching out to all segments of the world by combing interactive social networking with proven environmental and behaviour.  We welcome suggestions from people from all walks of life using a compressive web-based blog <a href=”http://cottoncrafts.blogspot.com/”> Earth Day Blog </a>

    74. ken gaspari 12/30 9:30pm

      little nice workshop , thanks.

    75. Kredit 12/31 5:50pm

      Thank you for this nice insprirations!
      Happy New Year :-)

    76. heper 01/13 5:35am

      Thanks for the information. I have spent to so much time on creating backgrounds via using PS patterns, but this tutorial will make me earn time while designing.

    77. EssaysGuy 01/13 7:22am

      Thank you Ali for making our work a little bit easier , I like your idea, it’s great food for inspiration!

    78. web design glasgow 01/20 10:36am

      Nice one, thinking about a new banner for my website!

    79. Kinofilme 01/20 2:38pm

      Thanks for sharing this. It’s really beautiful.

    80. Birgit 01/24 5:34am

      It’s really easy and your result is beautiful. Thanks for taking the time!

    81. Ipuro 01/24 5:57pm

      Really great blog. Thank you. Nice layout!

    82. tuningteile 01/25 2:57am

      Very helpfull tutorial, thank you.

    83. Tom 01/28 10:30am

      Great articel! Thanks!

    84. Ash Value 01/29 5:59am

      Magic of Photoshop ;-)
      Photoshop is very powerful but it does requires skills, felling, inspiration. Your works are very inspiring and uplifting

    85. Gold verkaufen 02/02 6:03pm

      i also thanks for this article and the some helpful informations about this nice pictures

    86. Filme online sehen 02/05 3:10pm

      Thanks for this article! It’s amazing what you can do with photoshop!

    87. Rosa 02/06 5:32pm

      Beautiful!  Thanks for the tutorial.  I just found you, but where did you go?  Lovely site!

    88. Media Street Ltd 02/07 9:38am

      Great post. Thanks for the tutorial.

    89. fotografia ślubna Bielsko 02/08 1:04pm

      super extra tutorial. Thanks

    90. fotografia ślubna Katowice 02/08 1:05pm

      Nice idea. I will use this in my pictures

    91. Urlaub-Angebot 02/09 7:56am

      Great tutorial, I loved it. Thanks !

    92. uiuhy 02/09 1:16pm

      llllllllll
      llllllllll
      llllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllllllllllllll
      llllllllll

    93. Aerzte 02/09 6:16pm

      Thanks for sharing your techniques! You do great work on backgrounds!

    94. Reiseblogger 02/10 10:45am

      Amazing! Have u a tutorial about making fire in photoshop?

    95. bikalak 02/12 7:25pm

      very nice ! tnx

      visit my web site!! http://www.kermani.blogfa.com/

      and

      http://www.bikalak.com/

    96. Bilder Suchmaschinenoptimierung 02/13 12:13pm

      Excellent tutorial.  Very easy technic, it was really helpful! Thank you very much.

    97. Acompanhantes Sp 02/13 1:42pm

      I don’t believe good results rely solely on complicated techniques… sometimes simple ones are all that’s required. Great texture that and a technique most can follow and experiment with… thanks for sharing!

    98. Desentupidoras 02/15 4:19pm

      Photoshop is very powerful but it does requires skills, felling, inspiration. Your works are very inspiring and uplifting.
      I´ll try it in my next projetcts!

    99. Hotelian 02/16 1:42pm

      Amazing! Nice work!

    100. Reimar 02/19 4:19pm

      very nice ! Visit my web site: http://www.planetglobal.de or http://www.asienreisen-pauschal.de

    Hello

    I am a graphic designer who lives in Washington, DC.

    I am also a neat freak, a mother of 2 (dogs), cog in the government machine, Michigander (troll), a bicycle pilot, and an aspiring pie entrepreneur.

    Recent Work

    • Sunlight Foundation Holiday
    • Capitol Words
    • Apps for America
    • Sunlight Labs
    • Transparency Camp