Illustrated experiment with Cyclemon

Illustrated experiment with Cyclemon 

Illustrated Cyclemon is a digital experiment for illustrators Thomas Pom, a fourthyear student studying at the National School of Decorative Arts in Paris and Orthonormai, an interactive designer at OgilvyOne in Paris. The illustrations they have created for this site are actually for sale as prints and so this site promotes those illustrations in a playful manner. The theme of the site is based around the phrase ‘You are what you ride’ so with each of the cycles illustrated there is a statement about the type of person you are likely to be. Of course this is all very tongue-in-cheek, which suits the nature of the site perfectly.

INSPIRATIONFixed-positionimages

The most beautiful part of this site is the way that the cycle stays fixed in position on the page so that it remains in the lower third of the design. As each background of the site scrolls up the previous cycle is replaced with the new cycle, so the site is clearly defined as having background and foreground elements for the illustration. The background is a clear scrolling section, while the foreground remains in place and the cycles are revealed in situ. This clever design sets it apart from other sites as the functionality works well with the design, bringing focus to the cycles and their meanings for the rider.

TECHNIQUEFixed-image reveal

01 Document structure

An impressive part of the Cyclemon site is the
way the page scrolls yet the bicycle remains static on
the screen. As the page scrolls, the new bike is revealed.
This can be replicated by setting up the following page
structure of <div> tags.

001 <div id=”stage”>
002 <div class=”block” id=”box1”></div>
003 <div class=”block” id=”box2”></div>
004 <div class=”block” id=”box3”></div>
005 </div>

02 Style the page

Once the page structure is added, you can add
the CSS. This can be done either using a separate
document or by adding it to the page head. The code
below is setting the page to be the full height of the
browser and removing the padding and margins.

001 <style>
002 html, body {
003 min-height: 100%;
004 margin: 0; padding: 0;
005 }

03 Content holders

The following CSS sets the wrapping <div> with
the id of ‘stage’ to ensure it fills the full width and height
of the document. The overflow content is set to scroll
but the position is fixed so that it doesn’t scroll at all.

001 #stage {
002 height: 100%; width: 100%;
003 overflow: scroll; position: fixed;
004 }

04 Each section

Each section is also set to be the width and
height of the stage and this is the content that will scroll
inside of the ‘stage’ div. However the background image
is set to fixed and remains centred in the browser, which
will give the reveal.

001 .block {
002 width: 100%; height: 100%;
003 background-attachment: fixed;
004 background-position: 50%;
005 background-repeat: no-repeat;
006 position: relative;
007 }

05 Add the images

Finally, add the background images to each of
the boxes. These are the bicycles that are revealed as
each content section scrolls up the page. Save the
document now and view in the browser to see the
eff ect in all its glory.

001 #box1 { background-image:
url(cycle1. png); }
002 #box2 { background-image:
url(cycle2. png); }
003 #box3 { background-image:
url(cycle3. png); }
004 </style>
005

 TECHNIQUE
Background
illustrations

The backgrounds of the cycles are simple two-tone images that put the cycle in a scene. Here we reproduce those scenes in Illustrator, but you could also use Photoshop.


A1 A new document 

Open Illustrator and choose a light pastel colour as the background colour, then select the Rectangle tool and draw the shape to fill the background of the document. Now choose a darker shade of the same colour for the foreground detail.

B1 Draw the foreground

Using the drawing tools in Illustrator draw some simple shapes as the foreground detail of the image. A good tip is to use the background colour to enable more detail to be added on top of the shapes. For example, here we’ve added stripes to the big top tent.

C1 Save for Web

Finish the illustration by adding a few more details, such as more tents. Now choose Save for Web from the file menu and save the illustration in a suitable format. You can also save the image as an SVG (Scalable Vector Graphic) for use on the page.