Z-i-G-Z-a-G

Créer une galerie d’images — Javascript & jQuery


Cette semaine, je vous propose de créer votre propre galerie d’images à insérer dans votre site. Il existe de nombreux sites qui proposent des galeries toutes faites, mais le problème c’est que lorsque que vous décidez de modifier un petit peu les paramètres comme le menu ou la manière d’interagir avec les images, cela devient tout de suite compliqué. Là, en développant vous même votre galerie, vous pourrez à votre guise modifier tout ce que vous désirerez dans les moindres détails.
Pour se faire, nous allons dans un premier temps créer une liste en langage html contenant nos images, nous styliserons le tout avec du css puis nous terminerons par du javascript et de la bibliothèque jQuery pour rendre interactive notre galerie.

gggalery-1.0 (suite…)

Share Button

Rubrique: Section 17 | 12 Commentaires


Dr Strangelove — Pablo Ferro


Strangelove

  • Titre français: Docteur Folamour
  • Réalisation: Pablo Ferro
  • Sortie: 1964

 

Activités professionnelles et salon Offprint en sus, je n’ai malheureusement pas eu le temps de rédiger le dernier article « Popcorn ». Je vous laisse donc, pour le moment, et avant quelques explications et notes de références, avec le générique du célèbre graphiste américain Pablo Ferro pour le film Docteur Folamour (Dr Strangelove), réalisé en 1964 par Stanley Kubrick.

Comme promis si dessus, voici quelques lignes concernant ce générique de Pablo Ferro, réalisé pour le film Dr Strangelove de l’un des plus grand cinéaste du xxe siècle, l’américain Stanley Kubrick. Rien ne sert d’évoquer une courte liste de ses œuvres, nous connaissons sa filmographie presque par cœur tant l’esthétique de ses films à marquée le 7e art. C’est d’ailleurs avec ce film, dont le titre complet est Docteur Folamour ou: comment j’ai appris à ne plus m’en faire et à aimer la bombe (Dr Strangelove or: How I Learned to Stop Worrying and Love the Bomb), qu’il se vera récompensé d’un BAFTA (British Academy of Film and Television Arts) du meilleur film en 1965. En 2000, il est classé par l’American Film Institute — troisième meilleur film « humoristique » américain.
C’est donc une lourde tâche, de se voir assigné à la conception d’un générique avec le génie et l’exigence que l’on connait de Kubrick. Et c’est le graphiste américain Pablo ferro, jusqu’alors connu pour ses procédés graphiques pour la publicité (Kubrick le choisira notamment grâce à son sens de l’ironie) mais novice dans le domaine des génériques, puisque celui-ci sera le premier d’une longue série. On compte parmi non loin de 100 réalisations, le générique des films L’Affaire Thomas Crown (de Norman Jewison en 1968), Orange mécanique (de Stanley Kubrick en 1971), Beetle Juice (de Tim Burton en 1988), ou encore L.A. Confidential (de Curtis Hanson sorti en 1997).

Le style de Pablo Ferro est assez reconnaissable car il utilise souvent une typographie manuscrite, élancée et fine, avec des jeux de taille différentes très bien composée et parfaitement cadrée. Pour Dr Strangelove les crédits sous ce style typographique apparaissent sur une succession de 4 plans (5 si on compte le premier qui n’apparaît que furtivement), montrant un ravitaillement aérien d’un avion de la U.S. Air force (le B-52 bien entendu avec son capitaine « yahhhooo !! »), qui dure le temps du générique.

La bande sonore est signée du compositeur et producteur britannique Laurie Johnson, qui à notamment travailler sur des films tel que And Soon the Darkness (de Robert Fuest en 1970), mais beaucoup plus pour des séries télévisés britanniques comme Chapeau melon et bottes de cuir (de Sydney Newman et Leonard Whitede de 1965 à 1969) ou L’Aventurier (de Monty Berman et Dennis Spooner en 1972).

Son style particulier, nous le retrouvons, prêt de 33 ans plus tard dans le générique d’un film de Barry Sonnenfeld, sorti en 1997 et adapté de la série de comics du même nom, Men in Black (créée par Lowell Cunningham en 1990). Pablo Ferro avait d’ailleurs travaillé pendant sa jeunesse à « Atlas comics » au côté de Stan Lee (futur éditeur de Marvel Comics). Pour ce générique accompagnant le film, on retrouve de la même manière que pour celui de Dr Strangelove, un jeu de composition avec ce même style typographique, par dessus les tribulations nocturne d’une libellule. Il travaillera également sur les deux autres opus de la saga (Men In Black II en 2002 et Men In Black III sorti en 2012, toujours de Barry Sonnenfeld), qui reprendront exactement le même principe.

Share Button

Rubrique: Popcorn | Commenter


Flux messages — API Twitter


Après avoir découvert comment intégrer un flux de photos via l’API d’Instagram il y a deux semaines, c’est maintenant au tour de l’API de Twitter. La démarche est un peu moins complexe que pour celle d’Instagram et cela vous permettra d’afficher sur votre site les derniers tweets de votre compte. Twitter est un outil de microblogage (un dérivé concis du blog, qui permet de publier des articles très cours). Il permet à un utilisateur d’envoyer gratuitement de brefs messages, appelés tweets, sur internet, par messagerie instantanée ou par SMS. Ces messages sont limités à 140 caractères*.

twitter2

Pour ceux qui ne connaissent pas le terme API, vous pouvez trouver une brève signification dans le précedant article de cette section, Flux photos — API Instagram.

CRÉER UNE APPLICATION

Commençons par nous rendre sur l’Application Management de Twitter à cette adresse: https://apps.twitter.com, afin de créer notre API Twitter.
La première étape consiste à créer cette application, en cliquant sur « Create New App« , assurez vous d’être connecté à votre compte Twitter. Si vous n’avez pas de compte, créez en un et revenez à l’adresse précédente.

Après avoir cliqué, nous sommes invités à remplir les détails de cette nouvelle application, pour se faire, remplissez les différents formulaires.

create (suite…)

Share Button

Rubrique: Section 17 | Commenter


Kiss Kiss Bang Bang — Danny Yount


kisskissbangbang

  • Titre français: Kiss Kiss Bang Bang
  • Réalisation: Shane Black
  • Sortie: 2005

 

Cette semaine, c’est au tour du générique du film Kiss Kiss Bang Bang réalisé par Shane Black et conçu par l’américain Danny Yount. Il raconte les déboires du voleur Harry Lockhart, interprété par l’acteur Robert Downey Jr. L’année de sa sortie en 2005, le film est présenté hors compétition au Festival de Cannes, puis l’année suivante, il reçoit un Empire Award du meilleur thriller. C’est le premier film du scénariste et réalisateur américain Shane Black, qui est l’auteur de nombreux scénarios de films d’actions comme L’Arme fatale 1 & 2 (de Richard Donner), Le Dernier Samaritain (de Tony Scott), ou encore Last Action Hero (de John McTiernan) et évidemment de ses propres films. Voici le travail de Danny Yount sur le générique du film Kiss Kiss Bang Bang:

Shane Black confie donc la réalisation de cette séquence titre à Danny Yount, qui à également conçu le générique des films Rock’n’Rolla (de Guy Ritchie), Iron Man (réalisé par Jon Favreau, et tiré du comics éponyme publié par Marvel) ainsi que celui de Iron Man 3 (de Shane Black, qui constitue la deuxième collaboration — Black/Yount — sur les deux seul film en tant que réalisateur pour Black). Yount travail également pour la télévision puisqu’il est aussi à l’origine du générique de la série américaine Six Feet Under (créée par Alan Ball en 2001) avec lequel il a reçu un Emmy Award.
Le graphiste est membre de l’Alliance graphique internationale (AGI) et travail au sein du studio Prologue au côté de Simon Clowes et de Kyle Cooper le fondateur de ce studio. Vous pouvez retrouver une interview de Danny Yount, dans laquelle il parle de sa carrière et de son travail sur le site digup.tv conçu par le studio de création numérique Cellules évoqué dans cet article le mois dernier.

Pour cette séquence, Danny Yount utilise un style d’animation et un choix colorimétrique proche de celui des années 1960. Le choix du noir, du rouge ou encore du blanc cassé donne un style graphique assez fort qui n’est pas sans rappeler l’esthétique des affiches de Saul Bass (on y revient).

Affiche du film Vertigo (1958) et de West Side Story (1961), réalisées par Saul Bass.

Affiche du film Vertigo (1958) et de West Side Story (1961), réalisées par Saul Bass.

L’animation et l’apparition des éléments présents dans le générique sont parfaitement synchronisés avec la bande sonore, ce qui ajoute du rythme ainsi qu’une certaine immersion dans l’atmosphère « suspense » du générique qui évoque celui du film. Elle est signée du compositeur et monteur américain John Ottman, qui à l’habitude de travailler avec le réalisateur Brian Singer. On lui doit parmit plus d’une trentaine de compositions pour le cinéma, les musiques de Ennemi public et Usual Suspects (de Bryan Singer), Gothika (de Mathieu Kassovitz) ou encore le film d’horreur Esther (de Jaume Collet-Serra). John Ottman a d’ailleurs été nommé dans la catégorie meilleure musique, pour Kiss Kiss Bang Bang, lors des Saturn Awards de 2006.

