Pour l'exemple, prenons cette image [Fichier source]:

Nous y voyons clairement des ronds avec un flou gaussien. Supposons que la composition est terminée et que nous voulons la sauvegarder. Allez dans "Enregistrer pour le web et les périphériques". Par défaut Photoshop va choisir png-24, car il reconnaît qu'il y a des zones transparentes, regardez bien la taille du fichier actuel: 39,02 Ko. Choisissez maintenant dans la liste à droite GIF.

Comme vous voyez l'image n'est pas de bonne qualité, les bords ne sont pas transparents. En choisissant 64 couleurs l'image reste correct sans perdre trop de qualité, le poids est à présent 14ko, une sacré différence. Notre but donc, est de simuler la transparence pour un fond uni (détail important). Cliquez maintenant sur la couleur de la pipette (caré noir à gauche) et choisissez-y une couleur claire, pour l'exemple je vous propose #82eff9. Il faut maintenant dire à Photoshop que nous allons utiliser cette couleur comme fond de notre page web.

Changer le fond dans Photoshop

Pour changer le fond, cliquez sur la petite flèche à droite de la première liste déroulante et sélectionner ensuite "Modifier les paramètres de sortie...".

Une fois sur la fenêtre de dialogue des paramètres de sortie, choisissez dans la deuxième liste déroulante "Arrière-plan". Dans la zone "Afficher le document  sous" sélectionner "Image" et non "Arrière-plan" vu que nous souhaitons avoir un arrière-plan uni. Pour choisir la couleur d'arrière-plan cliquez sur les deux petites flèches à droite de "Couleur:" et sélectionner-y "Couleur de la pipette", ce qui est donc notre bleu clair. Confirmez en cliquant sur "OK".

Voyons voir ce que ça donne en cliquant sur "Aperçu" dans le bas de la fenêtre de sauvegarde pour le web & périphériques. Comme vous voyez les bords ne sont pas comme nous les souhaitons, transparent mais avec du blanc.

Ce qu'il nous reste à faire est de cliquer sur "Cache" dans la partie droite de la fenêtre dans les options du GIF et d'y sélectionner "Couleur de la pipette".

Les bords blancs sont maintenant notre couleur bleue clair. Ca peut sembler étrange à première vue mais vous comprendrez pourquoi lorsque vous aurez cliqué sur "Aperçu" une dernière fois.

1 - Configurer les règles en pixels

La première préférence à contrôler est de mettre les règles en pixels. Pour ce faire il vous suffit en premier d'afficher les règles. Vous pouvez les activer soit via le panneau d'applications (nouveau dans CS4), soit via "Affichage > Règles".

Il ne vous reste, ensuite, plus qu'à faire un clic droit sur la zone des règles (horizontale ou verticale) et de choisir "Pixels".

2 - Configurer les couleurs (sRGB)

Quand on créé une réalisation pour le web il est important que les images aient les mêmes couleurs que lorsque vous les créez. C'est pour cela qu'il est préférable d'émuler les couleurs qui seront affichées sur un navigateur standard. Pour régler les couleurs allez dans "Edition > Couleurs" . Dans la première liste déroulante choisissez "Utilisation générale pour l'Amérique du Nord 2". Notez qu'après ce changement la case "RVG" (RGB en Anglais) est maintenant en "sRGB". sRGB est le meilleur choix pour des créations pour le web car c'est l'espace colorimétrique qui ressemble le plus à l'affichage des couleurs d'un écran standard.
Dans la zone Règles de gestion des couleurs nous voyons que RVB (RGB) est mit sur "Conserver les profils incorporés". Ceci signifie que si vous ouvrez un document qui n'a pas été créé en mode sRGB, Photoshop le convertira en ce dernier mode. Confirmez les changements en cliquant sur "OK".

Si vous travaillez sur une composition d'une autre personne et que vous voulez contrôler en quel mode colorimétrique cette composition se trouve il vous suffit de regarder en bas de votre écran, sous l'espace de travail. Cliquez sur la petite flèche et dans "Afficher", choisissez "Options du document". Vous verrez maintenant quel est le profil colorimétrique utilisé de la création active. Si ce n'est pas en sRGB, vous avez deux manières de convertir la composition en sRGB.

