Creating A Custom Color Palette
Recently there was a question asked on the Toon Boom Studio forums pertaining to having a "web safe" color palette. This question was referring to a standard set of colors that works with most browsers and client hardware on the Internet. Now I'm not a website designer, so I won't venture into discussing the merits of only using these "web safe" colors for your cartoons, but the question did prompt me to want to write a brief tutorial showing how easy it is to build a custom color palette in Toon Boom Studio. There could be many more articles and tutorials written here about the great color management system in TBS, so this may just be the first of many to come in the future.
We will start building our custom color palette by navigating to the "color palette" panel in TBS. If you are using V3.5 or lower you will find this panel as a tab on the "properties" panel set. In V4.0 this panel can be seen as a separate panel depending on how you set up your workspace layout. The first thing we need to do is to select "New Pallet" from the name drop down box.
This creates a new palette and it gets the name "New 1" by default. We want to rename this palette to something more meaningful. So we will click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Rename Palette".
This opens a dialog box where we can enter a name for our new palette. In this case we will name our palette "Web Safe" to indicate that it will contain our set of "web safe" colors.
Now that we have named our new color palette, we go to the initial color in that palette, which is currently named "Default", and we double click on that color swatch to open a color edit dialog panel. I'm working on a Mac so this is the OSX standard color picker dialog, but other than a slight difference in the appearance of this color picker with the standard Windows PC color picker the process is identical.
The color editor dialog has an external color selector, on the Mac it is a little magnifying glass icon while on the Windows PC it is an eye dropper icon. (not to be confused with the eye dropper tool included in the TBS drawing tools). This external color selector is used to clone a copy of any color that you choose by dragging it over the top of that color anywhere on your display and clicking to select it.
In the picture above I have started to drag the external color selector from the color edit panel.
For this tutorial example I'm using a "Web Safe" color chart as my color source. I could use any source of color that can be seen on my display so it could be almost any graphic or photo etc. I have included a link to a full size version of this "Web Safe" chart at the end of this tutorial for those interested in building their own set of web safe colors. I just drag the external color selector over the top of the desired color and click on it to clone it to my color edit panel and to my currently selected color palette swatch. How easy is that?!
Now that I have my first color selected, I can edit the color name as desired. I changed "Default" to the color name from the web safe chart for this color which is "330000". That's a personal preference, I could have just as easily named it "dark burgundy" or whatever .
That's all there is to capturing a color swatch to your custom color palette. So next I click on the "+" sign icon to add another color swatch to my palette. I then double click on that new swatch to open the color edit panel and I use the external color selector to clone my next color exactly as I did before except I selected a different color from my "Web Safe" chart.
I rename the newly added color and then repeat the process to add another color swatch and clone in the next color from my "Web Safe" chart.
As you can see I am filling my palette with the colors from the "Web Safe" chart. The order in which I add the colors is a personal preference. And this process works for building any color palette set of colors not just one of "web safe" colors as I'm doing in this example.
When I finish building my new custom color palette, I want to save it for reuse in many future TBS projects. Right now it is specific to the project in which I am currently working. I want to "export" my "Web Safe" color palette. We will click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Export Palette".
This opens an export dialog panel where all my current project color palettes are listed and I can check which ones I want to export and the destination of where I want them saved on my system. I have a Toon Boom Studio directory with a Palettes subdirectory on my system but that's just a personal preference. That's all there is to exporting and saving a custom color palette, which you can now access and use in future TBS projects.
It is very easy to import a custom color palette into a new project. We just go to our color palette panel and we click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Import Palette".
This opens an import dialog where we can select the desired custom palette we want to import into our TBS project.
As I mentioned earlier there is a great deal more information pertaining to all the uses of the Toon Boom Studio color management system so check back for future articles and tutorials.
Click on this chart to access a full size version.
We will start building our custom color palette by navigating to the "color palette" panel in TBS. If you are using V3.5 or lower you will find this panel as a tab on the "properties" panel set. In V4.0 this panel can be seen as a separate panel depending on how you set up your workspace layout. The first thing we need to do is to select "New Pallet" from the name drop down box.
This creates a new palette and it gets the name "New 1" by default. We want to rename this palette to something more meaningful. So we will click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Rename Palette".
This opens a dialog box where we can enter a name for our new palette. In this case we will name our palette "Web Safe" to indicate that it will contain our set of "web safe" colors.
Now that we have named our new color palette, we go to the initial color in that palette, which is currently named "Default", and we double click on that color swatch to open a color edit dialog panel. I'm working on a Mac so this is the OSX standard color picker dialog, but other than a slight difference in the appearance of this color picker with the standard Windows PC color picker the process is identical.
The color editor dialog has an external color selector, on the Mac it is a little magnifying glass icon while on the Windows PC it is an eye dropper icon. (not to be confused with the eye dropper tool included in the TBS drawing tools). This external color selector is used to clone a copy of any color that you choose by dragging it over the top of that color anywhere on your display and clicking to select it.
In the picture above I have started to drag the external color selector from the color edit panel.
For this tutorial example I'm using a "Web Safe" color chart as my color source. I could use any source of color that can be seen on my display so it could be almost any graphic or photo etc. I have included a link to a full size version of this "Web Safe" chart at the end of this tutorial for those interested in building their own set of web safe colors. I just drag the external color selector over the top of the desired color and click on it to clone it to my color edit panel and to my currently selected color palette swatch. How easy is that?!
Now that I have my first color selected, I can edit the color name as desired. I changed "Default" to the color name from the web safe chart for this color which is "330000". That's a personal preference, I could have just as easily named it "dark burgundy" or whatever .
That's all there is to capturing a color swatch to your custom color palette. So next I click on the "+" sign icon to add another color swatch to my palette. I then double click on that new swatch to open the color edit panel and I use the external color selector to clone my next color exactly as I did before except I selected a different color from my "Web Safe" chart.
I rename the newly added color and then repeat the process to add another color swatch and clone in the next color from my "Web Safe" chart.
As you can see I am filling my palette with the colors from the "Web Safe" chart. The order in which I add the colors is a personal preference. And this process works for building any color palette set of colors not just one of "web safe" colors as I'm doing in this example.
When I finish building my new custom color palette, I want to save it for reuse in many future TBS projects. Right now it is specific to the project in which I am currently working. I want to "export" my "Web Safe" color palette. We will click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Export Palette".
This opens an export dialog panel where all my current project color palettes are listed and I can check which ones I want to export and the destination of where I want them saved on my system. I have a Toon Boom Studio directory with a Palettes subdirectory on my system but that's just a personal preference. That's all there is to exporting and saving a custom color palette, which you can now access and use in future TBS projects.
It is very easy to import a custom color palette into a new project. We just go to our color palette panel and we click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Import Palette".
This opens an import dialog where we can select the desired custom palette we want to import into our TBS project.
As I mentioned earlier there is a great deal more information pertaining to all the uses of the Toon Boom Studio color management system so check back for future articles and tutorials.
Click on this chart to access a full size version.
Labels: Color Management, Tutorial
5 Comments:
Hey there,
This post comes at a good time for me as I am making my rookie attempt at building a web site. I had started designing my logo & such before considering things like web safe colors (getting ahead of myself as usual). I'm unclear on a couple things, such as: How bad is it to use colors outside th esafe zone? And how do they display if someone can't see them properly? I can't remember ever having a problem with seeing colors, and I'm not sure I understand how certain colors are web safe, but I see other colors in toons & such that are not on the web safe palette but they appear fine. Do they appear differently for other people depending on their diplays?
Thanks for any info you might have.
Pat,
You obviously didn't read the qualifying sentence I put in the tutorial " Now I'm not a website designer, so I won't venture into discussing the merits of only using these "web safe" colors for your cartoons". You see the purpose of saying that was to avoid getting questions about web site design considerations. -LOL- So much for that. OK, here is my personal opinion on the subject. For the vast majority of web viewers it is no longer a consideration. Most computers which used limited color display capabilities are long since retired to the "bone" yard. Sure there are a few really antique machines still in use but there are still rotary dial phones out there too. Most displays and systems now are capable of millions of colors so the concerns are minimal. You still need to maximize color contrasts and avoid colors that appear too dark on some older systems but it isn't a huge consideration. But again I'm not an expert in website design. The tutorial is intended to show how to build any kind of custom color palettes, the original source question on the forum was about "web safe" colors, so I just used that as one type of custom palette possibility.
Heh, sorry bout that... hope I didn't open a can of worms lol.
You did pretty much confirm what I thought though, so thanks :) It's gonna take me forever & a day to get the site together anyway, but that's something I wanted to figure out before I get too far.
Thanks for your help.
-Pat
Good morning, JK-
Can I export a custom pen/brush, too? It's no big deal to recreate my favorite brush settings for each animation I create, but it would be nice to just create a new project and have my brushes ready to use.
Thank you,
-E.S.
E.
That would be a very useful feature, but to the best of my knowledge it does not exist. There is a work around that I use. I created an "empty" project in which I created all of my pens/brushes that I like as well as other project specific settings. I then start each new project by opening that empty pre-set-up project and saving a copy of it as the new project. That saves me from having to recreate setting over and over.
Post a Comment
<< Home