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.

In this Episode of the Complete Picture (Julieanne’s Top 5 Features for Photographers in Photoshop 13.1 Exclusively for Creative Cloud Members), Julieanne will demonstrate her top 5 favorite features in Photoshop 13.1 including refinements to the Crop Tool, nondestructive editing with Blur Gallery and Liquify, increased efficiency with Conditional Actions,  practical default Type Styles and support for Retina displays on Macintosh.

• To warp multiple layers of text as a single unit, first convert the layers into a Smart Object, then add the warp.

• When creating point type, holding the Command (Mac) | Control (Win) allows the repositioning and scaling of the text. To constrain the proportions of the type while scaling, add the shift key).

• Command + Return (Mac) | Control + Enter (Win) commits the text.

• Shift-click the Type tool in the image area to create a new type layer when close to another type block. (Adding the shift key prevents Photoshop from auto selecting nearby text).

• While the type in the image is selected, Command + H (Mac) | Control + B (Win)  + H will hide the selected “reversed out” type enabling a more accurate preview of the type (especially when selecting at color).

• Option + Delete (Mac) | Alt  + Backspace (Win) fills any selected type with the foreground color. Command + Delete (Mac) | Control + Backspace (Win) fills any selected type with the background color. If the type layer is selected, but no individual letters within the text block are selected (there isn’t any text insertion point in the text), these shortcuts will change the color of all of the type on a layer.

With the Type tool selected, clicking on the Font menu (in the Options bar) displays a preview of the typeface to the right of the Font name. Because it can be difficult to make a design decision with such a small preview, you can choose to view the preview larger by selecting Type > Font Preview Size > and choosing your preferred size from the list. (Note, in previous versions of Photoshop, I believe that there was a preference to change the size of the font preview.) In addition, you can cycle through the available fonts on your system by selecting the name of the current typeface and pressing the up and down arrow. Or, just type in the name of your desired font.