How to Order Layers & Use Groups in Photoshop

We use Photoshop as our go-to program when designing user interfaces for the web. As we work on a lot of websites, we end up with a lot of PS files which we archive away for later use. As a designer, there’s little worse than opening up a PS file when the layers, groups and general makeup of the file is untidy. Untidy PS files can make a small update task turn into a ‘needle in a haystack’ task.

Why Are Untidy PS Files So Difficult To Use?

If you are designing a website which will have multiple pages, let’s say 3, there will be common elements across all pages. These common elements may include, but are not limited to; header, footer, typographic styles (e.g. headings, paragraphs, bullet points), buttons, widgets or blocks, etc. As elements are common across pages, you can make huge efficiencies by replicating these elements, rather than creating them from scratch each time.

If we take a header for example, the header of a website usually consists of a logo, main navigation items, contact details, and social media links. Some headers will have less, some will have more but either way, there will be multiple items in a header. Grouping these into one layer folder means that you can drag and drop this group into other PS files if necessary. Drag and drop will enable a designer to ensure that all elements are carried across as well as making sure they are the same size, position, colour, etc. It’s as easy as that.

Untidy PS files would mean that the elements within a header could be spread out across an entire layer list which then makes it difficult to drag and drop this header into another PS file. It would be time consuming and errors are likely to occur.

Any Other Reasons?

A lot of designers work in teams. They may work with other designers as well as with developers. Often another designer in a team will work on a PS file that was initially created by someone else, this could be to extract elements from the PS file or to make updates to an existing piece of work. The work may be carried out shortly after the initial creation or it could be carried out months, or even years, afterwards.

Working on your own, or someone else’s, PS file 9 months after the initial creation can always be difficult. Doing this in an untidy PS file is a nightmare. Sure, everyone has their own way of working, but standardising some simple techniques to ensure that your PS files are in a logical order will make it very easy for anyone to work on a pre-existing PS file without pulling their hair out, or pulling out yours.

A Few Tips

• Do group elements into layer folders that logically make sense (e.g. group header elements, footer elements, etc).
• Don’t group the header and footer of a website together. This isn’t logical.
• Do remove layers you’re no longer using. Hidden layers (that do not show interactions) can bog a PS file down both in size (mb or even gb) as well as making it difficult to locate elements.
• Do structure your groups and layers in a logical manner. Websites are vertical in nature with a header at the top, a footer at the bottom, and everything else in between. Place your header group at the top of your layer list and footer group at the bottom. Everything else in between should also be placed in a hierarchal order. FYI – You may flip this around so that your header is at the bottom and the hierarchy transitions upwards, this is quite common due to the nature of layers and groups being above others will overlay. Either way you choose, make sure that it is logical.

What Does A Messy PS File Look Like?

What Does A Tidy PS File Look Like?

Which Would You Prefer To Work On? – I know my preference.