Créer une maquette digitale responsive avec Photoshop AFDAS

Cette formation vous permet d'identifier les spécificités et les contraintes du Digital afin de réaliser des maquettes graphiques adaptées et adaptatives.

Public

Graphistes, directeurs artistiques, maquettistes

Durée

14 heures sur 2 jours

Pré-requis

Une bonne maîtrise d’un logiciel de graphisme (Photoshop, Illustrator, Fireworks ou équivalent) est indispensable pour suivre cette formation.

Déroulé

Le Design Web aujourd’hui

  • Identifier les contraintes liées aux différents devices (smartphones, tablettes, PC)
  • Identifier et décrire les règles fondamentales de design visuel sur écran (pixel, définition, dimensionnement et adaptativité)
  • Identifier les principaux types de navigateurs et leurs versions
  • Décrire les principes du Web responsive design
  • Savoir nommer les zones et éléments d’interface et identifier les parties statiques et dynamiques
  • Énumérer les règles typographiques des différents devices (PC, tablette, smartphone)

Enregistrer des images pour le Web

  • Les formats d’images : Jpg, png, gif
  • Compression des images avec Photoshop
  • Gestion des couleurs

Les grilles dans le Design Web

  • Les grilles du Print vers le Web
  • Anatomie d’une grille
  • Les grilles verticales et horizontales
  • Comment choisir sa grille ?
  • Où trouver des grilles ?
  • Gestion des grilles dans Photoshop

Réaliser des Wireframes et des maquettes

  • Créer un zoning
  • Passer d’un zoning à un wireframe
  • Intégrer de l’interactivité pour finaliser sa maquette
  • Les outils utiles à la création de maquette

Automatisation

  • Création et utilisation de scripts
  • Traitement par lot
  • Création de flux de reformatage d’images

Exportation

  • Optimisation des images pour le Web (taille, définition, GIF, JPEG, PNG)
  • Paramètres d’exportation (HTML, XHTML, CSS, DIV)