Ви можете створювати ресурси зображення JPEG, PNG або GIF із вмісту шару або групи шарів у файлі PSD. Ресурси створюються автоматично після того, як ви додаєте розширення підтримуваного формату зображення до імені шару або групи шарів. Для створених ресурсів зображення можна також додатково вказати параметри якості й розміру.

Функція створення ресурсів зображення з файлу PSD особливо корисна під час розробки веб-дизайну для кількох типів пристроїв.

Відео: створення веб-ресурсів у Photoshop CC

Відео: створення веб-ресурсів у Photoshop CC
У цьому відео показано різні способи використання генератора ресурсів у програмі Photoshop CC для отримання зображень різних розмірів і роздільної здатності, які можна використовувати в інших проектах.
Chris Converse

Щоб дізнатися, як створювати та генерувати веб-графіку за допомогою Генератора Adobe, див. статтю Отримання ресурсів для веб-вмісту.

Створення ресурсів зображення із шарів або груп шарів

Щоб краще зрозуміти, як працює генератор графічних ресурсів, розгляньмо простий файл PSD (завантажте його за цим посиланням) з такою ієрархією шарів:

Створення графічних ресурсів у Photoshop
Зразок файлу PSD та його ієрархія шарів

Цей файл має дві групи шарів, які називаються Rounded_rectangles (Заокруглені прямокутники) і Ellipses (Еліпси). Кожна з цих груп шарів містить п’ять шарів.

Щоб створити ресурси зображення з цього файлу PSD, виконайте такі кроки:

  1. Відкривши цей файл PSD, виберіть пункт меню «Файл» > «Створити» > «Ресурси зображення».
  2. Додайте потрібні розширення формату файлу (JPG, PNG або GIF) до імен шарів або груп шарів, з яких потрібно створити графічні ресурси. Наприклад, перейменуйте групи шарів Rounded_rectangles і Ellipses на Rounded_rectangles.jpg та Ellipses.png, а шар Ellipse_4 – на Ellipse_4.gif.

Примітка.

Імена шарів не підтримують спеціальні символи : та *.

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

Імена графічних ресурсів у Photoshop
Імена графічних ресурсів створюються з імен шарів або груп шарів

Примітка.

Для поточного документа ввімкнуто функцію створення ресурсів зображення. Після ввімкнення ця функція залишатиметься доступною, коли документ буде відкрито наступного разу. Щоб вимкнути створення ресурсів зображення для поточного документа, скасуйте вибір цього параметра («Файл» > «Створити» > «Ресурси зображення»).

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

Щоб створити кілька ресурсів з одного шару або групи шарів, розділіть імена ресурсів комами. Наприклад, з такого імені шару буде створено три ресурси:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Збереження ресурсів у вкладеній папці

Ви можете зберігати ресурси зображень, створених із певних шарів або груп шарів у підпапку безпосередньо під папкою ресурсу документа. Укажіть назву підпапки в назві шару або групи шарів. Наприклад:

[підпапка]/Ellipse_4.jpg 

Використання для веб-дизайну

Функція створення ресурсів зображення з файлу PSD особливо корисна під час розробки веб-дизайну для кількох типів пристроїв. Розгляньмо такий дизайн веб-сторінки та його структуру шарів:

Дизайн веб-сторінки та його ієрархія шарів
Дизайн веб-сторінки та його ієрархія шарів

Спробуємо витягти значок угорі та верхній рядок сітки зображення Global Hotspots як ресурси зображення:

  • Додайте розширення формату зображення до відповідних імен шарів.
Перейменування відповідних шарів або груп шарів у Photoshop
Перейменування відповідних шарів або груп шарів у Photoshop

Перейменування відповідних шарів або груп шарів

Примітка.

З вмісту шару або групи шарів створюється один ресурс зображення. Наприклад, група шарів AdventureCo Logo на знімку екрана вище містить шар фігури та шар тексту. Під час створення ресурсу зображення з групи шарів ці шари згладжуються.

Програма Photoshop створює ресурси та зберігає їх у тому самому розташуванні, що й вихідний файл PSD.

Створені ресурси зображення у Photoshop
Створені ресурси зображення

Вибір параметрів якості та розміру

За замовчуванням ресурси JPEG створюються з параметром якості 90%. Ресурси PNG за промовчанням створюються як 32-бітові зображення. Ресурси GIF створюються з основною альфа-прозорістю.

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

Параметри ресурсів JPEG

  • Додайте після імені ресурсу потрібне значення якості: .jpg(1-10) або .jpg(1-100%). Наприклад:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Додайте перед іменем ресурсу потрібне значення розміру зображення (відносне або в підтримуваних форматах: px, in, cm і mm). Photoshop вибере відповідний масштаб зображення. Наприклад:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Примітка. Між розміром зображення та іменем ресурсу потрібно вставити пробіл. Якщо ви вказуєте розмір у пікселях, одиниці вимірювання можна не додавати. Наприклад: 300 x 200.

Примітка.

Як видно з прикладів, потрібний розмір вихідного зображення можна вказувати в різних одиницях і пікселях. Наприклад, таке ім’я шару для створення ресурсу цілком допустиме: 4in x 100 Rounded_rectangle_3.jpg.

