Photoshop 101: вступ для веб-розробників

Вступ

Часто, працюючи веб-розробником, нам потрібно інтегрувати шаблони. Вони можуть бути з Photoshop або іншого програмного забезпечення. У цій статті ми розглянемо основи Photoshop для веб-розробників.

Цей вміст спочатку був написаний для семінару для DAMDigital London.

Adobe Photoshop - це програма для редагування растрової графіки, тобто програма, яка дозволяє користувачам створювати та редагувати зображення.

Він був випущений в 1988 році і став галузевим стандартом для графічного програмного забезпечення.

Ви можете завантажити безкоштовну пробну версію Photoshop на веб-сайті Adobe.

Робоча область

Робоча область Photoshop є модульною, тому ви можете адаптувати її залежно від роботи, яку виконуєте. Деякі робочі області за замовчуванням уже налаштовані у Photoshop. У цій статті я використовую Graphic and Webодну. Щоб перейти до цієї робочої області, зайдіть у Window/workspace/Graphic and Web.

Давайте подивимось на нашу робочу область:

  • A - Рядок меню : Тут ви знайдете більшість варіантів фотошопу.
  • B - Панель параметрів : Ця панель надасть вам усі опції для поточно вибраного інструменту.
  • C - Панель інструментів : Ця панель містить усі доступні інструменти з Photoshop. Пов’язані інструменти згруповані разом, і ви можете довго натискати один із них, щоб переглянути всі інструменти.
  • D - Панелі : Це область, де у Вас відкриті основні панелі, такі як Layers, Historyтощо. Щоб відкрити панель, просто зайдіть уWindow/(Panel that you want to open)

Створіть новий файл

Створюючи новий файл у Photoshop, спочатку потрібно знати, для якого середовища буде використовуватися дизайн - тобто, він буде використовуватися для екрану (веб, фільму чи відео) або для друку?

Залежно від відповіді на це запитання, вам потрібно буде змінити значення PPI (пікселів на дюйм).

Пікселі на дюйм (PPI) - це вимірювання, що використовується для визначення роздільної здатності дисплея комп’ютера. Цей показник оцінює якість зображення / зображення, яке може відображати певний обчислювальний або вихідний пристрій відображення. Пікселів на дюйм також називають щільністю пікселів. Техопедія

Для друку зазвичай потрібно 300PPI, але це насправді залежить від принтера та розміру друкованого документа. Вам також слід змінити колір на CMYK, але знову ж таки це залежить від способу друку документа. Якщо ви хочете дізнатись більше про кольори RGB та CMYK, перегляньте цю статтю.

Для екранів та Інтернету потрібні кольори 72PPI та RGB. Потім потрібно вказати розмір екрану. Я б порекомендував розробити спочатку для мобільних, а потім для планшетів та настільних ПК.

Як веб-розробнику, можливо, вам не потрібно буде створювати новий файл. Швидше за все, вам доведеться працювати з дизайном веб-дизайнерів.

Зараз ми розглянемо існуючий .psdшаблон і попрацюємо з ним, щоб оглянути Photoshop.

Ви можете завантажити та відкрити цей шаблон PSD від Luis Costa.

Шари

Однією з основних особливостей Photoshop є шари . Шари нагадують стопку аркушів, і ви можете бачити крізь прозорі ділянки або ділянки з низькою непрозорістю (частково прозорі).

Ви можете відкрити панель шарів у Window/Layers.

Верхній шар на цій панелі буде розміщений над усіма іншими шарами внизу. Шари можна також упорядковувати у папки. Важливо правильно називати шари та папки. Це допоможе під час інтеграції.

Біля кожної папки та шару ви маєте піктограму ока. Це дозволяє вам перемикати їх видимість.

Ваш PSD може мати багато шарів та документів. Один із способів швидко знайти шар - це вибрати move tool (v). Клацніть правою кнопкою миші на полотні, де ви хочете знайти свій шар. Ви отримаєте всі шари в області, де ви клацнули правою кнопкою миші. Клацнувши на одному, він виділить цей шар на панелі шарів.

Набір інструментів

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

