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.
One final way that we can streamline our workflow here inside of Photoshop is to utilize something called the Image Processor. The Image Processor is basically a way of taking multiple images at a time and converting them into a different format in one fell swoop. Let's take a look at how it works. I'm going to go to the File menu and this time instead of going to Automate, I'm going to go down to Scripts. And inside of the Scripts menu I'm going to choose Image Processor. Once I have the Image Processor open, I then have the ability to follow the steps one, two, and three. So let's go to step one first. I'm going to select a folder. In this case I have a folder in my chapter 11 exercise files folder called Image Processor, and it's full of PSD files of flash drives: flash_blue, flash_green, flash_grey, and flash_pink.
I'll hit Open and so basically what I want to do is I want to save a copy of these and I go to step two this time to save in the same location or select a folder. This time I'll select a folder. I'll choose the Select button, and I'm just going to add a new folder inside up here, and I'm going to call it JPEG. Hit Create. There we go. Hit open. Now I go to step three. I'll select my file type. In this case I want to save it as a JPEG. I'm going to set the Quality setting to 5; that's sort of middle of the road.
I'm also going to resize it. These are pretty big. They're actually 1000 x 1000 pixels. Let's say that I'm sending these to a client for approval and I want them just open it up, quick look at it, and close that. I don't want them to have to download a big file. So in this case I want to go ahead and change the Width to 300 pixels and I'll set the Height to 300 pixels as well. Once I get that done, I can go down here at the bottom. And step four, I can also run in an action if I want and add copyright information. So from here I'm pretty much ready to go.
So I'll hit Run. Photoshop goes through, it runs through every single one of those images, and now if I go to the Open command--Command+O or Ctrl+O--and look inside of my JPEG folder, there's actually a new folder called JPEG and flash_blue, flash_green, flash_grey and flash_pink. And if I open those up, they should all be 300 pixels each. So if I look at all of them, they're all the right size, Image > Image Size, 300 x 300 pixels. Exactly what I wanted, in JPEG form. Fast. Easy. Send them off to the client, and you're done.
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.