Robimy banner w Adobe Photoshop

2 września, 2009 o 2:24 pm | Napisane w Photoshop | Dodaj komentarz
Tagi: adobe, adobe photoshop, baner, banner, jak zrobić banner, Photoshop, robienie bannera, tutorial na banner

Adobe Photoshop – Robimy banner

Autorem artykułu jest Eryk Kleinert

W tym artykule opiszę podstawy do zrobienia Waszego pierwszego bannera na stronę.
W tym artykule zajmę się bardziej praktyczną częścią Photoshopa. Zrobimy banner internetowy.
Jednak trochę teorii nie zaszkodzi, według Wikipedii dobry banner reklamowy powinien być:

• Przyciągający oko, oryginalny wygląd, wyróżniający się z całej strony.
• Treść zwięzła, zmuszająca oglądającego do interakcji – zawierająca pytania i celne, ale krótkie stwierdzenia, nakazujące Internaucie natychmiastowe podjęcie określonych działań. Brak zbędnych informacji.
• Jeśli banner jest animowany (np. gif lub flash) to długość animacji powinna być niewielka, żeby widz się nią nie znudził i nie przestał oglądać przed końcem.
• Czas ściągania bannera nie może być długi, najlepiej by reklama ważyła ok. 20 KB.
• Powinien mieć określone wymiary(w zależności od wybranego systemu wymiany bannerów) – dlatego tworząc banner, użyteczną praktyką jest wykonanie go w kilku standardowych wielkościach.

Wszystko jasne, przed przystąpieniem do projektowania bannera proponuję się upewnić jakie musi mieć on wymiary (np. na potrzeby toplist, systemów wymiany bannerów) lub robić go odpowiednio większego by po zmniejszeniu nie stracił na jakości.

W tym artykule zrobię banner o wymiarach 500×120. (File -> New -> Wpisujemy wartości, rozdzielczość 72 DPI).
Dobra, mamy białe tło, co dalej, na co zwrócić uwagę? Na pewno na to czego ma być banner. Warto zamieścić jakiś charakterystyczny znak (najlepiej logo, jeżeli dany serwis takie posiada), nazwę lub chwytliwy tekst. Można spróbować bannerów działających na ciekawość odbiorcy, bardziej tajemniczych, na przykład bez tekstu, z samym symbolem. Odbiorca nawet jak nie wejdzie na naszą stronę to na pewno go zaciekawi, a to już sukces. Wiele jest bannerów, które swym wykonaniem od żadnego nie odbiegają, są schematyczne, po prostu nudne. Moim zadaniem w tym artykule nie jest pokazanie jak zrobić „ciekawy i intrygujący banner” tylko jakich narzędzi używać w Photoshopie.

Jeżeli strona, dla której robimy banner ma swoją specyficzną kolorystykę to warto ją zawrzeć także w bannerze. Dla przykładu nasz banner będzie należał do… żeby daleko nie szukać do Artelisa. Tematyka wiadoma: artykuły, kolorystyka jest, tylko jak tu ją dodać do Photoshopa? Wchodzimy na stronę Artelisa, przyciskamy na naszej klawiaturze klawisz „Print Screen”. Wchodzimy do Photoshopa, dajemy File-> New (Rozmiar automatycznie się ustawi na taki jaką mamy rozdzielczość), akceptujemy i dajemy Edit-> Paste, lub po prostu CTRL+V. Mamy zrzut ekranu. Skorzystamy teraz z narzędzia do pobierania koloru („Eyedropper Tool”).

Mając je aktywne klikamy lewym przyciskiem myszy na jakimś zielonym polu strony, a trzymając ALT i klikając na powiedzmy żółtym. Mamy teraz kolor pierwszoplanowy oraz tła ustawiony jako specyficzne dla Artelisa.

Zamykamy nasz zrzut ekranu nie zapisując go, wracamy do pliku z bannerem. Wybieramy narzędzie do robienia gradientów („Gradient Tool”).

Ustawienia zostawiamy domyślne. Mając kursor myszki w górnych „rejonach” pliku, trzymamy klawisz SHIFT (Zobaczycie sami co robi) i przeciągamy w dół, tak jak tu:

