For my first blog post I would like to address the matter of getting .psd files ready to hand off to a web developer for production. Now, in my freelance career I take on the complete website life cycle process myself; start to finish. This involves client consultation, research, design, development, and post work duties. In my professional career in agency and firm work I've usually been the developer, so I know how much time can be wasted sifting through layer upon untitled layer.
With that said, these tips ring true for freelancing, but this post is more geared at the agency/firm workflow where multiple people are working on the same project. So below are just a few tips on how to keep that workflow smooth and most effective.
- These steps are, of course, to be in conjunction with project briefs and all of that good stuff. -
KEEP 2 FILES - WORKING & PRODUCTION:
When designing a website it makes the most sense to keep two files of every page of your design. The first working file should be yours, the designer's, to keep in case of the client changes. This is especially true for large, high-res masthead and call to action graphics that may need to edited in the future. In this working .psd file you can leave all text unrasterized, graphic masks in place, keep unused layers, and so on.
The production version of your .psd should be bare bones and straight to the point. No un-used layers should be in this file at all. Any layer than is turned off, should be so to hide/reveal up and over-states for the navigation or represent some other form of functionality to be added to the website. Also, flatten all graphics to save file size and reduce clutter.
SEPARATE MAIN/SUB PAGES:
Unless your website is like two pages and has 3 or 4 graphics, you should save the main pages and sub pages of the site separately. This not only makes things easier to work with as far as load times, transferring through IMs and the like, but it's just a bit more organized than having 10 pages in one .psd to click through.
NAME LAYERS AND FOLDERS:
To a novice, this step may seem super obvious or not obvious at all. I know when I first started designing websites many years ago, this was the least of my concerns. I was making the entire website myself and I figured I would remember what I put where and all would be good. Nope! To anyone that has designed even the most simple of websites, knows that THE LAYERS BUILD UP LIKE WILDFIRE! Before you know it, you're toggling each layer's visibility on and off, over and over again as your patience begins to wear thin.
To save this headache from occurring in the first place, it's best to get in the habit of grouping related layers into folders and properly naming the layers and folders in your document. You noticed how I said properly eh? Yay, you're paying attention!! : D Make sure the names not only hold relevance for you, but to the project itself, and, most certainly, for the developer.
CREATE A STYLE GUIDE:
A style guide is a concept that gets overlooked sometimes when it really shouldn't. A style guide is a .psd that includes all major styles that will be used in the website production process. These styles would include body copy styling, headings, borders, navigation, color scheme hex values, and commonly used elements like buttons, horizontal rules, and so on. Basically this includes most anything that is used to get the look you're going for. We all know that hardcore developers really don't have too much of a design sense, so it's best to not leave any design aspect up for interpretation! Your designer/developers will also greatly appreciate this as well though.
Cheers to getting your websites through the production life cycle process most quickly and efficiently!
Thank you so much for taking the time to reading my post. If you enjoyed this and feel it may be useful to someone else, please share and pay it forward : ) And, of course, feel free to comment.
Comments (0)
This thread has been closed from taking new comments.