Кажется, что на бегущей строке в поездах метро и МЦК используются наклонные буквы, примерно такие:
Но как такое возможно? Ведь сетка светодиодов квадратно-гнездовая квадратная.
Очевидно, что нельзя нарисовать наклонные буквы в такой сетке без ступенек:
Но ступенек на буквах не было, или мой мозг их не замечал. Чтобы разобраться в этом обмане зрения, я сделал фото и видео двух панелей бегущей строки.
▼ Читать дальше
Для компании по ремонту АКПП нарисовал схему проезда с переключателем путей. В данном случае пришлось так поступить, потому что подъезд к объекту сложный, и вариантов слишком много. Стрелочки на вкладках помогают быстрее сориентироваться.
Схема проезда сделана на флеше с анимацией путей. Те, у кого нет флеша, видят статичные картинки, которые можно переключать. Реализовано по старинке, через html map, зато у всех работает. В ходе работы над схемой проезда мы совместно с заказчиком улучшили и саму страницу контактов.
Нарисовал красивую и лаконичную схему проезда с анимацией человечков, автомобилей и трамваев:
Для этой схемы были нарисованы упрощённые машинки, которые хорошо смотрятся в микроразмере:
Четыре направления — четыре машинки. Анимации на поворотах нет, машинка просто «переключается». Как в старинных компьютерных играх.
Если вы видели мои схемы проезда, то, наверное, обращали внимание на аккуратные маршруты с анимацией:
В этой заметке я расскажу, как такое делается, но сначала небольшая предыстория.
Однажды меня попросили переделать схему проезда с анимированными путями. Внутри флешки обнаружилась куча полосатых слоёв, все они двигались в различных направлениях (и сильно грузили процессор), а линия пути использовалась как маска для этих слоёв:
Что произойдёт на крутом повороте?
Встретился сегодня такой баннер:
Однажды я делал нечто похожее. Деловой человек встречает 7 чудес света и при этом общается по телефону:
Чудеса света, кстати, векторные. Использована автоматическая трассировка готовых рисунков.
В моём баннере привлекают внимание три движения, в реальности не совместимых друг с другом: 3D-вращение шара, поворот чудес света и ходьба человека.
У компании «Автодети» есть свои представительства в социальных сетях. Новости, видеоролики, информация об акциях и пр. — над этим ежедневно работают. Стандартные кнопочки соцсетей имеют невысокую кликабельность, поэтому главному сайту нужны баннеры.
В каждом баннере я постарался передать «дух» соцсети:
Трёхмерное вращение логотипа успешно выполнено — посмотреть — и теперь этот элемент используется в шапке сайта, а также в качестве заставки screensaver на офисных компьютерах и планшетах:
Путь до «Металл-ателье» не совсем прост, но нам удалось показать его доступно:
Это прозрачная и контрастная схема — она в равной степени хорошо смотрится и на белом фоне (при распечатывании), и на сайте компании (там бежевый фон).
По желанию заказчика была подготовлена схема в PDF, её можно посылать по почте или печатать в высоком разрешении:
Далее я расскажу и покажу, как создаётся схема.
Когда бюджет скромный, можно сделать простой баннер в стиле сайта с появляющимся текстом:
Сейчас я работаю в том числе над созданием 3D-анимации логотипа ЖБИП:
Наивно полагал, что в новом флеше (CS5) есть инструменты для создания полноценного 3D. Но это не так. По-прежнему сначала нужно создавать трёхмерную модель, например, в 3D-максе, потом сохранять несколько ключевых кадров и отрисовывать их заново во флеше. В этом тоже есть свои преимущества: меньше нагрузка на процессор плюс полный контроль над каждым кадром (будет именно так, как мы нарисуем, а не «как свет ляжет»).
В некоторых случаях полезно пойти на компромисс и свести анимацию в баннерах к минимуму (3-5 меняющихся кадров, можно с эффектом перехода). Для этих целей хватает возможностей формата GIF:
Горизонтальный скидочный баннер для шапки сайта mosershop.ru:
mk-lider.ru
Текст для акции придумала моя сестра, а исполнение — моё:
Размер баннера: 230 на 150 пикселей. Расположение — на исходном сайте в левой колонке. Ссылка передаётся через переменную.
Для сайта Rainbowproduction Co. требовалось сделать красивую карту поставок продукции из других стран.
Карта тянется до любого размера, слайд-шоу увеличивается при наведении курсора:
Для сайта Rainbowproduction Co. сделал заставку на главную страницу: радуга, проявляющаяся слева направо и озаряющая всё вокруг. Фоновая картинка может быть любая, а размер радуги подстраивается под экран.
Весь процесс создания данной анимации занял у меня около часа. На флеше такие вещи делались достаточно просто и быстро: создаёшь анимацию одной звёзды, затем невидимый объект, который сеет звёзды вокруг себя (и подкрашивает их), затем двигаешь его по дуге, повторяющей форму радуги. Одновременно отдельным слоем проявляется нарисованная радуга. Если это делать на чистых html, css, javascript, svg — это займёт намного больше времени. Жаль, что технология macromedia flash уходит в прошлое...
Цветные слои радуги накладываются с интересным эффектом — комбинация Overlay и Multiply в различных соотношениях. Таким образом создаётся впечатление, что над наложением радуги поработал дизайнер:
Сисечный баннер в шапку сайта «Никерманн» под Новый год:
Простой баннер в два кадра:
Здесь использован знакомый всем эффект а-ля PowerPoint, но созданный собственноручно (потому что готовые эффекты сильно увеличивают вес баннера).
Нужно было оживить данный баннер в шапке сайта, не трогая фотографию и текст. Придумал вот такой эффект волн на фоне букв:
Буквы используются в качестве маски слоя для волн. Думаю, этот эффект соответствует неординарному подходу и нестандартным решениям.
Задача: добавить привлекательную анимацию логотипу на сайте. Так как фирма занимается установкой фонтанов, мы с заказчиком придумали, чтобы логотип всплывал из воды. Насколько правдоподобно это получилось - судить вам:
Небольшой горизонтальный баннер 200×80 пикселей:
Для сайта «Автодетей» придумано и нарисовано около 50 небольших баннеров. Формат GIF уходит в прошлое, но мы всё ещё используем его:
Идея в том, что всякие отчётности и проверки сильно нарушают спокойствие. Почему бы не поручить эти «проблемы» профессионалам?
Горизонтальный баннер, соотношение 10 к 1:
Квадратный баннер:
Баннер никуда не ведёт, так как у фирмы нет своего сайта. Поэтому крупно показаны телефоны и адрес. Движение в баннере иногда ставится на паузу: это привлекает дополнительное внимание.
Рядом с логотипом придумали девиз, который надо было как-то обыграть:
Выкладываю баннеры для ОФГ «Перспектива». Они динамичные и минималистичные, формат — 200×300 точек:
Данная анимация показывает, что произойдёт с непристёгнутым ребёнком при аварии:
Стиль и персонаж для баннера были взяты из шапки сайта музыкального магазина:
Попробовал перепрошить свой старенький C45, заменив некоторые картинки на свои. Вот такую сделал анимацию отправки SMS-ки:
Один раз мне удалось увидеть эту анимацию. А потом телефон «умер». Хорошо, что я сделал бэкап перед прошивкой!
Иван Титов