Catégorie : Didacticiel

Donnez vie à vos photos : les bases du gif animé

Je dédicace cet article à Corinne… elle se reconnaîtra 🙂

Une photo si elle est bien prise, peut vous emporter dans un tourbillon d’émotions dans une explosion de couleurs et de contrastes. Mais une photo à un défaut dont on aimerait parfois se passer : l’absence d’écoulement du temps, l’absence d’animation. Sans le temps, c’est l’absence de mouvement, le temps figé, l’immobilisme. Une photo c’est une sculpture, immuable et éternelle. Et ce, même si elle a été prise en plein mouvement. Ce dernier restera figé… à tout jamais.

Oui, mais le numérique permet tellement plus, même avec un appareil photo. Un format d’image permet de faire du film, sans être vraiment un film. Ce format c’est le GIF (comme le XLS pour le format tableur ou le DOC pour le traitement de texte). Il permet de créer de l’animation sans camescope, de faire un gif animé, et voici comment.

Les bases du GIF animé

Prenons l’exemple de l’objet symbolique de cette fin d’année qu’est le sapin de Noêl. Il n’y a pas plus figé qu’un sapin de Noêl… mais pour palier à cet immobilisme, vous aurez pris soin de le parer de « trucs » qui bougent comme des mobiles ou des guirlandes lumineuses (pour certains, un chat dans l’appartement suffit à donner vie au sapin, mais c’est selon).

Si on a pas de chat donc, et au lieu de ne prendre qu’une seule photo, nous allons en prendre trois (ou plus peu importe, c’est le poids de votre image qui en pâtira). A chaque cliché, nous allons nous décaler de 10 cm sur la droite pour obtenir ces trois vues.

[symple_column size= »one-third » position= »first »]

[/symple_column]

[symple_column size= »one-third » position= »second »]

[/symple_column]

[symple_column size= »one-third » position= »last »]

[/symple_column]

On ouvre ces trois images dans notre logiciel favori (dans mon cas Photoshop, mais je vous donne une liste d’outils en ligne pour faire la même chose à la fin de cet article), puis on les place l’une en dessous de l’autre dans le module des calques.

On ouvre ensuite le module dédié à l’opération : Fenêtre > Animation (cf capture ci-capture) et on suit la procédure suivante :
– on active le calque de la photo qui sera la première image
– dans le module d’animation, on crée une image
– on active le calque de la seconde image
– dans le module d’animation, on crée une image
– on active le calque de la troisième image
– dans le module d’animation, on crée une image
– etc.

On vérifie bien que l’animation sera jouée en boucle, que chaque image sera jouée assez longtemps et on génère le GIF animé.
Vous allez rire mais… c’est tout.

Bien sûr, si vos images sont trop décalées les unes par rapport aux autres, il vous faudra les redresser, les recadrer, parfois même changer la luminosité qui aura peut-être changé entre deux photos.

Une fois votre gif généré, vous avez une image qui bouge, comme ce que l’on voit de plus en plus sur le web actuellement. Des mini films ultra répétitifs qui font parfois vomir, mais qui souvent sont très amusant. Moi, mon sapin, ça donne ça (cliquez pour agrandir).

Bien sûr avec un peu de talent et de patience on peu faire d’autres choses bien plus fun comme une partie de tennis entre le capitaine Kirk et le docteur McCoy, ou des « trucs qui donnent mal à la tête ».

Une autre méthode est d’utiliser justement un camescope et à partir d’un logiciel de montage, d’en extraire quelques images. C’est la méthode prisée pour les gif animé tirés de film. C’est un peu plus complexe

Les outils en ligne

Avec ces outils, c’est encore plus simple : vous « uploadez » un certain nombre de photos, vous réglez la vitesse et zou, vous générez votre gif animé.
gifmaker.me : un outil dédié à la création de gif animé à partir de photo.
makeagif.com : ce service propose la création de gif animé à partir de photos ou de vidéo youtube, ou capturée depuis votre webcam.

