Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Параметри формату JPEG

JPEG в анфас і в профіль

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

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



  • Прозорі області;
  • анімація;
  • Наявність в малюнку не більше 256 кольорів палітри RGB;
  • Застосування при створенні малюнка режимів Grayscale (Відтінки сірого) або Indexed Color (Індексований колір);

Цілком логічно зробити висновок, що в формат JPEG розумно зберігати всю ту графіку, яка не потрапила під вищезазначене опис.

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

Збереження в формат "JPEG"

Отже, при спробі зберегти JPEG-картинку на екрані з'являється діалог "JPEG Options" ( "Налаштування JPEG").

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Діалог "JPEG Options" ( "Налаштування JPEG")

Поговоримо про опції, складових даний діалог, і про те, що ми в силах змінити з їх допомогою.



  • Matte (Облямівка). Напрошується друга назва - "Імітація прозорості". Доступна тільки при наявності в зображенні прозорих областей. Слід пам'ятати, що формат JPEG в плані підтримки прозорості - повна протилежність GIF'у. Тому доведеться вказати програмі, яким кольором залити дані області. Колір заливки вибирається зі списку;
  • Image Options (Налаштування). Здійснюються за допомогою зміни параметра "Quality" ( "Якість"). Таким способом ми задаємо ступінь стиснення картинки. Чим менше цифра, тим менше вага картинки і гірше її якість. І навпаки. Як правило, найбільш вдалим значенням "Quality" є "7" або близько того. Але все-таки краще підбирати її конкретно для кожного редагованого зображення. На допомогу нам у вікні зображення показується, як стиснення впливає на редагований малюнок. Якщо перевести курсор миші на це вікно, він прийме форму руки, і ви зможете перетягувати картинку, оцінюючи якість її окремих областей. Клік миші, утримуючи "Ctrl" збільшує картинку, а при натиснутій "Alt". навпаки, зменшує;
  • Format Options (Налаштування формату). Майже всі браузери здатні відображати дві варіації формату JPEG: базовий і прогресивний (розширений). Базовий. або послідовно відображається формат, будує зображення способом порядкового виводу на екран. Прогресивний ж робить це за кілька проходів.

    • Baseline Optimized (Оптимізований базовий) не схожий на Baseline Standart (Базовий стандартний) застосуванням удосконаленого методу кодування Хаффмана, що дозволяє скоротити розмір кінцевого файлу на 5-10%;
    • При активації Progressive (Розширений) збережена із застосуванням даної опції картинка буде завантажуватися не порядково, а за кілька проходів. У кожен з них буде виводиться повне зображення, поліпшуючись від проходу до проходу.

      • Опція Scans (Сканування) визначає кількість проходів. Чим більше її значення, тим менше буде розмір кінцевого файлу;




  • Size (Розмір). В даному блоці ви можете отримати уявлення про розмір кінцевого файлу перед його збереженням. У списку вам надається вибрати швидкість передачі даних. Близько списку показано час, протягом якого зображення завантажиться на комп'ютер користувача. У разі, якщо показане кількість секунд (хвилин чи ж не лякайте мене.) Вас не влаштовує, залишається тільки знизити значення опції "Quality" ( "Якість"). Раджу вказати середню швидкість. Адже, орієнтуючись тільки на "LANщіков", можна позбутися досить великий відсоток відвідувачів. Надмірне зменшення розміру кінцевого файлу теж не завжди розумне рішення.

Збереження для WEB

Використовуючи даний діалог, ви зможете здійснити індексацію квітів, встановити прозорість і зберегти зображення у форматі GIF або JPEG. І все це за одну операцію. "Save For Web" ( "Зберегти для Web") об'єднує в собі функціонал таких інструментів, як діалоги "Indexed Color" ( "Індексовані кольори") і "Color Table" ( "Таблиця кольорів").

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

"Save For Web" ( "Зберегти для Web") об'єднує в собі функціонал таких інструментів,
як діалоги

"Indexed Color" ( "Індексовані кольори") і "Color Table" ( "Таблиця кольорів")

Розглянемо склад і функціональні можливості закладок, меню і інструментів діалогу "Save For Web" ( "Зберегти для Web").



  • Original (Оригінал). Показ оригінального зображення без впливу змін;
  • Optimized (Оптимізоване). Показ оптимізованого зображення;
  • 2-Up (2 види). Показ оригіналу і одного з його оптимізованих копій;
  • 4-Up (4 види). На відміну від попереднього виводитися 3 копії, а не одна. Є найбільш наочним способом відображення;

У лівій частині даного вікна ми бачимо групу кнопки управління властивостями інструментів і, власне, самі інструменти: "Hand (" Рука ")." Slice Select "(" Вибір фрагмента ")." Zoom "(" Лупа ") і" Eyedropper " ( "Піпетка").

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Перша містить команду "Browser Dither" ( "Результат згладжування"). пов'язану з прапорцем "Web Snap" ( "Кольори для Web") і дозволяє поглянути на поведінку редагованого зображення на 8-бітовому дисплеї.

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

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

Наступним за курсом йде меню параметрів. Кнопка його виклику розташовується групи "Settings" ( "Настройки").

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

У меню параметрів поміщені команди роботи з настройками, а також команди

"Optimize To File Size" ( "Оптимізувати розмір файлу") і "Repopulate Views" ( "Переміщення видів")

Сюди поміщені команди роботи з настройками, а також команди "Optimize To File Size" ( "Оптимізувати розмір файлу") і "Repopulate Views" ( "Переміщення видів"). Остання найбільш корисна, тому обговоримо її більш детально. У світі web-графіки йде найжорстокіша боротьба за кожен кілобайт, тому спосіб автоматичного зниження ваги кінцевого файлу зайвим не буде. Результатом виконання даної команди буде виведення на екран діалогу "Optimize To File Size" ( "Оптимізувати розмір файлу").

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Даний інструмент має наступні можливості:



  • Завдання бажаного розміру кінцевого файлу;
  • Завдання ручного або автоматичного вибору формату;
  • Вказівка ​​опцій відображення фрагментів графічного файлу, заданих інструментів "Slice" ( "Ніж");

Повернемося до групи "Setup" ( "Налаштування"). Вона має в своєму розпорядженні двома способами оптимізації: автоматичним і ручним. Оптимізація активується автоматично при виборі зі списку стилю оптимізації. При виборі формату JPEG слід загострити увагу на наступних відмінностях від стандартного вікна збереження:



  • Зміна показника "Quality" ( "Якість") в межах від 0 до 100;
  • Доступність застосування колірного профілю (прапорець "ICC Profile" ( "Профіль ICC"));
  • Можливість використання опції "Blur" ( "Розмиття"). спрощує стиснення;

У правому верхньому куті закладки "Color Table" ( "Таблиця пошуку квітів") ми бачимо кнопку меню управління кольором.

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Меню управління кольором орієнтоване на роботу з кольором, виділеннями, блокуванням і

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

Це меню орієнтоване на роботу з кольором, виділеннями, блокуванням і сортуванням квітів таблиці і робить можливим зберегти і завантажити таблицю.

Замикає "кнопкову бригаду" кнопка виклику меню "Output Settiings" ( "Вихідні налаштування"). Тут задаються опції для генерації HTML-коду. фону і автоматичного збереження файлів і фрагментів зображень. Можна задати потрібні параметри вручну або скористатися пресетами.

Розберемося з опціями HTML:

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Діалог Output Settings, властивості HTML

Розглянемо параметри фону генерується web-сторінки. Тут визначається, привласнити зображенню статус фону або картинки, вказати фоновий малюнок і поставити його колір.

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Діалог Output Settings, властивості фону

Перейдемо до вибору опцій збереження файлу:

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Діалог Output Settings, властивості файлу

Розглянемо діалог настройки опцій збереження фрагментів зображення, створених інструментом "Slice" ( "Ніж").

Параметри формату jpeg - уроки дизайну в фотошопі, уроки по фотошопу, сайт про фотошопі, уроки

Діалог Output Settings, властивості фрагментів файлу

В даному діалозі вказується спосіб присвоєння імен фрагментам за замовчуванням.