Удобство такой анимации - получение красивой рамочки и анимирование выбранных участков коллажа.
Смысл использовать анимированные бесшовные фоны размером 200...250рх и коллаж в формате png - очень значительное уменьшение веса "конструкции" коллаж- рамочка в Мбт.
(Можно вставить в рамочку и футаж, предварительно добавив красивую анимацию на локальных участках в местах полупрозрачности коллажа, выигрыш такого решения не вес "картинки", а красивая анимированная рамочка.)
|
Посмотрим, как это можно сделать на примере.
Делаем довольно простой коллаж (рис.1).
Рис.1
Здесь (рис.1) помещена фигура девушки на фоне улицы Праги, сделана ее тень. На мостовую "набросаны" цветы, вырезанные с фотографии поля тюльпанов.
Основная задача сделать полупрозрачные участки. Первый вид участков делаю путем выделения с панели инструментов "Select" - "Color Range..." (рис.2).
[700x357]
Рисунок 2
Выключаем глазки верхних слоев (верхняя стрелка на рисунке 3). Становимся на слой с городом (нижняя стрелка, рис.3). Пипеткой выбираем коричневый цвет на заборе цветочного павильона, "пипеткой с плюсом" добавляем цвет крыши павильона, на линеечке (останавливаемся на значении 19) выбираем интенсивность выделения (белый цвет на дополнительной панельке), чтобы выделились, кроме крыши и забора павильона, отдельные фрагменты стен домов.
[700x521]
Рисунок 3
Нажимаем "ОК". Получаем выделение (рис.4).
[320x505]
Рисунок 4.
Нажимаем на клавиатуре Ctrl+J. Выделение оформляется в новом слое (стрелка на рисунке 5). Выделение снялось, возвращаем его, нажав кнопку Ctrl и одновременно щелкнув по иконке полученного нового слоя с выделенными фрагментами. Выделение вновь появится. Переходим на слой с городом (нижний) и нажимаем кнопку Delete. В слое с городом появляются пустые места.
[700x600]
Рисунок 5
Выделение не снимаем. Делаем новый пустой слой (стрелка 1, рис.6) над слоем с городом и заливаем выделение (стрелка 2, рис.6) пиксельным узором (стрелка 3, рис.6). Закрываем все глазки, кроме слоя с пиксельным узором. (Пиксельные узоры можно скачать по ссылке в конце поста, это текстуры, которые нужно вставить в фотошоп, если кто этого не делал, на вопрос отвечу отдельно.)
Слой с коричневыми выделениями удаляем, он больше не нужен.
[700x529]
Рисунок 6
Также, как в начале урока, убираем белый цвет из пиксельного узора с помощью "Select" и "Color Range (рис.7). Пиксельный слой получается "дырявый".
[700x525]
Рисунок 7
Наконец, очень просто делаем прозрачные участки на лежащих на мостовой цветах. Все слои объединяем в один общий слой. Выбираем ластик размером от 35 до 60, устанавливаем прозрачность его около 40% и слегка протираем цветы на мостовой. Сохраняем коллаж в формате png (рис.8).
[700x525]
Рисунок 8
Делаем рамочку в черновике
<center>
<table cellpadding="0" cellspacing="0" style="background-image: url('http:'); background-color: #4C5232; border-radius: 20px; box-shadow: 0px 0px 10px 0px #000;">
<tbody>
<tr>
<td style="padding: 2px;">
<table cellpadding="0" cellspacing="0" style="background-image: url('ссылка на анимированный бесшовный фон'); border-radius: 20px; box-shadow: inset 0px 0px 20px 10px #484D2F;">
<tbody>
<tr>
<td style="padding: 35px;">
<center>
<table cellpadding="0" cellspacing="0" style="background-image: url('http:'); background-color: # 7290b7; border-radius: 0px; box-shadow: 0px 0px 10px #000;" width="740">
<tbody>
<tr>
<td>
<img height="555" src="Ссылка на коллаж" width="740" /></td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
Показала, где вставляется ссылка на бесшовный анимированный фон и ссылка на коллаж. Желтым цветом отмечено, что размер коллажа и ширины рамки совпадают (740рх).
Вот еще один вариант коллажа в анимированного с помощью бесшовных фонов (приложены его коды):
|
Материалы урока можно скачать по ссылке https://yadi.sk/d/le2wMT9A3JoK9z или ввести ссылку https://yadi.sk/d/le2wMT9A3JoK9z в строку браузера
[640x150]
[355x500]