Creating banner images in Photoshop (illustrated tutorial)

step-by-step instructions for creating a correctly sized (550 x 220 pixels ) image for WCMS banner imageslast modified by Angela Thalls, Aug 10, 2010 11:01 AM

1. Open Photoshop. Go to Photoshop > Preferences > Units & Rulers and set measurement to pixels

2. Go to File > Open to to open image you want to use for a banner image

3. Resize the image: you can crop first, then resize, but if you know you want to use the full width of the image, first resize, then crop as illustrated below

Go to the menu and select Image > Image Size.

In the image size dialog, set width to 550 and resolution to 72. Make sure Constrain Proportions and Resample image are checked. Click OK

4. Crop: First, go to the menu and make sure Window > Info is checked and that you can see the numbers in the info panel.

In the toolbar on the far left, select the Selection tool, highlighted here, and click /drag a selection rectangle on the image - note the info panel will dynamically change and tell you when you have a 550 x 220 rectangle. You can then put your arrow in the center of the rectangle and click once and hold down / move the rectangle around the image - if you double click as you will deselect and make the selection rectangle disappear. If this does happen, go to the menu File > Undo Deselect and the selection will appear again.

You can also use the keyboard arrow keys to move the rectangle around one pixel at a time. When you are happy with the selection area position, go to the menu Image > Crop

You now have a cropped image measuring 550x220

5. Export a JPEG: Go to File > Save for Web and Devices…

You will get a "Save for Web & Devices dialog - make sure the 2 up tab is selected, and JPEG quality "High" is selected. Click Save.

Enter a name for the JPEG file (a common photo file format compatible for the web) and make sure the .jpg suffix is in place - the web server (and web browsers) need the suffix to identify what kind of file it is accessing.

6. If you don't want to save the crop / resize changes, don't save the image you've been working on - and you won't save over your hi-res original. Just go to File > Close or Apple + W and don't save changes.

Congrats - you now have a banner image ready to upload into the WCMS!