6 place holders pour vos créas web ou email

| 0 Commentaires

On trouve de tout sur le web. Pour les web designers et autres créatifs, des images par défaut à la bonne taille (place holders) se révèlent aussi pratiques qu'un bon Lorem Ipsum.
Partagez si vous aimez! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Vous travaillez sur une créa HTML et vous voulez montrer à qui de droit les emplacements des images, avec les bonnes dimensions? Des services d’image place holder sont là pour vous aider.


Comme un lorem ipsum, mais pour les images. Un place holder est une image par défaut qui marque l’emplacement d’une future image dans une maquette de site web, ou d’email. Voici des sites qui proposent ce genre de solution. Je les ai classés par ordre de préférence (mon préféré est tout en bas, hein).

dummyimage

La base, mais ça fonctionne très correctement. Vous choisissez la taille de votre image, sa couleur de fond, de texte, et un éventuel texte. Au final vous construisez votre URL vous-même, comme ceci (exemple de l’image d’illustration de cet article) :

http://dummyimage.com/200×200/fc37e8/fff.png&text=Ceci+n’est+pas+une+image.

En 560×300, fond noir, j’aurai

et voilà

placesheen

On monte d’un cran dans la folie (mais pas dans l’efficacité). Là, vous aurez une image de Charlie Sheen qui viendra s’incruster dans votre créa. Toujorus la même méthode, c’est dans l’URL que tout se joue, avec pour seules options les dimensions :

http://placesheen.com/560/300/

Ce qui nous donne :

placehold.it

Interface propre et pro, pas de fioriture, beaucoup d’options, ce site va plaire à nos amis allemands. Vous pouvez jouer sur la taille, le format (png, jpg, …), le texte et la couleur. Si on fait tout ça on peut avoir une URL de ce type:

http://placehold.it/560×300/000/0ff.png&text=coucou

placekitten

Tout aussi fun que placesheen.com, mais un peu plus sérieux (dans le sens mieux réalisé et un peu plus fiable), vous aurez le loisir de placer des images de chatons sur vos créas. Du coup, votre maquette deviendra toute mignonne et sera forcément validée et approuvée par les nana du service marketing (je m’emballe). Vous ne définissez que la taille de l’image.

La syntaxe est la suivante :

http://placekitten.com/200/300

Vous pouvez placer le paramètre /g/ pour la même image en niveaux de gris. Pour l’illustration cela donnera:

http://placekitten.com/g/560/300

lorempixel

Je vous le disais… comme un lorem ipsum, en image. Avec LoremPixel, vous déterminez la taille de l’image, en niveaux de gris ou en couleur, le thème de l’image et éventuellement un texte. 11 thèmes sont proposés, ce qui sera bien suffisant.

Allons-y, donc:

http://lorempixel.com/560/300/technics/

flickholdr

Celui là, c’est pour moi le must, par rapport à la variété des images. L’idée est de choper des photos de Flickr. Vous pouvez passer en paramètre un tag, et là le choix est assez grand pour ne pas avoir de répétitions. Vous pouvez même passer plusieurs tags séparés par des virgules. Le paramètre /bw vous trouve une photo en noir & blanc. Il y a un autre paramètre permettant de jouer sur l’offset, mais comme je ne sais pas ce que c’est, je ne vous en parle pas.

Allez, un exemple complet:

http://flickholdr.com/560/300/geek,poor/bw/2

Voilà, je pense qu’avec tout ça vous aurez de quoi faire. Je me rends compte que j’adore faire ce genre d’articles, mais n’hésitez pas à me dire si c’est un peu trop high-level pour vous. En gros, dites-le si je vous fait chier :)

 Merci à GeekLeague pour son article à ce sujet
Quelques livres sur le sujet
Partagez si vous aimez! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Auteur : Mathieu

Passionné et professionnel du web depuis 10 ans, je rédige Le Geek Pauvre depuis 2007. Le but de mon blog est de partager avec vous des outils gratuits, vous permettant de remplacer ou d’améliorer des logiciels ou services payants. En 2012, j’ai reçu la distinction de meilleur blog high-tech aux Golden Blog Awards.

Laisser un commentaire

Champs Requis *.