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

Некоторые из читателей скажут: «О, Боже, каждый настраивает, как хочет, неужели еще статью писать об этом?»

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

Мобильное удобство с Adobe Comp CC

Adobe Comp CC отличный вариант для быстрого начала работы над новым проектом. Это может быть дизайн, графика, UX/UI решения и прочее. Да, приложение мобильное, но даже в нем можно настроить сетку, добавить разное содержание, использовать форматирование шрифтов Typekit, графику, фотографии. Главное же в том, что экспортировать готовый проект можно сразу в Photoshop CC  и продолжать работу в нем. Иными словами, одно дело сидеть перед монитором, другое – на диване с планшетом (не графическим) в руках и стилусом.

Умные установки

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

Но можно дополнительно и улучшить все и сразу. Переходим в меню Редактирование - > Настройки и выбираем категорию «Единицы измерения и линейки». Выбрать параметры можно разные, но целесообразно, ввиду уже принятых стандартов, назначить измерение Линеек в пикселях. Иногда этот параметр задается уже предустановленным, иногда нет. Открыть и проверить будет не лишним. Таким образом, Линейки всегда будут измеряться в пикселях независимо от выбранного профиля (рабочего пространства).

Теперь открываем раздел Настройки - > Производительность. Находим «История и кеширование» и видим, что существует несколько наборов по оптимизации работы Photoshop CC. Если выбрать Веб-дизайн, то уровень кеша будет 2, а размер фрагмента 128 КБ, если работу с фотографиями, то параметры изменятся на 4 и 1024 КБ соответственно. Данная оптимизация влияет на уменьшение размера файлов при большом количестве слоев. То есть, вы можете выбрать предустановки. Можете их даже отрегулировать самостоятельно. И зависит это от вашей конфигурации РС.

Запустив Photoshop CC и не создавая/открывая никакого документа, буквально в пустом рабочем пространстве, нажмите T, выбрав инструмент Текст. На панели под горизонтальным меню можно выбрать шрифт, размер и прочее. Теперь это – установка по умолчанию для всех новых документов. Даже если перезапустить приложение, установки не изменятся. Это удобно в целом.

 Монтажные области

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

  • Нажмите Alt + проведите курсором по холсту. Выбранный холст дублируется.
  • На панели Слои выделите слой, нажмите Alt и мышкой перенесите выбранный слой вверх или вниз. Слой дублируется.
  • Выберите монтажную область на панели слоев и нажмите Ctrl+J – область дублируется со всем содержимым.
  • Alt + клик по монтажной области на панели Слоев  – выделяет её. Особенно удобно, если копий много или находятся они друг за другом и хочется их развести в стороны.
  • Экспортировать монтажные области быстро можно через Файл – Экспорт – Быстрый экспорт в PNG.
  • Если выбрать инструмент Монтажная область, зажать Alt и кликнуть по плюсику рядом с областью, то создастся копия её. Если просто по плюсику, то добавиться новая, пустая.

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

Сетки, столбики и строчки

При работе с веб-дизайном без модульных сеток не обойтись. И их можно создавать в самом Photoshop СС. Создайте новый документ нужного вам размера и выберете Просмотр -> Новый макет направляющей. В появившемся диалогом окне вы можете установить горизонтальные/вертикальные направляющие, задать число строк, ширину и высоту, применить сетку для монтажных областей, выбранной области, холста и пр.

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

 

Заготовка фигур на будущее

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

Photoshop СС позволяет сохранить их, и затем использовать много и много раз. Например, нарисуем фигуру, выберем Перо и добавим пару опорных точек. Затем с помощью инструмента Выделение узла придадим форме новый вид.

Переходим на инструмент «Выделение контура», кликаем ПКМ по фигуре и выбираем в появившемся меню «Определить произвольную форму». Это как раз и позволит сохранить фигуру на будущее. Введите её название и нажмите ОК.

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

Полезные клавиши

