Obiekt.eurolol.pl | O grafice w formie video... » Tutoriale tekstowe

Zmiana wyglądu kursora myszy we flashu (ActionScript 3.0)

Rafał — Sun, 06 Sep 2009 11:58:02 +0000

Co tu dużo mówić czy opisywać, prosty samouczek, a więc i prosty efekt. Zmienimy dzisiaj wygląd kursora naszej myszy używając do tego ActionScriptu 3.0. Ale aby lekko urozmaicić ten tutorial postanowiłem go w pewien sposób połączyć z poprzednim, gdzie jak mam nadzieję jeszcze pamiętasz wprawiliśmy oczy Dug’a w ruch. Tym razem nasz kursor zamieni się w uciążliwą muchę, dzięki czemu całość nabierze sensu: oczy psa podążające za latająca mu przed nosem muchą. Prawda, że sprytne?

Krok 1
Otwórz projekt z poprzedniego wpisu lub stwórz nowy dokument flash z obsługą ActionScript 3.0, a następnie przejdź do okna Document Properties (Ctrl+J) i wybierz stosowne wymiary (Dimensions), tło (Background color) oraz ilość klatek na sekundę (Frame rate) – tu wpisz wartość 26 fps.

Krok 2
Utwórz nową warstwę i nazwij ją kursor, po czym korzystając z narzędzia Brush Tool (B) narysuj małą muszkę:

Jeśli rysowanie sprawia Ci kłopoty możesz zaimportować do sceny gotową muchę klikając: File >> Import >> Import to Stage (Ctrl+R). Przekonwertuj ją w obiekt filmowy (Modify >> Convert to Symbol…) nadając jej nazwę cursor_mc:

Po przekonwertowaniu muchy w symbol (póki jest on jeszcze zaznaczony) przejdź do panelu Properties i w polu Instance Name wpisz cursor.

Krok 3
Stwórz nową warstwę i nazwij ją actionscript (a jeśli edytujesz nasz poprzedni projekt po prostu użyj istniejącej już warstwy o tej nazwie). Zaznacz jej pierwszą klatkę i wklej następujący kod ActionScript 3.0 klikając Window >> Actions (F9):

Mouse.hide(); Mouse.hide(); cursor.startDrag(true);

Gotowe, przetestuj swoja animację klikając Ctr+Enter:

źródło: flashfridge.com

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Obiekty filmowe podążające za kursorem myszy w Adobe Flash CS4 Professional (trygonometria w ActionScript 3.0)

Rafał — Tue, 01 Sep 2009 19:45:49 +0000

W dzisiejszym tutorialu pobawimy się nieco matematyką, a dokładnie mówiąc użyjemy jednego z jej działów: trygonometrii. Przy pomocy programu Adobe Flash CS4 Professional i ActionScript’u 3.0 utworzymy obiekt filmowy (w naszym przpadku będą to oczy psa) podążające za kursorem naszej myszy znajdującej się nad plikiem flash. Do tego celu wykorzystamy jedną z postaci z ostatniego filmu Studia Animacji Pixar o tytule “Up“. Postacią tą będzie Dug, czyli przemiły gadający pies (widoczny powyżej), który na potrzeby tutoriala pożyczy nam swoje oczy! ;)

Nie przedłużając już więcej zabierzmy się do pracy i odpalmy właściwy ku temu program…

Krok 1 – Tworzymy nowy dokument
Stwórz nowy dokument flash z obsługą ActionScript 3.0, a następnie zapisz go tymczasowo gdzieś na swoim dysku pod nazwą EyesFollow.fla.

Krok 2 – Importujemy niezbędne materiały
W tym celu użyj tego samego obrazu co ja lub wybierz własny. W drugim przypadku pamiętaj aby wykonać “dziury” w miejscu oczu. Gdy plik będzie już odpowiednio przygotowany zaimportuj go wprost na obszar sceny klikając: File >> Import >> Import to Stage (Ctrl+R). Celem tego tutoriala jest sprawienie by oczy psa podążały za kursorem naszej myszy, choć równie dobrze nabyte umiejętności możesz wykorzystać w zupełnie inny sposób.

