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

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

Отже, перед нами Photoshop. На перший взляд він дійсно страшний. Маса інструментів і функцій, і перше відчуття - для того щоб цим користуватися, знадобитися напевно року три!
Частка правди в цьому є. Щоб стати "фотошопопрофессіоналом", працювати з ним дійсно потрібно не менше трьох років, але як показує наша практика, освоїти його можна при великому бажанні місяці за три. А вивчити пару маневрів можна і за один урок, ніж ми з Вами зараз і займемося.

1. Розмір зображення

Може Ви вже стикалися з такою проблемою: вставляємо зображення на сайт, зберігаємо, дивимося - Про ЖАХ. Він став потворно широким! Його просто расперло!

Ми з дитинства звикли, що розміри вимірюються в сантиметрах, тому звичний розмір фотографії для нас: 3х4см, 10х15см, і так далі.

На екрані комп'ютера же картина зовсім інша. Точніше розміри картинки.
Тут все вимірюється в пікселях (pixel).
Піксель - це точка. Безліч різнокольорових точок (пікселів) складають зображення на екрані. Відповідно чим більше пікселів в нашій картинці, тим більшу частину екрану вона займає.
Піксель прийнято позначати як "px".
Тепер ближче до справи.

Отже, припустимо, у нас є свіженька фотографія, тільки що з 8-ми мегапіксельного цифрового фотоапарата. Завантажуємо її на комп'ютер, відкриваємо в Фотошопі, і відразу заходимо в меню (зверху) Image / Image Size.
Image Size перекладається як Розмір зображення.
Бачимо таке віконце:


Тут нам потрібні тільки верхні два поля: Width - ширина зображення, Height - висота зображення.
Для того, щоб поміняти розмір, вписуємо необхідну ширину (або висоту) і тиснемо кнопку Ok. Але для початку переконаємося що включені галочки ConstrainProportions (Зберегти пропорції) і ResampleImage (Перерахувати зображення).
Тепер про розміри. Для того щоб розмістити зображення на сторінку сайту, рекомендується зменшити її до розміру не більш 500px по ширині.
Розмір підбираємо на око, як йому буде приємно. Після зменшення зображення, йдемо в меню View / Actual Pixels. щоб відобразити зображення в реальному розмірі (піксюлечка до піксюлечке). Якщо картинка не влазить в своє віконце, розтягуємо його за нижній правий куточок, або два рази натискаємо по синій смужці віконця (як і у всіх вікнах Windows).

Хочеться додати, що зображення можна як зменшувати, так і збільшувати, але відмінність в тому, що при зменшенні якість не втрачається, при збільшенні - втрачається. Тому при підборі необхідних розмірів скасовувати попереднє дію одночасним клавіш Ctrl + Z.
Ось і всі справи!

2. Орієнтація зображення

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

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

Відкриваємо неправильну фотографію в Фотошопі, йдемо в меню Image / Rotate Canvas. випало ще одне меню, з якого нам необхідні два пункти: 90 ° CW (Вирощують на 90 ° за годинниковою стрілкою) і 90 ° CCW (Вирощують на 90 ° проти годинникової стрілки). Начебто все зрозуміло, зайвих слів не потрібно. Нагадаємо, що неправильна дія можна скасувати одночасним натисканням клавіш Ctrl + Z.

3. Корекція по тонам і кольором

А зараз ми змусимо Фотошоп зробити наші фото привабливіше.

Перший крок - додати контраст. Звичайно якщо це потрібно.
Меню Image / Ajustments / Auto Contrast - програма відкоригувала зображення по тонам.
Якщо зображення було недостатньо контрастним, воно стало краще.

Другий крок - відкоригувати кольору.
Меню Image / Ajustments / Auto Color - програма відкоригувала зображення за кольорами.
Зображення стало більш барвистим.

Ось і всі дії.
Звичайно, ми розповіли Вам про автоматичні настройках, тобто Фотошоп робить з фотографією те, що вважає за потрібне. Іноді він помиляється, все-таки він керується не особистою думкою, а алгоритмами, закладеними в ньому.
Для більш тонкої настройки існує маса інших функцій, розповідати про які ми зараз не будемо, щоб не навантажувати Вас зайвою інформацією.

Ми вже навчилися працювати над зображеннями, тепер справа за малим - зберегти.
Зберігати ми звичайно вміємо, але є нюанс. І ім'я йому - Інтернет.

Будемо говорити по простому: чим менший об'єм картинок, тим швидше вони завантажуються, тому наше завдання - домогтися мінімального обсягу нашого зображення.

Для цього в Фотошопі є спеціальний режим збереження. File / Save for Web. - відкривається велике вікно з купою налаштувань, але нам потрібно зробити всього три дії.

2 пункт - якість стиснення підбираємо на око, щоб картинка мала пристойний вигляд. Зазвичай виставляється від 50 до 100.

Схожі статті