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 working with color on the web you have to understand that it is represented in a completely different way that you're probably not used to. If you are a traditional designer, chances are you're used to dealing with color in terms of standard RGB and CMYK values, wherein you have a numerical value assigned to a various color channel indicating how much of that color is represented in the overall appearance. On the web we have another system of color known as hexadecimal or hex codes. Hex color codes consist of six values, each of which refers to an amount of color that is present in the overall appearance.
In the example that I'm showing you here onscreen I'm showing you the hex code for black, which is 000000. The number sign at the beginning of a hex code indicates your web browser that there is color being defined. You don't have to worry about that in Photoshop necessarily, but you will have to remember that if you are typing out HTML or CSS. Each color in the RGB spectrum is represented here. We have red, green, and blue. Directly underneath that, the hexadecimal code indicates there is no red, no green, and no blue, thus known of those values are present, and so there is no color, meaning all black.
Zero is the lowest number that you can have in a hexadecimal code, and the letter F is the highest value that you can have. The full spectrum ranges anywhere from 0 to 9 and the letter A through the letter F. Don't worry, memorizing color codes like this is next to impossible. You can learn some of the basic ones which will help you get faster in your workflow and that's want I am going to walk you through now. So let's go ahead and jump in another color picker. I'll come down here and click on the foreground color to open up my color picker and I'll move it into the center so that we can see the colors that we create.
Now we have our traditional HSB and RGB and even CMYK values in here. I'm not going to worry about any of those. Towards the bottom-left we have this number sign, and then of course our hexadecimal code, six digits. I'm going to remove that simply by selecting it and backspacing over it, and now let's type in some of the values. I want to do a red color. Well, I need to make sure that the red values are at their highest point. So I'll type in "FF," and then I'll type in "00" because I don't want any green, and then I'll type in "00" because there is no blue.
And so therefore I have full red color, because I have a full value of red at the front, no green, and no blue. If I wanted to do all green, I would simply change the first two Fs to 0s, and then the middle 0s I would change to Fs, like so. If I change those to 0 and then change the last two to F, I get full blue. I can also do things in the middle, like a neutral gray for instance. If I type in all 3s, I get a dark gray. If I type in a higher number, like let's say all 6s, I get a lighter gray.
And if I go all the way up to 9, I get an even lighter gray. Same holds true for black and white. All 0s gets me black. All Fs gets me white. So as I said before, you're not going to be able to memorize all of the colors that you're going to need throughout your workflow, but you can memorize some of these basic ones like I've shown you here to make it a little bit easier on yourself. The great part about Photoshop is you don't have to remember these codes at all if you don't want to. You can simply find a color, like let's say, I wanted to do some sort of orange color, and I can move right over it like that, and then right here at the bottom Photoshop gives me the hex code.
So I could then take that hex code, copy and paste it into my CSS or HTML document or send that off to a web developer to say, yes, I want this color orange for whatever it is they might be going coding for me. Once you're finished inside of this box, simply hit OK. That color that you've then mixed become your foreground color and you can begin using that. As I said, you won't be able to memorize all of these codes, but at least now you know how to read them and how to find them if and when you do need them, whether that'd be in Photoshop or while writing your own HTML and CSS.
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.