Design & Graphisme

15 « Photoshop-like » en ligne testés et commentés

Photoshop est encore un logiciel incontournable pour l’édition d’image. Mais il est parfois agaçant de sacrifier sa mémoire vive pour effectuer des modifications triviales sur des images (redimensionnement, recadrage, corrections chromatiques, ajouter du texte) ou faire des opérations plus complexes (détourage, remplacement de fond, etc). A côté des économies de RAM, il peut être utile de proposer à ses clients une application en ligne pour modifier les images avant publication ; si WordPress propose des outils pour recadrer, pivoter ou redimensionner les visuels depuis la version 2.9, on est encore loin de faire ce qu’on veut avec ses cheveux ! C’est pourquoi, je vous ai concocté une liste composée d’une bonne dizaine d’outils passés au crible avec un résumé, les «plus», les «moins» et un «verdict» pour que vous fassiez le bon choix. →

Conception de site web

Guide stylistique — Exemple de charte graphique et éditoriale

Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise. →

Conception de site web

Dummy Image — des images de placement pour votre site web

Dynamic Dummy Image Generator est un outil en ligne qui génère une image en fonction de la taille que vous indiquez :  saisissez le format dont vous avez besoin à la fin de l’URL du site, comme http://dummyimage.com/434×200 par exemple. Très utile en complément de HTML-IPSUM pour commencer à travailler sans contenu. L’auteur précise que l’on peut « hotlinker » autant d’images que son serveur pourra le supporter 😉

→

Le saviez-vous ?

jQuery — Attendre le chargement d’une image avec la méthode load()

Une des forces de jQuery est de permettre le lancement d’une fonction dès le chargement du DOM en mémoire, sans attendre que toutes les images soient affichées, par exemple. Or, il peut justement être intéressant d’attendre le chargement d’un élément précis avant d’agir dessus. Dans le cas d’un traitement spécifique sur une image, il est possible d’utiliser la méthode load() :

jQuery('img.featured').load(function() {
    faites quelques chose avec cette image
});

Ne pas confondre cette méthode load() avec l’événement load() dans un contexte Ajax.

Autres CMS

Installer Drupal (ou les tribulations d’un WordPressien en Drupalie)

Drupal est un outil hors pair qui permet à ses utilisateurs de créer rapidement des sites internet complexes et sur-mesure et répondre ainsi aux cahiers des charges des clients les plus exigeants. Dans le monde des CMS Drupal fait partie des poids lourds. Sa réputation d’usine à gaz peut freiner les plus motivés, d’autant plus que son installation réserve parfois des surprises. Si vous avez l’habitude d’utiliser WordPress, vous risquez de ne plus retrouver votre confort habituel. Chez Drupal tout est affaire de modules et il faut en installer quelques-uns pour se sentir comme à la maison.  →

Revue de Web

Créer une petite animation avec quatre images et jQuery

Ce tutoriel montre les étapes à suivre pour créer une petite animation composée de quatre images à l’aide des feuilles de style CSS et de jQuery. Bien que je ne raffole pas des trucs qui bougent sur l’écran, je trouve que le côté Cartoon qui se dégage de l’exemple est suffisamment sympathique pour réaliser une publicité, une accroche, etc. sans être obligé de passer sous les fourches caudines de Flash 😉

Applications autonomes

TinySlider — un diaporama léger en Javascript

TinySlider est un diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS. On peut intégrer autre chose que des images et la gracieuse dégradation est assurée en l’absence de Javascript sur l’agent utilisateur du visiteur. Le script possède des options pratiques comme vous pouvez le voir sur l’exemple d’appel au script :

var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider', // ID of the parent slideshow div
    auto:3, // Seconds to auto-advance, defaults to disabled
    resume:true, // Resume auto after interrupted, defaults to false
    vertical:false, // Direction, defaults to false
    navid:'pagination', // Optional ID of direct navigation UL
    activeclass:'current', // Class to set on the current LI
    position:0 // Initial slide position, defaulting to index 0
});

Voir la démonstration.