Wskazówki dotyczące projektowania drukowania dla projektantów stron internetowych
Karierę rozpocząłem drukiem prawie dziesięć lat temu i stopniowo przeniosłem się do Internetu. To zupełnie nowe medium przyniosło kilka kreatywnych i technicznych przeszkód, z którymi musiałem się nauczyć radzenia sobie, a nawet pokonywania.
Dzisiejszy artykuł jest przeznaczony dla nowej generacji projektantów wykonujących odwrotny skok. Projektujesz dla świata cyfrowego od jakiegoś czasu i jesteś gotowy do nauki projektowania druku. Pomożemy ułatwić przejście z kilkoma prostymi i praktycznymi poradami.
Poznaj elementy Envato
Drukuj nie jest martwe
W oryginalnym filmie Pogromcy duchów z 1984 roku zapytany, czy lubi czytać, Egon śmiało ogłasza, że „druk jest martwy”. To stwierdzenie nie było wtedy do końca prawdą, ale było niezwykle dokładnym zapowiedzią wydarzeń w ciągu następnych dwudziestu lat, a mianowicie rozwoju Internetu i komputerów osobistych z zapomnienia do wszechobecności.
Oczywiście, rewolucja ta przynajmniej pociągnęła za sobą kij baseballowy do branży wydawniczej, a co za tym idzie dostępność miejsc pracy w branży projektowej. Jednak zdecydowanie nie jest tak, że wszystkie formy druku są martwe. W rzeczywistości projektowanie grafiki może być jedną z najbardziej wartościowych i logicznych umiejętności, które można dodać do swojego repertuaru jako projektant stron internetowych.
Jeśli masz klientów, którzy są właścicielami małych firm, potrzebują oni nie tylko stron internetowych i logo, ale także wizytówek, artykułów piśmiennych, oznakowania sklepów, odzieży, a może nawet reklam lokalnych gazet. Większość z nich wolałaby pominąć problem związany z pracą z wieloma projektantami i znaleźć jednego dostawcę wszystkich tych materiałów. Jeśli potrafisz obsługiwać zarówno Internet, jak i druk, to możesz być Ty!
Rozkład
Zacznijmy od podstawowej wiedzy, którą prawdopodobnie już znasz. W świecie internetowym masz luksus pracy z obrazami o dość niskiej rozdzielczości. Teraz możesz uznać to za coś złego, ponieważ poziom szczegółowości jest tak ograniczony, ale po intensywnej pracy z obydwoma stronami internetowymi w niskiej rozdzielczości znacznie łatwiej jest sobie poradzić.
Jednym z głównych powodów tego jest to, że możesz stworzyć grafikę 72dpi na prawie każdym komputerze, który został stworzony w ciągu ostatnich czterech lub pięciu lat. Mniejsze obrazy nie wymagają tak dużej mocy obliczeniowej, jak większe obrazy. Jeśli jesteś przyzwyczajony do drukowania i przełączania się na projektowanie stron internetowych, Photoshop poczuje się jak zupełnie nowa aplikacja działająca na super komputerze z przyszłości. Może ci się wydawać, że to przesada, ale poczekaj, aż będziesz mieć 50 warstw w dokumencie 11 x 17 cali w rozdzielczości 300 dpi. Do końca dnia będziesz ślinić się na Mac Pro w Apple.com.
Cale, a nie piksele
Czym zatem różnią się rzeczy drukowane niż internetowe? Na początek projektanci druku nie mówią w pikselach. Powiedz większości projektantów tylko do druku, że chcesz coś o szerokości 1200px, a będą patrzeć na ciebie śmiesznie (wiedzą, jakie są piksele, ale to nie jest typowy żargon). Jest tak, ponieważ pomiary w ich wersjach programu Photoshop zostały ustawione na cale.
To ważne rozróżnienie, ponieważ rozdzielczość i rozmiar są od siebie zależne! 1200 pikseli szerokości w dokumencie o rozdzielczości 72 dpi różni się bardzo od 1200 pikseli szerokości w dokumencie o rozdzielczości 300 dpi. Zadanie drukowania o wymiarach 5 x 7 cali zawsze spowoduje wydrukowanie czegoś o szerokości od pięciu cali do siedmiu cali, zmieni się tylko gęstość atramentu.
Nie zawsze 300dpi
Prawdopodobnie powiedziano ci, że projektanci druku budują grafikę w obszarze roboczym 300 dpi. Nie zawsze tak jest i to założenie może sprawić, że będziesz wyglądać jak amator, jeśli przyjdzie czas na druk.
Większość zadań w małym formacie jest drukowana w rozdzielczości 300 dpi. Te przedmioty są tymi, które mogą być dokładnie sprawdzone i przechowywane przez kogoś. A co z billboardem? Czy konieczne jest wydrukowanie tak dużej rozdzielczości dla czegoś, co widzisz z odległości kilkuset metrów? Okazuje się, że odpowiedź brzmi „nie”. Zadania wielkoformatowe, takie jak banery, billboardy i tym podobne, prawie zawsze budowane są poniżej 300dpi, zwykle przy 150dpi, ale czasami nawet niższe w zależności od rozmiaru.
Często pytanie o rozdzielczość można postawić prawdziwemu ekspertowi w tej sprawie: drukarce (osobie, a nie maszynie). Nie będziesz wyglądać jak idiota po prostu pytając, czy powinna to być praca w rozdzielczości 300 czy 150 dpi, są to często zadawane pytania podczas rozpoczynania projektu i są niezbędne, aby je wypracować przed rozpoczęciem.
Czy powinienem budować koncepcje w niskiej rozdzielczości?
Biorąc pod uwagę fakt, że komputery mogą wydobywać grafiki 72dpi znacznie szybciej niż grafiki 300dpi, projektanci często praktykują pierwsze rundy projektowania w przestrzeni roboczej o niskiej rozdzielczości i zasadniczo odbudowują zadanie w „wysokiej rozdzielczości” w pobliżu koniec projektu.
Wśród projektantów drukowanych może to być gorący temat. Ostatecznie sprowadza się to do preferencji, ale, o ile jest to warte, prawie nigdy nie wybieram tej drogi. Chyba że ciągle pracujesz z zadaniami wielkoformatowymi, kompilowanie w wysokiej rozdzielczości nie powinno zająć tak długo. Jeśli tak, to prawdopodobnie naprawdę nadszedł czas na nowy komputer. Budowanie wszystkiego w rozdzielczości 72dpi tylko w celu konwersji do 300dpi poprzez rozpoczęcie od nowa zawsze wydaje mi się kłopotliwe, gdy zbudowanie moich pomysłów jest gotowe do wydruku.
Jedynym wyjątkiem są zdjęcia stockowe. Podczas prezentacji klientowi zawsze używam dość niskiej rozdzielczości dostarczanej przez witryny giełdowe, aby uniknąć niepotrzebnego zakupu wielu drogich obrazów.
Kolor
Kolor jest ogromnym tematem i zasługuje na własny artykuł, więc nie spędzimy tutaj zbyt wiele czasu. Moje proste ostrzeżenie jest takie, że kolor w świecie druku to zupełnie nowa gra w piłkę. W projektowaniu stron internetowych martwiliśmy się o „bezpieczne kolory sieciowe”, ale w dzisiejszych czasach monitory są tak niesamowite, że generalnie wybieramy tylko dowolne kolory w Photoshopie i akceptujemy, że będzie pewien poziom zróżnicowania między ekranami.
Projektując do druku, używasz atramentu, a nie światła. Na początek oznacza to pracę w CMYK zamiast RGB, ale implikacje wykraczają daleko poza to. W grę wchodzą takie materiały, jak różne prasy i metody drukowania. Czasami kolor, który widzisz na ekranie, wcale nie będzie taki, jak na papierze. Innym razem określone procesy, takie jak sitodruk, wymagają pewnych przyjętych praktyk.
Moja najlepsza rada tutaj to dowiedzieć się, jaka będzie metoda drukowania i jak najlepiej ją zbadać. Standardowa czterokolorowa praca drukowania będzie najłatwiejsza w obsłudze, ale czasami będziesz musiał pracować tylko z jednym lub dwoma kolorami, aby zaoszczędzić pieniądze klienta. W takich przypadkach musisz wykazać się kreatywnością i nauczyć się tworzyć świetne projekty przy użyciu znacznie bardziej ograniczonej palety niż przyzwyczajona do pracy.
Często będziesz musiał pracować z kolorami dodatkowymi, co oznacza, że dedykowany atrament jest mieszany z bardzo konkretnym kolorem, a nie z czymś, co łączy się na żywo przez zastosowanie różnych kolorów na papierze. Aby dowiedzieć się więcej na temat pracy z kolorami dodatkowymi, zapoznaj się z naszym ostatnim artykułem „Wprowadzenie do pracy z kolorami dodatkowymi”.
Nie tylko Photoshop
Projektanci stron internetowych zwykle żyją wyłącznie w Photoshopie. Mogą rozgałęziać się do Dreamweaver lub nawet Fireworks, ale dalsze eksplorowanie pakietu Adobe Creative Suite jest często niepotrzebne.
Jednak w wersji drukowanej układ strony zazwyczaj wykonuje się w aplikacjach takich jak InDesign i Illustrator. Kilka przepraszających dusz wciąż używa Quarka, ale nie mogę sobie wyobrazić, dlaczego. Dobrą wiadomością jest to, że bycie szczególnie silnym w Photoshopie sprawia, że jesteś znacznie lepiej przygotowany do korzystania z InDesign. Zła wiadomość jest taka, że wciąż jest to zupełnie inna aplikacja, więc jest mnóstwo do nauczenia się.
Jednym z najważniejszych pojęć, które należy zrozumieć, jest to, dlaczego używasz wielu aplikacji i jak włączyć je do swojego przepływu pracy w synergiczny sposób. Prosta odpowiedź tutaj jest taka, że Photoshop jest przeznaczony do grafiki rastrowej, wszystko inne (grafika wektorowa i tekst) powinno być obsługiwane w aplikacji układu strony.
Załóżmy na przykład, że tworzysz okładkę magazynu. Zaczniesz od PSD, które zawiera zdjęcie na okładkę. Tutaj możesz wykonać typowe korekty kolorów, czynności klonowania, stylizację i wszystko, czego potrzebujesz, aby zdjęcie było gotowe do wydrukowania. Po zakończeniu możesz umieścić ten plik PSD w programie InDesign i nałożyć grafikę wektorową (często tworzoną w programie Illustrator) i tekst, które składają się na resztę okładki.
Układ strony do wydruku może być zwizualizowany. W tej metaforze InDesign jest blatem, na którym układasz puzzle. Tworzysz wiele elementów w innych aplikacjach, a następnie łączysz je ze sobą i tasujesz w programie InDesign. Umieszczając rzeczywiste prace w toku w programie InDesign za pomocą polecenia Plik> Umieść, wszelkie zmiany wprowadzone do umieszczonego PSD, EPS itp. W innej aplikacji automatycznie spowodują aktualizację pliku InDesign.
Czy program Photoshop nie pisze tekstu?
W tym momencie możesz zastanawiać się, dlaczego tekst nie jest obsługiwany w Photoshopie. Aby być sprawiedliwym, wysoce stylizowany tekst (z fazami, maskami, cieniami, teksturami itp.) Jest często przechowywany w części PSD pliku. Jednak zwykły tekst jest znacznie łatwiejszy do pracy w programie InDesign. Mechanizm tekstowy jest znacznie lepszy i nie tylko lepiej renderuje tekst, ale pozwala na znacznie bardziej zaawansowane manipulacje, takie jak automatyczne rozmieszczanie kolumn, a nawet sprawdzanie pisowni.
Innym ważnym problemem jest to, że generalnie nie wysyłasz jednego pliku do drukarki (pliki PDF gotowe do wydruku są wyjątkiem), zamiast tego gromadzisz wszystkie elementy układanki w folderze. Obejmuje to różne umieszczone pliki PSD i EPS, plik InDesign, a nawet czcionki. Praca w programie InDesign zapewnia luksus automatycznego polecenia „Zbieraj do wydruku”, które automatycznie zbiera wszystkie zasoby związane z bieżącym plikiem.
Krwawienie i przycinanie
Jednym z największych błędów debiutantów, które możesz popełnić w druku, jest to, że nie możesz zaprojektować go z spadem. Dostawcy druku wymagają od projektantów określonych specyfikacji, nie dlatego, że są wybredni lub niekompetentni, ale dlatego, że naprawdę działa proces i bez nich cała praca drukowania jest zagrożona.
Projektowanie ze spadem jest łatwe i pozwala na idealne drukowanie bez obramowania za każdym razem. Wkładając spad, pozwalasz na wydruk, który jest większy niż rozmiar ostatecznego zadania. W ten sposób, gdy nadmiar zostanie odcięty, wszystko wygląda idealnie i idzie prosto do krawędzi, niezależnie od drobnych przesunięć papieru, które mogły wystąpić podczas drukowania.
W projektowaniu stron internetowych znasz model pudełkowy CSS, a w drukowaniu mamy coś, co wygląda podobnie, co w zasadzie określa, jak prawie każde zadanie drukowania powinno zostać zbudowane. Oto krótkie spojrzenie na to, jak to działa:
Ten model składa się z trzech głównych obszarów: krwawienia, przycinania i obszaru pod napięciem. Tapicerka jest najłatwiejsza do zrozumienia. Jest to końcowy pożądany rozmiar drukowanego dokumentu; gdzie papier jest „przycięty” do. W powyższym przykładzie nasz klient zamówił projekt o szerokości pięciu cali i wysokości trzech cali. Odtąd musimy utworzyć dwa kolejne obszary: jeden większy niż wykończenie i jeden mniejszy.
Większy obszar to krwawienie. Jak właśnie wyjaśniliśmy, pozwala to atramentowi zejść z krawędzi strony. Powyższe zadanie ma tło gradientowe, ale to tło jest rozciągnięte poza granice 5 x 3 x do obszaru 5, 75 x x 3, 75. Po dodaniu 0, 25 ″ do ogólnego rozmiaru, wynikiem jest upust 1/8 cala na całej stronie, co jest standardem w Stanach Zjednoczonych (zwykle 2-5 mm w Wielkiej Brytanii). Wszystko, co umieścisz w dokumencie, które powinno „wykrwawić się” ze strony, czy to zdjęcie, czy teksturowane wypełnienie, powinno rozciągać się na ten większy obszar, pamiętając, że zostanie przycięty do miejsca wokół linii przycięcia.
Mniejszy obszar, który utworzyłem w powyższym przykładzie, to „obszar na żywo”, który jest bardzo ważnym elementem, o którym może nie wiedzieć jako projektant stron internetowych. Ogólnie rzecz biorąc, złą praktyką jest umieszczanie niekrwawionego tekstu i grafiki zbyt blisko krawędzi strony. Chcesz dać im dużo przestrzeni do oddychania i mieć pewność, że nie zostaną przycięte. Dlatego obszar na żywo jest tworzony jako rodzaj bezpiecznej strefy, w której można umieścić tego typu treści. Na przykład, jeśli chcesz mieć ogromny nagłówek, rozciągnij go z jednego końca obszaru na żywo na drugi, ale nie dalej.
Rozmiary powierzchni na żywo nie są znormalizowane i różnią się znacznie w zależności od pracy. Zasadniczo wstawiam dookoła mój obszar na żywo 1/8 ″, tak aby pasował do krwawienia. Jednak różne magazyny i gazety mają swoje własne wymagania, których należy przestrzegać. Ponadto w przypadku dużych zadań wstawka 1/8 isn't nie jest wystarczająco blisko i spowoduje, że grafika będzie wyglądać tak, jakby sięgała do krawędzi bez żadnego oddechu. W takim przypadku musisz spojrzeć mu w oczy i zdecydować o akceptowalnym zderzaku przestrzeni.
Na szczęście zarówno Illustrator, jak i InDesign mogą poradzić sobie z większością pracy związanej z tworzeniem dokumentów za pomocą tego rodzaju wbudowanych specyfikacji, ale nadal ważne jest zrozumienie pojęć. Pamiętaj też, aby skonsultować się z dostawcą druku, ponieważ prawdopodobnie mają one gotowe szablony, które oszczędzają wiele problemów wszystkim zaangażowanym stronom.
Trendy w projektowaniu
Na zakończenie naszej dyskusji omówimy pokrótce, jak podejść do projektu z kreatywnego punktu widzenia. Po pierwsze, szybko dowiesz się, że druk jest zupełnie innym medium niż przyzwyczajony do Internetu. W projektowaniu stron internetowych ogranicza Cię tylko wyobraźnia. W przypadku drukowania masz fizyczny rozmiar strony, który musi być zgodny; przewijanie nie jest możliwe! Oznacza to, że kiedy klient daje ci mnóstwo tekstu, musisz dowiedzieć się, jak dopasować go w czytelny i atrakcyjny sposób.
Pamiętaj również, że Twój styl i tendencje projektowe mogą, ale nie muszą, nadawać się do drukowania. Podobnie jak w przypadku projektowania stron internetowych, ważne jest, aby się rozejrzeć i wziąć pod uwagę aktualne trendy w druku. Udaj się do księgarni i przejrzyj czasopisma (nie pomijaj reklam, to najlepsza część) lub przejrzyj te śmieci, zanim trafią do kosza.
Uświadomienie sobie trendów nie musi sprawić, że staniesz się konformistą, ale pomoże ci pozostać w kontakcie z tym, co ludzie są przyzwyczajeni. Jeśli ostatni raz zwracałeś uwagę na projektowanie druku w 1995 roku, możesz mieć skłonność do produkowania czegoś, co wygląda brzydko i przestarzałe dla dzisiejszych konsumentów.
Podobnie, jeśli wszystko, co wiesz, to stan nowoczesnego projektowania stron internetowych, możesz mieć problemy z tłumaczeniem tych pomysłów na drukowaną stronę w sposób znaczący i wciągający dla widza. Animacje jQuery nie są tutaj dobre, musisz przyciągnąć uwagę kogoś poprzez czysto statyczny wygląd.
To wymaga czasu i praktyki, ale projektanci goo rozkwitną zarówno w druku, jak i projektowaniu stron internetowych.
Wniosek
Szczerze mówiąc, jeśli jesteś projektantem stron internetowych, który chce wydrukować, masz dobrą pozycję. Pod wieloma względami powracasz do prostszego sposobu myślenia. Odwrotna podróż wymaga wielu nowych umiejętności technicznych, zwłaszcza jeśli na obrazie pojawia się kod.
Ten artykuł miał jednak pokazać, że nie można po prostu otworzyć programu Photoshop i zdecydować, że pewnego dnia zostaniesz projektantem grafiki. Twoja wiedza jako projektanta stron internetowych pomaga, ale wciąż jest wiele uczenia się w branży, które należy wykonać. Wszystko, od stworzenia szablonu po finalizację projektu, jest bardzo specyficznym procesem w druku, a jeśli nie znasz swoich rzeczy, możesz zostać pociągnięty do odpowiedzialności finansowej za jakiekolwiek błędy. Poświęcenie trochę czasu na zapoznanie się z przedstawionymi informacjami może zaoszczędzić wiele kłopotów i bólów głowy.
Zostaw komentarz poniżej i daj nam znać, jakie wskazówki dotyczące drukowania masz dla projektantów stron internetowych dokonujących przejścia!
Zdjęcie: Corey Holms, Alain Bachellier, Nate Hofer, Katy Beck i Steve Garfield.