Share Button

Rubrique: Popcorn | Commenter


Flux photos — API Instagram


Aujourd’hui, je vous propose de découvrir l’API d’Instagram qui vous permettra d’afficher sur votre site web vos dernières images postées depuis l’application. Instagram est une application, disponible sur plates-formes mobiles de type iOS, Android et Windows Phone, qui permet de partager ses photographies et ses vidéos avec son réseau d’amis, de noter et de laisser des commentaires sur les clichés déposés par les autres utilisateurs*.

instagram

Tout d’abord pour ceux qui ne connaissent pas le terme API, en informatique, une interface de programmation (API, pour Application Programming Interface) est un ensemble normalisé de classes, de méthodes ou de fonctions qui sert de façade par laquelle un logiciel offre des services à d’autres logiciels. Elle est offerte par une bibliothèque logicielle ou un service web, le plus souvent accompagnée d’une description qui spécifie comment des programmes consommateurs peuvent se servir des fonctionnalités du programme fournisseur*.

CRÉER UNE APPLICATION

Pour commencer je vous invite à vous rendre sur le coin des développeurs sur le site d’Instagram à l’adresse: http://instagram.com/developer/
La première étape consiste à crée cette application, en cliquant sur Register Your Application (voir photo ci-dessous) une fois vous être préalablement connecté à votre compte Instagram. Si vous n’avez pas de compte, créez en un et revenez à l’adresse précédente.

Register Your Application
(suite…)

Share Button

Rubrique: Section 17 | 2 Commentaires


The Lego Movie — Brian Mah (Alma Mater)


lego_movie

  • Titre français: La grande aventure Lego
  • Réalisation: Phil Lord & Chris Miller
  • Sortie: 2014

 

Cette semaine je vous propose non pas de découvrir une séquence d’ouverture, mais avec un générique de fin cette fois-ci. Et c’est l’occasion de replonger dans vos souvenirs d’enfance, car ce générique est entièrement réalisé avec des pièces de la célèbre firme Danoise Lego, qui ont surement comme moi fait votre bonheur lorsque vous étiez plus jeune. Bien que le film utilise parfois quelques effets spéciaux, le générique lui, est totalement réel et a entièrement été réalisé en stop motion (afin de garder une esthétique propre à celle de l’univers Lego) par la société Stoopid Buddy Stoodios sous la direction du studio Alma Mater. Ce studio spécialisé dans l’animation est dirigé par Brian Mah (le directeur créatif), James Anderson (le superviseur des effets visuels) et Kathy Kelehan (la productrice exécutif), ils ont également travaillés sur le générique du film 21 Jump Street avec les mêmes réalisateurs. Voici en image la magie de Lego et de l’animation en volume:

Jusqu’à présent, à ma connaissance, jamais le potentiel des briques de Lego a été utilisé pour créer un générique de film. C’est donc tout naturellement que le studio Alma Mater donne justice au jouet danois, en exploitant intelligemment les capacitées de création de ces derniers. Comme spécifié plus haut, ce générique utilise la technique du stop motion (autrement dit animation en volume ou animation image par image), qui consiste à cadrer et prendre photo par photo le déplacement des objets constituant la scène. Lorsque les photos sont lu à la suite à une vitesse normale, la scène semble animée. La réalisation de ces scènes, et donc des différentes maquettes, à été confiée et assemblée par le parc Legoland à Carlsbad en Californie. Cette séquence finale reprend des scènes et des paysages présents tout au long du film et les animations sont souvent inspirées de la grande communauté de fans présent sur le net.


Les différents crédits présents dans cette séquence devaient à l’origine être construits aussi avec des pièces de Lego, mais cela nécessitait pas loin de 10 000 pièces par scènes, en raison de 30 scènes environ, cela devait approcher prêt de 30 000 Legos pour un peu moins de 3mn de générique. En plus, la construction de ce générique à débuté un an avant la sortie du film, en raison du long travail d’assemblage, alors que le casting n’était pas totalement arrêté. C’est donc avec des étiquettes Dymo, qui collent très bien à l’esprit de la création « fait-mains », qu’apparaitrons les différents crédits. Ce principe à permis d’économiser quelques 7 000 pièces par scène pour un total de plus de 60 000 pièces pour construire toute les séquences de ce générique. Le logiciel Lego digital designer (gratuit) à permit de faire quelques essais de décors et ainsi estimer le nombre nécessaire de briques pour chaque scène.

