Myślę, że bardziej odpowiedni tytuł mógłby brzmieć: "czy Photoshop jest wciąż odpowiednim narzędziem do projektowania typografii w Internecie?". Ale to nie ma dramatycznego odwołania do powyższego.
Podobnie jak wielu z was, zawsze używałem Photoshopa do tworzenia makiet kompozycji moich projektów. Odkąd pamiętam, był to standard branżowy i oprogramowanie wybierane przez większość projektantów, z którymi współpracowałem. Spędziłem tygodnie projektując perfekcyjne układy pikseli, grupując elementy w hierarchiczne foldery i etykietując wszystkie moje warstwy, aby przejście od pięknej makiety do kodu było tak płynne, jak to tylko możliwe.
Byłbym pełen entuzjazmu, energii i emocji, wyjaśniając moje projekty programistom, włączając i wyłączając stany warstw, aby spróbować zilustrować moją wizję za pomocą Photoshopa, ale zawsze byłbym nieco rozczarowany, ponieważ mój błyszczący, polerowany wzór został przekształcony w to, co zobaczyłbym w przeglądarce. Jasne, wyglądałoby jak mój projekt ... I rozpoznałem kroje pisma, ale brakowało mi ostrości, którą zapamiętałem z moich kompozycji. To nie było tak, że twórcy nie zakodowali tego dobrze, bardziej, że typografia, którą stworzyłem w Photoshopie, nie została przetłumaczona na kod.
Przy wyborze czcionki jest kilka rzeczy ważniejszych niż to, czy czcionka jest łatwo czytelna, czy nie. W Photoshopie nie stanowi to większego problemu, ponieważ wszystko wygląda świetnie. Nie ma znaczenia, jakiej czcionki używasz, w jakim rozmiarze lub wadze (w granicach rozsądku), ponieważ będzie ona idealnie wyglądać na ekranie.
Niestety nie dotyczy to przeglądarki. Często przeglądając mój projekt w przeglądarce, związki między elementami i typem były błędne. Rozmiary czcionek i wysokości linii, które przypisałem stylom w mojej kompozycji w Photoshopie, nie wyglądałyby tak, jak w przeglądarce. Gdybym wyznaczył 20-pikselowy margines powyżej tytułu w moich projektach, odległość ta mogła ulec zmianie, ponieważ wysokość linii nagłówka miałaby wpływ na wielkość marginesu, co nie byłoby możliwe w Photoshopie. Musiałbym wtedy rozpocząć długi i żmudny proces przerażających "zmian w projekcie".
Zaufaj mi, że to nie tylko programista nie odpowiada na pomysł, by projektant siedział obok, prosząc ich o "zwiększenie wysokości linii kopii ciała o dwa piksele", a następnie poproszenie programisty o zmianę CSS i zatwierdzenie .... Wchodzić. "Właściwie 1 piksel mniejszy" ... Enter. "Może było lepiej, jak to było". Ten rodzaj podkręcania CSS krok po kroku, aby zobaczyć wyniki w czasie rzeczywistym za pośrednictwem przeglądarki, jest czasochłonny i nie sprzyja kreatywności. Deweloperzy szybko mają dość spędzania dnia, ciągle zmieniając to, co uważają za najmniejsze szczegóły, co nie ma znaczenia, a projektanci nie są w stanie eksperymentować szybko i łatwo zmieniając kroje pisma i style dla tych, które poprawią się w przeglądarce.
Dla projektantów, którzy znają CSS, możesz użyć narzędzi takich jak Firebug aby skutecznie tworzyć własne poprawki w przeglądarce, notując wszystkie zmiany CSS w jednym dokumencie, które następnie możesz przekazać programistom do wdrożenia. Jest to faktycznie to samo, co praca z programistą i wprowadzanie zmian CSS, ale znacznie mniej żmudne dla programisty, a także umożliwia projektantowi dalsze eksperymentowanie z rozmiarami i stylami przed podjęciem decyzji. Mimo że jest to dobre narzędzie do sprawdzania i zmieniania części kodu HTML i CSS, utracisz wszystkie wprowadzone zmiany natychmiast po odświeżeniu przeglądarki, co może być bardzo denerwujące, jeśli zmienisz wiele elementów i nie zanotujesz wszystkich korekty.
Możesz użyć Wtyczka Firediff zapisać zapis wszystkich zmian wprowadzonych w Firebug, który jest świetny, ponieważ pozwala zapisać każdą zmianę w osobnym arkuszu kalkulacyjnym na później. Największym problemem związanym z tą metodą jest wprowadzenie czcionek internetowych do równania, ponieważ każda wybrana czcionka musi być zainstalowana w zestawie typu lub nie będzie wyświetlana w przeglądarce. To sprawia, że eksperymentowanie z różnymi czcionkami jest o wiele trudniejsze i mniej wolne, ponieważ nie można po prostu szybko testować czcionek.
Usługi takie jak Dawać podobne role aktor znacznie ułatwiają projektantom pracę z czcionkami sieciowymi, a ja w zasadzie używam całej mojej typografii w Internecie. Umożliwia tworzenie typograficznych makiet (podobnie jak w programie Photoshop) za pomocą interfejsu graficznego, aby przypisać czcionki, style, ciężary, kolory, wysokość linii, margines, dopełnienie i inne elementy Twojej typografii. Najlepszą rzeczą przy korzystaniu z Typecast jest to, że wszystko działa w przeglądarce, więc podejmujesz decyzje na temat rodzaju dokładnie tak, jak będzie on renderowany dla użytkownika. Czy pewna czcionka nie wygląda zbyt gorąco na 19 pikseli? Możesz go uderzyć do 20 kliknięciem przycisku, z powrotem do 19, zanim ostatecznie osiągnie 18 pikseli, a wszystko to w ciągu kilku sekund, a nie godzin z programistą.
Możesz korzystać z dowolnych czcionek internetowych z ich kolekcji 23 000 czcionek, w tym czcionek Google, Typekit i innych w swoich kompozycjach, dzięki czemu eksperymentowanie jest szybkie i łatwe (zostały one ostatnio zakupione przez Monotype, który posiada czcionki Fonts.com i Myfonts, więc oczekują o wiele więcej czcionek w drodze wkrótce). Typecast w mojej opinii wprowadza pojęcie żartu z powrotem do typografii, ponieważ zachęca do wypróbowania odmian czcionek, które być może nigdy nie odkryłbyś, gdyby nie były tak łatwo dostępne i łatwe do zastąpienia, jak są.
Kolejną bardzo przydatną funkcją typecast jest możliwość przeglądania i edycji CSS swojego typu. Możesz dodać kolory tła i obrazy, stany na hover, a nawet przejścia, po prostu edytując panel CSS. Gdy jesteś zadowolony ze swojego stworzenia, możesz łatwo wyeksportować i zapisać kod CSS, który następnie możesz przesłać do swojej witryny lub wysłać do programisty, a ponieważ wszystko zostało zaprojektowane w przeglądarce, pojawi się dokładnie tak, jak chcesz.
Photoshop nie jest standardem branżowym za nic, a niektórzy z was hiperwentylują na samą myśl o upuszczeniu go do projektu w przeglądarce, w końcu jesteśmy twórcami, a nie programistami. Odłóż papierową torbę, ponieważ wciąż istnieje sposób na stworzenie pięknej czcionki przy użyciu czcionek internetowych w Photoshopie. Extensis stworzyłem wtyczkę, którą można zainstalować w Photoshopie w wersjach CS5 i nowszych, dzięki czemu uzyskasz dostęp do wszystkich czcionek WebINK i Google Web Czcionek, które będą dostępne za darmo, bezpośrednio w Photoshopie.
Oznacza to, że możesz używać dowolnej czcionki WebINK lub Google w swoich kompozycjach do projektowania tak samo, jak wszystkich czcionek zainstalowanych w systemie i będą one mniej więcej takie same, jak powinny wyglądać w przeglądarce. Wtyczka umożliwi dostęp do czcionek internetowych WebINK i Google, ale na plusie automatycznie zaktualizuje nowe czcionki, gdy zostaną dodane do WebINK i biblioteki czcionek Google.
Kolejną cenną wtyczką, która ułatwia przejście między kompozycjami Photoshopa i CSS zgodnymi z przeglądarką, jest darmowa, oparta na chmurze wtyczka css3ps.com . Jednym z głównych powodów, dla których wielu projektantów pracuje z programem Photoshop, jest kontrola nad warstwami i elementami kształtu. Możliwość łatwego i szybkiego eksperymentowania z cieniem, blaskiem, kolorem, fakturą, zaokrąglonymi narożnikami i wieloma innymi rzeczami jest prawie drugą naturą dla większości i coś, co nawet doświadczeni projektanci mają problemy z odtworzeniem dokładnie w przeglądarce. Dla tych osób ta wtyczka jest idealna, ponieważ pozwala tworzyć twoje kompozycje w sposób, który znasz najlepiej, ale potem możesz łatwo przekonwertować style swojego kształtu na CSS3 kompatybilny z przeglądarką. Ta metoda jest idealna do projektowania przycisków, nawigacji lub czegokolwiek, do czego można zaprojektować kształt.
Być może nadal istnieje rola Photoshopa jako narzędzia do projektowania układów stron internetowych, ale jeśli chodzi o projektowanie typografii dla sieci, wyprzedzają ją aplikacje takie jak Firebug i Typecast. Czas potrzebny na aktualizację kompozycji statycznych nie może się równać szybkości i łatwości wprowadzania zmian w przeglądarce. Dla tych z was, którzy nie mogą nawet bawić się pomysłem projektowania w przeglądarce, powyższe wtyczki powinny przynajmniej dać Photoshopowi impuls, który musi pozostać odpowiedni i ułatwić przejście.
Czy korzystasz z programu Photoshop do projektowania witryn internetowych? Czy Photoshop toruje drogę Flashowi? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, używa martwy obraz przez Shutterstock.