Obtenir des images types pour tester vos design

Paul Underwood

Traducteur

Sébastien Germez

Dans cet article, nous allons voir comment utiliser Fake Images Please pour générer des images types pour nos pages Web.

Commentez

- Titre : Obtenir des images types pour tester vos design

- Auteur : Paul Underwood

- Traducteur : Sébastien Germez

- Parution : 28 janvier 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

- III. Insérer une image de 300x300

- IV. Insérer une image de 250x100

- V. Insérer une image de 250x100 avec un arrière-plan rouge

- VI. Insérer une image de 350x200 avec un arrière-plan rouge et un texte noir

- VII. Insérer une image de 350x200 avec un texte personnalisé

- VIII. Insérer une image de 350x200 avec une police personnalisée pour le texte

- IX. Conclusion

- X. Liens

- XI. Remerciements

I - Traduction

Cet article est la traduction la plus fidèle possible de l'article original de Paul Underwood, Fake Images Please.

II - Introduction

Lorsque vous créez un nouveau site Web, vous passez obligatoirement par quelques étapes avant de finaliser le design.

Tout d'abord, obtenir les besoins (cahier des charges par exemple) du client ; à la suite de quoi vous pouvez créer une maquette que vous pourrez montrer au client afin d'être sûr que votre production correspond bien à ses attentes.

Grâce à cette maquette vous aurez un aperçu visuel basique de ce à quoi doit ressembler votre site Web, mais ce n'est pas encore très abouti. C'est à partir de là que vous commencez à créer les prototypes de vos pages. Et pour ce faire vous avez besoin de contenu type (texte) et d'images types.

Pour le texte rien de plus simple : il suffit d'insérer le très connu Lorem Ipsum. Pour les images en revanche le travail est plus fastidieux. Vous devez les créer de toutes pièces et si vous avez besoin de modifier leurs tailles par la suite vous êtes obligés de repasser par l'étape d'édition via un éditeur d'images quelconque.

Une solution possible est d'utiliser un service de « placeholder » comme Fake Images Please. Ce service vous permet de créer des images types de la taille que vous souhaitez en utilisant leur API, ce qui signifie que vous pouvez simplement utiliser ces images en les insérant en HTML.

III - Insérer une image de 300x300

La méthode la plus simple pour créer une image est de lui passer un paramètre pour la taille. Cet exemple va créer une image de 300 pixels de large et 300 pixels de haut.

<img src="http://fakeimg.pl/300/">

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

IV - Insérer une image de 250x100

Vous pouvez également passer en paramètre deux tailles. Votre image sera alors créée avec la taille suivante : largeurxhauteur.

<img src="http://fakeimg.pl/250x100/">

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

V - Insérer une image de 250x100 avec un arrière-plan rouge

Vous pouvez aussi préciser la couleur de l'arrière-plan. Pour ce faire il vous suffit d'ajouter un deuxième paramètre dans l'URL de votre image.

<img src="http://fakeimg.pl/250x100/ff0000/">

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

VI - Insérer une image de 350x200 avec un arrière-plan rouge et un texte noir

Vous pouvez passer un troisième paramètre afin de préciser une couleur pour le texte à l'intérieur de l'image. Pour créer une image de 350x200, avec un arrière-plan rouge et un texte noir, utilisez le code suivant :

<img src="http://fakeimg.pl/350x200/ff0000/000">

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

VII - Insérer une image de 350x200 avec un texte personnalisé

Vous pouvez modifier le texte contenu dans l'image en passant en paramètre une chaîne de caractères « text » dont la valeur sera le nouveau contenu texte de votre image.

<img src="http://fakeimg.pl/350x200/?text=Paulund">

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

VIII - Insérer une image de 350x200 avec une police personnalisée pour le texte

Non seulement vous pouvez modifier le texte contenu dans l'image, mais vous pouvez également changer la police utilisée pour ce texte. Pour cela il suffit d'ajouter le paramètre « font » dont la valeur sera une police Google fonts.

<img src="http://fakeimg.pl/350x200/?text=World&font=lobster">

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

IX - Conclusion

Nous avons vu dans cet article comment utiliser très simplement des images types pour nos prototypes de pages Web. Le tout sans avoir besoin d'un éditeur d'images. Cette méthode permet un gain de temps considérable !

X - Liens

Fake image please

XI - Remerciements

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.