• Авторизация


Анимация-пульсация... 12-01-2012 22:10 к комментариям - к полной версии - понравилось!


[374x102]


Добрый вечер , мои хорошие...Вот и пришло время следующего урока...Вроде за праздники новогодние мы так обленились. что и печень уже не принимает ни жирного , ни салатов, ни выпивки. ни бока не принимают диванных подушек и уютных кресел))))Вобщем....начинаем новую жизнь....Кстати...со всеми вас прошедшими и кое-какими предстоящими!!
Ну..про Старый новый год я не буду , а вот сердечный праздник валентинкин-это по традиции заграничной. ожидаем в феврале...Хотя...честно вам скажу....не понимаю я это новомодный Валентинов день....особенно если пролистать его историю)))Ну да ладно....Бог с ним...Мы поговорим о другом. о том как не утруждаясь сделать пульсирующую анимацию ,как например вот это сердечко Вам всем!!

а разбирать будем на примере заголовка к нашему уроку
Итак...поехали...
[368x211]

[700x325]

[320x191]
[544x81]

выбираем стиль текста на ваш вкус..
[282x218]

[436x435]
теперь уходим в панели инструментов на ПРЯМОУГОЛЬНОЕ ВЫДЕЛЕНИЕ и нажимаем вкладку ИЗОБРАЖЕНИЕ на панели фотошопа
[398x428]
[426x207]

Жмем ОК и получаем уменьшенное поле вокруг текста Теперь жмем сочетание клавиш CTRL+ALT+T раскладка клавиатуры помним английская и получаем

[410x293]

переходим на верхнюю панель фотошопа и устанавливаем точно по картинке
[496x91]
то есть уменьшаем размер ширины и высоты на примерно 30 единиц И как только уменьшим получаем вот такую картинку

[436x194]
жмем ENTER чтобы снять маркеры
а теперь наше волшебное сочетание клавиш при помощи двух рук...левая рука CTRL+Shift+ALT а правой добавляем щелчок на букве Т (английская раскладка клавиатуры) и будем получать при каждом щелчке все меньшее и меньшее изображение текста
Вот что у меня получилось после 6 щелчков
[749x278]

> [721x358]

[402x264]
теперь надо сделать кадры обратные тому что мы уже сделали.То есть наш текст уменьшился а теперь надо сделать его увеличение..Для этого мы просто дублируем те слои что у нас есть и получившиеся раасставляем в обратном порядке..Как?? а вот так.
[450x393]

нажав правой кнопкой мышки на выделенном поле выбираем

[423x311]

[523x181]

и вот что получится...теперь снимаем общее выделение щелкнув по любому слою и далее

[364x398]

то есть если смотреть снизу на панели слоев то снизу вверх идут до 7 слоя 1-2-3-4-5-6-7 а потом далее идут на убывание 7-6-5-4-3-2 вот так как на картинке

[422x450]

открываем панель Анимация и жмем в углу панели на треугольник открывается меню в котором выбираем

[421x382]

когда откроются кадры анимации еще раз жмем на стрелку в углу панели и выбираем

[635x441]

Затем

[554x240]
это мы выставляем время всем кадрам
[800x121]

я еще первому кадру поставлю большее время чтобы текст немного на нем "замирал" вот так

[355x240]

ну вот получим
[374x102]
и это уже можно сохранять для WEB в формате GIF в ту папку , которую вы выбрали))))
вот и весь урок...а вся сложность в нем ТОЛЬКО!!! во внимательной расстановке слоев по возрастанию и убыванию...чтобы анимация плавно переходила из размера в размер)))
Удачи Вам!!
Ваша Zomka
[3x]
вверх^ к полной версии понравилось! в evernote
Комментарии (59): «первая «назад
zomka 02-04-2012-01:34 удалить
Ответ на комментарий pasigut # ))))на здоровье)))
09-03-2013-03:52 удалить
Хотела сказать огромное спасибо за урок, тем более, что у меня первый раз все получилось!
Prosto_Sergevna 16-08-2013-14:52 удалить
Большое спасибо за урок - с текстом получается все отлично, а с рисунком надо поступать как-то иначе?..
zomka 19-08-2013-16:29 удалить
Ответ на комментарий Prosto_Sergevna # нет и с рисунком точно так же......любую картинку но в формате PNG или GIFчтобы не было вокруг поля цвета а вырезано было
Большое спасибо за урок, очень пригодится! Вот потренировалась:
[показать]
Lju-boris 22-02-2014-15:51 удалить
[500x80]

