Book 2015 INFOGRAPHIE - WEBDESIGN LAURENT WATTELLE

Transcription

1 Book 2015 INFOGRAPHIE - WEBDESIGN LAURENT WATTELLE

2 Remerciements Merci a l équipe de NextFormation et en particulier à Philippe Lecomte Merci à mes collègues Remerciement spécial à Katia Jarné 2

3 Sommaire Charte graphique Photoshop Illustrator Indesign Web A propos CV

4 Charte graphique du book 4

5 Couleurs : c : 0% m : 0% j : 0% n : 100% r : 0 v : 0 b : 0 # c : 0% m : 0% j : 0% n : 0% r : 255 v : 255 b : 255 #ffffff c : 29% m : 100% j : 100% n : 40% r : 128 v : 23 b : 16 # Fonts : Logo : font book: NexaLight NexaBold font logo: W@rdoom avec transformations vectorielles 5

6 Photoshop Brief Réaliser un rajeunissement sur cet homme. 6

7 Travail réalisé Logiciel utilisé: photoshop 1ere partie: visage - diminution des taches et rides - pigmentation accentuée 2eme partie: contours - retonification fasciale - pigmentation plus foncé des cheveux 7

8 Brief Retoucher le visage pour enlever les imperfections 8

9 Travail réalisé Logiciel utilisé: photoshop 1ere partie : peau - nettoyage de la peau du plus gros des imperfections - homogénéisation de la couleur 2eme partie : nez / bouche - réalignement du nez - suppression du percing - correction des levres et ajout d un leger maquillage 3eme partie : yeux - réalignement des yeux - ajout de cils - ajout d un maquillage 4eme partie : ombrage 9 - affinage par jeu d ombres et de lumières

10 Brief Montage photo pour donner l illusion d un dessin 10

11 Travail réalisé Logiciel utilisé: photoshop 1ere partie : cheval - contours du cheval récuperés - ajout d une coloration - ajout d ombres et de lumieres - ajout d une fumé de vapeur a la sortie du museau 2eme partie : décors - suppression des cheveaux du décors utilisé - changement de couleur et accentuation de la pourssière - utilisation d un jeu d ombres et de lumières - rajout d arbres en arrière plan 11

12 Brief Faire un visuel pour le concour d halloween

13 Travail réalisé Logiciel utilisé: photoshop 1 ere partie : décors - récupération de la mer, des nuages et de la lune - changement de couleur - accentuation des ombres 2eme partie : arbre - récupération de l arbre et du pendu - ajustement de tous les éléments 3eme partie : feu - récupération d une partie du feu - ajout de flammes, d étincelles, de lumières et des buches 4eme partie : écriture 13 - ajout des écrits pour un concour d halloween

14 Brief Entrainement pour la création d un puzzle 14

15 Travail réalisé Logiciel utilisé: photoshop 1ere partie : cadrillage - création d un cadrillage pour le puzzle 2eme partie : pièce - création des deux pièces et placement en dehors 15

16 Illustrator Brief Reproduction d une tête d éléphant 16

17 Travail réalisé Logiciel utilisé: illustrator 1ere partie: contours - récuperer les contours de la tête en décalquant l image de base 2eme partie: coloration - faire les contours fermés de chaque partie de différentes couleurs - récuperer les tons et les affecter aux differentes parties 3eme partie: affinage - affiné les traits et l aspect général 17

18 Brief Reproduction d un scorpion 18

19 Travail réalisé Logiciel utilisé: illustrator 1ere partie: contours - récuperer les contours en décalquant l image de base 2eme partie: coloration - utilisation des filets de dégradé pour donner du relief 3eme partie: détails - création des yeux, mandibules et poiles 19

20 Brief Reproduction d une tête de tigre 20

21 Travail réalisé Logiciel utilisé: illustrator 1ere partie: contour - récuperer les contours de la tête en décalquant l image de base 2eme partie: coloration - faire les contours fermés de chaque partie de différentes couleurs - affectation des tons aux differentes parties 3eme partie: texture - utiilsation d effet pour simuler la peau - utilisation d outils pour simuler les poiles 21

22 Brief Création d une affiche vintage 22

23 Travail réalisé Logiciel utilisé: illustrator 1ere partie: fond - mise en place du fond et de l oiseau 2eme partie: textes - choix d une typographie vintage - mise en place des textes 3eme partie: images - mise en place des images des deux boxeurs 23

24 Brief Utilisation de la typographie pour représenter la tête de Mario 24

