Pasek ładowania

14 sierpnia, 2012 w kategoriach: Grafika 2D, Web design, Adobe Photoshop

3,312 0
Dane:
  • Czas pracy: 20 min
  • Poziom: Średnio zaawansowany
Opis:

Chciałbym przedstawić schludny pasek ładowania zrobiony w photoshopie. Tutorial na podstawie strony http://www.sanjaykhemlani.com/

Pokaż/Ukryj wszystko

No zaczynamy jak zwykle od nowego dokumentu w Photoshopie o wielkości 450px na 400px

Alt 1-canvas


Wydawnictwo Strefa Kursów

Teraz wybieramy zaokrąglony kwadrat (rounded rectangle tool U) o kącie 5px i na środku naszego dokumentu robimy kształt.

Alt 2-shape

Teraz odpalamy sobie Tryby Mieszania (blendings mode) czyli klikamy na naszą warstwe ze kształtem PPM i tam znajdziemy tą opcję. Robimy tak jak na zalączonych niżej obrakach. Widać jakie kolory ustawić (jest napisane na screenach).

Alt 3-shape-dropshadow

Alt 4-shape-gradient

Alt 5-shape-storke

Gdy już mamy troche ustawione kolory przechodzimy dalej. Teraz musimy utworzyć nową warstwę, którą nazwiemy "header". Włączmy sobie narzędzie Zaznaczanie prostokątne (Marquee tool M) i zaznaczmy górną część naszego kształtu.

Alt 6-header

Teraz wypełnijmy ją kolorem czyli Edycja/Wypełnij (Edit/Fill) i ustawmy kolor #c8c6c6 no i ok. Teraz wciśnijmy CTRL + zaznaczmy na palecie warst header i następnie CTRL + SHIFT + I i dalej DELETE, powinno dać taki efekt:

Alt 7-header-color

Postępujmy tak jak na screenach poniżej, zapisane są też na nich kolory jakie mamy ustawić.

Alt 8-header-innerglow

Alt 9-header-gradient

Alt 11-header-stroke

Teraz skopiujmy warstwę, którą nazwaliśmy "header" usuńmy duplikatu wszystkie powyższe efekty i dodajmy nieco szuku czyli Filtr/Szum/Dodaj Szum (Filter/Noise/Add Noise) Ustawienia na screenie

Alt 12-header-noise

Dodajmy sobie jeszcze tekst do naszego headera Arial 13pt kolor #919191, powinno wyjść nam coś takiego:

Alt 13-header-text

Dodajmy jeszcze cień w opcjach mieszania

Alt 14-header-text-dropshadow

No to na ten krok starczy zaprasza, dalej:)

Teraz zajmijmy się gówną częścią. Wybieramy Zaokrąglony prostokąt (Rounded Rectangular Tool (U)) kąt 5px i na środku robimy kształt. Oczywiście zróbmy to na nowej warstwie, którą nazwiemy "loading-main"

Alt 15-loading

No i znów pobawmy się w opcjach mieszania i zróbmy jak na załączonych niżej obrazkach.

Alt 16-loading-dropshadow

Alt 17-loading-innershadow

Alt 18-loading-stroke

Teraz dodamy zielony pasek ładowania. Skopiujmy naszą warstwę "loading-main" i usuńmy z niej wszystkie ustawienia, które mieliśmy w opcjach mieszania. Wypełnijmy nowy kształt kolorem #2be11d i nazwijmy nową warstwę "loading-green". Teraz dodajmy efekty w opcjach mieszania jak te poniżej w tym gradient.

Alt 20-loading-image-gradient

Alt 21-loading-image-gradient-settings

Alt 22-loading-image-stroke

Dodajmy jeszcze tekst poniżej zielonego paska, który będzie mówił o postępie kopiowania. W tym celu wybierzmy czcionkę beneath o rozmiarze 11pt i kolorze #636363. Dodajmy jeszcze do tekstu w opcjach mieszania trochę cienia.

Alt 24-text-bottom-dropshadow

Jeszcze jeden mały etapik, dodajmy krzyżyk wyjścia po prawej u góry. W tym celu wybieramy Arial Bold 18pt o kolorze #a4a4a4. i piszemy "x"

Alt 25-exit-button

Za ten tutorial dziekuję stronie http://www.sanjaykhemlani.com/ a to nasz efekt końcowy

Alt loading-bar-ui

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz