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

 

Rebranding tractorgirl: Part 3 – colours, fonts & images

Rebranding tractorgirl

Finally, we’re up to the juicy bit – colours, fonts and images… woohooo!!
But of course you can’t get to this point unless you have your foundations in place first. Don’t short-change yourself – skimping on the groundwork means you never have a solid base to refer back to when you get caught up in the next shiny thing (because there’s always a next shiny thing!). So put in the groundwork and the rest becomes simple.

I know this video is a bit longer,  and that’s because there’s LOTS to cover – how to manipulate colour using value and saturation, and how that impacts on your audience’s perception; whether or not to use your own images on your website, and what to look for when choosing stock photos, the different types of fonts and how each of them is perceived, AND my very best tip to choosing between fonts when you really can’t decide.

Are you ready? Let’s go.

 

 

I would LOVE you to join in the fun of the comp and have a chance to win free coaching with me, copies of my e-book, and more!! I’ll be sending deets out again in the next newsletter in a couple of days – and entries close 29th Feb AND THAT’S REAL SOON.

AND there’s not many entries so far, so your chances are excellent. You can join in here.

 

*

Have you got any questions about your colours? Found a great palette you’d like to share? Same goes for fonts! Leave a comment and share it – the more we share, the more everyone learns, and that’s a good thing. I’d LOVE to see what everyone’s up to.

Julie xx

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 2)

perfect colour 2

 

What was your favourite colour as a kid? Mine was always yellow – I couldn’t finish colouring in a picture unless it had some yellow in it somewhere; it always just looked dull. These days, I’m much more open to all the colour combinations; each palette has its own particular mood to convey (but notice I’ve still got yellow in my branding, haha).

Carrying on from last week’s post (here), we continue looking at the multitude of ways you can use to come up with the perfect palette for YOUR brand.

You can make your own palette from scratch in various ways. As noted in the last post,  ColourLovers.com is a great place to go and play with colour. They’ve got a great online community there too, so you can share the palettes you’ve made, AS WELL AS apply them to patterns … also made by you! (and others. Go on, it’s totally addictive.)

HTMLcolorcodes.com  is a modern take on colour pickers, and it’s a bit geeky if that’s your thing. It provides you with the ability to make up you own palettes from scratch, and gives you auto options to choose more colours by changing the criteria (e.g. complementary, triadic, tetradic, etc), so I do feel it comes from a designer’s perspective, and assumes that you already have some knowledge of colour. Having said that, it does include some very nice tools, colour charts, and tutorials on using colour within HTML, CSS, and SCSS.

 

Extracting colour from a photo

One of my very favourite methods of getting a great palette is to find an image that really, really nails who and what your brand is. (It doesn’t matter if it’s not your image – you’re just using it for inspiration, and this exercise is a totally private one.) When you extract the colours from an image like that, it should be pretty darn close to the perfect palette for you. For example, if your biz personality is bright and fun, and you’ve got an image of a fairground on a sunny day, chances are you’ll find the colours that you need right there.

If it’s already a digital image, great. If not, get it onto your screen somehow. Next, go to any one of the many colour picker sites online – such as pictaculous.com, cssdrive.com, Lokesh Dhakar’s color-thief or palettefx.com. However, my fave picker is Adobe’s, at color.adobe.com and you’ll see why in a minute. (ALL of these generators will provide you with at least the hex-code of your colour – this is the 6-digit identifying number (denoted by the hash key #) so that you’ll always get EXACTLY the same colour every time you use it.)

Start by loading up your photo (on color.adobe, the link to load is at the bottom of the page), and let the generator do its thing. Now in Adobe, the big advantage is that once you’ve loaded up the image, it will show you the points it’s used for sampling – and you can move them around to tweak your palette. Alternatively, you can change the ‘mood’ from the drop-down menu on the left. Once you’re happy, you can either save it (if you’re an Adobe member), or click on the little colour-wheel icon on the right and it will take you to the colour wheel, where you can tweak some more, or just find the hex codes for the colours you’ve got. Easy peasy!

 

colourpicker1

using the adobe colour picker

 

colourpicker3

using the adobe colour picker

 

Some basic colour theory

There is OOOODLES of stuff about the theory of colour out there, and really, you don’t need to know anything beyond the basics.

The technical terms you will find most helpful are these –

* Hue is pure colour, and includes all the colours in the spectrum (red, green, blue, etc).

* Value is to do with how dark and light it is – from almost white to almost black.

* Saturation is to do with how pure the colour is – it runs in a scale from the purest colour, through to almost entirely grey. (Consider also, that each hue has a different value – red is much darker than yellow, and that is why when you change the saturation on each of those colours, a different grey value will result.)

 

 

 

 

yellow saturationred saturation

 

 

Start with the colour wheel, you The most basic method of choosing colours is to start by looking at the hue i.e. pure colour), and the relationships that you can form around the colour wheel.

 

colourwheel 500px

 

One method of choosing colour is to use balance. Pick two colours directly opposite, you’ve got balance. Make a symmetrical triangle, and you’ve got balance. Make a square or rectangle, and you’ve got balance. Tweak those hues with value and saturation, and you’ll still have balance.

 

Another method is to choose colours next to each other on the wheel – because they’ve got a hue in common, they’ll look good together. Again, tweak those hues with value and saturation, and you’ve got yourself a useful palette.

analogous

 

As noted, there are TONS of ways you can come up with colour; it entirely depends on your brand and what mood you want to convey, that fits your business personality.

 

A last word on choosing colours for branding.

A very important thing to remember when you’re choosing colours for your palette is that these colours will be used for all sorts of things – text, backgrounds, borders on images, highlights, buttons….. and so much more. SO you’ll need to make sure it’s a useful palette. Ensure you include at least one dark colour, and one light colour, and that there is enough contrast between the different combinations.

OK, have fun!

*

Oh, and p.s., I would LOVE you to tell me what your fave colour was as a kid, and if it’s still your fave now. Do you use it in your biz brand? Or would you consider it for your brand? Leave me a comment below, and tell me what your biz is, too! 

 

Colour-junkie Julie x

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.}