Monday, March 26, 2012

Pretty. Photoshop Basics: colour

I have been wanting to put some of my real world skills into play on this blog; sometimes I feel it is all clothes and makeup, but I can do other things too I promise! When I start teaching, which is hopefully very soon, my area of specialisation is design, specifically textiles and graphic design. I absolutely love teaching these subjects because for one I am pretty obsessed with both of them, and secondly, students tend to have a bit more fun in hands on subjects like these.

I really want to start putting more of my knowledge into what goes on here, so after a few requests I have decided to do a series of graphic design basics tutorials or information posts for photoshop. I hope you enjoy them and possibly find them useful; leave a comment below if you have a specific area of photoshop you want me to cover, otherwise I will just go through the basics that I would teach my students.

(Or color for all those Americans out there!)

In Photoshop there are a few main things you need to be aware of for choosing and controlling colour:
  • Foreground/Background colour: these are found in the bottom left hand corner. They basically tell us what two colours we currently have selected for use.
  • The colour picker: this spiffy tool can be accessed by clicking on either the background or foreground colour swatches. From here we can either manually enter the 'colour code' of a specific colour or find the colour we want by clicking around the large coloured box and the rainbow colour bar until we have the one we want. 
  • Colour Swatches: This panel is found on the top left hand corner; if you don't see it you need to go to the 'window' menu and make sure 'swatches' is ticked. To be honest I don't use swatches all that often as I have my own system for storing colours I like. Here you are able to save colours you love or use often for easy access. If you hover over empty space within the panel a paint bucket should appear allowing you to click and 'dump' the colour and give it a specific name. 
  • Eye Dropper tool: this is my favourite of all the colour tools; it is immensely useful. This little baby allows you to click anywhere on any image open in photoshop and 'grab' the colours within that image so that you can use them. I am always finding images on the web where the colours just work or photos with great combinations, so I save them, bring them into photoshop and use the eye dropper tool to select the colours for my own designs. I have a special photoshop file where I store the original images with the colours I liked; whenever I need some inspiration I open this file and instantly it gives me ideas. Yes, I am a colour nerd. 

Making colours work:
We all know there are some colours that look fantastic together and some that really don't, but learning what works for you and your needs when it comes to graphic design (and if you are reading this, probably for your blog design) can be tricky and frustrating. Without going into two much detail about colour or design theory (because it can be a bit dull for some) I want to share a few key tips for selecting colours:

  • Colour wheels are very useful. Try to have one around you can look at. If colour is not your thing then sticking to complementary colours (those directly opposite one another on the wheel) or analogous colours (those near each other) may serve you well. 
  • Opposite colours create contrast and vibrance, colours close to each other can create harmony.
  • Colours are often described in terms of their hue (their relationship to red, green, yellow and blue), saturation (Intensity) and tonal value (level of black and white present in the colour)
  • Contrast can be created by using contrasting tonal values (i.e a dark colour with a much lighter one) and harmony can be created through the use of colours with similar tonal values (e.g. the current pastels trend does this well)
  • Online colour scheme creators such as Kuler can be so helpful when just starting out in graphic design.
  • Pantone is also a great resource for designers as they predict colour trends and tend to be industry leaders. 
Putting it into practice:
To put some of your new found colour skills to use, I am going to walk you through a super simple blog layout that will jazz up any outfit post. 
Maria from Fashion Fazer has graciously let me use one of her amazing photos.  

Fashion Fazer Layout
//Via HERE//

The best way to share this tutorial with you all was a screencast (my first ever eek!) so hopefully it is easy for you to follow. Sorry about the slight interruption mid way through, my computer decided to annoy me. Also if you listen carefully, you might catch my cat wingeing in the background.You can play along at home with the photoshop file; download HERE. I do ask, however, that you do not use the source image without crediting.

Next in this series will be Photoshop layers.

xx Samantha Alice

twitter Facebook bloglovin Image Map


  1. Haha awesome accent! This is helpful I have no clue how to use Photo shop. Need a free copy lol.

    1. haha...I bet I sound very Australian! I am going to do some of the tutorials with the equivalent tools etc for Gimp which is a free photoshop like program so you might get more out of those! x

  2. This is amazing! I've always tried watching videos on how to do just the basics of using PS and you explain it so well. And you go slow enough so it's easy to follow. I'm definitely going to try something like this as I like to create our families Christmas cards and invites. I'm so jealous of your design skills! Thanks for this great video! <3


  3. I really loved this tutorial, thanks for posting! Looking forward to the next one.

    1. Thanks so much, appreciate the feedback! And the next one is going to be up tomorrow x

  4. I love tutorials! Ahh, Photoshop is such an addiction I love seeing how others manipulate it, as well.

    1. I am completely addicted to Photoshop Emily, it is a problem! x

  5. Such a useful tutorial, thanks!

  6. awesome posting! keep up this cool stuff
    my web page - rgv

  7. I save it as a ".png" without using any photoshop program. I enjoy playing with Photoshop. Are you going to use some of your own artwork?


Love it? Comments make me happy so don't be shy. And since I try to reply to all my comments, remember to click 'subscribe by email' to get updates on my replies!


Related Posts Plugin for WordPress, Blogger...