Co ma wspólnego grafik i HTML?

Na początek, żeby nie było niedomówień sprecyzujmy o kogo chodzi. Nie jakiś tam grafik ale konkretnie web designer. Wiadomo, że grafik DTP nie specjalnie potrzebuje znać HTML ale jak się ma sprawa z grafikami, którzy projektują strony internetowe?

Ile osób tworzy stronę?

Kiedyś strony były mało skomplikowane dlatego nie mieliśmy całej ekipy do jednej strony. UI designer, front-end developer, back-end developer, grafik i wiele innych… Nikt o nich nie słyszał bo Jedna osoba zastępowała wszystkie te posady i było to wystarczające.

Dziś popularniejsze jest przekonanie, że należy się specjalizować. Nie bez przyczyny zresztą. Technologia rozwinęła się i stała tak obszerna, że nie sposób być we wszystkim najlepszym. Owszem, można wiele rzeczy ogarniać na całkiem zadowalającym poziomie. Jeśli poświęca się na tu dużo czasu to można być dobrym w potencjalnie wielu dziedzinach ale wątpię, żeby ktoś tak ciągnął na dłuższą metę. Zwyczajnie staje się to męczące a w pewnym czasie łapie irytacja, że jest jeszcze tyle rzeczy z każdej dziedziny do wyuczenia.

Specjalizowanie się w konkretnej dziedzinie jest więc jak najbardziej poprawne i dla pracownika i dla efektu końcowego pracy.

Ale co z tym HTMLem?

Skoro doszliśmy do wniosku, że należy się specjalizować i grafiką zajmuje się jedna osoba, a jej kodowaniem już inna to czy web designer nie musi znać żadnych języków? Akurat uważam, że działkę web designera i front-end developera można by często połączyć ale to chyba bardziej wyjątek niż reguła, pomijając, że grafikę trzeba lubić, programowanie zresztą też ale raczej nie aż w takim stopniu… ale wracając do tematu… Pytanie popularnie w internecie brzmi „czy web designer powinien znać HTML?” Wg mnie odpowiedź jest jedna: TAK!

Web designerze, ucz się HTML!

Ktoś może zapytać „ale po co? przecież i tak nic nie koduję?”. To nie ma znaczenia. Nie mam na myśli znajomości HTML w stopniu perfekcyjnym. Wystarczą podstawy.

Zakodować można praktycznie wszystko. Jeśli koder się nagimnastykuje to praktycznie nie ma szablonu, którego nie dałoby się zakodować. Tylko po co się męczyć? Znając chociaż podstawy HTMLa wiesz już jakie elementy wymagają dużo pracy a jakie mniej. Wiedząc jak koduje się projekt możesz zaoszczędzić masę pracy koderowi ale nie tylko. Dzięki temu wiesz jak projekt będzie się wyświetlał na różnych ekranach, wiesz jakie ewentualne mogą wystąpić ograniczenia i problemy w przyszłości. Możesz także sam stworzyć sobie szablon na allegro;)

Jeśli ktoś myśli, że nagle dojdzie mu całkowicie inna, nowa dziedzina świata IT do wyuczenia się, to.. zachowaj spokój. Podstawy HTLMa można poznać w jeden dzień.  Jeśli nigdy nie miałeś z nim styczności to tydzień nauki będzie wystarczający. Naprawdę warto;)

Photoshop – Wypaczenie marionetkowe [wideo]

Chciałbym Ci dzisiaj przedstawić mega, ale to mega przydatne narzędzie o nazwie 'wypaczenie marionetkowe’. Pojawiło się bodajże w Phosthopie CS5, ja nagrywałem je w CS6.
Jeżeli zajmujesz się tylko web designem lub grafiką do druku, to może nie będzie to jakieś super przydatne narzędzie. Jednak jeśli robisz jakiekolwiek fotomanipulacje to wręcz musisz je znać… no dobra, nikt nic nie musi, ale jest to bardzo przydatna funkcja.

Photsohop daje nam tyle opcji, że każdy efekt można wykonać na kilkanaście sposobów i efekt końcowy będzie ten sam.. właściwie to prawie każdy. Wypaczenie marionetkowe jest narzędziem, które nie ma żadnej alternatywy, na upartego można bawić się w transformacje, wypaczenie, przekształcenia ale zajmie to 10 razy więcej czasu a efekt będzie słabszy – więc nie o to chodzi.
Nie ma drugiego narzędzia, które by działało jak wypaczanie marionetkowe, a przynajmniej ja takiego nie znam.

Poniżej możesz zobaczyć wideo, na którym wyjaśniam jak działa wypaczanie marionetkowe. Film robiłem już jakiś czas temu dlatego nie ma na nim głosu, jednak myślę, że jest dosyć dobrze opisany:)

Wypaczenie marionetkowe – Photoshop [wideo]

Trochę o typografii na stronach www

Ostatnio coraz częściej można usłyszeć jak ważna jest rola typografi w sieci. Powstaje coraz więcej artykułów, książek i kursów na temat jej poprawnego stosowania. Przecież jeszcze kilka lat temu projektanci stron mieli do wyboru zaledwie kilka fontów i jedynym zadaniem słów było przekazanie jakiejś treści. Dzisiaj typografia na stronach ma już nie tylko przekazać informacji ale jednocześnie pełni role dekoracyjną. Można znaleźć strony, które poza tekstem nie mają prawie żadnej grafiki a mimo to wcale nie odstają od reszty. Przykład poniżej:

https://serioverify.com/

Dlatego typografia jest czymś nowym w kontekście projektowania stron internetowych. Wielu początkujących web designerów pomija tą kwestię lub uważa ją za mało istotną ale na szczęście takie przekonanie jest coraz rzadziej spotykane. Świadomość projektantów w tej kwestii jest coraz większa i pozostaje tylko się cieszyć:)

Skąd czerpać wiedzę?

Skoro typografia jest czymś nowym to skąd brać wiedzę na jej temat? Jak mówi klasyk ’nic bardziej mylnego!’ Wcale nie jest nowa. Za początek typografii możemy uznać datę wynalezienia druku przez Gutenberga czyli na przełomie 1455/1456r. chociaż tak naprawdę pierwsze składane teksty powstawały już w X wieku w Chinach. Pominę Rzymian czy hieroglify w egipskich piramidach.

Mimo, że rozdział w typografii w internecie dopiero się rozpoczyna to nic nie stoi na przeszkodzie aby szkolić się z dzieł na temat ogólnej typografi – zasady jej stosowania są uniwersalne i wykorzystuje się te same triki zarówno przy składanie tekstu do książki jak i na stronę internetową. Jedna z lepszych i bardziej obszernych książek na temat typografii została wydana już 1992 roku (pierwsze wydanie), czyli w czasach gdy internet dopiero wchodził do Polski. Mowa o R. Bringburst – Elementarz stylu w typografii, która Ci zresztą bardzo polecam.

Style, które znamy do dzisiaj

Na przestrzeni ostatnich 6 wieków powstało kilka stylów, które rozpoczęły pewien schemat. Style, które zostały stworzone kilkaset wieków temu dzisiaj możemy oglądać na okładkach i stronach największych stron.

RENESANS (XV-XVI w.) – nachylona oś pióra, zmienna grubość linii oraz otwarta litera 'e’, szeryfowa

BAROK (XVII w.) –  nachylona oś piórka, zmienna grubość linii oraz oś nachylenia, szeryfowa

NEOKLASYCYZM (XVIII w.) – pionowa oś, zmienna grubość linii, szeryfowa

ROMANTYZM (XVIII i XIX w.) – pionowa oś, mocno zróżnicowana grubość linii, cienkie szeryfy

REALIZM (XIX, XX w.) – jednolita grubość linii, brak szeryfów

MODERNIZM GEOMETRYCZNY (XX w.) – jednolita grubość linii, brak szeryfów, często okrągłe brzuszki

MODERNIZM LIRYCZNY (XX w.) – zmienna grubość linii, nachylona oś, szeryfowa

POSTMODERNIZM (XX, XXI w.) – zmienna grubość linii i oś nachylenia, ostre szeryfy

Typografia daje nam obecnie wielkie możliwości. Dzięki CSS3 możemy umieszczać na stronach niezliczone rodzaje fontów, które udekorują naszą stronę jednak należy pamiętać o najważniejszym zadaniu treści. Jak pisał Robert Bringburst: „Celem typografii jest uhonorowanie treści„.

Style zaczerpnięte z „The Elements of Typographic Style – R. Bringburst”

Kompresja plików w formacie .tiff

Format .TIFF jest jednym z podstawowym formatów używanych podczas przygotowywania plików do druku. Zaraz obok .PDF. Dlaczego akurat on? Ponieważ można go kompresować bez straty jakości.

