Creating Web Images Using Adobe Photoshop

Photoshop is part of the Adobe Creative Suite (note: not included in all versions). Photoshop is the industry standard for editing photographs for print, but it can also be used to produce images for the web. (Note: If you have access to Adobe Fireworks, this is the preferred application for web image production.)

Videos on this page:

youtube controls tip

TIP: Having a hard time seeing the details? We recommend turning on the highest video quality possible and making the video full screen. Both of these controls are visible at the bottom right corner of the player after the video has been started.

 


Photoshop Basics: Make an Image Ready for the Web

Follow the process of optimizing a large photo for web use and exporting it from start to finish.

Topics covered:
0:00 - intro
0:25 - how to view the current image dimensions
0:44 - about image resolution/dpi (web images should be 72 dpi)
1:27 - magnification settings inside the Photoshop application
1:57 - changing the image size/dimensions
2:05 - pixel dimensions vs. document size in inches (use pixels only!)
2:37 - tip: change the image resolution first
3:36 - recommended general image size is 375 px x 250 px
4:40 - about Save/Save As (only use for originals, not web images)
5:30 - using Save for Web
5:45 - keeping file sizes low (try to keep under 100k for most images)
6:30 - changing image quality settings
7:40 - make sure sRGB mode is checked
7:50 - choosing a file name (keep original name if possible)
8:10 - if you do rename file, no spaces or periods (use dashes to separate)
 


Cropping & Resizing Images with Photoshop

Learn how to take a large photo, crop out what you don't want and then resize for web use in 3 easy steps.

Topics covered:
0:00 - intro
0:18 - viewing image dimension and resolution info
0:28 - example setup
0:52 - selecting cropping area with the marquee tool
1:36 - use Image > Crop to crop photo
1:48 - why resolution still needs to be adjusted (72 dpi for web)
2:18 - using Image > Image Size to change resolution and image dimensions
2:52 - change the smallest dimension to needed size
3:54 - changing magnification view within Photoshop
4:20 - crop away extra pixels using Image > Canvas Size
4:36 - Image Size (resizes) vs Canvas Size (crops)
4:48 - make sure units are set to pixels and select final image dimensions
5:24 - image is ready for the web
5:35 - tip: using the Canvas Size anchor grid to choose which side is cropped

 


Photoshop Image Adjustment Controls

Learn how to adjust the appearance of your image.

Topics covered:
0:00 - intro
0:45 - having History panel open helpful for easy undo
1:11 - color adjustment panel shortcut icons
1:35 - try using Auto Tone/Contrast/Color adjustments first
2:07 - using History to go back a step
2:45 - adjusting Brightness/Contrast
3:45 - adjusting Color Balance
4:30 - adjusting Saturation/Lightness (avoid Hue)
5:22 - using the Sharpen filter to enhance details
6:38 - when not to use Sharpen (people's faces - enhances wrinkles)