Krok 3 – Dodajemy oczy
Utwórz nową warstwę klikając na ikonę New Layer, a następnie nazwij ją oczy. Następnie wybierz narzędzie Oval Tool (O) i przytrzymując klawisz Shift (dla zachowania proporcji rysowanego obiektu) umieść koło w miejscu oka (pamiętaj by Fill Color ustawić na #ffffff, a Stroke Color najlepiej wyłączyć). Gdy białe koło będzie na swoim miejscu zaznacz je i wybierz z menu: Modify >> Convert to Symbol… tak jak poniżej:

Po zatwierdzeniu zmian kliknij dwukrotnie na utworzonym klipie filmowym aby przejść do jego edycji. Tym razem zaimportuj do sceny plik oko.png wybierając tak jak w poprzednim kroku: File >> Import >> Import to Stage (Ctrl+R), a następnie umieść je w prawym rogu białego koła. Powróć do głównej sceny klikając Scene 1:

Zaznacz teraz oko i wydaj polecenie kopiuj-wklej klikając: Ctrl+C i Ctrl+V. Uzyskaną kopię umieść na miejscu drugiego oka. Używając palety Properties nadaj lewemu oku nazwę eye1_mc, a prawemu eye2_mc w polu Instance Name.

Krok 4 – Trygonometria w ActionScript 3.0
Na tym kończy się część graficzna tego samouczka. Czas na ActionScript. Wyjaśnijmy więc co zamierzamy osiągnąć. Kiedy oczy podążają za kursorem myszy obracają się pod właściwym kątem, który zmienia się za każdym posunięciem gryzonia. Oto jak to wygląda na prostym schemacie:

Naszym celem jest ustalenie wartości tego kąta, aby móc obrócić oko w odpowiedni sposób. Nałóżmy na schemat wszystkie dane jakie możemy pozyskać i sprawdźmy czy coś z tego wyjdzie:

W tym miejscu do głosu dochodzi właśnie trygonometria i metoda atan2. Jak się okazuje w ręce mamy wszystkie potrzebne informacje do przeprowadzenia odpowiednich obliczeń i określenia prawidłowego kątu. Wykorzystajmy więc to: Stwórz nową warstwę i nazwij ją actionscript. Zaznacz jej pierwszą klatkę i wklej ostateczny kod ActionScript 3.0 klikając Window >> Actions (F9):

stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor); function followCursor(event:MouseEvent):void { var coordy1 : Number = mouseY - eye1_mc.y; var coordx1 : Number = mouseX - eye1_mc.x; var angleRadians1 : Number = Math.atan2(coordy1,coordx1); var angleDegrees1 : Number = angleRadians1 * 180 / Math.PI; eye1_mc.rotation = angleDegrees1; var coordy2 : Number = mouseY - eye2_mc.y; var coordx2 : Number = mouseX - eye2_mc.x; var angleRadians2 : Number = Math.atan2(coordy2,coordx2); var angleDegrees2 : Number = angleRadians2 * 180 / Math.PI; eye2_mc.rotation = angleDegrees2; }

Teraz już tylko przetestuj wszystko w akcji klikając Control >> Test Movie (Ctrl+Enter). Jeśli wszystko poszło dobrze powinieneś zobaczyć coś takiego:

Możesz również od razu pobrać cały projekt i pliki źródłowe tutaj.

źródło: riacodes.com

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Stwórz swój własny wektorowy motyw morskich kafelek

Rafał — Mon, 22 Jun 2009 19:35:41 +0000

W dzisiejszym samouczku, który jest pierwszym tekstowym tutorialem dla programu Adobe Illustrator CS4 jaki tłumaczę, zaprezentuję Wam jak w bardzo prosty i szybki sposób można utworzyć jakiś wzór (a’la coś w stylu tapety naściennej). W naszym przypadku będzie to motyw przedstawiający rożnej wielkości kafelki w odcieniach morskich fal. Aby je utworzyć w znacznej mierze wykorzystamy narzędzia takie jak Rounded Rectangle Tool oraz Transform Tool. Zapraszam!

Krok 1
Do utworzenia naszych kafelek będziemy potrzebować odpowiedniego schematu kolorów. W tym celu możesz skorzystać z kolorów, które przygotowałem poniżej lub znaleźć własny schemat na stronie COLOURlovers.com. Wybierz jeden z jaśniejszych odcieni i przytrzymując klawisz Shift (by zachować proporcje tworzonego obiektu) utwórz mały zaokrąglony kwadrat przeciągając kursor myszy w obrębie sceny z wciśniętym LPM korzystając z narzędzia Rounded Rectangle Tool.

Krok 2
Przejdź do menu programu i wybierz: Effect >> Distort & Transform >> Transform…. W oknie Transform Effect w polu copies wpisz wartość 15, a w miejscu Horizontal wartość 55pt lub więcej (wartość ta zależna jest od wymiarów kafelki, chodzi po prostu o to, aby powstały pomiędzy nimi równe kilkupixelowe odstępy).

Krok 3
Ponownie wybierz Effect >> Distort & Transform >> Transform… z menu programu, ale tym razem zmień wartość Vertical na -55pt, a copies na 15, aby skopiować kafelki w pionie.

Krok 4
Nadajmy naszym kafelkom kolory. W tym celu powinniśmy je rozdzielić klikając: Object >> Expand Appearance, a następnie dwukrotnie Object >> Ungroup lub Shift+Ctrl+G. Zaznacz teraz losowe kwadraty i zmień ich kolor na jaśniejszy lub ciemniejszy.

Powtórz kolorowanie na reszcie kafelek używając pozostałych kolorów:

Krok 5
Ponownie zaznacz losowe kafelki i przejdź do: Object >> Transform >> Transform Each… i zmień wartości dla Horizontal i Vertical w bloku Scale na 90%, aby pomniejszyć wybrane kafle.

