як "полегшити" картинку для інтернет банера?.


Казимир Малевич. Піксел в масштабі 10 000:1

Відома картина - домовився з одним про банерообмінні, намалював офигительно (!) Картинку, а вона, гадина, важить 300 кіло і вантажиться за півгодини.
Зрозуміло, що користі від такого банера ніякого - відвідувач ні за що не буде чекати закінчення завантаження.
Отже, картинку треба полегшити. Давайте розберемося, як це зробити.

Інструкція Рівень складності: Нескладно Що вам знадобиться:
  • Adobe PhotoShop (бажано не нижче CS2)
1 крок

Як намалювати картинку, статичну або анімовану, розбирати не будемо - це тема для іншої інструкції. Давайте полегшувати вже готову.
Тут є 2 шляхи:
Або знизити розмір файлу за рахунок зменшення кількості кольорів, або прибрати згладжування при колірних переходах.
Будемо вважати, що картинка статична.
Спочатку переконаємося, що розмір картинки точно відповідає розміру місця під наш банер.
Для цього в меню "image" (зображення) виставимо розмір зображення в пікселях (важливо!). Це верхня частина вікна "Image size" (розмір зображення) ( Alt + Ctrl + I ).
УВАГА !!! На нижню частину цього вікна ми не дивимося взагалі!
Тобто, якщо розмір банера у нас, приміром, 420 на 80 (один із стандартів), то ширину (width) ми виставляємо саме 420 PIXELS , а висоту (height) саме 80 PIXELS .
Виставили. І наша картинка неймовірно сплющилася (або навпаки, витягнулася). Блін ... У сенсі, особи як млинці. А букви взагалі не читаються.
Отже, ми підемо іншим шляхом.

2 крок

Обрізка.
Щоб змінити розмір, не змінюючи пропорції , картинку слід обрізати в потрібні параметри.
Як це?
Зараз поясню. Вибираємо інструмент "crop" (обрізка) (клавіша "С" ) Він якраз виділений на малюнку. У полях "ширина" і "висота" виставляємо потрібні нам параметри. Зверніть увагу! Параметри треба виставити в пікселях (px)
Після чого проводимо по нашій картинці по діагоналі зліва направо.
Полкартінкі залишилися за кадром? Треба було думати про розміри раніше! Скасовуємо (ctrl + Z) .


Перекомпоновувати елементи картинки, щоб всі вкладалося і повторюємо процедуру.

3 крок

Власне стиснення.
Тут є 2 варіанти: Або зберегти зображення в форматі JPEG (jpg), або перевести її в GIF .
JPEG зберігає вихідні кольору, але при сильному стисненні геть ліквідує плавні переходи між кольорами. Звідси ці неприємні світло-сірі плями навколо контурів, а при ДУЖЕ сильному стисненні - пікселізация, що перетворює особу в набір кольорових плям.
GIF - той взагалі працює тільки в системній палітрою (до 256 кольорів), зате дозволяє створювати анімовані картинки (ті самі ДІФКУ)
Давайте спробуємо зберегти кольору.
У меню "file" (файл) вибираємо "save as" (зберегти як) ( Ctrl + Shift + S ). У вікні збереження відзначаємо формат (jpg) і вибираємо місце збереження.
Все зробили, натиснули "зберегти" і побачили меню стиснення. Поперек всього меню проходить бігунок, графічно відображає ступінь стиснення. Праворуч/внизу від нього зазначений розмір, файлу.
Зрозуміло, що чим менше цей розмір, тим краще. АЛЕ! Зверніть увагу на картинку. Якість самої катрінкі на основному робочому столі програми, тієї самої, яку ми зберігаємо, змінюється з кожним рухом бігунка. Треба домогтися гармонії: мінімального розміру при максимальній якості.

4 крок

Зробимо GIF . У анімованої картинці взагалі немає інших варіантів.
У меню "file" (файл) вибираємо пункт "Save for web and devices" (зберегти для веб) ( Ctrl + Alt + Shift + S ) . Вибираємо формат GIF (на картинці зазначено, де) і кількість квітів. Слід врахувати, що чим більше вибрано квітів, тим важче катрінка. Якщо ДІФКУ графічна, без елементів фото, її краще зробити з самого початку з меншою кількістю кольорів (16 наприклад).
Тепер вибираємо ім'я файлу і зберігаємо.
Все, готово.