Splashnology.com

How to create a simple texture background in 5 seconds

How to create a simple texture background in 5 seconds
  • AndrewG,
  • March 3, 2011


First fill the background:

Add a new layer and make a noise and then duplicate the layer:

Do motion blur on the first layer with the angle of 0 degrees, distance 40 pixels:

Do the same thing with another layer and set 90 degrees:

Then apply the blend mode multiply to the layers with noise:

Add lighting in Overlay mode:

Here is also an example of how to create a simple relief background in two clicks.

Create a new layer with noise on a gray background, blend mode screen.

Duplicate this layer, invert (Ctrl + I), displace by 1 pixel down, blend mode multiply.

Reduce the opacity of both layers to 20%

Then colorize it (color layer in soft light mode), you can do it twice

You can brighten it if it is necessary (the layers in the soft light mode), insert the icons, buttons, text or whatever you have in your design.

In addition: on the second step you should apply edit→define pattern and in further work use the pattern overlay in luminosity mode.

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Redler Tamas

    awesome :) bookmarked and stumble liked :) thanks a lot

  • http://www.facebook.com/nikkodelumen Nikko Delumen

    I tried but I really can’t do this in 5 seconds. I suck. Great article BTW. Still LOVE IT.

  • Jorge

    yea kinda misleading, please show me how to do this in 5 seconds, does that include the time it takes for photoshop to load?

    • CrackedPepper86

      You’re an idiot.

  • http://www.inquisitively.me Julia

    This was such a helpful tutorial!  The textures look great!  :)

  • http://twitter.com/GatisNegribs Gatis Negribs

    nice, some day I try it myself

    • fibre

      dont say someday, do it now

  • guest

    how do you blend layers?

    • koenahn

       Set the blend mode (upper left part of the layers panel, where it says ‘normal’ in the drop-down menu)

  • http://www.logoblog.org Logo Design

    Good technique

  • http://www.insightsoft.ae Professional Web Design

    Very nice post! i do like this way! btw nice texture background you have shared.

  • http://www.logodesignstemplate.com/ Professional Wordpress Themes

    Great way to create such a Cool texture background, thanks for sharing this techniques.

  • http://typographiclogos.blogspot.com/ Typographic Logos

    Brilliant piece of tutorial, such a nice and easy steps defined here. Thanks you so much, it helps me a a lot.

  • http://www.logoguru.co.uk UK Logo Design

    Very nice textures! these are simple n more attractive! Great :)

  • guest

    so i’m brand new with photoshop, but was wondering how you kept your same dark purple (or whatever color that is) the same after applying noise.  In order create my noise layers I had to use the paint bucket to paint the new layer white and thats messing my original color up when i overlay the 3 layers.  How do i maintain the original color?  Thanks! 

  • BC

    NOT SURE HOW YOU SUPPOSED TO ADD NOISE TO LAYER WITH NOTHING ON IT.   YOU SAY “ADD NEW LAYER AND MAKE NOISE”    WHAT IS ON THE NEW LAYER?????????????

    • http://www.facebook.com/ISTesla Isaac Sinclair

      I’m pretty sure they assume people using this kind of site are smart enough to know how to create something as basic as noise.

  • Betty

    how you possibly fucked up what should be such a simple tut is beyond me. Thanks for wasting my fucking time

    • Moo

      It made perfect sense to me, as I assume it should to anyone that has used photoshop for a while… Though given that it seems to be more geared for beginners hehe.. a bit of a fail in that respect :)

  • Cactusbottom

    Thank you for this!!  This are some very professional looking textures in no time at all!

  • Fibre

    @ guest below, you have to change the blend mode of the noise layers to multiply, you can do that from the layers panel, If you do this the noise layers will blend nicely with the dark purply background

  • fibre

    it took a while but I finally got the first tutorial, when adding noise play around with the options, choose monochromatic for the best results.

  • http://www.stephenturley.com/ Stephen Turley

    When you say “make a noise” could you explain how to do that a little better. When I try to add a noise from the filter menu, I get an error that says the selected area was empty. 

  • maithili01

    Wow great work , really looks same like Photoshop , very attractive yet simple, Thnx for sharing.

  • j_funk

    very sloppy tutorial…

  • Ranjithar85

    what is this man……… ??? no idea plz do explain in simple manner like step by step… thts help me very well bcoz m nt an expert in photoshop…..

  • http://www.facebook.com/azimkg Azim Abasbek

    What do u mean by Displace by 1px down”??? It has Vertical & Horizontal values 10-10…

  • http://www.rackmountsales.com/Cat5_KVM_Switches_s/56.htm Cat5 KVM

    That’s really awesome texture background and I must say that designer is
    very professional and deep thinker. I am going to apply these backgrounds on my
    websites and always valued it as a good establishment with an owner that cares.

     

  • Maninderjit

    For the first texture, how can i fix the edges so if I were to repeat the pattern, everything would blend together?

    • Spooky

      Fixing the edges is quite simple on a texture of this kind, use filter – other – offset, so that the edges are near the middle of the picture(dont have to be exact here), then using clone stamp tool with a fairly wideish brush, alt click to other places on the image where there is no stretching etc and simply paint over the bad areas. You will probably have to do this atleast twice to make the texture perfectly tileable (the top, bottom, and sides of this new texture in the areas you have painted will be off and need fixing) but shouldnt take more than a minute for a texture this simple. 

      Making more complex images tileable can take alot longer depending on the image, and what it is going to be used for, so you may find cutting out areas and using layers, aswell as clone stamp, and good old fashioned painting etc a better way of working, and possibly the new content aware fill might help in some cases (atleast as a base layer to get started with, maybe) if you have newer versions of photoshop. But at the heart of all tileable textures I have made in photoshop over the last 15 years or so has been the classic offset filter :) .

  • http://www.webdesignbizz.com/ Website Template

    OMG great tutorial…very simple but outstanding Very helpful in designing
    very nice …i hope I’ll get the same result….

  • No

    thx :)

  • Lisa

    Thanks but it’s not enough detail to actually create this.  For example you can not add noise to a new blank layer so there appears to be some steps you are missing.  It would be great if you could add all the steps for us.

  • Guest

    Worst Tutorial I’ve ever seen.

  • http://kazzit.com/ Website builder

    Wow. I didn’t know you can do this in a matter of seconds; thanks a lot for sharing this; bookmarked. cheers!

  • Sib

    How much noise do you apply?

  • David

    It was a bit confusing as some parts weren’t completely explained but this technique is gold

  • http://www.facebook.com/nicolas.manzini Nicolas Manzini

    thanks you awesome result :)

  • Phil

    I have absolutely no idea how to want to add Lighting in overlay mode.

  • Sam

    Worst Tutorial I’ve ever seen

  • Henry

    For those of you who aren’t getting the finished effect, make sure to remove the white background layer!
    Nice tutorial, but could have been explained a lot better…

  • anon

    awful tutorial..

  • madhavi

    its nice bt little confused

  • bruna

    worst tutorial ever.

  • hgfjhfjfjh

    I think for creatives here would be much faster to read this and for you to write if you would just say “make a new document, create a layer, add noise – you are done” :) Think about this! Than you can say how to make it with one click!

Increateble.com

Newsletter

Social Networks

Latest Tweets

Follow us on Twitter