Basic image manipulation for AEM websites

This how-to is designed for people with little to no knowledge of photoshop, people with limited experience working with images, and people who would like to have more confidence when cropping, resizing, and performing other minimally challenging image-related tasks. This how-to is not intended for people already experienced with PS or who are already routinely creating and editing images on their sites.

Demonstration 1: Photoshop exercise: Cropping/resizing

1. Professor Mona Lisa has asked you to update her profile photo on her people profile. She sends you a large picture whose dimensions do not correspond to the tall, narrow 2:3 ratio of a profile picture in AEM.

PHOTOSHOP

1. open PS
2. open Mona Lisa "00-Demo-1"
3. select crop tool- you should see your mouse pointer turn into a crop symbol, and the entire image will have an outline around it
4. right-click in the image and select 2x3 (this is a ratio, and it is the correct dimension for the image you want in a profile)
5. the 2x3 box is resize-able and move-able. Move corners until Mona Lisa is outlined. Hit 'enter' when you are ready to crop.
6. Save AS.

Demonstration 2: Cropping from a group photo; resizing

Professor AG has a pic she really likes of herself, but it's with a colleague she wants cropped out. She sends you the photo and asks you to put it in her profile but with only her face in it.

PHOTOSHOP

1. open PS
2. open image "00-Demo-2"
3. select crop tool- you should see your mouse pointer turn into a crop symbol, and the entire image will have an outline around it
4. right-click in the image and select 2x3 (this is a ratio, and it is the correct dimension for the image you want in a profile)
5. the 2x3 box is resize-able and move-able. Move corners until Prof AG is outlined, leave some space above her head. You will still end up with some of her colleague's shoulder and fork but c'est la vie. Hit 'enter' when you are ready to crop

Save AS.

*Add this to a people profile to demo how cropping too close (removing the fork) will compromise the appearance of the image on the website*

Demonstration 3: Resizing an image that is much too large for AEM

The Chair of the Department wants you to add a new image to the slideshow, but the image s/he provides you is much too large to be used in AEM. It is 6000px wide! It takes up about 8MB! Your goal is to resize it (and crop if necessary) in order to fit it in the slideshow as well as reduce the amount of memory it uses.

Why we do this: large images in AEM slow down performance across all department sites and may even crash the system.

PHOTOSHOP

1. open PS
2. open image "00-Demo-3"
3. from 'image' menu, select 'image size'
4. 'pixel dimensions' is the only field you need to worry about. Change height to 900pixels, click 'ok'. We can adjust width in a moment
5. crop the image to the correct 4x3 dimensions using the same method we used in the first two demonstrations
6. Save AS.

Demonstration 4: Converting a PDF into an image; cropping and/or resizing appropriately

A faculty member would like a poster added to the slideshow, and also to an event listing, so the image needs to be cropped accordingly. However, the faculty emailed you a PDF, which can't be used as an image in AEM.

PHOTOSHOP

1. open the PDF file "00-Demo-4-poster" in photoshop. PS may ask you to select 'file' or 'images'; usually images is the correct choice

2. from the file menu, select 'save as' and choose format PNG. Allow it to compress if it prompts you

3. use the cropping and/or resizing methods covered above

4. Save AS.

Demonstration 5: Adding a department logo to an image

You have converted the PDF poster as requested, however, now the faculty also wants the department logo added to the image. The logo s/he sends you has a white background and does not look attractive on the poster.

PHOTOSHOP

1. open the logo file "00-Demo-5-logo" in Photoshop
2. at this point you may want to magnify the image so you can see it better (magnifying glass is in left toolbar; toggle between + and - in top bar)
3. unlock the "layer" by double-clicking on lock symbol. Create a new, blank layer and position it above the logo layer
4. using the "magic wand" tool and the shift key, select all the background areas on the image that you want to be transparent- TAKE YOUR TIME!
5. hit 'delete' key on your keyboard and double-check that all BG is clear and you didn't miss a spot
6. from the 'layer' menu, select 'duplicate layer' and add it to the open poster file
7. you may need to apply 'transform' to change the size of the logo
8. Save AS

And now...GROUP EXERCISES!
Please download the files referenced below to your desktop

Exercise 1. A Professor would like a new photo added to his/her profile, and sends you a large group photo from which you are asked to crop only his/her face. 

  • Please use the file marked "00-Exercise-1"

2. You are asked to add a ginormous image to the slideshow. Figure out how to resize it appropriately. Remember, nothing larger than 1200x900 is necessary.

  • Please use the file marked "00-Exercise-2"

3. Your boss forwards you a pdf poster and wants it to be the homepage slideshow. How do you proceed? 

  • Please use the file marked "00-Exercise-3"

4. A colleague asks you to add your department's logo to a poster, however the poster is blue and the logo has a white background.

  • Please use the poster you converted from Exercise 3 and the file marked "00-Exercise-4-logo"

To learn more about images in AEM, visit our Working with Images page.