Чтение онлайн

на главную

Жанры

Шрифт:

Один из наиболее популярных способов использования анимации на сайте – размещение анимированных графических файлов в формате GIF. Такой файл представляет собой последовательность кадров, сменяющих друг друга через определенные промежутки времени. Анимированные GIF-файлы можно легко создавать в Adobe Photoshop.

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

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

Рис. 8.1. Исходные
изображения для создания анимации

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

Откройте оба кадра в Photoshop. На одном из них выделите все изображение (Ctrl+A) и скопируйте его в буфер обмена (Ctrl+C). Затем перейдите ко второму изображению (например, щелкнув на нем кнопкой мыши) и вставьте изображение из буфера обмена (Ctrl+V). Новое изображение скроет под собой старое. Не волнуйтесь, это не навсегда.

Включите отображение палитры ANIMATION (Анимация) с помощью команды Window → Animation (Окно → Анимация). На ней будут располагаться кадры анимированного GIF-файла. Собственно, первый кадр уже есть – это то, что вы видите на экране. Щелкните на значке

в правом верхнем углу палитры. В результате откроется ее меню. Выберите в нем пункт New Frame (Новый кадр). А можете не открывать меню, а просто щелкнуть на изображении чистой страницы в нижней части палитры. Появится второй кадр. Пока он ничем не отличается от первого (рис. 8.2).

Рис. 8.2. Два одинаковых кадра на палитре ANIMATION (Анимация)

Ничего, сейчас мы его изменим. Щелкните на втором кадре на палитре ANIMATION (Анимация) и приготовьтесь немного повозиться с палитрой LAYERS (Слои) (рис. 8.3).

Рис. 8.3. Палитра LAYERS (Слои) с двумя слоями

Как видите, на ней есть два слоя – по одному на кадр. Напротив каждого стоит значок глаза, который показывает, что соответствующий слой виден. Щелкните на глазе верхнего слоя. Он исчезнет, зато станет виден нижний. Новый кадр готов! Теперь он отличается от исходного (рис. 8.4).

Рис. 8.4. Палитра ANIMATION (Анимация) с разными кадрами

Попробуйте посмотреть, что получилось. Для этого нажмите кнопку Plays animation (Воспроизвести анимацию)

в нижней части палитры Animation (Анимация). Кадры начнут очень быстро мелькать. Остановите их нажатием кнопки

Необходимо задать задержку по времени для каждого кадра. Найдите на кадре надпись 0 sec. и щелкните на треугольничке справа от нее. Появится список, в котором можно выбрать задержку. Установите ее для обоих кадров, так будет удобнее любоваться «живой» картинкой.

Простейшая анимация готова! Можете немного усложнить ее, выбрав в меню палитры ANIMATION (Анимация) пункт Tween (Размножить). Появится окно, в котором нужно указать количество промежуточных кадров. Эти

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

Если результат вас устроил, сохраните его в формате GIF. Для этого воспользуйтесь командой Save for Web & Devices (Сохранить для веб и устройств) (см. главу 4).

...

Внимание!

Анимированные GIF-файлы оживляют веб-страницу, но они иногда имеют довольно большие размеры. Это замедляет загрузку страницы и может снизить ее популярность.

Созданный файл можно просмотреть в любом браузере, однако рекомендуем оценить результат заранее. Для этого, вызвав окно Save for Web & Devices (Сохранить для веб и устройств), нажмите кнопку Preview (Просмотр) в нижней части этого окна. Анимированное изображение будет открыто в браузере, которым вы пользуетесь. Если результат вас устроит, возвращайтесь в окно Save for Web & Devices (Сохранить для веб и устройств) и нажимайте кнопку Save (Сохранить).

Разбиение изображения на пластины

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

Такое разбиение называется разделением на пластины (Slice).

Чтобы создать пластины, можно воспользоваться одним из трех способов:

• создать пластины из слоев (о слоях будет рассказано в следующей главе);

