Używam Photoshopa do projektowania stron internetowych i za każdym razem, gdy porównuję projekt Photoshopa z podglądem przeglądarki na żywo, czcionki wydają się być renderowane inaczej.
Zasadniczo każdą metodę antyaliasingu, którą wybrałem w Photoshopie, tekst zawsze sprawia wrażenie pogrubionego tekstu . Więc zawsze jestem zmuszony wyłączyć antyaliasing (dla normalnego tekstu 12px / 14px).
Czy jest jakaś metoda renderowania czcionek w Photoshopie, która jest podobna do tej, którą używa system Windows z czystym typem?
Jeśli nie, to czy są dostępne czcionki, które wyglądają lepiej niż Arial, gdy wygładzanie jest wyłączone?
Odpowiedzi:
Są dwa powody, dla których tekst ClearType jest tak wyraźny.
Możesz wpisać tekst w Notatniku, zrzut ekranu za pomocą wygodnego narzędzia i wkleić go do Photoshopa w trybie mieszania Mnożenie (ponieważ jest to czarny tekst na białym tle). Ale to nie jest wygodne. Edycja: może być prawie niemożliwe wykonanie dowolnego koloru pierwszego planu innego niż czarny.
Ten facet opisał metodę ręcznego renderowania subpikseli, a moim zdaniem poprawia ostrość czcionki, zbliżając ją do ClearType. Ale nadal korzysta z podpowiedzi Photoshopa, więc nie jest tak ostry jak ClearType.
Czy naprawdę potrzebujesz renderowania w stylu ClearType w Photoshopie? Jeśli eksportujesz grafikę zawierającą tekst do wykorzystania w twoim projekcie internetowym, nie powinny one zawierać renderowania subpikseli, ponieważ nie jest to odpowiednie dla niektórych wyświetlaczy (CRT, obrócony telefon). A jeśli nie eksportujesz tekstu, a tylko na niego patrzysz, renderowanie w Photoshopie wydaje się OK.
źródło
Photoshop nie jest programem do projektowania stron internetowych. Aby uzyskać tekst wyglądający tak samo w przeglądarce, jak na grafice (jpg, gif itp.), Musisz użyć tej samej czcionki w obu programach. Niektóre czcionki nie są używane przez wszystkie przeglądarki.
W zależności od rozmiaru tekstu dobrą czcionką średniej wielkości może być Tahoma, Helvetica, Trebuchet lub Georgia. Sprawdź tę stronę, aby znaleźć kilka dobrych pomysłów: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/
Większe czcionki zaczynają mieć znaczenie w przypadku wygładzania.
Jeśli próbujesz połączyć tekst z tekstem na stronie, sugeruję użycie pozycjonowania CSS, aby osiągnąć swoje cele. CSS pozwala na umieszczanie tekstu ze strony internetowej ponad obrazami i wykorzystuje pozycjonowanie względne i bezwzględne, aby renderować stronę dokładnie tak, jak chcesz. Oto przykład i samouczek: http://css-tricks.com/text-blocks-over-image/
źródło
Niestety Photoshop nie obsługuje żadnego renderowania subpikseli. Żadne inne oprogramowanie Adobe - z wyjątkiem Dreamweaver . (Cóż, nie jest to dokładnie technologia Dreamweaver, ponieważ po prostu renderuje HTML, a następnie przekazuje tekst do renderowania przez system operacyjny.)
Sugerowany przepływ pracy może być taki, że utworzysz i pokroisz projekt w Photoshopie, a następnie otworzysz go w Dreamweaver. Jeśli projekt wymaga dalszych poprawek, możesz jednocześnie otworzyć plik w Photoshopie, wprowadzić zmiany, zapisać i odświeżyć widok w Dreamweaver. Dodaj ostatnią, prawdziwą kopię do Dreamweaver. Możesz także zastąpić Photoshopa Fireworks; lub nawet rozpocznij szkieletowanie w Fireworks → kontynuuj w Photoshopie → publikuj przez Dreamweaver. (Oczywiste jest, dlaczego wersje pakietu Creative Suite są zwykle kupowane w pakietach, prawda?)
Jeśli projekt wygląda inaczej w podglądzie Dreamweavera niż w przeglądarce (przeglądarkach), jest to inna, niefortunna sprawa (i nie mówię tylko o typografii, ale o renderowaniu jako całości). Im szybciej przejdziesz z programu Photoshop do wersji demonstracyjnej na żywo - czy to w programie Dreamweaver, czy nie - tym lepiej. Chciałbym , żeby Photoshop miał moc renderowania subpikseli (ale jednocześnie mam nadzieję, że nie zostanie wprowadzony w CS6, a przynajmniej mam nadzieję, że do tego czasu będę bogaty)!
Na marginesie: ClearType jest chroniony około 10 patentami, więc dokładnie takie samo renderowanie nie jest prawdopodobne. Warto również zauważyć, że OS X domyślnie używa innego renderowania (Quartz), podobnie jak interfejsy graficzne w dystrybucjach linuksowych.
źródło
Projektowanie w HTML i CSS. Jeśli MUSISZ przenieść go z powrotem do makiety PhotoShop, zrzut ekranu z przeglądarki, a następnie przenieś z powrotem do dokumentu PhotoShop.
Ustawienie typu w PhotoShop jest ogólnie uciążliwe.
źródło
Możliwym obejściem może być użycie „ostrej” metody wygładzania i ustawienie wewnętrznego połysku na głębokości 0 na warstwie tekstowej:
Do tej próbki użyłem koloru białego, krycia 85%, trybu mieszania „ekranu”, 0 dławika, 0 rozmiaru. Nie tak dobry jak Ms typu clear, ale wygląda mniej bolly ...
(pierwsza linia = brak wygładzania, ostatnia linia = ostre wygładzanie bez wewnętrznego blasku)
źródło