TS TworcaStron.pl.

Optymalizacja grafik do internetu, czyli o JPG, GIF, PNG

Chyba nie trzeba wyjaśniać po co optymalizować wagowo zdjęcia i grafiki, które umieszczamy na stronie? Jeśli trzeba to odsyłam najpierw do wpisu Po co przyśpieszać stronę internetową.

Okej. Skoro wiesz, że zdjęcia/grafiki powinny ważyć możliwie mało, to pozostaje pytanie jak to zrobić… Większość sprowadza się do wyboru odpowiedniego formatu, który powinien być zależny od tego co zapisujemy. Mamy kilka popularniejszych formatów, czyli:

Wektory tutaj pomijam bo one działają na całkiem innej zasadzie. Pomijam też internetowe narzędzia do kompresji grafik, zejdzemy level niżej i zoptymalizujemy grafiki już na etapie wyboru formatu.

Żeby wiedzieć, kiedy jakiego formatu użyć, musimy zacząć od odrobiny teorii (spokojnie, to zajmie chwilę). Pokażę ci o co chodzi tymi bitami, czyli co dokładnie oznacza w praktyce, że GIF jest 8 bitowy i z czym to się wiąże. Na kaniec kilka prostych, praktycznych przykładów. Póki co transkryput nie ma, więc zapraszam do wideo 🙂

3 książki o projektowaniu stron

Jeśli przeczytałeś w tym roku co najmniej 1 książkę, to jesteś już w gronie 37% czytających Polaków. Jeżeli więcej to już ścisła czołówka, gratulacje! 

Chcę się podzielić kilkoma fajnymi książkami na temat projektowania stron. Co by nie mówić, jeśli chodzi o desing to bez książek ciężko się obejść. 

Niezawodne zasady WEB DESIGNU – J. Beaird, J. George

Książka mówiąca o absolutnych podstawach projektowania. Wydanie, które czytałem było trzecim z 2015 roku, ale większość rzeczy jest cały czas aktualne (głównie właśnie dlatego, że są to teoretyczne podstawy).

Autorzy poruszają takie kwestie jak układ i kompozycja, teoria kolorów (czyli ich znaczenie i przykładowe użycia), trochę o teksturze (po co ją stosować), typografii i obrazie. Oczywiście książka opisuje tylko kwestie wizualne. Nie ma tam nic o kodowaniach itd.. i dobrze.

Jeżeli dopiero zaczynasz swoją przygodę z projektowaniem stron – to polecam. To są takie absolutne podstawy, które powinien każdy znać. Jeżeli jednak masz już jakąś wiedzę, to prawdopodobnie jak ja, nic nowego w niej nie znajdziesz.

The Smashing Book

Coś świetnego. Smashing magazine to jeden z najpopularniejszych serwisów nt. projektowania stron i ich książki są naprawdę świetne.

Polecam każdemu, nie ważne na jakim etapie jesteś. Chyba każdy znajdzie tam coś nowego. Cześć podstaw powtarza się z poprzednią książką, ale ta jest znacznie bardziej rozbudowana i dopracowana. Myślę, że każdy web designer powinien na swojej półce mieć podręcznik “The Smashing Book”. Wg mnie niepotrzebnie wtrącają kwestie dotyczące kodowania do książki o designie, ale to tylko mała część. 

Książka tworzona jest przez wielu autorów (każdy rozdział pisany jest przez kogoś innego). Opisuje takie rzeczy jak kompozycje, kolory itd. Brzmi znajomo, ale książka skupia się na praktyczniejszych zastosowaniach. Np. wzorce projektowe wykorzystywane przy stronach e-commerce, szablony, prototypy, szkice, projektowanie na urządzenia mobilne (na co zwracać uwagę). Porusza ciekawy temat psychologii zachowań użytkowników, czyli jak projektować skuczetnie. Opowiada o ponadczasowych projektach.

Jednym słowem – polecam każdemu.

Nie każ mi myśleć – Steve Krug

“O życiowym podejściu do funkcjonalności stron internetowych. Ponadczasowa perełka. Autor opowiada o tak ostanio popularnym “User Experience” i jak dobrze projektować równie popularne “User Interface”.

Jeżeli czytałeś wpis 7 wątków o użyteczności stron internetowych. To wiele wniosków wyciągnąłem właśnie po przeczytaniu tej książki. Pomaga ona całkiem inaczej spojrzeć na proces projektowania strony, co wcale nie jest prostym zadaniem, bo z początku tworzymy strony tak, aby było one ŁADNE. “Nie każ mi myśleć” pokazuje jak sprawdzić żeby były one przede wszystkim funkcjonalne.

Autor zwraca uwagę jakie rzeczy powinny być widoczne na stronie, jak budować nawigacje. Opowiada również o testach UX/UI. Jest tam naprawde masa wiedzy.

 

ps. na pierwszy rzut to tyle. Chociaż myślę, że wpis “3 książki o …” nie będzie pojedyńczym wybrakiem, ale serią postów:)

Czy mogę używać cudzych zdjęć i grafik? Kilka słów o licencjach

