Артдир
Илья Кукушкин
24 марта 2015
Здравствуйте.
Вы советуете рисовать пиктограммы в Фотошопе. Однако, когда выполняешь обводку контура, она получается «мягкой».
Скажите, как рисовать нормальные иконки. Покажите хотя бы на примере одной. До этого все пиктограммы рисовал в векторном редакторе.
Илья!
Я советую рисовать пиктограммы вектором в фотошопе в том случае, когда пиктограмма будет использоваться на экране. Если сразу делать растр, то при масштабировании линии размоются и перестанут попадать в пиксели. А рисовать ещё где-то нет смысла: всё равно потом импортировать в макет в фотошопе.
Начнём с того, что проблема «мягкой» обводки решается настройками контура:
Теперь можно нарисовать что-нибудь. Мне как раз нужна иконка газеты.
Сначала я изучаю изображаемый объект. Пропорции подсказывает гугл:
Особенности подмечаю на том, что есть под рукой:
Возьму для примера первую полосу из архива Нью Йорк Таймс. Сразу подгоняю размер под другие иконки. Тут важен визуальный вес, а не математические параметры:
Чтобы узловые точки прилипали к пиксельной сетке, нужно поставить галочку вот тут:
cmd+k
Для линий объектов, повёрнутых на угол не кратный 45°, прилипание к сетке может оказаться вредным, поэтому клавиши [cmd] и [k] могут быстро затереться :-)
Уже видно, что газета получается «тяжелей» остальных объектов. Немного уменьшаю:
При масштабировании узловые точки вылезают из пиксельной сетки. Вставляю их назад там, где нужно.
Добавляю деталей. Проверяю, укладываются ли 6 колонок так, чтобы поля газеты были равными (У меня случайно получилось, что - да. Иначе пришлось бы сделать газету на пиксель шире.)
Вот тут линии противно склеиваются, образуя тёмное пятно. При увеличении этого не видно, а на предыдущем скриншоте сразу бросается в глаза:
Теперь название. В моих иконках все линии одной толщины, поэтому я не могу себе позволить вместо заголовка нарисовать толстую линию. Быстро набрасываю буквы, детали игнорирую:
Уменьшаю до нужного размера и каждую букву загоняю в пиксельную сетку:
Наполняю газету контентом:
Почти готово. Меня смущает количество чернил. Иконка получилась сильно плотней своих соседей. Разряжаю строки, убираю Титаник.
Газета снизу заворачивается. Чтобы усилить этот эффект нужна тень. Но тень использовать нельзя, так что я придумываю хитрый ход - ставлю нижние строки плотнее к краю газеты, чтобы около края плотность линий увеличивалась, создавая кажущееся затемнение.
Честно говоря, мне даже просто вот так нравится:
Я ещё подумаю какой вариант выбрать. На сегодня всё.
Присылайте ваши дизайны на artdir@brakodelnya.ru
Публикации нестабильно выходят по понедельникам на brakodelnya.ru/artdir