Почни з налаштувань, навіть якщо Photoshop давно знаєш. Розміри шрифтів і відступи в курсі розраховані на один і той самий документ: візьмеш інший — і цифри перестануть працювати. Навіщо саме такий документ, пояснено в 1. Як Amazon показує фото.
Документ
Новий документ (Ctrl+N):
- 2000 × 2000 пікселів;
- роздільна здатність 300 пікселів/дюйм;
- колірний режим RGB, 8 біт, фон білий;
- колірний профіль sRGB IEC61966-2.1.
Відкриваєш чужий PSD — спершу глянь його роздільну здатність (Alt+Ctrl+I). Якщо там 72 ppi, усі розміри шрифтів із курсу на ньому вийдуть учетверо дрібнішими.
Розмір шрифту Photoshop має показувати в пунктах (pt). Якщо у твоєму Photoshop шрифт у пікселях — Ctrl+K, розділ «Одиниці та лінійки», текст перемкни на пункти.
Лінійки
Перегляд → Лінійки (Ctrl+R). Клацни правою кнопкою по лінійці й вибери пікселі: відступи рахуємо в px.
Сітка
Сітку не малюємо вручну, а створюємо одним вікном: Перегляд → Напрямні → Новий макет напрямних…
Налаштування у вікні:
- Колір — яскравий, добре помітний на фото.
- Шпальти (вертикальні колонки) — 16. Ширину й середник лишай порожніми.
- Рядки — 16, висоту й середник теж лишай порожніми.
- Відступ від краю — 45 пікс з усіх чотирьох боків.
- «Шпальти по центру» — вимкнено.
- «Очистити наявні напрямні» — увімкнено, щоб старі лінії не змішалися з новими.
- «Перегляд» — увімкнено, так сітку видно ще до натискання OK.
Ці налаштування можна зберегти через список «Стиль» і далі вибирати одним кліком.
Виходить рівна сітка 16 × 16 з рамкою 45 px по краю. Ось як вона лягає на готове фото:
А тепер ті самі елементи, обведені блоками:
Подивись, як усе стоїть по лініях. Слайд зібраний із чотирьох блоків: пляшка з помпою ліворуч, заголовок угорі праворуч, колонка з чотирма пунктами під ним і смуга з приміткою внизу. Кожен блок починається й закінчується на лінії сітки. Заголовок і колонка пунктів мають спільний правий край по рамці, іконки пунктів стоять одна під одною, а нижня смуга йде від рамки до рамки. Коли елементи прив’язані до сітки, відступи між ними однакові, композиція врівноважена, а всі слайди одного товару виглядають як одна серія.
Лінії посередині, між 8-ю і 9-ю колонкою та між 8-м і 9-м рядком, ділять полотно навпіл — по них тримаєш симетрію. Текст за рамку 45 px не заходить ніколи: притиснутий до краю, на маленькій картинці він виглядає обрізаним.
Прив’язка
У меню «Перегляд» має стояти галочка біля «Прив’язка» (Shift+Ctrl+;), а в «Прив’язка до» — біля «Направні». Тоді шари самі притягуються до ліній, і нічого не доводиться вирівнювати на око.
Коли сітка готова, заблокуй її: Перегляд → Напрямні → Заблокувати напрямні (Alt+Ctrl+;). Інакше легко випадково потягнути лінію разом із шаром.
Ctrl+; ховає й показує напрямні, Ctrl+H — усі допоміжні елементи разом. Коли оцінюєш готову картинку, ховай їх: сітка заважає побачити композицію.
Друге вікно — як на телефоні
Вікно → Упорядкувати → Нове вікно для «назва файлу» (в англійському інтерфейсі Window → Arrange → New Window for…) відкриває той самий документ удруге. Постав це вікно збоку в масштабі 15 %: 2000 px × 15 % = 300 px, такого розміру фото бачить покупець на телефоні. Працюєш у першому вікні, а в другому одразу видно, чи читається текст і чи не губиться товар.