Category: Graphisme

27
Oct

Tips de graphiste – Images pixelisées ou vectorisées, quelles différences ?

La vectorisation

La vectorisation est la transformation d’une image dite matricielle* (au format jpeg, tiff, gif, png entre autres) en vecteurs permettant à l’image crée d’être agrandie indéfiniment et donc imprimée à des tailles différentes, si bien que vous pourrez utiliser la même image vectorisée sur une carte de visite ou sur une surface de la taille d’un panneau publicitaire par exemple.
*Les images dites matricielles sont composées de pixels, des petits carrés de couleurs que l’on voit en agrandissant l’image. Ces petits pixels sont eux-même composés d’un mélange de 3 sous-pixels de couleurs rouge, vert et bleu, c’est le codage rvb.

exemple de système rvb

 

Pour aller plus loin, je vous invite à lire cet article : le principe du système RVB.

La vectorisation crée des segments reliés entre eux par des formules mathématiques recalculées à chaque changement de taille. Cette technique est très utile pour des logos, des textes ou encore des plans techniques.

La pixelisation (ou rastérisation)

Les images pixelisées (rasterized en anglais) contrairement aux images vectorisées peuvent se dégrader, elles deviennent de plus en plus floues et perdent en qualité à chaque agrandissement. L’avantage c’est que ces images pixellisées peuvent comporter un nombre conséquent de nuances de couleurs très utile pour créer des dégradés de couleurs par exemple. Une image pixelisée est définie par ses pixels et sa résolution, cette dernière s’exprimant en points par pouces.

La différence entre une image pixelisée (agrandie de sorte à ceux que l’on voit les pixels) et une image vectorisée :

image de comparaison entre pixellisation et vectorisation

N’hésitez pas à vous abonner via le champ en bas à droite pour recevoir les prochains articles.

Aurélien

Tips de graphiste – Images pixelisées ou vectorisées, quelles différences ?
Noter l\'article.
26
Oct

La différence entre les formats RAW et Jpeg

Les fichiers Raw, « Raw » signifiant « Brut », sont des versions non compressés des images enregistrées par le capteur de l’appareil. N’étant pas compressés, ces fichiers sont donc assez volumineux et pèsent généralement plus de 15Mo.

Les fichiers au format Jpeg (acronyme de Joint Photographic Expert Group, le groupe d’experts de l’image ayant crée le format) sont des versions compressées des images enregistrées et elles contiennent donc moins d’informations. Le format RAW permet donc de produire des images de meilleurs qualités et de pouvoir faire retoucher sa photo par un graphiste sans perte.

Tout dépend de l’utilisation que vous comptez faire de vos clichés :

Le format RAW est fortement conseillé si vous devez shooter dans des situations avec beaucoup de mouvement ou avec des arrières-plans différents (des paysages par exemple) car vous pourrez capturer la scène avec assez d’informations nécessaires pour corriger l’exposition en post-production.

Le format Jpeg est conseillé pour des images destinées au web car plus légères ou bien pour shooter des images en mode rafale car la mémoire tampon ne sera pas autant sollicité qu’en photographiant des images au format RAW. Autre avantage du Jpeg, il peut être lu par n’importe quel contrairement au fichier Raw.

Le « Raw », un format beaucoup plus flexible :

Le format Raw offre une plus grande flexibilité pour les retouches. Le JPEG enregistre 256 niveaux d’informations alors que le RAW en enregistre entre 4 096 et 16 384 ce qui permet beaucoup plus de flexibilité pour ajuster certains paramètres comme la luminosité, l’exposition, contraste, la balance des blancs…

DNG, un format Raw mais open-source :

Chaque constructeur  dispose de son propre format Raw et le risque est de ne plus pouvoir utiliser ses fichiers après quelques mis à jour des logiciels de retouches d’images tels que Aperture, Photoshop, ou Lightroom par exemple. Adobe a donc décidé de créer le format DNG, format d’image plus générique qui a d’ailleurs été adopté par des marques telles qu’Hasselblad, Casio, Leica ou encore Pentax.

N’hésitez pas à vous abonner via le champ en bas à droite pour recevoir les prochains articles.

Aurélien

