Font (anti) aliasing in Photoshop

Sto usando Photoshop per la progettazione di siti Web e ogni volta che confronto un design di Photoshop con l'anteprima del browser live, i caratteri sembrano essere visualizzati in modo diverso.

Fondamentalmente qualsiasi metodo anti-aliasing che scelgo in Photoshop, il testo dà sempre l'impressione di un testo in grassetto . Quindi sono sempre costretto a disattivare l'antialias (per il normale testo 12px / 14px).

Esiste un metodo per ottenere lo stesso tipo di rendering dei caratteri in Photoshop come quello utilizzato da Windows con cleartype?

In caso contrario, ci sono dei caratteri là fuori che sembrano migliori di Arial quando l'antialiasing è disattivato?

Ci sono due motivi per cui il testo ClearType è così nitido.

1. utilizza il rendering subpixel . Non credo che Photoshop lo supporti.
2. utilizza un suggerimento aggressivo per adattare le linee alla griglia dei pixel

Puoi digitare il tuo testo in Blocco note, catturarlo con uno strumento utile e incollarlo in Photoshop con il metodo di fusione Moltiplica (perché è testo nero su sfondo bianco). Ma non è conveniente. Modifica: potrebbe anche essere quasi impossibile avere a che fare con qualsiasi colore di primo piano diverso dal nero.

Questo ragazzo ha descritto un metodo per eseguire il rendering subpixel manuale e, ai miei occhi, migliora la nitidezza del carattere, rendendolo più vicino a ClearType. Ma utilizza ancora i suggerimenti di Photoshop, quindi non è così nitido come ClearType.

Hai davvero bisogno del rendering in stile ClearType in Photoshop? Se esporti elementi grafici contenenti testo da utilizzare nel tuo web design, non dovrebbero contenere rendering subpixel perché non è appropriato per alcuni schermi (CRT, telefono ruotato). E se non esporti il ​​testo ma lo guardi, il rendering di Photoshop sembra OK.

Photoshop non è un programma di web design. Per ottenere un testo che sembra lo stesso in un browser come in un elemento grafico (jpg, gif ecc.) Devi usare lo stesso carattere in entrambi i programmi. Alcuni caratteri non sono utilizzati da tutti i browser.

A seconda della dimensione del testo, un buon carattere di medie dimensioni potrebbe essere Tahoma, Helvetica, Trebuchet o Georgia. Dai un'occhiata a questo sito per alcune buone idee: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

I caratteri più grandi sono i punti in cui inizia a importare l'antialiasing.

Se stai cercando di far fondere il testo con il testo in una pagina, ti suggerisco di utilizzare il posizionamento CSS per raggiungere i tuoi obiettivi. Il CSS ti consente di inserire del testo dalla tua pagina web in cima alle immagini e usa il posizionamento relativo e assoluto per rendere la pagina esattamente come desideri. Ecco un esempio e tutorial: http://css-tricks.com/text-blocks-over-image/

Sfortunatamente Photoshop non supporta alcun tipo di rendering subpixel. Né qualsiasi altro software Adobe, ad eccezione di Dreamweaver . (Beh, non è esattamente la tecnologia di Dreamweaver, in quanto esegue semplicemente il rendering dell'HTML e quindi passa il testo per il rendering del sistema operativo.)

Il flusso di lavoro suggerito potrebbe essere quello di creare e suddividere il disegno in Photoshop e quindi aprirlo in Dreamweaver. Se il progetto necessita di ulteriori correzioni, è possibile aprire contemporaneamente il file in Photoshop, apportare le modifiche, salvare e aggiornare la vista in Dreamweaver. Aggiungi l'ultima copia reale in Dreamweaver. Puoi anche sostituire Photoshop con Fireworks; o persino avviare il wireframing in Fireworks → continua in Photoshop → pubblicare tramite Dreamweaver. (Risulta chiaro perché le edizioni Creative Suite vengono generalmente acquistate in bundle, non è vero?)

Se il design sembra diverso nell'anteprima di Dreamweaver rispetto ai browser, questa è un'altra, sfortunata, questione (e non sto parlando solo della tipografia ma del rendering nel suo insieme). Prima puoi elevare da Photoshop alla demo live, che sia tramite Dreamweaver o meno, tanto meglio. Ho fare desiderio Photoshop avrebbe poteri di rendering subpixel (ma allo stesso tempo la speranza non sarà introdotto nel CS6, o almeno spero di essere ricchi per allora)!

Solo una nota a margine: ClearType è protetto con circa 10 brevetti, quindi non è probabile lo stesso rendering. Inoltre, vale la pena notare che OS X utilizza un rendering diverso (Quartz) per impostazione predefinita, così come le interfacce grafiche nelle distribuzioni di Linux.

Design in HTML e CSS. Se DEVI ripristinarlo in un mock-up di PhotoShop, schermalo dal browser, quindi riportalo nel documento di PhotoShop.

L'impostazione del tipo in PhotoShop è una seccatura, in generale.

Una possibile soluzione potrebbe essere quella di utilizzare il metodo di "aliasing" "nitido" e impostare un bagliore interno a 0 profondità sul livello testo:

Per questo esempio ho usato il colore bianco, 85% di opacità, modalità di fusione "schermo", 0 strozzatura, 0 dimensioni. Non buono come Ms tipo chiaro, ma sembra meno audace ...

(prima riga = nessun antialiasing, ultima riga = forte antialiasing senza il bagliore interno)