линейки онлайн, линейки отсчета времени метрик, линейки возраста, бегунки
календари, календарики, онлайн календарь
гифы gifs anime avatar аватары анимация
статьи веб дизайн web design каталог обмен баннерами ссылками

Статьи для начинающих вебмастеров

Все на нашем сайте - для украшения ваших собственных страничек. Теперь мы пытаемся собрать интересные и полезные материалы о дизайне и на околодизайнерские темы, о программировании, хостинге и продвижении сайтов.

Как создать анимированный гиф

Статья предназначается для тех, кто ни разу еще не создавал анимированных гифов, для тех, кто создавал, но не все получилось, и для тех, кто с этим постоянно работает (последним эта статья предназначается для того, что фыркнуть что-то типа "ну и что здесь нового и непонятного?" и лишний раз убедиться, что они не одиноки в сети:) ).

Итак, начнем. Начнем с того, что именно вы хотите анимировать, какая картинка и какого размера должна прыгать и вертеться и с какими целями. И, конечно, определиться с выбором программы, лично мне ближе всего Photoshop и его брат Image ready, поэтому "инструктирую" я именно по работе в этих программах.

Допустим, дело происходит так: вам надоело использовать базовые анимированные заставки на своем мобильном, и вы хотите что-то эдакое, какого нет ни у кого, кроме Вас. И хочется Вам… свое лицо, на фоне заката, который постепенно превращается в звездное небо. Почему бы и нет? Открываем в Photoshop свою любимую фотографию и вырезаем портрет инструментом "crop", делаем процедуру "сохранить как", чтоб не испортить любимую фотографию, выделяем полностью всю картинку и создаем копию фона (правой кнопкой мыши по картинке - создать копию слоя ), фон удаляем.

После чего открываем новый документ, в котором выбираем размер экрана вашего телефона. Сверяем размер портрета и подгоняем до нужной кондиции, и приступаем к самому главному - его надо вырезать. Это можно сделать любым инструментом выделения, после чего (портрет у нас находится на фоне в клетку, то есть вся область вокруг вырезанного портрета - прозрачная) фото готово для дальнейшего использования.

Теперь берем картинки соответственно с видом заката и с видом ночи (если можете нарисовать его сами - еще лучше!), подгоняем, опять же, под размер экранчика мобильного и перетаскиваем получившиеся картинки в пустой документ вместе с обрезанным портретом. Выставьте слои (меню Layers) таким образом, чтобы портрет располагался сверху.

Теперь работаем над тем, чтоб на вашем закате сгустились сумерки. Выделяем слой с закатом, копируем его, располагаем так, чтобы он не перекрывал портрет и меняем ему цветность на более темную в меню "Image " с помощью инструмента "Adjustments - levels", до тех пор, пока вам не понравится. Вот собственно и все, переходим непосредственно к анимации. Переносим созданный документ, как есть, в формате PSD в Image ready.

В Image ready под вашим документом находится полоса с кнопками play, stop и т.п. (Animation), и в этой полосе находится маленькая копия вашего документа. Есть там еще одна кнопка, на которой изображены два квадрата "duplicates selected frames", при нажатии на нее кадр дублируется столько раз, сколько захотите. На данный момент хватит и трех. И так есть три одинаковые картинки на полоске. Теперь в окошке слоев, таком же, как и в Photoshop, делаем следующее: отключаем видимость у тех слоев, которые не нужны нам в первом кадре. То есть видимыми оставляем только портрет и фон заката, щелкаем следующий кадр, там меняем видимость слоя заката на слой с потемневшим закатом, и на третьем кадре делаем видимым слой со звездами, не забыв выключить закат. То есть в каждом из кадриков должно получиться по два видимых слоя, один из которых ваш портрет, а второй - изменчивое небо.

Смотрим на полосу промотки и видим, под каждым кадром есть обозначение секунд, сколько кадр будет воспроизводиться("No delay" стоит по умолчанию, можно выбрать любое количество секунд или их десятых ). Меняем, скажем на 0,5 секунд и нажимаем play. Регулировать время можете по своему вкусу. Если результат вас устроил - жмем на кнопку Файл - сохранить оптимизировано как, задаем имя, сохраняем, и вот он - ваш собственный анимированный гиф. Вы теперь почти режиссер:)!

Конечно, если создается гиф для рекламных целей - баннер - то чем меньше слоев в нём будет - тем меньший размер он приобретет, и старайтесь использовать поменьше цветов, иначе ваш баннер будет грузиться слишком долго, или не пройдет отбор в баннерной сети из-за тяжести.

Припадков креатива Вам, господа!

TJ Hinako
Статья является собственностью автора сайта http://lines.net.ua. Копирование без письменного разрешения запрещено.

Наверх