Basic Image Editing Tutorial | For Use On A Blog or Ecommerce Site

Running a blog or e-commerce site usually requires the usage of images to increase its effectiveness.

This is more so true for an ecommerce site as it represents a normally physical outlet with goods people can see and touch. No website can fully match the real experience except trying to be close to that by displaying still images, sound or video. Using just a bunch of texts to describe a product may not be so appealing to most web visitors.

Image or photo editing is not so difficult after all. Armed with a digital camera, a suitable software and some willingness to learn, it can easily be done. You don’t need a graphics designer for most of your image editing needs.

Typically when you’re using image from a digital camera, you’ll need to do the following – image cropping, background removal, photo quality enhancement, adding shadow and so on. I’ll cover most of these below so read on..

Step #1 Cropping

Capture your photo with a good contrast background. This will help to simplify editing process tremendously. Adequate lighting is important too.

Let’s start with this image as an example.

image

My favorite graphics software is Photoshop Elements(PSE). It’s the little brother of Adobe Photoshop and I find PS Elements can do the job if not better than the full specs Photoshop, at least for the purposes mentioned in this article.

Now, load the image into PSE.

image

Click “Crop Tool” and select area of the image you want to keep. Click the green colored tick to confirm. We’ll now have a smaller image to handle.

Step #2 Removing The Background

Usually we want to remove the background as they tend to become an unnecessary distraction. We want to make the image to stand out better and hopefully attract more attention from our site visitors.

There are several tools that can be used for this task – Magic wand, Lasso and Quick Selection. My favorite is the Quick Selection as I find it’s the quickest one to complete the task of removing the background.

Start by clicking the “Quick Selection Tool” and make sure the “Add To Selection” option is active(see top left corner in PSE).

Next continue clicking the area we want removed. In this case all the background around the paper box. The active area is contained within the “dots”.

image

The last step is to hit “Del” button to remove the area.

image

We now have an image with a  “clean” background. If you like a transparent background, go to the menu “Layer-New-Layer From Background-OK”. Hit “Del” once.

image

Step #3 Enhancing The Image

image

In PSE, go to “Quick” option and click “Auto”button for things you like to fix. Usually this is enough without full scale editing.

Step #4 Adding Shadow

Shadow can make the image looks more lively and it’s easy to do.

Go back to “Full” mode editing, click “Effects” drop-down menu and choose “Drop Shadows”. Pick type of shadow that you like and the image will now come with a shadow. Change the shadow properties by double-clicking on the layer styles indicated by a blue “fx” on the layer panel.

image

Obviously the last thing to do is to save our work. Use “save-as” in you want to keep the original. You can also use “Save for web…” to change the format and size of the final image.

test2-P1150664