Преглед на урок

Движение на малки елементи

Движение на малки елементи




Ефекта може да се приложи на всякакви изображения с различни фигурки, стига те да не са с прекалено големи размери, защото в крайна сметка файла ще стане много голям и неизползваем. Това по-специялно важи за височината и не толкова за дължината. Много е подходящ за банер, аватар или подпис.

1/ И така отворете си някаква картинка или си я направете.
Ето моята, която ще използвам, тя е с размери 380х150рх



2/ Вземете Custom Shape Tool (U)



3/ В лентата за настройки, изберете Shape Layers и отворете палитрата за да си изберете фигурка.



4/ Изберете ярко открояващ се цвят. На този етап цвета не е от значение, затова изберете такъв, който ще се отличава най-ясно от фона.



5/ Начертайте първата фигурка да кажем в горния ляв ъгъл.
Обърнете внимание, че в панела Layers се обособи нов слой с 2 малки изображения, свързани по междуси от малка верига. Лявото е цвета, а дясното е пътя или казано по-просто - контура на фигурата.

Натиснете върху изображението за цял размер


6/ За да добавите останалите фигурки в същия слой, изберете от лентата за настройки
Add to shape area (+)



Ако пропуснете това, всяка следваща фигурка, ще си образува нов слой. Това не е грешно, дори в повечето случаи е препоръчително, защото можете да променяте местоположението на всяка една, без това да се отразява на останалите. Ако изберете втората възможност, накрая трябва да слеете всички слоеве в един.

7/ Трябва да разположите фигурките така, че те да не се намират на една и съща хоризонтална или вертикална ос. За ориентир може да си включите решетката: View -> Show -> Grid



8/ Не е препоръчително претрупване. Можете разбира се да направите фигурките и с Brush Tool, aко ви се струва по-лесно или по-подходящо, аз реших да опиша подробно този метод, защото е по-малко популярен и начинаещите много се препъват в работата с векторните инструменти, а по мое мнение те са много ефективни и си заслужава да се знае повече за тях.

След като сте готови с фигурките, следва да ги оцветите.
Отворете панела за стил от малката иконка с буква "f' в долния ред на панела Layers и изберете Gradient Overlay

Натиснете върху изображението за цял размер




9/ Изберете градиент с цветове, които биха подхождали и направете настройките по ваша преценка или се ориентирайте по моите:



10/ С десен бутон на слоя, отворете меню и изберете Rasterize Layer.



Така преобразувате Shape Layer-а в нормален слой и на него фигурките вече са на прозрачен фон.

11/ Дублирайте получения слой (Ctrl+J)



12/ Към дублирания слой добавете Filter -> Other -> Offset с настройки:





13/ Нататък всичко става много бързо и лесно само като редувате 2 клавишни комбинации:
Ctrl+J за да дублирате последния създаден слой;
Ctrl+F за да приложите същия филтър със същите настройки на получения нов слой;

14/ Тези 2 действия трябва да повторите многократно, докато фигурките образуват непрекъснати колонки по вертикал.
Трябва да сте получили нещо подобно:



Панела Layers трябва да изглежда така:



15/ Изключете видимостта на всички слоеве с изключение на фона и първия слой с фигурки (кликате на малкото око пред всеки един)

16/ Отворете панела за анимиране Window -> Animation.
В него има един кадър в който се виждат фона и първия слой, защото само те са включени в панела Layers.
Създайте нов кадър (Frame) от малката иконка в долния ред на панела Animation

Натиснете върху изображението за цял размер


17/ Изключете първия слой с фигурки и включете следващия.
Слоя с фона оставяте на мира, той присъства във всички кадри и с него нямате работа.

Натиснете върху изображението за цял размер


18/ Създавате нов кадър, изключвате втория слой и включвате третия и т.н в този порядък, докато стигнете до последния слой. Трябва да сте създали толкова кадри, колкото слоеве сте направили с фигурки.
При мен са 15, но това не е строго задължително и зависи от големината на фигурките а също и от височината на документа.