– Weź pan wrzuć jeszcze zdjęcie tego samochodu. 
– Ma pan ze sobą takie zdjęcie?
– Niee, ale jak się wpisze tutaj nazwę to wyskoczy. Patrzyłem w domu.

– Ale wie pan, że tak nie wolno?
– Jak nie wolno? Niby co się stanie? Szwagier tak robił i się dało…
– Każde zdjęcie objęte jest prawem autorskim. Nawet tutaj w wyszukiwarce Google. Jeśli chce pan któreś to należy je kupić lub znaleźć darmowe.
– A widzisz pan tu gdzieś przycisk do kupowania? Nie. Nigdzie też nie pisze, że nie mogę go brać, więc je pan wklej. Zresztą jeszcze tego brakuje żebym płacił za zdjęcie jak możne je pobrać za darmo…

Temat wtórny w internecie i nie bardzo chciałem go poruszać. Jednak mimo to dostałem już trochę zapytań typu “czy mogę użyć zdjęcia z googla / czy mogę zdjęcia z XXX / czy mogę użyć zdjęcia z YYY“. Nigdy nie mam serca zostawić wiadomości bez odpowiedzi, więc przynajmniej zamiast rozpisywać się w wiadomościach, teraz będę mógł odpisać linkiem do wpisu. Tak, piszę to z lenistwa 🙂

Prawo domniemania

Domniemanie to taki zwrot, który mówi, że jeżeli A, to uważa się, że B. Wikipedia podaje przykład: “jeżeli pada deszcz, to domniemywa się, że jezdnia jest śliska”, prawo empiryczne – teoretycznie nie musi to być prawda, ale doświadczenie nauczyło nas, że tak właśnie jest, więc przyjmuje się to za prawdę. 

No ale co z tego? Ano to, że w przypadku pobierania grafik z internetu warto utworzyć sobie takie własne prawo domniemania, które by mówiło:

Jeżeli nie jest jasno określone, że mogę pobrać dane zdjęcie i z niego korzystać (również komercyjnie!), to przyjmuję że tego zdjęcia użyć nie mogę. Kropka.

Ale co z Goole Images? Czy tam działa to tak samo?

Jak wujek Google chce dla nas dobrze

Ulobionym bankiem “darmowych” zdjęć dla większości klientów jest Google Images. Rozmowa z początku wpisu wcale nie jest wyssana z palca. Zdania może nie są identyczne, ale tak, miałem takie sytuacje. Skoro zdjęcia są to dlaczego ich nie brać?

To jak jakby wejść do galerii sztuki w momencie, gdy nikogo nie ma i buchnąć jakiś obraz, no bo przecież nikt za tobą nie krzyczał jak go wynosiłeś. 

Foty z gógla są tak samo objęte licenacjami, jak w każdym innym miejscu. Oczywiście można wyszkiwać tam grafiki z określoną licencją (Narzędzia->Prawa do użytkowania), ale nie oszukujmy się – są małe szanse, że znajdziesz wtedy coś wartego uwagi.

Czy do licencji trzeba stosować się zawsze? Nawet gdy nie zarabiam na projekcie?

Robię to za darmo, więc nie muszę płacić

Bzdura! Nikogo nie obchodzi czy robisz najdoroższą stronę świata dla Apple i zarobisz na niej miliony, czy darmową stronke pod akcję charytatywną.

Twoje intencje nie są w stanie zmienić licencji, dlatego jeżeli chcesz wykorzystać jakieś materiały nawet do ogłoszenia w kościelnej gablotce, to takie materiały trzeba traktować tak samo jak każde inne. Ale licencje często pozwalają na dowolne korzystanie ze zdjęć/grafik. Wystarczy je przeczytać.

Czytanie nie boli

Jak każdy facet nie cierpię czytać instrukcji. Gdy składam szafkę z Ikei to wolę spędzić nad nią 3 razy więcej czasu i zostać z kilkoma śrubami, które przecież musiały być zapasowe! Ale bez czytania instrukcji. Jeśli ją czytam to poległem. Natomiast licencje to takie instrukcje zdjęcia, które mówią nam co możemy z nim zrobić i jak ich użyć.

Nie lubię ich czytać, ale trzeba się przełamać. Spokojnie nie będzie to takie straszne, bo tych licencji nie ma wcale tak dużo. 

Kilka licencji, na które trafisz

Przydało by się znać kilka licencji i możesz biec w świat w poszukiwaniu materiałów:

Powyższe typy mogą się ze sobą łączyć. Jeżeli chcesz się wczytać w temat głebiej, zapraszam na: http://creativecommons.pl/.

Skoro znamy już licencje to gdzie szukać tych CC0?

Czyli gdzie te darmowe zdjęcia?

Są są. Przecież w internecie jest wszystko (a nawet za dużo…). Trzeba tylko szukać w odpowiednich miejscach.

Takie miejsca wymieniłem tutaj: Przydatne linki  podpunkt “Darmowe zdjęcia“. Na podanych tam stronach zobaczysz mniej lub bardziej widoczne napisy CC0, czyli nasz Święty Graal (ale dla pewności pamiętaj, żeby również tam przeczytać licencje).

Z innych zdjęć i grafik również możemy korzystać, ale zwracajmy uwagę na licencje (już je znasz, więc nie zajmie ci to więcej niż kilka sekund) i róbmy to legalnie.

 

