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


Smart Object в Photoshop – поможет и верстальщикам, и дизайнерам / Хабр

  1. Как уменьшить количество слоев для визуально одного объекта (кнопочки, например), сохранив возможность его редактирования?
  2. Как уменьшить количество слоев, объединив в один слой header, footer на макетах внутренних страниц, при этом снова-таки оставив возможность их изменения?
  3. Как облегчить верстальщику вырезание линий из одно- двух пиксельных линий, составляющих единую линию, теней, а так же кнопочек, иконок?
  4. Как быстро вносить изменения на все однотипные элементы на странице?
  5. Как уменьшать растровую картинку без потери качества и сохраняя правильные пропорции эффектов (тень в 5px для объекта 200*200px – смотрится совсем по-другому, нежели для этого же объекта при его размере 100*100px)
Я работаю дизайнером, и вот уже несколько последних проектов использую Smart Object. Эта функция присутствует в Photoshop давно, но идея использовать ее в веб-дизайне, лично мне, пришла недавно. Возможно, это попытка придумать велосипед, но думаю, этим стоит поделиться.

Smart Object – это слой, содержащий изображения из растровых или векторных слоев Photoshop, сохраняющий все стили и эффекты в редактируемом состоянии, или слои Illustrator. Слои Smart Object обозначаются специальным значком (рис. 1).

Рис.1

При двойном щелчке левой кнопкой мышки на этом значке открывается новый файл (с разрешением .psb), со всеми вложенными в этот Smart Object слоями. С ними можно работать так же, как и с обычными слоями. Размер этого файла зависит от слоев, находящихся в нем (рис.2).

Рис.2

Если к слою не применены тени или внешнее свечение – размеры Smart Object строго соответствуют размерам включенных в него слоев, если применены – то появляется отступ со всех сторон, это позволяет не обрезать случайно тень, которую не видно на плохом мониторе (рис.2). Эта функция облегчает вырезание вот таких теней (рис.3). Дизайнер вздохнет с облегчением – верстальщик не обрежет половину тени, которую на его мониторе не видно, а верстальщику не нужно отключать фон и искать границы этой тени. С этого файла ее можно сразу сохранить как отдельную картинку в .png.

Рис.3

Здесь правда есть несколько подводных камней. Нужно учесть, если на макете масштабировать размер слоя со Smart Object – во внутреннем файле(.psb) все слои будут в 100% масштабе. У Smart Object отображается особая рамка при масштабировании (рис.4).

Рис.4

И второе, если вы включите в состав Smart Object корректирующий слой (Adjustment Layer) – размер Smart Object будет таким, как размер всего вашего макета страницы, а не нужной иконки, например.

Еще одна радость, при копировании Smart Object вы получаете несколько слоев, которые являются точной копией друг друга, и при внесении изменений в один из них – меняются все. Что это нам дает? У вас есть макет страницы каталога с 9 кнопками «Купить», заказчик посмотрел и захотел добавить на эти кнопочки иконку корзины. Это не требует значительных трудозатрат, мы заходим в один из слоев Smart Object, вносим необходимые изменения, сохраняем – и о счастье! – у нас все кнопочки имеют новый вид.

И снова полезность – включив большую растровую картинку в Smart Object, вы можете свободно ее масштабировать, не теряя качество изображения. Пример масштабирования с использование Smart Object и без – рис.5 ( здесь четче видно детали) И в любой момент вы сможете растрировать свою картинку, если изменение масштаба уже не планируется, а смысла передавать, дальше в работу большой по весу файл – нету.

Рис.5

Как же создать этот полезный Smart Object? Все так же легко, как и легко, с ним работать. Выбираем необходимые слои. И на панели слоев нажимаем правой кнопкой на одном из выделенных слоев – выбираем Convert to Smart Object (рис.6) или можно прописать свое сочетание клавиш.

Рис.6

Выбирать нужные слои легко с помощью инструмента Move Tool при включенной функции авто выбора слоев (рис.7). То есть выбирается тот слой, на который нажали левой кнопкой мышки, но это кому как удобно — включать ее или нет.

Рис.7

Использование Smart Object несколько увеличивает вес файла, но вам решать стоит ли оно того. Для себя я сделала вывод – стоит!

habr.com

10 вещей, которые нужно знать о Smart Objects в Photoshop

С недавним введением связанных Smart Objects (SO) в Photoshop (PS) стали намного мощнее, полезнее. Мы поделимся с вами 10 вещами, о которых вы должны знать, работая с SO в PS. Начнем!

1. Создание Smart Objects (SO). Они могут создаваться несколькими путями, как правило, тип SO зависит в значительно степени от того, как и где вы их разрабатываете. К примеру, вы можете создать связанные Linked Smart Objects или Embedded Smart Objects (встроенные). Это можно сделать с помощью панели слоев, или с помощью простого перетаскивания элементов на холсте.

1

2. Сохранение растровых изображений. Сохранение качества слоев – очень важное свойство SO. Работа со слоями пиксельных изображений очень сложная и требует осторожности. Даже простые вещи как вращающийся слой с Free Transform Tool может привести к потере качества. Когда вы включаете пиксельный слой в SO, PS сохраняет встроенный или связанный файл, где хранится информация, необходимая для исходного изображения. Поэтому он не может сохранить первоначальное качество изображения независимо от того, сколько раз вы измените размер слоя смарт-объекта. Это похоже на работу с векторами, но разница в том, что масштабирование SO больше, чем их оригинальный размер. Это все равно приведет к потере качества и пикселизации.

2

3. Сохраненные Free Transform Settings (Свободно трансформируемые настройки). Если вы искажаете SO, применяя трансформацию, оригинальное приобразование будет доступно, если вам потребуется настроить его позже.

4

4. Общий источник. Если вы копируете SO обычным путем в документе PS, те же встроенные первоначальные файлы будут использоваться в обеих случаях. Это значит, что вы можете делать копии SO несколько раз и обновлять все одной лишь заменой их первоначального файла.

5

5. Smart Objects Via Copy. Если вам нужно дублировать Smart Objects, и вы хотите убедиться, что два примера не связаны и исходным файлом, вы должны использовать функцию Smart Objects Via Copy, с помощью которого можно отделить дубликат слоя от первоначального SO. Единственный недостаток в этом – увеличение размера файла.

6

6. Замена контента. Замена содержимого в SO очень проста. Все, что вы должны сделать – щелкнуть на кнопку слоя и отредактировать исходник. Здесь очень пригодится инструмент Free Transform для искажения и вращения SO.

7

7. Связанные Smart Object. Эта функция PS позволила использовать внешние исходные исходные файлы для смарт-объектов. У этого есть преимущества, и одно из можно использовать изображения или векторный файл в нескольких документах PS как связанных SO. Если вы измените исходный объект позже, он будет автоматически обновляться во всех ваших PSD-файлах. Еще одно большое достоинство – это то, что связанные SO не будут увеличивать размер файлов.

8

8. Преобразование текстовых слоев в смарт-объекты. Текстовые слои можно масштабировать, вращать, искажать без их растризации, но они не могут быть искажены без разрушения по умолчанию. Лучший метод сохранить слои для редактирования – преобразовать их в SO. Это поможет с умом их искажать, предоставляя доступ к редактируемому тексту внутри источника SO. Та же техника может использоваться для Illustrator Smart Objects.

9

9. Использование фильтров (Smart Filter). Другим преимуществом для SO является то, что они преобразовывают фильтры в не изменяющихся Smart Filter. Эти редактируемые эффекты могут суммироваться и контролироваться каждый отдельно. Но существуют такие фильтры, которые не могут быть использованы в качестве Smart Filters. Один из них – Vanishing Point.

10

10. Smart Filter Mask. В начале использование смарт-фильтров вы заметите дополнительный белый прямоугольник ниже миниатюры слоя в палитре слоев – это и есть Smart Filter Mask. Его используют для маскировки эффектов фильтров, применяемых для конкретного слоя.

