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







Но это всё ерунда.
Я о чём.


В офис крупной компании нужен флеш-дизайнер для разработки медийной (баннерной) рекламы.

Из требований — необходимо знание Adobe Flash, а также адекватность и наличие мозгов (обязательно), всему остальному я научу, если это будет нужно. (Паника-паника: акция обучения действительна в течение пары недель!)

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

Но плюс ко всему, мы ещё и денег дадим. Что-то около $1 000+ в месяц, по результатам собеседования.

Примеры работ мне на почту → v.sokurenko@artox.by

Спасибо за внимание.

Ребятами из Red Keds было предоставлено задание — сделать серию баннеров (двенадцать, четыре разных размера) по присланной мне раскадровке:



По срокам то ли на завтра, то ли на вчера, я уже не помню.
( этапы создания )

Финальная версия для Яндекса (размера 200×300 пикселей) выглядит так:




По итогу я могу сказать, что в этом баннере я выложился по полной, чтобы уложить его в жалкие 25кб (привет, Рамблер и Яндекс!), а затем ещё раз по полной, чтобы баннер работал максимально быстро, с минимальной нагрузкой на процессор (привет, Яндекс!).


Раскрываю все тайны:

• В баннере только одна маленькая твиновая анимация — всё остальное сделано программно;


• В общей сумме проекту было уделено 63 письма и немного скайпа;
  
• Бокал на самом деле — два кусочка бокала разных размеров (чтобы на крупном плане он смотрелся максимаьльно хорошо), и по окончанию проекта получилось всего 145 файлов, что отлично видно на скриншоте;


• В баннере нету ни одной картинки с прозрачностью — всё это жпеги, а прозрачнасть имитирована маскированием;


• Баннер имеет следующую внутреннюю структуру:
  
  
  


• Я сам удивляюсь, но я не заебался всё это делать, и мне было очень интересно.

А ещё в этом баннере я узнал:

• что такое «zeroPixel» (привет, Коммерсант!);


• что вставать в 4 и работать пару часов куда эффективнее, чем проработать в два раза дольше, но ночью;


• что можно очень эффективно использовать Guide layers во флеше;


• что пользоваться в проектах Evernote-ом очень удобно;


• что когда высыпаешься, то решение поменять слои местами — куда очевиднее, нежели использовать программные маски, писать кучу лишнего кода, а затем его оптимизировать;
  



• что-то ещё, о чём не скажу.

В главных ролях:

• Арт-директор — Олег Петерс;


• Менеджер — Лёша Краснов;


• Флеш-аниматор — я.

Action Script 2, Flash Player 8. Вес 25кб.
Сделано в декабре 2010 года для Хайникена и Ред Кедс.

Оказывается, не так-то и просто держать портфолио up-to-date. Сегодня просто баннер, без рассказов.

Баннер по мотивам сайта-конкурса для MEXX, сделанной Андреем tastemeru

Суть конкурса: люди делают фотографии Санкт-Петербурга или короткие ролики о нём (на какую-то заданную тему) и размещают на сайте. Другие пользователи голосуют за лучшие работы, победители в результате получают призы.


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



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

В этом проекте я узнал то, что у Мекса не один логотип :)

Сделано для Кирилла и Mexx.

Немного про раскадровки. (Секунды позора: только сегодня я узнал, что «раскадровка» по-английски не «screenplay», а «storyboard».)

( прелюдия )


Рассмотрим вариант хорошо продуманной раскадровки для баннера на сайт click-mart.ru.

Задача: сделать баннер-меню, рекламирующий акции на товары в интернет-магазине. Товары, картинки, даты и цены товаров разные — необходимо сделать гибкий и простой, но аккуратный баннер, который в дальнейшем можно было бы легко и часто модифицировать. При клике на каждый из товаров необходимо переходить на соответствующий раздел.

Клиенту была предложена следующая раскадровка:



(Вместо «руб.» я хотел использовать знак рубля, но его не оказалось для используемого мною шрифта.)

Баннер ведёт себя следующим образом:

• при наведении на каждый из товаров, товар увеличивается названием, и является кнопкой, при клике на которую происходит переход (в новом окне) на соответсвующий раздел сайта;


• при наведении на кнопку «все суперцены» она меняет свой вид, и при клике переходит на соответсвующий раздел (в новом окне);


• пока пользователь не взаимодействует с баннером, в нём происходит анимация, которая зациклена, как только пользователь наводит курсор, анимация меняется — выстраиваются товары и баннер «превращается» в своеобразное меню вверху сайта.

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




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

Также, клиент запросил исходник, и мануал по его редактированию. Обычно, я предоставляю это только студиям, но за дополнительную плату меня можно уговорить ;)


Также, было сделано небольшое пояснение к исходникам:




Сделано для Семёна, Павла и портала click-mart.ru. Минск—Москва 2010.

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

Адаптация баннера — это преобразование одного размера баннера в другой, сохраняя его сюжет, стиль и остальные элементы. По-другому адаптацию можно назвать «ресайзом».

Ошибочно думать, что адаптация баннера — это просто изменение пропорций (увеличение или уменьшение) элементов баннера. Для того, чтобы получился хороший результат, который будет не хуже оригинального баннера — к адаптации нужно подойти серьёзно и основательно. При преобразовании баннера в меньший размер изображения следует пересохранить и «пошарпить», в текстах уменьшить кегель и интерлиньяж (при простом уменьшении текста получается некачественное сглаживание, отчего всё выглядит плохо; плюс, некоторые шрифты проектируются так, что в больших и маленьких кеглях существует разница в начертаниях, поэтому уменьшенный до 12 пунктов текст набранный 72 пунктами не всегда будет идентичным с оригинальным 12), и пересмотреть расположение всех элементов баннера.

Преобразование в бо́льший размер делается реже, но если делается — изображения следует обработать заново (используя исходники с более высоким разрешением), тексты увеличить, и снова преобразовать все элементы баннера.

Ресайз баннера — это практически создание нового баннера.

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

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

За адаптацию чужих баннеров я чаще не берусь, но бывают исключения.

Расскажу про одну довольно интересную адаптацию.


Была поставлена задача: преобразовать уже имеющийся баннер размера 280×200 пикселей в 560×120 пикселей.

Исходный баннер выглядел так:



Всё хорошо, но в требованиях той площадки, под которую производилась адаптация был указан максимальный вес файла — 35 кб. А исходный баннер весит аж 137 кб!

Картинки были уменьшены-пошарплены, png-картинки с прозрачностью были заменены jpeg-аналогами без прозрачности, но с имитацией оной с помощью масок (что дало увеличение производительности, и уменьшение веса).

Часть картинок была изменена. А именно, заретушированы области, которые не видны глазу.
Например, в машине было закрашено тёмным цветом колесо, т.к. поверх него всё равно накладывалась другая картинка колеса, которая анимировалась.

Выглядит это так:



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

Также такой финт был произведён с основным фоном, который был у́же.

Часть анимации была заменена на программную, что дало выигрыш в весе файла, а также плавности анимации. Для реализации анимации был использован движок TweenNano.

Часть графики была отрисована непосредственно во флеше, что дало выигрыш в весе файла.

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

Итоговый баннер:




На адаптацию ушло около шести часов.

Сделано для RedKeds, и Хонды.

Зачем оно так делает?

Первый раз в жизни отмечаю день рождения там, где прожил треть—четверть жизни.

Второй раз подряд работаю в свой день рождения.

Самая гениальная фраза услышанная мною в Москве за всю жизнь: «это парковка, или пробка?».

С завтрашнего дня буду недоступен для встреч в Москве.

Рассмотрим мир, в котором используемые человеком слова нужно было бы покупать. А также количество их использования.

Причём, стоимость на различные слова варьировалась бы точно также, как и на всё в этом мире, что можно купить: одежду, продукты, технику и т.д. Некоторые слова стоят дёшево, и найти их можно везде. Некоторые стоят дорого, и их тоже можно найти везде. Некоторые стоят копейки, но найти их очень, очень сложно. А некоторые стоят сумасшедших денег, и купить их могут единицы. Но вот же они, вот! Можешь посмотреть, купить и пользоваться — нет.

