A Photo Editing Primer

photo editing graphic

As an online marketer, one of the skills you should be familiar with is basic photo editing and graphics design. Even if you intend to hire freelancers to do the work, there will probably come a time when you should know how to do it yourself.

An internet marketing strategy that is usually not considered is that of photos and how they affect the visitor experience. This is a mistake. So, consider your images and how they are placed on your site.

Note that to create photos, you DON’T need to know how to create graphics from scratch. All of your images will be created by finding different graphic elements on the web or elsewhere, manipulating them, and adding them to your image in layers. So here’s my own version of a photo editing primer that will get you up to speed.

Photo editing requires some type of software program to do the dirty work. There are free ones you can download on the web and Microsoft Paint usually comes with Windows Computers. However, the one I know and love is “Photoshop Elements,” which is a stripped down version of Adobe Photoshop. I say “Elements” because it’s much cheaper than the full version of Photoshop and will do everything you will ever need with your photos for the web. This program is so powerful, only high tech pros would need more.

So, since my experience is with Photoshop Elements, I will be coming from that perspective. However, all photo editing tools do the same things – so the concepts I explain here can apply to other programs as well.


First, you should know about photo resolution. As you may be aware, photos displayed on a monitor are composed of dots – both horizontally and vertically. These dots are called “pixels.”

Photos on the web are typically referred to by their horizontal and vertical resolution, so a photo that is 230×400 would be one that is 230 pixels wide by 400 pixels high. Easy peazy so far, right?

The other resolution figure you should be aware of is dpi, or dots per inch. For simplicity sake, if a photo is 4″ x 6″ and 400 pixels x 600 pixels, then there is 100 pixels per inch horizonally and 100 pixels per inch vertically. This means this photo is 100 pixels per inch, or 100 dpi.


On your website, it’s very important to keep image file sizes as small as possible so your pages will load quickly. However, you also want the best quality. There 2 factors oppose each other. The better the quality, the larger the file size, and smaller the file size the lower the quality. How do you handle this?

Know that all photos on the web are displayed at 72 dpi. This is the magic number to remember. This resolution is fairly low for other uses, especially printing which typically requires 300 or more dpi. However, for the web, it’s the maximum display size. This means that any photos greater than 72 dpi will still be displayed at 72 dpi. Therefore, higher resolutions will mean greater file sizes that are wasted for the web. No need for this. So, when editing photos for your website, convert all of them to 72 dpi before publishing to your site. This will reduce the file sizes but keep the photo quality good enough for computer display screens.

dpi image


As I mentioned before, photo and graphics editing programs all work slightly differently, but all use the same concepts. For example, your Galaxy phone might not be exactly the same as your Iphone, but all phones work very similarly. Here are some of the skills you should take the time to learn.

  1. Changing Image Size: Depending on where you’re using the image, you’ll probably need one of a certain size. Whether it’s on your website, or running a facebook ad, most places you’ll use an image will ask for a specific size. Knowing how to change an image size is essential.
  2. Creating An Image From Scratch: This means creating an image within a certain size, adding backgrounds, text, and other graphics to the image, and saving it for editing later and for publishing on the web. (Note, you don’t need to know how to create graphic designs from scratch – anything you want to use can be found somewhere on the web or elsewhere.) For instance, if you need a “star” image, you can find it. Need a “button” for your site? You can find that too. The list is endless!
  3. Using Layers: When creating an image, you will be adding elements to it that are added in “layers.” As you edit, each layer is separate and therefore, can be changed independent of the other layers and the entire photo.

    Once each layer has been added and manipulated, you’ll want to save your image as a “layered” file. This keeps each layer separate so that you can go back and change any layer you want later. In Photo Elements this format is a .psd file. Other programs will use their own extensions.

    Once you’re layer filed is saved, you’ll need to open it and save it in a “web friendly” layout – typically .jpg or .gif. These file types “flatten” all layers into one merged file. You will no longer be able to edit each layer separately.

  4. Copying And Pasting: Often times you’ll want to capture images from other web pages and use them on your own. This could be done when advertising for Target, for example, and you want the Target logo on your site, or other uses as well. (Keep in mind copyright issues – don’t copy images and use without permission).

    Copying an image is easy. Simple right click over the image, select “copy,” go to your graphics program, open an image file or create a new one, click “file >>> paste” and the image will be pasted into the file that is open. You can also save it to your computer for use later.

  5. Adding and Manipulating Text: Usually your graphics program will have a separate command for adding text, changing the font, size, color and more. Learn these commands and you can create some beautiful type.

Basically, these are all the skills I need to create my own image graphics for use on my websites. Note that every graphic you see here was created by me or found somewhere else and manipulated by me for use.

You can do it too. It should only take a few days to become familiar with photo editing and the concepts behind it all. Use my photo editing primer as starting guide and continue from there. You will be glad you did.

Leave a Reply