Comment faire pour que mes logos vectoriels soient super nets sur le Web?

13

Je travaille beaucoup avec Illustrator, mais je n'ai jamais été très satisfait de l'apparence de mon travail sur notre site Web. J'ai essayé différentes techniques - enregistrer à partir d'Illustrator, ouvrir dans Photoshop et enregistrer - mais il me manque encore quelque chose.

Ed. Le logo n'a été fourni que sous forme d'IA. J'obtiens le même résultat légèrement flou que j'économise pour le Web et les appareils d'Illustrator ou que je transfère le vecteur dans Photoshop. J'ai tendance à mettre à l'échelle dans Illustrator à la taille requise, puis à enregistrer pour le Web (type optimisé - il y a du texte dans le logo).

website-design vector export

— Possikiem
source

Essayez-vous de l'enregistrer au format png / gif? Le bord flou de l'image vous dérange-t-il?

— hello_world

1

Votre site est-il construit sur un CMS comme Wordpress, parce que Wordpress (et probablement d'autres) croque automatiquement la qualité de l'image pour réduire la taille du fichier.

— deecemobile

Redimensionnez-vous l'image dans le navigateur, vers le haut ou vers le bas? Si c'est le cas, ne faites pas ça :) Puisqu'il y a trois personnes qui ont des questions, vous pourriez peut-être modifier votre question pour la relier à votre exportation ou quelque chose de similaire? Cela nous aiderait à répondre.

— Brendan

Si l'une des réponses ci-dessous répond à votre question, veuillez l'accepter.

— DᴀʀᴛʜVᴀᴅᴇʀ

11

Lors de la pixellisation des graphiques vectoriels, les lignes sont nettes si elles tombent dans les limites des pixels. Cela peut être fait par le rasterizer (arrondi), mais la plupart des programmes graphiques vectoriels que je connais ne le supportent pas. Une stratégie pour contrer cela sera d'utiliser une grille dont les cellules s'étendent et le nombre entier de pixels (une cellule 1x1 ou 2x2 ou 3x3, ... pixel).

Pour les icônes, une grille 16x16 est un bon début, car elle permet de produire des icônes nettes de 16x16, 32x32, 48x84 etc. à partir du même graphique vectoriel.

Pour un logo, une grille de pixels avec 1 cellule = 1 pixel dans la plus petite représentation du logo est un bon début.

Voici un didacticiel qui explique cette technique: Icône d'ampoule vecteur dans Inkscape

— Peter Walser
source

5

Il y a beaucoup de choses que vous pouvez faire.

Utiliser un format d'image avec compression sans perte, comme PNG
Assurez-vous que votre chemin vectoriel est aligné autant que possible sur la grille de pixels
Améliorez le contraste entre l'image et l'arrière-plan (soit par la couleur, par la luminosité ou les deux)
Appliquer un filtre plus net dans votre logiciel de retouche d'image
Utilisez une combinaison d'effets, une bordure plus foncée + une lueur plus claire (sur un fond clair) OU une bordure plus claire + une lueur plus foncée (sur un fond sombre), comme ceci:

entrez la description de l'image ici

Une autre technique consiste à redimensionner votre logo vectoriel à 200%, à le fusionner avec votre arrière-plan, à l'aplatir en bitmap, puis à redimensionner le bitmap à 100%. Parfois, cela fait la différence.

En tant que logiciel graphique Web, je recommande fortement Adobe Fireworks, car il convient mieux à une conception parfaite au pixel près, entre autres raisons.

— Alph.Dev
source

Merci. Je pense que l'alignement sur la grille de pixels est l'endroit où je me trompe. J'ai entendu de bonnes choses à propos de Fireworks, mais je ne l'ai jamais utilisé. À votre santé.

— Possikiem

Essayez l' Modify > Snap to pixeloption. Vous pouvez également laisser les feux d'artifice aligner des pixels individuels pour vous dans le coin supérieur gauche ou au centre d'un pixel. PathPanneau intérieur , sous Edit pointsétiquette. Bonne chance.

— Alph.Dev

5

Vous n'avez pas donné beaucoup d'informations sur votre processus et cela n'a pas été mentionné, mais j'ai pensé que je vous proposerais cette option. Si vous concevez fréquemment dans Illustrator et cherchez un moyen d'afficher vos graphiques, il existe une alternative qui peut être effectuée dans Illustrator sous le nom de SVG.

entrez la description de l'image ici

SVG est de plus en plus fréquent avec les arrière-plans du site et avec des capacités de redimensionnement sans perte de détail.Je l'ai vu plus utiliser avec des icônes. J'ai inclus quelques ressources que vous pourriez lire sur l'utilisation de SVG ici:

— DᴀʀᴛʜVᴀᴅᴇʀ
source

1

Vous pouvez redimensionner votre fichier vectoriel dans Illustrator. Enregistrez-le au format PDF, avec préréglage: compression - images bitmap couleur - sous-échantillon bicubique à: quelle que soit la taille que vous aimez - compression: 'JPEG' - qualité d'image: 'maximum'. Enregistrez-le et placez le fichier PDF dans Photoshop dans un fichier 300 PPI prédimensionné (par exemple 125 x 125 pixels). Enregistrez au format PNG. Vous pouvez le placer dans un site. C'est assez net.

— user49293
source