Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Preparing PSD for Development


Published on

If you're designing for the web, and you work in an 'assembly line' environment as I do - whereby designers design
and developers develop. In an effort to streamline productivity and keep the development time as efficient as
possible, I have a few suggestions for designers.

I selected my favorite point form various articles and combined into this.

Published in: Technology, Business
  • Be the first to comment

Preparing PSD for Development

  1. 1. Preparing PSD Files for DevelopmentIf youre designing for the web, and you work in an assembly line environment as I do - whereby designers designand developers develop. In an effort to streamline productivity and keep the development time as efficient aspossible, I have a few suggestions for designers.1. Keep your photoshop documents as tidy and organized aspossible.Half of the struggle developers endure is trying to find and isolate specific layers (or layer groups) within a documentin order to create appropriate slices. This can be made MUCH easier if the designer takes the time to label the layersand groups with appropriate (and descriptive) names. It also helps to gather layers together into groups representingspecific parts of the site.1.1 Delete all unnecessary layersGive meaningful name to layers1.2 Combine layers in groups and keep the layers according to the position in designArrange your layer groups according to the flow of the document! Generally have the header group at the top, footergroup at the bottom, and everything in the middle… you get the idea.
  2. 2. Create a developer-only mockupAnother thing that might help the process along is to containing notes, font styles, button states, colour swatches andinformation on any non-web fonts. The client doesn’t care about this mockup in the same way a developer doesn’tcare about the client-only mockup... but it makes it dead easy for a developer to extract only the relevant informationrequired to create the code.
  3. 3. Include Designs for Interaction (Hover, Active)The more detailed your design is in terms of interaction, the easier it is for a developer to code it. Be sure to addsome examples of what your design will look like when it’s interacted with. Every design is going to be different, butthe important interactions that shouldn’t be forgotten include: ● Dropdown Menus ● Link/Button Hover States ● Image Sliders ● Lightboxes ● Tooltips ● Form ElementsThe reason behind this tip is this: if you don’t show a developer how you expect a certain interaction to look, chancesare that they’ll use an unstyled generic design, which could stand out like a sore thumb. Sure, there are somecoders (like me!) that will do our best to guess what you would have wanted, by why leave something so important toguesswork when it takes you just a few minutes to design it yourself?Include a color paletteCreate a layer group with its visibility turned off at the top of the Layers panel named “Palette.” Populate this groupwith layers using Layer > New Fill Layer > Solid Color… which are named to correspond to elements that will becolored using CSS. This allows developers to simply Double+click the layer thumbnail to get the color values theyneed from the Color Picker while coding.
  4. 4. Create Sprites if required and keep in /sprites folderCreate sprite groups of navigation or button layers or layer groups to ensure that what you envisioned as adesigner will get executed in the code. Position the default state as the topmost layer within the group with the hoverand active states below.When creating sprite groups, it is also recommended that a consistent height be used for all of the states so that itis easier for the developer to calculate the background-position of the elements while coding the CSS.Note to developers:If you want something that’s not obvious, such as a navigation menu that has to slide down when you move yourmouse to the top of the screen. Make sure that you make it clear by adding notes. There’s a few ways that you coulddo this (I’ve seen everything from PowerPoint documents to printouts with hand-writing on it), but my favorite wayis actually pretty simple: Use the Note Tool in Photoshop (see image below). The note tool will automatically make
  5. 5. notes show up when a developer opens up the file, and it’s easy quickly read up on what a designer has intended.Always highlight this linkable area in a separate layersLike red marked area in below design