Краткое содержание в Интернете 1 Краткое содержание 3 часть I 10 Основы Интернета 10 Что такое Интернет 11



Скачати 11.08 Mb.
Сторінка32/35
Дата конвертації31.03.2017
Розмір11.08 Mb.
1   ...   27   28   29   30   31   32   33   34   35

Рис. 23.1. Диалоговое окно Export Preview приложения Macromedia Fireworks




      1. По умолчанию программа Fireworks использует в качестве прозрачного цвета доминирующий цвет фона. Если вы хотите изменить этот цвет, активизируй­те инструмент Select Transparent color (Выбор прозрачного цвета) и в палитре щелкните на том цвете изображения, который нужно сделать прозрачным.

      2. Щелкните на кнопке Export (Экпорт) и в открывшемся диалоговом окне ука­жите имя файла.

Использование программы Paint Shop Pro

В программе Paint Shop Pro проще всего создать прозрачное изображение GIF, за­дав один цвет в качестве цвета фона, а затем указав, что фон должен стать про­зрачным. Ниже описаны выполняемые для этого действия.



        1. Щелкните на инструменте выбора цвета (Dropper) панели инструментов Tool Bar, обычно находящейся у левого края окна программы.

        2. В окне изображения выполните щелчок правой кнопкой мыши на цвете, кото­рый вы хотите сделать прозрачным.

        3. Выберите команду Set Palette Transparency (Установить прозрачность палитры) из меню Colors (Цвета) или нажмите комбинацию клавиш Qxl+Shift+V. Если появится окно с сообщением, что программа Paint Shop Pro должна умень­шить количество цветов в палитре, щелкните на кнопке Yes. Прочитайте раз­дел «Оптимизация изображений для Веб»-, чтобы наилучшим образом задать параметры в открывшемся окне Set Palette Transparency.

        4. В окне Set Palette Transparency выберите переключатель Set the transparency value to the current background color (Установить прозрачность для текущего цвета фона), а затем щелкните на кнопке ОК. Для просмотра результатов задания прозрачного цвета примените команду View Palette Transparency из меню Colors (или нажмите комбинацию клавиш Shift+V).

        5. Выберите команду Save As (Сохранить как) из меню File (Сохранить) и в от­крывшемся окне задайте тип файла GIF (формат CompuServe Graphics Inter­change).

        6. Щелкните на кнопке Options (Параметры) в окне Save As (Сохранить как) и убе­дитесь, что в появившемся окне Save Options (Сохранить параметры) выбран переключатель Version 89а. Нажмите кнопку ОК.

        7. Щелкните на кнопке Save (Сохранить) в окне сохранения файла.

Устранение проблем, связанных с прозрачностью

В полученном прозрачном изображении могут обнаружиться такие недостатки, как «дыры», рваные края и неполная прозрачность (пятна). По какой же причине они возникают?

Дело в том, что формат GIF для хранения информации о цветах изображения ис­пользует палитру (набор цветов), включающую не более 256 цветов, поэтому цвет пиксела задается номером в палитре. Если какой-то цвет палитры обозначен как прозрачный, то каждый пиксел в любом месте изображения, имеющий дан­ный цвет, также станет прозрачным, даже если он находится за пределами облас­ти, которую вы хотели сделать прозрачной. С другой стороны, пикселы в этой об­ласти могут остаться непрозрачными, поскольку они, возможно, имеют цвет, лишь похожий на тот, который обозначен как прозрачный.

Во избежание этих проблем нужно выбирать для создания прозрачности цвет, ис­пользуемый только в той области, которую вы хотите сделать прозрачной. Затем следует повторно применить этот цвет для закрашивания данной области. Чтобы один из цветов палитры больше нигде не использовался в изображении, можно добавить в палитру уникальный цвет. Дополнительная информация об управле­нии палитрой приведена далее в разделе «Обеспечение качества изображений».

После того как для области задана прозрачность, у нее могут образоваться рва­ные края, а вокруг некоторых объектов могут появиться расплывчатые рамки. Это объясняется неравномерностью цвета фона и тем, что переход от цвета к цве­ту вдоль границ объектов осуществляется не резко, а постепенно.

Причины появления этих проблем в изображении описаны ниже.

► Объекты изображения (обычно текст) были подвергнуты обработке со сгла­живанием неровностей контура. Неровности контура — это ступени, появ­ляющиеся у наклонных и закругленных краев графических объектов при ото­бражении на экране монитора. Сглаживание неровностей контура, которое выполняется путем смешивания цветов объекта и фона для пикселов, распо­ложенных вдоль его края, позволяет сделать эти ступени менее заметными.

Не используйте графические объекты со сглаженными краями в изображени­ях, для которых задается прозрачность.



  • Изображение вначале было представлено в формате JPEG, а такие изображе­ния всегда имеют плавные переходы цветов на краях объектов. Постарайтесь получить первоначальное изображение в другом формате или отведите доста­точное количество времени для редактирования цветов имеющегося.

  • Изображение получено путем сканирования рисунка или фотографии либо компьютерной прорисовки трехмерной сцены. Такие изображения всегда имеют размытые края, то есть меньшую степень единообразия цветов. Попро­буйте снова отсканировать (прорисовать) изображение, используя меньшее количество цветов и отключив сглаживание.

  • Изображение было подвергнуто обработке с имитацией цвета. В этих изобра­жениях точки, окрашенные в разные цвета, расположены таким образом, что­бы создать иллюзию цвета, которого нет в палитре. В непрозрачных областях изображения на месте точек, имеющих цвет, который выбран прозрачным, об­разуются «дыры», а на участках фона, где присутствуют точки непрозрачного цвета, появляются пятна.

Тем не менее, если вы хотите, чтобы изображение постепенно «растворялось» в прозрачном фоне или было частично прозрачным, следует применить имита­цию цвета. Величина прозрачности пиксела определяется тем, насколько близок его цвет к цвету, выбранному в качестве прозрачного. Имитация цвета позволяет для достижения частичной прозрачности смешивать в разных пропорциях про­зрачные и непрозрачные пикселы. Однако может оказаться, что палитра изобра­жения не имеет цветов, необходимых для создания постепенного перехода от цве­та переднего плана к цвету фона, или вам потребуется ввести промежуточный непрозрачный цвет.

Наличие имитации цвета не всегда оказывает положительное влияние при созда­нии эффекта прозрачности. Поэтому если у вас есть изображение с имитацией цве­та, получите оригинал, в котором таковая отсутствует, а затем решите, стоит ли применять данный эффект. Предотвратить имитацию цвета в изображении можно, выполнив настойку палитры или изменив установки графической программы.

Если у вас возникли проблемы из-за того, что цвета в изображении распределены неравномерно в результате имитации цвета или по любой другой из перечислен­ных выше причин, возможно, вам придется «почистить» изображение. Информа­цию о способах решения таких проблем вы найдете в разделе «Обеспечение каче­ства изображения».

Оптимизация изображений для Веб

При создании графического изображения, предназначенного для Веб, как прави­ло, всегда приходится искать компромисс между продолжительностью загрузки и качеством изображения. Если вы заинтересованы в сокращении времени за­грузки, следует уменьшить число цветов и количество деталей, содержащихся в изображении. Стремление же повысить точность передачи цветов, создать бо­лее детальное изображение или ввести какие-либо специальные эффекты почти

наверняка приведет к увеличению времени загрузки. Некоторые средства опти­мизации позволяют свести к минимуму издержки, имеющие место в любом из указанных случаев, а отдельные графические программы могут выполнить основ­ную часть процесса оптимизации за вас.

Для обычных веб-узлов, как правило, достаточно установить подходящий размер изображения и выбрать приемлемый формат: GIF или JPEG. Учитывать допол­нительные требования к изображениям обычно приходится только при создании профессиональных или коммерческих веб-узлов.

Уменьшение времени загрузки изображения

Изображения должны загружаться быстро, иначе пользователь не станет ждать, пока они появятся, и перейдет на другую страницу. Основным способом ускоре­ния загрузки страницы является уменьшение объемов файлов и повторное (где это возможно) их использование. На объем файла наиболее существенное влия­ние оказывают следующие факторы:


  • формат файла (GIF, JPEG или PNG);

  • содержимое изображения;

  • количество цветов изображения.




Црнянни

зв colors I Г~ II а I а



I Original \Qptimized \2-Up 1 4-Up \

| Color Table \lmage Size \ ©

r Settings: | [Unnamed] jJ 0 3 Lossy:I Colors: [yjAuto

i 3 P""-: I _l



V Matte: |

Г Interlaced Web Snap: |o5 7]



llOOX П [r: - G: - B: - Alpha: -

Рис. 23.2. Окно приложения Photoshop, используемое при оптимизации изображения
На рис. 23.2 показано окно программы Photoshop, где выполняется оптимизация изображения. В нем представлены четыре изображения с разным количеством цве­тов. Для каждого из них указаны объем файла и время его загрузки.
Чтобы сократить время загрузки, старайтесь повторно использовать изображе­ния везде, где это возможно. Браузеры во время просмотра не загружают дважды один и тот же файл изображения, даже если это изображение (такое как кнопка, маркер или значок) повторяется на одной или нескольких веб-страницах. Однако некоторые средства разработки веб-страниц (в частности, текстовые редакторы) создают отдельный файл для каждого экземпляра одного и того же изображения, например, маркера или значка. Отредактируйте соответствующий HTML- файл таким образом, чтобы для одинаковых маркеров или значков загружалось одно изображение.

Уменьшение размеров изображения

Одним из способов уменьшения объема файла является задание допустимых (минимальных и максимальных) высоты и ширины изображения (в пикселах). Например, после уменьшения высоты и ширины наполовину объемы большинст­ва файлов изображений уменьшаются по меньшей мере в два раза. Объем файла с фотографией в формате GIF может при этом уменьшиться примерно в четыре раза по сравнению с первоначальным, и файл будет загружаться из Веб в четыре раза быстрее. Объемы файлов с чертежами в векторном формате после преобра­зования в растровый формат (GIF или JPEG) существенно увеличиваются. Для получения наилучших результатов нужно сразу выбирать правильные раз­меры изображения, хотя крупное изображение можно уменьшить и впоследст­вии. (Противоположное действие, то есть увеличение небольшого изображения, обычно приводит к получению недопустимо низкого качества.) В большинстве графических программ (рис. 23.3) предусмотрены команды для изменения разме­ров изображения или параметры, с помощью которых можно уменьшить объем файла изображения. (При использовании многих распространенных графиче­ских приложений, таких как Photoshop и Paint Shop Pro, команды изменения раз­меров обычно можно найти в меню Image.)

ПРИМЕЧАНИЕ

Чтобы избежать чрезмерного искажения изображения, представленного в формате JPEG, не обрезайте, не сжимайте и не редактируйте его никаким иным образом. В неко­торых программах выполнение любого из этих действий может привести к получению расплывчатого изображения или к его искажению. Поэтому прежде чем редактировать такое изображение, сохраните его в другом формате.

Применительно к изображениям для Веб имеет смысл пользоваться только од­ной единицей измерения — пикселами. Некоторые графические программы по умолчанию отображают размеры изображения в дюймах или сантиметрах (во многих программах единицы измерения размеров изображения показаны в стро­ке состояния). Если в программе можно установить размеры в пикселах, сделайте это и больше не задумывайтесь о том, как эти размеры будут представлены в дру­гих единицах измерения, или о разрешающей способности дисплея. В случае, ко­гда графическая программа не показывает размеры в пикселах, можете сами рас­считать эти размеры. Умножьте значения, указанные в дюймах (или в сантимет­рах), на установленную в программе разрешающую способность в пикселах на дюйм (или сантиметр). Корректируйте размеры изображения в такой программе,

изменяя размеры в дюймах (или сантиметрах) либо разрешающую способ­ность, — результат будет одинаковым. В некоторых программах рисования может вообще не идти речь о пикселах до тех пор, пока вы не начнете сохранять файл в формате GIF.

Export Preview







Preview Q

■JPEG

Saved Settings:



Options File Animation





Quality 76 0 Millions






Alpha Transparency
Format: GIF

Palette: WebSnap Adaptive V

Loss: 0 v

Dither:


0ВЕ





Matte






[s7] Remove Unused Colors

I | Interlaced
= лП DEffl "1>Мм





Рис. 23.3. Диалоговое окно приложения Macromedia Fireworks, используемое для оптимизаци

Если программа, которую вы используете для создания веб-страниц, не обеспечи­вает сжатие графических файлов, ускоряющее их загрузку, попробуйте умень­шить размер соответствующего изображения в графической программе. Напри­мер, при создании веб-страницы вы можете поместить изображение на площади, размеры которой меньше, чем размеры изображения в пикселах, но это не приве­дет к уменьшению объема файла и может ухудшить качество изображения. Сле­дующий HTML-код задает отображение рисунка из файла Image.gif на площади с размерами 126x126 пикселов независимо от его фактических размеров:



Однако данный файл передается полностью, поэтому время его загрузки такое же, как и у файла, изображение в котором не умещается на меньшей площади. Браузер, получающий данный документ, перед выводом изображения на экран

должен выполнить дополнительные действия по уменьшению его размеров (до 126x126 пикселов). Браузеры справляются с этой задачей не так успешно, как большинство графических программ, поэтому добиться лучшего качества и мень­шего объема файла можно, уменьшив размер изображения в графической про­грамме, а не в браузере.

Уменьшение размеров изображения GIF отражается на его качестве, поскольку программа, удаляя пикселы, может исказить или удалить мелкие детали и соз­дать острые углы. Некоторые программы смягчают этот эффект с помощью сгла­живания неровностей контура. Однако сглаживание может оказаться нежела­тельным, если цвет фона должен быть прозрачным либо если изображение ото­бражается посредством аппаратного обеспечения компьютера или программного обеспечения браузера, имеющего лишь ограниченный диапазон цветов. Инфор­мация о том, как управлять сглаживанием, приведена в разделе «Обеспечение ка­чества изображения».

Уменьшение объема графических данных некоторых видов

Для хранения изображения с меньшим числом деталей (или точнее, с более рав­номерным распределением пикселов) необходим файл меньшего объема. Все гра­фические форматы для Веб используют сжатие данных, а равномерное распреде­ление пикселов способствует лучшему сжатию. Если группа пикселов имеет одинаковый цвет, то при сжатии данных в файле каждый пиксел не получает от­дельного номера цвета, поскольку вся группа может быть представлена одним значением. Чем реже наблюдается изменение цвета в строке пикселов, тем мень­ше потребуется групп, и поэтому степень сжатия данных будет выше.

Файлы некоторых изображений имеют больший объем. Это изображения с плав­ным изменением цветов по горизонтали, имеющие фон в виде повторяющихся элементов, с имитацией цвета, пятнистые изображения, фотографии с высоким разрешением, изображения, отсканированные с оригинала низкого качества, на­пример из газеты, а также изображения, отсканированные с палитрой цветов, со­держащей большее число цветов, чем печатный оригинал.

Оптимальное решение состоит в том, чтобы найти графический оригинал хоро­шего качества. Если это невозможно, нужно добиться более равномерного рас­пределения цветов изображения, сделать его более размытым, удалить с него пят­на или выбрать другой способ уменьшения объема файла, например сократить число цветов, как описано в следующем разделе.

Как добиться более равномерного распределения цветов, рассказано далее в раз­деле «Обеспечение качества изображения». Чтобы сделать изображение более размытым или удалить с него пятна, воспользуйтесь фильтром размытия изобра­жения (Blurring) или фильтром удаления пятен (Despeckling) в графическом ре­дакторе. Программы Photoshop, Paint Shop Pro, Lview Pro и другие распростра­ненные графические редакторы предлагают наборы фильтров, с помощью кото­рых можно удалить лишние детали и оттенки. Средства, позволяющие устранить нежелательные эффекты, имеются также в программном обеспечении некоторых сканеров.

Уменьшение количества цветов и их сглаживание

Чем меньше цветов включает изображение, тем меньше объем файла, требуемого для его хранения. Поэтому, если вы рисуете изображение для Веб сами, старай­тесь использовать в нем как можно меньше цветов. Уменьшить их количество в палитре существующего изображения можно с помощью графического редакто­ра. Данная процедура приводит к уменьшению объема файла изображения, одна­ко происходит это не за счет уменьшения объема данных самой палитры (он состав­ляет лишь небольшую часть файла изображения). При сокращении количества цветов программа присваивает некоторым пикселам новые цвета. В ее распоря­жении остается меньше цветов, поэтому вероятность того, что цвета соседних пик­селов совпадут, повышается. В этом случае они войдут в состав группы пикселов одинакового цвета, и информация об их цвете уже не будет занимать в графиче­ском файле отдельное место.

Используя для уменьшения количества цветов графическую программу, следует учитывать, что большое значение имеет применяемый при этом метод. Если про­грамма удаляет какой-то цвет из палитры, объем файла изображения становится меньше только в случае присвоения пикселу с удаляемым цветом цвета соседнего пиксела. Если же программа заменяет цвет путем имитации этого цвета, может оказаться, что файл уменьшится в объеме не существенно. Дело в том, что имита­ция влечет за собой присвоение пикселам цвета, отличного от цвета соседних пикселов, а это значит, что каждый пиксел будет представлен в файле отдельно.

Большинство графических программ, которые обеспечивают сокращение количе­ства цветов, предоставляют возможность выбрать применяемый при этом метод. Просмотрите параметры в диалоговом окне, появляющемся при вызове функции уменьшения количества цветов. Метод, позволяющий свести объем файла к ми­нимуму, часто называется подстановкой ближайшего цвета (nearest-color sub­stitution). А метод имитации цвета (dithering) чаще всего именуют распределени­ем ошибок (error diffusion).

Средства сжатия и оптимизации изображений

Достичь при оптимизации требуемого качества изображения и уменьшения вре­мени его загрузки — задача не легкая. Необходимо учесть особенности компьюте­ров и браузеров, с помощью которых будет просматриваться изображение, его со­держимое, палитру и многое другое.

Некоторые средства оптимизации графических файлов для Веб могут помочь уменьшить объем файла в два раза даже после того, как вы вручную сделали все возможное для его оптимизации. Среди них следует отметить программу Ulead SmartSaver Pro, которая хорошо сжимает графику, особенно анимированную. Она поддерживает форматы GIF, JPEG и PNG. Обеспечивая хорошее качество, Ulead SmartSaver Pro позволяет получить файл минимум на 30 % меньше, чем аналогичные программы.



Обеспечение качества изображения

Конечно, быстрая загрузка изображения важна, но следует также поддерживать определенный уровень его качества. Если известно, какими должны быть разме­ры и информационное наполнение изображения, вы сможете достичь его высоко­го качества, правильно выбрав формат файла и глубину цвета изображения.

Выбор глубины цвета и состава палитр

Количество различных цветов, которое может содержать изображение, храня­щееся в файле, зависит от параметра, называемого глубина цвета. Он определяет, сколько разрядов (битов) используется для представления данных о цвете. Напри­мер, файлы GIF могут хранить до 256 цветов, то есть поддерживать глубину цвета 8 бит. Глубина цвета может быть и меньшей: 7 бит (128 цветов), 6 бит (64 цвета), 5, 4, 3, 2 и даже 1 бит (последнее имеет место в черно-белых рисунках).

Изображения в формате JPEG имеют постоянную глубину цвета 24 бита и могут содержать 16,7 млн. цветов. Благодаря этому данный формат хорошо подходит для хранения цветных фотографий.

Фактическое количество цветов в изображении (палитра изображения) может быть меньше, чем допускает глубина цвета соответствующего формата. Напри­мер, в 8-битовом изображении формата GIF (256 возможных цветов) может при­меняться только 200 цветов.

Большинство компьютеров способны воспроизводить 16,7 млн. цветов, а в число цветов, отображаемых старыми компьютерами, могут попасть любые 256 из 16,7 млн.

Столь же гибкими являются и изображения формата GIF. Вы сами вручную (или графическая программа автоматически) можете выбрать из 16,7 млн. цветов те 256, которые наиболее соответствуют цветам первоначального изображения. Можно также задать меньшую палитру или глубину цвета, чтобы уменьшить объем файла, либо выбрать конкретную палитру, которая в большей степени соответствует па­литрам большинства компьютерных дисплеев (как описано в следующем разделе).

В форматах типа True Color, к которым относятся JPEG и 24-битовый PCX, па­литра не используется, поэтому каждый пиксел может иметь любой цвет из 16,7 млн. Если компьютер не способен отобразить какой-либо цвет изображения JPEG, он либо выбирает похожий цвет из доступных, либо смешивает другие для его имитации. Какой метод будет выбран, зависит от браузера. Чтобы свести к ми­нимуму проблемы качества, вызванные применением таких методов в браузере, сначала создайте изображение в формате с использованием палитры (например, в GIF) или преобразуйте его в такой формат, а затем преобразуйте полученный файл в формат JPEG.

Если на веб-странице имеется несколько изображений, следите за тем, чтобы в них применялись одинаковые палитры. Компьютеры, использующие палитры, могут одновременно отображать цвета только одной палитры. Если на веб-странице есть изображения с разными палитрами, браузер вынужден выполнять подста­новку или имитацию цвета.

Применение безопасной палитры

При просмотре в браузере изображения иногда выглядят хуже, чем исходные. Это происходит по той причине, что браузер, графический адаптер или операци­онная система компьютера не поддерживают такое количество цветов, как аппа­ратное и программное обеспечение, с помощью которого создавался оригинал. Чтобы отобразить не поддерживаемый системой цвет, они должны имитировать его либо подставить вместо этого цвета другой. В результате на изображении мо­гут появиться пятна или несвойственные ему цвета.

Во избежание замены цветов при присмотре изображения на другом компьютере следует использовать для изображения так называемую безопасную палитру Веб (web safe palette). Эта минимальная палитра состоит из 216 цветов, которые гаран­тированно передаются одинаково всеми браузерами на разных платформах.

Если вы воспользуетесь такой палитрой, то пожертвуете качеством и не получите четкое изображение с высокой достоверностью передачи цветов. Однако взамен будете иметь гарантию того, что теперь вы, а не система, в которой просматрива­ется изображение, управляете выбором цветов.

Нужно ли идти на такой компромисс? Решение зависит от того, рассчитываете ли вы, что изображения будут просматривать на устройствах, имеющих ограни­ченные графические возможности (например, в системах UNIX). Для воспроиз­ведения изображений с безопасной палитрой достаточно установить в системе Windows наименьшую палитру, то есть 256 цветов (8-битовый цвет). Но боль­шинство компьютеров и браузеров использует большую глубину цвета, многие поддерживают как минимум 16-битовый цвет (32 тыс. или 64 тыс. цветов). Таким образом, применяя безопасную палитру, вы отказываетесь от возможностей, ко­торые обеспечивают современные средства просмотра.

Если вы все-таки решили использовать безопасную палитру Веб, то как это реа­лизовать? Все графические программы, кроме самых простых, позволяют созда­вать новую палитру, загружать палитру из файла или настраивать палитру суще­ствующего изображения, удаляя, добавляя или корректируя цвета. Некоторые из этих программ, такие как Photoshop и Fireworks, предоставляют встроенные безо­пасные палитры Веб.

Если ваша графическая программа не имеет подобной палитры, можно взять изо­бражение с такой палитрой, сохранить ее в отдельном файле (если графическая программа это позволяет), а затем применить этот файл палитры к создаваемым изображениям. Один из файлов с безопасной палитрой, созданный Виктором С. Энглом (Victor S. Engle), находится по адресу http://the-light.com/netcolpc.gif. Выпол­нив поиск по фразе «web-safe palette», можно отыскать в Веб и другие примеры.

Откройте изображение с безопасной палитрой в графической программе и най­дите в меню команду, позволяющую сохранить палитру в виде файла. Например, в программе Paint Shop Pro для этого нужно выбрать команду Save Palette из меню Colors. В программе Photoshop воспользуйтесь командой Save for Web из меню File и в открывшемся окне щелкните на кнопке Color Palette Menu палитры Color Table. Сохранив палитру в виде файла, вы сможете загрузить ее перед созданием нового изображения или после открытия существующего изображения для преобразова­ния его цветов в безопасные.

Улучшение качества фотографий в формате GIF

Иногда изображения фотографий в формате GIF имеют плохое качество — вы­глядят пятнистыми или пестрыми, содержат ненатуральные цвета либо имеют цветовые полосы вместо плавного перехода цветов. Причиной этого, скорее все­го, является сканирование с использованием слишком малого числа цветов или уменьшение количества цветов в палитре.

Повторите этап сканирования либо операцию уменьшения палитры первона­чального изображения. Вы можете также попытаться привести пятнистый или полосатый участок к единому цвету (см. следующий раздел). Попробуйте уда­лить пятна, островки или полосы цветов, применив к ним фильтр размытия, если в вашей графической программе предусмотрены соответствующие инструменты. Однако в большинстве случаев вы сможете получить более качественное изобра­жение, лишь повторно отсканировав фотографию и сохранив ее в формате JPEG.

Приведение смешанных цветов к единому цвету

Окрашивание участка со смешанными цветами в единый цвет позволяет повы­сить качество изображения, уменьшить объем файла и обеспечить равномерную прозрачность данного цвета, избежав образования нежелательных «дыр» или пя­тен. Простейший способ добиться желаемого результата состоит в окраске нерав­номерной области в один цвет с использованием инструментов рисования, имею­щихся в графических программах. Выберите в палитре, отображаемой вашей про­граммой, четко различимый (а при создании прозрачных участков — неисполь­зуемый) цвет, затем активизируйте кисть или другой инструмент рисования и ок­расьте нужную область изображения.

Если область, цвет которой вы хотите изменить, имеет сложную форму, перекра­сить ее вручную будет трудно. В случае, когда цвета этой области похожи (ска­жем, представляют собой светлые и темные оттенки зеленого), можно повысить единообразие, уменьшив число цветов в палитре изображения.

Более сложные графические программы, такие как Photoshop, Fireworks и Paint Shop Pro, предоставляют инструментальные средства, с помощью которых можно заменять несколько цветов одним. Далее описано, как это сделать.

Photoshop

В программе Photoshop имеется инструмент Magic Wand (Волшебная палочка), позволяющий выбрать область с близкими цветами и заполнить ее одним цветом. Выберите инструмент Magic Wand в панели инструментов, а затем щелкните на об­ласти изображения, которую вы хотите привести к одному цвету. Чтобы скоррек­тировать диапазон выбранных цветов, воспользуйтесь командой Show Options (Параметры), находящейся в подменю Palettes (Палитры) меню Window (Окно). После ее вызова открывается палитра параметров Options. В поле Tolerance (До­пуск) палитры введите большее значение для расширения диапазона цветов или меньшее — для его сужения, а затем снова щелкните на изображении.

Возможно, вам придется сделать несколько попыток выбора нужных пикселов. Для расширения или сужения рассматриваемой области воспользуйтесь коман­дой Expand (Расширить) или Contract (Сузить) из подменю Modify (Изменить) меню Select (Выделить). Чтобы добавить отдельные участки к выделенной облас­ти, щелкайте на них, удерживая нажатой клавишу Ctrl. Удалить же участки мож­но, щелкая на них при нажатой клавише Shift. Для окрашивания области одним цветом выберите фоновый цвет на панели инструментов, нажмите кнопку инст­румента Fill (Заливка), а затем щелкните на выделенной области.

Fireworks

Функции инструмента Magic Wand в программах Fireworks и Photoshop практиче­ски одинаковы. Чтобы указать диапазон цветов, выберите команду Tool Options меню Window и в открывшемся диалоговом окне выполните те же установки, что и в окне Photoshop. Для расширения или сужения области выберите команду Expand (Расширить) или Contract (Сузить) из подменю Modify (Изменить). Чтобы заполнить область одним цветом, воспользуйтесь инструментом Paint Bucked па­нели инструментов, а затем щелкните на выделенной области.

Paint Shop Pro

В программе Paint Shop Pro также имеются инструменты Magic Wand и Fill, подоб­ные соответствующим инструментам программы Photoshop. Чтобы выбрать диа­пазон цветов, щелкните на инструменте Magic Wand, а затем на изображении. Для корректировки диапазона цветов, выделяемых инструментом при щелчке, ис­пользуйте окно Tool Options (Параметры инструмента). Если оно отсутствует на экране, нажмите кнопку Toggle Tool Options Window (Переключить окно парамет­ров инструмента) на панели инструментов или выберите команду Toolbars (Пане­ли инструментов) из меню View и установите флажок Tool Options Window (Окно параметров инструмента).

В окне Tool Options, как и в панели Options программы Photoshop, есть поле Tole­rance (Допуск) для корректировки диапазона выбранных цветов. Вам может по­надобиться выполнить несколько попыток с использованием разных значений допуска, чтобы выбрать нужные пикселы. Перед очередной попыткой отмените предыдущее выделение, нажав комбинацию клавиш Ctrl+D, откорректируйте зна­чение допуска и снова щелкните на изображении. Инструмент Magic Wand про­граммы Paint Shop Pro позволяет выбирать пикселы по значению оттенка цвета, яркости или интенсивности. Установите один из этих методов в поле списка Match Mode окна Tool Options.

Сглаживание неровностей контура



Сглаживание неровностей контура представляет собой метод устранения «зуб­цов» — пилообразных искажений формы, для обозначения которых часто приме­няется термин aliasing. Эти дефекты возникают на контурах наклонных линий в компьютерных изображениях. Метод сглаживания неровностей контура состо­ит в выборе цветов, значения которых расположены между значениями цвета объекта и цвета фона, и последующем применении этих цветов для заполнения промежутков между зубцами. Данный метод позволяет также отобразить тонкие детали, такие как засечки (небольшие выступы на краях символов), имеющиеся во многих шрифтах. Если величина засечки или отдельной детали меньше одного пиксела, при использовании метода сглаживания применяется осветленный от­тенок цвета объекта для создания иллюзии наличия части пиксела.

Недостатком метода сглаживания является то, что его использование приводит к возрастанию объема файла и тому, что края объектов становятся расплывчаты­ми. При создании прозрачного фона вокруг объектов возникают непрозрачные окантовки.

Отдельные программы выполняют сглаживание автоматически. Этот процесс чаще всего применяется для обработки текста или объектов с резко очерченными краями. Некоторые приложения не выполняют автоматическое сглаживание изо­бражений в формате GIF и в других форматах, основанных на использовании па­литры, а применяют эту операцию только для изображений с 24-битовым цветом. Если вы хотите исключить автоматическое сглаживание неровностей контура, то перед тем, как сжать изображение с 24-битовым цветом или наложить на него текст, преобразуете его в изображение с палитрой (GIF). С другой стороны, если вы желаете добиться максимального качества изображения, выполните это пре­образование в последнюю очередь, убедившись в том, что сглаживание неровно­стей контура включено.

Использование графических файлов Веб

Получив оптимизированные для Веб графические файлы, приступайте к плани­рованию их использования при оформлении сайта. Вы можете не просто вклю­чить изображения в свои веб-страницы, но и создать с их помощью ссылки и фон страницы.

Изображения в качестве ссылок

На многих сайтах для перехода от одной страницы к другой нужно щелкать не на тексте, а на графических изображениях. (Они могут содержать и текст, но с таким оформлением, которое не позволяет задать язык HTML.) Этот подход реализует­ся двумя методами.


  • Изображение применяется в качестве карты ссылок (image шар), и в ссылки превращаются отдельные его области.

  • Изображение делится на фрагменты, которые затем помещаются в разные ячейки таблицы; ссылки назначаются ячейкам таблицы.

При использовании второго метода вы можете задать для каждого фрагмента изображения альтернативный текст, который появляется, если изображение еще не загружено или пользователь отменил просмотр графических файлов в браузе­ре. В таком случае посетитель сможет ознакомиться с вашим сайтом без продол­жительного ожидания. Этот метод позволяет также заменять один фрагмент изо­бражения другим (возможно, в другом цвете) для указания того, что ссылка уже просмотрена. Однако для реализации данного метода необходимо наличие гра­фической программы, которая позволяет разделить изображение на несколько частей и сохранить каждую из них в виде отдельного изображения.

Изображения в качестве фона

В качестве фона веб-страницы может применяться изображение. При этом брау­зер загружает один файл изображения и автоматически размещает изображение в виде мозаики (повторяет по строкам и столбцам по ширине и высоте своего окна). Данная возможность задается в коде HTML-страницы, а не в файле изо­бражения.

Чтобы фон веб-страницы выглядел не как орнамент, а как поверхность како­го-либо материала, например гранита, места стыков изображений не должны быть видимыми. Для получения таких изображений необходимо использовать графические программы, предоставляющие специальные средства создания бес­шовной мозаики. Они позволяют согласовать вид левой и правой, а также верх­ней и нижней частей изображения таким образом, что при последующем его по­вторении границы изображения не будут видны.

Анимация в Веб

Анимация графических файлов для Веб осуществляется с использованием раз­личных методов, но чаще всего с этой целью применяются анимационные файлы GIF — отдельные файлы с несколькими изображениями, которые браузер может воспроизводить одно за другим. Анимационные изображения GIF можно разме­щать на веб-странице как обычные изображения GIF. Каждое изображение в ани­мационном файле представляет собой кадр анимации, подобный кадру фильма. Вы можете установить промежуток времени между появлением кадров и задать повторение анимации либо до бесконечности, либо ограниченное число раз.

Большинство браузеров отображают анимационные файлы GIF без дополни­тельного программного обеспечения. Однако некоторые графические програм­мы, предназначенные для обработки отдельных изображений, показывают толь­ко первый или последний кадр анимации.

Для хранения анимации применяются также векторные форматы, например фор­мат приложения Flash компании Macromedia. До недавнего времени просмотр файлов этих форматов в браузере был возможен лишь при наличии специальных подключаемых модулей. Однако формат Flash стал настолько распространенным, что в настоящее время признан в качестве стандарта, и все популярные браузеры снабжаются встроенными средствами для просмотра файлов Flash. Формат SVG, предлагаемый компанией Adobe, также поддерживает анимацию, но он не так ши­роко используется в Веб.

Для создания анимационных графических изображений мо1ут применяться и про­граммы на языке Java, написанные вручную или с помощью инструментальных средств, генерирующих код Java. Эти средства позволяют преобразовать стан­дартные презентации Microsoft или Corel в серию слайдов или анимацию для Веб. Просмотр такой анимации возможен с использованием браузера, поддержива­ющего Java. В языке Java не предусмотрена передача сразу нескольких изображе­ний, как в анимационных файлах GIF. Вместо этого передается код, который вы­водит последовательность изображений на экран браузера. Однако такой код может быть слишком объемным и потребовать большого времени загрузки.

Анимационные файлы создавать очень легко, если у вас установлены необходи­мые графические программы. К числу наиболее часто используемых инструмен­тальных средств создания анимации относятся следующие.



  • Adobe Image Ready. Профессиональное инструментальное средство, которое работает на многих платформах и с помощью которого создаются анимацион­ные файлы GIF, специальные эффекты, а также выполняется оптимизация палитры. Программа Image Ready тесно интегрирована с программами Adobe Photoshop и Adobe Illustrator, посредством которых можно создавать ориги­нальные графические произведения для дальнейшей анимации.

  • Animation Shop. Недорогая, многофункциональная и удобная в работе про­грамма (поставляется в одном пакете с Paint Shop Pro), которую можно полу­чить с сайта www.jasc.com (той же компании, которая выпускает Paint Shop Pro). Программа Animation Shop позволяет собрать несколько изображений GIF в одну анимацию, создать специальные анимационные эффекты на осно­ве отдельных изображений и оптимизировать палитру.

  • Macromedia Fireworks. Графическая программа, позволяющая создавать ани­мационные эффекты с помощью кадров, размещаемых в файлах изображений.

  • CorelDRAW. Комплект высококачественных графических программ, кото­рый доступен для ряда платформ. Редактор векторных изображений позволя­ет создавать изображения для анимации, а редактор растровых изображе­ний — собирать и сохранять таковые в виде анимационных файлов GIF с оп­тимизированными палитрами.

  • Ulead GIF Animator. Программа уже давно стала стандартом де-факто среди средств создания анимированных файлов GIF. В ней предусмотрен мастер ани­мации и оптимизации, а также реализованы некоторые переходные эффекты для создания анимации на основе одного-двух первоначальных изображений. Подробную информацию можно получить по адресу www.ulead.com.

  • GIF Construction Set. Условно-бесплатная программа, которую можно полу­чить от компании Alchemy Mindworks по адресу www.mindworkshop.com. В ее состав входят интеллектуальные мастера анимации GIF. Эта программа мо­жет выполнять оптимизацию палитры и создавать анимационные файлы с по­мощью переходных эффектов (типа исчезающих или постепенно обесцвечи­вающихся следов) между отдельными изображениями GIF.

Подробный список инструментальных средств для создания анимационных эф­фектов вы можете получить на сайтах www.tucows.com и www.download.com, произ­ведя поиск по ключевому слову «animation».

Создание анимационных файлов GIF

Для получения последовательности изображений, необходимых для создания анимации, лучше применять программы обработки векторной, а не растровой графики. Программа векторной графики позволяет очень свободно передвигать и изменять различные формы. (Хотя для этой цели может также подойти и про­грамма растровой графики с поддержкой слоев, такая как Photoshop.)

Однако в программах обработки векторной графики изображения сохраняются в файлах векторного формата, а не в файлах GIF (см. раздел «Форматы графиче­ских файлов Веб»). Некоторые профессиональные программы обработки вектор­ной графики, предназначенные для веб-разработки, могут создавать анимацион­ные файлы GIF из последовательности векторных изображений, но большинство этих программ такой способностью не обладает. При использовании многих про­грамм векторной графики в процессе работы приходится создавать ряд файлов с векторным изображением (по одному для каждого кадра), преобразовывать ка­ждый из них в файл GIF, а затем посредством инструментального средства ани­мации GIF собирать эти изображения в один анимационный файл GIF. Опишем данный процесс более подробно.



    1. В программе векторной графики нарисуйте изображение, которое вы желаете сделать анимационным. Сгруппируйте все формы, из которых состоит объект, подлежащий преобразованию в анимационный. Сохраните начальное изобра­жение (первый кадр) в графическом векторном файле.

    2. Создайте отдельный кадр анимации, слегка подвинув и повернув объект (объек­ты), который вы хотите «оживить», а затем изменив его размеры, цвет или форму. Однако не меняйте размеры или палитру изображения. Если програм­ма векторной графики позволяет создавать размытую траекторию, сделаете это для движущегося объекта с целью получения более совершенной иллюзии движения.

    3. Сохраните измененное изображение в виде отдельного графического вектор­ного файла.

    4. Повторяйте этапы 2 и 3, пока не получите все кадры анимации и не сохраните их в виде отдельных файлов.

    5. Если программа анимации GIF не может непосредственно считывать формат, в котором вы сохранили свои рисованные кадры, преобразуйте каждый файл с рисунком кадра в отдельный файл GIF с использованием графической про­граммы. (Например, программа Photoshop может считывать файлы вектор­ной графики Adobe Illustrator, EPS или PICT и сохранять файлы GIF.)

    6. С помощью программы анимации GIF соберите кадры изображений в один файл GIF. Конкретные особенности этого процесса зависят от используемой программы, но обычно сам процесс несложен. В некоторых программах, таких как Animation Shop, предусмотрен мастер, который сопровождает пользовате­ля на всех этапах данного процесса. В других приложениях можно просто пе­ретаскивать файлы кадров в окно Frame программы.

Для создания эффекта анимации может понадобиться установка ряда парамет­ров. Вы можете определить интервал времени между появлением кадров и задать число повторений анимации до ее остановки. Лучшие из этих программ предос­тавляют средства автоматизации, позволяющие оптимизировать палитру в целях достижения максимальной скорости или наивысшего качества изображения. Кро­ме того, отдельные программы предлагают для анимационных изображений та­кие же средства обеспечения прозрачности и чередования, которые используются в неподвижных изображениях GIF.

Некоторые программы анимации, в том числе Ulead GIF Animator и Animation Shop компании Jasc, могут преобразовывать в анимационные файлы GIF фильмы (например, файлы AVI) и анимационные файлы некоторых других форматов. Преимуществом анимационных файлов GIF является то, что они не требуют спе­циального программного обеспечения для отображения и загружаются быстрее, чем фильмы многих других форматов. Однако за это обычно приходится платить снижением качества изображения.

Ниже приведены советы, которые помогут вам в процессе создания анимацион­ных файлов GIF.


  • Некоторые программы векторной графики могут сохранять результаты непо­средственно в формате GIF, что позволяет исключить этап преобразования (этап 5, приведенный ранее в этом разделе). Однако, выполнив преобразова­ние файла в формат GIF в программе растровой графики или в графической утилите, иногда можно получить лучшие результаты.

  • В качестве простого инструментального средства создания анимации можно использовать текстовый редактор, который обладает инструментами рисова­ния и сохраняет текст и графические изображения в формате HTML. Для этой цели подойдет, например, программа Microsoft Word. Откройте пустой документ, нарисуйте или вставьте рисунок, а затем многократно скопируйте это изображение, передвигая или изменяя некоторый объект в каждой копии, чтобы «оживить» его. Сохранив файл в формате HTML, вы получите ряд изо­бражений GIF, которые можно собрать воедино с использованием инструмен­тального средства анимации GIF (пустой документ HTML можно удалить).

  • Все применяемые изображения должны иметь одинаковые размеры и одина­ковую палитру. Изменение палитры в процессе создания анимации может привести к появлению непредвиденных цветовых эффектов.

  • Если программа векторной графики не сохраняет файлы в формате, который ваша графическая утилита или программа растровой графики может читать и преобразовывать в формат GIF, попробуйте скопировать каждое изображение из окна программы векторной графики в окно графической утилиты или про­граммы растровой графики.

  • Можно задать непрерывный циклический повтор кадров анимации, но такие изображения отвлекают внимание, и наблюдать за ними бывает утомительно.

  • Во время загрузки изображения в браузер интервалы времени между кадрами не соблюдаются. Поэтому на начальном этапе анимация воспроизводится не­равномерно.

  • Следите за объемами файлов! Пользователи обычно не хотят дожидаться окончания загрузки больших графических файлов, а чем длиннее анимация, тем объемнее файлы GIF.

Анимация и язык JavaScript

Язык JavaScript имеет косвенное отношение к созданию графических файлов для Веб, поскольку его операторы включаются в состав документа HTML, а не в со­став изображения. Тем не менее JavaScript позволяет «оживлять» графические изображения в интерактивном режиме (в ответ на действия пользователя). Одна­ко для этого пользователь должен иметь браузер, поддерживающий JavaScript.

С помощью JavaScript вы можете обеспечить загрузку и выгрузку изображений в ответ на самые разные события. Широко распространенным способом использо­вания JavaScript является подстановка изображений (rollover), которая позволя­ет привлечь внимание к ссылке путем замены ее изображения другим на время, когда курсор располагается на ссылке. В качестве простого примера можно при­вести следующий код: HREF-"nextpage.htmlп

onmouseover = "document.mysymbol.src = 'image2.gif' " onmouseout = "document.niysymbol .src = 'imagel.gif' "

Когда пользователь поместит курсор на ссылке на страницу nextpage.html, изобра­жение imagel.gif заменится изображением image2.gif. В связи с тем что для загруз­ки файла image2.gif требуется определенное время, при первом использовании этот эффект проявляется медленно.

Использование специальных эффектов для создания анимации



Анимационные программы могут создавать анимацию GIF из отдельных изобра­жений. При этом выполняется последовательное преобразование одного изобра­жения в другое (создание переходных кадров между изображениями) либо мани­пуляции с одним изображением при помощи таких специальных эффектов, как постепенное исчезновение, обесцвечивание, растворение и взрывообразное рас­ширение. В некоторых программах предусмотрено использование этих эффектов лишь для создания анимации на основе текста. На рис. 23.4 показана анимация текста в программе Animation Shop в виде вращающегося кольца.


EjgJasc Animation Shop - Animation8.gif










B0®

I File Edit View Animation Effects Window Help

Ж »» Ы 1® Q ё H i i § ▼

Jt 4a a




lis m







Zoom: |1;1 J
















S J 0 A / П
















E Animation8.gif [1:1] - Frames



















■ь

8 ■■

ЕЫЯ Ejgjjfl







Ф <3




G ■■ В ■■ О в

F:58 D:13 F:59 D:12 F:60 D:13

■I


F:61 0:12

F:62 D:13

F:63 0:12 F:6

4 0:13 F:65 0:1;

JjI






|por Help, press F1







65 frames 100 x 100

14,03 total seconds (14,03 seconds)

Рис. 23.4. Создание анимационных эффектов для текста

Мультимедиа в Веб

В настоящее время большинство анимационных эффектов, создаваемых для веб-страниц, реализуется посредством файлов GIF (которые описаны ранее в этой главе), кода Dynamic HTML (DHTML), апплетов Java и инструментальных средств компании Macromedia. Используются также видеофайлы в форматах MPEG (Motion Picture Experts Group), AVI (Audio Video Interleave, аудио/видеоформат компании Microsoft), WMF (Windows Media Format, медиаформат Windows) и QuickTime (аудио/видеоформат компании Apple).

При подготовке видеофайлов для Веб вам потребуется источник видеосигнала (телевизионная камера, видеомагнитофон, карта видеозахвата или цифровой ви­деодиск) и программа редактирования видеоданных или анимационная програм­ма, обеспечивающая значительное сжатие данных. Одной из проблем, связанных с использованием видеоданных, является то, что для браузера или программы воспроизведения необходимо такое же средство сжатия, как то, что применялось в программе создания файла. Однако не каждый компьютер имеет доступ ко всем возможным средствам, так что часть пользователей лишена возможности про­сматривать файлы некоторых из перечисленных выше видеоформатов без уста­новки дополнительно подключаемых модулей.

В этой связи следует отметить, что особое место на рынке мультимедиа занимает компания Macromedia, которая повсеместно распространяет собственные про­граммы воспроизведения (подключаемые модули), чтобы широкий круг пользо­вателей имел возможность просматривать файлы в ее мультимедийных форма­тах. Основные форматы, которые она предоставляет, — видеоформат Macromedia и формат векторных графических файлов Flash. Подробную информацию об этом вы можете получить на сайте компании по адресу http://www.macromedia.com.



1   ...   27   28   29   30   31   32   33   34   35


База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка