Be kind to PSD-Good Designers, starting from details

Source: Internet
Author: User
Document directory
  • If the image cutter is dead, the cause of death is probably a terrible PSD.
  • Reasonable hierarchy and clear structure
  • Reducing the size and removing hemorrhoids is the key
  • Clear boundary, no blur
  • Excellent annotation layer, highlighting professionalism

Diagram: Taobao station, a waterfall stream designed by friends recently, has a beautiful grid ^__ ^.
As a designer, we should present the Perfect Aspect of the design draft to others. As Jobs said,Good Designers do not use rotten wood as the backplane of the wardrobe. Although your final design draft is perfect, your PSD makes people feel terrible. It will also make people think that you are not a good designer. Sorry for the dead jobs ~ XD

I have been playing with code for more than half a year in the village of goose, and it is a little unfamiliar with PSD.
Recently, the PSD file provided by the design mm is ambiguous. Express your feelings. Check whether there are the same confusions and problems.

If the image cutter is dead, the cause of death is probably a terrible PSD.
  • 1. The size of the PSD file is 71 MB ,(Maybe I think it's okay, but I got a cup of cake when I opened the PS, and the memory is not enough =)
  • 2. There are hundreds of PSD layers. Irregular layers make the chrysanthemum tight.
  • 3. The design draft is completely an illustration. It doesn't look like a webpage at all, so you can't cut down the graph. (Wish to eat PSD>. <)
  • 4. the GUI is a vector graph with unclear boundaries. (The results of the cut chart are compared ).

As a chart cutter, these problems are listed for the moment. I believe that many people share the same feelings.
How can you avoid mm as a designer?One-to-one cracking.

Reasonable hierarchy and clear structure

Whether you do design or illustration. Structural design is also a kind of design. When you plan your design draft properly and clearly, this design will be.
So how can we group and Layer Web Design drafts?

  • 1. By frame. (Webpage score, header head, subject main, bottom foot, and so on ).
  • 2. Divide by module. (Every small original, small decoration, and merging a large object can be a module)
  • 3. Score by attribute. (This is important. If a designer is working on a Web interface, you need to know what is"Image outputAndCode output", Because when you cut the graph, we need to hide the layer to which the" Code output "type belongs, and then export it ). There are also some annotations (Note the importance..
  • 4. By status (a major difference between web design and illustration design is that web design interacts with each other and groups the interaction States accordingly)

"Code output"Indicates that some of the effects in the design draft can be implemented using code, such as editable text (Large text, the text in the small button), Rounded corner, gradient effect (Advanced browser implementation).
"Image outputIt indicates something other than the code output, the icon, the background effect, and some text effects that cannot be implemented using the code (Such as art Fonts).

--------------

Reducing the size and removing hemorrhoids is the key

If you are doing a large inkjet PSD, you can understand it at 7, 80 m. But what you are doing is that the web design draft is so big that it is a bit unreasonable.
After all, the computer used to cut the figure is not as powerful as the designer. We also need to run an IDE editor, a virtual machine, and N browsers. At this time, if you want to open a 70 m PSD design draft (estimated to occupy 1 GB of memory ),Who cares? Who knows? Wow, Rz?

So it is better to cut the image and reduce the PSD. Let's look down on how to reduce the number. (After all, I am a person ^ __^ ).

  • 1. Remove useless large-size material layers (when the design draft needs to be handed over to the cut chart, it is best to copy a design draft to remove unnecessary original material diagrams in the PSD ). Because the clip image is the only thing that is hard to compress (this is often the reason when the PSD size is large), and the runtime occupies a large memory.
  • 2. remove irrelevant layers (this is a taboo. If it is not relevant to the design draft, it is best to delete it, or create a new temp group and drop it. Otherwise, it is easy to mislead the image splitting and occupy the memory, don't think that hiding will not occupy the memory xd ).
  • 3. Use Intelligent layers with caution. (Smart layers started to exist in cs4 .) Very easy to use, because it does not affect the quality of the original material, such as amplification and reduction, but TMD occupies the memory, eat CPU wow>. <
  • 4. merged list-type block design ,(This is very tangled and important.) Some designs in the web design draft are list-based. For example, the document list and information list. Generally, you need to make one copy and then copy a dozen copies. But .... However, too many copies occupy the memory. 0 0, decisively retain the key copy, or represent several copies of several States. Then merge the other layers.Believe me, it will be very happy to cut the figure. ^__^
Clear boundary, no blur

In web design, the most taboo feeling is. Because many things need to be accurate to pixels.

    • 1.Shape blurIn some cases, the shape edge is blurred because it is not aligned to the pixel (see the image.
      The solution is simple. Use the selection tool (a) to move the shape down to align it to the pixel, or simplyRaster shapeJust erase the Blur part.
    • 2.Blurred MaterialsThe materials seem to be not so professional? After a simple sharpening, you will find it useful (I use USM to sharpen more ).
    • 3.Text blurringIn some cases, it is found that the margin is blurred when the font of the vector is adjusted. Decisively, copy a copy (used for backup), raster it, and sharpen it a little bit.

 

Excellent annotation layer, highlighting professionalism

The code needs to be annotated, and the design draft also needs to be annotated. Two design drafts are the same. I believe you will like the design drafts with annotations.
Believe me, create a new group named comments for your PSD, so the eyes of the figure will surely see something crystal clear. ^__^

 

From: http://qilei.org/201203/do-well-on-psd-when-desiging/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.