: Here’s how I’d build an element like that: The Main shape with solid fill layer contains the main shape, including all the layer styles. The Gradient layer above is a rectangle with

@Hamaas979

Here’s how I’d build an element like that:



The Main shape with solid fill layer contains the main shape, including all the layer styles. The Gradient layer above is a rectangle with a gradient fill, and a clipping mask with the layer below. That means the fills of the layers are combined before being masked with the Main shape with solid fill's shape.

Note that Main shape with solid fill is a solid colour layer — that's important, because if you use a colour overlay layer style, gradient overlay layer style or pattern overlay layer style, they're rendered on top of everything in the clipping group. In this case I've included pattern overlay layer style that's providing some subtle noise.

The end result is that you can extend the Main shape with solid fill layer without having to worry about the gradient ever moving. It's a great way to work if you need to guarantee that a gradient ends at a certain point for iOS resizableImageWithCapInsets or Android 9-patch images.

Image shown is Photoshop CS6, but CS5 and prior versions work the same.

Vote Up Vote Down

Login to post a comment!