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.
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.
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.
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.
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.
Step 5
Continue duplicating and moving until you get something like this.
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.
Step 7
Click on your background layer and change the color to #CCCCCC. This will give it a darker feel to it.
Step 8
Go to your layers palette, click on the right arrow on the top right and click flatten image.
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.
Step 10
Now we are going to create our second pattern. Open up another 100x100px document.
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.
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.
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)
Step 14
Flatten the image, like we did on the last pattern and select an area like I have here.
Step 15
Now go to edit>Define Pattern, and call it carbon fiber
Step 16
Lets go and open a new document, this will be the one we are working with. I’ll make mine 1680×1050
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.
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.
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.
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.
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.
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.
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.
Step 24
Keep playing around until you get something you like.
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.
Step 26
Finally put your logo or text in the box, in between the box layer and the refection layer.
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:
With the metal pattern:
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!
Good tutorial..very detailed. I love the look of the final background.
It looks really nice, thanks for the tut..
[...] Create an awesome background using patterns [...]
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.
[...] Visit Source. [...]
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.
[...] Brushes Tutorials Shapes textures Stock Photos PSD Patterns Actions 3D Models Create an awesome background using patterns AUTHOR: denisdesigns.com [...]
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.
very good tutorial! :) thanks mate
Now your site is bookmarked! ;)
@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
this site has so much good information,keep it up
i always finda new trick when i am here
thanks
http://www.l8l9.com
nice man
i like to make my own layout with my own picture and i’d like you own website
good tutorial and amazing use for that patterns
thanx and i add it to my blog favorites
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.
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.
Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
Waiting for your next tutorial :)
Very nice! Great tutor my friend!
[...] Create an Awesome Background Using Patterns [...]
Excellent design article. Something i will be practising for sure!
[...] Create an Awesome Background Using Patterns [...]
[...] Create an Awesome Background Using Patterns [...]
Nice logo…
thanks for the tut…
[...] Create an Awesome Background Using Patterns [...]
[...] Create an Awesome Background Using Patterns [...]
Very Nice! Keep it up!
Fine!!!!
[...] - Create an Awesome Background Using Patterns [...]
[...] - Create an Awesome Background Using Patterns [...]
[...] - Create an Awesome Background Using Patterns [...]
[...] - Create an Awesome Background Using Patterns [...]
[...] - Create an Awesome Background Using Patterns [...]
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.
@S.M.Riyaz Thanks, I’m glad you like what we do!
Terrible tutorial. Lost me at the start. I hate when they dont tell you how big of a circle to make.
@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.
[...] Launch tutorial Share and Enjoy: [...]
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!
@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.
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!
[...] - Create an Awesome Background Using Patterns [...]
Here is the result of your tut’s.
Thanks a lot =)
http://mad-popietro.deviantart.com/art/DeviantART-logo-120432022
[...] Here was my source of Inspiration. [...]
[...] 12- Create an awesome background using patterns {Tutorial} [...]
[...] Create an Awesome Background Using Patterns [...]
Great Logo im gonna use this tutorial to make a button, a desktop menu button… thanks for the idea!
after I have created the first pattern and flattened, I can’t seem to “Define Pattern” when I have created the marquee. Any help?
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.
A really nice result in this easy to follow tutorial!
[...] 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 [...]
[...] Create an awesome background using patterns | Denis Designs - Mit Hilfe von Hintergrundkacheln kann in Photoshop ein sehr cooler Hintergrund erzeugt werden. [...]
[...] Create an Awesome Background Using Patterns [...]
Great tut. This is what I came up with
Sorry didn’t post the link
http://i301.photobucket.com/albums/nn74/robbruguera/background.png
That looks awesome. Nice job!
[...] Create an Awesome Background Using Patterns [...]
[...] Create an Awesome Background Using Patterns [...]
[...] 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". [...]
[...] 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". [...]
[...] Create an awesome background using patterns [...]
[...] Create an Awesome Background Using Patterns [...]
[...] 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“. [...]
[...] - Create an Awesome Background Using Patterns [...]
[...] - Create an Awesome Background Using Patterns [...]
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
[...] 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 [...]
[...] 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". [...]
[...] Create an Awesome Background Using Patterns [...]
[...] Create an Awesome Background Using Patterns [...]
[...] Create an Awesome Background Using Patterns [...]
[...] Create an Awesome Background Using Patterns [...]
[...] Create an Awesome Background Using Patterns [...]
[...] Create an Awesome Background Using Patterns [...]
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?
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.
[...] Create an awesome background using patterns [...]
Nice man!
there is a big banner or ads blocking half of this site and really hard to follow! you should make a video instead.
[...] - Create an Awesome Background Using Patterns [...]
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 !! =)
[...] Tutorial Link [...]
[...] Tutorial Link [...]
Awesome! Truly awesome!! Thank You so much.
hi i am mzummal ur frinde
[...] Tutorial Link [...]
get this back ground
[...] iframe test [...]
I try to darken the edges and the edges turn white. All the colors are on black. How do I fix it?
nvm it works now
Great tutorial
[...] Create an awesome background using patterns [...]
very cool tutorial
very excellent tutorial, thanks you for tutorial
where do we go to make its damn idotic
Wow thanks 4 this great Tut :=)
great tutorial… very informative ;)
[...] Create an awesome background using patterns [...]
very nice, thanks
[...] Create an Awesome Background Using Patterns [...]
Wow! Amazing effect. Very cool!
[...] 34.Create an awesome background using patterns [...]
[...] Create an Awesome Background Using Patterns [...]
Cool photoshop effect! thanks!
awsome
love it, thanks
how do i put logo in it i dont understand :(
[...] Awesome metallic background for text [...]
usefull effect! thanks!
[...] Awesome metallic background for text [...]
very nice in all back ground designs thanks
mzuri sana…awesome
[...] Create an Awesome Background Using Patterns [...]
[...] 之后是本篇的主题：如何做这么个带小洞洞的图片~~ 需要的同学请看：Create an awesome background using patterns [...]
[...] Sfondo metallico per il tuo [...]
[...] - Effetto metallico su sfondo testo [...]
[...] Sfondo metallico per il tuo [...]
[...] Awesome metallic background for text [...]
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?
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.
[...] Awesome metallic background for text [...]
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/
thanks a lot, very interesting tutorial
[...] Efek besi [...]
[...] Create an awesome background using patterns [...]
[...] Awesome metallic background for text [...]
Nice tutorials.. thank you for share admin.
Awesome metallic background for text …
One of the best tutorials I’ve seen around. Thank you so much.
Muito bom Gostei…
Olha o meu..
[img]http://a.imageshack.us/img641/7408/wallparacell2.png[/img]
http://a.imageshack.us/img641/7408/wallparacell2.png
good titorial!
Very interesting tutorial!
nice job, godd lot!
no, subject was not disclosed
Very God!!!
Tanks!
Thank u very very much!!!
[...] Awesome metallic background for text [...]
QUEDO INCREIBLE
http://img406.imageshack.us/img406/5310/fondokqx.jpg
[...] 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 [...]
[...] Awesome metallic background for text [...]
[...] Entrar al Tutorial: CLICK AQUI!! [...]
[...] Create an Awesome Background Using Patterns [...]
looks great but I think the D and d don’t work so well :)
Can I ask if used textures or brushes for the grunge effect?
[...] 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 [...]
[...] Entrar al Tutorial: CLICK AQUI!! [...]
[...] Entrar al Tutorial: CLICK AQUI!! http://www.denisdesigns.com/blog/2009/03/create-an-awesome-background-using-patterns/ [...]
[...] Awesome metallic background for text [...]
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.
[...] [size=24]Awesome metallic background for text[/size] [...]
[...] Awesome metallic background for text [...]
[...] 1. Create an awesome background using patterns [...]
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.
[...] Awesome metallic background for text [...]
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?
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.
Amazing post, thank you, I’ll save at this point you!
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!
Hello, thanks for your great tutorial!
I used it here
http://hydra-artwork.deviantart.com/#/d46332i
I agree with your Create an awesome background using patterns | Denis Designs | Free Photoshop Tutorials & Inspirations for Web & Graphic Designers, good post.
cool
cool
[...] Awesome hard background for text [...]
This is a good post. great work.
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.
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.
[...] 15.Efek besi [...]
rubbish
You have noted very interesting points! ps decent website.
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.
[...] 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! [...]
[...] Awesome metallic background for text [...]
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.
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.