Обработка элементов web-дизайна
Вставка изображений, выполненных в Photoshop и Image Ready
(фон, банер, кнопка)
Предварительное
задание. Для проверки
действия созданного фона, вставки кнопки, вставки банера создайте в своей
домашней папке папку BG.
Вызвав редактор Notepad,
введите HTML-код простой web-страницы для просмотра создаваемых элементов:
<HTML>
<BODY BACKGROUND
=”bgl.gif”>
</BODY>
</HTML>
Сохраните этот файл с
именем bgl.htm.
1. Создание
фона для web-документов
Вариант 1. Создать фон с полями, используя готовые
кисти редактора Photoshop.
В соответствии с
заданием, вдоль левого края страницы создается поле, заполняемое белым или
иным сплошным цветом. Это придаст странице гораздо более интересный вид, а
кроме того, вы получаете место для размещения кнопок, обеспечивающих
перемещение по гиперссылкам, и дополнительной информации, обычно находящейся на
полях.
1.
Запустите Photoshop
и создайте новый документ со следующими параметрами:
2.
размер — 1024х1 пикселов,
разрешение — 72 пиксела на дюйм, цвет RGB, в поле Содержание выберите Белый.
3.
Выберите инструмент Лупа и
увеличьте показ изображение до 1200 %.
4.
Измените, цветовой режим с
RGB на Индексированные цвета, для чего выберите команду меню Изображение >
Режим > Индексированный.
5.
Выберите инструмент Ведро
и залейте бледно-зеленым цветом фон. Затем выберите Кисть размером 1 пиксел.
Щелкнув мышью на значке переднего цвета на панели инструментов, выберите в окне
Сборщик цветов темно-зеленый цвет и щелкните на кнопке ОК. Используя Кисть,
начинайте раскрашивание. Окрасьте примерно четверть полосы (3,5
см), начиная с левого края. Возможно, вам потребуется уменьшить масштаб
изображения, чтобы убедиться, что окрашена требуемая часть полосы.
6.
Сохраните созданный
рисунок под именем bgl.gif, для чего выберите в меню Файл команду
Сохранить для Web. В окне Save For Web в поле Settings выберите GIF Web Palette, остальные установки оставьте по умолчанию.
Перейдите на вкладку 4-Up и выберите вариант GIF.
Щелкните на кнопке ОК. В окне Save Optimized As выберите папку, введите имя файла bgl, в
поле Тип файла выберите вариант Images Only(*.gif) и щелкните на кнопке Сохранить.
7.
Запустите
web-обозреватель, например Microsoft Internet Explorer. Выберите в меню Файл команду Открыть. В окне
Открыть, щелкнув на кнопке Обзор, найдите папку и файл bgl.htm и
щелкните на кнопке Открыть. В окне обозревателя откроется web-документ bgl.htm.
Просмотрите фон и закройте окно web-обозревателя.
Вариант 2.
Создать фон, используя свою кисть.
1.
Запустите графический
редактор Photoshop и создайте новый документ, для чего выберите команду
Файл > Новый и в окне Новый задайте следующие параметры: размер —
70х70 пикселов, разрешение — 72 пиксела на дюйм, RGB цвет, в поле
Содержание выберите Прозрачный.
2.
Для создания своей кисти в
форме цветка с пятью лепестками выберите инструмент Овальное выделение.
Выделите овал в окне рисунка, затем выберите темно-синий цвет и инструментом
Заливка залейте выделение. Выберите команду Редактирование >
Произвольная Трансформация и поверните его. Запомните лепесток в буфере обмена.
Из буфера обмена вставьте его в окно рисунка и, выбрав команду Редактирование >
Произвольная Трансформация, создайте еще один лепесток, расположив его рядом.
Повторив эти операции три раза, создайте еще три лепестка, затем в центре
цветка выделите круг и залейте его.
3.
Выбрав в меню
Редактирование команду Определить кисть, в окне Название кисти введите имя
кисти, например Цветок5, и щелкните на кнопке ОК. Созданная вами кисть занесена
в набор кистей.
4.
Закройте окно рисунка, в
котором вы создавали кисть, и создайте новый документ размером 3х3 см,
разрешением 72 пиксела на дюйм, RGB-цвет, в поле Содержание выберите
Прозрачный.
5.
Выбрав на панели
инструментов кисть, раскройте на панели свойств инструмента в поле Кисть
список кистей и выберите созданную вами кисть-цветок из пяти лепестков. Выбирая
различные цвета и щелкая кистью в окне рисунка, нарисуйте узор фона.
6.
Сохраните созданный
рисунок в формате GIF под именем bg2.gif.
7.
Отредактируйте файл bgl.htm,
заменив в теге описания фона имя файла bgl.gif на bg2.gif. Строка описания тега фона примет вид <BODY BACKGROUND=bg2.gif>
8.
Сохраните web-документ под
именем bg2.htm, выбрав в меню Файл команду Сохранить как и
задав имя bg2.htm.
9.
Запустите
web-обозреватель. Выберите в меню Файл команду Открыть. В окне Открыть, щелкнув
на кнопке Обзор, найдите папку и файл bg2.htm и щелкните на кнопке Открыть. Просмотрите фон
web-документа и закройте окно web-обозревателя.
10.
Примечание! Форму кисти
можно не добавлять, а выбрать из существующих в рамках PhotoShop
7
2. Создание кнопок для
web-документов
Вариант 1.
Создать кнопку прямоугольной формы.
1.
Создайте новое
изображение, выбрав Файл > Создать. В окне Новый задайте следующие
параметры изображения: размер – 50х50 пикселов, разрешение – 72 пиксела на
дюйм, RGB-цвет, в поле Содержание выберите Прозрачный. Создан документ,
состоящий из одного прозрачного слоя. Укрупните изображение, выбрав масштаб,
например 200 %.
2.
Выберите цвет, допустим
сиреневый. Выберите на панели инструментов Линейный Градиент и, щелкнув на
кнопке градиента на панели свойств инструмента, откройте окно градиентного
редактора. Задав параметры градиента, заполните документ.
3.
Для выделения в документе
области меньшего размера выберите команду Выделение > Все или
нажмите комбинацию клавиш Ctrl+A. Выберите Выделение > Модифицировать
> Граница, в раскрывшемся окне Выбор границы в поле Ширина задайте
небольшое число, например 7.
4.
Выбрав инструмент
Градиент, заполните выделенную область в обратном направлении.
5.
Создайте новый слой с текстом
с помощью инструмента Текст. Выберите шрифт Webdings, полужирного начертания и кеглем 30 пунктов.
Выберите цвет надписи, например белый. Введите какой-нибудь символ, похожий на
стрелку. Выровняйте надпись на кнопке с помощью инструмента Перемещение.
6.
Сохраните документ в
формате GIF под именем knopal.gif в свою папку, выбрав Файл >
Сохранить для Web.
7.
Для проверки работы кнопки
в документе bgl.htm вставьте гиперссылку на любой свой документ с
обозначением перехода по кнопке (<A rel="nofollow ugc" target="_blank" href="bgl.html"><IMG
SRC=" knopal.jpg" WIDTH=267 HEIGHT=188 BORDER=0 ALT="knopal
"></A> и сохраните его под именем bgk.htm
ПРИМЕЧАНИЕ Для
создания кнопки такого же типа, но овальной формы, в окне нового документа
создайте выделение окружностью. Все остальные операции по созданию кнопки—
окрашивание изображения, ввод текста — выполняются аналогично предыдущему. Для
создания кнопки с использованием текстуры из другого графического файла откройте
в Photoshop файл с текстурой, выделите в нем изображение, нажав
комбинацию клавиш Ctrl+A, и запомните текстуру в буфере обмена.
Перейдя в окно с изображением новой кнопки, выделите область будущей кнопки,
например овал, и выберите команду Редактирование > Вставить В (Shift+Ctrl+V).
Текстура будет вставлена в выделенную область в новом окне. Все остальные
операции по созданию кнопки выполняются аналогично предыдущему.
Вариант 2. Создать кнопку трехмерной овальной формы.
1.
Для изготовления кнопки
потребуется изображение черно-белого трехмерного шара. Изготовьте его
самостоятельно.
2.
Уменьшите размеры шара до
25х25 пикселов, выбрав команду Изображение > Размер изображения и
задав соответствующие ширину и высоту изображения.
3.
Создайте две копии
изображения, выбрав Изображение > Дубликат. Чтобы обрезать правую
половину у первого изображения, выберите команду Изображение > Размер
холста. В диалоговом окне Размер картины уменьшите вдвое значение в поле Ширина
(с 0,66 до 0,33 см). Оставьте значение в поле Высота неизменным, в поле
Закрепить укажите направление изменения размеров картины, щелкнув левую кнопку
в среднем ряду. Щелкните па кнопке ОК и подтвердите изменения, щелкнув на
кнопке Продолжить в окне предупреждения об обрезке изображения.
4.
Аналогично, изменив
направление изменения размеров холста, обрежьте у второго шара левую сторону. У
третьего шара обрежьте края, чтобы его ширина стала равна 1 пикселу. Для
этого в поле Ширина задайте значение 1 пиксел и в поле Закрепить щелкните
центральную кнопку для обрезки изображения слева - и справа.
5.
Активизируйте окно с
третьим изображением. Снимите флажок Сохранять пропорции. Увеличьте ширину
изображения до 125 пикселов, для чего выберите команду Изображение >
Размер изображения, в диалоговом окне Размер изображения в поле Ширина задайте
значение 125 пикселов и щелкните на кнопке ОК.
6.
Перейдите в окно с первым
изображением. Выделите его (Ctrl+A) и скопируйте в буфер обмена (Ctrl+C).
Перейдите в окно с третьим изображением, вставьте в него первое изображение из
буфера обмена (Ctrl+V) и установите его вплотную с изображением
средней части будущей кнопки (простой горизонтально вытянутый цилиндр)
7.
Со вторым изображением
поступите так же, только поместите его справа.
8.
Совместите все слои в
один, выбрав команду Слой > Объединить с видимым.
9.
Измените цвет и
насыщенность изображения кнопки, для чего выберите команду Изображение >
Установка > Тон/Насыщенность. В окне Тон/Насыщенность установите
флажки Тонирование и Предпросмотр. Задайте насыщенность около 50 и, изменяя
движением ползунка значение параметра Тон, добейтесь нужного цвета.
10.
Для создания текста на
кнопке выберите инструмент Текст. Выберите шрифт, например Academy,
в поле Размер задайте 11 точек. Щелкнув в поле Цвет, задайте цвет символов,
например белый. Введите текст надписи, допустим Вперед, и щелкните на кнопке
ОК.
11.
Выровняйте надпись на кнопке
с помощью инструмента Перемещение.
12.
Сохраните документ в
формате GIF под именем knopa2.gif в свою папку, выбрав Файл >
Сохранить для Web.
13.
Для проверки работы кнопки
в документе bgk.htm вставьте гиперссылку на любой свой документ с
обозначением перехода по кнопке (<A HREF="bgl.html"><IMG SRC="
knopa2.jpg" WIDTH=267 HEIGHT=188 BORDER=0 ALT="knopal "></A>
Вариант 3. Создать два варианта одной кнопки
прямоугольной формы.
1.
Создайте новое
изображение, выбрав Файл > Новый. В окне Новый задайте следующие параметры
документа: размер — 100х25 пикселов, разрешение – 72 пиксела на дюйм,
RGB-цвет, в поле Содержание выберите Прозрачный – и щелкните на кнопке ОК.
Создан документ, состоящий из одного прозрачного слоя.
2.
Выберите основной цвет для
кнопки, например темно-синий. Залейте весь слой основным цветом, выбрав
Редактирование > Заполнить.
3.
Выберите в меню Слой из
списка Эффекты Слоя пункт Рельефность. В диалоговом окне Стиль слоя установите
флажок Фаска и рельеф.
4.
Расположите окно Стиль
слоя так, чтобы было видно редактируемое изображение, и, установив флажок
Предпросмотр, измените параметры в области окна Фаска и рельеф, например, в
списке Стиль выберите Внутренний скос, Глубина — 100 %, Размер — 8 пикселов,
Мягкость — 4 пиксела. В области Затененность установите Угол — 120, остальные
параметры оставьте по умолчанию.
5.
Щелкните на кнопке ОК для
применения заданных параметров.
6.
Создайте новый слой с
текстом с помощью инструмента Текст. Выберите русифицированный шрифт, например
TextBook, и задайте размер символов 6 точек. Выберите
подходящий цвет для надписи, скажем, ярко-желтый.
7.
Введите текст Домой и
выровняйте надпись на кнопке с помощью инструмента Перемещение.
8.
Создайте для этой кнопки
пару — такую же, но с эффектом нажатой кнопки. Для этого создайте дубликат документа,
выбрав команду Изображение > Дубликат.
9.
Установив текущим окно Без
имени-1 copy с дубликатом изображения кнопки, выберите команду
Слой > Эффекты Слоя > Рельефность. В диалоговом окне Эффекты
задайте Угол -50, остальные параметры оставьте по умолчанию. Щелкните на кнопке
ОК для применения заданных параметров.
10.
Добавьте тексту тень. Для
этого выберите команду Слой ^ Эффекты Слоя > Тень. Обратите внимание,
что раскроется то же самое окно Стиль слоя, только с установленным флажком
Падающие тени. Установите флажок Предпросмотр, измените параметры в области
Падающие тени, например, Расстояние — 5 пикселов, Разброс — 4 %, Размер — 1
пиксел. Щелкните на кнопке ОК для применения заданных параметров. Выполните то
же самое для текста в другом окне.
11.
Переведите оба документа в
индексированный цвет, выбрав Изображение ^ Режим > Индексированный.
Щелкните на кнопке ОК в подтверждение запроса Слить слои?, затем в окне Цвет с
индексом в поле Палитра выберите Web, оставив значения остальных параметров по умолчанию,
и щелкните на кнопке ОК.
12.
Сохраните оба документа в
формате GIF под именами knopa3a.gif и knopa3B.gif в свою папку, выбрав Файл >
Сохранить для Web.
13.
Для проверки работы кнопки
в документе bgk.htm вставьте гиперссылку на любой свой документ с
обозначением перехода по кнопке (<A HREF="bgl.html"><IMG SRC="
knopa3a.jpg" WIDTH=267 HEIGHT=188 BORDER=0 ALT="knopal "></A>
Вариант 4. Создать два варианта одной кнопки
овальной формы.
1.
Создайте новый документ,
задав параметры: размер — 200х100 пикселов, разрешение — 72 пиксела па дюйм,
RGB-цвет, Прозрачный.
2.
Выбрав инструмент Овальное
выделение, выделите овал в окне рисунка Без имени-1.
3.
Выберите Линейный
Градиент. Щелкнув на кнопке Изменить, в палитре Опции задайте его параметры и
закрасьте полученный овал.
4.
Выберите команду Слой >
Эффекты Слоя > Рельефность, в окне Стиль слоя в области Фаска и
рельеф задайте параметры, например, в списке Стиль выберите Внутренний скос.
Глубина — 100 %, Размер — 7 пикселов, Мягкость (размытие) — 4 пиксела, в области
Затененность задайте Угол — 120, остальные параметры оставьте по умолчанию.
Щелкните на кнопке ОК для применения заданных параметров.
5.
Выбрав команду Фильтры >
Texture > Texturizer,
установите параметры в окне Textu-rizer, например, Texture Canvas
(Холст), Scale (Масштаб) 100 %, Relief (Рельеф) 5, Light Direction
(Направление света), Top (Вверх). Щелкнув на кнопке ОК, просмотрите
действие заданного фильтра.
6.
Выбрав инструмент Текст,
задайте параметры символов текста: размер — 8 точек, цвет — белый, начертание —
Bold
Italic (жирный наклонный), укажите место ввода текста па
кнопке и введите текст, например Об авторе. Уточните положение текста на
кнопке.
7.
Изготовьте дубликат
кнопки, выбрав команду Изображение > Дубликат. В окне дубликата изображения
выберите Слой 1 с изображением кнопки и выберите команду Редактирование >
Трансформация > Отразить Горизонтально.
8.
В окнах обоих рисунков
выберите команду Слой > Объединить с видимым.
9.
Сохранить оба документа в
формате GIF.
3.Создание
баннера
Вариант 1. Создать стандартный рекламный заголовок.
1.
Запустите Photoshop
и создайте новый документ размером 800х60 пикселов, разрешение — 72 пиксела на
дюйм, RGB-цвет, в поле Содержание выберите вариант Прозрачный.
2.
Откройте файл изображения
(любой). Измените размеры этого изображения так, чтобы оно размещалось в окне
баннера, для чего выберите Изображение ^ Размер Изображения, в диалоговом окне
Размер Изображения установите флажок Сохранять пропорции, в поле Высота задайте
размер 60 - 70 пикселов и щелкните на кнопке ОК.
3.
Выбрав команду Выделение >
Все, выделите изображение, а затем скопируйте его в буфер обмена, выбрав
Редактирование > Копировать.
4.
Перейдите в созданное вами
окно и вставьте изображение из буфера обмена, выбрав Редактирование >
Вставить. Переместите вставленное изображение в левый край баннера.
5.
Закройте окно изображения,
копию которого вы вставили в баннер, без сохранения изменений.
6.
Используя инструмент
Пипетка, возьмите образец цвета на рисунке и данным цветом выполните заливку
баннера. Используя инструмент Размытие, устраните границу изображения и фона
баннера.
7.
Для создания текста на
баннере выберите инструмент Текст. Выберите шрифт, задайте параметры символов:
начертание, размер, цвет. Введите текст надписи, например, «Интернет - это
завтра человечества», и щелкните на кнопке ОК. Выровняйте надпись на кнопке с
помощью инструмента Перемещение.
8.
Сохраните полученное
изображение в формате GIF, выбрав команду Файл > Сохранить
для Web. В окне Save For Web, выбрав вкладку 4-Up,
отображающую четыре варианта
9.
оптимизации, выберите
нужный вариант. В поле Settings выберите вариант оптимизации GIF Web Palette,
и щелкните на кнопке ОК. В окне Save Optimized As выберите папку, введите имя файла, например banner,
и щелкните на кнопке Сохранить.
10.
Сохраните созданный файл в
формате PSD, для чего, выбрав команду Файл > Сохранить
как, в окне Сохранить как откройте нужную папку, введите имя файла и щелкните
на кнопке Сохранить.
11.
Для проверки расположения
баннера в документе bgl.htm вставьте картинку со своим баннером (<IMG SRC="
banner.gif" WIDTH=267 HEIGHT=188 BORDER=0 ALT=" banner">
Вариант 2. Создать многослойное изображение
баннера.
1.
Запустите Photoshop
и откройте файл banner.psd, созданный при выполнении предыдущего
задания.
2.
Открыв палитру Слои,
убедитесь в том, что данный баннер представляет собой изображение из двух
слоев.
3.
Вставьте в новый слой
изображение из другого файла, для чего откройте файл любого изображения.
Измените размеры этого изображения так, чтобы оно размещалось в окне баннера,
для чего выберите Изображение > Размер Изображения, в диалоговом окне
Размер Изображения установите флажок Сохранять пропорции, в поле Высота
задайте размер 60 - 70 пикселов и щелкните на кнопке ОК.
4.
Выбрав инструмент
Прямоугольное выделение, выделите изображение, затем скопируйте его в буфер
обмена, выбрав Редактирование > Копировать.
5.
Перейдите в окно banner.psd и
вставьте изображение из буфера обмена командой Редактирование > Вставить.
Обратите внимание, что при этом в изображении появился новый слой .
6.
Слой 2. Переместите вставленное
изображение в левый край баннера.
7.
Выделите в слое Слой 2
участок баннера, свободный от вставленного изображения. Выбрав инструмент
Градиент и отредактировав цвета, закрасьте этот участок. Уберите выделение и,
используя инструмент Размытие, подправьте переход между градиентно закрашенным
рисунком и вставленным фрагментом изображения.
8.
Закройте окно изображения,
копию которого вы вставили в баннер, без сохранения изменений.
9.
Используя инструмент
Текст, создайте слой с текстом, например, «А ты записался на интернет - курсы?»
Чтобы цвет текста был достаточно контрастным, выберите, допустим, темно-синий
цвет. Размер символов можно выбрать 9 точек.
10.
Используя инструмент
Текст, создайте слой с текстом этого же цвета, например (0732)-529047. В
палитре Слои получилось изображение, составленное из пяти слоев: два слоя
изображения и три слоя текста.
11.
10.Сохраните созданное
многослойное изображение в файле banner2.psd, затем склейте слои и сохраните полученное
изображение в формате GIF, выбрав команду Файл > Сохранить
для Web
12. 11.Для проверки расположения баннера
в документе bg3.htm вставьте картинку со своим баннером
(<IMG SRC=" banner2.gif" WIDTH=267 HEIGHT=188 BORDER=0 ALT=" banneri
">
Для создания
анимированного баннера из многослойного изображения, созданного в редакторе Adobe Photoshop,
можно использовать редактор Adobe ImageReady.
Вариант 3. Создать анимированный баннер из
многослойного изображения, созданного в редакторе Photoshop.
1.
Открыть панель анимации меню
– Окно – анимация.
2.
Откройте файл banner2.psd с
многослойным изображением, созданный при выполнении предыдущего задания,
выбрав команду File > Open. В окне Открытие файла откройте папку,
содержащую данный файл, укажите файл и щелкните на кнопке Открыть.
3.
Для операций с кадрами
удобно использовать кнопки в нижней строке палитры Animation
4.
Открыв палитру Layers
(Слои), просмотрите слои многослойного изображения banner2.psd.
Отключите видимость всех слоев изображения, щелкнув на значке “Глаз” в каждом
слое.
5.
В палитре Animation
откройте вкладку Animation.
6.
В палитре Animation
при открытом изображении уже есть единственный кадр анимации, он уже активен.
Для отображения в нем щелкните на значке “Глаз” в первом и втором слоях: с
фоном и с текстом «Интернет - это завтра человечества.»
7.
Укажите для каждого кадра
нужный набор включенных слоев и время показа каждого кадра.
а) Щелкнув на кнопке Dublicates current frame (Дубликат текущего кадра) в палитре Animation,
вставьте второй кадр. Для отображения в нем включите видимость в третьем и
четвертом слоях: с фоном и с текстом «А ты записался на интернет-курсы?»,
щелкнув на значке “Глаз”, и отмените видимость в первом и втором слоях,
щелкнув на значке “Глаз”.
б) Аналогично, щелкнув на кнопке Dublicates current frame в палитре Animation, вставьте третий кадр. Для отображения в нем
щелкните на значке “Глаз” в третьем и пятом слоях: с фоном и текстом (0732)
-52-90-47 и отмените видимость, щелкнув на значке “Глаз”, в четвертом слое с
текстом.
в) Выбрав первый кадр, щелкните мышью на стрелочке под ним и в раскрывшемся
списке выберите время показа, например 0,5с. Аналогично определите время показа
каждого кадра.
8.
Расставьте кадры в нужном
порядке появления в анимации, для чего зацепите мышью кадр и перетащите в
нужную позицию.
9.
Щелкнув на кнопке Select looping options
(Определение числа повторов) в нижней строке палитры Animation,
в появившемся диалоговом окне выберите вариант: Once (Один раз), Forever
(Всегда) или Other (Другое). Если вы выбрали Other
(Другое), откроется диалоговое окно, в поле Play которого задайте число повторений показа
анимации.
10.
Для проверки действия
созданного анимированного изображения щелкните на кнопке Plays animation
(Проиграть анимацию) в нижней строке палитры.
11.
Если вы при определении
числа повторов выбрали вариант Forever (Всегда), для остановки анимации нажмите
кнопку Stops animation (Остановить анимацию) в нижней строке палитры
Animation.
12.
Перейдите на вкладку 4-Up,
отображающую четыре варианта оптимизации, и выберите вариант. Сохраните баннер
в избранном GIF-формате, выбрав в меню Файл команду Сохранить оптимизированное
как. В окне Save Optimized As выберите папку, введите имя файла, например banner3,
gif, и щелкните на кнопке Сохранить.
13. Для проверки расположения баннера в
документе bg3.htm вставьте картинку со своим баннером
(<IMG SRC=" banner3.gif" WIDTH=267 HEIGHT=188 BORDER=0 ALT=" banner3
">
14.
Как вы уже убедились,
анимированный баннер, созданный всего из трех кадров, имеет резкую смену кадров
при анимации. Чтобы обеспечить смену изображений, создайте между имеющимися
тремя кадрами, которые можно назвать опорными, промежуточные. Для этого
используется команда Tween (Промежуточный) в меню палитры Animation.
15.
Перейдите в окно ImageReady
с изображением баннера. Указав первый кадр, выберите в меню палитры Animation
команду Tween (Промежуточный). В диалоговом окне Tween задайте
параметры плавного изменения свойств. Команда Tween используется для смены
изображения от текущего кадра к следующему. Поэтому после применения команды к
первому кадру перейдите к седьмому кадру (это бывший второй опорный кадр) и
аналогично определите параметры смены изображения до следующего опорного кадра.
16.
Для создания плавного
перехода от последнего кадра к первому перейдите к последнему кадру, используя
полосу прокрутки в нижней части палитры Animation. Выберите в меню палитры Animation
команду Tween, задайте смену кадров от текущего (последнего) к первому кадру.
17.
Проверьте, как будет
выглядеть анимированный баннер в web-обозревателе, для чего выберите команду File > Preview in > Internet Explorer.
Обратите внимание на более плавную смену изображений. По окончании просмотра
закройте окно Internet Explorer.
18.
Выберите вариант
оптимизации файла баннера, для чего, щелкнув на вкладке 4-Up,
откройте окно с четырьмя вариантами оптимизации изображения и выберите из них подходящий
по цветовой палитре, объему и времени загрузки.
19.
Сохраните созданный баннер
как GIF-анимацию, для чего выберите команду File > Save Optimized As,
выберите папку, задайте имя файла, например banner3.
20.
Если вы хотите вернуть
баннер в исходное состояние, отменив внесенные изменения, выберите команду
Файл > Вернуть или отмените операции в палитре History
(История).
21. Для проверки действия созданного в
документе bg3.htm вставьте картинку со своим баннером
(<IMG SRC=" banner3.gif" WIDTH=267 HEIGHT=188 BORDER=0 ALT=" banner3
">
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.