How-to use the Adobe colour picker to choose a colour palette

adobe colour picker

Helloooo! Here’s a fresh video for you today – it’s one of my favourite colour-picking tools that I share with my clients. There are lots of colour picking programs around, but I like sharing the Adobe colour picker because it’s easy to use and has some useful features – you can extract colour from your favourite image, you can tweak sample points, and you can save your palettes. (You can also share your favourite palettes with the Adobe community, and you can also explore other people’s palettes too.)

 

Enjoy!
Julie x

 

How to Color Patterns in Illustrator

(How to Color Patterns in Illustrator: Guest post by Sew Heidi.
We’ve been working on colour this month, so I thought this would be a fitting one to finish with! Heidi always writes such great posts, and this is no exception. Enjoy.)

I’ve watched many designers fight through the process of recoloring seamless repeating patterns. They’ll drag the pattern out of the swatch panel, edit it, and then drag it back in. Are you guilty of recoloring patterns this way? If so, you’re not alone – but I will help you break this bad habit, and show you a much quicker, easier and more intuitive way to do this. Ready? Let’s go!

What You’ll Need:

Note: This tutorial also applies to recoloring artwork / objects that are not or do not contain repeating patterns, but the example below will be done with a pattern.

Step 1: Access Illustrator’s Live Color Feature

Select an instance of your pattern in your file and choose Edit > Edit Colors > Recolor Artwork (1) or click on the color wheel icon (2) in your control bar.
illustrator_color_patterns_step1

Step 2 (for versions AI CC 2015 and newer – if you’re on AI CC 2014 and earlier, skip to Step 3): Reset Colors

In the CC 2015 update, Adobe released a new Live Color feature that automatically recolors the artwork based on recently used colors. I personally dislike this new feature and haven’t been able to find a way to turn it off (perhaps you will like it in which case you’re in luck!).  If upon launching Live Color, your artwork automatically changes colors, you may want to reset to the original colors. Do this by clicking the eye dropper icon (1) towards the upper right to “Get colors from selected art”.
illustrator_color_patterns_step2

Once you click this, the original colors will be restored.
illustrator_color_patterns_step2-1

Step 3: Using the Live Color Interface

Upon launching Live Color, you will see 2 lists of colors: Current Colors (1) in the left column and New Colors (2) in the right column. The Current column contains the colors that your artwork is currently made up of, and the New column contains the colors that you will be changing your artwork to.
illustrator_color_patterns_step3-3

Step 4: Swapping Colors

If you want to swap color positions, it’s as simple as dragging and dropping colors over each other in the New column. In the below example, I’ve taken the middle caramel color and dragged it onto the dark brown color in the top position (1).
illustrator_color_patterns_step3-1.1You can see now that the color positions in the pattern have been swapped (2) and the New column reflects the new color positions (3).
illustrator_color_patterns_step3-1.2

Step 5: Merging / Overwriting Colors

If you have too many colors in your artwork and you want to merge them, you can drag the colors from the Current column into the New column (1).
illustrator_color_patterns_step3-2.1
You will now see in your artwork (2) and in the New column (3) that the caramel color has over written the dark brown color.
illustrator_color_patterns_step3-2.2

Step 6: Choosing Brand New Colors

You may want to completely change the colors of your artwork, which is easy to do! Double click on the color in the New column that you want to change (1). This will launch the Color Picker (2) where you can select any color you want. If you want to choose a specific color from your Color Swatches, click Color Swatches (3).
illustrator_color_patterns_step3-3.1Your Color Swatches are now loaded (4) (which may just be the default AI swatches unless you’ve defined custom swatches). Note: only solid color swatches will load here, you will not see pattern or gradient swatches. If you want to switch back to the Color Picker, click Color Models (5).
illustrator_color_patterns_step3-3.2Once you’ve selected new colors for some or all of the color positions, your artwork should show the recolored results (6) and the New column should reflect the new colors you’ve chosen (7).
illustrator_color_patterns_step3-3.3

Step 7: Randomly Change Color Order

This is one of my favorite features in Live Color as it will often give you color results that you may not have thought of on your own. With only 3 colors, the results aren’t super exciting, but if your artwork has more colors, you can click this button many times to quickly get a ton of different color options. Simply click the “Randomly change color order” button (1) to watch the colors change in the artwork.
illustrator_color_patterns_step7
Below you can see 2 different colorways (2 & 3) I’ve quickly created using this button.
illustrator_color_patterns_step7-1

Step 8: Accepting the New Colors

Once your artwork is recolored and you’re ready to accept the changes, you are almost ready to hit the OK button. Before you do this however, make sure that the check box for Recolor Art in the bottom left corner IS checked (1). If this is not checked, the artwork will not actually be recolored and you will lose all your changes. Once you have double checked that this box is checked, you can hit OK (2)!
illustrator_color_patterns_step8
Once you’ve hit OK, have a look at your swatches panel. You will now notice, you have the original swatch plus the newly colored swatch (3). Every time you create a new colorway of your pattern using Live Color, it will automatically create a new swatch instance for you – so cool!
illustrator_color_patterns_step8-2

Not Just for Patterns!

Remember, the Live Color feature is not just for patterns! You can use it to recolor any artwork in Illustrator whether it’s solid blocks of color or solid blocks of color and patterns. It also will recolor both strokes and fills. Simply select the artwork, choose Edit > Edit Colors > Recolor Artwork and swap, overwrite or choose completely new colors. Be mindful that when using Live Color for artwork other than patterns, you may want to create a copy of the artwork first (1). Unlike how AI creates a new pattern swatch of your new colorway, it will not automatically create a new instance of your artwork.
illustrator_color_patterns_not_just_for_patterns

