Ubisoft logo

I noticed another example of the use of Phi in design – the Ubisoft logo. The circles are diminished in size by 1.618 (Phi). I wonder if they wanted it to relate to their business or just look good…it’s pretty much a golden spiral.

Is it just me or…

are these albums unsung classics? (unsung, get it, bahaha…)

Sting brings Celtic/German/Russian folky goodness to the world in his.

Okay, Rolf Harris is a bit annoying on Bush’s disc (with the audible, and slightly discomforting, pleasure he gets from a painting he’s doing) but, hey, with lines like ‘swishy swashy, swishy swashy, make these dirty shirties clean’, and some gripping Choral-esque vocals, you get over him.

Photo Overlays

Firstly, I’m getting a little slow at posting (sorry) because I’m getting more success with job-hunting and have actually made a bit of a break through today. If all goes well over the next few weeks then…well, I may be so busy I won’t have the time to post about it.

I found some interesting images yesterday during an internet-rummage. They’re on the following webpage – you’ll have to scroll down about half way to see what I’m talking about. There’s a screenshot here anyway (the first image).

http://www.spamula.net/blog/2007/02/

The author describes them well enough, so this is what s/he says: ‘Occasionally, printers will run disposable sheets of paper through the press several times in order to fine-tune the press, or to clean the rollers. The resulting “setup sheets” often display random overlays of images and type from various unrelated print jobs.’

I gave it a shot in Adobe and got some cool results – obviously, it’s always better to fart about with a printer or photocopier for image overlays but some of us can’t afford to do so! Good ol’ cheating on Adobe instead then. I just, really quickly, gave two images a duotone effect and then, in Illustrator, gave them different opacity styles to see how they’d interact. Not as bold or striking as the originals on the webpage, colour-wise, but that could be remedied with some Photoshop tweaking and it’s still something to keep in mind when seeking ideas. Lots to play around with too – composition, colours, duotones/tritones/full-colour, contrast…lots.

Curly hair

My little brother, before the age-of-teen turned him to the dark side (yes, brother not sister)

Dot Line Designs

Another good web design service – competition is healthy! Lime green looks like it’s in fashion – smart condensed type on this one too. Bright colour+grey…works every time.

http://www.dotlinedesigns.com/

TJS web design

A good website for web design/typography fans – its vibrant, simple and bold.

http://www.tjs.co.uk/

The Rare Book Room

The link below is definitely worth a visit – some amazing typographic and ornamental work from the mid-1800s. It’s so colourful it could almost be mistaken for modern design…almost.

http://www.rarebookroom.org/Control/mdlwrn/index.html

New numbers

In my last post I pointed out how the ratio 1:1.618, manifests itself in segments of a circle – of any angle. Three segments of a circle – of the relative sizes 1:1.618:2.618 – can be placed in such a way that the two smaller segments will sit inside the larger to create a curve with their edges that will touch the straight edge of the largest segment. I thought it would only be 1.618 that could create such an effect but I found that the numbers below do the same thing.

The first number I found was 1.465. The Fibonacci sequence, which creates numbers relative by 1.618, relies on your adding the two previous values to get the next (in the sequence 3, 5, 8, we get 8 by adding 5 and 3). If you keep calculating the Fibonacci sequence into the hundreds of thousands, you‘ll find that the relation between the numbers gets closer and closer to the complete number of Phi – though only the first few decimals really matter. 8/5 is only 1.6, so it’s necessary to keep going through the sequence until it gets a more accurate value for the relation between numbers that are the sum of their two precedents. If 1.618 is gained by adding the first and second values in a sequence, 1.465 is made by adding the first and third. If you started with 1, 2, 3, then, the next value would be 4 (3+1). If you continue the sequence you eventually get the numbers 872, 1278, 1873 and 2745 (2745=1873+872) and if you divide 2745 by 1873 you get 1.4655632…. You could round it to 1.466 or just leave it at 1.465 – you’d have to keep going in the sequence to check if it was going up or going down as it averaged out.

Anyway, the first image shows what 1:1.465 does with circle segments relative by its value – remember the second smaller version is ditched – its the first and third smaller versions of the largest that we use.

Adding the first and fourth previous numbers in a sequence will give you proportions of 1:1.382 and if you use the first and fifth previous numbers, you get 1:1.324. Interestingly, in the 1:1.324 sequence, 1, 2, 3, 4, 5, 6, 8, 11, 15, 20, 26, 34, 45, 60, 80, 106, you’ll find that, as expected, 34 = 26 (first previous) + 8 (fifth previous) but if you add neighbouring numbers, as you would in the Fibonacci sequence, you get a similar effect to the Golden String – 3+4=7, one over 6, 4+5=9, one over 8, 5+6=11, equal or 0, 6+8=14, one under 15, 8+11=19, one under 20, 11+15=26, equal or 0, 15+20=35, one over 34…and so on. In other words it goes +1, +1, 0, -1 -1, 0, +1, +1, 0, -1, -1 etc.