La première méthode consiste à aller dans "Edition > Convertir en profil..." . Dans la fenêtre de dialogue qui s'affiche vous voyez dans la zone "Espace source" le profil colorimétrique actuel de votre composition, dans la zone "Espace de destination" vous pouvez modifier le profil colorimétrique. Ouvrez la liste déroulante de cette zone et choisissez "sRGB".

Il est possible d'oublier cette action lorsque vous êtes en plein travail d'édition c'est pourquoi Photoshop offre une deuxième manière de convertir l'image, ceci lors de la sauvegarde pour web et périphériques.

Vous l'aviez deviné, allez dans "Fichier > Enregistrer pour le  Web et les Périphériques ..." dans la

Blog profits Blueprint

Peut importe si vous souhaitez gagner de l'argent avec votre blog ou non, cet ebook de 54 pages, écrit par Yaro Starak, contient un paquet de conseils, d'idées et de retours d'expérience sur des sujets tels qu'augmenter son nombre d'abonnés rss, générer du trafic sur son blog ou encore se faire de l'argent.
Source

WordPress SEO

Offert par Jai du blog "Blog Oh Blog", WordPress SEO est un ebook court et dédié – vous l'aurez deviné –
à la SEO d'un système WordPress. Il y a dans ce bouquin un paquet de bonnes idées assez simples à mettre en place afin de donner à votre blog la visibilité qu'il mérite.
Source

Success with WordPress

Selon moi, tout utilisateur de WordPress devrait avoir lu cet ebook. Kyle Eslick, l'auteur et créateur du populaire blog WP Hacks (Anciennement Hack WordPress) fait partager son expérience avec le système de bloging open-source, en partant des bases jusqu'au usages un peu exotiques de WP: Photoblog, forum, CMS etc.
Success With WordPress possède par ailleurs un très bon chapitre sur comment monétiser un blog WordPress.
Source

Deep Secrets of Successful Blogging - learn from 30 experts

Cet ebook gratos est une compilation de 30 articles, écrit par 30 bloggeurs reconnus outre-Atlantique, comme par exemple Darren Rowse de Problogger. Il y a à boire et à manger dans cet ebook, la grande majorité est excellente même si je dois bien avouer que certains articles ne m'ont pas franchement passionné.
Source

Killer Domains

Cet ebook ne parle pas vraiment de blogging, mais plutôt d'une problématique à laquelle tout bloggueur s'est déjà retrouvé confronté un jour : Trouver un (bon) nom de domaine. Si vous pensez que trouver un bon nom de domaine en .com est impossible de nos jours, vous devriez lire cet e-bouquin. J'ai beaucoup appris avec lui, ce qui se ressent, je pense, dans mes dernières acquisitions en terme de nom de domaine (wpvote.com, ebook.ms, wprecipes.com...)
Source

A geek’s Guide To Promoting Yourself and Your Online Business in 140 Characters or Less with Twitter

Je me suis récemment inscrit sur Twitter et je n'ai pour le moment qu'encore peu de followers, mais je peux déjà assurer que Twitter est un excellent outil pour tout bloggueur. Cet ebook de 48 pages, disponible gratuitement au téléchargement, vous aidera à comprendre la puissance de Twitter, comment l'utiliser efficacement et comment trouver vos premiers followers.
Source

L'idée

Première étape : définir la couleur de fond

J'aime bien le bleu que Twitter propose par défaut, mais étant donné que mon compte Twitter est en grande partie dédié à mon blog Cats Who Code, j'ai préféré utiliser la même couleur que celle de mon blog. Pour cela rien de bien dur, il suffit de récupérer le code hexadécimal de votre couleur, puis d'aller dans les settings de Twitter, de cliquer sur l'onglet Design et de remplir le formulaire avec les couleurs que vous souhaitez. Fastoche, non ?

Etape 2: Un peu de design...

Voici venu le moment d'être créatif et de dessiner une sidebar avec Photoshop ou Gimp. Pour me simplifier la tâche, j'ai commencé par prendre une capture d'écran de ma page Twitter actuelle afin de pouvoir l'utiliser comme un guide dans photoshop et savoir où se trouvent les parties vides de contenu.

Etape 3: Importation de image dans Twitter

Twitter vous permet d'utiliser votre propre image de fond. Vous n'avez qu'à retourner dans les settings de Twitter puis dans l'onglet Design. Uploadez votre image, et le tour est joué.

Avantages et inconvénients de la technique