11

Итак, SO – мощные инструменты Photoshop. Они используются не только для ускорения работы, но и для сохранения качества снимков, а также помогут уменьшить размер файла. Надеемся, что данные советы сделают вашу работу продуктивнее.

Читайте также: Скачайте бесплатную книгу «Photoshop Tips and Tricks»

Читайте также: 25 эффективных инструментов Photoshop для веб-дизайнеров

<p style="text-align: center">Нашли ошибку? Выделите текст и нажмите <em>Ctrl+Enter</em>.</p> comments powered by HyperComments comments powered by HyperComments

say-hi.me

Смарт-объект в фотошопе (часть II)

 Приветствую вас друзья! Продолжаем рассматривать смарт-объекты в фотошопе.

В этой части мы рассмотрим возможности редактирования изображений расположенных в смарт-объекте, создание связанных и не связанных копий, а также поговорим об экспорте и импорте содержимого смарт-объектов.

В первой части мы с Вами говорили, что в смарт-объектах можно проводить масштабирование, применять фильтры и эффекты, а как быть, если возникает необходимость редактирования изображения. Так вот напрямую, применить какие-либо инструменты, например, рисовать кисточкой и пользоваться ластиком не получится. Что же тогда делать?

 

Редактирование содержимого смарт-объекта.

Если все-таки возникла необходимость отредактировать картинку внутри смарт-объекта, то тогда нужно перейти в режим редактирования содержимого. Щелкните правой кнопкой мышки (ПКМ) по слою со смарт-объектом и в появившемся перечне режимов выберите «Редактировать содержимое».

Или можно дважды щелкнуть левой кнопкой мышки (ЛКМ) по миниатюре смарт-объекта.

В итоге изображение нашего сундучка откроется отдельно в новой вкладке

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

Обратите внимание на расширение, с которым изображение открылось в новой вкладке.

Что это за расширение «PSB»?

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

Важно, после редактирования (изменения данных) сохранять этот файл для перезаписи данных! А так как файл PSB, который мы редактировали, входит в папку смарт-объекта распложенного на основной палитре слоев, то исходное изображение автоматически обновляется и всегда демонстрирует актуальное содержание файла.

Рассмотрим на примере, находясь на вкладке «Слой 0.psb» возьмем инструмент «Ластик» и сотрем крышку у сундучка.

После окончания редактирования изображения сохраняем изменения простым нажатием комбинации клавиш Ctrl+S или через меню «Файл».

Закроем вкладку с файлом PSB, изображение на основной вкладке также изменяется.

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

Выделим эти два слоя, щелкнув ЛКМ по одному из них, зажмем клавишу «Shift» и щелкнем ЛКМ по второму слою.

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

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

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

 

Создание связанных копий.

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

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

Пример: создадим новый документ и откроем в нем изображение цветка.

Преобразуем слой с изображением цветка в смарт-объект.

Связанные копии создаются путем перетаскивания слоя на иконку внизу палитры «Создать новый слой» или нажимая комбинацию клавиш Ctrl+J.

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

Теперь для основного слоя с цветком «Слой 1», который является смарт-объектом, зададим режим «Редактировать содержимое». Для изображения в новой вкладке, содержащей файл PSB, создадим корректирующий слой «Цветовой тон/Насыщенность» в режиме отсечения по слою.

Перекрасим лепестки в другой цвет.

Сохраняем внесенную коррекцию – нажимаем Ctrl+S, закроем вкладку с PSB файлом. Переходим к основной вкладке и что мы видим? Цвет лепестков поменялся на всех цветочках. Вот так можно применить свойство связанных копий.

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

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

Аналогично поступим с другим слоем, но поменяем ему цвет и лепестков и листьев.

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

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

 

В заключении рассмотрим экспорт и импорт содержимого смарт-объекта.

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

Вернемся на опушку леса, где мы нашли сундучок с драгоценностями. Отредактируем содержимое смарт-объекта и применим несколько изменений.

Потом наведя курсор мышки на слой со смарт-объектом, щелкнем ПКМ по нему и выбираем функцию «Экспортировать содержимое».

В окне «Сохранение» Вам предложат выбрать папку и имя («Сундучок настройки») сохранения. Сам файл обратите внимание, сохраняется с расширением .psb.

Откроем изображение другого леса, в котором также нашелся сундучок.

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

Для этого необходимо навести курсор мыши на слой со смарт-объектом, щелкнуть по нему ПКМ и в перечне выбрать «Заменить содержимое».

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

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

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

 

Перевод смарт-объекта в простой слой.

Когда особенности смарт-объектов Вам больше не требуются или Вы просто захотите перейти в обыкновенный режим редактирования изображения, выберите команду – «Растрировать слой».

Структура слоев в палитре принимает обычный вид.

Это все, что я знаю о смарт-объектах в фотошопе, части касающейся обработки фотографий.

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

Приятных творческих успехов!

 

 

 

Если Вы не хотите пропустить интересные уроки по обработке фотографий - подпишитесь на рассылку.Форма для подписки находится ниже.

www.photoshopsunduchok.ru

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

   

 

Практический пример использования

 Продолжаем тему смарт-объектов, которая уже рассматривалась в статьях:

 Одна из основных проблем при редактировании растровых слоев — ухудшение качества изображения при масштабировании. Это эффект кумулятивный: последовательные коррекции быстро снижают качество изображения.

Если же создать из слоя или группы слоев интеллектуальный объект, редактирование этих слоев будет производиться в отдельном документе, на который «родительский» документ будет ссылаться. В сущности, слой Smart Object замещает исходный слой.Преимущество такого подхода в том, что отделенный слой интеллектуального объекта можно масштабировать, вращать и деформировать инструментами «Свободное трансформирование» (Free Transform) или «Деформация» (Warp) без потери качества исходных растровых слоев. К слоям с интеллектуальными объектами также можно применять фильтры Photoshop, результаты таких операций называются «интеллектуальными фильтрами» (smart filters).Изменять интеллектуальные объекты «напрямую», скажем, с помощью кисти, нельзя, зато можно в любой момент открыть двойным щелчком такой объект как отдельный документ, дважды щелкнув его мышью. Открытый таким образом интеллектуальный объект можно отредактировать как обычное изображение. Когда вы закроете интеллектуальный объект, внесенные вами изменения проявятся в «родительском» документе.

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

Урок сделан в русифицированой программе Photoshop CS6.

 20 

Подобные публикации:

 

На исходном снимке — книга с фотографиями. 

1

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

2

С помощью инструмента «Перемещение» (Move) я перетащил фотографию на книгу с фотографиями. 

3

Правой кнопкой мыши щёлкаю по слою 1 и в раскрывшемся списке выбираю пункт "Преобразовать в смарт-объект". Это позволит сохранить добавленную фотографию в исходном виде. 

4

Вызываю "Свободное трансформирование" - Ctrl+T, удерживая клавишу Shift, тянем за любой угловой маркер внутрь фото - уменьшаем размер фото и разворачиваем на необходимый угол. 

5

Не применяя трансформацию, правой кнопкой мыши щёлкаю внутри рамки и в раскрывшемся списке выбираю "Деформация". 

6

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

7

Возвращаем непрозрачность слоя к 100%. Как уже отмечалось, многие команды коррекции невозможно применить непосредственно к самому смарт-объекту. Но для этого можем применить другой метод. Два раза левой клавишей мыши щёлкаем по иконке слоя со смарт-объектом. 

8

Открывается предупреждающее окно фотошопа, нажимаем "Ok". 

9

Наша фотография открывается в новой вкладке и теперь доступны все средства коррекции и фильтры. 

10

К примеру, я вызвал "Кривые" - Ctrl+M, выбрал синий канал и немного приподнял кривую за среднюю точку - добавил синего цвета на фото. 

