x
 
Алексей Мельников
22 мая 2011

Андрей!

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

В качестве исходного материала прикладываю фотографии одной из пуговиц при дневном и искусственном освещении.



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

И всё же у нас есть задача — нарисовать пуговицу. Есть живой прототип. Тогда всё, что вам нужно сделать, это внимательно изучить изображаемый объект, что бы это ни было. Узнать про него всё. В данном случае у нас этим объектом является пуговица. Вам кажется, что пуговица проста, а на поверку оказывается, что мы знакомы с ней весьма отдалённо. Возьмите её ещё раз в руки и изучите, как будто это некий сложный витиеватый механизм. Пощупайте её, почувствуйте шероховатости и форму, покрутите со всех сторон, посмотрите на толщину, оцените отражающую способность объекта исследования. Побросайте, покатайте… Узнайте всё о ней. Почему пуговица называется пуговицей, какая у нее история. Заинтересуйтесь ей, пусть она станет вам интересна, близка и дорога.

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

Учите себя видеть. После этого, уверен, вы сами легко обнаружите, чего не хватает в нарисованном изображении.

  1. Посмотрите на тени. Они должны более «глубокие» и рисоваться с пониманием. Неправильно нарисованная тень «прилепляет» вашу пуговку к фону, лишая её толщины.
  2. Блики очень размыты и этим придают поверхности рыхлую фактуру. Если сделать их более жёсткими, поверхность сразу «заиграет отражениями».
  3. На границе пуговки, если её грань выпукла, со стороны падающей тени будет виден небольшой рефлекс от белого фона. Это очень приятно оживит иллюстрацию.
  4. Внутренним дырочкам явно не хватает фаски с соответствующими распределениями теней и бликов.
  5. И, наконец, нужно добавить на фон цветового рефлекса от пуговицы на белом фоне — он будет очень сильный. И всё это сделать утрировано ярче и контрастней, поскольку наша задача не реализм, а вкусная иконка.
  6. Это есть у вас перед глазами на фотографии. Нужно просто быть внимательным. Тут нет ничего сверхъестественного. Нужно видеть, любить и стараться :-)

    Удачи.

P. S.
Это был воскресный совет о техническом дизайне и графике. Хотите узнать всё о композиции, светотени, пикселях, ретуши и карамелизации микроволновок? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Даниэль Пузо
23 мая 2011

Андрей, если бы на видео записывали процесс рисования или хотя бы периодически скриншотили процесс — цены бы не было вашим советам.

В частности меня интересует, как вы сделали шум, показывающий шероховатую фактуру — наложили текстуру чего-то мультиплай блендингом? С кругами вроде понятно — это шейпы, а как вы рисовали блики? Создали белый круглый шейп, а потом пообглодали его ластиком? Как сделали ему размытую кайму — блюр-фильтром?

В общем, многое хотелось бы узнать, что обычно остается за кадром.

Дмитрий Кравчик
23 мая 2011

Про себя могу сказать, что слабо понимаю как рисуются (технологически) такие тени — с чёткой гранью с одной стороны и размытием с другой.


24 мая 2011

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


25 мая 2011

Понял, виноват. Вот попытался воссоздать. (Теперь буду скриншотить процесс)

Мария Верещак
14 июля 2011

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

Подскажите, пожалуйста, как добавляли нойз. Слой с нойзом монохромный в режиме наложения? Потому как на цветном фоне исходника получается ерунда. Буду благодарна, если укажете размер нойза.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 4 5 1




Недавно всплыло

Расскажите о клише и устойчивых выражениях 13 2 Защититься от случайного нажатия «Сдаться» 1 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5