Метка: анимация

Как сделать баннер

Как отредактировать анимированную картинку (аватарку, баннер, смайлик)

3

Чаще всего непрофессиональные дизайнеры сталкиваются с проблемой редактирования анимации в формате gif. Это самый старый, довольно простой и очень популярный формат для создания движущихся картинок. Есть, конечно, и другие виды анимации: flash, silverlight, анимация с помощью css или javascript т.п., но эти темы мы оставим пока на будущее.

Анимированные аватарки, смайлики – это почти всегда формат gif. Чтобы отличить анимацию gif от flash, нужно кликнуть правой кнопкой мыши по этой анимации. Если в последней строчке написано что-то про Adobe Flash Player, значит, это флэш-анимация:

Как отличить flash от gif

В противном случае, найдите в появившемся контекстном меню пункт, отвечающий за сохранение картинки на ваш компьютер и посмотрите, какое расширение и у нужного вам рисунка. Для этой же цели подойдет пункт Свойства контекстного меню.

(далее…)

Как сделать баннер

Учимся писать грамотное техническое задание (ТЗ) на разработку баннера

2

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

Классическая иллюстрация работы над проектом

Также вы можете скачать бесплатно реальный пример технического задания на создание баннера в формате .doc:

Скачать бесплатно пример ТЗ на разработку баннера flash

(далее…)

Уроки Photoshop

Как сделать мигающую аватарку или баннер в Фотошопе

4

В этом уроке для новичков будет подробно и в картинках рассказано, как сделать вот такую вот мигающую женскую аватарку с помощью программы Photoshop:

Пример женской мигающей аватарки 120x120

Сделать мигающую аватарку несложно. Для этого нам достаточно будет программы Adobe Photoshop CS3 (Adobe Photoshop CS2 и Adobe Photoshop CS4 тоже подойдут). Кроме возможности редактировать отдельные кадры нашей анимированной аватарки Фотошоп дает возможность создания самой анимации, т.е. нам достаточно будет одной этой программы.

Если вам не очень удобно делать анимацию в Photoshop, можно воспользоваться им для подготовки кадров аватарки или баннера, а саму анимацию сделать в другой программе. Наиболее популярная программа, которая позволяет делать анимированные картинки — Ulead GIF Animator 5. Я подробно описывал работу с ней в статье Как сделать анимированный GIF баннер. Лично я gif-анимацию всегда делаю в Ulead GIF Animator 5, а Photoshop использую только для подготовки кадров баннера или аватарки – привычка :).

(далее…)

Как сделать баннер

Как обойти антибанерные фильтры при размещении своей рекламы

3

В своей статье как избавиться от баннеров раз и навсегда я писал о программах, которые позволяют отфильтровать классическую баннерную рекламу, контекстные объявления Яндекса и Google, всплывающие окна и rich-баннеры, появляющиеся посреди экрана. Программ и плагинов, которые следят за тем, чтобы пользователь видел как можно меньше рекламы на сайтах, появляется все больше и они отлично справляются с поставленной задачей. Особенно, если использовать несколько разных фильтров против рекламы одновременно.

Предлагаю увидеть работу двух работающих одновременно фильтров рекламы (антибаннерный модуль в антивирусе KIS9 и встроенный ad-охотник браузера Maxthon) на примере популярного сайта zaycev.net. Справа оригинальный сайт, без применения фильтра баннеров, слева – результат автоматической фильтрации (кликните по картинке для увеличения):

Пример работы анти-баннерных фильтров

По мере роста числа грамотных пользователей интернета эффект от баннерной рекламы будет снижаться и дальше – люди просто не будут ее видеть. Уже сейчас эффективность баннерной рекламы в США на 40% меньше, чем в русскоязычном интернете. Причиной тому являются не только фильтры баннеров, но и привычка не обращать внимание на анимированную блочную информацию, выработанная у опытных интернетчиков.

(далее…)

Секреты верстки сайтов

Простая анимация CSS (спрайты)

5

Никого не удивляют акционные баннеры, иконки или графические меню, сделанные с помощью JavaScript, которые могут слегка меняться при наведении на них указателя мыши. Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая css-анимация (также известная как спрайты css), реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.

Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:

Пример анимации css

Многие графические элементы на этом сайте, включая меню, меняют цвет или форму при наведении на них указателя мышки. Получается достаточно весело, оригинально и в то же время не утомительно. Рассмотрим подробнее, как это сделано, на примере пункта меню «english».

Бесплатно скачать коды урока интерактивной CSS-анимации

(далее…)

Создание сайтов

Silverlight 2: альтернатива Flash от Microsoft

8

Microsoft Silverlight 2.0 Logo

Microsoft Silverlight 2.0 является конкурентом мощной и популярной технологии Adobe Flash. Компания Microsoft, по словам ее бывшего директора Била Гейтса, недооценила возможности интернета с точки зрения заработка денег. И теперь ей приходится догонять лидеров очень денежной сферы по продаже программного обеспечения. А сделать это будет не так чтоб просто – лидерам ведь тоже деньги нужны и останавливаться они не собираются.

Долгое время Flash был единственным решением для создания качественной сложной анимации. Флэшевые баннеры практически вытеснили своих gif-конкурентов, а скриптовая анимация была как раз тем исключением, которое только подтверждает правило. Гениальная разработка компании Macromedia приступила к завоеванию интернета еще во времена диал-апа, когда скорость загрузки сайта была гораздо важнее мигающей после загрузки анимации.
(далее…)

Как сделать баннер / Подробные инструкции

Как сделать анимированный GIF баннер

50

анимированный GIF баннер

Для продвижения своего сайта нужны баннеры. Их можно размещать бесплатно в блогах своих знакомых или на коммерческой основе на сайтах с высокой посещаемостью. Создание баннера можно заказать в профессиональной веб-студии, а можно сделать самому.

В этой статье мы научимся делать анимированные GIF-баннер средней сложности с нуля. Для этого нам понадобится немного времени и терпения, т.к. шедевр анимации у новичка за час не получится никак. Из программ мы будем использовать Adobe Photoshop – для подготовки кадров баннера и Ulead GIF Animator 5 – для создания из готовых кадров анимационного ролика в формате GIF. Если вы не знаете, где взять эти программы, рекомендую прочитать статью Чем бесплатно скачать любую информацию.
(далее…)