Published on September 2, 2014
Here are the best practices for submitting your design to a PSD to HTML or PSD to WordPress conversion company (like us!). The cool thing is these tips won’t just make our lives easier – they’ll make yours easier too ;-).
We’ve trudged through some pretty messy PSDs in our time, unhealthy and the truth is even if you don’t follow these tips we’ll get to the bottom of things and deliver the goods, but for a project that’s as quick & smooth as possible, these few things really do help.
Below you’ll see some real life examples of how I organized some of the PSDs for our own brand new Reliable website.
Quick note: I’m super OCD so you don’t have to be as detailed or organized as I am. But even if you lightly follow this guide, you’ll be all set!
1. Use Groups Wisely
You can group all of your navigation layers, all of your footer layers, certain blocks of content that go together, all of your slider images, etc.
Pro tip: I also like organizing groups as closely as possible to the order they show up on the website (from top to bottom). So nav first, then header, content area, footer, etc. In this case the content area had to be above the header to hide the image below, but you get the gist!
2. Use Colors Labels for Hidden Groups
Let’s say on hover a wicked cool dropdown slides out of your menu. Or a nifty light box like the one below. That dropdown will likely be a hidden group in your PSD. If you give all hidden layer groups that need to be a part of your site a red group color, we’ll easily see them and incorporate them into your site exactly as you’d planned.
3. Include a Separate Group or JPEG With Notes
These notes are one of the most important parts of the project. The more clear you are about functionality, the more we can make sure we get things done exactly how you want them.
Do you want a special slide out animation for your menu? Should that content block on the home page pull your latest 3 WordPress blog posts? Here are two great options for submitting notes:
- Export your site as a JPEG, bring it back into photoshop, and mark it up with text wherever you think there might be a functionality or specification that isn’t totally obvious.
2. Pro tip: Include a hidden group in your PSD called PAGE NOTES and fill it up with all of your requirements. Mark it a different color than your other groups and place it at the very top of your group stack where we can easily see it!
*If your project has super intensive functionality requirements, you can also submit a Word document that outlines everything in addition to this.
Here’s another example for you. I had a very specific vision for our “get started” form. A variety of animations, custom errors, etc. Click the image to view a full size version of this page and read through the notes (or right click and select “Save / Download Target As…” to save).
Now let’s see it all turned out:
Click here to see the live FAQ page.
Click here to see the live get started page.
4. Make Sure Everything You Want on Your Site is in Your PSD from the Start!
Nothing’s worse than getting halfway through a project, and realizing you submitted the wrong PSD or forgot to mention a key function or feature. In my own projects, once I add my notes I’ll go over the PSD again from top to bottom to make sure I didn’t miss anything.
In addition, I suggest making sure your client 100% approves the PSDs you send in before we get started. That way you can avoid any last-minute major revisions that could lead to extra costs.
That’s it!
I hope these tips help you organize your PSDs and streamline your process! Have your own tips we didn’t go over? Questions? Just add a comment below!
This post was last updated on January 12, 2023