По-перше, якщо ви просто встановите Photoshop CC 2018, вам потрібно буде відновити всі інструменти. Тож перейдіть до Edit > Toolпанелі та натисніть кнопку Відновити за замовчуванням.

Ми побачимо деякі найкорисніші інструменти, які ви використали б для інтеграції шаблону:

A - Інструменти виділення

  • Перемістити : дозволяє користувачеві переміщати шар навколо полотна. Як ми вже бачили раніше, його також можна використовувати для пошуку шару, якщо клацнути правою кнопкою миші на своєму полотні.
  • Прямокутна область : Цей інструмент використовується для вибору ділянки полотна для копіювання та вставки, заповнення тощо. Його можна використовувати також для вимірювання. Коли ваш вибір буде зроблено, ви зможете знайти розмір вибраної області в Window/Info. Можливо, вам доведеться змінити одиницю за замовчуванням у Photoshop, Edit/preferences/general/Unit & Rulersа потім встановіть одиниці на пікселі.

B - Інструменти для обрізання та нарізки

  • Обрізати : Цей інструмент може… обрізати зображення? У налаштуваннях інструменту (панель параметрів) ви можете встановити пропорцію, яку потрібно зберегти.

C - Вимірювальні інструменти

  • Піпетка : Піпетка дозволяє швидко отримати кольорове посилання у вашому дизайні. Просто натисніть, де ви хочете колір. Потім у нижній частині вашої панелі інструментів колір переднього плану зміниться на вибраний. Якщо натиснути на колір переднього плану, він відкриє вікно color picker window. Звідти ви можете отримати значення вашого кольору.
  • Кольоровий семплер : При інтеграції вашого дизайну вам може знадобитися вибрати кілька кольорів. Ми збираємось знову використовувати інформаційне вікно Window/Info. Цей інструмент дозволяє нам створити вибірку кольорів. Просто натисніть на область зображення, з якої ви хочете отримати кольори. Ви отримаєте кожен колір на інформаційній панелі. Ви можете змінити тип кольору на веб, натиснувши піктограму Піпетка під номером.
  • Лінійка : допомагає вам виміряти ваш шаблон. Вся інформація з’явиться у вашому інформаційному вікні. Витримуйте Shiftпри вимірюванні, щоб ваша лінійка залишалася прямою. Ви також можете отримати кути.

G - Інструмент навігації

  • Рука : Цей інструмент допомагає вам обійти полотно. Ви можете отримати доступ до цього інструменту в будь-який час, утримуючи пробіл і перетягуючи його за допомогою миші.
  • Масштабування : дозволяє збільшувати та зменшувати масштаб (ви можете Ctrl+ +, або Ctrl+ -теж).

Посібники

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

Ви можете переміщати існуючі напрямні за допомогою move tool(v).

Щоб створити нові напрямні, вам потрібно буде відкрити лінійку: View/Rulerабо Ctrl+ R. Лінійка з’явиться у вашій робочій області. Потім з лінійки ви можете перетягнути нову напрямну на своє полотно.

Щоб вийняти направляючу, використовуйте move tool(v) і поверніть направляючу назад у лінійку.

Щоб приховати та показати всі свої путівники, ви можете просто натиснути Ctrl+ Hабо перейти до View/Extras.

Розумні об'єкти

Що таке розумні об'єкти?

Розумні об'єкти - це шари, що містять дані зображень із растрових або векторних зображень, наприклад файли Photoshop або Illustrator. Розумні об’єкти зберігають вихідний вміст зображення з усіма його оригінальними характеристиками, дозволяючи виконувати неруйнівне редагування шару. Adobe

Розумні об’єкти можна розпізнати у ваших шарах, якщо на їх мініатюрах є такий значок:

Розумні об’єкти дуже зручні, якщо ви працюєте з зображеннями векторного типу (SVG, EPS, AI), але також корисні з іншими складними растровими файлами.

Спробуємо імпортувати розумний об’єкт у наш PSD. Завантажте файл SVG із flaticon. Щоб імпортувати наш SVG на наше полотно, просто перетягніть файл на нього. Тепер ми можемо редагувати наш SVG в Illustrator або будь-якому іншому векторному програмному забезпеченні, двічі клацнувши ескіз або наш розумний об’єкт. Зміни з’являться у нашому PSD.

Однак розумні об'єкти можуть зробити більше, ніж це. Якщо ви хочете дізнатися більше про них, перегляньте 10 речей, які потрібно знати про розумні об’єкти у Photoshop.

Експортні активи

По-перше, просто нагадуємо, що Photoshop - це растрове програмне забезпечення, а не векторне програмне забезпечення. Це означає, що ми “не можемо” експортувати SVG-файли з Photoshop. Для цього вам потрібно буде експортувати такі файли з Illustrator або Inkscape, наприклад.

В Інтернеті ми хочемо мати легкі файли зображень. Для фотографування ми б використовували стислий .jpgфайл. Якщо вам потрібно використовувати прозорість (альфа-канал), ми використаємо .pngфайл. Для анімованого зображення ми використали б .gif. Якщо вам потрібне векторне зображення (наприклад, піктограми), найкраще експортувати файл як .svg. Якщо ви хочете отримати більше інформації про всі файли, доступні у Photoshop, ви можете перевірити "формати файлів" на веб-сайті Adobe.

Експортуйте наше полотно

Щоб експортувати полотно, просто виконайте такі дії:

  1. Йти до File/Export/Save for Web
  2. Виберіть формат файлу
  3. Виберіть розмір зображення
  4. Виберіть якість
  5. Зберегти

Експортуйте лише актив із полотна

Ймовірно, вам доведеться експортувати деякі активи вашого шаблону.

Давайте експортуємо стрілку ліворуч у каруселі товару:

Використовуючи інструмент переміщення, ми збираємось знайти наш шар. Клацніть правою кнопкою миші на стрілці та виберіть шар Arrow Left. Тепер просто клацніть правою кнопкою миші на цьому шарі на панелі шарів. Виберіть export asі виберіть потрібний тип файлу.

Ми також можемо експортувати папки.

Дії

Що таке дія у Photoshop?

Дія - це низка завдань, які ви відтворюєте в одному файлі чи на пакеті файлів - команди меню, параметри панелі, дії інструменту тощо. Наприклад, ви можете створити дію, яка змінює розмір зображення, застосовує ефект до зображення, а потім зберігає файл у бажаному форматі. Adobe

Ця функція дійсно зручна, якщо ви хочете змінити розмір партії зображень для Інтернету!

Давайте створимо нову дію для обрізання зображення та експортування цього:

  1. Завантажте купу зображень з //unsplash.com/
  2. Відкрийте одне з цих зображень
  3. Відкрити Actionsпанель, Window/Actions,
  4. Створіть нову дію, натиснувши на піктограму Створити нову дію (ту, яка знаходиться зліва від піктограми кошика). Давайте назвемо цю дію Експорт для веб-імені клієнта.
  5. Зараз ми записуємо свою акцію. Кнопка запису буде червоною, і ви можете зупинити запис, натиснувши піктограму зупинки (квадратна піктограма зліва) /
  6. Виберіть піктограму обрізання та встановіть співвідношення 1х1 та обріжте зображення /
  7. Тепер ми хочемо експортувати наше зображення ,, File/Export/Save for Webвибрати JPG, якість 50% та ширину 500px.
  8. Натисніть "Зберегти" та виберіть папку призначення.
  9. Закрийте своє зображення, не зберігаючи його.
  10. Щоб зупинити запис, натисніть на піктограму зупинки (квадратна піктограма зліва).

Тепер у нас є своя дія, тому ми можемо відкрити зображення і просто “відтворити” свою дію, натиснувши кнопку відтворення.

Якщо ми хочемо застосувати свою дію до серії зображень, просто виконайте такі дії:

  1. Йти до File/Automate/Batch
  2. Виберіть Sourceпапку.
  3. Виберіть нашу дію
  4. Натисніть на Ok

І вуаля! Усі ваші зображення знаходяться в папці експорту.

Сподіваюся, вам сподобалось це невелике введення в Photoshop 101 для веб-розробників?. Якщо ви хочете мати версію 102, дайте мені знати, що ви хотіли б знати, або прочитати більше?.

  • @vince_umo
  • vincent-humeau.com