- Tips & Tricks
- Feb 7, 2013
- 106 Comments
Ever wondered how to save time and make your site look consistent by cropping your images and optimize in Photoshop?
Ever needed to crop an image down to a certain size and save for web? This is something everyone who manages or populates content to the web needs to be able to do at some point to keep their site clean and organized. This simple tutorial will help you do this effortlessly using photoshop CS through CS6
I know photoshop to a lot of Small Business Owners can seem daunting, however like this tutorial on how to crop images and optimize in photoshop to save time, it can be quite simple.
1. Simply start by opening photoshop and clicking File>>>Open>>>then select the photo you which to work on.
Tip: One note, it is important to start with an image that is quite large, as cropping to a smaller size will produce a crisp image, however cropping to a larger size will create poor pixelation.
2. Once the photo is open in photoshop, click the crop button.
Tip: If you hover over each tool in photoshop it will tell you which tool it is. The crop tool looks a picture frame crossed over.
3. Once the crop tool is selected a bar appears at the top that asks you the pixel dimensions you want to crop the image to. See figure 2 above. You will notice the bar at the top of photoshop that says Width and Height and Resolution.
Tip: Most images for web need to be a screen resolution of 72 DPI (Dots Per Inch).
In this case I want to crop the image at 600px Width and 480px in Height.
Tip: make sure to type “px” at the end of the number if you want to crop to pixels. Type “in” if you want to crop to inches etc etc.
4. After you select the size and resolution for the crop, simply click hold and drag your crop tool over your image, release when it covers the part of the image you want to crop. The box that appears is the same size ratio as the numbers you crunched in. You can make it as big or small as you want but you cannot change the aspect ratio unless you change the numbers.
Tip: After you drag it out, you can move the crop box around to select the best crop for the image. Click enter once you release the box and the image will crop for the size you specified.
How to optimize and save the image for web.
5. Deselect the crop tool by clicking on the top arrow tool. Then go to File>>>and click “Save for Web and devices”. A save box appears like figure 5.
Tip: Jpeg will usually give you the best image quality for a normal photo or image so make sure Jpeg is selected. Next right under JPEG you will see a bar, in figure 5 this bar says “High”. This is referring to the image optimization quality. I usually select high as it is still a relatively small file and maintains good pixel depth. Medium and down will start to create poor pixelation, but for small images less than 300px this can be a good option.
6. Once you’re done choosing your optimization preferences it is time to save. At the bottom of the save for web and devices you will find three buttons, Save, Cancel, and Done.
If you want to save the image with the preferences you chose, click save. Your file directory will come up and then simply select the folder on your computer you wish to save the image file to.
And you’re done, you have successfully navigated Photoshop’s many features to create this simple how to task and make your images whatever size you want.
We appreciate you reading this post, and hope this makes your life a little bit easier as you benefit from photoshops many useful but simple tasks.
We look forward to posting some more How To photoshop tutorials to help you manage your webpage better.
Thanks for reading!
Simon | CEO | Designer | Consultant