• Авторизация


Урок по созданию открытки с анимацией.Часть1. 20-01-2012 00:04 к комментариям - к полной версии - понравилось!

Это цитата сообщения ЭМИЛЛИ Оригинальное сообщение

Урок по созданию открытки с анимацией.Часть1.



Открытка "Год Дракона"
Часть 1.


[450x460]



В работе использованы преобразованные мной в PNG векторные файлы.
Shutterstock. Источник.
Скачать набор для урока - ссылка
Кисти для Photoshop от Ron Deviney.
Rons Flourishes1 и Rons Bokeh - ссылка



1.Так как анимация на открытке комбинированная и имеет много кадров
размер файла не нужно делать большим,
иначе, итоговое изображение будет очень тяжёлым.

Итак, создаём новый документ 400х410 пикселей, 72 пикселя на дюйм,
фон прозрачный.

[441x244]

2. Открываем все файлы из набора для урока,
переносим на наш документ, свободной трансформацией уменьшаем
и располагаем по документу.
Ветку с украшениями следует уменьшить больше, чем простую ветку,
потому что шары будут сильно свисать...но это по желанию,кому как нравится.
А простую ветку продублировать, отразить по вертикали и переместить под ветку с украшениями,
чтобы создать больше хвои наверху.
Обратите внимание на порядок слоёв в панели слоёв.

[528x414]

3. Сделаем фон со световым эффектом.
Я люблю фоны Боке, они очень эффектно смотрятся на заднем плане.

1)Опускаемся на нижний слой 1,
который образован при создании документа.
Пипеткой выбираем тёмный оттенок с шарика и полученным цветом
заливаем слой.

[522x407]

2) Активируем кисточку Rons Bokeh,
уменьшаем её до 80 пикселей.

[264x278]

3) На новом слое белым цветом пройдёмся кисточкой по документу.
Режим наложения слоя меняем на "перекрытие".
Видимость слоя с драконом лучше отключить,
чтобы он не мешал.

[536x414]

4) Меню - фильтр - размытие по Гауссу.
Радиус размытия 16-17 пикселей.

[550x401]

Этим действием мы создали дальний световой эффект.

5) А сейчас создадим основной.
Уменьшаем кисточку до 60 пикселей и на новом слое
пройдёмся светлым жёлтым цветом.

[546x454]

6) Дублируем слой и уменьшаем заливку до 70%.

[350x452]

Этим действием мы немного увеличили яркость кисти.

[398x400]

Соединим все слои, касающиеся фона в один
с параметрами слоя "фон".

[347x348]

Подготовка к анимации.

Итак, изображение мы создали.
Будем подготавливаться к комбинированной анимации,в которую войдёт:
блики шаров, сверкание глаза дракона, анимация веток и движение дракона.

4.Блики для шаров.
Наш дракоша очень ловкий и своим сверканием из глаза
умудряется освещать шары попеременно.
Это попеременное освещение (блики) мы сейчас и сделаем.

1) Создаём новый слой над слоем "шары",
режим наложения "перекрытие".

[349x379]

2) Дублируем слой 3 раза.
Получается 4 новых слоя с режимом наложения "перекрытие",
что нам и нужно для 4 шариков.

[340x466]

3) Вооружаемся мягкой круглой кисточкой белого цвета с радиусом 65 пикселей
из основного набора кистей программы.

[486x424]

Переходим на первый пустой слой и делаем клик в области первого шара.

[396x310]

Как видите, шарик стал светлее.
Это наш первый блик.

4) Переходим на второй пустой слой, берём кисть меньше - 60 пикселей
и делаем блик на втором шарике.

[374x330]

5) Для 3 и 4 шарика делаем блики той же кисточкой, что и для второго.

Не забывайте переходить на новые слои:
для 3 шарика - третий пустой слой

[400x284]

для 4 шарика - четвёртый пустой слой.

[400x284]

Блики для шаров готовы, но они нам пока не нужны.
Отключаем видимость этих слоёв.
Я убрала слои в группу с параметрами "блики шаров",
мне так удобнее работать в панели слоёв, но это не принципиально.
(как убрать слои в группу читайте ЗДЕСЬ)

[196x348]