WebDesigner, który nie potrafił rysować

Przeglądając jedno z branżowych for trafiłem na ciekawy temat typu “czy aby być dobrym WebDesignerem trzeba być utalentowanym rysownikiem?“. To jest coś z czym się kompletnie nie zgadzam a co jest dosyć często powielane. Dlatego dziś trochę filozoficznie :>

 

Wyczucie stylu

Ktoś powie, że web designer musi przecież mieć jakieś wyczucie stylu! Okej, to jest prawda, ale czym jest wyczucie stylu?

W tym przypadku pewnie chodzi o jakiś zbiór umiejętności, takich jak: dobór kolorów, proporcji, może przestrzeni – złożenia wszystkich potrzebnych elementów w sposób, który dla zwykłego Kowalskiego wyda się losowo, ładnie wyglądającą stroną. Ten sam Kowalski powie “ten kto robił tą stronę, musi mieć talent…“.

Analogicznnym, chociaż może trochę dziwnym przykładem mogą być tzw. fraktale. Można bez problemu wyguglować naprawdę świetnie wyglądające fraktale i na pierwszy rzut oka, można pomyśleć “ktoś kto to narysował musiał mieć talent“… tymczasem w większości przypadów jest to obraz wygenerowany automatycznie przez jakiś skrypt – czysta matematyka, która nie wie czy coś jest ładne, czy nie.

Może jest to dziwny przykład, ale chcę tylko pokazać, że pewne rzeczy mogą wyglądać dobrze nie tylko wtedy gdy kierujemy się ‘wyczuciem stylu’ ale matematyką, czyli różnymi zasadami i regułami, które w projektowaniu stron są obecne.

fraktal - WebDesigner, który nie potrafił rysować

 

Nie mieszajmy do tego talentu

Wyobraź sobie sytuację, gdy ktoś mówił Michaelowi Jordanowi “ale ci dobrze, masz talent do koszykówki i dzięki temu zarabiasz górę pieniędzy, przyfarciło ci się“. Jordan trenował non stop, w dzień i w nocy a gdy treningi zaczeły przynosić efety to przychodzi ktoś z boku, zabiera mu całe zasługi i przypisuje je tajemniczemu talentowi. Krew się gotuje…

Czym różni się projektowanie stron od koszykówki? Tak naprawdę wszystkim… z wyjątkiem tego, że aby być dobrym trzeba ćwiczyć, ćwiczyć i ćwiczyć.

Czyli aby stworzyć iluzje talentu należy nabyć kilka wspomnianych wcześniej umiejętności (doboru kolorów, proporcji, fontow itd.). O dziwo podczas wyboru kolorów, proporcji etc. wcale nie kierujemy się (w największym stopniu) wyczuciem ale teorią barw, regułami i schematami utworzonymi wiele lat temat. Gdy rozbierzemy to na czynniki pierwsze, to coraz więcej rzeczy jest dokładnie podyktowane przeróżnymi zasadami, regułami oraz badaniami. W którym więc miejscu zaczyna się talent, a w którym znajomośc teorii?

 

Chcesz robić strony ładne czy dobre?

Projektowanie stron to nie malowanie obrazów. Nie ma nic wspólnego z hasłami “sztuka dla sztuki” – oczywiście są takie przypadki jednak mówię o normalnej, codziennej pracy.  Projektowanie stron to przede wszystkim sprzedaż. Ładnie opakowana. Jej głównym zadaniem jest sprzedaż… nie ważne czy produktu, osoby, firmy a może nawet jakiegoś pomysłu czy idei. W 90% przypadków będzie to sprzedaż.

Produkty nie sprzedają się wyłącznie dlatego, że są ładne ale częściej dlatego, że są odpowiednio opakowane. Ładnie – nie zawsze znaczy odpowiednio. Czy to oznacza, że projektując strony musisz być jednocześnie marketingowcem? Trochę tak.

Różne zawody w innym stopniu wymagają nauki teorii. Mechanik samochodowy będzie w innym stopniu kład nacisk na teorię niż piłkarz, biegacz czy pracownik SpaceX. Myślę, że webdesigner wymaga tej teorii całkiem sporo, o czym wiele osób zapomina i wtedy słabe projekty tłumaczą brakiem talentu. Swoją drogą to całkiem wygodna wymówka.

 

A co jeśli ja chce rysować?

To rysuj, jest masę kursów, szkoleń itd. Internet obecnie daje Ci możliwość wyuczenia się praktycznie każdej umiejętności bez wychodzenia z domu. Tutaj talent na pewno będzie przydatny, poniewż będzie łatwiej. Mimo to myślę, że powiedzenie “talent jest wymogiem” jest zbyt stanowcze i bezkompromisowe. Jeśli nie chcesz to również nie wiedzę problemu, każda nowa umiejętność będzie przydatna ale nie “niezbędna”.

Jeśli w dalszym ciągu chcesz wziąc się za naukę rysowania, a uważasz to za coś niewyobrażalnie trudnego, to mam dla Ciebie pierwszy “tutorial” 😉

Czy warto inwestować w tablet graficzny?