Spróbujcie teraz bez SHIFTa, zobaczycie o co chodzi, a może efekt inny wam się bardziej spodoba. Możecie zmienić opcje gradientu w górnym panelu: zmienić jego typ, kolory, przenikanie (czyli jego widoczność).
Wypadało by teraz dodać trochę „życia” do naszego bannera. Z tego miejsca polecam świetną stronę http://sxc.hu , znajdziemy tam masę darmowych zdjęć do wykorzystania. Jeżeli chcecie robić krok po kroku tak jak ja, to zapiszcie na dysku zdjęcie http://www.sxc.hu/photo/836723, otwórzcie je w Photoshopie, przejdźcie to Image -> Image Size, zmniejszcie do powiedzmy 500 szerokość (Width), wysokość zmniejszy się automatycznie, zaakceptujcie. Zmniejszony obrazek zaznaczamy (CTRL+A, lub Select->All), kopiujemy (CTRL+C lub Edit->Copy), wybieramy okienko z bannerem i wklejamy (CTRL+V lub Edit->Paste). Prosto, miło i już mamy pióro na nowej warstwie. Możemy je teraz umieścić w wybranym przez nas miejscu za pomocą „Move Tool” (Skrót klawiaturowy – V). Umiejscowiłem go tak by nie było widać tła.

Teraz w panelu po prawej stronie zamieniamy tryb mieszania warstwy z piórem na „Hard Light” (Tryby mieszania to temat na osobny artykuł, warto jednak w tym miejscu sprawdzić wszystkie, z czystej ciekawości 😉 ). Widzimy jak ładnie zgrało się zdjęcie tła z kolorami, które daliśmy pod spód. Mamy w miarę ładne tło, teraz przydałby się tekst. Jak już pisałem nie jest to artykuł do rozwijania kreatywności tylko do „technicznej strony” bannera. Napiszemy samo „Artelis.pl”. Wybieramy narzędzie do tekstu. (Skrót klawiaturowy – T). Wybieramy czcionkę, którą lubimy (Cierpisz na brak czcionek? Polecam da font.com, dużo darmowych czcionek). Ja wybrałem czcionkę „Vivaldi” gdyż ładnie oddaje charakter strony. Rozmiar wedle uznania, dałem 60pt, kolor biały.

Pobawimy się teraz trochę tekstem, dodamy mu ładny, delikatny cień. Klikamy prawym klawiszem myszy na nazwie warstwy z tekstem (Domyślnie ma nazwę taką jak wprowadzony tekst) i wybieramy „Blending Options”. Mamy teraz nowe okno z wieloma opcjami, które możemy rozszyfrować po nazwie. Cień zewnętrzny, wewnętrzny, blask, tekstura itp. Wybieramy „Drop Shadow”, zaznaczamy ptaszkiem i klikamy na nazwie zakładki aby do niej wejść. Po zaznaczeniu ptaszkiem „Drop Shadow” Photoshop sam nakłada domyślne opcje (w tym wypadku cień jest moim zdaniem trochę za mocny, zmienimy go trochę). Zmniejszamy „Opacity” cienia do 50%, „Distance” do 1, a „Size” zwiększamy do 10. Potwierdzamy i gotowe, cień jest nałożony.

katalog pierwsza

Teoretycznie banner jest gotowy, ale wiadomo, że diabeł tkwi w szczegółach 
Skopiujmy warstwę z tekstem klikając na niej prawym klawiszem myszy i wybierając „Duplicate Layer”. Photoshop pyta nas gdzie duplikować, domyślnie jest to ten sam plik więc klikamy Ok. Mamy teraz „Artelis.pl” oraz „Artelis.pl copy”. Wybieramy „Artelis.pl” ponieważ jest niżej od kopii. Powiększymy to trochę, Edit->Free Transform lub skrótem CTRL+T. Tekst jest teraz otoczony ramką do zmieniania wymiarów oraz mamy nowe opcje na górnym panelu. Przyjrzyjmy mu się. Możemy zmienić kąt, poszczególne wymiary danej warstwy. Kliknijmy na ikonce łańcucha by wymiary zmieniały się stosunkowo tak samo (wysokość oraz szerokość) i zwiększmy szerokość z 100% do 150%. Widzimy, że wysokość zmieniła się jednocześnie. Potwierdzamy zmianę klikając na Dziubek po prawej stronie górnego panelu. Trochę teraz to nieczytelne prawda? Mając nadal wybraną warstwę „Artelis.pl copy” zmniejszamy jej „Opacity” do około 15%. Od razu lepiej.
Można teraz dodać jakiś slogan czy tekst podobnego typu. Dodamy tekst „Artykuły dla każdego”. Wybrałem taką samą czcionkę tylko trochę mniejszą. Co jeżeli chcemy by tekst miał takie same style (cień itp.) jak inny tekst lub warstwa? Klikamy na warstwie, której style chcemy skopiować, wybieramy „Copy Layer Style”, następnie klikamy prawym przyciskiem na warstwie, której chcemy nadać styl i dajemy „Paste Layer Style”.

Oto efekt końcowy:

Nawet nieźle jak na tak krótki czas pracy 😉
Jak są jakieś pytania to bardzo proszę w komentarzach.

—

Digart – moja galeria prac.
Deviantart – moja galeria prac.

Artykuł pochodzi z serwisu www.Artelis.pl