Ting og tang som rører seg

Hjem / Blogg
TILBAKE TIL HJEMMESIDEN

Dato Mar 1, 2017

How to set up your PSD files for front-end development

SE HER se her

How to set up your PSD files for front-end development

How to set up your PSD files for front-end development

The most difficult thing for designers who come from offline design areas is how to properly create their PSD files optimised for frontend development. My intention with this article is to make a short guide to help these professionals setup their files according to industry standards, which makes the development a lot easier.

1. SET THE DOCUMENT SIZE

First of all, set the document size correctly. For best background images quality, I recommend creating the document in HD resolution (1920 X 1080). Adobe photoshop CC has many options for creating documents with different sizes and devices. But if you're using older versions of Photoshop, you can set the canvas size to HD resolution.

2. USE A 12-COLUMN RESPONSIVE GRID

Nowadays, responsive frameworks are an easy way to have a website experience in any device or screen size. No matter what framework the development team is using (Bootstrap, Foundation, 960 GRID etc.), you should use a 12-column grid to structure content. It's very important so that the developers can identify the breakpoints and plan how the page will look like on mobile devices.

3. USE LAYER MASK TO CROP BACKGROUND IMAGES

If you need to specify the height of background images, crop it with the layer mask. That way you preserve original size of the images, and the developers can set the right background position on CSS.

4. KEEP ICONS IN THE VECTOR FORMAT

Icons should be in the vector format. To implement the icons in HTML, developers can export the icons in SVG, but it is necessary to keep the icons in the vector format for export. SVG files can be easily scaled down and up for retina displays. That way, the icons will be displayed with sharp edges on any screen resolution. The company logo should be in the vector format as well, in case it needs to be scaled.

5. KEEP ALL PAGES IN THE SAME FILE

Organize the .psd file. Create groups with the elements for each page and rename these groups with their respective page names. It helps developers find pages and elements. Use the same method to organize page elements like header, footer, navigation, blog post sections etc.

6.DON’T RASTERIZE LAYER EFFECTS

Keep layer effects with their editable parameters. This is very useful for the developers to set the right overlay color, shadows and other things that can be done with CSS.

I hope this article will be very useful for your job routine. Thank you for reading! Before you go, you can download the demo file here.