Désormais, vous disposez d'une page Twitter customisée. Cependant, le problème de ce hack tient dans le fait qu'environ 15% des gens (selon les stats de mes blogs) utilisent encore une résolution de 1024*768 pixels. Ces gens là ne verrons pas votre sidebar.

Utilisez-vous Twitter ? Si oui, n'hésitez pas à me suivre sur Twitter!

SpaceGallery

SpaceGallery est un nouveau plugin JQuery produisant un effet assez similaire au Time Machine d'Apple. A essayer !

Noobslide

Définitivement, un de mes slideshows préféré malgré son manque de documentation. J'en avais déjà parlé sur ce blog ainsi que sur CatsWhoCode où je vous proposais deux tutoriaux pour le mettre en place.

Accessible News Slider

Accessible news slider est un script sympa, dont j'avais déjà parlé au mois de décembre (si ma mémoire est bonne!) dans mon article "Un slider javascript avec JQuery". Ce script n'est pas toujours évident à personnaliser, mais fonctionne parfaitement bien.

Les slideshows sont toujours un bon choix lorsque vous recherchez une manière très visuelle d'afficher votre contenu. Voici ma sélection de 10 slideshows, carousels et sliders, basés sur Mootools, JQuery, Yahoo! User Interface, ou encore Script.aculo.us.

SmoothGallery

Selon moi, l'un des meilleurs scripts du genre. SmoothGallery à lui aussi fait l'objet d'un article dédié il y a quelques mois, et apparemment ce script a plu à mes lecteurs. Pour info, vous le retrouverez en page d'accueil de mon blog, mettant en lumière mes meilleurs derniers articles.

jQuery Multimedia Portfolio

Basé sur JQuery, jQuery Multimedia Portfolio se propose d'embarquer toutes sortes de médias : textes, photos, mais aussi des videos flv ainsi que des mp3. Un bon script assez facile à mettre en place.

JCarousel

jCarousel est un plugin JQuery pour contrôler une liste d'objet de manière horizontale ou verticale. JCarousel est un script assez complet, qui permet la création de slideshows verticaux, de text-scrollers, de carousels circulaires et plus encore. Je ne l'ai jamais utilisé, mais j'avoue que c'est pas l'envie qui m'en manque !

Glider

Inspiré par le célèbre carousel de panic.com, voici Glider, un slideshow basé sur Prototype et Script.aculo.us.
Un bel exemple d'utilisation de Glider a été faite sur l'excellent thème Wordpress WP Magazine Theme.

Carousel

Utilisant YUI (Yahoo User Interface), ce carousel basique est codé d'une manière propre et sémantique (Listes HTML), et permet l'affichage de contenu verticalement ou horizontalement.
Un carousel simple qui sera parfait si vous n'avez pas besoin d'effets de la mort qui tue.

Carousel slideshow

Ce script a la particularité de ne nécessiter aucune librairie (Mootools, JQuery, etc) externe pour fonctionner. Pas mauvais mais attention aux connexions lentes.

Carousel.us

Celui-ci peut utiliser Mootools ou Scrip.taculo.us, au choix. Très beau mais ça reste assez lourd, donc à déconseiller aux petites connexions.

Avant de commencer

Si vous n'avez encore jamais vu le menu du site apple.com, voici une petite capture d'écran de ce que nous allons recréer:

Pour commencer, nous allons créer deux fichiers: le premier fichier, vide, se nommera style.css. Le second sera notre page html: nommez là menu.html et collez-y le code suivant:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Apple's menubar</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

</body>
</html>

La dernière chose dont nous avons besoin est l'image du menu provenant du site d'Apple. Sauvegardez-là dans le même répertoire que les deux fichiers que nous venons de créer.

Création du html

Allons maintenant sur apple.com et affichons le code source. La partie qui nous intéresse est la suivante:

<!--googleoff: all-->
<div id="globalheader">
<ul id="globalnav">
	<li id="gn-apple"><a href="/">Apple</a></li>
	<li id="gn-store"><a href="http://store.apple.com">Store</a></li>
	<li id="gn-mac"><a href="/mac/">Mac</a></li>
	<li id="gn-ipoditunes"><a href="/itunes/">iPod + iTunes</a></li>
	<li id="gn-iphone"><a href="/iphone/">iPhone</a></li>
	<li id="gn-downloads"><a href="/downloads/">Downloads</a></li>
	<li id="gn-support"><a href="/support/">Support</a></li>
</ul>
</div><!--/globalheader-->
<!--googleon: all-->

Comme vous pouvez le voir, ce menu n'est qu'une simple liste html. Collez le code ci-dessus dans la section body de votre fichier menu.html et sauvegardez.
Si vous affichez maintenant menu.html dans votre navigateur, vous vous apercevrez que nous avons encore du boulot

Juste quelques mots à propos des méconnus <!--googleoff: all--> et <!--googleon: all-->: Ces balises "custom" – qui ne sont que des commentaires html – permettent de dire au googlebot qu'il ne doit pas indexer certaines parties du document (<!--googleoff: all-->) et qu'il peut reprendre son indexation normale (<!--googleon: all-->). Cette technique permet, par exemple, de ne pas voir apparaitre les menus de navigation d'un site suite à une recherche google.

CSS à son meilleur

Comme vous vous en doutez certainement, la feuille de style de ce menu est assez conséquente par rapport à ce que nous voyons d'habitude. Heureusement, celle-ci est très bien organisée et commentée, ce qui est assez rare pour mériter d'être souligné.
Collez le code suivant dans votre fichier style.css.

/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-rep
eat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }

/* OVER STATES */
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }

* PRESSED STATES */
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }

Une fois que vous aurez sauvegardé votre fichier style.css, affichez menu.html dans votre navigateur: Votre menu est prêt

Expérimentez

Même si recréer le menu d'Apple est amusant, le plus intéressant selon moi est d'apprendre à partir des techniques utilisées, à savoir une seule image pour tout le menu et une mise en place css impeccable.
Je n'ai pratiquement jamais vu de menus similaires à celui-ci sur d'autres sites, alors si vous êtes à la recherche d'un menu beau et propre, je ne saurais vous conseiller d'expérimenter

Des boutons "sexy" avec CSS

» Source

Créer des boutons avec des images PNG et des couleurs de fond

» Source

Sexy CSS Hover Button

» Source

Bouton submit en CSS

» Source

Boutons arrondis ( Wii Buttons )

» Source

Créer des boutons avec la technique css dite "des portes coulissantes"

» Source

Boutons avec icones

» Source

Technique des portes coulissantes avec une seule image

» Source

Redécouvrir l'élément button

» Source

Utiliser la technique des portes coulissantes dans Wordpress

» Source

Etape 1: Choix de l'image de départ

Pour commencer, nous allons choisir l'image qui sera la base de notre travail: J'ai choisi ici une image de la plage de Blankenberge, mais ce choix est complètement libre. Je vous conseille toutefois de choisir une image lumineuse, avec un grand nombre de couleurs.
Une rue, ou une perspective de ville la nuit devrait rendre particulièrement bien, mais je n'ai pas essayé.

Etape 2: Flou gaussien

Rien de difficile avec cette deuxième étape: Il suffit de créer un flou gaussien. Pour ce faire, allez dans Filtres » Flou » Flou gaussien. Le flou doit être particulièrement fort. J'y ai donné une valeur de 80.

Etape 3: Balance des couleurs

Bien que notre image floutée nous donne un aperçu de ce que nous voulons faire, cet effet rends le mieux avec des couleurs particulièrement vives.
Allez dans Calque » Nouveau calque d'ajustement » Balance des couleurs. Cliquez sur ok lorsque la popup de confirmation apparait.
Désormais, vous verrez apparaitre une boite de dialogue comprenant 3 sliders: A vous d'expérimenter avec afin de colorer l'image selon vos souhaits.

Etape 4: Tracé de la première courbe

Voici certainement l'étape la plus délicate du tutorial, même si elle n'est pas si compliquée qu'elle peut parfois en avoir l'air.
Nous allons tracer notre première courbe trait. Pour ce faire, créez un nouveau calque, choisissez l'Elipse de sélection, et sélectionnez une grand part de l'image, de manière à ce que notre courbe passe d'un bout à l'autre de l'image.
Ensuite, rendez-vous dans le menu Sélection » Modifier » Bordure. J'ai donné la valeur de 10, mais une valeur de 5 ou 20 peut également faire l'affaire, selon l'épaisseur souhaitée de la courbe.

Etape 5: Effets sur la courbe

Ensuite, remplissez simplement la sélection de blanc à l'aide du pot de peinture, puis Déselectionnez tout (Cmd+D). Faites un clic droit sur le calque de notre courbe, et choisissez Option de fusion. Nous allons maintenant appliquer l'effet "Outer glow".
La capture d'écran suivante montre les réglages que j'ai appliqué. Mais encore une fois, libre à vous d'expérimenter

