Adobe Photoshop CS5 для Веб

1. Розміри і дозвіл
2. Зменшення кількості кольорів
3. Стислі формати файлів
4. По темі:

Наша взаимовыгодная связь https://banwar.org/

Зайва грошик кишені не тяга.

Розвиток і повсюдне поширення Інтернету зробило Photoshop прраммой № 1 для тих, хто створює свої сторінки в WWW (World Wide Web). Мова опису веб-сторінок, HTML (HyperText Markup Language), підтримує ісполованіе тільки точкових зображень, а кращий редактор точкових зображень, звичайно, Photoshop. Веб-засоби в Adobe Photoshop CS5 допоможуть в дизайні і оімізаціі як окремої веб-графіки, так і повноцінних веб-сторінок.

Інструмент Slice (Фрагмент) дозволить розрізати зображення на прямокутні фрагменти і застосувати різні методи обробки до кожної частці. Модуль Save For Web & Devices (Зберегти для Web та пристроїв) сильно полегшує рабу, дозволяючи попередньо переглянути різні варіанти оптимізації, цвовой гами, прозорості, забезпечує більшу гнучкість і кращу якість експорту зображень у формати GIF, JPEG і PNG.

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

± Нове робоче простір Web (Веб) в робочому середовищі програми. Саме в ньому з'являються нові, у порівнянні з іншими просторами, палітри, нрімер палітра Layer Comps (Компонування шарів).

± Фільтри експорту в основні формати WWW: GIF, JPEG, PNG.

± Спеціальна палітра кольорів, що забезпечує їх однакову передачу на комп'ютерах різних платформ і з різними браузерами.

± Ефекти для шарів: тіні, імітація обсягу.

± Засоби автоматизації і пакетної обробки зображень: палітри Actions

(Дії) і Animation (Анімація), команди меню Automate (Автоматизація).

± Збереження в файлах зображень інформації про авторське право і впровадити в зображення невидимих ​​авторських міток.

± Фільтри імпорту і експорту файлів-документів в переносимому форматі PDF (Portable Document Format).

± Розширення інтерфейсу програмування (API). Це стимулює створення сторонніми виробниками спеціалізованих модулів для Photoshop.

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

± Використання шарів і фрагментів при проектуванні веб-сторінки і ЕЛЕНТ інтерфейсу.

± Використання палітри компонентів Layer Comps (Компонування шарів) для експериментування з різними складами сторінки або варіантами екортірованія.

± Створення ролловеров тексту або кнопки графіки для імпортування в Dreamweaver або Flash.

± Створення анімації за допомогою палітри Animation (Анімація), з підемо експортом GIF-малюнків.

± Використання Web Photo Gallery (Галерея веб-фотографій) для швидкого професійного перегляду зображень.

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

Розміри і дозвіл

На відміну від паперової, розмір веб-сторінки не обмежений ні по горизонталі, ні по вертикалі. Проте, ні в якому разі не робіть сторінок, ширина котих перевищує ширину екрана. Довжина сторінки менш критична, але оптимальна величина - два-три екрана. Найбільш типове дозвіл моніторів 72 пикс / дюйм, а діагональ 17 дюймів (видима область 16 дюймів або 40 см). З цих розмірів слід відняти площу, яку займає елементами інтерфейсу самого браузера. Якщо у вас є можливість змінити дизайн сторінки таким чином, то обов'язково скористайтеся нею, наприклад:

± застосуєте суцільний кольоровий фон замість графічного;

± використовуйте кольоровий фон комірок таблиць замість графічного;

± створіть текстові посилання замість графічних кнопок;

± вводите для серії сторінок повторювані графічні елементи, щоб хата їх постійного завантаження по мережі;

± визначте найбільш довго завантажуються зображення і розгляньте воожность зменшення їх розмірів.

Ще кілька порад щодо оптимізації завантаження зображень:

± одне велике зображення вантажиться швидше, ніж кілька маленьких (НЕ песилается додаткова службова інформація), тому використовуйте ізраженія-карти посилань (image maps);

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

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

Зменшення кількості кольорів

Для представлення графіки в Інтернеті широко використовуються індексувати зображення. Вони, як ви пам'ятаєте, дозволяють передавати до 256 фіксованих кольорів. Набір кольорів зображення (палітра) зберігається в файлі разом з ізраженіем і використовується браузером для демонстрації.

Зображення з індексованими кольорами отримують з повнокольорових ізобреній шляхом зменшення кількості кольорів. Photoshop в діалоговому вікні Indexed Color (Індексований колір), яке з'являється після виконання команди Image | Mode | Indexed Color (Зображення | Режим | Індексований колір), пволяет вибрати один з чотирьох (див. Рис. 4.10) варіантів згладжування (чи нтройкі квітів):

± Pattern (Зразок). Кожному з 16 млн кольорів зіставляється певна комбінація пікселів, що є в палітрі індексованого зображення. При пильному розгляданні така імітація виглядає як візерунок з цвеих точок.

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

± Noise (Шум), як і Diffusion (Випадковий), дає випадковий розподіл пієліт, але гарантує від прояву "візерунків" у плавних градієнтних Перехов і похибок по краях зображення.

± None (Немає). Цей метод згладжування суть відсутність згладжування.

Отримаємо різні індексовані зображення для файлу МЕДВЕДЬ.jpg з компакт-диску.

1. Відкрийте файл МЕДВЕДЬ.jpg.

2. Створіть копію файлу командою Duplicate (Створити копію) меню Image (Ізраженіе).

3. Виберіть режим Indexed Color (Індексований колір) зі списку Mode (Рим), що знаходиться в меню Image (Зображення).

4. Перед вами діалогове вікно Indexed Color (Індексований колір). Тут вам необхідно вибрати палітру зображення, глибину кольору, метод згладжування, якість згладжування і точність передачі кольору. У списку палітр виберіть Питри Web (рис. 15.1).

5. У списку Dither (Плавний перехід) виберіть варіант Diffusion (Випадкова). Як уже згадувалося, найбільш прийнятний варіант.

6. Натисніть кнопку OK. Збережіть копії, вибравши в списку Dither (Плавний Пекод) варіанти: Diffusion (Випадкова), Pattern (Зразок), None (Немає).

7. Виконайте кроки 3-7 з дублікатом зображення, тільки на кроці 4 виберіть палітру Master Adaptive (Адаптована палітра). Порівняйте отримані індексовані зображення (щоб відмінності були очевидні, збільште масштаб відображення документів).

8. Без сумніву, адаптована палітра дає набагато якісніший рультат. Особливо це позначається на зображеннях з великою кількістю відтінків декількох кольорів, оскільки в палітрі Web багато кольорів, але мало відтінків. Переконайтеся в цьому, відкривши палітру командою Color Table (Колірна таблиця) того ж списку Mode (Режим) меню Image (Зображення).

9. Закрийте обидва зображення, не зберігаючи.

Мал. 15.1. Діалогове вікно Indexed Color

Особливо вдало використання індексованих зображень для відображена текстової інформації і малюнків. У цьому випадку 217 кольорів навіть зайві - можна обійтися і меншою їх кількістю. Індексовані формати предтавляют вам таку можливість. Photoshop автоматично обчислює кількість кольорів в індексованих зображенні і округлює його до найближчої ступеня двійки: 2, 4, 8, 16, 32, 64, 128. Менша кількість кольорів дозволяє створювати графічні файли меншого розміру.

Стислі формати файлів

Формат GIF дозволяє зберігати в одному файлі декілька зображень, а Браєр можуть їх по черзі демонструвати. Особливо цікаво унікальне прененіе даного формату для створення анімаційних ефектів. Особливо часто анімовані зображення використовуються в банерах (від англ. Banner - плакат), рекламних оголошеннях (рис. 15.2).

Мал. 15.2. Анімація будується з окремих фаз, кадрів

Інша корисна для веб-дизайнера особливість формату GIF у тому, що він підтримує "прозорість". Будь-які ділянки зображення, що зберігається в цьому форматі, можуть бути прозорими. У браузері через ці ділянки буде "просвечать" фон. Оскільки зображення є індексованих, дизайнер повинен вибрати "прозорий колір".

Другим форматом графічних файлів в WWW є JPEG. Обидва формати, GIF і JPEG, підтримують розгорнення. Це виглядає так, ніби в міру завантаження сторінки зображення стає більш чітким і докладним. Такий спосіб демонстрації полягає в завантаженні зображення не підряд, а через нколько (2-5) рядків.

1. Відкрийте файл Кашірскій_кот.ai з компакт-диску командою Open (Орить) з меню File (Файл). Зверніть увагу, що цей файл підготовлений в програмі векторної графіки Adobe Illustrator CS5 (розширення ai), а ми його відкриваємо в програмі растрової графіки Adobe Photoshop, це можливо тільки тому, що ці принципово різні програми розроблені однією фірмою Adobe.

2. Після команди відкриття файлу з'являється діалогове вікно (рис. 15.3) Import PDF (Імпорт PDF). У діалоговому вікні залиште пропоновані

розміри і дозвіл 300 pixels / inch, а колірну модель у списку Mode (Рим) встановіть RGB Color (Модель RGB).

Мал. 15.3. Діалогове вікно Import PDF

3. Як тільки ви натиснули кнопку OK, почався процес растеризации зображення, т. Е. Переклад його з векторної форми в растрову. Цей процес досить-таки тривалий і супроводжується діалоговим вікном Progress (Прогрес), в якому виконується команда Rasterizing File (Растеризация файлу) (рис. 15.4).

Мал. 15.4. Діалогове вікно Progress

4. Виберіть команду Flatten Image (Виконати зведення) з меню Layer (Шар), щоб документ отримав шар Background (Колір фону).

5. Виберіть команду Save A Copy (Зберегти як копію) меню File (Файл).

6. У діалоговому вікні виберіть формат збереження JPEG (розширити jpg).

7. Натисніть кнопку Save (Зберегти).

8. Перед вами діалогове вікно JPEG Options (Параметри JPEG) (рис. 15.5).

Мал. 15.5. Діалогове вікно

JPEG Options

9. В області Image Options (Параметри зображення) встановлюється ступінь стиснення файлу. Чим сильніше стиск, тим менше виходить файл і нижче його якість. Параметр має 10 градацій (від 0 до 10) і чотири предопреденних варіанти: Low (Низький), Medium (Середній), High (Високий) і Maximum (Максимальний). Вибирайте ступінь стиснення, виходячи з сюжету ізраженія. Спочатку обов'язково відкривайте отриманий JPG-файл і оценайте його якість. Скоро у вас з'явиться досвід, щоб зробити правильний злодій цього параметра. Поки встановіть якість Low (Низький).

10. В області Format Options (Параметри форматування) встановлюються паметри, пов'язані з особливостями формату. Перемикач Baseline ( "Standard") (Базовий стандартний) відповідає найпоширенішому варіанту формату, Baseline Optimized (Базовий оптимальний) є злегка оптимізованою версією першого, а вибір перемикача Progressive (Прресівний) дозволяє створювати зображення з чергуванням рядків. Якщо встановлений останній варіант формату, то стає доступним список з фактором чергування рядків. Виберіть перемикач Baseline Optimized (Базовий оптимальний).

11. Натисніть кнопку OK. Копія документа збережена в файлі Кашірскій_кот.jpg.

12. Збережіть ще одну копію документа у форматі TIFF за допомогою команди

Save As (Зберегти як).

13. Порівняйте розмір Кашірскій_кот.tif з розміром файлу Кашірскій_кот.jpg. Пеий займає на диску 24 685 Кбайт, а другий 489 Кбайт - в 50 разів менше!

14. Відкрийте файл Кашірскій_кот.tif і порівняйте з оригіналом. Ніяких відмінностей немає. Тільки не думайте, що формат TIFF поганий - саме в форматі TIFF бутся зображення для друку в друкарні.

15. Тепер відкрийте файл Кашірскій_кот.jpg і уважно перегляньте, як влядіт очей кота під збільшенням (рис. 15.6, а). Помітили характерну "бруд" і порушення передачі кольору? Таке зображення непридатне для висококачтвенной друку, але для веб-сторінки цілком підійде.

а б

Мал. 15.6. Зображення, збережене в форматі JPEG (а); зображення, збережене в форматі TIFF (б)

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

Джерело: Комолова, Н. В., Adobe Photoshop CS5 для всіх / Н. В. Комолова, Е. С. Яковлєва. - СПб .: БХВ-Петербург, 2011. - 624 с .: іл. + CD-ROM - (В оригіналі)

По темі:

Ви можете пропустити читання запису і залишити коментар. Розміщення посилань заборонено.