What I learned – Week Six

Images & Colour

Fistly we looked at images and their different raster formats which include: jpeg, GIF, png-8 and png-24. We looked at their different colour depths and how jpegs and png-24 are true colour so can display around 16 million colours and gif and png-8 can display 256 colours. The file formats with the 256 colour paletted are not good for photographic images as they use dithering to simulate the additional colours.

Each of the different file types have a ‘killer feature’. Jpegs have variable compression, gifs have frame animation, png-8 is smaller in size than the equivalent gif, and png-24 has alpha transparency.

In terms of wha the different formats are best used for: JPEG is best for photographs, gifs are best for simple graphics or animations, png-8 also for simple graphics, png-24 is best for complex graphics (photo and line art).

We were also informed on scalable vector graphics which use vectors (coordinates) rather than pixels and are thus infinately scalable without degrading the quality in any way. They can also be embedded directly into html rather than linked as they are written in xml.

We discussed image positioning and how you can use css floats to place the image to the right or left. We also lookedat placign them in the centre of the page and using background images.

We then moved onto colour and how certain colours work in harmony together and others clash and how colour contrast is important to accessibility.

We looked at how to specify colours in CSS. They can be specified by name, hexidecimal or rgb value.

We discussed how to build colour schemes. Monochramatic schemes are built with one colour with the simple adjustment of the saturation and hue to create different shades. And we learnt how you can use images to create colour schemes using the colour picker.

We then moved onto colour theory and looked at the different colour schemes you can build including analogous, complementary and triadic.

We went through some useful online tools including colour calculator, paletton, coolors, palette fix. We also looked at how you can use illustrator to build a style guide for your web sites and check if they are accessible for people with colour blindness. Here is some of the colour inspiration for my Introduce Yourself project that we are currently working on.

styleguide created on illustrator colour inspiration and palette created on adobe illustrated


Leave a Reply

Your email address will not be published. Required fields are marked *