Hi Guys,

So I'm a programmer and have managed avoiding experimenting with PS or other graphic manipulation software. Now I take a lot of pictures and am interested in putting together a website. I'd like to learn basic techniques used in PS to create subtle and good effects.

So I was following this tutorial. I'm into Step 3 and I've laid down the Gradient Effect. After this "That way the gradient will be masked off only revealing what you want the users to see. This technique is used a lot for this kind of stuff in Photoshop" you'll see a bunch of images. I guess it implies that after the gradient overlay, use a pattern overlay with stripes? Please correct me if I'm wrong here.

So the problem is I've never done a pattern. I downloaded some stripey patterns and when I tried to, it used its own colors, instead of keeping it the bluish colours.

Can someone explain this part in detail for me? I'm an extreme newb trying to learn.

I'm also curious about a couple of things. What does the "chain link" mean when it appears on a layer? What's the purpose of using it? And what does it mean when the author says: "That way the gradient will be masked off only revealing what you want the users to see."

Thank you! Any help is appreciated.

What does the "chain link" mean when it appears on a layer?

Based on the image in the tutorial, the 'chain link' is on a layer that has a mask on it (the white box to the right of the layer thumbnail). That 'chain' means that the MASK is linked to the layer and if you resize the the layer, the mask and the shape will be resized as a single unit. If you click on the chain link icon, you BREAK the link, allowing you to move the shape, resize it, etc. without affecting the MASK.

If you used the rounded rectangle SHAPE tool, you should automatically wind up with a black rectangle with the mask already there.

And what does it mean when the author says: "That way the gradient will be masked off only revealing what you want the users to see."

Think of the mask as you would as if you were going to spray paint a shape on a wall. You would create a cutout of the shape with a piece of paper and tape it the wall. When you paint the shape, the rest of the paper "masks" the wall so that only the cutout shape gets painted. The 'mask' of the paper constrains your shape to just the hole in the paper. A mask in photoshop works much the same way. In this case, the rounded rectangle is the 'hole' and the rest of the layer is 'masked' - but this mask is editable and resizable. If you disable the mask (right-click on the mask and choose "disable") then your entire layer will be filled with the color.

As for the pattern problem, because of the method shown in that tutorial, if you use a striped pattern of another color, your shape WILL take on the colors of that pattern, and you'll lose that blue. So, you can do one of 2 things; 1) change the pattern layer's blend mode (at the top left of your layers palette) or 2) apply the pattern using a pattern overly in a layer style instead. You will be able to adjust the size, opacity, and the blend mode of the pattern overlay in the layer style a lot easier than the method in the tutorial.

What version of Photoshop are you using ?
Did you download the pattern as a graphic, or as an actual Photoshop pattern file (.pat extension) ?

Thanks for replying, LadynRed. I was worried there for a bit

Though I don't understand the answers completely, I'm getting the jist of it.

I am not sure why this didn't work last night, but here is what I just did now (probably what you were trying to explain): The layer with the gradient, I right-clicked it, chose Pattern Overlay, chose the stripey pattern, and started adjusting the opacity... at about 10% or so, it preserves the blue

So is this a wrong way of doing this? Also, to answer your other questions, I downloaded it as a .pat into the Patterns folder. I don't see a stripey pattern as one of the default ones. THe ones I downloaded are bigger stripes... where can I find the ones like the author has for that t utorial?

Again, thanks! I'm trying to learn a few things and keep getting hung up on the little things. I often wonder when authors put up their tuts, why they don't go the extra mile and explain what other techniques can be used to achieve the desired work and why they're using the technique they are. Would definitely help a newb like me.

If you k now of any other cool tuts that explain how to create website elements using Photoshop (like this banner), please let me know. I'm hoping to pick up skill doing enough of these (basic skills, mind you!)

Originally Posted by Link82

The layer with the gradient, I right-clicked it, chose Pattern Overlay, chose the stripey pattern, and started adjusting the opacity... at about 10% or so, it preserves the blue

So is this a wrong way of doing this?

There is no right or wrong way. If it worked, then good job. There are many ways to add a pattern overlay, some more complicated than others but over time you will understand which will be the best route.

Also, to answer your other questions, I downloaded it as a .pat into the Patterns folder. I don't see a stripey pattern as one of the default ones. THe ones I downloaded are bigger stripes... where can I find the ones like the author has for that t utorial?

[/quote]
If the 'bigger' stripes you have downloaded are the same but just....bigger than that means you need to adjust the scale in the layer style panel.

To get there, you double click on the layer and then go to the pattern overlay, choose your pattern and just beneath the pattern thumbnail, there is a scale slider.. this will adjust it.

I right-clicked it, chose Pattern Overlay, chose the stripey pattern, and started adjusting the opacity... at about 10% or so, it preserves the blue

That is one way, and yes, that is the layer style method I mentioned.

There are tons of resources for patterns, try Adobe Exchange for one. You can also get some cool stripes at http://www.stripegenerator.com/index.php?page=index

I've also attached a pat file for the small diagonal lines similar to what that tutorial author used.