Catégories
Actualités de l'école

Photoshop : une semaine de workshop intensive

Photoshop est sans nul doute l’un des meilleurs alliés des professionnels du design graphique et de la communication digitale. Réussir à le prendre en main rapidement est donc une priorité pour nos étudiants de première année ! Pour cela nous leur avons organisé une semaine de workshop dédiée au logiciel, du 12 au 16 octobre 2020. Profitons donc de cette occasion pour vous présenter les éléments essentiels du logiciel accompagnés des premiers exercices réalisés par nos étudiants en première année de bachelor design graphique et communication digitale.

L’espace de travail Photoshop CC

Photoshop propose de très nombreux outils pour tous les créatifs. En fonction du projet à réaliser, il est important de choisir ou de personnaliser un espace de travail adapté afin d’avoir tout ce dont on a besoin à portée de main. 3D, peinture, photographie, web, chaque espace préconfigure les fenêtres utiles.

3 des fenêtres ont été indispensables à la quasi-totalité des projets du workshop comme elles le sont pour tous les professionnels :

  • Outils
  • Calques
  • Propriétés

Les outils sont nécessaires à tout travail de création, qu’il s’agisse de retoucher une image, de mettre en forme du texte ou de créer de nouveaux éléments. Les calques, eux, sont le cœur du logiciel. Il est important de comprendre comment ils agissent les uns par rapport aux autres pour définir les différents plans d’une composition mais également définir sur quels éléments vont s’appliquer tel ou tel réglage. La fenêtre Propriétés permet quant à elle de faire des ajustements sur différents objets de la composition, notamment les calques de réglage ou de remplissage

Ex : Après avoir ajouté un calque Luminosité/ Contraste, la fenêtre Propriétés permet d’ajuster l’intensité de la luminosité et du contraste créés.

Détourage et masques de fusion

Le détourage est un exercice pratiqué par tous les créatifs et qui peut parfois être un casse-tête pour les étudiants. Il est donc essentiel de s’y attaquer le plus tôt possible. Il fut donc le sujet de la deuxième journée du workshop Photoshop.

Détourer correctement un élément d’une image est un exercice qui peut donner des sueurs froides à un débutant. En fonction du sujet, l’exercice peut se faire en deux clics ou demander un travail minutieux. Mais heureusement, il existe de nombreux outils et méthodes pour y parvenir. Bien les connaître c’est donc avoir plusieurs solutions sous la main pour gagner en efficacité.

Les outils de sélection comme la baguette magique ou les différents lassos peuvent permettre un premier détourage rapide mais montrent rapidement leurs limites. Heureusement, des fonctionnalités plus poussées permettent d’obtenir des résultats plus fins. L’outil sélection rapide peut se montrer un peu plus précis et sa fonction « Sélectionner et masquer » est là pour affiner ensuite la définition de l’objet à détourer.

Pour un détourage plus fin, la connaissance des masques de fusion est aussi un point clé de la journée. Ces masques sont des éléments pouvant être ajouté à n’importe quel calque d’un projet. Grâce à eux, il est possible de masquer un élément d’une image avec un pinceau noir ou de l’afficher avec un pinceau blanc. Avec un pinceau doux et en variant la taille, il est possible d’afficher ou de masquer les détails qui n’auraient pas été retenus par les outils de sélection automatique.

À chacun de trouver la méthode qui lui convient (d’autres opteront peut-être pour un détourage à la plume). Mais pour parvenir à détourer des objets complexe, l’entrainement reste indispensable.

En travaillant ces détourages, Roselyne et Lucas, étudiants participant à ce workshop, ont réalisé ces montage « grosse tête » :

Calques de remplissage et de réglage

Pour apporter de la profondeur et de la cohérence à une maquette web ou à une composition photo, il est important de connaître et comprendre les calques de remplissage et de de réglage. Ces derniers permettent d’ajouter des éléments comme des motifs ou des dégradés mais aussi et surtout de retravailler les couleurs et les lumières d’un ou plusieurs éléments, notamment pour harmoniser des visuels venant de sources différentes.

