Dreamweaver gratuit

Smart Object, passerelle de Illustrator à Dreamweaver en passant par Photoshop

04 juin 2009 | Posté par caroder à 21:24

Voici un tutorial vidéo de Layers Magazine vous expliquant les tenants et les aboutissants de Smart Object, passerelle entre les logiciels Illustrator, Photoshop et Dreamweaver. Certes, tout n'est pas totalement automatisé dans la mise à jour des fichiers, loin de là, mais Smart Object représente néanmoins un gain de productivité dans la réalisation de maquettes, templates, squelettes et autre thèmes...

Pour visualiser ce tutorial : http://www.layersmagazine.com/smart-objects-from-illustrator-to-photoshop-to-dreamweaver.html

Dreamweaver CS4 et Photoshop : gestion des images - Tutorial de Jpierre

21 avril 2009 | Posté par caroder à 08:53

JPierre propose sur le site ASP-PHP.net un tutorial sur les fonctionnalités de Dreamweaver CS4 permettant de mieux gérer les images d'un site. En effet, il vous est offert la possibilité de créer une synchronisation entre le travail de l'image dans Photoshop CS4 et l'import de l'image dans une page web avec Dreamweaver.

J'en profite pour effectuer un petit rappel sur les formats d'images web et leur utilisation :

• Le format JPG : compression d'image supportant jusqu'à des millions de couleurs différentes (plus la compression choisie est élevée moins vous préservez la variété des couleurs et la netteté de la photo d'origine). Ce format d'image est particulièrement indiqué pour les photos et plus généralement tout image comportant un dégradé.
• Le format GIF : la palette gif comporte au maximum 256 couleurs ; c'est pourquoi ce format de compression sans perte est plus adapté aux images comportant des aplats de couleurs telles que des logos ou des illustrations type "ligne claire". Ce format d'image supporte très mal la réduction, homothétique ou non. A éviter donc quand on souhaite afficher des vignettes sans création de fichier spécifique.
• Le format PNG : il supporte des images en 24 bits et 32 bits (soit16 millions de couleurs + 256 niveaux de transparence). C'est donc la panacé ? Pas si sûr... Car pour des images comportant de nombreuses couleurs le poids des fichiers est nettement plus important que les 2 précédents formats !

Pour consulter le tutorial de Jpierre : http://www.asp-php.net/tutorial/asp-php/dreamweaver-cs4-et-photoshop-cs4.php

Les 20 sites indispensables pour webdesigners

24 mars 2009 | Posté par caroder à 09:20

Je sais, je sais... Le site que vous consultez ne représente pas une performance graphique... et pourtant, mon premier job, c'est la direction artistique... Voici ma liste des 20 incontournables en matière de design de site web :

Au commencement était... l'ergonomie :

• Un peu de théorie, ça ne fait pas de mal : http://www.ergolab.net/. Comprendre le pourquoi et le comment  de l'usability... Une excellente ressource. Ma bible.

Comprendre les CSS et les mettre en application :

• les normes du W3C : http://openweb.eu.org/ (à consulter absolument, l'article sur le positionnement float : http://openweb.eu.org/articles/initiation_float)
• les problèmes liés à IE : http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297 et le HAsLayout http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html
• le validateur du W3C : http://validator.w3.org/

Gabarits de mises en page :

La base de tout... C'est avec eux que je commence tous mes designs... Plus le gabarit est dépouillé, moins la CSS contient de ligne de code, plus j'aime !

• la boite à outil d'Alsacréations : http://www.alsacreations.com/outils/
• 224 gabarits  de mise en page : http://layouts.ironmyers.com/
• A ne pas oublier : les gabarits proposés par Dreamweaver (via la commande fichier >> nouveau)

Templates gratuites :

Ici on croit résoudre ses problèmes, mais attention ! ce ne sont QUE des templates...
Il existe des centaines de sites avec des templates gratuites. Voici ceux que je considère comme les meilleurs, la crème de la crème...

• Templates : http://www.freecsstemplates.org/css-templates/
• Templates dédiés à Dreamweaver : http://www.ex-designz.net/template/tempcat.asp?cat_id=9
• Une liste de thème Wordpress : http://www.opensourcehunter.com/2009/03/03/55-free-and-beautiful-wordpress-themes/
• Thèmes pour Wordpress de qualité pro : http://topwpthemes.com/

Ressources graphiques :

• Des milliers d'images gratuites, de pinceaux et de pattern photoshop, bref une ressource inépuisable ! http://www.deviantart.com/
• Des puces à foison pour de jolies listes : http://www.stylegala.com/features/bulletmadness/
• Travailler sur la couleur et les compatibilités de gamme : http://www.colorblender.com/
• Vérifier le rendu d'un site dans tous les navigateurs : http://browsershots.org/

Trouver l'inspiration (qu'est-ce qui est in et out en matière de design CSS web) :

• CSS Vault : http://cssvault.com/
• CSS Beauty : http://www.cssbeauty.com/
• CSS Zen Garden : http://www.csszengarden.com/ (CSS Zen Garden est plus un exercice de style ou une performance au sens artistique du terme mais c'est aussi un excellent reflet de l'air du temps)
• Style Gala : http://stylegala.com/
• CSS Drive : http://www.cssdrive.com/

Si vous en avez d'autres, n'hésitez pas à commenter :-)