Retro Comic Book Art: Wykorzystanie kropek Ben Day w projektowaniu stron internetowych

Opublikowany: 2019-07-12

Jako projektanci stron internetowych zawsze szukamy nowych i kreatywnych pomysłów do dodania do naszych stron internetowych. Na szczęście nie jest trudno znaleźć inspirację. Na przykład sztuka komiksowa w stylu retro zawsze powraca. Czasami jest to typografia, innym razem filtry fotograficzne. Ostatnio w wielu miejscach pojawiają się tekstury i ilustracje z kropkami Ben Day. Chcesz je wypróbować?

W tym artykule wyjaśnimy pochodzenie kropek Ben Day i jak je wykonać samodzielnie. Dodatkowo mamy kilka przykładów wykorzystania tej techniki wizualnej w projektowaniu stron internetowych.

Kropki Ben Day i kropki półtonowe

Terminy „kropki Ben Day” i „retro komiks art” są zwykle używane zamiennie. Właściwie kropki Ben Day były pierwsze. Benjamin Henry Day Jr. stworzył je w 1879 roku, aby obniżyć koszty druku kolorowego. Są techniką, która umieszcza na siatce równie odległe kropki. Czerwone kropki nadrukowane na białym dają różowe, niebieskie i żółte kropki na zielono.

Kropki Ben Day zostały zainspirowane kropkami półtonowymi, które były używane do druku litograficznego i fotograficznego w czerni i bieli. Oba style kropek są ułożone na kwadratowej siatce, ale kropki półtonowe mają różne rozmiary, podczas gdy kropki Ben Day są takie same.

Kropki Ben Day, komiksy i Roy Lichtenstein

W latach trzydziestych XX wieku komiksy weszły na scenę w wielkim stylu, a kropki Ben Day były techniką drukowania. Kropki Ben Day nie były dokładnie sztuką, dopóki Roy Lichtenstein nie zainspirował się ich ogólną wyjątkowością w latach 60. XX wieku. To właśnie praca Roya Lichtensteina ze sztuką komiksową sprawiła, że ​​kropki Ben Day znalazły się w centrum uwagi. To, co zrobił Lichtenstein, to skopiowanie małych fragmentów stron komiksów z pulpy i przekształcenie ich w arcydzieła na dużą skalę.

Chociaż Roy Lichtenstein używał kropek przypominających kropki Ben Day, były one nieco inne. Historycy sztuki powiedzą ci, że bardziej odpowiednio nazywa się je „kropkami Lichtensteinu”. Główna różnica polega na tym, że kropki Ben Day były małe i miały kwadratową siatkę, podczas gdy kropki Lichtensteina były na przesuniętej ukośnej siatce i były znacznie większe.

źródło obrazu Radu Bercan / shutterstock.com

Powstanie retro komiksowej sztuki

Sztuka Roya Lichtensteina stała się synonimem sztuki komiksu retro. Wielu artystów skopiowało technikę Lichtensteina. Wielu projektantów wykorzystywało kropki komiksowe w swoich kreacjach do schematów brandingowych i materiałów marketingowych. Teraz możesz dodać kropki Ben Day lub kropki Lichtenstein do swoich stron internetowych.

Przewiń, aby dowiedzieć się, jak tworzyć własne kreacje z kropkami Ben Day. Ostateczne projekty, które osiągniesz, będą obejmować różne techniki; kropki półtonowe, kropki Ben-Day i kropki Lichtensteina. Podsumowując, wszystkie są w stylu retro komiksowym.

Weźmy się za to.

Jak stworzyć retro komiksową grafikę w Photoshopie

