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.
Now that we understand the importance of creating flexible graphics using vector shapes inside of Photoshop, let's explore the vector shape tools and how we can create graphics using them right now. I am going to create a new document. I will just do Command+N or Ctrl+N to do that. And I'll just set up something like 900 pixels wide by let's say 500 pixel tall. It doesn't really matter what the size is, as long as it's a decent-sized canvas to work with. And once I get that done, I am going to go down here to the bottom-left corner of the toolbar and click and hold right here where the shape tools are, and let's take a look at the various shape tools that we have at our disposal.
We have a Rectangle tool, which allows us to create both rectangles and squares. We've have a Rounded Rectangle tool, an Ellipse tool, a Polygon tool, a Line tool, and a Custom Shape tool. Let's first start off with the Rectangle tool. It's very easy to draw rectangles inside of Photoshop: just click and drag and release your mouse. If you want to draw a perfect square, you hold down the Shift key, click, drag, release your mouse, then release the Shift key. Now if I want to draw an ellipse, same basic principle. Go back and I'll select the Ellipse tool. And to draw out a regular ellipse, just click and drag.
If you want to draw out a perfect circle, hold down Shift, click, drag, and release the mouse, release the Shift key. Let's go back. Let's draw a polygon. Now the interesting thing about the Polygon tool is you can control how many sides it has. By default, it should have something like five, like this. So you can see, as I click and drag, it draws out five sides. Let's undo that, and let's come up here to the Options bar. Right here in the Options bar we have the amount of sides. So let's say I want to draw an octagon. I'll do eight sides, hit Enter, and then I'll just click and drag.
If I hold down Shift, it draws out a perfect shape, and I can release my mouse and release the Shift key. Switch to the Move tool, and I can just move that over a little bit. And let's go back into the shapes and let's check out the Rounded Rectangle tool. Much like the Polygon tool, you will be able to choose the Radius number up here, much like you could the sides on the polygon. In this case you might not know what this number needs to be, and that's okay. Just take a stab at it. In this case I'll shrink this down to about 6 pixels, hit Enter, and I will just draw out a rounded rectangle shape.
Now, one of the downfalls of Photoshop is the fact that I can't alter that corner radius after I've drawn the shape. In other applications like Illustrator and Fireworks, you do have the ability to do that, depending on how you drew to shape. For instance, you have Smart Shapes inside of Fireworks and you have the ability to apply rounded corners as a live effect in Illustrator. So if you're looking to develop rounded rectangles, my suggestion would be to actually do those in another application which supports this more flexible workflow. Now let's go back over here and let's go down to the Custom Shapes tool. The Custom Shapes tool is pretty interesting because you have access to a variety of different shapes in Photoshop by default, but you also have the ability to find shapes online and then load them into Photoshop if you choose to.
So let's go up here to the Options bar and find the Shape menu and click on that to drop it down, and you'll see several options that are available to you inside of the Shapes panel automatically. You can also load other shape libraries by clicking this little Settings icon right here and you can choose Load Shapes, if you have something that you have downloaded from the Internet, or you could simply load up the ones that ship with Photoshop by default. There's actually a Web section towards the bottom. If I click on that, you will get the option to either OK to add or append it. Here. I am just going to click OK so it replaces the current library with the web-based shapes.
Once I do that, you're going to see a lot of different UI type of shapes. So like plus and minus icons, forward and backward, up and down, this little save icon, mail, shopping carts, et cetera. These aren't really complex or even that good to look at, but they are a great starting point, and if you're just looking to learn how to draw some shapes, you could just pick one and bring it out, and there you go. Now if you're not big on clicking and drawing-- I know a lot of people don't like doing that-- you can also just simply click with the Shape tool selected and you can draw out a shape.
You can also, when you're drawing shapes that need to be in proportion like this shopping cart, choose to Preserve Proportions. So in this is case I will just set it I need it to be, let's say 100 pixels wide. It automatically adjusts the Height and then I hit OK and it draws out my shape. Pretty easy! So if you're looking for some places to find vector shapes online, my suggestion would be to do a Google search for "Photoshop Vector Shapes" and see what you come up with. You can also check out the Adobe Exchange. You can search Adobe's web site for that for the exact address.
At the Adobe Exchange people post different things, some of them paid, some of them free, which you can download. You can also check out a great web site at premiumpixels.com. That's www.premiumpixels.com, which is run by a guy named Orman Clark, who develops all types of free Photoshop stuff that you can download: shapes, colors, icon sets, all kinds of things that you can open up and load and use in your Photoshop designs completely for free. So, now that we've seen how to create vector shapes inside Photoshop, let's take that one step further and see how we can start to manipulate these by working with their fills and strokes.
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.