11

Закрываем эту вкладку - нажимаем на "крестик". 

12

Сохраняем изменения. 

13

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

14

Щёлкаем по средней иконке внизу палитры "Слои" и выбираем корректирующий слой "Кривые". 

15

Опускаем кривую вниз - затемняем изображение. 

16

Инвертируем маску слоя - Ctrl+I, изображение возвращается к своему исходному состоянию. 

17

Берём инструмент "Кисть" со стандартными параметрами, жёсткость кисти ставим около 60%, на передний план устанавливаем белый цвет. 

18

Проводим кистью в тех местах фото, где должна быть тень. Где я провёл видно по маске слоя. 

19

Сравните изображение книги с фотографиями до, и после обработки фотографии в фотошопе. 

20

Мы с Вами рассмотрели, как использовать смарт-объект в фотошопе.

 

Если Вы не хотите пропустить интересные уроки по обработке фотографий - подпишитесь на рассылку.

Форма для подписки находится ниже.

 recommend7   

 

www.photoshopsunduchok.ru

Smart-объекты в Photoshop | ЗАПИСКИ

02.08.2009

Начиная с версии CS3, в Photoshop появилось такое понятие, как smart object. Вы можете преобразовать в этот формат любой слой, либо группу слоев. Выделяете слой или несколько слоев и нажав на них правой кнопкой мыши, выбираете в меню "Convert to Smart Object". Слой или группа слоев сразу же преобразуется в смарт-объект. Другими словами, в документе создается еще один документ, то есть PSD-файл. Правда, он имеет расширение PSB, но все свойства и возможности PSD-файлов он сохраняет. Если щелкнуть два раза на этом объекте, он открывается в новом окне и с ним можно производить те же действия, как и с обычным документом Photoshop. Фильтры, маски и прочие преобразования. Если закрыть или сохранить этот документ, все преобразования вы сможете наблюдать на вашем слое, который вы преобразовали в смарт-объект, в основном документе.

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

Можно скопировать слой со смарт-объектом, бессчисленное количество раз, единственная проблема при этом заключается в том, что сам объект остается тем же самым и если вы его отредактируете, изменения коснутся всех его копий. Если вам нужны уникальные копии этого объекта, чтобы вносить в них разные изменения, то сначала следует сделать несколько копий слоя, а потом уже преобразовывать каждый из них в смарт-объект. Однако, на практике бывает все наоборот, то есть уникальная копия объекта может понадобиться уже после преобразования. Эту проблему тоже просто решить, просто щелкнув правой кнопкой по слою со смарт-объектом и выбрав в меню "New Smart Object via Copy". В этом случае, создается уникальная копия смарт-объекта, которая уже будет хранить в себе, свои собственные изменения. Так же, в этом меню доступны и другие параметры, такие, как "Edit Contents", "Export Contents" и "Replace Contents". То есть, вы можете редактировать содержимое смарт-объекта, экспортировать его содержимое, в формате PSB, либо заменить его любым другим файлом.

Так же, смарт-объект можно преобразовать в нормальный растровый слой, выбрав в том же меню, команду "Rasterize Layer", в этом случае, все содержимое объекта преобразуется в растровый слой.

В заключение, хочу сказать, что смарт-объект можно сделать, как из текущего слоя в Photoshop, так и из данных, вставляемых в него через буфер обмена. Одним из таких преобразований, является вставка векторного объекта из Adobe Illustrator. Происходит это очень просто. Выделяете в Illustrator нужные векторные объекты, нажимаете Ctrl+C, а в Photoshop нажимаете Ctrl+V, и он вас спрашивает, в каком формате вставить данные. Если в диалоговом окне выбрать "Smart Object", то вы получите новый слой, со смарт-объектом, в котором будут содержаться векторные данные из Illustrator. Работать с таким объектом можно так-же, как и с растровым, только открываться для редактирования он будет в родительской программе, то есть в Adobe Illustrator.

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