La différence entre les formats RAW et Jpeg
Noter l\'article.
22
Oct

Tips de graphiste – Comment éviter la compression de vos photos sur Facebook ?

Vous avez surement eu la mauvaise expérience de voir la dégradation (compression) de vos photos une fois téléchargées sur Facebook. Cette compression est assez flagrante lorsque l’image comporte un texte blanc sur un fond de couleur uni. Il y a plusieurs raisons à cette perte de qualité (informations à prendre avec des pincettes, Facebook changeant son algorithme assez souvent) :

Facebook stocke près de 350 millions de photos par jour sur des serveurs (chiffres révélés par le réseau en 2013) et dois donc réduire le poids des images pour limiter les coûts de stockage et la vitesse à laquelle s’affiche les pages du réseau.

Pour commencer voilà ce que nous dit Facebook pour être sûr que vos photos s’affichent de la meilleure qualité possible :

– Télécharger vos photos aux dimensions suivantes : 720 pixels, 960 pixels ou 2048 pixels pour la longueur.

– Sauvegarder vos photos au format sRVB.

– Télécharger des images dont le poids n’excède pas 100 ko.

Capture d’écran à l’appui :

capture ecran facebook sur la compression des images

Quelques précisions et conseils :

Après différents tests, on constate que Facebook applique une compression sur les photos peu importe le poids ou format de la photo téléchargée. Le mieux est donc de télécharger la photo avec une taille de 2048 pixels, pas plus car c’est la taille maximum que Facebook affichera.

Facebook applique une différence de traitement entre les photos postées sur le profil personnel et les pages professionnelles, il vaut mieux donc :

– Pour vos pages personnelles, télécharger vos photos à leur qualité maximale : minimum 960 pixels si possible et 2048 pixels maximum.

– Pour vos pages professionnelles, utiliser le format PNG-24 pour les fichiers contenant des logos ou du texte.

N’hésitez pas à vous abonner via le champ en bas à droite pour recevoir les prochains articles.

Aurélien.

Tips de graphiste – Comment éviter la compression de vos photos sur Facebook ?
Noter l\'article.
02
Août

Trouver la bonne combinaison de couleurs grâce à ces outils gratuits !

La couleur est une part importante dans le marketing mais choisir les bonnes combinaisons n’est pas la chose la plus aisée surtout lorsque l’on est pas au fait des codes ou tendances.

Voici une liste d’outils web pour vous aider à harmoniser au mieux les couleurs de votre site web ou autre projet graphique :

1. Coolors

aperçu du site de palette coolors

Coolors génère une palette de 5 couleurs harmonisées. En appuyant sur la barre d’espace, Coolors vous propose une nouvelle palette de différentes couleurs. Si une couleur vous plaît, vous pourrez la conserver et lui demander de vous en proposer d’autres par rapport à celle-ci. L’export et la sauvegarde de vos palettes est également possible.

2. Adobe Color CC (Adobe Kuler)

kuler-palette-graphique-generateur-choix

Adobe Color CC permet aux designers ou aspirants designers de créer, tester et sauvegarder leurs palettes.
Vous pouvez également vous ballader parmi les créations de la communauté Kuler. L’interface est plutôt simple à utiliser, vous permettra de visualiser les créations les plus populaires dans la communauté.

En créant un compte Adobe, vous pourrez vous connecter et enregistrer vos palettes générés pour plus tard, ou les partager avec d’autres utilisateurs.

3. Colour Lovers

aperçu du site colour lovers

Une des palettes les plus aimées du moment

Colour Lovers est une communauté internationale de designers qui mettent en ligne leurs palettes personnelles. Tout le monde peut commenter, aimer les palettes proposées.

4. Color Hunt

aperçu du site color hunt

Color Hunt est une communauté de passionnés qui mettent en ligne leurs combinaisons. Il n’est pas nécessaire de créer un compte pour utiliser le service. Vous pourrez filtrer les palettes proposées en fonction de leur popularité ou de la date.

« Trop de couleur nuit au spectateur. »
– Jacques Tati.

N’hésitez pas à vous abonner via le champ en bas à droite pour recevoir les prochains articles.

Aurélien

