Hello and welcome to this tutorial on creating Textured Backgrounds in photoshop for the
web. So first we want to go ahead and open up a new document here. Im going to go ahead
and keep mine width nine hundred, height nine hundred, but if you were using this as a way
to present mock-up images for your client I would definatly suggest going ahead and
making this the width and the height for the screen resolution that you are aiming for.
And again you are going to want to name yours somthing, I am just going to keep mine untitled-1
because I will be deleting it after this tutorial. Go ahead and click ok. You want to go ahead
and immediatly create a new layer. And you will see why here in a second when we overlay
our pattern but Im gonna go ahead and call this lower-case background. Ok. And then I
have already chosen this really neat color, I like it, its fdffe3 it sort of a cream looking
color. We are going to go ahead and use that. You want to select your paint bucket tool
and go ahead and fill that in for your background. So now we have already created our background,
so now we need to create the pattern to lay over our background. So go ahead and click
file, new to make a new document. And this we definatly have specific pixel sizes. We
want a width of five and a height of five and we want the background contents to be
transparent because we are going to set what we create in this five by five pixel space
on top of the background we just created. And again you can name this something, I am
going to go ahead and leave it untitled two. So go ahead and click ok. I like to zoom in
using the control plus (ctrl+) option so zoom in all the way until you can see all those
little pixels. We are at three thousand two hundred percent zoom. And so what we want
to do is go ahead and before we do anything else is to select a new color and I like to
use greys in the pattern and you will see why hopefully in a second but I am going to
go ahead and select bbbbb9. I really like that grey. So we are going to go ahead and
click ok. Again, just remember this is a very simple basic pattern and this is just to sort
of give you a guideline of how the whole pattern process works in creating patterns so that
you can make your own, but we are going to go ahead and make a diagonal pattern. We are
going to go over here and select our pencil tool which is right under the brush tool and
you just want to fill in with that grey a diagonal line just like that. That is all
there is to it. And then we want to hit edit and go all the way down to define pattern,
click define pattern, and we will name this diagonal, I think that is how you spell it,
click ok. Then go back to our background that we already created. Now we want to make sure
that little b background is selected. Go up to layer, go down to layer style. You can
find it from blending options but I like to just go straight to pattern overlay, click
the pattern overlay and then this little bubbly thing will show up but that is ok. We just
click this little arrow here within the pattern section and then we can select our pattern
that we just created. And as you can see it gives you this pattern that has been overlayed
within the background but we need to make some adjustments because that looks sort of
silly and we are only at sixty six percent zoom. So we can take a look at that, lets
go ahead and click ok for now and zoom in a little bit and see how dark that is? If
you tried to write text over that it really wouldnt show up well. So what we want to do
is go back layer, layer style, pattern overlay, and though you can adjust the scale I just
sort of like to keep it at one hundred percent, but what we do definatly want to adjust is
the opacity and you can click it down and sort of test it out like this, I like around
twenty percent so I am going to go ahead and type that in. Twenty percent, click ok and
there you have it. it is a very light texture but you can add text. Let me give you an example
here. Let me make it a different color. And it looks just fine, it totally works with
the text. So I hope you enjoyed this tutorial on creating textured backgrounds in photoshop
for the web. Remember to comment and ask questions on my channel, thank you.
