Cześć! Długo się nie widzieliśmy i chyba jeszcze bardziej nie spisaliśmy na straty. Dziś chcę podzielić się z Wami całym moim doświadczeniem, które zdobyłam rysując na tym blogu przez ostatni rok. Pochopny!
Chciałbym się nim pochwalić dużą ilością, a nawet jako aplikacja do gazet, magazynów, portali informacyjnych, książek, które codziennie mogą docenić dziesiątki tysięcy ludzi... ale doświadczenie jest skromne i składa się jednej gazety dla emerytów i tego bloga.
Nie powiem Ci, że „trzeba to zrobić w ten sposób i nic więcej”… chociaż w zasadzie nigdy tego nie powiedziałem i po prostu podzielę się swoim doświadczeniem w tworzeniu ilustracji do artykułów na blogu
Co to jest ilustracja
Dowolną interpretację tego terminu zostawmy w głębi głowy i zwróćmy się do globalnej sieci.
Ilustracja to rysunek lub inny obraz objaśniający tekst; można tu uwzględnić fotografie, ryciny i wiele innych elementów.
Celem rysunku jest zazwyczaj podkreślenie danego tematu, a nie pokazanie formy, wyjaśnienie lub pokazanie treści tekstowej w sposób graficzny.
Służy do przekazywania emocji, atmosfery tworzonej w tekście, wizerunku bohaterów opowieści, demonstracji obiektów, instrukcji krok po kroku i schematów w dokumentacji technicznej.
Jak wykorzystywane są ilustracje
Gdzie najczęściej je spotykamy? IMHO takim priorytetem są książki dla dzieci, potem strony internetowe, gazety, czasopisma, inne książki.
W gazetach pojawiają się głównie komiksy naśmiewające się z opisanej w tekście sytuacji, natomiast w magazynach częściej pojawiają się kolaże w formie zdjęć oraz, w razie potrzeby, rysunki, które można kupić na stockach.
Prawdziwą skarbnicą są książki i strony internetowe dla dzieci. Panuje opinia, i nie tylko moja, że do rysowania ilustracji do książki przyjmie się osoba, której portfolio jest wykonane w tym samym stylu i o podobnej tematyce, niż ktoś, kto ma mieszankę stylów, technik, tematów itp.
I jaki z tego wniosek? Zgadza się, jeśli chcesz zarabiać, rysując obrazy towarzyszące tekstowi, musisz dostosować się do rynku, a nie rynek do ciebie.
Tak naprawdę, gdy zrozumiesz zasady gry i przestaniesz stawiać opór, wystawiać swojego „D'Artagnana” na pokaz, to możesz liczyć na pracę w tym obszarze.
Moim zdaniem sytuacja jest inna w przypadku witryn. Jest ich wiele i pomimo tego, że trzeba jeszcze dostosować się do klienta, nikt Ci tutaj nie zabrania, a wręcz zaleca jak najbardziej urozmaicenie swojego portfolio, aby klient mógł wybrać styl, w jakim chce mu towarzyszyć ilustracje na swoim portalu.
Podsumowując, aby narysować ilustrację komercyjną, a tak się nazywają rysunki płatne, musisz wybrać obszar, w którym chcesz zastosować swoje talenty, stworzyć bogate portfolio w tym samym stylu ( dla wąskiej dziedziny, jak książki dla dzieci) lub w inny sposób ( dla witryn i projektów o szerokiej tematyce), aby zademonstrować klientowi swoje doświadczenie.
Mam nadzieję, że oboje rozumiemy, że dzisiaj pytanie o to, jak rysować w ogóle, zostanie pominięte i porozmawiamy o idei i koncepcji, a nie o formach i liniach. Pospieszył... znowu!
1. W pierwszych wierszach musisz zrozumieć, a raczej zapytaj, jak klient widzi ilustrację . Jeśli odpowiedź jest w stylu „Według Twojego uznania”, to uważaj się za szczęściarza, podczas gdy inni z góry tworzą w głowie obraz i narzekają, gdy nie odpowiada temu, co wyszło spod Twojego pióra.
Jestem oczywiście swoim własnym klientem i wykonawcą, ale gdybym zamawiał ilustracje „dla kogoś”, to zdecydowanie powiedziałbym, co dokładnie ma zostać narysowane i jak to widzę, a nie „jest tekst – ilustruj”.
2. Ogólnie moje ilustracje opierają się na napisach , ale nie zawsze wystarczające informacje, aby uzyskać jasny obraz. W innych przypadkach czytam tekst ponownie i wyodrębniam zdanie z całego akapitu, a jeszcze lepiej z kontekstu i próbuję je jakoś przebić.
3. Mam bloga i według moich obserwacji większość ilustracji rysowanych na potrzeby stron internetowych ma charakter rozrywkowy i chcą rozśmieszyć czytelnika, rozrzedzić atmosferę, dać mu chwilę wytchnienia.
Duże publikacje internetowe, takie jak adme, lookatme i inne, często wymagają konkretnych i kreatywnych rysunków. Z książkami jest łatwiej – po prostu rysunek ilustrujący tekst, bez żadnych aluzji i tajemnych znaczeń.
4. Ilustracje na stronach internetowych potrzebne są przede wszystkim po to, aby czytelnik nie zbłądził czytając tę kartkę. Dlatego im więcej rysunków, tym lepiej. Ale uważaj, narysowanie ośmiu ilustracji do jednego artykułu jest trudne, ale możliwe, a narysowanie ośmiu ilustracji do dziesięciu artykułów to pieprzone samobójstwo (wiem T_T).
To samo dotyczy książek. Jeśli klient ściśle określa liczbę rysunków na centymetr kwadratowy, to przede wszystkim należy ocenić, czy da się to zrobić. Jak oceniać? Podejmij się zadania testowego, może nawet nie płatnego, bo jeśli Ci będzie odpowiadać, to podejmą z Tobą współpracę, a jeśli nie, to kupisz sobie WOLNOŚĆ od niewoli przy projekcie, który w przyszłości będzie Ci się kojarzył tylko z bólem .
5. Kolor ilustracji nadaje nastrój całemu tekstowi.. Jasne i jasne rysunki kojarzą się z dobrym nastrojem i wskazują, że tekst jest „przyjazny”, nie napisany przygnębiającymi kolorami, nie próbuje straszyć. Przeciwnie, ciemne kolory mogą zagęścić kolory, aby przekazać całą grozę opisaną w tekście.
6. Czarno-białe rysunki powstają szybciej niż kolorowe, ale nie tak szybko, jak się wydaje na pierwszy rzut oka. ...No cóż, ta rada jest przydatna, może tylko dla mnie (przy moim stylu rysowania...), ale ostatnio zaczynam coraz częściej dodawać kolory i... nie powiedziałbym, że rysuję zauważalnie dłużej . To tyle, rada dla tych, którzy jeszcze nie umieją malować i myślą „mój styl będzie czarno-biały” – tak jak myślałam.
7. Zoptymalizuj swoje plecy. Często na ilustracji obiekt jest ważny, a tło jest zupełnie nieistotne. Tło może być abstrakcyjne lub po prostu pastelowe. Jeśli klient nie wymaga od Ciebie takiej „Atmosfery”, to nie przejmuj się – zaoszczędzisz sobie mnóstwo czasu.
8. Staraj się trzymać jednego rysunku . Tak, bardzo dziwna rada, na którą można odpowiedzieć zwrotem: „Kubek jest czysty!”. Ale jesteśmy początkującymi artystami (jeśli nie, to co tutaj robisz?) i każdy nasz rysunek uczy nas czegoś nowego i po każdej pracy rysujemy coraz lepiej.
9. W przypadku stron internetowych, gazet, czasopism: wybierając jeden styl rysowania, czasami istnieje możliwość wymyślenia postaci. Jeśli pamiętasz ilustracje do gazety, których nieustannie szukałem jako dziecko, to była taka postać jak Pietrowicz. Szczerze mówiąc, strasznie go to wciągnęło, ale uchwyciło, jak ta sama postać wpada w różne sytuacje.
Tak też zrobiłem na swoim blogu. Mam dwóch głównych bohaterów (no cóż, jestem ich zastępcą), którzy ilustrują wszystko, co dzieje się w moich artykułach.
10. Jeśli tekst ma charakter opisowy, narysuj obiekt, jeśli ma charakter narracji, narysuj akcję. Teraz wyjaśnię - jeśli mi opiszą, jaki wspaniały wazon ma mój sąsiad, to ja narysuję wazon, jeśli mi powiedzą, jak ten wazon do niego trafił, to mogę go narysować całą drogę z fabryki do domu , jak został wykonany, upuszczony, sklejony, przetransportowany itp.
11. Nie jest to najbardziej kategoryczna rada, moim zdaniem im więcej szczegółów tym lepiej.. Tak, duża ilość drobiazgów wydłuża proces produkcji, ale jednocześnie pomaga czytelnikowi lepiej odczytać obraz. Oczy skupiają się na tej czy innej rzeczy, a obraz osadza się w głowie. Ale granica pomiędzy umiarkowaną ilością a mocnym nadmiarem jest cienka... tę granicę musisz znaleźć sama ;)
Cóż, nie ma tu zbyt wiele, ale jak powiedziałem, to moje doświadczenie w tworzeniu ilustracji i kilka punktów, które osobiście zauważyłem.
Mam nadzieję, że Ci się podobało i zdobyłeś przydatną wiedzę.
I tak, nie zapominaj, że do tworzenia cyfrowych ilustracji potrzebny jest tablet graficzny)) Ostatnio przeglądałem Aliexpress, jest ich wiele tablety w niskich cenach. Kupowałem już rzeczy od Chińczyków i w najbliższej przyszłości planuję kupić sobie zupełnie nowy tablet... w przeciwnym razie mój vacom jest już całkowicie wyczyszczony T_T
Wszyscy kreatywni przyjaciele w nastroju!
Przez ostatnie tygodnie próbowałem zastosować filtry w skali szarości, ciekaw był efekt i to, co potrafią. Ku mojemu zaskoczeniu odkryłem narzędzie Szerokość w programie Illustrator CS5. Mając te dwa narzędzia, postanowiłem je dobrze wykorzystać i stworzyć ilustrację w stylu Roya Lichtensteina.
Istnieje sporo tutoriali na temat tworzenia podobnego obrazu, ale zdecydowałem się sam przez to przejść. Inne zajęcia mnie nie interesowały, bo. moim zajęciem była tylko rozrywka. Dlatego jeśli nagle skopiowałem czyjąś technikę, to naprawdę nie wiedziałem. Ponadto całkiem miło byłoby umieścić na tej stronie lekcję tworzenia ilustracji w podobnym stylu.
Roy Lichtenstein (27 października 1923 - 29 września 1997) był amerykańskim artystą pop-artu. Sukces artysty przyniósł jego twórczość na tematykę komiksów i grafik magazynowych. Wikipedia
Krok 1
Zacznijmy od pracy w programie Illustrator.Otwórz zdjęcie w programie Illustrator, z którym będziesz pracować. Ten znalazłem na Shutterstock, ale możesz wybrać dowolny inny.
Krok 2
Wybierz narzędzie Ołówek (N) i zacznij rysować na zdjęciu, używając go jako tła. Zacząłem od oczu. Dla uczniów użyłem Ellipse (L).
Krok 3
Kontynuuj rysowanie za pomocą narzędzia Ołówek (N) i narzędzia Pióro (P), aby uzyskać większą precyzję, ale nie daj się ponieść emocjom, ponieważ perfekcja nie jest tutaj wymagana.
Krok 4
Użyj narzędzia Ołówek (N), aby obrysować włosy dziewczynki:
Krok 5
Następnie za pomocą tych samych narzędzi dodaj kilka szczegółów włosów:
Krok 6
W rezultacie otrzymaliśmy elementy wektorowe do stworzenia dziewczynki. Możesz dodać więcej elementów według własnego uznania, w zależności od używanego zdjęcia.
Krok 7
Usuń zdjęcie tła, aby działać tylko z elementami wektorowymi:
Krok 8
Jednym z moich ulubionych narzędzi w programie Illustrator jest narzędzie Szerokość (Shift+W). Umożliwia zmianę szerokości obrysu części naszego pociągnięcia. Spójrz, to jest po prostu fantastyczne!
Krok 9
Używając tego samego narzędzia, zmień szerokość niektórych pociągnięć w następujący sposób:
Krok 10
Czas dodać trochę koloru. Użyłem beżu do skóry, żółtego do włosów, białego do oczu i czarnego do szczegółów. Niech bluzka będzie zielona:
Krok 11
Przejdźmy teraz do Photoshopa. Otwórz teksturę papieru w Photoshopie. Znalazłem teksturę w tym samym miejscu co dziewczyna, na Shutterstock.
Krok 12
Na teksturze papieru utwórz warstwę i nałóż zdjęcie dziewczyny za pomocą opcji mieszania Pomnóż. W tym przypadku przyda nam się do importowania wektora z programu Illustrator i tworzenia półtonów.
Krok 13
Odetnij nadmiar części zdjęcia wystających poza krawędzie tekstury papieru. Najlepszym sposobem na osiągnięcie tego jest użycie maski warstwy:
Krok 14
Utwórz nową warstwę poniżej warstwy zdjęć dziewczyny, ale w tym samym folderze z naszą maską. Zmień tryb mieszania nowej warstwy na Pomnóż i wypełnij ją kolorem niebieskim:
Krok 15
Skopiuj obraz wektorowy w programie Illustrator i wklej go do Photoshopa. Podczas wklejania skorzystałem z opcji „Inteligentne obiekty”, ponieważ pozwala to na edycję wektora w dowolnym momencie bezpośrednio w Photoshopie.Jak zapewne zauważyłeś, ustawiłem krycie nowej warstwy na 70%, co pozwala ustawić żądaną pozycję warstwy:
Krok 16
Po znalezieniu właściwej lokalizacji ustaw warstwę nieprzezroczystą (100%):
Krok 17
Zmień kolejność warstw tak, aby zdjęcie dziewczynki znalazło się na warstwie wektorowej. Następnie zmniejsz nasycenie zdjęcia (Obraz > Dopasowania > Zmniejsz nasycenie). Otrzymasz czarno-białe zdjęcie, takie jak moje.Następnie przejdź do poziomów edycji (Obraz > Dopasowania > Poziomy).
Zmień kanał czarny na 60, a kanał biały na 195.
Ustaw nasz tryb mieszania warstw na Pomnóż:
Krok 18
Wybierz polecenie Filtr > Piksele > Półtony kolorów. W oknie, które zostanie otwarte, określ maksymalny promień 15 i wartość 199 dla wszystkich kanałów.Uwaga: W zależności od rozmiaru ilustracji zmień proporcjonalnie maksymalny promień.
Krok 19
W rezultacie otrzymujemy taki obraz. Ilustracja jest już prawie gotowa, pozostaje nadać jej stary, odrapany wygląd. Musimy także oczyścić zęby i oczy z półtonów:
Krok 20
Umieść teksturę papieru na wszystkich warstwach naszej ilustracji i ustaw tryb mieszania na Linear Burn:
Wniosek
Ilustracja jest gotowa. Tutaj zęby i oczy zostały już oczyszczone z półtonów.W ten sam sposób możesz użyć półtonów do stworzenia ilustracji w stylu Roya Lichtensteina, jak w naszym eksperymencie.
Dziękuję za uwagę.
Ten wątek jest tłumaczeniem
Wciąż z tą samą stałością otrzymuję listy: „Chcę zostać ilustratorem, od czego zacząć?”, „Jak nauczyć się rysować?”, „A jeśli nie umiem rysować, czy mam szansę zostać ilustratorem?” ilustrator?
Na pierwszy rzut oka pytania są dość dziwne. Nie umiesz rysować, nie chcesz zaczynać i próbować, nie chcesz nawet nauczyć się rysować - jakim ilustratorem jesteś? A po co ci to? Ale wszystko nie jest tak proste, jak się wydaje na pierwszy rzut oka.
Niedawno natknąłem się w sieci na wyższą szkołę prywatną w Hamburgu, która kształci wyłącznie ilustratorów w wąsko ukierunkowany sposób. Już na pierwszych stronach „O mnie” piszą, że ilustrator to projektant, który potrafi rysować.
Poczułem się zabawnie, bo jestem grafikiem i otrzymałem, bez fałszywej skromności, dobre wykształcenie. Przez lata szkolenia nieustannie nam wmawiano, że każdy projektant powinien umieć rysować, obsługiwać aparat, rozumieć typografię i sztukę.
Oprócz takich przedmiotów jak typografia uczono nas rysunku i fotografii – rzeczy, które znalazły odzwierciedlenie w moich wyobrażeniach o ilustracji. Wpływowi fotografii na ilustrację poświęciłem od razu kilka rozdziałów w mojej książce „Zawód – ilustrator. Nauka kreatywnego myślenia”.
Powiedzenie, że ilustrator to projektant, który potrafi rysować, wydało mi się bardzo dziwne. Na początku zdecydowałem, że ludzie po prostu nie wiedzą, czego uczą się współcześni projektanci. Ale chyba zrozumiałem, o co im chodziło. Mianowicie, że ilustrator to profesjonalista posiadający szeroki wachlarz umiejętności i technik obrazowych, które często można już nazwać raczej projektowymi.
Rzeczywiście, współczesny ilustrator nie jest już przywiązany do tradycyjnych technik wizualnych: nie musi pracować wyłącznie farbami czy ołówkami na papierze. Nie musi nawet być bardzo dobry w rysowaniu. Wystarczy umieć posługiwać się papierem i nożyczkami, drewnem i dłutem, tkaniną i maszyną do szycia, aby móc rysować jedynie na poziomie konturów i szkiców, a jednocześnie być ilustratorem nie mniej skutecznym i atrakcyjnym rynkowo niż koledzy pracuje w technikach tradycyjnych.
Dziś chciałbym zwrócić Waszą uwagę na techniki współczesnej ilustracji.
Na pytania typu „Od czego powinien zaczynać przyszły ilustrator?” Już odpowiedziałem, a poniżej możesz kliknąć link do mojej odpowiedzi. A na pytanie, czy ktoś zostanie ilustratorem, jeśli nie nauczy się rysować tradycyjnie, naukowo, odpowiem twierdząco: tak. Bo jeśli nie ma papieru i światłocienia to warto spróbować swoich sił w jakiejś niekonwencjonalnej technice, jeśli mimo wszystko chcemy profesjonalnie zająć się ilustracją.
Dla inspiracji pokażę Wam piękną książkę – zbiór prac ilustratorów i artystów pracujących w nietradycyjnych technikach ilustracyjnych.
Zarezerwuj na amerykańskim Amazonie:
Niemiecka książka Amazon: Zabawa ilustracyjna: Pragnienie tego, co niezwykłe
Okładka wykonana jest na bardzo pięknym, teksturowanym papierze z prawdziwymi naklejkami. 
A tak wygląda treść - lista prezentowanych ilustratorów. 
Ilustracje wykonane palnikiem. Autorka: Genevieve Dionne 
Ilustracje-instalacje z różnych materiałów. Autorka: Stephanie Dotson 
Ilustracje-instalacje z papieru i drewna. Autor: Aj Fosik 
Ilustracje na starych opakowaniach, kopertach i nie tylko. Napisane przez Melvina Galapona 
Czy jesteś gotowy na ryzyko związane z projektowaniem stron internetowych? Najprawdopodobniej nie każdy z Was udzieli odpowiedzi twierdzącej. Istnieje jednak ryzyko, że z czasem stało się to swego rodzaju standardem, trendem we współczesnym projektowaniu stron internetowych. Nazywamy to „czymś” ryzykiem tylko dlatego, że ważne jest nie tylko fantazjowanie na temat motywu i łączenie różnych elementów, ale także wyobrażenie sobie, jak będzie to odpowiednie dla projektu Twojej witryny internetowej. Polega na połączeniu zdjęć i ilustracji w jeden projekt.
Fotografia jest obecnie wykorzystywana do nadania projektowi realistycznego wyglądu, możliwości skupienia uwagi zwiedzającego na tym, że mówimy o rzeczach dość ważnych i niezbędnych w życiu każdego człowieka. Ilustracja lub rysunek częściej nadaje się do wąsko ukierunkowanych projektów i podświadomie kojarzy się u człowieka z działaniem, „kreskówkarstwem”, a nawet frywolnością.
Ale projektowanie stron internetowych to sztuka innowacji i profesjonalizmu w edytorach graficznych. Dlatego całkiem możliwe jest połączenie dwóch rodzajów obrazów. Dzisiaj przyjrzymy się nie tylko możliwościom wykorzystania tego rodzaju obrazów przez webmasterów, ale także zawiłościom tworzenia ich w Photoshopie.
Niestandardowe akcenty
Włączanie ilustracji do projektów stron internetowych jest prawie łatwe, jeśli stanowią one elementy interfejsu użytkownika. Ale nie muszą też być rysowane ręcznie lub zawierać tylko określone przyciski/strzałki. Może to być wysokiej jakości grafika wektorowa fabuły. Na poniższych przykładach można zobaczyć, jak projekt powstał za pomocą ilustracji (www.wittycookie.com), a bohater-postać reprezentuje możliwości firmy.
Ilustracja obrazu logo
Jeśli lubisz ilustrację jako taką i planujesz skupić się na niej w swoim projekcie projektowania stron internetowych, dobrym rozwiązaniem będzie użycie ilustrowanego obrazu logo. Pierwszy projekt madebyfew.com doskonale to odzwierciedla. Co więcej, rysunki były wszędzie używane jako osobne elementy projektu w postaci kół, serpentynowych wstążek, uśmiechów, miniatur materiałów. Ponieważ strona jest poświęcona konferencji i wyświetla jej uczestników, takie zdjęcie można wykorzystać zamiast masowego fotografowania uczestników.
Inny przykład, onehappycampernj.org, jest nieco skromniejszy, ponieważ jako ilustrację wykorzystuje teksturę z elementami roślinnymi. Osobliwością jest to, że obraz został stworzony tylko dla jednej sekcji na stronie głównej. Pozwala to skupić się na informacji, ożywić witrynę i podkreślić specyfikę informacji. W jednym z poprzednich artykułów mówiliśmy już o ogromnych kolekcjach tekstur. Następnie wystarczy zmienić kolor w Photoshopie, przezroczystość.
Belgijska firma budowlana konosair.be również zdecydowała się stworzyć ilustrację nad zdjęciem. Jednocześnie ręcznie rysowane obrazy nie są już wykorzystywane w projektowaniu witryny. Jednak nawet na stronie głównej to połączenie wygląda bardzo interesująco.
Ilustracja typograficzna
Istnieje sposób na dodanie podpisów na górze zdjęcia. Ale wyobraź sobie ręcznie rysowaną typografię, a nawet animowaną typografię (archrival.com). Takiego „chipu” można użyć na istniejącym filmie lub obrazie.
Strona Steptoandson.co.uk/about/ wygląda skromniej, gdzie typografia i pary czcionek wykorzystano nie jako ilustrację, ale jako warstwę tekstową. Jednak dobrze dobrany styl sprawia wrażenie, jakby został namalowany i napisany na fotografii odręcznie, kaligrafią lub szablonem.
Opowiedzieć historię
Projekt mamyfactory.com/fr/ jest o tyle ciekawy, że rysunki są wykorzystywane dosłownie wszędzie, ale połączone z fotografiami. Stworzenie takiego projektu jest trudniejsze. Po pierwsze, będziesz potrzebować prawdziwej fotografii rąk zajętych robieniem na drutach, a po drugie, będziesz musiał dokładnie wybrać nici i robić na drutach za pomocą lassa magnetycznego w Photoshopie, a następnie przełożyć to wszystko na narysowany wygląd. Może już wymagać wtyczek, umiejętności rysowania lub prostej wiedzy o tym, jak zamienić zdjęcie w rysunek.
Projekt strony internetowej projektu Discoverphototours.com/photo-tours/ można również nazwać pięknym połączeniem ilustracji i fotografii. Tutaj zdjęcia są oprawiane w podziały stron, a wydruki, nagłówki tworzone są w formie kresek i ilustrowanej typografii.
Podobnie wygląda Gili-lankanfushi.com, którego designem są ilustrowane ikony i napisy umieszczone na górze zdjęcia Malediwów, ulotki, na pasku bocznym i w stopce, tym bardziej swoim wyglądem potęgują efekt rysowania.
Zasady wykorzystania ilustracji
Wykorzystanie ilustracji i fotografii w jednym projekcie jest okazją do rozwinięcia wyobraźni, dodania intrygi projektowi i nadania projektowi odrobiny dopracowania. Ale jednocześnie należy przestrzegać pewnych zasad. Tak, tak, niestety, ale nawet w przypadku kombinacji zdjęć i obrazów one również istnieją.
- Styl ilustracji powinien pasować do ogólnego projektu. Oznacza to, że ikony, piktogramy, a także tekst również powinny być utrzymane w jednolitym stylu.
- Lepiej jest używać ilustracji do ikon i przycisków, dodatkowych małych obrazków, ale dla wizualnego podkreślenia i interakcji z użytkownikami - tylko zdjęcia.
- Na początek utwórz szablon z ilustracjami, a następnie podkreśl go, dodając zdjęcia i filmy.
- Nie tylko obrazy, ale animowane elementy świetnie wyglądają w pobliżu zdjęć. Na przykład tmfp.co.uk; są one ledwo zauważalne w pobliżu zdjęć i w ogóle nie odwracają uwagi użytkownika od studiowania informacji.
- W formie rysunków warto stworzyć etykietę lub logo firmy i umieścić je obok lub na zdjęciach.
- Ilustracje pomagają odwiedzającemu poruszać się po witrynie, opowiadają mu historię i prowadzą użytkownika po stronach projektu.
Tworzenie ilustracji wPhotoshop
Choć „ryzyko”, o którym mówiliśmy na początku, okazało się nie takie straszne, pojawia się pytanie, jak najłatwiej stworzyć ilustrację. Z jednej strony możesz użyć clipartów (klipartów), których jest wiele w Internecie z bezpłatną licencją. Ale z drugiej strony możesz sam stworzyć rysunek.
Ważne, że jakość finalnego materiału można długo poprawiać, rozjaśniać, przyciemniać, bawić się kontrastem, kolorem. I tak, istnieje wiele stylów ilustracji, rysunek odręczny.
Ale podamy mały przykład tego, jak ogólnie można stworzyć ilustrację i jak z niej dalej korzystać. Pamiętaj, że wtedy można go zamienić na wektor lub zrobić vexel, możesz usunąć niepotrzebne detale gumką i pozostawić jedynie kontury. Na przykład potrzebujesz rysunku torebki lub butów, ale nie ma odpowiedniego clipartu ani stylu rysowania. Przetłumacz do Photoshopa, a następnie usuń wszystko, co niepotrzebne, wzmocnij linie konturu i.. voila, rysunek jest gotowy.
Weź na przykład kotka.
Otwórz Photoshopa, skopiuj zdjęcie na nową warstwę, utwórz kopię warstwy. Żeby było tło i dwie warstwy ze zdjęciem.
Wybierz ostatnią warstwę (na górze) i Rozmyj to według Gaussa. Parametr dobierany jest „na oko”, ponieważ wszystkie zdjęcia różnią się szczegółami i kolorem. Ale po kilku próbach na różnych poziomach rozmycia zobaczysz dokładnie to, czego potrzebujesz.
Następnie zastosuj właściwości warstwy - Podziel. Otrzymasz już blankiet do rysunku ołówkiem.
Teraz wszystko zależy od małych rzeczy. Skopiuj zawartość na nową warstwę (Ctrl+Shift+Alt+E) i Zmniejsz nasycenie (Korekcja obrazu-Desaturacja).
Utwórz teraz kopię tej warstwy i wybierz opcję Ściemniacz liniowy.
To wszystko. Teraz szczególnie czarne obszary można rozjaśnić z paska narzędzi. Możesz tworzyć jeszcze więcej warstw, uzyskując przezroczystość. Możesz zabarwić szare obszary za pomocą pędzla, aby uniknąć plam. Ale wszystko zależy od konkretnego materiału i Twojej wyobraźni.
Wydaje się, co teraz zrobić z niezrozumiałą ilustracją? Można go wstawić do szablonu. Wybraliśmy z kociętami, gdzie znajduje się sekcja z sekcjami i włożyliśmy naszego kociaka do jednego z nich. Dodałem więcej warstw i uczyniłem wszystko jaśniejszym. Jeśli w pobliżu użyjesz innych rysunków kociąt w różnych pozach, nadasz nieco inny styl, sprawisz, że kocięta będą bardziej konturowe, otrzymasz personifikację tematu naszego materiału. Źródło zostało zaczerpnięte stąd: templatemonster.com/ru/demo/47111.html.
Jeśli chodzi o tekst pod łapką, można go w tym miejscu rozsunąć, a tło kotka ozdobić podziałem strony. Dodatkowo dopasuj krawędź, popraw plamy za pomocą gumki, zastosuj wyostrzanie, a nawet wyślij go do programu Illustrator w celu obrysowania i wektoryzacji. Wygodniej jest przełożyć architekturę i twarze na rysunek.
Ukończenie
Całkiem możliwe jest wykorzystanie ilustracji w połączeniu ze zdjęciami w ramach projektu jednej witryny. Nawet wygląda niesamowicie, ale trudno go stworzyć, jeśli nie są dostępne dokładnie potrzebne rysunki i trzeba je stworzyć samodzielnie w edytorach graficznych. Jest to trudniejsze, jeśli z natury i życia nie jesteś zbyt dobry w rysowaniu. Jednak stworzenie ilustracji jest możliwe, wystarczy zrozumieć, jakiego stylu potrzebujesz. Jeśli jest to analogiczne do mamyfactory.com/fr/, to możesz sam narysować budynek sklepu, ale przetłumacz psa ze zdjęcia, zaznacz kontury i usuń gumką wszystko, co pojawi się w środku (kropki, artefakty, piksele).
Projektowanie stron internetowych to zawód twórczy i wymaga nie tylko czasu, ale także wyobraźni, miłości do sztuki i poszukiwania inspiracji. I wiedza też.
Od studia projektowego Al Power o tym, dlaczego dla każdej marki ważne jest opracowanie własnego stylu ilustracji i jak stworzyć dla nich przystępne wytyczne.
Ilustracja jest jedną z form projektowania. Bez określonych ograniczeń – to tylko element sztuki. Aby zapewnić przejrzystość naszych ilustracji, stosujemy wytyczne.
Po co to jest
Kluczem do zidentyfikowania Twojego stylu jest identyfikacja podstawowych wartości i uzasadnienie wykorzystania ilustracji. Kiedy utworzysz określoną sekwencję stylistyczną, będziesz mieć ogólny styl, który będzie harmonizował z Twoimi obrazami. Oznacza to, że każdy ilustrator może z łatwością pracować z Twoją platformą i mieć pewność, że nie narusza ogólnego stylu.
Aby stworzyć spójny styl, konieczne jest określenie kluczowych wskaźników, takich jak schemat kolorów czy grubość czcionki. Nie zapominaj jednak o ogólnym znaczeniu ilustracji dla stylu i funkcji, jaką pełnią na Twojej platformie.
przykład stylu ilustracji
Nie możesz po prostu podnosić i rysować
Przed rozpoczęciem jakiegokolwiek projektu ważne jest, aby zdecydować, co Ty i Twój interesariusz chcecie osiągnąć dzięki temu projektowi.
Zwykle zadaję kilka pytań, które pomagają mi i interesariuszowi lepiej zrozumieć, co chcemy uzyskać w ramach projektu.
Cele
- Dlaczego chcesz dodać ilustracje?
- Jak ocenisz projekt?
Istniejący przewodnik po stylu
Z reguły bardzo pomocny jest już istniejący przewodnik po stylu. Nie powinna opierać się na ilustracjach. Główne wytyczne projektowe i wszystko to, co wyróżnia tę markę na platformie, pomoże Ci w odpowiedni sposób skupić się na projekcie.
Musisz także zrozumieć, w jaki sposób ilustracje będą pasować do istniejącego schematu kolorów. To, że firma ma własną kolorystykę, nie oznacza, że ilustracje będą z nią dobrze współgrać. W końcu ilustracje powinny wyróżniać się na tle innych elementów interfejsu, dlatego używanie w obrazach markowych kolorów może mieć negatywny skutek.
Wartości
Jak myślisz, czy ilustracje pasują do Twojej platformy? Myślisz, że podkreślą osobowość Twojej marki? Czy będą ostre, wyraźne, zabawne, szczegółowe itd.?
W rzeczywistości jest to główna cecha tego stylu. Jeszcze zanim zaczniesz pracować, powinieneś zrozumieć, jaką rolę przypisujesz ilustracjom w interfejsie. Jak je wykorzystasz: jako przewodnik użytkownika, aby wypełnić luki lub po prostu nadać swojemu projektowi osobowość.
Moodboardy
Twórz stylowe moodboardy, które będą dobrym dodatkiem do Twojego produktu. Ułatwi to ilustratorowi zrozumienie, kiedy interesariusz wskaże palcem element stylu i powie „Chcę tego”. Oczywiście nie będzie to ostateczna decyzja, ale przynajmniej da projektantowi zrozumienie, czego od niego chcą.
Tworząc moodboard nie warto wdawać się w szczegóły. Moodboardy służą bardziej do wyznaczenia wektora kierunku dalszej pracy. Istnieje mnóstwo zasobów do badań w tej dziedzinie, takich jak Behance, Dribbble, Pinterest, iStock lub ta sama, stara, dobra wyszukiwarka obrazów Google. Wszystko po to, aby zebrać jak najwięcej informacji przed przystąpieniem do tworzenia pierwszego obszaru roboczego.
Nie spiesz się, aby od razu zabrać się do pracy. Po pierwsze, zrozum, co robisz i dlaczego.
Czas zakasać rękawy
Na szczęście stworzyłem już takie wytyczne. Kiedy dołączyłem do zespołu Globoforce, otrzymałem zadanie stworzenia ilustrowanego stylu do wykorzystania na naszej platformie white-label.
Głównym celem ilustracji było nadanie charakteru obszarom, w których nasz projekt wydawał się niedokończony. Na najbardziej podstawowym poziomie brzmiało to tak: stworzyć wspólny styl ilustracyjny, który zapewni spójność całej platformie.
Próbuj, próbuj i spróbuj jeszcze raz
Nikt nie mówi, że ten proces jest szybki i łatwy. Zbadaliśmy wiele stylów, które ostatecznie nam nie odpowiadały. Cały sens polega na badaniu pomysłów. Nic nie dzieje się na próżno, wszystkie pomysły pomagają ukształtować ostateczne rozwiązanie. To jak przeskakiwanie kolejnej przeszkody przed metą.
Niektóre style działają, inne nie. Musisz być także gotowy na odrzucenie pomysłów, które są oczywiście dobre, ale nie nadają się do Twojego projektu.
Język ilustracji
Ważne jest, aby wszyscy mówili tym samym językiem, jeśli chodzi o terminologię. Trzeba stworzyć język terminów, który będzie zrozumiały i wygodny dla każdego. Znajdź terminy, które ludzie zrozumieją. Nie ma potrzeby wchodzenia w szczegóły: wystarczy konkretny zestaw słów, który umożliwi projektantom i interesariuszom komunikację.
Nasze ikony
Aby poprawić użyteczność naszej witryny, używamy ikon. W naszym przewodniku po stylu opisujemy zasady ich używania, a także wyboru ich rozmiaru (od 12 do 64 pikseli).
ikonografia
Nasze ilustracje tekstowe
Ilustracja tekstowa pomaga zademonstrować pewną funkcję lub opisać pewne doświadczenie. Takie ilustracje cieszą oko, nie zajmują dużo miejsca na stronie i nadają indywidualności interfejsowi.
Ilustracje tekstowe
Nasze ilustracje stanu bezczynności
Ilustracje stanu bezczynności służą do wyjaśnienia funkcji, ale nigdy nie stanowią głównego tematu komponentu. W większości przypadków potrzebne są do wskazania konieczności wypełnienia pustej przestrzeni.
Ilustracje stanu bezczynności
Ilustracje scen
Ilustracje scen rozmieszczone są na większej przestrzeni i pełnią funkcję bardziej szczegółowego wyjaśnienia użytkownikowi danej cechy lub scenariusza.
Ilustracje scen
Nasze podejście
Aby ożywić interfejs, można użyć ilustracji. Służą informowaniu użytkownika i przyciąganiu jego uwagi.
Nie komplikuj
Ponieważ nasz produkt ma własną etykietę, ilustracje będą wykorzystywane dla szerokiej gamy kategorii klientów. Dlatego postanowiliśmy zachować styl tak prosty i pasywny, jak to tylko możliwe.
Użycie znaków
Powstrzymujemy się od używania znaków wszędzie. Użycie znaków rodzi pytania dotyczące rasy i płci, a biorąc pod uwagę różnorodność naszych klientów, najlepsza jest prostota.
Schemat kolorów
Nasza kolorystyka została wybrana w oparciu o cele biznesowe. Jej dyskretny charakter odzwierciedla szeroką gamę naszych klientów. Naszym celem jest zadowolić użytkowników ilustracjami, a nie zagłębiać się w zrozumienie kolorystyki marki.
Balans kolorów
Ogólnie rzecz biorąc, unikaliśmy stosowania wielu kolorów na ilustracjach. Staraliśmy się podkreślić naszą „duchową biel”, resztę kolorów w schemacie wyłącznie dla równowagi.
Naszym głównym kolorem jest biel. Spróbuj użyć go do kluczowych elementów ilustracji.
Powoduje
Koloru nie należy dobierać subiektywnie. Ilustracje powinny być pasywne i nie przyciągać zbyt dużej uwagi. Kolory można stosować, ale wybiórczo. Styl powinien być schludny i dyskretny.
Schemat kolorów ilustracji stanów nieaktywnych
W przypadku opcji stanów nieaktywnych użyliśmy naszego „upiornego białego” koloru i obrysu. Używa tylko cieni i żadnych kolorów. Aby zmniejszyć obciążenie wizualne, zastosowaliśmy przezroczystość 50%.
Ilustracja stanu pustego
Udar
Zwykle używamy skoku sześciu pikseli. W obecności drobnych szczegółów wybierz obrys trzech pikseli. Wszędzie używamy również zaokrąglonych narożników. Kolor obrysu jest zawsze taki sam – #8A8EA0.
Więc
Głównym celem wytycznych dotyczących ilustracji jest stworzenie spójnego, rozpoznawalnego stylu, który odzwierciedla podstawowe wartości Twojej platformy. Aby to zrobić, musisz wykonać trzy kroki:
- Określ, dlaczego potrzebujesz ilustracji.
- Stwórz styl, który będzie odpowiadał Tobie i Twoim celom biznesowym.
- Udokumentuj swój styl, aby móc go łatwo sklonować na potrzeby innych koncepcji.
Można obejrzeć całe badanie.