Спасибо за урок. Вот только забыла как избавиться от белого ориола (обводки)
-natalo4ka 24-02-2014-12:11 удалить
при уменьшении картинки(то есть уменьшаем размер ширины и высоты на примерно 30 единиц И как только уменьшим получаем вот такую картинку)у меня
не получается так
[436x194]
GLENA_55 23-07-2014-12:39 удалить
Спасибо огромное, давно хотела научиться... Забрала себе)
Кира_19624 24-07-2014-21:42 удалить
Исходное сообщение zomka



Добрый вечер , мои хорошие...Вот и пришло время следующего урока...Вроде за праздники новогодние мы так обленились. что и печень уже не принимает ни жирного , ни салатов, ни выпивки. ни бока не принимают диванных подушек и уютных кресел))))Вобщем....начинаем новую жизнь....Кстати...со всеми вас прошедшими и кое-какими предстоящими!!
Ну..про Старый новый год я не буду , а вот сердечный праздник валентинкин-это по традиции заграничной. ожидаем в феврале...Хотя...честно вам скажу....не понимаю я это новомодный Валентинов день....особенно если пролистать его историю)))Ну да ладно....Бог с ним...Мы поговорим о другом. о том как не утруждаясь сделать пульсирующую анимацию ,как например вот это сердечко Вам всем!!

а разбирать будем на примере заголовка к нашему уроку
Итак...поехали...







выбираем стиль текста на ваш вкус..



теперь уходим в панели инструментов на ПРЯМОУГОЛЬНОЕ ВЫДЕЛЕНИЕ и нажимаем вкладку ИЗОБРАЖЕНИЕ на панели фотошопа



Жмем ОК и получаем уменьшенное поле вокруг текста Теперь жмем сочетание клавиш CTRL+ALT+T раскладка клавиатуры помним английская и получаем



переходим на верхнюю панель фотошопа и устанавливаем точно по картинке

то есть уменьшаем размер ширины и высоты на примерно 30 единиц И как только уменьшим получаем вот такую картинку


жмем ENTER чтобы снять маркеры
а теперь наше волшебное сочетание клавиш при помощи двух рук...левая рука CTRL+Shift+ALT а правой добавляем щелчок на букве Т (английская раскладка клавиатуры) и будем получать при каждом щелчке все меньшее и меньшее изображение текста
Вот что у меня получилось после 6 щелчков


>


теперь надо сделать кадры обратные тому что мы уже сделали.То есть наш текст уменьшился а теперь надо сделать его увеличение..Для этого мы просто дублируем те слои что у нас есть и получившиеся раасставляем в обратном порядке..Как?? а вот так.


нажав правой кнопкой мышки на выделенном поле выбираем





и вот что получится...теперь снимаем общее выделение щелкнув по любому слою и далее



то есть если смотреть снизу на панели слоев то снизу вверх идут до 7 слоя 1-2-3-4-5-6-7 а потом далее идут на убывание 7-6-5-4-3-2 вот так как на картинке



открываем панель Анимация и жмем в углу панели на треугольник открывается меню в котором выбираем



когда откроются кадры анимации еще раз жмем на стрелку в углу панели и выбираем



Затем


это мы выставляем время всем кадрам


я еще первому кадру поставлю большее время чтобы текст немного на нем "замирал" вот так



ну вот получим

и это уже можно сохранять для WEB в формате GIF в ту папку , которую вы выбрали))))
вот и весь урок...а вся сложность в нем ТОЛЬКО!!! во внимательной расстановке слоев по возрастанию и убыванию...чтобы анимация плавно переходила из размера в размер)))
Удачи Вам!!
Ваша Zomka
Спасибо!
[260x368]
Ответ на комментарий zomka # Извините, что пишу благодарность в ответах. Не работает кнопка "нравится" и комменты.
Огонёкк 29-01-2017-12:48 удалить
Спасибо огромное, извините, сегодня у меня не работает кнопка нравится.Всего Вам доброго.
Nina_Gracia 29-01-2017-15:45 удалить
Ответ на комментарий Sobirayu_vinograd # Большое спасибо, за урок!
К сожалению, кнопка "Нравится", так и не работает.
С благодарностью цитирую!
Спасибо за интересный урок! а что делать если нет такого шрифта и таких настроек рядом... пробовала- ничего не получается...
Спасибо за урок! простите, не знаю имя ваше! вот что у меня получилось,не так, как у вас...
[300x52]
Millena-Li 17-02-2017-21:28 удалить
мне понравился пост - спасибо большое!
Огонёкк 18-02-2017-20:44 удалить
Спасибо большое за урок!
Mono-Liza 23-01-2020-01:40 удалить
От всей души благодарю за чудесный урок!
Спасибо за интересный урок !


Комментарии (59): «первая «назад вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Анимация-пульсация... | zomka - Мир входящему,ежели с добром | Лента друзей zomka / Полная версия Добавить в друзья Страницы: «позже раньше»