Засіб Save for Web: графіка повинна бути стрункою

Головачов Андрій, http://photoshop.nasmnogo.ru/

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

І саме на цьому етапі згадуєш, що живеш у Росії і що полуторамегабайтний макет з 47 шарів сяде на мілину в наших знаменитих каналах зв'язку. Але співробітники з Adobe до версії Photoshop 5.5 дозріли до істинного космополітизму і полегшили нам життя, створивши потужний інструмент для стискування зображень – Save for Web.

Мало хто знає, що це засіб було запозичене з Adobe Image Ready в рамках триваючої інтеграції двох програмних пакетів. Image Ready – дуже потужний засіб для нарізки макету на частини, їх оптимізації і автоматичної генерації HTML-коду таблиці з фрагментами зображення. Це дуже зручно: у макеті одні області можуть складатися з плоских квітів і стерплять сильне GIF-Стиснення, а інші можуть містити складні фотографічні текстури. Ступінь стиснення останніх для пристойного якості повинна бути нижче, та й алгоритм стиснення – зовсім іншим. У результаті співвідношення якість графіки / розмір сторінки виявляється краще, ніж якщо б ми загнали всю болванку макета в один файл і визначили для нього карти посилань.

Але якщо проводити аналогії з автотранспортом, то Save for Web – Невеликий пікап, у той час як Image Ready – величезний автопоїзд, який ніхто не буде ганяти з одним бочонком самогону в сільраду. Тому, Save for Web використовується, якщо треба швидко оптимізувати набір вже готових зображень. Незважаючи на різні можливості, інтерфейс модуля Save for Web і палітри Optimize в Image Ready дуже схожий, тому вам не доведеться вивчати всі двічі.

Отже, взявши скальпелем, спиртом і банальним огірочком, приступимо до препарування цієї "срібно-металевої штуковини". Вона викликається натисканням клавіш Ctrl+Alt+Shift+S або через меню File/Save for Web Треба зауважити, що модуль досить вимогливий до ресурсів, тому чекати появи вікна доведеться кілька секунд, особливо у випадку великого зображення.

У вікні три вкладки: Original, Optimized, 2-Up і 4-Up. Само собою зрозуміло, що на вкладці Original можна споглядати оригінал зображення, його рекламне "До", а на вкладці Optimized – шокуюче "Після". А вкладки 2-Up і 4-Up демонструють перегляд реклами після непомірного споживання спиртного: областей для попереднього перегляду відразу дві або чотири, причому для кожної можна вказувати свої параметри оптимізації і насолоджуватися результатом. Під кожною областю перегляду виводиться службова інформація про зображенні: кількість квітів, тип палітри, ступінь dither, Якість стиснення (для формату JPEG), Розмір у кілобайтах і час завантаження зображення з мережі на заданій швидкості з'єднання. Її можна вказати в випадаючому меню, яке викликається натисканням круглої кнопки з трикутником праворуч вгорі.

Зліва від області попереднього перегляду – набір стандартних інструментів Photoshop для керування масштабом зображення та його переміщення у вікні перегляду, а також інструмент Eyedropper, Що дозволяє вибрати поточний колір, який відображається під панеллю інструментів. А в самому низу вікна знаходиться рядок стану, де можна довідатися про кольорі під курсором, його номері в палітрі (Index) і про масштаб зображення. Також на рядку стану знаходиться кнопка зі списком, що дозволяє проглянути готове зображення в будь-якому з встановлених браузерів.

Праворуч від області попереднього перегляду – власне важелі для контролю процесу оптимізації. Для GIF– І JPEG– Графіки елементи управління істотно різняться, тому розглянемо їх по черзі. Почнемо з GIF.

Прес, що вичавлює всі соки з нещасних зображень – це список для вибору кількості квітів у палітрі (нагадаю, що формат GIF стискає зображення за рахунок зменшення числа використовуваних кольорів). Оптимальне стиснення досягається шляхом вибору потрібної кількості квітів і візуального контролю за якістю зображення на вкладці Optimized і його розміром у рядку стану. Слід зазначити, що найбільше співвідношення якість / розмір ви отримаєте при використанні числа квітів, що входить в ряд ступенів двійки: 2, 4, 8, 16 і т.д.

Інший важливий параметр при перекладі повнокольорового зображення в індексований колір – це тип палітри, який визначає алгоритм скорочення кількості квітів. Системні палітри Windows і Macintosh використовуються рідко. Для нас велике значення мають типи палітри Web, Adaptive, Selective, Perceptual і Custom.

Палітра Web підганяє кольору зображення до тих 216, які однаково виглядають на всіх платформах (якщо не рахувати різницю яскравості Win і Mac), У всіх браузерах і на абсолютній більшості дисплеїв. Це, звичайно, чудовий архаїзм. Сьогодні велика частина відвідувачів web-Сторінок володіють High-color або True color відеокартами, а різниця у відображенні кольорів між Netscape і Internet Explorer може не задовольнити лише Артемія Лебедєва з його легендарним "спектрофотометром". (Хороша, до речі, річ. Ознака істинного таланту володаря: ->) Тому не сприймайте стандартні кольори Web як догму. Іноді відхід від них може дати навіть позитивний результат. Випадок з особистого досвіду: я використовував в якості фону сторінки дуже цікавий сам по собі колір. На моєму 32-бітному відеоадаптері все виглядало чудово, і я вирішив поглянути на сторінку очима "щасливих" власників 256-кольорових відеокарт. Переключивши режими, я виявив, що фон став матеріальним. Він відчувався на дотик, його хотілося помацати! Заінтригований, я збільшив ділянку фону за допомогою утиліти Eyedropper (До речі, після оновлення дизайну сайту розсилки чекайте там розділ з необхідною софт-дрібницями). Виявилося, що причиною шорсткості був diffusion dither, Вироблений браузером в спробі підігнати колір під вихідний в таких екстремальних умовах. Уявляєте, я, не витративши ні байта на складну графіку, ощасливив нещасних власників старих відеосистем прекрасної ненав'язливій матеріальної текстурою!

Але, геть ліричні відступи! На чому ми зупинилися? Ах, так, палітра Adaptive. Вона – найкращий вибір, якщо ви хочете якомога менше нашкодити такого беззахисному результату своєї праці. Комп'ютер сам проведе розрахунок і вибере з мільйонів квітів вихідного зображення найважливіші, причому рівно стільки, скільки ви вказали в списку. Режим Perceptual діє так само, але кольори будуть підібрані для поліпшення сприйняття зображення людиною. Режим Selective комбінує два перерахованих вище. Але навіщо ж тоді режим Custom, Якщо все можна зробити автоматично? Все дуже просто. на картинці можуть бути невеликі, але вкрай важливі для її сприйняття області кольору. Приміром, темно-зелені очі коханої жінки, з кольором яких вам так не хочеться розлучатися. Якщо ви дозволите Photoshop самому обробити малюнок і сильно обмежите кількість квітів, то він вважатиме невеликі очі незначними і прибере темно-зелений колір з палітри, поставивши на вакантне місце додатковий відтінок тілесного для більш точної передачі великої за кольором обличчя.

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

А якщо завдання зворотна: у палітрі присутній яскраво-фіолетовий колір, а на фото – та ж зеленоока дамочка, і ні краплі фіолетового без "спектрофотометра" не знайдеш. У такому випадку, виберіть непотрібний колір в палітрі і натисніть кнопку “Delete color” (З Кошика). Кілька десятків байт за рахунок видалення цього кольору з палітри ви виграли. Тільки, будь ласка, не думайте, що я іронізую. До дрібниць треба ставитися серйозно. Коли їх багато (А так зазвичай і буває) вони складаються у велику і непристойно виглядають купу, здатну закрити всі плюси вашого зображення.

Корисна можливість режиму вільного редагування палітри – замикання окремих кольорів. Це означає, що виділивши потрібні кольори і натиснувши кнопку “Lock Color”, ви накажете Photoshop обов'язково зберігати їх при зміні загальної кількості квітів у палітрі. Користуючись цією можливістю, в нашому прикладі з зеленоокої дівчиною можна було піти від протилежного: звести палітру до мінімуму (два кольори), додати необхідні відтінки зеленого, замкнути їх і після цього в автоматичному режимі наздогнати палітру до потрібного розміру.

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

