Création web "graphique" : comment ça marche ?

salut,

je ne savais pas où poster ce sujet, j'ai donc opté pour le bar... en fait, j'aimerais savoir un peu comment "travaille" un graphiste... comment poser clairement ma question ? pas évident, mais je vais essayer... disons que tel que je perçois le métier de graphiste dans le contexte de la création d'un site web, j'imagine que le graphiste possède 2 choses indispensables : talent et technique !

pour la technique, j'imagine que ça s'apprend mais avoir uniquement la technique limite les capacités de création, non ? je veux dire par là que la technique va permettre de faire des effets, transformer des images, créer des images/boutons/fonds assez facilement... mais lorsqu'on veut sortir de l'aspect "classique" d'un site et que le site doit comporter des éléments qui relèvent plus de l'illustration, comment ça marche ?

est-ce que comme les dessinateurs de BD, par exemple, le graphiste travaille d'abord sur papier, scanne puis retravaille ses illustrations dans photoshop ou autre ?

si je prends par exemple ces sites :
http://www.goldenpridechoir.org/
http://www.creaam.fr/

j'imagine que les éléments décoratifs (baobabs et animaux sur le premier ; arbres, feuilles et série de logos en bas de page pour le deuxième) ont été dessinés sur papier avant d'être retravaillés...

en gros, si on ne sait pas dessiner, et même si on apprend l'aspect technique du métier, est-on condamné à faire des sites "ordinaires" manquant d'originalité ou de créativité visuellement parlant ?

