[Grispil]

Bonjour à tous,

J'ai un projet de site et je souhaite me mettre à niveau dans tous les aspects du webdesign, à savoir création visuelle avec Photoshop CS4, puis xhtml et php. Je vais, dans un premier temps, concentrer mes efforts sur l'aspect graphique de ce projet pour me retrouver avec un beau design que j'intégrerai plus tard. Pour vous faire une idée, j'aimerais tendre, dans la mesure de mes capacités, vers un rendu proche des sites JOL consacrés à Age of Conan, Tabula Rasa, Guild Wars ou bien encore The Lords of the Rings Online, que je trouve magnifiques.

À cette fin, sauriez-vous me conseiller des sites de tutoriels consacrés à Photoshop, mais uniquement dans une optique de webdesign ? J'entends par là des tutoriels pratiques qui prennent en compte la conception du design d'un site, sa lisibilité, les manières de le rendre user-friendly, voire qui donnent des conseils sur l'agencement typographique (j'y accorde une certaine importance). Je suis aussi preneur de bouquins, même si j'en possède déjà un, généraliste, qui est trop théorique et qui ne va pas assez en profondeur.

Si vous connaissez également des sites Internet que vous trouvez personnellement magnifiques, je serais curieux de les connaître, pour m'en inspirer et voir ce qui se fait de mieux dans ce domaine.

Je vous remercie d'avance pour votre aide,

Grisp'

[Sinju khai Nobutsu]

Perso, je suis tombé par hasard sur le site de Ragnarock ... et je le trouve particulièrement joli et bien fait ...
A des années lumières de ce que je suis capable de faire artistiquement parlant

[Grispil]

Le site est très beau, très pro, merci pour lien ; il est hélas en flash, et je n'ai pas le temps ni les ressources pour m'investir dans l'apprentissage de ce logiciel (j'aurais du préciser, mea culpa).

[JorianMenelrana]

Si je peux me permettre et si tu as la possibilité apprends plutôt sur fireworks qui présente l'avantage d'exporter bien plus facilement les découpes et qui compressent les éléments (png, gif, jpeg) bien plus efficacement à qualité égale que photoshop pour le web.

[Grispil]

Je me suis un peu renseigné, c'est vrai que ça a l'air intéressant et que ça correspond à ma demande, merci beaucoup. Si vous avez des bons tutoriels Fireworks à soumettre également...

[Toro]

Citation :

Publié par JorianMenelrana

Si je peux me permettre et si tu as la possibilité apprends plutôt sur fireworks qui présente l'avantage d'exporter bien plus facilement les découpes et qui compressent les éléments (png, gif, jpeg) bien plus efficacement à qualité égale que photoshop pour le web.

Chite question en passant, quand tu dis que Photoshop le fait mal c'est quand tu utilises les découpes et le laisse faire tout seul ou c'est aussi valable quand tu fais toi-même les découpes à la main et que tu optimises toi même le nombre de couleur du gif et son tramage ?

[JorianMenelrana]

Quand tu exportes en gif/jpeg/png à réglages identiques, le résultat est identique (rendu) est plus léger avec fireworks. L'agorythme de compression est bien meilleur, de ce que j'ai constaté, je peux gagner jusqu'à 15% du poids et quand tu fais de l'optimisation / accessibilité c'est vraiment très important

[Mace]

Salut,
avant même de parler optimisation et découpe, il faut -si tu veux progresser dans cette voie- commencer par savoir analyser les sites web que tu fréquentes.
Déjà, à qui s'adresse le site? dans quel but?
Il y a des milliers de designs possibles pour un seul site, et il faut comprendre que le webdesign est composé de deux composantes :

- la première partie est le zoning/ergonomie :
Tu dois rendre le placement des zones d'infos pertinentes et cohérentes entres elles. En gros, tu tries l'info, hiérarchises et harmonises tout ça afin de créer une page équilibrée et agréable à lire. Tu dois penser ergonomie : pourquoi le menu serait pertinent ici? est-ce que le fil d’Ariane est indispensable? faut-il un plan du site? ce bloc de news est-il pertinent ici?

La deuxième partie est le graphisme :
-Même avec un zoning cohérent, un site peut paraître fade et peu agréable à lire s'il y a une carence en graphisme : c'est là que tu joues avec les couleurs, les typos, les visuels, faire de jolis boutons qui donnent envie de cliquer, un header avec un beau logo, tu aéres le textes, les espacements, en gros tu donnes une identité graphique au site, le but est qu'on puisse dire: "ah son site, je m'en souviens très bien, il est comme cela..." etc.

Personnellement, dans un premier temps, ne te disperse pas sur Firework et autres logiciels , reste sur photoshop/illustrator dont il faudrait 3 vies pour les maitriser complètement ! Essaye de faire un truc avant tout pertinent en t'inspirant de site que tu aimes bien. Mets toi à la place de ton public, en sachant que l'internaute est fainéant et n'aime pas chercher.

Avec ça, normalement, tu auras déjà un oeil neuf sur les sites web, après, c'est de la pratique logiciel et beaucoup de surf !
Quelques tutoriaux qui peuvent être intéressants pour se faire la main :

http://psd.tutsplus.com/tutorials/in...-in-photoshop/

http://psd.tutsplus.com/tutorials/in...0-site-footer/

http://psd.tutsplus.com/tutorials/in...eb-2-0-layout/

[Limace Impie]

Le sujet m'intéresse aussi, je ne pense pas qu'il existe de tuto entiers pour réaliser un design de A à Z, à défaut, vous connaîtriez des sites qui traitent de problématiques plus précises ? (Genre la réaction d'une bannière, de menus..)

Marchi

(Kikoo Poopoo)

[Grispil]

Kikoo Djoodjoo

Merci beaucoup pour les liens Mace, rien qu'avec ça j'ai déjà de quoi faire !

[Gatsb.]

un mag en kiosque, qui propose des tutos de tout ce que tu recherches et bien plus encore, je ne sais pas si je peux mettre le lien qui serait assimiler à de la pub, non ?!

Enfin si un modo trouve ca ennuyeux, il aura qu'à me faire signe que j'édite :
webdesignmag

Et puis l'incontournable : csszengarden pour savoir faire simple, et beau à la fois.