Параметри для ресурсів PNG

  • Додайте після імені ресурсу потрібне значення якості: 8, 24 або 32. Наприклад:
    • Ellipse_4.png24
  • Додайте перед іменем ресурсу потрібне значення розміру зображення (відносне або в підтримуваних форматах: px, in, cm і mm). Photoshop вибере відповідний масштаб зображення. Наприклад:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

Примітка. Між розміром зображення та іменем ресурсу потрібно вставити пробіл. Якщо ви вказуєте розмір у пікселях, одиниці вимірювання можна не додавати. Наприклад: 300 x 200.

Примітка.

Як видно з прикладів, потрібний розмір вихідного зображення можна вказувати в різних одиницях і пікселях. Наприклад, таке ім’я шару для створення ресурсу цілком допустиме: 4in x 100 Rounded_rectangle_3.png.

Параметри для ресурсів GIF

  • Додайте перед іменем ресурсу потрібне значення розміру зображення (відносне або в підтримуваних форматах: px, in, cm і mm). Наприклад:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

Примітка. Між розміром зображення та іменем ресурсу потрібно вставити пробіл. Якщо ви вказуєте розмір у пікселях, одиниці вимірювання можна не додавати. Наприклад: 300 x 200.

Примітка.

Як видно з прикладів, потрібний розмір вихідного зображення можна вказувати в різних одиницях і пікселях. Наприклад, таке ім’я шару для створення ресурсу цілком допустиме: 4in x 100 Rounded_rectangle_3.gif.

Для ресурсів GIF параметри якості недоступні

Побудова складних імен шарів

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

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

З цього шару програма Photoshop створить такі ресурси:

  • Delicious.jpg (зображення JPG з якістю 8 і масштабом 120%)
  • Delicious.png (24-бітове зображення PNG з масштабом 42%)
  • Delicious_2.jpg (зображення JPG з якістю 90% і абсолютним розміром 100x100 пікс.)
  • Delicious.gif (зображення GIF із масштабом 250%)

Визначення стандартних налаштувань для ресурсів

Ви можете вказати стандартні параметри для створених ресурсів, що поширюватимуться на всі документи. Виконайте такі дії:

  1. Створіть пустий шар у документі.
  2. Розпочніть назву шару з ключового слова default. Тепер введіть налаштування, які потрібно застосувати до всіх ресурсів зображень, створених із документа. Наприклад:

default hi-res/

Створює всі ресурси зображень у підпапці з назвою hi-res. Наприклад: [папка_ресурсу]/hi-res/Delicious.jpg.

default hi-res/@2x

Створює всі ресурси зображень у підпапці з назвою hi-res. Крім цього, додає префікс до назви ресурсу: @2x. Наприклад, [папка_ресурсу]/hi-res/Delicious@2x.jpg.

default 50% lo-res/

Зберігає ресурси зображення, зменшені на 50%, у підпапку lo-res у папці ресурсу документа 

default hi-res/@2x + 50% lo-res/

Створює 2 ресурси зображення з одного шару:

  • У підпапці hi-res ресурс зображення, назва якого містить суфікс @2x
  • У підпапці lo-res ресурс зображення, зменшений на 50%

Примітка.

Коефіцієнти масштабування для індивідуальних шарів мають пріоритет перед стандартними коефіцієнтами масштабування.

Вимкнення створення ресурсів зображення для всіх документів

У меню «Параметри» можна вимкнути створення ресурсів зображення для всіх документів Photoshop.

  1. Виберіть «Редагувати» > «Параметри» > «Зовнішні модулі».
  2. Зніміть прапорець «Увімкнути генератор».
  3. Натисніть кнопку «OK».

Примітка.

Якщо створення ресурсів зображення вимкнуто в меню «Параметри», команда меню «Файл» > «Створити» буде недоступна. Цю функцію можна знову ввімкнути лише в діалоговому вікні «Параметри».

Поширені запитання

Чи потрібно вказувати унікальні імена ресурсів?

Імена ресурсів мають бути унікальними на рівні документа.

З яким рівнем якості за промовчанням створюються ресурси зображення?

За промовчанням ресурси JPG створюються з параметром якості 90%. Ресурси PNG за промовчанням створюються як 32-бітові зображення. Ресурси GIF створюються з основною альфа-прозорістю.

Чи створює програма Photoshop ресурси зображення із шарів із прозорістю та іншими ефектами?

Так. Прозорість та інші застосовані до шару ефекти зберігаються в ресурсах, створених із цього шару. Однак у створених ресурсах ці ефекти може бути згладжено.

Як ресурси зображення створюються із шарів, що виходять за межі полотна?

Ресурси обрізуються за межами документа. Якщо зображення не вміщується в межі документа, генератор не створює відповідні ресурси зображення.

Чи можна використовувати інші символи, крім коми, для розділення імен ресурсів зображення?

Для розділення імен ресурсів зображення крім коми (,) можна використовувати знак плюс (+). Наприклад:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

це те саме, що:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Відео: створення проекту переформатування кута з Генератора Photoshop

Відео: створення проекту переформатування кута з Генератора Photoshop
У цьому відео показано, як створити веб-макет, який відповідає розмірам екрана в діапазоні 320–1000 пікселів.
Chris Converse

Цей документ захищено ліцензією Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Публікації Twitter™ і Facebook не підпадають під умови ліцензії Creative Commons.

Юридична інформація   |   Політика мережевої конфіденційності