[symple_column size= »one-half » position= »first »]

[/symple_column]

[symple_column size= »one-half » position= »last »]

[/symple_column]

5 décembre 2013
Quels sont les critères pour réussir une affiche événementielle ?
Nous ne sommes pas tous graphistes… et si vous croyiez le contraire vous avez probablement oublié qu’il existait des écoles spécialisées dans la formation de graphistes ou de designer. Mais je n’oublie pas d’où je viens et je sais qu’il est également possible de tout trouver sur internet, y compris les informations permettant de progresser dans tous les domaines, graphisme compris.

Tout le monde peut vouloir créer un événement sans avoir les moyens de se payer un graphiste. Voici donc quelques directives simples à suivre pour réussir votre prochaine affiche.

Il est bien sûr possible de passer par un graphiste. Dans ce cas je vous suggère de jeter un oeil sur mon portfolio et de me contacter. Nous réfléchirons ensemble à votre projet.

Réaliser une affiche événementielle

Il n’y a que 2 paramètres à prendre en compte pour une bonne affiche : les informations de bases et les contrastes. Voyons ensemble comme les aborder.

Les informations de bases

Les questions auxquelles vous devez répondre sont simples et devront apparaître aux lecteurs en premier à la lecture de votre affiche :
- Quoi ? Quel est votre événement ? Un salon de créateurs, un vide grenier, une exposition, etc.
- Quand ? Quelles sont les dates on l’on pourra accéder à votre événement (ainsi que les horaires)
- Ou ? C’est la ville et/ou le quartier qui intéresse le lecteur.
Comme vous pouvez le voir sur l’affiche de gauche, seules deux questions sur les trois sont accessibles à la première lecture : Quoi et Quand. Impossible de savoir ou se rendre avant d’avoir lu l’ensemble de l’affiche (je reviendrais plus bas sur le contraste et le trop plein de textes).

Une autre question peut-être visible dans cette premier couche d’informations est le Pourquoi ou Pour qui ?
En effet si votre événement doit avoir des retombées pour une cause particulière, c’est important de le signaler (ex. « Tous les bénéfices iront à mes bonnes oeuvres. »)

Si ces informations sont les premières à être vues par le lecteur vous avez gagné. Mais cela ne veut pas dire qu’elles doivent être inscrites en premier, tout en haut de votre affiche. Ces informations doivent juste être plus lisibles que les autres, plus grosses, plus grasses, plus grandes que le reste, de façon à ce qu’elles attirent immanquablement l’oeil du lecteur.

Ensuite, vous pourrez ajouter d’autres informations comme :
- Qui ? Nom de l’organisateur ou organisation.
- Combien ? Le tarif d’entrée.
Indiquer un numéro de téléphone, une adresse mail ou l’URL d’un site officiel peut avoir un intérêt dans certain cas, pour obtenir plus d’informations sur l’événement.

Si vous avez fait appel à des sponsors, vous n’oublierez bien évidemment pas de les citer par l’apposition de leurs logotypes. En général on prévoit une partie au bas de l’affiche, souvent blanche pour les aligner. Ainsi, ils ne viennent pas perturber le message de l’affiche.

Mais ne croyez pas que cela soit évident ! Même pour une organisation importante. Certaines affiches comme celle qui suit, ne répondent pas à toutes les questions. Le salon du livre (ici à droite) ne donne pas de rendez-vous dans un lieu particulier. Etonnant non ?
C’est pourtant un des plus gros salon du livre se déroulant à la porte de Versailles de Paris.
En revanche on y voit bien le Quoi et le Quand avec un très joli visuel très accrocheur.
Peut mieux faire donc 🙂

