phpBB2 by Przemo

[Falcone]

Na forum bardzo często pojawiają się pytania i prośby dotyczące naprawdę prostych rzeczy, które jest w stanie wykonać każdy średnio rozwinięty człowiek, który umie klikać myszką. Zamiast poszukać jak cos wykonać lub jeszcze lepiej - samemu popróbować, większość ludzi woli poprosić kogoś kto "zna się na grafice". Postanowiłem z tym skończyć i napisać drobne faq, które powinno choć trochę pomóc. Poświęcone będzie ono najlepszemu według mnie i bodajże najpopularniejszemu programowi 2d (nie, dowcipy o paincie nie są śmieszne), czyli programowi Photoshop. Mam nadzieję, że choć trochę pomogę Wam przy tworzeniu i edycji rang, ikon, przycisków itd. Zaczynamy...

Zmiana koloru obrazka (tła):

Cała filozofia polega na naciśnięciu dwóch przycisków.

1. Otwieramy jakiś obrazek.


2. Przyciskamy kombinację klawiszy ctrl+u i wyskakuje nam takie okienko:



3. Przesuwamy suwaki według uznania do otrzymania zamierzonego efektu i naciskamy ok.

Efekt końcowy:

Możemy też zaznaczyć pole koloruj, co spowoduje nałożenie koloru na cały obszar obrazka, a nie tylko barwy tła jak w tym przypadku.

Zmiana kolor na czarnobiały:

Następujące zagadnienie nie wymaga od nas nawet przesuwania suwaków.

1. Otwieramy plik graficzny.


2. Naciskamy kombinację klawiszy shift+ctrl+u

3. Otrzymujemy efekt:

Tworzenie ramki:

Jest bardzo wiele sposobów na stworzenie obramowania wokół naszego obrazka:

I Sposób dla najbardziej początkujących:

Otwieramy obrazek i wybieramy zwykły ołówek, kolor, szerokość i rysujemy przy krawędziach.



II Sposób:

Sprawdzamy poprzez Obrazek -> Wielkość obrazka wymiary naszej grafiki i otwieramy nowy dokument, który z każdej strony (lewo, prawo, góra, dół) będzie o tyle pikseli ile chcemy większy, aby ramka była większa niż obrazek pierwszy i kolorujemy go żądanym kolorem.



Wracamy do pierwszego obrazka i zaznaczamy go (ctrl+a) po czym kopiujemy (ctrl+c) i przechodzimy z powrotem do naszego drugiego obrazka, gdzie wklejimy pierwszy (ctrl+v).

Otrzymany efekt:

III i zarazem najlepszy sposób:

Tworzymy nową warstwę ( warstwa -> nowa warstwa) po czym zaznaczamy całość (ctrl+a). Po zaznaczeniu wybieramy z menu Edycja -> obrysuj



Wybieramy potrzebne nam parametry:



I otrzymujemy efekt:

Tekst i efekty:

Zacznijmy od tego, że jeżeli nie masz za wiele czcionek to odsyłam do strony www.dafont.com , gdzie są naprawdę ogromne ich zasoby.
Opiszę teraz najprostsze efekty, które są zawarte w photoshopie:

1. Otwieramy obrazek i tworzymy nową warstwę (warstwa -> nowa warstwa)
2. Z menu po lewej wybieramy literkę "T" i zaznaczamy miejsca, gdzie mamy umieścić nasz tekst.

Najprostsze efekty naszego tekstu:



a - czcionka
b- styl
c - rozmiar
d - wygładzanie
e - umiejscowienie

Jeżeli chcemy zmienić kolor to zaznaczamy tekst i wybieramy sobie kolor z palety. To samo można zastosować dla jednej lub kilku liter. Wystarczy zaznaczyć wybrane literki.


Żeby nadać naszemu tekstowi bardziej skomplikowane efekty, postępujemy w ten sposób:

