Jak stworzyć obraz bichromii w Photoshopie

Kiedy pracujesz nad kolejnym projektem witryny, możesz wziąć pod uwagę popularny rodzaj tła: fotografia. Chociaż ten trend niekoniecznie jest wyjątkowy, z pewnością skutecznie tworzy scenerię i zanurza użytkownika w środowisku witryny. „Jeśli szukasz sposobu na wykorzystanie fotografii, ale z odrobiną pizazzu, zawsze możesz wypróbować obraz bichromii – oba są interesujące dla oka i łatwe do stworzenia! ”

Zanim dowiemy się, jak stworzyć obraz bichromii w Photoshopie, zagłębmy się nieco głębiej w ten trend projektowania.

Co to jest obraz bichromii?

W swej istocie bichromia to po prostu obraz składający się z dwóch kolorów. Prawdopodobnie widzieliście je już wcześniej w kampaniach takich jak Spotify 2015 Year in Review.

Staje się to coraz bardziej popularne, zwłaszcza wśród agencji i mniejszych marek. Efekty Duotone to świetny sposób na włączenie i wzmocnienie Twojej marki i jej kolorów w całej pracy i witrynie. Aby dać ci trochę inspiracji, LPK pokazuje wspaniały przykład, jak to wykorzystać.

Jeśli chcesz wypróbować tę technikę, na zdjęciu, które zdecydujesz się manipulować, będziesz chciał być strategiczny. Chociaż technicznie można zastosować efekt bichromii do dowolnego zdjęcia, będzie on wyglądał lepiej na obrazie z dużym kontrastem. Sugerowałbym również użycie obrazu z jednolitym tłem, najlepiej białym, co ułatwi ustalenie koloru bazowego, którego szukasz!

Jeśli masz dostęp do studia i interesuje Cię robienie niestandardowych zdjęć, pamiętaj o tych wskazówkach podczas ustawiania sceny. Jeśli pracujesz z istniejącą zawartością, zawsze możesz najpierw manipulować zdjęciem, aby zwiększyć kontrast lub zmienić kolor tła.

• Jeśli chcesz dołączyć do kursu i pobrać bezpłatne zasoby programu Photoshop, przejdź do tej sekcji!
• Jeśli już dołączyłeś do kursu, kliknij tutaj, aby przejść od razu do samouczka dotyczącego szablonów!

W dalszej części samouczka omówię dwie metody, których możesz użyć do ręcznego utworzenia obrazu bichromii w Photoshopie. Pierwsza to wbudowana opcja Photoshopa (działa dobrze, ale nie moja ulubiona), a druga używa mapy gradientowej (moja preferowana metoda, chyba że używasz naszej darmowej akcji oczywiście!).

Gdy będziesz gotowy, załaduj obraz do Photoshopa i utwórz zduplikowaną warstwę zdjęcia. Edytując duplikat (zamiast oryginalnej dolnej warstwy), zawsze będziesz mieć nieedytowaną wersję zdjęcia, na której można się odwołać.

Gotowy do stworzenia obrazu bichromii w Photoshopie? Zacznijmy.

Jak korzystać z domyślnej opcji bichromii programu Photoshop

1. Konwertuj obraz na 8-bitową skalę szarości

Aby skorzystać z opcji bichromii wbudowanej w Photoshopa, najpierw musisz przekonwertować obraz na 8-bitową skalę szarości. Wybierz kopię zdjęcia i przejdź do Obraz > Tryb > Skala szarości. Sprawdź również, czy opcja 8 bitów/kanał jest wybrana w tym samym menu trybu.

Po wybraniu tej opcji pojawi się kilka powiadomień. Pierwszy pyta, czy chcesz spłaszczyć obraz, czy scalić warstwy przed zmianą trybu kolorów. Jeśli masz wiele warstw, zmiana koloru może wpłynąć na sposób wyświetlania rzeczy (w takim przypadku spłaszczenie może być pomocne w zachowaniu twojej pracy), ale w tym przypadku nie martw się o spłaszczenie obrazu. Jeśli chcesz oryginalną kopię, nie łącz warstw.

Następne powiadomienie zapyta, czy chcesz odrzucić informacje o kolorze. Musisz to zrobić, aby użyć domyślnej opcji bichromii, więc kliknij „Odrzuć”.

2. Konwertuj obraz na bichromię

Gdy tryb obrazu jest w 8-bitowej skali szarości, możesz użyć domyślnej opcji bichromii w programie Photoshop. Wybierz warstwę, a następnie przejdź do Image > Mode > Duotone.

3. Wybierz swoje kolory

Gdy obraz jest w trybie bichromii, możesz rozpocząć wybieranie kolorów. Fajne jest to, że jak tylko wybierzesz nowy kolor, obraz zostanie zaktualizowany, dzięki czemu będziesz mógł zobaczyć, jak wyglądają rzeczy (o ile zaznaczone jest pole wyboru Podgląd). Poza tym proces zaczyna być trochę niezgrabny. Z technicznego punktu widzenia można dostosować krzywe dla każdego koloru, ale obraz nie jest aktualizowany w czasie rzeczywistym, co sprawia, że ​​trochę trudno jest zobaczyć, co się dzieje, i powoduje wiele ruchów tam iz powrotem. Baw się kolorami i ustawieniami, aż znajdziesz pożądany efekt.

Sugeruję poeksperymentować z tymi ustawieniami przez chwilę, aby je wyczuć, ale kiedy będziesz gotowy, przejdźmy do drugiej metody tworzenia bichromii w Photoshopie.

Jak używać mapy gradientowej do tworzenia bichromii?

1. Zastosuj mapę gradientową

W przypadku tej metody nie musisz martwić się zmianą obrazu lub wyborem określonego trybu kolorów. Oczywiście, jeśli chcesz coś edytować, śmiało, ale zdjęcie będzie działać dobrze, tak jak jest. Kiedy będziesz gotowy, wybierz kopię obrazu i przejdź do Obraz > Dopasowania > Mapa gradientu.

W zależności od ustawienia domyślnego to ustawienie spowoduje nałożenie na obraz gradientu dla mapowania w skali szarości. Jeśli domyślna wartość nie jest czarno-biała, kliknij menu rozwijane i wybierz tę opcję. Jeśli podążałeś za pierwszą metodą, zobaczysz, że jesteśmy już w połowie drogi do stworzenia naszego bichromii.

Porada profesjonalisty: widzisz pole wyboru obok opcji Odwróć? Klikając to, odwrócisz kolory na zdjęciu. W tym samouczku zostawimy to niezaznaczone, ale jeśli chcemy, aby tło było ciemniejsze niż temat, ta opcja może pomóc ci zmienić rzeczy.

2. Wybierz swoje kolory

Klikając na pasek gradientu, otworzysz Edytor gradientu w nowym oknie. Tutaj możesz wybrać kolory i dostosować sposób ich wyświetlania na obrazie.

Jak widać, końcowe obrazy wyglądają nieco inaczej, ale oba dają wspaniałe bichromie. Wolę używać mapy gradientowej po prostu dlatego, że trochę łatwiej jest kontrolować intensywność kolorów oraz to, gdzie idą ciemne i jasne tony, ale obie metody są łatwe w użyciu.

Dołącz do naszego kursu 2019 Web Design Trends, aby uzyskać darmową akcję Photoshopa w bichromii!

Jeśli szukasz szybkiego i łatwego zasobu do wypróbowania tego trendu, możesz pobrać pliki z tego samouczka, w tym akcję z gotowymi opcjami map gradientowych! Zarejestruj się za pomocą poniższego formularza, aby pobrać plik, lub kliknij tutaj, aby uzyskać więcej informacji o kursie.

[optin-monster-shortcode id=”dktout15rz4zcbcifnsl”]

Dziękujemy za udział w naszym kursie Trendy w projektowaniu!

Najpierw pobierz akcję Photoshop tutaj.

Jak korzystać z Duotonera

Zainstaluj akcję

Po pobraniu akcji kliknij dwukrotnie plik, aby go zainstalować. Otwórz obraz, którego chcesz użyć w programie Photoshop, a następnie otwórz okno Akcje.

Aby przejść do okna Akcje , wybierz Okno > Akcje lub przytrzymaj klawisze Shift + F9 .

Po otwarciu okna Akcje wybierz warstwę obrazu, do której chcesz zastosować efekt bichromii.

Wybierz i odtwórz akcję

Kliknij menu rozwijane w folderze „Koło zamachowe – Glitch-a-tron”. Teraz wybierz „Glitch-a-tron – Wybierz i naciśnij przycisk odtwarzania” i naciśnij trójkątny przycisk odtwarzania na dole okna.

Gdy włączysz odtwarzanie, zobaczysz całą masę warstw, z których każda ma inny schemat kolorów bichromii! Aby się przełączyć, wszystko, co musisz zrobić, to uwidocznić wybraną warstwę.

Uwaga: jeśli widoczna jest więcej niż jedna warstwa bichromii, kolory zmieszają się ze sobą i możesz zacząć tracić niektóre szczegóły zdjęcia. Aby wszystko było ostre, upewnij się, że w danym momencie widoczna jest tylko jedna warstwa (lub możesz eksperymentować, nakładając bichromie, aby uzyskać zupełnie inny efekt!).

Bonus: zresetuj swój obraz w mgnieniu oka

Na wypadek, gdybyś chciał się cofnąć, akcja automatycznie tworzy zrzut ekranu, który pozwala wrócić do obrazu przed zastosowaniem akcji.

Przejdź do okna Historia , wybierając Okno > Historia . Przewiń w górę i kliknij "Migawka". To zresetuje wszystko, więc możesz iść!

Co myślisz o bichromii? Czy uważasz, że to silny trend w projektowaniu, czy wolisz obrazy w pełnym kolorze? Podziel się swoimi przemyśleniami poniżej!

Pobierz te bezpłatne pliki Photoshop

Pobierz szablony za darmo poniżej!

Nie wiesz, co dalej czytać? Sprawdź tę listę:

• 13 trendów w projektowaniu stron internetowych na 2020 rok
• Jak zoptymalizować obrazy w Internecie: przewodnik krok po kroku dla lepszej wydajności witryny
• Jak korzystać z technik przycinania i maskowania CSS i SVG
• Jak dodać przyklejony przycisk „od góry do góry” na swojej stronie?