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
 

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 :

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).

@Grafimages
 
Wow super merci pour ta réponse!
 
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?  

 
Les questions peuvent paraître vraiment primaires mais je débute complètement.
 
 
Sinon pour le fichier .Ai ou .PSD ça veut dire que je dois avoir une organisation nickel?    
Surtout sur Illustrator, l'organisation des calques n'est pas top

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.
 

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...

@Grafimages
 
Ok merci