Hey. Guys this, is a video on how to. Work. With color in learning, plan 2 for Photoshop, and the, graphics, for the web course and, what, I'm gonna be doing is I'm gonna be covering how to go through all, of these items here, inside. Photoshop, so. Let's go ahead and get started, using. A slightly different version, in the Photoshop but, it will work, for. The most part and I will point out any differences. That are between. This version and. The. Current. Version of Creative Cloud so. The first thing that we're doing is, we're. Working, in the tool bar here and. The. The. Tool swatch has on it a foreground. And a background color, the. Foreground, is your. Color, for, your text. So. Anytime you hear foreground, that's essentially, what you're working with is text, so. I'm going to change, my canvas, size here to something a little bit bigger, this. Is actually really small. So. I want to show you how that works you understand the differences, between the two. And. Why. Not I'll just go ahead and make this all consistent. Here. Okay. So let's go back to our foreground color so foreground, background background. Is the. Background. Foreground, is your text color so let, us select the text tool notice, how the text color is black, just. Put it in here this is some, text, and you, can see how they came up is black if. I change it to a different color. So. You can see, that. Your foreground color determines. Your. Text. Color. And. What. I'm doing here when I double-click the swatch, for, the foreground. Color I'm bringing up the color picker and you, can see up on top there it says foreground, color right here and then. I'm able to just pick a color, in. There at. Will. Now. If I want to set my foreground. And background color, black and white pretty simple double. Click so, usually. Your foreground will be black and, your. Background, color, will. Be white. Now. If, I go ahead and I type you're gonna see that it's gonna text. To be in black want, to use the, text. Tool. So. The next item here is we're gonna pick a variation, of blue. In the, color picker so I'm gonna just. I'll. Show the color. Panel. Here there's the color panel right there and. You can see an s foreground, and background color, around there as well so let's double click or just click that once and then. I can go on the slider here pick. The blue now, one thing to notice about the slider it should take you back to your days of. Science. Class and the. Colors of the spectrum and notice, how they start, when you get to the end of the spectrum they start over red.
Okay. And then orange, yellow. Green. Blue. And. Then. Violet. So ROYGBIV, red. Orange, yellow green blue violet just, like the rainbow that's where the spectrum. Comes from now, the, other thing that you have once you actually. Decide on a color is you can either give that color more white or. You can give that color more black depending, on how. You want it so this. Particular color here, up, in this corner I'm gonna get the truest, version, of that color down. Toward the bottom here it's gonna have more black in it. Or. Over, here on the left it's gonna have more white or down here, it's gonna have a mixture of the two so it depends on kind. Of what you want so there's. My blue that, I just picked in the color picker. Now. Web-safe. Colors we are not doing that anymore so that's probably. Not available in the new version the. Reason why is the, newer, monitors, that. Are part of laptops. And desktop. Computers no. Longer have to worry about website. Colors, this. Version of Photoshop does have web-safe colors still, but. We. Don't have to worry about it because the hardware of today, being, 2018. Is able to display. Colors. All, the colors prior, to that let's. Say back in the early, 2000s. Monitors. Didn't have the capability to display. Correctly. The, colors that were. Displayed. On the screen here so you, may have picked just, to give you an example you may have picked this color but. Then when you use the hexadecimal value, and you, code your. Website. With it it may not have displayed correctly on someone else's monitor, because the hardware, wasn't, capable of reading it so, you might be wondering well what is this number. Here for especially, if you have no. Skill. Set and web design as. Of yet so. Let. Me show you an example here, I. Am. Going to open up this page right here so it's on my desktop. Okay, so this is a page that I was working or using enough in a class the other day I. Want, to change this gray so, on web design if I want to change this gray to, let's, say this blue from Photoshop, you, have to copy this hexadecimal. Code, then. I would go into my code here and. I. Would apply that hexadecimal. Code. To. The part of the page that I want to change, in this case I'm saying I want to change the body which. Will change the entire background of the page. Now. I can refresh, there.
We Go by the way this is a really bad color used as a background. Because. It's too overpowering, but it does give you an idea of how. Colors, are rendered in, HTML. Which is the programming, language is a web. So. Color, picker is activated. So to activate the color picker pretty, simple we can double. Click here or, we. Can click right here another. Reason we use the color picker is, sometimes, we want to, probably. The main reason is we want to pull. A color out of a picture. So. I always like using expensive, sports, cars as my examples. So. I'm going to use a Ferrari here okay. All. Right this is a good example. So. I am going. To just take a print screen of it and, in. Photoshop, I'm gonna do command end. And. Command. N will open a new window and the new window will be size based on the size of my print screen on my clipboard so. I'm. Gonna paste that in there there is my. Picture. That I just did now I may. Want to pull, some. Red out of here and use. It as part of a title, on the picture so I can. Use the, eyedropper. Pick. Some red right there and now my foreground color is gonna be that color and. I'll just use my type tool to add some type on here. There. You go and, then of course I can make that bigger. And. Later. On we're gonna do this but I can add some. Effects. To it. So. Maybe I'd like to drop shadow. There. We go. Just, to make it look a little different. Here's. A little Italian, lesson, for you the word pista, is Road. In, Italian. I. Know. It's Road in Portuguese, might be the same in Spanish too, but that's what that means so. There's. Lots of uses for the color picker one of them is to pick, color from a picture to apply, it to other elements in the picture so, that we've got a scheme that will, match, all. Throughout, now, this red is probably not a good example I probably should pick the red it's a little lighter. Instead. Because, this one looks kind of dark especially with the drop shadow but it gives you an idea of what the color picker is used. For the. Color panel so you want you open. The color panel so here's, your panels here a lot of times what, can happen is you might close your panel by mistake that's. The case you go to window and just. Bring it back up and there it is you can actually take the panel as well and. Drag it off instead of having it grouped. With. Other panels, and. I can just dock it there again I don't want it back on there. Now. You're, also gonna be working with the swatch panel here now, the swatch, panel this is a really good one tool. To have because when. You work with a business. You. May, be given, a color. For, that business so, I'm gonna just give you guys an example, here. It's. A school that I used to work at and, I. Can tell you here that this color is, PMS. Six. Six. Two so, I'll. Go here and. I'll go to my color. Panel. And I, will type in. There's. No place to type this so I'm just gonna type. This here I'm gonna go extras, I'll go color libraries, and then. I will type in 662, there. Is the Pantone color now if you look you. Can see they, may have changed the variation a little bit but, that's the true Pantone, color for that, that. Color swatch so it, changed my type because it thinks that I want to change that that's. Okay the, reason why we use the color swatches is you, will add colors, from, the. Tool. Here from. The tool, panel to. The. Color. Swatch especially, if it's a color you're going to be using a lot. That. Way you don't have to always go back and add, it, so. To add a new color, to your swatch you, will just click the option, button here and go new swatch and then you would give it a name so I would say PMS. Six, six two and. Click, okay so if you want to edit a more than one swatch meaning. You want to get rid of more than one at a time the. Way you do it is you would click the option button here and you would go to preset, manager. Well, click, on one hold, the shift key and then just keep clicking and then you can delete, get, rid of them all the, main purpose of the swatch though is to contain, or keep colors that you're going to be using regularly.
In Your graphics. As you're working in Photoshop. So. We added the blue, to. Add a custom, green to, our swatch. We. Can just click, new. Swatch here. And. Notice that it automatically. Will add the. Whatever colors and the form around there. And, the next one is to color part, of your chosen graphic, and then, do it before and after so. Let's. See, here, I'll, do it I'll do an easy one for this we'll still use our Ferrari and, I'm actually gonna throw in that title, because I feel like I'm, wrecking. A really nice picture by doing that but. Just. For the sake of argument. I'm gonna do. Our. Example, I'm just gonna do this part right here I'm gonna do one of the stripes I'm, actually gonna use the pen tool to recolor this because it's, gonna be easier to make a selection you could use the. Magic. Wand but look at how much the magic wand selects I would. Rather use the pen tool because it's more precise so, I am going to zoom in so. I'm doing command, + or ctrl, + if you're on a Windows machine and. I'm going to click here and. I'm. Gonna click there and it draws a line and then. I'm going to click here and now. I am going to this part I'm going to click and hold and drag a, handle, out so that I can bend the line to the shape of what I'm trying to, to. Trace, I'm. Gonna hold the Alt key down because I need to delete one of these handles otherwise I have a, little. Tougher time controlling, how, my pen tool. Draws. Lines. So. I hold the Alt key click on, that dot. Click. Right here and. You're first learning how to do the pen tool it's actually a good idea, to. Draw. As many straight lines as you can even if you have to draw little lines, in. Between the, dots. But. What I'm doing here to draw this let me go back I click. And then I hold, I don't let go and then I pull out to my left and notice how he draws the, longer my handle is the more I can bend that line the shorter the, less, so. I'm just doing it enough that I can trace, around the shape and, I, think, I, might. Be able to get away with one more connection here so I'm gonna go to the starting point and I get a little 0 we're not a zero but a circle next to my cursor then. Click and drag. Okay. So I have successfully, drawn, a path, it's, called around that shape because I want to isolate just that shape to recolor it and. To. Make a selection out of that shape I'm going to. Use. The path, panel. Here and, I. Am going to click, the option button and go make selection, and then. To give the shape a, little. Bit of a buffer. Around. The edges so it has, a softer. Transition, from. The selection, to the picture I'm just gonna do one pixel for the feathering and there's. My selection, right there. So. Now what, I can do is I could actually take my paint. Bucket and fill that. Selection. But notice. That if I do that I'm still on the actual picture I actually like to create a layer before. I do that and then. Fill that, excuse. Me fill that layer and. Now. Ivory-colored. Part, of that picture. Okay. But. You. Can actually change, the. Type. Of layer to make the coloring look a little more realistic and I'm.
Gonna Do that but before I do that I'm gonna save this selection. And. I'm just gonna call this selection stripe. And. I'm gonna do. Command. D, to deselect. The. Other thing I want you to notice is that when you're greater than a hundred percent and you need to move around in the image here hold the shift key down and of the shift key by the space bar and that. Will let you and then click with your mouse and when I say click you're gonna click and hold and that will let you pan around on the image which. Is really nice now. If, I change layer two I'm gonna double click layer two here and I'm going to call it stripe, and. I. Am going to change I'm, renaming the layer and. Renaming. Layers is a good habit because. It. Makes working in your Photoshop document, easier and. Then I'm also gonna save this document so I'm gonna go file save as and save it as. Sorry. We'll. Talk more later about why it's important, to save your, artwork. As Photoshop as a Photoshop document. So. I'm gonna click the stripe layer again and I'm gonna change the layer to color. What. It does is it allows some, of the other. Elements, that are part of that stripe some, of the other parts. Like the hue and the saturation to, come through but, color is not a good one for this so let's try. Okay. Definitely not saturation. Let's try hue well. Color. Might be the best one and acid didn't pick a really good color so we can change that in a minute so let's change that to color let's. Pick a different color to, change that stripe, um. How. Would it look if. I, picked a really like dark blue. Okay. And now here I can click on that and it'll change it okay that kind of makes it purple, that's. Actually a good example of how the. Change. In the layer type makes the coloring look better. So. Let, me zoom out I'm doing command minus, to. Zoom. Out I like, that I think that'll I mean it's not the best but it does illustrate the, purpose of, selecting. An element on a photo and then. Creating. Another layer to recolor, part of it I would rather recolor, part of it with a layer like this than I would the actual, photo because I can always turn the layer off and then. I can save out my image as a JPEG and. With. Or without the, part that I'm recoloring.
So Turn. It back on because this does give you an idea of the contrast, between the two the, before and the after so you can see the difference, another. Way to do a before, and after if. Specially, if you recolored, an entire image, would. Be to, simply. Make. The. Change. The canvas size so, what, I would do is, I. Would go to image, and then canvas size, and. I would make my canvas, size twice as wide so, in this case it would be three thought and pixels, and. Notice. Now, because. The background is green how. The background here is green I would, do command, o or ctrl. 0 to fit into window and then. I would take my. Image. That. I. Have. And, I. Would grab. The move tool and I would move it over now. Notice that when I did that my. Layer. That. I used to recolor also moved so, what I would do is I would hold the shift key down and I. Would collect select that layer and make, sure the move tool selected and, then. I would move them both over like this. Ok, then. I would, right, click on my Ferrari layer or my photo, and. I would duplicate, that layer and. Now. That layer is right on top of each other and, I would just move it over like this and. Then. I'm able to have my before, in my. After so. If. You do it the method using. The method that I showed, with. Recoloring. The layer and then changing the layer type. Performing. This operation at, the end of your file will. Work well if. You only recolor, the actual, photo. Without. An additional layer then. You. Would want to do this at the beginning of your. Process. Because, otherwise. You have to find another copy, of the picture before, you edit it and paste. It in here so. It's real easy to see my before and after now. Anyways. I hope you found this tutorial, useful, if. You have any questions feel free to email me otherwise, we'll see you in the next, let me plan thanks.
2018-09-07