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.