Вы находитесь на странице: 1из 214

PIXEL

PERFECT
PRECISION
Version 3
Produced by ustwo
@pppustwo
@gyppsy
ОГЛАВЛЕНИЕ
Интро 1 Photoshop & ustwo 110

Спасибо 2 Цветовые профили 111

Основы 3 Пиксельная точность 116

Принципы Pixel Perfect 4 Техники 135

Детали Pixel Perfect 19 Организация 156

Доступность 34 Экспорт 168

Дизайн и разработка 86 Советы 178

Illustrator 198

Аппендикс 210

Pixel Perfect Precision Contents


ИНТРО
Руководству Pixel Perfect Precision уже четыре года. По
прошествии этого времени мы переключили внимание с
пикселей как таковых и решили больше рассказать о том как мы
работаем — новая глава о Дизайне и Разработке как раз об
этом. Хотя наше портфолио невероятно разнообразно: от
приложений мобильного банкинга до пазлов, ломающих законы
физики, мы всегда применяем одинаковые принципы дизайна о
которых мы и поговорим. Наслаждайтесь!

Фото продукта: Monument Valley

Pixel Perfect Precision 1


СПАСИБО
Есть несколько людей, которые заслуживают упоминания. В
первую очередь Широ, за то что все эти годы показывал мне
истинное значение точности пикселя. Все дизайнеры которые
ежедневно делились знаниями — вы отличный источник как
вдохновления так и информациии. Больше всего я хочу
поблагодарить всех моих друзей в ustwo за их бесконечную
поддержку в создании этого руководства.

Фото продукта: Rando

Pixel Perfect Precision 2


ОСНОВЫ
Первый раздел рассказывает о принципах и темах которые
касаются digital дизайна и его важных инструментах. Пригодные
как для профессионалов так и новичков в области, эти советы —
своеобразное руководство по быстрому пониманию процессов
и мыслей которые мы используем в ustwo.

Pixel Perfect Precision 3


ПРИНЦИПЫ
PIXEL PERFECT
Пользователи — главный объект вашего им подходит. Flat интерфейс основанный на
Юзеры внимания. Определите что им нужно, правилах типографики и сетки подойдет
используйте это в дизайне, а затем аудтории помоложе, а более дружелюбные
сформируйте ваш продукт так, чтобы сквеморфические элементы подойдут для
пользователи могли выполнить действие возрастных юзеров которые не на столько
как можно быстрее. Не забывайте о том что продвинуты.

Pixel Perfect Precision 5


Окружение — это не только платформа для всегда используется в помещении и
Окружение который вы делаете дизайн, но также управляется удалённо. Это подразумевает
условия использования и место в котором другие подходы к размеру текста, цвету и
он будет работать. К примеру, мобильный контрастности интерфейса.
телефон существенно отличается от
телевизора — на него смотрят издалека, он

Pixel Perfect Precision 6


Случайный
сдавленный текст Заголовок
Объект Описание которое выходит за
границы
Объект Описание которое выходит за Объект
границы Описание
Объект Описание которое выходит за
границы
Объект Описание которое выходит за
границы Объект
Объект Описание которое выходит за
границы Описание
Объект Описание которое выходит за
границы
Объект Описание которое выходит за
границы
Объект
Объект Описание которое выходит за Описание
границы
Объект Описание которое выходит за
границы
Объект Описание которое выходит за Объект
границы
Описание
Объект Описание которое выходит за
границы

Плохо Хорошо

Доступноcть касается всех, а не только более доступной для дальтоников и людей


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

Pixel Perfect Precision 7


Длинный загол... Длинный загол...

Объект Длинный очень


Описание И тут тоже очень

Объект A
Описание B

Объект Средний
Описание ? Как бы OK

Объект Einen wirklich la…


Описание Das gleiche auch…

Лучший Худший

Этот принцип связан с доступностью: проверять дизайн с более длинным текстом,


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

Pixel Perfect Precision 8


Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ulamco laboris nisi
ut aliquip ex ea commodo
consequat. Duis aute irure
dolor in reprehenderit in
voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
Excepteur sint occaecat
cupidatat non proident, sunt in

Под возможностью мы подразумеваем потянуть. Все это можно использовать в


Возможности способность объекта выражать свои digital дизайне, чтобы заставить
функции через органы чувств: кнопка своей пользователей взаимодействовать с
выпуклостью подразумевает нажатие, объектами. Выпуклые кнопки, текст который
дверная ручка, благодаря форме и заходит за границы страницы (намекая на
расположению намекает на то, что ее можно скрол) — это демонстрация возможностей.

Pixel Perfect Precision 9


Обработка Привет

Требования Привет, Мэтт!

Мы определили что вы Так как ты запустил


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

Начало Хорошо

Плохо Хорошо

То что вы говорите в дизайне также важно машиной, создается эмоциональная связь,


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

Pixel Perfect Precision 10


! !
i i

Плохо Хорошо

У некоторых цветов и форм есть Смешивая их, мы создаем смешанное


Форма и цвет устоявшиеся ассоциации в digital дизайне. сообщение. Так же желтый треугольник
Не забывайте про это, так как их обычно ассоциируется с предупреждением,
несоблюдение может сбить юзера с толку. а синий круг с информацией.
Зеленые галочки ассоциируются с хорошим,
а красный цвет и крестики — с плохим.

Pixel Perfect Precision 11


Заголовок Заголовок

Объект Объект
Описание Описание

Объект Объект
Описание Описание

Объект Объект
Описание Описание

Объект Объект
Описание Описание

Плохо Хорошо

Разметка, цвет, типографика очень сильно помощью контрастных, больших и жирных


Визуальная влияют на визуальное восприятие и шрифтов, или наоборот, используйте менее

иерархия потребление информации. Подумайте о том,


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

Pixel Perfect Precision 12


Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud consectetur adipisicing elit,
exercitation ulamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure sed do eiusmod tempor
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. incididunt ut labore et dolore
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt magna aliqua. Ut enim ad
mollit anim id est laborum. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do minim veniam, quis nostrud
eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ulamco exercitation ulamco laboris nisi
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in ut aliquip ex ea commodo
reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint consequat. Duis aute irure
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est dolor in reprehenderit in
laborum. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod voluptate velit esse cillum
tempor incididunt ut labore.

Плохо Хорошо

В digital дизайне типографику часто нужно обращать внимание. Комфортно ли


Типографика незаслуженно обделяют вниманием. Очень читается текст при текущем размере,
важно использование хорошей достаточен ли интерлиньяж, длинна строки?
типографики, ведь большинство Не пользуйтесь стандартными настройками
информации передается в виде текста. шрифта вашей среды дизайна. Уважайте
Существуют базовые факторы на которые шрифт — он это заслужил.

Pixel Perfect Precision 13


Заголовок Заголовок

Объект Объект
Описание Описание

Объект Объект
Описание Описание

Объект Объект
Описание Описание

Объект Объект
Описание Описание

Вход Выход

С постоянным увеличением мощности функции и возможности. К примеру, если вы


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

Pixel Perfect Precision 14


Ничто не сравниться с тестом дизайна на предварительного просмотра, которые
Тестирование предназначенном устройстве. Разрешение, перенесут дизайн с компьютера прямо на
технология экрана, углы просмотра и ваш девайс, обновляясь в реальном
методы ввода могут существенно времени. Обязательно пользуйтесь ими!
отличаться от вашего компьютера. В наше
время существует множество средств для

Pixel Perfect Precision 15


Movie.avi

Набросок Фильм Демо

Объект Смотри! Нажми меня


Описание Я буду двигаться! Я работаю

Объект Статика Неактивно


Описание А я не двигаюсь Ничего не делаю

Объект Статика Неактивно


Описание А я не двигаюсь Ничего не делаю

Объект Статика Неактивно


Описание А я не двигаюсь Ничего не делаю

Тестирование очень тесно связано с в нативной среде разработки. Все зависит


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

Pixel Perfect Precision 16


Project

Design

Screen.psd

Assets

Rectangle.png

Square Blue.png

Square Green.png

Square Orange.png

Square Pink.png

Один в поле не воин, и в большинстве другим дизайнерам возможность сразу


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

Pixel Perfect Precision 17


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

перерыв Это полезно для здоровья и позволяет


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

Pixel Perfect Precision 18


ДЕТАЛИ PIXEL
PERFECT
Плохо Хорошо

Прямые углы должны быть без


Острые грани полупикселей: резкими и никакого
размытия.

Pixel Perfect Precision 20


y

x x

Плохо Хорошо

Как только вы научитесь делать все резким,


Выравнивание следующим шагом на пути к pixel perfect

и расстояния будет уверенность в том что все расстояния


и выравнивания верны.

Pixel Perfect Precision 21


Выравнивание объектов на всех макетах может сетка, которая определит структуру
Связность очень важно. Расположение на всех макетах.
повторяющихся заголовков, футера, кнопки
возврата должно быть идентичным, не
должно быть «прыжков». Помочь в этом

Pixel Perfect Precision 22



H

300° 60°

Hue 352 352 352 352

Saturation 95 22 45 95

240° 120° Brightness 90 98 95 45

Red 230 249 242 116


180°
S
Green 12 194 133 6
0% 100%
Blue 41 201 148 20
B

0% 100%

HSB навсегда! Попробуйте использовать яркость (B) меняются. Посмотрите насколько


Цветовая модель цветовую модель HSB, и вы сразу увидите цифры в HSB более информативны по
насколько это эффективный вариант для сравнению с RGB.
создания оттенков базового цвета. В
данном примере значение оттенка (H)
остается неизменным, а насыщенность (S) и

Pixel Perfect Precision 23


Цветовой профиль Да Нет

Код

Плохо Хорошо

Управление цветом играет большую роль в исходные цвета. Может возникнуть


Управление полиграфии. В digital оно чаще создает несоответствие. Лучше проигнорировать эту

цветом проблемы, чем решает их. В процессе


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

Pixel Perfect Precision 24


Åy WWW
Макс. Высота Макс. Ширина

Эти два метода помогут справится с прописных W — если они поместятся, то и


Высота и ширина динамическим контентом. Чтобы узнать другие фразы тоже.

текста максимальную высоту используйте Åy


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

Pixel Perfect Precision 25


Settings
Настройки
Configurações
Если вы работает над продуктом, который переводом слова Settings, длина
Длина текста будет использоваться по всему миру, то увеличивается до 75%.
обращайте внимание на длину контента на
других языках. Пример показывает нам, что
происходит с русским и португальским

Pixel Perfect Precision 26


Align Text Align Text Align Text

Align Text Align Text Align Text

ABC123 ABC123 ABC123

Заглавная и подстрочный х-высота Заглавная и x-высота

Вверху показаны три метода вертикального только вы выбрали правило следуйте ему в
Выравнивание выравнивания текста на кнопках. Какой интерфейсе — последовательность решает

текста на кнопках метод лучше — зависит от гарнитуры


шрифта (соотношение высоты заглавной
все.

буквы к x-высоте может меняться) и


регистра, который вы используете. Как

Pixel Perfect Precision 27


Align Text Align Text

Align Text Align Text

Плохо Хорошо

Для вертикального выравнивания текста с в зоне x-высоты находится ниже чем


Выравнивание объектом лучше использовать x-высоту, чем квадрат. Исключением будет текст в

текста с объектом высоту заглавной буквы, так как это


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

Pixel Perfect Precision 28


Активен

Выбран

Отключен

Интерактивные элементы имеют больше на потом, так вы будете уверены, что все
Состояния чем одно состояние, которое уже показано смотрится хорошо и работает

объекта у вас в наброске. Элементы могут меняться


в зависимости от платформы и метода
взаимосвязанно.

ввода, в любом случае делайте их сразу во


время создания дизайна. Не оставляйте это

Pixel Perfect Precision 29


Кнопка Кнопка Кнопка

Внешний = Внутренний Масшатибрование Внешний = Внутренний +


ширина границы

Границы и радиус
Компонентам интерфейса зачастую нужны первоначального шейпа по размеру,
границы. Прямые углы сделать просто, но добавление границы и исходного

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


углов при помощи внутренней обводки?
внутреннего радиуса одновременно.
Последний вариант является лучшим так как
Есть варианты: соответствие внутреннего и не утолщает очертание в углах, в отличие от
внешнего радиуса, масштабирование других методов.

Pixel Perfect Precision 30


Кнопка Кнопка

Внешний = Внутренний − Filleted


Ширина бордера

Границы и радиус
Если вы используете последний вариант с радиуса «назад». Хоть это и математически
предыдущей страницы, но начали с неправильно но выглядит лучше. В

закругления углов внешнего радиуса, в конечном итоге у вас


получится шейп, углы которого будут
инженерии этот процесс известен как
скругление внутренней или внешней части

Filleting прямыми. В таких сиутациях дизайна. Посмотрите статью «In search of


рассматривается добавление небольшого perfect radius» от RA Design.

Pixel Perfect Precision 31


100%
86.6%

100% 100%

Плохо Хорошо

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


Равносторонние треугольники, которые по-умолчанию не 86.6% от текущей высоты.

треугольники являются равносторонними. Такие


треугольники имеют равную длинну по осям
x и у. Чтобы быстро сконвертировать такой

Pixel Perfect Precision 32


Проект Проект

Screen_1.psd Архив

Screen_2.psd Screen_140401_r01.psd

Screen_FINAL.psd Screen_140402_r01.psd

Screen_FINAL_FINAL.psd Screen_140402_r02.psd

Screen_FINAL_FINAL_2.psd Screen_140402_r03.psd

Screen_FINAL_FINAL_3.psd Screen_140403_r01.psd

Screen_Latest_1.psd Screen_140403_r02.psd

Screen_Latest_2.psd Screen.psd

Плохо Хорошо

Хоть сейчас и существует множество Screen.psd хранится в корне рабочей папки.


Контроль версий приложений по контролю версий для В начале дня, или при дублировании файла,
дизайнеров, чаще всего мы занимаемся старая версия копируется в папку Архив, а
этим самостоятельно. На это уходит много файл получает имя в формате YYMMDD с
времени, но есть система позволяющая номером версии. Чистота!
упростить процесс. Самый последний файл

Pixel Perfect Precision 33


ДОСТУПНОСТЬ
“ Если я сделал
дизайн доступным, не
будет ли он уродлив?

Доступность это не компромисс, если вы с самого начала встраиваете


Доступность подстроенный под людей с ограниченными доступность в свой дизайн-процесс, ее
возможностям, а хороший, общедоступный реализация не займет много времени.
дизайн. Для этого не нужно жертвовать
привлекательностью или тратить время и
деньги. Как и принцип pixel perfect precision:

Pixel Perfect Precision 35


Примерно 10% населения нашей планеты чувства. Не полагайтесь на одно чувство в
Виды недостатков имеет различные формы инвалидности. Это своих приложениях, предоставляйте
существенная часть потенциальных несколько форм взаимодействия и
пользователей. На digital проекты влияют: коммуникации, к примеру включайте
зрение, слух, осязание и познание, т.е. функцию text-to-speech для юзеров у
способность обрабатывать остальные 3 которых проблемы со зрением.

Pixel Perfect Precision 36


Слишком длинный
заголовок для Заголовок Заголовок
Объект Описание которое выходи за гра
Объект Объект
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
Описание Описание
incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud
exercitation ulamco laboris. Объект Lorem ipsum dolor sit amet,
Объект Описание которое выходи за гра
Описание consectetur adipisicing elit,

Lorem ipsum dolor sit amet, consectetur


sed do eiusmod tempor
adipisicing elit, sed do eiusmod tempor Объект incididunt ut labore et
incididunt ut labore et dolore magna aliqua. Ut
Описание dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud
exercitation ulamco laboris. enim ad minim veniam, quis
Объект Описание которое выходи за гра Объект nostrud exercitation ulamco
Описание laboris. nisi ut aliquip ex ea
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor

Плохо Хорошо

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

Pixel Perfect Precision 37


OS App App

Заголовок Объект Объект


Подзаголовок Описание Описание

Lorem ipsum dolor sit amet, Объект Lorem ipsum dolor sit amet,
consectetur adipisicing elit, Описание consectetur adipisicing elit,
sed do eiusmod tempor sed do eiusmod tempor
incididunt ut labore et Объект incididunt ut labore et
dolore magna aliqua. Ut Описание dolore magna aliqua. Ut
enim ad minim veniam, quis enim ad minim veniam, quis
nostrud exercitation ulamco Объект nostrud exercitation ulamco
Описание

Дизайн требует постоянства на нескольких поведение стандартных элементов среды


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

Pixel Perfect Precision 38


Заголовок Заголовок Заголовок

Объект Объект Объект


Описание Описание
Результаты поиска

Объект Lorem ipsum dolor sit amet, Объект


Описание consectetur adipisicing elit, Описание

sed do eiusmod tempor


Объект incididunt ut labore et Объект
Описание dolore magna aliqua. Ut Описание

enim ad minim veniam, quis


Объект nostrud exercitation ulamco Объект
Описание Описание

Как мы уже говорили на предыдущей интерфейса: если кнопка выполняет


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

Pixel Perfect Precision 39


Заголовок Заголовок

Lorem ipsum dolor sit amet, Какая-то важная


consectetur adipisicing elit,
i информация

sed do eiusmod tempor


incididunt ut labore et Lorem ipsum dolor sit amet,
dolore magna aliqua. Ut consectetur adipisicing elit,
enim ad minim veniam, quis sed do eiusmod tempor
nostrud exercitation ulamco incididunt ut labore et
laboris nisi ut aliquip ex ea dolore magna aliqua. Ut
commodo consequat. enim ad minim veniam, quis
nostrud exercitation ulamco

Какая-то важная
i информация

Плохо Хорошо


Навигация
При работе над внешним видом страницы
задумывайтесь о целях и потребностях

Структура юзера. Уже на основе этой информации


располагайте контент, выделяя важные

контента части.

Pixel Perfect Precision 40


Привет! …потом на …и наконец- Привет!
Нажми на
ссылку ниже
эту ссылку… то на эту. i Нажми на
ссылку внизу
i
для инфо... для инфо…
Наконец-то Намного
Инфо Инфо Инфо мы здесь Инфо проще!

Плохо Хорошо


Навигация
Мы не можем сказать что все шаги на
одном экране — хорошая идея, но и не стоит

Меньше шагов забывать о том, что большое количество


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

Pixel Perfect Precision 41


Заголовок
Объект
Описание
Объект
Описание

Объект
Описание Объект
Описание

Объект
Объект
Описание
Описание

Объект Объект
Описание Описание

Плохо Хорошо


Навигация
Не забывайте про заголовки страниц.
Пользователь будет знать где находиться и

Заголовки воспринимать информацию в правильном


контексте.

Pixel Perfect Precision 42


Заголовок Заголовок

Объект Объект
Описание Описание

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipisicing elit, consectetur adipisicing elit,
sed do eiusmod tempor sed do eiusmod tempor
incididunt ut labore et incididunt ut labore et
dolore magna aliqua. Ut dolore magna aliqua. Ut
enim ad minim veniam, quis enim ad minim veniam, quis
nostrud exercitation ulamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis
aute irure dolor in.
reprehenderit in voluptate

Плохо Хорошо


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

Соответствующий вставляться с умом. Намного проще


проскролить страницу, чем перейти по
скрол.

размер страницы ссылке. Это также уменьшает количество


запросов, что важно для юзеров мобильных

Pixel Perfect Precision 43


Заголовок Заголовок

Объект Объект
Описание Описание

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do consectetur adipisicing elit,
eiusmod tempor incididunt ut labore et sed do eiusmod tempor
dolore magna aliqua. Ut enim ad minim incididunt ut labore et
veniam, quis nostrud exercitation dolore magna aliqua. Ut
ulamco laboris nisi ut aliquip ex ea enim ad minim veniam, quis
commodo. consequat. Duis aute irure nostrud exercitation ulamco
dolor in reprehenderit in voluptate velit laboris nisi ut aliquip ex ea
esse cillum dolore eu fugiat nulla commodo consequat. Duis
pariatur. Excepteur sint occaecat aute irure dolor in.

Плохо Хорошо

Убедитесь в том что скролл работает только


Навигация в одном направлении — так проще и

Одна ось физически и сознательно. Юзерам не нужно


будет прыгать по странице, пытаясь понять

прокрутки что они видели, а что нет.

Pixel Perfect Precision 44


Pink 1. Pink
Orange 2. Orange
Green 3. Green
Blue 4. Blue

Плохо Хорошо


Навигация
Если у вас в списке больше 3-4 пунктов,
лучше использовать нумерованный список

Нумерованые вместо маркированного.

списки
Pixel Perfect Precision 45
Действие Действие

“ Это кнопка
которая запускает
действие. Нажав ее
“ На следующий
экран

вы попадете на
следующий экран.

Плохо Хорошо


Навигация
Создание описаний к text-to-speech
функциям это отдельный вид искусства.

Обозначение Делайте их доступными чтобы пользователи


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

Pixel Perfect Precision 46


Имя

Иван Иван

Введите свой email Email

Введите здесь

“ Иван. Введите свой


email.
“ Имя Иван. Email
Введите здесь.

Плохо Хорошо

Вставляйте описание над инпутом, а не в


Навигация него. При последнем варианте чтение

Описание над контента экрана попросту выдаст


безсмыслицу — просто прочитает

инпутами введенное значение, а не название поля.

Pixel Perfect Precision 47


7mm

7mm

Плохо Хорошо

При создание дизайнов для touch-устройств, миллиметра между элементами, чтобы


Взаимодействие всегда задумывайтесь об удобстве работы избежать случайных нажатий. Если вы

Тач цели пальцами. Мы всегда делаем наши дизайны


с минимальной тач-зоной в 7мм х 7мм, что
делаете элементы для большого пальца,
делайте их шире 25 мм, что примерно равно
примерно составляет площадь контакта ширине пальца взрослого человека.
пальца с экраном. Мы также оставляем 2

Pixel Perfect Precision 48


Действие Действие

Плохо Хорошо


Взаимодействие
Как правило, в приложениях кнопки
ассоциируются с действием, поэтому менять

Кнопки и их на гиперссылки не стоит — это собъет


юзера с толку.

гиперссылки
Pixel Perfect Precision 49
Это не Это не
ссылка ссылка

Плохо Хорошо

Говоря о гиперссылках: не подчеркивайте


Взаимодействие текст который не является ссылкой. Как мы

Кнопки и уже говорили — это сбивает с толку. Юзер


может запутаться, когда нажмет на элемент

гиперссылки и ничего не произойдет.

Pixel Perfect Precision 50


Удалить файлы Удалить файлы

Файл 1 Файл 1

Файл 2 Файл 2
Вы не сможете отменить
действие, вы точно
Файл 3 Файл
хотите 3
удалить файлы?

Поставьте галочку и File 4


нажмите кнопку Удалить. Да Нет

Да, я хочу удалить их Файл 5

Удалить Удалить


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

ошибок дизайна. Размещение полезных элементов


вначале, скрытие или отделение элементов
отказоуйстойчивости. Старайтесь сделать
так, чтобы юзеры задумались о своих

Дизайн которые несут риск — все это помогает.


Хорошей практикой является
действиях в важных ситуациях. Не пускайте
их в путешествие на автопилоте.

Pixel Perfect Precision 51


Имя Имя

Иван Иван

Телефон Телефон

01234 56789 01234 56789 !


Неверный номер

Отправить Отправить

Плохо Хорошо

Из за малых размеров мобильных устройств


Предотвращение процесс ввода информации довольно не

ошибок прост, поэтому удобно и правильно сразу


показывать правильность введенных

Проверка данных данных.

Pixel Perfect Precision 52


Цвет

Выберите цвет

Цвет Розовый

Введите цвет Оранжевый

Зеленый

Синий

Плохо Хорошо


Предотвращение
Там где это возможно предоставляйте
выбор значений вместо свободного поля

ошибок для ввода — поможет избежать ошибок


ввода.

Свободный текст
Pixel Perfect Precision 53
Выбор товара Проверка

Товар 1 Вы выбрали такие товары:


Товар 1
Товар 2 Товар 2
Товар 3
Товар 3 Товар 4
Товар 5
Товар 4 Нажмите Подтвердить, для
покупки товаров или
Товар 5 стрелку для изменения.

Купить Подтвердить

Когда ввод данных является частью


Предотвращение процесса, дайте пользователю возможность

ошибок проверить данные перед отправкой, и, если


это будет необходимо, возможность
Проверка, подтверждение, вернуться назад и исправить их.

исправление
Pixel Perfect Precision 54
Удалить файлы Корзина

Файл 1 Файл 3

Файл 2 Файл 4

Файл 3

Файл 4

Файл 5

Удалить Восстановить

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


Предотвращение контент и делать другие опасные операции, позволяет сделать шаг назад к предыдущей

ошибок позаботьтесь о предоставлении


возможности отмены этих действий. Это
версии.

Отмена действий может быть реализовано в виде корзины,


которая очищается раз в неделю, или

Pixel Perfect Precision 55


Вы хотите Вы хотите
отменить этот отменить этот
заказ? заказ?

OK Отменить Да Нет

Плохо Хорошо

Вопрос не только в том как выглядит ваш что вы хотите донести и насколько
Текст шрифт, но и то, о чем он говорит. Это эффективно вы это делаете. В плохом
равносильно по важности, а может и примере вы выберете Отменить чтобы
важнее. Непонятное описание или отменить заказ, или же это отменит отмену?
инструкции сбивают пользователя с толку.
Поэтому потратьте время и подумайте о том,

Pixel Perfect Precision 56


Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud Ut enim ad minim veniam, quis nostrud
exercitation ulamco laboris nisi ut aliquip ex exercitation ulamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure ea commodo consequat.
dolor in reprehenderit in voluptate velit esse
Duis aute irure dolor in reprehenderit in
cillum dolore eu fugiat nulla pariatur.
voluptate velit esse cillum dolore eu fugiat
Excepteur sint occaecat cupidatat non
nulla pariatur. Excepteur sint occaecat
proident, sunt in culpa qui officia deserunt
cupidatat non proident, sunt in culpa qui
mollit anim id est laborum.
officia deserunt mollit anim id est laborum.

Плохо Хорошо

Разбивайте большие блоки текста, для


Текст упрощения чтения и слежения. Используйте

Разбивайте максимум 5 строк в абзаце и вы не


ошибетесь с размером.

большие блоки
Pixel Perfect Precision 57
1. Розовый — Lorem ipsum dolor sit amet,
1. Розовый
consectetur adipiscing elit. Fusce
pellentesque vehicula elit sed tincidunt. Nam
bibendum tempus tellus ac interdum. 2.
Оранжевый — Lorem ipsum dolor sit amet, 2. Оранжевый
consectetur adipiscing elit. Sed fermentum
sodales orci. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per 3. Зеленый
inceptos himenaeos. 3. Зеленый —
Pellentesque a nibh nibh, vel dictum risus. 4.
Синий — Nunc congue vestibulum nibh non
4. Синий
sollicitudin. Donec eget metus leo.

Плохо Хорошо

У некоторых юзеров, например поможет показать информацию в


Текст дислексиков, очень плохо с компактном, порционном виде.

Текст в организационными способностями, поэтому


старайтесь разбивать длинные абзацы

диаграммы текста на списки или диаграммы, что

Pixel Perfect Precision 58


PPP
PPP (Pixel Perfect
Precision)

Плохо Хорошо


Текст
Если вы используете аббревиатуру,
обязательно добавьте расшифровку при

Аббревиатуры первом использовании. А в общем —


старайтесь их избегать: некоторым
пользователям очень сложно запомнить их
значение.

Pixel Perfect Precision 59


Pixel Perfect
Precision
Кликни здесь
Handbook
(25MB)

Плохо Хорошо


Текст
 «Кликните здесь» отличный текст ссылки, описывать свое направление и иметь смысл.
правда? Нет, не правда! Не ясно куда ведет Очень часто пользователи просматривают

Ссылочный текст эта ссылка, да и у большинства


пользователей тачскринов нет мышки,
страницу в поисках ссылок на то, что они
ищут. Не забывайте о других важных
чтобы ей «кликнуть». Ссылка — это элемент деталях, таких как размер файла, если это
навигации, а значит ее текст должен ссылка на файл.

Pixel Perfect Precision 60


Загрузка

Плохо Хорошо

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


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

Pixel Perfect Precision 61


! !

!
Алерт

Плохо Хорошо

Старайтесь предоставлять обратную связь в пользователи не поймут что уже что-то


Обратная связь нескольких формах. К примеру, полагаться произошло и требует их внимания.

Мультисенсорность исключительно на звук для


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

Pixel Perfect Precision 62


Ошибка 04 тип 11
Произошла ошибка в
библиотеке bus_1234. Что-то пошло не так!
Это повлекло крах Не волнуйтесь, нажмите
динамического «Назад» чтобы вернуться
состояния системы. на предыдущий экран.
Свяжитесь с админом на
IT этаже.
Назад

OK

Плохо Хорошо

Если что-то пошло не так — сообщите об


Обратная связь этом в понятном виде, и предоставьте

Сообщение об возможность вернуться назад.

ощибке
Pixel Perfect Precision 63
! Вы работник ustwo
Имя Имя

Иван Иван

Компания Компания

usthree usthree !
Вы работник ustwo

Плохо Хорошо

При дизайне форм располагайте сообщения


Обратная связь об ошибках рядом с соответсвующими

Близость ошибки полями, а не вдалеке от них. Это поможет


пользователям быстрее понять проблему.

Pixel Perfect Precision 64


Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing adipiscing elit. Fusce pellentesque vehicula
elit. Fusce pellentesque vehicula elit sed tincidunt.
Nam bibendum tempus tellus ac interdum. Lorem elit sed tincidunt. Nam bibendum tempus
ipsum dolor sit amet, consectetur adipiscing elit. Sed
fermentum sodales orci. Class aptent taciti sociosqu tellus ac interdum. Lorem ipsum dolor sit
ad litora torquent per conubia nostra, per inceptos
himenaeos. Pellentesque a nibh nibh, vel dictum amet, consectetur adipiscing elit. Sed
risus. Nunc congue vestibulum nibh non sollicitudin.
Donec eget metus leo, eleifend tempus enim. Lorem fermentum sodales orci.
ipsum dolor sit amet, consectetur adipiscing elit.
Fusce pellentesque vehicula elit sed tincidunt. Nam
bibendum tempus tellus ac interdum. Lorem ipsum
Class aptent taciti sociosqu ad litora torquent
dolor sit amet, consectetur adipiscing elit. Sed per conubia nostra, per inceptos himenaeos.
fermentum sodales orci. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos Pellentesque a nibh nibh, vel dictum risus.
himenaeos. Pellentesque a nibh nibh, vel dictum
risus. Nunc congue vestibulum nibh non sollicitudin. Nunc congue vestibulum nibh non
Donec eget metus leo, eleifend tempus enim.
sollicitudin. Donec eget metus leo.

Плохо Хорошо

Как говорилось в принципах Pixel Perfect, пользователей с когнитивными


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

Pixel Perfect Precision 65


Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula
elit sed tincidunt. Nam bibendum tempus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
pellentesque vehicula elit sed tincidunt. Nam bibendum tempus
tellus ac interdum. Lorem ipsum dolor sit
tellus ac interdum. Lorem ipsum dolor sit amet, consectetur amet, consectetur adipiscing elit. Sed
adipiscing elit. Sed fermentum sodales orci.
fermentum sodales orci.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Pellentesque a nibh nibh, vel dictum Class aptent taciti sociosqu ad litora torquent
risus. Nunc congue vestibulum nibh non sollicitudin. Donec eget
per conubia nostra, per inceptos himenaeos.
metus leo.
Pellentesque a nibh nibh, vel dictum risus.
Nunc congue vestibulum nibh non
sollicitudin. Donec eget metus leo.

Плохо Хорошо

Минимальный размер шрифта который написано, особенно на не особо резких


Типографика следует использовать — 12pt, хороший экранах с маленькой плотностью.

Размер шрифта размер для чтения — 16pt (1em). Сделайте


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

Pixel Perfect Precision 66


Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula
elit sed tincidunt. Nam bibendum tempus
tellus ac interdum. Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque vehicula elit sed tincidunt. Nam
bibendum tempus tellus ac interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum amet, consectetur adipiscing elit. Sed
sodales orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Pellentesque a nibh nibh, vel dictum risus. Nunc congue vestibulum nibh non sollicitudin. Donec eget metus leo, fermentum sodales orci.
eleifend tempus enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque vehicula elit sed
tincidunt. Nam bibendum tempus tellus ac interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
fermentum sodales orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent
Pellentesque a nibh nibh, vel dictum risus. Nunc congue vestibulum nibh non sollicitudin. Donec eget metus leo,
eleifend tempus enim. per conubia nostra, per inceptos himenaeos.
Pellentesque a nibh nibh, vel dictum risus.
Nunc congue vestibulum nibh non
sollicitudin. Donec eget metus leo.

Плохо Хорошо

Придерживайтесь длины строки ниже 80 длинной в 66 символов включая пробелы


Типографика символов. Если сделать строку длиннее, то (как сказано в Robert Bringhurst’s The

Длина строки пользователь будет теряться где начало и


где конец и текст будет тяжелее читать.
Elements of Typographic Style).

Хороший диапазон к которому можно


стремится — 45-75 символов, с оптимальной

Pixel Perfect Precision 67


Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula
Lorem ipsum dolor sit amet, consectetur elit sed tincidunt. Nam bibendum tempus
adipiscing elit. Fusce pellentesque vehicula
elit sed tincidunt. Nam bibendum tempus tellus ac interdum. Lorem ipsum dolor sit
tellus ac interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
amet, consectetur adipiscing elit. Sed
fermentum sodales orci. fermentum sodales orci.
Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent
Pellentesque a nibh nibh, vel dictum risus. per conubia nostra, per inceptos himenaeos.
Nunc congue vestibulum nibh non
sollicitudin. Donec eget metus leo. Pellentesque a nibh nibh, vel dictum risus.
Nunc congue vestibulum nibh non
sollicitudin. Donec eget metus leo.

Плохо Хорошо


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

Отступы свою очередь помогает с движением в


процессе чтения. Рекомендуемый отступ (он
обсуждается.

же leading) это 1.5 размера шрифта. Таким


же образом отступ между параграфами

Pixel Perfect Precision 68


Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula adipiscing elit. Fusce pellentesque vehicula adipiscing elit. Fusce pellentesque vehicula
elit sed tincidunt. Nam bibendum tempus elit sed tincidunt. Nam bibendum tempus elit sed tincidunt. Nam bibendum tempus
tellus ac interdum. Lorem ipsum dolor sit tellus ac interdum. Lorem ipsum dolor sit tellus ac interdum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Sed amet, consectetur adipiscing elit. Sed amet, consectetur adipiscing elit. Sed
fermentum sodales orci. fermentum sodales orci. fermentum sodales orci.

Class aptent taciti sociosqu ad litora torquent Class aptent taciti sociosqu ad litora torquent Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. per conubia nostra, per inceptos himenaeos. per conubia nostra, per inceptos himenaeos.
Pellentesque a nibh nibh, vel dictum risus. Pellentesque a nibh nibh, vel dictum risus. Pellentesque a nibh nibh, vel dictum risus.
Nunc congue vestibulum nibh non Nunc congue vestibulum nibh non Nunc congue vestibulum nibh non
sollicitudin. Donec eget metus leo. sollicitudin. Donec eget metus leo. sollicitudin. Donec eget metus leo.

Плохо Хорошо


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

Выравнивание нелогичные отступы в отцентрированном


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

Pixel Perfect Precision 69


Пример
Пример Пример
Пример Пример
ПРИМЕР

Плохо Хорошо

Сохраняйте форматирование текста италик и подчеркивание добавляют


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

Форматирование разборчивости для пользователей. Шрифты


с засечками сложнее читать пользователям
капителью также делает текст
трудночитаемым. И КАЖЕТСЯ ЧТО ВЫ
с дислексией или слабовидящим, так как их КРИЧИТЕ!
стиль может смешивать форму букв, а

Pixel Perfect Precision 70


Пример
Пример

Плохо Хорошо


Типографика
Избегайте двигающегося или мигающего
теста, это может сильно раздражать людей с

Форматирование дислексией или слабовидящих. Эти


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

Pixel Perfect Precision 71


При… Пример 1
При… Пример 2
При… Пример 3

Плохо Хорошо


Типографика
Сокращайте текст только там где это
действительно необходимо, так как это

Сокращения может скрывать нужный контент.

Pixel Perfect Precision 72


Пример
Пример +

Плохо Хорошо

Старайтесь не объединять текст с графикой. личных предпочтений. Все это невозможно,


Типографика Где возможно, делайте это на уровне кода. если текст сделан картинкой.

Объединение Это дает возможность функциям text-to-


speech прочитать текст, а пользователям

текста и графики изменить цвет и размер текста исходя из

Pixel Perfect Precision 73


Информация i Информация

Плохо Хорошо

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


Цвет и цвета, чтобы упростить определение последовательность.

Визуальная важного контента на странице. Цветовое


кодирование удобно для идентификации

наглядность различного типа контента — особенно


полезно для пользователей с когнитивными

Pixel Perfect Precision 74


Успех
Неудача

Плохо Хорошо

Кстати, не надейтесь только на цвет для и цвета. Не забывайте, что около 8% мужчин
Цвет передачи сообщения. Всегда добавляйте страдают от различных форм цветовой

Не надейтесь что-то еще. У некоторых мобильных


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

лишь на цвет условия использования далеко не


идеальны, что может повлиять на видимость
которых — цвет.

Pixel Perfect Precision 75


Плохо Хорошо


Цвет
Если вы используете цвет для подачи
столбцов в графиках, добавьте второй

Альтернативы признак по которому можно их различать. В


этом случае мы дали разные паттерны синей
и оранжевой областям.

Pixel Perfect Precision 76


Пример Пример

Плохо Хорошо

Хороший контраст текста и фона — лучший плохом освещении: убедитесь что контраста
Цвет способ убедиться в том, что важная хватает в реальных ситуациях.

Цветовой информация все еще доступна юзерам с


различными формами цветовой слепоты

контраст или проблемами со зрением. Проверьте


дизайн на необходимом устройстве при

Pixel Perfect Precision 77


AA

Foreground AA (Large)
Background AAA

AAA (Large)

Существует множество инструментов для требуется намного больше контраста, что


Цвет проверки цветового контраста: Colour может навредить дизайну. Результаты могут

Проверка Contrast Analyser и Jonathan Snook’s web-


based checker — просто введите два цвета.
отличаться для большого текста, больше 18
пунктов (или жирного и больше чем 14

контраста Как минимум вы должны проходить стандарт


АА! Конечно ААА лучше, но для него
пунктов)

Pixel Perfect Precision 78


Red / Blue /
Yellow White Black
Magenta Cyan


Цвет
Если вы захотите описать цвета без которые отвечают за 3 основных цвета вы
использования слов, то что вы сделаете? можете создавать целый спектр — будто это

ColorADD Оказывается отличное решение уже


существует — ColorADD. Это простая
краски или чернила. Также можно делать
темные или светлые оттенки цветов
система, которая представляет цвета соединяя их с символами черного и белого
используя символы. Комбинируя символы, цвета.

Pixel Perfect Precision 79


Light Light Light Light
Pink Orchid Khaki
Orange Yellow Green Blue

Red Orange Yellow Green Blue Violet Brown

Dark Dark Dark Dark


Bordeaux Brick Purple
Yellow Green Blue Brown


Цвет
На сайте ColorADD есть много другой
информации, включая классные цветные

ColorADD карандаши для дальтоников.

Pixel Perfect Precision 80


Заголовок

Объект
Описание

Объект
Описание

Объект
Описание

Объект
Описание

Пользователи со светочувствительной которые мерцают больше чем три раза в


Мерцание эпилепсией могут иметь проблемы с секунду. Для более детальной информации
мерцанием при определенной частоте, если читайте WCAG’s (Web Content Accessibility
мерцание продолжается длительное время. Guidelines) на странице “Three Flashes or
Основная рекомендация заключается в Below Threshold”.
отказе от использование элементов,

Pixel Perfect Precision 81


Заголовок Заголовок

ling ticker. Scrolling ticker. Scr ker. Scrolling ticker. Scrolli

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipisicing elit, consectetur adipisicing elit,
sed do eiusmod tempor sed do eiusmod tempor

Плохо Хорошо

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

Pixel Perfect Precision 82


Text to
speech Text to
speech

Еще одна хорошая практика применимая к понять как оно работает. В реальности
Тестирование доступности. Не забывайте проверять свое лучшие тесты это те, которые делают люди,
приложение в монохроме (black and white), регулярно использующие эти функции.
приближенном виде и text-to-speech.
Проверяйте на живых девайсах, а не
симуляторах. Так вы действительно сможете

Pixel Perfect Precision 83


Заголовок

Объект
Описание

Объект
Описание

Объект
Описание

Объект
Описание

В меню View > Proof Setup спрятаны самые


Тестирование распостраненные формы цветовой слепоты

Цветовая слепота — отличный метод быстро проверить есть ли


проблемы с контрастом в выбранной

в Adobe палитре.

Pixel Perfect Precision 84


Заголовок
Заголовок
Объект
Описание Объект
Описание

Объект
Описание Объект
Описание

Объект
Описание Объект
Описание

Объект
Описание Объект
Описание


Тестирование
Sim Daltonism это более продвинутое плавающие окна которые могут менять
приложение для проверки доступности размер и фильтрующие то, что находится

Sim Daltonism цветовой слепоты с возможностью


различных видов предпросмотра.
под курсором мыши.

Приложение работает не только внутри


Photoshop, но и отдельно, предоставляя

Pixel Perfect Precision 85


ДИЗАЙН
ДИЗАЙН И
И
РАЗРАБОТКА
РАЗРАБОТКА
Дизайн это только часть релиза продукта. к плохим результатам. Намного лучше
Дизайн и Разработка не менее важна. Существует работать над проблемой вместе, командно,

разработка отдельный барьер между ними: сначала


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

Pixel Perfect Precision 87



Основы
Это первая основная точка в совместной приходите к компромиссу, тем самым убирая
работе. Грамотная коммуникация поможет напряжение из процесса. Как говорили в

Переговоры программисту получить дизайн который


намного легче в имплементации, а
одной рекламе: «Разговаривать — это
хорошо»
дизайнеру — билд похожий на сам дизайн.
Общайтесь, обсуждайте свои решения и

Pixel Perfect Precision 88


Старайтесь не ограничиваться своей технически возможно. В долгосрочной
Основы задачей и больше работать вместе. Если у перспективе каждый член команды

Взаимодействие вас встреча по генерации дизайн-идей —


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

Pixel Perfect Precision 89


i i


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

Обучение подводные камни. Понимая проблемы друг


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

Pixel Perfect Precision 90


Кнопка Кнопка

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


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

Будьте разница между дизайном макета и


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

реалистами Предыдущие советы о командной работе


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

Pixel Perfect Precision 91


640 x 960 326ppi


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

Спецификации предназначаемой платформе приложения.


Размер экрана — хорошая точка
частоте кадров в анимации. Среда
разработки также может вносить
отправления, также как и плотность ограничения на эффекты рэндеринга и
пикселя. Не забудьте про битность (сколько шрифты, так что проверьте и это.

Pixel Perfect Precision 92



Подготовка
В процессе составления спецификации ли 9-slice исходники чтобы они могли
необходимо узнать о том, что именно вы масштабироваться в продукте? Получение

Доставка должны предоставить разработчикам для


завершения продукта. Какие форматы им
точной информации сейчас позволит делать
дизайн основываясь на любых требованиях
нужны: png, psd, векторы? Есть ли с самого начала.
ограничения по цветам и эффектам? Нужно

Pixel Perfect Precision 93


Версия

Объект
Описание

Объект
Релиз
Описание

Объект
Описание

Объект
Описание

Проверка и итерации

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

Рабочий процесс программистами и обсудите совместную


работу. Проект будет каскадным или agile?
На этом этапе также важно запланировать
регулярные ревью-сессии для обсуждения
Как часто будут появляться билды прогресса.
приложения? Что вам нужно друг от друга,

Pixel Perfect Precision 94


PPP–09 Работать над переводом

PPP–08 Предоставить шрифты

PPP–07 Выслать тестовый билд

PPP–06 Выравнять углы

PPP–05 Какой цвет текста?

PPP–04 Создать страницу выдачи

PPP–03 Нажатое состояние для кнопки

PPP–02 Поправить баг в управлении

PPP–01 Вырезать зеленый квадрат

Неотъемлемой частью рабочего процесса это через email неудобно, поэтому


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

Трэкинг трэкинга. Разработчики захотят попросить


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

Pixel Perfect Precision 95


Кнопка Кнопка

Плохо Хорошо

Ознакомьтесь c визуальными проблем, но более сложные эффекты могут


Дизайн ограничениями прежде чем делать дизайн. быть невозможны. Если сомневаетесь —

Должная Используйте шрифты которые доступны на


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

стилизация было точно повторить это. Как правило с


градиентами, тенью и обводкой нет никаких

Pixel Perfect Precision 96


Заголовок Избранное

Песня I Love Pixels!


Исполнитель The Pixel Perfecti…

Песня Line Me Up
Исполнитель The Pixel Perfecti…

Песня Pixel Monkey


Исполнитель Tony & Dones

Песня Lean & Agile


Исполнитель The ustwo Band

Плохо Хорошо

Чтобы поддерживать коллективное наихудших сценариях: слишком много слов


Дизайн здравомыслие в команде старайтесь или нет изображения — они обязательно

Реалистичный использовать реалистичный контент в


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

контент возвращаться назад из-за нехватки места


для текста. Также задумывайтесь о

Pixel Perfect Precision 97


Слои Слои

Design T Title

Background Title

Square Blue

Square Green

Square Orange

Square Pink

Rectangles

Background

Плохо Хорошо

Очень редко дизайн проходит в один шаг, дизайн, либо для экспорта каких-то
Дизайн поэтому храните файлы так, чтобы вы в элементов.

Все должно любой момент могли внести изменения и


обновления. Это также помогает в тех

редактироваться случаях, когда разработчики просят


исходники, чтобы увидеть как был создан

Pixel Perfect Precision 98


Активна

Кнопка Нажата

Неактивна

Плохо Хорошо

Не забывайте делать дизайн различных


Дизайн состояний для объектов и экспортировать

Состояния их в одном размере: выровненными и


попиксельно идеальными.

объекта
Pixel Perfect Precision 99
Основной цвет
#15d0d4
Заголовок Активна

Разделительная линия 2px #999999


Proxima Nova Regular 36pt #15d0d4

Второстепенный
цвет Подзаголовок Нажата
Proxima Nova Light 30pt #757575
#757575

Цвет основного Основной текст


текста Proxima Nova Regular 14pt Неактивна
#333333 #333333


Дизайн
Хорошо иметь наборы стилей по проекту. В как стандарт для всех стилей и элементов
них собраны все элементы и стили. Можно проекта, не нужно проходить через каждый

Наборы стилей проверить что все выглядит целостно и


затем отправить разработчику в виде
элемент и вносить изменения. Все что в
этом документе — верно, а любые вариации
справочного руководства. Также если этот можно проигнорировать. Это окрыляет!
файл актуален, то его можно использовать

Pixel Perfect Precision 100


.square_pink {
Заголовок @ background-color: #ed0082;
@ position: absolute;
Объект @ left: 32px;
Описание @ top: 128px;
@ width: 96px;
@ height: 96px;
Объект
}
Описание
.rectangle {
@ background-color: #e8e8e8;
Объект @ position: absolute;
Описание @ left: 32px;
@ top: 128px;
Объект @ width: 96px;
Описание @ height: 96px;
}

Один из способов понять что все выглядит и верном пути к созданию интерактивного
Дизайн работает так как вы хотите — представить прототипа в HTML. Дизайны действительно

Дизайн в коде дизайн в коде. Можно написать код с нуля,


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

Pixel Perfect Precision 101


Цветовой профиль Да Нет

Код

Плохо Хорошо

Как говорилось в других частях, старайтесь


Дизайн избегать использования цветовых

Цветовые профилей, так как они могут создать


несоответствие между дизайном и кодом.

профили
Pixel Perfect Precision 102
= Дедлайн

Плохо Хорошо


Доставка
Старайтесь сдавать работу вовремя. Сдача смогут адаптироваться к изменению
работы не в срок всегда вызывает графика. Есть шанс, что это не станет

Сроки неприятное ощущение, и вероятность


«застрять» в проекте. Если какой-то этап
проблемой, и за это время члены команды
смогут поработать над чем-то еще.
занимает больше отведенного времени,
заранее поговорите с командой. Так все

Pixel Perfect Precision 103


Проект Проект

Rectangle.png Дизайн

Square.png Screen.psd

Square copy.png Элементы

Square copy 2.png Rectangle.png

Square copy 3.png Square Blue.png

Untitled.psd Square Green.png

Square Orange.png

Square Pink.png


Доставка
Если вы храните файлы в порядке, то слоев в Photoshop: возможно кто-то еще
передача их от дизайнера к программисту и захочет с ними поработать.

Порядок обратно проходит намного эффективнее.


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

Pixel Perfect Precision 104


Система имен файлов играет большую роль
Доставка
& bg_help btn_home icn_global
в создании хорошей организационной

Система имен структуры. В начале проекта пообщайтесь с


разработчиками и узнайте как лучше
Затем добавьте уникальный идентификатор.
К примеру, кнопки на экране home, которые
называть файлы: как правило у них уже есть будут добавлять или удалять документы
предпочитаемый метод и вы можете должны быть названы:
использовать его. Хорошо если имена
базируется на иерархической системе, & btn_home_new btn_home_delete
которая начинается с широкой
характеристики компонента с последующим Если у компонента есть несколько
добавлением большего количества состояний — добавьте их в конец:
информации. В конечном итоге вы можете
получить что-то типа: & btn_home_new_default

& btn_home_new_highlighted
& type_location_identifier_state
Представленная система использует нижний
Type — это категория к которой регистр и подчеркивания вместо пробелов
принадлежит компонент, к примеру: в именах. Этот метод мы используем в
ustwo. Существует метод под названием
bg&(background) btn& (button)
 CamelCase, в нем не используются пробелы
& icn& (icon)& & & & & img& (image) а разделителем выступает верхний регистр:

Следующим шагом будет добавление & BtnHomeNewDefault



экрана или места где этот компонент & BtnHomeNewSelected
появляется (global значит что он
используется в нескольких местах):

Pixel Perfect Precision 105


Доставка
Система имен

icn_global_signal_full icn_global_battery_full
btn_global_menu_default Заголовок btn_global_search_default

Объект
btn_home_play_pink_default bg_home_description
Описание

Объект
btn_home_play_orange_default
Описание

Объект
btn_home_play_green_default
Описание

Объект
btn_home_play_blue_default
Описание

Pixel Perfect Precision 106


Плохо Хорошо

Экспортируйте файлы в форматах, которые


Доставка не ухудшают качество, таких как PNG, так

Не сжимайте как среда разработки в любом случае


применит свое сжатие.

изображения
Pixel Perfect Precision 107
Заголовок Заголовок

Объект
Фильм.avi
Объект
Заголовок Описание
Search results

Объект Объект
Описание Описание Фильм
Объект
Объект Объект
Описание Описание Описание Смотри!
Я буду двигаться
Объект Объект
Описание Описание
Объект Статика
Описание Я не двигаюсь

Заголовок
Статика
Объект Объект
Я не двигаюсь
Описание
Описание
Lorem ipsum dolor sit amet, Статика
consectetur adipisicing elit, Я не двигаюсь
sed do eiusmod tempor
Объект incididunt ut labore et

Описание dolore magna aliqua. Ut


enim ad minim veniam, quis
nostrud exercitation ulamco
laboris nisi ut aliquip ex ea.

При отправке дизайна старайтесь добавлять демонстрируют как приложение работает и


Доставка как можно больше полезной информации видео, которое показывает желаемую

Спецификации для разработчиков. Громадные документы,


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

Pixel Perfect Precision 108


Исходники
Состояния
Набор стилей
Процесс
Проверь еще раз

До того как отправлять файлы


Доставка разработчику, проверьте все ли на месте, а

Проверь, и еще затем перепроверьте все еще раз, для


уверенности.

раз проверь.
Pixel Perfect Precision 109
PHOTO
SHOP &
USTWO
Мы уже рассмотрели много правил дизайна, давайте углубимся в
кое-что специфическое. Photoshop в ustwo — инструмент на
каждый день, также как и в индустрии в целом, поэтому очень
важно знать как им правильно пользоваться. В следующих
разделах мы покажем вам некоторые методы и техники которые
мы используем.

Pixel Perfect Precision 110


Photoshop

ЦВЕТОВЫЕ
ПРОФИЛИ
Чтобы избежать разницы в цвете между устройство, которое вы сейчас используете.
Настройки Photoshop и Mac OS X, вы должны В нашем случае — Color LCD.

системы правильно выставить цветовые настройки. В


первую очередь убедитесь что в System
Preferences > Displays > Color установлено

Pixel Perfect Precision 112


Затем в Photoshop зайдите в Edit > Color
Photoshop Settings … и поменяйте Working Spaces >

настройка цветов RGB на Monitor RGB - Display. Также


отключите Color Management Policies > RGB.

Pixel Perfect Precision 113


Также в Save for Web опция Convert to sRGB
Photoshop Save должна быть отключена, и Preview должно

for Web быть выставлено в Monitor Color. После


этого ваши цвета должны быть
одинаковыми.

Pixel Perfect Precision 114


Несмотря на то, что предыдущие советы Xcode или Keynote. Это связано с
Color Faker помогут настроить продукты Adobe для восприятием профилей в OS X. Для более
повседневных задач, вам возможно детального описания прочитайте OS X Color
придется предпринять дополнительные Meters and Color Space Conversion, либо
действия, если у вас есть проблемы с просто скачайте Color Faker и включите его.
цветом в таких приложениях Apple как

Pixel Perfect Precision 115


Photoshop

ПИКСЕЛЬНАЯ
ТОЧНОСТЬ
Плохо Хорошо

Мы любим Shape Layers — весь наш рабочий прожорливы в плане ресурсов в отличие от
Shape Layers процесс построен на них. Так как это Smart Object или растра. Победный вариант!
векторы, они полностью редактируемы:
можно масштабировать, изменять форму
без потери качества, и они менее

Pixel Perfect Precision 117


Плохо Хорошо

Также старайтесь использовать вектора в немаскированный Shape Layer для


Shape Layers той части дизайна, где вы можете бэкграундов, что добавляет преимущество

Другие векторы инстинктивно использовать растр. Пример


— маски слоя. Это значительно ускорит
того, что заливка будет автоматически
растягиваться при увеличении размера
универсальность и быстродействие канваса. Супер!
исходника. Еще один совет — использовать

Pixel Perfect Precision 118


Плохо Хорошо


Shape Layers
Посмотрите на удар растра по растровая версия целых 3.47 MB! На
производительности. Обратите внимание на больших файлах вы можете сохранить себе

Быстродействие выделенные значения. Это размер


исходника со слоями на предыдущей
сотни мегабайт памяти.

странице. Векторный дизайн занимает


только 113.9 KB памяти, а полностью

Pixel Perfect Precision 119


Photoshop CC имеет замечательное закругления? Просто выберите шэйп и
Live Shape нововведение в панели Properties — Live измените необходимые значения. Также, в

Properties Shape Properties. Каждый новый Shape Layer


теперь имеет редактируемый набор
отличие от прежних версий Photoshop,
нажатие на transform или resize шейпа не
значений для точнейшего измерения и искажает радиус закругления. Море
позиционирования. Хотите поменять радиус сохраненного времени.

Pixel Perfect Precision 120


Если вы используете версию фотошопа открыть File > Scripts > Corner Editor и
Редактор углов отличную от CC, то у вас все еще есть поменять значение радиуса, вы также
возможность редактирования радиуса можете назначить разный радиус каждому
скругления (corner radii) после того как вы углу, аналогично CC. Есть возможность
нарисовали шейп — Corner Editor. Если он использовать разичные стили, вы не
установлен, вы можете выбрать слой шэйпа, ограничены лишь скруглением углов.

Pixel Perfect Precision 121


Мы также любим Layer Effects, поэтому можно скопировать и применить к другим
Эффекты слоя стараемся как можно больше стилизовать с слоям.
их помощью. Эффекты полностью
редактируемы, масштабируемы в
соотношении с их шэйпами, а также их

Pixel Perfect Precision 122


Linked Smart Objects работают точно также этом любой апдейт исходников будет
Связанные Smart как и обычные Smart Objects, за затрагивать все связанные дизайны —

Objects исключением того, что они ссылаются на


внешние файлы. Это дает возможность
очень удобно. Создавать Linked Smart Object
очень просто, просто нажмите Place Linked в
команде дизайнеров использовать единую меню File, и выберите объект который вы
библиотеку компонентов интерфейса, при хотите импортировать.

Pixel Perfect Precision 123


W : 160 px
H : 160 px

Some Text

Включите инфо панель когда индикации быстро проверить последовательность в


Панель Info курсора недостаточно. Она не только дизайне.
показывает детальные размеры. Ее также
можно настроить на отображение значений
цвета и прозрачности, что позволит вам

Pixel Perfect Precision 124


В Photoshop CS6 и выше есть глобальная Shape Layer который ты рисуешь будет
Привязка к опция — привязать вектор к пикселям. пиксельно четким.

пиксельной сетке Убедитесь что в настройках пункт Snap


Vector Tools and Transforms to Pixel Grid
выбран (по умолчанию он включен).
Намного проще когда знаешь что каждый

Pixel Perfect Precision 125


Иногда нужно отказаться от попиксельной and Transforms to Pixel Grid. Затем
Шорткаты для точности. Если такое происходит часто, повторотите то же самое для выключения.

пиксельной сетки почему бы не автоматизировать этот


процесс? Создайте экшн, назначьте
Теперь не нужно каждый раз заходить в
настройки.
клавишу для него, нажмите Record, зайдите
в настройки и включите Snap Vector Tools

Pixel Perfect Precision 126


В Photoshop CS5 прямоугольники и тулбаре. Выберите эту опцию
Shape Layer скругленные прямоугольники имеют индивидуально для прямоугольника и

Options встроенную опцию для помощи в


пиксельной точности: Snap to Pixels. Чтобы
скругленного прямоугольника, так как они
независимы друг от друга.
получить доступ к этой опции нажмите на
выпадающее меню справа от шэйпов в

Pixel Perfect Precision 127


Будьте аккуратнее с зумом в Photoshop CS5. нажмите стрелочку 1 раз. При зуме в 200%
Вытягивание При использовании клавиатуры для точки сдвинуться на 0.5px (т.е. наполовину),
переключения точек сдвига у слоя Shape — создавая размытые углы — не хорошо. В
объем вытягивания изменяется в CS6 точки двигаются на 1px вне зависимости
зависимости от зума. Чтобы гарантировать от зума. Отключите привязку для точности.
сдвиг на 1px, установите масштаб 100% и

Pixel Perfect Precision 128


В Photoshop есть множество удобных другим объектам и гайдам в макете, что
Привязка инструментов, помогающих с попиксельной сильно помогает в выравнивании. Подменю
точностью. В первую очередь включите Snap To позволяет вам изменять объекты,
привязку: зайдите в View > Snap и которые Photoshop использует для
удостоверьтесь что она включена. Теперь привязки.
ваши объекты будут привязываться к

Pixel Perfect Precision 129


Выравнивание и В Photoshop, как и в других графических
приложениях есть множество опций для

распределение выравнивания и распределения. Их можно


найти в Layer > Align and Layer > меню
Distribute.

Pixel Perfect Precision 130


Сетка очень сильно помогает в разметке
Сетка
Photoshop > Preferences > Guides, Grid &
дизайна. В примере выше десятипиксельная Slices чтобы сделать настройку.
сетка с расстоянием в 10 пикселей, что
позволяет легко считать размер пикселя
без особого внимания к сетке. Зайдите в

Pixel Perfect Precision 131


Some Text

Бесплатное дополнение к Photoshop под уже допустим нанесли их на кусочек бумаги,


GuideGuide названием GuideGuide поможет в вы можете просто ввести значения и
автоматизации создания сетки. После автоматически получить нужную сетку. Для
установки вы можете найти его в меню каждого инпута есть подсказки.
Window > Extension. Изменяя параметры
ввода, длинну column и gutter, или если вы

Pixel Perfect Precision 132


90°

drag to new
document

120°

Это одна из тех мелочей, которая при избежать этого закройте все свои открытые
Стандартное неаккуратности может наделать проблем. файлы и зайдите в Layer > Layer Style >

значение Global Объекты c кастомными настройками Global


Light при копировании в другой документ по
Global Light… и измените значение угла по
умолчанию на что-то более

Light умолчанию получают значение в 120°. Это


может существенно смешать дизайн. Чтобы
распространенное, например 90°.

Pixel Perfect Precision 133


Тут текст Тут текст

Тестируйте, тестируйте, тестируйте еще раз нужна вся эта беготня вокруг сохранения
Предпросмотр и потом еще немного тестируйте. Отличная файлов и копирования их на телефон. Стоит
практика — проверять дизайн на обратить внимание на Skala Preview для iOS
предназначенных девайсах. Существует и Android и Android Design Preview для... ну,
множество приложений предоставляющих я думаю вы поняли для чего.
предпросмотр прямо из Photoshop, т.е. не

Pixel Perfect Precision 134


Photoshop

ТЕХНИКИ
Тут текст

Плохо Хорош

У шэйпов и текста удобно менять цвет Давайте попробуем: как быстро вы можете
Цвета объектов используя настройки самого объекта, а не найти голубой квадрат в каждом из
эффект Color Overlay Layer. Преимущества примеров вверху?
этого: нет необходимости открывать окно
Layer Style если вы хотите поменять цвет и
объект проще найти в панели Layers.

Pixel Perfect Precision 136


Тут текст

Плохо Хорошо

Точно также и с градиентами — используете


Градиент объекта слой gradient fill вместо Layer Effect если это
возможно.

Pixel Perfect Precision 137



Градиент объекта
Вне зависимости от типа используемого только к слою градиента, а в версии CS6 и
градиента убедитесь что опция Dither выше применение доступно для обоих.

Сглаживание активирована. Это поможет сгладить


переход цвета и избежать полосатости. В
Photoshop CS5 вы можете применять dither

Pixel Perfect Precision 138


Плохо Хорошо

Старайтесь не растягивать Layer Effects


Группируйте объекта между несколькими слоями.

стили слоя Намного лучше если они вместе: так


соблюдается порядок и намного проще
копировать и вставлять стили.

Pixel Perfect Precision 139


Масштаб в 200%

Масштаб эффектов в 200%

Хоть вы и можете выбрать опцию Scale размеру автоматически. Можно


Масштаб Styles когда меняете размер всего использовать опцию Scale Effects для

эффектов слоя документа через Image Size, бывают


ситуации, когда вы хотите увеличить
решения этого вопроса. Вам необходимо
знать процентное изменение оригинального
масштаб (scale) определенных слоев и шэйпа чтобы подогнать размер. Эту опцию
эффектов. При изменении размера одного можно найти нажав правой кнопкой на
объекта, стиль не подстраивается по иконку fx у слоя.
Pixel Perfect Precision 140
Возможно вы думаете что единственный Stroke всегда будет вверху, затем будет
Layer Effect способ создать обводку с помощью Layer Inner Shadow и Inner Glow и в самом низу

Strokes Effects — опция Stroke? На самом деле


существует несколько способов добавить
Drop Shadow. Недостатки? При большей
ширине они могут размываться, и Choke
ее к шейпу. Используя Inner/Outer Glows и может вызвать шершавость на скругленных
Shadows, со значением Choke равным 100%, углах.
вы сможете получить цельный контур.
Pixel Perfect Precision 141
Плохо Хорошо

Если вы хотите качественной обводки в квадратные, косые углы или пунктирные


Layer Effect vs. Photoshop CS6 или ниже — добавьте очертания. Обводку также можно

Vector Strokes векторную обводку, но не как Layer Effect, а


прямо к слою шейпа. Вы не только
уменьшить до полупикселей, что может
пригодится для iOS, так как строук можно
выиграете в качестве, но и получите выставить в 0.5px, которые затем
возможность выбирать скругленные, увеличатся до 1px на ретине.

Pixel Perfect Precision 142


Для создания сложных векторов лучше стишка: «Cо строком не шути, в векторе
Сложные использовать Illustrator, а затем скопировать обводи». Если у вектора сложная форма: к

векторы и вставить контур в Photoshop как Shape


слой. Убедитесь что вы сделали весь контур
примеру многоцветная иконка для рабочего
стола, то ее лучше вставить как Smart Object
в Illustrator, иначе он не симпортируется
правильно. Запомните это с помощью

Pixel Perfect Precision 143


Плохо Хорошо

Есть один каприз при вставке Shape Layers snapping. Всегда проверяйте сдвинулся ли
Вставляем из из Illustrator. Так как объект может шейп и возвращайте его в исходную

Illustrator сдвинуться off-centre на пол пикселя по


одной или обоим осям, это может повлечь
позицию.

за собой размытые грани. В CS6 это не


вызовет проблем, так как есть pixel

Pixel Perfect Precision 144


Плохо

При создании эффектов не забывайте режим наложения пропадает и становится


Режимы использовать режимы наложения только на чёрно-белым градиентом.

наложения тех объектах, которые затем будут слиты с


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

Pixel Perfect Precision 145


Хорошо

Лучший вариант воссоздать эффект —


Режимы использовать слой, который не зависит от

наложения того что под ним.

Pixel Perfect Precision 146


Оригинальный текст Оригинальный текст

Новый текст Новый текст

Плохо Хорошо

При добавлении текста упрощайте себе


Выравнивание будущее, добавляя выравнивание абзаца в

текста соответствии с дизайном. Текст будет


выглядеть корректно даже если
поменяется.

Pixel Perfect Precision 147


Плохо Хорошо

Абзацы текста лучше помещать в контейнер автоматически, давая нам возможность


Абзацы (Paragraph Text), а не делать переносы легко изменять абзац.
вручную (Point Text). Текст и шрифт очень
часто изменяются. При правильном
контейнере тексты выравниваются

Pixel Perfect Precision 148


К счастью, Photoshop позволяет ту же опцию. В CS5 вы можете сделать это в
Конвертация в конвертировать Point Text в Paragraph Text и меню Layer > Type.

Paragraph Text наоборот, через меню Text > Convert to


Paragraph Text / Convert to Point Text, либо
кликнув правой кнопкой по слою, выбирая

Pixel Perfect Precision 149


Плохо Хорошо

Большинство девайсов не поддерживают


Автоматический автоматический перенос. Для большей

перенос точности не используйте его в дизайне.

Pixel Perfect Precision 150


Плохо Хорошо

Интерлиньяж, который установлен в


Интерлиньяж Photoshop по умолчанию, немного
плотноват для комфорта. Оцените
насколько лучше текст смотрится после
увеличения значения по умолчанию (Auto)
до 20pt.

Pixel Perfect Precision 151


Нет Sharp

Crisp Strong Smooth

В Photoshop есть несколько типов другом месте, то выберите опцию которая


Сглаживание сглаживания, попробуйте все и определите максимально соответствует сглаживанию

текста вариант, который дает лучший рендеринг и


четкость. Как правило, Crisp довольно
целевого экрана.

универсален. Если вы работаете с текстом,


который будет генерироваться где-то в

Pixel Perfect Precision 152


Mac LCD Mac

Photoshop CC также имеет опцию Photoshop являются оттенками серого, не


Сглаживание сглаживания, которая повторяет рендеринг RGB, в отличие от браузеров. Больше

текста операционной системы на субпиксельном


уровне. Это позволяет получить
информации в посте Realmac Software’s
Working with Type in Photoshop

Система представление о виде текста в браузере,


например. Стоит отметить что субпиксели в

Pixel Perfect Precision 153


Текст

Текст

Текст

Текст

Плохо Хорошо

При создании списков, особенно если контент идеально выровненным но и


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

Pixel Perfect Precision 154


Текст

Текст

Разрещающая способность мобильного пока он не станет размером с экран


Предпросмотр телефона (PPI), как правило, больше чем у телефона, и если какой-то элемент выглядит
компьютера. Это значит, что физический маленьким — увеличьте его.
размер дизайнов будет меньше на вторых,
чем на первых. Чтобы быстро проверить
размер текста и элементов отдалите дизайн

Pixel Perfect Precision 155


Photoshop

ОРГАНИЗАЦИЯ
По умолчанию Photoshop будет добавлять Effects, и Add “copy” to Copied Layers and
Настройка Layers «copy» после каждого дубликата слоя — это Groups. Каждая мелочь важна.

Panel раздражает. Чтобы отключить эту функцию и


победить визуальную суматоху зайдите в
Layer Panel Options и уберите галочку с Use
Default Masks on Fill Layers, Expand New

Pixel Perfect Precision 157


Текст

Плохо Хорошо

Не будьте эгоистами — называйте слои сразу во время создания, чтобы не делать


Имена слоев своими именами. Это не только упростит это в спешке, когда дедлайн уже подошел.
жизнь тому кто работает с вашими файлами,
но и заставит клиентов подумать что ваша
организованность просто невероятна. Совет
профессионалов: давайте слоям имена

Pixel Perfect Precision 158


До После

Для пакетного переименования слоев порядковый номер используя переменную


Групповое скачайте скрипт Group Layer Renaming от %n.

переименование Kamil Khadeyev. Он делает именно то, о чем


говориться в названии: позволяет

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

Pixel Perfect Precision 159


Some Text

Плохо Хорошо

Чтобы сделать исходники особенными, книгу (извините, если ваш родной язык идет
Упорядочивание убедитесь, что вы не только называете слои в другом направлении)

слоев правильно но и логически верно


выстраиваете их. Хорошая практика —
выстраивать слои по порядку их появления
в дизайне: слева направо, сверху вниз, как

Pixel Perfect Precision 160


Some Text

по Имени по Типу

Совмещая организацию и возможности Отлично подходит для ситуаций, когда


Поиск поиска Photoshop, мы получаем мощный нужно применить новый стиль для
способ работы с макетами. К примеру, нескольких кнопок. Вы можете искать по
добавление префиксов “btn” или “icn” к типу, эффектам и слою (цвету). Поиграйтесь
названию слоя даст вам возможность и посмотрите какие другие системы
быстрой сортировки по содержанию. фильтров вы можете использовать.

Pixel Perfect Precision 161


Серый (“нейтрал”)
используется для
референса — скрины и Красный (“опасно”) для
прототипы старых, ненужных
элементов
Окно попапа

Зеленый выделяет
различные состояния
одной кнопки

Основные элементы
не имеют выделения

Сверху представлен пример цветового Чтобы выбрать цветовой лэйбл нажмите на


Цветовое кодирования слоев, упрощающий слой правой кнопкой.

кодирование навигацию. Старайтесь оставлять основные


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

Pixel Perfect Precision 162


Плохо Хорошо

Как неряшливый гость, раскрытые


Раскрытые эффекты могут мешать поиску вещей,

эффекты слоев которые вам действительно нужны. Держите


их свернутыми для всеобщего блага.

Pixel Perfect Precision 163


Плохо Хорошо

Cтарайтесь не разбрасывать пустые слои


Удаляйте все или группы, так как они создают ненужный

пустые слои беспорядок. Есть удобный скрипт в меню


File > Scripts под названием Delete All Empty
Layers. Он делает именно то, о чем вы
думаете.

Pixel Perfect Precision 164


До После

Эксперименты с дизайном пораждают


Remove Unused множество незадействованных эффектов.

FX Обычно нужно удалять их по одному, но


расширение Remove Unused FX удаляет всё
за один клик.

Pixel Perfect Precision 165


Плохо Хорошо

Замок — хороший способ защитить объект


Блокировка во время работы. Не забудьте снять его до

слоев передачи файла другому дизайнеру.


Закрытый слой где-то в глубине файла не
даст вам удалить или сдвинуть группу. Это
раздражает.

Pixel Perfect Precision 166


Текст Текст Текст

Текст Текст Текст

Композиция слоев (Layer Comps) — конфигурации контента. Вы также имеете


Композиция действительно удобный метод сохранения возможность включать/выключать

слоев нескольких вариантов дизайна в одном


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

Pixel Perfect Precision 167


Photoshop

ЭКСПОРТ
Генератор — одна из лучших новых функций файлами, автоматически обновляя их при
Генератор в Photoshop CC, позволяющая вам любых изменениях исходника — ура! Есть
экспортировать слои или группы просто параметры изменяющие размер и качество
добавляя расширение файла в их имя. изображения, можно выводить несколько
После активации в меню File > Generate, версий одного файла. Подробнее в
генератор обработает и создаст папку с Generate image assets from layers

Pixel Perfect Precision 169


Для тех кто не использует Photoshop CC каждый отдельный объект для экспорта в
Скрипты экспорта существует свой способ автоматизации отдельный слой или группу и дайте ему имя.
экспорта. Вы можете использовать наши Количество слоев в группе не имеет
ustwo Crop & Export скрипты (смотрите значения. Также, разделяя компоненты как
следующую страницу). Для начала вам в примере выше, вы закончите с удобным
нужно поработать с исходниками: добавьте reference sheet.

Pixel Perfect Precision 170


После сортировки используйте любой из с каждой стороны для корректного
Скрипты экспорта наших скриптов чтобы эскпортировать все отображения во Flash. Имя файла как в
отдельные слои в PNG, быстро и без обычном Crop & Export.
проблем. Просто скопируйте их из папки
Scripts в PPP Extras в вашу папку Adobe ustwo Crop & Export +1px [layername]

Photoshop CSx/Presets/Scripts Такой же скрипт как предыдущий но с
(пере)запустите Photoshop и вперед! После альтернативным методом нейминга.
установки их можно найти в меню File >
Scripts. Есть также несколько дополнительных
скриптов, которые не будут нарезать слои, а
ustwo Crop & Export [filename][layername]
 исходить из размеров в Photoshop. Это
Этот скрипт нарежет и экспортирует может пригодиться в screen comps, где у
каждый файл с именем файла формата контента может меняться размер, но при
[filename][layername].png, т.е. слой с именем этом нужны одинаковые пропорции всех
_normal из button.psd будет называться экспортируемых PNG.
button_normal.png.
ustwo Export [filename][layername]
ustwo Crop & Export [layername]

Такой же скрипт как выше, только он не ustwo Export [layername]
добавляет имя файла, т.е. слой из
предыдущего примера будет
экспортироваться как _normal.png

ustwo Crop & Export +1px [filename]


[layername]

В этом случае файл будет иметь отступ в 1px

Pixel Perfect Precision 171


Посмотрите на разницу в размерах двух
Save for Web PNG файлов. Save As… создало файл
который на 32 килобайта больше чем Save
for Web. Стоит использовать второй.

Pixel Perfect Precision 172


Попробуйте сконвертировать файл в 8bit
Уменьшаем PNG, если вам не нужна прозрачность. В

размер файла примере выше нет потери качества, при


этом размер файла уменьшился больше чем
наполовину.

Pixel Perfect Precision 173


ImageOptim может сэкономить еще больше компоненты и цветовые профили, также
ImageOptim килобайт пространства. Просто перетащите оптимизируется используемая компрессия.
файлы в главное окно и наблюдайте за Нет особого смысла в использовании
процессом. Приложение работает с ImageOptim при разработке для iOS,
изображениями форматов PNG, JPEG и GIF, подробнее в статье PNG compression and
удаляя ненужные метаданные, такие как iOS apps.

Pixel Perfect Precision 174


Хороший способ сбросить немного веса с исходники и гонитесь за минимальным
Уменьшаем исходников — скрыть все слои. Это не размером. Используйте ZIP компрессию для

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


должен иметь определенную визуальную
улучшения результата: вы можете сжать
PSD файл более чем на 90%.

Photoshop комбинацию для передачи смысла, но это


может быть удобно, если вы пересылаете

Pixel Perfect Precision 175


Не все устройства отображают множество битность изображения c 24 бит до 16 бит
565 цветов. Это может визуально навредить (поддерживается на старых экранах
вашим файлам, что особенно заметно в мобильных телефонов) и применяет
градиентах и прозрачности. Чтобы избежать сглаживание, компенсирующее уменьшение
этого конвертируйте их в 565 картинки с цветов. Имя 565 пошло из 5+6+5 битов в
помощью Ximagic ColorDither. Он уменьшает канале 16-ти битного RGB изображения.

Pixel Perfect Precision 176



565
Применять 565 к группе файлов очень в меню Destination, которая увеличивает
трудозатратно, намного проще ускорить размер файла), и закрывает файл без

Batch процесс используя Actions и Batch tool.


Запишите Action, который применяет
изменения. Затем просто запустите экшн в
Batch tool с настройкамии как в примере
фильтр, экспортирует результат через Save выше. Файлы будут экспортированы в место
for Web (эта опция лучше чем Save and Close для Save for Web по умолчанию.

Pixel Perfect Precision 177


Photoshop

СОВЕТЫ
Нет свечения

Свечение

Временами однопиксельная обводка (stroke) практически неуловима, но это


Обводка может выглядеть слишком тонкой на действительно помогает.
скругленных краях. Для усиления ее без
увеличения толщины добавьте Glow с
настройками как выше. Разница

Pixel Perfect Precision 179


Круговое затухание очень просто сделать
Затухающие используя эффект Stroke. Фишка в

круги использовании Fill Type: Gradient и Style:


Angle

Pixel Perfect Precision 180


Если вы хотите быстро придать объекту любые непрямые секции будут отражены в
Быстрый блеск блеск, попробуйте использовать эффект блеске.
Inner Shadow белого цвета с маленькой
прозрачностью. Будьте аккуратны, так как
его форма будет базироваться на верхнем
углу родительского слоя, это значит что

Pixel Perfect Precision 181


Можно добавить простую текстуру шума к
Добавляем шум объекту используя эффект Inner Glow.

с Inner Glow Выставьте Source — Center и Size — 0, затем


изменяйте величину используя настройки
Noise.

Pixel Perfect Precision 182


Image > Adjustments > Invert затем Select
Найдите логотип на белом фоне
All и Copy

Создайте новый слой залитый цветом,


добавьте Layer Mask, Option + клик на ней
Image > Adjustments > Desaturate
и потом Paste — добавляем маску из лого
который вы скопировали

Image > Adjustments > Levels и


Та-дам! У вас есть лого на прозрачном
используйте black point
бэкграунде.
eyedropper для выбора главного

Если у вас не выходит сделать копию Illustrator и вытянуть оттуда любые


Извлечение лого логотипа — попробуйте этот метод. Как векторные логотипы.
вариант, вы можете попробовать зайти на
сайт нужной компании и поискать доступные
для скачивания PDF. Их можно открыть в

Pixel Perfect Precision 183


Поиграйтесь с настройками в панели
Star Fields Brushes чтобы создать различные эффекты,
к примеру подобие звездного поля.
Увеличивая Size Jitter и Opacity Jitter кисти
становятся более разнообразными.

Pixel Perfect Precision 184


Добавьте изюминку в ваш дизайн с заготовку. Новый паттерн можно
Паттерны помощью паттерна или текстуры. В использовать с помощью панели Layer Style.
Photoshop это очень просто: сначала Только не добавляйте его в самый верх
нарисуйте квадратики которые равномерно слоев. Экспериментируйте с Blend Modes и
повторяются, затем выделите их и зайдите в Opacity чтобы менять взаимодействие
Edit > Define Pattern чтобы сохранить паттерна с дизайном.

Pixel Perfect Precision 185


Не хватает вдохновления на подбор цветов
Kuler или палитр? Попробуйте Kuler. Это удобное
расширение дает вам возможность смотреть
и пробовать цветовые схемы, которые
сгенерировали другие юзеры, а также
создавать собственные. Прекрасно!

Pixel Perfect Precision 186


В Mac OS X включено несколько удобных используются. Для использования
Character Viewer шрифтовых утилит которые появляются удостоверьтесь что ввод текста активен и
после активации Show Keyboard & Character сделайте даблклик на знак который хотите
Viewers в меню в System > Preferences > вставить. Если ничего не происходит значит
Keyboard. Первая — Character Viewer выбранного знака нет в текущем шрифте.
поможет вам найти знаки, которые редко

Pixel Perfect Precision 187


Keyboard Viewer это младший брат Character Option чтобы увидеть другие доступные
Keyboard Viewer Viewer. Более простое приложение которое варианты. Хороший способ научиться
показывает вам все буквы и символы вводить ударения и символы прямо с
доступные к вводу с клавиатуры. Нажатие клавиатуры.
на кнопку с вставляет соответствующий
символ; зажмите модификатор Shift или

Pixel Perfect Precision 188


Существует множество хоткеев для наоборот — (минус) или Option вырежет из
Шорткаты ускорения работы Path tool. Комбинируйте шейпа. После рисования, добавляйте или

Контуры контуры двух существующих Shape слоев,


выделяя их и нажимая Command + E. После
убирайте новый контур из существующего
выделяя его и нажимая - (минус) или +
рисования контура, соедините его с другим (плюс).
нажимая + (плюс) или держа Shift; и

Pixel Perfect Precision 189


Текст

Если вы редактируете контур с помощью скроет текущее выделение, удобно для


Шорткаты

 Direct Selection и не хотите случайно просмотра текущего шейпа без контуров на

Контуры
выделить другие Shape слои в документе, границах.
нажмите Q чтобы войти в Quick Mask Mode,
которая изолирует слой над которым вы
сейчас работаетете. Command + Shift + H

Pixel Perfect Precision 190


Some Text Some Text


Шорткаты
Photoshop CC включает в себя апдейт позволяет менять несколько шейпов за раз.
взаимодействия Direct Selection с путями, Даблклик на пути изолирует его, а второй

Контуры делая их редактирование проще. Теперь вы


можете выбрать Select: All Layers в панели
даблклик выходит из этого режима.

Options кликнуть и потянуть для выбора


нескольких точек на нескольких слоях, что

Pixel Perfect Precision 191


Во время создания выделения, зажмите Используйте квадратные скобки, [ и ], для
Шорткаты пробел для того чтобы двигать точку изменения размера кисти. Shift + [ или ]

Выделение и выделения. увеличит или уменьшит жесткость кисти.

кисти
Pixel Perfect Precision 192
Выберите слой и нажмите передний слэш / Скрывайте или раскрывайте все слои в
Шорткаты чтобы заблокировать его прозрачность. На документе нажимая и удерживая Command,

Слои Shape слоях это заблокирует положение. и нажимая на иконку любого из


раскрывающихся списков.

Pixel Perfect Precision 193


Чтобы скрыть все слои кроме одного Чтобы показать или скрыть слои по
Шорткаты зажмите клавишу Option и нажмите на очереди, зажмите и потяните курсор через

Слои иконку видимости. необходимые иконки видимости.

Pixel Perfect Precision 194



Шорткаты
Переключение между режимами экрана (F)
 Смещение границы выделения (стрелочки)

Переключайтесь между нормальным, Смещает выделение на 1px.

Клавиатура полноэкранным с таскбаром, и


полноэкранным с черным фоном. Смещение границы выделения (Shift +
стрелочки)

Hand tool (пробел)
 Смещает выделение на 10px.
Временно активирует hand tool при зажатии:
используется для движения по Смещение слоя (Command + стрелочки)

изображению. Смещает выделенную область или слой на
1px.
Переключение между открытыми
документами (Command + )
 Смещение слоя

Работает как Command + Tab в Mac OS X, (Command + Shift + стрелочки)

переключаясь между открытыми Смещает выделенную область или слой на
документами. 10px.

Цвет холста (Space + F)
 Выбрать все слои (Command + Option + A)

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

Переключение цветов (X)
 Выбрать слой как выделение



Меняет местами цвета заднего и переднего (Command + клик на миниатюру слоя)

планов. Выделение по форме слоя.

Цвета по умолчанию (D)
 Включить/выключить layer mask



Меняет цвет заднего и переднего планов на (Shift + клик на маске слоя)

черный и белый Включает и выключает маску.

Pixel Perfect Precision 195



Шорткаты
View mask (Option + клик по маске )
 Переключение между режимами
Показывает маску слоя как отдельное наложения


Keyboard изображение, которое может быть


отредактировано как канал.
(Shift + + (плюс) or − (минус))

Переключает режимы наложения.

Загрузить маску как выделение



(Command + клик по маске)

Загружает маску как выделение.

Инвертировать выделение (Command +


Shift + I)

Инвертирует выделение: то что было
выделено становиться не выделенным и
наоборот.

Убрать выделение (Command + D)



Убирает текущее выделение.

Вернуть выделение (Command + Shift + D)



Возвращает последнее выделение.

Дублировать слой (Command + J)



Дублирует выделенный слой.

Изменить прозрачность слоя (цифры 1–0)



Изменяет прозрачность слоя с шагом в 10%.

Pixel Perfect Precision 196


Станьте мастером Photoshop, создавая которые часто используются в дизайне
Шорткаты кастомные клавиатурные шорткаты с интерфейсов. Будет не лишним отключить

клавиатуры и помощью диалога Edit > Keyboard Shortcuts.


На скриншоте выше вы можете увидеть
Command + Q, чтобы уберечь себя от
случайного выключения Photoshop.

меню несколько новых шорткатов для Align >


Vertical Centers и Align > Horizontal Centers,

Pixel Perfect Precision 197


ILLUSTRATOR
Illustrator используется когда векторные образом они сохраняют изменчивость, а мы
Вступление способности Photoshop не подходят для имеем доступ к широкому набору эффектов.
задания. Мы используем Illustrator для
создания сложных шэйпов, которые затем
обрабатываются в Photoshop. Таким

Pixel Perfect Precision 199


Необходимо правильно настроить цветовые Working Space > RGB выставлен на Monitor
Цветовые профили Illustrator. К примеру, вы можете RGB а в Display and Color Management

настройки захотеть добавить цвет для векторных


набросков, которые соответствуют дизайну
Policies > RGB выключен.

Illustrator в Photoshop. Зайдите в Edit > Color Settings


(аналогично Photoshop), удостоверьтесь что

Pixel Perfect Precision 200


В Illusrator есть несколько настроек, которые радел Units и выставьте General и Stroke в
Настройки можно изменить для улучшения пиксельной Pixels, это значит что все ваши размеры
четкости. Первая — выставить увеличение с сейчас будут базироваться на пикселях. Так
клавиатуры равное 1px, чтобы клавиши как цифровой шрифт все еще измеряется в
стрелочек слегка подталкивали шейпы и Points, этот пункт мы не трогаем.
точки. Как только это сделано — идите в

Pixel Perfect Precision 201


Как и в Photoshop вам возможно будет
Сетка удобно выставить сетку базирующуюся на
10px gridlines с 10px разделителями. Эти
настройки можно найти в Preferences >
Guides & Grid.

Pixel Perfect Precision 202


Да, вы угадали, не забудьте включить Snap
Привязка к сетке to Grid и здесь. Расположение аналогично
Photoshop — меню View.

Pixel Perfect Precision 203


Иногда хочется взбунтоваться и разбить прямоугольный треугольник под ней как на
Умные пиксельную сетку. В этих случаях Smart примере, включите Smart Guides и выберите

направляющие Guides предоставляют удобную


альтернативную форму привязки (snapping).
Pen tool. Теперь можно очень точно
привязаться к точке, где два объекта
Anchor точка должна располагаться под пересекаются и добавить туда anchor point.
углом в 45° градусов на кругу. Расположите

Pixel Perfect Precision 204


Плохо Хорошо

Панель Transform — лучший друг значений, любая трансформация одного из


Точность пиксельного снайпера. С помощью него вы пространств сразу же исправит второе, с
можете узнать насколько идеальны размер такой же пропорцией, сохраняя объект в
и позиционирование всего шейпа (верхняя пропорции.
линия) или отдельной точки (нижняя линия).
Также, используя опцию link для W и H

Pixel Perfect Precision 205


Встречайте главного злодея Illustrator! настроек). При включении эта опция
Выравнивание по Убедитесь что Align New Objects to Pixel Grid выравнивает объекты по основной

пиксельной сетке выключена в меню панели Transform и для


всех существующих шейпов Align to Pixel
пиксельной сетке, что звучит неплохо, но
представьте как она начнет самостоятельно
Grid не задействована (выберите Show передвигать объекты при добавлении
Options в меню панели для показа этих обводки (stroke).

Pixel Perfect Precision 206


Pixel Preview On Pixel Preview Off

Еще одно свойство к которому следует


Pixel Preview настороженно относиться. При включении
View > Pixel Preview, не попиксельно четкие
шейпы могут отображаться так, как будто
они являются таковыми.

Pixel Perfect Precision 207


Никаких особых поводов для волнения по что размытие не появляется когда шейп
Предпросмотр этом пункту, но иногда Illustrator рендерит импортируется в Photoshop.

размытия шейп и размывает углы даже при


попиксельных размерах в окне Transform.
Похоже что это баг самого софта. Хорошо

Pixel Perfect Precision 208


На самом деле не стоит придумывать имя
Организация каждому слою в Illustrator если вы просто
используете его для рисования шейпов, но
старайтесь хотя бы объединять всё в
группы, а не раскидывать по пространству
размером с футбольное поле.

Pixel Perfect Precision 209


АППЕНДИКС
The PPP Extras включает библиотеку
PPPatterns простых паттернов доступных в виде
Photoshop presets (Patterns/PPPattern.pat)
или pre-applied Effects (Patterns/
PPPattern.psd).

Pixel Perfect Precision 211


MMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMM

переведено в

HEARTBEAT

Вам также может понравиться