On me donne comme maquette un fichier Illustrator

Bonjour,

Je ne sais pas si je poste dans la bonne section!

Je ne suis pas encore intégrateur de design, j'aurais aimé avoir une maquette html mais on me donne un fichier Adobe Illustrator pour la maquette du site.

Comment le transformer en du bon code HTML avec des div bien placés?
Il s'agit de découper selon les termes de designers.

Salut,

Ce qu'on te demande, c'est d'effectuer le travail d'un intégrateur (X)HTML / CSS, qui part toujours d'une maquette graphique, le plus souvent réalisée sous Photoshop, même si Illustrator ou Fireworks peuvent être aussi mis à contribution.

Quel est ton problème exact ? Est-ce un problème de maîtrise d'Illustrator ? Dans ce cas, tu peux essayer de demander qu'on te file la maquette sous Photoshop ou Fireworks (encore faut-il que tu maîtrises l'un des deux ; sinon, c'est mal parti ). Est-ce un problème de savoir comment traduire une maquette graphique en un gabarit de page HTML ? Dans ce cas, il y a fort à parier que tu connais pas le métier d'intégrateur et je me demande donc pourquoi on te file une maquette.

En tout cas, l'intégration (X)HTML / CSS est un métier qui s'apprend (on peut l'apprendre sur le tas, d'autant plus que bon nombre d'intégrateurs que je connais sont autodidactes) et dont la maîtrise demande des mois de pratique (voire quelques années pour qu'on soit bien chevronné). Et ce n'est pas une réponse dans un forum qui te fera acquérir de telles compétences.

Oui c'est ça c'est un problème de savoir comment traduire une maquette graphique en un gabarit de page HTML!

En fait, là j'essaie de mesurer la maquette Illustrator et de reproduire son HTML de l'en-tête au pied de page, je pick un peu pour voir les couleurs et je reproduis manuellement en CSS.

Mais je ne sais pas si ma démarche est la bonne car le terme souvent utilisé c'est découpe donc existe-t-il un outil automatique?

Ah ces gens qui font des maquettes web sur illustrator

Au risque de dire une bêtise, il me semble bien qu'il y a l'outil "tranche" sur illustrator (au même titre que celui de photoshop) qui te permet de sélectionner toutes tes zones à découper.

Au delà de ça, je ne suis pas réellement sûr d'avoir saisi ton problème. Si tu veux devenir intégrateur, il te faut absolument savoir utiliser photoshop et illustrator au moins pour pouvoir découper des images à intégrer car les designers ne le feront pas à ta place

Personnellement, je demanderai à tes designers de te passer un fichier .psd beaucoup plus simple à utiliser pour découper.

Salut,

Personnellement, j'ai le même style de travail à effectuer en ce moment. On m'a donné un template réalisé sous illustrator. Je l'ai exporté sous Photoshop (fichier > Exporter > ...)
Il faut ensuite découper les images sous photoshop (outils découpe, puis fichier > sauvegarder pour le web).

Ensuite, moi je pars d'un gabarit XHTML (je crois que alsacréations en fournit quelques un sur le site) et j'intègre les images découpées dans le gabarit. Bon, ça demande une connaissance des langages XHTML/CSS, sinon tu risques de galérer. Pour le codage, tu peux utiliser un simple éditeur de code comme Notepad++

Sinon, sous photoshop tu peux faire un export HTML, mais personnellement, je n'aime pas trop.

Tu peux utiliser fireworks et dreamweaver pour l'intégration.

Mais comme le dit Victor, pour le reste, va falloir que tu te débrouilles... Mais, en cherchant bien, tu devrais trouver tout ce dont tu as besoin sur le net

dionysos a écrit :
Ensuite, moi je pars d'un gabarit XHTML (je crois que alsacréations en fournit quelques un sur le site) et j'intègre les images découpées dans le gabarit.

Où ça?

J'apprends en fait le métier d'intégrateur, je dois chercher donc quelques tutos de la découpe sur Photoshop!

a écrit :
On m'a donné un template réalisé sous illustrator. Je l'ai exporté sous Photoshop (fichier > Exporter > ...)

En exportant comme ça un fichier illustrator, tu te retrouve à fusionner les calques non ?

Personnellement, j'ai appris seul le métier d'intégrateur par le biais de différents sites, beaucoup de travail et quelques contacts expérimentés

Pour ce qui est de photoshop, vu que tu ne design pas, penche-toi du côté de l'outil "Tranche" ainsi que de l'outil "rectangle de sélection" et "image/recadrer".
C'est ce dont tu as principalement besoin pour découper des chartes graphiques.

raknal a écrit :


Où ça?

J'apprends en fait le métier d'intégrateur, je dois chercher donc quelques tutos de la découpe sur Photoshop!

dionysos a écrit :
Mais comme le dit Victor, pour le reste, va falloir que tu te débrouilles... Mais, en cherchant bien, tu devrais trouver tout ce dont tu as besoin sur le net smile

Fahrenheit a écrit :
On m'a donné un template réalisé sous illustrator. Je l'ai exporté sous Photoshop (fichier > Exporter > ...)

En exportant comme ça un fichier illustrator, tu te retrouve à fusionner les calques non ?

Personnellement, j'ai appris seul le métier d'intégrateur par le biais de différents sites, beaucoup de travail et quelques contacts expérimentés

Pour ce qui est de photoshop, vu que tu ne design pas, penche-toi du côté de l'outil "Tranche" ainsi que de l'outil "rectangle de sélection" et "image/recadrer".
C'est ce dont tu as principalement besoin pour découper des chartes graphiques.

Oups, erreur de postage
Merci de supprimer ce message...
Modifié par dionysos (14 Oct 2011 - 10:08)

Fahrenheit a écrit :


En exportant comme ça un fichier illustrator, tu te retrouve à fusionner les calques non ?

Non, les calques sont récupérés sous photoshop.

Effectivement, il ne faut pas oublier de cocher les cases

Cependant, tu ne gardes que les calques mais pas les tracés à l'intérieur ou alors il y a une option pour ça que je ne vois pas !

Fahrenheit a écrit :
Effectivement, il ne faut pas oublier de cocher les cases

Cependant, tu ne gardes que les calques mais pas les tracés à l'intérieur ou alors il y a une option pour ça que je ne vois pas !

effectivement, je crois (mais pas sûr à 100%) que les tracés ne sont pas conservés... faudrait que je vérifie
Modifié par dionysos (14 Oct 2011 - 10:19)

Wow, ces discussions sur Illustrator -> Photoshop me donnent envie de demander au designer de m'envoyer plutôt un PSD!

Mais il y a des intégrateurs arrivant à intégrer à partir d'un fichier image JPG ou PNG!

a écrit :
Wow, ces discussions sur Illustrator -> Photoshop me donnent envie de demander au designer de m'envoyer plutôt un PSD!

Mais il y a des intégrateurs arrivant à intégrer à partir d'un fichier image JPG ou PNG!

Oui m'enfin, l'image a intérêt d'être de bonne qualité et qu'il n'y ai aucun effet en hover (sur des boutons par exemple) que tu ne peux pas faire en css.

raknal a écrit :
Wow, ces discussions sur Illustrator -> Photoshop me donnent envie de demander au designer de m'envoyer plutôt un PSD!

Mais il y a des intégrateurs arrivant à intégrer à partir d'un fichier image JPG ou PNG!

alors là faudra que tu m'expliques comment ces intégrateurs font pour intégrer un png avec transparence à partir d'un jpg!

Mais effectivement, le plus pratique est de partir d'un psd.
Modifié par dionysos (14 Oct 2011 - 10:31)

Il a écrit "ou"

Fahrenheit a écrit :
Il a écrit "ou"

oui, j'ai noté mais de toute façon, le problème reste le même... et puis comme tu le dis, pour faire un rollover a partir jpg ou png, c'est pas évident...

En ce qui concerne les maquettes PNG, ce n'est pas impossible : c'est le format utilisé par défaut par Fireworks pour l'enregistrement (plus précisément, il s'agit du format dit « PNG Fireworks », qui comporte les calques, à ne pas confondre avec le PNG « normal », que Fireworks appelle PNG « aplati » ou « fusionné » et qui fusionne tous les calques).

Quant aux outils essentiels sous Photoshop, il y a certes, l'outil permettant d'effectuer des tranches (pratique pour l'intégration d'une newsletter) ; mais, il y aussi, et surtout, l'outil sélection permettant de sélectionner un calque (voire un groupe de calques, selon la configuration de l'outil).

Victor BRITO a écrit :
En ce qui concerne les maquettes PNG, ce n'est pas impossible : c'est le format utilisé par défaut par Fireworks pour l'enregistrement (plus précisément, il s'agit du format dit « PNG Fireworks », qui comporte les calques, à ne pas confondre avec le PNG « normal », que Fireworks appelle PNG « aplati » ou « fusionné » et qui fusionne tous les calques).

merci pour la précision, n'utilisant pas firework je n'aurais jamais pensé que cela était réalisable