Pixel Perfect 

Abobe Illustrator настройки

Необходимо правильно настроить цветовые профили Illustrator. К примеру, вы можете
захотеть добавить цвет для векторных набросков, которые соответствуют дизайну
в Photoshop. Зайдите в Edit > Color Settings (аналогично Photoshop), удостоверьтесь что
Working Space > RGB выставлен на Monitor RGB а в Display and Color Management
Policies > RGB выключен.

Edit > Preferences > Units > General → Pixels
Edit > Preferences > Units > Stroke → Pixels
Edit > Preferences > Guides & Grid > Gridline every → 1px
Edit > Preferences > Guides & Grid > Subdivisions → 1px
Edit > Preferences > General > Keyboard Increment → 1px
View > Snap to Grid
View > Snap to Point
View > Pixel Preview

Abobe Photoshop настройки

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

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

сильно помогает в выравнивании. Подменю Snap To позволяет вам изменять объекты, которые Photoshop использует для привязки.

Правила

1.  В процессе разработки тяжело контролировать цвет (в отличии от дизайна), особенно когда он смешивается с кодом, указывающим те же исходные цвета. Может возникнуть несоответствие. Лучше проигнорировать эту процедуру, и проверить на устройстве — в отличие от печати это быстро и ничего не стоит.
2. Для вертикального выравнивания текста с объектом лучше использовать x-высоту, чем высоту заглавной буквы, так как это визуально смотрится лучше. В плохом примере выше вы видите, что основная визуальная высота шрифта, расположенная в зоне x-высоты находится ниже чем квадрат. Исключением будет текст в котором только прописные или цифры — они могут быть выровнены по заглавным, так как у них нет подстрочных символов.
3. Некоторые графические редакторы рисуют треугольники, которые по-умолчанию не являются равносторонними. Такие треугольники имеют равную длинну по осям x и у. Чтобы быстро сконвертировать такой треугольник в равносторонний, возьмите 86.6% от текущей высоты.
4. Если у вас в списке больше 3-4 пунктов, лучше использовать нумерованный список вместо маркированного.
5. При создание дизайнов для touch-устройств, всегда задумывайтесь об удобстве работы пальцами. Мы всегда делаем наши дизайны с минимальной тач-зоной в 7мм х 7мм, что примерно составляет площадь контакта пальца с экраном. Мы также оставляем 2 миллиметра между элементами, чтобы избежать случайных нажатий. Если вы делаете элементы для большого пальца, делайте их шире 25 мм, что примерно равно ширине пальца взрослого человека.
6. Когда ввод данных является частью процесса, дайте пользователю возможность проверить данные перед отправкой, и, если это будет необходимо, возможность вернуться назад и исправить их. 
7. Предоставляйте пользователям обратную связь для чувства поддержки при выполнении различных задач. Нет ничего хуже, чем размышление о том, зависло приложение или нет, в момент обработки запроса, или нажатие на кнопку, которое ничего не делает. Обратная связь может быть в форме лоадера, сообщения, которое уведомляет пользователя о происходящем, звука, который даст знать, что действие осуществляется.
8. Старайтесь предоставлять обратную связь в нескольких формах. К примеру, полагаться исключительно на звук для предупреждения значит, что глухие или расположенные в шумном окружении пользователи не поймут что уже что-то произошло и требует их внимания.
9. Минимальный размер шрифта который следует использовать — 12pt, хороший размер для чтения — 16pt (1em). Сделайте текст слишком маленьким, и пользователи будут страдать, пытаясь разобрать что написано, особенно на не особо резких экранах с маленькой плотностью.
10. Придерживайтесь длины строки ниже 80 символов. Если сделать строку длиннее, то пользователь будет теряться где начало и где конец и текст будет тяжелее читать. Хороший диапазон к которому можно стремится — 45-75 символов, с оптимальной длинной в 66 символов включая пробелы 
11. Достаточный отступ между строками позволяет глазу четко различать их, что в свою очередь помогает с движением в процессе чтения. Рекомендуемый отступ (он же leading) это 1.5 размера шрифта. Таким же образом отступ между параграфами должен равняться 1.5 отступам между строками.
12. Избегайте двигающегося или мигающего теста, это может сильно раздражать людей с дислексией или слабовидящих. Эти эффекты могут вызвать эпилептические припадки, что также никуда не годиться.
13. Старайтесь использовать наглядные иконки и цвета, чтобы упростить определение важного контента на странице. Цветовое кодирование удобно для идентификации различного типа контента — особенно полезно для пользователей с когнитивными нарушениями. И не забывайте про последовательность.
14. Кстати, не надейтесь только на цвет для передачи сообщения. Всегда добавляйте что-то еще. У некоторых мобильных устройств проблемы с контрастностью, либо условия использования далеко не идеальны, что может повлиять на видимость и цвета. Не забывайте, что около 8% мужчин страдают от различных форм цветовой слепоты, что может усложнить процесс распознания фигур, единственное отличие которых — цвет.
15. Существует множество инструментов для проверки цветового контраста: Colour Contrast Analyser и Jonathan Snook’s webbased checker — просто введите два цвета. Как минимум вы должны проходить стандарт АА! Конечно ААА лучше, но для него требуется намного больше контраста, что может навредить дизайну. Результаты могут отличаться для большого текста, больше 18 пунктов (или жирного и больше чем 14 пунктов)
16. В меню View > Proof Setup спрятаны самые распостраненные формы цветовой слепоты — отличный метод быстро проверить есть ли проблемы с контрастом в выбранной палитре. 
17. Прежде чем начинать любой дизайн, узнайте как можно больше о предназначаемой платформе приложения. Размер экрана — хорошая точка отправления, также как и плотность пикселя. Не забудьте про битность (сколько цветов на самом деле покажет экран) и любые ограничения во взаимодействии и частоте кадров в анимации. Среда разработки также может вносить ограничения на эффекты рэндеринга и шрифты, так что проверьте и это.
18. Хорошо иметь наборы стилей по проекту. В них собраны все элементы и стили. Можно проверить что все выглядит целостно и затем отправить разработчику в виде справочного руководства. Также если этот файл актуален, то его можно использовать как стандарт для всех стилей и элементов проекта, не нужно проходить через каждый элемент и вносить изменения. Все что в этом документе — верно, а любые вариации можно проигнорировать. Это окрыляет!
19. Система имен файлов играет большую роль в создании хорошей организационной структуры. В начале проекта пообщайтесь с разработчиками и узнайте как лучше называть файлы: как правило у них уже есть предпочитаемый метод и вы можете использовать его. Хорошо если имена базируется на иерархической системе, которая начинается с широкой характеристики компонента с последующим добавлением большего количества информации. В конечном итоге вы можете получить что-то типа: type_location_identifier_state Type — это категория к которой принадлежит компонент, к примеру: bg(background) btn (button) icn (icon) &  img (image) Следующим шагом будет добавление экрана или места где этот компонент появляется (global значит что он используется в нескольких местах): bg_help btn_home icn_global Затем добавьте уникальный идентификатор. К примеру, кнопки на экране home, которые будут добавлять или удалять документы должны быть названы: btn_home_new btn_home_delete Если у компонента есть несколько состояний — добавьте их в конец: btn_home_new_default btn_home_new_highlighted Представленная система использует нижний регистр и подчеркивания вместо пробелов в именах. Этот метод мы используем в ustwo. Существует метод под названием CamelCase, в нем не используются пробелы а разделителем выступает верхний регистр: BtnHomeNewDefault BtnHomeNewSelected
20. До того как отправлять файлы разработчику, проверьте все ли на месте, а затем перепроверьте все еще раз, для Проверь уверенности. Исходники - Состояния - Набор стилей - Процесс
21. Мы не можем сказать что все шаги на одном экране — хорошая идея, но и не стоит забывать о том, что большое количество шагов путает юзеров. Старайтесь не выходить за лимит четырех шагов, иначе юзер может заблудиться
22. Чтобы избежать разницы в цвете между Photoshop и Mac OS X, вы должны правильно выставить цветовые настройки. В первую очередь убедитесь что в System Preferences > Displays > Color установлено устройство, которое вы сейчас используете. В нашем случае — Color LCD
23. Затем в Photoshop зайдите в Edit > Color Settings … и поменяйте Working Spaces > RGB на Monitor RGB - Display. Также отключите Color Management Policies > RGB. Также в Save for Web опция Convert to sRGB должна быть отключена, и Preview должно быть выставлено в Monitor Color. После этого ваши цвета должны быть одинаковыми.
24. Мы любим Shape Layers — весь наш рабочий процесс построен на них. Так как это векторы, они полностью редактируемы: можно масштабировать, изменять форму без потери качества, и они менее прожорливы в плане ресурсов в отличие от Smart Object или растра. Победный вариант! Также старайтесь использовать вектора в той части дизайна, где вы можете инстинктивно использовать растр. Пример— маски слоя. Это значительно ускорит универсальность и быстродействие исходника. Еще один совет — использовать немаскированный Shape Layer для бэкграундов, что добавляет преимущество того, что заливка будет автоматически растягиваться при увеличении размера канваса. Супер!
25. Будьте аккуратнее с зумом в Photoshop CS5. При использовании клавиатуры для переключения точек сдвига у слоя Shape — объем вытягивания изменяется в зависимости от зума. Чтобы гарантировать сдвиг на 1px, установите масштаб 100% и нажмите стрелочку 1 раз. При зуме в 200% точки сдвинуться на 0.5px (т.е. наполовину), создавая размытые углы — не хорошо. В CS6 точки двигаются на 1px вне зависимости от зума. Отключите привязку для точности.
26. Бесплатное дополнение к Photoshop под названием GuideGuide поможет в автоматизации создания сетки. После установки вы можете найти его в меню Window > Extension. Изменяя параметры ввода, длинну column и gutter, или если вы уже допустим нанесли их на кусочек бумаги, вы можете просто ввести значения и автоматически получить нужную сетку. Для каждого инпута есть подсказки.
27. Отличная практика — проверять дизайн на предназначенных девайсах. Существует множество приложений предоставляющих предпросмотр прямо из Photoshop, т.е. не нужна вся эта беготня вокруг сохранения файлов и копирования их на телефон. Стоит обратить внимание на Skala Preview для iOS и Android и Android Design Preview для... ну, я думаю вы поняли для чего.
28. Вне зависимости от типа используемого градиента убедитесь что опция Dither активирована. Это поможет сгладить переход цвета и избежать полосатости. 
29. Хоть вы и можете выбрать опцию Scale Styles когда меняете размер всего документа через Image Size, бывают ситуации, когда вы хотите увеличить масштаб (scale) определенных слоев и эффектов. При изменении размера одного объекта, стиль не подстраивается по размеру автоматически. Можно использовать опцию Scale Effects для решения этого вопроса. Вам необходимо знать процентное изменение оригинального шэйпа чтобы подогнать размер. Эту опцию можно найти нажав правой кнопкой на иконку fx у слоя.
30. К счастью, Photoshop позволяет конвертировать Point Text в Paragraph Text и наоборот, через меню Text > Convert to Paragraph Text / Convert to Point Text, либо кликнув правой кнопкой по слою, выбирая ту же опцию. В CS5 вы можете сделать это в меню Layer > Type.
31. В Photoshop есть несколько типов сглаживания, попробуйте все и определите вариант, который дает лучший рендеринг и четкость. Как правило, Crisp довольно универсален. Если вы работаете с текстом, который будет генерироваться где-то в другом месте, то выберите опцию которая максимально соответствует сглаживанию целевого экрана.
32. Попробуйте сконвертировать файл в 8bit PNG, если вам не нужна прозрачность. В примере выше нет потери качества, при этом размер файла уменьшился больше чем наполовину.
33. ImageOptim может сэкономить еще больше килобайт пространства. Просто перетащите файлы в главное окно и наблюдайте за процессом. Приложение работает с изображениями форматов PNG, JPEG и GIF, удаляя ненужные метаданные, такие как компоненты и цветовые профили, также оптимизируется используемая компрессия. Нет особого смысла в использовании ImageOptim при разработке для iOS, подробнее в статье PNG compression and iOS apps.
34. Круговое затухание очень просто сделать используя эффект Stroke. Фишка в использовании Fill Type: Gradient и Style: Angle
35. Если вы хотите быстро придать объекту блеск, попробуйте использовать эффект Inner Shadow белого цвета с маленькой прозрачностью. Будьте аккуратны, так как его форма будет базироваться на верхнем углу родительского слоя, это значит что любые непрямые секции будут отражены в блеске.
36. Существует множество хоткеев для ускорения работы Path tool. Комбинируйте контуры двух существующих Shape слоев, выделяя их и нажимая Command + E. После рисования контура, соедините его с другим нажимая + (плюс) или держа Shift; и наоборот — (минус) или Option вырежет из шейпа. После рисования, добавляйте или убирайте новый контур из существующего выделяя его и нажимая - (минус) или + (плюс).
37. Встречайте главного злодея Illustrator! Убедитесь что Align New Objects to Pixel Grid выключена в меню панели Transform и для всех существующих шейпов Align to Pixel Grid не задействована (выберите Show Options в меню панели для показа этих настроек). При включении эта опция выравнивает объекты по основной пиксельной сетке, что звучит неплохо, но представьте как она начнет самостоятельно передвигать объекты при добавлении обводки (stroke).
38. Еще одно свойство к которому следует настороженно относиться. При включении View > Pixel Preview, не попиксельно четкие шейпы могут отображаться так, как будто они являются таковыми.