UGG Sale UK UI Designer Photoshop document management and document specifications

UI designers: Photoshop document management and document specifications 2011-09-09 23:37 This is an important but easily overlooked areas, many designers no sense of document management and document specifications. Only code that workers only what coding standards and version control systems, photoshop software as an application to discuss what implications does this have?
As project file, a complex page psd source file with 200 to 300 layers is a normal thing. BOSS as the most customer-facing and the development of links, and there is recognition of individual differences in visual performance, you may experience the largest changes in demand, the proposed changes, demand repeatedly .... Development of collaboration as a member of your source files by other designers or developers to use or modify. Development documents as part of your source file will be faced with the transfer, inheritance and reuse. Layer name not recognized, there is no grouping of hundreds of layers, components, difficult to modify, to be called the original material to be processed beyond recognition, modified versions can not go back and design style can not reuse the same group style or layout psd files can not be unified ... If you are modifying such a psd source file, will not be crazy?
as a UI designer, document management and document specifications to establish awareness, not only to facilitate the team to assist in the transfer of project files and, more importantly, is able to Quick significantly enhance their efficiency.
as part of project management, PS document management also has the following characteristics:
coding specifications: naming convention. Architecture: the organizational structure is reasonable. Version management: not the original material the formation of irreversible damage, can be traced version. Coordination mechanisms: elements and styles to facilitate reuse and call. Resource management: by defining the default configuration library or repository to improve efficiency.
below, I will share with everyone eleven specific methods of work.
I. layer grouping and management
PS offers three ways to organize layers (layers) between: a layer set, link set, cut group.
during the process of user interface design, the layout should be based on block groups to organize layers. Group of layers is a basic method of information organization, will be large, dispersed, the clutter of information through the organization, the entire sequence, optimization, storage, forming a process to facilitate the effective use of the system.
1 with the main advantage of group management layer:
easy organization and retrieval:
will be incorporated into the same layer group Layer group, the layer group name, and form a tree structure, you can easily create to quickly find the layer in the Layers panel sequence where.
how to quickly select the layers:
select the Move tool in the Properties panel to cancel the check before automatically selected in the drop-down menu, select the layer. When using the move tool, hold down the ctrl key, you can directly select the currently visible layers.
learning use right:
using the above method is rapid and the selected layer, click on the button, you can see the context menu shows the layer-based group said the tree list, right through the menu you can quickly switch to the desired layer. But the premise is to have a good layer structure and layer names.
easy to move to modify the layout:
layer group as a whole can move and zoom the layout will be located in the same block layers incorporated into a set, you can quickly change the location and scale of a block to facilitate the implemented to adjust the layout.
facilitate the overall management:
layer group can be removed as a whole, show / hide, change opacity and blending mode mode. Layer formed grouping, so that creators can quickly display / hidden a number of layers results preview. On the set of layers for the overall operation. You can also create a mask based on the group, the overall control of a group layer in the design display area
website belongs to a different page, use the layer group can quickly create a unified design templates,UGG Sale UK, to retain a total area of ​​the map layer grouping.
2 groups and link layer packet with structure group
layer effects, the link group more used to represent relationships.
to establish the link layer group, you can lock the relative position between the several layers. Implementation of any one of them move zoom, drag copy and delete operations, will the overall effect.
easier to create and link the lifting group relations, in the same link group layers are located in different layers can be set, in fact, the formation of another structure dimensions.
3 Try not to merge the layers.
layers merge operation is irreversible, (middle finger of all this operation is not irreversible in the History panel, including a limited number of steps back). Through the implementation of ctrl + alt + E to merge layers, this command is selected in the top layer after a merge operation creates a copy of the merger to generate a new layer. You can easily modify this separate layer and call, but did not affect the original layer.
Second, there is no layer naming
a layer naming and grouping of source files is the most criticized front-end developer, to establish a good document standards,UGG Sale UK, to develop the habit of naming the layers, in addition to help source file transfer, inheritance and reuse, to provide efficiency, but also reflects the respect the members of the collaboration. Meanwhile, the layer named right-click menu using layers sound premise.
proposals are mainly in English named, facilitate the transfer between different platforms.
how to name, can refer to the front of the naming conventions for the interface layout, mouse events, the interaction of different states commonly known name for many conventions and abbreviations, such as:
page header: header content: content / container body of the page : main
footer: footer navigation: nav Sidebar: sidebar columns: column
overall layout: wrapper around in: abbreviated as L RC horizontal / vertical: abbreviated as H / V
navigation: nav submenu : submenu Abstract: summary button: btn scroll: scroll
mouse hover: hover click: click view: visited.
so ...
Third, the use of a mask the benefits of using the mask:
mask layer by stacking a mask to control the display of the original image. The greatest advantage is: the freedom to achieve erase the original image layer, cut, matting, edge blur, etc. These very common operation,UGG Sale UK, but the original image content will not be jeopardized.
2 layer masks and vector masks:
mask into a layer mask (I think this is called the mask pixels a little better) and vector masks.
both use the same one bitmap, is a vector. Layer mask support transparency, support vector mask path.
layer mask on the toolbar at the bottom of the Layers palette and create a mask to create the button. Constituency with the storage principle To record through the gray areas and the transparency mask. Show full transparency on behalf of white, black represents opaque, 50% Gray 50% transparency. Support the filter, soften and change the transparency of such an operation. Because it is an object pixel, perform transformations, the mask will be a qualitative edge damage.
vector masks need to create a vector object, then hold down the crtl key while clicking the bottom of the Layers panel, create a mask button to complete the creation. Through routing and pens and other tools for editing vector masks. As a vector object, the object changes when the edges of the mask is always smooth. But does not support transparency, soft edges and most of the filter.
3 shear strengths and weaknesses of the group:
clipping mask group is also a form, does not destroy the original image with the same characteristics, both can have a pixel mask features can also have a vector mask features (depending on the bottom layer shear group).
cutting edge group is easily applied to multiple layers, use with intuitive organization, but the downside, the object must be in the order of the layer next to, and adjust the layers in the order of operations, easily lead to misuse.
PS back in the history of the steps is limited, and all operations through more than a certain number of steps in the modified version can not be restored, as well as for the original version of the changes. For a project file, the version of the irreversible catastrophic. So for the PS, we should retain the material of the original data, try to use non-destructive editing.
PS the first version of the user in order to preserve history, had frequent Only later with the History panel, with a snapshot, with adjustment layers, smart objects with, CS3 version is more to learn the properties 3dsMAX stack.
to look at PS in the Effects superimposed: fill layers, adjustment layers, blending modes and layer styles operating regions: the mask mentioned above, shear properties of the stack group: smart objects stack filter library (PS3 in the new feature). Fourth, the use of adjustment layers and fill layers beneath the Layers panel to add
adjustment (fill) layer button
1 fill layer:
when the need for a forum on the page to add a light gray background , in the navigation bar on the use of long beautiful gradient background, how you used to create a blank layer, fill in the constituency directly? or use the fill layer?
Ps in the traditional way in the blank map layer to create a selection or path after the implementation of the Fill command, but allows the use of fill layers since the object is filled in solid, gradient or texture, the paint bucket tool to become one of the most tasteless.
compared to the traditional way, fill the layer with greater operational flexibility. Click the layer thumbnail in the Layers palette, you can always change the color, modify the gradient, change texture, and has a very intuitive preview.
fill layer fill the shape of the object range is actually a built-in mask, so this means a collection filled with all the advantages of the mask, for example, can use black pen to fill free to modify the edge, or use a vector editing tool to modify the vector shape mask.
icon Case Study: Use a gradient fill layer, use the brush / eraser to modify the mask
in web design, all need to use the fill color of the place as far as possible the use of vector layers to complete the path + fill, This fill color can be generated at any time convenient to modify and maintain the non-destructive deformation.
icon Case Study: Use vector tools to create common components + fill layers.
2
adjustment layer to adjust the image color scale, hue, contrast, color balance? the color images into grayscale images, color inverting, adjusting photo color temperature, these are the most common operations. But you often undecided, adjusted for the effects of the original image to impose a designed experiment ...
light blue button, BOSS does not like reading, requires change light green. Change after completion ineffective, BOSS also requested into the gray ...
If you often encounter the above, please use the
PS can be used to achieve image adjustment methods:
using adjustment layers is better than the other two operations, adjustment layers will not change the original image pixels (slightly increased file size), is also a built-in mask. Can change at any time. Conducting a number of adjustments, the use of a new adjustment layer means that multiple layers, multiple layers can be separately adjusted to modify sorting, mixing styles and transparency.
icon Case Study: Using adjustment layers to change the color components, six stack filters using smart objects and smart objects
PS 1 version cs increased from smart objects (smart object). Smart objects can protect the contents of the original pixels, users can transform operations (including scaling, rotation, deformation, etc.) without Repeated reduce image quality. If a 400px wide bitmap material, the use of compression to 200px wide transformations, rotation 45 °. Later want to modify the 300px box, rotating in situ. But the last time compression operation has been formed on the image quality is irreversible damage. If the change in operation before the first material to smart object, no matter how many times after the conversion, you can guarantee is based on the original quality of 400px wide to make the change.
Another advantage of the smart object, you can edit one copy of a copy to achieve the synchronization of all changes.
a copy of the object using a smart psd source file size will be smaller than the standard psd file, this is because the smart object layer of replication does not like the standard layers copied as many times to generate the real pixel content, but only as the source role.
this and
icon Case Study: Smart Objects, Smart Object edit the original file, to affect all copies.
2 Smart Filters and Smart Filters
filter stack is the application of smart objects for some filters, filters in the filter library can browse menus, preview and unified object using multiple filters .
filter stack and AI is very similar in the appearance of the panel, all Smart Filters are applied over the display panel in the PS layer. You can change the filter, adjusting the transparency and overlay mode filter, adjust the order of application of multiple filters.
In addition to these advantages, the smart object can again modify the original file, so the use of intelligent filters, used in the original file and the operation of the filter has a great flexibility. Also are non-destructive editing.
icon Case Study: Use smart filters and filter stack.
3 rasterized
smart objects, vector objects, text objects there are some similarities: being rasterized (pixel-based) before, anytime, anywhere with editable, this feature allows the object type in any time should be your first choice. However, some filters and transformations of its failure.
so be very careful to operate grid-based commands, raster, and merge layers as a destructive and irreversible.
If you have to use some filter effects or deformation, suggested that it might create a copy of the above objects, hidden retaining, on the copy operation.
modified for edge, edge feathering, erase these, you can use technology to complete the mask. This is also a non-destructive operation.
seven, using the layer style (layer style)
layer style effects can be very rich, including projection, gloss, texture, light.
addition to the usual light, projection, relief (measured in webUI design but in fact they are not used),
layer styles can be used to fill solid color, gradient and texture. Comparison and fill layers, layer styles most notable feature is easy to transplant. Stroke can be used to create border. Inner Glow can be used to create padding. Outside light can be used to create a small margin and rounded corners. Mixed-mode, transparency, layer fill transparency are part of the style. They can be easily transplanted with a simple style can be created using a variety of glass textures, crystal effect, brushed metal, plastic texture of the button style.
layer style advantages:
layer styles can copy and paste operation to transfer to other layers. Through multiple choice, multiple layers of a paste to a style. You can also shortcut keys to operate. Alt + drag, is moving a layer style, alt + crtl + drag to copy the layer style. (When using the mouse shortcut, transparency, transparency and blending modes fill the three properties will not be like paste layer style as passed in the past also.)
Layer styles will not damage the original image quality, allowing the configuration parameters at any time to modify the style .
change the original image, the application layer style on it will immediately and automatically change to adapt to the new image.
layer style support lossless scaling. (Except those related to texture pixels). In addition, when the image psd file size (resolution) is changed, layer styles can be synchronized zoom. Must ensure that the
Layer Styles can be saved to the default configuration, enter the repository, the reuse between several pad files to ensure that the inheritance pattern and unity.
following links provide a lot of layer styles can be downloaded, double-click. sal file can be loaded directly in the style in the default configuration.
eight, resource management - define the default configuration
interface design for the existence of this much-needed style project files and more than a unified team of project, resource management is an essential task.
and procedures, like writing, you need a unified interface, function, PS where there are many elements can be pre-configured.
including gradient, texture, color card, layer styles, vector shapes, brushes, contour lines, tools, patterns, etc., need to do more professional uniform color scheme.
PS provided in the Resources can be grouped, named, add, delete, storage, loading and other operations.
Each resource has a corresponding control panel, the right of each panel has a folded triangle. Click to start after the unified management menu.
before starting the project,
the logo and signature decorative graphics as vector shapes default load. As the main color palette will be used to load the default gradient loaded as the default gradient background of the main buttons and style as the default load the layer styles or fill texture used as a default texture will be used to load the brush as a dotted line or load ...
spend some preparation time, will discuss a unified design, and then store the new group. And different types of default files are stored as default: If color documents: * _pro.aco, gradient file: * _pro.grd. Distributed collaborative designers. In addition to significantly improve efficiency, but also to ensure that documents the work of professional and norms.
and no matter how long the project lasted, or a long time experienced frequent revision, or replacement of a few designers, can ensure the basic style of coordination and harmonization.
nine. ps collaborative projects over the document version control
Adobe CS version from the beginning, the suite provides a Version cue and Bridge.
Version cue: user PSD document version control, multi-player online collaborative management
Bridge: image management / browsing tools. All support for Adobe project files preview (was saved as a pdf-compatible format). With support tag, picture size, type and other dimensions of powerful filters to manage the large number of local material library very well.
These tools software can easily be overlooked, (I think they have done the previous version 2.0 had bad, Bridge has led me to frequent crashes, but from the cs3 version, these two gadgets are in done a lot of performance optimization, becomes very easy to use)
combination Version cue and on the Bridge, part of the designer to create a SVN system, version control of project files, which have a well written and very detailed tutorial.
From: