33 заметки с меткой анимация
📅 17 мая 2017

Плавная бегущая строка с наклоном

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

Буквы с плавным наклономБуквы с плавным наклоном

Но как такое возможно? Ведь сетка светодиодов квадратно-гнездовая квадратная.

Очевидно, что нельзя нарисовать наклонные буквы в такой сетке без ступенек:

Стрелки указывают на некрасивые изломы буквСтрелки указывают на некрасивые изломы букв

Но ступенек на буквах не было, или мой мозг их не замечал. Чтобы разобраться в этом обмане зрения, я сделал фото и видео двух панелей бегущей строки.

▼ Читать дальше

📅 22 октября 2015

Схема проезда с переключением путей

Для компании по ремонту АКПП нарисовал схему проезда с переключателем путей. В данном случае пришлось так поступить, потому что подъезд к объекту сложный, и вариантов слишком много. Стрелочки на вкладках помогают быстрее сориентироваться.

  • Варшавское шоссе из центраВаршавское шоссе из центра

Схема проезда сделана на флеше с анимацией путей. Те, у кого нет флеша, видят статичные картинки, которые можно переключать. Реализовано по старинке, через html map, зато у всех работает. В ходе работы над схемой проезда мы совместно с заказчиком улучшили и саму страницу контактов.

📅 15 декабря 2013

Схема проезда для автосалона на шоссе Энтузиастов

Нарисовал красивую и лаконичную схему проезда с анимацией человечков, автомобилей и трамваев:

Большая картинка

Схема проезда для автосалонаСхема проезда для автосалона

Для этой схемы были нарисованы упрощённые машинки, которые хорошо смотрятся в микроразмере:

Машинки для схемыМашинки для схемы

Четыре направления — четыре машинки. Анимации на поворотах нет, машинка просто «переключается». Как в старинных компьютерных играх.

📅 5 октября 2012

Анимация пути на схеме проезда

Если вы видели мои схемы проезда, то, наверное, обращали внимание на аккуратные маршруты с анимацией:

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

Однажды меня попросили переделать схему проезда с анимированными путями. Внутри флешки обнаружилась куча полосатых слоёв, все они двигались в различных направлениях (и сильно грузили процессор), а линия пути использовалась как маска для этих слоёв:

Справа — как бы пунктирная линияСправа — как бы пунктирная линия

Что произойдёт на крутом повороте?

▼ Читать дальше

📅 21 июня 2012

Баннер про семь чудес света

Встретился сегодня такой баннер:

Баннер EMSБаннер EMS

Однажды я делал нечто похожее. Деловой человек встречает 7 чудес света и при этом общается по телефону:

Чудеса света, кстати, векторные. Использована автоматическая трассировка готовых рисунков.

В моём баннере привлекают внимание три движения, в реальности не совместимых друг с другом: 3D-вращение шара, поворот чудес света и ходьба человека.

📅 14 мая 2012

Баннеры для социальных сетей

У компании «Автодети» есть свои представительства в социальных сетях. Новости, видеоролики, информация об акциях и пр. — над этим ежедневно работают. Стандартные кнопочки соцсетей имеют невысокую кликабельность, поэтому главному сайту нужны баннеры.

В каждом баннере я постарался передать «дух» соцсети:

ТвиттерТвиттер
Канал на ЮтубеКанал на Ютубе
ВконтактеВконтакте
Яндекс.МаркетЯндекс.Маркет
📅 13 февраля 2012

Заставка с 3D-логотипом

Трёхмерное вращение логотипа успешно выполнено — посмотреть — и теперь этот элемент используется в шапке сайта, а также в качестве заставки screensaver на офисных компьютерах и планшетах:

📅 10 февраля 2012

Как создавалась схема проезда для spmet.ru

Путь до «Металл-ателье» не совсем прост, но нам удалось показать его доступно:

Это прозрачная и контрастная схема — она в равной степени хорошо смотрится и на белом фоне (при распечатывании), и на сайте компании (там бежевый фон).

По желанию заказчика была подготовлена схема в PDF, её можно посылать по почте или печатать в высоком разрешении:

Векторная схема проезда в PDFВекторная схема проезда в PDF

Далее я расскажу и покажу, как создаётся схема.

▼ Читать дальше

📅 6 февраля 2012

Недорогие баннеры для сети mail.ru

Когда бюджет скромный, можно сделать простой баннер в стиле сайта с появляющимся текстом:

▼ Читать дальше

📅 16 декабря 2011

3D-вращение во флеше

Сейчас я работаю в том числе над созданием 3D-анимации логотипа ЖБИП:

Наивно полагал, что в новом флеше (CS5) есть инструменты для создания полноценного 3D. Но это не так. По-прежнему сначала нужно создавать трёхмерную модель, например, в 3D-максе, потом сохранять несколько ключевых кадров и отрисовывать их заново во флеше. В этом тоже есть свои преимущества: меньше нагрузка на процессор плюс полный контроль над каждым кадром (будет именно так, как мы нарисуем, а не «как свет ляжет»).

▼ Читать дальше

📅 3 октября 2011

Баннеры 468х60 GIF

В некоторых случаях полезно пойти на компромисс и свести анимацию в баннерах к минимуму (3-5 меняющихся кадров, можно с эффектом перехода). Для этих целей хватает возможностей формата GIF:

Баннер для акции от «Гудвила»Баннер для акции от «Гудвила»
Баннер для «Автодетей» на синий фонБаннер для «Автодетей» на синий фон

▼ Читать дальше

📅 9 июня 2011

Баннер «Лето скидок»

Горизонтальный скидочный баннер для шапки сайта mosershop.ru:

▼ Читать дальше

📅 5 июня 2011

Сайт грузоперевозок «МК-Лидер»

mk-lider.ru

Главная страницаГлавная страница

▼ Читать дальше

📅 25 марта 2011

Баннер для олимпиады ФТК

Текст для акции придумала моя сестра, а исполнение — моё:

Размер баннера: 230 на 150 пикселей. Расположение — на исходном сайте в левой колонке. Ссылка передаётся через переменную.

📅 28 августа 2010

Карта поставок из других стран

Для сайта Rainbowproduction Co. требовалось сделать красивую карту поставок продукции из других стран.

Карта тянется до любого размера, слайд-шоу увеличивается при наведении курсора:

Карта производства товаров в разных странахКарта производства товаров в разных странах

▼ Читать дальше

📅 9 июля 2010

Анимация радуги на флеше

Для сайта Rainbowproduction Co. сделал заставку на главную страницу: радуга, проявляющаяся слева направо и озаряющая всё вокруг. Фоновая картинка может быть любая, а размер радуги подстраивается под экран.

Весь процесс создания данной анимации занял у меня около часа. На флеше такие вещи делались достаточно просто и быстро: создаёшь анимацию одной звёзды, затем невидимый объект, который сеет звёзды вокруг себя (и подкрашивает их), затем двигаешь его по дуге, повторяющей форму радуги. Одновременно отдельным слоем проявляется нарисованная радуга. Если это делать на чистых html, css, javascript, svg — это займёт намного больше времени. Жаль, что технология macromedia flash уходит в прошлое...

Подкладываем произвольный фон

Цветные слои радуги накладываются с интересным эффектом — комбинация Overlay и Multiply в различных соотношениях. Таким образом создаётся впечатление, что над наложением радуги поработал дизайнер:

Анимация радуги на фоне дереваАнимация радуги на фоне дерева
📅 24 декабря 2009

Новогодняя шапка сайта

Сисечный баннер в шапку сайта «Никерманн» под Новый год:

📅 19 ноября 2009

Баннер «Экономьте!»

Простой баннер в два кадра:

Здесь использован знакомый всем эффект а-ля PowerPoint, но созданный собственноручно (потому что готовые эффекты сильно увеличивают вес баннера).

📅 19 ноября 2009

Анимация текста: цветные волны

Нужно было оживить данный баннер в шапке сайта, не трогая фотографию и текст. Придумал вот такой эффект волн на фоне букв:

Буквы используются в качестве маски слоя для волн. Думаю, этот эффект соответствует неординарному подходу и нестандартным решениям.

📅 19 октября 2009

Логотип выходит из воды

Задача: добавить привлекательную анимацию логотипу на сайте. Так как фирма занимается установкой фонтанов, мы с заказчиком придумали, чтобы логотип всплывал из воды. Насколько правдоподобно это получилось - судить вам:

📅 12 октября 2009

Баннер для банка

Небольшой горизонтальный баннер 200×80 пикселей:

📅 4 октября 2009

Минибаннеры для «Автодетей»

Для сайта «Автодетей» придумано и нарисовано около 50 небольших баннеров. Формат GIF уходит в прошлое, но мы всё ещё используем его:

Реклама игрыРеклама игры
Полезные аксессуарыПолезные аксессуары
Загадочная программа обслуживанияЗагадочная программа обслуживания

▼ Читать дальше

📅 31 марта 2009

Баннер для «Гудвила»

Идея в том, что всякие отчётности и проверки сильно нарушают спокойствие. Почему бы не поручить эти «проблемы» профессионалам?

📅 24 декабря 2008

Баннеры химического магазина

Горизонтальный баннер, соотношение 10 к 1:

Квадратный баннер:

📅 29 апреля 2008

Баннер агентства недвижимости

Баннер никуда не ведёт, так как у фирмы нет своего сайта. Поэтому крупно показаны телефоны и адрес. Движение в баннере иногда ставится на паузу: это привлекает дополнительное внимание.

📅 14 апреля 2008

Анимация логотипа «Диаклаба»

Рядом с логотипом придумали девиз, который надо было как-то обыграть:

📅 14 февраля 2008

Баннеры ОФГП

Выкладываю баннеры для ОФГ «Перспектива». Они динамичные и минималистичные, формат — 200×300 точек:

  

▼ Читать дальше

📅 26 сентября 2007

Краш-тест

Данная анимация показывает, что произойдёт с непристёгнутым ребёнком при аварии:

📅 27 февраля 2007

Баннер ресторана «Часть суши»

📅 26 февраля 2007

Баннер магазина «La Guitarra»

Стиль и персонаж для баннера были взяты из шапки сайта музыкального магазина:

Шапка сайта La GuitarraШапка сайта La Guitarra
📅 17 февраля 2007

Баннер фотомастерской

📅 5 октября 2006

Отправка СМС

Попробовал перепрошить свой старенький C45, заменив некоторые картинки на свои. Вот такую сделал анимацию отправки SMS-ки:

Бежит ёжик с сообщением по полю 😃Бежит ёжик с сообщением по полю 😃

Один раз мне удалось увидеть эту анимацию. А потом телефон «умер». Хорошо, что я сделал бэкап перед прошивкой!

📅 13 июня 2006

Баннер для «Yappi Club’а»

Купола — это наше всё 😃Купола — это наше всё 😃
Иван ТитовИван Титов
Веб-дизайнер,
разработчик
★ Москва
© 2004 – 2019