Come posso ottenere un logo super nitido sul Web?

13

Lavoro molto con Illustrator, ma non sono mai stato molto contento di come appare il mio lavoro sul nostro sito web. Ho provato varie tecniche - salvataggio da Illustrator, apertura in Photoshop e salvataggio - ma mi manca ancora qualcosa.

Ed. Il logo è stato sempre e solo fornito come AI. Ottengo lo stesso risultato un po 'sfocato se sto salvando per Web e dispositivi da Illustrator, o prendendo il vettore in Photoshop. Tendo a ridimensionare Illustrator in base alle dimensioni richieste, quindi salvare per il Web (tipo ottimizzato, con testo nel logo).

website-design vector export

— Possikiem
fonte

Stai provando a salvarlo in formato png / gif? Il bordo nebuloso dell'immagine ti dà fastidio?

— hello_world,

1

Il tuo sito è costruito su un CMS come Wordpress, perché Wordpress (e probabilmente altri) riduce automaticamente la qualità dell'immagine per ridurre le dimensioni del file.

— deecemobile,

Stai ridimensionando l'immagine nel browser, su o giù? Se è così, non farlo :) Dato che ci sono tre persone che hanno domande, forse potresti modificarle per collegarle all'esportazione o qualcosa di simile? Questo ci aiuterebbe a rispondere.

— Brendan,

Se una delle risposte seguenti ha risposto alla tua domanda, accettala.

— DᴀʀᴛʜVᴀᴅᴇʀ

11

Quando si rasterizza la grafica vettoriale, le linee appaiono nitide se cadono nei confini dei pixel. Questo può essere fatto dal rasterizzatore (arrotondamento), ma la maggior parte dei programmi di grafica vettoriale che conosco non lo supportano. Una strategia per contrastare sarà quella di utilizzare una griglia le cui celle si estendono e numero intero di pixel (una cella 1x1 o 2x2 o 3x3, ... pixel).

Per le icone, una griglia 16x16 è un buon inizio, poiché consente di produrre icone nitide di 16x16, 32x32, 48x84 ecc. Dalla stessa grafica vettoriale.

Per un logo, una griglia di pixel con 1 cella = 1 pixel nella rappresentazione più piccola del logo è un buon inizio.

Ecco un tutorial che spiega questa tecnica: Icona lampadina vettoriale in Inkscape

— Peter Walser
fonte

5

Ci sono molte cose che puoi fare.

Usa il formato immagine con compressione senza perdita, come PNG
Assicurati che il tuo percorso vettoriale sia allineato il più possibile alla griglia di pixel
Migliora il contrasto tra immagine e sfondo (per colore, luminosità o entrambi)
Applica il filtro nitidezza nel tuo software di modifica delle immagini
Usa una combinazione di effetti, bordo più scuro + bagliore più chiaro (su uno sfondo chiaro) OPPURE bordo più chiaro + bagliore più scuro (su uno sfondo scuro), in questo modo:

inserisci qui la descrizione dell'immagine

Un'altra tecnica è ridimensionare il logo vettoriale al 200%, unirlo allo sfondo, appiattirlo in bitmap, quindi ridimensionare il bitmap al 100%. A volte fa la differenza.

Come software di grafica web consiglio vivamente Adobe Fireworks, poiché è più adatto per un design perfetto per i pixel, oltre ad altri motivi.

— Alph.Dev
fonte

Grazie. Penso che l'allineamento con la griglia dei pixel sia dove sto sbagliando. Ho sentito cose positive su Fireworks, ma non l'ho mai usato. Saluti.

— Possikiem,

Prova l' Modify > Snap to pixelopzione. Puoi anche consentire ai fuochi d'artificio di allineare i singoli pixel per te nell'angolo in alto a sinistra o al centro di un pixel. PathPannello interno , sotto l' Edit pointsetichetta. In bocca al lupo.

— Alph.Dev,

5

Non hai dato molte informazioni su ciò che è il tuo processo e questo non è stato menzionato, ma ho pensato di buttarti via questa opzione. Se stai progettando frequentemente in Illustrator e stai cercando un modo per visualizzare la tua grafica, c'è un'alternativa che può essere fatta in Illustrator conosciuta come SVG.

inserisci qui la descrizione dell'immagine

SVG sta diventando frequente con gli sfondi del sito e con capacità di ridimensionamento senza perdita di dettagli. Ho visto di più usarlo con le icone. Ho incluso alcune risorse su cui potresti forse leggere riguardo all'uso di SVG qui:

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

1

Puoi ridimensionare il tuo file vettoriale in Illustrator. Salvalo come PDF, con preimpostazione: compressione - immagini bitmap a colori - downsample bicubico in: qualunque dimensione ti piaccia - compressione: 'JPEG' - qualità dell'immagine: 'massimo'. Salvalo e posiziona il file PDF in Photoshop in un file PPI 300 pre-dimensionato (esempio 125 x 125 pixel). Salva come PNG. Questo puoi inserirlo in un sito. È abbastanza acuto.

— user49293
fonte