PDA

View Full Version : Understanding Sticker Spray colour



Juz
02-23-2010, 02:46 PM
This tutorial will outline how to use colour with the sticker spray tool. In order to get the most of out this tutorial you should have a basic knowledge of how to create stickers and how to make use of them as stickersprays.

You can learn basic sticker creation with Someonesane's video demonstration here:
http://www.youtube.com/watch?v=0iSJNHe4dT4 (http://www.youtube.com/watch?v=0iSJNHe4dT4)
or with Judith Tramayne's video demonstration here:
http://www2.ambientdesign.com/forums...ad.php?t=24794

And you will find some good information on stickersprays in my Using Photoshop Brushes in AR3 tutorial here:
http://www2.ambientdesign.com/forums/showthread.php?t=26478


There are two areas where we can define colour with sticker spray brushes. Firstly, within the sticker image itself and secondly using the Spray Variation Dialog.

Understanding Sticker Spray Colour.

Attached is an image of the Computer Colour Spectrum. We can see underneath the Red, Green and Blue primary colours (RGB) that when added together in varying ways will allow us to mix any colour within this spectrum.

If we look at the vertical dotted lines in this diagram we can see that Red (255,0,0) is the starting and ending colour value 0°/360°. Green our second primary colour of RGB sits at 120°. Our last RGB primary value of Blue is at 240°. We can also see that mixing Red with Green and no Blue will result in Yellow(60°). Green with Blue and no red will result in Cyan (180°). Red with Blue and no Green will give us magenta (300°).

Juz
02-23-2010, 02:48 PM
As Artrage users we are familiar with this colour spectrum as we use it to select our hues of colour (see attached).

The important thing to notice is that in all of these different displays of the spectrum the value Red (255,0,0) is ALWAYS the starting and ending value (0°/360°). This value of Red is our Reference Value/Base Value for how Artrage will calculate a sticker colour.

It is helpful to think of this value of red (255,0,0) as the default/home colour for your sticker hues.

Juz
02-23-2010, 02:50 PM
When working with colours as degrees of hue, it's much easier for us to have the spectrum laid out in a circle (full 360°) rather than a linear fashion. This will make a better roadmap for us and it will be easier to predict how hues will move as we design brushes .

There are two ways this can be done. If we start at Red we could move in one direction through yellow then green. We could also proceed in the opposite direction through Magenta then Blue.

It does not matter which way the colours are laid out as the program code will start at 0° Red (255,0,0) and increment degrees of hue in a positive or negative direction starting from this 0° Red value.

Juz
02-23-2010, 02:52 PM
Here is an example from Artrage and Painter side by side. Moving clockwise from our Base Red Value, Artrage travels through Magenta then Blue whereas Painter travels through Yellow then Green.

Juz
02-23-2010, 02:55 PM
I've laid out the colours in the same direction as the Artrage hue wheel. This wheel will aid in predicting how our sticker spray colour will behave (download a copy for a roadmap).

I've also made these values into a brushmaking.col for you to use for your own original sticker creation (download from under the colour wheel).

Be sure to only use this palette for brush making or monitor output work. These values are right out of the CMYK gamut and will result in very disappointing prints. I will not be offering it up in the art supplies section for this reason.

Juz
02-23-2010, 02:57 PM
Before we get into the 'meat and potatoes' of creating and using colour in sticker spray we need to be aware of some options in our Spray Variation panel. This panel uses the HSL (hue, saturation, luminance) colour space for colour.

Whenever we use either 'Setup Settings for an Object Spray' or 'Setup Settings for an Image Brush' from the menu dropdown our default property values for colour are the same.
The 'Hue' property has a value of 'Tracing H' @100%, the 'Luminance' property has a value of 'Tracing L' @50%, the 'Saturation' property has a value of 'Tracing S' @100% and the Alpha property has a value of 'Tracing Alpha' @100%.
This means that the program will trace the HSL (hue, saturation and luminance) values as well as the alpha (opacity) values of any colour we choose with our usual colour selection methods all relative to our base red (255,0,0) 0° 'home' colour.

Juz
02-23-2010, 02:58 PM
Here is a visualisation of HSL colour space.

You can see from this diagram that hues wrap around the circumference, saturation proceeds from the outer toward the core with values least saturated at the core and luminance runs from the top lightest values to the bottom darkest values. Our colour wheel road map is a slice from the exact vertical centre, 50% from the top lightest value and from the bottom darkest value. This is why our default setting in the Spray Variation panel for luminance starts at 50%.

Juz
02-23-2010, 02:59 PM
How the Hue of our original sticker affects the Traced Hue of our brushstroke.

When we create our sticker for a sticker spray in our (255,0,0) red, the traced colour will be the exact HSL value we choose. So if my sticker is made with the 'home' colour and I choose blue to paint with the resulting brushstroke will be blue.

Juz
02-23-2010, 03:01 PM
Lets look at what happens if we make our original sticker Magenta.

