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

Пулсиращо сърце

Пулсиращо сърце




1/ Създайте нов документ 300х300 и бял цвят. Вземете инструмента Custom Shape Tool (U). Изберете преден цвят (Foreground color) #FD7FA3 и начертайте фигура с форма на сърце:



2/ Използвайте инструмента Move Tool (V) за да го центрирате в средата на документа. Кликнете с десен бутон върху слоя "Shape 1" за да го растеризирате:



3/ Layer -> Layer Style -> Blending Options:













4/ Трябва да изглежда приблизително така:



5/ Дублирайте слоя 3 пъти - трябва да имате 4 сърчица общо, преименувайте ги с поредни номера за нагледност (двоен клик върху името на слоя в панела със слоеве). Първия слой оставете без промяна. Изберете втория слой, Edit -> Free Transform (Ctrl+T) и намалете общия размер на 95%, третия слой на 90% и четвъртия слой на 85%.



6/ Изберете втория слой, дублирайте го (Ctrl+J) и го преместете над всички - сложете му пореден номер 5, дублирайте третия слой, преместете го над всички - той ще е с пореден номер 6. Трбява да имате 6 слоя:



7/ Ако сте с PhotoShop CS2 или следващите, oтворете панела за анимиране (Window -> Animation), ако сте с по-стара версия, преминете в ImageReady (Ctrl+Shift+M). Кликнете на малката стрелка, която се намира в горния десен ъгъл и от менюто, което ще се отвори, изберете Make Frames From Layers. Рамките ще се създадат автоматично според броя на слоевете, самите слоеве ще бъдат подредени в реда в който се намират в панела със слоевете и съответно във всяка рамка ще присъства по 1 видим слой:



8/ Задайте интервал за време на всяка рамка както е показано на следващата картинка:



Забележка: aко искате сърцето да бъде с прозрачен фон, backgrounda не ви е необходим, можете да го изтриете или да го направите невидим ако искате да добавите някакъв фон, изберете този слой в панела със слоевете, оцветете го и го направете видим във всички рамки в панела за анимиране.

9/ Запазете файла във формат Gif, File -> Save for Web (Alt+Shift+Ctrl+S).
Ако сте в ImageReady - File -> Save Optimized As (Ctrl+Shift+Alt+S).

Резултата:



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




Урокът е добавен от: maqpen4eva
Източник: http://www.webdesign.org/

Коментари

maqpen4eva

може но текста трябва предварително да се напише да се растеризира, да се слее със слоя със сърцето, и след това да се добави стил и всичко останало нататък. Ще изглежда примерно така:

http://i113.photobucket.com/albums/n220/maq_bg/uroci-3/syrce-love.gif

SerEndiPittY

Моля те обясни по-подробно как се слага текст в сърцето (а картинка може ли?), защото като пробвах не стана...:(

maqpen4eva

Обяснила съм по-горе, по-подробно виж други уроци, например:
http://www.photoshop-bg.com/index.php?nav=read&id=811

ReXTaN

Етого и моя резултат :

http://www.picsbg.com/uploads/63ba41155f.gif

Luna_r

http://i97.photobucket.com/albums/l240/HAZ_07/Untitled-1.gif


Вижте моето какво стана... :( Не е като другите, но като за първи опит мисля, че е добре! :)

maqpen4eva

Не е добре, трявба във всяка нова рамка, да слагаш само по един слой със сърце - процеса е много подробно обяснен и ако спазваш стъпките, трябва да ти се получи, но ти не си го схванала никак, а това е по-важно - да разбереш как се анимира, а не да стигнеш до някакъв, какъв да е резултат

EXxTAzZ

Някои би ли ми обяснил "Дублирайте слоя 3 пъти - трябва да имате 4 сърчица общо" че не мога да се сетя как ставаше?

mariq_m3

EXxTAzZ, с десен бутон натискаш върху леара и избираш duplicate layer

http://img95.imageshack.us/img95/8955/helpwp4.jpg

EXxTAzZ

Като правя дубликат и тои отива в History и не мога да го вкарам в Layers за да продалга нататака и да го нарпавя да се движи ?

mariq_m3

EXxTAzZ, освен в хистори-то, трябва да ти се появят слоевете и в Layers , виж тук

http://img228.imageshack.us/img228/7654/helpnr0.jpg

maqpen4eva

1. Не отива в Хистори, а там само ти показва, какво действия си извършил/а
В панела Layers са ти 2-те копия които си направил/а след като си дублирал/а Backgroud-a - ако искаш и те да се казват Layer - смени им имената, сега са Backgroud copy; Backgroud copy 2
За да можеш да използваш Backgroud като слой, трябва да го преобразуваш (Ctrl+ Клик по катинарчето) иначе трябва да направиш 4 копия, а него да го изключиш, като му махнеш окото отпред

kotkaa

Ето и моят резултат:

http://www.picsbg.com/uploads/2dcd9e96a3.gif

Вторият ми изпълнен успешно урок.

EXxTAzZ

Да мерси мн това го направих но не мога да разбера кадето като стартира ImageReady се слага отметка в/у някои от сърцата и се слага отметка "Make Frames From Layers" но на мен не ми излиза не ми дава да сложа отметка и благодаря предварително :)

EXxTAzZ

Ето го и моя резултат най сетне :)

http://img89.imageshack.us/img89/2632/heartsssjc0.gif

stefko_25

Мая, какъв шривт си използвала за сърчицето с текст "Love"?

figen99

Урокът е много приятен !

http://i191.photobucket.com/albums/z30/sun61/heart.gif

{{PyMuTo}}

Страхотен урок!

spellxxx

Урока е супер , много лесен и приятен!

Little^fairy

и моето не стана добре ,но....

http://prikachi.com/images/gif/6320U.gif

cici90

иЗВИНЕТЕ МЕ ЗА ТЪПИЯ ВЪПРОС АМА КАК СЕ ВМЪКВАТ НЯКОЛКО ЛАЙЕР-А ЗА НАПРАВАТА НА АНИМАЦИЯ?

figen99

maqpen4eva го е обяснила много подробно, прочети бавно края на урока и следвай точно-ще стане

зори

http://i21.servimg.com/u/f21/11/22/32/70/untitl10.gif

хора сърцето ми ми изглежда болно :D как мислите,много ли е зле?

beastmaster_2007

моля да ми кажете от каде да си изтегля скинове или още четки плз

hellboy

"Ф" :) моето стана [img]

ObichamViki

Получава се едно към едно, ако следвате инструкциите на Мая! Само че се иска много търпение! (особено за начинаещи ;( ) Аз лично го правих 30 минути, но го получих! Благодаря за урока!

leaf

зори,май имаш ускорен пулс :D
Както и да е ,ето моя опит:

http://i236.photobucket.com/albums/ff198/leaf_00/PhotoShop/heart.gif


Сърцето не е по урока ,просто исках да покажа ,че може да се получи НЕЩО КАТО ритмично движение....иначе и туптенето е яко

vesety

Аууу много готино!!!Благодаря много ;)

ДяВоЛчЕтО_-_-ФююТ

Здравейте, днес се научих да правя анимета и сега ке ви покажа мойте анимета по този урок! Не са толкова добре но като за първи път! :) :P :D :P :P :P :) :) :D :D :D

http://store.picbg.net/thumb/7D/77/cb996c8200017d77.gif

AnD
http://store.picbg.net/thumb/0A/5F/b75836baeb140a5f.gif

:P :) :D това бееше от мен! :P :) :D

ДяВоЛчЕтО_-_-ФююТ

Моля щракнете върху изображенията за да се покожат аниметата както трябва защото не се показват както трябва да бъдат! Щракнете върху СЪРЦЕТО и върфу Кабарът! :) :P :D

boliarina

извинете за вапроса ама каде е тая стрелка която излиза от менюто,и кое е това меню? ина4е урока е мн хубав

maqpen4eva

На картинката, която следва ти е показано къде се намира малката стрелка - оградена е с червено кръгче и е посочена със зелена стрелка, както и менюто, което се отваря след като кликнеш по нея, колко по-подробно да ти се покаже и обясни, за да го забележиш???

http://www.photoshop-bg.com/gallery/tutorials/457/12.jpg