Le titre dynamique et très entrainant « Everything is Awesome ! », qui reviens dans ce générique de fin est interprété par les jumelles Tegan & Sara en collaboration avec le trio comique The Lonely Island (emmené par l’humoriste et acteur américain Andy Samberg, qui avait d’ailleurs travaillé pour les deux réalisateurs Chris Miller et Phil Lord en doublant un personnage du film Tempête de boulettes géantes) sorti en 2009. Ce titre ainsi que toutes les chansons de la bande originale du film sont écrites et composées par Mark Mothersbaugh, qui à notamment participé aux bandes sonores des films 21 & 22 Jump Street (de Phil Lord et Chris Miller), La famille Tenenbaum (de Wes Anderson) où encore la musique de la campagne publicitaire Get A Mac (de l’entreprise Apple).

♪ Tout est super géniale ! ♪ 😉

Share Button

Rubrique: Popcorn | Commenter


Alien — Richard Greenberg


alien

  • Titre français: Alien, le huitième passager
  • Réalisation: Ridley Scott
  • Sortie: 1979

 

Si vous vous intéressez de près ou de loin à l’univers vidéoludique en plus de celui du cinéma, vous avez peut-être joué ou dû moins entendu parler de la sortie, il y tout juste deux semaines, d’un nouveau jeu vidéo intitulé Alien: Isolation édité par Sega, développé par The Creative Assembly et jouable sur PC et consoles de salon. L’aventure se déroule 14 ans après les événements du film Alien, Le huitième passager et c’est justement le générique de ce film que je vous propose de revoir cette semaine.

Ce générique est signé Richard Greenberg, d’origine britannique, il a fondé une agence spécialisée dans les effets spéciaux, la publicité et le marketing appelé R/Greenberg Associates (maintenant R/GA) avec son frère Robert Greenberg en 1977 et qui fait partie de d’Interpublic Group (IPG), une des quatre plus grosses sociétés de publicité mondiale. C’est avec le générique de Superman en 1978 (de Richard Donner) qu’ils se font connaître, ils travaillerons plus tard sur le générique de Les Incorruptibles (de Brian De Palma), Dead Zone (de David Cronenberg, adapté du roman éponyme de Stephen King) ou encore Dirty Dancing (d’Emile Ardolino).

À l’image du film dont il est issu, le générique de Richard Greenberg joue sur l’apparition et l’attente, rappelant le huitième passager qui se dévoile petit à petit au cour du film créant une partie de cache-cache avec l’équipage du vaisseau Nostromo. L’apparition très mécanique et symétrique de petites formes rectangulaires au dessus des crédits, créer au départ une interrogation ainsi qu’une certaine tension parmis ce paysage spatiale et sombre. Le spectateur découvre au fur et à mesure que ses rectangles forment un mot, celui du titre du film. En augmentant ainsi l’interlignage du titre, Richard Greenberg surprends le spectateur qui ne s’attend pas vraiment à lire quelque chose en raison de cette forte distance et du choix d’une police de caractères linéale très géométrique (la Futura) découpé.

La musique qui accompagne ce jeu typographique est du compositeur américain Jerry Goldsmith (aidé par Lionnel Newman) qui s’est fait connaitre essentiellement pour avoir composé plus d’une centaine de films. On peux citer La Planète des singes (de Franklin J. Schaffner), Total Recall (de Paul Verhoeven), les Gremlins 1 & 2 (de Joe Dante) ou encore la trilogie des films Rambo.

Share Button

Rubrique: Popcorn | Commenter


Archifoto 14 — Les couleurs de l’architecture


Si vous êtes toujours à Strasbourg ce weekend et que vous aimez la photo, La Chambre (un espace d’exposition et de formation à l’image) organise la troisième édition d’Archifoto, international awards of architectural photography. Cette année le thème se porte sur Les couleurs de l’architecture, vous pouvez y découvrir la sélection et les travaux primés à l’occasion de cette exposition. 166 photographes issues de 15 pays ont concouru lors de cette édition.

ARCHIFOTO-14-620x330

Cette événement a pour ambition de devenir le prix de référence récompensant les photographes dont le regard aide à la compréhension de l’architecture, du paysage urbain, du monde…

Infos pratiques:
Du 17 octobre au 30 novembre 2014,
du mercredi au dimanche: 14h – 19h
→ Vernissage ce soir à 18h et remise du prix au lauréat !
La Chambre, 4 place d’Austerlitz, Strasbourg
: Entrée libre
: +33 (0)3 88 36 65 38

Voici le programme de La Chambre: Saison 2014 – 2015.