5.Сверкание глаза дракона.
А теперь создадим источник бликов на шарах - сверкание из глаза дракоши.

1) В панели слоёв включаем видимость слоя с драконом
и над ним создаём новый слой.

[197x299]

2) Активируем крестообразную кисточку 48 пикс. из набора "разные кисти"

[474x366]

3)На созданном слое делаем 1 клик мышкой в области глаза дракона, цвет белый.

[279x239]

4) Дублируем этот слой и сделаем насыщеннее видимость кисточки,
это будет пик сверкания.
Сделаем интересным способом - фильтром "усиление резкости"
Меню - фильтр - усиление резкости - умная резкость
с максимальным значением эффекта.

[332x432]

Отключаем видимость слоёв со сверканием.
Они нам понадобятся позже.

[186x354]

6.Сверкание на ветках.
Хочу обратить ваше внимание на то, что метод создания блёсток для веток
нужно выбирать очень осторожно.
Конечно, блёстки с помощью фильтра или глиттера очень эффектны,
но они создадут лишний и существенный вес конечному изображению..
Я выбрала кисточку из набора Rons Flourishes1

[264x286]

1)Создаём новый слой над слоем "ветки низ",
режим наложения меняем на "мягкий свет".

[225x415]

2) Дублируем созданный слой 2 раза.
Получаем три слоя для блёсток.

[208x375]

3.) Загружаем выделение слоя "ветки низ"
(при активном слое "ветки низ" меню - выделение - загрузить выделенную область)

[474x452]

4) Переходим на первый пустой слой и выбранной кисточкой , цвет белый,
делаем несколько кликов по выделенной области.

[550x322]

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

[550x417]

6) На третьем пустом слое также поработаем кисточкой -
это будет третий кадр анимации.

[482x424]

Теперь можно снять выделение
(меню - выделение - отменить выделение)
и убрать видимость слоёв с блёстками.

[172x365]

7) Блёстки для верхних веток делаем также, как и для нижних,
но верхний декор из веток состоит из двух слоёв.

[204x189]

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

[180x256]

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

7. Подложка.

1) Убедитесь, что дракон полностью находится в границах документа
Для этого закройте видимость слоя "ветки низ" и сместите, если нужно, дракона.

[540x408]

2)Нужно избавиться от лишних пикселей веток,
которые остались за границами документа.
Сделаем это инструментом "рамка", обведя по границам документа.

[520x514]

Чтобы применить инструмент и продолжить работу, нажмите клавишу "Enter".

Кстати, если вы не будете делать подложку эти два подпункта нужно сделать,
чтобы лишние пиксели от веток не создавали вес изображению.

3) Увеличиваем размер холста на 50 пикселей по ширине и высоте.
(меню - изображение - размер холста)

[333x307]

[462x473]

4) Загружаем выделение слоя "фон".

[466x478]

5) В панели слоёв переходим на самый верх и создаём новый слой
с параметрами "обводка"

[240x409]

6) Меню - редактирование - выполнить обводку.
Цвет возьмите пипеткой со звёзд - светло-жёлтый.
Расположение - по центру.
Ширина - 1 пиксель.

[264x196]

Выделение пока не снимаем.

7) Меню - выделение - инверсия.

8) Создаём ещё один слой и располагаем его под слоем "обводка"
с параметрами "подложка".

[183x236]

9) Пипеткой определяем цвет - цвет фона
и заливаем слой с подложкой.
После заливки отменяем выделение.

[480x484]

10) Украсим подложку снежинками.
Загружаем выделение слоя "подложка"
и на том же слое пройдёмся какой нить кисточкой белого цвета.
Я выбрала кисть снежинка, которую сделала в советах новичкам
по созданию и настройкам кисти.
Создание кисти - ссылка.
Настройки кисти - ссылка

[466x476]

Теперь можно отменить выделение.
Всё, подложка готова.

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

[458x464]

А правильно так

[398x474]

Создавать анимацию будем в следующей части урока.
С теплом, Ольга Бор.

УРОК ЗДЕСЬ

Х.ЬЩКУЪ

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Урок по созданию открытки с анимацией.Часть1. | Ирина_Жу - Дневник бегущей по волнам | Лента друзей Ирина_Жу / Полная версия Добавить в друзья Страницы: раньше»