ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Фильтры для растра. Импорт документа в Adobe Fireworks CS3. Режим Смешать

Фильтры для растра

Продолжим знакомство с фильтрами. Следует напомнит, что фильтры работают только с объектами типа Текст, Фрагмент ролика и Кнопка. Поэтому, чтобы иметь возможность работы с растровой графикой, необходимо преобразовать объект в символ Фрагмент ролика или Кнопка.

Для растровой графикинаиболее интересные эффекты дает применение фильтров Размытие и Настройка цвета. С работой фильтра Размытие мы уже знакомы. Рассмотрим использование фильтра Настройка цвета.

Настройка изображения. Фильтр Настроить цвет

  1. Создадим новый документ grass и импортируем в него изображение.
  2. Преобразуем изображение в символ типа Фрагмент ролика и перейдем на панель Фильтры.
  3. Выберем с помощью пиктограммы фильтр Настроить цвет и установим его параметры в соответствии с рисунком.

    Панель Фильтр для фильтра Настроить цвет

    Где,

    • Яркость — производит настройку яркости изображения. Значение варьируется от -100 до 100.
    • Контраст — устанавливает контрастность изображения.
    • Насыщение — устанавливает интенсивность цвета на изображении.
    • Тон — изменяет цветовую гамму изображения.

Вот так выглядит исходное изображение.

Исходное изображение

Изображение после применения фильтра.

После фильтра

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

Панель клипа grass

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

Фильтры в комбинациях

Мы можем применить несколько фильтром к одному объекту. Возьмем нашу фотографию и повторно применим фильтр Настроить цвет, но уже с другими настройками, а затем сделаем рамку с помощью фильтров Свечение и Фаска.

Панель фильтр в режиме нескольких фильтров

Всякий раз когда хотим добавить фильтр, нажимаем пиктограмму Добавить фильтр Добавить фильтр и настраиваем его в соответствии с параметрами настройки фильтра. А выделяя ненужный фильтр с помощью пиктограммы Удалить фильтр Удалить фильтр — удаляем его.

Изображение после применения фильтров.

Применение нескольких фильтов для одного символа

Создадим анимацию Движение, подобно предыдущему примеру.

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

Импорт документа Adobe Fireworks. Настройка импорта

Пакет создания веб-графики Adobe Fireworks — в чем-то коллега Flash. Он тоже создает веб-графику, но только традиционную, растровую.

Adobe Fireworks хранит свои рабочие документы в формате PNG. Как и Flash, Fireworks может объединять в одном документе и растровую, и векторную графику (гибридная графика). Это становится возможным из-за того, что формат PNG, помиомо растрового изображения, может хранить дополнительные данные (теги PNG), в которые записывается вся векторная графика. Экспорт готового изображения выполняется в форматах GIF, JPEG и PNG, при этом вся векторная графика растрируется.

Поскольку у Flash и Fireworks один разработчик, то естественно ими поддерживаются и общие форматы.

Рассмотрим практический пример.

  1. Откроем программу Adobe Fireworks и создадим файл, содержащий растровую графику и текстовой слой. Созраним его в формате Fireworks. У меня в качестве такого документа выступает файл forest1.png.
  2. Вернемся во Flash и импортируем документ в рабочую область документа forest1(лес). Для этого в меню Файл выберем пункт Импорт -> Импортировать в рабочую область. Выберем подготовленный Fireworks документ.
  3. Откроется диалоговое окно Импортировать документ Fireworks.

    Диалоговое окно Импортировать документ Fireworks

    • Флажок Импортировать как подписанное сглаженное растровое изображение — если флажок включен, Flash растрирует импортируемое изображение, переведя в растровый вид все его векторные фрагменты. Все остальные элементы управления окна станут недоступны.
      Если флажок не включать, изображение будет импортировано без изменений.
    • С помощью раскрывающегося списка Импорт задаются страницы, которые будут импортироваться во Flash. All Pages — все страницы или отдельные (с 1 по 8).
    • Раскрывающийся список В задает куда будут импортироваться файлы Fireworks: Сurrent frame as movie clip позволяет импортировать изображение как отдельный образец-клип с сохранением всех его слоев. New Layer — заставляет Flash поместить изображение прямо на рабочий лист во вновь созданный слой.
    • Переключатели группы Объекты задают, в каком виде будут импортированы векторные примитивы Fireworks, не поддерживаемые Flash. Если включен переключатель Импортировать как растровые изображения с сохранением оформления, такие примитивы будут превращены в растровые изображения и сохранят свой вид в точности. Если включен переключатель Оставить все пути доступными для редактирования Flash преобразует их в максимально похожие "родные" примитивы, возможно с некоторыми искажениями.
    • Переключатели группы Текст задают теже самые параметры, что и переключатели группы Объекты, но только для текста. Если включен переключатель Импортировать как растровые изображения с сохранением оформления, текст, содержащий преобразования, не поддерживаемые Flash, будет растрирован. Если же включен переключатель Оставить все пути доступными для редактирования, никакой растеризации выполняться не будет, в результате некоторые текстовые блоки исходного изображения могут исказиться.
    • Установим параметры согласно рисунка и нажмем ОК.