Tablet graficzny fajna rzecz. Najtańszy można kupić na allegro już za ok. 100 zł, a jeśli chcemy mieć profesjonalny sprzęt to kwota 1-1,5 tyś. wystarczy bez problemu. Pytanie kiedy ten tablet nam się przyda? Czy warto inwestować większe sumy czy może lepiej kupić na początek coś tańszego?

Od razu powiem, że nie będę polecał żadnych konkretnych modeli a jedynie osobiste spostrzeżenia po dłuższym używaniu tableta w kilku dziedzinach.

Tablet graficzny nie zawsze potrzebny

Podstawowe pytanie raczej dosyć standardowe “Czym się zajmujesz?“. Grafiką powiesz… no tak, ale co konkretnie w tej grafice robisz?

Przyjrzyjmy się kiedy tablet jest przydatny a kiedy niespecjalnie:

Oczywiście jeżeli ktoś lubi pracować na tablecie, to dla takiej osoby nawet przeglądanie internetu będzie wygodniejsze niż przy pomocy myszki. Dobrze sprawdzić to na sobie (mając na uwadze, że z początku tablet będzie trochę “nieporęczny”, trzeba dłużej popracować aby się przyzwyczaić).

Słaby tablet graficzny może zrazić

Pamiętam mój pierwszy tablet. Prezent urodzinowy, byłem mega podjarany! W głowie krąży myśl “mam tablet graficzny, w końcu jestem rasowym grafikiem!“. Był to tablet, którego męczyłem przez kilka miesięcy, używany głównie do fotomontaży. Niestety wybór modelu oparł się na cenie i sam tablet strasznie lagował. Na początku pracowało się całkiem fajnie bo to zawsze coś nowego. Z czasem jednak lagi, czyli opóźnienia myszki zbyt bardzo przeszkadzały i koniec końców tablet wylądował w szufladzie, gdzie jest do dziś.

Ktoś może powiedzieć “to co, że lagi… do nauki trzeba jak najtańszy“. Być może, u niektórych takie podejście nawet by się sprawdziło ale nie u mnie. Nie mając styczności z innymi tabletami, zostało mi w głowie przekonanie, że tablety graficzne wcale nie są takie fajne… I na dłuższy czas wróciłem wyłącznie do myszki.

Moja przygoda z tabletami graficznymi na szczęście się jeszcze nie skończyła. Po 2,3 latach w moje ręce wpadł tablet z wyższej półki (wacoma). Całkowicie inny styl pracy: zero lagów, idealne sczytywanie kątów nachylenia i siły nacisku. Do tamtej pory nie wiedziałem jak płynnie może taki tablet chodzić (tabletu tego używam do dzisiaj).

Oczywiście nie każę Ci zamawiać od razu czegoś z najwyżej półki (są dobre tablety za kilka stówek). Byłbym jednak bardzo ostrożny przy kierowaniu się ceną, aby się do takiego sposobu pracy przypadkowo nie zrazić.

Tablet dobry dla zdrowia

Pracując wiele godzin przed komputerem, narażamy się na kontuzję nadgarstka. Oczywiście nie skręcisz sobie ręki obsługując myszkę… ale po całych latach możemy odczuwać bóle nadgarstka lub inne dolegliwości (google podpowiada “zespół cieśni nadgarstka”).

Do dziś wspominam znajomego u którego w wielu 20-stu kilku lat, nadgarstki kręciły się głośno jak ręczny młynek do kawy (od ciągłego pisania na klawiaturze).

Tablet graficzny jest więc w pewien sposób odciążeniem ręki od myszki, co na pewno jest zawsze jakimś plusem.

Czy warto kupić tablet graficzny?

Osobiście uważam, że jeśli zajmujesz się grafiką to warto zainwestować w tablet graficzny. Jeżeli zajmujesz się obróbką zdjęć, fotomontażami, digital art – to wręcz tablet jest wymogiem (jeżeli nie jesteś przekonany to zawsze można skorzystać z niższej półki, gdzie za ok. 300 zł można kupić fajny sprzęt). Jeżeli zajmujesz się wyłącznie projektowaniem stron www, materiałami do druku to wg mnie tablet będzie bardziej dodatkiem. Koniec końców, wszystko zależy od osobistych preferencji bo jak pisałem, część osób nawet do przeglądania internetu będzie używała tableta 🙂

Fotomanipulacja #1 (speed art) – Photoshop

Pomyślałem ostatnio, żeby przygotować jakiś speed art fotomanipulacji w Photoshopie. W końcu czasami fajnie sobie popatrzeć jak takie wyglądają od kuchni.

Korzystając z chwili wolnego taką manipulacje przygotowałem. Zdaje sobie sprawę, że nie jest specjalnie dopracowana ale tworzyłem ją całkowicie bez myślenia, tzn. nie wiedziałem co chcę zrobić więc cały czas szedłem do przodu, aż powiedziałem sobie “Stop. To koniec”. Tak oto powstał poniższy filmik:)

Speed art – Photoshop:

