Памятка Первый кирдык

техдизайнера в натуре

техдизайнера
По Бахе

1. Зубчатость линии
Самым распространенным деффектом качества экранной графики, пожалуй,
можно назвать эффект, так называемой, «Лесенки» или «Битой линии».

На картинке выделен один из фрагментов, с заметной зубчатостью.

Далее на нем будет показан, один из вариантов избавления
от подобного артефакта.

Увеличиваем нужный фрагмент. Выбираем инструмент «Линия», говорим ей 20-30% прозрачности.

Остальные настройки устанавливаем, как показано ниже, на иллюстрации.


Выбираем для линии цвет фона и кладем ее по границе зубчатости. Затем берем цвет объекта
и производим аналогичную операцию. Продолжаем процесс пока граница выраженная в линии
не примет мягкие очертания.

В результате, вот так выглядит граница после выравнивания:

На выделенном участке показана смягченная линия

границы объекта и фона.

На сплеше обозначены основные участки требующие подобной доработки.


2. Обтравка объектов.
Часто встречаются весьма «замыленные» контуры объектов, без видимых
на то причин. Иллюстрация с пылесосом яркое тому доказательство.

Рассмотрим выделенный фрагмент сплеша.

Инструментом «лассо» или «перо» аккуратно обводим щетку по контуру,

не захватвая полупрозрачные пограничные пиксели.


Создаем выделение.

Удаляем выделенный сегмент.

Было:

Стало:

В результате получаем
ровный, четкий,
аккуратный
контур.


3. Нарушения цельности, композиция, контраст.

Цветовое и светотональное несоответствие элементов

композиции друг другу. В данном случае—объекта и фона.

Первоочередное: Нарушена форма корпуса печки, по причине неправельно

распределенной светотени. Отсутствует светотональная перспек-
тива. Микроволновка имеет чужеродные фону синие оттенки.

Скорректированное изображение.

Дополнительно добавлена тень, усиливающая цельность.

Изображение смотрится плоским и композиционно скучным.

Изображение переконтращено в светлых елементах.

Общая светотень невыразительна.


Пытаемся нивелировать огрехи простыми средствами. Добавили падающую тень для при-
дания протяженности магнитолы в пространстве в целом ассиметричности иллюстрации.
Общей светотенью усилили обьемность объекта.

Правильность тени, для иллюстрирования принципов не важна.

Меняя яркость фона, мы можем влиять на контрастность композиции в целом и ее глубину.

Не забываем о коррекции цвета объекта при изменении фона. Нужно пробовать разные
варианы подложки и ракурсов объекта вычленяя оптимальное решение. Ниже один
из вариантов.

Иллюстрация стала менее контрастной и более глубокой.

Как вариант, изменна ориентация магнитолы
на более динамичную.

Еще один представитель с которым можно поработать плотнее.

Контраст мертв. Железно держим статус кво бойца в белом маск-

халате на снегу. Положение на гране фола. Устройство практически
сливается с фоном. Присутствует также некоторое цветовое несоот-
ветствие объекта и бэкграунда.


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

Усиливаем контраст и глубину изменением цвета и яркости подложки.

Чего-то не хватает, объект отваливается от фона.

Вспоминаем о светотональной перспективе и цветовых рефлексах от окружения.

Убираем синеву с пластмассы, адаптируем свечение кнопки.


4. Уважение к гайдам

По гайдам иллюстрация должна находиться строго слева,

текст справа с соответствующими отступами.

Неуважение, подчеркнутое плохой

композиционной компоновкой пространства.

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

APPLICATION GUIDE
KEY VISUAL 28

02. identity element

color гайдлайнов Самсунга на редизайн сплешей.

Фрагменты
| type index page

Apply focused color usage based on blue black for Business Product group.

Сплеши для групп продуктов Сплеши для группы продуктов


5. Перспектива

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

Параллельные линии при построении их продолже-