W miejscu zaznaczonym kółkiem musimy wybrać warstwę, na której mamy zamiar działać. Teraz są dwie możliwości:

- Wybieramy z menu Warstwa -> styl warstwy


- Klikamy dwukrotnie w polu wyboru warstwy

Jak byśmy nie postąpili to w efekcie otworzymy to okienko:



Nie będę tutaj z osobna opisywać każdego efektu, gdyż mógłbym to robić do jutra. Sądzę, że zorientowanie się przykładowo, co to jest obrys nie jest tak trudne i każdy sobie z tym poradzi tym bardziej, że obsługa jest bardzo intuicyjna i wszystko wykonuje się z podglądem. Po dodaniu efektów klikamy OK.

Przykładowo otrzymamy takie coś:

Wklejanie jednego obrazka na drugi:

Co trzeba zrobić, gdy chcemy przykładowo na taką rangę - wklejić taką gwiazdkę - ?

Oba obrazki otwieramy za pomocą photoshopa. Musimy najpierw się zastanowić, który obrazek chcemy wkleić na który. Akurat w tym przypadku oczywiste jest, że gwiazdke na rangę. Ok, ale gwiazdka jest za duża i na białym tle...

Zwyczajnie wybieramy gumkę, którą zmażemy tło ( gumka tła, magiczna gumka w zależności od tła) i tak jak napisałem przed chwilą zmazujemy tło. Po paru przesunięciach myszki mamy:



Jeżeli tło jest bardzo zróżnicowane to używamy magicznej różdzki (W). Po wybraniu narzędzia zwyczajnie najeżdżamy myszą i naciskamy na miejsce do wycięcia.

Pozostaje nam tylko zmniejszyć obrazek, co robimy wybierając menu -> Obrazek -> wielkość obrazka
i wiedząc, że przykładowo wysokość rangi to 15 pikseli, zmniejszamy wysokość gwiazdki do 17.
Gdy mamy już swoją mają gwiazdkę to postępujemy tak jak wcześniej w tym tutorialu, czyli ctrl+a, ctrl+c i przechodzimy do swojej rangi i przyciskamy ctrl+v.

Efekt końcowy:

Gradienty i pozbywanie się napisu:

Program photoshop pozwala nam tworzyć bardzo staranne tła nawet jeżeli nic nie potrafimy. Wystarczy, że weźmiemy narzędzie zwane gradientem i ustawimy sobie 2 kolory, z których jeden ma przechodzić w drugi.



Wybieramy 2 kolory w gradiencie, przeciągamy gradient po naszym dokumencie, tworzymy ramkę i mamy już świetny podkład pod rangę.



Również spójrzcie u góry ekranu na 5 różnych gradientów do wyboru.



A teraz coś praktycznego:

Mamy taką rangę , a chcemy zmienić tekst na inny.

Aby to zrobić musimy się najpierw pozbyć napisu. Aby pozbyć się napisu musimy przykryć dotychczasową rangę takim gradientem, jaki już jest. W tym celu pobieramy za pomocą kroplomierza próbki kolorów z góry i z dołu rangi (oczywiście nie uwzględniając ramki). Na poniższym obrazku widać oba pobrane kolory



Widzimy teraz z czego zrobiony jest gradient i musimy takim samym gradientem przykryć naszą obecną rangę.
Tworzymy nową warstwę (warstwa -> nowa warstwa) i wybieramy zaznaczenie prostokątne (M). Zaznaczamy nasz obszar i powinno to wyglądać tak:



Na zaznaczony obszar nakładamy nasz gradient. Jeżeli wszystko dobrze zrobiliśmy to powinniśmy otrzymać czystą rangę, na którą można nałożyć napisy:

Krycie warstwy:

Chciałbym opisać jak uzyskać bardzo prosty efekt, lecz całkiem przydatny i w miarę fajny.
Bierzemy jakikolwiek obrazek i tworzymy nową warstwę. Wybieramy zaznaczenie w takim kształcie, jaki nam pasuje i zaznaczmy wybrany przez siebie obszar.



Wybieramy wiadro z farbą (G) i wylewamy farbę (kolor zależy od Ciebie) na zaznaczony obszar. Wchodzimy w styl warstwy i dodajemy cień z kryciem na 65% - 75% i czarny obrys (zależy od wielkości obrazka, ale najczęściej przedział 1-3 piksele).



Na koniec musimy zmniejszyć wypełnienie do około 30%:



Na koniec możemy też scalić warstwy (ctrl+e).

Jako końcowy efekt otrzymujemy:

Kształty:

W photoshopie mamy już parę gotowych kształtów takich jak strzałki, nutki i tak podobnie.
Możemy się do nich dostać wchodząc w kształty własne (U).

Wzorki:

Bardzo ładnym efektem, jeśli chodzi o grafikę forumową są patterny.
Wykonujemy je w sposób następujący:
Najpierw musimy otworzyć nowy przeźroczysty plik o rozdzielczości 6x6 pikseli. Przybliżenie na plik ustawiamy na największe, czyli 1600%. Aby stworzyć nowy wzorek wybieramy zwyczajnie ołówek o średnicy 1 piksela, którym po prostu narysujemy na swoim przeźroczystym pliku jakiś wzorek i tu już wybór należy do Ciebie.
Przykładowo ja zrobiłem to tak:



Jeżeli Wasz ołówek nie chce rysować w rogach to trzeba wejść w Widok -> Pokaż i odznaczyć Odcięcia.
Wracając do naszego wzorka - musimy go teraz zdefiniować. Wybieramy Edycja -> Zdefiniuj wzorek i nadajemy mu jakąś nazwę. Aby móc użyć naszego wzorka wybieramy narzędzie Stempel Wzorkiem (S) i wybieramy nasz świeżo utworzony wzorek:



Nakładając swój wzorek na obrazki możemy otrzymać taki efekt jak poniżej:

Formaty zapisu:

Na koniec słowo o formatach zapisu swoich obrazków. Formatem oferującym nam największą jakość jest .png i w miarę możliwości trzeba go stosować. Co za tym idzie .png również zajmuje więcej miejsca niż .gif czy .jpg.
Jednak przy .png jest jedna wada. Jeżeli zapiszemy coś przeźroczystego w tym formacie to niektóre przeglądarki w tym IE odczytają to jako szary i wcale nie otrzymamy żądanego efektu. Jeżeli stworzyliście grafikę do swego forum zawierającą przeźroczystość zapisujcie swoją pracę w .gif !
JPEG, które w ogole nie zapisuje przeźroczystości całkowicie odradzam.

Narazie to wszystko, mam nadzieję, że w przyszłości coś się dopisze.

Jeżeli któryś z modów stwierdzi, że to, co napisałem ma jakikolwiek sens to niech przyklei temat.


by Falcone © 2006

[ Komentarz dodany przez: nasedo: 11-02-2006, 23:54 ]
temat z nasedziowym blogoslawientwem - przyklejam

[Gadatliwa Kasia]

[Conry]

a skad można ściągnąc chociażby demo photoshopa?

[ Komentarz dodany przez: chelloPL: 12-02-2006, 10:58 ]
Za strony producenta?
http://www.adobe.com/supp...latform=Windows

[shqvarny]

FAQ niezłe i możne w końcu nie będzie sterty topiców z prośbą o zmiane koloru czy dopisanie czegoś w obrazku rangi (chociaż nie sądzę)

Conry, wszystko podane na przykładzie Photoshopa, ale np. darmowy Gimp pozwoli nam na dokonanie tyc samych, de facto b.prostych, rzeczy (jedynie różnica w nazwie funkcji czy minimalnie innym jej wykonaniu - to nie znaczy że gorzej).

topic na wszelki wypadek zamykam. gdyby ktoś chciał dopisać coś wartościowego, to proszę o konktat z Mod Team