maqpen4eva

Разцъкайте си малко фотошопа, защото само с питане няма да стигнете далече!

savams

много хубав урок!! моят опит

http://i268.photobucket.com/albums/jj34/savams/corazon-latiendo.gif

dodeto

много як урок!

turquoise

Урока е супер, много добре обяснен, много благодаря! :D :D :D

turquoise

Моля хора кажете как се качват картинки тук, как да си покажа резултата?

Zhikova

http://store.picbg.net/pubpic/B0/58/6dab8f40d953b058.gif


ei go moito :) malko zacepva ama inache pulsa e dobur :)

island-of-hope

Много лесно уроче !

ralfex

Luna_r малко не е добре незнам аз така мисля :D
ето го и моя опит:

http://img168.imageshack.us/img168/5973/opitcz0.gif

Успех на следващия. :)

djordji

абе как си прави така че целия PhotoShop да му е син???

hackerlandiq

Много блоагодаря за урока!!!

maqpen4eva

Какъв ще ти е облика на ФШ-а зависи от темата, която си сложил на комп-а си, но версия CS3 не може да се променя

lolibi

Браво урока е супер. Поучава се ефекта и е лесно

Amazing_Boy

Много хубав урок, приятен и лесен ! :) Ето и моя опит :

http://img299.imageshack.us/img299/334/pulsira6tosyrceml1.gif

izito0

a kak da stane s photoshop 7.0

maqpen4eva

Писането на кирилица е задължително!
Версия 7.0 няма приложение за анимиране и с нея не може да се анимира!

DeViL4eTy

мойто се получи малко станно

strang3ra

Ето го ,оето сърце но защо се получава така:

http://store.picbg.net/pubpic/AF/6A/df73fe8d4479af6a.gif

stingray

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

http://i37.tinypic.com/es6rzo.gif

strang3ra

Втори път го напави,но изтрих Background леъра.То въобще не мърда!Ако някой мове да помогне...

http://store.picbg.net/pubpic/E1/7B/0aaf34973543e17b.gif

desize1996

Страхотно е обяснен урокът! Направих го от първия път! Браво!

strang3ra

Накрая го направих Transperent при New File и то взе че стана!

http://store.picbg.net/pubpic/AB/27/e1328b1350cfab27.gif

chriskiss

Ето го и моето произведение :)

http://prikachi.com/users/chriskiss/48w.gif

mishelkata96

http://i587.photobucket.com/albums/ss314/mishelkata96/curce2-.gif
така ли трябва да се получи

mishelkata96

преди мърдаше сега не иска

lycar

mishelkata96 значи тея настроики които са показани 0.5 секунди това е пример.Мойте настроки на секундите са 0,1 и виж какс е получи :)

http://pic-bg.net/files/sbi05vtegl8xis3g9xo6.gif

lycar

Извинете за двоиния коментар а ще те саветвам да ги направиш на малко по бавно защото моито стана доста зле :D

messi05

maqpen4eva на мен за да напиша текст не ми дава да слея слоя със текста и слоя със сърцето

FreezingFTW~

Може ли някой да ми каже къде да си кача анимираното сърчице, защото там където аз качвам ми излиза като jpg. тоест само картинка. Искам да кача в интернет като gif. ?

Благодаря предварително!

Elmira

maqpen4eva shto tvoyro sirce pulsira mnogo birzi ne trqbvali da bie po malko

maniaka2

kato sloja sarceto nemi se ocvetqva v rozovo az li da go ocvetq???

beni4ka127

от втория ми път се получи чудесно!

http://store.picbg.net/pubpic/32/74/f35875b027f03274.gif

daniel_radcliffe_s_girl

Не можах да докарам много добре "пулса",понеже се отплеснах, но ето и моя опит:

http://i491.photobucket.com/albums/rr276/natalia_oreiro_/mytryout.gif

Бтв: Някъде нагоре видях, че някой е питал може ли сърцето да е с текст или картинка - естествено! Целта на урока е да ни покаже как да направим сърцето пулсиращо, а не какво да е самото сърце - розово, лилаво, с текст, с картинка, или т.н. ......

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

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