Atelier 1 Bastien

ATELIER 1 - BASTIEN

Atelier de création d'un mockup avec Photoshop. Dans un premier temps, nous allons réaliser une composition relativement simple, pour mettre en valeur un logo en utilisant les outils détaillés dans les vidéos précédentes. Dans un second temps, nous irons mettre en scène cette composition sur une photo d'un poste informatique pour simuler l'affichage sur un écran.

Étape 1

Tout d'abord, nous pouvons ouvrir les fichiers avec Photoshop et nous allons passer à la création de la composition. Commençons par créer un nouveau document : Fichier > nouveau ou le raccourcis Ctrl + N, pour les dimensions, on va partir sur un format 1920 par 1080 pixels, avec une résolution de 72 PPI et en mode RVB puisque le fichier semble plutôt destiné aux écrans.

Étape 2

Une fois ce document créé, nous allons pouvoir y intégrer notre arrière-plan: Pour cela nous allons utiliser l'outil rectangle, sélectionner tous les pixels et faire un Ctrl + C. Sur notre nouveau document vierge, on peut coller les pixels en effectuant un Ctrl + V et avec l'outil déplacement, nous allons pouvoir repositionner notre image. Une fois ce recadrage effectué, nous pouvons verrouiller ce calque pour éviter de le déplacer par inadvertance.

Étape 3

Pour intégrer le logo à cette composition, nous allons déplacer le calque jusqu'au-dessus de l'onglet et le lâcher sur le centre de l'image. Le logo se détachant assez mal du fond, nous allons ajouter un élément graphique pour le faire ressortir. Dans un premier temps, créons un nouveau calque vierge entre l'arrière-plan et le calque logo. Ensuite, dessinons un cercle parfait avec l’outil ellipse en maintenant la touche MAJ (shift) enfoncée. Nous allons ensuite remplir cette sélection de blanc avec l'outil pot de peinture. Ctrl + D pour désélectionner. Abaissons l'opacité de ce calque à une valeur de 60 % puis dupliquons-le. L'opacité de ce nouveau calque peut être rétablie à 100% et la seconde étape consiste à réduire le diamètre de ce cercle. En maintenant la touche ALT enfoncée, on s'assure que la mise à l'échelle s'effectue de façon centrée. Si le logo parait trop grand par rapport à ces deux cercles, il est possible de venir le réduire et de s'assurer qu'il soit de nouveau centré. Pour organiser au mieux notre fichier de travail, nous pouvons sélectionner ces trois calques et les ranger dans un nouveau groupe de calques.

Étape 4

Nous allons maintenant ajouter un nouvel élément graphique dans chaque coin de notre image. Avec l'outil lasso polygonal, nous allons dessiner un coin en maintenant la touche MAJ (shift) pour lui donner un angle de 45°. Double-clic sur le troisième point pour boucler la zone de sélection. A nouveau pot de peinture, et Ctrl + D pour désélectionner. Pour dupliquer le calque : Ctrl + J. Nous allons maintenant appliquer une symétrie verticale à cet élément. A l'aide des repères commentés, nous nous plaçons dans le coin supérieur. Ctrl + E pour fusionner avec le calque inférieur. Ctrl + J pour dupliquer cet ensemble dans lequel nous allons appliquer cette fois une symétrie horizontale. Une fois cet élément positionné, Ctrl + E pour regrouper ces éléments sur un seul et même calque. Nous pouvons maintenant réduire l'opacité de ce calque pour mieux l'intégrer à notre composition.

Étape 5

Enregistrons cette composition au format PSD pour conserver les calques afin de pouvoir revenir plus tard effectuer des ajustements. Nous pouvons aplatir cette image pour ne plus n'avoir qu'un seul et même calque. Avec l'outil rectangle, nous allons pouvoir sélectionner l'ensemble de nos pixels et les copier. Dans le fichier poste de travail .psd , nous allons pouvoir coller notre composition. Pour lui donner les perspectives correspondantes à l'écran de l'ordinateur, nous allons utiliser l’outil de transformation torsion. Nous pouvons maintenant déplacer librement les 4 coins de la cage de transformation. L'idéal est de travailler en 2 étapes : un premier tour pour placer approximativement les points, et un second en zoomant pour les placer précisément. Et si la torsion nous convient, on peut valider !

Pour finaliser notre mockup, il faudrait prendre le temps de le finaliser avec des lumières, des reflets sur l'écran. Nous verrons dans de prochaines vidéos des outils permettant de le faire. Ici nous avons travaillé de manière destructive, c'est à dire qu'une fois la nouvelle perspective appliquée à notre composition, nous ne pouvons plus revenir dessus. Ni sur la perspective, ni sur le contenu de la composition. Pour contourner ce problème, l'utilisation d'objets dynamiques est tout indiquée. Nous nous attarderons sur cette thématique un peu plus tard.