Trouver la bonne combinaison de couleurs grâce à ces outils gratuits !
Noter l\'article.
29
Juil

Tips de graphiste – Couleurs saturées ? Taux d’encrage (surement) trop élevé !

Le taux d’encrage d’un fichier est le pourcentage de couleurs dans votre document.

En impression offset, chaque couleur a un taux d’encrage compris entre 0 et 100 %. Voici la fenêtre permettant de régler ces paramètres dans le logiciel Photoshop :

Taux-dencrage

Un taux d’encrage trop élevé ne permettra pas au papier de sécher correctement puisqu’il ne pourra pas absorber tout l’encre lors du processus d’impression. Cela entraînera obligatoirement un maculage, un défaut d’impression se traduisant par des tâches d’encre dûes à plusieurs facteurs comme par exemple un excès d’encre sur la feuille rendant le séchage impossible ou bien à cause de la qualité du papier.

Exemple avec un rouge « pur » : Cyan : 0% ; Magenta : 100% ; Jaune : 100% ; Noir : 0%. Le taux d’encrage de cette couleur est donc : 0 + 100 + 100 + 0 = 200%.

Ce taux varie selon les papiers, il est d’ailleurs conseillé de ne pas dépasser un taux de 300 % pour du papier couché et de 280 % pour tout autre papier. Les imprimeurs ont leur propre restriction, renseignez-vous après de votre prestataire.

Comment vérifier le taux d’encrage dans les logiciels  :

Sur Photoshop :

Ouvrir l’image sous Photoshop

Activer la palette Information

Passer le curseur de la souris sur les parties les plus sombres de l’image et regarder la séparation indiquée dans la palette information. Le taux d’encrage est égal à l’addition des 4 pourcentages.

Sur Indesign :

Aller dans les menus Fenêtres > Sortie et cliquer sur Aperçu des séparations.

Sur Acrobat :

Aller dans les menus Fenêtres > Sortie et cliquer sur Aperçu des séparations.

Comment limiter le taux d’encrage sous Photoshop ?

L’astuce : il faut convertir l’ image en RVB (Image > Mode > Couleurs RVB),

puis aller dans le menu Édition > Couleurs. Dans la fenêtre, aller dans CMJN puis CMJN personnalisé.

Fixer ensuite la limite d’encrage total à 220% et à 100% pour le noir.

 

Installer un nouveau profil : 

Copier le fichier du profil dans Bibliothèque / Colorsync / Profiles

Il sera ainsi reconnu par les applications. Cela dit, pour que cela serve à quelque chose, il faut que :
– L’écran soit être étalonné prépresse
– La suite logicielle soit paramétrée colorimétriquement
– Les photos soient retouchées dans Photoshop avec l’épreuvage écran correspondant au profil du tirage.
– Exporter le PDF selon la norme PDF/X-1a ou PDF/X-3, avec conversion dans le profil du tirage

Comment gérer le noir ?

Pour rendre les noirs plus denses, il est conseillé de créer une couleur spécifique appelée soutien.

La formule suivante est conseillée : C=60%, M=30%, J=20%, N=100%

Il existe plusieurs façons de créer un ton noir :

  1. Noir PURE (PURE black) :
    Cyan : 0% ; Magenta : 0% ; Jaune : 0% ; Noir : 100%
    On peut dire que c’est un noir ‘classique’, ni gris foncé, ni noir profond, il est recommandé pour vos textes.
  2. Noir COOL (COOL black) :
    Cyan : 70% ; Magenta : 35% ; Jaune : 40% ; Noir : 100%
    Un noir soutenu, plutôt froid.
  3. Noir RICHE (RICH black) :
    Cyan : 50% ; Magenta : 50% ; Jaune : 50% ; Noir : 100%
    Noir très profond
  4. Noir CHAUD (WARM black) :
    Cyan : 35% ; Magenta : 60% ; Jaune : 60% ; Noir : 100%
    Un noir soutenu, plutôt chaud.
Tips de graphiste – Couleurs saturées ? Taux d’encrage (surement) trop élevé !
Noter l\'article.
03
Juin

[Infographie] 6 principes pour un design efficace !