On our colour wheel, the hue of Magenta is located at +60° from our 'home' colour of red. When I choose the same blue to paint with the resulting colour will be +60° from that blue giving us cyan.

Juz
02-23-2010, 03:03 PM
In the same way we can predict values that move in a negative direction from our 'home' colour of red. Lets look at yellow.

On our colour wheel the hue of Yellow is located at -60° from our 'home' colour of red. When I choose the same blue to paint with the resulting colour will be -60° from that blue giving us Magenta.

Any degree of hue we increment from our 'home' red in a sticker will be reflected as the same degree of hue increment in our 'traced' (chosen) colour. If I travel 90° of hue in a positive direction the traced hue will follow suit i.e. the brushstroke will be 90° (travelling around the spectrum in a positive direction) from the colour I select for my brushstroke.

Juz
02-23-2010, 03:05 PM
We can use this knowledge to create variation in hue of our sticker brushes.

Here is a brush that is designed with the home value of Red and the -30° hue of Orange. When I paint, it will paint with the chosen colour hue and the hue that is -30° from that chosen colour.

Juz
02-23-2010, 03:06 PM
Here is a sticker designed by Levent that is made in the 'home' red and the hue opposite colour of cyan (180°). This sticker was included in Artrage and you can find it in the Brush Heads category. Notice that no matter what hue I choose to paint with it always contains the hue I selected plus its opposite hue (180°).

A QUICK NOTE ON PHOTOSHOP BRUSHES
Photoshop .abr files that are imported are indexed within the program to behave as if they are our 'home' red value. You will not need to make these brushes red unless you wish to introduce some Hue, Saturation, or Luminance nuances into the brush. If you want to add HS or L effects to a Photoshop brush use my tutorial on Photoshop brushes to bring them into Artrage, on the layers palette use the lock transparency option and then just paint in your HLS effects.

Juz
02-23-2010, 03:09 PM
How the Saturation of our original sticker affects the Traced Saturation of our brushstroke.

Hue is expressed in terms of degrees as the whole colour spectrum travels around our colour wheel.

Saturation is expressed in terms of percentage where 100%=maximum saturation and 0%=no saturation. Our 'home' value of red has a saturation of 100%. Our saturation increments will look like the palette on the left side of the diagram (top image). I've included this palette so that you can play with saturation steps for the 'home' red. (download from under the images)

You can easily make yourself a palette like this for each hue on our spectrum colour wheel roadmap. Just increment the saturation percentage for each hue using the saturation field in your precise colour picker dialog.(bottom image)

Note: If I have a brush that is 50% saturated and then I choose a colour to paint with that is 50% or less saturated the resulting paint colour will = 0% saturation or grey.
The less saturated your original sticker brush is the more you will need to compensate by choosing heavily saturated colours to paint with to avoid running into grey.

Juz
02-23-2010, 03:13 PM
How the Luminance of our original sticker affects the Traced Luminance of our brushstroke.

Luminance is also expressed as a percentage value only this time our 'home' colour starts at 50% Luminance. Values of 50% or more will increase in lightness as they approach Luminance=100% (white). Values of 50% or less will decrease in lightness as they approach Luminance=0% (black). I have included a luminance palette for the 'home' colour red. (download from under the image)

You can again make one up for any value in the colour wheel spectrum by adjusting the 'luminance' percentage in your precise colour picker.

Note: If you brush has very light luminance values you will need to compensate by painting with dark colour as lighter colours will err towards white. If your brush has very dark luminance values you will need to compensate by painting with light colour as darker values will err towards black.

Juz
02-23-2010, 03:14 PM
Alpha

If my tracing value in the Spray Variation dialog for alpha is at 100% then alpha/opacity values will translate directly. If I have a brush that has a value of 50% for Alpha then every colour I choose to paint with will also have a 50% Alpha value.

Low opacity brushes are great for building up tone when you paint. The more you go over an area the more opaque it will become.

Juz
02-23-2010, 03:15 PM
USING THE SPRAY VARIATION PANEL TO VARY COLOURS

Variations in colour on a brush sticker affect the entire brushstroke as a whole. Sometimes we might want colours to vary in the individual stickers that comprise a brushstroke. The spray variations panel gives us the ability to have the individual sticker stamps that make up a brushstroke vary in colour from one stamp to the next. If we want our variations to be based on the colour of our choice that we paint with we will need to leave the 'trace' options for HSL and A as they are.

Varying the Hue Property with the Spray Variation panel.

How much do we want to vary our hues?
A value of negative or positive 100 will rotate hue through the entire spectrum. A low positive or negative value will keep hues close to the colour you choose to paint with.

Juz
02-23-2010, 03:16 PM
If we want to vary our hues we need to decide by what method they will vary. Do we want them to vary randomly, sequentially, by how much we tilt our pen, by which direction our stroke travels or pen rotates. We can even have them vary according to how a brush stroke travels in an x or y direction.

We can then determine where to place our input value in the Spray Variations dialog.

For example if I want to vary my hues randomly then I will place a value for the hue property under the Random column where the circle is in the following diagram:-