Ps. Chciałbym przygotować kompletny poradnik jak się do takich ‘zabaw’ (ja to tak nazywam ponieważ bardzo to lubię!) zabrać. Na co zwracać uwagę, jakich narzędzi się najczęściej używa. Oczywiście taki poradnik przełożyłby się na całą znajomość Photoshopa więc same plusy. Muszę tylko wiedzieć, że na chwilę obecną jest dla kogo taki poradni robić, dlatego jeśli temat się Wam podoba to dajcie mi znać (komentarz, mail, sub, łapka, cokolwiek)! 🙂

Źródła inspiracji (strony internetowe)

Chyba każdy ma chwile pustki w głowie i musi się czymś za inspirować aby mózg znowu nabrał rozpędu. Zresztą… inspirować powinniśmy się cały czas. Dzięki temu w naszych głowach powstają nowe pomysły. Oto źródła inspiracji z których warto korzystać będąc web designerem:

Awwwards

awwwards - Źródła inspiracji (strony internetowe)

http://www.awwwards.com – jedne z lepszych stron gdzie można oglądać nagradzane www. Osobiście spędzam tam całe godziny. Jeśli chcesz zaprojektować coś nowego, nietypowego to Awwwards jest dla Ciebie obowiązkowe. Dodatkowo wszystkie prace oceniane są pod kątem użyteczności, kontentu czy designu.

Warto także polubić ich fanpage na Facebooku – codziennie pojawiają się najlepsze strony dnia.

 

FWA

fva - Źródła inspiracji (strony internetowe)

https://thefwa.com – podobnie do Awwwards zawiera galerię naprawdę fajnych stronek.

 

One page love

onepage - Źródła inspiracji (strony internetowe)

https://onepagelove.com – strona jest o tyle ciekawa, że zawiera wyłącznie prace typu One Page, więc jeśli przygotowujesz akurat taką – warto spojrzeć jak robią to inni.

 

HTML Inspiration

html - Źródła inspiracji (strony internetowe)

http://www.htmlinspiration.com – kolejna galeria ciekawych prac. Skromniejsza w porównaniu do poprzednich pozycji.

 

Pattern Tap

pattern - Źródła inspiracji (strony internetowe)

http://zurb.com/patterntap – na koniec coś ciekawego. Znajdziesz tutaj nie tyle całe strony internetowe co raczej poszczególne jej elementy. Nie wiesz jak zaprojektować formularz kontaktowy? Przeszukujesz wyłącznie formularze! Nie wiesz jak zrobić stronę “o nas” – szukasz tyko takich! Przydatna opcja przy wykończaniu projektu, gdy niby wszystko gotowe ale chciałbyś jeszcze popracować nad niektórymi elementami.

 

Macie swoje ulubione źródła inspiracji? Śmiało piszcie w komentarzach! 

RGB, CMYK, Lab – czyli jak działają tryby kolorów

Jeśli korzystasz z Photoshopa to na pewno zauważyłeś, że już przy tworzeniu nowego dokumentu mamy do wyboru kilka różnych trybów kolorów. Po co jest ich tak wiele? Który kiedy używać? Dziś odpowiemy sobie właśnie na te pytania.

tryby - RGB, CMYK, Lab - czyli jak działają tryby kolorów

Na początek czym są same tryby. Są to pewne modele opisujące sposób zapisu koloru. Jeśli obraz wyświetlany jest na monitorze komputera to musi być opisany w taki sposób aby potrafił ten kolor odtworzyć za pomocą piksela (składającego się z 3 podstawowych kolorów). Jeśli natomiast obraz ma być drukowany to kolor musi być zapisany w takim modelu aby drukarka wiedziała jak ten kolor uzyskać przy pomocy 4 farb (bo tak one drukują).

Tak więc niby ten sam kolor musi być opisany za pomocą różnych wzorców. Każdy tryb to inny wzorzec, inny sposób na opis niby tego samego koloru.

 

RGB

RGB jest trybem, w którym każdy kolor opisany jest z 3 składowych barw. Jak wiecie z 3 podstawowych kolorów można uzyskać każdy inny. Są to czerwony (Red), zielony (Green) i niebieski (Blue). Stąd bierze się nazwa trybu. Każda składowa jest opisana liczbą w skali od 0 do 255 (czyli mamy do dyspozycji 256 stopni – dlaczego tak a nie od 0 do 100? Bez zagłębiania się w techniczne aspekty działania komputerów wspomnę tylko, że wszystkie ich działania opierają się na potęgach liczby 2).

Im większa wartość tym piksel na monitorze bardziej jest podświetlony (chociaż tak naprawdę jest to zmiana kąta pochylenia płytki, która odbija te światło – w rezultacie efekt jest taki jakby kolor był jaśniejszy bądź ciemniejszy). Dla przykładu kolor RGB(0,0,0) będzie kolorem czarnym (wszystkie subpiksele są ‘wygaszone’) a kolor RGB (255,255,255) będzie kolorem białym (wszystkie subpiksele maksymalnie jasne).

rgb 1 - RGB, CMYK, Lab - czyli jak działają tryby kolorów

Jak można się domyśleć jest to tryb kolorów używany przez praktycznie wszystkie elektryczne ekrany. Telewizory, komputery, telefony itd.

Kiedy używamy?

