PS Management and Specification V1

This is an important but easily overlooked area, many people do not have the document specification and management awareness; As a designer, the establishment of document specifications and management awareness, in addition to improve their work efficiency, but also a great help to team collaboration.

This article only to make a comment only with ~ hope you reader put forward suggestions and opinions, and common improvement. Since just V1, don't care about the interface of Wow ...

I. Document Management

1. psd files as little as possible:

For example, in the Web, to show the different expansion of the same page, you should do different things in the same PSD file, and then show/hide the layer Group (layer comp) as needed instead of saving as a PSD:

2. Reasonable naming documents:

A reasonably ordered and semantically named file name can easily and intuitively manage your source files, and will not make him want to chop you to death when cooperating with others.

Above the right figure from the real case, this stack of PSD if not open or use the software such as bridge God knows what is inside, the recognition is very low;

The recommended naming method is "page level + page content + Child level + page content", the middle of the use of the horizontal line separated, rather than the use of the hump (not high recognition) or space (output picture will automatically add in horizontal line-), such as "8_ shopping _4 commodity information." Of course, according to personal habits can be adjusted, as long as easy to identify the purpose of management.

3. Iteration of design file:

Do design know, repeated changes are sometimes unavoidable, when you spend a lot of time changed n times after the other said to return to the previous version or even the first version, if there is no reservation before the file ... Please spit blood and do it again.

Recommended: For larger changes, use a folder to save the lost design, and then store the changes in the current period based on the actual date of the file. For example, the above left figure, 140510 represents the first draft handed to the customer on May 10, 14, after opening the folder to see the output effect Diagram + source files.