Метки: Adobe Photoshop, smart objects

articles.antory.ru

Используем смарт-объекты в Фотошоп | Soft Settings

Финальный результат

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

1. Подготовка макета

Шаг 1

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

Примечание переводчика: в качестве бесплатной альтернативы можете использовать макет с сайта 365psd.com.

Шаг 2

Подготовьте отдельный слой для каждого экрана. Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте прямоугольник такого же размера, как и сам экран. В качестве альтернативы можно использовать инструмент Прямоугольная область (Rectangular Marquee Tool) и заполнить выделение пикселями. Не важно какой способ вы выбрали, главное, чтобы прямоугольник находился на отдельном слое.

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

Я предпочитаю использовать слои фигур, так как их проще редактировать инструментом Свободное трансформирование (Free Transform). Активировать его можно, нажав Ctrl + T.

Шаг 3

Сделайте такой же слой для каждого экрана. Формы можете заполнить любым цветом. Мы будем использовать эти фигуры в качестве масок для смарт-объектов. Сейчас у вас должен быть примерно такой результат:

Шаг 4

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

Вы также можете создавать группы слоев для каждого продукта. Выберите все слои, принадлежащие одному устройству и в выпадающем меню на панели слоев выберите Новая группа из слоев (New Group from Layers). Цвет группы задать очень просто. Кликните правой кнопкой мыши по группе и выберите необходимый цвет.

2. Настраиваем смарт-объекты

Шаг 1

В этом уроке используется скриншот сайта Tuts+. Перетяните его в документ с нашим макетом. Разместите новый слой над слоем с фигурой для экрана компьютера (прим. переводчика – на скриншоте он назван “Desktop Screen”). Конвертировать его в смарт-объект можно тремя способами:

  1. Перейдите в меню Слои > Смарт-объект > Преобразовать в смарт-объект (Layers > Smart Objects > Convert to Smart Object).
  2. Кликните по выпадающему меню в панели слоев и выберите Преобразовать в смарт-объект (Convert to Smart Object).
  3. Кликните правой кнопкой мыши по слою и выберите Преобразовать в смарт-объект (Convert to Smart Object).

Примечание автора: Не изменяйте размер слоя до конвертации в смарт-объект.

Шаг 2

Теперь можете изменить размер смарт-объекта под размер экрана устройства. Нажмите Ctrl + T и используйте точки по краям изображения. При работе со смарт-объектами можно заметить небольшую подсказку: точки для смарт-объекта заполнены черным цветом, а при редактировании обычного изображение они пустые. Пока не трогайте нижнюю часть скриншота. Если хотите, измените имя слоя.

Шаг 3

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

Шаг 4

Перетяните копию смарт-объекта, разместив ее над экраном ноутбука. Как и в предыдущем шаге, используйте Свободное трансформирование (Free Transform), чтобы изменить размер скриншота. Здесь также не трогайте нижнюю часть фотографии.

Шаг 5

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

Шаг 6

Теперь, когда все слои на месте, можно убрать лишнее. Это спрячет выпирающие части изображений, но не обрежет сам скриншот. Сначала выберите слой смарт-объекта, затем кликните по выпадающему меню и выберите пункт Создать обртравочную маску (Create Clipping Mask). Можно воспользоваться клавиатурным сокращением Alt + Ctrl + G.

Есть также альтернативный способ. Кликните между двух слоев, удерживая нажатой клавишу Alt. Если вы увидели, что курсор сменил вид — вы в правильной точке.

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

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

У вас должен получится примерно такой макет:

3. Редактируем смарт-объект

Шаг 1

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

Смарт-объект открывается как отдельный, специальный файл с расширением .psb:

Шаг 2

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

Шаг 3

Закройте и сохраните .psb файл. Теперь на всех трех экранах появится новый скриншот. Редактировать два других смарт-слоя нет необходимости, так как они являются копией оригинала.

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

Выводы

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

Автор: Cheryl Graham

softsettings.com


Смотрите также