Tag Archives: colour

Sketches: The Enabler Sketches, Paint & Photoshop 04 MAY 2010

So another quick black pen on normal printer paper, hastily scribbled down in front of my work keyboard while my mind happily drifted into problem solving mode to deal with some issues raised on one of our important projects.

As you can see from the subject matter, no doubt my brain was craving some good wholesome coffee, but considering that one now has to walk all the way downstairs just to make a cup, it might not exactly be getting all that much in the near future.

Certainly nowhere near the levels it has grown used to! :P

The small black and white drawing has been scanned in and blown up using my nifty little Canon LiDE 100 Scanner and then moved over into Photoshop where my Genius tablet and I happily coloured it in, before uploading it here.


The Enabler – 3 May 2010. Black Pen on Paper. Digital Colouring.

Sketches: Despair Sketches, Paint & Photoshop 22 APR 2010

Okay. So now I have my scanner. Which means I can put a black pen on paper and make a quick scribble in say ten to fifteen minutes. Then I take that sketch home with me, pop it into the scanner and bring the black and white digital copy into Photoshop, where I get to play brush master and bring the black and white to life.

The result?

Not bad for my first effort back behind the pen if I say so myself. Juices of creativity, flow damn it flow! ;)

Despair — 21 April 2010. Black Pen on Paper. Digital Colouring.

jQuery: Tween from One Color to Another CodeUnit 20 JAN 2010

From jQuery 1.2 onwards, the ability to tween (animate) from one color to another, in other words fade one color into a different color is as simple as inserting one line of code.

(In order to use this effect though, you will need to include the official Color Animations jQuery plugin which can be grabbed here.)

Technically all that the color animation is doing is it is making subtle CSS changes utilizing the jQuery.fx.step functionality to fire it along, but seeing as this all happens behind the scenes, all you really need to know are the CSS properties that you are allowed to manipulate in this manner…

…which are currently ‘backgroundColor’; ‘borderBottomColor’; ‘borderLeftColor’; ‘borderRightColor’; ‘borderTopColor’; ‘color’; ‘outlineColor’, just by the way.

In addition, colors can be specified as one of a pre-set range of named colors (e.g. blue, pink), or in rgb format (e.g. rgb(221,221,221)), or as hex (e.g. #cc6600), or finally as shorthand hex (e.g. #ddd).

Let’s for example say you wish to face a page’s background color from its current white, all the way through to blue and once that is done, tween the now blue background to it’s final pink stage.

To achieve this is really simple. What we are going to do is call the animate function which will be responsible for the color tween and when the first animate call is done, chain a second animate after the original to change the color to the final desired pink.

And here’s the jQuery magic that will do all of this for us:

$("body").animate( { backgroundColor: 'blue' }, 1000).animate( { backgroundColor: 'pink' }, 1000);

You’ll see in the above that all we do is specify the CSS property on which to act (this time it is BackgroundColor) and then specify how many milliseconds the animation needs to act for.

And that’s it. The magic of jQuery strikes again! :)