Skoro już wiemy, że RGB jest trybem używanym na praktycznie wszystkich elektrycznych ekranach to możemy się domyśleć, że w tym trybie robimy zdecydowaną większość rzeczy. Projektujemy strony WWW, przechowujemy zdjęcia. Dla uproszczenia możemy przyjąć, że jest to taki nasz domyślny tryb i jeśli dokładnie nie wiemy czy potrzebujemy innego, to ten będzie odpowiedni. Zresztą zawsze będzie on trybem domyślnym w Photoshopie.

 

CMYK

CMYK składa się z 4 kolorów. Można nawet powiedzieć, że z 4 FARB… Tak, farb ponieważ w trybie CMYK tworzymy materiały do DRUKU. Sama nazwa pochodzi o nazw poszczególnych kolorów farb Cyan, Magenta, Yellow, Black (lub KeyKolor). Tutaj w przeciwieństwie do RGB skala jest procentowa, czyli od 0 do 100%. Dlaczego? Ponieważ nie definiujemy tego jak kolor ma zostać wyświetlony przez monitor ale ile farby ma nałożyć drukarka.

cmyk - RGB, CMYK, Lab - czyli jak działają tryby kolorów

Dla przykładu, gdy drukujemy na białym materiale i chcemy mieć czerwony napis to jego składowe będą następujące CMYK(0,100,100,0) – po zmieszaniu Magenty (kolor podchodzący pod purpurowy) i Yellow (żółty) otrzymamy czerwony. Jeśli chcemy mieć czarny napis możemy użyć CMYK(0,0,0,100) czyli tylko czarnej farby lub, np. CMYK(40,50,60,100) – zmieszamy wtedy wszystkie kolory dzięki czemu uzyskamy głęboką czerń.

Co ciekawe, w trybie CMYK nie jesteśmy w stanie uzyskać tak wielu kolorów jak w RGB, nie możemy też uzyskać tak żywych kolorów. Być może zauważyłeś, że czasami obraz żywy na monitorze jest blady po wydrukowaniu?

Jeśli chodzi o druk to powinienem napisać kilka zdań o Pantone – są to gotowe już kolory. Jeśli pracujesz z materiałami do druku to wygoogluj więcej informacji na ten temat.

Kiedy używamy?

Odpowiedź jest krótka: kiedy przygotowujemy materiały do druku.

 

Lab

Lab jest stosunkowo mało znany i rzadko używany. Co ciekawe jest on najbardziej zbliżonym modelem opisu kolorów do sposobu w jaki robi to nasze oko. Każdy kolor opisany jest przez 3 wartości: luminacja (lightness), a (tienta), b (temperatura). Brzmi dziwnie ale wcale nie jest takie straszne.

Kolory nie są opisane jak w innych trybach, za pomocą kilku składowych barw. Owszem oś a opisują udział barwy zielonej lub czerwonej, b udział niebieskiej lub żółtej ale działo to trochę inaczej. Oś L opisuję jedynie jasność uzyskanej za pomocą osi a i b barwy.

Lab color at luminance 75 - RGB, CMYK, Lab - czyli jak działają tryby kolorów

Do powyższej grafiki możemy dodać L (lightness) czyli jasność barwy.

Kiedy używamy?

Tryb Lab, uproszczając ma najwięcej kolorów ze wszystkich trybów (nawet więcej niż ludzkie oko może zobaczyć). Dodatkowo jest dobry do przenoszenia obrazów pomiędzy różnymi systemami.

Ze względu na sposób opisu koloru, możemy w nim z powodzeniem korygować tonację, nasycenie zdjęć – ogólnie mówiąc jest bardzo dobry do edycji fotografii.  Niestety na małą popularność i nieznaczną ilość programów obsługujących ten tryb – jest on używamy praktycznie wyłącznie przy edycji a efekt końcowy i tak zapisywany jest do RGB.

Tryb ten ze względu na model zbliżony do modelu spostrzegania kolorów przez ludzkie oko jest stosowany także poza branżą informatyczną (np. w przemyśle spożywczym czy rolnictwie).

 

Bitmapa

Bitmapa jest tak to grafika składające się z kolorów opisanych 1 bitem(!!!) Co to oznacza w praktyce. Otóż 1 bit może występować tylko w dwóch wersjach: 0 albo 1. Tyle, nic więcej. Tłumacząc na polski oznacza to, że mamy ‘albo albo’. Albo kolor jest albo go niema – są to obrazy gdzie jedynym kolorem jest czarny… nie szary i czarny. Tylko i wyłącznie czarny. Bez stopni jasności.

Kiedy używamy?

Plik ten bardzo mało waży (w końcu tylko 1 bit na piksel) więc możemy użyć go tam gdzie bardzo zależy nam na bardzo małej wadze grafiki.

 

Skala szarości (grayscale)

Tutaj mamy jakby uzupełnienie bitmapy. W dalszym ciągu mamy do dyspozycjo tylko kolor czarny ale posiadamy już skalę szarości. Tyli jest to najprościej mówiąc zwykły czarno-biały obraz.

Kiedy używamy?

Gdy obraz jest czarno-biały ale posiada skale szarości. Co prawda możemy ten sam efekt zapisać w trybie RGB, jednak będzie on niepotrzebnie więcej ważył ponieważ RGB składa się z 3 wartości.