Values in the blue square need to remain if you want variance to be based on any paint colour you choose in the colour picker to paint with.

Juz
02-23-2010, 03:18 PM
Here are some example brushstrokes with different values for Random variance.

Juz
02-23-2010, 03:19 PM
If I clear the Hue value from the Random column and place it instead in the Sequence column here is what the resulting brushstrokes look like.

Play with the other hue properties such as stroke direction, pen tilt etc in this way to see how they work.

Juz
02-23-2010, 03:20 PM
You can vary the Saturation Luminance and Alpha in the same way.

Adding values to HLS and A together will give you wonderful brush colour variety.

Juz
02-23-2010, 03:21 PM
Phew… that was quite a long tutorial.
I hope that it has helped demystify colour with regards to Stickers and Sticker Sprays.
Juzzy :):)

Lima
02-24-2010, 02:25 PM
Juz congratulations, a lengthy task. Very well explained in a pedagogical way and very professional.

Bobbi
02-24-2010, 04:56 PM
Juz, you are a gem. Thank you for all your hard work.

flyashy
02-24-2010, 11:10 PM
What an ABSOLUTELY BRILLIANT tutorial Juz!!!
Wow, thanks so much for this.
I had quite a bit of this figured out and tried (sort of) some of it in the vein brush and another variable hue brush I haven't uploaded yet(I'd used it for the monster in that fantasy scene), but this tutorial makes everything so easily understandable.
Thanks again for taking so much pains to make our lives easier :)

Since you seem to be so well versed with stickers, may I request you for some guidance for the matrix variable categories I've outlined in the image? I mean I know approximately what they do but am a little vague about how combinations of those will behave.
Any light you can shed on it will help me clarify & predict the behaviour of any future stickers I'd make.
Thanks so much in advance!
:)

carlcath
02-25-2010, 05:25 PM
Under some of your images, you have "attached files". When I click on those, it opens up AR studio Pro but no pix appear on the screen. What am I supposed to see when I click on the file attachments?

Great Tutorial
Thanks a lot
Carl

Juz
02-25-2010, 07:16 PM
@Oriane and Bobbi, thank you very much :):):)

@Flyashy, thank you :):)
Hue as a sequence increments in degrees of spectrum in either a clockwise or counterclockwise direction (plus or minus). The value will determine this direction and the numeral for the value will determine how fast or slow it increments around the spectrum.
http://www2.ambientdesign.com/forums/showpost.php?p=279737&postcount=19

Sheet Row/ Sheet Column are basically ways to determine the grid co-ordinates of any sticker on a sticker sheet. How they would apply to HSL or A is a bit esoteric, I have no idea. The technical manual is very vague for this. It would be great if one of the artrage guys could post some more detailed information.

Sticker sequence seems to determine which sticker will come next but again with regard to HSL and A, I have no idea.

Juz
02-25-2010, 07:21 PM
@CarlCath

.col files need to be loaded from the menu at the top right of your colour picker (.col is short for colour samples). Use this menu to load them as a Local or Global sample set.(see attached)

byroncallas
02-25-2010, 09:09 PM
Juzzy - this is top notch brilliant.
I will spend more time with it - I appreciate to no end the academics brought down to the practical. Terrific work in every respect.
Hopefully this will get a sticky. :):)

flyashy
02-26-2010, 01:48 AM
Sheet Row/ Sheet Column are basically ways to determine the grid co-ordinates of any sticker on a sticker sheet. How they would apply to HSL or A is a bit esoteric, I have no idea. The technical manual is very vague for this. It would be great if one of the artrage guys could post some more detailed information.

Sticker sequence seems to determine which sticker will come next but again with regard to HSL and A, I have no idea.

Thanks so much Juz,
I tried the manual too but as you say it's hard to figure out what those variables would do. I hope rageteam sheds some light on this :)

Juz
02-27-2010, 04:33 PM
If anyone is feeling adventurous with their colour sticker creation, I've made some HSL palettes/pickers for more resources to explore with.

The palettes are made at a different level of saturation from vivid to grey (6 in all) and have each hue from the colour wheel with 5 luminance values. All values are calculated from a base Red of (255,0,0)

The Weak and Grey palettes are the only two palettes that are print safe. All the others contain values which are out of CMYK gamut, so use those only for monitor output or stickers for sticker spray brushes.

The large image is only for preview purposes, be sure to use either the curved custom picker or the .col.

The first one up is Vivid Saturation: Hue and Luminance

Juz
02-27-2010, 04:35 PM
Hard Saturation: Hue and Luminance

Juz
02-27-2010, 04:37 PM
Faded Saturation: Hue and Luminance

Juz
02-27-2010, 04:38 PM
Dull Saturation: Hue and Luminance

Juz
02-27-2010, 04:39 PM
Weak Saturation: Hue and Luminance

Juz
02-27-2010, 04:40 PM
Grey Saturation: Hue and Luminance

Alexandra
03-10-2010, 08:01 AM
Juz, Thank you very much.:)