Everyone knows how to use Photoshop right? Wrong. In my experience plenty of people have access to Photoshop and ‘dabble’ with it, but perhaps aren’t using this powerful application to its full potential. My tips are unashamedly aimed at web designers / developers.
1. Set Photoshop Up to be Web Friendly
Before you start let’s set up Photoshop to be web friendly. Web developers understand pixels, none of this print nonsense of inches, points and picas. So we’ll set Photoshop up to be web friendly.
Select Edit > Preferences > Units and Rulers (Windows) Photoshop > Preferences > Units and Rulers (Mac OS) and in the Units sections change both Rulers and Type to pixels.
When opening an image to edit also ensure that the image mode is set to RGB colour. This is found under Image > Mode > RGB Color. A quick way to check your image is RGB is to toggle the Layers panel to the Channels panel. A RGB file would appear as follows with a channel for Red, Green and Blue (the primary colours of light).
2. Rotating and Scaling an Image
So you open an image file such as a JPG saved from a digital camera and you want to rotate it.
Select Image > Image Rotation and choose the most appropriate setting for example 90° CW – that is 90° clockwise.
Under the same Image menu you will also find Image > Image Size. Use this to resize the image, most frequently and by default you will constrain the image proportions. Untick Constrain Proportions if you would like to change either the width or height disproportionately (not recommended).
If you require a bigger canvas ie more space outside your image, then Image > Canvas Size can be used.
This can also be used to crop the image if you make the canvas smaller than the current image.
3. Make the Background Editable
When you open an image file such as a JPG saved from a digital camera and you want to move it, you would instinctively select the four headed arrow icon to try and move it. But nothing happens. That is because this is a special layer called background and there are certain things you can’t do to the background layer. You can’t move it, you can’t make it transparent and it must always stay at the bottom of the layer stack.
A small padlock next to the layer indicates it is locked. Usually a layer can be unlocked by using the icon at the top of the layer panel. But not in the case of the background layer.
To solve all these issues double click on the padlock. This will open the ‘New Layer’ dialogue box. You could choose to rename the layer rather than accept the default ‘Layer 0′ name and then click OK. The layer is no longer the ‘special’ background layer and is now completely editable.
4. Find the Essential Panels – Layers, Info, History
Panels are all listed under Window . The Layers, Info and History panel can also all be found on the right-hand side of the default workspace.
The Info panel is just that. It provides information on RGB settings, x/y coordinates and width/height.
The History panel is handy for visual undos. You can see what you did step by step. Use the slider to move backwards (or forwards) through them.
The Layers panel is probably the most used. Here we can add, delete and duplicate layers.
Photoshop comps (compositions) are generally made up of multiple layers. This makes life easier when editing complicated images. A common issue amongst designers is to fail to save their PSD file, which has layers in it, and then only have a JPG to re-edit. The JPG file won’t have layers so it becomes a nightmare to edit.
To add layers use the new layer icon at the bottom of the layers panel. Layers can be reordered by dragging them around and they can be duplicated by dragging an already existing layer onto the new layer icon.
5. How to Select, Deselection and Delete Stuff
Selection tools such as marquee, lasso and quick selection tool all can be used to place ‘marching’ ants around a selection. Once selected the content can be deleted, copied or moved.
Use CONTROL D on Windows / CMD D on Mac to drop / deselect a selection
Use Select > Inverse to select everything that wasn’t previously selected.
6. Adding and Moving Shapes
Use the shape tool to add shapes. These include boxes, ellipses, rounded rectangles and custom shapes. The options bar drop down allows you to define proportions and choose from a range of custom shapes.
When drawing circles hold SHIFT and ALT down to draw from the centre. Shapes are created as vectors. They can be used to create masks by placing content above them in the layer stack and using ALT to drag between the two layers.
7. Transform Tool and Clipping Masks
Use the keyboard shortcut CONTROL T on Windows / CMD T on Mac to get transform handlers around an object. In the options bar numeric values in pixels can be added to transform the object with more precision.
To apply the transformation either select the ‘tick’ icon on the options bar or simply press return.
This movie will also introduce the ALT-CLICK trick for clipping masks. A clipping mask allows you to mask one layer with the content of another. To do so place the layer to be the masked above the layer containing the shape to use as a mask. Place your cursor between and hold ALT-CLICK. You should see an overlapping circles icon. At this point clicking will apply the mask.
8. Rasterizing Layers / Merge Layers
Photoshop is a bitmap editing tool. Shape layers, produced by vectors, can be rasterized – ie turned into bitmaps. Select the shape layer and right-click select Rasterize Layer. Multiple layers can also be merged into one by right-clicking on selected layers and choosing merge layers. Shape layers when merged are automatically rasterized.
9. Layers Styles
Strokes, Drop Shadows, Bevels, and Gradient Overlays can be added through layers styles accessible through the layers panel.
To remove a style, drag the effect to the Delete icon at the bottom of the layers panel.
10. Creating and Adding Gradients
Gradient can be added via the Gradient tool which is paired with the paint bucket in tool bar. The Options bar will preview the gradient. Double click on this to open the Gradient Editor.
In the Gradient Editor you can add more colours and to your gradient as well as control the opacity over the course of the gradient.
Once you have the gradient selected then a crosshair cursor allows you to draw out the extent of the gradient.