Практика реалізації процесу адаптації зображень все ще перебуває у стадії розвитку. Існує велика кількість ідей та пропозицій як слід обробляти картинки.

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

Зустрічайте Focal Point

Focal Point - проект на GitHub та бібліотека CSS? створена Адамом Бредлеєм (Adam Bradley). Відповідно до концепції адаптивності зображення повинні змінювати розмір та положення для досягнення оптимальних пропорцій для поточного вікна перегляду. Focal Point просуває цю ідею далі і змінює розмір зображень, а й обрізає їх.

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

Focal Point дозволяє встановити цільову область зображення, яка повинна залишатися цілою (точка фокусу). Таким чином, коли бібліотека буде виконувати обрізання, саме зображення зберігатиме відмінний вигляд.

Як це працює?

Реалізація Focal Point є досить унікальним, але в той же час простим процесом. Спочатку обговоримо, як вибирати точку фокусу, а потім поринемо в код реалізації.

Коли ви вставляєте зображення в веб-сторінку за допомогою Focal Point, воно автоматично поділяється на невидиму сітку з 12×12 осередків. Немає різниці, якого розміру картинка, сітка адаптується до нього.

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

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

Код

Тепер ми можемо вказати точку фокусу і час розібратися в коді реалізації. Спочатку завантажте проект з GitHub і прив'яжіть CSS файл до вашого документу HTML.

Після попередніх операцій потрібно додати два елементи div та тег img. Так, розмітка виходить надмірною для одного зображення, і цей факт є мінусом бібліотеки. Ось типова розмітка:

Як можна помітити, зовнішній елемент div має клас “ focal-point”, а у внутрішньому розміщено наше зображення без жодних класів.

Перекладаємо одиниці сітки до класів

Тепер потрібно вказати Focal Point на місце, де знаходиться фокус зображення. Наша точка фокусу зміщена на три одиниці вправо та три одиниці вгору. Тому вказуємо для зовнішнього елемента div класи “ right-3″ та “ up-3″.

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

Зверніть увагу, що зображення справа не тільки менше, а й обрізане навколо важливої ​​частини. Все виконується за допомогою CSS!

Структура сторінки

Щоб краще уявити, як використовувати бібліотеку в реальних додатках, побудуємо просту сторінку.

Визначимо елемент div із класом “ column”:

Додамо заголовок та параграф для імітації змісту сторінки:

Потім вставимо зображення, як було показано у попередньому прикладі (з двома елементами divта класами для точки фокусу):

І для завершення прикладу скопіюємо код із використанням іншого зображення та іншої точки фокусу.

Для другого зображення точка фокусування знаходиться в іншому місці:

CSS

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

* ( margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; ; ) .column ( float: left; overflow: auto; padding: 20px; width: 50%; ) h1 ( text-transform: uppercase; font: bold 45px/1.5 bottom: 20px; color: #888; font: 14px/1.5 Helvetica, Verdana, sans-serif; 35px; ) ) @media all and (max-width: 550px) ( h1 ( font-size: 23px; ) )

Дивимося у дії

Тепер можна подивитися, як працює демонстрація. Якщо сторінки відображаються у великому вікні перегляду (наприклад, на екрані монітора) настільного комп'ютера), то зображення виводитимуться в повному обсязі:

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

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

Сумісність із браузерами

Бібліотека працює у всіх нових браузерах. У IE8 зображення змінюють розмір, але з обрізаються. Але на даний момент 99.99% сайтів не мають подібного механізму адаптації зображення з автоматичним обрізанням, тому реакція IE8 не є критичною.

Що знаходиться усередині?

Тепер розглянемо, як працює бібліотека.

Перша частина коду є базовим рішенням CSS для адаптивних зображень.

Focal-point ( width: 100%; height: auto; overflow: hidden; ) .focal-point img ( width: 100%; max-width: 100%; height: auto; .focal-point div (position: relative; max-width: none; height: auto; )

Наступний код трохи складніший. Спочатку медіа запит реалізується у точці 767px. Потім для обрізання зображення використовуються негативні значення полів для кожного з доступних класів. У тексті уроку ми наводимо лише класи “ up-3″ та “ right-3″, які використовувалися у демонстрації.

@media all and (max-width: 767px) ( /* 4x3 Landscape Shape (Default) */ .focal-point div ( margin: -3em -4em; ) /* Landscape up (Total 6em) */ .up-3 div ( margin-top: -1.5em; margin-bottom: -4.5em; ) .right-3 div ( margin-left: -6em; margin-right: -2em; ) )

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

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

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

Плюси розрізання зображень

Створення посилань

Окремі малюнки при необхідності можна перетворювати на посилання, причому для них можна призначати свій опис (атрибут title) і альтернативний текст (атрибут alt), який видно при відключенні показу картинок у браузері або при наведенні курсору миші на зображення.

Ефект перекочування

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

Зменшення обсягу файлів

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

Анімований GIF

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

Особливості верстки

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

Психологічний аспект

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

Підготовка зображення

Як приклад зображення, де потрібно розрізання, візьмемо рис. 2.12. Кожна з трьох ікон є посиланням на відповідний розділ, крім того, посиланням на головну сторінку служить малюнок з назвою сайту.

Мал. 2.12. Вихідне зображення

Теоретично, в даному випадку можна обійтися і без розрізання, якщо використовувати карту (теги

Мал. 2.13. Вигляд зображення при відкритті розділу

Тепер потрібно вирішити, як розрізати зображення. Варіантів тут може бути кілька — зрештою, це залежить від волі автора, призначення малюнка та його вмісту.

Розрізання зображення

Розрізання та «складання» малюнка краще довірити спеціалізованій програмі, зокрема, Adobe Photoshop, так що всі згадки про інструменти та меню відносяться саме до цієї програми.

Для зручності розрізання зображення спочатку слід додати напрямні лінії, якими потім і відбуватиметься поділ на фрагменти (рис. 2.14). Лінію знизу додамо потім через стилі, тому вона бере участь у зображенні.

Мал. 2.14. Додаємо у зображення напрямні

Тепер використовуємо інструмент Slice (, активація клавішею K ) і по напрямних обводимо необхідну прямокутну область. Позначена область відзначається синьою рамкою з номером фрагмента у верхньому лівому кутку. Розмір областей можна змінювати через спеціальний інструмент Slice Select -. Клацаємо мишею з цим інструментом за бажаним фрагментом — колір рамки навколо області стає жовтим, а також змінюється тональність малюнка. Після чого курсором миші можна переміщати межі фрагмента за спеціальні маркери з обох боків та у кутах області (рис. 2.15).

Мал. 2.15. Зміна області фрагмента

Щоб швидко переключатися між інструментами Slice та Slice Select, натисніть та утримуйте клавішу Ctrl.

Під час зміни розмірів фрагментів слідкуйте за тим, щоб області не перетиналися один з одним, і між ними не виникало проміжків. Хоча Photoshop сам наголошує на подібних недоліках і вживає заходів до їх усунення, краще тримати все під своїм контролем.

Після попереднього аналізу та застосування інструменту Slice отримаємо 13 фрагментів (рис. 2.16). Синім кольором показані фрагменти, створені інструментом Slice, сірим кольором показані автоматично створені фрагменти.

Мал. 2.16. Розрізане на фрагменти зображення

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

Використання таблиці для склеювання фрагментів

Після того, як фрагменти позначені, потрібно зберегти усі зображення на диску. Для цього вибираємо пункт меню File > Save for Web & Devices...(Файл > Зберегти для Web, Alt+Shift+Ctrl+S) щоб відкрити панель оптимізації графіки (рис. 2.17).

Мал. 2.17. Панель оптимізації зображень

За допомогою інструмента Slice Select можна вибирати потрібний фрагмент і встановлювати для нього персональні параметри на кшталт кількості кольорів, значення втрат якості, прозорість і т.д. Дозволяється виділяти відразу кілька фрагментів, утримуючи клавішу Shift, що дозволяє встановлювати для них однакові параметри.

Після закінчення роботи з фрагментами натискаємо кнопку Save, вказуємо місце на диску, куди буде збережено HTML-документ, його ім'я, тип і налаштування (рис. 2.18).

Мал. 2.18. Налаштування під час збереження файлу

Малюнки зберігаються автоматично в папку images, а їх ім'я утворюється від імені файлу HTML з додаванням номера фрагмента. Наприклад, ім'я, що зберігається, буде splash.html, тоді перший фрагмент називається splash_01.png, а останній — splash_13.png. Крім того, створюється файл spacer.gif, який є прозорим малюнком розміром 1х1 піксел. Він використовується для правильного формування зображень у таблиці.

Налаштування, за якими будується HTML-код і формуються імена зображень, можна змінити, якщо при збереженні файлу в розділі Settings вибрати пункт Other... У вікні параметрів можна вибирати папку, куди зберігати малюнки, спосіб формування імен файлів, а також HTML-коду ( 2.19).

Мал. 2.19. Панель для вибору вихідних установок

Отриманий у результаті збереження файлів HTML-код після невеликого редагування представлений у прикладі 2.12.

Приклад 2.12. Таблиця для склеювання зображень

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

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

Мал. 2.20. Фоновий малюнок, рамка навколо наведена для наочності

Тепер створюємо потрібний шар, назвемо його догравця, і в стилях вказуємо його параметри (приклад 2.13).

Приклад 2.13. Шар для формування смуг

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Залишається прибрати малюнки з незначними фрагментами, зберігши їх розміри в осередках таблиці (приклад 2.14).

Приклад 2.14. Остаточний код

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

У цьому прикладі змінено доктайп на суворий, що призводить до появи невеликого відступу внизу зображень. Щоб його прибрати, в стилі до селектора IMG додано display: block.

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

Для управління положенням малюнків батьківському класу menu поставимо відносне позиціонування, а малюнкам абсолютне. Тоді застосування властивостей left і top задаватиме координати зображення щодо батька, тобто. шару menu. Сам шар при цьому можна легко переміщати і це ніяк не вплине на нього дочірні елементи(Приклад 2.15).

приклад 2.15. Верстка за допомогою шарів

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Тут шар toplayer створює за допомогою фонового зображеннясмугу заданої висоти протягом усього ширину вікна. Шар menu задає батьківський елемент, який шикується по центру поверх фонової смуги. Положення зображень усередині шару menu управляється властивостями top та left. За рахунок активного застосування стилів HTML код сильно скорочується, малюнки незалежні один від одного, їх можна легко зрушувати, змінювати на інші, додавати нові. Це саме той випадок, коли таблиця при верстці не має жодного шансу.

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

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

Спосіб 1. Використання негативних полів

Зображення необхідно помістити у батьківський елемент, у нашому випадку – div. Батьківський елемент повинен бути обтічним елементом (або із заданою шириною). Метод не працюватиме на блокових елементах або елементах на всю ширину.

Встановимо негативні поля всім чотирьох сторін: top (згори), right (праворуч), bottom (знизу) і left (ліворуч). Негативні поля визначають, наскільки зображення, що у батьківському елементі обрізано кожному напрямі. Потім встановимо властивість батьківського елемента overflow (перекриття) на hidden (приховати), щоб приховати поля, що знаходяться за областю вирізаного зображення.

<div class = "crop" >

Crop

float: left;

overflow: hidden;

Crop img

margin: -70px -50px -160px -175px;

Спосіб 2. Використання абсолютного позиціонування

За цим методом задаємо ширину та висоту батьківського едементу, властивість position (позиціонування) встановлюємо relative (відносним). Ширина і висота визначають розміри поля, що відображається. Для зображення всередині батьківського елемента властивість позиціонування задаємо абсолютним. Потім за допомогою властивостей top (зверху) та left (ліворуч) задаємо, яку частину зображення показувати.

<div class = "crop" >

Crop

float: left;

overflow: hidden;

position: relative;

width: 270px;

height: 260px;

Crop img

position: absolute;

top: -70px;

left: -175px;

Спосіб 3. Використання властивості сlip

Цей спосіб найпростіший, оскільки властивість clip визначає частину елемента, яку треба показати. Але цей метод має два недоліки.

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

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

<div class = "crop" >

Crop

float: left;

position: relative;

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

За допомогою властивості clip можна обрізати елемент за заданими розмірами.

1. Властивість overflow

Вміст блокових елементів може переповнювати блок у разі, коли для блоку явно задана висота та/або ширина. Без вказівки висоти блок буде розтягуватися, щоб вміст вмісту, крім випадків, коли для блоку задано позиціонування position: absolute; або position: fixed; . Текст може переповнювати блок по висоті, зображення по висоті та ширині.

Значення:
visible	Значення за замовчуванням. Весь контент стає видимим, незалежно від розмірів блоку-контейнера. Можливе перекриття вмісту сусідніх блоків.
scroll	Додає смуги прокручування всередині області відображення елемента, які відображаються навіть у випадку, коли вміст за розмірами міститься всередині блоку. Розмір контейнера не змінюється.
auto	Додає смуги прокручування лише у разі потреби.
hidden	Приховує вміст, що виходить за межі блоку. Може приховати частину вмісту. Використовується для блоків-контейнерів, що містять елементи, що плавають. Також запобігає відображенню фону або кордонів під плаваючими елементами (для яких встановлено властивість float: left / right; . При цьому розміри контейнера не змінюються.

Мал. 1. Обрізання вмісту блоку за допомогою властивості overflow Синтаксис: div ( width: 200px; height: 150px; overflow: hidden; )

2. Властивість overflow-x

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

Синтаксис:

Div ( overflow-x: hidden; )

3. Властивість overflow-y

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

Синтаксис:

Div ( overflow-y: hidden; )

4. Властивість clip

Властивість визначає, яка частина елемента буде видно. Частина елемента, яка залишиться видимою після обрізки, називається областю відсікання. Відсікання застосовується до елемента, який спочатку повністю видимий. Властивість застосовується до елементів, котрим встановлено властивість position зі значеннями absolute чи fixed .

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

Як видалити непотрібні шматки зображення

Подивимося, як проводиться кадрування фактично, видаливши нешироку чорну смугу біля нижнього краю фото, яку не вдалося достатньою міроювисвітлити. Кадрування проводиться спеціальним інструментом Crop Tool (С) (Інструмент «Рамка» (С)).

Натисніть кнопку Crop Tool (С) на панелі інструментів (Tools), щоб вибрати цей інструмент.

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

Натисніть та утримуйте ліву кнопкумиші.

Не відпускаючи ліву кнопку миші, перемістіть покажчик миші до нижньої частини правого краю фото так, щоб пунктирна рамка виділення, що з'явилася, не включала нешироку чорну смугу біля нижньої межі зображення.

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

За допомогою цих маркерів можна виконати налаштування та поворот межі кадру. Для переміщення кадруючої рамки достатньо встановити покажчик миші всередині виділеної області і перетягнути її в потрібне місце. Щоб змінити розмір виділеної області, слід перемістити один із кутових маркерів. Якщо при переміщенні затримувати кнопку Shift, то будуть збережені пропорції області. Для повороту кадру слід встановити покажчик миші, який сприйме форму вигнутої стрілки, поза області виділення і, переміщуючи мишу, досягти відповідного положення рамки. Щоб скасувати кадрування, достатньо натиснути кнопку Esc.

Переміщуючи маркери рамки виділення, домагайтеся, щоб кадруюча рамка включала все зображення, крім вузької чорної смуги біля нижньої межі фото.

Двічі клацніть мишею всередині кадруючої рамки або натисніть кнопку Enter. Фото буде обрізане за встановленим кордоном.

Як зменшити розмір зображення

Але навіть після обрізки фото досить велика для WEB сторінки. При роздільній здатності екрана 800 x 600 пікселів (а з такою роздільною здатністю за статистикою в поточний часпрацює більшість користувачів Web) фото займає значне місце на дисплеї. З іншого боку, файл із зображенням такого обсягу буде досить великий за обсягом і довго завантажуватися. Тому зменшимо розмір зображення, що, своєю чергою, зменшить обсяг файла.

Виберіть Image - Image Size (Зображення - Розмір зображення). На дисплеї з'явиться діалог Image Size (Розмір зображення).

У верхній частині діалогу, в групі елементів управління Pixel Dimensions (Розмірність у пікселах) вказаний поточний розмір файлу у форматі PSD - 400.3К, а також поточні ширина (Width) і висота (Height) зображення в пікселах. У вас ці значення після кадрування можуть бути дещо іншими.

У групі частин керування Document Size (Розмір документа) вказані розміри документа в сантиметрах та його графічна роздільна здатність (Resolution). При встановленому прапорі Constrain Proportions (Зберегти пропорції) програма автоматично зберігає пропорції зображення при зміні однієї з розмірів - ширини чи висоти.

При зміні розмірів зображення групи частин управління Pixel Dimensions (Розмірність у пікселах) відповідно змінюються його властивості документа - чи його розміри, чи графічне дозвіл, залежно від цього, встановлено чи скинутий прапор Resample Image (Змінити розмір). Якщо цей прапор встановлений, змінюється розмір документа і, відповідно, обсяг файлу із зображенням. Якщо ж прапор скинутий, можна поміняти лише розміри документа. При цьому, відповідно, буде змінюватися його графічна роздільна здатність, а розміри зображення в пікселах і обсяг файлу залишаться без конфігурації.

При зменшенні розмірності або графічного дозволу Adobe Photoshop видаляє із зображення надмірну інформацію, а при збільшенні цих параметрів - формує необхідну інформацію на основі колірних величин наявних пікселів. В обох випадках програма використовує один з п'яти методів інтерполяції, який можна вибрати в списку Resample Image (Змінити розмір).

Оскільки фото, розміри якої ми хочемо змінити, призначена для показу на екрані, то змінювати її графічний дозвіл не слід.

Перевірте, чи встановлено прапорець Resample Image (Змінити розмір), щоб зберегти графічну роздільну здатність зображення та змінити його розмір.

У полі введення Width (Ширина) групи частин керування Pixel Dimensions (Розмірність у пікселах) введіть нове значення ширини зображення в пікселах - 300. Автоматом зміниться значення висоти зображення в полі введення Height (Висота), а також розмір документа групи частин управління Document Size ( розмір документа). У верхній частині діалогу ви побачите також нове, зменшене значення об'єму файлу та поруч із ним, у дужках колишній обсяг.

Закрийте діалог Image Size (Розмір зображення), натиснувши кнопку OK. Встановлені характеристики будуть використані, і розмір зображення у вікні документа зменшиться.

Як уникнути втрати якості зображення при зміні його розміру

Як зазначалося, зменшення розмірності зображення видаляє з нього надмірну інформацію, що зумовлює деякому зниження різкості. Застосування фільтра Unsharp Mask (Контурна різкість) може певною мірою повернути різкість зображення.

Виберіть команду меню Filter – Sharpen – Unsharp Mask (Фільтр – Різкість – Контурна різкість). На дисплеї з'явиться діалог Unsharp Mask (Контурна різкість).

Переміщаючи повзунковий регулятор Amount (Ефект), відновіть різкість фото. Значення цього параметра має бути у межах 50-60%.

Натисканням кнопки OK закрийте діалог Urisharp Mask (Контурна різкість). Різкість зображення посилиться.

Збережіть документ, вибравши команду меню File – Save (Файл – Зберегти).

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