Share Button

Rubrique: Weekend | Commenter


Se7en — Kyle Cooper


se7en

  • Titre français: Seven
  • Réalisation: David Fincher
  • Sortie: 1995

 

Cette semaine, je vous propose de revoir l’un des génériques les plus apprécié et qui reviens souvent dans les « top ten » des meilleurs génériques cinématographiques. Ce générique est celui qui accompagne le très troublant thriller de David Fincher, Seven (ou parfois orthographié Se7en), réalisé en 1995. Il est signé du designer graphique Kyle Cooper, membre de l’AGI (Alliance graphique internationale) et fondateur du studio Prologue à Los Angeles (qui compte parmi ses membres, Simon Clowes que nous avions vu il y a deux semaines pour le générique de X-men: First Class). Cooper à appris l’art graphique à l’université de Yale dans le Connecticut, sous la direction d’un des plus célèbres graphistes américains: Paul Rand. Il est également à l’origine des génériques des films Mission impossible (de Brian De Palma), Spider-Man et Spider-Man 2 (de Sam Raimi), L’Armée des morts (de Zack Snyder), et c’est aussi lui à qui l’on doit les générique de la série The Walking Dead (adaptée par Frank Darabont et Robert Kirkman, les créateur de la bande dessinée du même nom) et de American Horror Story (de Ryan Murphy et Brad Falchuk).

Un goût certain pour le drame et l’horreur donc ! Et c’est principalement suite au générique de Seven que Kyle Cooper deviens un exemple auquel aspire une jeune génération du motion design et une icône du genre. En effet, les plans (absents dans le film) qui composent cette séquence titre sont magistralement filmés et montés d’une manière à perturber en quelques secondes le spectateur. Même en dehors du contexte du film, il garde tout son attrait et parviens à retranscrire à lui seul un malêtre.

Les crédits apparaissent dans une police « manuaire », comme gravés à l’outil, mixés avec une Helvetica qui brise plusieurs règles de lisibilité. Les titres sont « sales », tremblant et agressent volontairement l’œil. Tout comme l’esthétique des images qui se bousculent et sautent comme un mauvais vidéo-projecteur, soulignée par des filtres de couleurs jouant sur les codes du film noir. Elle ne sont faites que de gros plans mais suggèrent parfaitement les actions de l’antagoniste et la préparation méticuleuse d’un document (la création des livres, les empreintes digitales,…). La scène introduit le thème de l’action murement réfléchie et longuement préparée du meurtrier. Voici le résultat:

C’est le groupe américain Nine Inch Nails (non-crédité au générique) tenu par Trent Reznor, qui compose et joue la musique stridente et psychédélique de ce générique intitulé « closer (precursor) ». Il a également composé les bandes sonores de deux autres films de David Fincher: The Social Network (2010) et Millénium: Les Hommes qui n’aimaient pas les femmes (2011).

Si vous y avez prêté attention, le nom de Kevin Spacey n’apparait pas au générique, ce n’est pas un oubli mais une décision du réalisateur qui voulait garder le mystère sur l’apparence et l’identité du tueur. Cependant, l’acteur est crédité en premier dans le générique final.

Share Button

Rubrique: Popcorn | Commenter


Pierre Faedi — Gargarismes


Si vous êtes du côté de Strasbourg ce weekend, je vous propose d’aller voir l’exposition d’un ancien diplômé en graphisme aux Arts Décoratif de Strasbourg (2012).

Pierre Faedi

Pierre Faedi a de multiples activités, dont la pratique du dessin. Les procédés d’impressions sont pour lui un moyen plutôt qu’une fin, qui lui permettent d’utiliser la trame et le rythme comme éléments à part entière dans ses illustrations, dont la série « Gargarismes » fait partie.

Infos pratiques:
Du 10 octobre au 4 novembre 2014,
du mardi au samedi: 10h – 12h30 & 14h – 19h
→ Vernissage ce soir à 18h
Séries Graphiques, 5 rue de la douane, Strasbourg
: Gratuit
T : Porte de L’Hôpital – Tram A ou D
B : Saint-Nicolas, Ligne 10 ou Ancienne Douane, Ligne 14/24

NOTE: Demain (samedi 11 octobre), il anime avec l’aide de Félix Csech un atelier collage, matières, textures et impressions. L’atelier est ouvert à tous, à la librairie Series Graphiques de 15h à 18h.
Durée 3h00 / 10 personnes / 15€ / Réservation: contact@series-graphiques.com

Le site de l’artiste www.pierre-faedi.com.

Share Button

Rubrique: Weekend | Commenter