Како направити анимирани GIF прелоадер у Photoshop-у

Како-направити-анимирани-прелаодер-у-Пхотосхопу

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

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

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

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

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

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

Корак 1 

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

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

Анимирани прелоадер слика 1

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

Анимирани прелоадер слика 2

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

Анимирани прелоадер слика 3

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

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

Анимирани прелоадер слика 4

Корак 2

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

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

Анимирани прелоадер слика 5

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

Анимирани прелоадер слика 6

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

Анимирани прелоадер слика 7

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

Анимирани прелоадер слика 8

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

Анимирани прелоадер слика 9

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

Анимирани прелоадер слика 10

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

Анимирани прелоадер слика 11

Корак 3

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

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

Анимирани прелоадер слика 12

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

Анимирани прелоадер слика 13

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

Анимирани прелоадер слика 14

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

Анимирани прелоадер слика 16

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

Анимирани прелоадер слика 15

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

Анимирани прелоадер слика 17

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

Анимирани прелоадер слика 18

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

Анимирани прелоадер слика 19

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

Анимирани прелоадер слика 20

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

Анимирани прелоадер слика 21

Корак 4

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

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

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

Анимирани прелоадер слика 22

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

Анимирани прелоадер слика 23

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

Анимирани прелоадер слика 24

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

Анимирани прелоадер слика 25

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

Анимирани прелоадер слика 26

Корак 5

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

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

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

Анимирани прелоадер слика 27

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

Анимирани прелоадер слика 28

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

Анимирани прелоадер слика 29

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

Анимирани прелоадер слика 30

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

Анимирани прелоадер слика 31

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

Анимирани прелоадер слика 32

Корак 6

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

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

Анимирани прелоадер слика 33

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

Анимирани прелоадер слика 34

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

Анимирани прелоадер слика 36

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

Анимирани прелоадер слика 35

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

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

Анимирани прелоадер слика 36

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

Анимирани прелоадер слика 37

Корак 7

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

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

Анимирани прелоадер слика 38

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

Анимирани прелоадер слика 39

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

Анимирани прелоадер слика 40

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

Анимирани прелоадер слика 41

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

Анимирани прелоадер слика 42

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

Анимирани прелоадер слика 43

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

Анимирани прелоадер слика 44

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

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

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

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

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

ПРИЈАВИТЕ СЕ ЗА НАЈНОВИЈЕ ТЕКСТОВЕ СА НАШЕГ БЛОГА!

Tags: , , ,

Нема коментара.

Пошаљи коментар