Krok 6
Aby powtórzyć ostatnią modyfikację (Efekt Transform Scale o wartości 90%) użyj skrótu Ctrl+D. W ten sposób możesz zaznaczać kolejne kafle i powtarzać ich pomniejszanie kilkakrotnie by uzyskać jeszcze mniejsze obiekty. Oto gotowy wzór/motyw:

Dopadło Cię lenistwo? Oto plik źródłowy! Pozdrawiam!

źródło: vectordiary.com

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Rekonstruujemy oryginalne logo Google Inc.

Rafał — Tue, 16 Jun 2009 19:04:16 +0000

“Jesienią 1997 r. Brin i Page potrzebowali nowej nazwy dla wyszukiwarki BackRub. O pomoc poprosili Seana Andersona kolegę z pokoju Page’a, który miał za zadanie wypisywać na tablicy wszystkie słowa jakie przyjdą mu do głowy. W końcu którejś sesji Sean zaproponował Googolplex uzasadniając “Staracie się opracować produkty, które pozwoliłyby ludziom na przeszukiwanie dużej ilości danych a googol to przecież ogromna liczba”. Larry któremu spodobała się nazwa sprawdził czy domena jest wolna i jeszcze tego wieczora ją zarejestrował, nawet nie świadomy błędu który popełnił wpisując “google“, a następnie nową nazwę wypisał na tablicy w pokoju. Rano Tamara Munzner dopisała “chyba miało być googol ?”. Oczywiście prawidłowa nazwa czyli liczba była już dawno zarejestrowana…”

źródło: pl.wikipedia.org

Pewnie o tym nie wiedziałeś? Ha, ja też nie – mimo, iż wyszukiwarki Google używam dosłownie codziennie! Przejdźmy jednak do rzeczy i spróbujmy zrekonstruować prawdopodobnie najbardziej rozpoznawalne logo na świecie, które zapewne gości jako strona startowa na wielu ekranach komputerów – być może i również na Twoim. Oto jedyna rzecz jakiej będziemy potrzebować zanim przystąpimy do tutoriala: jest nią czcionka o nazwie Catull, którą możesz pobrać właśnie tutaj.

Krok 1 – Tworzymy nowy dokument
Utwórz nowy dokument (skrót Ctrl+N) w programie Adobe Photoshop o wymiarach 600 na 400 px, a jako kolor tła wybierz white:

Krok 2 – Dodajemy tekst
Wybierz z menu narzędzi po lewej Horizontal Type Tool (T) po czym z rozwijanej listy czcionek na pasku opcji zaznacz pozycję Catull (tutaj możesz pobrać tę czcionkę, a aby ją zainstalować wystarczy przenieść pliki z archiwum do katalogu: C:\WINDOWS\Fonts).

Jak widzisz powyżej wybrałem czcionkę o rozmiarze 120pt, następnie wpisałem słowo Google, po czym zmieniłem kolory poszczególnych liter od lewej do prawej na: #1949b7 (niebieskie “G”), #d62408 (czerwone “o”), #efba00 (żółte “o”), #1949b7 (niebieskie “g”), #109619 (zielone “l”), #d62408 (czerwone “e”):

Krok 3 – Włączamy efekty Blending Options
Przejdź do palety Layers (lub wybierz Window >> Layers jeśli nie jest ona aktualnie widoczna) i kliknij PPM na dodanej w drugim kroku warstwie tekstowej po czym wybierz Blending Options. Oto efekty, których użyjemy:

Drop Shadow:

Bevel and Emboss:

A oto efekt końcowy, do którego dodałem jeszcze napis Polska koloru #666666 i symbol TM (trademark):

Jeśli mimo wszystko mój tutorial sprawia Ci kłopoty możesz pobrać gotowy plik psd tutaj. Pozdrawiam!

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Modelujemy miskę dla naszego czworonoga

Rafał — Sun, 07 Jun 2009 20:47:19 +0000

Przed nami kolejny tutorial, tym razem jest to pierwszy z serii samouczków modelingu w programie Autodesk 3ds Max, w których przeważnie zajmować się będziemy projektowaniem od podstaw jakichś drobnych i raczej mało skomplikowanych rzeczy i przedmiotów co- i niecodziennego użytku. Na sam początek wybrałem miskę dla psa, która jest stosunkowo bardzo prostym obiektem, ponieważ tworzy ją jedynie odpowiednio ukształtowany i zmodyfikowany cylinder.

Krok 1
Przed rozpoczęciem pracy powinnyśmy utworzyć nową scenę i zresetować wszystkie ustawienia programu, aby to zrobić wciśnij klawisze Ctrl+N, a następnie potwierdź swój wybór klikając na button OK. Musimy również utworzyć obiekt na podstawie, którego stworzymy naszą miskę, aby to zrobić przejdź do pierwszej z zakładek prawego menu (o nazwie Create), a następnie wybierz pierwszą ikonę (Geometry) i listy poniżej wartość Extended Primitives. W bloku Object Type wybierz ChamferCyl i przeciągnij kursor z wciśniętym lewym klawiszem myszy w obrębie sceny tworząc cylinder. Nie przejmuj się wymiarami – ustawimy je dopiero teraz w bloku Parameters na: Radius: 54, Height: 30, Fillet: 0,45.

Krok 2
Zaznacz narzędziem Select Object obiekt Chamfer Cylinder, a następnie kliknij na nim prawym klawiszem myszy i z menu wybierz Convert to: >> Convert to Editable Poly, po czym w prawym menu w obrębie bloku Selection kliknij na mały czerwony kwadrat włączając Polygon Mode tak jak jest to widoczne na poniższych zrzutach ekranu:

Krok 3
Przejdź do widoku sceny z przodu i zastosuj na naszym obiekcie w zaznaczonych i widocznych poniżej miejscach opcje Inset oraz Extrude Polygons, które znajdziesz w bloku Edit Polygons.

Użyj następujących ustawień:

Jeśli wszystko poszło dobrze powinniśmy otrzymać mniej więcej coś takiego:

Krok 4
Ponownie przechodząc do zakładki Create i klikając na ikonę Geometry utwórz kolejny obiekt, którym tym razem będzie prostopadłościan. Kliknij na button Box, który znajduje się pod listą Standard Primitives i przeciągnij kursor myszy w obrębie sceny z wciśniętym LPM. Prostopadłościan, który właśnie utworzyłeś umieść w ten sam sposób jak widzisz to poniżej:

Krok 5
Zaznacz obiekt Chamfer Cylinder narzędziem Select Object po czym z rozwijanej listy w zakładce Create >> Geometry wybierz Compound Objects i kliknij na button Boolean. Zaraz po tym kliknij na button Pick Operand B w bloku Pick Boolean i zaznacz prostopadłościan Box, który natychmiast zniknie tworząc “dziurę” lub matematycznie mówiąc różnicę tych dwóch obiektów.

Nasza miska w tej chwili powinna wyglądać właśnie tak:

Krok 6
Przejdź do zakładki Modify, zaznacz miskę i zastosuj dla niej modyfikator o nazwie Taper. Wybierz go z rozwijanej listy Modifier List i użyj następujących ustawień w bloku Parameters:

Efekt:

Krok 7
Skonwertuj obiekt klikając na nim PPM i wybierając z menu: Convert to: >> Convert to Editable Poly, po czym zaznacz jego górną część i z bloku Edit Polygons zastosuj Extrude o wartości -17,0.

Krok 8
Ponownie przejdź do zakładki Modify, zaznacz miskę i zastosuj dla niej modyfikator o nazwie TurboSmooth. Wybierz go z rozwijanej listy Modifier List po czym w bloku TurboSmooth w polu Iterations wpisz wartość 3, dzięki czemu siatka naszego obiektu zostanie znacznie zagęszczona, a jego kształty wygładzone.

Krok 9
Oto gotowy model wyrenderowany z widoku naszego viewport’u po dodaniu odpowiednich materiałów i światła:

Jeśli chcesz możesz go pobrać właśnie tutaj!

źródło: php2k.com

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Płynna animacja rozmycia tekstu w technologii Flash

Rafał — Wed, 06 May 2009 16:57:55 +0000

Korzystając z tego szczegółowego samouczka nauczysz się w jaki sposób za pomocą programu Adobe Flash CS3 Professional wykonać prostą prezentację tekstu (typowy banner, button lub cokolwiek innego) z animacją jego rozmycia. Tutorial ten nie wymaga znajomości ActionScript’u, dlatego nie będziemy z niego korzystać. Podczas tej lekcji nauczysz się w jaki sposób skonwertować jakikolwiek tekst w symbol Movie Clip, zaanimować go (wykorzystując Motion Tween) , a następnie nałożyć odpowiednie filtry dodające uroku naszej pracy. A więc do dzieła!

Krok 1
Stwórz nowy dokument Flash po czym przejdź do okna jego proporcji (Document Properties) wciskając na klawiaturze kombinację klawiszy Ctrl+J. W polu Dimensions wpisz wymiary dokumentu, nad którym będziemy pracować. Wybierz również tło (Background color) dla naszej pracy, w moim przypadku jest to ciemny odcień koloru niebieskiego: #004477. Na koniec ustal Frame rate na 32 fps, dzięki czemu nasza animacja stanie się o wiele płynniejsza.

Krok 2
Zmień domyślną nazwę warstwy Layer 1 (klikając na niej dwukrotnie i zatwierdzając enterem) na: txt1.

Krok 3
Wybierz z menu po lewej narzędzie Text Tool (T) po czym włącz swoją ulubiona czcionkę, ustal jej rozmiar oraz pozostałe opcje i wpisz w obrębie sceny jakiś tekst. Jeśli Ci na tym zależy możesz go także wyrównać do środka sceny używając palety Align (pamiętaj by włączyć opcję Align/Distribute to stage, dzięki czemu tekst będzie wyrównywany względem brzegów dokumentu).

Krok 4
Póki Twój tekst jest ciągle zaznaczony wciśnij na klawiaturze klawisz F8 (Convert to Symbol), aby skonwertować go w symbol Movie Clip:

Krok 5
Przy pomocy klawisza Ctrl zaznacz kolejno na listwie czasu naszego dokumentu klatki o numerach 15, 80 i 95, a następnie wciśnij na klawiaturze klawisz F6, dzięki czemu w miejscach tych zostaną utworzone tzw. klatki kluczowe. Możesz to również zrobić w inny sposób korzystając z menu programu: Insert >> Timeline >> Keyframe – efekt jest ten sam.

Krok 6
Przejdź do klatki numer 95 i zaznacz wcześniej utworzony tekst za pomocą narzędzia Selection Tool (V), gdy to zrobisz otwórz panel proporcji (Properties Panel) lub użyj skrótu klawiaturowego Ctrl+F3. Wybierz zakładkę Filters i kliknij na ikonę niebieskiego plusa (Add filter) po czym wybierz pozycje Blur stosując poniższe ustawienia:

Zaraz po tym przejdź z powrotem do zakładki Properties i po prawej stronie w menu Color wpisz wartość Alpha równą 0%.

Krok 7
Zaznacz klatkę numer 80 po czym przejdź do Properties Panel (Ctrl+F3) i dla menu Tween wybierz wartość Motion, a dla Ease -100 (tak jak na poniższym obrazku):

Krok 8
Wróć do pierwszej klatki dokumentu i powtórz kroki numer 6, 7 i 8. Jedyną różnicą jaka odnotujemy będzie ustalenie wartości Ease na 100:

Krok 9
Stwórz nową warstwę klikając w ikonę Inser Layer, a następnie nazwij ją txt2 i umieść ponad pierwszą warstwą dokumentu.

Krok 10
Zaznacz klatki numer 90, 105 i 185 warstwy txt2 i wciśnij klawisz F6 na swojej klawiaturze.

Krok 11
Póki jesteś w klatce 185 powtórz krok 6.

Krok 12
Wróć do klatki 170 i powtórz krok 7.

Krok 13
Przejdź do klatki 90 i powtórz krok 8.

Przetestuj swój dokument wciskając Ctrl+Enter, dzięki czemu zostanie wywołane okno Test Movie. Oto efekt naszej pracy:

Jeśli jesteś leniwy możesz pobrać gotowy plik *.fla i przerobić go według swoich potrzeb, oto i on: pobierz plik. Oryginalną wersję tego tutoriala w języku angielskim znajdziesz na flashvault.net. Pozdrawiam!

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Kolorowe buttony i Photoshop

Rafał — Tue, 28 Apr 2009 10:57:43 +0000

Moje ostatnie 2 posty dotyczyły programów graficznych, dlatego dzisiaj zajmiemy się czymś innym, a mianowicie tworzeniem kolorowych buttonów “zakładek” w programie Adobe Photoshop. Efekt końcowy tego tutoriala widoczny jest na powyższym obrazku i myślę, że każdemu przypadnie on do gustu. Do stworzenia prawie w całości powyższych przycisków wykorzystamy Blending Options, stosując odpowiednie efekty warstw, takie jak: Inner Shadow, Outer Glow, Gradient Overlay czy Stroke. Zapraszam do zapoznania się z całością wpisu i wypróbowania go na własnej skórze! ;)

Krok 1 – Tworzymy nowy dokument
Pierwsza rzecz jaką musimy wykonać to utworzenie nowego dokumentu i wybranie dla niego odpowiedniego tła. Oto wymiary, których użyłem: 180×80 pixeli, tło natomiast wypełniłem kolorem #212121 – aby to zrobić wciśnij Ctrl+A dzięki czemu zostanie zaznaczony cały obszar roboczy, po czym z menu głównego programu wybierz pozycję Edit >> Fill…. W polu Use wybierz Color…, a w oknie, które pojawi się na ekranie wpisz kod html naszego koloru (#212121). Oto efekt:

Krok 2 – Zaznaczenie
Stwórz nową warstwę (klikając Layer >> New >> Layer…), a następnie używając narzędzia Rectangular Marquee Tool utwórz zaznaczenie o rozmiarach, które ma mieć Twój button. Jak widzisz jest ono prostokątne, a nasz przycisk ma być lekko zaokrąglony, aby to poprawić wybierz opcję Select >> Modify >> Smooth… i podaj wartość w liczbie pixeli o jaką ma być zaokrąglone nasze zaznaczenie (w moim przypadku są to 3px):

Krok 3 – Wypełniamy zaznaczenie kolorem
Okej, mamy zaznaczenie, ale nasz button nadal nie ma żadnego koloru! Wybierz więc Foreground color i wypełnij nim nasze zaznaczenie korzystając z narzędzia Paint Bucket Tool (G) – po prostu klikając w jego obrębie. Ja użyłem czerwonego koloru o kodzie: #b00000.

Krok 4 – Dodajemy efekty warstw
Jak na razie nie wygląda to zbyt zadowalająco, nieprawdaż? Dodajmy więc poniższe efekty warstw, a przekonasz się, że ze zwykłego prostokąta w mgnieniu oka może powstać piękny button. Kliknij PPM na warstwie z wypełnionym wcześniej wybranym kolorem zaznaczeniu i wybierz Blending Options… stosując poniższe efekty:

Inner Shadow:

Outer Glow:

Gradient Overlay:

Gradient Editor (ustawienia gradientu dla efektu Gradient Overlay):

Stroke:

Po zastosowaniu wszystkich opcji powinniśmy otrzymać coś takiego:

Krok 5 – Dodajemy tekst
Nie pozostaje nam nic innego jak dodanie jakiegoś tekstu przy użyciu narzędzia Horizontal Type Tool (T). Oto ustawienia, których użyłem, a których efekty widzicie poniżej: czcionka Arial Narrow, Bold, 10pt, Smooth, koloru #ffffff.

Krok 6 – Detale
Hym, tekst nie wygląda zbyt ostro, jest lekko rozmazany – dodajmy więc do niego cień (ponownie kliknij PPM na warstwie tekstu i wybierz Blending Options…):

Drop Shadow:

Oto co otrzymamy:

Możesz wierzyć lub nie, ale właśnie skończyliśmy naszą pracę. Teraz już nic nie stoi Ci na przeszkodzie by stworzyć całą gamę kolorów swoich własnych buttonów, wystarczy, że zmienisz kolor pierwszej warstwy z zaznaczeniem. Oto przykład:

Jeśli chcesz możesz po prostu pobrać projekt psd powyższego obrazu i wykorzystać go w swoich własnych pracach. Mam nadzieję, że spodobał Ci się ten samouczek, jeśli tak to zostaw komentarz – na pewno go przeczytam! :)

Możesz także przeczytać ten tutorial w języku angielskim, oto jego oryginał. Pozdrawiam!

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Zielona ramka na Twoje myśli

Rafał — Mon, 13 Apr 2009 10:23:43 +0000

Dobra, dzisiaj bez owijania w bawełnę! Tytuł postu nie mówi wiele, więc przejdźmy do rzeczy: w poniższym tutorialu nauczysz się jak przy pomocy Photoshop’a wykonać prostą zieloną ramkę w stylu web 2.0, która następnie może posłużyć Ci na przykład do zbudowania kolumn swojej własnej strony www. W tym celu skorzystamy ze styli Blending Options, utworzymy wektorowe kształty przy pomocy narzędzia Rounded Rectangle Tool oraz efektowne odbicie, czyli tzw. efekt mokrej podłogi (z ang. wet floor effect).

Krok 1
Włącz Photoshop’a i stwórz nowy dokument o rozmiarach, które będą Ci odpowiadać. Ja wybrałem obszar o powierzchni 300 na 231 pixeli. Jako kolor tła naszej pracy (Background Contents) wybierz kolor biały, czyli pozycję White, po czym zatwierdź klikając przycisk OK.

Krok 2
Z menu po lewej wybierz narzędzie Rounded Rectangle Tool (U), a następnie ustaw Foreground color na #9AB82E i stwórz kształt, na którym będzie bazowała nasza ramka. Oto ustawienia narzędzia (wybrałem Radius: 6px) i kształt, który właśnie utworzyłem przy jego pomocy:

Krok 3
Na nowo utworzonym kształcie (stworzonym w poprzednim kroku) zastosuj następujące style (klikając na jego warstwie PPM >> Blending Options…), i tak kolejno dla:

Drop Shadow:

Inner Glow:

Gradient Overlay:

Stroke:

Po wprowadzeniu wszystkich ustawień zatwierdź je klikając na przycisk OK.

Krok 4
W tym kroku utworzymy kolejny kształt umieszczając go w środku poprzedniego, na którym to znajdzie się tekst wypełniający naszą ramkę. Aby to zrobić musisz zduplikować utworzony wcześniej kształt: kliknij PPM na warstwie kształtu i wybierz opcję Duplicate Layer…, po czym użyj narzędzia Free Transform Tool, aby zeskalować nowo utworzoną warstwę.

Użyj skrótu klawiaturowego Ctrl+T by wybrać Free Transform Tool i zmień procentowe wartości wysokości i szerokości na 97%, tak jak jest to widoczne na poniższym obrazku.

Krok 5
Następnie przy pomocy myszki lekko zmniejsz rozmiary utworzonej właśnie warstwy zostawiając miejsce na nagłówek z tekstem, tak jak jest to widoczne na poniższym zrzucie ekranu:

Nasza ramka w tej chwili powinna wyglądać tak:

Krok 6
Wyczyść aktualne style dla naszej warstwy klikając na niej PPM >> Clear Layer Style i zastosuj następujące:

Inner Glow:

Gradient Overlay:

Nasza ramka powinna teraz wyglądać mniej więcej tak:

Krok 7
Na sam koniec naszej pracy wypadałoby dodać do ramki jakiś tytuł i tekst, który ją wypełni oraz opcjonalnie ikonę, która będzie ją reprezentować. Oto ustawienia, które użyłem dla nagłówka: czcionka to Trebuchet MS z włączonym Bold’em (pogrubieniem), o rozmiarze 12px, Strong oraz dodatkowo styl Stroke o szerokości1px koloru #7E991D. Oprócz tego dorzuciłem od siebie ładne odbicie, które podkreśla zakończenie ramki nadając jej charakteru web 2.0:

Gotowe! Oto oryginalna wersja tutorialu napisanego w języku angielskim. :) Pozdrawiam i życzę wszystkim Wesołych Świąt Wielkiej Nocy!

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Selective Sepia, wydobądź kolor…

Rafał — Tue, 31 Mar 2009 17:26:49 +0000

Fotografujesz? Aparatem, a może komórką? Zresztą to nie istotne czym… Mam nadzieję, że tak, ponieważ poniższy samouczek w pierwszej kolejności przyda się osobom wykonującym samodzielnie zdjęcia, portrety czy fotografującym przyrodę lub cokolwiek innego co podsunie się im pod obiektyw. Nauczysz się w nim jak za pomocą tej prostej metody przy użyciu Photoshop’a wydobyć ze swoich zdjęć określone barwy.

Jeśli posiadasz jakieś barwne zdjęcia, z pokaźną paletą kolorów i mocnymi przejściami możesz ich użyć, a jeśli nie po prostu wykorzystaj materiały, którymi będę posługiwał się samemu. A więc do dzieła!

Krok 1 – Wybór zdjęcia
Tak jak mówiłem może to być Twoje własne zdjęcie, fotografia znaleziona w internecie lub też obraz, którym będziemy się posługiwać w tutorialu. Oto zdjęcie, które wybrałem – nadaje się świetnie do naszej pracy, ponieważ zawiera 3 zasadniczo różniące się od siebie kolory co bardzo ułatwi nam pracę (uwaga: nie należy wybierać zdjęć, w których przeważa tylko jeden kolor!).

Zapisz swój obraz na pulpicie, a następnie otwórz w Photoshop’ie, gdzie rozpoczniemy naszą pracę:

Krok 2 – Hue/Saturation…
W palecie Layers (Warstwy) odszukaj ikonę Create new fill or adjustment layer widoczną na poniższym screenie, a następnie z jej menu wybierz opcję Hue/Saturation…:

Na Twoim ekranie powinno pojawić się stosowne okno. Dzięki niemu możemy określić jakie fragmenty obrazu lub kolory poddamy naszej edycji (tzw. efektowi sepia). Zdecyduj więc czy chcesz wyszczególnić dane kolory przechodząc do podpunktu 2.1, czy też zrobić to manualnie zaznaczając poszczególne fragmenty obrazu w podpunkcie 2.2.

Krok 2.1 – Wybór danych kolorów
Wykorzystując tą metodę otrzymamy najbardziej naturalny efekt, ale zanim zaczniemy cokolwiek robić zdecydujmy, których barw chcemy się pozbyć, a które zachować na naszym zdjęciu. Dla przykładu aby wyróżnić kolor czerwony użyjemy następujących opcji dla poszczególnych barw, które wybieramy z rozwijanej listy:

Reds: 0 Saturation (zwróć uwagę, że jest to barwa, którą chcemy wyszczególnić)
Yellows: -100 Saturation
Greens: -100 Saturation
Cyans: -100 Saturation
Blues: -100 Saturation
Magenta : -100 Saturation

Pozostałe opcje (suwaki) pozostawiamy bez zmian (domyślna wartość to 0).

Efekt widoczny jest na ekranie od razu po zatwierdzeniu wprowadzonych zmian:

Krok 2.2 – Manualne zaznaczenie fragmentów obrazu
Manualne zaznaczenie fragmentów obrazu umożliwi Ci bardzo precyzyjne określenie części zdjęcia, które chciałbyś wyróżnić. Sprawdza się ono, gdy pracujemy nad zdjęciami o jednolitej kolorystyce, gdzie wcześniejsza metoda mogłaby spowodować niechciane efekty działając na całym obszarze fotografii.

Z rozwijanej listy w oknie Hue/Saturation wybierz opcję Master, dla której wartość Saturation ustal na -100, po czym zatwierdź zmiany klikając OK. Twoje zdjęcie powinno teraz wyglądać jakby było edytowane w skali szarości będąc całkowicie czarno-białe.

Następnie aktywuj maskę warstwy poprzez jej kliknięcie w palecie warstw (podświetlone pole na screenie), po czym z menu narzędzi po lewej wybierz narzędzie Brush lub Pencil Tool, upewnij się, że Foreground color jest ustawiony na czarny (lub po prostu skorzystaj ze skrótu klawiaturowego wciskając klawisz D) i zacznij zamalowywać obszar, gdzie ma pojawić się kolor.

Gotowe! Oto kilka wariacji obrazu nad którym pracowaliśmy:

Red:

Blue i Cyan:

Yellow i Green:

oraz Red, Yellow i Green:

Autorem powyższego tutoriala jest Denny Tang, tutaj znajdziecie jego oryginał. Pozdrawiam. :)

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)

Sprejem po ścianie

Rafał — Wed, 25 Mar 2009 17:39:03 +0000

Dzisiaj przyjrzymy się kolejnemu tutorialowi z “serii”, tyle że tym razem będzie to tutorial tekstowy. Podobnie jak w moim poprzednim poście omówiona zostanie tutaj prosta metoda na stworzenie efektownego tekstu w stylu grunge widocznego powyżej. Autorem artykułu jest Adam Woodhouse, który w oryginale został napisany w języku angielskim. Ja natomiast pozwoliłem sobie na przepisanie go na nasz język.

W rozwinięciu postu znajdziecie szczegółowe punkty ze zrzutami ekranu wyjaśniające krok po kroku jak stworzyć podobny lub identyczny efekt. Zapraszam!

Krok 1 – Przygotowanie obszaru roboczego
Pierwszy krok jest bardzo prosty. Musisz po prostu włączyć Photoshop’a i wybrać polecenie File >> New…, aby stworzyć nowy dokument o określonych rozmiarach. Dla przykładu ja wybrałem obszar o powierzchni 640 na 300 pixeli. Możesz zrobić dokładnie tak samo.

Kolejna rzecz to wybranie odpowiedniego tła dla naszej pracy. Przejdź do palety Color i wybierz barwę, która Ci odpowiada. Jeśli nie możesz odszukać tej palety wybierz polecenie Window >> Color, które spowoduje wyświetlenie jej na ekranie.

Wybierz narzędzie Paint Bucket Tool (lub użyj skrótu naciskając klawisz G) i kliknij jednokrotnie gdziekolwiek w obrębie obszaru roboczego by wypełnić go wybranym wcześniej kolorem, tak jak jest to pokazane na poniższym screenie.

Krok 2 – Wprowadzamy tekst
Wybierz narzędzie Horizontal Type Tool z menu narzędzi po lewej stronie lub ponownie zrób to wykorzystując skróty klawiaturowe (klawisz T). Kliknij w obrębie naszego tła i korzystając z paska opcji dostępnego u góry programu wybierz odpowiednią czcionkę i rozmiar. Ja wybrałem Coolvetica, 172px, a kolor czcionki ustawiłem na biały. Teraz po prostu wpisz jakiś tekst nad którym będziemy pracować dalej.

Kolejnym ważnym punktem po tej czynności jest przygotowanie naszej warstwy tekstowej do dalszej edycji. Odszukaj ją w palecie Layers i klikając na niej PPM wybierz z listy Rasterize Type, aby zamienić ją w zwykłą warstwę.

Krok 3 – Strzępienie tekstu
Dzięki poprzedniej czynności możemy dokonać edycji naszego tekstu (nie mamy za to teraz możliwości jego zmiany). Postrzępmy go trochę wybierając narzędzie Eraser Tool (E) oraz odpowiedni pędzel z paska opcji, w moim przypadku jest to Oil Pastel Large:

Używając wybranego pędzla wymaż częściowo kontury napisu, w czasie pracy możesz dowolnie zmieniać pędzel, aby urozmaicić kształt tekstu nadając mu ciekawszy wygląd.

Krok 4 – Dopracowywanie szczegółów
Teraz zamiast wymazywać kontury tekstu dodamy do niego parę pociągnięć pędzlem, w tym celu wybierz narzędzie Brush Tool (B) i dobierz odpowiedni kształt, którym dodamy do naszego obrazu kilka plam (np. łącząc poszczególne litery tak jak jest to widoczne poniżej).

Oprócz tego możemy lekko obrócić nasz tekst wybierając z menu pozycję Edit >> Transform >> Rotate. Gdy obrócisz go nieznacznie w jedną ze stron zatwierdź dokonane zmiany klawiszem Enter.

Krok 5 – Eksperymentowanie
Chwyć pędzel, wybierz odpowiedni wzór i zacznij eksperymentować ze swoim tekstem. Zabawa narzędziami i filtrami to najlepszy sposób na naukę obsługi Photoshop’a. W internecie możesz znaleźć wiele darmowych pędzli, które świetnie nadadzą się do wykończenia Twojej pracy. Oto co udało mi się zrobić po 5 minutach pracy!

Powiązane wpisy:

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)