En retouche photo, les calques de réglage permettent de donner du relief à un visuel, de mettre en avant un élément d’une image. Dans l’exemple ci-dessous, vous pouvez voir comment, étape par étape, il est possible de mettre en avant la complicité du couple en faisant ressortir leurs visages complices.

  • Un calque « Courbes » permet d’améliorer l’éclairage global.
  • Un calque « Luminosité / Contraste permet d’assombrir le plaide et les arbres (un masque de fusion permet de ne pas l’appliquer aux personnages).
  • Un calque « Teinte / saturation » permet de baisser l’intensité du rouge du plaide afin qu’il ne parasite pas l’attention.
  • Un calque « Dégradé » permet d’assombrir les coins hauts et droits de la photo pour attirer l’œil vers le centre.

Le résultat final permet une photo plus contrastée que le visuel d’origine (à gauche) et de faire ressortir les visages pour appuyer l’émotion de la scène. Ici les effets sont un peu poussés pour vous permettre de bien voir la différence mais il faut le plus souvent garder la main légère sur les calques de réglage lorsque l’on cherche à conserver un certain réalisme.

Mais un projet dans un style plus original nécessite lui aussi de comprendre ces fonctionnalités. Karan l’a bien montré durant le workshop avec ce montage excentrique :

Outils texte

De nombreux projets ne peuvent se contenter d’images et nécessitent aussi des mots. Heureusement, Photoshop propose également des outils permettant de créer et de transformer du texte. Ces outils peuvent utiliser l’intégralité des polices installées sur un ordinateur.

La fonction basique de l’outil Texte est d’écrire en choisissant la police, la taille et la couleur des caractères. Une fois ce texte créé, la fenêtre Caractère permet une mise en forme plus poussée en jouant notamment sur l’interlettrage, le gras etc. De son côté, la fenêtre Paragraphe est là pour ajuster l’alignement ou les espacements avant et après le paragraphe.

Une fois le texte ajouté, il est possible de lui appliquer les calques de réglage et remplissage comme sur un visuel. Il est également possible de le déformer tout en conservant la possibilité de l’éditer. Enfin, via les styles de calque, il est possible de lui donner du relief en ajoutant des éléments tels que des ombres portées ou des effets de biseautage créant du relief.

Bien souvent, une police et une couleur bien choisies suffisent à donner du caractère à un texte tout en évitant de surcharger la composition. Mais la combinaison de calques et de styles ainsi que l’incrustation de dégradés voire de visuels peuvent permettent de créer des textes vraiment uniques comme l’ont fait Roselyne et Davy lors du workshop.

Outils de création vectorielle

Si Illustrator est le logiciel de référence d’Adobe pour la création vectorielle, Photoshop possède lui aussi certaines fonctionnalités.

vectoriel VS matriciel

La majorité des images, telles que les photos, sont des images matricielles composées de pixels. Mais il existe également des images vectorielles faites de segments associés entre eux par des formules mathématiques. Si une image vectorielle ne peut être aussi détaillée qu’une image matricielle, elle peut en revanche être agrandie sans perdre sa qualité. Une particularité particulièrement intéressante pour la création de visuels en très grands formats.

Avec ces outils, il est possible de créer rapidement des formes simples du cercle au carré en passant par une galerie de formes proposées par Photoshop. Il est aussi possible de créer une forme soi-même avec l’outil Plume. Toutes ces formes peuvent être transformées par les fonctionnalités déjà citées ou servir d’outils pour réaliser une sélection dans un autre calque.

Si ces outils paraissent simple, ils peuvent répondre à de nombreux besoins dans une composition. Il suffit de leur appliquer les bons effets et réglages. Ils peuvent permettre par exemple de créer des ombres très rapidement si l’on modifie la lumière d’une composition.

Outils d’édition & outils d’animation

Avec tous ces éléments à comprendre, connaître et tester, la semaine de workshop des étudiants de bachelor a été plus que dense. Mais Photoshop est un logiciel plus que riche et d’autres fonctions ont été présentées aux étudiants.

Des outils d’édition permettent de transformer des images en quelques clics :

  • Remplissage d’après le contenu pour effacer un élément d’une image.
  • Déformation de perspective pour simuler un nouvel angle de vue.
  • Echelle basée sur le contenu pour permettre de déformer une image tout en préservant certains éléments.

Des outils d’animation pour créer des vidéos ou des stop-motions. Grâce à la fenêtre Montage, il est ainsi possible d’intégrer une timeline à Photoshop pour gérer l’apparition et la transformation d’éléments ou l’importation de vidéos.

