Il testo nell'immagine di Photoshop sembra "sfocato"

9

Sto creando un'intestazione del sito Web in Photoshop CS5, tuttavia quando lo guardo, il testo appare molto sfocato e non ho idea del perché.

Uso il Web Preset. Cosa mi consigliate per i risultati più nitidi e migliori?

Ecco l'attuale mockup:

Intestazione

adobe-photoshop  website-design  cs5 
— Jeff
fonte
hai provato ad ingrandire un'immagine raster? Questo di solito porta alla sfocatura. Per una nota a margine, per raster o vettore, vedere ad esempio: graphicdesign.stackexchange.com/questions/260/…
— Jari Keinänen,
@koiyu - I livelli di cui sono più preoccupato sono i livelli di testo, e non li ho rasterizzati
— Jeff
(oh, stavo guardando la curva attorno a "xSky") Photoshop applica un po 'di anti-alias al testo per impostazione predefinita e l'impostazione potrebbe non soddisfare le tue attuali esigenze. Ci sono esempi in graphicdesign.stackexchange.com/questions/1177/… (anche se questo non risponde direttamente alla tua domanda)
— Jari Keinänen
Grazie per questo post, esattamente ciò di cui avevo bisogno per aiutarmi con il mio testo sfocato, fantastico aiuto chiaro :)

Risposte:

14

Per impostazione predefinita, Photoshop applica alcuni antialiasing ai livelli di testo. Alex ha fornito un bel confronto in un'altra domanda :

confronto

Le opzioni di antialiasing sono disponibili sulla barra degli strumenti e nella Characterfinestra:

opzioni di antialiasing

NB: se stai pianificando di utilizzare i livelli di testo come testo normale (HTML) nel prodotto finale, molto probabilmente i browser renderanno il testo in modo diverso rispetto a Photoshop. Maggiori informazioni al riguardo sono disponibili sulla stessa domanda "Font (anti) aliasing in Photoshop" menzionata.

— Jari Keinänen
fonte
Quindi immagino sia l'Anti Aliasing che lo sta facendo? In quale altro modo posso ottenere un testo in grassetto? :)
— Jeff,
È possibile utilizzare una versione più audace del carattere (se disponibile), che può essere scelta dal menu a discesa accanto alla famiglia di caratteri. O potresti usare il finto grassetto di Photoshop, che è attivato premendo il pulsante T (accanto al pulsante T ). O potresti aggiungere un effetto di livello, ad esempio un tratto, per rendere il testo più audace.
— Jari Keinänen,
2
Inoltre, potrei aggiungere, questo è uno dei motivi per cui Pictures of Text non è una buona idea. Il testo reale può essere reso nel modo più desiderabile dal cliente.
— mattdm,
4

Assicurati che gli attributi heighte width(o CSS) per il tuo imgtag corrispondano alla dimensione effettiva dell'immagine. Altrimenti, verrà ridimensionato dal browser Web e molti browser Web lo fanno in modo brutto. Anche quelli che lo fanno relativamente bene possono rendere l'immagine sfocata.

Se vuoi assicurarti che appaia bene, mantieni i pixel 1: 1.

— mattdm
fonte
Il fatto è che in Photoshop stesso sembra sfocato. Come faccio a "pixel 1: 1"?
— Jeff,
@Jeff "mantenere i pixel 1: 1" equivale a guardare l'immagine con uno zoom del 100%.
— Jari Keinänen,
@koiyu - Okay, ce l'ho già. :)
— Jeff,
1

Non visualizzerei il testo come immagine poiché ciò porta all'accessibilità e ai problemi dei motori di ricerca.

Tuttavia, se si desidera visualizzare un testo come immagine, le immagini png o gif danno risultati migliori rispetto alle immagini jpg a causa della compressione jpeg. Anche se non comprimi l'immagine, un browser come Opera mobile o un "acceleratore" di Internet potrebbe.

— jeroen
fonte
Usa sempre PNG, lontano da JPEG molto tempo fa: P
— Jeff
1

Vorrei rendere il testo come un file PNG trasparente per una migliore risoluzione. Un'altra alternativa è utilizzare sIFR sia per lo stile che per il SEO. sIFR fondamentalmente incorpora il carattere come Flash, ma è compatibile con i motori di ricerca al 100%. Vedi alcuni esempi ad esempio 3d-photomontage.com .

— Tony Tan
fonte
1

Devo sottolineare che dire che non è assolutamente necessario utilizzare il testo dell'immagine nel proprio progetto. Evitare di utilizzare caratteri non Web per la copia del corpo. -So che hanno un bell'aspetto sul design ma hai più problemi in HTML di quanto valga la pena -

Seleziona "Nessuno" tra le opzioni di antialiasing in PS se non desideri sfocare il testo. La versione HTML visualizzerà sempre il testo in modo diverso a seconda del sistema operativo o del browser, quindi non c'è molto che puoi fare.

Dai un'occhiata anche a questo, dovrebbe aiutarti di più a risolvere i problemi di rendering del testo nel tuo HTML piuttosto che in PS

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

Progetto sempre con l'opzione anti-alias 'Crisp' selezionata e consapevole del fatto che il testo in HTML avrà comunque un aspetto diverso!

— Sahbas Has
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.