transduction Artifact Assistor PS (PS external artifact, pro-license free of charge, the following is the use of the reproduced method)

Basic Introduction

Unlike other graph marking software, Assistor PS is completely independent of the PS itself, said to be a more suitable plug-in, designed to improve the efficiency and speed of the cut graph mark. Although not a plug-in, but it is connected with PS, when you select a layer in PS after, you can use its function. If you take the time to download is a trial, I believe that will not let you down, and even can make you feel brief encounter.

The main functions are as follows:

• Easily create tagged documents with one-click Export layers
• Fast unit value Conversion
• Quickly create a reference line (similar to guideguide)
• Rounded Rectangle Adjustment
• Copy layers at regular intervals

Official introduction Video (has Fanqiang to Youku): http://v.youku.com

Assistor PS is suitable for PS 3.0 or more, and is compatible with both Windows and MAC systems.

After watching the video, impatient students can go directly to its home site http://witstudio.net/en/assistor/download to download.

For more detailed features and some tips on how to use them, you can continue to look down.

transduction marking function

The majority of the most popular cut figure of the most common features of the first appearance, especially web designers and UI designers, need to frequent and development engineers to deal with, if not marked clearly, the development of the effect can sometimes simply frighten the dead.

"You cheat, the design is not like this ..." You are not marked, blame me ... ""......"", don't cry "from then on, I swear, I must make a good coax of the mark, let this proud and charming programmer unreasonable rebuttal, shame ... Ok no nonsense, next to you to introduce this graph artifact each interface of the function of the detailed.

1. Each layer selects this box to process each of the layers individually, and does not select to treat the selected layer as a whole
2. The resolution unit setting allows you to select the resolution units of the output data, such as PX and various DPI used in Android development.
3. Color settings Toggle Marker Color
4. Tag Settings settings tagging environment
5. Tag data output automatically calculates and outputs information such as location, size, spacing, and so on for the selected layer
6. The boot box creates a boot frame for the size or layer you selected
7. One-click Graph to quickly cut out and save the selected layer
8. Data extraction outputs The data information for the selected layer
9. Copy all the data from item eighth above to clipboard

With the click-to-open marker setting, we can see the following interface:

1. The output settings specify various settings for the output data, such as font, trumpet, antialiasing, color, and bold.
2. Resolution Unit Settings
3. Decimal/Integer Setting selected rounds the output integer
4. color code type set RGB or HEX, specific what type, see Programmer's coding habits
5. Font units set PT, PX, SP
6. Create a marker background sometimes our markup may be similar to the color of the design, so adding a background can make it clearer
7. Control point settings You can select a marker to start from the upper-left corner of the selected layer, upper-right corner, and so on
8. The first row is selected to automatically link the layer after the tag. The second row is selected to automatically create the group each time the tag

Marker coordinates

Select one or more layers and click the mark coordinates button to mark them. or (alt+1). The small triangle on the right of the button can be entered into the Settings page of the function, and the format of the marker and the specified marker position can be selected.

Sometimes we need to mark the relative coordinates, what do we do? Select an area with the selection tool before you start the tag

Mark Size

Also select the layer after the Point button is marked. or (alt+2). The small triangle can be formatted with a marker and selected to mark either the width height or the marker.

Mark Distance

There are three types of markers here, shortcut keys (alt+3). A small triangle can be formatted as a marker.

1. Select two layers to mark the distance between the two layers
2. Use the selection tool to pull an area to mark the longer edges of the area
3. Select only one layer to mark the distance between the layer and the canvas

Tag Text information

Information about the output text based on settings. Shortcut keys (alt+4).

Click the small triangle to select an information option.

Split Line section is whether the guide line is displayed, the effect is as follows, the left is the display guide line, the right is not displayed.

The lower half of the split line sets whether to display information about the font, in turn, the font family, font style, font size, row height, font eye color, effect (shadow). Create a boot boxCreate a boot box for the layer you selected. Shortcut keys (alt+q).

Click the small triangle next to set the size of the boot box. For some primary cut figures, this feature may not have been touched. There are times when we need to create a boot frame for some special layers and then tag them, and see the following example. The wrong token

The correct mark

Here I first create a unified boot box for each bimbos icon, size 38px*38px, and then mark the interval between each boot frame. If you do not have this boot box, according to the first tag, the marked data is not a mess, the development of students in the code when the amount of blank pixels ... One-button cut graphThe transduction is so complicated that the author's messy function hides under this magical button. This feature works by copying the layers that need to be cut into a new window and saving them. The following steps are used:

1. Select the layer you want to cut

2. If you need to cut out each layer individually, tick

3. Click the Cut Graph button, or the shortcut (ALT+W), at this time PS is like a script to open the game, full-automatic PA snapped to cut up ... (The new window size copied from the graph is equal to the actual size of the layer, including the layer's style, such as a projection)

4. When you pull a selection using the selection tool, the slices in the selection are cut out, and the slice size is the same as the size of the selection. If you choose a layer, but there is nothing in this layer, the slices you cut out are all blank. (It's a bit more complicated here, and it's interesting to try the action yourself.) ）

Also click on the right side of the small triangle, we can further set the function to make it faster and more fully automatic.

1. Set the fixed size. Sometimes we need to cut a layer that contains transparent pixels, such as the four social icons labeled above, and you can set the 38px*38px and then cut the graph.

2. Output scale. Here you can choose the output scale, such as @2x,50%, Android HDPI, Assistor PS will automatically help you calculate and output.

3. Save settings automatically. It is recommended that you tick auto Save and save and close, which automatically saves the tiles and turns off the new tile window. Path to set save paths. Suffix option @2x automatically adds @2x to the file name of the @2x slice when checked.

Create a reference lineIt is believed that many people, especially UI designers, have used guide guides to create reference lines, and Assistor PS contains most of GG's features.

1. Create a horizontal center guide if there is no selection, create a horizontal center guide for the entire canvas.

2. Create a vertical center reference line above.

3. Delete a reference line

4. Reference line settings (see below)

5. Clear all settings

6. Create a reference line based on settings

Guide settings (not too much to explain here, only translation)

Unit Converter (with complimentary color picker)1. Enter the value 2. Select Base Unit 3. Conversion result 4. Color coding

5. Color picker (preferably any position on the screen!) Hidden too deep, I found ... ）

Rounded Rectangle Conversion

You can change the circle of the square to a circle. Tick each corner to edit each corner individually. Please select a rectangle in PS before use. copy layers at regular intervals

It's another fried chicken. Practical features, see Example: Before use:

Set Assistor PS as follows (number of columns 3, number of rows 3, column interval 50px, row interval 50px)

After use:

But it is recommended that you use a little time to fill in the following data, such as:

transduction Artifact Assistor PS (PS external artifact, pro-license free of charge, the following is the use of the reproduced method)