Adobe Photoshop CS5 для Веб

wpid-AdobePhotoshopCS5forAll_image715-min-vs.jpg

Лишняя денежка карману не тяга.

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

Инструмент Slice (Фрагмент) позволит разрезать изображение на прямоуголые фрагменты и применить различные методы обработки к каждой доле. Модуль Save For Web & Devices (Сохранить для Веб и устройств) сильно облегчает рабу, позволяя предварительно просмотреть различные варианты оптимизации, цвовой гаммы, прозрачности, обеспечивает большую гибкость и лучшее качество экспорта изображений в форматы 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 — (В подлиннике)

По теме:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Оставить комментарий