Używając Photoshopa na pewno zauważyłeś, że podczas zapisu masz do wyboru kilka opcji:
– bez kompresji
– LZW
– ZIP
– JPEG

Gdy przeglądam oferty różnych drukarni to chyba dosłownie na wszystkich jest notka, aby format TIFF zapisywać z kompresją LZW. Czy na pewno? Po co w takim razie istnieją inne rodzaje kompresji? Omówimy je sobie.

Kompresja JPEG

Jest to niestety kompresja stratna. Tak wiem, przecież przed chwilą wspomniałem, że TIFF możemy kompresować bez straty jakości…  jest to prawda, ale nie we wszystkich rodzajach kompresji. Akurat ta korzysta z metody kompresji plików, które dobrze znamy czyli „.jpg” (ba! to pliki .jpg wzięły swoją nazwę od sposobu kompresji).

W dużym uproszczeniu polega ona na zmianie nasycenia i odcieni (ponieważ jasność jest dla oka ważniejsza), następnie obraz jest dzielony na bloki, tworzone są macierze współczynników transformaty itd…. Opis techniczny raczej niewiele mówi większości osób. Efekt końcowy jest taki, że plik może dużo mniej ważyć, ale jest kompresowany nieodwracalnie czyli jakość zawsze będzie gorsza niż przed kompresją.

Warto pamiętać, że kompresja JPEG zawsze będzie stratna. Nawet jeżeli ustawisz jakość na 100% i tak zostanie delikatnie skompresowana – dlatego ten rodzaj nie jest polecany do druku gdzie jakość ma być jak żyleta. Co innego jeśli grafika wyświetlana będzie tylko na komputerach. Dobrze sprawdza się przy obrazach kolorowych z płynnymi przejściami, np. fotografie.

Kompresja ZIP

Jest to kompresja bezstratna. To plus, ale jest też minus – mało programów obsługuje TIFF z kompresją ZIP, dlatego jest rzadko używany. Dobrze radzi sobie z plikami 16-bitowymi.

Sprawdza się dobrze przy obrazach zawierających duże obszary jednolitego koloru (16-bitowymi).

Kompresja LZW

Pora na chyba najbardziej popularną kompresję tifa czyli LZW. Wykorzystuje ona fakt, że na obrazie istnieją piksele o powtarzających się kolorach i tworzy na tej podstawie słownik takich powtarzających się znaków. Całe połączenie zastępowane jest skrótem.

Podczas dekompresji czyli otwierania pliku dzieje się sytuacja odwrotna – za pomocą słownika skróty są podmieniane na powtarzające się ciągi znaków. Dzięki temu możemy odtworzyć plik w postaci niezmienionej. Identyczny jak przed kompresją. Jedyny minus jest taki, że słabo radzi sobie z plikami 16-bitowymi. Jednak baaardzo rzadko kiedy tworzymy pliki inne niż 8-bitowe (chyba, że jesteś fotografem).

Sprawdza się jeszcze lepiej przy obrazach zawierających duże obszary jednolitego koloru lub istnieje wiele powtarzających się schematów/elementów na obrazie (8-bitowe).

Brak kompresji

Jaki jest jej sens? Coraz mniejszy. Kiedyś mieliśmy mniejszą kompatybilność programów, tzn. nie każdy potrafił otworzyć skompresowany plik – dzisiaj to już raczej rzadkość. Drugim powodem dla którego warto zapisać TIFF bez kompresji jest szybkość otwierania. Jeśli nie trzeba ich dekompresować to otworzą się szybciej.

Grafika rastowa vs wektorowa

Pytanie czym się różni grafika wektorowa od rastowej chyba najczęściej pojawia się, gdy trzeba przygotować jakiś projekt do druku, ewentualnie gdy musisz zaprojektować logo. Jeśli jesteś w gronie osób, które jeszcze nie do końca wiedzą jaka jest między nimi różnica, którą kiedy się stosuje i jakie programy służą ich tworzeniu – zapraszam dalej;)

Grafika rastowa

Grafika rastowa jest to obraz opisany za pomocą pikseli. Jeżeli mamy zdjęcie o rozmiarach 100×100 pikseli to znaczy, że obraz składa się z 10,000 pikseli. 10 tyś. małych kwadratowych punktów, z których każdy jest opisem koloru. Piksele są niezależne od siebie, są całkowicie odrębne byty i edytując 1 piksel, reszta pozostaje bez zmian.

Grafika rastowa w przybliżeniu

Największym minusem grafiki rastowej jest brak skalowania. Co prawda możesz taki obraz powiększyć, ale zobaczysz tzw. 'pikseloze’ czyli widoczne duże kwadraty. Dzieje się tak ponieważ przy powiększaniu program musi dodać więcej pikseli. W tym celu pobiera 2 sąsiednie piksele, porównuje ich kolory i pomiędzy wstawia kolor pośredni. Jeżeli powiększenie jest małe to nawet tego nie widać, ale gdy przesadzimy różnica kolorów pomiędzy 2 sąsiednimi pikselami jest tak mała, że wszystkie 3 piksele obok siebie są prawie identyczne – wtedy mamy wrażenie 'pikselozy’.

Kolejnym minusem jest waga obrazu. Z racji, że każdy piksel jest oddzielnie opisany to czym większy obraz, tym więcej pikseli musi zostać opisanych, a co za tym idzie – obraz coraz więcej waży. Mamy możliwość kompresji obrazów rastowych jednak ich możliwości są ograniczone.

Grafikę rastowa jest używana praktycznie wszędzie na komputerze czy w internecie. Każde zdjęcie to właśnie grafika rastowa, większość ikon i stron internetowych (powoli coraz popularniejsze stają się obrazy .SVG czyli wektorowe, jednak jest to jeszcze stosunkowo rzadko spotykane rozwiązanie).

Grafika wektorowa

Grafika wektorowa nie jest zbudowana z pikseli. Jest to obraz opisany w sposób matematyczny za pomocą punktów, łuków… ogólnie kształtów. Np. mając obraz koła, plik wektorowe będzie go opisywał jako koło o danej średnicy wypełnione jakimś kolorem. Zmieniając kolor koła nie edytujemy setek pikseli ale jedynie kilka znaków, które opisują jaki jest to kolor. Głównym plusem grafiki wektorowej jest jej skalowalność. Z racji, że jest to opis kształtów to możemy go powiększać w nieskończoność, bez straty jakości. Dodatkowo nie ma znaczenia czy obraz jest rozmiaru złotówki czy autobusu – jego waga będzie ta sama. Dzięki temu można bez problemu wysyłać projekty kilkudziesięciometrowych bilboardów za pomocą maila.

Grafika wektorowa. Widok standardowy oraz widok kształtów z jakich zbudowany jest obraz.

Grafika wektorowa używana jest wszędzie tam gdzie musimy zadbać o możliwość bezstratnego powiększenia obrazu, idealnej jakości grafiki czy małej wagi, np. projekt logo czy pliki do druku.
Kolejną ważną sprawą jest to, że dzięki opisowi grafiki jako łuki, proste, punkty itd. jest możliwość odczytu tych danych przez wiele maszyn. Z plików wektorowych możemy, np. wyfrezować nasze logo, wyciąć na folii i okleić samochód, zrobić kaseton czy wyciąć w jakimkolwiek innym materiale. Maszyna będzie mogła 'chodzić’ po wszystkich łukach z jakich składa się obraz.

W grafice wektorowej przygotowujemy: projekty logo, projekty do druku, projekty do wycięcia itd.

Jakie programy?

Oczywiście mam na myśli branżowe programy. Najbardziej popularnymi są:
– do grafiki rastowej: Gimp (darmowy), Adobe Photoshop (płatny), Corel Photo Paint (płatny)
– do grafiki wektorowej: Inscape (darmowy), Adobe Illustrator (płatny), Adobe InDesign (płatny), Corel Draw (płatny)

Zazwyczaj jest możliwość zapisu obrazu rastowego w programie wektorowym i odwrotnie, jednak nie jest to głównym zadaniem programu.

Obecnie można zauważyć, że grafika wektorowa w wielu miejscach wypiera obrazy rastowe ponieważ są lekkie i można je powiększać bez straty jakości (np. na stronach internetowych), dlatego jeśli zajmujesz się grafiką, to znajomość programów wektorowych będzie zdecydowanie przydatna;)

Jak przygotować pliki do druku – parę słów o DTP

Wracając dziś ze sklepu do samochodu zauważyłem za wycieraczką ulotkę serwisu samochodowego. Oczywiście pierwsze na co patrze to nie treść, nie adres czy oferta.. Pierwsze na co patrze to wykonanie i projekt. Po pewnym czasie chyba każdy ma takie zboczenie zawodowe. W oczy od razu rzuciły mi się widoczne piksele i małe marginesy.. dlatego dzisiaj kilka słów o przygotowywaniu materiałów do druku. DTP to dość szerokie pojęcie jednak jako grafik mam tu na myśli przygotowanie pliku, który można wysyłać prosto do drukarni.

