Реферат на тему:
Adobe Photoshop 6.0. Photoshop для WWW
Photoshop пропонує ряд можливостей при створенні зображень, призначених
для World Wide Web.
Основні параметри в додатку до документів, призначеним для електронного
поширення, – розміри, дозволи, формати – мають свою специфіку. Переважна
більшість користувачів Internet дотепер застосовують у роботі звичайні
комутовані телефонні лінії та модеми, що підтримують низьку (28800-56000
бод) швидкість передачі даних. Швидкість передачі найчастіше лімітується
якістю телефонних ліній і високим навантаженням зовнішніх каналів, що
особливо актуально для нашої країни. У цьому випадку, швидкість падає
навіть нижче номінальної швидкості модему.
Швидкість передачі графічної інформації значно нижче, ніж текстової. Це
визначає необхідність розумного підходу при створенні зображень для
поширення по мережі. Розміри графічних файлів повинні бути не занадто
великі, щоб користувач/читач не залишив сторінку тому, що йому набридло
чекати закінчення її завантаження.
Час завантаження зображень пропорційний розміру їхніх графічних файлів.
Можна виділити три способи мінімізації цих розмірів:
1. Зниження розмірів і роздільної здатності зображень
2. Зменшення кількості кольорів у зображенні
3. Використання стиснутих і спеціальних форматів файлів, їхня
оптимізація
Усі ці способи використовуються при підготовці зображень для
Web-сторінок. Важливо знайти компроміс між швидкістю і якістю
зображення, щоб, не стомлюючи користувача тривалим чеканням, представити
ефектну й інформативну сторінку.
Розміри і роздільна здатність
На відміну від паперової, розмір Web-сторінки не обмежений ні по
горизонталі, ні по вертикалі. Проте, ні в якому разі не робіть сторінок,
ширина яких перевищує ширину екрана. Довжина сторінки менш критична, але
оптимальна величина – два-три екрана. Оскільки зображення на
Web-сторінці призначені тільки для перегляду на екрані, їхня роздільна
здатність повинна збігатися з дозволом екрана, а розміри не повинні
перевищувати його. Роздільна здатність моніторів варіюється в широких
межах, так само, як і діагональ екрана – на які ж параметри
розраховувати Web-дизайнеру
1. Застосовуйте суцільний кольоровий фон замість графічного.
2. Використовуйте кольоровий фон комірок таблиць замість графічного.
3. Створіть текстові посилання замість графічних кнопок
4. Введіть для серії сторінок графічні елементи, які повторюються, щоб
уникнути їхнього постійного завантаження по мережі
5. Визначите зображення, які найдовше завантажуються і розглянете
можливість зменшення їхніх розмірів. Ще кілька порад по оптимізації
завантаження зображень:
6. Одне велике зображення вантажиться швидше, ніж декілька маленьких (не
пересилається додаткова службова інформація), тому використовуйте
зображення-карти посилань (image maps).
7. Вказуйте в посиланнях на зображення його розміри – браузеру буде
потрібно менше часу на завантаження зображення і він відразу побудує для
нього правильну рамку.
У Web-дизайні зручніше застосовувати іншу одиницю виміру для зображень –
пиксел. Така одиниця рятує від необхідності використання пари параметрів
розмір/дозвіл і дозволяє легше співвіднести розмір зображення з розміром
сторінки. У даній главі будемо користатися саме цією одиницею виміру.
Зменшення кількості кольорів
Для представлення графіки в Internet широко використовуються
індексовані зображення. Вони, як ви пам’ятаєте, дозволяють передавати до
256 фіксованих кольорів. Набір кольорів зображення (палітра)
зберігається у файлі разом із зображенням і використовується браузером
для демонстрації.
Зображення з індексованим кольором одержують з полнокольорових зображень
шляхом зменшення кількості кольорів. Як же передати 16 млн кольорів
полнокольорового зображення 256-ю кольорами індексованого? Для цього
існує операція, називана згладжуванням (dithering). Згладжування
побудоване на тім же обмані зору, що і типографська печатка: кілька
розташованих поруч крапок різних кольорів, будучи досить дрібними,
роблять враження крапки “сумарного” кольору. Відмінність зображення
після типографської печатки від індексованого тільки в тім, що в першому
випадку використовуються чотири фарби, а в другому – 256. Photo-shop у
діалоговому вікні Indexed Color, що з’являється після виконання команди
Image/Mode/Indexed Color… дозволяє вибрати один із трьох (мал. 13.2)
варіантів згладжування (чи настроювання кольорів):
1. Pattern. Кожному з 16 млн. кольорів зіставляється визначена
комбінація пикселов, що маються в палітрі індексованого зображення. При
пильному розгляданні така імітація виглядає як візерунок з кольорових
крапок.
2. Diffusion. При такому алгоритмі згладжування відбувається почергове
перекодування кожного пиксела. Після того, як обрана придатна комбінація
індексованих кольорів для представлення першого пиксела, аналізується
наступний. Замість нього додаються пиксели, колір яких разом з кольором
попередніх дасть необхідний. Ця операція виконюєься з усіма пикселами
зображення. Застосування даного способу дає більш привабливий результат,
оскільки не створює настирливо повторюваного візерунка.
3. Noise. Як і Diffusion, дає випадковий розподіл пикселiв, але гарантує
від прояву “візерунків” у плавних градиентних переходах і погрішностей
по краях зображення.
4. None. Суть Цього методу згладжування – відсутність згладжування. У
цьому варіанті для кожного кольору просто підбирається найбільш близький
з наявної палітри кольорів. Це неминуче приводить до сильного
перекручування кольорів і застосовується тільки в тих випадках, коли
їхня кількість лише небагато перевищує 256.
1. Відкрийте файл plane l.tif.
2. Створіть копію файлу командою Duplicate… меню Image.
3. Виберіть режим Indexed Color… зі списку Mode, що знаходиться в меню
Image.
4. Перед вами діалогове вікно Indexed Color. Тут вам необхідно вибрати
палітру зображення, глибину кольору, метод згладжування, якість
згладжування і точність передачі кольору. У списку палітр виберіть
палітру Web (про призначення кожної визначеної палітри читайте в главі
4).
5. У списку Dither виберіть варіант Diffusion. Як уже згадувався,
найбільш прийнятний варіант.
6. Перемикач Color Matching переведіть у положення Best і установите
прапорець Preserve Exact Colors, щоб досягти максимальної якості.
7. Натисніть кнопку ОК.
8. Проробіть кроки 3-8 з дублікатом зображення, тільки на кроці 4
виберіть палітру Adaptive. Порівняєте індексовані зображення, що вийшли,
(щоб розходження були очевидні, збільште масштаб відображення
документів).
9. Безсумнівно, адаптована палітра дає набагато більш якісний результат.
Особливо це позначається на зображеннях з великою кількістю відтінків
декількох кольорів, оскільки в палітрі Web багато кольорів, але мало
відтінків. Переконаєтеся в цьому, відкривши палітру командою Color
Table… того ж списку Mode меню Image.
10. Закрийте обидва зображеня не зберігаючи.
Особливо удале використання індексованих зображень для відображення
текстової інформації і малюнків. У цьому випадку 256 кольорів навіть
зайві – можна обійтися і меншою їхньою кількістю. Індексовані формати
надають вам таку можливість. Photoshop автоматично обчислює кількість
кольорів в індексованому зображенні й округляє його до найближчого
ступеня двійки: 2, 4, 8, 16, 32, 64, 128. Менша кількість кольорів
дозволяє створювати графічні файли меншого розміру.
Стиснуті формати файлів
Як тільки передача графічної інформації з глобальних мереж стала
звичайною справою, компанія CompuServe (найбільша онлайновая служба)
запропонувала формат GIF, в основі якого лежить ефективний (на відміну
від більш ранніх форматів, наприклад, PCX) алгоритм стиску. Цей формат
використовується в Internet і по сьогоднішній день. Він дозволяє
зберігати тільки індексовані зображення.
Особливо цікаво унікальне застосування даного формату для створення
анімаційних ефектів. Формат GIF дозволяє зберігати в одному файлі кілька
зображень, а браузери можуть їх по черзі демонструвати. Для кожного
зображення можна вказати час його демонстрації. Якщо кожне з зображень,
що зберігається у файлі GIF, представляє фазу анімації, то браузер
покаже маленький “мультфільм”. Ця особливість формату GIF знайшла дуже
широке застосування в Web-дизайні. Такі анімаційні ефекти можна зустріти
практично на кожній сторінці WWW. Особливо часто анимированные
зображення використовуються в баннерах (від англійського banner,
плакат), рекламних оголошеннях.
Інша корисна для Web-дизайнера особливість формату GIF у тім, що він
підтримує “прозорість”. Будь-які ділянки зображення, збереженого в цьому
форматі, можуть бути прозорими. У браузері через ці ділянки буде
“просвічувати” фон Особливо часто подібний хід застосовується для
розміщення на сторінці непрямокутних зображень Механізм створення
прозорості в GIF-файлах трохи відмінний від використовуваного в
Photoshop. Оскільки зображення є індексованим, дизайнер повинний вибрати
“прозорий колір”. Це може бути кожний із кольорів палітри зображення. У
результаті браузер буде трактувати даний колір як прозора ділянка.
Другим форматом графічних файлів у WWW є JPEG, унікальний алгоритм
якого дозволяє домагатися 15-кратної щільності стиску Високі щільності
стиски досягаються ціною якості зображення, що неприйнятно для
видавничих систем, але абсолютно несуттєво для Web-сторінок. У форматі
JPEG можна зберігати полнокольорові і напівтонові зображення, що чудово
доповнює можливості формату GIF. Обидва формати, GIF і JPEG, підтримують
чересстрочне розгорнення. Це виглядає так, начебто в міру завантаження з
границі зображення стає більш чітким і докладним. Такий спосіб
демонстрації полягає в завантаженні зображення не підряд, а через
декілька (2-5) рядків.
1. Відкрийте файл chart.ai з вашої робочої папки командою Open з меню
File
2. У діалоговому вікні, що відкрилося, Rasterize Generic EPS Format
залишіть пропоновані розміри і дозвіл 72 dpi, а колірну модель у списку
Mode встановіть RGB Color.
3. Виберіть команду Flatten Image з меню Layer, щоб документ одержав шар
Background.
4. Виберіть команду Save A Copy меню File.
5. У діалоговому вікні, що відкрилося, виберіть формат збереження JPEG
(розширення jpg).
6. Натисніть кнопку Save.
7. Перед вами діалогове вікно JPEG Options.
8. У поле Image Options установлюється ступінь стиску файлу. Чим
сильніше стиск, тим менше виходить файл, і нижче його якість. Параметр
має 10 градацій (від 0 до 10) і чотири визначених варіанти: 1) Low, 3)
Medium, 6) High і 8) Maximum. Вибирайте ступінь стиску виходячи із
сюжету зображення. Спочатку обов’язково відкривайте отриманий JPG-файл і
оцінюйте його якість. Незабаром у вас з’явиться досвід, щоб зробити
правильний вибір цього параметра. Поки встановіть якість Low.
9. У поле Format Options встановлюються параметри, зв’язані з
особливостями формату. Перемикач Baseline (“Standard”) відповідає самому
розповсюдженому варіанту формату. Baseline Optimized є злегка
оптимізованою версією першого, а вибір перемикача Progressive дозволяє
створювати зображення з черезстрочним розгорненням. Якщо встановлений
останній варіант формату, то стає доступним список з фактором чергування
рядків. Виберіть перемикач Baseline Optimized.
10. Натисніть кнопку ОК. Копія документа збережена у файлі chart copy
jpg.
11. Збережіть ще одну копію документа у форматі TIFF за допомогою
команди Save A Copy.
12. Порівняєте розмір chart copy.tif з розміром файлу chart copy.jpg.
Перший займає на диску 240 Кбайт, а другий 24 Кбайт – у 10 разів менше!
13. Відкрийте файл chart copy.tif і порівняєте з оригіналом. Ніяких
відмінностей немає.
14. Тепер відкрийте файл chart copy.jpg і уважно переглянете зображення
під збільшенням (мал. 13.6). Помітили характерні “бруд” і порушення
передачі кольору. Таке зображення непридатне для високоякісної печатки,
але для Web-сторінки цілком підійде.
Неможливість створення повнокольорових зображень із прозорими ділянками
в рамках форматів GIF і JPEG привела до появи нового формату. Формат PNG
був розроблений як альтернативу формату GIF і для представлення
зображень у мережі World Wide Web і в інших електронних мережах. Цей
формат зберігає всю колірну інформацію й один альфа-канал зображення, а
також для мінімізації обсягу файлу застосовується алгоритм ущільнення,
що не приводить до втрати даних. Альфа-канал використовується браузером
як маску прозорості. Щільність стиску PNG-файлів аналогічна щільності
TIFF-файлів, оскільки застосовуються подібні алгоритми, що не приводять
до зниження якості зображень. На жаль, старі версії деяких браузерів не
підтримують цей формат, але якщо ви орієнтуєтеся на Internet Explorer чи
Netscape Navigator, то можете сміливо їм скористатися.
Ідеального графічного формату не існує, оскільки кожний покликаний
вирішувати строго визначене коло задач. Це стимулює нові розробки в
області графіки для WWW.
Часто буває необхідно опублікувати на Web-сторінці зображення, що має
цінність саме по собі: художня фотографія, картина, фотографічний
результат досліджень (наприклад, рентгенограма), карта і т.п. Для того
щоб глядач міг розглянути його фрагменти більш великим планом,
приходиться створювати серію цих “великих планів” і робити посилання на
них з повного зображення. Незручність і недосконалість такого методу
упадає в око. Уже зараз пропонується два варіанти рішення цієї проблеми.
Перший полягає в створенні графічного формату, що підтримує значне
масштабування з мінімальними втратами якості. Другий варіант рішення
припускає створення формату, що дозволяє користувачу самому вибирати
дозвіл для перегляду, на зразок формату PCD (див. главу 3). Першим
шляхом пішли розроблювачі формату FIF (компанія Altamira), а другим –
FPX (компанії Hewlett Packard, Kodak). На сайтах цих компаній ви можете
знайти відповідні фільтри імпорту й експорту для Photoshop. Поки дані
розробки знаходяться в стадії експерименту, і для перегляду результатів
їхні роботи вимагаються спеціальні доповнення для чи браузерів серверів.
Широке використання цих форматів поки ще справа майбутнього.
Нашли опечатку? Выделите и нажмите CTRL+Enter