Etape 6: Duplication de la courbe et transformations

Maintenant que notre courbe à un bel aspect, il ne nous reste plus qu'à le déplacer puis à dupliquer son calque. Ensuite, appuyez sur Cmd+T pour pouvoir transformer le calque dupliqué. Modifiez sa taille, sa position, son inclinaison...
Répétez cette étape autant de fois que voulu. Le résultat devrait ressembler à ça:

Etape additionnelle: Modification du fond

Si, une fois votre image terminée, vous n'êtes pas satisfaits du résultat, vous pouvez toujours modifier le fond de votre image. Il vous suffira de double-cliquer sur le calque d'ajustement pour pouvoir ré-ajuster la balance des couleurs. De même, comme le montre l'image ci-dessous, rien ne vous empêche d'importer un nouveau background, ou d'en créer un de toutes pièces:

Inspiré de (entre autres) par tutorial9.

Smooth Glass

Texte façon Web 2.0

Texte à rayures

Effet de reflet

Texte façon site web d'Apple

Texte usé

Explosion sur un texte

Logo de google

Texte doré façon cinéma

Logo Bee Movie

Effet Neon

Un tag avec Photoshop

Texte en 3D

Le bien connu effet Matrix...

Texte avec effet lumineux

Texte liquide

Logo de groupe de Rap

Dreamy...Magnifique, non?

Un autre texte en 3D

Gazon

Le "X" de Mac OS X

Effet de zoom

Effet très "dark"

De la neige...

Texte façon X-files

Aqua: un autre effet très web 2.0

Texte sur un chemin

Encore un effet Web 2.0

Texte en rotation:

SmoothGallery

SmoothGallery m'a tellement séduit que ce script à fait l'objet d'un article dédié il y a une semaine. Basé sur l'excellent framework Mootools, SmoothGallery vous propose de créer une galerie d'images légendées avec un effet de fading saisissant.

instant.js

Envie d'afficher vos images sous forme de Polaroïds? Instant.js ajoutera dynamiquement une bordure ainsi qu'une ombre. Il est même possible de faire pivoter légèrement les images. Un effet intéressant pour celui qui ne souhaite pas éditer ses images manuellement sous Gimp ou Photoshop.

fancyform

Bien que CSS offre de très nombreuses possibilités de customisation de formulaires, il est à l'heure actuelle impossible de styler certains éléments tels que les boutons radio ou les checkboxes.
Totalement non-intrusif, après avoir inclus le fancyform dans votre page html il ne vous restera qu'à ajouter des classes (checked où unchecked) aux éléments à styler afin de bénéficier de ce rendu visuel particulièrement réussi.

mootable

Comme son nom l'indique, mootable est lui aussi basé sur Mootools. Ce script permet de réorganiser les données d'un tableau sans rafraichir la page. Un must pour les appli web!

Gradient.js

Autre petit script dont j'ai déja parlé il y à quelques temps, Gradient.js est capable de générer des dégradés de couleurs d'une manière totalement non-intrusif. Il ne s'agit pas là d'une révolution mais d'un script qui saura rendre de bon et loyaux service à quiconque ne maîtrise pas l'édition graphique.

image menu

Depuis quelques mois, on voit de plus en plus ce genre de menu. Un aspect visuel saisissant couplé à un code xhtml sémantique (Il s'agit d'une simple liste) et un Javascript très propre ont garanti son succès. Bonne nouvelle, image menu est également très facile à mettre en place.

reflexion.js

Autre tendance actuelle du webdesign, ces reflets sur les textes et images que l'on retrouve sur un grand nombre de sites. Reflexion.js vous permettra d'ajouter dynamiquement un reflet entièrement paramétrable à vos images. Dans le même esprit que Gradient.js ou instant.js, reflexion.js sera surtout utile au développeur non-graphiste. Bien que le site du projet soit complet, on regrettera toutefois qu'il soit exclusivement en Allemand.

imageflow

Si vous utilisez Mac OS X Leopard, je suis certain que vous êtes fans de Coverflow, cette présentation visuelle des fichiers intégrée à la dernière version de l'OS d'Apple.
ImageFlow est exactement la même chose, en version web. Malgré la complexité relative du script, le tout est d'une fluidité saisissante.