Рамочка с анимацией (урок для фотошопа)

Четверг, 04 Декабря 2014 г. 19:59 + в цитатник

Цитата сообщения Semenova_Irina

Прочитать целиком В свой цитатник или сообщество!

Рамочка с анимацией (урок для фотошопа)

Я продолжаю небольшую серию уроков по изготовлению рамочек
В этом уроке мы будем делать анимированную рамочку и сохранение всех частей в GIF формате

В данном уроке нам понадобится фильтр AlienSkin_Xenofex2-Constellation
Скачать фильтр можетеЗдесь
Как установить фильтр в фотошоп
Здесь
И так начнем

Все картинки в уроке кликабельны
1) Создаем новый документ 700х550 пикс

2) Заливаем слой Основным цветом переднего плана-#3b750d
Я взяла зеленый с основного изображения
Основно й цвет фона мы берем с фона ,кликая пипеткой по изображению

3) Открываем изображение

И перетаскиваем в наше окно рамочки
Устанавливаем в верхней части

4) Открываем изображение

И перетаскиваем в наше окно рамочки
Устанавливаем в нижней части

5) Слой- объединим с предыдущим

Усиление резкости –Умная резкость по умолчанию
Дубликат слоя (Ctrl+J)
Применим стиль слоя –тиснение

6) Слой- объединим с предыдущим
7) Откроем вот такой фон обводка

Редактирование- Определить узор

8) Переходим в окно нашей рамочки
Новый слой
Выделение –Выделить все
Редактирование-Выполнить обводку 3 пикс,внутри

Выделение отменить
9) Кликните зажав клавишу Ctrl по окошечку в окне слоев, у вас появилось выделение вокруг рамочки

10) Редактирование-Выполнить заливку
Выбираем –Регулярный и находим наш фон –Обводку сохраненный в п.7

Выделение отменить
11) Переходим на слой ниже

12) Продублируем слой ( Ctrl+J) 5 раз

Встаем на слой –Слой 2 копия
Применим фильтр AlienSkin_Xenofex2.0 – Constellation

13) Встаем на слой выше
Опять применим Применим фильтр AlienSkin_Xenofex2.0 – Constellation

Параметры те же, только нажимаем на Random Seed

14) На оставшиеся три слоя повторите пункт 13
Получаем это
И зажав клавишу Ctrl выделим эти слои

15) Перейдем в меню окна слоя и выберите
Создать новую группу из слоев

Дайте название ,если хотите группе «Блестки»
16) Режим наложения делаем для группы – Перекрытие

17) Встаем на верхний слой
Я решила украсить нашу рамочку разделителями сверху и снизу

18) Также создаем новый слой и подписываем нашу рамочку
19) Теперь открываем окно Анимации
Выставляем время анимации о,2 сек,постоянно

На первом кадре у нас открыты все слои и только слой 2 копия в Группе «блестки»
20) Добавляем кадр ( жмем на листочек в окне анимации)
Закрываем глазик на Слой2 Копия ,и открываем глазик на Слой 2 копия 2

21) Опять добавляем кадр –кадр3
Закрываем глазик на Слой2Копия2 ,и открываем глазик на Слой 2 копия 3
Опять добавляем кадр –кадр4
Закрываем глазик на Слой2Копия3 ,и открываем глазик на Слой 2 копия4
Опять добавляем кадр –кадр5
Закрываем глазик на Слой2Копия4,и открываем глазик на Слой 2 копия 5
Включаете воспроизведение ,любуетесь результатом ,

Если все устраивает ,будем сохранять нашу рамочку
22) И так прежде чем разредить и сохранить нашу рамочку ,я хочу обратить внимание вас на маленький нюанс:
Пред тем как далее разделить рамочку , у вас в «Сохранить для веб устройств» должно уже стоять формат GIF , т.к если у вас как и у меня не стоит формат GIF, и вы раскроите рамочку , то при сохранение ,если даже вы измените формат ,то у вас сохранится в формате GIF, только верхняя часть , а нижняя будет в том формате ,который стоял у вас перед этим.
А у нас анимация на верхней и нижней части ,поэтому мы не разделяя сохраним её в GIF формате

23) Сохранили и опять вернулись к нашей рамочки
Теперь Активируем инструмент раскройка
Кликая правой кнопкой мыши по рабочему окну выбираем « Раскраиваем вниз с равными интервалами»

24) Инструмент раскройка активен- смещаем 2 линию вниз ,а 3 линию вверх

Смещаем так ,что где в дальнейшем у нас будет текст , никаких изображения (в данном случае -чтобы не было- если конечно по задумке это не рамочка и узоры на ней)
25) Ну вот у нас рамочка готова полностью к сохранению на части
Идем опять Файл- Сохранить для Веб устройств.
Там у нас стоит уже GIF формат , теперь мы только сохраняем рамочку в подготовленную папочку в компьютере .
Ну вот собственно и все
У нас получилась вот такая рамочка

Здесь будет ваш текст

Код рамочки

<center><table border="0" background="https://img-fotki.yandex.ru/get/15558/131624064.5a7/0_10f0ff_a94a18a0_orig" cellpadding="0" cellspacing="0" height="264" width="700"> <tr><td><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://blogs.mail.ru/mail/box1958"><img src="//i033.radikal.ru/1005/e5/ac5d9ea9c583.gif" width="3" height="3" border="0" /></a> </td></tr></table><table border="0" background="https://img-fotki.yandex.ru/get/15522/131624064.5a7/0_10f100_a5b9f0e3_orig" cellpadding="0" cellspacing="0" height="48" width="700"><tr><td><table align="center" border="0" cellspacing="0" cellpadding="0"><tr> <td width="650"><center> <em><strong><span style="color: #f9fcb3"><span style="font-size: 25px;"><span style="font-family: Monotype Corsiva"> Здесь будет ваш текст<br /> </span></span></span> </strong></em> </center></td></tr></table> </td></tr></table><table border="0" background="https://img-fotki.yandex.ru/get/15514/131624064.5a7/0_10f101_5ac2f8a0_orig" cellpadding="0" cellspacing="0" height="238" width="700"><tr><td><center> <a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.liveinternet.ru/users/semenova_irina/rubric/2712037/"><img src="//img-fotki.yandex.ru/get/5/52732579.3f/0_8db63_2d5a90e2_S.gif" border="0" /><br />
</a></center> </td></tr></table></center>

А как вставить рамочку в формулу я рассказывала Здесь

Серия сообщений "уроки":
Часть 1 - КАК ДЕЛАТЬ ПРОСТЫЕ РАМОЧКИ
Часть 2 - СПИСОК ВСЕХ МОИХ УРОКОВ
...
Часть 9 - СОЗДАНИЕ РАМОЧКИ В "РАМОЧНИКЕ". ОРИГИНАЛ ЗАПИСИ.
Часть 10 - ИНСТРУКЦИЯ ПОЛЬЗОВАНИЯ РАМОЧКАМИ
Часть 11 - Рамочка с анимацией (урок для фотошопа)