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

2 Июнь 2011

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

Берем лист А4, сгибаем угол, как это принято у иконок, и фотографируем на телефон, на темном фоне, так потом будет проще вырезать.

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

Мой лист освещался из окна, он холодного оттенка, что не подходит — обесцветим, убираем фактуру бумаги и кладем серый градиент.

Все готово, остается добавить мелочи — тень и зажим с обозначением формата файла.

Создание иллюстрации для шапки покерного сайта

18 Май 2011

Ниже я опишу процесс создания иллюстрации для главной страницы сайта онлайн покера. Задача иллюстрации (да, даже у нее есть задача) — показать посетителю куда он попал, создать настроение и сочно показать покер.

Придумываем идею и композицию. При разработке не забываем про минимальную ширину сайта 1000 пикселей, и что он тянется на 100%. Т. е. фон нужно будет тянуть слева и справа.

Рисуем не клипартные текстуры для карт и фишек

Создаем 3д модель

У сырого рендера корректируем цвет, создаем неоднородность фона, добавляем цвета

Чтобы иллюстрация не смотрелась пустой, добавляем «мусор» в виде конфетти и огоньков. Последний штрих — добавляем блик

Дизайн сайта пивного бара

24 Январь 2011

На днях мы запустили новую версию нашего сайта. И замечательную акцию — «создадим сайт без лишних слов».

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

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

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

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

Делаем заглушку для сайта

26 Сентябрь 2010

Многие заказчики на время разработки основного сайта просят сделать так называемую заглушку.

Некоторые ставят на пустой домен картинку вроде этой. Можно еще любую картинку из этих. Иногда просто надпись «сайт в разработке». Что должна делать и на что способна заглушка, когда речь идет о нормальном сайте?

  • кратко и понятно рассказать о том, что за сайт здесь будет;
  • помочь собрать адреса эл. почты потенциальных клиентов;
  • заинтересовать пользователей и ждать открытия.

За последние две недели нам пришлось делать сразу две заглушки: для сайта он-лайн покера и химического завода. Сначала про покер.

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

А справа и слева как-будто сидят какие-то мужчины и «курят» карты (судя по мастям в дыме).

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

Название, контакты, краткое описание продукции и/или услуг компании — все это на сайте есть. Кроме того, небольшая игра с молекулами. Кликая на шарики их можно соединять. Была идея сделать это все немного интереснее, но реакция Internet Explorer версий 6-8 и FireFox на такие штуки заставила нас остановиться.

Вся анимация на страницах сделана с помощью волшебной библиотеки Raphael.js. Техническая реализация достаточно проста и описывать ее тут нет смысла.

Только, молю, не спрашивайте, почему карты в скрипте не сделаны в виде массива.

Создание иллюстрации для сайта микрорайона

25 Август 2010
Основным элементом промо-страницы выбран план района. Имеющиеся иллюстрации не подходят — будем рисовать заново, с учетом реального генплана и масштабов зданий. Из полученного от заказчика автокадовского генплана рисуем векторное изображение района, рассчитанное по ширине от 1000 до 1200 пикселей.
Переносим его в фотошоп и прорабатываем картинку: добавляем тени, текстуру травы и тротуара, оживляем крыши. Дорисовываем забытые гаражи.
Процесс
Сам план должен умещаться на минимальной ширине 1000 пикселей, но при растягивании окна не должен казаться пустым. Поэтому создаем иллюстрацию по ширине на 1200 пикселей. Добавляем деревья, рассчитав место для текста и логотипа. Остается расставить подписи и активные элементы.