Basic Photoshop techniques

Photoshop is image-editing software that allows web designers to alter and improve photographs which can then be used on their website. It allows web designers to manipulate and change images, increasing the variety of images that they can use on their sites and allowing them to create more interesting and attractive webpages. However, despite its many uses, it can be overwhelming for some beginners to use as it is such a vast piece of software. Here are a few basic tips and tricks that you can use to edit images for your site:

Basics

Creating a new document – Creating a document is the first step in the process of editing and creating images for your webpage. You can either make a new document or work on an existing one.

To create a new document, open Photoshop, go to File and select New (for a shortcut, open Photoshop and press Ctrl + N).

You can now name your document and choose the size and dimensions of it, before pressing OK.

If it’s an existing image you want to edit or an existing document you want to continue editing, click on File and the Open (or press Ctrl + O) and open your document.

Layers – Layering is a key part of image editing in Photoshop. They allow you to place objects or image files at different levels within your document. You can stack, merge and define layers to achieve a really high-quality finished image. For the purpose of editing, layers also allow you to go back and make changes to particular parts of your image without having to delete anything else in the process!

Once you’ve created a document you can start adding layers. Click on Layers in the menu at the top of the screen, followed by New – this will create you a blank, translucent layer.

If you want to copy a layer, click on Layers followed by Duplicate Layer.

It’s important to try and remember to create a new layer every time you edit your image. This means you can easily go back and delete or edit further individual changes you have made to your original image.

Remember to save as you go along! To save time, press Ctrl + S. This ensures that all the intricate work and layering you do to an image will not be affected if something goes wrong.

Keyboard shortcuts – these shortcuts help speed up the process of picture-editing and the time taken to do so. A few key ones for certain tools in the tool bar are:

V – move tool

F – toggles through display screen modes

Space bar – temporary hand key

B – paintbrush tool

D – sets the foreground/background colours to default

X – swaps between background and foreground colour

E – eraser tool

S – stamp/cloning tool

W – quick selection tool

Ctrl + J – duplicates the selected layer

Cropping – This removes the outer parts of an image to change and improve its framing, changing to image focus to a specific part of the original image and allowing it to fit in a specific space on a web page.

In the left-hand tools panel, click on the Crop Tool. Alternatively use the shortcut by pressing Ctrl + C.

Hold the cursor above one of the areas you want to become the new corner of the cropped image.

Click and drag the cursor until the bounding box is the size and in the position you want.

Press Enter to complete the action.

Colour Enhancing – Enhancing the colours of an image can make it appear considerably more attractive and engaging to the web user.

Vibrance – this increases the saturation of less vivid colours. This is particularly good for portraits or photographs of people when you want to increase the definition of image’s colours without turning them yellow or orange!

Saturation – this increases the intensity of the colours in your image equally. This is a good tool to use on landscape photographs

A good way to enhance photographs subtly and effectively is to slowly increase the vibrance and then use saturation if you feel the colours need to be even more vivid.

Go to Image > Adjustments > Vibrance and select either Vibrance or Saturation depending on what you want to change.

Sharpness – Sharpness is another way to enhance your images subtly and make them more engaging, attractive and improve the appearance of your web page.

Duplicate the selected layer by pressing Ctrl + J

Open Filter > Other > High Pass on the newly duplicated top layer

Increase or decrease the Radius as you wish to sharpen the edges of the image and then click Okay. Bear in mind that small images such as those that will be uploaded onto Facebook will not need much sharpening – otherwise it could overwhelm the picture!

Right click on the duplicated layer in the Layer menu on the right hand side of the screen > then click on Blending Options > Blend Mode > Overlay

Adjust the Opacity and Fill Opacity of that layer to your taste!

Transparent background – This allows you to select specific parts of an image and separate them from the original image. This is particularly useful for pictures of people or objects that you would like to use on your webpage without the image’s background.

Add a new layer to an existing file by selecting Layer > New > Layer from the menu, then double-click on ‘background’ in the panel on the right hand side.

When the pop-up box appears, number this layer (e.g. 0) and click okay.

Then create a new layer using the same process as before and drag this below the image layer.

Use either the Magic Wand or Lasso tool to select the area of the image that you want to be transparent.

The Magnetic Lasso tool detects the edges of an object so it works best on an object with a clear separation from its background.

In the left-hand Tools panel, click and hold until the Lasso Tool menu appears > select > place your mouse at the edge of the part of the image you want to select. Then Click and release and go around the part of the image you want to remove.

Hit Delete!

Transform – this tool can be used to alter the size of an image, rotate, flip or distort it.

Click Edit, then Transform. Alternatively you can use a shortcut by pressing Ctrl + T.

Once the bounding box has appeared around the edge of the image, you will be able to resize it.

Place your cursor on a corner of the box and, whilst holding the Shift key, drag it to the size you want.

Complete the action by pressing Enter.

Flip/rotate:

Press Ctrl + T, then right click and select your specific action.

Complete the action by pressing Enter.

Distort/skew:

Press Ctrl + T, then place the cursor on the corner you wish to distort from.

Press Ctrl and drag the mouse to where you want the image distorted to.

Complete the action by pressing Enter.

Magnetic Lasso Tool – This allows you to trace and outline part of an image and separate it from the rest of the image. This tool detects edges of an object so works best on an image that has a background that boldly contrasts with the rest of the image, or that has well-defined edges.

In the tools panel, Right Click on the Lasso Tool and select Magnetic Lasso Tool. Alternatively, press Ctrl + L and select the option you want.

Place your mouse at the edge of the part of the image you want to outline, then click and release.

Repeat this moving the whole way around the edge of the part of the image you wish to select.

For more information on how to use Photoshop and more tips, follow these links: