Хабрахабр

[Из песочницы] Как повысить качество своих работ

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

Например, я мог делать что-то аккуратно, скрупулёзно, но неправильно, просто из-за отсутствия опыта. Хотя я человек педантичный, мне не всегда это помогало. Вот некоторые из них: Сейчас я постоянно наблюдаю одни и те же проблемы дизайнеров и, что бы помочь, собрал несколько практичных советов.

Используйте монтажные области

Монтажные области в фотошопе

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

Работайте в масштабе 2:1

Масштаб 2:1

Работая в большем масштабе у вас всегда будет небольшой запас. Качество экранов растет вместе с требованиями к графике. Не очень удобно менять outline-иконку размером в 16х16px или писать примечания 11-12 шрифтом и видеть эту рвань.

Соблюдайте правильный порядок слоев

Порядок слоев в фотошопе

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

Используйте цветовое выделение слоев

Цветное выделение слоев в фотошопе

Или все группы разукрашены или все серое. Тут прям две крайности. Например, если у вас много похожих слоев (иконка+текст) или графики, диаграммы, таблицы… Но, если использовать это там, где уместно, то это может стать удобным инструментом.

Выносите сетку отдельным слоем

Сетка на отдельном слое

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

Сворачивайте свойства слоев и групп

Стили слоев и групп

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

Не оставляйте пустые слои или группы

Пустые слои и группы

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

Давайте говорящие имена слоям

Имена слоев и групп

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

Работайте с SVG

Svg иконки в фотошопе

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

Помещайте связанные объекты

Импорт в фотошопе

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

Применяйте обтравочные маски

Обтравочные маски в фотошопе

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

Используйте смарт-объекты

Смарт объекты в фотошопе

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

Добавляйте охранные поля

Охранные поля кнопок

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

Используйте текстовые блоки

Текстовые блоки в фотошопе

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

Не забывайте о сопутствующих материалах

По завершению не забывайте прикладывать шрифты, оригиналы картинок, инфографику, описания… Обычно, на поиск/запрос тратится много времени. Например, часто у меня такая структура:
svg – все иконки;
материалы — картинки, инфографика, шрифты;
from client – то, что изначально пришло от клиента;
includes — связанные части шаблона

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть