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 creating shapes and objects inside of Photoshop you have two basic choices when it comes to creating your artwork: to either create vector-based artwork or work in terms of pixels. The first of which, vector shapes, enable you to create what I call flexible artwork, which is able to be scaled and manipulated in ways that pixel art just can't handle. In this movie, I'll be walking you through the differences between raster and vector shapes and objects inside of Photoshop. I've got this file open and on the left-hand side I have a vector shape. The fact that it is a vector shape means that I can then scale and manipulate it without losing the quality of the overall shape.
So for instance, if I wanted to free transform this shape by using Command+T or Ctrl+T on my keyboard, I could shrink it way down and hit Enter to commit and then also Command+T or Ctrl+T and blow it right back up even larger than it was before, and the edges still remain crisp and clean no matter what. Now, watch what happens when I do the same to the pixel-based shape. I'll temporarily hide the vector shape, and select the Pixel shape here in my layers. I'll use Command+T or Ctrl+T to bring up Free Transform and then I'll shrink this down.
Hit Return to commit. You can see now that the edges look fairly clean at this smaller size. That's because objects that are downsized maintain their quality. However, watch what happens when I blow it up. Command+T or Ctrl+T and blow it up. Hit Enter and I'll zoom in a little bit so you can see. The edges are becoming just a little pixelated and not exactly as clean as I would like them to be. It's probably not as evident here on a square as it might be with a circle. So let me undo and let's take a look at the Elliptical Marquee tool.
I'll go ahead now and I'll select my Background layer, grab the Elliptical Marquee tool, and I'll just hold down Shift+Click and drag out a circle, something like this. It doesn't matter how big. Then I'll create a new layer and I'll fill this layer with the same color that I have here. So I'll sample this color using my Eyedropper tool, and then I'll fill the circle with Option+Delete or Alt+Backspace on the keyboard. Switch to my Move tool, hit Command+D or Ctrl+D to deselect.
Now you can already see, since I'm zoomed in, that I'm getting some pixelated edges around the outside, whereas if I had drawn this with a vector tool those would be nice and clean. Let's zoom out to 100% and I'll try to scale this up. As I drag it up and hit Enter, notice how fuzzy the edges are. Not good at all. But let's say that I switch to the Vector Ellipse tool. I'll draw out the same circle, and then I'll use Command+T or Ctrl+T and scale it up.
Hit Enter to commit. When I zoom in on both of these you're going to notice that the edges of the vector shape are much more clean than that of the pixel-based shape. So now let me go back to File > Revert. That'll revert me back to my original document. And so now you can see the differences between a vector shape and a pixel shape inside of Photoshop. Creating vector shapes really enables you to create flexible artwork which is able to be scaled across multiple screens and devices and multiple web browsers as well.
So if you have the opportunity, always use vector artwork when possible. Occasionally, you will have to use pixel- based artwork, and that's okay, especially when dealing with photographs. But just be careful when you're scaling and resizing. Remember, going down always maintains the quality; going up usually destroys it.
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.