Web Design Example: PSD should also be reasonable layered structure clear

Article Description: be good to psd-good designers, start from the details.

With the map: recently designed to help friends waterfall flow Taobao station beautiful lattice ^__^.
As a designer, you should show the perfect side of the design draft to others. As Jobs says, good designers don't use rotten wood as the back of a wardrobe . Although your final design is perfect, but your PSD is very bad, it will also let the later Chettu think you are not a good designer, sorry dead jobs wow ~ XD

In the Penguin Village to play code more than half a year, playing a PSD to all a little rusty.
Recently to design mm to the PSD file produced a bit ambiguous. Have the sentiment to express. See if there are all the same puzzles and the same problems.

If Chettu is dead, the cause of death is likely to be a terrible psd.

• 1. psd file size unexpectedly has 71M, ( perhaps looks feel good, but a open PS on the cup, memory is not enough =)
• 2. PSD layer hundreds, various layers can not understand. Irregular layer groups make people daisy-tight.
• 3. Design Draft is an illustration completely, how to look like a Web page, do not know how to cut the map. (I would like to eat the PSD >.<)
• 4. The GUI is a vector graph, the boundary is not clear. (Chettu results, paste a ratio).

As a figure-cutter, these problems are listed for the time being. I believe there are many people who share the same feeling.
So as a designer mm you should also how to avoid it? The right remedy one by one cracked .

Reasonable layering, clear structure

No matter what you do is design, or illustration. Structural design is also a design, when you are reasonable and clear plan your design manuscript, then this design has ten.
So how do you group your web design drafts in groups?

• 1. by frame. (page points, head heads, theme main, bottom foot, etc.).
• 2. According to the module. (Each small original, small decoration, the synthesis of a large object can be as a module)
• 3. Divide by attribute. (This is more important, if designers do is the Web interface, need to understand what is " picture output " and " code output ", because when Chettu, we need to "code output" type of layer to hide, and then export). There are also some comments ( notes that are important, followed by a talk ) related to something.
• 4. According to the status, (Web design and illustration design is a big difference is that web design is interactive, need to be layered for each interaction state grouping)

" code output " means that some of the effects in a design piece can be implemented using code, such as post editable text ( large text, arial text in small buttons ), rounded corners, and gradient effects ( advanced browsers can be implemented ).
" picture output " refers to something other than the output of the code, such as icon icons, background effects, and some text effects ( such as artistic fonts ) that are not implemented with the code.

——————————————

Reduce the size, go to its hemorrhoids is the key

If you do a big inkjet psd there is a 7,80m that can be understood. But what you do is that the web design is so big that it's kind of unreasonable.
After all, cut the picture of the computer is always not powerful designers Wow, and we have to run an IDE editor, run a virtual machine, and then run N browser. This time if you also want to open a 70M PSD design (estimated memory 1G), this time who the egg pain who knows wow 囧rz

So be nice to Chettu and get the PSD smaller. How to get smaller and look down. (After all, I've been ^__^.)

• 1. Remove the useless material layer of large size, (when the design manuscript needs to be handed over to Chettu, it is best to copy a design manuscript, remove the PSD of useless raw material map). Because the material picture is the only thing that is hard to compress (the PSD is much larger in size because of this), and the runtime occupies a large memory.
• 2. Remove extraneous layers, (this is taboo wow, if not related to the design of the best delete, or a new temp group to lose the face, otherwise it is easy to mislead cut figure, but also accounted for memory, do not think hidden away from the memory of the XD).
• 3. Use smart layers with caution. (Smart layers Start when they're CS4.) Good use, because does not affect the original material quality, such as zooming in and out, but the TMD accounted for memory, eat CPU Wow >.<
• 4. Merge list type block design ( this is very tangled and important ) there are some designs in the web design that are list type. such as: Article List, information list. Usually the design is made first, and then copy a more than 10. But.... However, too much replication takes up memory wow. 0 0, the decisive retention of a key part, or several states. Then merge the rest into the layers. believe me, it would be nice to cut the picture. ^__^

Clear boundaries, no longer blurred

In web design, the most taboo feeling. Because a lot of things need to be accurate to pixel.

• 1. shape blur , sometimes using the shape tool because there is no alignment to the pixel (see map), resulting in the edge of the shape is sticky.
  The solution is simple, using the selection tool (A), small move the shape to align it to the pixel, or simply erase the blurred part of the grid shape .
• 2. The material is blurred , the material makes the person feel is mushy not so professional? A simple sharpening, you will find very useful (I used more is the USM sharpening).
• 3. text blur , and sometimes found that the font size of the vector is the edge of the sticky. Be decisive, copy (backup), and then grid, a little sharpening. ^_^

Good annotation layer, highlight professional temperament

The code needs comments, and the design drafts also need comments. The same is two design drafts, I believe you must very much like the design manuscript with annotations.
Trust me, give your PSD a new group called annotation (comments), then cut the picture of the eyes must be flashing crystal things. ^__^