25 Travail réalisé Logiciel utilisé: illustrator - remplacement de chaque partie de la tête par le mot de la couleur associé 25

26 Indesign Reproduction d un petit magazine de 8 pages doubles plus la couverture. 26

27 Travail réalisé Logiciel utilisé: indesign 1ere partie: récupération - récupération du contenu visuel et textuel 2eme partie: Gabarit - mise en place des différents gabarits 3eme partie: contenu - mise en place des contenu 27

28 Brief Reproduction de différentes pages de magazines au total de 5 doubles pages. 28

29 Travail réalisé Logiciel utilisé: indesign 1ere partie: récupération - récupération du contenu visuel et textuel 2eme partie: Gabarit - mise en place des différents gabarits 3eme partie: contenu - mise en place des contenu 29

30 Web Brief: Création de mon portfolio 30

31 Contraintes: - site one page - site en parallax - site fluide - le moins de jquery possible, utiliser les possibilitées de css au maximum (sans aller dans l absurde) 31

32 Brief: Conception et réalisation d un site de formations en relation avec la création de sites web. 32

33 Contraintes : - administrable par le client, - évolutif (des cours peuvent être ajoutés) - doit être lisible car a pour vocation d être retro-projecté - n a pas besoin d être responsive - doit être une «vitrine» des possibilités offertes par HTML5/CSS3 : shapes, font-face, etc. et en adéquation avec les tendances du web (sans pour autant subir des effets de mode) 33

34 Brief: Reproduction de la maquette ci-contre Graff Pink 34

35 35

36 Brief: Reproduction de la maquette ci-contre Blue Masters 36

37 37

38 Brief: Création d une page d accueil sur le thème d une ludothèque de qualité Ludothèque 38

39 Contraintes: - site pour les parents de jeunes enfants donc couleurs chaudes et joyeuses - doit contenir un slider - doit avoir un espace client - doit avoir les horaires, une carte google et un espace contact 39

40 A propos Qui suis-je? Une personne très logique et organisée. J ai pu m appuyer sur mes qualités pour satisfaire ma curiosité pour la compréhension de la vie organique et digitale. Passionné par tout ce qui touche à la découverte, je ne cesse de développer mes connaissances et je compte bien continuer sur cette voie. D où viens-je? De formation chimiste, j ai la chance de pouvoir assouvir ma passion pour l informatique et le code grâce à une reconversion professionnelle dans l infographie-multimédia. Je suis aujourd hui à la recherche d un emploi. 40

41 Où vais-je? Je compte m orienter principalement vers l intégration. Le graphisme est une compétence supplémentaire qui m offre la possibilité d exprimer ma créativité. J ai pour projet de compléter en autodidacte mes connaissances en développement web. Quels sont mes outils? Bonne maîtrise d Illustrator, Photoshop et Indesign. Notions avec Edge Animate et Flash. HTML5 et CSS3 sont mes meilleurs amis. Et je me perfectionne actuellement à WordPress et Bootstrap. 41

42 CV Compétences Web - Concevoir la mise en page de sites web en tenant compte des critères ergonomiques, du référencement et de l accessibilité - Réaliser un site Web dynamique - Réaliser des séquences d animation vectorielles interactives en deux dimensions (2D) - Concevoir une animation pour le Web ou pour l affichage dynamique Graphisme - Préparer la production et les médias (texte, images fixes ou animées...) - Concevoir et mettre en page des documents imprimés simples - Réaliser des graphismes et illustrations fixes élaborés - Réaliser des photomontages complexes - Assurer une veille technique et technologique Outils Codes - HTML 5 - CSS 3 - jquery Logiciels - Photoshop - Illustrator - Indesign - Edge animate - Flash - Dreamveawer - Wordpress - Bootstrap 42

43 Expériences professionnelles : Conception et réalisation d un site de formations en relation avec la création de sites web, administrable par le client à la Web agency k-design - Recherche de solutions graphiques et ergonomique - Analyse des contraintes - Choix d un CMS adapté et personnalisation du thème - Intégration de la charte graphique et du contenu fourni sous forme de powerpoint - Réalisation et mise en ligne du site : Pizza Hut aux postes de : - Responsable de service - Formateur polyvalent - Employé polyvalent Diplômes et formations : Formation en Infographie-Multimédia au centre Next-formation : Formation en Chimie Organique à l université Pierre et Marie Currie : Obtention du bac Scientifique option physique-chimie 43

44 Laurent Wattelle Infographiste - Webdesigner