Stylizacja zdjęcia w Adobe Photoshop – Andy Warhol
Dzisiaj zajmiemy się stylizacją zdjęcia. Najlepiej nadają się do tego obrazy zawierające dużo szczegółów, gdzie kontrast barw jest znaczny. Ja wybrałam zdjęcie kota autorstwa Roadsidepictures. W pierwszym kroku pozbędziemy się tła. Ja użyłam metody pokazanej w artykule Wycinanie w Photoshop – część 2 Kanały.
Następnie lekko poprawiłam kontrast narzędziem Filtr->Wyostrzanie->Inteligentne wyostrzanie…, uzyskując dzięki temu lepszą widoczność detali.
Następnie przechodzimy do zakładki Kanały i wybieramy ten, na którym mamy najładniejszy kontrast (u mnie czerwony). Zaznaczamy go i kopiujemy. Otwieramy nowy arkusz Adobe Photoshopa. Dodajemy jedną pustą warstwę i wklejamy na nią skopiowany kanał. Teraz jest dobry moment na poprawienie rozmytych łapek. Robimy to ręcznie za pomocą narzędzia Wyostrzanie. Dużym problemem stanowią krawędzie. Tu najlepiej będzie dorysować kilka włosków w późniejszych etapach. Gumką możemy poprawić trochę brzegi, aby były bardziej zbliżone do futra. Zauważmy, że działamy w trybie szarości. Przejdźmy, więc do RGB (Obraz->Tryb->RGB). Program zapyta się nas czy spłaszczyć obraz, nie zgadzamy się na to. Wklejoną warstwę kopiujemy. Jedną z kopi poddajemy operacji Obraz->Dopasowania->Krzywe (Ctrl + M) i ustawiamy linię na satysfakcjonującym nas poziomie. Należy pamiętać, że powinna ona być prawie pionowa, dopuszczająca kolory tylko biały i czarny.
Czytaj dalej...Projekt graficzny prostej strony internetowej krok po kroku
Od pewnego czasu w planach miałem przygotowanie artykułu o kodowaniu prostej strony w HTML5 i CSS3. W pierwszym momencie myślałem o skorzystaniu z jednego z wielu darmowych projektów udostępnianych w PSD. Ostatecznie zdecydowałem, że warto przygotować tutorial, krok po kroku pokazujący jak stworzyć bardzo prosty projekt graficzny przy pomocy Adobe Photoshop CS5. Od razu chciałbym zaznaczyć, iż artykuł ten przedstawia absolutne podstawy, pomimo to techniki w nim zastosowane są używane prawie w każdym projekcie, więc warto jest je dobrze poznać.
Przygotowanie
Projekt w założeniu ma być mało skomplikowany, więc pominąłem standardowe etapy projektowania wireframe i koncepcji kolorystycznej. Projekt graficzny oparty jest o jedno zdjęcie przedstawiające panoramę Bieszczad, na jego podstawie została dobrana kolorystyka serwisu. Projekt ma następnie być pocięty w standardzie HTML5 i CSS3 w związku z tym będzie bogaty w gradienty, cienie itp.
Ponieważ z natury lubię ułatwiać sobie życie, skorzystam z gotowego szablonu 960 Grid System. Pod powyższym adresem znajdują się przygotowane wzorcowe pliki PSD, który posiadają przygotowane linie pomocnicze do projektu o szerokości 960px. Dlaczego taki rozmiar? Jest to szerokość, która u większości internautów pozwoli na przeglądanie serwisu bez poziomego przewijania strony. Otwarty plik wyglądać powinien tak:
Wskazówka: Ctrl + h – włączamy i wyłączamy linie pomocnicze.
Osobiście lubię sobie przygotować i zorganizować grupy, według których potem będę przygotowywał kolejne elementy projektu graficznego. Nie trudno zauważyć, iż zasadniczo są one odzwierciedleniem standardowej struktury kodu HTML. Mamy top, header, zawartość strony czyli kontent, oraz stopkę – footer.
Logo, menu i tło nagłówka
Tworzymy nową warstwę na samym dole i wypełniamy ją kolorem #50763b tworząc tło naszej strony. Następnie w grupie Header tworzymy prostokąt (U) o dowolnym kolorze i wymiarach 1020px na 250px zaczynając od lewego górnego rogu naszego tła. Następnie dodajemy styl warstwy (przycisk fx na dole warstw lub prawy przycisk myszy i z menu wybrać opcje mieszania) i wybieramy Nałożenie gradientu.
Czytaj dalej...Wycinanie w Photoshop – część 3 Popraw krawędź
Popraw krawędzie (Redefine Edges) jest całkiem nowym narzędziem w który został wyposażony Photoshop CS5. Dzięki niemu można w bardzo szybki sposób wycinać nawet bardzo skomplikowane elementy z tła.
Do tego panelu możemy dostać się na kilka sposobów. Przy wyborze któregokolwiek z narzędzi do zaznaczania w pasku narzędzi z ich opcjami pojawi się dodatkowy przycisk pozwalający na uruchomienie Poprawiania Krawędzi. Dostęp uzyskamy także z menu Zaznacz lub korzystając z skrótu klawiszowego Ctrl+Alt+R (Mac Command + Option+R).
Na początek przybliżę wygląd okna narzędzia:
W oknie mamy kolejno:
- Narzędzia do nawigacji.
- Narzędzie do edycji zaznaczenie.
- Tryb wyświetlania – tu możemy określić w jakim widoku chcemy pracować.
- Wykrywanie krawędzi – pozwala nam na włączenie tzw. inteligentnego promienia oraz edycje jego wartości. Wpływa to na zaznaczenie zaostrzając go dla łamanych kształtów, a powiększając dla łagodnych i opływowych.
- Dopasuj krawędź – narzędzia te pozwalają zmodyfikować piksele w obrębie krawędzi zaznaczenia aby lepiej wtapiały się w tło:
- Wygładzanie – usuwa „górki” i „doliny” z zaznaczenia,
- Wtapianie – rozmazuje przejście między pikselami brzegu a ich otoczeniem,
- Kontrast – wyostrza łagodne zaznaczenia,
- Przesuń krawędź – przesuwa zaznaczenie do wewnątrz gdy ujemny, a na zewnątrz gdy dodatni.
- Wyjście – określa co ma się stać z zaznaczeniem po opuszczeniu trybu Popraw krawędź.
Należy pamiętać że po zatwierdzeniu zmian nie można już powrócić do trybu edycji krawędzi!
Czytaj dalej...Wycinanie w Photoshop – część 2 Kanały
Po artykule z wycinaniem elementów przy wykorzystaniu maski koloru, nadszedł czas na pokazanie kolejnej metody, tym razem wykorzystamy do tego kanały RGB obrazka.
Wycinanie kanałem jest dość dobra metodą wycinania obiektów z zdjęć. Sprawdza się przede wszystkim w wypadku obiektów nieregularnych. Aby można je zastosować, obiekt na zdjęciu wyjściowym powinien być w innym kolorze niż tło.
Ja będę pracować na poniższych dwóch zdjęciach:
Jako reprezentacja obiektów o nieregularnym kształcie – Futrzak i o gładkich krawędziach – Łoś
Czytaj dalej...Wycinanie w Photoshop – część 1 Maska Koloru
Każdy z nas w którymś momencie swojej pracy spotkał się z potrzebą wycięcia jakiegoś elementu ze zdjęcia. Ten cykl artykułów pokaże wam kilka sposobów na dokładne wycinanie przy pomocy Adobe Photoshop.
Na początek kilka słów wstępu. Metod wycinania jest w zasadzie tyle, co ludzi którzy ich używają. Nie istnieje złoty środek, dzięki któremu można zrobić wszystko. Przy doborze odpowiedniego sposobu trzeba kierować się przede wszystkim samym zdjęciem i elementem, który chcemy z niego wyciąć. Najlepsze efekty dają hybrydy różnych sposobów.
Wycinanie maską koloru jest jedną z najszybszych metod (około 5 minut). Można ją stosować zarówno do elementów o gładkich krawędziach jak i nieregularnych. Sprawdza się najlepiej przy obiektach z dominującą jedną barwą na kontrastowym tle.
Ja będę pracować na poniższych dwóch zdjęciach:
Jako reprezentacja obiektów o nieregularnym kształcie – Futrzak i o gładkich krawędziach – Łoś
Czytaj dalej...
