Photoshop Basics: Handling images in 4 easy steps

Photoshop Basics: Handling images in 4 easy steps



Are you the new proud owner of a website or blog? Do you have unanswered questions regarding the pictures you will be posting on your site? Would you like to learn how to edit your photos before posting them online? If you answered yes to any of those questions, this tutorial was made for you.

This tutorial will show you how to crop your images, how to enhance them, how to resize them and how to save them for web. It uses Photoshop CS5 but any previous version of Photoshop will work as well. Photoshop is the most powerful image manipulation software on the market. It is a good buy if you plan to edit pictures or create graphics on a regular basis. If you do not have Photoshop and want to try it first, you can download a free trial here. If you’re not interested by Photoshop, you can take a look at Google’s Picasa, a free photo editing program. It doesn’t do as much but it’s very user friendly. You will probably find some of the features I present in this tutorial in Picasa as well, though the interface will be different.

Are you ready to embrace Photoshop’s image editing powers? Read away!

Step 1
Step 1: Cropping
Before working on a photo, you will have to open it and probably crop it.

So, how do we start? In Photoshop, we have to open our photo first. Go to your top menu in Photoshop and click on File > Open, and go get the photo you want to edit inside your computer.

Once your photo is opened, you should see your screen like this. If you want to leave out a part of your picture, the next step is cropping. Maybe you wanted to take a picture of a car but your cousin appears in the frame and you want to take him out (you can tell him later you did it for artistic purposes). Maybe there is a part of a landscape you want to eliminate. Or maybe you just want the focus to be on the object you photographed.

In your toolbar you will select the Crop Tool and, in your image, select the area you want to keep. When your selection is done, your image should look like this. When finished, hit Enter on your keyboard. Ta-dah!

Feel free to repeat this step if you think you need to leave out more parts.

Step 2
Step 2: Enhancing
Once your image is ready, you might want to enhance it. Maybe it’s too dark, too bright, or the colors just don’t pop enough. Photoshop is a marvelous program that gives you thousands of ways to edit photos. Since this is a basic tutorial, I will only show you 1 possible adjustment. Remember however that there are many more and I encourage you to explore them during your free time.

Hit Image > Adjustment > Levels

It looks like this. Take a good look. What will follow is a bit technical.

Levels is a powerful tool that can adjust the brightness, contrast and tonal range of a photo, so you can play with dark, bright and midtones. You have 4 different channels: RGB will affect the image as a whole, Green will affect only the greens, Blue will affect only the blues and Red… well you get it!

For each channel you have three little sliders: one for the black point on the left, one for the midtones in the middle, and one for the white point on the right. Play with them and see what changes on your photo. You’ll notice that if you pull the black slider to the right your photo will darken and that if you pull the white slider to the left, your photo will brighten. The same can be accomplished for each separate color (red, green and blue). My advice regarding Levels is to be subtle and to just have fun with it. Try and see. You don’t like it? Cancel and start over! You can also try to use the Auto option on the right of the Levels window. Sometimes it gives astonishing results.

If you want to explore more enhancing options, I encourage you to try Brightness/Contrast, Vibrance and Photo Filter for starting. Those are easy to manipulate. Later I will be posting links to online tutorials that will help you deepen your knowledge of Photoshop.

Step 3
Step 3: Resizing
You cropped your photo and then you edited it. Is it ready? Nope. Before posting a photo on your website or blog, you will have to resize it. Have you ever experienced terribly slow loading time on a website because the photos took forever to appear? That is because the website owner didn’t know how to resize his pictures. They transfer their photos from their camera and leave them in their original size, usually taking between 1 and 4 megabytes (for reference, that is how heavy a mp3 is). Even if you have a fast internet connection, such size might take up to 30 seconds to load. For a single image, it is unacceptable. It should take a second, no more.

Resizing is very easy. Go to Image > Image Size

You should see something like this. What you need to edit is under Pixel Dimensions. If you are posting images on a blog or website, adjust the width to be no more than 800 pixels. 400 to 600 pixels is usually what you will see on a blog post and up to 800 in a photo gallery. Make sure the little chain is there on the side. If it’s not, your measurements will not be proportionally adjusted for the width and height, resulting in a distorted photo.

Hit OK. You’re done!

Step 4
Step 4: Saving for web
Wait, are you really done? No! You still have to save. In Photoshop, you have 2 ways of save. The regular way which usually makes very good quality photos but heavier files, and the Save for Web option. I strongly recommend this one if you are going to put your image on the web; the size is drastically reduced and the quality is mostly conserved. Your visitors won’t notice the difference and the photo will load faster.

To do that, go to File > Save for Web & Devices

A window like this one appears. You will want to keep the JPG format, unless you are saving an image with transparency, then PNG would be best. Keep the quality anywhere between 80 and 100. Then hit the Save button. This is what I get as a final result.

Your image is ready to be posted online. Congratulations, Photoshop Padawan!

If you have any question or comment regarding this tutorial, please leave us a comment.

About the author

Tina Mailhot-Roberge is a graphic designer, illustrator and co-founder of Veodesign. She holds a BFA in Design from Concordia University, Montréal. She loves to help people and wirte about arts, design, web and technology. Find her on Twitter, Facebook and Google+.