If you are programing for PSD to HTML/CSS, you might be aware of the disconnect between the designers who are designing the front end and the coders who are building the functionalities. However, if you have good organizational skills of labeling the files you can overcome all these development chaos and pitfalls occurred due to disconnect.
In this article we will discuss some of the very rudimentary yet important steps which can help you to give away your PSD designs to an adept PSD to HTML team and they will develop a pixel-perfect front end, exactly as you imagined. As a result of this you can convert PSD to HTML for the design as well as the development team.
Following are the basic rules which you can follow:
1. You need to create One PSD file for every single web page template and also folders for every single page for each PSD file. Define what is a PSD?
2. Then you need to draw section of contents by labeling them into folders on the top of the page (navigation, Footer, content and many more) for instance
3. You need to make distinct folders for both “on” as well “off” states. Then you need to ensure to separate out your on and off states into distinct folders, so that the it is easy for the development team too make out the different states used while designing the functionalities.
4. The next step is to make a text file / .pdf that eloquently defines all the functionalities for all the pages individually(this comprises of things such as slide transitions, animations, and many more).
PSD to HTML Example
Given is an example of a single page PSD which is well organized in folders and all the page content are proper. The arrangement of this is is lucid and supple to follow. There are kept in subfolders for each portion of the content which are further clearly labeled.
PSD File Structure
In PSD there are subfolders under the same folder structure that must all be name appropriately.
The components for each group are placed inside the subfolder and images which are in vector form get imported to the file when required (logos or other related images). You further need to ensure that whether you have shown the different on / off states or not. Rather than that you can also show multiple flat files depicting each state, they should be arranged and properly named inside the PSD in a proper way so that the developers do not find it difficult to read.
Mentioned below is a perfect example depict the perfect organization of arrangement of files before handing them off to team who is going to develop it. Below you can see that there is 1 PSD for every page along with all of the requisite states for web development is incorporated in each of these PSD file. However the responsive design is also important today and people use psd to responsive html design for their benefit.