Darmowe czy płatne programy graficzne?

Dziś kolejny wpis z serii pofilozofujmy. Wejdę w środek bitwy pt. ‘jakiego programu graficznego mam się uczyć?!’.

Chyba każdemu, kto zdecydował, że chce podążać mistyczną drogą grafika zadaje sobie w głębi duszy nurtujące pytanie o program graficzny. Jeśli zadasz takie pytanie na publicznym forum to w 90% przypadków dostaniesz odpowiedź Photoshop! Zwolennicy Corela krzykną natomiast Corel Photopaint! W oddali będzie słychać też głosy, że nie warto inwestować.. przecież Gimp zrobi wszystko to samo ZA DARMO. Co więc robić?

 

A więc chcesz być grafikiem?

Może chwila zadumy? Być może masz duszę artystyczną i jesteś ciekaw “jak to jest być grafikiem”. Niestety z rysowaniem na kartce nie ma to wiele wspólnego… Ok, rozpędziłem się. Takie dziedziny jak digital painting ma bardzo dużo wspólnego. Ilustratorzy zresztą też.

Powiedzmy, że chcesz tworzyć projekty stron internetowych, projektować materiały reklamowe, składać magazyny czy ulotki. W takim przypadku nawet nie musisz potrafić rysować ręcznie. Oczywiście jeśli już masz jakieś wyczucie stylu to lepiej dla Ciebie. Zaoszczędzisz trochę czasu.

Jeśli nie jesteś pewien czy ścieżka grafika jest Twoim przeznaczeniem to na pewno nie zainwestujesz w drogie programy. Aby sprawdzić się w tym polu i nauczyć podstaw bardzo dobrym rozwiązaniem będzie nauka darmowego Gimpa lub pobranie testowej wersji Photoshopa czy Corela. Niestety przez okres testowy zdążysz poznać jedynie podstawy programu więc może zostańmy przy Gimpie.

 

Tak! Chce zostać grafikiem!

Spodobało Ci się to? Super, pora zacząć myśleć jak dotychczasowe hobby zmienić w pracę i móc się z tego utrzymać.

Niestety nie będę miał dobry wiadomości. Gimp leci na odstawkę. Dlaczego? Ponieważ niestety nie nadaje się do profesjonalnej pracy, i w żadnej firmie nie będziesz miał okazji na nim pracować.
Prawdą jest, że możesz w nim zrobić bardzo wiele. Baa! W wielu przypadkach nawet to samo co w Photoshopie. Gimp jednak jest bardziej ograniczony, praca w nim jest wolniejsza, nie obsługuje przestrzeni CMYK (projekty do druku odpadają) – tak naprawdę tylko te kilka rzeczy już go wyklucza w profesjonalnej pracy.

Czyli wychodzi na to, że muszę zainwestować? Tak. Chyba, że opanujesz program w wersji trial i pójdziesz do pracy. Tam programy będą już firmowe. Oczywiście nie muszę wspominać, że crackowanie programów jest złe:)

 

Jaki płatny program?

Wracamy na początek, czyli wojna Adobe VS Corel. Moja opinia będzie trochę subiektywna. Pracowałem na obu ‘stajniach’ ale osobiście jestem fanem Adobe.

Adobe prześcignął Corela i w zdecydowanej większości firm wymagana będzie znajomość Photoshopa, Illustratora, InDesigna. Corel (najczęściej Draw) będzie raczej dodatkiem. Dlatego też jako pierwszy płatny program graficzny polecam Adobe Photoshop (chyba, że masz w planie cały pakiet Design).

Gdy znasz Photoshopa jestem pewny, że znajdziesz pracę. Jeśli wybrałeś stajnie Adobe to nie ominie Cie także nauka Illustratora (do grafiki wektorowej).
Jeśli znasz Photoshopa i Illustratora i oczywiście potrafisz już tworzyć dobre projekty – to możesz śmiało iść pracować. O ile nie zdecydowałeś się na pracę jako freelancer:)

 

Czy mogę zarabiać na grafice na darmowych programach?

Tak. Jest pewne alternatywne wyjście. Które jednak nie polecam. Chcę Ci pokazać, że jest taka możliwość, jednak bardziej polecam opcje, które opisałem wcześniej.

Zabierz się za inny darmowy program Inscape (do grafiki wektorowej). Będąc grafikiem, prędzej czy później i tak przystąpisz do nauki wektorów (jeśli nie wiesz dlatego to koniecznie przeczytaj ten wpis) a Inscape obsługuje CMYK więc można już coś przygotować do druku.

Co prawda, widziałem, że istnieją wtyczki do Gimpa, które konwertują RGB na CMYK ale…. ale jest to bez sensu. Równie dobrze możesz wysłać swój plik RBG i w drukarni również go skonwertują do CMYKa. Praca w przestrzeni CMYK a konwersja do CMYK to wręcz niewyobrażanie wielka różnica.

