I haven’t written any Photoshop tutorials for a while. Today I’m going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color skins. It is particularly useful for creating customizable and dynamic templates (see demos).

What is so cool about this?

With transparent pattern image, users can easily customize the background color by altering the hex color.

overview

Photoshop Trick: Extracting Pattern

This Photoshop trick works on most pattern images. For this demonstration, I’m going to use a tiled pattern image below. Follow the steps below to extract the pattern from the image. You will learn how to use Photoshop Channels to create selection.

pattern image

Step 1

First you have to turn the image layer to black & white (go to Image > Adjustments > Destaturate). Then go to Image > Adjustments > Levels. Slide the: shadow, midtone, and highlight stopper to adjust the level. The goal here is to make the transparent area completely white.

image levels

Step 2

Now you should have a black & white pattern. Go to Image > Adjustments > Invert (or press Cmd + I for shortcut). Select all and copy the pattern. Go to the Channels palette, add a new Channel and then paste the pattern into the Channel layer. Remember: the white pixel in the Channel layer will be the selection.

channels

Step 3

Go back to the Layers palette. Create a new layer. Go to Selection > Load Selection and select the Channel that you’ve just created in the previous step. Then fill the selection with a solid color (eg. black).

load channel selection

Shortcut tip for loading the Channel selection: hold down the Cmd key and click on the Channel layer thumbnail. Learn more Photoshop shortcuts here.

Opacity

To control the instensity or the darkness of the pattern, adjust the layer’s opacity.

image opacity

Final (see demos)

Save the final pattern as a transparent PNG file. Now you may use CSS to easily change the background color to any hex code.


.pattern {
	background-image: url(pattern.png);
	background-color: #666;
}

87 Comments

ron
Aug 16, 2011 at 12:52 am

good tutorial, but instead of copying and pasting, just select the most contrasted chanel duplicate it and then use the levels. that is my way.just less steps.

Craig
Aug 16, 2011 at 7:31 am

How is the browser compatibility?

Joel Drapper
Aug 16, 2011 at 7:52 am

I think it covers every browser made within the last 10 years pretty much. Even IE6 if you use one of the IE6 PNG fixes http://24ways.org/2007/supersleight-transparent-png-in-ie6

Lisa
Aug 17, 2011 at 4:34 pm

If someone is using a browser that can’t support a simple function such as this one, they probably don’t care about aesthetics in general.

Kalen
Aug 16, 2011 at 7:32 am

Thanks Nick. Working on a new site and am just now getting around to tweaking the design- have been working mostly on the DB and function. I like this approach to making some backgrounds with depth and flexibility.

minisite templates
Aug 16, 2011 at 7:35 am

Hmm, this is really worth reading post, thanks for posting….

Gaurav
Aug 16, 2011 at 7:35 am

very nice tutorial… Thanks for sharing.

Jon
Aug 16, 2011 at 10:02 am

Good application of this technique. I use this all the time when clients send me their logos as jpegs and don’t have access to source files. I usually can get rid of a white background in a matter of seconds.

Lumix
Aug 16, 2011 at 12:48 pm

Very nifty tutorial. Now I know how to create my very own background pattern for my website. :) I’m thinking of changing my background soon!

jehzlau
Aug 16, 2011 at 12:50 pm

Nice…! I’ll make one now based on this tut! :)

Simon
Aug 16, 2011 at 2:10 pm

Hi

Thanks for this. I am just getting into WordPress blogs and want to get into designing my own themes.

Thanks

Simon
Colchester, UK

Steve Cook
Aug 16, 2011 at 10:47 pm

Great idea. Although I’m not sure what use it might be, you could use jQuery to dynamically vary the background color within a set range.

Gaurav Mishra
Aug 17, 2011 at 12:42 am

This is REALLY SO GOOD!

ข่าวบันเทิงเกาหลี
Aug 17, 2011 at 1:10 am

Nice tutorial. I’ll try this in my next website.

sonali
Aug 17, 2011 at 1:24 am

I found it really useful thnx.

Tobias
Jan 21, 2012 at 6:05 pm

Thanks for this, i use the same technique for a website but i’m searching for a solution to change the color of the pattern itself – i mean it should be possible to change the background color and the pattern color … do you know a solution without HTML5 …

Andy
Aug 17, 2011 at 5:08 am

Very useful, especially when prototyping. How would you do this in Fireworks?

Sampson Orson Jackson
Aug 17, 2011 at 2:38 pm

Great post and nice timing.

M Francis
Aug 17, 2011 at 7:07 pm

Cool trick… I actually use this on my sites sometimes.

billseymour
Aug 17, 2011 at 11:45 pm

Very useful. Many thanks for sharing.

Kieran Daly
Aug 18, 2011 at 10:54 am

Thanks for this. There seems to be a huge push for this type of pattern these days and I see it all the time in the newer WordPress themes that are out there.

What is driving this change. Up to a few years ago it was flat backgrounds but its lieka stampede t ocreate this type of thing.

