У прошлом тексту описали смо комплетан поступак израде флет иконица које и сада можете да преузмете, прилагодите и користите за своје потребе. Текст се налази овде: Photoshop туторијали за израду флeт иконица. У данашњем упутству научићемо како да направимо анимацију у Photoshop-у. Тачније, направићемо анимирани прелоадер (енгл. preloader) који може бити користан у различитим приликама и веб-апликацијама, виџетима, банерима, чекање на download или при учитавању садржаја, а место употребе зависи од ваше маште и иновативности.

Прелоадер – анимација у Photoshop-у

У питању је мали анимирани прелоадер у облику анимираног гифа (енгл. gif) који креирати користећи Timeline функцију у Photoshop-у. На крају текста преузмите радни формат ове анимације који можете отворити и додатно уређивати. Будите слободни да додате своје детаље, облике или промените боје.

Ево шта ћемо урадити:

• Направићемо облике за прелоадер
• Стилизоваћемо их
• Анимираћемо целу ствар да буде корисна

У тексту ћемо користити облик који вам ако сте почетник може бити тежи за креирање. Уместо тог облика, за почетак можете користити обичан круг или било који други облик.

Корак 1 

Креирање облика и подешавање

Направићемо нови конвас (енгл. convas, прев. Платно) користећи мени File – New или комбинацију тастера Ctrl+N. За величину конваса унећемо 100×100 px.

У палети слојева (енгл. Layers) појавиће се први слој под именом Background. Кликните два пута на њега:

У прозору који се отвори притисните дугме ОК да би се овај слој претворио у обичан слој (видећете да ће се изгубити катанчић који иначе стоји подразумевано у слоју Background)

Обојите цео слој у тамно-сиву боју, тачније #3d3d3d

Можете то урадити комбинацијом тастера Shift+Backspace, при чему ће се отворити прозор Fill. У падајућем менију поред поља Use, одаберите Color про чему ће се отворити Color picker прозор где треба унети 3d3d3d у боље за боју и кликнути на дугме ОК (погледајте слику испод). Кликнути на дугме ОК у прозору који смо отворили комбинацијом тастера Shift+Backspace:

Корак 2

Креирање облика – background pattern

Направите нови транспарентни документ величине 7x7px. Одаберите Pencil tool (тастер B lat):

Одабрати црну боју:

Подесити дебљину четкицу на 1px:

И повући дијагоналну линију (да линија буде права кликнути у један угао, држати тастер Shift и кликнути у други угао):

Дефинишите pattern и дајте му име (можете било како, битно је да ви знате које сте име користили). Користите мени Edit – Define Pattern:

Вратите се оригиналном документу и направите слојни стил Pattern Overlay у сивом слоју. Идите на Edit – Layer Style – Pattern Overlay

У прозору који се отвори одаберите Pattern који сте мало пре направили и поставите Opacity на 20% (ако вам је и то превише упадљиво вредност у % умањите додатно). Кликните на дугме ОК једном када будете задовољни резултатом.

Корак 3

Креирање вођица (енгл. Guides)

Сада ћемо додати неколико ознака које ће нам помоћи код креирања целе слике. Повуците линију уз помоћ Line tool-а дебљине 1px.

Нека линија буде по средини документа. Можете то проверити тако што ћете одабрати оба слоја (линија и background слој), укључити Move tool (тастер V) и покренути опцију Align horizontal у панелу са опцијама Move tool-а.

Копирајте слој са линијом и користећи Transform tool (Ctrl+T) заротирајте је за 90 степени тако да добијете крст. Повуците сада једну дијагоналну линију. Копирајте тај слој са дијагоналном линијом и заротирајте је користећи Transform tool за 90 степени.

Укључите лењире, Ctrl+R, повуците линије које ће вам помоћи да центрирате следећи облик који треба додати. Будите пажљиви и поновите акцију више пута како би све испало како треба. Видите слику испод:

Одаберите Rounded rectangle tool (тастер U)

Направите облик који ће се уклопити у линије лењира које сте повукли. Можете пробати чак и да прво направите облик и нацентрирате га, а затим да повучете линије лењира како бисте што боље уклопили вођице које ће вам касније бити од користи. Испробајте сами. Нека буде приближно као на слици испод:

Одаберите сада Direct Selection tool:

и померите доње углове (ухватите за тачке – nodes) према унутра.

