One of the most useful tools you can have as a web developer is proper photo manipulation software. It allows you to be able to crop, rescale, or edit an image to how it need to be displayed on your site. The only problem is a lot of photo editing software is expensive. Since the University provides all its faculty with the Adobe Suite, I will be using Photoshop for this tutorial.w

Find the picture you want the subject of

For the purpose of this tutorial I will be using this picture because it has an understood subject and background. The first thing you will need to do is load the image in Photoshop. in the top menu bar, go to File > Open and find the image you would like to edit. 

Selecting the Subject

Now use the “Quick Selection tool”  to select the background. The selection you make will have a “working ants” border on it. Even though i just said to select the background, we don’t want the background to be selected. you want the subject/ foreground to be selected.So in the “Select” tab, use the Inverse option to swap the selection to everything that WASN’T selected as background.[Image2] *Alternatively you could select the foreground/ subject to begin with, but it often has more detail and takes more work to get correct.

Select and Mask.

Now find the “select and mask” button in the top secondary menu.

You will now be in a new window that controls how the “Mask” will effect the image.[Image4]

*You use masks to hide portions of a layer and reveal portions of the layers below.

You will now be able to edit that mask to refine the selection you have made. For this process its best to use the brush tool [b]

TIP: use x to toggle between what was in the background and what the picture will look like when you finish this step.

When you are happy with the results, click “OK” in the bottom right hand corner.

Nothing Changed, don’t freak out.

You didn’t do anything wrong, you just need to apply the mask to the layer. Click the “Add Vector Mask” button.  [image5]

All that is left is to export the picture, and for that we have 2 options.

1. If you want the picture to be the size of the subject Go to “Layer” in the top menu and use “Quick Export as PNG”.

2. If you want the picture to be the same size as the original Go to “File” > “Export” > “Quick Export as PNG”.Nothing Changed, dont freak out.