miércoles, octubre 24, 2012

Webdagene 2012 process (english)

WEBDAGENE 2012, the event I talked about in my last post, and for which I made the illustrations took place the last week of September. This has been the most complex project in which I've been been involved to date, and one of the ones I enjoyed the most. This is why I would like to share a bit of the process we went through.

Inge Fossland and Thord Foss from Netlife Research contacted me after finding my Quadrophenia illustration in DABBAA (a directory of former students of the  University of Fine Arts of Salamanca). I do not quite understand the Salamanca-Oslo connection, but still is something wonderful. My illustration seemed to fit their needs quite well.

The theme this year, "Vs.", referred to the intention of the organizers of facing the speakers against each other instead of the usual linear succession of lectures. 

The illustration had to depict this confrontation avoiding any kind of graphical violence. After many proposals, we decided to place the action in an office. 

That  idea seemed to work pretty good. The profile of the conference audience is very wide, so we created an office that could be like the one of anybody there. On the other side, this setting gave us the opportunity to develope stories in an enviroment full of iconic elements and characters easy to recognise. For instance setting two gangs faced against (pencils Vs. Pens), using the telephones as telecomunications gear, the wastepaper baskets as drums, a fan as a radio antenna, etc. Inge and Thord were a endless source of ideas of this kind. In order to drawing them all, we would have needed a whole building instead an office.
 
 On the technical side, the illustrations had to be context sensitive and respond according to the different platforms from which the users were visiting the site. Resizing the browser window shows how, at a certain sizes, the illustration adapts to the new format.
This animation shows how the illustration 
changes depending on the size of the browser window 
(desktop, tablet and smart phone).



 


Thord and Inge wanted to experiment with the Parallax effect, therefore the characters had to be arranged in separate layers in order to create a gently movement effect when the site was resized horizontally. This had sense due to the plot that joins the three platforms (desktop, tablet, smartphone): two gangs faced  and approaching until they crash against each other. But we found out that to expect the user to resize the browser just to appreciate the effect, meant to add a unnecessary complexity. The effect had to be as subtle as to not hinder the users experience, but adding interest to the site. After some tries we decided to add the movement in a vertical motion, when the scroll is used. This created a subtle effect of displacement of the horizon line, emphasized by the different speed of the displacement of the layers.


Each illustration has several layers  
in which elements are arranged.





Thord and Inge created a .psd file in whom I was able to add all the elements I was creating. This file was organized in folders, so I could send to them the successive updates of the illustrations at the definitive order, size and disposition.




And, of course, there were a huge variety of applications related to the event in whose the illustrations had to be printed out (catalogs, flyers, programs, posters, acreditations, t-shirts...), therefore the elements had to be independent and versatile enough as to hold up this wide range of adaptations. So that's why every single element was created apart. It being an animation instead a static image with fixed overlaps, almost every character were drawn up in its whole.


Some of the characters and elements.







PROCESS


Due to the complexity of this illustrations I rather begin with a small pencil sketch, although in short time there will be nothing left of it. With the pencil, I can face quite fast the composition and the mood of the image, not getting lost in the details. It's a matter of pleasure as well. Make some handmade work is not going to affect the final result, but jumping back and forth between the computer an the paper, helps me to keep myself motivated and interested. There are even times where I sketch and look for ideas using acryl, inks or collages. None of this will stay in the final image, and even so, it is essential for me.

 Here you can see some of the stages of the process. Anyway, the real
walk through is not so linear at all.





Pencil sketches allow me to start quite early to work over the design mockups. Afterwards, I create all the single elements in Illustrator, where I build the illustration over the background image of the website body. Finally, I add textures and shadows In Photoshop, but character by character. The final files before flattening were massive!

Some of the various mockups we tried.




And this is it.

To work with Thord e Inge, from NETLIFE RESEARCH has been an unbelievable experience. Not only due to their professionalism and the quality of their proyects, but for the confidence, the attention, their encouraging words and all the details, during the two months we were working toghether and afterwards, keeping me updated about the event and the reactions about our work.

Thord, Inge: from here I want to say Thank you again!

If you want to know more, you can check out here photos and videos of WEBDAGENE 2012.

I hope you found this post interesting.

Thanks for reading!




No hay comentarios: