• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 03/09/2019

Utilisez Photoshop pour le responsive design

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Quand je conçois un projet en web design aujourd'hui, j'utilise des maquettes graphiques pour me donner une idée très précise de l'aspect qu'aura mon site à la fin du projet, avant de réellement me plonger dans le code !

C'est la réalisation de ces maquettes que nous allons maintenant aborder ensemble dans les deux prochaines parties.

Pourquoi concevoir des maquettes graphiques ?

Les process de conception ont beaucoup évolués depuis les premiers sites web, et avec le temps vous verrez sûrement d’autres méthodologies de travail s’installer en fonction des besoins du marché...

Les process de travail ont changé, vive la transversalité maintenant !

En agence, coder et designer travail de pair
En agence, coder et designer vont de pair

Créer des maquettes graphiques s’avère dans tous les cas très utile pour plusieurs raisons :

  •  Vous aurez une vision très précise de l'aspect de votre site et vous pourrez anticiper certains problèmes liés au code.

  • Dans le cadre d'un travail de groupe, vous travaillerez dès le début avec des développeurs et vous pourrez plus facilement échanger avec eux et vos autres co-équipiers en vous basant sur ces maquettes. 

  • Modifier des maquettes graphiques lors de la phase de conception est bien plus facile que de modifier un site déjà programmé ! Vous gagnerez ainsi un temps précieux.

  • Réaliser la maquette du site et l’intégrer sont deux tâches qui peuvent être réalisées par deux personnes différentes selon l’importance du projet ! D’un côté le web designer, de l’autre, l’intégrateur web (ou développeur front). Le développeur front n'aura plus qu'a intégrer vos maquettes une fois celle-ci finies.

 

Dans mon travail de tous les jours, je me sers donc beaucoup de maquettes graphiques quand j'échange avec mes clients, ou mes collègues développeurs. Au cours du développement d'un projet web, cela permet notamment d'obtenir des retours utiles et de modifier rapidement certaines pages du site. Ces maquettes deviennent ainsi des outils puissants pour communiquer à la fois sur les idées graphiques que je mets en forme, et sur l'avancée de mon travail en début de projet.

Dans le cas d'un site responsive, vous comprendrez qu'avec la multiplication des formats d'écrans, ces maquettes deviennent vitales !

 

 

Photoshop pour vos maquettes

Nous allons utiliser dans ce cours le logiciel Photoshop de la suite Adobe pour réaliser des maquettes. Bien sûr, cette partie purement graphique est réalisable avec d’autres équivalents logiciels comme GIMP par exemple...

Mais alors pourquoi utiliser Photoshop ? 

Adobe est vraiment une référence dans tous les domaines de la création graphique et vidéo.

Adobe Photoshop est la référence en retouche d'image et création graphique
Adobe Photoshop, la référence en retouche d'image et création graphique

La suite logicielle d'Adobe présente de nombreux avantages. Pour ne parler que de Photoshop :

  • Photoshop est un standard. Même s’il est destiné au monde professionnel, il est également très connu du grand public. Beaucoup de personnes se forment via internet (et notamment sur OpenClassrooms !). 

  • Il est important de noter que Photoshop est maintenant enseigné dans toutes les écoles de création numérique. Bien sûr à l’ICAN, où je donne tout récemment des cours de création numérique, mais aussi dans d’autres domaines tels que le marketing ou la communication digitale. C'est le cas de l’école ECITV (École de communication d'Internet et de télévision) par exemple : même si ces étudiants ne sont pas destinés à être des infographistes, ils doivent être capables de travailler sur des outils devenus des normes et maintenant accessibles à tous. 

  • Je me prête également souvent au jeu de faire de belles images avec mes neveux et nièces en leur apprenant les bases de Photoshop, et ils apprennent très vite. Peut être qu'un jour vous les retrouverez sur OpenClassrooms !

  • Photoshop est utilisé dans le monde de l’entreprise et dans le monde entier. En agence de communication, pour tous les sites, plaquettes, affiches, etc., Photoshop est utilisé pour la base de ces projets.

Pour finir, Adobe a fait de nombreux efforts sur sa politique tarifaire, même s'il est vrai que beaucoup de personnes critiquent encore des prix trop élevés. Quand j'exerçais en freelance, j’ai vécu la période révolue où il fallait débourser 2 600 € pour utiliser la suite Adobe et pratiquer son activité en toute légalité, alors croyez-moi, je sais de quoi je parle. :-°

  • Actuellement pour un particulier/PME/Freelance avec un abonnement annuel, la suite est à  59,99 €/mois.

  • Pour les enseignants et étudiants, le prix est abaissé à 19,50 €/mois, incluant Photoshop et tous les logiciels Adobe. 

Sachez que les mises à jour sont inclues dans cette offre et que vous aurez la possibilité de l’installer sur 2 ordinateurs différents chez vous.

La suite Adobe est, qu'on le déplore ou pas, un outil indispensable si vous comptez vous investir professionnellement dans le domaine de la création graphique et numérique.

Photoshop est un outil de création graphique vraiment puissant. Très flexible, avec ses nombreux outils adaptés, il va nous permettre de créer ensemble tous les éléments de votre site responsive. Je sens votre impatience monter, et je suis heureux de constater qu’être acteur de la création a toujours cet effet magique sur le mental des gens !

Maintenant que vous savez faire des wireframes, et que vous êtes capable de déterminer à quoi va ressembler votre site en terme d’organisation et de structure, nous allons lui donner un peu plus de concret :

  • en rendant vos wireframes plus tangibles, avec une organisation et la création des éléments graphiques finaux de votre site responsive, aux dimensions réelles.

  • en nous aidant des grilles de composition pour poser les différents éléments de votre site responsive...

 

L'incontournable Photoshop dans le travail de création graphique
L'incontournable Photoshop dans le travail de création graphique

Mais Photoshop, est-ce que ce n'est pas super compliqué à utiliser ?

Photoshop est un outil assez complexe car très puissant (et multi-fonctions), mais je vous rassure aucun designer, moi le premier, ne connait Photoshop par coeur (où alors il s'illusionne à le croire !). Tout simplement parce que :

  • Un webdesigner, un photographe ou un illustrateur n'utilisera pas Photoshop de la même façon car ils n'ont pas les même besoins à la base. Par exemple : un webdesigner, même s'il retouchera parfois des photos, ne consacrera pas le même temps à cette activité qu'un photographe, car le webdesigner se focalisera sur l'interface, et utilisera surtout les fonction "web" de Photoshop (comme les grilles, l'export des images et du code CSS).

  • Photoshop est mis à jour tous les 6 mois maintenant ! De nombreux outils viennent faciliter le travail de création et il faut ré-apprendre le logiciel constamment. C'est fascinant car vous trouverez de nouvelles astuces tous les jours ! Peut être que vous aussi, sur OpenClassrooms, vous donnerez des cours sur Photoshop en y abordant toutes ces nouvelles fonctions. ;)

Le plus important est que vous soyez, avec les bases minimum de Photoshop, capables de trouver des astuces et une méthodologie efficace pour créer tous les éléments dont vous avez besoin sur Photoshop.

Exemple de certificat de réussite
Exemple de certificat de réussite