Cette infographie réalisée par l’agence Olyos reprend les 6 principes fondamentaux du design : unité/harmonie, équilibre, hiérarchie, échelle/proportion, dominance/accentuation, similarité/contraste. Les éléments clés d’un design réussi en somme.

 L’infographie originale a été réalisée par l’agence indienne Folo.
 infographie représentant les 6 principes du design

N’hésitez pas à vous abonner à la newsletter via le champ en bas à droite pour recevoir les prochains articles.

Aurélien

[Infographie] 6 principes pour un design efficace !
Noter l\'article.
12
Avr

Jpeg, Png, Svg ou Gif, quel format utiliser pour vos images ? [Infographie]

Le choix du format de vos images pour une utilisation sur le web est cruciale. L’utilisation de mauvais formats peuvent ralentir l’affichage des pages d’un site web, rendre vos images floues ce qui est mauvais pour votre référencement sur la toile. Le graphique suivant devrait vous faciliter la tâche :

infographie sur les formats d'images

N’hésitez pas à vous abonner à la newsletter via le champ en bas à droite pour recevoir les prochains articles.

Aurélien

Jpeg, Png, Svg ou Gif, quel format utiliser pour vos images ? [Infographie]
Noter l\'article.
20
Fév

Tips de graphiste – Des outils pour identifier une image retouchée et retrouver l’originale

L’image que vous êtes entrain de regarder a-t-elle été modifiée ? Difficile de le savoir, la retouche d’images étant chose très courante notamment avec l’évolution constante des logiciels comme Photoshop par exemple.

Il existe pourtant des outils très performants permettant de découvrir les différences d’une image. TinyEye, Google Image permettent d’effectuer une recherche inversée pour retrouver la photo originale. Il suffit de coller l’adresse dans la barre de recherche de l’un des 2 services ou de télécharger l’image directement depuis votre ordinateur. Ils retrouveront les photos utilisées pour le montage, la photo originale est généralement celle avec la plus haute résolution.

Le service FotoForensics permet de repérer les différences de compression sur une même image grâce à un processus appelé ELA (Error Level Analysis). Le processus ELA sauvegarde le JPEG à un niveau de qualité précis et le compare à celui de la photo originale comme sur l’exemple ci-dessous :

fotoforensics

Ici on voit que les taux de compression de la statue et une partie de l’ouragan (zones blanchâtres) diffèrent du fond de l’image, celle-ci a donc été modifiée.

Encore faut-il pouvoir analyser les résultats. Le format JPEG est une compression à perte, c’est à dire que chaque ré-enregistrement d’une même image lui fait perdre en qualité. La compression s’effectuant par blocs de 8, s’il y a des différences de compression entre ces groupes de blocs, il y a de fortes chances pour que l’image ait été modifiée.

« Avec une image au format JPEG, l’ensemble de la photo devrait être à peu près à un taux de compression homogène. Si une zone de l’image est à un niveau significativement différent, cela indique une probable modification »explique le site (en anglais).

N’hésitez pas à vous abonner à la newsletter via le champ en bas à droite pour recevoir les prochains articles.

Aurélien

Tips de graphiste – Des outils pour identifier une image retouchée et retrouver l’originale
Noter l\'article.
20
Déc

Origines et utilisations contemporaine des polices de caractères les plus célèbres

Voici un petit historique des polices de caractères les plus célèbres et certainement les plus utilisées :

akzidenz-grotesk-std

Akzidenz-Grotesk : Police sans sérifs (sans empattements), créée en 1896 par Ferdinand Theinhardt (créateur de caractères royal, 1820–1906) pour l’Académie Prussienne Royale à Berlin. Le dessin du caractère a inspiré celui de l’Helvetica.

avenir

Avenir :  Créée en 1988 par Adrian Frutiger.
Fonderie Linotype-Hell AG.
Inspirée par les polices Erbar (une des premières polices sans sérif jamais dessinée) et Futura.

bodoni

Bodoni : Sérif, créée en 1798 par Giambattista Bodoni, surnommé « le roi des imprimeurs et l’imprimeur des rois ». Fonderie Bodoni.
La police Bodoni est utilisée dans les logos des marques Bodoni, Calvin Klein, de Mama Mia!, du groupe Nirvana entre autres. Une très belle vidéo réalisée par France Culture retraçant l’histoire de cette police :


