Вы умеете рисовать круг?

Dec 22, 07:59 PM

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

Дело в том, что большинство специалистов в нише “задешево” делятся на два типа:

1). Креативщики. Дизайн ради идеи в ущерб технике.

2). Предприниматели. Дизайн ради денег в ущерб всему.

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

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

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

рисование круга

Круг №1. Это минимальный из возможных кругов больше одного пиксела (а точнее просто 4 пиксела “ромбиком”). Конечно, одинокую точку тоже можно назвать кругом, обманув свое зрение, но обмануть мозг было бы преступлением – все знают, что пиксель квадратный.

Круг №2. 2 через два, как график работ официанта. Все просто.

Круг №3. Пожалуй, самый аккуратный. 2 пиксела, 1 наискосок.

Круг №4. Техника 3-2-1, логично и вполне кругло.

Круг №5. Чуть больше предыдущего из-за лишнего пикселя вначале, техника 4-2-1.

Круг №6. Интуитивная схема 4-2-1-1-1, если не задумываться, все элементарно.

Круг №7. 5-3-2-1-1-1.

Если у вас штаны клёш и вы считаете “Mario” лучшей видеоигрой, можете попробовать и большие круги по аналогичной схеме. Если же 80-е для вас уже позади, предлагаю обратиться к теме антиалайзинга.

Antialiasing (anti-aliasing) – это автоматическое удаление ступенчатости изображений линий, кривых или окружностей, вызванное недостаточной разрешающей способностью экрана (словарь Lingvo).

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

Так, в случае с нашими кругами излишняя резкость и “побитость” изображения объясняется контрастом белого и черного. Суть антиалайзинга и заключается в добавлении пикселей, сглаживающих переход от одного цвета к другому, в нашем случае эти пиксели будут в градациях серого.

К счастью, большинство растровых программных пакетов облегчают работу дизайнеру встроенной функцией сглаживания. Не забывайте включать галочку “anti-alias” в Photoshop, и отвратительной геометрии удастся избежать. Но даже в этом случае не помешает ручная чистка. Главное правило – плавность тона и симметричность пикселей.

Окружность толщиной в 1px на рисунке 8.1 нарисована путем обводки круглого выделения. Можно также вырезать окружность по принципу boolean или придумать еще более сложный способ, но я бы рекомендовал использовать формы (shapes) из-за возможности редактирования.

Кстати, все способы рисования окружности отличаются результатом, если смотреть внимательно. На рисунке 8.2 круг нарисован формами и подогнан вручную. Он немного резче варианта 8.1 и именно из-за этого может стать менее симпатичным для любителя blur. Но он все-таки аккуратнее соседа и не такой “мыльный”.

Но даже он смотрится “как-то не так” и причина проста – при такой толщине линии сложно добиться идеального для глаза результата. Контраст белый-черный и… снова белый не дает и шанса на красоту. Более толстая обводка или заливка цветом при той же геометрии линий будут казаться более гладкими именно из-за особенностей восприятия.

Такие вот круги… то есть пироги.

Популярное: