Монтажная область в фотошопе – Использование монтажных областей в Adobe Photoshop

Содержание

Создаем рекламный макет в Фотошоп / Фотошоп-мастер

Один из новых инструментов, появившихся в Фотошоп СС 2015, более или менее схож с аналогичным в Adobe Illustrator и называется монтажная область. Данный инструмент позволяет нам создавать несколько страниц в пределах одного документа. Но Монтажная область (artboard) программы Фотошоп является более гибким инструментом, поскольку у нас есть возможность свободно изменять ее размер и расположение.

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

Итак, что мы будем создавать:

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

монтажная область (artboard) будет для нас весьма полезным.

Шаг 1

Запустите ваш Фотошоп CC 2015, нажмите комбинацию клавиш CTRL+N, чтобы создать новый документ. Выберите тип документа (Document Type): Монтажная область (Artboard). Ниже области выбора типа документа вы можете выбрать один из предустановленных размеров монтажной области или установить его вручную, введя цифры в соответствующие окошки Ширина (width) и Высота (height).

Для данного урока были выставлены следующие размеры: Ширина (width) 728 пикселей и Высота (height) 90 пикселей. Когда выставите все необходимые параметры, нажмите ОК.

Шаг 2

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

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

Шаг 3

Нарисуйте прямоугольник, установите цвет заливки (fill) зеленый (#197b30) и отключите обводку (stroke). Теперь нарисуйте длинный прямоугольник. Посмотрите на картинку ниже и используйте ее в качестве образца.

Примечание переводчика: для рисования этих фигур используйте инструмент Прямоугольник (Rectangle tool) в режиме

фигура (Shape).

Шаг 4

Когда вы закончите рисовать прямоугольник, автоматически появится палитра Свойства (Properties). Это так же является одним из нововведений версии Фотошоп СС 2015.

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

Шаг 5

Нажмите сочетание клавиш CTRL+J, чтобы продублировать слой с прямоугольником. Измените цвет заливки на ярко зеленый (#8dc63f), затем, используя инструмент Перемещение (Move tool), сместите его немного влево. За образец возьмите изображение ниже.

Шаг 6

Нажмите сочетание клавиш CTRL+O, затем выберите и откройте изображение блюда. Чтобы выделить блюдо, в данном уроке был использован инструмент Перо (Pen tool). Если вы владеете какими-то другими приемами и инструментами выделения лучше, используйте их. Создав выделение, нажмите сочетание клавиш CTRL+C, чтобы скопировать выделенную область.

Шаг 7

Возвращаемся к нашему документу в монтажной области, нажимаем сочетание клавиш CTRL+V, чтобы вставить изображение нашего выделенного блюда. Перед уменьшением масштаба изображения нашего блюда, сначала преобразуйте его в

смарт-объект (Smart Object).

Шаг 8

Добавьте Тень (Drop Shadow) с помощью добавления Стиля Слоя (layer style). Для этого необходимо сделать двойной клик по слою с блюдом.

Выставьте следующие параметры для Тени (Drop Shadow):

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Непрозрачность (Opacity): 9%
  • Угол (Angle): 90 градусов
  • Поставьте галочку в чекбоксе Использовать Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 7
  • Размах (Spread): 0
  • Размер (Size): 0

Шаг 9

Нажмите ОК, чтобы применить стиль слоя Тень (Drop Shadow). Ниже вы можете посмотреть результат.

Шаг 10

Далее мы будем создавать эффект солнечной вспышки. Выполним его в векторной форме. Для удобства, давайте сделаем это в отдельном документе. создайте еще один документ, установите Ширину (width) и Высоту (height) по 800 пикселей. Нажмите ОК.

Шаг 11

Активируйте инструмент Многоугольник (Polygon tool) и нарисуйте в режиме Фигура (Shape) с его помощью черный треугольник без обводки.

Шаг 12

Нажмите сочетание клавиш CTRL+T, чтобы трансформировать форму нашего треугольника, сделав его более продолговатым. В качестве образца посмотрите на картинку ниже. Не нажимайте пока клавишу

Ввод (ENTER).

Шаг 13

Вновь нажмите сочетание клавиш CTRL+T. С помощью панели настройки инструментов, измените опорную точку на низ-центр (см. скриншот ниже). Поверните треугольник по часовой стрелке (вправо) на 15 градусов. Нажмите ENTER, чтобы применить трансформирование.

Примечание переводчика: чтобы поворачивать фигуру на определенную равную величину (по умолчанию, 15 градусов), удерживайте при этом клавишу Shift, или просто введите в соответствующее окошко необходимое значение.

Шаг 14

Мы можем одновременно повторять трансформирование (поворот фигуры относительно опорной точки) и при этом копировать нашу фигуру с помощью нажатия комбинации клавиш ALT+SHIFT+CTRL+T. Попробуйте, и вы увидите, как это работает.

Шаг 15

Повторяйте копирование и трансформирование (с помощью нажатия комбинации клавиш ALT+SHIFT+CTRL+T) до тех пор, пока вы не получите полное кольцо таких треугольников. (см. скриншот ниже)

Шаг 16

Для того чтобы сделать фон прозрачным, удалите фоновый слой. Сохраните данный документ в формате .psd и задайте ему соответствующее название, например ‘sunburst’, ну или что-то вроде этого.

Шаг 17

Теперь возвращаемся к нашему документу в монтажной области. Вставляем в него наш файл sunburst.psd, используя последовательность команд

Файл — Поместить встроенные (File — Place Embedded).

Шаг 18

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

Шаг 19

Теперь, переведите слой ‘sunburst’ в режим обтравочной маски (clipping mask), для этого нажмите сочетание клавиш ALT+CTRL+G. Далее, измените режим наложения (blend mode) для этого слоя на Мягкий свет

(Soft Light) и понизьте Непрозрачность (Opacity) до 10%.

Шаг 20

Далее, нам необходимо нарисовать круг. Для этого воспользуемся инструментом Эллипс (Ellipse tool) в режиме фигура (Shape). На панели настройки инструмента установите цвет заливки (fill) ярко зеленый (#92c946), а также выставьте обводку (Stroke) в размере 1 пункт (1pt), сплошную, белого цвета (#ffffff).

Шаг 21

Возьмите инструмент Многоугольник (Polygon tool), выберите режим Объединить фигуры

(Combine shape) на панели настройки инструментов (в этом случае, новая фигура будет создана на том же слое, что и круг).

Нарисуйте маленький треугольник. За образец возьмите изображение на скриншоте ниже.

Шаг 22

Измените тип обводки со сплошной на пунктирную, воспользовавшись панелью настройки инструментов.

Шаг 23

теперь, давайте добавим заголовок белого цвета, например, вот такой “DAILY DEALS”, с помощью инструмента Текст (Type tool). Выберите для этого соответствующий шрифт, который наилучшим образом подходил бы теме «Еда». В данном примере был использован шрифт “DK Lemon Yellow”. Не стесняйтесь поэкспериментировать с вашей собственной коллекцией шрифтов.

Шаг 24

Добавьте легкую тень с помощью Стиля слоя (layer style) для данного заголовка.

Выставьте следующие параметры для Тени (Drop Shadow):

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Непрозрачность (Opacity): 10%
  • Угол (Angle): 90 градусов
  • Поставьте галочку в чекбоксе Использовать Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 2
  • Размах (Spread): 0
  • Размер (Size): 0

Шаг 25

Теперь, давайте добавим еще рекламного текста: “Save up to 30% OFF”. Сделайте это на трех отдельных слоях (см. скриншот ниже). Поиграйте с размером текста и расположите его таким образом, чтобы он как можно органичнее вписался в нашу композицию.

Шаг 26

Добавьте Тень (Drop Shadow) с помощью Стиля слоя (layer style) для каждого из слоев.

Выставьте следующие параметры для Тени (Drop Shadow):

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Непрозрачность (Opacity): 10%
  • Угол (Angle): 90 градусов
  • Поставьте галочку в чекбоксе Использовать Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 2
  • Размах (Spread): 0
  • Размер (Size): 0

Шаг 27

Нарисуйте прямоугольник желтого цвета, рядом с рекламным текстом. Из этого треугольника мы создадим симпатичную кнопку призыва к действию.

Шаг 28

В Фотошоп СС 2015 у нас появилась возможность легко преобразовывать обычный прямоугольник в прямоугольник со скругленными углами. Итак, идем в Просмотр — Свойства (View > Properties). В палитре Свойства, кликните по кнопке Связать (chain button) и установите значение скругления для угла в размере 10 пикселей. Таким образом, мы легко можем менять значение радиуса скругления угла в любое время, когда нам будет это необходимо, без перерисовки прямоугольника.

Шаг 29

После того, как мы применили эффект скругления углов, давайте добавим нашему прямоугольнику легкий градиент (Gradient Overlay) и Тень (Drop Shadow) с помощью стилей слоя. Ниже представлены их параметры.

Тень (Drop Shadow):

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Непрозрачность (Opacity): 10%
  • Угол (Angle): 90 градусов
  • Поставьте галочку в чекбоксе Использовать Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 2
  • Размах (Spread): 0
  • Размер (Size): 0

Наложение Градиента (Gradient Overlay)

  • Режим наложения (Blend mode): Перекрытие (Overlay)
  • Непрозрачность (Opacity): 100%
  • Градиент: От основного (from Foreground) к Фоновому (to Background)
  • Стиль (Style): Линейный (Linear)
  • Угол (Angle): 90 градусов

Шаг 30

Используйте инструмент Текст (Type tool), чтобы добавить вот такую надпись на нашу кнопку “SEE DEALS”. Для этой надписи используйте оранжевый цвет.

Шаг 31

Для данного текста примените стили слоя Внутренняя тень (Inner Shadow) и Тень (Drop Shadow) со следующими параметрами:

Тень (Drop Shadow):

  • Режим наложения (Blend mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 20%
  • Угол (Angle): 90 градусов
  • Поставьте галочку в чекбоксе Использовать Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 0

Внутренняя Тень (Inner Shadow):

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Непрозрачность (Opacity): 18%
  • Угол (Angle): 90 градусов
  • Поставьте галочку в чекбоксе Использовать Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 1
  • Стягивание (Choke): 0
  • Размер (Size): 0

Шаг 32

далее, нам необходимо создать логотип ресторана на основе эскиза. Создайте новый документ размером 400 на 300 пикселей.

Шаг 33

Используя инструмент Перо (Pen tool), нарисуйте базовую форму «мяса». Установите цвет заливки (fill) красный, обводку (stroke) отключите.

Шаг 34

Теперь нарисуйте кусок мяса поменьше размером, и примерно такой же формы, как в предыдущем шаге. Установите цвет заливки белый.

Шаг 35

Нарисуйте третью составляющую для нашего «мяса». Для этого вернитесь к заливке красного цвета.

Шаг 36

И опять же с помощью инструмента Перо (Pen tool), нарисуйте последнюю часть нашего «мяса». В качестве образца смотрите на изображение на скриншоте ниже.

Шаг 37

Выберите фоновый слой и нажмите клавишу DELETE, чтобы удалить его. Теперь у нас фон стал прозрачным. Сохраните данный файл в формате .psd. Назовите его, например, “steak logo”, ну или как-то в этом роде.

Шаг 38

Возвращаемся к нашему документу в монтажной области. И вставляем в него наш файл steak logo.psd, используя последовательность команд Файл — Поместить встроенные (File — Place Embedded). Уменьшите изображение нашего логотипа, чтобы он вписывался в монтажную область по высоте. Не забудьте перетащить слой так, как это показано на скриншоте ниже.

Шаг 39

Добавьте текст «BIG BEEF» ниже изображения логотипа.

Шаг 40

Из палитры слоев мы можем закрывать и открывать группу монтажной области. Мы также можем легко продублировать монтажную область, нажав комбинацию клавиш CTRL+J.

Шаг 41

С помощью инструмента Перемещение (Move tool) перетащите копию монтажной области ниже исходной.

Шаг 42

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

Шаг 43

Но и это еще не все. Фотошоп позволяет нам легко изменять размер монтажной области с помощью контрольных точек, или же посредством изменения Ширины (Width) и Высоты (Height) в палитре Свойства (Properties).

Имейте в виду, если вы измените размер монтажной области в меньшую сторону, некоторые слои останутся за пределами рабочей зоны. В данном примере, размер копии монтажной области был изменен следующим образом: Ширина (Width) 336 пикселей, Высота (Height) 280 пикселей.

Шаг 44

Теперь, давайте сделаем небольшую корректировку нашего зеленого фона и изображения блюда. За образец берем изображение на скриншоте ниже. Далее, вручную, с помощью инструмента Перемещение (Move tool) вставляем в нашу монтажную область те слои, что остались вне рабочей зоны. Начните с текстового слоя “Save up to 30% OFF”.

Шаг 45

Увеличьте изображение текста со скидочной информацией, затем вставьте обратно в монтажную область изображение кнопки призыва к действию.

Шаг 46

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

Шаг 47

Измените название монтажной области на «large rectangle (336*280)». Для этого всего лишь нужно сделать двойной клик по названию данной монтажной области.

Шаг 48

Теперь нам необходимо создать новую монтажную область. Выберите инструмент Монтажная область (Artboard tool). Кликните по кнопке Создать новую монтажную область (New artboard), затем установите значения Ширины (Width) 120 пикселей и Высоты (Height) 600 пикселей для новой монтажной области.

Шаг 49

По-прежнему используя инструмент Монтажная область (Artboard Tool), кликните один раз по свободной зоне, чтобы создать новую монтажную область. Переименуйте ее в «Skyscrapper (120*600)».

Шаг 50

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

Активируем инструмент Перемещение (Move tool), затем, удерживая клавишу ALT, перетаскиваем наши прямоугольник из монтажной области с названием “large rectangle” в монтажную область “skycrapper”. Данная операция позволит скопировать оба прямоугольника в нашу новую монтажную область “skycrapper”.

Шаг 51

Нажмите сочетание клавиш CTRL+T, чтобы изменить размеры прямоугольника таким образом, чтобы он вписывался в монтажную область по ширине. Далее, нажмите ENTER, чтобы подтвердить выполнение операции трансформирования.

Шаг 52

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

А далее, копия этого слоя перетаскивается из группы large rectangle в группу skycrapper.

Шаг 53

Повторяйте шаг с 50 по 52 до тех пор, пока все слои не будут скопированы в монтажную область skycrapper. Далее необходимо будет произвести определенную корректировку с изображением и текстом. Для сверки с образцом посмотрите на изображение ниже.

Шаг 54

Как только будут выполнены все установки и все будет готово, мы сможем экспортировать нашу монтажную область. Итак, чтобы сделать это, переходим в Файл — Экспортировать — Экспортировать как (File> Export> Export As). Внутри диалогового окна Экспортировать как (Export As) мы можем выбрать отдельный формат для каждой монтажной области. (для запуска команды Экспортировать как (Export As) можно также использовать комбинацию клавиш Alt+Shift+Ctrl+W).

Шаг 55

Фотошоп СС 2015 позволяет нам сохранить каждую монтажную область в отдельном формате и качестве. В данном примере формат .jpg был использован для монтажной области skycrapper, формат .gif для leaderboard, и формат .png для монтажной области large rectangle.

Если у вас все готово, нажмите на кнопку Экспортировать (Export).

Шаг 56

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

Шаг 57

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

Конечный результат:

Автор: Jayan Saputra

photoshop-master.ru

Топ новых возможностей для Web, UX и дизайнеров мобильных приложений в Photoshop 2015 / Habr

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

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

Наиболее заслуживающая внимания новинка — это возможность организовывать рабочее пространство с помощью монтажных областей. Теперь, как в Illustrator или Sketch App, мы получаем возможность одновременно работать с несколькими холстами изображений. Это несравненное улучшение для производительной работы с проектами дизайна сайта или мобильного приложения, где необходимо рисовать несколько страниц/экранов.

Монтажные области также открыли нам возможность работать за пределами холста. Если в предыдущих версиях Photoshop часть слоя или объекта выходила за границы документа, то пользователь её просто не видел. Теперь же мы имеем возможность разместить удобным для нас образом ресурсы проекта в окне документа без ограничений холста. Все слои, которые не входят в иерархию монтажной области группируются вверху в панели Слои (Layers) и остаются видимыми для пользователя и соответственно доступными для манипуляций.

Примечание к разделу статьиСразу после установки обновления до CC 2015, было любопытно выяснить максимальные размеры пространства, в котором можно разместить области. Казалось, для обзора масштаб можно было уменьшать и уменьшать бесконечно, но процесс оказался ограничен свободным пространством на диске. Что оставляет Sketch в преимуществе — единственное приложение, наскольку мне известно, которое имеет действительно бесконечного размера холст.

Справка Adobe
Видео: дизайн с использованием монтажных областей (англ. 2 мин.)

Пространство дизайна / Design Space (Preview)

Интерфейс данной упрощенной среды находится на этапе разработки. Но уже сейчас пользователи, которые критиковали Photoshop за его громоздкость и сложность, могут приступить к тестированию возможностей режима, специально упрощенного для дизайнеров мобильных приложений и веб-сайтов. Можно переключаться горячими клавишами (Alt+Ctrl+` или Cmd+Ctrl+`) между стандартным интерфейсом Photoshop и средой «Пространство дизайна» для выполнения отсутствующих операций в интерфейсе последнего.

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

С появлением функции «Пространство дизайна» мы видим старания разработчиков Adobe объединить лучшее: упростить привычный интерфейс для дизайнеров и сохранить преимущества Photoshop, а также стандартный для индустрии формат файлов.

Примечание к разделу статьиИз возможностей:
  • создание документа из шаблона
  • работа с монтажными областями
  • инструменты: выделение (упрощенные действия во выделению и редактированию), рисование прямоугольникп, эллипса, ручка, шрифт
    работа с объектами: распределение и выравнивание, трансформирование, применение стилей
  • Математические операции
  • Открытый исходный код на Github

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

Ребята ждут от нас обратной связи, предложений, которые мы нагенерим в процессе тестирования альфа-версии @psdesign.

Справка Adobe
Видео: Презентация «Пространство дизайна» (предпросмотр) (англ. 5:09 мин.)

До 10 экземпляров выбранных стилей

Одна из долгожданных функций в Photoshop. Теперь мы можем применить к слою или к группе слоёв не только несколько экземпляров свойств стиля элемента, но ещё и управлять порядком их отображения.

Однако, на мой взгляд, ещё остались недостатки. Так, например, только некоторые из стилей могут иметь множественные экзмпляры: Обводка (Stroke), Тень/Внутренняя тень (Inner Shadow/Drop Shadow), Наложение цвета / Наложение градиента (Color Overlay/Gradient Overlay). Конечно, это основные эффекты, которые могут потребовать множественных экземпляров, но, так или иначе, эффект ограниченности ощущается. Также разочаровывающим является невозможность поменять порядок следования наложения эффектов. Так например, нельзя текстуру наложить поверх градиента или внутреннюю тень разместить под цветом.

Параметры экспорта

Распрощайтесь с функцией «Сохранить для Web». Хотя она по прежнему ещё доступна, но перенесена в пункт с новой подписью Файл > Экспорт > Сохранить для Web (старая версия). Вместо неё теперь пользуемся «Экспортировать как…». Новый интерфейс диалогового окна избавляет от лишних движений мыши и упрощает экспорт документов, в том числе и в формате SVG.

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

habr.com

Возможности Photoshop По Ускорению Работы Веб-Дизайнера / WAYUP

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

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

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

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

 Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Стили слоя

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

 Обучайся бесплатно с WAYUP Premiere сегодня вечером

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Adobe Preview CC

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

Обучайся бесплатно с WAYUP Premiere сегодня вечером

Завершение

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

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

wayup.in

Adobe Photoshop CC 2015: с юбилеем!. Журнал Publish.

Прошёл уже год с выхода версии Adobe CC 2014, и два — с момента перехода Adobe на подписную модель и линейку Creative Cloud (вместо Creative Suite). С прошлого года Adobe сменила несколько промежуточных версий Adobe Creative Cloud — 2014, 2014.1, 2014.2, и сейчас дошли и до версии 2015. Кстати, порядковый номер версии — 16. При установке версии Adobe CC 2015 все предыдущие облачные версии автоматически удалятся. Если на компьютере установлены программы ещё более ранних версий (CS и другие), то на них установка CC 2015 никак не повлияет.

Заставка при загрузке Adobe Photoshop CC 2015

Системные требования к оборудованию для установки Adobe CC 2015 не изменились — оперативной памяти требуется от 2 (минимум) до 8 Гбайт (рекомендуется), также желательна 64-разрядная система Windows 7, 8 или 10, свободное место на диске — от 2 Гбайт, видеокарта с памятью от 512 Мбайт. Локализованная версия на русском языке в наличии.

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

Инструмент для работы с монтажными областями Artboard Tool находится вместе с инструментом перемещения

Пожалуй, самая интересная новинка в Photoshop 2015 — это монтажные области. Эта идея уже давно используется в Adobe Illustrator, затем она была использована в интерфейсе Design Space (см. ниже), а сейчас окончательна внедрена в сам Adobe Photoshop. Ближайшая метафора, подходящая к этим областям, — это страницы документа. Для работы с монтажными областями используется новый инструмент Artboard Tool, который находится вместе с инструментом перемещения.

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

Монтажные области (Artboards) удобно использовать при создании дизайна мобильного приложения

При использовании областей Adobe Photoshop создаёт их в виде групп в панели слоев, а группа уже включает слои и другие группы, наполняющие данную область. При этом видимость содержимого области ограничена её размерами. Вместе с тем можно создать отдельные слои над или под группами с областями в панели слоёв. Тогда эти слои могут пересекать любые области, правда, работать с ними будет несколько неудобно.

Выбор нужного размера монтажной области (Artboard)

Работа с монтажными областями организуется так:

  1. Вначале создаём документ. При этом в список форматов добавился Artboard с большим количеством предварительных настроек (рис. 4).
  2. Новым инструментом Artboard Tool размечаем области. Для каждой области можно задать произвольный размер или выбрать предустановленный (см. рис. 4, панель свойств).
  3. Затем в каждой монтажной области создаем необходимые элементы дизайна, используя стандартные возможности Photoshop.
  4. Тестирование монтажных областей на мобильном устройстве и экспорт их в виде отдельных файлов (см. ниже).

Просмотр на мобильном устройстве

Это, пожалуй, самая необычная операция в Adobe Photoshop CC 2015!

Для этого используется новая панель Device Preview (Просмотр на устройстве), которая содержит список подключённых на данный момент устройств. Подключение возможно как через кабель USB, так и по WiFi, для чего на мобильное устройство нужно установить специальное приложение Adobe Preview CC (доступно только на устройствах Apple с iOS 8.0 и старше по адресу https://itunes.apple.com/ru/app/adobe-preview-cc/id973272286).

После подключения на устройстве отображается содержимое текущей монтажной области. Её можно масштабировать щипком. Если областей несколько, то их можно прокручивать по горизонтали на самом устройстве. При этом если какая-либо из областей длиннее другой, то её можно прокручивать и по вертикали (плавная прокрутка, не по экранам).

Также предусмотрена возможность поворота устройства — если создать монтажные области для горизонтальной и вертикальной ориентации, то при повороте они будут переключаться автоматически. Если же в макете присутствуют области для разных устройств, то они будут отображены каждая на своём (хотя в любой момент на любом устройстве можно выбрать любую область). А если подключено сразу несколько устройств, то вы увидите дизайн сразу на всех одновременно. Отображение на устройстве осуществляется в виде растровой картинки, поэтому чёткость при масштабировании будет теряться.

Отображение активной монтажной области в приложении Adobe Preview CC — содержимое экранов на компьютере и смартфоне совпадает

На данный момент переключение между областями на самом устройстве осуществляется только прокруткой, а активные области и кнопки пока не поддерживаются. Но для тестирования дизайна и такие возможности очень радуют! Конечно, хотелось бы иметь ещё возможность поделиться этим дизайном с коллегами, чтобы они также могли посмотреть его на своих устройствах… И много чего хотелось бы ещё, но первый шаг сделан.

Кстати, возможность отображения результата из приложения, работающего под Windows, по кабелю USB на устройствах Apple встречается, прямо скажем, нечасто. Но у Adobe всё прекрасно работает!

Расширенные возможности экспорта

В своё время возможности экспорта ограничивались операцией File • Save for Web, позднее к ним добавили функцию File• Generate, которая автоматически создавала изображения исходя из названий слоёв и их групп.

Теперь же всё, что касается экспорта, размещено в отдельном меню File• Export. Туда перемещена и функция Save for Web. Но теперь можно экспортировать монтажные области, слои и их группы или весь документ как графические ресурсы в форматах JPEG, GIF, PNG и даже SVG.

Расширение  возможностей  экспорта

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

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

Чрезвычайно важно, что теперь можно выполнять экспорт элементов в SVG — стандартный формат векторной графики, что особенно актуально для мобильных устройств с разным разрешением. Чёткость таких элементов не зависит от масштаба, поэтому формат SVG сейчас так популярен. А с векторной графикой Adobe Photoshop умеет работать неплохо. Правда, следует учесть, что смарт-объекты, независимо от их происхождения, будут экспортированы в растровом виде (то есть файл SVG будет содержать не объекты, а вложенный растровый файл PNG).

Размытие и шум

Вроде бы размытие и шум абсолютно противоположные вещи, но не с точки зрения разработчиков Adobe! И если подумать, то они правы.

Использование эффектов Blur Gallery для одновременного размытия и добавления шума

При размытии изображения уничтожается и шум, но при этом фотография теряет естественность. Зато теперь с помощью нового набора фильтров Effects• Blur Gallery можно корректировать и размытие, и шум одновременно! При этом сначала работает алгоритм размытия, а потом — восстановления шума. И всё это делается в одной панели. Варианты размытия можно комбинировать друг с другом. Эти фильтры можно применять и как смарт-фильтры, обеспечивая неразрушающую коррекцию изображения.

Скорость Mercury

Для «лечащих» инструментов (лечащая кисть и заплатка) теперь использован новый движок Mercury Graphics Engine, благодаря которому скорость возросла по сравнению с версией CS6 до 120 раз (так обещают в Adobe) и выполняется, по сути, в реальном времени. Наверняка кому-то в работе это очень поможет. Качество результата с виду не изменилось. Но при работе с планшетом вы действительно больше не почувствуете задержек!

Множественное применение эффектов слоя

Расширенные возможности эффектов слоя

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

Прошло 15 лет, как мы уже сроднились с эффектами слоев, которые появились ещё в версии Adobe Photoshop 6 в далёком 2000 г. С тех пор они практически не менялись и в принципе всех устраивали. Но тут в Adobe решили тряхнуть стариной и разрешили множественное применение для некоторых эффектов (до 10 раз!) и с разными настройками.

Страшно подумать, какое это открывает поле для экспериментов! Ведь теперь не нужно растрировать эффект или создавать лишние смарт-объекты, если этот эффект нужно применять повторно. Например, можно сделать несколько обводок с разными параметрами. Правда прозрачность при этом учитывается странно — на рис. 9 у всех обводок стоит значение Opacity (непрозрачность) около 50, но их наложения не происходит. Попытка «поиграть» режимами (blending mode) тоже не меняет ситуацию. Разработчикам на заметку…

Возможности при перемещении и расширении объектов

 

Опция Transform on Drop инструмента Content-Aware Move Tool

Теперь инструмент Content-Aware Move Tool, который раньше позволял лишь перемещать выделенные области (и заодно заботливо восстанавливал исходную область), умеет ещё и выполнять трансформацию. За эту возможность отвечает опция Transform on Drop (рис. 10). Работает она так: выделенную область сначала надо переместить в новую позицию, затем выполнить её трансформацию (масштабирование и поворот) и завершить операцию, нажав <Enter>.

Результат перемещения и масштабирования области инструментом Content-Aware Move Tool

Более качественные панорамы с автоматической заливкой с учётом содержимого

Новые опции при создании панорам помогают значительно улучшить качество результата

Для создания панорам в настоящий момент существует множество приложений как для телефонов, так и для камер. Возможно поэтому создание панорамы средствами Photoshop быстро теряло свою актуальность с того момента, как появилась функция File• Automate Photomerge. И в версии CC 2015 в Adobe решили поправить положение, предложив ряд серьёзных улучшений. Например, программа позволяет использовать новые опции, которые позволяют соединить элементы более гладко и естественно.

Проблемы виньетирования, искажений и пр. решаются автоматически. Может быть, вам повезёт и удастся кое-что доработать вручную, но шансов на это немного. Обратите внимание на результат (рис. 13) и на некоторые погрешности в виде непонятного пятна слева и некоторого искажения. Вручную можно склеить и получше, но времени на это вы потратите гораздо больше.

Результат работы обновленного инструмента Photomerge

Панель «Глифы»

Панель Glyphs с набором Designer Favorites — всё, что нужно дизайнерам

При работе с текстом регулярно возникает нужда в спецсимволах — знак евро, копирайт, длинное тире и пр. Конечно, их можно найти в таблице символов. Но теперь все они есть и в отдельной панели Glyphs («Глифы»). Панель подстраивается под текущий шрифт, но можно выбрать и любой другой. Правда, в отличие от Adobe InDesign, создавать свои наборы глифов пока нельзя. Занятно, что в списке есть отдельный набор глифов для дизайнера с часто встречающимися знаками (тире, евро и пр.).

Там за туманами…

В версии Camera raw 9.1 появились приятные операции типа добавления/удаления тумана, также улучшены возможности локальной коррекции. Теперь туман и дымку добавить очень легко и почти так же легко удалить (см. рис. 15). Для этого используется эффект Dehaze: отрицательные значения напускают туман, положительные — удаляют его. А опция Grain позволяет сделать изображение более гранулированным, например, для имитации снега.

Эффект Dehaze использован для добавления тумана (внизу), а с помощью Grain сделана попытка добавить ещё и немного снега

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

Интерфейс Design Space (Preview): пространство дизайна

 

Переключение в новый интерфейс Design Space (Preview)

Не секрет, что уже который год дизайнеры веб-сайтов и мобильных приложений вместо Photoshop, который слишком громоздок для решения их задач, используют более лёгкие и удобные в работе инструменты, которые позволяют сэкономить массу времени и сил. И Adobe пытается бороться с такой тенденцией, пойдя опробованным путём. Помните то время, когда Photoshop поставлялся вместе с программой ImageReady? Она решала исключительно задачи веб-дизайна (сам Photoshop тогда таких функций, как нарезка изображения и анимации, не имел) и вызывалась непосредственно из Photoshop. Сейчас же Adobe предлагает альтернативный интерфейс, переключение на который производится в меню Edit• Preferences• Technology Previews: (рис. 16).

Смысл нового интерфейса в том, что дизайнеру оставляют только средства создания фигур, кривых и текста. То есть интерфейс очень сильно облегчён и выглядит менее устрашающе (при этом для его работы почему-то предъявляются повышенные требования к оборудованию). Но стал ли он более удобным? Это вопрос крайне спорный, так как упростили в том числе стили, эффекты и многое другое. Вместе с тем результатом является только файл PSD или TIFF, а возможности экспорта отсутствуют вообще.

Монтажные области в интерфейсе Design Space (Preview)

Таким образом, процесс работы может выглядеть так:

1. В интерфейсе Design Space (Preview) создаются монтажные области (их можно добавлять как по горизонтали, так и по вертикали, см. рис. 17),

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

3. Затем делается переход в стандартный интерфейс, откуда и выполняется экспорт.

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

Для работы интерфейса Design Space (Preview) выдвигаются повышенные требования: ОС Mac OS X 10.10 или Windows 8.1 (64-разрядная) или более поздней версии. Сейчас интерфейс доступен только на английском языке.

Интеграция с библиотеками

 

Панели библиотеки (Libraries) в Illustrator и Photoshop похожи,  но не одинаковы

Теперь самые нужные элементы можно поместить в библиотеку (панель Libraries), откуда они будут доступны и для других приложений, имеющих аналогичную панель. Более того, библиотека будет доступна и на другом компьютере, если там подключиться со своим Adobe ID. Библиотека может содержать как графические элементы, так и шрифты, эффекты, и даже заливки.

Использование службы Adobe Stock

Adobe Stock — это служба, с помощью которой можно найти и купить высококачественные фотографии. Причем вызов службы осуществляется прямо из Photoshop в меню File• Search Adobe Stock. Сейчас в базе более 40 млн фотографий, из которых 35 млн принадлежат фотобанку Fotolia, который Adobe купила в конце 2014 г.

Поддержка Adobe Stock встроена в последние версии продуктов Photoshop CC, InDesign CC, Illustrator CC, Premiere Pro CC и After Effects CC. Для пользователей Adobe СС пакет из 10 фотографий обойдется в 29,99 долл. Служба работает в 36 странах, но пока не в России.

3D-моделирование

С каждой новой версией Adobe Photoshop всё глубже вторгается в область 3D-моделирования, разрушая штампы, что это просто программа для рисования и редактирования «плоских» изображений. В новой версии можно создавать рельефные карты для объектов на базе готовых изображений, появились возможности упрощения сложных 3D-моделей путём снижения их разрешения (новая команда в меню 3D• Simplify Meshes). Возможности экспорта трёхмерной информации также расширены: теперь слои 3D можно экспортировать в форматы Collada DAE, Flash 3D, Google Earth KMZ, 3D PDF, STL, U3D, VRML и OBJ.

А печать 3D из Adobe Photoshop теперь возможна как напрямую, так и через внешние сервисы, но вот возможности 3D-сканирования пока не обнаружены, а не поддерживает библиотеки 3D-моделей и сервис Adobe Stock. Так что остается нерешённым ряд вопросов, которые давно пройдены обычными 3D-программами, изначально предназначенными для работы с 3D.

Другие изменения

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

Настройки для устройств с высокой плотностью пикселей (дисплеи Retina) теперь находятся в Edit• Preferences• Interface.

Внешний модуль Digimarc больше не устанавливается по умолчанию. При желании его можно установить прямо со страницы http://www.digimarc.com/products/guardian/images/Photoshop-plug-in.

Ускоренная загрузка «Экрана приветствия». По крайней мере, так уверяет Adobe. Мне кажется, этот экран загружается ещё дольше, чем сам Photoshop. Впрочем, его всегда можно отключить.

Сохранении энергии до 80% при простоях, что очень актуально для владельцев ноутбуков вдали от розетки.

Новая настройка в окне Edit• Preferences• Type позволяет при наборе текста завершать набор клавишей <Esc>, не сбрасывая при этом сам текст.

Перемещение слоя внутрь другой группы теперь размещает слой наверху группы, а не внизу (как было раньше).

Итоги

Пожалуй, самое многообещающее нововведение в версии Adobe Photoshop СС 2015 — это монтажные области (Artboards)! Они открывают совершенно новые возможности работы с дизайном и, хотя и ориентированы больше на Web и мобильные приложения, могут понадобиться и для других задач.

Adobe Photoshop СС 2015 продолжает наиболее активно развивать направления веб-дизайна и 3D, не забывая совершенствовать возможности, актуальные для фотографов (Camera Raw). Также видно, что Adobe активно ищет новые пути развития через внедрение экспериментальных функций (например, интерфейс Design Space). Возможно, далее эти функции органично вольются в основную программу или будут выделены в новый продукт. Проблема Photoshop сейчас заключается в «монструозности» — программа в принципе умеет всё, но никак не может конкурировать со специализированными, более простыми, эффективными и дешёвыми программами в отдельных областях. Например, в области веб-дизайна сейчас продолжает набирать популярность приложение Sketch, которое прекрасно работает с файлами Photoshop, но гораздо легче и удобнее для веб-дизайнеров. Интерфейсом Design Space удар по Sketch, конечно, не нанесён, но направление удара обозначено весьма недвусмысленно.

И давайте пожелаем нашему юбиляру отменного здоровья и долголетия, чтобы он по-прежнему был шустер, бодр и впереди всех!

 

Об авторе: Юрий Павлов ([email protected]), преподаватель ЦКО «Специалист», консультант, практикующий дизайнер и веб-разработчик, Adobe Design Specialist CC.

www.publish.ru

Как удалить монтажную область в фотошопе

  • 01 Август
  • 0 просмотров
  • 0 рейтинг

В этом материале мы узнаем всё о новой, полностью настраиваемой панели инструментов (инструментальной панели, англ. — Tools panel) в Photoshop, которая, наконец-то, позволяет нам создавать собственные пользовательские панели инструментов, наиболее удобные для индивидуальной работы.
Теперь мы можем скрыть любые инструменты, которые фактически мы не используем или используем очень редко, изменять их группировки, изменять порядок инструментов, и многое другое!
Мы даже можем сохранять и загружать наши пользовательские макеты панели инструментов в качестве предустановок!

Обратите внимание, что функция «настраиваемая панель инструментов» доступна только в последней версии Photoshop CC 2015, конкретно с версии 20151114.301.

Краткий обзор инструментальной панели Photoshop

Как и во всех версиях Photoshop, в версии CC 2015 панель инструментов по умолчанию находится с левой стороны интерфейса:


Инструментальная панель Photoshop CC 2015.

Каждая иконка в панели инструментов представляет собой какой-либо инструмент, который мы можем выбрать для работы, например, «Лассо» (Lasso Tool), «Кисть» (Brush Tool), «Прямоугольная область» (Rectangular Marquee Tool), и так далее.

Большинство инструментов, которые мы изначально видим в панели инструментов имеют панели, на которых скрыты дополнительные инструменты. В данной версии программы, единственным инструментом, не имеющих под собой дополнительных инструментов, является «Масштаб» (Zoom Tool), расположенный в самом низу. Для просмотра дополнительных инструментов, нажмите правой клавишей мыши на любую из иконок инструментов (за исключением «Масштаба»). При этом откроется дополнительный список сгруппированных с ним инструментов.

Инструменты обычно группируются между собой по аналогии выполняемых задач. Например, если я нажму правой клавишей мыши ) на «Прямоугольная область» (Rectangular Marquee Tool), откроется выпадающий список с другими инструментами выделения:

То же самое качается любого инструмента на панели, значок которого имеет маленький треугольник в правом нижнем углу, в Photoshop CC 2015 это все инструменты, кроме «Масштаба». Кстати, по моим подсчётам, всего в Photoshop CC 2015 имеется 66 инструментов.

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

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

Редактирование панели инструментов

Итак, в версии Photoshop Creative Cloud от ноября 2015 года Adobe, наконец, добавила возможность полностью настроить панель инструментов, используя совершенно новое диалоговое окно «Настроить панель инструментов» (Customize Toolbar).

Открыть это окно можно двумя способами. Первый — через вкладку главного меню Редактирование —> Панель инструментов (Edit —> Customize Toolbar).

Второй — клик правой клавишей мыши на иконку-многоточие (три маленькие точки) в нижней части панели, непосредственно под значком «Масштаба» и нажать на строчку «Редактировать панель инструментов» (Edit Toolbar):


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

Диалоговое окно настройки панели инструментов

После применения любого из этих двух способов откроется новое диалоговое окно настроек. Диалоговое окно состоит из двух основных столбцов. В столбце слева показаны инструменты, расположенные на данный момент в панели, они показаны в том же порядке и в той же группировке.
Колонна справа называется «Дополнительные инструменты» (Extra Tools). В эту колонку мы перетягиваем инструменты из левой колонки для их удаления из инструментальной панели.


Новое диалоговое окно «Настроить панель инструментов» (Customize Toolbar) в Photoshop CC 2015.

Удаление инструмента из панели инструментов

Чтобы удалить инструмент из панели инструментов, просто щелкните на него в левой колонке и перетащите его в колонку справа.

Давайте рассмотрим это на примере, для примера возьмём группу инструментов «Перемещение» (Move Tool). Я нажму правой клавишей мыши на его иконку:


В группе находятся два инструмента, «Перемещение» (Move Tool) и «Монтажная область» (Artboard Tool)

Я хочу удалить «Монтажная область» (Artboard Tool), т.к. я использую его редко.

Открываем диалоговое окно настройки панели инструментов и перетаскиваем «Монтажная область» из левой колонки в правую:


Перемещение инструмента для его удаления из панели.

Вот как выглядят колонки диалогового окна после перемещения:


Колонки диалогового окна.

После перемещения обязательно нажимаем кнопку «Готово» (Done), расположенную справа вверху диалогового окна, без нажатия на кнопку изменения не будут сохранены. После нажатия окно закрывается.

Давайте снова посмотрим на значок «Перемещение»:

Как видите, с иконки пропал маленький треугольник, располагавшийся справа внизу, это говорит о том, что в группе остался только один инструмент — «Перемещение». Нажатие на иконку правой клавишей мыши уже не откроет никакой список, а только активирует инструмент «Перемещение».

Просмотр дополнительных инструментов

Так куда же делся инструмент «Монтажная область»? Собственно, когда я говорил про удаление инструментов, это не совсем верно, на самом деле инструменты полностью не удаляются. Вместо этого, мы просто перемещаем их из основной раскладки инструментальной панели в другую, скрытую область. Иными словами, инструменты не удаляются. а скрываются.

Мы можем посмотреть на скрытые инструменты, если еще раз нажмём правой клавишей мыши (Win) на иконку с тремя точками в инструментальной панели (также, вместо нажатия правой клавишей, можно нажать на иконку левой клавишей и удерживать пару секунд, тут кому как нравится).

Любые инструменты, которые вы перетащили в колонку дополнительных инструментов в диалоговом окне Настройка панели инструментов (как я перетащил только что «Монтажная область»), отобразятся в этом списке, ниже строки Редактировать панель инструментов. (Edit Toolbar). Это означает, что эти инструменты просто скрыты и вы их можете в любой момент активировать:


Список инструментов, скрытых из инструментальной панели

Восстановление инструмента на инструментальной панели

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

Например, на рисунке ниже, инструмент «Монтажная область» займёт собственное место на инструментальной панели, между «Перемещением» и инструментами областей выделения:


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

Вот пак выглядит панель теперь:


Инструмент «Монтажная область» занял собственную позицию на инструментальной панели

На этом рисунке показано, что синяя полоса находится на инструменте «Перемещение», следовательно, перетаскиваемый «Монтажная область» на этот раз займёт на собственное место на панели, а одну группу с «Перемещением», причём, расположится под ним:


Восстанавливаемый инструмент помещается к инструменту «Перемещение», образуя с ним группу.

Если теперь нажать правой клавишей мыши на «Перемещение», то откроется список:


В группе снова находятся два инструмента, «Перемещение» (Move Tool) и «Монтажная область» (Artboard Tool)

Группировка и разгруппировка инструментов

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

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


На рисунке я перемещаю инструмент «Монтажная область» из группы «перемещения»в группу инструментов выделения областей

Кроме того, я могу расположить инструмент обособленно от любой группы:


Инструмент перемещается в промежуток между группами, как указывает синяя полоса.

Для этого мне надо просто переместить нужный инструмент в промежуток между группами. Вот как выглядит теперь панель:


Инструмент «Монтажная область» находится на отдельном месте в панели, под инструментами выделения областей и над группой «Лассо».

Выбор основного инструмента для группы

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

Вот как выглядит группа областей выделения по умолчанию:


Вид группы инструментов областей выделения по умолчанию

Чтобы сделать быстродоступным (основным) другой инструмент, надо просто поднять его наверх в пределах своей группы.


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

А вот как выглядит теперь группа на панели:


После перемещения основным в группе стал инструмент «Овальная область».

Перемещение групп целиком

Ранее мы рассмотрели, как перетащить отдельные инструменты из одной колонки в другую, но таким же образом мы можем перетаскивать и целые группы. Для примера, возьмём группу, где первым инструментом является «Рамка» (Croop Tool). Чтобы перетащить эту или любую другую группу, наведите курсор мыши на уголок группы, при этом группа должна выделится синей рамкой, давая вам знать, что вы выбрали группу целиком:


Перемещение группы целиком в колонку «Дополнительные инструменты»

Теперь группа перемещена и отсутствует на инструментальной панели, это показано на скриншоте:


Группа инструментов удалена с инструментальной панели.

Изменение порядка инструментов на инструментальной панели

У новой инструментальной панели имеется ещё одна полезная функция — вы можете переместить инструменты, которые вы используете чаще всего, в верхнюю часть инструментальной панели, а те, которые используете редко — переместить вниз. То же вы можете сделать и с группой инструментов целиком.

Отключение сочетаний горячих клавиш для дополнительных инструментов

Очень полезная новая опция по горячим клавишам активации инструментов. Например, в группе «Рамка» имеется четыре инструмента, каждый из которых активируется клавишей С. Я же пользуюсь, как правило, только инструментом «Рамка», остальные мне нужны бывают крайне редко. Поэтому. понятно, что мне совсем не нужно, чтобы остальные инструменты этой группы не активировались при помощи клавиши С. При помощи новой панели это сделать элементарно. Открываем панель:


По умолчанию все инструменты в группе «Рамка» активируются с помощью клавиши С.

Далее нажимаем на инструмент, клавишу которого надо отключить, и просто нажимаем клавишу Backspace. Затем переходим на следующий инструмент. Когда вы всё отключите, нажмите кнопку «Готово»:


Отключение горячих клавиш

Изменение сочетаний горячих клавиш для активации инструментов

Аналогичным образом Вы можете изменить горячую клавишу активирования, только вместо клавиши Backspace следует нажимать одну из буквенных клавиш от A до Z:


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

Кнопка «Очистить инструменты» (Clear Tools)

До сих пор мы тратили большую часть нашего времени на перетаскивание инструментов из левой колонки основных инструментов слева в колонку инструментов справа. Но если вы хотите держать только несколько инструментов на инструментальной панели, только те, которыми вы пользуетесь постоянно , нажмите кнопку «Очистить инструменты» (Clear Tools) в правом верхнем углу диалогового окна, это сделает основную (левую) колонку пустой и перетащит всё в правую:


Все инструменты перенесены в правую колонку.

Далее перетащите в левую колонку те инструменты, которые вам нужны:


Слева на рисунке показана инструментальная панель в том виде, как она будет выглядеть после нажатия кнопки «Готово».

Скрыть дополнительные опции инструментальной панели

Внизу инструментальной панели находятся четыре дополнительные значка, это многоточие, включающее настройку инструментальной панели, значок переключения цветов переднего и заднего плана (Foreground/Background Colors), включения/выключения режима быстрой маски (Quick Mask Mode) и иконка переключения режимов экрана( Screen Mode). Всем этим значкам соответствуют иконки в левом нижнем углу панели «Настроить панель инструментов»:


Отключение дополнительных опций.

Если кликнуть по одной или нескольким иконкам, они будут деактивированы и соответствующие дополнительные опции будут скрыты:


Скрытие дополнительные опций инструментальной панели. На данный момент у меня оставлена только опция переключения цветов переднего и заднего плана (Foreground/Background Colors)

Сохранение пользовательского шаблона настройки панели инструментов качестве предустановки

Когда вы закончите настраивать «Настроить панель инструментов» , вы можете сохранить новую компоновку в качестве предустановки, нажав кнопку «Сохранить стиль» (Save Preset). Откроется новое окно, где дайте описательное имя набору, затем нажмите кнопку «Сохранить». Вы можете сохранить несколько макетов в качестве предустановок, каждая из которых настроена для конкретной задачи (например, ретуширование фотографий, цифровой живописи, веб-дизайн, и так далее).

Восстановление настройки панели инструментов

Чтобы вернуться первоначальной настройке по умолчанию, нажмите кнопку «Восстановить настройки по умолчанию» (Restore Defaults).

Всем привет.
Сегодня обновил фотошоп, после чего появилась странная белая обводка толщиной 1px вокруг каждой монтажной области. Обводка эта чисто рабочая, к изображению отношения не имеет, но с ней работать совершенно неудобно, невероятно неудобно, зачем она вообще нужна? Как её отключить?

Ниже скрин, монтажная область справа — выделена, слева — нет.


Выделенная область – участок, ограниченный «марширующими муравьями». Создается при помощи различных инструментов, чаще всего из группы «Выделение».

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

Удаление выделенной области

Выделенную область можно удалить несколькими способами.

Способ 1: клавиша DELETE

Данный вариант предельно прост: создаем выделение нужной формы,

Нажимаем DELETE, удаляя участок внутри выделенной области.

Способ, при всей своей простоте, не всегда бывает удобен и полезен, так как отменить данное действие можно только в палитре «История» вместе со всеми последующими. Для надежности имеет смысл воспользоваться следующим приемом.

Способ 2: заливка маски

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

    Создаем выделение нужной формы и инвертируем его сочетанием клавиш CTRL+SHIFT+I.


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

При работе с маской существует и другой вариант удаления фрагмента. В данном случае инвертировать выделение не требуется.

  1. Добавляем маску к целевому слою и, оставаясь на ней, создаем выделенную область.


Жмем сочетание клавиш SHIFT+F5, после чего откроется окошко с настройками заливки. В этом окне, в выпадающем списке, выбираем черный цвет и применяем параметры кнопкой ОК.

В результате прямоугольник будет удален.

Способ 3: вырезать на новый слой

Этот способ можно применить в том случае, если вырезанный фрагмент пригодится нам в будущем.

1. Создаем выделение, затем нажимаем ПКМ и кликаем по пункту «Вырезать на новый слой».

2. Нажимаем на значок глаза возле слоя с вырезанным фрагментом. Готово, область удалена.

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

Отблагодарите автора, поделитесь статьей в социальных сетях.


papillomnet.ru

Новая настраиваемая панель инструментов в Photoshop CC 2015

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

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

Редактирование панели инструментов

Итак, в версии Photoshop Creative Cloud от ноября 2015 года Adobe, наконец, добавила возможность полностью настроить панель инструментов, используя совершенно новое диалоговое окно «Настроить панель инструментов» (Customize Toolbar).

Открыть это окно можно двумя способами. Первый — через вкладку главного меню Редактирование —> Панель инструментов (Edit —> Customize Toolbar).

Второй — клик правой клавишей мыши на иконку-многоточие (три маленькие точки) в нижней части панели, непосредственно под значком «Масштаба» и нажать на строчку «Редактировать панель инструментов» (Edit Toolbar):


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

Диалоговое окно настройки панели инструментов

После применения любого из этих двух способов откроется новое диалоговое окно настроек. Диалоговое окно состоит из двух основных столбцов. В столбце слева показаны инструменты, расположенные на данный момент в панели, они показаны в том же порядке и в той же группировке.
Колонна справа называется «Дополнительные инструменты» (Extra Tools). В эту колонку мы перетягиваем инструменты из левой колонки для их удаления из инструментальной панели.


диалоговое окно редактирования панели инструментов
Новое диалоговое окно «Настроить панель инструментов» (Customize Toolbar) в Photoshop CC 2015.

Удаление инструмента из панели инструментов

Чтобы удалить инструмент из панели инструментов, просто щелкните на него в левой колонке и перетащите его в колонку справа.

Давайте рассмотрим это на примере, для примера возьмём группу инструментов «Перемещение» (Move Tool). Я нажму правой клавишей мыши на его иконку:


группа инструментов
В группе находятся два инструмента, «Перемещение» (Move Tool) и «Монтажная область» (Artboard Tool)

Я хочу удалить «Монтажная область» (Artboard Tool), т.к. я использую его редко.

Открываем диалоговое окно настройки панели инструментов и перетаскиваем «Монтажная область» из левой колонки в правую:


удаление перемещение инструмента
Перемещение инструмента для его удаления из панели.

Вот как выглядят колонки диалогового окна после перемещения:


удаление инструмента
Колонки диалогового окна.

После перемещения обязательно нажимаем кнопку «Готово» (Done), расположенную справа вверху диалогового окна, без нажатия на кнопку изменения не будут сохранены. После нажатия окно закрывается.

Давайте снова посмотрим на значок «Перемещение»:

перемещение

Как видите, с иконки пропал маленький треугольник, располагавшийся справа внизу, это говорит о том, что в группе остался только один инструмент — «Перемещение». Нажатие на иконку правой клавишей мыши уже не откроет никакой список, а только активирует инструмент «Перемещение».

Просмотр дополнительных инструментов

Так куда же делся инструмент «Монтажная область»? Собственно, когда я говорил про удаление инструментов, это не совсем верно, на самом деле инструменты полностью не удаляются. Вместо этого, мы просто перемещаем их из основной раскладки инструментальной панели в другую, скрытую область. Иными словами, инструменты не удаляются. а скрываются.

Мы можем посмотреть на скрытые инструменты, если еще раз нажмём правой клавишей мыши (Win) на иконку с тремя точками в инструментальной панели (также, вместо нажатия правой клавишей, можно нажать на иконку левой клавишей и удерживать пару секунд, тут кому как нравится).

Любые инструменты, которые вы перетащили в колонку дополнительных инструментов в диалоговом окне Настройка панели инструментов (как я перетащил только что «Монтажная область»), отобразятся в этом списке, ниже строки Редактировать панель инструментов… (Edit Toolbar). Это означает, что эти инструменты просто скрыты и вы их можете в любой момент активировать:


скрытые инструменты
Список инструментов, скрытых из инструментальной панели

Восстановление инструмента на инструментальной панели

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

Например, на рисунке ниже, инструмент «Монтажная область» займёт собственное место на инструментальной панели, между «Перемещением» и инструментами областей выделения:


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

Вот пак выглядит панель теперь:


восстановленный
Инструмент «Монтажная область» занял собственную позицию на инструментальной панели

На этом рисунке показано, что синяя полоса находится на инструменте «Перемещение», следовательно, перетаскиваемый «Монтажная область» на этот раз займёт на собственное место на панели, а одну группу с «Перемещением», причём, расположится под ним:


инструмент в группу
Восстанавливаемый инструмент помещается к инструменту «Перемещение», образуя с ним группу.

Если теперь нажать правой клавишей мыши на «Перемещение», то откроется список:


группа инструментов
В группе снова находятся два инструмента, «Перемещение» (Move Tool) и «Монтажная область» (Artboard Tool)

Группировка и разгруппировка инструментов

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

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


перемещение инструмента из одной группы в другую
На рисунке я перемещаю инструмент «Монтажная область» из группы «перемещения»в группу инструментов выделения областей

Кроме того, я могу расположить инструмент обособленно от любой группы:


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

Для этого мне надо просто переместить нужный инструмент в промежуток между группами. Вот как выглядит теперь панель:


инструмент
Инструмент «Монтажная область» находится на отдельном месте в панели, под инструментами выделения областей и над группой «Лассо».

Выбор основного инструмента для группы

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

Вот как выглядит группа областей выделения по умолчанию:


инструменты выделения
Вид группы инструментов областей выделения по умолчанию

Чтобы сделать быстродоступным (основным) другой инструмент, надо просто поднять его наверх в пределах своей группы.


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

А вот как выглядит теперь группа на панели:


замена основного инструмента в группе
После перемещения основным в группе стал инструмент «Овальная область».

Перемещение групп целиком

Ранее мы рассмотрели, как перетащить отдельные инструменты из одной колонки в другую, но таким же образом мы можем перетаскивать и целые группы. Для примера, возьмём группу, где первым инструментом является «Рамка» (Croop Tool). Чтобы перетащить эту или любую другую группу, наведите курсор мыши на уголок группы, при этом группа должна выделится синей рамкой, давая вам знать, что вы выбрали группу целиком:


panel-instrumentov
Перемещение группы целиком в колонку «Дополнительные инструменты»

Теперь группа перемещена и отсутствует на инструментальной панели, это показано на скриншоте:


новая настраиваемая панель инструментов в Photoshop CC 2015
Группа инструментов удалена с инструментальной панели.

Изменение порядка инструментов на инструментальной панели

У новой инструментальной панели имеется ещё одна полезная функция — вы можете переместить инструменты, которые вы используете чаще всего, в верхнюю часть инструментальной панели, а те, которые используете редко — переместить вниз. То же вы можете сделать и с группой инструментов целиком.

Отключение сочетаний горячих клавиш для дополнительных инструментов

Очень полезная новая опция по горячим клавишам активации инструментов. Например, в группе «Рамка» имеется четыре инструмента, каждый из которых активируется клавишей С. Я же пользуюсь, как правило, только инструментом «Рамка», остальные мне нужны бывают крайне редко. Поэтому. понятно, что мне совсем не нужно, чтобы остальные инструменты этой группы не активировались при помощи клавиши С. При помощи новой панели это сделать элементарно. Открываем панель:


panel
По умолчанию все инструменты в группе «Рамка» активируются с помощью клавиши С.

Далее нажимаем на инструмент, клавишу которого надо отключить, и просто нажимаем клавишу Backspace. Затем переходим на следующий инструмент. Когда вы всё отключите, нажмите кнопку «Готово»:


panel
Отключение горячих клавиш

Изменение сочетаний горячих клавиш для активации инструментов

Аналогичным образом Вы можете изменить горячую клавишу активирования, только вместо клавиши Backspace следует нажимать одну из буквенных клавиш от A до Z:


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

Кнопка «Очистить инструменты» (Clear Tools)

До сих пор мы тратили большую часть нашего времени на перетаскивание инструментов из левой колонки основных инструментов слева в колонку инструментов справа. Но если вы хотите держать только несколько инструментов на инструментальной панели, только те, которыми вы пользуетесь постоянно , нажмите кнопку «Очистить инструменты» (Clear Tools) в правом верхнем углу диалогового окна, это сделает основную (левую) колонку пустой и перетащит всё в правую:


panel-
Все инструменты перенесены в правую колонку.

Далее перетащите в левую колонку те инструменты, которые вам нужны:


panel
Слева на рисунке показана инструментальная панель в том виде, как она будет выглядеть после нажатия кнопки «Готово».

Скрыть дополнительные опции инструментальной панели

Внизу инструментальной панели находятся четыре дополнительные значка, это многоточие, включающее настройку инструментальной панели, значок переключения цветов переднего и заднего плана (Foreground/Background Colors), включения/выключения режима быстрой маски (Quick Mask Mode) и иконка переключения режимов экрана( Screen Mode). Всем этим значкам соответствуют иконки в левом нижнем углу панели «Настроить панель инструментов»:


панель
Отключение дополнительных опций.

Если кликнуть по одной или нескольким иконкам, они будут деактивированы и соответствующие дополнительные опции будут скрыты:


панель
Скрытие дополнительные опций инструментальной панели. На данный момент у меня оставлена только опция переключения цветов переднего и заднего плана (Foreground/Background Colors)

Сохранение пользовательского шаблона настройки панели инструментов качестве предустановки

Когда вы закончите настраивать «Настроить панель инструментов» , вы можете сохранить новую компоновку в качестве предустановки, нажав кнопку «Сохранить стиль» (Save Preset). Откроется новое окно, где дайте описательное имя набору, затем нажмите кнопку «Сохранить». Вы можете сохранить несколько макетов в качестве предустановок, каждая из которых настроена для конкретной задачи (например, ретуширование фотографий, цифровой живописи, веб-дизайн, и так далее).

Восстановление настройки панели инструментов

Чтобы вернуться первоначальной настройке по умолчанию, нажмите кнопку «Восстановить настройки по умолчанию» (Restore Defaults).

rugraphics.ru

4 совета по работе с артбордами в Photoshop

Перевод статьи “4 Tips for Prototyping with Adobe Photoshop Artboards” из блога Designmodo, об использовании новой функции Photoshop CC 2015 — артборд.


Когда Adobe анонсировал появление в новой версии Photoshop СС 2015 долгожданной функции артбордов (или как их еще называют — монтажные области), значительная часть дизайнерского сообщества, включая меня, чуть не умерли от счастья!

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

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

Таким образом, в одном .PSD-файле вы сразу можете видеть 10, 20, 30 или сколько вам нужно, открытых экранов приложения или страниц сайта.

Чтобы помочь вам освоить этот новый инструмент (почти во всех прочих продуктах от Adobe он уже давно есть), мы собрали 4 полезных приема-совета, поняв и освоив которые, вы с легкостью начнете владеть артбордами в Photoshop.

Итак, поехали!

Навигация между артбордами

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

Во вкладке Layers (Слои), нажмите с зажатой клавишей Option (Alt на Win) на нужный вам артборд и он окажется посередине экрана.

Свернуть/развернуть все артборды

Несмотря на то, что артборды — это новая функция, способ их отображения — нет. По факту, артборды переняли смысл функции “группировка”, тем самым объединив все объекты с одного артборда в единую группу.

Чтобы просмотреть объекты, расположенные на том или ином артборде, все в той же панели Layers, с зажатой клавишей Cmd (Ctrl на Win), нужно нажать на стрелочку рядом с любым пунктом.

Создать артборд из группы

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

Для этого, выберите группу объектов в панели Layers, кликните по ней правой кнопкой и нажмите “Artboard from Group”.

Быстрый экспорт выбранного артборда в PNG

Для пользователей Illustrator или Sketch или многих других графических редакторов, подобная возможность — не нова. Но для Photoshop — это крутое нововведение 🙂

Функция быстрого экспорта любого выбранного артборда (или нескольких) доступна во вкладке Layers по нажатию правой кнопкой мыши — “Quick Export as PNG”.

Функция очень удобная, особенно если нужно показать кому-то работу над определенной частью приложения или опубликовать процесс на Dribbble, например.

Быстрая работа и предельная аккуратность

Новые функции в Photoshop CC 2015 призваны ускорить и облегчить работу веб-, графических и мобильных дизайнеров. Теперь группировать объекты стало проще, а необходимости в излишних слоях — меньше.

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

infogra.ru

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

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