How to Use Photoshop to Prepare Photos for Web!

by kkatblue in Craft > Photography

1193 Views, 3 Favorites, 0 Comments

How to Use Photoshop to Prepare Photos for Web!

palmsun 3.png

Hi! I'm going to give you a brief tutorial using Photoshop to optimize your photos for the web.

Color Mode

screenshot 4.png

First, it's important to know that the color mode that images show up best in online is RGB. To make sure that your photos are in RGB mode:

1. Open the image in Photoshop. 2. Find the "Image" tab at the top, mouse over it until "Mode" shows up, and check "RGB" & "32 bits". Click "OK".

Cropping & Saving

screenshot 6.png
screenshot 8.png

If you should desire to crop your image, Photoshop has a cropping tool. I've cropped this image to 450 W x 486 H pixels.

1. Select Cropping tool from menu on left side of screen in Photoshop.

2. Drag the cropping box to the desired size and "crop" the image.

3. Select the "File" menu from the top of the screen and choose "Save As", then choose to save as a ".jpg" or ".png" file.

4. Give your image a name and click "Save."

Resolution and Image Size

screenshot 7.png

Make sure that the image size is at the right resolution and size. A good resolution for web graphics is "72", and a good size is 800 pixels or less for the Width/Height. This will ensure that the image will look crisp and will not be too large in actual size, or file size to show up well on the web (if the resolution is too high, it will take too long to load on the page!).

To find the image size:

1. Use the "Image" tab, then choose "Image Size" to open the sizing menu.

2. Check or change the size of the image using the entry boxes. Click "OK".

(Since I already cropped my image in the last step, I am not going to change the size here, but you can always choose to crop and/or resize an image, depending on your needs)

3. Save any changes! (Again: File>Save As, or File>Save.)

All Done!

palmsun 3.png

That's it! Now you are ready to upload your photo to the web! :)

Photo Copyright © 2015 Kelly Mergens