Sacrés caractères – Bodoni par franceculture

century-gothic
Century Gothic : Créée en 1991, Fonderie Monotype.

Inspirée par la police « Twentieth Century » de Sol Hess. En 2010, l’université du Wisconsin à Green Bay a décidé d’utiliser la police Century Gothic dans ses emails afin de diminuer ses coûts d’impression par rapport à la police Arial. (30% d’encre consommée en moins).

clarendon

Clarendon : Créée en 1845 par Robert Besley. Fonderie Fann Street Foundry (Londres).
Elle est utilisée dans les logos de SONY, Starbucks, … Plus d’informations sur Clarendon (article en anglais).

Plus d’infos (article en anglais)

Didot

Didot : Développé entre 1784–1811 par Firmin et Pierre Didot, respectivement typographe et imprimeur.

frutiger

Frutiger : Créée en 1968 par Adrian Frutiger. Initialement créée pour la signalétique de l’aéroport Charles de Gaulle. Utilisée dans les logos de FlickR, et sur la couverture des passeports suisse.

futura

Futura : Créée en 1927 par Paul Renner. Inspirée du mouvement Bauhaus, Futura est l’une des plus anciennes polices sans sérif créée par Renner. Fonderie Bauer.

“ En développant Futura, mon but était de conserver la structure géométrique des capitales dans les petites lettres également. ” Extrait d’un entretien dans Grafik Magazine, Octobre 2005

Pour l’anecdote, Futura est la première police à avoir foulé le sol lunaire, dans le cadre d’une plaque commémorative :

Apollo11Plaque

Apollo 11 « Eagle » (Photo: NASA)

“ C’était la police préférée de Stanley (Kubrick). Sans empattements. Il aimait aussi Helvetica et Univers, des polices élégantes. ”

– Tony Frewin (associé de Kubrick) dans une interview pour le Guardian.

La police est utilisée dans les logos des marques Louis Vuitton, RebBull, ou encore Absolut Vodka.


Sacrés caractères – Futura par franceculture

garamond

Garamond : Créée en 1510, Claude Garamond sur une commande de l’éditeur-imprimeur parisien Robert Estienne pour le roi François Ier. La police est utilisée dans l’Édit de Nantes ou encore Pantagruel de Rabelais et plus récemment dans le logo de la marque Abercrombie&Fitch.
Ci-dessous une vidéo de France Culture sur les origines de la police Garamond.


Sacrés caractères – Garamond par franceculture

gill-sans

Gill Sans : Créée en 1928, Eric Gill. Fonderie Monotype.
Inspiré de la Johnston Sans créée par Edward Johnston pour le métro londonien. Le Gill Sans Ultra Bold forme les trois caractères « T », « F » et « 1 » du logo de la chaîne TF1 depuis sa création en 1989, la police est aussi utilisée dans les logos des marques Tommy Hilfiger ou encore Benetton.

Plus d’infos (article en anglais).

helvetica

Helvetica : 1957, Eduard Hoffmann et Max Miedinger. Fonderie Haas.

Utilisée par des marques telles que American Apparel, Panasonic, Texaco, Samsung, Hoover, Lufthansa, Kawasaki, Evian, … )


Sacrés caractères – Helvetica par franceculture

impact

Impact : Créée en 1965 par Geoffrey Lee, destinée aux affiches, posters et maintenant sur les fameux mèmes… La police a été vendue à Microsoft et utilisée depuis Windows 98 sur tous les systèmes d’exploitations de la société.  Fonderie Stephenson Blake.

optima

Optima : 1950, Hermann Zapf, Walter Cunz. Fonderie Stempel.

times

Times : 1932, Victor Lardent and Stanley Morison.


Sacrés caractères – Times par franceculture

Univers : 1958, Adrian Frutigier. Fonderie Deberny et Peignot.

N’hésitez pas à vous abonner à la newsletter via le champ en bas à droite pour recevoir les prochains articles.

Aurélien

Origines et utilisations contemporaine des polices de caractères les plus célèbres
Noter l\'article.