Photoshop Basics – K/600/8297 3.2

Importing an Image

The following screenshots demonstrate how a user imports an image into the Photoshop userface. This can be done by clicking ‘File’ and then ‘Open…’. This then opens a new window where the user can locate the image in its saved location. The final screenshot shows the image once it is imported and available to edit.

This slideshow requires JavaScript.

Saving an Image

The two screenshots below demonstrate how a user saves a file. On the left is all of the options under the ‘File’ tab. ‘Save as…’ leads to a separate window where the user can rename the file, locate a suitable folder for the file or modify the format of the file, before eventually saving the file itself.


Cropping the Image

The screenshot below shows the original image being cropped. The darker outer zone is the part of the image that is being cropped out. A user selects the crop tool – this can be seen at the top of the toolbar, located on the left hand side of the page. Next, the user drags the sides of the image to create an included area. Cropping is used to remove an unwanted section of an image.Screen Shot 2017-05-19 at 11.08.15

Image Size

The following two screenshots demonstrate how a user changes the size of their image. This can be done by clicking on the ‘image’ tab and selecting ‘Image Size…’. Again, this opens up a new window, which can be seen on the right, where there are a number of different settings for resizing the image. Firstly, there are the dimensions in pixels, height and weight in centimetres (other measurements available) and resolution measured in PPI (pixels per inch). The settings can be changed and this has an affect on the image size that is displayed at the top of the window.


Adjustments to the Image

The two screenshots below show how a user makes adjustments to an image. First, they must hover over the ‘Image’ tab and then ‘Adjustments’. This drop right arrow features shows a large amount of settings and variables to the image. For this example, exposure is selected and the following window can be seen in the image on the right. This lets the user tinker with the exposure settings to compare the new changes to the original photo or previous version. Other adjustment settings include Brightness/Contrast, Saturation, Colour Balance, Photo Filter and Shadowing.


File Types – K/600/8297 – 2.1/2.4


This stands for Pixel per Inch and is an adjustable setting within photoshop or any other photo editing software. It is the resolution of an image. 72 ppi is often used in the web, with 300 ppi predominantly used in print. PPI describes the number of square pixels that show up in an inch of a screen. This number is usually between 70 and 300.

File Formats

There are many different file formats that can be used for the web. The creates different visuals and image sizes and allows users flexibility in what they do with the image.

JPEG – this is an image of average quality and can be used on the computer, the web and e-mail. It is ideal for users who want to use more than 256 colours on an image. When saving an image as a JPEG, some data is lost while it is being compressed. As a result of this, the image quality and size can decrease.

PNG – this is a higher quality image file type and it can be used on the computer or the web. PNG supports 8-bit colour and 24-bit colour RGB. PNG files compress images without decreasing the quality.

TIFF – this file type can be compressed to reduce the size, while maintaining reasonable quality and image detail. It can also be saved without compression to stabilise the quality of it’s content. TIFFs can also be saved with a transparent background.

GIF – images in this format are of lower quality and could be used on email or the web. GIFs can support a maximum of 256 colours. It is possible to modify the background colour of a GIF to make it transparent. This is not possible with JPEGs. By making it transparent, it becomes possible to place it over other images or on webpages.


CMYK and RGB – Why are they important

CMYK stands for cyan, magenta, yellow and black and RGB stands for red, green and blue. A typical rule that is often mentioned is that anything on the web should be RGB and printed material should be CMYK. RGB colours are recognised in design as the primary colours. RGB is described as an additive model, where colours are added together to make up what is seen on the screen. CMYK is a subtractive model. In this model, colours are subtracted from natural white light into pigments.


Colour Space and Depth

AdobeRGB colour space is a setting that a user can choose when editing an image. This setting can be used by photographers and image editors to give a larger portion of the colour spectrum to work with. It is used on Photoshop in order to modify images and ensure they are designed to encompass colours on printers. The colour space can be used to edit images and therefore improving content on websites.

Colour depth is the number of bits used to indicate the colour of a single pixel. (Reference – Images in the GIF format support up to 8 bits per pixel. This allows an image to have up to 256 colours. In comparison, an image in the format of JPEG can support 24 bits per pixel which allows up to over 16 million colour variations.

When using images for the web, a user can either save or compresses images. In terms of the format of the image, in the BMP format, images cannot be used on the web. PNG images are often preferred to JPEG because they are generally higher quality. Image compression is often used to reduce the file size of an image. Compressing images in the JPEG format is often preferred by editors because it has an adaptive compression scheme that allows saving in various levels of compression. Some programs allow the user to export an image as JPEG and choice the level of degradation. The quality setting of 10 produces a poor quality image with a small image size.


Image before and after using Adobe Photoshop

On the left is an unedited image, while the image on the right is an modified version of the image on the left. I used Adobe Photoshop to edit this image and there are many different techniques and tools I used to produce the final product.

The viewer will notice that there is a building missing on the second image that can be seen on the right hand side of the first image. To remove this building, I decided to use the eyedropper tool and select a colour that was used on the sky. I then used this colour to shade out the building. The effect of this is that the object has disappeared and it is a trick that makes the viewer believe that the shaded area is part of the sky. I used the stamp tool by cloning another area of the image.

I used a separate layer to edit the brightness and contrast of the water at the bottom of the image. I achieved this by clicking on the brightness/contrast icon in the adjustments panel. I then chose the layer I wanted to modify and applied the changes.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s