Photoshop is part of the Adobe Creative Suite. Photoshop is the industry standard for editing photographs for print, but it can also be used to produce images for the web.

Videos on this page:

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)