There must be some significance with these numbers if they act similarly to Phi with regard to circle segments within related segments…but I’ve yet to find it out. I added 1:1.414 (the useful proportions of DIN paper edges) as well, to demonstrate how it conforms with the seemingly special ability of these numbers to make segments of any angle able to relate the way they do in the images here.

Golden spirals

Some quite heavy-on-the-eye geometry made to look pretty here. I got a little confused when I read about the Golden Spiral – it made me think there was one, and only one, Golden Spiral but, in fact, it is the construction which decides if something is a Golden Spiral or not – and not the angle it’s drawn with. Usually a Golden Spiral drawn with a 90˚ angle is said to be the Golden Spiral – the one you see inscribed within a Golden Rectangle. A Golden Spiral can actually be any spiral drawn using similar segments of a circle which are reduced by Phi and arranged as shown in the first image below.

The blue triangle is similar to the others, but smaller than the magenta triangle by the ratio 1:1.618. You can guess how the green relates. The second grouping in the first image here shows the important characteristic of Phi – it is the only number capable of creating a sequence of numbers that relate to one another by addition and multiplication – in 3, 5, 8, 13, 5+3=8 and 5x1.618=8 as 8x1.618=13.

Phi can be found in a sequence in which any number is the sum of the 2 preceding ones. I tried creating a sequence of numbers whereby any number is the sum of the 3 preceding ones by choosing any three numbers to begin with and working through the numbers. It doesn’t matter what numbers you begin with because the more you add numbers to the sequence, the more stable the ratio will become and the closer you’ll get to finding the special number. I got 1:1.839 as the ratio for a sequence relating to every 3 numbers. 1:1.926 was reached by looking at a sequence using the preceding 4 numbers. If you look at the second and third image below, the groups to the right show jagged stars marking the failings of these ratios to act in a similar way to Phi.

The fourth and fifth images show Golden Spirals in steps of 10˚ up to 360˚. Some significant spirals occur at 36˚, 60˚, 72˚, 90˚, 108˚, 144˚ and 180˚ – 60˚ giving a hexagon, and 72˚, a pentagon, for instance. It’s interesting how wonky they get after 180˚ – perhaps it’s not necessary to go beyond that point though, because you can no longer join up the points of the curves with straight lines.

The sixth and last images demonstrate the pattern of end points in golden spirals – all ending on the circumferences of circles (in pink/dark pink) which are reduced by Phi from the largest. This is expected, really, but in the sixth image, where I’ve reflected all of the spirals up to 180˚, we find them producing proportionally smaller circles by their interactions. All this can be anticipated with an understanding before hand, but seeing it at work is something else.

Pentagram construction inside golden triangle

Another quite slick construction here.

Expand a line by the ratio 1:1.618 (using the golden rectangle from a square method) and then extend arcs as shown in the first image. You can then produce a golden triangle by joining the corners – the magenta arc makes sure two sides are of equal length, and the blue arc makes sure it’s a 72˚ angle – meaning the third edge will be to the others as 1 is to 1.618.

Find the mid-points of each edge to the triangle. By joining these points we have the all-important triangle with which to create a pentagon/pentagram.

As we know the sides are going to be of equal length we can just use the compass, like in the fourth image, to find the two remaining points to the desired shape.

I added a last image to show the relation of one side of the pentagon to the longer side of the triangle – if the triangle edge is 1 unit, a side of the pentagon is 0.5/1.618.

Grayscale versions of colour 02

Just to add to the earlier post, I thought I’d justify the need to spare a thought for the brightness of colours – by converting them to grayscale, for clarity.

The combinations of colours in the first two rows below are all created using the same grayscale values – namely those shown in the first 3 grey columns. So the variation in hue can, obviously, change dramatically while the percentage of black stays the same.

To demonstrate the variation in hues between colours of the same darkness (55% black in grayscale versions here) a long horizontal strip of swatches has been added – below it I have included the grayscale versions of these colours and, as can be seen, they’re all equal – 55% black.

In the first of the 4 text boxes below, we can see how awful text can look if its darkness is equal to that of the colour of its background. Usually, in these situations, there’ll be an ugly haze around the text because, in effect, the boundaries between the colours are so weak that they’re spilling into each other. Avoiding these problems is easily done by eye – most of the time. Sometimes, as with the last 3 images below, strong contrasts in hue make up somewhat for the completely equal brightness of two colours – but the outcome of their being combined is still dull/lifeless even when strong colours are used because of the equal grayscale values. So it’s, again, worth working in grayscale before colour, just to get the light/dark values of your work just right before adding colour.

BBC iPlayer: A good week for FREE films

If you don’t know about BBC iPlayer you should bookmark it! They often have some really good films available for streaming (that what they call it?) or temporary download so check it out each week.

They can be a little annoying with it though – I tend to buy foreign films on DVD because I don’t expect to ever see them on TV and, just as I get punched in the wallet by HMV for £20, I find out the BBC has uploaded the film onto iPlayer for free viewing. Gargh! Summertime and Tell No-one (French: Ne le dis a personne) are among a few I’ve unnecessarily shelled out for in the past.

Anyway, thought I’d let people know what’s on there at the moment!

Mean Streets (goofy old-school DeNiro)
http://www.bbc.co.uk/iplayer/episode/b00rwk9h/Mean_Streets/

Good – A film living up to its name: good but not great. Viggo Mortensen (okay, Aragorn from Lord of the Rings) and the mighty Jason Isaacs caught up in Nazi Germany – that ol’ chestnut.
http://www.bbc.co.uk/iplayer/episode/b00rvbks/Good/

Mrs Brown – a film about moody Queen Victoria and a Scottish guy who loves fresh air and shouting (Billy Connolly’s best film, me thinks). Also check it out for a hilarious Antony Sher, playing Benjamin Disraeli.
http://www.bbc.co.uk/iplayer/episode/b0078lkb/Mrs_Brown/

Grayscale versions of colour

Processes like logo design can begin to run away from the designer if they don’t consider one thing at a time – which is why, as the form of the logo is being drafted, the colour may be ignored for the time being. That would mean working in grayscale or even black and white.

The following information came from my finding the percentage of black in the grayscale version of some basic colours. For instance, in the table below we see the numbers 10 to 100; that’s 10% of cyan, magenta and yellow in the first column, running up to 100% of each in the last. Their grayscale versions are beside them – there’s 3% black in the grayscale version of 10% cyan, for instance. The grayscale version of a colour, in effect, tells us how deep/dark it appears to the eye – this, however, is NOT to say that blue doesn’t recede on the page more than red – light and dark is not the same as near and far.

In checking the grayscale values for colours it can sometimes be surprising to find that one is darker than another, and it’s good practice to consider how the hue and the brightness are working in colours. Going back to logo design, working primarily in grayscale will allow you, firstly, to focus on form; secondly, it will force you to decide what should be dark and what should be light – choosing colours will then be down to matching their grayscale versions with the values you’ve chosen and picking a hue that will make the right impact – quiet/loud/vibrant/reserved. Something to think about anyway.

Type styles in Illustrator

Recently I figured out how to apply a halftone to some type in Illustrator – the proper way, rather than simply making a halftone of the solid letters. You can apply an inner glow and then make that a halftone – then, after using the best settings for the job, you can trace the halftone as a group of shapes and in doing that you make them editable – as the second image below shows. Unfortunately the circles you’re left with are rarely perfectly rounded so perhaps making a halftone of enormous type and then reducing that down would make the shapes more rounded. Still…in most cases they’ll be too small for readers to tell the difference.

Some other quick tests have been added but I tend to steer away from using text effects unless they have good reason to be used – they usually look better on the web but often spill over into print. Seems, though, that the more subtle they are, the more effective they are.

A really fast plane…

Josef Albers: Interaction of Color

I got half way through this book today, which, before now, would sit on my desk staring at me while I got other loose ends tied away. Great book – shame about the spelling of ‘colour’. It’s about more than just the colour illusions we’ve all seen before – understanding them, and reacting with that knowledge, will make for even more measured and reasoned design.

I liked his following opinion of colour-handling…though it is questionable in some ways: ‘good colouring is comparable to good cooking. Even a good cooking recipe demands tasting and repeated tasting while it is being followed. And the best tasting still depends on a cook with taste.’ It’s definitely true that colour should be revisited/manually controlled – as the following examples will prove. Consistency in colour values, for instance, does not always equal consistency in colour to the eye (in other words, the same colour can appear different due to a variety of reasons, like light). In many circumstances, if the creator wants, say, two pieces of type to appear the same colour visually, it may be necessary to make them slightly different colours (if, say, their backgrounds are of different colours).

Here are a few interesting examples of colour interaction I’ve read about so far:

In the second image below (click on it for a proper view), there is a black rectangle with a grey centre square, and a white rectangle with a grey centre square. This is an example of making two different colours appear the same. The grey squares are repeated below the image, side-by-side. See the difference?

Similarly, (and excuse the imperfection of this one, as it was my own attempt and not a copy from the book), in the third image we see a bright pink rectangle and pale purple rectangle, each with an orange centre square. The orange appears the same colour in each if you gaze at the centre of the image. For clarity, the orange squares are repeated below, and the difference is again clear.

Then there is the ability of colours to make one colour look like two. The last pair of images demonstrate this – two rectangles, one purple, the other brown, appear to have centre squares whose hue equals that of the opposite large rectangle. Brown with purple square, purple with brown square. In reality, though, the small squares are the same colour, as repeated underneath the image.

The main point behind all this is that influencing colours (dominating colours/colours with the largest area or presence) will SUBTRACT their own hue from those colours that they influence. Put a certain green shape inside a large yellow area, for instance, and that green will lose some of the yellow to its appearance…thus becoming more blue. Or, simply, a black background makes a colour lighter (it loses its darkness) as a white makes colour darker.

So?? Well, for typographers, this lesson should be an important one. If the colour of your type always needs to be the same colour in a particular publication, it is only the visual level of colour that matters to the audience – so you should put trust in your own eyes and adjust the type colour ever so slightly to allow for backgrounds of strong colour-influence. As Albers  would say, stop cooking and have a taste now and then.