voilà quelques questions (un peu brouillon j'avoue) mais je suis curieuse d'en apprendre plus sur le sujet même si ça risque de me démoraliser parce que je dessine comme un pied !

Salut

J'imagine que tous les graphistes de sont pas des dessinateurs de premier ordre non plus Rien ne t'empêche de travailler sur base d'images existantes ...

Si tu as une idée et que tu maîtrise la technique, tu dois pouvoir arriver à réaliser ton projet. Même sans savoir dessiner comme un dieu.

Salut,

je pense aussi que tu peux faire des merveilles en ayant pas le don du dessin.

Quelques pistes à explorer :

- détourer des images exsitantes pour en faire des illustrations simples (par exemple des logos, icones, etc) Si tu te cantonne dans du simple, tu devrais t'en sortir assez bien avec un outils style illustrator(http://64k.be/index.php/2006/01/05/327-tutoriel-pour-dessiner-sur-base-d-une-photo-avec-illustrator)

- tu as la possibilité avec des logiciels comme photoshop, par divers techniques, de faire un dessin à partir d'une image (en voici deux parmi d'autres : http://pixelix.over-blog.com/categorie-236113.html ET http://www.babylon-design.com/site/index.php/2002/10/17/28-photo-changee-en-dessin

L'art graphique n'est pas donné à tout le monde (certain sont plus doué) mais ca se travaille aussi (suies des conseils, observes, des livres, fais des essais, lis des tutoriaux, etc)

T'as aussi des sites qui te conseillent sur les accords de couleurs (pour éviter les fautes de goût) .

Puis au début, tu peux copier (les techniques ... pas les créations !) pour apprendre et comprendre. c'est comme la guitare, au début tu joues Hotel California et Nirvana (le unplugged bien sûr ) puis ensuite tu essaies de composer !

Si ca tombe, dans 5 ans, tu vas devenir le meilleur graphiste du monde !

PS: moi jsuis nul en graphisme.. heureusement jle sais maintenant et jme cantonne plus au côté Information architecture, ergonomie, utilisabilité, SEO, etc

PS2:

Melody Nelson a écrit :

j'imagine que les éléments décoratifs (baobabs et animaux sur le premier ; arbres, feuilles et série de logos en bas de page pour le deuxième) ont été dessinés sur papier avant d'être retravaillés...

ca m'étonnerai.. c'est probabhlement du détourage. Il faudrait une confirmation de graphistes, mais selon ce que je vois, la plupart travillent directement sur leur ordi/mac et ne font pas de version papier (en tout cas pas pour la scanner après) mais là je m'avance un peu ...
Modifié par raphlecool4 (22 Aug 2006 - 13:28)

@ raphlecool4 > Je suis sur le cul avec tutorial pour dessiner à partir d'un photographie ! Moi qui pensait que c'était des bêtes de dessin et d'imagination, des graphistes ayant passé des heures sur des modèles (hmm vivant ?? ) etc. je vois là une démystification totale.
Lien très intéressant à appliquer sur Gimp directement !

G.

Certain font ca comme ça, d'autres le font plus instinctivement je pense. Chacun sa méthode. amis c'est clair que c'est assez impressionnant quand tu vois le résultat !


Modifié par raphlecool4 (22 Aug 2006 - 19:00)

salut, je suis quasiment certain que le premier site et réalisé avec des images conçues en vectoriel (avec illustrator ou flash, d'ailleur il surement exister un logiciel gratuit) a partir de photos. Il y'a de nombreuse image sur le net alors pourquoi s'embeter a dessiner quand on peux faire des detourages ou même directement vectoriser des image en deux couleurs par exemple.

On peux faire de très bon graphismes sans savoir dessiner, le dessin offre des libertés suplementaires mais demande beaucoup de patience et de temps. Il suffit de regarder le http://www.csszengarden.com/ pour voir que la plupart des designs sont fait à partir de photos.

D'ailleur un design peut etre plein de super dessins compliqués et completement raté comme il peut etre simpliste, sans pour autant etre morne.

Je suis d'accord avec toi, le graphisme, c'est du talent et de la technique. Mais le graphisme ne se resume pas aux images . C'est sur que tu ne pourra pas faire un site avec un beau dessin sur lequel tu as passé toute l'après midi.

Le webdesign nous interesse tous mais est ce qu'au final ça interesse l'internaute?

hello Melody nelson, je ne t'ai pas oublié sur l'autre post mais vraiment débordé ces temps ci. Je comprends ton souci car l'angoisse de la feuille blanche est vraiment présente.

Néanmoins, l'étape du brouillon est indispensable, pour tout travail d'ailleurs, que ce soit du graphisme ou du code.

N'essaie pas de commencer a ecrire des scripts par ex en php sans avoir au moins défini la structure logique au brouillon.
Je reviens a mon affaire ( et a la tienne )

Je suis d"accord avec le fait que tu n'as pas besoin d'être un expert du graphisme pour faire un site qui a de la gueule apartir du moment ou du comprends minimalement la technique des tranches sous photoshop ou illustrator.

Il est beaucoup plus facile de travailler a partir d'images ou de photos existantes que de partir de rien. Personellement je travaille avec google images, avec hebus ( mais je trouve que ca devient lent et les pop up sont penibles). La plupart des images que je telecharge sont re-assemblées, recombinées, détourées et j'applique des effet dessus , pour l'adapter a ma sauce d'une part et ne pas tomber sous le coup des droits d'auteur ( il est a noter que ce type de pratique n'est pas l'ideal non plus car rien ne prive un auteur de ses droits sur une image meme si celle ci a ete retravaillé mais si il lui est quasiment impossible de la reconnaitre on peut considerer que le prejudice est alors proche du neant, on peut aussi contacter les auteurs et leur demander l'utilisation mais cette procedure est longue).

EN tant que non graphiste de formation mais en tant que personne qui est pas mal créatif , j'arrive a faire des assemblages plutot heureux au bout de quelques tentatives mais parfois ca ne passe pas. Il existe certainement des regles graphiques qui permettent a cette profession de designer peut etre mieux et plus rapidement. C'est un des rares metiers ou le talent ne s'apprend peut etre pas mais doit etre un brin inné.

CE que moi je trouve plus compliqué , c'est de faire de beaux sites, entièrement adaptable a la taille du texte et dont la largeur est fluide pour s'adapter a la resolution de l'ecran de l'utilisateur ( c'est ce point precis qui me fait triper avec CSS, le repositionnement automatique , on a chacun ses deviations mentales que veut tu... )

Si on prend l'exemple archi connu de ccszengarden , il y a des designs tripants, mais la plupart sont en largeur fixe. Dès qu'on touche au variable , la fantaisie me parait plus compliqué et la sobriété devient un peu une necessité.

SI on prend l'exemple donné par le livre d'alsa avec un header qui opte pour un degradé a gauche pour rattraper la couleur du background , on s'en sort, mais on est aussi condamné a utiliser ca presque tout le temps, donc je trouve que ca fait des sites qui se ressemblent pas mal.

J'ai trouvé une mini parade mais graphiquement plus compliqué , qui correspond a avoir un header sans degradé et avec un image de fond positionné a droite par dessus le header et dont l'emplacement varie donc forcement avec la largeur du conteneur.....mais je m'egares.

Avant que le design rencontre les besoins du site , tu auras certainement a faire plusieurs essais ( ou alors en bon francais d'ici: pour faire matcher le design et les besoins du site, fo taponner pas mal ! )

JE te laisse prendre celle que tu veux !

salut,
merci à tous pour vos réponses... ça donne des points de vue intéressants... je vais méditer tout ça... et m'y mettre quand je vais avoir du temps (c'est le plus dur à trouver finalement)

Bonjour à tous et à toutes.

Merci Melody Nelson, ça me fait vraiment plaisir de voir qu’il y a des personnes qui prennent mon taff comme référence.
Si cela peu te rassuré et je n’espère pas te découragé, je me considère encore comme un tout petit graphiste, quand je vois le taff de certains graphistes, ben je me dis que j’ai encore énormément de progrès à faire, et c’est tant mieux.

Pour ma part, quand je travail sur une nouvelle interface web ou print, en générale je démarre feuille blanche directement sur Photoshop ou illustrator. En sachant déjà plus au moins dans ma tête ce que je veux faire. Mais quand je cherche à faire un truc vraiment original (à mon propre niveau bien sur) je fais des croquis sur papier. Comme par exemple le cadrant vert du menu sur la partie flash de mon site. En suite je retravaille ça sur illustrator pour les formes et sur Photoshop pour les effets.

Pour les petits logos en bas à gauche de mon site, c’est pas bien compliqué en faite, je suis aller dans C:\Program Files\Macromedia\Flash 8 pour flash par exemple, j’ai repris le logo, que j’ai détouré dans shop, je lui appliqué une perspective ou une torsion selon la pose que je veux lui donner, en suite je mets quelques effets, tel que l’ombre portée pour que l’élément s’intégrer bien (mais attention à ne pas trop abusé des ombre portée), un petit biseautage (même chose, ne pas trop abusé) pour lui donné la forme d’une pastille et le tour et jouer.

Pour le reste des images, c’est des photos détouré et en suite avec quelques effets, tel l’incrustation de couleurs ou de dégradé pour faire le remplissage. Pour la bande en haut qui fait tout le long, ce n’est pas bien dur aussi, avec l’outil sélection, j’ai fait une longue bande, avec le pot de peinture, j’ai fais le remplissage, j’ai dupliqué le claque, celui du dessus, je l’ai légèrement réduit et suite des effets, couleur, contour, dégradé… pour trouvé le résultat désiré et lui donné donc cette impression d’un léger bombé.

Après le seul petit conseil que je peu te donné, c’est de faire qq tuts, pour apprendre la technique et de naviguer sur le web pour l’inspiration, quand tu vois des choses qui te plaise, ben pour t’entrainé, tu essaye de les refaire. Jusqu'au jour où tu trouvera ton propre style.

Voici quelques liens utiles.
Pour l’harmonisation des couleurs.
http://www.smartpixel.net/chromoweb/fr/index.htm

Pour de l’aide, un bon forum
http://pao.media-box.net/

Technique
http://www.tout-savoir.net/lexique.php?rub=definition&code=6308

Voilà, bon courage à toi et merci encore.

Moi jveux savoir faire ca aussi ! :http://www.cgarena.com/freestuff/tutorials/photoshop/lukx/index.html
Modifié par raphlecool4 (29 Aug 2006 - 14:18)

Voilà, ça c'est un graphiste

J'avais déja vu cette image, enfin ce chef d'oeuvre !
En effet c'est vraiment un artiste (autre fois existait de artistes tel Léonard de Vinci mais travaillant sur des toiles, maintenant c'est sur informatique).

Euhhh loin de moi l'idée de casser le mythe de l'"artiste" mais des gens réalisant ce type d'image que ce soit en peinture, à l'aero, ou en Info, j'en connais quelque uns.

C'est juste une boulot d'hyperréalisme, et comme souvent, je n'y vois rien de plus qu'on ne pourrait réaliser avec un bon modèle et un bon photographe pour surement beaucuop moins de boulot.

Ca n'a rien de réellement créatif, par contre il y'a une très bonne maîtrise technique.

++
Aymeric

raphlecool4 a écrit :
Moi jveux savoir faire ca aussi ! :http://www.cgarena.com/freestuff/tutorials/photoshop/lukx/index.html

Dans le m^me esprit en voila en autre.. que j'avais découvert et mis sur mon blog ...

> http://www.wade.pwp.blueyonder.co.uk/tutorial1.htm

Sinon, n'étant pas graphiste pour un sous j'essai totu de même d'effectuer quelques petit design en suivant les méthodes citant précédemment car finalement il est vria que vu les outils dont nous disposons a notre époque le genre de "maitrise" que démontre les 2 liens cité plus hauts ne sont plus vraiement utiles et surtout rentables !!

Maintenant il faut travailler vite et bien ! DOnc je ne vois pas d'autre altérnative que celle proposer par le montage/retouche photos !

Bon fin de WE !
Modifié par Cocci_uk (03 Sep 2006 - 14:52)

AymericJ a écrit :

C'est juste une boulot d'hyperréalisme, et comme souvent, je n'y vois rien de plus qu'on ne pourrait réaliser avec un bon modèle et un bon photographe pour sûrement beaucoup moins de boulot.

Ca n'a rien de réellement créatif, par contre il y'a une très bonne maîtrise technique.

Je suis de cet avis, mais cela reste pour moi sacrément impressionnant.

Je n'ai trouvé que cette info concernant le temps passé sur cette réalisation :

a écrit :
I received a lot of e-mails saying that it's not a big deal to just paint something like this using a real photograph. What can I say, if you don't like it don't look at it or try to do it and you will see how much time it takes to create it like I did.

c'est sur que ces techniques ne sont pas du tout adaptées aux sites internet, mais je ne les trouve pas inutiles pour autant

dans le même genre avec illustrator

encore un exemple ...

http://web.mac.com/adrien.donot/iWeb/Site/Blog/680FB317-73A6-4C43-839C-18E2F909F429.html

Au fait j'oubliais,

Pour melody, ou tout autre webdesigners en herbe.

Je fais une analyse de chacun de mes projets de site sur mon blog, pour le moment il n'yen a que deux, mais je les ai justement créés dans le but d'expliquer une démarche de création graphique.

Les deux articles :

Premier projet
Deuxieme projet

En espérant que ça vous vous soit utile.

++
Aymeric, welcome aboard

même si je ne participe pas à cette discussion, je lis et je comprends un peu mieux qui sont les graphistes... c'est une manière de découvrir votre métier intéressante... de mon côté, je n'ai toujours pas commencé faute de temps mais je m'y mettrai dès que possible parce que je veux être encore plus autonome... merci encore de votre participation...

Mohamed : j'avais "craqué" sur ton site (et tes travaux) quand tu avais posté un sujet sur le forum des demandes d'avis... simple, beau, "efficace"... tout ce que j'aimerais faire en général et en particulier pour un site qui me tient beaucoup à coeur, c'est d'ailleurs pour lui (et aussi pour apprendre) que je veux mettre le nez dans la création graphique... si je pouvais être "petit graphiste" comme toi, je serais comblée...

Melody Nelson a écrit :
Mohamed : j'avais "craqué" sur ton site (et tes travaux) quand tu avais posté un sujet sur le forum des demandes d'avis... simple, beau, "efficace"... tout ce que j'aimerais faire en général et en particulier pour un site qui me tient beaucoup à coeur, c'est d'ailleurs pour lui (et aussi pour apprendre) que je veux mettre le nez dans la création graphique... si je pouvais être "petit graphiste" comme toi, je serais comblée...

Merci