Posted in Computer Science, Graphic Design (Image Manipulation), HTML, HTML5, Web standards, Web2.0

Hexadecimal colours

Colour codes are written with hexadecimal values which takes some getting used to if you haven’t done computer science – humans count in base-10 (decimal) whereas a lot of computer things use base 16 (hexadecimal).

Decimal runs from 0-9 so you can go: 0,1,2,3,4,5,6,7,8,9

Hexadecimal runs from 0 to F so you can go: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

Colour hex values are three pairs of hex numbers, two for the Red, Two for the Green and two for the Blue (That’s where you get RGB from, Red-Green-Blue)

So a colour hex number is actually RRGGBB (Two for the red, two for the Green, two for the blue).

All you’re doing is mixing different amounts of red, green and blue to get a colour just like in playschool J

The lowest value in Hexadecimal (Hex for short) is 0 and the highest value is F and you can use two of them for each bit of the colour.

So if you want pure red you’d use two F’s in the Red part and zero’s in the other parts, i.e: FF0000 (that means full red (FF0000), no green (FF0000) and no blue (FF0000)

Pure green would be 00FF00 and pure blue would be 0000FF

There are 16 numbers in the hexadecimal range so 8 is in the middle.  Generally the lower the number, the darker the colour and the higher the number the brighter the colour.

White is FFFFFF – maximum everything and black is 000000 – none of everything.

Colours usually have a # symbol in front of them because that’s the symbol for a hexadecimal code so black is #000000 and white is #FFFFFF

I use this site for getting colours: http://colorschemedesigner.com/

Posted in Graphic Design (Image Manipulation), Illustration, Web standards, Web2.0

The 960 Grid system

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

960 Grid System - 12 column layout

Here is a good tutorial for creating a modern looking Web2.0 webpage using the 12 column grid layout as shown above.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-clean-web-20-style-web-design-in-photoshop/