З палітрами розібралися. Тепер горезвісний Dither. Функція ця вельми суперечлива і в більшості випадків марна. Адже імітація колірного переходу за рахунок "розбризкування" пікселів одного кольору з різною щільністю (це і є Dither) Заважає вбудованої в формат GIF системі стиснення LZW (Коли декілька йдуть підряд одноколірних пікселів кодуються одним числом). Dither варто включати лише тоді, коли питома вага зображення в байтах дуже невеликий і вигідніше скористатися Dither, Ніж вводити новий колір в палітру.

Призначення движків Dither і Web Snap, Я думаю, зрозуміло, а от про движок Lossy хочеться сказати пару ласкавих. Він дозволяє зменшувати розмір файлу за рахунок простого видалення частини пікселів. Цю опцію іноді корисно застосовувати до чорно-білим зображенням для імітації осипання і деградації.

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

Галочка Transparency, само собою, включає або відключає підтримку прозорих пікселів у зображенні. Але тут є дуже важлива обставина: у форматі GIF існує тільки одна градація прозорості, тобто піксель може бути або повністю прозорим, або повністю непрозорим. Для імітації плавного переходу від кольору об'єкта до прозорого оточенню Photoshop використовує колір Matte, Який можна вказати самому. Цей колір повинен точно збігатися з фоном веб-сторінки, тому немає реальних підстав для застосування прозорості в GIF. Є два альтернативні шляхи. Можна замість прозорості використовувати колір фону сторінки, а в HTML-тегу background вказати як заповнювач однопиксельний GIF цього кольору. (Але не вказувати колір безпосередньо в HTML-кодах. Якщо зробити це, на деяких моніторах може з'явитися межа між фоном зображення і фоном веб-сторінки.) А якщо потрібна повна потужність ефекту прозорості, то використовуйте формат PNG (Читається – "пінг"). У ньому можна створювати до 256 градацій прозорості, але для вставки в сторінку файлу цього типу необхідно користуватися спеціальними HTML-конструкціями.

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

"Хрю!" – Несміливо долинуло з-під подушки полузадушенное мною цікавість. Як у вас там, читач? Готові знову кинутися в море (швидше, у вир) проблем збереження графіки для Web? На солодке у нас – грамотна робота з JPEG.

На відміну від GIF, Цей формат краще стискає фотографії з безліччю плавних колірних переходів. А параметр стиснення у JPEG всього один – якість. Воно варіюється в межах від нуля до ста чи в градаціях “Low”, “Medium”, “High” і “Maximum”. Ніяких рекомендацій щодо встановлення цього параметра дати не можна: значення підбираються емпірично.

Крім завдання якості можна розмивати зображення (движок blur), Що істотно зменшує розмір файлу. Дія прапорця Progressive аналогічно прапорця Interlaced для GIF: зображення буде завантажуватися в кілька проходів. Але, на відміну від Interlaced, установка опції Progressive зменшує обсяг файлу. Галочка Optimized включає вдосконалений алгоритм стиснення, який на сьогодні підтримують всі популярні браузери, так що краще залишити її включеною. У форматі JPEG теж можна вказувати колір Matte, тільки він буде замінювати собою всі області прозорості, якщо такі є (JPEG не підтримує прозорість).

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

Крім перерахованих вище функцій Save for Web дозволяє компенсувати кольору в зображенні і переглядати dither браузера – всі ці функції можна використовувати, якщо клацнути по кнопці з трикутником у правому верхньому кутку області попереднього перегляду.

Наостанок зазначимо, що Save for Web дозволяє зберігати зображення у форматі PNG, але оскільки це рідко використовуваний формат, то його налаштування ми описувати не будемо.

Ну що, перейнялися міццю диво кошти Save for Web? Повірте, для реалізації існуючих стандартів його вистачить з головою. Викиньте у кватирку всі дрібні і клопітні утилітки начебто Ulead Smart Saver або DeBabelizer: їхній час минув. Тепер модно мати все в одному флаконі. До речі, ця тенденція виявляється і в поступовій інтеграції Photoshop з Image Ready.

Ось і все. Я свою справу виконав. А за вами – не дати відвідувачам ваших сторінок нудьгувати в очікуванні завантаження. Все. Ручка скінчилася ..

Коли зображення носить вуаль

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

Звичайно ж, сканування реальних предметів і друкованих матеріалів. Але, в повній відповідності з законами Мерфі, проблем менше не стає. На сканованих зображеннях з'являється муар.

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

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

