How to Create Photoshop Files that Developers Love

Layers give you the options to separate items of your design, and then control how they appear. Photoshop gives us several options for combining layers without flattening the entire document.

Note: When working with layered files, I typically saved different versions just in case I need to go back to a prior version for whatever reason. And when I am done, I make sure to flatten one file but still keep a layered version just in case of changes.

Working with Layers

Think about layers like a pizza or baking a cake. For example, a pizza has its crust, the bottom layer. Tomato sauce goes on top of the crust. Sprinkle on some pepperoni, veggies or pineapple. Then maybe add some cheese, and maybe add more vegetables. Essentially, layers give you control over how items are on top of each other. You can move things up or down, on top or below, side by side.

Too many layers may no longer be necessary also. You can merge these layers (combined and flatten). Or you can link them together (combined but not flatten), or even place them within the same folder (individual layers). Photoshop gives us several options for combining layers without flattening the entire document.

With the Layers panel, you can design by assigning separate layers for each object. Also, Layer effects control the application of everything from drop shadows to gradient overlays, and adjustment layers let you control colour overlays and image corrections. To access the Layers panel, select the Layers panel or, if the Layers panel is not visible, click the Window menu, and then click Layers.

Blending Modes: select this option to change how two or more layers interact or “blend” together
Opacity: choose a value of 0% to 100% to change the opacity of the selected layers (New!)
Fill: select a value from 0% to 100% to change the opacity of the fill shapes in the Layer
Lock options: click the Lock Transparent Pixels, Lock Image Pixels, Lock Position, or Lock All button
Link Layers: hold down the Shift key and click to select more layers & then click this button to link the layers
Add Layer Style: click this button, and then choose from the available layer styles
Add Layer Mask: click this button to apply a layer mask to the active Layer. Click this a second time to add a vector mask to the active Layer
Create New Fill/Adjustment Layer: click this button, and select from the available fill or adjustment layers
Create New Group: click this button to create a new group. A group is a folder where you can drag, store, and organize layers
Create New Layer: click this button to create a new layer in the active document
Delete Layer: click this button to delete the active Layer
Layers Options: click this button to access a menu of layer-specific commands

When working with layers, layers increase the file size dramatically, so when you’re entirely done editing your document, consider using a merge or flatten command to shrink it back down. You don’t need to do this, but it may take longer if you are trying to print this.

If you want to preserve your layers, save your file via the File > Save As dialogue, check Layers, and as the File Format, choose Photoshop, Photoshop PSD, Large Document Format or TIFF.

The formats that don’t preserve layers ﬂattens them automatically and convert any transparency in the bottommost Layer to opaque white.

When switching document colour modes (e.g., from RGB to CMYK), if you want to preserve layers, click Don’t Flatten or Don’t Merge in the alert dialogue.

Converting the Background:

A Background is typically locked—one can not move this background upward in the layer stack until you unlock it; You can, however, convert the Background into a layer, at which time it will adopt all the functions of a regular layer.

To make the background into a normal layer, select the background and double click it. A New Layer dialog box will open. The background layer will be called Layer 0 until you type in a new name.
Click, OK when done.

Renaming a Layer:

Double click the name on the layer panel
The name will be highlighted in blue, which allows you to rename your Layer.

Unlock a Layer:

You can unlock the Layer, by double-clicking the Layer; A New layer dialogue box may appear. Rename your Layer if you want
OR click on the lock to unlock

Hiding a Layer:

Click on the eye in the layer panel (no pun intended)
The Layer is still there; it is hidden until you click on the eye to show again

Changing the Stacking Order:

Go to Window > Layers, to show the Layers panel or launch the layer panel at the side
To change the position of a layer in the stack, drag the Layer up or down. A dark line appears as a visual cue to indicate the new layer location.

Duplicate a Layer or a Portion of a Layer:

Go to the menu, Layer> Duplicate Layer or
Click a layer, then press Ctrl/Cmd-J or Make a selection on the Layer, then press Ctrl/Cmd-J or
Right-click on your mouse, and select Layer via Copy or
In the drop-down menu in the Layer panel, Duplicate Layer or
If creating a duplicate layer, on the Layers panel, click and drag the Layer the icon on the left of the trash can

Convert a Layer into a Background:

What if you need to create a Background for a file that doesn’t have one, you can convert any existing layer into the Background—the reverse of the preceding instructions

Select a layer
Choose Layer> New > Background from Layer in the menu bar.
The new Background will appear at the bottom of the stack on the Layers panel (its usual position).

Moving Layers Between Documents:

Open the documents in which you want to move layers.
To make life easier, to have more than one document in view, click the Window menu, point to Arrange, and then click Float in Window or Grab the file tabs of the file, and click on hold the mouse and drag the panel tab-off the dock.
Click on the document containing the Layer you want to move. The Layer will be highlighted in light blue.
Drag the Layer from the Layers panel into the window of the receiving document. It will appear ghosting.

Photoshop creates a new layer with a copy of the image information from the other document.

Linking Layers:

Open a multi-layered document.
Select two or more layers.
Click the Link Layers button, located at the bottom of the Layers panel or Right-click on mouse > scroll to Link Layers
The selected layers are now linked. A link icon appears next to the linked layers.

Unlink Layers:

Open a multi-layered document.
Select a layer that contains the link icon.
Click on the Link Layers button, located at the bottom of the Layers panel, to unlink it.

Note: To temporarily disable a linked layer, Shift-Click the link icon. A red X appears. Shift-Click the link icon again to enable it.

Merging Layers

Merge Down, Merge Layers, and Merge Visible—merge two or more selected layers into one layer (the bottommost of the selected layers). You can apply any of these commands anytime during the editing process to reduce the file size of your document or to reduce unnecessary clutter on the Layers panel.

Merge Down:

Select the layers you want to merge.
Click the Layers Options button, and then click Merge Down (for single selection) or Merge Layers (for multiple selections). Keyboard shortcut: Ctrl/Cmd-E
The selected layers merge into the next Layer down. When you use the Merge Down command, the top Layer will take on the name and characteristics of the bottom Layer.

Merge Layers:

Select the layers you want to merge. Ctrl-click/Cmd-click the layers (not the Background) to be copied or combined into a new layer.
Click the Layers Options button, and then click Merge Layers. Keyboard shortcut: Ctrl-Alt-E/Cmd-Option-E
To copy and merge all the currently visible layers into a new layer, including the Background (if visible), click any visible layer, then press Ctrl-Alt-Shift-E/Cmd-Option-Shift-E.

Merge Visible:

Click the Show option for all layers you want to merge.
Click the Layers Options button, and then click Merge Visible. All layers with the Show option enabled are merged. Keyboard shortcut: Press Alt (Win) or Option (Mac), click the Layer menu and then click Merge Visible to merge all visible layers into a new layer.

Flattening Layers:

Why would you want to flatten your layer file? You work so hard to get the layers all under control. Layers do increase the file size. And if the application to which you’re planning to export your file can’t read or accept layered files, you’ll have to either flatten it.

Note: When I work in Photoshop, I create two files. A layered Photoshop (PSD) and a flattened file (EPS/Tiff)

Choose File > Save As (Ctrl-Shift-S/Cmd-Shift-S). The Save As dialogue opens.
Do all of the following:

Change the file name.
Choose a location.
Uncheck Layers (the As a Copy option becomes checked automatically; keep it that way).

• Choose a file format from the Format menu.

• Click Save.

All of the layers are flattened into one layer and automatically renames the layer to Background.