Kilka podstawowych pojęć

Spady – to zadrukowana brzegowa przestrzeń projektu. Ta, która zostanie później odcięta. Skoro zostanie odcięta to po co w ogóle jest? Weźmy przykład ulotki. Są drukowane o kilka milimetrów większe a następnie układane jedna na drugiej, wtedy maszyna przycina je o te kilka milimetrów (przy małych ulotkach może to być tylko 1.5 mm). W takich maszynach występują mikroprzesunięcia i gilotyna nie zawsze trafi idealnie w te samo miejsce. Gdyby nie spady można byłoby zauważyć na niektórych ulotkach, że tło kończy się przed krawędzią i mamy delikatny biały pas na krawędzi. Dzięki zastosowaniu spadów każda ulotka będzie idealnie zadrukowana na całości, od krawędzie do krawędzi.

Marginesy – jest to taka bezpieczna przestrzeń na brzegach projektu (ale tych wewnętrznych, które nie są odcinane gilotyną). Podstawowym zadaniem marginesów jest zabezpieczenie treści. Na ulotkach jest to zazwyczaj kilka milimetrów (czym większy projekt tym lepiej dawać większe marginesy). Nie dajemy tam tekstów, zdjęć itd. ponieważ jeśli gilotyna w trakcie cięcia przesunie się do środka to obetnie nam tą treść. Drugim powodem jest estetyka. Projekty, które są zapełnione treścią od brzegu do brzegu są zwyczajnie nieładne. Tekst musi mieć czym oddychać dlatego zawsze pamiętaj o marginesach.

Tryb kolorów CMYK – W skrócie. Na potrzeby internetu projektujemy w trybie RGB, ponieważ monitory wyświetlają nam obraz za pomocą 3 kolorów (Red, Green, Blue) w skali od 0 do 255 (dlaczego akurat taka skala? jest to potęga liczby 2 – 256 opcji, zainteresowanych odsyłam do podstaw działania komputera).
Plotery drukarskie i zresztą każda drukarka używa 4 kolorów (Cyan, Magenta, Yellow, blacK lub Key color – ostatni jest nazywany zarówno czarnym jak i kolorem kluczem), w skali procentowej czyli od 0 do 100. W starych drukarkach były używane jedynie 3 (CMY) jednak nie dało się z tych kolorów utworzyć głębokiej czerni, dlatego dorzucono jeszcze K, czyli kolor czarny. Pamiętamy zatem aby przy tworzeniu nowego dokumentu ustawić tryb kolorów na CMYK, jeśli tego nie zrobimy to podczas drukowania program sam przekonwertuje naszego RGB na CMYKa ale grozi to zmianą kolorów. Z reguły kolory robią się blade i delikatnie zmieniają barwę – efekt mocno niepożądany 😉

Profil kolorów – jest to profil jakimi posługują się drukarnie. Oprócz określenia trybu jako CMYK należy ustawić jeszcze profil. Jeśli potrzebujesz idealnego wydruku skontaktuj się z drukarnią i zapytaj jakiego profilu używają, ponieważ przygotowanie w jednym i wydruk w innym może powodować delikatne zmiany kolorów. Zdecydowana większość drukarni w Polsce używa FOGRA39 i bez zagłębiania się w szczegóły taki polecam ustawić.

Pasery, Linie cięcia, Paski koloru – są to opcje dla drukarni, a konkretnie maszyn drukujących i gilotyn. W poniższym zdjęcie nie ma spadów – mój błąd;) skleiłem to na szybko na potrzeby wpisu. Maszyna koryguje swoje położenie na podstawie paserów, taki celownik. Linie cięcia pokazując, w którym miejscu projekt ma zostać przycięty. Paski koloru służą do kontroli prawidłowego pokrycia tuszu. Wszystkie te opcje ustawiamy przy eksporcie dokumentu.
Inną kwestią jest to kiedy jest stosować bo nie zawsze. Jeśli dajemy, np. projekt baneru to drukarni to nie ma sensu dawać tych wszystkich znaczników. Co innego jeśli projektujemy wizytówkę, tym bardziej jeśli będzie, np. z maską UV – wtedy pasery powinny być obowiązkowe. Pomijam, że w niektórych drukarniach możesz usłyszeć, że oni żadnych znaków nie chcą bo mają wymiar i to im wystarczy – sam trafiałem na takie drukarnie ale lepiej robić wg dobrych praktyk.

Co z tą rozdzielczością

Rozdzielność, DPI, PPI – można powiedzieć, że dla nas, grafików jest to jedno i to samo, oczywiście w dużym uproszeniu. Rozdzielczość jest to ilość pikseli w pionie i poziomie z jakich składa się obraz.
DPI jest to skrót od Dots Per Inch czyli plamki na cal. Jak zapewne wiesz, drukarka drukując nakłada mikroskopijne krople farby na papier. Wartość DPI mówi ile tych kropel powinno znaleźć się na jednym calu kartki.
PPI czyli Piksel Per Inch – ta wartość nas najbardziej interesuje! Jest to ilość pikseli na cal w naszym projekcie. Tego pojęcia używa się już naprzemiennie z DPI, chociaż nie jest to dokładnie to samo.
Dlaczego napisałem, że dla nas jest to jednak to samo? Otóż w Photoshopie ta wartość jest podpisana jako Rozdzielczość, w Illustratorze już jako PPI, a rozmawiając z drukarniami i grafikami najczęściej usłyszysz DPI… Inna sprawa to ile PPI używać? Wszystko zależy od wymiarów projektu (czym mniejszy projekt tym więcej PPI). Może opiszę to dokładniej może w innych wpisie.

W czym projektować

To powinno być podstawowe pytanie. Oczywistą odpowiedzią powinien być Adobe InDesign – jest to program stricte do przygotowania materiałów do druku. Osobiście jednak sporo projektuję w Illustratorze i bardzo to lubię. Ktoś pewnie powie, że robię źle bo on nie jest do tego, ale… jest to program wektorowy, pozwala na ustawienie spadów już przy tworzeniu dokumentu a przy eksporcie doda nam potrzebne linie cięcia, pasery itd. czyli jednak autorzy przewidzieli, że ktoś będzie w nim projektował do druku. Jak najbardziej można. Ulotki, wizytówki, banery itd. jednak gdybyś miał tworzyć książkę – odpuść i przerzuć się na InDesign.

W agencjach często spotykany jest także Corel Draw – osobiście nigdy nie mogłem się do niego przyzwyczaić i pracowałem na nim tylko gdy nie miałem innego wyjścia. To taka alternatywa dla Adobe Illustratora i tak samo jak w illustratorze można w nim tworzyć coś do druku.

Photoshop – byś może niektórzy się zmartwią ale Photoshop nie jest programem do materiałów drukowanych. Tworzysz ulotki w Photoshopie? Zacznij w Illustratorze albo InDesignie a obiecuję, że po miesiącu nie będziesz chciał wrócić. To nie jest tak, że photoshop jest gorszy, on jest po prostu do innych rzeczy.

O czym pamiętać

Jest kilka spraw, które powodują, że drukarnia nie będzie chciała wydrukować projektu i o które po prostu warto zadbać.

Skrzywione teksty – chodzi o to aby zmienić wszystkie teksty na „krzywe” czyli w kształty. Wyobraź sobie, że drukarnia nie ma takiej czcionki, która jest na projekcie. Wtedy program podmieni ją na jakąś inną. W najlepszym przypadku dostaniesz ulotki z innymi czcionkami, w najgorszym może posypać się cały projekt bo inny font jest szerszy i nie mieści się na projekcie.

Zdjęcia w RBG – ustawiłeś projekt na CMYK, super ale zdjęcia w dalszym ciągu mogą być w trybie RGB. Pamiętaj, że wszystkie warstwy muszą być w CMYKu, chyba że spłaszczysz je w jedną warstwę lub zapiszesz do formatu rastowego (jak .jpg, .tiff). Wtedy nie musisz martwić się o zdjęcia w RGB i skrzywienie tekstów.

Teksty mają zły czarny – yyy.. ale przecież czarny to czarny. Niestety nie do końca. Jeżeli czarny składa się z 50% Cayan, 50% Magenta i 100% Black to mogą nastąpić delikatne przesunięcia pomiędzy poszczególnymi kolorami. Jeśli powierzchnia zadruku jest duża, np. duży kwadrat w tle to tego przesunięcia nie będzie widać. Ale jeżeli w projekcie jest malutki napis z numerem telefonu to efekt może być taki, jak po kilkukrotnym przybiciu pieczątki na papierze (nawet jeśli postarasz się przybić pieczątkę w to samo miejsce to nie ma szans), tzn. tekst może się rozmyć i każdy kolor będzie nadrukowany obok siebie. Dlatego dla małych tekstów lepiej używać koloru składającego się wyłącznie z jednego koloru (np. 100% Black).