En une semaine de workshop, les étudiants en première année de bachelor design graphique et communication digitale ont pu plonger pleinement dans Photoshop. Ces quelques jours leur auront donné les clés pour développer leur créativité et leur maîtrise de l’outil tout au long de leur formation.

Catégories
Actualités de l'école

Semaine d’intégration : découverte des outils de création numérique

Après une demi-journée de rentrée, nos étudiants en première année de BTS SIO et de bachelor design graphique et communication digitale ont pu directement s’immerger directement dans la création numérique au cours d’une première semaine de workshop, du 5 au 9 octobre 2020.

Premier regard « dans le code »

Cette semaine d’immersion a démarré par un premier cours sur le fonctionnement d’un site web. L’occasion d’aborder les principes d’hébergement, de serveur ou de langage. Ainsi, les étudiants ont commencé à acquérir un langage commun, celui du web. Ils démarrent leur chemin pour passer du statut de simple utilisateur du web à celui de créateur d’interface.

À la suite de cette initiation, un premier exercice a été proposé aux étudiants : modifier les éléments d’un site en cache par la console de leur navigateur web. Par ces manipulations simples, les étudiants découvrent comment se structurent une page HTML et une feuille de style CSS. Ils ont modifié la couleur d’un texte, en remplaçant une image par une autre ou en faisant pointer un lien vers une autre page de destination. La modification d’éléments en cache permet de comprendre comment le langage influence l’affichage des éléments sans avoir à construire un site de A à Z et sans risquer d’endommager le site. Pour finir cette première journée les étudiants ont chacun remis une capture d’écran de la page web qu’il ou elle a modifié.

Découvrir les bases d’Adobe Photoshop

Le second jour a permis de découvrir Photoshop CC. Si certains étudiants ont déjà utilisé ce logiciel, la majorité d’entre eux ne l’a jamais eu en mains. La présentation de cet outil indispensable est l’occasion, pour Olivier Krakus, responsable pédagogique de l’école, d’évoquer en ouverture des notions comme les différents formats de documents ou encore le choix des différentes résolutions pour un projet.

Lexique
PPI (Pixel Per Inch) :  unité définissant la résolution d’un document numérique. Plus une image aura de PPI plus il sera possible de conserver des détails et de zoomer à l’intérieur. Mais augmenter cette valeur augmentera le « poids » du visuel et donc son temps de chargement s’il s’agit d’un élément présent sur le web.

Avant de pouvoir commencer à créer, il est important de découvrir les éléments clés de l’espace de travail Photoshop. Les calques sont la première mécanique à comprendre pour tout débutant, en association avec les masques de fusion. Tout graphiste doit connaître les outils mis à sa disposition pour créer.

Pour cela, les étudiants en BTS SIO et en bachelor design graphique et communication digitale ont réalisé un premier exercice : la fusion simple de deux images, un ciel et un paysage. Ce travail a nécessité l’utilisation des outils de sélection, de masques de fusion ainsi que du dégradé et du pinceau. L’objectif était de fusionner les deux images en atténuant, voire en faisant disparaitre, la séparation entre les éléments source. Pour parvenir à un résultat satisfaisant les étudiants ont notamment appris à régler la dureté et le diamètre de l’outil pinceau pour créer une fusion fluide entre les calques. La logique induite par les masques de fusion est nécessaire à de nombreuses manipulations et doit être une base rapidement comprise par les futurs créatifs.

initiation photoshop

En complément, les étudiants ont découvert et testé d’autres outils qui permettent de sélectionner un élément dans une image : baguette magique, outil de sélection rapide, outil de sélection d’objet, … ainsi que les principaux raccourcis clavier liés à la sélection et à la désélection.

Enfin, cette demi-journée a permis de prendre en main rapidement l’outil Correcteur, utilisé notamment dans la retouche de portraits ainsi que le tampon de duplication, très employé dans les photo-montages.

Écrire ses premières lignes en HTML/CSS

Le second atelier de cette semaine d’immersion a été consacré aux langages HTML et CSS. Après avoir appliqué des modifications simples à des sites lors du premier jour, les étudiants ont commencé à écrire leurs premières lignes, accompagnés par Vincent Mary, consultant WordPress et intervenant chez EDTA Sornas.

La logique des balises HTML avec une balise d’ouverture et une de fermeture ainsi que le principe « première ouverte, dernière fermée » a été rapidement assimilée à travers l’usage des éléments de base : HEAD, BODY, META, P, H1.