Боротися з муаром можна по-різному. Самий кардинальний спосіб – просто відскануйте зображення заново, поклавши його в сканер під кутом 10-15 градусів до його країв. Тільки не здумайте в Photoshop повертати фотографію назад – муар повернеться з колишньою силою. Тут весь фокус у тому, що доведеться миритися з незначним нахилом малюнки для усунення муару. Але якщо вас не влаштовує легкий нахил зображення, то спробуйте другий спосіб.

Скануйте зображення з подвоєним щодо необхідного дозволом. Графіка на екрані монітора (у тому числі і в Мережі) зазвичай має здатність 72 піксела на дюйм, так що скануйте з роздільною здатністю 144 точки на дюйм. Після цього виділіть область концентрації муару будь-яким інструментом і зробіть растушевку країв виділення (Select/Feather…) радіусом в 10-12 пікселів, щоб не було різкого контрасту між областями після видалення муару. Застосуйте до виділеної області фільтр Gaussian Blur з такою інтенсивністю, щоб муар розмився, але дрібні деталі зображення не загубилися. Після завершення розмиття командою Image/Image Size… доведіть зображення до потрібного дозволу (у веб-графіку це 72 піксела на дюйм). Останнім штрихом буде використання фільтра Filter/Sharpen/Unsharp Mask… для відновлення різкості зображення.

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

Вибір інструментів

Вибір інструментів (Великі Букви в назвах інструментів поставлені для полегшення запам'ятовування комбінацій):

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

Інші можливості панелі інструментів:

Коала не спить. Коала все бачить

Коала – ссавець сімейства сумчастих, зовні дуже схоже з плюшевим ведмедиком, мешкає в Австралії, харчується листям евкаліптів .. Яке відношення це миле тварина має до дизайну, графіці і Photoshop? Виявляється, метафорична думка творчої людини може зайти і так далеко. "Коала" – це проект мережевого мистецтва, створений відомим пітерським дизайнером Данилом Васильєвим і проживає за адресою koala.mu.ru. Великий штангенциркуль "рунета" – Артемій Лебедєв – в своєму ру / проводом дав Данилові таку оцінку: "безбашений і майже панківський мультімедійщік". Порадіємо за Тему: в оцінці інших людей йому іноді вдається бути на диво точною. Данило Васильєв дійсно шибайголова. У своїй творчості він примудряється ставити поруч непорівнянні речі з різних століть, різних стилів і квітів, причому всі разом виходить дуже стійко і природно. Ну і, звичайно, не без іронії. Сам Данило характеризує свій стиль як "еклектичний треш-арт".

"Коала" та її власник – явище в російськомовному Інтернет унікальне. У той час як професіонали, відокремлені від дилетантів, сталі з ненавистю дивитися на будь-які прояви обсягу, блиску і тривимірності, прикрашаючи свої сторінки мудрованими колажами з імовірною прихованим змістом, в той час як інші дизайнери пішли aka Marylin Manson і задалися метою виплеснути на глядача максимум негативних емоцій, в той час як залишалися такі прихильники суворого академічного стилю як Дмитро Кірсанов та Ганна Журавльова – Данило Васильєв був іншим. Всі забули про щирість. Він вибрав GIF. Вичавлюючи з цього формату все можливе за допомогою Java Script та інших нехитрих премудростей кам'яного століття вебстроітельства, Данило перетворив свій проект в кольоровій, забавний і постійно рухається лабіринт інсталяцій, які, за твердженням автора, мають між собою приховані смислові зв'язки.

Сторінки звертаються до відвідувача на простому і невимушеному мовою кольору, руху і людських слів. "My name is Hot Dog!" – І нічого, що гаряча собака – синя, художнику дозволено все .. А ви не замислювалися, що Любов можна шукати на Яндексі? Адже там знайдеться все. Навіть заблукав колобок ..

Люди ставляться до "Коал" по-різному. Мене, наприклад, ніколи не захоплював "мультяшний" стиль. Але це справа суб'єктивних смаків і думок. Істинно ж те, що ресурс оригінальний, і, наскільки мені відомо, у автора немає наслідувачів. (Тільки от у Пітері підворіття неофіційною Мекки неформалів – Пушкінській 10 – списані url'ом проекту.) А бути гордим одиноким рифом в безкрайньому морі – почесно.

Схожі статті:


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

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*