Fixing Distorted Images
Web template support for cropping photos
Problem: Webpage or gallery images are distorted due to the new image not being the same height to width ratio as the image originally used in the template HTML page.
See Also…
Cropping and expanding images
If you want to set all gallery images and thumbnails as landscape (horizontal) orientation but some of your photos are portrait (vertical) orientation, you can "crop" your images. Images may become distorted or squished if you edit a portrait type image to landscape dimensions. Below are some suggestions to crop or expand images and solve for distorted images.
Fix with cropping, expanding or blank ends
The above examples show solutions to squished or distorted pictures.
Cropping Images: Cropping means to cut off areas of an image rather than re-size the image. In Photoshop you can do cropping using the "Canvas Size" option (see the help section included with your editing software).
- Re-size your new image to the desired width used for the template image.
- Crop the image using "Canvas Size" to adjust the height.
Expanded Thumbnail: In this example we used copy and paste, blur and the feathering tool to "fake in" the left and right areas of the background landscape.
- Re-size your new image to the desired height used for the template image.
- Expand the image width using "Canvas Size", creating empty space on the left and right.
- Fake in the blank areas using copy and paste, blur and feathering tools.
Blank Ends Thumbnail: In this example we'll leave blank colored areas on the left and right sides of the image.
- Re-size your new image to the desired height used for the template image.
- Select the background color to use on your tools menu.
- Expand the image width using "Canvas Size", creating empty space on the left and right.
Related Topics:
Thumbnail editing
Squished slideshow pictures