Here you will find the set of rules that must be followed when third party PSD designs are created.
Follow 1200px Grid
- For more details please check 1200 grid page
Name Files Appropriatelly
- Final_v2.psd would be much better than NEWEST.psd or LATEST.psd
Fonts
- If Google Fonts are used, they should be specified, if other font families used they should go with the PSD file – some need purchase, some are hard to find
- Google Fonts can be found here: Google Fonts
Adding Icons As Fonts
No icons should be created as images, but font should be used instead.
If you are using some of the existing icon font families, please specify which icon is from which font pack (font awesome, entypo….) or if you have custom icons, please provide appropriate .svg file and make sure that svg is in one colour (transparent background, only one colour on the front) so we can create font icon out of it.
Make a Template for UI Elements (what we call Web elements)
- Icons; hover effects for buttons, links and social networks; forms; H1, H2, H3 and H4; regular text; blockquotes – should be in a separate PSD. Developers will appreciate it
- Tile for backgrounds (page, content, header, footer) if you have specific patterns for background.
Name Layers & be Accurate
- All layers should be in Groups (Header, Body, Sidebar, Footer)
- Not every single layer needs renaming, Text layers are self-explanatory really but the rest of layers should have names (Rectangular shape for Navigation for e.g.)
- This is important for layers that will be duplicated, so instead of having “Layer 0 copy copy” we can rename it to something like “CallToAction1”
Deleting Unnecessary Layers
- When it comes to sorting out the PSD file, it’s always good when you finish sorting visible layers in Groups and Categories, to delete the ones that are not going to be used
Smart objects, should not be Stretched or Flattened, they are editable with “double click”
- Textures/Patterns should be on a separate layer with different use of Blending Modes (Overlay, Multiply)
Do not Stretch / Rasterize type!
- Besides looking awful, there is no easy way to implement it via HTML/CSS
Control your Text Boxes
- Text boxes are better than a 5 miles single text line
- Paragraph and Font options easier to get to with a nice text box
Separate Text Boxes
- Heading, sub text, set of paragraphs, all should have their own text box.
Hover state effects that are included in main PSD file
- Are ok with just a label describing what is there, even if in most cases their visibility is set to “OFF”
DO NOT MERGE Layers
- Picture with the frame around it have text over the bottom and a button. Every element should be stand alone
- Picture and the frame, text box and the button, four layers total.
Pictures and Frames
- Two separate layers, “One Frame” layer with “Clipping Mask” for the picture, Picture only with Stroke (border) frame…
- All three will work just fine, if the layers are not merged or rasterized so that effects are not visible anymore
If design file is done in AI
- If you create all your web graphics in Adobe Illustrator, please either embed all your images in the .ai file, or if you are using “Place” command while working, than include all the jpgs,pngs,eps files in the same folder. For further help on Import/Place images go to: Adobe Importing Artwork files
- Same goes for fonts, if they are Google Fonts, please specify. If you used some font families that you purchased please send them along with your .ai file (with license if possible)
- Our developers usually slice websites from well organized .PSD files as mentioned before. So it would be nice if you can export an .psd file directly from your Adobe Illustrator and than organize the layers in groups.
- If you are working with high resolution files, images, please resize the final layout so the site content fits in 1200px grid and all elements are appropriate size.
Exporting .psd from .ai
- Go to: File / Document Color Mode – And switch from CMYK to RGB
- Than click File / Export
- In the dropdown menu for “Format” select “Photoshop (psd)” and hit Export
- If you want to be a nice guy, go to exported psd file and sort out the layers a little bit, cause usually they will be all over the place or all together in one layer group, usually called “Layer1” :)
- YouTube Video Tutorial on this topic: Watch the Video