Як підготувати фото для інтернету

  1. Перевагами і зручностями користування цього модуля є такі корисні і потрібні можливості як:
  2. Опис опцій:

Всім привіт! Я радий Вас бачити на моєму блозі ps-blog.ru , Який присвячений урокам для початківців користувачів за програмою Фотошоп. Нагадую, що в минулому статті ми навчилися завантажувати шрифти в Фотошоп, всім хто ще її не читав цю статтю рекомендую з нею ознайомиться.

Сьогодні ми продовжимо вивчати основи Фотошоп, тема сьогоднішнього уроку Як підготувати фото для інтернету. Можливо, у Вас відразу виникли питання, для чого і навіщо фото готувати для інтернету? Можна ж просто взяти завантажити і все.

Так, дійсно в деяких випадках можна просто взяти завантажити і все, але це тягне за собою масу проблем і незручностей. Нижче я навів 5 причин чому потрібно готувати фото для інтернету:

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

Під час верстки веб-дизайну, все елементи макету майбутнього сайту (картинки в форматі Під час верстки веб-дизайну, все елементи макету майбутнього сайту (картинки в форматі .png і .jpg) обов'язково готуються для інтернету, без цього верстка неможлива.

Неправильні пропорції фотографії, які призводять до спотворення Неправильні пропорції фотографії, які призводять до спотворення. Цей пункт я думаю не має потреби в роз'яснення.

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

У деяких ситуаціях потрібно завантаження зображення певного розміру і формату У деяких ситуаціях потрібно завантаження зображення певного розміру і формату. Наприклад Вам потрібно завантажити іконку 16 × 16 пікселів в форматі .png для свого сайту. Все це легко і просто можна зробити в Фотошоп.

З усіма цими завданнями чудово справляється наша улюблена програма Adobe Photoshop CC. Розробниками Фотошоп був придуманий дуже корисний і потрібний модуль з функцією збереження зображень для інтернету (Save for Web). Це потужний модуль управління процесами оптимізації та збереження документів, який автоматично підбирає оптимальні настройки файлу. Цей модуль підтримує і працює з найпоширенішими форматами файлів для інтернету .jpg, .gif, .png.

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

вибір декількох режимів перегляду під час оптимізації зображення для web вибір декількох режимів перегляду під час оптимізації зображення для web

вибір формату в якому зображення буде збережено вибір формату в якому зображення буде збережено

вибір якості і розміру зберігається зображення вибір якості і розміру зберігається зображення

вибір способу оптимізації, стиснення і перегляд ваги оптимізованого зображення вибір способу оптимізації, стиснення і перегляд ваги оптимізованого зображення.

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

Для того, щоб перейти до збереження для web, заходимо в верхнє меню Файл / Зберегти для web або скористаємося гарячими клавішами Ctrl + Alt + Shift + S.

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

Опис опцій:

1. Чотири вкладки варіантів попереднього перегляду.

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

- Оптимізація - це коли Ви бачите в попередньому перегляді тільки оптимізоване зображення

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

- 4 Варіанта - це коли Ви бачите в попередньому перегляді вихідне зображення, зображення в якості якому Ви вибрали, зображення в якості 22 і зображення в якості 11.

2. Формат файлу. У нашому випадку ми вибираємо JPEG.

- PNG - формат файлу для збереження Веб-графіки. Буває двох видів, 8 bit -індексірование зображення, 24 bit - «все» кольору. Зазвичай в цьому форматі зберігають кліпарти і логотипи на прозорому тлі.

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

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

3. Значення якості. Мені подобається «Висока».

- Низьке

- Середнє

- Висока

- Дуже висока

- Найкраще

4. Тут ставимо галочку в значення «Оптимізація«. Розглядати і загострювати увагу на опціях «Прогресивний» і «Вбудований профіль«, ми не будемо так як більшість веб-браузерів їх не підтримують.

5. Ставимо галочку для того щоб включити опцію «Перетворити в sRGB«. Це потрібно для того щоб, наше зображення коректно відображалося на веб-сайті і збереглося в колірному просторі sRGB.

6. Виставляємо потрібний розмір зображення. У моєму випадку це, ширина 500 - пікселів, висота - 281 піксель.

7. Розмір оригінального зображення.

8. Розмір оптимізованого зображення для інтернету.

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

Пам'ятайте, найкраща подяка для автора це лайки, репости в соціальних мережах і коменти на сайті   До зустрічі в наступних уроках

Можливо, у Вас відразу виникли питання, для чого і навіщо фото готувати для інтернету?