19/ Изберете всички кадри едновременно: от малката стрелка в горния десен ъгъл на панела Animation се отваря меню от което избирате Select All Frames

Натиснете върху изображението за цял размер




А от малката стрелка до надписа "0 sec" се отваря менюто от което можете да зададете интервал за време на смяна на кадрите; когато кадрите са избрани едновременно, можете да зададете еднакъв интервал за всички.
Аз съм оставила по подразбиране интервала 0сек, но ако решите че е бързо, можете да изберете по-голяма стойност.



Резултата можете да видите, като натиснете бутончето "Play"



20/ Запазете готовия резултат от File -> Save for Web (Alt+Shift+Ctrl+S)
От падащото меню изберете GIF





Резултата:




Автор: maqpen4eva

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: maqpen4eva

Коментари

gruh

бравос

fesel

бравос ама труднос :П

fesel

врущам си думите назад мн лесно било ето какво напраих аз http://prikachi.com/files/41461D.gif ама нешто мн бавно върви в prika4i нз шо ама е кат горе по4ти МАЯПЕН4ЕВА а как се прааи тва като са ве4е по4ти наи доло да става бяло ? ако мое кажи да знаем

fesel

<img border="0" src="http://prikachi.com/files/41465d.gif">

maqpen4eva

Toва зависи от оцветяването в стъпка 9 , избираш линеен градиент от бяло към...каквото и да е и нагласяш радиуса така, че в долната част фигурките да са чисто бели

izzie

http://i89.photobucket.com/albums/k238/Izzie_Alex/81.gif
-Ето и опита ми с други настройки...Смисъл, -10...Става и на страни

leokleiner

zashto na men samo edna figorka se dvijikak da gi napravja vsi4ki da se dvijat

tEdDy-bEaR

аммм такос със коя версия е правено това защото аз май съм с 8-мицата иии нямам Window -> Animation :(

maqpen4eva

За CS2 и CS3 е, ако си с CS 8.0, след т.14, трябва да преминеш в ImageReady.
Запазването става от File - Save Optimized as - клавишната комбинация е съвсем същата

tEdDy-bEaR

Благодаря ти!

oko_vidin

СТАНА.ОБАЧЕ КАТО ГО ОТВОРЯ НА НОВО НЕЗНАМ КАК ДА ГО ПУСНА ТАКА ЧЕ ДА СЕ ДВИЖАТ СЪРЦАТА.

F^u^C^k

НАТИСНЕТЕ ВЪРХУ ИЗОБРАЖЕНИЕТО

http://img46.imageshack.us/my.php?image=vzrivsm6.gif

Ето и моят опит.
http://img46.imageshack.us/my.php?image=vzrivsm6.gif----->линк за картинката

F^u^C^k

http://img46.imageshack.us/img46/963/vzrivsm6.gif

НАТИСНЕТЕ ВЪРХУ ИЗОБРАЖЕНИЕТО
http://img46.imageshack.us/img46/963/vzrivsm6.gif-->линкче

nwfr

Моля ви,кажете ми спешно дали с фотошоп 7.0 става,защото аз го започнах,но липсва опцията window=>animation! Ако просто е друга стъпката ми кажете,моля ви!!!!

F^u^C^k

опцията "window=>animation" и аз я нямах обаче напраих следното File>Edit it in ImageReady и там продължих :)

maqpen4eva

Не с версия 7.0 анимирането не е възможно!

maqpen4eva

Не с версия 7.0 анимирането не е възможно!
При версия 8.0 CS се прави преход към ImageReady

toninei

http://img145.imageshack.us/my.php?image=nasanimationnw5.gif

mimkaa

браво за урока :) имам само един въпрос моите фигурки като запазя всичко е ок и после като го отворя да го видя слизат само до средата и края а пък правя всичко както е описано :) може ли да ми обесните защо става така и къде греша :(

mimkaa

имала съм селектиран една от картинките доло и от го е направило само до там :) извинявам се за спама но съм от най- начинаещите и исках да знам къде ми е грешката :) страхотен е урока получи се много красиво и освен това обеснен с подробности и се научават много основни техники :)

francesca_rexy

