Inspect Element

Web Design & Development Blog

Photoshop is one of the most widely tools used for web design. Most web designers don’t use all of the great things that Photoshop can do. It’s easy to get stuck in your ways but instead you should be looking to further improve your skills and learn new techniques to improve your web design work, work flow and productivity.

The following are advanced Photoshop techniques that can help with your day to day use of Photoshop.

Convert Layer Styles into their own Layers

Sometimes you will want to have more control over layer styles. The good news is that you can. Take this example of a New Zealand map which has an outer glow and a stroke applied as layer styles.

If you select a layer that has layer styles applied to it, you can navigate to Layer > Layer Style > Create Layers which will create separate layers for each of your layer styles. As you can see below, the map has been separated into its original later, the stroke layer and the outer glow.

You can now edit these layers on their own just like any other.

Batch Action Processing

Actions are a great way of automating a repetitive task but what if you need to apply the same action to many files? Sure, you can do them one by one but of course this is time consuming if you have to apply it to many files.

Luckily Photoshop can do this for you. Go to File > Automate > Batch… in Photoshop which will bring up the following dialog box.

The best thing to do is to place all the images you want into a folder and then choose that folder as the source. You can then choose a destination and filename formatting.

Remember you can even use this as a simple operations such as saving a batch of files of one format into another.

Cutting Out Images with the Help of Calculations

Here is a quick tip for cutting out objects from images. If there is a decent amount of contrast between the object and the surrounding area or background then we can use a Photoshop feature called calculations to cut the object out very quickly.

This image will work well for this method.

View the channels panel to see the red, green and blue channels.

Calculations in Photoshop is a way of combining two different channels into one so now we need to work out which two together will give us the most black (plane) against white (the sky). We will then turn the end result into an alpha channel to create a selection.

To begin using calculations go to Image > Calculations… and you will see the following options.

In this case, the green and blue channels combined together give the best result.

At this point a new channel will have been created. This is the alpha channel but it’s not perfect. We need to create the maximum contrast of black against white to create the perfect selection. We do this by changing the values of black and white using levels (keyboard shortcut: ctrl or cmd + L). The key is to remove as much grey as possible without destroying the outline of the object in the image. Also, use the brush tool in white to brush out the ground layer.

Once you’re happy, hold CTRL (CMD on Mac) and click on the alpha channel to make the selection. Head back into the layers panel and invert the selection (CTRL/CMD + Shift + I). Now apply this as a layer mask and you will only see the plane remaining.

Now we can move the plane onto a different image.

While this works well on a light background such as the blue sky, below you can see that it doesn’t work so well on a dark background.

There is a simple fix once again involving the levels tool but first, select the layer mask of the plane and apply Filter > Blur > Blur More twice. This creates varying levels of grey on the edge of the layer mask.

With the layer mask still selected, use the levels tool to reduced the amount dark values which will contract the layer mask and hide the light outline.

It may need a bit of tweaking depending on the image but you saved a lot of time that would have been spent with the pen tool.

Layer Comps

Layer comps allow you to create different versions of the same layout in one Photoshop file, making it easier to manage multiple variations of page designs.

When creating a new layer comp, you can save the visibility, positions and layer styles of all layers. This means that layer comps will only remember theses values. Make sure that they’re all always ticked or you will come across problems with multiple layer comps.

The final tip that makes this even more useful is the ability to save out each layer comp to its own file. Go to File > Scripts > Layer Comps to Files… which will bring up the following dialog box to save each layer comp out whatever file type you choose.

Typography Keyboard Shortcuts

Let’s face it, dealing with text in Photoshop is not exactly a pleasant experience. Luckily there are some keyboard shortcuts to ease the pain a little.

• Double click the T icon in the layers panel to select all text in that layer.
• Commit text changes by pressing CTRL/CMD + Enter.
• With text selected, hide the selection colour with CTRL/CMD + H to see an accurate preview of the text. Great when working with colour.
• CTRL/CMD + Shift + Left or Right arrow key selects the whole next or previous word.
• CTRL/CMD + Shift + > to increase font-size by 2 points.
• CTRL/CMD + Shift + < to decrease font-size by 2 points.
• CTRL/CMD + Shift + ALT/Option + > to increase font-size by 10 points.
• CTRL/CMD + Shift + ALT/Option + < to decrease font-size by 10 points.
• CTRL/CMD + ALT/Option + Left or Right arrow keys to increase or decrease kerning between letter by 100.
• ALT/Option + Left or Right arrow keys to increase or decrease kerning between letter by 20.
• CTRL/CMD + ALT/Option + Up or Down arrow keys to move the baseline up or down by 10.
• ALT/Option + Up or Down arrow keys to move the baseline up or down by 2.
• CTRL/CMD + Shift + L, R or C keys to align the paragraph of text left, right or centre.

Smart Filters

Introduced in Photoshop CS3, smart filters give you great control when dealing with filters. All you have to do is select your desired layer and then Filter > Convert for Smart Filter. Start applying filters and you will see that they appear below the layer name in the layers panel.

Now you can reorder them and double click to edit. The best thing is this is a non-destructive way of applying filters as you can delete them and return to the layer’s original state.

These are just some examples of advanced Photoshop techniques. We’ll be looking at more in the future but make sure you seek out some of your own. If you do find any, post them in the comments to share with other readers of Inspect Element.