Glasses Pattern Design

Introducing Glasses

One of my favourite subjects to photograph are glasses. I love they can have a colour and texture but above all you can see through them. Had this pattern been a photo instead I would have concentrated on the high and low lights, this pattern does the opposite and celebrates the shapes of the glasses instead.

Combining Shapes

I found the pattern works best if there are sets of similar glasses together. Sometimes they are different colours, other times they are just similar shapes.

Introducing The Second Colour

To make the pattern more interesting each of the variations uses two colours. For most of the glasses the top bowl is 50% of the colour. Then using 100% for the darker stems and shadows. This effectively creates designs with four colours.

Drawing The Glasses First

For this design I used a different technique by drawing all of the glasses first. These were created in one Illustrator document. Each glass was drawn on an its own Art Board, so they could be output as separate Illustrator .ai files later.

Creating with low Resolution Images

With a collection of completed images I could work on combining them in an interesting way. First I exported very low resolution webp files of each of the glasses to work on. Now it was time to be creative with the glasses to make a successful design – no small feat!

Endless Possibilities

With 20x individual glasses to move around the possibilities really are endless! Once I felt happy with a design I would upload the pattern repeat to my website to see how it looked. There are 12 earlier versions of this design, not to mention those I gave up on without saving them.

Defining The Pattern Repeat

Once I was finally happy with the layout and combination of images I could work on the next stage. I put all the individual low-res webp files on one layer in Illustrator, then create a transform which defines the horizontal distance and the number of repeats. This layer is then placed inside another layer which I define as the vertical distance. I type the transform details on each of the layers for reference. These are the vital part as the two numbers define the actual dimensions of the pattern repeat. At this point all the glasses are the same colour.

Colouring Some Of The Glasses

Once I was happy with how the combination was working I could think about colouring a selection of the glasses to give the pattern its second colour. I found if I had pairs of similar glasses together I could colour one of them in the new colour. I prefer to dot the spots of colour evenly across the pattern so yet again this was a time-consuming process.

Replacing images with High Resolution Files

Placing all of the individual glasses on its own Art Board came into its own at this point. I re-output all the files again, but this time as separate Illustrator files – keeping the same filenames as the webp ones I used earlier. It was then a simple process of replacing each of the linked webp files with the actual embedded .ai layered files.

For simplicity I made the shadow and stems 100% of the colour with the thin glass 50% of the chosen colour. I could then select all the same areas on all of the files using Illustrators’ Select Similar Options – Fill Colour. With all the areas selected I could work through a selection of colours – by far the best part of the job!

Different Colourways

Rather than using drastically different colour combinations such as red with blue, I started with sludgy dark colour combinations such as purple with khaki. Once I had fine-tuned the perfect combination I output the high res files for the website, saving the file. I then duplicated the file and altered one of the colours to create a new combination. I kept working on this technique until I had about 20 that I was happy with. 12 of them are shown here.

Testing The Pattern Repeat

These full-screen versions of Glasses 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.