And Last But Not Least, the Live Color Disclaimer: There is No Undo!

I get asked all the time and see designers trying to do it all the time: cmd/ctrl + Z while in Live Color. Unfortunately there is no “Edit > Undo” within Live Color. This is true both while you are inside the interface and after you’ve hit “OK”. If you are in the Live Color interface and define a new color using the Color Picker, then accidentally overwrite it, there’s no way to get it back.  Additionally, if you hit OK and then want to jump back one step into the Live Color interface to modify some of your changes, there is no way to do this. Choosing Edit > Undo will simply change your pattern back to the original colors.

This disclaimer aside, Live Color is by far the fastest, easiest and most efficient ways to color patterns and other artwork in Illustrator. Give it a try and I promise, you’ll never go back to your old ways!

*

Heidi B describes herself as the “Fashion Tech Evangelista”, and has been working with and teaching Illustrator for more than 15 years. If you get the impression she knows her stuff, you’d be right – and she’s got some pretty cool tutorials on her website to prove it. You can find her at SewHeidi.com.

How to choose the perfect colours for your brand (Part 1)

How to choose the perfect colours for your brand

the perfect colour

 

I’ve loved colour forever. I used to spend hours dressing up my barbie dolls in fabulous costumes imagined out of scraps from my mother’s sewing. I wouldn’t make up stories for the dolls; of them going shopping, or being school teachers, or of being whisked away to a fabulous ball by a handsome stranger. No; I would simply sit there and try pattern against pattern, colour against colour. For hours.

Which all just goes to give you an idea of how crippled I was when I was trying to choose colours for my site. OMG, what the hell do I choose? I love …. everything….  .

More on me later.

 

You know, colour is just about THE biggest identifying feature people see when they first look at something, and can be a major consideration when they purchase something (acid green two piece suit, anyone?). And although I’m not suggesting that people won’t visit your site/read your blog because it’s not their favourite shade of blue, it’s still a pretty important factor in conveying the right mood – one that is not only expressive of your brand’s values and attitudes, but more importantly, one that’s in line with your audience’s expectations.

 

The Meanings of Colours

Now before I go too much further, I want to talk a bit about the meanings of colours. I would like to emphasise that colours have a wide range of meanings which vary from culture to culture and also with context, so don’t get bogged down in them. For instance, in Western cultures, red sometimes means danger, but in other contexts it is associated with Christmas. In China, it often symbolises good fortune and happiness, while in other cultures red is the symbol of mourning.

Here’s some very broad generalisations that may be used when it comes to branding (but don’t take them as gospel).

Blues and darker colours are often perceived at trustworthy and solid (think banks).

Blues and greens are seen as calming, especially pastel hues of mint and aqua.

Greens and browns are seen as earthy and natural.

Red especially, but also orange and yellow are often thought of as active colours.

Tertiary colours such as magenta (red-violet) and lime (yellow-green) are usually thought of as more youthful, fun colours.

I’ll stop there, because as I said these are broad generalisations, and in each case it also depends on how vivid the colour is, how light or dark it is, and what other colours it’s used with. (I’ll go over a bit of colour-combining basics for websites in the next post too.)

 

Stop crippling yourself and start choosing

How do YOU feel about colour? Same as me – like you’re stuck when it comes to choosing colours for your brand, because everything looks wonderful? Or, you find a great palette and love the colours, but it’s just not pinpointing the mood you’re looking for? Or, maybe you think you have very little confidence with colour, and just feel plain scared?

You know, it really doesn’t matter why you have difficulties choosing colour – the end result is the same; and that is that you can’t settle on anything. Fortunately, there’s a solution (or even two or three).

 

Work with your business personality

It helps if you have a clear vision of the mood/personality of your brand (so you know what mood you’re going to project). If you don’t, than have a stab at this – write a list of half a dozen words or more personality traits that you would like your brand to express. (Better still, read this article in order to get a grip on your business personality.) You can start with masculine or feminine, young or mature, then get a bit more specific with descriptors such as dreamy, modern, dramatic, or sentimental.

Next, keep those words in mind and go searching through places like ColourLovers.com or Design Seeds, and try and match your mood words to the colour palette you’ve chosen. These places have thousands of pre-made palettes that you can use for anything you want. Each palette lists the hex codes for each colour, so you can recreate them for yourself.

I especially like the Design Seeds palettes – although Jessica tends to create palettes based around gentle images of flowers, nature, and weathered textures, she has a great eye for extracting the colour essence out of a picture. (Each image is linked to the original post if you’d like to find out colour codes).

 

design seeds - flora hues

design seeds – flora hues

 

design seeds - color heaven

design seeds – color heaven

 

design seeds - color set

design seeds – color set

 

I know not everyone is as skilled as Jessica! Don’t fret – there are other ways you can find your own palette too; I’ll get to them in the next post.

So for now, I want you to go exploring. If you’ve found a palette you LOVE and want to show it off, leave a link in the comments. If you’d like suggestions for your website/blog/shop, leave a link and we can all have a look and make suggestions!

Oh, and my blog’s palette? Yes, this blog’s been through a few renovations and reincarnations. Fortunately, I’ve finally settled on something. Hells, it’s a rainbow of sorts – I just can’t help myself.

 

tractorgirl proportional palette

 

J x

 

*

{edit: You can read Part 2 on choosing the perfect colours here.}