Don’t get me wrong I think they are OK and this tutorial is the first I have seen on how to do it but when eery theme on the block has it it is like Pamplona running the buuls :-)

Damian
Aug 19, 2011 at 2:24 am

Thanks keep em coming

Umer Malik
Aug 19, 2011 at 10:08 am

Excellent post for web designers.

Sökmotoroptimering
Aug 19, 2011 at 2:36 pm

Thanx for this useful tips.

Its a good tutorial.

Milwaukee Web Design
Aug 19, 2011 at 5:52 pm

Cool trick. Does this work with GIF’s as well?

Ali
Aug 20, 2011 at 12:25 am

Good tutorial
Thank you!

Ali
Aug 20, 2011 at 12:26 am

Thank you
That was cool

珠海男科医院
Aug 20, 2011 at 1:57 am

路过踩一踩,表示我来过
支持你的博客http://www.webdesignerwall.com/
也谢谢您的回访http://nanke.zhwjyy.com/?wyxn3tj3

art
Aug 20, 2011 at 4:04 am

mena shaung

YourTubeTheme
Aug 20, 2011 at 7:37 am

Nice technique, I really like how the user can switch colors and still get the same pattern that you’ve created for them.

iphone 4 case
Aug 22, 2011 at 1:26 am

I’d have to check with you here. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to comment! thank you!

andischroeder
Aug 22, 2011 at 9:04 am

thanks for the tutorial. Can you tell me how to add this to my twitter page?
thanks, Andi

Jonathan
Aug 22, 2011 at 10:29 am

I use a very similar technique to this for backgrounds, but I set it up with 2 divs so that I can set the opacity on the pattern and the background color separately. It’s a bit more verbose, but a bit more flexible (which, imo, is a good tradeoff in a wordpress theme)

Jasa Pembuatan Web
Aug 22, 2011 at 6:44 pm

Beautiful Pattern.. thanks for share…

Chantelle
Aug 22, 2011 at 7:28 pm

Fantastic and useful tips. The Radiolab site has one of my favorite backgrounds check it out http://browsingideas.com/radiolab-surreal-quirky-engaging/

Devon Wedding Photohrapher
Aug 23, 2011 at 9:31 am

Great tutorial. Thanks for posting. Really helpful info, clearly explained.

Andronicus Riyono
Aug 24, 2011 at 4:10 am

Combine the darkest pattern from this page with CSS background image hack: Emulating background-opacity from http://nicolasgallagher.com/css-background-image-hacks/ then you’ll get more possibilities with just a single image. :)

Callum
Aug 24, 2011 at 4:15 am

If you have Adobe Fireworks it’s a one step process.
Simply import your pattern and choose Filters > Other > Convert to Alpha.
This removes the white background. No pixels are harmed in the process, so you get a nice, clean, crisp transparent pattern. :)

Régis Kuckaertz
Aug 24, 2011 at 4:20 am

Fireworks users may spare a few steps using Filters > Other > Convert to Alpha on the image. Very useful!

zohaib
Aug 24, 2011 at 6:22 am

well defined and very useful..

Jasper
Aug 24, 2011 at 8:38 am

This is great!

One extra thing that I like to do is sorta combine the “light” and “dark” versions of the pattern, so that the final image includes both black, white, and transparency.

It’s more confusing to make, but then you get a texture that has less effect on the color you tile it over. (In your demo, the “light” textures are much lighter in color than the dark ones)

Here’s the one I made: http://cl.ly/2s443k3A1o2f0d0Y2N0O

Layered over a saturated color, it changes the lightness very little, keeping the original background color more intact.

Free Sick Wallpapers
Aug 24, 2011 at 1:02 pm

http://www.freesickwallpapers.com/

Check this out everyone Featured Wallpapers
Especially to suit your Mobile Phone!!

sundar
Aug 25, 2011 at 3:55 am

Cool & Useful….

sundar
Aug 25, 2011 at 3:57 am

Qutehue web design & development Studio

shan
Aug 25, 2011 at 7:29 am

Really nice demos..

Web Design company India

Web Design - Jared
Aug 25, 2011 at 8:17 pm

Nice tutorial. That pattern reminds me of my grandparents wallpaper. ;)

Jane
Aug 25, 2011 at 11:52 pm

Very nice collection for web design.

Brisbane Osteo
Aug 29, 2011 at 2:47 am

Awesome! Very cool, thanks for posting!

kangtanto
Aug 30, 2011 at 2:02 am

a really nice trick in using transparent background. Never thought about it…

Sara
Aug 30, 2011 at 12:46 pm

I love this tutorial but I was wondering what would be the best way to make this a background pattern that would keep repeating itself as you scroll down a website? I’d be afraid the lines wouldn’t match and you’d see a difference between each repeat.

Biev
Sep 1, 2011 at 2:21 pm

