1Eighty Design

Many of the our clients use a content management system (CMS) to update their sites. This allows them to change the content on their site whenever they want and as often as they want. When you are trying to improve your search engine rankings its important to update your content regularly.

Along with updating your content, you may also need to add images to your site. In some cases these images will have to be cropped/trimmed/scaled to an exact dimension, this tutorial will help you create the images using Photoshop or Photoshop Elements.

Step 1. Select the “Rectangular Marquee Tool”

The Rectangular Marquee Tool will allow you to select part of the image to use on your website. In this example we are going to assume that the image must be 250 pixels wide and 125 pixels tall. When you are ready to create your image, simply replace 250 with the width required and 125 with the height you need.

Step 2. Change Tool Settings

Using the Rectangular Marquee Tool you can proportionally select part of the image based on the dimensions you need. To do this you must change the tool settings. First change the Style/Mode to “Fixed Ratio”.

Next you will need to enter the numbers you want to use for your final dimension.

Step 3. Make Your Selection

Now that the Marquee Tool is setup correctly you will need to make a selection. In the example below we wanted to capture the train while cropping out part of the sky. Start by dragging from the top left down to the bottom right. You’ll notice that the selection box keeps the same ratio that you specified in the tool settings. After making the selection you can click and drag the box around the image. If you are not satisfied with your selection you press Ctrl-d to deselect and try again.

Tip: When making your selection, make sure you select enough of the image so it is not scaled up in the next steps. So for this example we’d want to make sure that our selection box is at least 250 pixels wide.

Step 4. Crop Your Image

Now you need to crop your image to the selection box boundaries. This is done by selecting the “Crop” option as you can see below.

Step 5. Size Your Image

You must now size your image to the exact dimensions. Using the “Image Size” tool you can set your image to the size needed to upload into the CMS.

After selecting “Image Size…” a dialogue box will appear that allows you to enter the new dimensions. Make sure that the “Resolution” under “Document Size” is set to 72 pixels/inch. Under “Pixel Dimensions” enter your width and height. If everything has been done correctly the height will change to the correct value when you enter the width. Press “OK” to close the dialogue box. If the width or height is less than the width or height required for the CMS you may want to start over so you are not scaling the image up which will give you undesirable results.

Tip: If you are not able to edit the “Pixel Dimensions” make sure the “Resample Image” box is checked.

Step 6. Save Your File

Your image is now setup correctly for the CMS which means you must now save your image. Both Photoshop and Photoshop Elements have an option under the “File” menu to “Save for Web…”. Select that option to open up the dialogue box to save your image.

Once the dialogue box is open you may need to make some changes. First make sure that “JPEG” is selected, next you will need to change the quality. Generally somewhere between 70-90 is good but make sure you pay attention to the preview in the window to the left. If you think the image looks bad and is becoming pixelated you may want to raise the quality higher. Once you are satisfied with the image press “OK”.

You will now be asked to save your image. Make sure you save your image to a location you can remember, you will need to select the file to upload it to the CMS. Also, it doesn’t hurt to name your image using something descriptive. For the example it could be: “freight-train-alongside-road.jpg”, some SEO experts believe that keywords used in your image names can help your ranking.

Conclusion

When making the selection (step 3) try to select the part of the image that will be most intriguing or illustrate your product the best way. If you are not happy with your photo after the first time try again, just make sure you do not save over your original file!

Tags: Photoshop

This entry was posted on Tuesday, August 24th, 2010 at 12:15 pm and is filed under Content Management System, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.