DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Elise Gaetz Ferguson for Epicosity

Posted on • Originally published at Medium on

Setting up Photoshop Files for Dev Success

Despite the move to β€œdesign in the browser” and design tools like Figma and Adobe XD, there are still quite a few of us out there being provided Photoshop PSDs to be converted into functional webpages on a regular basis. A great portion of my front end developer career revolved around β€œslicing” Photoshop files and writing HTML and CSS to match. While each designer tends to organize their files in their own way, I have some tips for making your Photoshop files easier for developers to use.

  • Name Layers: appropriately named layers and folders make it easy to see what’s on them. How often have you gotten a PSD with labelled very specifically?

Rectangle 550 Copy and Layer 686β€Šβ€”β€Šhelpful names, aren’t they?

Not very helpful is it? Which rectangle? What’s this layer? Who knows.

  • Use Folders: group things like Header, Hero, Body, Footer etc. This will keep things organized and make it easier to find the element you are looking for in the future.

  • Ensure layers/folders can be turned on and off to hide web text and reveal backgrounds or images below: Web safe text will often need to be hidden on a PSD in order to reveal the background below it. If your layers are labelled and grouped appropriately a developer should be able to turn off those layers easily as well as know which layers need to be hidden.

  • Indicate hover states if any and link states: if part of the design includes graphics or buttons that change as the user hovers over them, include a layer for those graphic hover states. It is also helpful to indicate text link styles in the sample content of the design and even a list of headings, bulleted lists and other content related items that need styling.

  • Do not flatten layers : definitely don’t flatten layers especially if you aren’t sure which layers your developer might need to hide/show to get to the graphics/information they might need.

I know this is only a few tips but these small things can really make a difference in time and effort on the development side of things.

Do you have any development tips for Photoshop files, I’d love to hear them!


Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.