La guida del designer a Pixel Hinting
Le icone e la tipografia pixel-perfette spiccano tra la folla online. Ovviamente tutti vogliamo sforzarci per un lavoro così raffinato, ma a volte anche dopo aver provato ci ritroviamo ancora con qualcosa un po '... meno. Pixel Hinting è una delle abilità che prende una funzionalità automatica e migliora i suoi risultati. Nonostante l'altissima risoluzione degli schermi oggi, come i display Retina di Apple, dobbiamo ancora "falsificare" le curve morbide per non finire con un pasticcio di pixel.
Molti progettisti e sviluppatori si stanno muovendo più verso gli approcci SVG e basati su vettori ora; con il supporto solo migliorando di giorno in giorno. Ma anche così, le soluzioni basate su vettori hanno una lunga strada da percorrere prima di essere abbastanza mature da poter essere utilizzate nella produzione. SVG è ottimo per la visualizzazione di forme vettoriali, ma non così caldo per ridimensionare quelle forme. Così come ogni altra cosa là fuori, c'è un tempo e un posto per ogni soluzione.
Quali sono i vettori?
I vettori sono essenzialmente risultati resi dalla rappresentazione matematica di una forma. Quando vedi qualcosa sullo schermo, è perché il tuo computer ha reso quegli oggetti e li ha associati ai pixel sul display. In tal modo, il computer ha anche preso decisioni su cosa dovrebbe e non dovrebbe essere visualizzato come pixel interi. Ad esempio, la lettera maiuscola "D" ha sia una linea perfettamente dritta che una curva.
Come puoi vedere, senza anti-aliasing la linea curva sulla "D" è abbastanza pixelata. Quindi, per compensare, quando le forme vettoriali sono renderizzate di solito sono anti-alias per fornire un aspetto più ... robusto. Invece di visualizzare solo i pixel che ricadono interamente nel contorno del vettore, i pixel vengono gradualmente sfumati. Questo inganna il tuo cervello nel vedere una linea più fluida su forme curve che non si agganciano perfettamente alla griglia di pixel.
Qui sopra puoi vedere come viene fornita la "D" renderizzata che è chiamata mezzo-pixel per aiutare a rimuovere la pixelazione frastagliata. Tuttavia, questa stessa funzionalità introduce anche un problema: i computer sono terribili nel capire cosa sia visivamente accattivante. Quindi, mentre l'aggiunta di questi mezzi pixel rende gli angoli arrotondati un aspetto fantastico, rende anche la linea interna superiore / inferiore sfocata. L'anti-aliasing automatico che si verifica quando una forma vettoriale viene sottoposta a rendering fa sì che gran parte delle forme e della tipografia risultino grandi, ma lascia gli altri a una qualità ancora peggiore di quella con cui è iniziata.
Ciao, suggerimento pixel.
Ora che hai un breve background sulle forme vettoriali e su come funzionano, passiamo al vero lavoro. L'accenno di pixel implica lo spostamento dei punti di ancoraggio del vettore in modo che si appoggino sui bordi dei pixel in un modo più esteticamente piacevole. Rendendo le linee rette più perfette, lasciando comunque il mezzo-pixel alle curve. Più comunemente, l'uso del pixel viene usato su tipografia e forme per immagini raster (loghi, icone, marchi, ecc.). Ora, soprattutto, al fine di regolare correttamente il vettore deve essere nella dimensione e forma che lo vuoi. Una volta che hai indicato il tuo lavoro con il pixel, ruotandolo o ridimensionandolo si potrebbe - e probabilmente lo farebbe - buttare tutto quel lavoro automaticamente facendo anti-aliasing di nuovo. Prima di iniziare assicurati che le seguenti impostazioni siano regolate (userò Photoshop per questa attività):
- Attiva la griglia dei pixel (Visualizza> Mostra> Griglia, assicurati anche che Extra sia selezionato sopra il menu Mostra)
- Assicurati che la tua griglia abbia una griglia ogni 10 pixel, con 10 suddivisioni. O qualcosa di simile in modo che ci sia una linea tra ogni pixel.
- Disabilita lo snap (Visualizza> deseleziona lo snap). Non vogliamo che i punti di ancoraggio si spezzino con incrementi di 1px, vogliamo spostare i punti all'interno dei pixel.
Tipografia di suggerimento dei pixel
Il processo per fare forme vs tipografia è leggermente diverso, quindi ti guiderò attraverso entrambi. Idealmente con la tipografia, vuoi kern il tuo tipo prima o durante il tuo processo di suggerimento. Indipendentemente da ciò, l'accenno ai pixel dovrebbe essere una delle ultime cose che fai.
Innanzitutto, seleziona la tipografia che desideri suggerire come pixel e crea una copia del livello, quindi trasforma quel livello in una forma.
Puoi vedere che il testo cade goffamente dalla griglia, sia sull'asse orizzontale che su quello verticale. Per risolvere questo problema, sposteremo delicatamente i punti di ancoraggio di ogni lettera fino a quando non si allineano più strettamente con la griglia di pixel tracciata. L'obiettivo è quello di ottenere le linee di forma vicine, se non direttamente, alle linee della griglia. Aumentare lo zoom per spingere i punti di ancoraggio in modo più preciso. Mentre lo fai, esegui spesso lo zoom indietro per assicurarti che le tue regolazioni sembrino a posto.
Non vuoi conformarti con precisione alla griglia, poiché in primo luogo toglie i vantaggi dell'anti-aliasing. Invece, cerca semplicemente di mantenere le cose coerenti: ammetti solo metà pixel su un lato di ciascun asse. Ad esempio, permetto sempre metà pixel a destra e in alto alle lettere, mentre costringo i bordi sinistro e inferiore a filo della griglia.
Come puoi vedere, il "get in" è stato approssimativamente regolato, mentre il "touch" rimane così com'è. Proprio come il kerning, il pixel hinting è molto più di un mestiere che di una scienza. Ci vuole un occhio attento per guardare e discernere se il lavoro sembra migliore o peggiore dopo la regolazione. Non scoraggiarti se trovi pixel tipografici che suggeriscono rozze, iterate e continua a lavorare con esso. Se il risultato sembra ancora paragonabile, puoi sempre eliminare il livello e copiare nuovamente l'originale dall'originale. Ci vuole un po 'di tempo per ottenere la tipografia in particolare per avere un bell'aspetto, basta andare avanti e prima o poi il tuo duro lavoro ti ripagherà.
Pixel che suggeriscono forme vettoriali
In generale, le forme di suggerimento dei pixel sono riservate per icone o loghi. Ancora una volta, vuoi assicurarti che la tua forma sia delle dimensioni e della rotazione che desideri prima di iniziare, in quanto la successiva regolazione potrebbe gettare via tutto il tuo duro lavoro. La regolazione delle forme è molto più semplice e richiede meno occhio per i dettagli intrinseci. Detto questo, le forme più complesse richiedono più tempo e sono più difficili da regolare, quindi è meglio iniziare con qualcosa di semplice.
In alto, puoi vedere che la nostra freccia e il cerchio siedono appena leggermente fuori da dove vorremmo. I semi-pixel creati dall'anti-aliasing provocano l'aspetto sfocato dell'intera forma. Quindi spingiamo tutto per cadere sulla griglia un po 'meglio.
Eccoci! Regolando i punti di ancoraggio per allinearli alla griglia, otteniamo un'icona molto più nitida. È importante ricordare che, poiché questa icona è un cerchio, anche le regolazioni della larghezza devono essere specchiate all'altezza. Inoltre, non dimenticare di accertarti che l' interno della forma sia bello e uniforme. Se guardi l'immagine precedente noterai che i lati interni del cerchio non hanno la stessa anti-alias.
In conclusione
Con il lavoro sopra, il risultato è un'immagine che sembra più nitida e più professionale. Naturalmente, puoi applicare queste tecniche a cose molto più importanti di un pulsante.
Mentre l'anti-aliasing automatico eseguito dal tuo computer sembra accettabile, potrebbe essere migliore. Quindi, quando si tratta del tuo logo o di icone / tipografia importanti in forma di raster, l'accenno ai pixel è più di un'abilità di nicchia; fino a quando tutti usiamo schermi ad alta densità di pixel, è essenziale.