• разделить изображение с помощью специального инструмента;

• разделить изображение, используя направляющие.

Рассмотрим два последних способа.

Инструмент Slice (Пластина)

Этот инструмент находится в верхней части палитры инструментов (рис. 8.5).

Рис. 8.5. Инструмент Slice (Пластина) на палитре инструментов

Применять его очень просто: достаточно обвести инструментом область изображения, которую вы хотите превратить в отдельную пластину.

...

Примечание

Здесь и далее выражение «обвести инструментом» означает «установить инструмент в определенную точку, нажать кнопку мыши и, не отпуская ее, переместить инструмент в другую точку, после чего отпустить кнопку мыши».

Изображение сразу будет разделено на несколько прямоугольников – пластин. В левом верхнем углу каждой пластины вы увидите ее номер и специальный значок

Разделение на пластины с помощью направляющих

Направляющие – это вспомогательные линии, которые видны на изображении при редактировании его в Photoshop. Они применяются для того, чтобы проверить вертикальность или горизонтальность элементов изображения, выравнивание фрагментов и т. д. Вне Photoshop направляющие не отображаются.

Чтобы создать направляющую, нужно прежде всего включить показ разметных линеек слева и сверху окна документа. Для этого служит команда View → Rulers (Вид → Линейки) или сочетание клавиш Ctrl+R. Когда появятся линейки, подведите указатель мыши к любой из них, нажмите кнопку мыши и, не отпуская ее, вытащите направляющую в окно документа.

Созданные направляющие можно перетаскивать мышью с места на место, а также влючать или выключать их отображение командой View → Show → Guides (Вид → Показать → Направляющие) или сочетанием клавиш Ctrl+;.

Поделиться:
Популярные книги

Поступь Империи

Ланцов Михаил Алексеевич
7. Сын Петра
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Поступь Империи

Мастер Разума

Кронос Александр
1. Мастер Разума
Фантастика:
героическая фантастика
попаданцы
аниме
6.20
рейтинг книги
Мастер Разума

Сиротка 4

Первухин Андрей Евгеньевич
4. Сиротка
Фантастика:
фэнтези
попаданцы
6.00
рейтинг книги
Сиротка 4

Провинциал. Книга 7

Лопарев Игорь Викторович
7. Провинциал
Фантастика:
боевая фантастика
космическая фантастика
5.00
рейтинг книги
Провинциал. Книга 7

Ненаглядная жена его светлости

Зика Натаэль
Любовные романы:
любовно-фантастические романы
6.23
рейтинг книги
Ненаглядная жена его светлости

Книга пяти колец

Зайцев Константин
1. Книга пяти колец
Фантастика:
фэнтези
6.00
рейтинг книги
Книга пяти колец

Ваше Сиятельство

Моури Эрли
1. Ваше Сиятельство
Фантастика:
фэнтези
попаданцы
5.00
рейтинг книги
Ваше Сиятельство

Болотник 3

Панченко Андрей Алексеевич
3. Болотник
Фантастика:
попаданцы
альтернативная история
6.25
рейтинг книги
Болотник 3

Темный Охотник 3

Розальев Андрей
3. КО: Темный охотник
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Темный Охотник 3

Семья. Измена. Развод

Высоцкая Мария Николаевна
2. Измены
Любовные романы:
современные любовные романы
5.00
рейтинг книги
Семья. Измена. Развод

Восход. Солнцев. Книга X

Скабер Артемий
10. Голос Бога
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Восход. Солнцев. Книга X

По осколкам твоего сердца

Джейн Анна
2. Хулиган и новенькая
Любовные романы:
современные любовные романы
5.56
рейтинг книги
По осколкам твоего сердца

Барон диктует правила

Ренгач Евгений
4. Закон сильного
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Барон диктует правила

Неудержимый. Книга XII

Боярский Андрей
12. Неудержимый
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Неудержимый. Книга XII