ния не имеют общей точки схода. Отсюда ощущение
вывернутости иллюстрации.


Аналогичные проблемы. И в добавлении
к этому—несоответствие упаковки светлому фону.

Исправленный вариант.

Обработка продуктовой графики:

Форма Нельзя придумывать детали, изменять форму, стирать или добавлять над-
писи. Важно проанализировать объект на основе фотографий во всевозможных
ракурсах (да, если понадобиться найти в интернете,посоветоваться с арт-дирек-
тором, сходить к промдизайнерам и отвлечь Тимурыча:)) ), после того
как форма вам окончательна ясна, можно поправлять.

Задача Выявить и подчеркнуть форму и зачастую материал (металл, стекло, пластик,

матовость, глянцевость), по средством светотени, бликов, отражений и т.п.
Возможно придется привести освещение к одному знаменателю.
Сделать цветокоррекцию (Серый должен быть серым, а не зеленым,
желтым и т.п.). Обеспечить мягкость и гладкость линий, четкость надписей.
Все это в целом даст законченность, аккуратность, правдивость и будет прино-
сить эстетическое удовольствие от лицезрения иллюстрации.

Правдивость Если при уменьшении объекта некоторые детали смешались в кашу или двойная
и обобщение обводка стала одинарной битой линией и т. п. То при обработке допускается
и даже требуется обобщение формы предмета. Из каши нужно сделать опять
кнопочки, пусть это будут 3 точки--кнопки, 6 точек--тени, важно чтобы при
рассматривании отрисованного предмета в нужном размере его форма мак-
симально возможно соответствовала оригиналу. При приближении объекта до
пиксельного уровня вы понимаете, что это иллюзия порожденная свойством
глаза и на самом деле там не кнопки а черточки и точки.

10
 Рассмотрим обычный случай.

Все параллельные линии

гуляют, хотя должны иметь
общую точку схода.

Нет перспективного схождения

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

Плеер выглядит вывернутым,

поскольку отсутствует пер-
спективное сокращение пере-
дней панели.

Обратное перспективное
сокращение

11
 Логично было бы предположить,
что кнопки и рычажок нахо-
дятся на одной оси.

Опять возникает вопрос фор-

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

Несогласованность светотени
с белым фоном, в данном случае
нужно несколько выбелить ука-
занные участки.

12
 Можно смело добавить рез-
кости кнопочкам, надписям
и переднему плану. Логотип
в нижнем правом углу дисплея
нужно привести к удобовари-
мому виду.

Нужно исправить «битые»

линии, образовавшиеся в резуль-
тате масштабирования.

По композиции кадрирование
тинейджера неудачно.

Никакого намека не прозрач-

ное отражающее покрытие
экрана. Изображение парня
просто вдавлено в плеер.

Слишком густая тень для

освещенного объекта на белом
фоне.

13
 Исправляем искажение
книги вкладываемой в обложку.

При взгляде на картинку созда- Происходит это потому, что

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

Очередное вывернутое изображение предмета.

Опять обратная перспектива во всей красе. Дальняя

от нас половина фронтальной плоскости плеера
больше передней. Сам объект смотрится вытянутым
по вертикали. Исправляем.

14
6. Обработка фотографий людей
Как и везде, важно не искажать действительности. При работе с цветными фотографияями нужно стре-
миться к тому, чтобы все снимки в рамках определенного проекта были привелены к одому знаменателю
по цветовой гамме, яркости, контрасту и остальным параметрам.
Особенно это касается цвета кожи. Ее оттенок напрямую зависит от контекста в котором выполнена иллюс-
тация (ночной клуб и неоновый свет, на пляже, в свете камина, зимой ...). Если вы скажем обрабатываете
фотографию сотрудника на некий ресурс, ваша работа должна вписываться в ряд остальной галереи сним-
ков на сайте.

Исходное изображение с зелеонватым отливом

