Creating a great Photoshop template

Photoshop template


As designer you might be working in a team or by yourself but there will be always some point where others need to access your work.
Having had experience working with a group of designers but also close with developers I found the most efficient and easy way is to set up templates for each creative that you are producing on a regular basis.
That also involves setting them up neatly and easy to access for others who might have to update, edit or reuse your template.

I listed a few things that you should take in count when you create a template which will make your and your co-worker’s lives easier :)


1. Give everything a name

Layer 1 and Layer 0 are not really helpful in a file with dozens of layers. Please, name your layers and groups appropriately e.g Header, CTA, sidebar. If you are using the image generator name the layers and folders you want to export in small caps with the files extension in the end e.g logo.jpg


2. Image Generator

If you are using Photoshop CC 2014 you can use the image generator to export your assets straight away. That will make life easier for you and your developer.


3. Don’t be a hoarder

Delete everything what you don’t need anymore


4. Group layers

Group your layers logically e.g. Header, Footer…


5. Arrange your layers

Arrange your layers according to the flow of the document. Have the header at the top, content in the middle and the footer at the bottom.


6. Use layer comps

Use Layer Comps to display different states of your site e.g drop downs, hover—


7. Use a grid

Grid! Always use a grid to keep your objects aligned and in the right size.


8. Smart Objects? YES

Use smart objects to nest editable designs in your template. Smart objects are also good if you want to display the same graphic in more than one place in a mockup but don’t want to change each one when you decide to update. If you’re using a smart object and edit it, it will automatically update all the copies of that smart object in the document. This is for example very helpful if you’re using member profile pics or an illustrator graphic.


9. No fancy stuff

Try to avoid using blending modes. As pretty as they may be they are impossible to express in CSS (at least at the moment). The same applies to overlays such as bevel, emboss and satin as they are not yet supported.


10. Don’t rasterise

Last but not least don’t rasterise your layers.

Leave a Reply

Your email address will not be published. Required fields are marked *