Picking website colors

This lesson is exclusive to members

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

0

Course info

49 lessons / 3 hours

Overview

Web design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

This course is for beginners. Aimed at people new to the world of web design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

In this video we're gonna look at using color. Now you can attack color from a couple of ways. You can, when you're drawing your boxes  and coloring things in, you can use this  little color panel here. And what you do is you drag this up and down to get the hue. When you move this little circle around by clicking  and dragging it to pick the color. And you'll notice that's in the front  here is my foreground color.

There it is down here as well. And if I go my type tool, can you see here? It'll use the same color. If I use my rectangle tool,  it'll use whatever's in that foreground color. 'cause 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 color.

To get a little bit more technical,  if you are working on a brand of a company  that has specific colors, you'll need to enter these. And you can do these by creating what's called a swatch  to do a swatch First of we'll go to color. And what we're gonna do is instead of dragging things  around, what we're gonna do is double click the swatch here  and we're gonna type it in. So if you've working with a brand that has existing colors,  you can type in the details that you know. So if you know the RGB color, you can type it in. Say it's zero, so it's 202 20.

It's gonna gimme this kinda light blue so I know exactly  that, that's the right color. You might also get this number down here next to the hash. This is the HEXA deone number. So you might get to type this in and it can be three  or six digits depending on what you're given. They'll both work. If you're given the CYKD details,  you can pop them in here as well.

Now if so, to pick this color,  say we've got this magic swatch that we need,  we can click this one that says Add to swatches. We'll give it a name. And let's call this one the  example blue. And what you'll notice is I'll click okay,  is in my swatches panel right down  the bottom of this list here. Now there is this color here called example blue. Okay, so that I can reuse over and over again.

Say if I switch to another color, 'cause I'm using it  and it's gone to this pink purpley color. If I get my type tool now  and I need to make some type that is blue,  I just gotta make sure that I click on blue  before I start typing, okay? 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 follow a real big guide  for colors and you're able to pick your own colors. You obviously can pick your own,  but sometimes you can get caught up not knowing which color  to pick, what works with what.

So what you can do is use something called Adobe Color. Now it's built into Photoshop. It's got a window down to extensions,  and it's this one called Adobe Color Themes. Open it up. You need to be connected to the net  and you need to be signed into your Creative Cloud account. Now, once you're in here,  and there's this one here called Explore for inspiration,  I like to go to this one that says most popular.

Okay? And this is the one that's being most used by people  through this little system here. So quite often, to the top here is a nice group  of five colors that you can use to lay out your website  as part of Doley color things 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 can do is you can  upload 'em to color things. I won't cover it in this tutorial, but you  Can upload your own swatches to this Adobe Color Themes. And what I've done for you is you type in BYOL,  you'll find the colors 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 said, add to my swatches. Okay? 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're using an earlier version of Photoshop,  this first part will work.

But this libraries option won't be, we're in 2015. This library option is a really great way to pick colors. So I'm gonna pop that in and we all should be  working off these colors. Now, obviously through this tutorial,  you can pick your own colors,  but if you wanna follow along exactly, that's the way  to do it.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025