Za dużo farby na kolorze – jeśli dopiero pojąłeś jak działa CMYK to możesz myśleć, że aby otrzymać najgłębszą czerń trzeba ustawić maksymalnie dużo farby, wszystkie kolory po 100% – łącznie otrzymując 400% pokrycia farbą. Wtedy to dopiero będzie czarny! I masz racje, to ma sens jednak jest pewien problem. Jeśli farby będzie zbyt dużo w jednym miejscu to nie zdąży ona wyschnąć i gotowe materiały zaczną się sklejać jeszcze w maszynie.  Maksymalna ilość farby zależy od maszyny jednak w przypadku standardowych ulotek, wizytówek, banerów lepiej nie przekraczać 310% (zawsze możesz skontaktować się w tej sprawie z drukarzem).

W jakim formacie zapisać

Najpopularniejszym formatem jest PDF. Jest to format wektorowy więc nawet duże pliki mało ważą, można je edytować etc. Należy przy nim pamiętać aby zdjęcia były w CMYKu, teksty skrzywione a wszystkie warstwy odblokowane. Osobiście miałem kiedyś przypadek, że warstwy rozsypały i projekt wyglądał całkowicie inaczej dlatego jeśli wysyłam projekt w PDF dodaję mały podgląd projektu w .JPG, dla pewności, że wygląda jak powinien.

Innym popularnych formatem jest TIFF (eksportując najlepiej spłaszczyć warstwy i zaznaczyć kompresję LZW). Jest to format rastowy więc nie trzeba się martwić o RGB (o ile przy tworzeniu ustawiłem dokument w CMYK) i teksty ponieważ po zapisaniu to będzie zwykły obraz bez żadnych warstw. Minusem jest duża waga i brak paserów.

JPG – tylko jedno zdanie ponieważ również można w nim zapisać projekt do druku i sporo drukarni taki format preferuje. JPG jest praktycznie tym samym co TIFF z jednym wyjątkiem: JPG  zawsze robi małą kompresję przez co może nawet niezauważalnie (lub zauważalnie) pogorszyć jakość, dlatego bardziej polecam TIFF, który jest całkowicie bezstratny jakościowo.

Tworzenie stron www i materiałów reklamowych – przydatne narzędzia

Projektując stronę internetową niestety marnujemy masę czasu na rzeczy, które można znacząco przyśpieszyć. Większość osób nawet lubi 'marnować’ czas na rzeczy mało istotne bo często fajnie się je robi. Sam wiele razy poświęcałem całe godziny, żeby ładnie przedstawić wizualizację projektu wizytówki, ulotki, loga zamiast skorzystać, np. z gotowych mockupów – a później się dziwiłem, że pracuję cały dzień a tak mało zrobiłem. Chyba każdy ma taki etap, dlatego przedstawię Ci listę DARMOWYCH przydatnych narzędzi, których używam na co dzień.

Mockup

Wspomniany na wstępnie mockup. Jeśli ktoś nie wie, mockup jest gotowym szablonem (najczęściej w Photoshopie), na który możemy narzucić jednym kliknięciem naszą grafikę, otrzymując tworząc w ten sposób realistyczną wizualizację. Zamiast poświęcić pół dnia na przygotowanie kilku wizualizacji ulotek, magazynów itd. możesz zrobić to w kilka minut.

Dziesiątki darmowych mockupów ulotek, koszulek, samochodów, książek, smartfonów… znajdziesz na stronie: http://www.mockupworld.co/all-mockups/ Innym sposobem może być zwyczajnie wpisanie w google „free mockup”, ponieważ jest wiele artykułów gdzie są zebrane najlepsze paczki.

Pencil