Wpadł mi w oko program Krita. Nic specjalnego Ci o nim nie powiem ponieważ nigdy go nie używałem. Z ciekawszych rzeczy to bardzo podobny interface do photoshopa, możliwość pracy na plikach .psd (czyli Photoshopa) oraz możliwość pracy w przestrzeni CMYK. Jeśli chcesz tworzyć na darmowych programach to być może warto zainteresować się tym produktem.

Zasady dobrego logo

Zapomnij o Photoshopie

Zacznijmy od podstaw. Logo musi zostać stworzone w wersji wektorowej. Photoshop umożliwia kilka operacji z wektorami, ale są niczym w porównaniu do programu wektorowego. Takim programem jest: ze stajni Adobe – Illustrator, lub ze stajni Corel – Draw, natomiast coś dzikiego (czyt. darmowego) – Inscape. Jeśli nie używasz płatnych programów to nie ma najmniejszego problemu, aby stworzyć logo w Inscape.

Dlaczego akurat w wersji wektorowej? Odsyłam do wpisu “Grafika rastowa vs wektorowa“.

Zacznij na papierze

To jest ZŁOTA ZASADA, która ma zastosowanie praktycznie wszędzie. W projektowaniu stron, w projektowaniu logo, w pisaniu skryptów (wg mnie) czy w organizacji czasu.
W naszym przypadku chodzi o wyobraźnie. Technologia na początkowym etapie będzie nas bardzo ograniczała. Chcesz narysować koło z 10 prostokątami i każdy pod innym kątem? Bierzesz ołówek i po 10 sekundach gotowe, natomiast na komputerze wygląda to tak:

narzędzie koło.. narzędzie koło… ok, jest! hym.. fajnie ale jeszcze trochę powiększę. Teraz jest super! Prostokąt…. ok, jest tutaj. Klikam i przeciągam, prościzna. Teraz kopiuję, wklejam, kopiuję, wklejam…. Dobra, trochę je poobracam… Jeszcze kilka stopni, jeszcze kilka stopni.. tak jest super…. 

Zastanawiamy się ‘jak zrobić‘ a nie ‘co zrobić‘.  Dodatkowo przy pracy na papierze nasza wyobraźnia lepiej pracuje.

Sens i znaczenie

Dobrze, aby logo od razu mówiło czym zajmuje się firma, chociaż chyba coraz rzadziej trzymamy się tej zasady. Nie jest ona wymogiem, ale dobrze gdy znajduje zastosowanie w projekcie, szczególnie jeśli firma nie jest jeszcze znana na rynku i ludzie nie wiedzą czym się zajmuje. Dobrym przykładem będą królewskie ogrody ‘Loyal Park’.

royal parks logo 288x300 - Zasady dobrego logo

Niech będzie widoczne

Oczywiste, że logo ma być widoczne. Chodzi jednak o coś innego, coś co bardzo wiąże się z następnym punktem: z prostotą. Przy tworzeniu loga pamiętajmy na czym może być umieszczane. Pewnie pierwsza myśl to strona www, ulotki, wizytówki, bilboardy… ok, ale nie zapominajmy o takich rzeczach jak, np. długopisy, naszycie na koszulce oraz wszędzie tam gdzie logo będzie bardzo małe. Warto zadbać, aby logo o rozmiarach 10x5mm dalej było dobrze widoczne. Zmniejszając logo możesz sprawdzić czy nie jest zbyt skomplikowane. Dla przykładu logo Apple moglibyśmy zmniejszyć do rozmiarów pojedynczych milimetrów a i tak będzie dalej widoczne.

pple 300x150 - Zasady dobrego logo

Prostota

Istnieje niepisana zasada, że dobre logo to takie, które po zobaczeniu jesteś w stanie narysować w czasie krótszym niż pół minuty. Idealny przykład takiego loga to Nike. Ktoś miałby trudności z narysowaniem go? Bez problemu, nawet z zamkniętymi oczami.
nike 300x219 - Zasady dobrego logo

Maksymalnie 3 kolory

Maksymalnie. Co oznacza, że może to być 1 czy 2 kolory. Powodów jest kilka. Nie chodzi nawet tyle o zachowanie prostoty (chociaż trochę też), ale o reprodukcję. Więcej kolorów będzie zdecydowanie droższe i trudniejsze w reprodukcji.
Jak od każdej reguły można spotkać wyjątki, tak i tutaj sytuacja ma się identycznie. Zastanów się jednak wcześniej kilka razy jeśli chesz zaszaleć z kolorami.

Dodatkowo każde logo musi być widoczne nawet jeśli całe będzie jednokolorowe. Dobrym nawykiem jest też sprawdzanie czytelności logo zarówno w negatywie jak i w pozytywie.

Wykorzystaj moc negatywu

Negatyw w logo to potężne narzędzie pozwalające przekazać wiele treści przy jednoczesnym zachowaniu prostoty. Weźmy na warsztat logo FedEx. Na pierwszy rzut oka widać tylko napis, ale wystarczy dłużej spojrzeć i nagle naszym oczom ukazuje się ukryta strzałka między literami ‘Ex’, która kojarzy się z wysyłką. Inny przykład to logo Carrefour

pobrane 300x95 - Zasady dobrego logo

Na koniec pamiętaj, że zasady są po to, aby je łamać.. ale wtedy, gdy może to mieć sens:)