и обработанная фотография в контексте
галереи снимков МТС.

Эволюция портрета от исходника до публикации.

На втором снимке видно, что дизайнер завалил
оттенки в зеленый.

15
 В данном случае были доработаны волосы,
уделен шум с одежды и фона

Убираем остатки приятеля, уменьшаем

дробность, поправляем рубашку

16
7. Светотень
Светотень создает саму форму предметов, рисует их объем и настроение.
Падающая тень в большинстве случаев используется для подчеркивания плоскости под объектом и его ори-
ентации в пространстве. Часто также ее используют в композиционных целях, играя на пятнах.

Взаимосвязь, освещения, падающей,

собственных теней и рефлексов.

Банка мятая получилась и освешение на ободках

не сответствует освещению. Все заблюренно.

17
Поправленна обводка, падающая
и собственная тень

18
 Отсутствие рефлексов от фона и правильной свето-
тени сделало шарик плоским. На втором изображении
широкими мазками добовляем объема и зеркальности
золотогой фольге.

Быстрое избавление от паразитных отражений (фотографа, студии, еще одного шарика).

Свет поставлен очень симметрично и скучно. Немного искажаем отражение софтбокса.
Если иллюстрация готовится к уменьшению такое качество вполне подойдет.

Пример некоррек-
тного монтажа.
Девочка осве-
щена спереди
восходящим сзади
солнцем:)

19
У всех обектов разное направление освещения. Даже у скрипки и у розы. Струны и тень
от часов неестественны. Часы слишком выбелены, нехватает контраста. На их корпусе
в тени присутствует блик от источника света, влияние которого никак не отражается
на падающей тени. У фотографии не хватает боковой тени, которую дает толщина
карточки. Бабочка прилипла носом и пятой точкой к полу. Отсутствует теплопередача
света.

Можно относиться трепетно

даже к незначительным элемен-
там. Как например быстроиг-
рающие анонсы нового номера
журнала.

Вживление бокала в окружающий фон, добавлением

рефлексов. Придание объема светотенью. Охлаждение
пива до появления конденсата.

20
8. Типографика

Вот меморандум, который я рассылал всем только что устроившимся

на работу дизайнерам:
Когда будешь набирать текст в фотошопе, не только беспрекословно
соблюдай принципы, изложенные Ромой Воронежским в статье
по адресу http://www.narisoval.ru/faq/ex06-001.html (насчет кернинга),
но и подбирай, пожалуйста, кегль таким образом, чтобы горизонталь-
ные штрихи тоже не расплывались. Для большинства шрифтов такие
значения кегля почему-то (по недосмотру разработчиков шрифта,
очевидно) не являются целыми числами. В приложенном файле я попы-
Смарт о поплывшем тексте.
тался продемонстрировать разницу на примере шрифта Helios (произ-
водства TypeMarket, позже купленного ParaType), метод антиальясинга
Crisp. Иногда нужно также отредактировать baseline shift.

Кроме того, есть такая хитрость: если во время набора текста выбран режим сглаживания Smooth, а в фото-
шопе выключен Snap, то, если, не переключаясь с инструмента Type, нажить и держать Command, то можно
подвигать текст туда-сюда, и при большом увеличении можно заметить, что буквы растеризуются по-раз-
ному: расплываются разные штрихи. Можно выбрать самый чистенький вариант, и потом уже настраивать
кернинг.

Итак, порядок действий таков:

1: Подбор кегля
2 (опционально): шевеление текста в режиме Smooth
3: Подбор кернинга для каждой пары букв

Для косых надписей: сначала наклоняешь, потом добиваешься четкости

Для вертикальных: сначала добиваешься четкости, потом растеризуешь, потом Edit -> Transform -> Rotate 90
CW или CCW (Внимание! не используй Free Transform - он иногда дополнительно блурит пикселы даже при
углах, кратных 90!)

Особенно это относится к логотипам.

21