“Rien de plus simple, il suffit de peaufiner un peu le CSS en ajoutant un position:fixed; et un bottom:0; à notre div #footer…” direz-vous…

Oui! mais ça ne marche pas sur tous les navigateurs (sous IE6 par exemple pour changer…) car la valeur “fixed” de la propriété “position” peut ne pas être interprétée, ce qui nous a tous valu une perte prématurée de cheveux (d’ailleurs il est apparu que le taux de calvitie tend à diminuer depuis que IE6 meurt petit à petit… Troll inside )

Heureusement, cssstickyfooter.com apporte une solution à ce problème pour notre grande joie, et en français en plus!

Pour information, cette technique marche sur les navigateurs suivants :

Navigateurs de Windows

• Avant 11.7
• Chrome 0.4
• Crome 1.0
• Firefox 1.5
• Firefox 2.0
• Firefox 3.1
• Flock 1.2
• Flock 2.0
• K-Meleon 1.5
• Minefield 3.2
• MSIE 4.0
• MSIE 5.50
• MSIE 6.0
• MSIE 7.0
• MSIE 8.0
• Navigator 8.1
• Navigator 9.0
• Opera 0.27
• Opera 7.54
• Opera 8.53
• Opera 9.63
• Opera 10.0
• Safari 3.2
• Seamonkey 1.1
• Seamonkey 2.0
• Shiretoko 3.1

Navigateurs de Mac

• Chamino 1.6
• Firefox 3.0
• Safari 3.2

Navigateurs de Linux

• Dillo 0.8
• Epiphany 2.24
• Firefox 2.0
• Firefox 3.0
• lock 1.1
• Flock 2.0
• Galeon 2.0
• Iceape 1.1
• Iceweasel 2.0
• Iceweasel 3.0
• Kazehakase 0.5
• Konqueror 3.5
• Minefield 3.0
• Navigator 9.0
• Opera 9.63
• Opera 10.06
• Seamonkey 1.1
• Seamonkey 2.0
• Shiretoko 3.1

Voici donc 28 pense-bêtes pour Photoshop, DreamWeaver, les couleurs, la typographie et autres domaines relatifs au web design. Chacun d’entre eux est résumé en une seule page imprimable que vous pourrez garder sous le coude à tout moment!

Photoshop

Raccourcis clavier pour Photoshop CS3

Télécharger: PDF (Windows), PDF (Mac)

Raccourcis claviers pour les calques pour Photoshop (HTML)

Raccourcis claviers de la boite à outil pour Photoshop (HTML)

Aide mémoire de l’outil Lasso pour Photoshop

Télécharger: PDF

Aide mémoire de l’outil Pinceau pour Photoshop

Télécharger: PDF

Couleurs

Aide mémoire couleurs RGB au format héxadécimal

Télécharger: PDF, PNG

Guide de référence couleur(PDF)

Références couleurs pour les Web Designer

Télécharger: GIF

Charte des couleur WEB (HTML)

Liste de couleurs au format héxadécimal (HTML)

Couleurs pour le WEB uniquement (HTML)

Typographie / polices de caractères

VisiBone : aide mémoire pour la typographie

Télécharger: GIF

Visuel des polices communes sous Windws et Mac (HTML)

Mixing Typefaces (PDF)

Unités/Dimension

Table de conversion Points / Pixels / Ems / Pourcentages (HTML)

Megapixels Chart

Télécharger: GIF

CSS/CSS Frameworks

Aide mémoire Blueprint CSS

Télécharger: PDF

Bibliothèque YUI: CSS Reset, Base, Fonts, and Grids (PDF)

CSS Shorthand Cheat Sheet (PDF)

Widget CSS d’Apple (Widget pour MAC uniquement)

HTML/XHTML

Référence des balises HTML & XHTML (PDF)

Code des caractères spéciaux HTML/XHTML

Référence des caractères XHTML (HTML)

Dreamweaver

Guide de référence pour Dreamweaver(PDF)

Guide de référence pour Dreamweaver CS3 pour Mac (PDF)

Illustrator

Raccourcis claviers pour Adobe Illustrator CS2

Download: PDF

Navigateurs

Récapitulatif de la compréhension des balises HTML pour chaque navigateur (HTML)

Table de compatibilité du DOM W3C (HTML)

Voici la technique que j’ai utilisée pour arriver à ce résultat :

Pour en savoir plus, j’ai commencé sur un fond gris sur lequel j’ai ajouté différentes couches de noirs et de blancs, puis j’ai utilisé principalement l’outil “doigt” () afin de mélanger les niveaux de gris et arriver à un résultat satisfaisant.

L’avantage de cette technique est que vous contrôlez bien plus la précision de votre rendu, ce qui peut être frustrant lorsqu’on n’arrive pas à faire exactement ce que l’on veut avec les brushs…

Une fois ce dessin brut achevé, j’ai ajouté de la couleur en incrustant une texture (trouvée sur sxc.hu) et en modifiant sa teinte. Ainsi, on obtient une ambiance sombre et le dessin bénéficie du grain de la texture, ce qui enrichi les détails.

Enfin, j’ai ajouté les bords noirs à l’aide de brushs (trouvées sur deviant art) pour renforcer le coté sombre (on retrouve ce type de brush dans le design de Street Fighter 4 par exemple)

“Dans le passé lorsque j’ai appris à dessiner, il n’y avait aucun tutoriel sur internet, et s’il y en avait, ils étaient payant. C’est la raison pour laquelle j’ai décidé de créer Watch & Learn (regarder et apprendre), un ensemble de tutoriaux simples et gratuits pour qui veut se lancer dans le dessin.”

Voici ce que nous confie Carlos Cabrera, illustrateur / dessinateur / demi-dieu…

On pourrait comparer ses création à celles de Nico Di Mattia. Mais ce qu’on appréciera le plus, ce sont les 12 tutoriaux pour apprendre à dessiner mis à disposition par Carlos Cabrera, en format pdf ou vidéo pour windows / mac et même iphone / ipod touch ! De la sorte, vous apprendrez comment dessiner un extraterrestre, un vampire, des armes moyenâgeuses, des tornades destructrices etc…

Les pdf sont extrêmement bien fait et détaillés. Ils vous permettent de savoir quels brush ont été utilisés par l’artiste et les différents paramétrages de ces derniers. Vous apprendrez également beaucoup de techniques et astuces pour parfaire vos compétences et votre approche du dessin / peinture digitale en général.

Bref, du très bon tutoriel gratuit à ne surtout pas manquer!

On retrouve souvent des articles présentant un très bon site qui propose de télécharger gratuitement des photos libres de droits, puis un autre etc… et au final on se disperse un peu…

C’est pourquoi je vous offre une sélection de sites de qualité qui vous proposent de télécharger gratuitement et librement diverses ressources afin d’assouvir votre créativité.

• freepixels
• Designpacks
• Freephotosbank
• Stockvault
• Photogen
• Stock
• Imageafter
• Morguefile
• La Logothèque
• Openphoto
  
• Pixelio

Il ne vous reste plus qu’une chose à faire : vous servir !

Sous ce nom étrange se cache un projet graphique communautaire comme jamais vous n’avez dû en voir auparavant!

The Zoom Quilt 2 est un projet d’art collaboratif faisant intervenir plusieurs dizaines de dessins liés les uns aux autres par un système de zoom à l’infini.

Le résultat est carrément surprenant, d’autant plus que les réalisations graphiques sont d’excellente facture (certains ne sont pas sans rappeler ce qu’on appelait les GFX au temps des démo-makers…)

Et pour les mordus de ce genre de site, vous pourrez également voir The Zoom Quilt 1er du nom…

Bref, encore une idée originale qui vaut le détour!

L’excellent Smashingmazine a récemment publié un article mettant en avant des sites utilisant des patterns (c’est à dire des textures qui se répètent).

Vous pourrez ainsi trouver l’inspiration pour appliquer les textures que je vous avais proposé sur mon article Créez et téléchargez des patterns pour photoshop…

Lostandtaken.com est un site regorgeant de textures en haute définition et triées par thème et par tags.

De quoi se faire plaisir et enrichir ses compositons

IE 6 et inférieurs

• Utiliser * html {}

IE 7 et inférieurs

• Utiliser *+html, * html {}

IE 7 seulement

• Utiliser *+html {}

IE 7 et navigateurs modernes seulement

• Utiliser html>body {}

Navigateurs modernes seulement (IE 7 non inclus)

• Utiliser html>/**/body {}

(Pour en savoir plus : nanobox)

Voici le site d’une société spécialisée dans la conception et la communication visuelle pure et dure! Et le moins que l’on puisse dire, c’est qu’ils excellent en la matière. On y trouve de la 3D, de la composition / du matte painting, de l’animation flash…

Bref, aucun commentaire n’est utile, il suffit de se rendre sur saizenmedia pour s’en faire une idée et apprécier!

Petit bémol tout de même, il est impossible de couper les bruitages d’oiseaux… bon d’accord je pinaille