Création graphique en ligne

Transcription

Outils, ressources et applications
par Alexandra Lemonnier
Ce livre vous est présenté par Ressources Web Design
page 1 / 23
Droits d'auteur
Cet ebook est une création d'Alexandra Lemonnier - Ressources Webdesign.
Il vous est gracieusement offert et vous pouvez l'offrir également à qui vous voulez, à la condition stricte de ne pas
faire de spam !
Vous ne pouvez pas : vendre, copier, décompiler, réutiliser les contenus de cet ebook, sous quelque forme que ce
soit.
Merci de respecter les droits d'auteur !
Alexandra Lemonnier - Tous droits réservés.
page 2 / 23
Dessinez sans modération
L'article d'aujourd'hui sera à prendre au sérieux... ou pas !
Avec certaines des ressources qui seront présentées, vous pourrez réaliser d'excellentes images pour toutes
sortes d'applications.
Avec certaines autres ressources, vous pourrez principalement... vous amuser, passer le temps, vous déstresser
après une grosse journée de boulot, vous émerveiller de ce que permet la technique, juste pour le fun !
Récemment, je suis tombée sur une liste développée sur le blog Cocktail Web et je ne peux que rendre hommage
à ce beau travail de recherche et de compilation. Vous pouvez, à partir de la page qui présente 26 applications,
suivre le fil vers d'autres articles qui présentent d'autres ressources dans la même catégorie, notamment celui-ci.
Inutile donc de faire "ma compilation à moi" comme je l'avais initialement prévu en reprenant les applications de
cette liste qui contient plusieurs sites que je voulais déjà vous présenter, comme par exemple Muro.deviantart,
Escapemotions, Endlessmural et quelques autres.
Vous avez déjà largement de quoi faire avec cette première liste ! Pour ma part, j'adore Psychopaint, Farbe Water
Color, Splash, Bomomo, Weavesilk et Divvr (assez proche de Harmony présenté plus bas).
A cette liste, j'ajoute 10 + 2 autres outils de dessin et de peinture en ligne que j'avais engrangés par ailleurs. Là
aussi, il y a de vraies perles, des applications qu'on ne se lasse pas de manipuler dans tous les sens et qui
permettent de produire des images vraiment intéressantes et d'autres, plus ludiques avec des effets amusants et
curieux, à manier juste pour le plaisir.
J'ai choisi aussi de vous épargner les outils un peu trop sommaires qui ne proposent que des fonctionnalités très
basiques.
Petite précaution technique : beaucoup de ces applications fonctionnent nettement mieux avec Chrome. Donc si
vous ne parvenez pas à les utiliser sur d'autres navigateurs, ouvrez-les dans Chrome.
Voici donc, pour compléter la liste proposée par Cocktail Web, quelques autres sites sur lesquels vous allez
pouvoir vous lâcher !
Allez-y, ne soyez pas timides, personne ne vous regarde ! :-)
page 3 / 23
#1 Sketchpad
Une interface de dessin qui offre des multitudes de possibilités, il faut y passer un peu de temps pour se
familiariser avec les outils mais comme souvent, en quelques manipulations vous allez comprendre. Cliquez sur
tous les onglets, essayez tous les outils qui vous sont proposés...
#2 Harmony
Ici, il s'agit de choisir dans le petit menu tout en haut de la page, le genre de motifs qui vont se déployer sur la
page blanche. C'est le placement et l'impulsion de votre souris qui vont déterminer les figures. En passant d'un
motif à l'autre, vous pouvez aussi créer des superpositions.
#3 Impressionist
La grande différence par rapport à l'autre application Impressionist, c'est qu'ici vous pouvez charger vos propres
images. Pas évident au premier abord cette interface dépouillée à l'extrême mais si vous cliquez en haut à gauche
pour sélectionner un modèler d'image ou charger votre propre image, vous allez comprendre. Réglez les
paramètres de "touche de pinceau" selon vos souhaits (essayez un peu tout ce qui est proposé) et cliquez sur Start
. Quand l'image générée vous plaît, cliquez sur Stop puis sur Save Image pour la sauvegrader.
#4 Lines go all over the place
A vrai dire, je mets juste cette ressource pour le fun parce qu'il n'y a pas grand-chose à maîtriser dans la
conception d'une image : tant que votre souris se promène sur l'écran, des lignes brouillonnes sont dessinées.
C'est juste amusant et curieux ou idéal pour créer des gribouillis déments (pour faire une pelote avec ses idées
noires par exemple !). Cochez et décochez les petites cases pour changer de mode de jeu, en couleurs ou en noir.
#5 Has Canvas
Encore une autre curiosité avec quelques séquences de création d'images très intéressantes, d'autres beaucoup
moins. Il faut trier mais j'aime bien Radiating Rainbow Squares qui permet de créer des fonds assez sympa. Vous
pouvez sélectionner les séquences en cliquant sur Browse. Vous orientez les déplacements avec votre souris et
vous pouvez stopper la progression des images avec le bouton en haut de l'écran, comme vous arrêteriez une
vidéo.
#6 Plasma Tree
Vous ne pourrez faire qu'une seule chose avec Plasma Tree : lancer le dessin de silhouettes
d'arbres fantomatiques en cliquant avec votre souris à l'emplacement où vous voulez voir démarrer un nouveau
tronc. Au final, ça donne des images assez lumineuses.
#7 Neon Flames
Une interface toute noire avec à gauche, des pastilles de couleurs à sélectionner, et à droite un panneau pour
sélectionner le "mode de jeu". L'apparition des formes en gardant votre souris cliquée se fait de manière évolutive
et lente. Pour avoir des zones plus soutenues, repassez dessus, insistez. En passant sur la même zone avec
différentes couleurs, on multiplie les effets colorés. On peut "dessiner" sur toute la surface et faire disparaître le
menu de paramètres à droite. Au final, de jolies "galaxies" qui peuvent donner de beaux fonds.
#8 Flower Power
page 4 / 23
Jouez sur les paramétrages en haut de l'écran, posez votre souris sur la zone de création et promenez-vous...
dans un champ fleuri !
#9 Recursion
Avant de commencer, je vous invite à cliquer sur Clear dans le menu de droite parce que l'application se lance
toute seule avant que vous ayez pu choisir vos options. Plusieurs catégories de motifs, plusieurs modes de jeu et
chaque fois que vous cliquez sur l'écran, une nouvelle arborescence se lance. Pour des images bizarres... :-) Si
vous voulez faire une copie d'écran pour sauvegarder votre image, vous pouvez faire disparaître le menu de droite
en cliquant en bas sur Recursion settings. Ah et ne vous étonnez pas si votre écran se fige un peu, il semble que
Recursion soit vraiment gourmand en ressources.
#10 Cink
Alors sur Cink, vous ne serez pas totalement libres de faire ce que vous voulez mais quand même, à partir d'un
choix assez conséquent de patterns, il y a des choses sympa à faire. Pour naviguer dans les choix proposés,
cliquez sur See more. Vous aurez accès, via une lightbox, à tous les patterns. Pour utiliser un pattern, cliquez sur
Draw this? Ensuite, eh bien selon les modèles, vous pourrez intervenir ou pas, vous pourrez par exemple stopper
un processus en cliquant sur Cancel? ou le laisser aller jusqu'au bout en fonction de l'image que vous voudrez
obtenir. Tant que la petite fenêtre qui indique Rendering... Cancel? ne se ferme pas, ça signifie que le processus
n'est pas terminé. Un défaut quand même : il y a quelques modèles dont vous ferez très vite le tour... Assez limité
donc mais ça reste intéressant à expérimenter.
***
Enfin, deux sites, juste pour le plaisir tactile !
Voilà deux sites que j'adore, qui ne servent à rien ou enfin faudra m'expliquer... totalement régressifs... mais alors
c'est du pur plaisir !
#1 Burn Canvas
No comment...
#2 This is sand
No comment ! :-)
Et vous, quelles sont vos applications préférées ?
Avez-vous réalisé quelque chose qui vous plaît ?
On peut voir ? :-)
page 5 / 23
Un festival de générateurs graphiques
On pense souvent que l'été est la saison des festivals. Sur le Web, c'est toute l'année, c'est pourquoi il est si
difficile de décrocher ! :-)
Dans plusieurs articles précédents, j'avais commencé à créer des séries en fonction de l'application que l'on
cherche, j'ai bien peur que mon "bel ordonnancement" et ma volonté de classer soient définitivement perturbés !
Si on trouve souvent des pages de générateurs uniques, avec une seule application, on a aussi des sites qui
proposent tout un ensemble d'outils, de quoi se faire happer pour de longues heures si on ne tient pas fermement
son emploi de temps en laisse !
Voici donc deux sites en particulier que je vous conseille de visiter quand vous avez du temps devant vous ou que
vous souhaitez vous accorder une petite récréation.
Dans tous les cas, bookmarkez-les, ils font partie de ces sites qu'on est content de retrouver facilement lorsqu'on
souhaite mettre une ombre sous une image, créer des coins arrondis, faire un reflet, et toutes sortes d'autres
choses.
1. Support du Web
Rien à dire, c'est un superbe site à explorer sans modération. Vous y trouverez également des templates très
sympa.
2. Button Web Generator
Cette page est juste une des pages de générateurs qui sont proposés et auxquels vous accédez grâce au menu
qui se trouve tout en haut.
Les pages de génération de reflets et de coins arrondis seront redondantes avec le site précédent mais ici, vous
disposez d'un générateur de boutons, d'un générateur d'ombres et surtout, d'un générateur de watermarks, outil
qui peut vous être bien utile si vous souhaitez montrer votre travail sans risquer de vous le faire piquer !
page 6 / 23
Le graphisme à la portée de tous
Photoshop ou pas Photohsop ? Définitivement, c'est une question qui n'est plus d'actualité.
Vous l'avez ? C'est parfait. Vous ne l'avez pas ? Oubliez-le, vous n'en avez pas vraiment besoin !
Il y a quelques semaines, je vous présentais un pack graphique royal pour moins de 11$ mais qui nécessitait
d'avoir Photoshop.
Voici aujourd'hui la V2, encore plus riche, encore plus belle, toujours aussi bon marché et surtout : utilisable par
tous.
La grande innovation de ce pack, c'est que Max Rilsky, le concepteur, a tenu compte des demandes de ses clients
qui n'ont pas Photoshop (et dont je fais partie, je n'ai qu'une vieille version de Photoshop Elements), qui
souhaitaient pouvoir utiliser une autre application et disposer des éléments graphiques au format PNG.
Non seulement, dans ce pack V2, vous disposez de tous les fichiers PSD, des fichiers PNG lorsque c'est justifié,
mais vous allez aussi pouvoir découvrir un logiciel de création graphique en ligne qui s'appelle Sumo Paint (avec
une version à installer sur son PC) et qui permet de faire à peu près tout ce qu'on peut faire avec Photoshop.
Impatiente de tester, j'ai créé mon compte (gratuit) sur Sumo Paint, j'ai ouvert tous les fichiers "sumo" du pack et
voilà ma première impression : c'est impressionnant ! :D
Contrairement à Photoshop, les concepteurs de Sumo Paint ont prévu une rubrique d'aide accessible : toutes les
fonctionnalités sont présentées sous forme de vidéos.
Bien sûr, avant de tout maîtriser il faut y passer du temps mais le peu que j'ai pu faire en à peine une demi-heure
sans me casser la tête, en utilisant l'interface de manière intuitive, me laisse penser que cette application est
vraiment à la portée de n'importe qui.
Donc, deux bonnes nouvelles aujourd'hui : un pack graphique stupéfiant pour moins de 10$ et une application de
création graphique très développée et gratuite.
Qui peut encore dire que le graphisme est compliqué et inaccessible ? :-)
P.S. : créer un compte sur Sumo Paint ne prend que quelques instants. Cliquez sur le bouton "Join now", il n'y a
pas de double optin, vous accédez à l'interface immédiatement. Vous pouvez en partie afficher le site en Français,
ensuite il suffit d'explorer toutes les rubriques... et de s'amuser !
page 7 / 23
Réalisez votre page perso en cinq minutes
Pour être présent(e) sur le Web, vous n'avez pas forcément besoin d'avoir un site. Vous n'avez peut-être rien à
dire, tout simplement. Et puis il y a les réseaux sociaux qui vous permettent de vous exposer en ligne.
Maintenant, vous avez peut-être envie d'avoir une page Web à vous, qui reflète un peu (ou beaucoup) ce que vous
êtes, ce que vous faites, qui vous êtes...
Si vous êtes dans ce cas, alors ceci peut vous intéresser.
Le service Flavors.me vous permet de vous créer une page perso avec un certain nombre de paramétrages très
sympas, entièrement gratuitement.
C'est très facile à faire, il suffit de s'amuser avec l'interface. Voici la page que je me suis créée sans me creuser la
tête en moins de dix minutes : http://fr.flavors.me/alxlem#98b
J'ai juste choisi quelques paramètres, chargé une image de fond, inscrit les urls de mon compte Twitter et de ma
chaîne YouTube que l'on peut afficher sur la page en cliquant sur les icônes qui se trouvent à gauche et voilà !
Rendez-vous sur la page d'accueil de Flavors.me, regardez un peu tout ce que vous pouvez faire (vous pouvez
tout afficher en Français en cliquant sur "Langue" en haut à droit de l'écran), il y a une petite vidéo de démo.
Puis lorsque vous êtes prêt(e) à démarrer, cliquez sur le bouton "Get started". Ensuite, suivez les instructions,
naviguez dans le menu de configuration de votre page, testez des choses, vous avez une prévisualisation en direct
de ce que vous faites.
Enfin, pour sauvegarder votre page, vous devrez créer un compte.
Vous n'aurez pas accès à toutes les fonctionnalités gratuitement mais en prenant l'option Premium, vous pouvez
utiliser tout ce que vous voulez y compris un nom de domaine à vous, pour 20$ par an, autant dire que c'est
donné.
Personnellement, je trouve ce service vraiment très chouette. Si vous voulez voir ce que d'autres ont fait, je vous
conseille l'annuaire, vous y trouverez sûrement de l'inspiration.
page 8 / 23
Un seul site avec des générateurs en pagaille
Lorsque j'avais rédigé l'article sur les générateurs de boutons, je vous avais promis de vous parler d'un site qui
méritait un article à lui seul.
C'est un site qui non seulement vous propose de créer des boutons, mais aussi bien d'autres choses, c'est
pourquoi je me devais de détailler un peu.
Ce site s'appelle GRSites.com. si vous voulez créer des boutons, pas de problème, c'est ici.
Mais vous allez bien vite repérer le menu dans le haut de la page qui vous dirige vers d'autres pages pour créer :
des logos, des menus, des fonds pour vos sites, des petites boîtes de texte, des icônes...
Les générateurs sont extrêmement faciles à utiliser et très intuitifs, amusez-vous avec, faites des tests...
Si vous voulez, vous pouvez aussi chercher un fond prêt à l'emploi en vous rendant ici, ou bien fouiller dans la
collection de 6800 polices de caractères, ou bien encore dégoter le "son qui tue" pour vos vidéos ou n'importe quoi
d'autre...
Quand je vous disais que ce site valait son pesant d'or !
Alors vous allez me dire : "mais tout cela est-il gratuit ?". La réponse c'est oui, jusqu'à un certain point.
Rendez-vous sur cette page pour voir précisément ce que vous pouvez obtenir entièrement gratuitement.
Vous pouvez d'ailleurs vous créer un compte gratuit pour conserver vos créations. Il suffit de cliquer sur "Register"
en haut de la page à droite. Vous pourrez ensuite utiliser les codes HTML qui vous seront fournis pour afficher vos
éléments graphiques directement dans vos pages Web.
Et bien sûr, si vous voulez profiter de tous les services offerts, plusieurs types d'abonnements vous sont proposés
mais franchement les tarifs restent tout à fait modiques.
***
page 9 / 23
Deux générateurs de templates en ligne
"Je veux créer mon site Internet mais je ne sais pas comment faire , c'est dur, je n'y connais rien, je ne suis pas
graphiste... ouiiin !"
Bon alors pour celles et ceux qui pleurnichent encore pour créer leur premier template, qui ne veulent pas utiliser
les modèles tous faits proposés par leur hébergeur, qui ne veulent pas utiliser un logiciel spécial, qui sont
totalement réfractaires à l'idée d'écrire ne serait-ce qu'une ligne de code HTML ou qui n'ont pas un sou à
dépenser... séchez vos larmes, voici deux solutions gratuites de création de templates en ligne dont une en
français (mais oui ! :-)).
Cool Template
Il semblerait que le générateur Cool Template soit en fait une édition simplifiée de Artisteer, le logiciel maintenant
bien connu de création de templates HTML ou de thèmes pour WordPress et autres plateformes de CMS.
Pas besoin de parler anglais pour prendre cet outil en mains : l'interface est très intuitive, il suffit de s'amuser avec.
Si vous voulez utiliser vos propres images pour votre header par exemple, vous serez dirigés vers une page pour
créer votre compte gratuitement et instantanément, pas de double-optin ni rien de tout ça.
Dans votre compte, vous allez pouvoir stocker vos images, les modèles de templates que vous aurez créés.
Lorsque vous voulez télécharger votre template, vous cliquez sur l'onglet "Download" et vous choisissez le format
que vous voulez. Simple and easy. Très sympa.
Générakit
Ce générateur en français permet aussi pas mal de choses, dans un tout autre style. Tout comme pour Cool
Template, la prise en mains est quasi immédiate, c'est tout à fait simple d'utilisation et très ludique. La vidéo de
présentation sur la page d'accueil est de ce point de vue très explicite.
Vous trouverez en plus quelques tutoriels qui vous apprendront non seulement à créer votre template mais aussi à
le mettre en ligne, c'est à cette étape que beaucoup de débutants butent...
Avec Générakit, vous ne pouvez créer que des templates HTML, mais ce n'est pas un handicap si vous
n'envisagez pas de créer un blog ou une plateforme interactive. En outre, les possibilités de customisation sont
vraiment bien développées.
Ensuite... eh bien rien ne vous empêche d'améliorer ce que vous aurez créé, c'est un cheminement naturel : vous y
viendrez forcément parce que vous serez plus exigeants au fil du temps. :-)
page 10 / 23
18 + 1 sites pour créer vos boutons
Dans la série des outils de création graphique en ligne, je vous propose aujourd'hui une sélection de 18 sites sur
lesquels vous allez pouvoir créer des boutons de toutes sortes pour vos sites, vos blogs, vos pages de vente.
J'ai passé en revue beaucoup plus que 18 sites en vérité mais je n'ai gardé que ceux qui fournissent un service de
qualité et bien sûr, j'ai éliminé... ceux dont les applications ne fonctionnent pas ! Ne riez pas, il y en a. :-(
Je n'ai pas retenu non plus certains sites qui proposent des graphismes pour le moins... datés. Les choses
évoluent vite en matière de création graphique et on voit encore traîner sur le Web des objets à l'esthétique
franchement dépassée. Je vous épargne donc... les boutons les plus moches que j'ai pu trouver. 8-O
La plupart de ces sites offrent un service gratuit, certaines offres sont semi-gratuites et j'ai sélectionné également
un site payant mais vraiment très bon marché pour la qualité graphique qui est proposée. Vous trouverez
également un site sur lequel vous pouvez télécharger des boutons libres de droits en formats .png et .psd.
Difficile de rentrer dans le détail de l'utilisation de chaque site, le mieux c'est que vous testiez des choses, en
général, même les interfaces les plus sophistiquées restent assez intuitives donc... lancez-vous, je vous assure
qu'il n'y a aucun danger, votre ordinateur ne risque rien si vous faites une fausse manœuvre, vous non plus
d'ailleurs !
1. As Button Generator
2. Buttonator
3. Button Boost
Sur Button Boost, vous avez accès à un certain nombre de boutons gratuits. Pour n'afficher que les boutons
gratuits, cliquez sur le petit lien qui se trouve au-dessus des boutons et qui indique "Show only free buttons"'.
4. Button Generator
Sur Button Generator, même chose, vous n'avez accès qu'à un certain nombre de boutons gratuitement. Pour les
distinguer dans la liste, repérez ceux qui indiquent la mention "Edit button".
5. Cooltext
Déjà signalé dans l'article consacré à la création de logos, le site Cooltext vous offre ici encore une application bien
sympa.
6. Da Button Factory
7. Flash Vortex
page 11 / 23
Le site Flash Vortex est une excellente ressource et pas seulement pour vos boutons. Vous y trouverez plein
d'autres choses... Les éléments animés que vous allez créer seront en flash.
8. Glassy Buttons
9. High Response Form Button Creator
Une interface un peu aride (mais sans pub, enfin presque sans pub !) qui permet de créer des boutons réputés
pour être efficaces sur les pages de vente. Vous pouvez choisir la couleur de la bordure du bouton au repos et une
autre couleur lorsque le bouton est survolé.
10. Makebutton
11. My Cool Button
Les services de ce site sont payants mais la somme à débourser est vraiment ridicule vu ce qui est proposé.
12. PHP Button Generator
13. The Free Web Stuff
14. Free Gif Button Generator
Les trois sites qui suivent vous permettent de créer ces petits boutons de 80 px x 15 px que vous pouvez utiliser
pour signaler vos flux RSS, vos réseaux sociaux, pour faire des échanges de liens avec d'autres sites...
15. Brilliant Button Maker
Avec cette application, vous avez la possibilité de charger vos propres images pour créer vos boutons.
16. Button Browser
Lorsque vous aurez créé votre bouton, cliquez tout en bas de la page sur le lien qui indique "Resize this button",
vous aurez la surprise de voir dans la page qui va s'ouvrir, votre bouton en très grand. Vous aurez le choix entre
plusieurs tailles.
17. Pixel Button
Une interface toute simple ici, pour aller à l'essentiel.
Pour finir, encore deux sites intéressants...
18. Button Maker
Voici une application fort intéressante. Ici vous ne pourrez pas télécharger l'image du bouton que vous aurez créé
mais vous allez pouvoir copier son code CSS. Lorsque vous avez fait vos choix de couleurs et de formes, cliquez
sur votre bouton qui indique "View the CSS".
page 12 / 23
19. Button Download
Ici, pas d'application pour créer vos boutons : vous pouvez tout simplement télécharger les images qui vous
intéressent.
page 13 / 23
11 Sites pour créer et éditer vos favicons
Lorsqu'il s'agit de se repérer parmi vos dizaines (centaines, milliers... ?) de sites favoris (bookmarks), vous savez à
quel point la petite image que l'on nomme "favicon" peut être utile. C'est à vrai dire le seul moyen de retrouver un
site dans une longue liste sans s'énerver.
Et puis, ces petites images, loin d'être une coquetterie accessoire, permettent aussi de donner une identité à votre
site ou à votre blog parmi des millions d'autres. Ce n'est dont pas quelque chose de négligeable.
Alors bien sûr, vous serez sans doute nombreux à tout savoir à propos des favicons mais il y aura certainement
aussi beaucoup de lecteurs de ce blog qui débutent, qui ont déjà énormément de choses à intégrer et à gérer pour
mettre en place leur premier site, donc j'ai pensé à eux en priorité, pour leur offrir un certain nombre de ressources
utiles parmi les meilleures que j'ai pu trouver.
Je ne donne pas ici une liste de tous les sites que je connais, seulement une sélection des outils vraiment
intéressants. Sachant que nous sommes différents les uns des autres quant au choix d'une interface ou d'une
autre, j'espère que vous trouverez dans cette sélection l'outil qui vous conviendra.
Mais avant de commencer à créer votre favicon, la première chose à savoir, c'est que les favicons sont en principe
des images au format .ico. Certains des sites que je vous présente offrent la possibilité de convertir une image .png
par exemple en image .ico.
Sinon, parmi les éditeurs graphiques gratuits, je sais que le logiciel XnView gère les fichiers .ico, ce qui peut être
utile si vous souhaitez créer un favicon à partir d'une photo par exemple. Vous avez aussi un logiciel qui s'appelle
IcoFX, qui est gratuit et très performant. Ceci dit, ces logiciels sont peut-être superflus si vous ne prévoyez pas
d'utilisation intensive de fichiers .ico.
La deuxième chose à savoir, c'est que votre image de départ devra être carrée et que votre favicon devra de
préférence avoir des dimensions de 16px x 16px.
Pour installer votre favicon sur votre site, il faut que votre image porte le nom "favicon". Il vous faudra charger votre
favicon sur votre serveur à la racine de votre site (là où se trouve la page index de votre site) puis vous devrez
inscrire une ligne de code dans la partie <head> de votre page HTML :
<link rel=”shortcut icon” href=”favicon.ico” />
Pour votre blog WordPress, si un favicon existe déjà dans le dossier de votre thème, supprimez-le à partir de votre
serveur. Ensuite, chargez votre nouveau favicon à la racine de votre blog. En principe, votre favicon s'affichera
automatiquement. Mais, sur certains navigateurs un peu anciens, ça ne fonctionnera pas. Vous devrez alors aller
dans la section "Apparence -> Editeur" et ouvrir le fichier header.php puis chercher la ligne de code qui commence
par <link rel="shortcut icon" et qui se termine par /favicon.ico />.
page 14 / 23
Vous pourrez alors remplacer cette ligne de code, si elle existe, par celle-ci :
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
Si vous avez peur d'aller insérer du code dans le header de votre blog, vous pouvez également utiliser un plugin, il
en existe plusieurs qui feront le boulot pour vous. Faites une petite recherche à partir de la section "Extensions ->
Ajouter" et cherchez un plugin à partir du mot-clé "favicon". Je ne saurais vous en conseiller un plutôt qu'un autre
mais Favicon Rotator me semble pas mal car il permet de mettre en rotation plusieurs favicons.
Maintenant, pour créer et éditer vos favicons, voici les sites qui m'ont semblé dignes d'intérêt. Le premier est en
français, cocorico ! :D
1. Pagerank Hotel
Très simple à utiliser, permet aussi de créer des favicons animés.
2. Favikon
Chargez votre image et choisissez la zone qui servira à créer votre favicon.
3. Favicon Generator
Possibilité de charger votre image et de créer votre favicon grâce à un éditeur.
4. The Favicon Editor
Mêmes fonctionnalités que le précédent.
5. Favicon.cc
Mêmes fonctionnalités que le précédent mais vous pouvez aussi créer votre compte et accéder à d'autres
fonctionnalités, notamment le stockage de vos favicons.
6. Favicon Editor
Générateur et éditeur. Pour l'utiliser, vous acceptez que votre favicon apparaisse dans la galerie générale.
7. Genfavicon
Possibilité de charger votre image et de créer la vôtre grâce à un éditeur.
8. Favicon Generator
Générateur de favicon simple.
9. Little Icon Editor
Editeur de favicon.
page 15 / 23
10. iConvert
Convertisseur d'images, plusieurs options à sélectionner.
11. Convertico
Convertisseur d'images .ico vers .png et inversement.
page 16 / 23
Créez des images avec des mots
Aujourd'hui, je vous présente deux sites pour créer des images à partir de mots. Vous n'aurez que peu (voire pas)
de possibilités d'agencer les mots comme vous le souhaitez mais c'est aussi cet aspect aléatoire qui peut être
intéressant. Il y a parfois de très bonnes surprises. Je me souviens en particulier d'une image que j'ai créée pour le
header d'un de mes sites. Au bout de quelques essais, une image est sortie avec un agencement de mots
vraiment parfait, jamais je n'aurais réussi à agencer les mots de cette manière en le faisant moi-même ou alors en
y passant quelques heures à m'arracher les cheveux !
1. Typogenerator
Ici, c'est fort simple, vous inscrivez votre texte et vous cliquez sur la petite bande grise qui indique "generate". Le
mieux c'est d'utiliser peu de mots, le nom de votre site par exemple, c'est suffisant et ça ne risque pas de générer
une trop grande confusion.
Vous pouvez cliquer autant de fois que vous voulez pour générer une nouvelle image si celle qui s'affiche ne vous
plaît pas, vous pouvez conserver ("keep this one") ou changer ("generate new") le style des mots, leurs couleurs et
la couleur du fond.
Les résultats sont parfois complètement nuls et parfois tout à fait excellents. Parfois aussi on obtient des images
abstraites tout à fait intéressantes. Je vous préviens, c'est un site assez addictif !
page 17 / 23
2. Wordle
Encore un site à haut potentiel addictif ! Comme vous n'avez que peu de pouvoir sur l'agencement des mots, il est
très tentant de générer une autre image puis encore une autre puis encore une autre au cas où... Mon conseil :
quand vous obtenez une image qui vous plaît, faites une pause !
L'interface est ici beaucoup plus évoluée que le site précédent mais ce n'est pas évident de comprendre comment
ça fonctionne.
La première chose que vous devez faire c'est préparer dans un fichier texte tous les mots que vous voulez voir
apparaître dans votre image. La taille des mots dans l'image qui sera générée sera proportionnelle au nombre de
fois où votre mot apparaît dans votre texte. Pour que ce soit explicite, voici le texte que j'avais préparé pour créer
une image.
Webdesign Design Typographie Backgrounds Textures Couleurs Chromatisme Graphisme
Webdesign Couleurs Graphisme Typographie Textures Chromatisme
Webdesign Couleurs Graphisme Typographie Textures Chromatisme
Webdesign Couleurs Graphisme Typographie Textures
Webdesign Couleurs Graphisme Typographie
Webdesign Graphisme Design Backgrounds
Webdesign Graphisme Design Backgrounds
Webdesign Graphisme
Webdesign Graphisme
Webdesign Design
Webdesign Design
Voici maintenant une image créée à partir de ce groupe de mots.
En somme, plus un mot apparaît dans votre texte, plus il sera gros par rapport aux autres. Il est difficile de viser
juste la première fois, vous aurez sûrement besoin d'ajuster au fur et à mesure pour obtenir ce que vous voulez.
Pour commencer, cliquez sur "Create your own". Dans l'espace qui vous est présenté ensuite, collez votre texte
puis cliquez sur "Go". Ensuite, à partir des menus "Font", "Layout" et "Color", vous intervenez sur la présentation
de votre image. Si vous souhaitez changer d'image, changez un paramètre et la nouvelle image est générée
page 18 / 23
automatiquement.
Pour l'agencement des mots, vous pouvez choisir plusieurs options : tout horizontal, tout vertical, moitié-moitié, au
hasard... Pour les polices de caractères, le choix est assez important avec des polices originales. Pour les
couleurs, vous disposez de palettes prédéfinies et vous pouvez aussi créer vos propres palettes personnalisées. Si
vous êtes indécis, vous disposez d'un bouton qui génère des images de façon aléatoire (fonction "Randomize" en
bas de l'écran), là encore vous pouvez avoir de bonnes surprises.
Enfin, pour récupérer votre image, soit vous l'imprimez directement en cliquant sur "Print" soit... vous vous
débrouillez pour faire une capture d'écran ! Il n'y a pas d'option pour télécharger votre image.
Dernière chose : si vous avez un message universel à faire passer, vous pouvez diffuser votre image dans la
galerie du site qui est accessible à tous. Pour cela, cliquez sur "Save to public gallery" et remplissez les champs de
la boîte de dialogue qui vous est présentée.
page 19 / 23
Créez vos logos en ligne gratuitement
Les sites que je vous propose aujourd'hui s'adressent principalement à toutes celles à et tous ceux qui ne sont pas
graphistes, qui n'ont aucun logiciel de création graphique, qui ne comprennent d'ailleurs rien du tout à la création
graphique et qui ont pourtant besoin d'un logo ou d'une image sympa pour leur site ou autre... et je pense aussi à
toutes celles et à tous ceux qui n'ont pas envie de se prendre la tête pour créer quelque chose ou bien... à toutes
celles et tous ceux qui ont envie de s'amuser, tout simplement !
Je disposais d'un liste assez importante de sites mais n'avais jamais pris le temps de les tester à fond, c'est ce que
je viens de faire et ma foi, il y en a quelques uns qui permettent de faire des choses vraiment très sympa. A chacun
de voir selon ses goûts...
1. Cool Text
Certainement un des plus connus et qui offre pas mal de possibilités de customisation. La liste de polices de
caractères disponible est assez impressionnante. Un petit plus par rapport à d'autres sites du même genre : en
vous inscrivant gratuitement, vous pouvez sauvegarder les images que vous créez. Ça peut être utile pour toutes
sortes de raisons, notamment si vous voulez créer une nouvelle image avec vos anciens paramètres.
2. ACME Label Maker
Peut-être, le seul véritable intérêt de ce site c'est de pouvoir créer un petit label avec la police Dyno. Il y a pourtant
de nombreuses polices et plusieurs fonctionnalités mais le rendu reste assez sommaire. A tester en profondeur si
vous avez du temps devant vous...
3. Logo Creator
Assez peu de modèles différents mais des possibilités de customisation assez développées. Et pas de panique
pour remplir les cases où on vous demande une couleur, vous cliquez sur le champ et une petite palette apparaît.
4. Le site Medchecker
Pas du tout attrayant à première vue car l'interface est des plus rudimentaire et remplie de publicités AdSense !
Faites d'ailleurs bien attention où vous cliquez ! Ce n'est qu'une apparence parce que sur ce site vous allez pouvoir
créer de très beaux logos avec des lettrages 3D très sympa... mais il va vous falloir du temps pour tout explorer, il y
a 27 pages de modèles ! Voici quelque exemples.
Pour vous débarrasser de la marque du site, il vous en coûtera seulement 0,99 $, avouez que ce n'est pas
grand-chose.
5. Web 2.0 Free Logo Generator
Voici un générateur tout simple disposant de peu de polices de caractères mais il fait bien le boulot et peut très
bien convenir si vous avez besoin de quelque chose de simple que vous réaliserez en quelques minutes.
page 20 / 23
6. Mirror Text
Comme son nom l'indique, ce site permet de créer un logo avec un reflet. Le plus : un très grand choix de polices
originales. Faites attention à vos textes en minuscules si vous avez des lettres qui débordent en-dessous de la
ligne, l'effet de reflet ne sera pas terrible. Le moins : un choix de couleurs réduit, ce qui n'empêche pas de créer
des logos de bonne qualité.
7. Txt2Pic
Encore un site qui ne paie pas de mine et sur lequel il faut jongler avec les publicités AdSense... et ici il vous
faudra sans doute fouiller pour trouver quelque chose qui ait un peu d'allure car il s'agit de créer votre logo à partir
d'images de fond. Dans le genre, on trouve le meilleur comme le pire ! Mais regardez ce que j'ai réalisé, c'est tout à
fait acceptable. Et le choix de polices de caractères est assez impressionnant. A explorer si vous avez du temps
devant vous !
8. Eat My Name
Ici, vous n'aurez pas le choix, il n'y a rien à customiser ! Un peu anecdotique mais je l'ai trouvé assez amusant
pour vous le proposer.
9. Glowtxt et Pookatoo
Voici deux sites frères qui vous offrent la possibilité de créer des logos à partir de styles prédéfinis. Vous pouvez
choisir la couleur du fond et quelques effets. J'avoue que j'ai un petit faible pour ces deux sites, il y a quelques
propositions de styles très sympa.
10. 3D Text Maker
Si vous souhaitez réaliser un logo "qui bouge", voici un bon site avec pas mal d'options de customisation et surtout
un choix énorme de polices de caractères. C'est d'ailleurs souvent dans ce genre de sites que je trouve des perles
que je cherche ensuite sur des sites de polices gratuites. Personnellement, je ne suis pas fanatique des logos
animés, mais il paraît que ça attire l'attention... un vieux réflexe de notre cerveau reptilien !
11. Textanim
Ce site vous propose de créer votre logo avec un "remplissage" animé. Le plus : un choix de polices originales. Le
moins : des fonds vraiment pas possibles, mais si vous choisissez bien, il y a moyen de faire quelque chose de
discret.
12. Glitter Text Online
De deux chose l'une : on aime ou on déteste ! L'effet paillettes, ça peut vraiment être très moche, là encore, prenez
le temps de bien choisir vos effets et de choisir le contexte dans lequel vous pourrez utiliser ce genre d'images.
13. Screedbot
Voici un site original qui vous permet de créer un texte animé comme s'il était tapé à la machine.
page 21 / 23
14. Pimp Text, Graffitigen et Glittermaker
J'avoue que j'ai hésité à vous proposer ces trois sites parce que les interfaces sont tout bonnement insupportables
! Les générateurs de logos ne sont qu'un prétexte à l'affichage d'un bazar informe de publicités, c'est vraiment le
genre de site que j'ai envie de fuir instantanément. Ceci dit, ce qu'ils permettent de faire peut quand même vous
intéresser, je me suis donc résolue à braver les éventuelles contestations ! Attention, vous aurez peut-être un peu
de mal à voir le bouton pour créer votre logo, il est noyé au milieu d'un fatras d'annonces alors... visez bien !
page 22 / 23
Merci pour la lecture de ce livre. Retrouvez nous sur Ressources Web Design
page 23 / 23
Powered by TCPDF (www.tcpdf.org)

Création graphique en ligne

Transcription

Documents pareils

Créer une favicon

Favicon (icône de favori) - M

favikon.com - Manuel d`Utilisation Powerboutique

xnview - Manuel d`Utilisation PowerBoutique

Voir comme un étudiant

STAGE Graphisme / Webdesign L`agence 148 recherche un profil

Procédure pour consulter sur le site de la FFB le détail de ses points

Guide - Récupérer mon mot de passe perdu

Création d`un point de restauration