Gems Pattern Design
Terrazzo becomes Gems!
Gems pattern design is a development of the Terrazzo Pattern Design. I noticed that most of the shapes in Terrazzo were hexagonal, so close to a gem shape. I experimented with a few of them and found the transformation worked!
Too Many Variables
The earliest designs had all of the shapes converted to gems which looked fun but a complete riot. I found reducing the number of gems and varying the sizes looked more refined. I also closed the spacing too making the design tighter than Terrazzo.
Colouring the Design
Each of the gems has a six sided base element which is set to multiply. This then reacts with the colour of the layer behind, creating a new colour. The highlight, lowlight and mid-lights were added to give the gems a 3D appearance.
Colouring the Highlight, shadow and mid-lights
Each of these elements are coloured identically. But were set up differently: Highlights are all 100% white, Shadows are set to multiply, Mid-lights are set to hard light. Meaning each of the elements take on the appearance of the layer below so avoiding changing everything for each colourway.
Defining the Pattern Repeat
It would be pretty impossible to create a pattern without seeing how the repeat works. This pattern uses 22x individual gem shapes. They are repeated horizontally, then a second row is created out of align with the first row. The third row is then back in-sync. The whole pattern is then duplicated down the page.
Testing The Pattern Repeat
These full-screen versions use actual pattern repeats, set to repeat and scaled using my CSS style sheet. This is the ideal way to test if a pattern repeat works.
Alternative Colourways
Early designs had each of the gems coloured differently which looked cheap. After trying numerous colour combinations I decided to just have two variables – the gem background colour and the colour behind the whole page.
