Tytuł: Efekt "Long Shadow" Wiadomość wysłana przez: Madzialena on 19.12.2014, 21:15:07 Efekt "Long Shadow" Tutorial Opracowanie: Madzialena Poziom trudności: Łatwy (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_36_3.png) Tutorial powstał na bazie moich własnych umiejętności wspieranych masą referencji. Nie jest to łatwy poradnik, ze względu na brak umiejętności autorki w tłumaczeniu komuś czegoś. Większość kolorów użytych w tym poradniku pochodzi z palety Flat UI (http://flatuicolors.com/). Nie będę pisała ich kodów tylko nazwy pod jakimi występują na tej stronie. Korzystanie z tej strony jest proste, klikasz na dany kolor i kod tego koloru ci się kopiuje. Kursywą są zaznaczone jakieś nic nie znaczące porady dla laików. Tutorial napisany w wersji GIMP 2.8.8. W innych wersjach nazwy narzędzi i pojęć mogą się różnić. Zaczynamy [lp] 1. Na początku tworzymy nowy dokument , np:500x500px (http://www.gimpuj.info/gallery/96/60023_19_12_14_4_55_29.png) Przy tworzeniu ikon raczej nie będzie ci potrzebne coś tak dużego ale na razie się tylko uczysz więc prościej jest ćwiczyć na czymś większym. [lp] 2.Wypełniamy je kubełkiem <wypelnienie> [Shift+B]. U mnie jest to Midnight Blue. (http://www.gimpuj.info/gallery/96/60023_19_12_14_4_58_00_0.png) [lp] 3. Tworzymy nową, przezroczystą warstwę. Nazwijmy ją Tło 1. Wybieramy zaznaczenie prostokątne <zaznaczenie-prostokatne> [R] i tworzymy kwadrat o wymiarach, np: 300 x300px Ustawiamy to zaznaczenie na środku. (http://www.gimpuj.info/gallery/96/60023_19_12_14_5_02_21.png) Zrób gdzieś małe zaznaczenie. W opcjach narzędzia będziesz mógł wpisać rozmiar i położenie zaznaczenia. (http://www.gimpuj.info/gallery/96/60023_19_12_14_4_58_00_2.png) [lp] 4. Wypełniamy je kubełkiem <wypelnienie> [Shift+B] jakimś kolorem. Tym razem jest to Sun Flower. (http://www.gimpuj.info/gallery/96/60023_19_12_14_4_58_00_1.png) [lp] 5. Tworzymy nową warstwę o nazwie kształt i zaznaczamy na niej dowolny kształt np: kwadrat. Znów dajemy go na środek. (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_01_0.png) Metoda pierwsza [lp] 1. Teraz robimy cień. Nowa warstwa i na niej zaznaczeniem prostokątnym <zaznaczenie-prostokatne> tworzymy prostokąt. Szerokość nieco większa od szerokości naszego kwadratu, musi być też dość długi. Wypełniamy go czarnym kolorem. Warstwę z tym prostokątem ustawiamy pod naszym kształtem! (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_01_1.png) [lp] 2. Prostokąt za pomocą narzędzia obrót <obrot> obracamy o [/b]45 stopni (lub -45 stopni w zależność w którą stronę nam się ten prostokąt obróci) Ustawiamy ten prostokąt tak, jak na obrazku. Jeżeli prostokąt nie styka się z tym drugim wierzchołkiem duplikujemy warstwę <duplikowanie-warstwy> z prostokątem i przesuwamy <przesuwanie> ją wedle potrzeb. Potem na duplikacie tej warstwy dajemy Warstwa <warstwy> -> Połącz w dół (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_01_4.png) (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_01_2.png) [lp] 3. Na warstwie z pierwszym kwadratem (tym żółtym) stosujemy: Warstwa <warstwy> -> Kanał alfa na zaznaczenie -> Zaznaczenie -> Odwróć -> Delete (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_01_3.png) [lp] 4. Krycie warstwy z cieniem możemy ustawić na dwa sposoby: -Pokrywanie, na jakieś 50% (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_36_3.png) -Zwykły, na 10% (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_36_2.png) Metoda druga Zalecana przy bardziej skomplikowanych kształtach. [lp] 1. Duplikujemy warstwę <duplikowanie-warstwy> z kształtem. Na duplikacie stosujemy kolejno Kolory -> Inwersja Jeżeli mamy inny kolor kształtu niż biały Warstwa <warstwy> (ustawiamy pod warstwą z naszym pierwotnym kształtem) -> Kanał alfa na zaznaczenie -> delete -> wypełnienie <wypelnienie> -> zdejmujemy zaznaczenie (Ctrl + Shift + A) . Na warstwie z czarnym kształtem (cieniem) stosujemy: Warstwa <warstwy> -> Kanał alfa na zaznaczenie i kopiujemy jej zawartość (ctrl + C) . Zdejmujemy zaznaczenie (Ctrl + Shift + A) Powinniśmy mieć taki układ warstw: (http://www.gimpuj.info/gallery/96/60023_23_12_14_7_57_49_0.png) [lp] 2. Mając skopiowany czarny kształt ustawiamy go jako pędzel o następujących właściwościach (wykonywać po kolei): 1) Pierwszy pędzel od lewej strony u góry to zawartość schowka (dla tych co nie wiedzą). 2) Odstęp ustawiony na wartość minimalną. 3) Trzeba kliknąć na ten zaznaczony przycisk, wtedy rozmiar pędzla będzie zgadzał się z autentycznymi wymiarami skopiowanej przez nas figury. (http://www.gimpuj.info/gallery/96/60023_23_12_14_7_57_50_1.png) [lp] 3. Mając tak przygotowany pędzel ustawiamy go na środku naszej figury i klikamy. Teraz żeby wyszło to w miarę prosto malujemy cień mając wciśnięte cały czas przyciski shift + ctrl. Wyglądać to powinno tak: (http://www.gimpuj.info/gallery/96/60023_23_12_14_7_57_50_2.png) Koniecznie musi być on "ciągnięty" w stronę któregoś z rogów. Efekt powinien być taki: (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_01_3.png) [lp] 4. W zależności od tego jaki długi wyszedł nam ten cień stosujemy ponownie Na warstwie z pierwszym kwadratem (tym żółtym) stosujemy: Warstwa <warstwy> -> Kanał alfa na zaznaczenie -> Zaznaczenie -> Odwróć -> Delete [lp] 5. Ustawiamy krycie jak w metodzie pierwszej. Metoda trzecia [lp] 1. Tworzymy nową warstwę którą umieszczamy pod obiektem. Dajemy:kanał alfa na zaznaczenie na warstwie z obiektem, następnie zaznaczenie -> powiększ o 1 px. Przełączmy pusta na warstwę, wypełniamy <wypelnienie> ją czarnym kolorem. Zdejmujemy zaznaczenie (Shift+Ctrl+A) [lp] 2. Na warstwie z czarnym kształtem stosujemy:Filtry -> Rozmycie->Rozmycie w ruchu o podanych wartościach: (http://www.gimpuj.info/gallery/96/60023_10_02_15_2_08_54_0.PNG) Efekt: (http://www.gimpuj.info/gallery/96/60023_10_02_15_2_08_54_1.png) [lp] 3. Na tej samej warstwie stosujemy: Kolory-> krzywe O takich wartościach: (http://www.gimpuj.info/gallery/96/60023_10_02_15_2_08_54_2.PNG) Czynność powtarzamy. (http://www.gimpuj.info/gallery/96/60023_10_02_15_2_48_44_1.png) [lp] 4. Na warstwie z cieniem dajemy: Warstwa <warstwy> -> Kanał alfa na zaznaczenie -> Zaznaczenie -> Zmniejsz (o 1px.) -> Odwróć -> Delete . (http://www.gimpuj.info/gallery/96/60023_10_02_15_2_48_44_0.png) Na warstwie z pierwszym kwadratem (tym żółtym) stosujemy: Warstwa <warstwy> -> Kanał alfa na zaznaczenie -> Zaznaczenie -> Odwróć -> Delete (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_40_01_3.png) [lp] 5. Ustawiamy krycie jak w metodzie pierwszej. Inny przykład (http://www.gimpuj.info/gallery/96/60023_19_12_14_7_54_43.png) Efekt przydatny głównie przy tworzeniu logotypów, ikon, przycisków czy nawet tapet w stylistyce Flat. Miłej zabawy ;) Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: davlasq on 20.12.2014, 12:41:42 W jaki sposób zrobić cień dla bardziej skomplikowanych kształtów, jak np. ta litera w przykładzie? Gdybyś lepiej to opisała, to poszłoby do indeksu.
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: be@ on 20.12.2014, 16:39:08 A nie można w ten sposób: https://dl.dropboxusercontent.com/u/27473063/1/Animacja%202014-12-20%2015_32_45.wmv (https://dl.dropboxusercontent.com/u/27473063/1/Animacja%202014-12-20%2015_32_45.wmv)?
Ew. tę czarną literką M można skopiować i użyć jako pędzla. Trzeba ustawić minimalne odstępy, kliknąć dokładnie w miejscu litery i przeciągnąć na ukos z wciśniętym SHIFT-em. Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: Madzialena on 20.12.2014, 18:57:15 Każdy ma inną technikę. Np: to M było robione ta jak w tutorialu + ścieżki. A przy avku robiłam tylko ścieżkami. Problem jest tutaj taki, że ogólnie przyjęty kąt nachylenia tego cienia to 45 stopni i czasem ciężko go uzyskać np: samymi ścieżkami ;) Można zawsze dopisać kilka innych technik robienia tego, przez co urozmaici się trochę ten poradnik.
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: Hasia on 20.12.2014, 19:02:20 Może warto korzystać z siatki w tego typu pracach? Wtedy bardzo łatwo jest trafić w 45°.
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: be@ on 20.12.2014, 19:03:50 Używając rozmycia w ruchu (jak na filmiku) można bardzo łatwo i precyzyjnie ustawić wybrany kąt nachylenia, a metoda jest uniwersalna - można ją zastosować do każdego kształtu. W przypadku ścieżek wystarczy użyć pomocniczo siatki z włączonym przyciąganiem i też nie będzie problemu z kątem.
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: Madzialena on 20.12.2014, 19:17:38 Mam pomysł, ale trochę potrwa jego realizacja, pokażmy kilka metod w tym tutorialu. Tą ze ścieżkami, rozmyciem, pędzlem i tą aktualną. Wtedy każdy będzie miał wybór jak ten efekt uzyskać. Przy okazji pokaże się, że jest wiele dróg do uzyskania danego efektu.
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: be@ on 20.12.2014, 19:25:13 Super pomysł! :D Taki tutorial, chociaż efekt prosty, będzie bardzo pouczający i już na pewno nada się do indexu :)
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: Madzialena on 20.12.2014, 19:32:00 Tylko coś mi ten efekt z rozmyciem wyjść nie chce. W każdym bądź razie nie tak jak trzeba.
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: be@ on 20.12.2014, 19:33:44 A w którym miejscu masz problem? Może pominęłaś jakiś krok? Wydaje mi się, że na filmiku wszystko dokładnie pokazałam...
1. Kanał alfa na zaznaczenie na warstwie z obiektem, np. literką 2. Powiększyć zaznaczenie o 1 px i wypełnić czarnym kolorem na przezroczystej warstwie poniżej i wyłączyć zaznaczenie 3. Zastosować Rozmycie w ruchu z odpowiednio dostosowanym kątem (na filmie akurat nie jest to 450, ale można przecież sobie ustawić dowolnie, np. 225 żeby było 45) i dość dużą długością 4. Zastosować krzywe na kanale alfa 5. Kanał alfa na zaznaczenie na warstwie z cieniem 6. Zamienić zaznaczenie na ścieżkę i ponownie ścieżkę w zaznaczenie 7. Odwrócić zaznaczenie, powiększyć o 1 px i wyczyścić Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: Madzialena on 20.12.2014, 19:46:19 Dobra, bo ja robiłam samym rozmyciem ;D
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: be@ on 24.12.2014, 22:09:21 Bardzo dobrze opisałaś metodę z pędzlem :) To została już tylko jedna i będzie świetny tutek :D
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: Madzialena on 26.12.2014, 18:44:06 Czasami wydaje mi się, że zbyt mocno to opisuję :)
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: be@ on 26.12.2014, 18:48:57 To jest tutorial na dość prosty efekt, a więc będzie skierowany głównie do początkujących, a oni potrzebują dokładnych opisów. Wg mnie lepiej opisać zbyt dokładnie, niż zbyt ogólnikowo.
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: Madzialena on 10.02.2015, 15:54:10 The End... jak ktoś by miał czas to może to sprawdzić pod kątem merytorycznym i interpunkcyjnym (bo z przecinkami u mnie ciężko) :D
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: be@ on 11.02.2015, 10:37:58 Przede wszystkim ponumerowałam punkty i dodałam interlinie. Dlaczego nie skorzystałaś z szablonu dostępnego w Fabryce tutoriali?
W metodzie trzeciej nie bardzo rozumiem, po co powtarzać krzywe kolorów. Jeśli się ustawi odpowiednio, to wystarczy je zastosować tylko raz. Warto by było też opisać ich ustawienia. No i pominęłaś zmianę zaznaczenia na krzywe, co może skutkować postrzępionymi brzegami. Właściwie jak tak teraz sobie testowałam, to chyba można pominąć to powiększanie zaznaczenie w pkt.1 przed wypełnieniem czarnym kolorem i wtedy wystarczą same krzywe, ale może jeszcze sprawdź dokładniej ten sposób. Proponuję również ponazywać jakoś poszczególne warstwy, to ułatwi zarówno opis jak i zrozumienie. Na razie na tyle. Jak pododajesz te nazwy, to sprawdzę ponownie. Ogólnie dobra robota, będzie świetny poradnik :) Przenoszę do fabryki. Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: davlasq on 11.02.2015, 13:02:58 Wiele rzeczy jest niedostosowanych do szablonu - pogrubienia itd., wymaga to poprawy.
Tytuł: Odp: Efekt "Long Shadow" Wiadomość wysłana przez: Madzialena on 11.02.2015, 18:27:21 Luz, mam jeszcze trochę wolnego to poprawię co trzeba :D
|