This method can also be used to save the completed project document; The reason why the use of the effect diagram + source file to save the file, one is to ensure that the picture file is easy to see without the need for PS or bridge to view the PSD file, the second is to reduce the volume-delete the useless layer, hide the remaining layer (you can use the action batch to achieve yo ~ Then compress the file to reduce the volume of 50% or even 90%+.

4. Make a template of UI elements:

Many of the content in the UI is established and reusable, whether it's a Web site or a mobile phone, and building a unified template is good for developers and reduces the communication problems of developers.

This is being tested.

5. Keep the file in the cloud at the same time:

UI updates, especially when the program is already in development, should be given to the programmer as early as possible, so good teamwork requires that the design map be communicated to the relevant personnel in a timely manner, and that it requires cooperation with the members of other groups to reach the specification, It's a good idea to update the UI in the cloud like code iterations and attach a change note.

Two. Layer Management

1. Reasonable layer naming:

Don't bother; You can use the Direct selection tool to select a layer when the number of layers is low. But once a file becomes larger and layers become more layered, it can be difficult to find a particular layer; the precise naming of each layer can effectively prevent clutter and quickly position the target layer; like "Layer 1 copy", " Rectangle 1 "This layer name should be strictly prohibited.

If Andriod and iOS have been designed separately, use the naming convention for the two platform directly, and if you use the same design, recommend the iOS side, or at least semantics if you don't use the platform specification name.

Tips: Click on the image "layer" panel to the right side of the expansion-panel options, you can copy the layer suffix removed, and the layer effect does not expand.

2. Rational use of layer groupings:

Layer grouping can help you clear the file structure, with a reasonable layer naming allows you to choose the right menu and search name better use, at the same time, to the element reuse provides a great convenience.

3. Layer (group) Order:

Layer (group) order should follow the "from top to bottom, new to old, position close, layer adjacent" principle; strict adherence to the first three points will make your documents have a rigorous structure, reflecting the personal good professional quality.

Ah ~ Look at their neat documents do not feel very cool?

4. Layer Comp:

then to layer composite; it's not much to say, because you can record the status of a layer/group, so after you save a record again, the layer comp is perfect for displaying the different functional states of the same page. The disadvantage is that layer blending only records visibility, location, and appearance, other information is not saved (for example, Layer/group order), and a small warning appears on the right after the layer is deleted ... Where can endure!

Recommend a widget for managing layer comps, composer (http://www.jasonforal.com.zcool.cn/composer/):

Help manage layer compound, simple and rough; but because I do not support 2014 CC, I have not used the = =.

5. Remove unnecessary layers:

It is sometimes unavoidable to create extra layers in the design process, but you should delete the extra layers when you save or collaborate with others, leaving only the layers in different states. And the extra layers make the file a lot bigger, and it slows the opening up.

PS: Although the hidden layer and the Shintou layer can be deleted directly, but this operation may delete which we actively hide the status layer, we recommend that the project is completed, that is, the project archive before the manual method to remove hidden layers.

Three. Visual

1. Do not forcibly stretch:

It can keep the vector as far as possible, and maintain its proportion in the deformation operation to avoid deformation.

PS CC has its own shape fillet tool, but after multiple layer operation (I chew is ctrl+t reason) may appear inexplicably cannot use the state, so it is recommended to install a fillet plug-in cornereditor:

The address is as follows: http://www.zcool.com.cn/article/ZODEyMTY=.html#, the function is simple and easy to understand, change a rounded corner is very convenient.

2. Guides and Alignment:

The design is obsessive, Snap to grid, snap to pixels, align anything that can be aligned-"move a little bit over here", haha.

The basic method of alignment is to use the guide line, and to open the Smart guide;

Also need to be flexible to use the panel's alignment function yo:

To a reference line plug-in Guideguide (http://guideguide.me/):

A good psd file should contain at least the basic reference line--the outer margin, the element block, the element interval, the data design can make the implementation rule-based, and facilitates the handover and the later maintenance; Of course, the location and quantity of the guides can be changed and added or decreased as appropriate.

3. Use inner stroke or outer stroke as appropriate:

The following figure, the former is the inner stroke, right angle and clear, the latter is the outer stroke, there will be a dashed rounded corners. The implementation effect may be affected when the client is Chettu, so it is recommended to use an inner stroke when the edges are sharp.

4. Non-destructive design:

The commonly used non-destructive design techniques include: Intelligent object, mask, shearing Group, adjustment layer, etc.

The benefits of smart objects are needless to tell, who knows; but only a little, it is not recommended to use too many smart objects in the same file;

Extensions: In the following illustration, the PS default interface has two sets of digits in the lower-left corner:

The left side represents the uncompressed image data size after merging all layers, and the right represents the data size of all uncompressed content, including layers, channels, paths, and so on. To put it another way, that is, memory footprint, more detailed content please Baidu.

Although the replication of smart objects does not generate true multiple pixel content like a standard layer, just as a "source" role (that is, the number on the left will not increase), but the number on the right will increase, making the file opening speed and operation significantly slower, so the use of smart objects is still moderate, Do not directly throw a few m or even more than 10 m of the graph directly into the PS into a smart object, or the figure is convenient to use smart objects.

There's nothing to say in the back. Do not involve specific actions, use a grid or merge layers carefully to make the file in a convenient edit state.

Four. Text

1. Font:

Try to use the system with its own fonts such as bold, song, etc., or use commonly used fonts such as apple, etc. if you use a very good font, it is best to use a special font to record or even pack in another folder for standby; sometimes looking for fonts is really annoying ...

It is recommended to share a text library within the team.

2. Font size and line height:

The font size is only used in the design of integers, numbers, such as 12, 14, 16 pixel font size, reduce the frequency of the number of odd numbers, prohibit the use of decimal size; If no special case, the paragraph line height should be at least 1.5 times times the font size.

3. Text box:

text box size is appropriate, do not exceed the layout length, and to set different properties of the font (color, font, font size, etc.), split into separate text boxes to set.

If the text box is too large, it may cause a mistake, and a split text box can easily see the text properties.

Category:

• PS Getting Started Tutorial