Picking website colors

In this video we’re going to look at using colour. Now you can attack colour from a couple of different ways. You can, when you’re drawing your boxes, and colouring things in, you can use this little colour panel here, and what you do is you drag this up and down to get the hue, and you move this little circle around by clicking and dragging it to pick the colour, and you’ll notice this. In the front here is the foreground colour, - there it is down here as well - and if I get my type tool, can you see here, it’ll use this same colour.

If I use my rectangle tool, it’ll use whatever is in that foreground colour because watch this, I can change it, and all of these things will change at the same time, and I can start drawing things and making colour. To get a little bit more technical, if you are working on a brand of a company that has specific colours, you’ll need to enter these, and you can do this by creating what is called a swatch. First of all, go to colour, and what we’re going to do, instead of dragging things around, what we’re going to do is double click this swatch here, and we’re going to type it in. So if you are working with a brand that has existing colours you can type in the details that you know.

So if you know the RGB colour, you can type it in - say 0, say 200 and 220. It’s going to give me this colour Light Blue, so I know exactly that is the right colour.

You might also get this number down here, next to the hash. This is the hexadecimal number, so you might get to type this in, and it can be 3 or 6 digits, depending on what you’re given, they’ll both work. If you’re given the MYK details you can pop them in here as well.

Now if - so to pick this colour, say we’ve got this magic swatch that we need, we can click this one that says Pad to swatches. We give it a name, and let’s call this one “The Example Blue”. What you’ll notice is, I click OK, it is in my swatches panel right down the bottom of this list here, now there is this colour called Example Blue. OK so that I can reuse it over and over again. Say if I switch to another colour because I’m using it, it’s gone to this pink-purpley colour.

If I get my type tool now, and I need to make some type that is blue, I’ve just got to make sure that I click on blue before I start typing. OK, and it will change it.

If I need to change it afterwards, I can select the type, and then pick any swatch in here, and it will change, once I go back to the move tool. Great.

For the people that aren’t following a real big guide for colours, you can obviously pick your own, but sometimes you can get caught up in not knowing what colours to pick, what works with what, so what you can do is use something called Adobe Colour. Now it’s built into Photoshop, let’s go to window, down to extensions, and it’s this one called Adobe Colour Themes. Open it up, You need to be connected to the net, and you need to be signed into your credit cloud account.

No once you’e in here, there this one called explore. For inspiration I like to go to this one that says most popular. This is the one that has been most used by people through this little system here. So quite often, - to the top here is a nice group of 5 colours that you can use to layout your website.

As part of Adobe colour themes, you can go and upload your own swatches as well. Say, if you’ve created a corporate theme, and you want to share it with other designers throughout the business, what you ca do is you can upload them colour themes. I won’t cover it in this tutorial, but you can upload your own swatches to this Adobe Colour Themes. And what I have done for you is, you type in BYOL, hit enter, you’ll find the colours that I’m using in this tutorial that you can download and use.

Now to download them, and add them to your swatches, - watch this - where it says actions here, drop this down and see - add to my swatches - . OK and you’ll see them they all appeared just in the bottom here of my swatches panel. What you’ll also see is , can you see they’ve been added to my library here. If you are using and earlier version of photoshop, this first part will work, but this libraries option won’t. We’re in 2015, and this library option is a really great way to pick colours. So I’m going to pop that in, and we all should be working off these colours now. Obviously through this tutorial you can pick your own colours, but if you want to follow along exactly, that’s the way to do it