I don’t think you’d want that all over your website, though : / That would be really overkill, unless you’re going for the “grandma’s kitchen wall” effect! But if you look at the picture, there are only two symbols repeated and all of their respective bits and pieces are present in the selection, so it’s just a matter of putting the puzzle back together, then cropping carefully and setting the background to repeat.

avihay
Aug 31, 2011 at 5:59 am

Very nice. i love simple stuff to work with.

azz
Sep 5, 2011 at 4:34 am

where can i find other pattern in photoshop?

Maverick
Sep 13, 2011 at 6:41 am

wow, this is such a nice trick! very impressive!

Nancy Andrews
Sep 16, 2011 at 8:33 am

I am a newbie in photoshop and your tutorial helped me in becoming close to pro at creating beautiful templates.Thanks a lot.

MOB Design Group
Sep 23, 2011 at 1:59 am

Although still a struggle, I finally might get this one to work properly!! Thanks for link to shortcuts as well that’s a nice bonus.

Joe
Sep 24, 2011 at 5:37 am

kwel!!! thanks for sharing!!! :D nice work

mybookmart
Oct 3, 2011 at 2:19 am

nice one thanks for sharing it

Md Shahnur Arefin
Oct 11, 2011 at 1:04 am

Photoshop looks always very difficult to me. I am little confused how to start.

Maypre
Oct 14, 2011 at 2:49 pm

This is really cool. This is something that we can be used for website owners who like to make color changes to their site but still maintain their companies branding.

Humera
Oct 19, 2011 at 3:27 am

Awesome! thank you for sharing

Web Design Malaysia
Oct 19, 2011 at 6:41 pm

Great read. thanks for this!

adumpaul
Oct 22, 2011 at 2:58 am

Realy impressive design

Translation Services
Oct 25, 2011 at 9:56 am

The second demo pattern is great, a good background makes a website more appealing and attractive.

Sü Smith
Oct 25, 2011 at 8:31 pm

Super fun tut! I just recently made up some seamless subtle textures to use as tiles in PS, but haven’t tried incorporating the textures as an overlay to a colored background in a website yet. I’m looking forward to playing around with this. :)

Endy
Nov 7, 2011 at 4:24 am

awesome…make pattern looks transparant

(sorry for my english..)

sdsf
Feb 6, 2012 at 9:55 am

aasdds

adumpaul
Nov 12, 2011 at 5:01 am

Awesome tutorial.Thank you for sharing.

Προώθηση Ιστοσελίδων
Nov 13, 2011 at 3:06 pm

thanks a lot for the tutorial…

Will
Nov 23, 2011 at 9:14 am

This is great! So easy to follow, thank you so much for sharing

buy season 11 gladiator
Dec 12, 2011 at 2:48 pm

the pattern is ultimate like it.

Audee
Dec 13, 2011 at 11:17 am

I just made a quick try to extract the pattern and very excited with the result :) ~ It will save time-load for a website with tiny transparent .png file and simple CSS to make it works!
Much thanks for sharing this idea & tips ;)

M.H.Awan
Jan 30, 2012 at 3:36 am

Super cool man.Blogger Tricks.

Aniket - Freelance Web Designer
Feb 10, 2012 at 10:02 am

Really nice stuff.
Having a common background structure helps create a sense of continuity & have a variation with different textures on different pages, is a cool thing to do.
Thanks for sharing a great tutorial.

Web Designer Dubai
Mar 5, 2012 at 6:25 am

Really usefull stuff, Never find pattern background so easy and explanatory. Nice article. Look back later for more information. Thanks a lot.

Michel
Mar 6, 2012 at 6:00 pm

Awesome, nice work

Life insurance for Diabetics
Mar 12, 2012 at 9:02 am

Amazing.. love this thanks!! ;)

Trin CArl
Mar 12, 2012 at 2:49 pm

Great Idea…with the design, I hope u don’t mind me adding your web page to my blog for future reference, keep it up!!!!!

Omeganova
Mar 23, 2012 at 2:47 pm

What a great idea!
THX from Austria

Jessica Lee
May 17, 2012 at 10:07 am

Wonderful tutorial, thank you! I wish I’d found this years ago. :)

Thiet ke logo
May 17, 2012 at 9:27 pm

This is what I need, this article details, very useful

heather
May 25, 2012 at 2:31 am

Thanks for the tutorial! Very detailed. Also having it set in lower transparency makes the pattern more subtle so it isn’t competing with the other images on the website (great for image heavy sites btw)

Joe John
Jul 19, 2012 at 3:09 pm

Thanks for sharing…. BTW i like your header image.

Ibiza yates
Jul 29, 2012 at 1:32 pm

Having a common background structure helps create a sense of continuity & have a variation with different textures on different pages, is a cool thing to do.

ACS
Aug 6, 2012 at 3:45 am

Buy Wow gold, Buy arena rating, buy arena carry

Afzal
May 27, 2013 at 12:06 pm

Wow!,,Look so great and interesting,,Thank you much!,,,,

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.