Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
As you continue to work with photographic images inside of Photoshop, you're undoubtedly going to need to resize and crop images for your web site designs. A lot times we're bringing in photographs that we've taken with a digital camera and they're simply too big to display on the web. So in this movie, I'm going to walk you through a couple of my techniques for cropping and resizing images as well. Let's tackle cropping first. In Photoshop CS6, they have an all-new Crop tool. You can access that by finding the Crop tool in the toolbar or simply by pressing the letter C on your keyboard. Once you press the letter C, you're automatically going to get cropping handles all the way around the outside of the document.
You can simply just click and drag to crop them and the image sort of moves along with you. The Crop tool is very fluid now, and I actually like it a lot better than the old Crop tool. So you just kind of maneuver this around and place it wherever you need it to go, just like so. Also new is this checkbox at the top called Delete Cropped Pixels. When this is checked, that means that as soon as I commit to this crop, the pixels around the outside of it are gone. However, if I uncheck this box and hit Enter, I didn't actually remove any pixels from the image at all.
In fact, if I were to start cropping this again and I drag this handle out to the left, notice the portions of the original image are still there. This is great because if I ever made a mistake-- like accidentally chopping off the head of the robot for instance, like this--I can always get back to that simply by dragging the Crop tool back up and making that adjustment. So let's continue. Let's crop this up, just like this. I'll crop it in a little bit on the side, and I'll hit Enter to commit.
Once I'm done with that, I'll switch to my Move tool to deactivate the crop around the outside, and now I'm ready to resize this image. If you look at it right now, I'm looking at it at 33.33%. That means it's zoomed out really far. If I hit Command+1 or Ctrl+1 on my keyboard, you're going to see just how big this object is. If I want to see the true image size, I can go up to the Image menu and choose Image Size and it'll give me the exact pixel dimensions of the document. In this case, it's 1050 x 1210 after I cropped it down.
So if I want to change this to something like 400 pixels wide, that's going to make it 461 pixels tall. And I'll simply hit OK. Going down in size is always easier than going up. Let me undo that and go back into the Image Size dialog box to show you a little something. When you're resizing images, you want to make sure that you try to go down as much possible, as opposed to going up. Going up tries to create pixel data where there is no pixel data, so you wind up with artifacts and pixelations and things that really make your photos look nasty.
But if you go from a large image to a smaller image, chances are you're going to maintain that quality, because you're not actually trying to create data where data doesn't exist; you're simply getting rid of data that you don't need anymore. At the bottom of the Photoshop Image Size dialog box, there is something for the resampling algorithm. You can choose which one of these you're using, based upon the action that you're about to perform. And you'll see here they have in parentheses a guide to tell you exactly what it's best for. For instance, Bicubic, (best for smooth gradients); Bicubic Smoother, (best for enlarging photos); Bicubic Sharper, (best for reductions).
So if you're trying to reduce the size of your image, you might want to try Bicubic Sharper. In this case, I'll choose Bicubic Sharper and I'll go with 450 pixels. Then I'll hit OK, and there's my newly resized image, just like that. If I want to take this file now and place it into another document, I can do that simply by selecting it all and then copying and pasting, or I could save this and then place it into the document using any number of the File > Place methods that we have available to us. So as you start to aggregate your content to put into your web site design, whether it be photographs, logos, PDFs, whatever it may be, take some time to learn how to utilize the crop and resizing tools inside of Photoshop to make it a little bit easier on yourself when you start assembling your final composition.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.