Creating Your Own Organic Textured Backgrounds
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.
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
8.
Finally, I decided to duplicate my cloud photo and shifted the position so that the white clouds created some more interesting silhouettes.
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
inspirationbit 01/09 2:57am
Thanks for unveiling the magic, Ali. The final result after playing with the layers and filters is stunning.
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…
Karin Axelsson 01/09 10:39am
Thank you very much! Beautiful work indeed!
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?
Jack Hoge 01/09 9:38pm
I was totally convinced you used a concrete texture! Blast…
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.
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 :)
Sean 01/13 10:10am
Great stuff! Thank you.
nick 01/16 11:14am
Very creative, works great.
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! [:
Lorraine 01/21 1:01am
Awesome: I’ll have to play around with that a bit. Thanks!
Muhammad Habib 01/22 4:21pm
Amazing!
Thank you very much!!
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
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.
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!
Nicole Feliciano 02/06 12:10pm
What a gorgeous blog! Congrats.
fred 02/09 7:23am
Thx, very nice !
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
hedda 02/19 11:31pm
Thanks for showing us your techniques! You do lovely work.
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!
Kristine 02/22 9:46am
I love this background technique and love the rain falling on your website too! Thank you for sharing! :)
Julian S. 02/24 11:52pm
Love your blog design!
Holger 02/25 5:43am
Realy simple with amazing result!
Thanks
Tom Bradshaw 02/26 11:29am
I love your style! Thanks for the tutorial!
BenSky 03/08 6:07am
Very interesting to see how its done, beautiful site, thanks for sharing!
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!
Melanie Rebane 03/15 11:36pm
Congrats on your award at SXSW-Luv yr site.
Tim 03/18 9:24am
I love this design, its truly inspirational, great work.
Ada 04/20 1:35pm
im really glad for founded your site, you are a great designer.
Congratulations!!!!
z.Yleo77 04/23 8:32am
a wondful tutorial
Sam 04/28 11:08am
thanks for the incredible tutorial, really like your style :)
Jake Wedding 05/05 11:02am
Wow… I really love these designs! Keep up the good work.
Oak Stevens 05/11 11:58am
These are sweet designs, totally love your style!
RakDesign 05/19 11:46am
this tutorial was really easy to follow and the finished product is exceptional, thank you so much Ali
Vancouver photographer 05/27 4:58am
Thanks for sharing this. Great little tutorial that’s easy to do.
IdealHut 07/10 9:31pm
Great tutorial! Thanks for sharing.
Sajitha Jose 07/16 10:06am
Thankyou so much for sharing this tutorial!.It did inspire me a lot!
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
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
Valerie 08/26 11:05am
Enjoying your entire site! Thanks for the inspiration.
Christine Daniloff 08/27 4:45pm
Thanks for sharing this. It’s really beautiful.
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.
CMYK 08/31 11:24am
great mini tutorial!!! :P
I like this blog… see you!
Identity Graphic Design 09/02 12:36pm
Thanks for sharing. I shall be using this on something I’m working on…
pfefferspray 09/07 7:16pm
Hello!
Thank you very much! Beautiful work indeed!
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.
Haarentfernung 10/06 2:12pm
Really great blog. Thank you.
Enthaarung 10/09 5:52am
This is a good inspiration for my holiday pictures!
Thank you for the blog.
Web design agency 10/09 7:22am
Thanks for very useful information and materials.
Fitness 10/14 7:30pm
nice and creative
Daniel 10/18 3:45pm
wow, its awesome !
pari sportif 10/20 11:53am
This is really great ! Congrats for helping noobs with useful resource like that !
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.
Anbieter Vergleich 11/02 5:08pm
very good inspirations....awesome!
Wendy 11/03 6:59am
Wow! This is REALLY beautiful. I’m very in awe of your work! Thanks so much for sharing.
interesting facts 11/04 5:57am
this tutorial is awesome !
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.
Michael 11/14 2:48pm
Thanks for the demo
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
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!!
martos 11/19 5:47am
Thank you very much! Beautiful work.
Hemant Singh 11/19 1:54pm
Thanks a lot for this tutorial. Beautiful site.
YaaCool 11/25 8:47am
I love this site! Thank you for the great work.
paris en ligne 11/25 6:25pm
Excellent work, congratulations to the artist, thanks.
Mark Brown 11/29 8:07am
Wow, I love the design of your site, thanks for sharing the tips.
unibet.fr 11/30 11:16am
Excellent work, congratulations to the artist.
xjeria 12/02 8:55pm
Just love your blog. Can I ask where you got it or did you design it?
Identity Graphic Designer 12/03 4:38pm
Great technique and easy to follow. Nice header btw...love the bird!
Patricia 12/08 12:54pm
I absolutely love your site. Thank you for the tutorial!
Silber kaufen 12/15 5:27am
nice inspirations and great technique. awesome
sang yeon 12/17 8:23pm
nice insprirations and thanks
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.
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>
ken gaspari 12/30 9:30pm
little nice workshop , thanks.
Kredit 12/31 5:50pm
Thank you for this nice insprirations!
Happy New Year :-)
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.
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!
web design glasgow 01/20 10:36am
Nice one, thinking about a new banner for my website!
Kinofilme 01/20 2:38pm
Thanks for sharing this. It’s really beautiful.
Birgit 01/24 5:34am
It’s really easy and your result is beautiful. Thanks for taking the time!
Ipuro 01/24 5:57pm
Really great blog. Thank you. Nice layout!
tuningteile 01/25 2:57am
Very helpfull tutorial, thank you.
Tom 01/28 10:30am
Great articel! Thanks!
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
Gold verkaufen 02/02 6:03pm
i also thanks for this article and the some helpful informations about this nice pictures
Filme online sehen 02/05 3:10pm
Thanks for this article! It’s amazing what you can do with photoshop!
Rosa 02/06 5:32pm
Beautiful! Thanks for the tutorial. I just found you, but where did you go? Lovely site!
Media Street Ltd 02/07 9:38am
Great post. Thanks for the tutorial.
fotografia ślubna Bielsko 02/08 1:04pm
super extra tutorial. Thanks
fotografia ślubna Katowice 02/08 1:05pm
Nice idea. I will use this in my pictures
Urlaub-Angebot 02/09 7:56am
Great tutorial, I loved it. Thanks !
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
Aerzte 02/09 6:16pm
Thanks for sharing your techniques! You do great work on backgrounds!
Reiseblogger 02/10 10:45am
Amazing! Have u a tutorial about making fire in photoshop?
bikalak 02/12 7:25pm
very nice ! tnx
visit my web site!! http://www.kermani.blogfa.com/
and
http://www.bikalak.com/
Bilder Suchmaschinenoptimierung 02/13 12:13pm
Excellent tutorial. Very easy technic, it was really helpful! Thank you very much.
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!
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!
Hotelian 02/16 1:42pm
Amazing! Nice work!
Reimar 02/19 4:19pm
very nice ! Visit my web site: http://www.planetglobal.de or http://www.asienreisen-pauschal.de