Создание анимированного gif баннера
Привет всем кто решил почитать эту статью. Я тут решил роз’яснить подробное создание сложного анимированого баннера. Ну вобшем к делу:
Дизйнер-разработчик ставит перед собой два условия: 1) его творение должно быть легким и 2) занимать небольше 15Kb. Предположим, что вы уже себе представляете как будет выглядеть ваш баннер и в какой цветовой гамме будет все происходить (крутиться, двигаться, появляться и исчезать). Открываете Photoshop, создаете новый файл, в полях размеров указываете формат вашего баннера, в подразделе фон(background) выбираете прозрачный(transparent):
Рис1
вы получили поле нужного размера с одним, пока еще пустым слоем.
I. При создании баннеров важно помнить, что чудное свойство гифа, анимированного в том числе (transparent в данном случае можно забыть, поскольку зачастую судьбу баннера — на какой сайт, с каким фоновым цветом или, еще хуже, с каким background image ваш шедевр станет — предсказать трудно) — ваша прямоугольная область не должна иметь прозрачных участков
- В случае если разрабатываемый баннер имеет цвет, отличный от белого, черного и серого, — его общий тон, скорее всего, будет отличаться от основного тона страницы сайта. Теория вероятности штука сложная, но даже если вы делаете баннер с хитролиловым background`oм, и он попадает на похожий хитролиловый сайт (совершенно случайно) — скорее всего оттенки все же будут отличаться. Но баннеры со стандартным цветом background`а лучше оформлять в рамочку, можно тоненькую однопиксельную, можно цвета не сильно отличающегося от основного, для того, чтобы ту информацию, которую представляете в баннере отделить от общей информации пространства чужого для вас cайта.
III. Пора считать — background и обводка — это уже два цвета. Считать и контролировать количество используемых цветов придется все время.
IV. Внимательно подумайте — является ли необходимым присутствие на баннере иллюстраций? Допустим, да. Зачастую это действительно оправдано — человек, мельком взглянувший на баннер, рекламирующий компьютерный магазин легче зацепится взглядом за изображение монитора или мыши, чем то же самое, написанное словами. Если вы все-таки решили в баннере показать эти самые мониторы — заранее обработайте изображение. Для того, что бы монитор был похож сам на себя, достаточно двух-трех цветов. Количество цветов продолжаем считать: в макете уже присутствуют минимум два слоя — подложка с обводкой и слой с картинкой. Кстати, сразу можно использовать в качестве контура баннера самый темный цвет, присутствующий на картинке.
V. Должно быть пришло время для создания основного текстового элемента картинки — собственно названия баннера. Это может быть название магазина, имя сайта или любое другое ведущее слово. Опять же, в качестве цвета выбираете самый контрастный цвет из уже имеющихся. Для светлой подложки — самый темный элемент картинки и наоборот.
Собственно вот что вы должны иметь на данный момент: графику, у меня ето рамка(1пиксель), фон и пятно.
Главное старайтесь все делать на отдельных слоях, потом будет легче при создании анимации!
Внимание, теперь предлагается метод порезки слова (либо любого другого элемента баннера) для создания динамического эффекта прорисовки элемента баннера на экране.
— Впечатываете ваше слово, выбираете нужную гарнитуру и размер, в параметрах сглаживания шрифта устанавливаете NONE и делаете копию слоя. В меню Layer выбираете Слой(Type)—»Растрировать(Render Layer) — ваше название перестало быть текстом — это просто графический элемент, имеющий один (!) цвет.Дайте название слою — например NAME.
Рис3
- Сделайте новый слой. Дайте ему название TEMP — это рабочий слой, кликать по нему придется часто. Хорошо будет, если он легко будет поддаваться обнаружению, в то время как вырастет количество слоев в вашем файле.
— Нарисуйте на этом слое однопиксельную линию (на выбор — горизонтальную или вертикальную. Для горизонтально ориентированного баннера, да еще если в качестве тренировки рекомендую именно горизонтальную) контрастного цвета. Любого — этот цвет мы считать не будем, поскольку ЭТА линия в нашем дизайне используется как ИНСТРУМЕНТ, а не элемент баннера. Поэтому лучше сделать ее ярким цветом, да еще и таким, чтобы гарантированно отличить от реальных деталей баннера. (у меня линия на 3пикселя так как я уже знаю что и как).
Рис4
- В случае, если готовится таки горизонтальная порезка названия (которое у нас уже забито в предыдущем слое и сконвертировано в графику) выберите инструмент move (кнопка c буквой "V" на англицкой раскладке) и переместите линию в самый верх по отношению к верхнему пикселю вашего названия (можно вниз — направление принципиального значения не имеет, важна последовательность)
- Ctrl-click на слое TEMP (именно на том прямоугольнике что указан на рисунке)
вы получили SELECT прямоугольной области высотой в один пиксель. Click на слое с вашым текстом, Ctrl-Shift-J — и из вашего названия вырезалась в новый слой однопиксельная полоска. Click на слое TEMP, при активном инструменте Move стрелкой переместите вашу рабочую полоску на один пиксель вниз. Ctrl-click на слое TEMP, перейдите на слой с вашым текстом, Ctrl-Shift-J — вы получили еще один слой со второй вырезанной полоской из вашего названия. По этому алгоритму разрежьте на полоски все ваше слово — слои последовательно будут создаваться, и их имена будут иметь порядковые номера.
Вот что должно получится: скрытые слои это части слов которых нет
- Создайте еще один слой, например со слоганом, описывающим суть рекламы. Цвет- из уже существующих в палитре. Параметр сглаживания текста — NONE.
Рис7
- другие возможные элементы баннера рассматривать не будем. Главное описать технологию. Это я говорю к тому, что сейчас приступаем к сборке заготовок в полноценную анимацию.
Если со слоями вы работали в PhotoShop`e, то сейчас самое время перейти в ImageReady — в меню Файл(File) —» Редактировать в (Jump to) —» Image Ready.
В меню Window выбрать Окно(Show) Анимация(Animation) — появится свиток, в котором присутствует один фрейм. Сделайте все слои макета Невыдимими (UnVisible), оставив Видимим(Visible) только подложку и рамочку.
- В свитке Анимация(Animation) в левом верхнем углу нажмите на стрелочку — появится локальное меню свитка. Выберите команду Новый кадр(New Frame) — вы создали фрейм, который является дубликатом предыдущего, т.е. со включенным слоем с подложкой и рамочкой.
- Включите свойство Видим(Visible) для слоя с верхней полоской вашего разрезанного элемента (возможно слой с названием «Name copy»).
- Создайте еще один Новый кадр (New Frame) — в нем уже будет подложка, рамочка и первый элемент, и сделайте Видимим(Visible) слой со второй полоской имени («Name copy 2»).
- Таким образом, добавляя фреймы и включая слои, прорисуйте все имя, и, когда будут включены все слои имени, обратитесь к свойству фрейма «delay» и измените время задержки на, допустим, величину в 5 секунд.
- Создайте еще один фрейм, проверьте, чтобы параметр delay был маленьким, и включите видимость слоя с графикой (в нашем примере тот самый монитор).
- Новый фрейм — и выключите Видимый(Visible) нижней полоски ИМЕНИ, и по соответствующей технологии в обратном порядке последовательно, пофреймово уберите ИМЯ.
- В новом фрейме включите слой со слоганом. Опять необходимо увеличить задержку (delay) отображения фрейма.
И для начала достаточно. Параметр цикличности анимации установите в состояние Forever — и ваш баннер будет прокручиваться всегда.
Обратитесь к свитку Оптимизировать анимацию(Optimize), установите параметры gif — 4 colors — lossy:0 — No dither — Selective — No transparent
В свитке Animation в подменю Optimize Animation нужно отметить оба checkbox.
Запомните полученый gif (File—»SaveOptimizedAs) и запустите гиф — просмотреть его можно и из Image Ready Plays Animation (движок внизу свитка Animation), и через File—»Preview in в браузере. Если все сделано правильно — ваша анимация будет проигрываться без смещений и ошибок.
В заключении хотелось бы подчеркнуть тот факт, что эту технологию можно применять и для создания более сложной анимации — и при ограниченном количестве цветов можно изготавливать сложные и оригинальные баннеры.
Можно усложнить процесс прорисовки ИМЕНИ — слои с разрезанными полосочками продублировать (правая кнопка мыши на слое —»Дубликат слоя(Dublicate Layer) и дубликатам задать прозрачность слоя 50% (как вариант), и при создании анимации генерить прорисовку сначала полупрозрачных слоев, затем непрозрачных.
Подобный эффект можно создать с прорисовкой вертикальных элементов. В таком случае, при грамотной композиции элементов баннера и хорошей цветовой гамме баннер будет удачным.
Как вы могли заметить объект на слое TEMP в конечном дизайне нами не использовался. Это всего лишь инструмент для быстрого создания маски, которой вырезается элемент анимации. И маска эта не обязательно должна быть однопиксельной полоской — это может быть любая произвольная форма. Движение прорисовки также может происходить в любом направлении, хоть по диагонали, хоть сначала сверху, потом слева, потом еще откуда нибудь.
Вот что у меня получилось:
Будут вопросы — будут ответы.
Етим методом можна делать и всякую графику к сайту. ДЕРЗАЙТЕ!