Początek przygody z tworzeniem stron wygląda mniej więcej tak: pomysł -> photoshop -> wysłanie gotowej szaty graficznej klientowi. Wszystko fajnie jeśli strona się spodoba ale co jeśli klientowi nie odpowiada już układ? Niestety trzeba zacząć od nowa. Dobrą praktyką na początku współpracy z klientem jest przygotowanie samego schematu strony. Jeśli schemat zostanie zaakceptowany to ryzyko, że strona nie spełni oczekiwań klienta jest dużo mniejsze. Programem do przygotowywania takich szablonów jest Pencil, oczywiście darmowym. Działa na zasadzie przeciągnij i upuść. Zawiera gotowe komponenty nagłówków, zdjęć, formularzy, przycisków. Pozwala w ciągu kilkunastu minut stworzyć prosty układ strony.

Kuler

Konkretnie mam na myśli kuler Adobe: https://color.adobe.com Wg mnie najlepszy ze wszystkich, które testowałem. Pozwala błyskawicznie utworzyć paletę kolorów do projektu. Standardowo możemy wybrać najpopularniejsze schematy kolorów (analogowy, triada, dopełniający….) i stworzyć własną paletę, ale możemy też przeglądać spośród setek gotowych palet (stworzonych przez użytkowników). Ciekawą opcją jest również stworzenie palety za pomocą obrazu (wysyłasz zdjęcie na serwer i po chwili masz kilka palet do wyboru stworzonych na podstawie skrajnych kolorów na zdjęcie). Jeśli tworzysz projekt gdzie przeważającym elementem jest zdjęcie to super opcją będzie skorzystanie z tej funkcji – projekt będzie bardzo spójny kolorystycznie.

Dużą przewagą kulera Adobe nad innymi jest integracja z Photoshopem i Illustratorem (nie wiem jak w innych ich programach). W tej chwili dostajemy już domyślnie wgraną wtyczkę dzięki w programie graficznym mamy mini kulera i w dosłownie w kilka sekund możemy dorzucić do próbek kolorów wybraną paletę.

960 970 grid

Tworzenie projektu na siatce jest nie tylko ułatwieniem ale nawet powiedziałbym, że wymogiem. Siatka o szerokości 960 pikseli była bardzo popularna jakiś czas temu, ale obecnie wydaje mi się, że rozsądniejszym rozwiązaniem będzie szerokości 970 pikseli ponieważ takiej używa framework Bootstrap (gdzie coraz więcej stron używa Bootrapa – wcale się nie widzę, sam go używam). Takie siatki jako szablony do Photoshopa możesz znaleźć, np. tutaj: http://www.minimit.com/articles/tips-resources/bootstrap-3-responsive-grid-psd-templates

Small pdf

Jeśli wysyłasz do klienta często pliki PDF (być może podglądy większych projektów) lub po prostu na stronie jest wiele dokumentów PDF i zależy Ci na tym aby użytkownik mógł jest jak najszybciej otworzyć to fajnym narzędziem jest https://smallpdf.com/pl/compress-pdf

Działa bardzo szybko i potrafi skompresować PDFa z 30 do 3MB! Strona posiada także funkcje konwertowania plików PDF->JPG, JPG->PDF oraz wiele innych.

Pinterest.com

Brak inspiracji? Nie masz pomysłu? Z pomocą przychodzi Pinterest. Nie wiem dlaczego ale osobiście jakoś nie mogłem się do niego z początku przekonać, wszedłem, zobaczyłem, wyszedłem i tyle, bez szału. Za jakiś czas jednak wróciłem i od tamtej pory wracam już systematycznie. Jest to świetne źródło inspiracji, a każdy ma chwile pustki w głowie.

Zamiast siedzieć patrząc się w pusty monitor zdecydowanie lepiej przejrzeć kilkadziesiąt ciekawych prac i wypełnić nimi głowę. Aby wzmocnić efekt, zrób sobie później chociaż 10 minut przerwy. Jestem pewny, że w głowie pojawi się kilka nowych pomysłów.  Oczywiście nie mówię, żeby wejść i kopiować gotowe projekty. To jak z pisarzami – jeśli nie wiedzą o czym pisać to czytają dzieła innych:)

Awwwards.com

Również świetne źródło inspiracji gdy masz pustkę w głowie. Wg mnie jeden z najlepszych serwisów gdzie możesz obejrzeć fenomenalne strony internetowe. Nie jest to zbiór screenów losowych stron, ale zbiór wyłącznie nagradzanych stron z oceną wyglądu, zawartości, kreatywności projektu czy użyteczności. Jest to również dobre miejsce na śledzenie trendów web designu i dobra odskocznia gdy przeglądasz strony konkurencji Twojego klienta i okazuje się, że wszystkie są identyczne;)