Совет 1: Как сделать анимированную надпись

Анимированные надписи получили широкое распространение: их используют в виртуальных открытках, в качестве аватаров к профилям сайтов, также их выставляют в подписи к сообщениям. Другими словами, любой ресурс сети интернет, который хоть как-то связан с графикой, использует анимацию или анимированные надписи. Создать простейшую анимацию можно при помощи пакета Adobe Photoshop, который включает в себя программу Adobe Image Ready.
Вам понадобится
  • Программное обеспечение Adobe Photoshop.
Инструкция
1
Откройте Photoshop и создайте новый документ: нажмите меню File, выберите пункт Open. В открывшемся окне установите следующие значения:
- Width: 500;
- Height: 200;
- Resolution: 150;
- Background Contents: transparent.
Нажмите кнопку «ОК».
2
Перед вами появится окно нового файла. Нажмите кнопку «Т» на панели интсрументов, напишите любое слово или фразу. Нажмите правой кнопкой мыши текстовом слое, который находится на панели слоев, в контекстном меню выберите пункт Rasterize Type.
3
Нажмите правой кнопкой мыши на этом слое еще раз, выберите пункт Duplicate Layer для дублирования текстового слоя. Теперь необходимо скрыть верхний слой (первый слой), чтобы изменить положение второго слоя. Для скрытия слоя нажмите на кнопочку с изображением глаза напротив выбранного слоя.
4
Можно придумать любую анимацию. Самой простой будет постепенное исчезновение анимации. Для этого воспользуйтесь ластиком. Второй слой необходимо немного затереть. После стирания части текста вы должны создать еще один дубликат слоя, но не первого, а второго слоя. Это делается для плавного перехода. Таким образом, необходимо сделать несколько слоев. Как правило, чем больше, тем лучше.
5
Как работа будет готова, переведите ее в редактор ImageReady. Сделать это можно нажатием на самую нижнюю кнопку панели инструментов. Если у вас не открыта панель Animation, обязательно этой сделайте. Выставьте интервал в 0.06 или 0.07 секунд на первом текстовом слое.
6
На панели Animation нажмите кнопку создания нового кадра Duplicate current frame. На панели слоев появится новый слой, его необходимо стереть, он нам не понадобится. Нажмите на второй кадр панели Animation, нажмите кнопку Tween, в поле Frames to Add введите 21.
7
На панели Animation нажмите первый кадр и задайте ему отображение последнего слоя на панели слоев. Теперь каждому кадру на панели Animation присвойте свой текстовый слой. Для последнего кадра задайте время показа 3 секунды. Наша анимированная надпись готова, для ее сохранения нажмите меню File, затем выберите пункт Save optimized as.

Совет 2: Как сделать анимированную кнопку

Оформление сайтов очень важно для того, как их в итоге воспринимают посетители. Люди должны испытывать эстетическое удовольствие, находясь на страницах сайта, а также эти страницы должны быть для них удобными и функциональными. Ни один сайт не обходится без навигационных кнопок, и ваш сайт будет выглядеть одновременно функциональным и красивым, если вы сделаете эти кнопки анимированными.
Инструкция
1
Графические кнопки, в отличие от текстовых, заметны на страницах и легко запоминаются читателями. Для создания анимированных кнопок воспользуйтесь программой Corel Draw. Создайте новый документ и нарисуйте заготовку, на которой кнопка будет изображена в нескольких видах, как в нажатом, так и в не нажатом состоянии.
2
Для того чтобы нарисовать кнопку, выберите соответствующий инструмент на панели инструментов и нарисуйте прямоугольник с закругленными краями. Залейте прямоугольник черным цветом, а затем скопируйте его и сдвиньте влево и вверх копию. Залейте второй прямоугольник белым цветом.
3
На заготовке кнопки напишите ее название, добавив к тексту черный контур. Сам текст сделайте белым. Теперь откройте меню Effects Rollover, выделив кнопку и кликните на опцию Create Rollover. В строке состояния Rollover вы увидите надпись Normal.
4
Теперь, чтобы изменить рисунок кнопки, кликните на нее правой клавишей мыши и в контекстном меню выберите опцию Edit Rollover. Откроется новая панель инструментов Internet. Нарисуйте дополнительные положения кнопки, которые затем будут сменяться друг за другом, создавая эффект анимации.
5
В левой части панели Internet кликните на кнопку Over и отредактируйте кнопку, удалив контур текста. Залейте текст черным цветом, чтобы создать ее второй вариант в анимации. Теперь нажмите кнопку Down и нарисуйте последний вариант кнопки в нажатом виде.
6
Сдвиньте текст и белый прямоугольник вниз вправо, а черный прямоугольник сдвиньте вверх влево. Теперь нажмите на кнопку Finish Editing Rollover.
7
Сохраните кнопку вместе с кодом, с помощью которого вы сможете менять внешний вид объектов на веб-странице. Таким способом, вы сможете нарисовать кнопку любого вида с любым оформлением.
Источники:
  • как нарисовать анимированную кнопку

Совет 3: Как сделать анимированный текст?

На различных интернет-сайтах, в форумах и персональных блогах текстовые эффекты могут сделать еще заметнее и ярче важный заголовок, или же привлечь внимание читателей к какой-то особенно важной информации. Кроме того, анимированный текст оживляет пространство интернет-сайта, и в разумных количествах украшает его. О том, как сделать несложный анимированный текст в Фотошопе, мы расскажем в этой статье.
Инструкция
1
Для начала создайте новый файл нужного размера и, используя инструмент заливки, закрасьте фон нужным цветом. На созданном фоне инструментом текста напишите любую фразу, которую вы хотите анимировать, используя подходящий к фону цвет.
2
Шрифт подбирайте по собственному усмотрению, но он не должен быть слишком сложным и многослойным. Выбирайте шрифты, очертания которых максимально читаемы и просты, а буквы заметны и объемны. Выделите созданный текст (Select) и скопируйте выделение на новый слой (Layer via copy).
3
Выделенную область залейте более темным цветом. В разделе Selection выберите опцию Modify и сожмите выделение, установив значение Feather на нужное количество пикселей – так, чтобы в результате вы получили букву светлого цвета, через который по контуру плавно проступает темный цвет.
4
Сделайте дубликат фонового слоя и перетащите его на верхний ряд палитры слоев. Выделите буквы, а затем на продублированном слое нажмите Delete.
5
Для анимации вы можете украсить буквы любыми объектами – например, звездочками. Чтобы нарисовать звезды, на панели инструментов выберите Shape tool и выберите звезды из всех групп предлагаемых фигур. Создайте новый слой и нарисуйте звездочку любого цвета на фоне буквы. Выделите ее, а затем создайте еще один слой и закрасьте выделение белой кистью.
6
Закрашенную область слегка увеличьте с помощью инструмента Free Transform. Голубую звездочку поместите над белой, чтобы она приобрела красивый белый кант. Сделайте несколько таких звезд разных размеров, после чего объедините слои.
7
Теперь откройте ваше изображение в Image Ready и займитесь созданием анимации. Установите время задержки каждого кадра, а затем создавайте новые кадры, делая на каждом из них невидимыми разные слои – так, чтобы звездочки меняли свое расположение, насыщенность и размер.
8
После того, как все кадры созданы и оформлены, нажмите на кнопку Optimize и уменьшите количество цветов до 64. Теперь осталось сохранить анимированный текст в виде png-файла.
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500