Вижте моят резултат =] [img]

sevenceto

тфа е много готинко браво на maqpan4eva

yami

Чудесен урок :)

IcCeTo

http://prikachi.com/users/icceto/30F.gif

Това е моя опит :D

IcCeTo

Аз и фона съм правил :D :D :D

doni96t

Благодаря страхотен урок

http://prikachi.com/files/228648S.gif

doni96t

Благодаря страхотен урок

http://prikachi.com/files/228648S.gif

doni96t

Благодаря страхотен урок

http://prikachi.com/files/228648S.gif

doni96t

Благодаря страхотен урок

http://prikachi.com/files/228648S.gif

zibi

нищо не ми става
стигам до 10/ и не мога да я завърша :( :( :( :( :( :( :(

zibi

Filter -> Other -> Offset това аз го нямам
аз съм с CS3
помогнете моля ви

zibi

никой ли няма да ми помогне :(:(:(:(:(:(:(

Rafaela

Браво чудесен урок, много лесен дори за начинаеща като мен много хубаво ми се получи

jeny

Много хубав урок, стана прекрасно. Аз съм начинаеща и искам да благодаря на maqpen4eva за хубавите обяснения, всички нейни уроци ми стават перфектно.

pehlo

[img]

pehlo

[serkal-dada]

pehlo

a we kak da ka4a snimkata

neizvestna

off otkude da q iztqglq taa programa

graf_kaberne

Ето го и моят опит.
http://store.picbg.net/pubpic/2C/A8/a4729833e4672ca8.gif

taniaandi

Много благдаря за чудесният урок.Като начинаеща ми беше много лесно да го направя.Много подробно е обеснено.Още веднъж благодаря.

taniaandi

Мога ли само да попитам дали е възможно фигурите да се движат на страни не само надолу.Трябва ми стрелка да прониже сърце а на долу не ми се получава.Благодаря

maqpen4eva

Възможно е но не по този метод, а много по-просто, рисуваш стрелката, в първия фрейм я местиш на ляво, да излезе извън документа, правиш нов фрейм и с Move Tool я местиш на дясно докато излезе извън документа, но от другата страна, после избираш 2-та фрейма и добавяш Tween от бутона 10-15 междинни кадъра:

http://img356.imageshack.us/img356/1562/love2atj0.gif

Анита

Здравейте , аз работя с CS3 но като отида на инструмента Custom Shape Tool нямам никакви фигури , и немога да избера сърце или нещо друго . Да не би да се работи с CS4 ? Ако някой може да ми обясни , ще съм благодарна . Мерси предварително.

maqpen4eva

Урока е за CS2 и CS3!
За да използваш всички фигури в менюто на Custom Shape Tool, трябва да ги свалиш от папката:

http://img519.imageshack.us/img519/4738/00104fr8.jpg

Анита

Да , но в моята папка няма . падащото меню стига до Replace Shapes . Не е както показаното по надолу.

maqpen4eva

Ти отваря ли папката за да видиш че няма, я пак провери и ако нямаш наистина, пиши един е-майл да ти ги пратя:
Edit - Preset Manager, натискаш Load и търсиш папката: C:/Program Files/Adobe/Adobe Photoshop/Presets/Custom Shapes

http://img124.imageshack.us/img124/4610/00105ym4.jpg

Анита

Да видях , но нямам папка Custom Shapes . Ако не те затруднява ми ги прати на adi_da@abv.bg

beni4ka127

АУ това е страхотен урок!!!Браво,много ми хареса и обяснението е толкова разбираемо!Великолепна работа! :*

the angel

E:\toni\feq-gif.gif

vlas7na7a

Ама на мене сърцата ми спират да се движат защо?

tanz

Благодаря, чудесно обяснен урок !

maqpen4eva

vlas7na7a - долу в ляво на панела за анимиране има едно малко меню, отваря се десен бутон, сложила си отметка само за един цикъл, затова спират, трябва да сложиш отметка пред Forever

http://i35.tinypic.com/mkarf4.jpg

kacho

браво, страхотен урок и много лесен, смисъл много добре обяснен:)

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.