Также, в качестве дополнительной услуги, можно купить правописание покупаемого слова, и его произношение. Не везде, конечно. Кто-то купит слово «звонит» и будет говорит «зво́нит». Денег-то, поди, пожалел, произношение купить.

Также, при покупке слова можно приобрести ряд синонимов. Или же посмотреть аналогичные слова, и выбрать что-то, что больше по нраву. Хочешь сначала купить слово «подсел», думаешь уже купить, предвкушаешь, как будешь говорить всем «я тут на такую мызыку подсел...», как узнаёшь, что взамен можно купить слово «пристрастился». И начинаешь думать — стоит-то столько же, вроде бы синоним, почему не купить? Может где-то подвох?

Покупаешь. И вот ты в системе. Всё доходит до слов и словосочетаний вида «квинтэссенция», «когнитивный диссонанс», «эксгибиционизм» и «оксюморон». У тебя есть определённый набор красивых слов, ты ими пользуешься, не все они вычурные и дорогие, но подобраны хорошо, грамотно и со вкусом. И пусть их немного, но ты можешь парой-тройкой слов описать всё, что хочешь.

Или покупаешь, и думаешь: «ёба, во хуйня. Вот это, бля, я потратил столько бабла. Блядь, куда? На что, бля? На эту пидарскую поеботину?! Сука, верни мне мои деньги!!! Я вон на эти деньги могу купить дохуя других слов! Я и сам могу их все придумать, без вас, блядь! Слыш, Вика, смари, ёба! Я слово „дифирэнцыал“ купил! Чо нахуя? Ради тебя, ёба, любимой, гы! Не, ёба, нахуя тебе покупать, я ж ужэ заплатил, смари: ди-фи-рэн-цы-ал! Проста ж, ха!».

Появляются недорогие, но, казалось бы, хорошие анлимы. Рекламные плакаты в городе, ролики по телевизору, баннеры в интернете: «Безлимитное использование слов „короче“, „типа“, „это самое“ и „такой“! Только у нас, только до конца сентября! Спешите!». Аккуратненькие вывески с одним словом «аббревиатуры», куда заходит редкий ценитель.

Появляются сервисы по продаже легальной (или нет, но всё куплено, тебя никто не тронет, нибаись!) лицензии на использование и морфинг слов «хуй», «пизда», «бля». Дорого. Иногда существенно дороже других, по-настоящему хороших слов, произношению и правописанию которых нужно учиться. Дорого, но что делать — надо покупать, иначе как на меня пацаны во дворе будут смотреть? Я что, не мужик чтоли?


Появляются новые сферы бизнеса, у наций появляются свои характерные особенности.

Некоторые начинают заниматься переводом и внесением каких-то отдельно взятых слов в другие культуры. Англичане преуспевают и прививают славянам множество своих слов.

Немцы начинают заниматься тем, что складывают из уже имеющихся слов новые, получая длинные, сложные, но иногда невероятно красивые слова.

А французы и итальянцы начинают продавать качественное и красивое произношение уже имеющихся слов.

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

Китайцы не отстают — они плодят свои иероглифы в несметных количествах. И при первом взгляде они не отличаются от японских.

Американцы скупают все слова подряд. Деньги есть, а слово-то может и пригодится! Но покупать правильные произношения отказываются. Отказываются не потому, что нету денег — хотят внести свой вклад в историю и изменить произношения слов, не меняя их правописания.


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







Идея не моя.

Где-то месяца то ли два, то ли три назад мне пришла в голову идея: кнопку вызова лифта следует перенести в квартиру. Удобно — жмяк, дверь закрыл, вышел, а лифт тебя ждёт.

Что-то мне в этой идее не нравилось, и я её нигде себе не пометил.

Понял что. Не нужно кнопок — лифту нужен пульт дистанционного управления. Радио-пульт, например. Вешаешь на ключи такой брелочек: выходишь из квартиры — жмяк! — пока закрываешь двери и доходишь до лифта, он уже ждёт тебя. Подходишь к подъезду — жмяк! — пока открываешь дверь, лифт уже ждёт тебя.

Счастье и радость: как минимум сэкономленные две-три минуты каждый день.

А может даже айдентика CS5 и лучше.