Understanding the concept of image sizes, as well as adjusting the size and cropping of your images is a most basic skill any designer must master and control at any times.
There are several understanding of image sizes. For example if you have a printed photo on a A3-size paper, you can say your image have a certain size in centimeters. However, every time we say “Image Size” in this class we will refer to something else. When we want to discuss a size of a printed image, we will use the term “Print Size”.
When we say “Image Size”, we will always refer to the size of the image in pixels.
Instead of getting very technical I will just offer a practical good-sense definition: pixels are tiny squares that the digital images are made of. To see pixels, open a photo in Photoshop and zoom in:
To see how a number of pixels affect image quality, let’s take a look at two version of the following photo, where the photo on the left is much bigger than the one on the right:
From “far away” we may not much difference but when we zoom in, it becomes very apparent, where the left (bigger) image manages to retain details and the smaller image already reveals pixels:
Obviously, the more pixels you have, the more details your image is able to reproduce. This means that your images will look sharper on screen, as well as more sharp in print (but we will cover printing in another tutorial – so far, we’ll work for screen).
When it comes to digital images, although bigger images (with more pixels) mean better quality, sometimes the bigger is not better. For example, if we want to use an image on the webpage, often the images that are too big will take too much time to download.
There is no image size that’s good for everything. So the good image size depends on what you want to use the image for. Here are some guidelines practical for this class:
Almost always you will need to adjust the size of your images according to what you use the images for. There are two ways to do this:
Please refer to the rest of this article as to when you should crop and when merely resize the image.
For an efficient workflow, I suggest the following:
To summarize, each of your images should have several copies, and you may use file name prefixes or suffixes to mark down which is which. For example:
Original photo: SchoolEntrance_original.jpg (4920 x 3264 px)
This would be, for example, an original photo you’ve taken. It’s not altered in any way, and you want to keep it like that because you never know what you may use this for in the future.
Cropped photo: SchoolEntrance_square.psd (3000 x 3000px)
Now let’s say that you need a square version of this photo for a school task. You crop the image to square proportions, and by doing this you will probably fix perspective and composition. This inevitably means that the image is now smaller because you discarded (cropped out) a portion of it.
Save it as another file, and then do other things you need to do to, maybe adjusting the image brighntess and contrast, or adding more elements to make a photomontage.
Note .psd extension, I will address image file formats in a separate article. For now, just keep in mind that .psd file format is Photoshop’s way of saving down all the changes you made to the image (including layers, etc…) and it contains much more information than .jpg file format (which is good when you export images for web, for example).
Exported image: SchoolEntrance_myPost.jpg (1080x1080px)
Finally, if you want to export the final image you will use (for example, for posting here), resize it down to proper pixel dimension and save as -yet another- file.
Keeping many copies of the same image may seem like wasting time and resources, but it pays off in a long run because it ensures you never lose image information you may need to reuse in future.
As mentioned above, cropping photos meaning cutting out a part of the image you want to use, and discard the rest of it. In the process of cropping, you will change visual composition to what you need, and possibly change image proportions.
The quick way to crop the images is by using Photoshop’s Crop Tool. See the short video above on how it’s used. Note several important points:
Very often the photos you take may have unwanted perspective deformations (such as “fallen verticals”). You can take care of these (up to some extent) using Perspective Crop Tool. Here’s how:
Here’s how to use the same tool to fix the perspective on a photo of a building. Since you’re an architect now, this is a task you will need to perform very often:
TIP: Perspective Crop Tool is best used at the very beginning of the workflow, before we use Simple Crop to cut the image down to exact proportions we need.
Before we continue, do you remember the difference between cropping and resizing images? If not, read this article again.
Changing image size is as easy as using Photoshop’s Image Size command that you can find in the Image menu. Here’s how:
A few important things:
One very important thing to remember is that you can resize images down, but you can never resize them back up. In other words, you can make images smaller but you can never make them bigger.
Remember, the bigger image (in pixel) the more details it contains? If you resize down the image, you lose details forever.
To avoid confusion: photoshop will allow you to change image size to bigger dimensions, but that doesn’t mean you end up with sharper image with better detail. The reason is that Photoshop (or any other program) can’t invent the new pixels and know what details were originally there in the image. Therefore, if you try to make image bigger, it will try to add more pixels by interpolation, meaning you end up with bigger image but it looks blurred or unfocused.
This is the principal reason I strongly suggested to always keep multiple copies of your images: once you resize them down, you can never go back!