Искористите Transform tool да копиране слојеве овог облика распоредите свуда у круг. Поставите центар ротирања у сам центар конваса (где се укрштају линије) и ротирајте облике тако да се поставе на сваку линију коју смо раније повлачили. На крају можете искључити те линије:

Одаберите сада све слојеве(држите Ctrl и кликните на сваки слој) и спојите их тако што ћете кликнути десним кликом на један од њих и одабрати опцију Merge layers:

Корак 4

Стилозовање облика, додавање сенки и боја

Направили смо облик за прелоадер. Све остало можете радити по сопственом укусу па истражујте са количином различитих опција, бојама и идејама.

Додаћемо неке стилове слоју са облицима прелоадера. Користите Layer – Layer Styles. Додајте Color Overlay у боји #242424. Да то урадите довољно је да кликнете у правоугаоник поред поља Blend mode и да у прозору који се отвори унесете боју која је наведена у претходној реченици.

То сада изгледа овако:

Додајте и Drop Shadow на исти начин користећи параметре са слике испод:

Додајте и Inner Shadow слој стил користећи параметре са слике испод:

То ће додати нови, бољи изглед и осећај дубине:

Корак 5

Дуплирање слојева

Направићемо пет копија овог слоја који смо креирали. Обрисаћемо елементе прелоадера тако да се у сваком слоју нађу одређени елементи који ће нам помоћи у грађењу анимације.

Основни слој (први у Layer палети одоздо на горе) треба да садржи само ове елементе приказане на слици, све остале обришите Eraser tool-ом.

Ово је други слој (изнад основног):

Ово је трећи слој:

Овако изгледа четврти слој:

И последњи, пети слој садржи овај елемент:

Да би све било боље сређено и да бисте боље испратили упутство, можете променити име слојевима и средити их овако:

Корак 6

Додавање стила сваком елементу

Сада ћемо додати мало стила сваком елементу који смо издвојили. Слоју Сјај додаћемо Outer Glow (Layer – Layer Styles) користећи боју #0be0f9 (овде можете експериментисати са бојама):

Истом слоју, користећи исту боју, додаћемо Iner Glow:

Одмах затим и Iner Shadow са параметрима са слике:

Преправићемо постојећи Color Overlay користећи боју #0087c6. Ово је резултат:

Идемо даље. Слоју Опадајући сјај 1, додати исте стилове али без Outter Glow стила.

Слоју Опадајући сјај 2, изменити Iner Shadow користећи параметре са слике и боју #0087c6:

Слоју Опадајући сјај 3 измените Iner Shadow стил постављајући Opacity на 25%. Ово је резултат који треба да добијете:

Корак 7

Анимација кроз Timeline у Photoshop-у

Групишимо сада све слојеве који се тичу прелоадера у једну групу. Одаберите их држећи тастер Ctrl и да их ставите у једну групу искористите комбинацију тастера Ctrl+G:

Групу можете назвати Лоадер део 1:

Дуплирајте целу групу (копији промените назив у Лоадер део 2… и тако редом за сваку нову копију). Ротирајте групу за 45 степени користећи Transform Tool (Ctrl+T) и поновите овај процес док не направите пуни круг. То знаћи да ћете имати укупно 8 копија (свака, осим прве, је заротирана за по 45 степени).

Сада је све спремно за анимацију. Отворите Timeline Panel, налази се у Window – Timeline. Искључите све групе осим групе Лоадер део 1. Одаберите дугме Duplicate Selected Frames.

Искључите сада прву групу и укључите само Лоадер део 2 са истим поступком. Поновите поступак за сваку следећу групу.

Одаберите сваки фрејм у Timeline-у и поставите duration на 0.1 сек.

Да сачувате свој рад кликните на File – Save for Web и користите следеће параметре за анимирани .gif:

Да свој рад сачувате у радној верзији, идите на File – Save As и сачувајте документ у PSD формату.

Преузмите нашу радну верзију прелоадера

Уколико желите да исконтролишете свој рад или да бисте уштедели себи време, можете узети нашу PSD верзију прелоадера. Након што преузмете верзију коју смо направили током припреме овог упутства укључите Timeline у Photoshop-у у Window – Timeline као бисте могли да репродукујете анимацију. Као што је на почетку наведено, ову верзију можете слободно користити за своје потребе и додатно је кориговати.

Да преузмете датотеку довољно је да кликнете на линк испод:

Анимирани прелоадер – Адриахост 2016