Share
Bienvenue à la septième leçon de notre série Web Design for Kids, consacrée aux images!
Nous avons ajouté plusieurs images sur notre site Web Tuts + Town, mais nous n’avons pas encore parlé d’images en détail. Dans cette leçon, nous aborderons les types d'images les plus couramment utilisés sur le Web et certaines techniques de modification d'images..
N'oubliez pas de poser des questions dans la section commentaires au bas de cette page.!
Nous ne sommes pas complètement étrangers à l'utilisation d'images sur le Web. Notre site Web Tuts + Town a utilisé quatre images. Nous avons pu ajouter ces images dans notre code HTML, puis les redimensionner et les positionner avec CSS.
Lorsque vous utilisez des images sur le Web, vous devez prendre en compte de nombreux éléments, tels que le meilleur format, l’obtention des bonnes images et leur utilisation..
Tout au long de cette leçon, nous appliquerons des effets à l'image suivante, une carte de Tuts + Town:
Tuts + plan de la villeLes images les plus couramment utilisées sur le Web sont les fichiers JPEG, PNG et SVG. Parlons de ce qu'ils sont exactement.
Un JPEG est une image avec l’une des extensions de fichier suivantes: «.jpeg» ou «.jpg». Ces images constitueront probablement la majeure partie de ce que vous rencontrerez et utiliserez sur le Web..
Ils sont fantastiques pour créer un plus petit photo taille du fichier image pour une utilisation plus facile sur le Web ou pour l’envoi par courrier électronique, par exemple. Cependant, cette taille de fichier inférieure signifie que vous obtiendrez également une image de qualité inférieure..
Un fichier PNG est une image portant l’extension de fichier «.png». Un fichier JPEG entraîne une légère perte de qualité d’image, pas un fichier PNG. Ces fichiers auront un aspect aussi net et net que l'original, mais en gardant cette qualité, la taille du fichier pouvez être beaucoup plus grand qu'un .jpeg.
Les PNG sont un bon choix pour les dessins au trait, le texte et les icônes qui ont déjà une taille de fichier inférieure. Il est également possible d’avoir un fond transparent avec un PNG, contrairement à un JPEG.
Les graphiques vectoriels évolutifs, au format SVG, sont des images pouvant être redimensionnées à la fois grandes et petites sans avoir pixélisé et floue, comme le ferait un JPEG ou un PNG plus traditionnel. Ces images sont enregistrées avec une extension de fichier «.svg» et sont parfaites pour les illustrations et les logos d’entreprise..
Toutes les images utilisées dans Tuts + Town sont des fichiers SVG! Si nous devions revenir dans le CSS pour notre site et changer le largeur d'une image à 1000px il serait énorme et limpide.
SVG est à droite - beaucoup plus clair!Il y a beaucoup d'endroits pratiques pour obtenir gratuitement et libre d'utiliser photos sur le web.
Certaines images peuvent ne rien coûter, mais elles peuvent également nous obliger à respecter certaines règles, telles que mentionner le nom du photographe partout où nous l'utilisons. D'autres images peuvent être libres d'utiliser uniquement pour des projets personnels et ne peuvent pas être utilisées pour une entreprise.
Assurez-vous toujours de vérifier le licence (ou autorisations) quand vous n’êtes pas certain, mais pour le moment parlons de quelques options qui sont tous les deux gratuit et libre d'utilisation.
De nombreux concepteurs Web utilisent des outils de retouche d'image, tels que Photoshop, pour modifier leurs photos avant de les utiliser sur un site Web. Ces changements peuvent être n'importe quoi: changer les couleurs, éliminer les ombres, recadrage.
La plupart des systèmes d’exploitation d’ordinateur auront un programme capable de gérer certaines modifications très élémentaires. "Aperçu" est une excellente option si vous avez un ordinateur Mac, ce qui vous permettra de redimensionner, de rogner et d'enregistrer des images dans d'autres formats. Pour accéder à Aperçu, vous pouvez lancer une recherche sur nos ordinateurs (loupe en haut à droite de votre écran!) Ou ouvrir une image en double-cliquant dessus, ce qui est probablement défini comme notre programme d'affichage d'images par défaut..
Sur un ordinateur Windows, «Windows Photo Viewer» ou «Paint» seront probablement les programmes d’image par défaut que nous pourrons utiliser, ce qui permet quelques modifications de base..
Quand on parle de recadrage nous voulons dire enlever les parties extérieures d'une image.
Le recadrage peut s'avérer très pratique lorsqu'il ne s'agit que d'utiliser une section d'une grande image. il est même possible que le rognage prenne d'autres formes, comme des cercles!
En plus de changer la taille d'une image avec CSS, de nombreux effets de filtres sont disponibles, tels que rendre une image en noir et blanc, transparente ou ajuster son niveau de luminosité..
Nous pouvons convertir des images en noir et blanc dans notre CSS en utilisant le filtre propriété.
Dans cette propriété, nous incluons niveaux de gris puis un pourcentage entre parenthèses (parenthèses).
Voici un aperçu de certains CSS qui produiront une image entièrement en noir et blanc:
img filtre: niveaux de gris (100%);
L'opacité fait référence à la transparence ou à la transparence. le opacité la propriété prend des valeurs de .0 à 1, avec .0 être complètement transparent (invisible) et 1 n'étant pas transparent du tout. Toutes les valeurs entre les deux donnent une force de transparence différente.
Par exemple, si nous fixons opacité: 0,5; sur une série de cercles dans un document CSS, le résultat ressemblerait à ceci:
Ce type d’effet sur une image peut être intéressant si nous cherchons à rendre une image un peu moins perceptible sur une page, afin que le texte placé en haut soit plus visible..
Nous pouvons également rendre une image floue en utilisant des filtres CSS. Dans la propriété de filtre, nous devons utiliser brouiller suivi d'une valeur de pixel entre parenthèses.
img filtre: flou (5 pixels);
Plus la valeur de pixel est élevée, plus l'image sera floue..
Remarque: Pour une liste plus complète des filtres CSS, vous pouvez consulter cette ressource. Cliquez simplement sur l'onglet CSS de n'importe quelle démo pour voir comment c'est fait..
Dans ce cours, nous avons exploré certains formats d’image couramment utilisés sur le Web, ainsi que quelques effets pouvant être appliqués à ces images. Préparer nos images pour un site peut être une tâche allant de très simple avec un minimum d'outils requis, à des modifications assez complexes nécessitant des outils puissants.
Ensuite, nous discuterons bases de la conception, où nous parlons de la façon d'utiliser ce que nous organisons sur la page Web.
On se voit en ville!
Accentsconagua