Как повысить качество своих работ

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




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

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


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

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

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


Масштаб 2:1

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

Работайте с SVG


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

Ну. И что?
Реклама
Комментарии 16
    –3
    ну для начала надо перестать использовать для этого фотошоп
      +1
      Ну а пока им пользуются это актуально)
        0
        Спс, про некоторые вещи удобные даже и не предполагал, что они есть.
        0
        Фотошоп не так уж и плох, к тому же каждый выбирает то, что ему удобно, и в чем он более компетентен. И хорошая практика актуальна для любого инструмента

        Вообще хотелось спросить не совсем по теме — интересно каким образом делались анимации (инструмент). Все ищу простой инструмент, где можно было бы легко и быстро из скриншотов собирать анимацию
        0
        Пробовал в качестве альтернатив Adobe XD и Figma. Первый слишком убог по возможностям, но вполне удобен для макетирования, а второй какой-то тормозной совсем, плюс зависит от веба. По удобству — да, они местами дают фору, но по возможностям как-то уж совсем не зашло.

        +1
        в этом вся суть раздела «Дизайн» на Хабре. человек пишет о том, что в наши дни использовать PS для разработки интерфейсов неэффективно, а его тихо и спокойно сливают. так держать, Хабр!
          0
          Его сливают просто из-за того, что комментарий не уместен)
            0
            а писать в 2018 про артборды, svg, 2x уместно? Последний пункт вообще — мне казалось что уже даже те, кто используют ps передают макеты в zeplin/avacode
        0
        Советы дельные. Я придерживаюсь всех их уже давно. Фотошоп конечно крутой, но честно сказать он уже не совсем то что нужно для рисования интерфейсов и сайтов. Сейчас в рисовании сайтов и интерфейсов преобладает векторная графика и проще с этим работать в Фигме или Скетче. Конечно порой приходится разрываться и ретушь делать в Фотошопе а потом готовую картинку переносить в Фигму или Скетч, но это мелочи по сравнению с еффективностью рисования и резиновой адаптации интерфейсов и создания кликабельных прототипов и выуживания кода для фронтов. Фотошоп таких возможностей не дает. Я от Фотошопа в этом плане отказался буквально недавно. Взял я месяц назад один проект, начал рисовать его в Фотошопе по старинке, но в процессе работы столкнулся с некоторымы трудностями которые фотошоп решить не мог и мне пришлось дизайн перерисовать в Фигме и дизайн рисовался гораздо быстрее и качественнее. Я никого не призываю переходить на не знакомые вам инструменты но если вы хотите знать не только Фотошоп но и другие программы, расти как профессионал в этом деле, вы просто обязаны просто попробовать и решить для себя что для вас удобнее. Не всем конечно заходят Скетч и Фигма, я знаю некоторых супер профи которые по сей день рисуют макеты в Фотошопе и сами говорят о том что такие программы как Фигма и Скетч не позволяют им раскрыть креативность в рисовании. Мне и самому поначалу было тяжело креативить в тих программах, на то чтобы привыкнуть нужно время, так как сама механика этих программ не плохо так отличается от механики работы в Фотошоп. Когда я впервые открыл Фигму сразу подумал, — Ну как в этом можно рисовать профессиональный сайт? Это чуть ли не Паинт, но на практике там собраны только те инструменты которые используются в построении интерфейсов, ведь мы же в Фотошопе используем только 10% всего функционала.
          0
          да уж… люди еще в Photoshop работают, он вообще больше для фотографов, для дизайна есть Figma, XD и т.д.
            0
            Ощущение такое, что толпа, которая говорит о фотошопе только как об устаревшем не знают многого из его функциональности, что обеспечивает удобство. Да, много-экранные проекты, в которых важно хранить и использовать символы, лучше делать в Sketch. Но это не значит, что он удобнее. Я использовала Sketch в течение долгого времени, но мне кажется, что его удобство и качество интерфейса просто на голову уступает Фотошопу (за исключением, конечно, символов). Какой-нибудь pixel perfect, или даже что-то аккуратное в нем сделать просто мучение потому что drag просто кошмарный, элементы нормально не выровнять. Когда включены направляющие, с их толщиной они очень мешают. Много элементов интерфейса / простейших действий, которые просто раздражают после Фотошопа.

            Чтобы было удобнее работать в Фотошопе, используйте кастомные shortcuts и move tool (просто шок бывает, когда видишь, как дизайнер с опытом 3-5+ лет выбирает слои кликая правой кнопкой мыши/layers panel). В статье много о том, как важно правильно называть / расставлять в правильном порядке слои. Не совсем понятно, почему это так важно, если любой слой вы можете выбрать в один клик с move tool.
              0

              Лично для меня отрисовывать макеты для веба в Photoshop похоже на пытку. Всё дело в измерениях, они работают крайне не удобно. Иногда даже приходилось измерять с помощью инструмента "Прямоугольная область". После такого, я был вынужден поставить на windows виртуальную машину с MacOS и установил Sketch.


              А в целом с автором во всём остальном, я согласен.

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

              Самое читаемое