Работа со слоями во Flash

На панели Timeline появятся все отмеченные слои, сохранив названия, которые были заданы в Fireworks.

Импорт слоев

Теперь откроем панель Библиотека и посмотрим на символы.

Панель Библиотека после импорта из Flash

А теперь придадим импортной рамке эффект пробегающего луча.

  1. Для этого войдем в символ рамки. На рисунке это Фрагмент ролика Frame.
  2. Создадим слой с маской и реализуем анимацию Движение, как показано на рисунке.

    Панель символа Frame

    • На слое рамка расположена Рамка. На слое рамка1 расположена копия Рамки.
    • На замаскированном слое луч создан вытянутый прямоугольник, который будет представлять пробегающий луч. Ему задана градиентная заливка. На середине параметр Альфа равен 0.Разместим его на пером ключевом кадре под рамкой, а на последнем ключевом кадре над рамкой.

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

Flash также поддерживает импорт графических изображений созданных в Adobe Photoshop, Adobe Illustrator, Adobe Acrobat и другие. Но их мы рассматривать не будем.

Смешивание краски в режиме Смешать

Для того, чтобы воспользоваться режимом наложения Смешать, создадим новый документ, импортируем в него растровое изображение. Преобразуем его в символ Фрагмент ролика или Кнопка ( для других объектов не используется) и обратимся к панели Свойства. Она будет иметь следующий вид.

Панель Свойства для режима Смешать

Зададим цет фона документа отличным от белого, создадим еще один слой под слоем растрового рисунка и зададим режимы цветовых перекрытий Смешать.

  • Обычный —цвет остается без изменения (поз1).
  • Слой — аналогичен режиму Обычный (поз2).
  • Затемнить — сравниваются тона объекта и фона. После чего в изображении выбираются области, тон которых светлее смешиваемого цвета (поз3).
  • Умножение — затемняет фотографию, повышая контрастность в интенсивно окрашенных областях (поз4)
  • Осветлить — осветляет объект. Режим обратный Затемнить, только теперь выбираются области темнее, чем подложка и осветляются (поз5).
  • Жесткий свет — осветвляет рисунок и меняет его цвет в зависимости от тона и цвета фона. Так на белом фоне изображение полностью обесцвечивается, а на черном осветления и перемены цвета не происходят вообще (поз6).
  • Перекрытие — осветляет или затемняет объект в зависимости от цветов перекрывающих областей (поз7).
  • Жесткий свет — повышает контрастность рисунка (поз8).
  • Добавить — оветляет как объект, так и подложку (поз9).
  • Вычитание — обратный предыдущему режиму, затемняет объект и подложку (поз10).
  • Разница — затемняет изображение, одновременно инвертируя его цвета. Результат похож на негатив пленки (поз11).
  • Инверсия —цвета подложки объекта меняются на обратные — эффект негатива (поз12).
  • Альфа — делает прозрачным рисунок.
  • Стереть — объект становится невидимым.

    Режимы смешания

На этом мы заканчиваем рассмотрение основных эффектов с растровой графикой.