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.
When you're delivering assets to a client or putting things into a specific web site, you may find that you're constrained to a given size, like 800 or 600 pixels or something like that. However, the assets and photos that we deal with inside of Photoshop oftentimes are in different orientations, so it may be sort of hard to fit those images into those proportions. Rather than opening up images one at a time and changing the dimensions to fit whatever window we're trying to put it in, it's a good idea to automate that workflow utilizing something called the Fit Image command and the Actions panel inside of Photoshop.
Let's take a look at exactly what I'm talking about. So I am going to open up a file by going to File > Open or hitting Command+O or Ctrl+O on my keyboard, and I'll go into my exercise files folder and get into chapter 11. Now go into the Fit Image folder. I am just going to select one of the images in there--in this case it's the retro_car.jpg-- and I'll hit Open. This is a pretty big image. If I go to Image > Image Size, you can see that it's 2000 pixels wide and almost 2000 pixels tall. So what I want to do is fit this within an 800-pixel window, but I want it to do that based on the longest edge of the photo.
So I want the longest edge of the photo to be 800 pixels wide. And I want that to happen for every one of those photos in there, whether they're portrait or landscape. So in order to do that, I am going to have to create an action using the Fit Image command. So let's go first to the Actions panel. I'll create a new action set and I'll call this Fit Image, hit OK, and I'll create a new action called 800px, and I'll hit Record. So now I am recording this action. I am going to go up to the File menu, choose Automate, and select Fit Image.
When I bring up Fit Image, if I want the longest edge of the photo to be 800 pixels, I need to specify that as both the Width and Height values, so 800 pixels and 800 pixels. Basically, what Fit Image does is it resizes the image and when one of these edges, either the height or the width, hits 800 pixels wide, it stops. I can also say not to enlarge. So I will hit not enlarge and I'll hit OK. So it has fit this image and now I click Stop in my Actions panel. And if I go to Image > Image Size, you can see now that the Width is set to 800 pixels and the Height is set to 600 pixels.
So that's what it did: it fit it within that 800-pixel window that I gave it. Had it been taller than it was wide, then the Height would've stopped at 800 pixels and the Width would've been whatever number it would've been. I'll hit Cancel here, and let's try this out. I am going to close this file and I won't save it. And now I'm going to go up to the File menu, choose Automate, and select Batch. I am going to choose the Set Fit Image, the Action 800px, the Folder I am going to choose and select the Fit Image folder, then I'll Choose this folder. I am going to save it to a new destination, so I'll choose it and I'm going to go out to my desktop and I'll create a new folder called Fit Image and hit Create.
Then I'll hit Choose and for my file naming, I am just going to change this to Document Name. I'll make sure it has a two-digit serial number and the extension underneath. So all you have to do is just pick these from the dropdowns, just like that, okay? Now I'll hit OK. It goes through. It runs this. It may come up with JPEG options; if it does, just hit OK. And there we go. Now if I go to the File menu and choose Open, on my desktop, in the Fit Image folder, should be retro_car01, tin_spaceboy, toy_soldier, and vintage_cycle.
And if I open all those up and look at the Image Size, this one is 800 pixels wide, this one is 800 pixels tall, this one is also 800 pixels wide, and this one is 800 pixels wide. So it fit those images into the specified width that I gave it, based upon the longest edge of whatever photo that I had open. So this is a great way to automate that process and then easily get these photos out onto the web or shipped off to your client.
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.