In order to expedite the programming process and to make updating content as simple as possible for the client, below are guidelines that will ensure quality designs.

CSS Shapes

Most shapes can be programmed with CSS, so we don't need to export those as png files. Circles, squares, even trapezoids or hearts. The same applies to borders/strokes and gradients. 

Assets & file extensions

For devices that contain retina display, raster graphics will appear blurry unless we export at larger sizes. To guard against blurred edges, export graphics as .svg files whenever possible. For example: title text, logos/seals, static graphic elements that the client will NOT have control to change (ie. arrows, footer icons, etc) should be exported as .svg files. Other icons that the client has control over updating - such as social media and call to action icons - should be exported as 2x .png files. 

Exporting @2x

Select all the .png layers that you will be exporting. In the layers panel, open the menu and select "Export As..."

Select all the assets (otherwise it will only do one layer). Make sure to change the format to PNG and the Size to 2x.

Creating .SVGs in Photoshop

Shape layers (without drop shadow effects) will export perfectly into your assets folder when the layer and grouped folder includes the .svg extension.  

**Double check solid color shape layers. To export correctly from Photoshop, the shapes need to be a single solid shape. Merging the shapes into one layer in Photoshop does not work; it will need to be done in Illustrator first. Otherwise the overlapping areas will get "knocked out" and export incorrectly.

Creating .SVGs in illustrator

If your icons/graphics have drop shadows illustrator will export layer effects (like drop shadows) correctly. Drag your artwork into the asset export panel, change the format to .svg, shift click to select all assets and click the export button. Save the illustrator file and exported .svg files into the assets folder. To check if your svg file exported correctly, drag the svg file into chrome and internet explorer to preview your file.

Social Media

How to export these depends on how it is styled. 

If the background AND hover background of the icons is the same for all of them, only the icons should be exported as 2x .png files and the backgrounds will be coded with CSS. 

If each background is different or if the hover colors are different for each icon, the icon AND background should be exported as 1 single 2x .png file. This is because if the client uploads a new icon or rearranges them, the colors will be off if they are not connected.

Drop shadows

These can also be programmed with CSS so they should not be exported; keep these on a separate layer than the file that will be exported. The only instances where the shadows SHOULD be exported, is on unusual shapes such as icons.

Images

Images should be exported in the correct dimensions without any treatments, borders, etc.

Additional images

The developers requested that we also provide images in dimensions that are not exact; only the ones where the client will have control over, so ie. news images or spotlight images, NOT background imagery. This allows them to test and ensure that if the client uploads photos that are not in those exact dimensions, the images will not stretch disproportionately. For this, we just need to add regular un-cropped/un-masked photos into the assets folder, labeled alt-dimensions.

Layer Masks

Clipping masks will affect how layers will export. If a layer is masked on top of another layer, that base layer will export including it. Example here, the color overlay that is clipped on the images exports on each one, which is incorrect. The overlay should be separate (this will be programmed), so the client can upload regular images without needing to edit the image with this effect. Add a mask to each image layer so that it exports in the correct dimensions.

Same applies for seals, or other graphic elements. For the best responsive functionality, the programmers need the graphic to be NOT cropped, as otherwise the layer clipping mask will end up exporting the bottom layer. Best practice would be to group the graphic, and put the mask on the group so it displays cropped, but exports without cropping.

Gradients

Gradients should be created as a gradient overlay on a live shape. This allows for the programmer to be able to get the correct colors and spacing for how to apply the gradient. A raster image of the gradient makes it difficult for them to recreate accurately in CSS.

Layer Effects

The programmers cannot replicate layer blending modes. We can use these modes to achieve a certain look, but the final asset should be exported with the effect or replicated in a usable manner.

Example 1: 

Since the Multiply mode can't be programmed, the colors in this button should be sampled and set to normal mode in the final file. This ensures the final colors are true to the design and don't get mixed up during the programming phase.

Example 2 :

Blend modes can give images a specific treatment, but since they can't be replicated in programming we need to export the layer that has the effect TOGETHER with the layer it is attached to. Here, since the layer that is exporting has Luminosity enabled, it still exports with it's original form. But once grouped with the background layer, it exports with the luminosity effect attached.