Cela étant dit, on peut très bien avoir accès à toutes les informations sans surcharger une affiche comme ci-contre avec le salon du chocolat. Très simple, très « légère » (ça reste du chocolat 🙂 , toutes les questions primordiales y trouvent une réponse lisible.

Les contrastes

Pour réussir une affiche nous allons pousser le bouchon un peu plus loin et parler des contrastes. Le contraste est un concept simple : ce qui est en dessous, ne doit pas perturber la lecture de ce qui est au dessus.

Quelques chiffres à noter :

Il y a dans le monde près de 285 millions de personnes qui présentent une déficience visuelle: […] 246 millions présentent une baisse de l’acuité visuelle.
Organisation Mondiale de la Santé

selon l’INSEE (2002), 3,346 millions de personnes en France déclaraient avoir une déficience visuelle…
Openweb

On doit donc dans le processus de création penser la visibilité de notre affiche dans le but d’être lue par le plus grand nombre de personnes. Pour reprendre l’exemple de notre affiche réussit du Salon du Chocolat, le point noir de cette création c’est le reflet du mot Chocolat. Il empêche une bonne lisibilité de la baseline (le slogan) de l’événement : « Le mondial du chocolat & du cacao ».

Si nous reprenons notre contre-exemple, l’affiche de la bourse aux vêtements en haut de l’article, on peut voir que le contraste n’est pas assez marqué au niveau des photos. Les lettres « B » et « SE » du mot « Bourse » sont illisibles et le mot « aux » est perturbé à cause du col du t-shirt posé en dessous.

Cette même affiche présente également un trop plein de textes. En effet, à force de vouloir tout mettre sur une affiche, elle en devient illisible. Elle rebute même à la lecture. Restez conscient que votre affiche doit vivre seule sur le support qui l’accueillera, mais que le lecteur intéressé tentera d’en savoir plus. Un événement de créateurs par exemple ne doit pas forcément décrire l’ensemble des créations de chacun des exposants. Quelques mots clés suffiront pour attirer le lecteur : bijoux, sculpture, vêtements pour enfants, etc.

Si malgré tout, vous n’arrivez pas à rendre votre texte lisible, il existe un « truc » : mettre un fond à fort contraste juste en dessous du texte.
- un rectangle de couleur
- une ombre sous le texte
Pour tester vos couleurs et les contrastes possibles, il existe plusieurs outils en ligne dont :
Une dernière chose : pour réussir une affiche, n’hésitez pas à la montrer à votre entourage. Il est très difficile de prendre du recul sur son travail et grâce à un oeil neuf, vous pourrez reprendre des oublis ou peaufiner votre message. Gardez quand même en tête que tout est perfectible, et qu’au bout d’un moment, vous êtes seul maître à bord (je parle bien sûr d’un particulier. Pour un graphiste professionnel travaillant pour un client, c’est pas la même chanson… mes collègues savent de quoi je parle)

Voici une affiche qui répond à ces quelques critères concernant un stage d’arts martiaux.
On ne dit pas tous mais le principal est dit.

Mentions légales

Une dernière chose à faire lorsque vous créerez votre affiche ou vos flyers, sera d’inclure les mentions légales, sous peine d’encourir une amende de plusieurs milliers d’euros.
– Si vous faites appel à un imprimeur, ses noms et adresses doivent figurer ;
– Si vous imprimer vous-même vos affiches vous indiquerez INPS (Imprimé Par Nos Soins) ;
– Si vous êtes un professionnel, vous devrez également indiquer vos numéros RCS ainsi que votre capital ;
– Si vous distribuez vos support de communication, la mention « Ne pas jeter sur la voie publique » est obligatoire.

Cadeau : Tous le monde est graphiste

En cadeau je vous laisse lire ce remarquable ouvrage intitulé « Tous le monde est graphiste ».

En savoir plus sur la création d’affiche évènementielle

Les articles
Créer son affiche en ligne
- Canva
- Pixteller
- Posterini
- Designcap
Trouver ses nuances de couleurs
15 novembre 2013
Game of Clones : les bases du photo-montage

Retour à « Retouches et montages photo »

Niveau avancé

Je vous présente aujourd’hui le résultat d’un travail réunissant : séance photos, acting, et photo-montage. Je vais vous expliquer les grandes lignes sans rentrer dans le détail. Cet article n’a pas vocation à vous prendre par la main, mais à attiser votre curiosité, et peut-être vous pousser à essayer par vous-même.

Game of Clones, c’est parti !

Tout d’abord bien sûr il vous faut une idée, et comme ça faisait longtemps que je voulais me faire des petits frères… je me suis dit : « mon Gilou », parce que j’aime bien m’appeler mon Gilou, « Mon Gilou, tu es dans l’appartement idéal pour enfin donner vie à ton idée. Go go go ! ».

Donc je suis parti sur un principe simple : une partie sur console de jeu avec 2 de mes clones.

Le matériel

Auto-motivé donc et armé du matériel listé ci-dessous, j’ai déballé mes projecteurs de chantier (idéal pour des sources de lumière puissantes et pas cher – Casto et Leroy Merlin ont des prix de base inférieurs à 50 euros) et je les ai posé devant mon canapé comme sur le schéma ci-contre :
– 2 projecteurs de chantier déposés de part et d’autre du canapé (en jaune) ;
– 1 pied photo ou une pile de… trucs, permettant de poser l’appareil photo à hauteur du canapé ;
– 1 optique 18/200, réglé en 18mm (grand angle) ouverture f3,5 (voir mon article sur la photo), monté sur un Pentax K200D (en noir) – ça marche aussi avec un smartphone ;
– 1 flash (intégré) ;
– 1 canapé en rouge ;
– … et c’est tout !

Pour le photo-montage, j’utilise personnellement le logiciel d’Adobe : Photoshop (période d’essai avec 30 7 jours gratuits), mais les fonctions utilisées pour la réalisation de ce photo-montage sont accessibles sur d’autres logiciel comme Gimp (open source, gratuit mais puissant).

Les prise de vues

C’est la partie la plus amusante mais pas la plus facile non plus.

Surveiller la scène des prises de vues
– l’exposition : Les nuages font baisser la lumière par exemple ;
– vos positions : vérifiez à ne pas empiéter sur le voisin (alors qu’en fait vous êtes seul sur la photo… enfin, vous comprenez) ;
– vos expressions : ayez en tête le jeu final. Si c’est un jeu vidéo, comme ici, les expressions doivent être liées à votre scène. Jouez, mimez… ou mettez un vrai jeu.
– le cadrage : quand vous déclenchez votre appareil, appuyez légèrement sur le bouton pour ne pas faire bouger l’appareil sur son pied (ou pile de trucs). Quand vous vous déplacez autour de la scène, ne vous prenez pas les pieds dans les fils des projecteurs, car une orientation différente de quelques millimètres changera l’exposition… Noooon ! Pourtant je vous avais dis de faire attention !
– l’environnement : faites le ménage, et demandez à tous le monde de rester derrière l’appareil ou de sortir de la pièce.

Une fois que tout est prêt, commencez par faire une photo à vide. C’est à dire une photo ou tout est nickel comme vous le souhaitez, mais sans personne dessus. Ce sera la photo qui vous permettra de corriger les oublis, ou de rattraper les divers changement de lumière.

Une fois qu’on a fait attention à tout ces « détails » et qu’on a fait la photo vierge, on prend les 3 photos qui serviront de base de travail. On règle donc son retardateur sur plus de 5 secondes pour avoir bien le temps de se poser, de se recoiffer et de vérifier sa position et on se lance sans oublier entre chaque prise de vue de :
– changer de fringue ;
– changer de coupe de cheveux (j’avais laissé pousser mes cheveux – éh ben si, c’est possible – et ma barbe exprès pour ce montage) ;
– changer de position (position de joueur, position manette) ;
– changer d’expression (je suis l’égal de Georges Clooney mais pas vous)
… bref, amusez-vous c’est le moment le plus fun !

Le résultat ce sont ces 3 clichés

Vous remarquerez que je n’ai pas appliqué les conseils énoncés. En effet sur le cliché à vide et le premier cliché de la série, le store de la baie vitrée est baissé tandis que sur le second, ma très chère moitié passe dans le champ, avec une bouteille d’huile… bien jaune, bien visible.

Cela dit, comme pour les dernières photos j’avais déjà les cheveux coupés et la barbe rasée, plus possible de recommencer. Du coup je suis passé à l’étape suivante, le photo-montage.

Le photo-montage sous photoshop

J’insiste sur le fait que les fonctionnalités utilisées sont sur quasi tous les logiciels de retouches photos.

Les masques
Si vous savez utiliser les masques, vous saurez faire ce type de montage facilement, sinon c’est pas bien compliqué (cf capture ci-contre) :

– 1> sélectionnez votre calque de travail. Dans notre cas, une photo ;
– 2> cliquez sur le bouton « ajouter un masque de calque » ;
– 3> Tout ce que vous dessinerez en noir sur ce calque, fera un trou dans votre photo pour laisser apparaître la photo du dessous.

L’avantage des masques est que les trous que vous y ferez sont déplaçables, rebouchables, transformables, sans nuire une seconde à la photo originale qui restera complète.

2 clones sur une photo
Superposez 2 photos, placez-vous sur celle du dessus (au dessus dans la gestion des calques) et créez votre premier masque.
Sur ce calque de masque, dessinez un rectangle noir pour faire apparaître la photo du dessous.

Apparition du troisième clone
Une fois que vous avez bien « détouré » (c’est comme ça que ça s’appelle) votre second larron, ajouter votre photo suivante si vous en avez une. Recréez votre masque et détourez votre nouveau personnage.
Vous pouvez faire ça longtemps c’est infini, mais plus vous souhaiterez faire apparaître de clones plus il faudra préparer votre travail, avec repérage des positions avec précisions, lumières, tenues, etc.

Retouches et détails

Pour terminer, on utilise la photo vierge pour effacer les détails « indésirables » comme la bouteille d’huile et la personne dans le fond.

Utilisez le bouton à droite du masque pour créer des calques de réglages. Les plus utilisés dans ce genre de montage sont :
– « exposition »
– « balance des blancs »
– « luminosité/contraste »

Sur le calque de masque, n’hésitez pas à utiliser autre chose que des sélections pour faire vos trous. Un pinceau/crayon avec des bords flous en opacité à 3 ou 4% permet de faire disparaître certains détails de façon très légère sans « marquer » la photo par des limites nettes entre les photos originales et les retouches.

Les plus curieux iront creuser du côté du « tampon » et l’outil « pièce », avec lesquels il est possible de dupliquer des objets ou des textures. Dans mon cas, je me suis coupé en me rasant entre deux prise de vue, et le tampon m’a aidé à cacher la coupure en copiant une portion de peau sans coupure.

Le résultat final est à la hauteur de mon idée. Une bonne partie de jeu vidéo entre clones dans une ambiance fun, lumineuse et colorée.

N’hésitez pas à modifier votre rendu final pour lui donner divers aspects et surtout, à m’envoyer vos montages.

Retour à « Retouches et montages photo »

14 octobre 2013
Graphisme pour blog

En cours de réécriture…

Ceci est un article ou j’explique pourquoi j’utilise un thème wordpress et comment je m’y suis pris..

Toute la difficulté pour un graphiste comme moi (ou pour n’importe qui d’autre) qui veut montrer son savoir-faire sur le web, c’est de faire son site. Le php, html, xhtml/css, asp et autres .NET, c’est pas son métier (ça l’a été, mais c’est loin) !
Donc le graphiste se tourne en règle générale vers 2 supports. Le site full flash ou le blog.

Le flash nécessite de solides compétences et peu prendre du temps. Suivant vos compétences le résultat peut aller du très laid au superbe (les superbes sont dans cette liste 😉 ).

Pour un blog, c’est plus simple…

(suite…)

29 août 2007