Tekst na moim zdjęciu w Photoshopie wygląda „rozmazany”

9

Tworzę nagłówek strony w Photoshop CS5, ale kiedy na niego patrzę, tekst wygląda na bardzo rozmazany i nie mam pojęcia, dlaczego.

Używam ustawienia internetowego. Co polecasz, aby uzyskać najostrzejsze i najlepsze wyniki?

Oto aktualny makieta:

nagłówek

adobe-photoshop website-design cs5 Jeff
źródło
próbowałeś powiększyć obraz rastrowy? To zwykle prowadzi do rozmycia. Na marginesie, raster vs. wektor, patrz np .: graphicdesign.stackexchange.com/questions/260/…
Jari Keinänen
@koiyu - Warstwy, o które najbardziej się martwię, to warstwy tekstowe i nie rasteryzowałem ich
Jeff
(och, patrzyłem na krzywą wokół „xSky”) Photoshop domyślnie stosuje pewne wygładzanie tekstu i ustawienie może nie odpowiadać twoim bieżącym potrzebom. Są przykłady w graphicdesign.stackexchange.com/questions/1177/… (chociaż to nie odpowiada bezpośrednio na twoje pytanie)
Jari Keinänen
Dzięki za ten post, dokładnie to, czego potrzebowałem, aby pomóc mi z moim rozmytym tekstem, niesamowicie jasna pomoc :)

Odpowiedzi:

14

Domyślnie Photoshop stosuje antyaliasing do warstw tekstowych. Alex podał ładne porównanie w innym pytaniu :

porównanie

Opcje wygładzania są dostępne na pasku narzędzi iw Characteroknie:

opcje wygładzania

Uwaga: jeśli planujesz używać warstw tekstowych jako zwykłego tekstu (HTML) w produkcie końcowym, przeglądarki najprawdopodobniej renderują tekst inaczej niż Photoshop. Więcej informacji na ten temat można znaleźć w tym samym pytaniu „Czcionkowanie (anty) aliasing w Photoshopie” .

Jari Keinänen
źródło
Więc chyba to robi Anti Aliasing? Jak inaczej mogę uzyskać pogrubiony tekst? :)
Jeff
Możesz użyć odważniejszej wersji czcionki (jeśli jest dostępna), którą można wybrać z menu rozwijanego obok rodziny czcionek. LUB możesz użyć fałszywego pogrubienia programu Photoshop, które można włączyć, naciskając przycisk T (obok przycisku T ). LUB możesz dodać efekt warstwy, np. Obrys, aby tekst był odważniejszy.
Jari Keinänen,
2
Dodam też, że jest to jeden z powodów, dla których Zdjęcia tekstu nie są dobrym pomysłem. Prawdziwy tekst może być renderowany w najbardziej pożądany sposób przez klienta.
mattdm,
4

Upewnij się, że atrybuty heighti width(lub CSS) imgtagu odpowiadają rzeczywistemu rozmiarowi obrazu. W przeciwnym razie zostanie przeskalowane przez przeglądarkę internetową, a wiele przeglądarek robi to w brzydki sposób. Nawet te, które robią to stosunkowo dobrze, mogą spowodować, że obraz będzie nieco rozmazany.

Jeśli chcesz się upewnić, że wszystko wygląda poprawnie, zachowaj piksele 1: 1.

mattdm
źródło
Chodzi o to, że w samym Photoshopie wygląda niewyraźnie. Jak zrobić „piksele 1: 1”?
Jeff
@Jeff „zachowanie pikseli 1: 1” jest równoznaczne z patrzeniem na obraz przy powiększeniu 100%.
Jari Keinänen
@koiyu - Okej, już to mam. :)
Jeff
1

Nie wyświetlałbym tekstu jako obrazu, ponieważ prowadzi to do problemów z dostępnością i wyszukiwarkami.

Jeśli jednak chcesz wyświetlać tekst jako obraz, obrazy png lub gif dają lepsze wyniki niż obrazy jpg ze względu na kompresję jpeg. Nawet jeśli nie kompresujesz swojego obrazu, przeglądarka taka jak Opera Mobile lub internetowy „akcelerator” może.

jeroen
źródło
Zawsze używaj PNG, dawno temu odszedł od JPEG: P
Jeff
1

Zrobiłbym tekst jako przezroczysty plik PNG dla lepszej rozdzielczości. Inną alternatywą jest użycie sIFR zarówno do stylu, jak i SEO. sIFR zasadniczo osadza czcionkę jako Flash, ale jest w 100% przyjazny dla wyszukiwarek. Zobacz kilka przykładów na np . 3d-photomontage.com .

Tony Tan
źródło
1

Powinienem zaznaczyć, że absolutnie nie ma potrzeby używania tekstu graficznego w swoim projekcie. Unikaj używania czcionek innych niż internetowe do kopiowania treści. -Wiem, że wyglądają świetnie w projekcie, ale masz więcej problemów w HTML niż to, co jest warte -

Po prostu wybierz „Brak” z opcji antyaliasingu w PS, jeśli nie chcesz rozmycia tekstu. Wersja HTML zawsze będzie renderować tekst w różny sposób w zależności od systemu operacyjnego lub przeglądarki, więc tak naprawdę niewiele można zrobić.

Spójrz również na to, powinno to pomóc w rozwiązaniu problemów z renderowaniem tekstu w kodzie HTML, a nie PS

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

Zawsze projektuję z wybraną opcją antyaliasingu „Crisp” i jestem świadomy faktu, że tekst w HTML i tak będzie wyglądał inaczej!

Sahbas Has
źródło