Photoshop CC 2014: Что нового для веб-дизайнеров?

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

Прежде всего, я хочу выделить основные усовершенствования Adobe, наиболее полезные для веб-дизайна. Это:

  • Внешние связанные смарт-объекты
  • Композиции слоёв
  • Умные быстрые направляющие
  • Интеграция с сервисом Typekit
  • Поиск шрифта

Внешние связанные смарт-объекты

Использование смарт-объектов позволяет применять неразрушающее редактирование, когда все изменения, произведённые с изображением, полностью обратимы. Новшество версии CC 2014 заключается в том, что Вы можете сохранять смарт-объект непосредственно в файле PSB на компьютере и использовать его в одном или нескольких проектах. Изменение сохранённого на компьютере смарт-объекта вызовет изменение во всех проектах Photoshop, которые на него ссылаются. Такой файл PSB называется Linked Smart Objects.

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

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

И изменение в этом PSB вызовет изменение смарт-объектов во всех связанных с ним документах PSD.

Давайте рассмотрим это на практическом примере. В документе PSD создадим смарт-объект из слоя, назовём его flower:

создание смарт-объекта Photoshop CC 2014

Преобразуем слой flower во внешний связанный смарт-объект (Linked Smart Objects), для этого кликаем правой клавишей мыши по слою с объектом в панели слоёв и нажимаем на строку «Преобразовать в связанные…» (Convert to Linked…).

Правый клик по слой в панели слоёв:
преобразование во внешний смарт-объект

Появится новое окно, где Вы можете выбрать место для сохранения и имя для Вашего внешнего связанного смарт-объекта:

сохранение внешнего смарт-объекта

Нажимаем «Сохранить».

В панели слоёв значок смарта изменился, символ в правом нижнем углу обозначает связку:

Linked Smart Object

Давайте для примера создадим новый документ и загрузим в него смарт-объект. Я создал документ 700 на 700 пикселей с фоном с чёрно-белым градиентом:

пример применения смарт-объекта

Идём Файл —> Поместить связанные (File —> Plase Linked).

добавление в документ внешнего смарт-объекта

Результат:

внешний связанный смарт-объект в файле

Для наглядности поместим рядом оба документа и откроем flower.psb, являющийся внешним смарт-объектом, он в центре снизу, а справа от него панель слоёв:

связанный смарт объект для двух документов

Теперь давайте попробуем изменить файл flower.psb. Я изменю цвет цветоложа ромашки путём добавления корректирующего слоя, после чего сохраню изменения, нажав Ctrl+S. В результате встроенные смарт-объекты в обеих документах также изменились:

изменение связанного смарт-объекта

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

Композиции слоёв

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

Примером может послужить визитная карточка с двумя композициями слоёв. Первая версия может иметь логотип слева, и текст справа, в то время как во второй версии логотип расположен справа, и текст слева. Но наиболее полезны «Композиции слоёв» веб-дизайнеру при создании макета сайта, т.к. есть возможность работать с разным положением элементов. «Композиции слоёв» получили значительные улучшения в Photoshop CC 2014.

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

Интерфейс диалоговой панели «Композиции слоёв» пополнился новыми кнопками:

Композиция слоёв Photoshop CC 2014

Я нарисовал простенькую визитку, состоящую из четырех слоёв и сохранил эту композицию:

сохранение композиции слоёв

Потом изменил положение объектов (логотипа и имени) и развернул фон. Результат:

переключение композиций слоёв

Кроме этого, в Photoshop CC 2014 мы можем сочетать смарт-объекты с композициями слоёв. Т.е. изменения в смарт-объекте тоже записываются композициями.

Умные направляющие (Smart Guides)

Любой веб-дизайнер знает, как важно правильно выровнять между собой элементы сайта и задать между ними нудное расстояние с точностью до пикселя. К счастью, в Photoshop CC 2014 Вам не нужно беспокоиться об этих проблемах, с появлением новых умных направляющих не требуется создания сложных сеток и вспомогательных шаблонов.

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

Чтобы начать использовать Smart Guides, выберите инструмент «Перемещение» (Move Tool), и зажмите клавишу Ctrl. Активируйте слой с позиционируемым элементом, наведите курсор на элемент другого слоя и Photoshop покажет Вам расстояние до краёв элемента.

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

умные направляющие в Photoshop CC 2014   смарт-направляющие в Photoshop CC 2014

Но это далеко не все возможности смарт-направляющих. Более подробно об этом рассказано эдесь.

Улучшенная интеграция с Typekit

Не обошли обновления и инструмент «Текст». Одним из наиболее заметных новых возможностей является улучшенная интеграция с сервисом Typekit. Есть две главных особенности в этой области, это фильтрация по принадлежности шрифта и значок-ссылка на страницу сервиса слева от названия шрифта:

выбор шрифтов в Photoshop CC 2014

Подробнее можно прочитать в справке Photoshop на русском языке.

Поиск и анонс шрифтов

Наконец-то, не прошло и 20 лет, как Photoshop начал улучшать инструменты выбора шрифта. В версии Photoshop CC 2014 инструменты поиска и предварительного просмотра шрифтов проработаны весьма достойно.

   Поиск шрифтов
Для поиска шрифта достаточно ввести несколько букв его названия в окно выбора, Photoshop отобразит все шрифты, имеющие в названии эту комбинацию букв:

поиск шрифтов в Photoshop CC 2014

   Предварительный просмотр шрифтов
В новой версии, наконец-то, имеется возможность посмотреть, как будет смотреться тот или иной шрифт в документе без кучи переключений. Иными словами, я могу спокойно, крутя колёсико мыши или передвигая курсор, подобрать нужный шрифт методом тыка, а что ещё нужно веб-дизайнеру для счастья? Для смены шрифтов даже ненужно выделять все буквы, достаточно кликнуть по текстовому слою, открыть список и тащить курсор по списку без нажатия на клавишу мыши. Прокручивать список удобно колёсиком мыши, шрифт в документе при этом не меняется:

предварительный просмотр шрифта в документе CC 2014

В статье рассказано, конечно, далеко не обо всех новшествах CC 2014. Об остальных улучшениях читайте на страницах нашего сайта.

Владелец данного сайта. Графический дизайнер, специалист по Фотошопу с опытом 10+ лет. Также веду канал о графическом дизайне на Ютуб и развиваю тематическое сообщество во ВКонтакте. Связаться со мной можно через комментарии, форму обратной связи или по электронной почте [email protected]

Оцените автора
( 27 оценок, среднее 5 из 5 )
RuGraphics
Добавить комментарий