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.
New to Photoshop CS6 is the ability to control both the fill and the stroke values independently on your vector shapes that you've created. In this movie, I will be walking you through how to manipulate the fill and the stroke utilizing the new vector shape tools inside of Photoshop CS6. If you're utilizing an older version of Photoshop, like CS5 or earlier, you still have control over the fill color of your shapes independently, but you'll have to add strokes by utilizing layer styles. So I have a shape here in the middle of my document which is this light bulb shape and I also have several shapes surrounding it, which actually are comprised of one single shape layer.
If I turn them on and off, you can see they are all connected. So let's worry about the shape in the middle first and then we will worry about those shapes on the outside. So when I have this shape selected, I want to be able to change both the fill and stroke colors of the shape. In order to do that, I have that one of the shape tools selected in the toolbar and once I have that selected, you'll notice that I get the option in the options bar for Fill and Stroke. Again, this is completely new in Photoshop CS6. If I want to change the fill color--that's the color that is being represented right here-- I can drop this down and I can choose from any one of the color swatches that are available to me in Photoshop or I can simply mix my own by bringing up the color picker.
I get a list of recently used colors, which are going to be propagated by the various colors that I've been using throughout my design workflow. If I wanted to, I could also go here to this little icon and I could choose New Swatch, copy the fill. I could change the thumbnail listing, go into the presets, load various swatches, even go out and save my swatches for Exchange. This is basically the Swatches panel in a pop-up at the top of your screen. I will click away from that to close it, and now let's go ahead and select a color. So I will find a color somewhere in this list, maybe this.
There we go. And once I have selected that, I simply click the Fill icon again and it closes back up. For the Stroke, right now it's currently set to 3 points, but the Stroke Color is set to None, so it's not actually showing up. If I want to change that, I drop it down. Let's pick a darker shade of that same color. Now you see it automatically applies it for me. It's 3 points. I can then come here and I can adjust the size of this. So if I want to blow it up, I can increase it by dragging that to the right, decrease it by dragging it to the left.
I can also just type in a value. So let's say I wanted it to be 5 points. Type in 5 and hit Enter. I can also come here to the right and change whether or not it is a solid stroke or a dash or dotted stroke as well. If I do dashed, it dashes it like so. I'll attempt to dot it as well. You can change the alignment of the stroke to be either on the outside or the inside or aligned on the center. Totally up to you.
In this case I think I will go with the outside, and I will switch that back to a solid stroke. If I want to change the color of the stroke, remember, I just go back to here, pick a different color, and then click back again. And there you have it. Now let's focus on this shape up here. Since these shapes are all connected in one single vector layer, I control the fill and the stroke for all of them simultaneously. So let's change the fill color. Go back up. In this case I will change this to maybe a reddish-orange color and then for the stroke, let's change that to kind of a darker purple, maybe almost the same as that.
We will change the stroke options here, to have those on the outside; that creates some interesting looks, down through there. And we can even dash them if we wanted to. There we go. And I will collapse that back up. And if I want to change how big it is, I can shrink that down. I want it to kind of be a fine point stroke. There we go! So, since we have this ability to control these independently inside of Photoshop CS6, it really lends itself to some creative things that we can do.
It's also great because this is a vector object and the edits we are making to this are nondestructive. We could scale these up or down, change the colors as many times as we want, change the stroke pattern, the stroke alignment. Any of that stuff that we want to change at any given time we can, and we don't affect the overall integrity of the file or the clarity of the images that we are working on. That's the benefit of working with vectors and one of the great advantages of utilizing these new fill and stroke tools inside of Photoshop CS6.
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.