Julieanne Kost's Blog

In an attempt to make the hand-off between designer and developer easier, several attributes of Type and Shape Layers can be copied as CSS. To copy a single layer or a Layer Group, select it in the Layers panel, then use the fly-out menu to select Copy CSS.

The DIV shapes include:

• Rectangle, rounded rectangle, ellipse

• Solid Color fill, gradient fill (linear & radial), opacity

• Drop Shadow, z-index

Stroke Attributes include:

• border-width, border-color,

• border-style (dotted/dashed/solid)

• background-image (layer name)

Text Attributes include:

• font-size, font-family, color, font-weight (bold),

• font-style (italic), font-variant (small-caps),

• text-decoration (strikethrough, underline),

• text-transform (uppercase), vertical-align (sub, super)

• text-align, text-indent, transform

• Drop Shadows

In addition, there are third party plug-ins( such as CSS Hat) that can help with handing off Layer Style information to CSS.

I’m reposting this video (Creating Transparent Logos for Watermarks and Overlays in Photoshop), because it’s still one of the most popular questions that I receive at events.  Although the video covers the topic in detail, in a nutshell, the technique is to use the Fill slider on the Layers panel to hide the content on the layer while maintaining the applied layer styles.

Shape Layer with Fill slider set to 100% in the Layers panel.

Shape Layer with Fill slider set to 0% in the Layers panel.

There are several ways to display a photograph within a shape in Photoshop.

• This first example uses a vector mask to control what portion of the photo is hidden or revealed. To create this effect, select the desired shape tool and  set the Shape tool options (in the options bar) to Path. Then drag out the shape and choose Layer > Vector Mask > Current Path.

• The second example shows the photo (Layer 1) clipped by a shape layer. To create this effect, select the desired shape tool and set the Shape tool options (in the options bar) to Shape. Then drag out the shape, reposition it in the Layers panel so that the shape is below the layer with the photo and – with the photo layer selected, choose  Layer > Create Clipping Mask. Note: you can achieve different effects by changing the shape layer’s fill and stroke.

• The third example shows that if you create a copy of the original photo and reposition it under the shape layer, lowering it’s opacity and adding a drop shadow can make it more interesting.

Photoshop CS6 has changed the default behavior when dragging vector curves. After creating a path, dragging on a curve (line segment) will reshape the path much more gracefully than in previous versions. If however, you like the legacy behavior, select the Path Selection or Direct Selection tool and check Constrain Path dragging in the Option bar.

When adding a Solid Color stroke to a shape layer in Photoshop, I achieved the results that I expected. However when I added a Gradient stroke to a shape layer, I was surprised at the results. Photoshop is drawing a gradient and then clipping it to appear within the width of the stroke. Of course you can change the look of the gradient by changing the style (Linear, Radial etc) but if you want a gradient to be applied either along a stroke or across a stroke, then you might need to step into Illustrator. The following graphic shows the different ways that Photoshop and Illustrator can apply strokes to shapes.

If you copy and paste a shape from Illustrator to Photoshop, the results will differ depending on the type of layer selected:

• If a pixel layer is the selected layer in Photoshop, the pasted shape will take on the fill of the foreground color as set in the Tool bar.

• If a shape layer is the selected layer in Photoshop, the pasted shape will take on the fill from the options bar.