Засіб Save for Web: графіка повинна бути стрункою, Web Design, Інтернет-технології, статті

Головачов Андрій, 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>

*

*