L'essentiel de Sketch

Utiliser les images et les masques

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez prendre en main les images de type bitmap. Il s'agit de les utiliser dans une forme et en mode Masque.
05:09

Transcription

Eh bien, maintenant que nous savons ajuster des formes avec les paramétrages de formes, on va apprendre à remplir une forme avec une image. Alors, bien entendu, comment pourrait-on fonctionner ? On peut, soit aller directement sur un site de banque d'images comme on a ici. Par exemple, je vais sélectionner celle-là. Donc là, on est sur le site unsplash qui permet d'avoir des photos complètement libres de droits ainsi que les photos des profils des membres qui sont elles aussi complètement ouvertes et libres de droits. En général, ce sont des designers qui partagent leurs photos ou des éditeurs ou blogueurs qui laissent un complet accès à tout ce qu'ils partagent sur ce site-là. Donc, c'est de la très bonne ressource, et gratuite. Donc là, par exemple, je vais vouloir utiliser cette image-là un peu à la manière de ce que l'on a ici pour créer une nouvelle carte d'expérience en ville. Donc là, mon expérience, ça sera certainement autour du Louvre, peut-être de la culture à Paris. Et du coup, je vais récupérer cette image. Donc, ce que je vous propose, plutôt que de passer par enregistrer sous ou Enregistrer dans vos documents et ensuite l'ouvrir dans Sketch. On va faire plus simple, vu qu'on peut le faire avec Sketch, vous allez faire juste clic droit et copier l'image. Ensuite, lorsque vous allez revenir directement dans Sketch, vous allez pouvoir faire clic droit et coller. L'autre image est arrivée. Elle est immense, donc on va devoir la retailler. Donc, il vous suffit de prendre un angle. Les proportions sont conservées pour les images qu'on apporte parce qu'il y a le petit loquet qui est activé juste ici. On va rezoomer. Et là, du coup, on va essayer de mettre à peu près l'image cadrée comme on la souhaite pour la version finale de l'application. Alors, bien entendu, elle est très haute. On pourrait donc se dire qu'il va falloir qu'on coupe cette image. Et vous remarquerez que lorsqu'on a affaire à un bitmap, on fait double clic, et là, on va pouvoir éditer pour pouvoir sélectionner une partie de l'image, couper, remplir avec une couleur, faire plein d'éditions de bitmaps. Mais là, on ne va pas en avoir besoin, parce qu'on a déjà notre forme idéale avec les bonnes dimensions. Donc, ce qui va se passer, c'est qu'on va utiliser ce bitmap et notre forme de fond que j'ai renommée en masque. Donc, cette image-là, on peut la bouger juste au-dessus et on va la mettre juste comme on a envie, et ensuite Masque qui va donc être la forme qui va laisser juste apparaître la partie de la photo qui correspond à cette forme. Si je fais clic droit sur Masque, c'est là où je vais pouvoir activer Masque. Comme vous le voyez, ça a masqué le bitmap, visible par la petite flèche. Mais vu, qu'on a d'autres calques au-dessus, eux aussi sont affectés par ce masque. Cela veut dire que si je veux bouger cette forme, eh bien, elle va disparaître, ce qui peut être embêtant parce qu'on ne veut pas cacher ces éléments-là, on veut juste ajuster sur la photo. Donc, ce qu'on va faire, c'est qu'on va enlever Masque, et puis on va grouper ces deux éléments-là. Donc, comment est-ce qu'on groupe ? Déjà, on les sélectionne tous les deux. Pour sélectionner plusieurs calques, on maintient Commande appuyée et on clique, et on va créer un groupe, Voilà, on va pouvoir renommer... en « image de fond ». Et maintenant que c'est groupé, on va pouvoir directement appliquer le masque et notre image est toujours là. Et le gros avantage, c'est qu'elle est masquée, et par contre on peut continuer à l'ajuster. Donc, par exemple, si je veux vraiment avoir un bon cadrage, je vais appliquer comme ça, et là j'ai mon image de fond masquée et bien cadrée. Donc, pour cette image, c'est tout bon. On pourrait se dire qu'on va faire pareil pour la photo d'avatar. On va importer la photo et appliquer un masque dans un groupe qu'on a fait juste avant. Sauf qu'il y a une autre solution dans Sketch pour pouvoir masquer l'image. Donc, on va retourner sur unsplash. Donc là, pour notre pyramide, c'est tout bon, et on va aller voir du côté de Amy et récupérer la photo d'Amy. Alors, très simple, toujours pareil. Vous copiez l'image, et puis vous allez la coller. Donc là, je vais faire Commande + V. Voilà. Là, j'ai récupéré la photo d'Amy. Donc, maintenant que j'ai cette photo-là, je vais pouvoir l'appliquer à l'intérieur de ma forme... ... via le remplissage. Alors, dans une forme, il y a le remplissage classique, le remplissage en dégradé linéaire, en dégradé radial, en dégradé type métal et la possibilité de remplir avec une image. Donc là, de base, il y a un damier qui est appliqué avec une fonction qui est Tile et qui permet de l'utiliser comme une sorte de motif dont vous pouvez redéfinir la taille comme vous le souhaitez. Bien sûr, il y a plusieurs autres fonctions. Il y a Stretch, si jamais vous voulez étirer la forme à l'intérieur de l'image de la même manière. Il y a Fit pour que ça s'ajuste parfaitement et il y a Fill pour un remplissage complet et classique. Et donc maintenant, comment est-ce que je vais mettre mon image à l'intérieur ? C'est très simple. Vous allez faire Commande + X ou sinon vous faites Couper, vous allez cliquer sur votre avatar, rentrer là-dedans, et là, vous avez juste à faire Commande + V, donc coller. Ça y est, c'est rempli. Donc là, on n'est pas forcément super bien cadré sur la photo, donc on va pouvoir utiliser justement la fonction Tile, ici, qui transforme notre image en une sorte de motif pour pouvoir l'ajuster un petit peu comme on le souhaite. Donc, voilà, je trouve que c'est plus sympa comme ça. Et là, notre photo de profil est appliquée. Donc, maintenant, vous avez deux manières de pouvoir remplir une forme avec une image, soit en gardant cette image dans Séparer et en groupant, ce qui fait pas mal de calques, sinon en ayant juste une forme avec un remplissage à l'intérieur. Bien sûr, toutes vos images sont encapsulées directement dans le fichier de Sketch. Donc, vous ne risquez pas d'avoir des problèmes de liens ou quoi que ce soit. Là d'ailleurs, je vais renommer en « avatar ». Nous avons donc vu comment utiliser les masques dans Sketch et remplir les formes avec des images.

L'essentiel de Sketch

Concevez des interfaces utilisateur applicatives pour les mobiles et pour le web avec Sketch. Créez des éléments d'interface, du simple bouton au pictogramme plus complexe, etc.

1h53 (25 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Sketch Sketch 41
Spécial abonnés
Date de parution :7 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !