Applying colour in Google Web Designer
I want this next blog to be not only for my own benefit but for others as well. Because, for the month and a half that I have raved and cheer-lead for this great authoring program, there is one thing that before now, 3:30pm on the 18th of November that I hadn’t quite got my head around; using the colour tools.
Because there is a lot of them in this application. Don’t get me wrong, I can apply colour to shapes and elements and the tools are easy enough to use. But as I open new documents and point and click to the various tools, I find myself asking the question, “which is the right tool to use?” “Which one and where”?
- A colour icon for the text tool for changing text colour of a font.
- A colour icon for changing background colour of various elements
- Gradient colouring for elements
- A separate one for changing the <div> background in which GWD has created for the text to live in.
- And more.
How on God’s earth do you keep track of them and know which is the right one to use at the right time?
The Text Tool
I’ll start with what I think is the easiest to understand to begin with. Select the icon at (1) change the colour of your text with the easy tool at the top where you’ll find (2). That is solely for changing text colour and nothing else!!
So the colour for the text tag is reasonably straight forward. A nice little icon with a basic colour picker which changes the colour of your text via CSS. Great!
The next Icon I want to investigate is this… The Tag tool.
The Tag Tool
The tag tool presents a selection of icons that represent <Div> elements that you can add to the stage. They are a list of preset settings for instances of the tag tool that you are going to add to the stage. If you will, the DNA, the building blocks of the work you’re about to do. The colour icon you want for this is here is right there at the top as an option for a fill colour.
Below is an image of the colour box your presented with. What you see is a colour wheel, but there are other options you can select if you prefer.
From right to left the options are.
- Colour Wheel
- Colour Palette
- No Colour at all
But I think the trick to remember is when you using colour with the Tag tool you not making any changes to any elements already on the stage, but to the next element you create in the future. However you have to remember that this is only for objects created with the tag tool. New elements with the Text tool are not affected. More on that in a moment.
Now that we are clear on this, the next thing to do is to investigate colour application in GWD as found in the properties panels.
Currently there are 2 places where you a affect colour on an element, already placed on the stage; The Colour panel and the properties panel.
But if you don’t I suppose it can be quite daunting. Suppose you have an element selected on the stage. The colour settings, the sliders, the values, the colour indicators will change automatically according to what the default colours are for that element. This could be either GWD’s completely white default, before you’ve done anything with the TAG tool, or your own colours that you applied to an existing element on the stage. They are all independent of each other which means you have completely free reign to change any of the colours further.
To further clarify this does not change colour defaults for new elements but changes styles (let’s think of these as CSS styles) for elements that exist on the stage.
But what’s that? There’s yet another way of changing colour styles??
Let me try and demystify this while all this is finding a solid place in my brain. Yes there is another spot for changing colour of existing elements.
You’ll find a area for changing the background colour and for the first time, a space for changing the stroke (that’s the outline in case you’re unsure) of an element. Relatively straight forward again. The icons will reveal the same colour pickers that we’ve already learned about.
But the really cool thing is this. Remember the Colour panel right on top? Changing the colour settings on this Properties panel will change the settings in Colour panel too. How cool is that? Very handy too. Again, I stress these colours settings are for selected elements that already exist on your stage, not for new ones.
Phew! We’re almost there. I’ll wrap it up with a few recap conclusions in a moment but before I forget I want to see how these settings effect canvas shapes rather than <div> elements.
<A few minutes later>
Right, put as simply as simply as I can, canvas shapes have colour profiles that are independent of elements created via the tag tool and <div> elements changed via the properties/colours panel. That means if I switch between a shape created in Canvas and a div element the colours in the properties panel will change to the last settings of each type. They are different entities.
Well… I think I’ve got there. I appreciate I was fast on canvas shapes but I think I understand the differences in how colour is create in GWD and I hope my readers do too (if they didn’t already).
But to make sure here are some final pointers to make sure the message goes home for all of us. There are a wealth of different methods of applying CSS colour in Google Web Designer
- Using Tag Tool Elements
- Using Text Tool for changing font colours
- Canvas shape colours
- Using the colour panel
- And by using the properties panel
- Colour settings changed using the Tag Tool are for making new default settings for any element you want to create (other than the text tool and canvas shapes)
- The Tag Tool, Text Tool and Canvas shape Tools all have separate colour profiles
- The Text Tool and Canvas shapes are used for changing the colour of existing objects on the stage
- When you add a new text tool, you will always have to select a different colour if you want it as the default will always be for no colour
- The Colour and Properties panels are linked so if you change settings in one, it’ll be reflected in the other.
Thanks for reading! 🙂