WITAMY:
narugojako nowego mangomaniaka.
Redakcja: 8
Użytkownicy: 7402
Gości Online: 1
Użytkownicy Online: 0
| Statystyka: |
|
|
| Kategorie Forum | 31 |
| Tematy na Forum | 910 |
| Posty na Forum | 45592 |
| Komentarzy | 11274 |
| Newsy | 259 |
| Teksty | 98 |
| Galerie | 117 |
| Obrazki w galerii | 26373 |
| Oglądnięć obrazków: | 3074096 |
| Tapet: | 5742 |
| Ściągnięto tapet: | 507594 |
| Plików w downloadzie | 1633 |
| Ściągano razy: | 102650 |
| Kategorii w downloadzie | 11 |
| Ciekawe Strony | 68 |
| Postów w Shoutboxie | 24363 |
|
|
|
| Tutorial: Jak zrobić avatar? |
Witam w kolejnym tutorialu! W tym artykule postaram się przedstawić wam prosty sposób na stworzenie własnego avatara :).
Wykorzystane programy: Adobe Photoshop (cs3)
Czas pracy: 15 minut
Efekt końcowy:
A WIĘC ZACZYNAMY!
1.
Pierwszym krokiem jest stworzenie nowego dokumentu o rozmiarach 150x150 pikseli (wielkość oczywiście dostosujecie do regulaminu danego portalu). Wybieramy odpowiadający wam rysunek (w moim przypadku był to ten rysunek). Wklejamy zdjęcie i odpowiednio kadrujemy. Następnie duplikujemy warstwę i nadajemy jej wartość Overlay. Łączymy ze sobą obie warstwy (klikając na tę duplikowaną i wciskamy CTRL + E). Efekt powinien być taki:
2.
Tworzymy nową warstwę: Layer - New - Layer (lub wciskamy CTRL + SHIFT + N). Wciskamy CTRL + A, żeby zaznaczyć całą zawartość obrazka. Wchodzimy w Edit - Stroke. Ustawiamy następujące opcje: Width: 3px, Color: czarny, Location: Inside, a następnie klikamy OK. Powtarzamy poprzedni krok, tylko że dajemy kolor biały oraz Width nadajemy wartość 2. Znów powtarzamy poprzedni krok nadając Width wartość 1 oraz kolor czarny. Całą warstwę ustawiamy na Overlay. Efekt powinien być taki:
3.
Tworzymy nową warstwę: Layer - New - Layer i przesuwamy ją o jedną pozycję niżej. Klikamy CTRL + A, by zaznaczyć obrazek. W menu po lewej stronie wybieramy Gradient Tool. Na górze mamy menu gradienta. Edytujemy go zmieniając przejście z czarnego do przeźroczystości. Następnie nakładamy gradient na zaznaczoną warstwę. Oto efekt:
4.
Kolejnym krokiem będzie stworzenie napisu. W moim przypadku był to tekst "No more rain...". Po skończeniu dodajemy do napisu następujące opcje: Stroke: 2, Position: Outside, Opacity: 50%. Warstwę ustawiamy na Darker Color. Efekt powinien być taki:
5.
Naszym zadaniem staje się stworzenie efektu spadającego deszczu. Wydaje się trudne? Nic bardziej mylnego. Naszą bazą będzie 7 nowych warstw. Każdej nadajemy czarne tło. Stosujemy następujące efekty: Filter - Noise - Add Noise, Filter - Blur - Motion Blur. W Add Noise opcję Amount zwiększamy odpowiednio z 20% do 25% (zwiększajcie wartość na inną dla każdej warstwy, żeby np. w obu warstwach nie było takiej samej wartości), Distribution ustawiamy na Uniform i zaznaczamy opcję Monochromatic. W Motion Blur opcję Angle ustawiamy na 90*, a Distance nadajemy wartość 10. Oto efekt:
6.
Teraz musimy w naszym Photoshopie włączyć opcję animacji. W tym celu wchodzimy w Window - Animation i tworzymy kilka klatek, jak w tym przykładzie. Teraz zajmiemy się tworzeniem animacji :). Wszystkie warstwy z efektem deszczu naszego avatara muszą mieć ustawioną przeźroczystość (Opacity) na 0%. Klikamy na pierwszą klatkę naszego przyszłego gifa. Teraz w menu z warstwami po prawej stronie interface'u klikamy na 1 z 7 warstw z naszym efektem deszczu. Nadajemy jej wartość Screen oraz Opacity 100%. Klikamy na drugą klatkę. Tym razem 1 warstwę, która ustawiona jest na 100% przeźroczystości oraz na Screen, zmieniamy jej przeźroczystość na 0%. 2 z 7 warstw efektu deszczu ustawiamy te same opcje, co poprzednio. Chodzi o to, aby w drugiej klatce naszej animacji poprzednia warstwa była przeźroczysta. Przedstawię to w rysunku poniżej:
7.
Ostatnim krokiem jest zapisanie naszego avatara jako gif. Do jego stworzenia użyłem programu Adobe Photoshop, gdyż jakość jest znacznie lepsza, niż w programie Gif Move Gear (w przypadku sygnatury jakość się nie różniła, za to szybkość tworzenia animacji była lepsza, niż w przypadku Photoshopa). Po skończeniu kroku poprzedniego, wybieramy opcję File - Save for Web & Devices. Ustawiamy obrazek jako Gif i klikamy Save. Możemy cieszyć się nowym avatarem :).
Mam nadzieję, że artykuł przyda wam się w tworzeniu prostych efektów animacji na swoich grafikach. Przydaje się nie tylko do avatara :). Życzę udanej pracy i ciekawych efektów!
|
|
 |
dnia 11 listopad 2008 04:40
Podoba mi się motyw tego deszczu  dzieki Hardk0r ;] |
 |
dnia 13 listopad 2008 18:03
hardkOr odwalił kawał dobrej roboty Jestem tylko ciekaw czy w photoshopie CS2 też mógłbym korzystać z tego tutka... |
 |
dnia 14 listopad 2008 01:08
Myślę, że tak. Nie jestem zorientowany, gdyż pracuję na Photoshopie 7.0 i na CS3. Jeśli w CS2 nie ma opcji Animation, to powinien być do tego specjalny program (w przypadku Photoshopa 7.0 dołączone jest oprogramowanie Image Ready, które pozwala na robienie takich animacji  ) |
 |
dnia 21 listopad 2008 08:17
Co tu dużo mówić strasznie przydatny tut  |
 |
dnia 06 grudzień 2008 20:42
To jeszcze lepiej, bo ja mam PS'a CS. x3 Ale też mam Image Ready, to zobaczymy czy coś z tego wyjdzie. ^^ |
 |
dnia 16 grudzień 2008 04:31
a że się spytam, co trzeba zrobić, żeby avek z animacja (100x100) mial mniej niz 40kb? ==; jakiegos specjalnego programu mi sie sciagac nie chce, mam ps cs3, ps cs i image ready i zawsze z tym jest problem >_> chyba ze zna ktos jakis program do gifow za darmo. |
|
dnia 22 grudzień 2008 02:18
Fajny tut tylko ja mam polskiego photoshopa  i nie za bardzo się łapię co kiedy wcisnąć |
|
dnia 03 styczeń 2009 06:10
Yapi polecam opcję w Photoshopie: File - Save for web & devices . Kompresja znacznie zmniejsza rozmiar. Jeśli nadal nie wystarczający, to możesz zmienić kompresję obrazu z 256 kolorów do 128 i mniej. Obraz jest gorszy, ale wielkość się analogicznie zmniejsza . No i drobna rada: jeśli to możliwe, to używaj jak najmniejszej ilości kolorów w obrazkach animowanych i/lub nie dawaj dużej ilości klatek owej animacji . |
|
dnia 30 styczeń 2009 04:41
No właśnie, z tym jest problem, niby jest opcja 'save for web..' ale jak już chcę zapisać, to nagle znika. Wiesz nie da się kliknąć. No w każdym razie kombinować będę dalej, dzięki :3 |
|
|
|
Zaloguj się, żeby móc dodawać komentarze.
|
|
|
|
Szukasz grafik? Wpisz tutaj nazwę anime którego nie mamy: |
|
![[10] Najlepsze](themes/Mdome/images/pollbar.gif){kind=small}