Любая возможность экономии времени при работе – всегда отлично и всегда всеми приветствуется.  Поэтому напомним:

  • С помощью инструмента Перемещение выберите опцию Автовыбор Слой или Группа на панели. Это позволяет, кликнув по содержимому слоя, выбрать и сам слой.
  • Если Автовыбор выключен, то CTRL+ клик по содержанию делает все то же самое – выделяет слой и содержание.
  • Инструмент Перемещение и включенная опция Автовыбор. Теперь нажмите Shift и кликните несколько объектов. Все они выделятся и слои тоже.

Упрощенный вектор

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

  • Когда вы рисуете для быстрого перемещения узла формы нажмите Пробел и перетащите опорную точку. Затем отпустите клавишу и продолжайте рисовать.
  • Зажатие Alt во время рисования позволяет работать с направляющими и отцентрировать их. То есть прямо во время рисования пером не потребуется переключаться на работу с контурами и узлами. Тем более направляющие сами выровняются на прямой.

  • Для пропорций во время рисования нажмите Shift. Таким образом, кривые будут создавать более плавные.
  • В настройках Photoshop CC откройте Инструменты и установите галочку на параметре «Привязать векторные инструменты и преобразования к пиксельной сетке».  Эта гарант того, что края вашей фигуры будут четче.

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

Копирование настроек

Много времени в веб-дизайне уделяется редактированию одних и тех же форм. Например, если у нас много кнопочек (иконочек и пр.) и вдруг пришлось их все поправить каким-либо образом. Средствами Photoshop CC вполне можно копировать настройки одной формы в другую.

Переходим на панель Слоев, кликаем ПКМ и выбираем Копировать атрибуты фигуры. При этом Фигура должна быть представлена как отдельный смарт-объект на слое. Также можно ПКМ кликнуть по самой фигуре и отдельно скопировать обводку или заливку.

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

Ссылки на объекты

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

Например, создаем проект для устройств с дисплеем Retina (HiDPI) @1x. Как мы помним, объект должны быть высокого качества и большого размера. В идеале, затем ваше оригинальное изображение должно быть в @2x или @3x раз увеличено. Переходим в меню Файл - > Поместить связанные. Теперь если вам необходимо отредактировать объект, то вы кликаете на Редактировать содержимое и изменяете исходный файл объекта.

Когда вы настроили фигуру/объект под нужный размер, цвет и готовы увеличить их в @2x или @3x раз, то достаточно просто выбрать Файл ->Экспортировать как… и в левом меню выбрать нужный параметр. Поверьте, Photoshop CC умеет делать такое и даже префикс в названии даст соответствующий.

Стили слоя

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

Но стили слоя или даже группы слоев можно сохранить. Примените к слою стили и эффекты, перейдите Окно -> Стили -> и ПКМ по иконке меню справа. Выбирайте новый стиль и включаете то, что нужно. Это либо только эффекты, либо наложения, либо и то и другое. И сохраняете. Стиль появился в общей библиотеке и теперь его можно применить к любому иному объекту или даже слою, к тексту.

 

Adobe Preview CC

Завершая работу и наш рассказ, стоит обратить внимание еще на одно мобильное приложение Adobe Preview CC. Удобно оно тем, что позволяет просматривать проекты Phototshop CC на разных iOS устройствах. При этом если в файл PSD вносятся изменения, то на экране iPhone эти изменения сразу же и отображаются. Если у вас также есть и iPad, то и его можно сразу подключить и увидеть, как сайт будет выглядеть.

Завершение

Мы все иногда застреваем в идеях, в работе, в стимуле. Поэтому требуется толчок, нечто, что сподвигнет нас на новые свершения. С новыми функциями, интересными моментами то же самое. Чтобы попробовать самому порисовать Пером и увидеть, как двигаются точки или создавать Стили – нужен стимул, цель, задача, ответ на вопрос: «Зачем мне это нужно?».

Ответ самый простой: Photoshop обладает огромным числом способов экономии нашего времени при проектировании, рисовании. И вполне возможно, какие-то моменты данного материала вам обязательно пригодятся. Профессионалы смогут что-то вспомнить, новички – подчерпнуть новое. И разумеется, это еще не все. Photoshop  может и в CSS описывать слои и объекты, и экспортировать различными способами, и даже слои фильтровать. Но это более всего наглядно и пропустить, в целом, в самом приложении сложно.