Creating banner images in Photoshop (illustrated tutorial)

Creating banner images in Photoshop (illustrated tutorial)
step-by-step instructions for creating a correctly sized (550 x 220 pixels ) image for WCMS banner images
last modified by Angela Thalls, Aug 10, 2010 11:01 AM
1. Open Photoshop. Go to Photoshop > Preferences > Units & Rulers and set measurement to
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
Congrats - you now have a banner image ready to upload into the WCMS!