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.
Photographs are a key ingredient in this web design recipe, and so we need to be able to get photographs into our designs quickly and easily and work with them. In this movie, I'll explore how to put photographs into your web site mockup and how to use them. So I am going to go ahead and come over to this document that has three different robot photographs in it. You can see each one is on its own layer. And so what I'm going to do is I'm going to put them into my other design, and I'm just going to go that as I need them. So I'll go back over. And I'm temporarily going to hide this rectangle that's underneath the Header because I don't need that right now.
I am actually going to be creating content for the storefront. So I am going to find Content_Store and open that up, so it's open when I start dragging stuff into it. I'll go back over here. I'm just going to select all three of these layers by Shift+Clicking, and then I'll take them and I'll drag them over. I'll hold down my Shift key and then I'll release my mouse and then I will release my Shift key. Now it should've dropped them right in the Content Store, which it did. If it didn't drop them in there, that's okay; you can just move them into the folder. And it should have dropped in dead center in the middle of the page, which it has.
Now I am also going to drag them up so that they meet the content margin as well. So let's drag them up till I snap to this guide, and now I am going to evenly distribute them across as well. So I'll take the red robot first by selecting this layer and I'll move him over to the left. And I am just doing this with my arrow keys. If I wanted to use my mouse, I could, but I need a first turn off Auto Select, if you have that selected. So I'll turn that off. And then I'll grab the green robot. And he's going to stay right in the middle, so let's move the silver robot over. Here we go. And it should snap right to the guides.
Now, theoretically, since I have pasted these into the dead center of the page, they should be evenly distributed across. But just in case, I'll select all three of them again, I'll come up to the Options bar, and I'll choose to Distribute horizontal centers. Once I do that, this robot snaps right in to the center like it should, and I'm good to go. I am going to select one of the robots. It really doesn't matter which one. In this case I'll be working with the silver robot. And I'll double-click to right-hand side, and I am going to add some layer styles. I'll add a stroke and I'll make sure this is set to the inside, set it to white for the color, and maybe about five pixels in width.
And now go down to the bottom and choose drop shadow. I am going to change the Distance to 0, I'll change the Size to about 8, and I'll change the Opacity to 55, just a subtle shadow. Hit OK. Now, I want to easily transfer this to all of these photos. Pretty simple. Right-click on this layer, choose Copy Layer Style, then select both the layers beneath it with Shift+Click, right-click, and choose Paste Layer Style.
It pastes in on both of those and you can see it right there in the window. Now I'll collapse those up, and there we go. Now, I also know that I want a copy of this robot here on my About page, so what I'm going to do is select that robot, which is the silver robot; use Command+J or Ctrl+J to duplicate it; and then I'll drag that copy and drop it into the About folder. I'll close up Content Store, and actually for now, I'm going to hide that group.
So I'll find Contact Store and click the eyeball next the group. Now I'll open up Content About, find the robot, and I'm just going to center him in between these two guides right here. As long as he snaps to that top, it's okay. And so now this is going to be kind of a side marker to our About text that we add in a little bit later on. So now that we have got all of my images in place, I am ready to save this composition and continue working.
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.