It's about time we revisit our vectorised vintage travel poster. In the last article, we discussed vector graphics and how they were well-suited for illustrations consisting of flat colours and simple shapes.
This time, we're going to take the design we recreated and explore an interesting optical illusion called the 'Parallax effect' by adding dimension to our poster. Here is the original poster design we picked to use as an example.
Vienna Travel Poster
- Artist: Kosel, Hermann, 1896-1983
- Created / Published: Austria, [193-]
- Description: 1 print (poster) : lithograph, color ; 93 x 61 cm. | Travel poster shows a view of Vienna.
Before we start exporting assets and diving into code, let's learn a bit more about the effect.
The Parallax effect is also known as Parallax scrolling. Wikipedia describes it as "a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene of distance."
The technique grew out of the multiplane camera technique used in traditional animation since the 1930s (most famously by Walt Disney Studios in the production of Snow White and the Seven Dwarfs).
The illusion is used everywhere from film and television, to videogames and websites, and can achieve a wide variety of results depending on how it's implemented. In the same way that vintage travel posters lend themselves well to being vectorised, they are also a good fit for demonstrating the parallax effect.
All about layers
When we created our vector illustration, we grouped elements together based on how far away they appeared to be, eg. the domes and spires in the distance would be further back, and the statues closer to the front.
The grouping of elements mentioned above is very important but it's not an exact science. For this poster design I had to use my imagination in places. If we flatten each of those groups down to single layers, we can save and export them.
You can see what the assets used in this particular design look like here.
So now we'll try and create a parallax effect by positioning these layers on top of each other and subtly shifting their positions as we scroll. The key to making the effect look convincing is scrolling the layers at different speeds.
The topmost layer moves the fastest, but each subsequent layer moves a little slower. You can also use fainter colours to make layers appear further away.
Work in progress below: