Cours 8 | Impression et responsive¶
L'impression (Print)¶
L'impression, quoique bien moins présente de nos jours, fait encore partie du décor. Que ce soit pour des bannières de spectacles, des dépliants chez le dentiste, des menus au restaurant ou des publicités dans les abribus, le concept est encore très présent.
Résolution et qualité¶
La résolution physique se mesure souvent en pouces ou en centimètres, pas en pixels.
La densité d’impression (qualité) se calcule en dpi (dots per inch) ou ppp (points par pouce) en français.
En général, une impression de qualité nécessite au moins 300 dpi.
Figma travaille en pixels à 72 dpi. Pour obtenir une qualité d'impression de 300 dpi, exporter à 4.17x la taille d'origine.
Formats¶
Norme internationale : formats A, B et C
Autres formats très utilisés ici :
- Lettre (8.5 x 11)
- Légal (8.5 x 14)
Spectre des couleurs¶
CMYK (ou CMJN) est le mode colorimétrique utilisé en imprimerie.
L’espace colorimétrique RGB est plus large que CMYK. Certaines couleurs très vives visibles à l’écran ne peuvent donc pas être reproduites exactement à l’impression.
Fond perdu et marges¶
| Concept | Description |
|---|---|
| Fond perdu (bleed) | Zone qui dépasse la taille finale pour éviter un bord blanc après coupe. Souvent 3 mm. |
| Ligne de coupe (trim) | Taille finale du document une fois coupé. |
| Marge de sécurité (safety) | Zone intérieure où placer textes et éléments importants. Souvent 5 mm. |
Quelles valeurs utiliser ?
C'est normalement l'imprimeur qui fournit ces spécifications.
Vistaprint, par exemple, place ses modèles dans la section Specs & Templates du produit que l'on souhaite commander.
Utilisez SVG pour Figma.
Exportation pour l'imprimeur¶
L’imprimeur n’est pas responsable des oublis du designer. Il est donc impératif de bien préparer ses documents.
- Retirer toutes les lignes de guide (marges, lignes de coupe, fond perdu).
- Exporter en PDF. La plupart du temps, les imprimeurs préfèrent ce format parce qu’il conserve fidèlement la mise en page.
- Vectoriser tous les textes. C’est très important : les polices utilisées ne sont pas nécessairement installées chez l’imprimeur.
- Illustrator : Create Outlines
- Figma : Aplatir
Responsive¶
Un Auto Layout peut s'organiser en ligne (horizontal) ou en colonne (vertical). Les deux peuvent être imbriqués pour créer des grilles complexes.
Raccourci
Shift+A : ajouter l'Auto Layout à une sélection
Exemple de mise en page automatique horizontale¶
Télécharger les images des livres
On cherche ici à reproduire l'équivalent d'une mise en page CSS :
display: flex;justify-content: center;align-items: end;
Première notion, le positionnement :
- On applique d'abord la mise en page horizontale sur un frame et on y ajoute les éléments désirés (les livres).
- S'assurer d'avoir des dimensions fixes (
1920x1080). - Choisir l'alignement désiré (centré en bas).
- Corriger les espaces et marges en fonction des besoins.
- On peut retirer le remplissage du frame.
Deuxième notion, l'enveloppage :
- Changer l'alignement : en haut à gauche.
- Cliquer sur l'icône « Envelopper ».
- Changer la hauteur du frame pour l'ajuster au contenu.
- Redimensionner le frame pour tester que l'enveloppage fonctionne comme désiré.
À la verticale alors ?
Même principe.
L'avantage de ce type de mise en page, c'est aussi qu'on peut ajouter ou retirer des éléments à la volée !
Auto Layout imbriqué¶
C'est ici que ça devient très intéressant !
On peut imbriquer des frames Auto Layout vectical, horizontal ou en grille, pour créer des mises en page complexes.
Pour ceux et celles qui aiment apprendre en vidéo, TD Sunshine résume bien le concept de mise en page automatique.
Youtube
Technique du jour¶
Communauté Figma¶
Exercices¶
Exercice - Figma
Menu du jour
Exercice - Figma
C'est du gâteau !
Devoir¶
Devoir - Figma
Publicité Web