 |
Создание анимированный gifВоспользуемся для этой цели программой Image Ready, которая поставляется вместе с программой Фотошоп и переключиться в которую можно прямо в сеансе работы с Фотошоп. И при таком переключении программа Фотошоп не будет закрыта. Кнопка переключения в программу Adobe Image Ready находится в самом низу палитры инструментов. Переключаемся в программу Image Ready. Мы в программе Adobe Image Ready. А вот и кое-что отличное от программы Adobe Photoshop – палитра Анимация. Сейчас в ней один кадр, и этот кадр – совмещенное изображение со всех слоев. Это не то, что нам надо. Выводим на экран меню палитры Анимация и выбираем команду Make Frames From Layers (Сделать кадры из слоев). Теперь на палитре Анимация представлены все слои исходного изображения в виде отдельных кадров. Выбираем число повторов этой последовательности кадров при открытий веб-страницы, на которую будет вставлено это изображение с анимацией. Выбираем Forever (Бесконечный повтор). Посмотрим, как это будет выглядеть. Нажимаем кнопку Play на палитре Анимация. Ну, вообще-то на веб-странице будет не совсем так. Картинка сейчас не в реальном размере, а уменьшенная в 2 раза. Нажимаем кнопку Stop на палитре Анимация. Браузеры всегда показывают картинку в реальном размере. Разворачиваем окно изображения и увеличиваем его до реального размера двойным щелчком по инструменту Лупа на палитре параметров. Снова запускаем предварительный просмотр анимации. Останавливаем предварительный просмотр анимации. Теперь сохраняем изображение как анимированный gif. Меню File, команда Save Optimized. Сохраняем под именем Bird 2. Интересно, какой получился размер у файла с gif-анимацией? Ничего себе: 206 килобайт. Это безумие. Подобная простенькая анимация не стоит такого гигантского размера файла. Можно ли как-то уменьшить этот размер? Наверняка тут дело в слишком большой цветовой таблице, которую можно урезать, ведь в изображении совсем немного цветов. Выведем на экран палитру с цветовой таблицей. Меню Window, команда Color Table. Делаем щелчок левой кнопкой мыши по пиктограмме Генерация цветовой таблицы. И вот перед нами цветовая таблица, состоящая из 256 цветов. Конечно, такое гигантское количество цветов не используется в этом простеньком изображении. Сократим количество цветов в цветовой таблице, оставив только самые необходимые, те, что используются в изображении птички. Упорядочим цвета в цветовой таблице по их использованию в данном изображении, то есть по тому, сколько пикселей каждого конкретного цвета встречается в этом изображении. Нажимаем на пиктограмму вызова скрытого меню палитры Color Table и выбираем команду Sort by Popularity (Упорядочить по количеству пикселей данного цвета в изображении). Посмотрите: в этом изображении больше всего прозрачных пикселей, и после упорядочивания по популярности прозрачный цвет стоит на первом месте в цветовой таблице. Не буду сейчас разбираться с конкретными цветами, содержащимися в изображении. Ясно, что у меня должен остаться в цветовой таблице прозрачный цвет, пшеничный цвет, черный цвет, красный цвет и белый цвет. Точные их оттенки мне сейчас не важны. Это всё-таки не фотография, а схематичное изображение. Поэтому оставлю в цветовой таблице только вот этот диапазон цветов: от прозрачного до первого встретившегося красного, а все остальные удалю. Щелкаю по следующему за красным цветом в цветовой таблице левой кнопкой мыши, нажимаю на клавиатуре клавишу Shift, и, удерживая ее, щелкаю по последнему цвету в цветовой таблице. С помощью клавиши Shift выделяется непрерывный диапазон цветов, который я сейчас удалю. Нестрашно, если среди удаляемых цветов попадется цвет, который встречается в изображении. Он будет просто заменен на похожий из оставшихся, не удаленных, цветов. Щелчок по пиктограмме мусорной корзины внизу таблицы цветов. Тем самым удаляются выделенные цвета в цветовой таблице. Таблица урезана. Конечно, ее можно еще подсократить, но посмотрим, какой сейчас будет размер файла у изображения с анимированной птицей. Меню File, команда Save Optimized. Сохраняем изображение под именем Bird 3. Размер 122 килобайта, а было 206 килобайт. Но 122 килобайта – это тоже слишком много для размещения такой картинки на веб-странице. Придется еще сокращать цветовую таблицу. Посмотрим, какой объем файла будет у данного изображения вот в такой, урезанной до предела, цветовой таблице. Меню File, команда Save Optimized As. Сохраняем это изображение под именем Bird 4. И его размер уже вполне приемлемый: всего 45 килобайт. Чувствуете разницу? 206 килобайт, 122 килобайта и, наконец, 45 килобайт. Вот какого уменьшения размера файла можно добиться редуцированием цветовой таблицы изображения в формате GIF. И вот наша птичка полетела. Вторая, меньшая, птичка, была сделана из первой просто уменьшением ее размера в 2 раза и затем тоже вставлена на эту веб-страницу. Подобный файл с анимированным gif-изображением можно вставить на веб-страницу, открыть в программе Image Ready для дальнейшей обработки, а вот при попытке открыть подобный анимированный gif в программе Adobe Photoshop появляется предупреждающее сообщение, что выведен будет только один кадр. И при последующем сохранении этого файла, простом сохранении, то есть под тем же именем и в том же месте, произойдет потеря информации, а именно, утеряны будут все остальные кадры этого изображения. Но файл откроется как простой gif, состоящий из одного кадра. Аналогично можно вставить эту картинку в документ, созданный в программе Microsoft Word, и картинка будет представлять собой один кадр из анимированного gif'а, а именно, первый кадр. А вот области прозрачности в gif -файле, неважно, простом или анимированном, текстовым редактором Microsoft Word воспринимаются. Текст просвечивает сквозь области прозрачности изображения, что производит впечатление обтекания картинки текстом. |
На нашем сайте Вы можете скачать статьи, уроки, книги, учебники по web дизайну, пройти интерактивный курс обучения по Quarkxpress 6 и 7, adobe photoshop CS2 и CS3, а так же познакомиться с HTML, CSS, WEB 2.0, WWW, XHTML, CSS 2.0 и другими технологиями создания Интернет сайтов. После прочтения статей и уроков Вы без труда сможете создать html cod и content, guestbook, forum, addguest, message, page и прочие интерактивные формы на своем internet сайте. Данный сайт не содержит различные серийники, ключи, активацию, русификаторы, кряк, crack, keygen, серийные ключи, кейгены и других программ, нарушающих лицензионные соглашения.