Après avoir abordé la structure simple d’une page HTML. La suite de l’atelier s’est penché sur la création d’une feuille de style CSS afin d’habiller la structure.  Avec l’utilisation d’attributs comme font-size ou font-family, une première mise en forme a ainsi été appliquée aux textes de la page HTML.

initiation html css

La suite logique d’un tel projet est naturellement de comprendre comment structurer une page web en associant les deux langages. Pour cela, les étudiants se sont pliés à l’exercice bien connu du Mondrian, inspiré des célèbres tableaux géométriques du peintre éponyme. Ce travail nécessite de bien comprendre les interactions entre page web et feuille de style pour pouvoir créer les différentes formes demandées. À travers le Mondrian, les étudiants ont pu appliquer toutes les connaissances qu’ils venaient d’acquérir.

Concevoir un site avec WordPress

Appréhender la création de site web peut également se faire par la découverte des CMS (Content Management System),ces outils permettant de créer un site sans avoir à connaître les langages dédiés. Ils permettent ensuite, par un backoffice, de gérer facilement la publication et la mise à jour des différents contenus du site, par un rédacteur web par exemple. La majorité des sites sont aujourd’hui gérés par un CMS et il est donc indispensable de sensibiliser les étudiants au plus courant d’entre eux : WordPress.

Durant la matinée du mercredi, chaque étudiant a pu découvrir l’interface d’administration de WordPress, les outils de personnalisation à travers les thèmes et les extensions ainsi que les menus de gestion des contenus pour la création de pages ou d’articles de blog.

Si ce CMS connait autant de succès, c’est parce qu’il est facile à prendre en main de manière basique. Mais, il permet également de créer des sites complexes en associant des extensions, du webdesign et du développement web plus poussé. Prendre en main cet outil, c’est donc se doter d’une base facile à appréhender mais pouvant être optimisé et étoffé tout au long de sa formation.

Réaliser un prototype d’application mobile avec Adobe XD

La deuxième moitié de la semaine d’intégration a été dédié à un projet plus conséquent pour les étudiants : créer un prototype d’application mobile avec le logiciel Adobe XD.

Ce logiciel très prisé des webdesigners et UX designers permet de créer rapidement des prototypes interactifs pour concevoir des parcours utilisateur et définir l’identité visuelle d’une future application iOS ou Android. Que l’on soit freelance, salarié en startup ou collaborateur dans une grande entreprise, Adobe XD est un excellent compagnon pour présenter ses idées et convaincre de la pertinence d’un projet.

Après une demi-journée d’initiation à l’outil, avec la présentation de la création d’une navigation entre plusieurs écrans et de différentes interactions et animations, les étudiants ont eu pour mission de définir leur projet d’application. Afin de mener à bien leur mission, chaque groupe est allé analyser les applications existantes similaires à leur idée pour en extraire les idées majeures et développer de nouvelles fonctionnalités pour que leur réalisation puisse se démarquer de la concurrence potentielle. La réalisation d’un benchmark (ou analyse concurrentielle) est une démarche qui doit devenir un réflex pour tous les étudiants.

Voici deux des prototypes Adobe XD réalisés par les étudiants

(Vous devez accepter les cookies Adobe pour pouvoir les consulter)

Suite à cela, chaque groupe a pu, pendant une journée complète, concevoir et designer son prototype en appliquant certaines connaissances acquises lors de cette première semaine. En plus de leur application, les étudiants ont également préparé un rapide pitch dont la soutenance venait conclure la semaine.

Écoute de musique en ligne, personnalisation de sneakers, gaming, mangas, voyage… Autant de sujets qui ont inspiré les étudiants afin de présenter leur vision d’une application répondant aux besoins d’utilisateurs ciblés. Lors des soutenances, les échanges avec le jury ont permis aux étudiants de mettre en avant les acquis de cette semaine d’intégration. Ils ont également échangé pour commencer d’ores et déjà à identifier des axes d’amélioration et des pistes de travail pour l’année à venir.

Cette semaine intensive a donc été le moyen pour les étudiants d’entrer rapidement dans le cœur de leur formation. Ces projets leur ont permis de découvrir rapidement des compétences clés qu’ils développeront tout au long de leurs années au sein d’EDTA Sornas.