Want to create interactive content? It’s easy in Genially!
LEGTA - PHOTOPEA
jeanOisel
Created on December 18, 2023
Utilisation basique d'un outil de manipulation d'images
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
LEGTA - OUTILS
OUTILS IMAGES - PHOTOPEA
démarrer
Au cours de ce TP, vous allez utiliser le logiciel en ligne Photopéa afin de manipuler des images. dans un premier temps, nous allons faire un bref rappel sur le type d'images que vous pouvez être amenés à manipuler, puis nous réaliserons un montage photo basique.
SUIVANT
Le point sur les images
2 grandes familles
Les images numériques se décomposent en deux familles, les images dites vectorielles et les images matricielles (bitmap). La différence entre les deux types d'images réside dans le fait que si les images bitmap sont constituées de pixels, les fichiers vectoriels sont constitués eux par des formes géométriques décrites par des équations. Cela signifie que lorsque vous zoomez sur une image bitmap, elle deviendra « granuleuse » tandis que le fichier vectoriel restera lisse et net.
SUIVANT
Le point sur les images
-> Le format vectoriel: un zoom à l'infini
- Basée sur des Mathématiques : Une image vectorielle est créée à partir de formes géométriques comme des lignes, des courbes et des points, qui sont toutes définies par des formules mathématiques.
- Exemples de Formats : SVG, AI (Adobe Illustrator), EPS.
- Qualité et Redimensionnement : Les images vectorielles peuvent être agrandies ou réduites sans perte de qualité. Elles restent nettes et claires quelle que soit leur taille, car les formules mathématiques s'adaptent pour redéfinir l'image.
- Utilisation Courante : Logos, graphiques, illustrations qui nécessitent des redimensionnements fréquents.
+ info
SUIVANT
Le point sur les images
-> Le format matriciel (Bitmap): le format le plus commun
- Basée sur des Pixels : Une image matricielle est composée d'un ensemble de petits carrés appelés pixels. Chaque pixel a une couleur spécifique.Exemples de Formats : JPEG, PNG, BMP, GIF.
- Qualité et Redimensionnement : Lorsque vous agrandissez une image matricielle, la qualité de l'image diminue et devient "pixelisée" ou floue. Cela est dû au fait que vous étirez les pixels existants.
- Utilisation Courante : Photos, images détaillées avec beaucoup de couleurs et de nuances.
+ info
SUIVANT
Les principaux formats existants:
Le dossier "Ressources" présente 2 types de formats d'images matricielles.
Cliquez sur chacun des 2 formats présents dans le dossier pour continuer
Les principaux formats existants:
Vous avez cliquez sur le format "JPEG", cliquez à présent sur le second format dans le dossier "Ressources".
JPG
Les principaux formats existants:
Vous avez cliquez sur le format "PNG", cliquez à présent sur le second format dans le dossier "Ressources".
JPG
Les informations d'un fichier image : propriétés & métadonnées
Les fichiers images disposent de multiples informations sur leur nature, leur résolution, leur taille etc. Et comme bon nombre de fichiers numériques, ceux-ci disposent également de métadonnées EXIFF ( Exchangeable Image File Format).
Mais qu'est-ce qu'une métadonnée ?
Imaginez que vous avez un livre. La métadonnée, dans ce cas, serait comme les informations sur la couverture et la première page du livre - le titre, l'auteur, l'éditeur, l'année de publication, et parfois un résumé du contenu. Ce ne sont pas les histoires ou les informations contenues dans le livre lui-même, mais des données qui décrivent le livre. Pour une Photo : Les métadonnées incluraient le type d'appareil photo utilisé, la date et l'heure de la prise de la photo, les réglages de l'appareil comme l'ouverture et la vitesse d'obturation, et parfois l'emplacement où la photo a été prise.
+ info
SUIVANT
Les informations d'un fichier image : exemple
Dans le dossier de "Ressources", le fichier "rabbit.jpeg" dispose de données EXIF, utilisez-les afin d'identifier le lieu où la la photographie a été prise. Pour cela, ouvrez la photo avec l'outil "Photo" de Windows. Et recherchez dans le logiciel les informations de l'image.
+ info
Cliquez sur lE PAYS CORRESPONDANT pour continuer.
Le montage via Photopea : objectif
Vous allez réaliser un montage à partir des images sous format .png, présentes dans le dossier "Ressources" :
- castleA,
- castleB,
- dragon
1024 x 1024
640 x 480
L'interface de Photopéa
SUIVANT
Etape n°0: Chargez l'image "castleA"
OUVREZ
LE LOGICIEL PHOTOPEA DANS UN NOUVEL ONGLET DU NAVIGATEUR
Sélectionnez l'image ou réalisez un simple "glisser-déposer" dans la zone centrale de Photopéa.
Cliquez sur LA ZONE DU GLISSER-DEPOSER POUR CONTINUER
Etape n°1: Supprimez l'arrière plan avec un coup de baguette magique !
Sélectionnez la baguette magique (W) située dans la barre d'outils à gauche. Puis sélectionnez l'arrière plan en blanc de l'image du chateau. Une fois la zone sélectionnée, effacez-là !
+ info
Cliquez sur l'outil pour continuer.
Etape n°2: Supprimez le texte, d'une seule traite !
Sélectionnez l'outil de sélection rectangulaire (M) située dans la barre d'outils à gauche. Puis sélectionnez le texte "THIS IS AN OLD CASTLE" Une fois celui-ci sélectionné, effacez-le !
Cliquez sur l'outil pour continuer.
+ info
Etape n°3: Ajoutez un nouvel arrière plan
Glissez-déposez le fichier "castleB". Vous avez à présent 2 calques créés à partir des 2 fichiers chargés dans le projet. Renommez chaque calque (à l'aide d'un double clic sur le nom) suit:
- le calque du fichier castleA en "chateau",
- le calque du du fichier castleB en "ciel".
+ info
Cliquez sur la zone des calques pour continuer.
Etape n°4: Ajoutez un nouveau texte !
Sélectionnez l'outil de texte (T) située dans la barre d'outils à gauche. Ajoutez du texte sur l'image par exemple :
- texte : "LEGTA",
- police : "Alfa Slab One",
- taille : 90px
Cliquez sur l'outil TEXTE pour continuer.
+ info
Etape n°5: Fusionner le texte avec le ciel en modifiant le type de calque
Sélectionnez le calque du texte et placez le juste au dessus du calque "ciel". Sélectionnez à présent le mode "incrustation" dans le volet déroulant situé sous le titre d'onglet "Calques" (dans l'espace des calques).
Cliquez sur le volet déroulant des modes de fusion des calques dpour continuer.
+ info
Etape n°6: La préparation du dragon !
Glissez-déposer le fichier "dragon" dans le projet, et cachez les autres calques en cliquant sur l'oeil associé à chacun de ces calques.
Pour intégrer le dragon, vous allez devoir le détourer. Pour cela, utiliser l'outil de sélection "Sélection de l'objet". Cet outil se trouve dans le menu de la baguette magique, pour l'atteindre maintenez un clic gauche sur la baguette magique.
+ info
Cliquez sur l'OUTIL POUR continuer.
Etape n°6: le détourage
Avec l'outil de sélection d'objet:
- ajustez le contour progressif à 14pixels,
- puis sélectionnez l'ensemble du dragon,
- Cliquez sur "Select Subject"
- Assurez-vous que le dragon soit correctement détouré !
+ info
Cliquez sur le contour progressif POUR continuer.
Etape n°6: la suppression de l'arrière plan
Rendez-vous à présent dans l'onglet "Sélection", puis cliquez sur "Inverser". Une fois l'arrière plan sélectionner, effacez-le ! A ce stade, photopéa vous demandera de pixéliser les objets avant leur manipulation. Pour cela, un clic droit sur le calque vous permettra d'attendre l'option "pixéliser"
+ info
Cliquez sur L'onglet selection pour continuer
Etape n°6: changer la couleur des ailes du dragon
Vous allez modifier la couleur des ailes du dragon. Sélectionnez dans un premier temps une couleur de remplissage pour les ailes. Pour cela cliquez sur le sélecteur de couleur situé en bas de la barre d'outils (les 2 petits carrés de couleurs).
Cliquez sur l'OUTIL PINCEAU POUR continuer.
+ info
Etape n°6: changer la couleur des ailes du dragon
Effectuez ensuite un clic gauche maintenu sur l'outil pinceau puis sélectionnez l'outil "Remplacement de couleur". Plusieurs modes de remplissage sont disponibles, optez pour le mode "teinte" ou "couleur" puis passez le pinceau sur les zones à colorier. Vous pouvez ajuster la taille du pinceau en cliquant sur le volet déroulant situé à gauche du mode de remplissage.
+ info
Cliquez sur l'OUTIL PINCEAU POUR continuer.
Etape n°7: le positionnement du dragon
Réutilisez à présent l'outil de sélection d'objet, et réglez le contour progressif à 0pixels puis sélectionnez l'ensemble du dragon. Cliquez ensuite sur l'onglet "Edition". Dans le menu qui s'affiche, cliquez sur "Transformation libre". Vous pouvez désormais ajuster la taille et la rotation du dragon comme bon vous semble ! La rotation est accessible en plaçant le curseur de la souris aux coins de l'image. Placez le calque du dragon sous le calque du château.
Cliquez sur l'onglet EDITION pour continuer
Etape n°8: l'export
Il ne vous reste plus qu'à exporter le rendu final! Cliquez sur l'onglet "Fichier" puis "exporter en tant que" et choississez le format .png.
Cliquez sur l'onglet fichier pour continuer
Bravo, vous avez terminé le TP !