Photoshop CC and the front end of those things

Photoshop is one of the most powerful weapons of visual designers, but Photoshop also brings a lot of surprises to front-end developers.

In particular, starting with the Photoshop CC version, it gets more and more interesting. Today, I will introduce some new features to you. If you have more new discoveries, please leave a comment below to discuss with us.

Automatic Chettu (including WEBP, SVG format):

Front-end developers often need to cut many layers into separate pictures. With the automatic graphics function, you don't need to spend more time cutting the diagram. Simply add the appropriate format suffix (such as. png) after the layer name to automatically output the picture you want to format.

Please keep the "Builder" in the menu "edit-> Preferences-> plug-ins" as enabled;

Click the menu "file-> generate-> Image resources", confirm that the menu item has been checked;

Try modifying a layer name (such as Itunes.png), and then checking the directory of the "filename-assets" in the directory where the current PSD file is located, and opening this directory to find that Itunes.png is already lying inside.

　Common skills:

@2x Retina picture output, add 200% to the layer before, such as 200% logo@2x.png;

Open WebP, SVG format automatic output: New Generator.json file, the contents are as follows:

{' generator-assets ': {' svg-enabled ': true, ' webp-enabled ': true}}

Copy this profile to: Windows: (win+r%USERPROFILE%) directory, such as C:usersxxx Mac OS: $HOME such as the "Macintosh hd>users>xxx" directory WebP output temporary branch Hold Mac OS.

Copy CSS

Photoshop CC finally launched the "Copy CSS" feature. It allows developers to quickly get the CSS code for the shape. In fact, many designers also want to learn CSS, with this function, you can let these love learning designers familiar with CSS code and graphics corresponding relationship;

Right-click the layer on the Layers panel, choose Copy CSS, or click the "layer-> copy CSS";

Multiple layers, select multiple layers, perform ctrl+g, and convert the selected layer to a layer group. Then right-click on the group and choose Copy CSS to bulk get the CSS code.

The smart object temporarily does not support the Copy CSS feature, which you can use to grid the layer.

The current version of this feature, which contains a lot of redundant information and unfriendly writing, may not be what you really need. So the ISUX front-end team improved this feature, you can download "photoshopcopycss" to enhance the Photoshop CC with the "Copy CSS" feature, improve the real adoption of CSS code, the current optimization is:

* Automatically identify CSS Sprite pictures, get background-position information;

* Automatically identify whether the icon;

* Optimize CSS3 gradient, text, border, shadow and other CSS code;

* Optimize RGB color values into hexadecimal color;

* Remove redundant CSS attributes, such as position, Z-index, left, top, and so on.

You can also feedback better suggestions to make this feature truly available to everyone.

Layer Management

Front-end developers to take over the PSD document, often have a large number of layers, we need to organize it. such as removing whitespace, locks, text, and so on. We can also quickly locate layers through the layer type, name, effect, property, and so on.

This feature makes it easy to navigate to the currently selected layer and is ideal for PSD documents that contain a large number of layers.

Separate layers are also a good feature. After the isolation layer feature is turned on, we can move the selection tool, click on the contents of the canvas, and find the layers we need to organize them into a separate PSD file.

　WebP Plugin

WebP is a picture format that Google developed to reduce the amount of data and speed up the transmission of the network. Especially suitable for the transfer of mobile-end pictures. Significant bandwidth savings, currently only Google Chrome browser to its native support.

The Mac OS version of Photoshop CC has its own output WebP feature. You can download this plugin to output the WebP format under Windows. After installation, you can select WEBP format picture in the "File-> Save as" dialog box in the Photoshop menu.

WebP for Photoshop v0.5b5 December 2013 Mac | Win

Action conditions

Photoshop CC adds an action condition that allows you to perform commands or other actions based on different conditions.

Smart guides/Using layer colors

These two features are not a new feature of Photoshop CC. Why to say here, because it can help us a second center alignment, a second welt, this is very practical. It is also recommended that the designer use layer color to mark the change position so that the front-end developers can quickly locate the layer.

Category:

• PS Getting Started Tutorial