Kropki półtonowe są tak powszechne, że Photoshop ma dla nich filtr i działa z każdym obrazem. To, co robi ten filtr, to zamienianie kolorów obrazu w kropki. Rozkład kątowy kropek jest kontrolowany przez kanały kolorów. Kiedy zastosujesz filtr, twój obraz składa się teraz z cyjan, magenta, żółtych i czarnych kropek. Jeśli zastosujesz filtr półtonów do czystego koloru, takiego jak czerwony (#ff0000), zielony (#00ff00) lub niebieski (#0000ff), filtr nie będzie działał, ponieważ nie będzie miał kolorów, od których można by oddzielić.

Aby stworzyć prawidłowe kropki Ben Day i Lichtenstein, potrzebujesz programu Adobe Illustrator. Kliknij tutaj, aby przejść dalej.

Jak sprawić, by zdjęcie wyglądało jak retro komiksowa grafika w półtonowych kropkach za pomocą Photoshopa

1. Wybierz obraz, który chcesz zamienić w kropki w stylu komiksowym.

Wybrałem tego śmiesznie wyglądającego faceta z darmowej strony ze zdjęciami, Gratisography. Kliknij tutaj, jeśli chcesz użyć tego samego obrazu do śledzenia. Otwórz obraz w Photoshopie i wyśrodkuj go na płótnie.

Zrzut ekranu przedstawiający zabawnego mężczyznę gotowego do przekształcenia w teksturę w stylu komiksowym

2. Powiel warstwę dwukrotnie i ukryj pierwszą.

Aby zduplikować, gdy zaznaczona jest pierwsza warstwa, kliknij prawym przyciskiem myszy i wybierz „Powiel warstwę” lub kliknij Command + J na Macu i Ctrl + J na PC. Zmień ich nazwy, aby nie stracić każdego z nich. Ustaw opcję mieszania górnej warstwy na „twarde światło” i zmniejsz krycie do około 40%. Kolory zmienią się radykalnie, co pomoże uzyskać ziarnisty wygląd punktów półtonowych.

Zrzut ekranu przedstawiający zabawnego mężczyznę zamienianego w komiks za pomocą Photoshopa

3. Pogrupuj dwie górne warstwy i zamień je w inteligentny obiekt.

Zrzut ekranu akcji Photoshopa, aby zmienić obraz w komiks

4. Zastosuj filtr punktów półtonowych do obiektu inteligentnego.

W wyskakującym okienku Ustawienia półtonów kolorów wybierz maksymalny rozmiar piksela na 13 i kanały w różnym stopniu. Możesz bawić się nimi, aby zobaczyć różne efekty.

zrzut ekranu akcji Photoshopa przedstawiającego mężczyznę zamienianego w komiks

Zrzut ekranu z filtrem półtonów kolorów zastosowanym do obrazu śmiesznego mężczyzny

5. Powiel dolną warstwę i przenieś ją na górę.

Zastosuj do niego filtr „Znajdź krawędzie” i dostosuj poziomy, aby lepiej widzieć kontury. Aby to osiągnąć, przesuń czarny trójkąt maksymalnie w prawo, a biały w lewo.

Zrzut ekranu akcji Photoshopa z filtrem znajdowania krawędzi

zrzut ekranu panelu regulacji

zrzut ekranu korekty filtra Photoshopa

6. Użyj ustawień, aby zmienić warstwę na czarno-białą.

Ustaw krycie warstwy dopasowania na 30%. Na koniec ustaw opcje warstw warstwy „znajdź krawędzie” na „nakładanie”.

zrzut ekranu warstwy dopasowania programu Photoshop

zrzut ekranu warstw dopasowania w Photoshopie

Gotowy projekt!

Jak stworzyć komiksowy styl retro ze zdjęciem w Photoshopie

Jak stworzyć tło komiksu w stylu retro za pomocą Photoshopa

1. Znajdź kolorowe tło, które ma ładny wzór lub gradient.

Otwórz obraz na pulpicie programu Photoshop i wyśrodkuj go na ekranie.

zrzut ekranu kolorowego tła w Photoshopie

2. Odblokuj warstwę tła, zduplikuj ją i ukryj dolną.

Na górną warstwę nałóż filtr półtonowy. Dostosuj parametry w wyskakującym okienku filtru punktowego półtonów, aby uzyskać różne efekty

Zrzut ekranu filtra półtonów kolorów w Photoshopie

3. Gotowy projekt!

Tło w kropki półtonowe wykonane w Photoshopie

Jak stworzyć tło komiksu w stylu retro za pomocą programu Illustrator

Jak wspomniałem wcześniej, kropki półtonowe mają różne rozmiary, aby odtworzyć kontrast na obrazie. Filtr Photoshop, którego użyliśmy powyżej, jest idealny do tego efektu. Ale jeśli chcesz utworzyć kropki o równym rozmiarze, takie jak kropki Ben-Day lub kropki Lichtensteina, musisz użyć programu Adobe Illustrator i zintegrowanego kreatora wzorów. Jak wspomniałem powyżej, kropki Ben Day są na siatce kwadratowej, a kropki Lichtensteina są na przesuniętej siatce po przekątnej. Oba można osiągnąć za pomocą kreatora wzorów w programie Illustrator.

Jak stworzyć wzór kropki Ben-Day za pomocą programu Illustrator

1. Utwórz nowy projekt w programie Illustrator.

Rozmiar tak naprawdę nie ma znaczenia. Wykorzystaliśmy 600 x 350 px.

Zrzut ekranu nowych ustawień projektu w programie Adobe Illustrator

2. Wybierz narzędzie Zaokrąglony prostokąt.

Kliknij raz obszar roboczy i ustaw rozmiar swojego kształtu. Zrób to 15px na 15px z promieniem narożnika 7,5 ox. Zmień kolor koła na niebieskie wypełnienie i bez obrysu.

zrzut ekranu narzędzia Zaokrąglony prostokąt w Photoshop

3. Kliknij 'obiekt' na górnym pasku menu i wybierz 'wzór', a następnie 'zrób'.

Zrzut ekranu kreatora wzorów w Photoshopie

4. Dostosuj preferencje tak, aby kropki znajdowały się na kwadratowej siatce.

Oto preferencje, które musisz wybrać:

  • Wybierz typ kafelka do siatki
  • Sprawdź rozmiar płytki do sztuki
  • Ustaw odstępy H i odstępy V na 15 pikseli na 15 pikseli
  • Wybierz Kopie do 9 x 9

Gdy zobaczysz wzór jak na poniższym obrazku, kliknij Gotowe. Spowoduje to automatyczne zapisanie wzoru w panelu Próbki.

Zrzut ekranu wzoru Ben Day w Photoshopie

Jak stworzyć wzór kropki Lichtensteinu za pomocą programu Illustrator

Ten wzór wykonuje te same kroki, co ten powyżej i zmienia się tylko wtedy, gdy nadejdzie czas na dostosowanie preferencji w kreatorze wzorów. Otwórz preferencje wzoru Ben-Day i naciśnij „Zapisz kopię”. Nazwij nowy wzór „Kropki Lichtenstein”. Po kliknięciu OK zostanie zapisany jako kopia w panelu próbek. Zamknij wzór kropek Ben-Day. Wróć do panelu Próbki, otwórz wzór kropek Lichtensteina. Po najechaniu na niego zobaczysz wyskakujące okienko z nazwą wzoru. W preferencjach zmień tylko typ układu na „Cegła po wierszu” i kliknij Gotowe.

zrzut ekranu z zapisywania wzoru w Photoshopie

Zrzut ekranu kreatora wzorów w Photoshopie

zrzut ekranu kreatora wzorów w Photoshopie

Jak dodać wzory retro komiksów do kształtów?

Teraz, gdy stworzyłeś własne wzory Retro Comic Book, możesz zastosować je do dowolnego kształtu w dowolnym momencie. Najpierw musisz zapisać próbki wzorów, aby móc je dodać do dowolnego przyszłego projektu.

1. W panelu Próbki wybierz oba utworzone przez nas nowe wzory.

Kliknij ikonę biblioteki próbek i wybierz „Zapisz próbki”. Nazwij nowe próbki „Wzór retro komiksu” i kliknij OK.

zrzut ekranu panelu próbek w Photoshopie

2. Kiedy tworzysz nowy projekt i chcesz użyć tych wzorów, przejdź do panelu Próbki.

Nie zobaczysz tam naszych nowych próbek, więc musisz je zaimportować. Jeszcze raz kliknij ikonę biblioteki próbek i przewiń w dół do „zdefiniowanych przez użytkownika”, a następnie „Wzór retro komiksu”. Otworzy się nowe okno z próbkami i zwykłymi kolorami z dołączonymi wzorami komiksów. Teraz są gotowe do użycia na dowolnym kształcie.

zrzut ekranu biblioteki próbek w Photoshopie

3. Stwórz nowy kształt i wypełnij go jednym z wzorów.

Rozmiar kropek będzie zależał od rozmiaru tworzonego kształtu. Maksymalny rozmiar kształtu jest kontrolowany przez rozmiar obszaru roboczego.

Im mniejszy kształt, tym większe kropki i odwrotnie. Jeśli używasz małego kształtu i czujesz, że kropki są za duże, kliknij prawym przyciskiem myszy wzór wewnątrz kształtu i wybierz „przekształć”, a następnie „skaluj”. Aby kropki były bardzo małe, wybierz następujące parametry.

  • Mundur: 10%
  • W opcjach: zaznacz Transform Patterns

Wypróbuj różne parametry opcji „jednolite”, aby uzyskać różne rozmiary kropek.

zrzut ekranu kształtu z wzorem w Photoshopie

zrzut ekranu wzoru wewnątrz kształtu w Photoshopie

4. Aby stworzyć kształt gwiazdy w stylu Retro Comic Book, utwórz nowy projekt o wymiarach 1000 px na 1000 px.

W panelu kolorów kliknij czarny dla obrysu i wzór Lichtensteinu dla wypełnienia. Wybierz kształt gwiazdy i kliknij na płótnie, aby się pojawił.

zrzut ekranu komiksowego wzoru kropki na gwieździe

Pomysły na wykorzystanie retro komiksów w projektowaniu stron internetowych

Trend komiksowy wydaje się rosnąć. Oczywiście nie wszystkie marki skorzystają z tego stylu kreatywności. Dla zabawnych, kochających kolory marek, kropki Ben Day i grafiki inspirowane Lichtensteinem są idealne na powiew świeżego powietrza. Najlepszym zastosowaniem wzoru w komiksie jest kropka jako tło, na innym kolorze lub bez. Podobnie, spróbuj użyć dużych dymków jako separatorów lub wykrzykników w stylu komiksowym z treścią. Możesz tworzyć własne, korzystając z powyższych samouczków lub pozyskiwać już zaprojektowane obrazy z Freepik.

Używanie Retro Comic Book Art z Divi

Zrzut ekranu półtonowego tła z Divi

zrzut ekranu strony internetowej divi w stylu komiksu retro

Poniższe projekty zostały zrealizowane dzięki projektom komiksowym pochodzącym z Freepik. Jak widać, projektanci pozostawili pewną swobodę w projektowaniu rozmiarów kropek. Niemniej jednak na swój sposób doskonale ucieleśniają styl Retro Comic Book.

Komiksowy projekt dymka z Divi

Korzystanie z grafiki komiksowej w kreatorze divi

Wniosek

Jak widać, możliwości projektowania komiksów w stylu retro są dość zróżnicowane. Od klasycznych stylów po bardziej nowoczesne wersje, możesz zrobić prawie wszystko. Bez względu na to, czy sam tworzysz wzory, czy pozyskujesz grafikę online, możesz stworzyć całkiem niesamowite rzeczy za pomocą grafiki Retro Comic Book i Divi!