Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
2150 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Exporter design pour un développeur

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Exporter design pour un développeur

n°1177114
deyapretty
Posté le 14-06-2016 à 11:40:44  profilanswer
 

Hello!
 
Je suis débutante dans le webdesign (je le fais en activité perso, comme hobby quoi  :) ) et là je suis entrain de créer un site très simple pour mon copain... sauf que je ne sais pas quoi faire une fois mon design terminé.
La plupart des tutos que j'ai suivis s'arrêtent une fois le "look" terminé.
 
 
 
- J'utilise Illustrator CC 2015 (Photoshop j'ai essayé mais j'aime pas trop pour du webdesign).  
 
- J'ai tenté la fonction: Enregistrer pour le web mais je me suis retrouvée avec plein de fichiers PNG (il y avait de tout, mes images, mes icônes, le texte avait été "PNGisé", des morceaux "vides" en PNG - plein d'espaces" ). J'avais l'impression qu'Illustrator avait tout tout tout découpé, même les parties vides.  :??:  
 
- Je ne sais pas très bien me servir de l'outil tranche.
 
 
 
Et la question importante est: qu'est-ce que je dois fournir au développeur? Un fichier avec tout dedans en PNG? Un fichier CSS? (par exemple certains boutons, comme le bouton "Valider" sont juste du texte avec un rectangle en fond. Je dois réellement lui filer le PNG rectangle ou bien ça il le fera en CSS? Et dans ce cas-là je le lui communique comment?
 
 
Merci d'avance pour votre aide :)
 

mood
Publicité
Posté le 14-06-2016 à 11:40:44  profilanswer
 

n°1177126
Grafimages
Posté le 14-06-2016 à 15:52:12  profilanswer
 

Salut,
 
Alors, déjà, Illustrator, c'est un outil de dessin vectoriel, qui est plus utile en print qu'en webdesign, où les images sont généralement en jpg, png et gif (mais de plus en plus en svg également).
 
Ensuite, la fonction Enregistrer pour le Web découpe bêtement ton image de départ en plusieurs images (tranches), textes inclus, après avoir aplati l'image (= fusionné tous les calques).
C'est une technique qu'on utilisait il y a des années, aux débuts du Web, en se servant de tableaux HTML pour faire la mise en page.
J'imagine (parce que je n'utilise pas cette fonction) que maintenant, ça a dû évoluer et que ladite fonction utilise des CSS...
 
Enfin :

Citation :

qu'est-ce que je dois fournir au développeur


Idéalement, un développeur préfèrera toujours des fichiers HTML et CSS, parce que lui, normalement, travaille plus avec des langages dits dynamiques (php, SQL, Javascript...).
Il se peut cependant que ton développeur soit aussi intégrateur (la personne qui reproduit un design sous forme de templates HTML/CSS), auquel cas il faut lui fournir le fichier natif (.ai ou encore une version .psd avec tous ses calques).
Et non, pas besoin de lui filer un fichier png d'un rectangle, ça se fait très simplement en CSS.
 
Donc, au final, que fournir ?
- à l'intégrateur (ou au développeur s'il est aussi intégrateur) : ton fichier natif, avec tous les calques apparents (même s'il y a chevauchement, par exemple, pour montrer les différents comportement d'un bouton)
- au développeur : le(s) template(s) HTML/CSS fournis par l'intégrateur (il devrait y avoir probablement en plus un dossier Images et probablement un dossier avec du Javascript, surtout si le design est responsive).


---------------
Besoin d'un site de qualité à prix raisonnable ? --> http://www.grafimages.com
n°1177132
deyapretty
Posté le 14-06-2016 à 17:27:37  profilanswer
 

@Grafimages
 
Wow super merci pour ta réponse! http://forum.mmzstatic.com/smilies/happy.gif
 
Je sais que Photoshop gère mieux le pixel qu'Illustrator mais sur Illustrator tu peux activer la vue en Pixel et la fonction "Snap to pixel".
 
Après sur du design style flat design c'est important?  
Par exemple si je crée des icônes-boutons dans ce style, est-ce qu'ils doivent être en bitmap forcément?  
http://cdn.mkels.com/1/flat-icon-set/flat-icon-design-30.jpg
 
Les questions peuvent paraître vraiment primaires mais je débute complètement.http://forum.mmzstatic.com/smilies/shifty.gif
 
 
Sinon pour le fichier .Ai ou .PSD ça veut dire que je dois avoir une organisation nickel?  :ouch:  
Surtout sur Illustrator, l'organisation des calques n'est pas top :/

n°1177136
Grafimages
Posté le 14-06-2016 à 23:01:56  profilanswer
 

Pour les icônes, oui, bitmap (png) ou svg (vecto, donc) si tu sais faire.
Ca pourrait également être faisable en CSS, mais je déconseille, ce serait bien trop chronophage.
 

Citation :

Sinon pour le fichier .Ai ou .PSD ça veut dire que je dois avoir une organisation nickel?  :ouch:  


Hé oui : un dossier pour chaque élément et des calques nommés de façon explicite.
Exemple :
[Dossier header]
   [Sous-dossier logo]
      > calque logo
      > calque texte avec le texte du logo/nom du site
  > calque image de fond
[Dossier menu]
  > calque de texte contenant les 3 états des liens/boutons (au repos, rollover, active)
[Dossier contenu]
  > calque de texte contenant un exemple de chaque titre Hn (n allant de 1 (titre) à 6 (sous-sous-sous-sous-sous titre) ainsi qu'un exemple de lien avec les 3 états
[Dossier footer]
Etc...


---------------
Besoin d'un site de qualité à prix raisonnable ? --> http://www.grafimages.com
n°1177140
deyapretty
Posté le 15-06-2016 à 12:24:08  profilanswer
 

@Grafimages
 
Ok merci :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Exporter design pour un développeur

 

Sujets relatifs
CATIA - Conseils en Genrative Shape Designprojet pro design graphique
Import xml in design et génération automatiqueDemande avis design site
Avis design/UIProjet de Création d'un site web Développeur + Graphiste designer
Logiciels Modélisation Maisons Perspectives DesignSite web design
exporter un document volumineux en PDF sous PhotoshopQuestions relatif au design et au droit
Plus de sujets relatifs à : Exporter design pour un développeur



Copyright © 1997-2016 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR