Мы с вами уже умеем писать текст на анимированной картинке, мы можем простую картинку добавлять на анимированную...а сегодня мы будем учиться КАК АНИМАЦИЮ на прозрачном фоне добавлять на АНИМИРОВАННУЮ картинку..Сложность этого урока ТОЛЬКО в том..что нужно не торопясь, а предельно внимательно делать все его пункты, по которым я вас провожу с наглядными скринами,чтобы не запутаться в порядке действий...только и всего...Но, поверьте, один раз его сделав вы поймете принцип очередности и будете сами выполнять такие задания с легкостью...Я вас еще ни разу не обманывала))))Так ведь?..Ну...чтобы много не говорить..-поехали...

Открываем фотошоп...потом открываем файл, на который мы должны будем поместить анимацию.



.Этот файл-картинка тоже должен быть с анимацией...совершенно любой анимацией...



.

и открываем рядом анимацию на прозрачном фоне...ну вот так например





вы видите что я поместила файлы в середине экрана...это сделать просто ..







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



и нам нужно добавить недостающие кадры до количества 8...(в других случаях при другом количестве кадров мы просто выбираем те. которые дублируем...сами выбираем) а сейчас



и получится на панели АНИМАЦИЯ у нас вот это







Берем инструмент











А вот теперь ВНИМАНИЕ!! делаем все по пунктам на картинке..





и получаем вот такое



Вот. собственно и весь урок...

Шаг 1.

Начнем работу с создания Нового документа (Ctrl+N) в Фотошоп размером 240х400 рх и белым фоном. Далее, нам необходимо создать несколько новых слоев (Ctrl+Shift+N) для последующего размещения на них элементов елки. Назовите слои по порядку: нижний «Ствол», второй «Дерево», третий «Голубые огни». Позже мы создадим еще несколько слоев для мигающей гирлянды. Обязательно проверьте порядок расположения слоев, это важно! Они должны выглядеть таким образом:

Шаг 2.

Теперь, встаньте на слой «Дерево» и активируйте инструмент «Произвольная фигура» (Custom Shape Tool ) . Из набора фигур (Custom Shape Picker) в верхнем меню выберите треугольник. Если в вашем окне его нет, нажмите на стрелочку справа и выберите из списка программы набор «Все».

Также убедитесь, что в верхней панели настроек выбран режим контуров (Paths) :

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

Шаг 3.

Перейдите в панель «Контуры» (Paths) , она находится рядом с панелью «Слои» (Layers) . Нажмите правой кнопкой мыши по строке с треугольным контуром и выберите из меню опцию – Образовать выделенную область (Make Selection) . Укажите радиус растушевки (Feather) в 0 рх, и нажмите Ок. Теперь вокруг вашего треугольника образовалась бегущая дорожка, что говорит о его выделении.

Шаг 4.

Активируйте режим «Быстрой маски» (Quick Mask) , кнопка находится в самом низу панели инструментов. Появившийся розовый фон говорит вам об активации быстрой маски. Перейдите в Фильтр-Штрихи-Аэрограф (Filter/Brush Strokes/Sprayed Strokes) и установите радиус разбрызгивания и длину штриха на 10 рх, направление вправо по диагонали.

Нажмите Ок для применения фильтра. Нажмите значок «Быстрой маски» (Quick Mask) снова, чтобы отменить ее.

Установите цвет переднего плана (Foreground) на зеленый (#009933) . Перейдите в Редактирование-Выполнить заливку (Shift+F5) и заполните выделение цветом переднего плана. Снимите выделение (Ctrl+D) . Вот что у вас должно получиться:

Шаг 5.

На слое «Ствол» выберите инструмент «Прямоугольное выделение» (Rectangular Marquee Tool).

Выделите вертикальный прямоугольник под кроной елки, и заполните (Shift+F5) его коричневым цветом # 663300. Снимите выделение (Ctrl+D) . Если необходимо, выровняйте ствол по центру дерева.

Шаг 6.

Теперь создадим гирлянду из нескольких шариков. На слое «Голубой шар» активируем инструмент «Овальное выделение» (Elliptical Marquee Tool) и, удерживая Shift, рисуем ровный маленький круг. Заполните (Shift+F5) выделение синим цветом. Снимите выделение (Crl+D) . Все последующие шарики будут такого же размера, но другого цвета.

Далее, добавим глубины и объема нашей елочной игрушке. Двойным щелчком по миниатюре этого слоя открываем окно «Стилей слоя» (Layer Style) и выбираем параметр «Тиснение» (Bevel and emboss) . Выполняем настройки со скриншота: стиль внутренний скос, метод плавный, глубина (Depth) 62%, размер (Size) 7рх, угол (Angle) 120, высота 30, режим подсветки Экран (Screen) , режим тени Умножение (Multiplay) .

Шаг 7.

Дублируем слой «Голубые огни» (Ctrl+J) два раза и называем копии «Желтые огни» и «Красные огни». Выделяем слой «Желтые огни» и перемещаем шарик на другое место елки. Двойным щелчком по миниатюре этого слоя открываем окно «Стили слоя» (Layer Style) и выбираем опцию «Наложение цвета» (Color Overlay) . Нажимаем на цветовой индикатор и изменяем исходный цвет копии на желтый. То же самое проделайте со слоем «Красные огни», но в «Наложение цвета» используйте оттенок красного.

Шаг 8.

Вернитесь на слой «Голубые огни» и дублируйте (Ctrl+J) его 3 раза. То же самое проделайте и с огнями других цветов: желтым и красным. Распределите огни по елке. У вас должно получиться по 4 огонька каждого цвета.

Теперь, выделите в панели слоев огни одного цвета (Ctrl+клик по миниатюрам слоев), нажмите правой кнопкой мыши по выделенным слоям и выберите – Объединить слои (Ctrl+E) . Так же сделайте со слоями других однородных цветов (выделите их, потом объедините в один). У вас получится три слоя, в каждом из которых по 4 шарика.

Шаг 9.

Чтобы при создании анимации наши огни сверкали, добавим им вспышки при помощи «Стилей слоя». Дублируем слой с голубыми огнями (Ctrl+J) и называем его «Голубое свечение». Двойным щелчком по миниатюре копии открываем «Стили слоя» (Layer Style) . Выбираем параметр «Внешнее свечение» (Outer Glow) . В окне опции выбираем цвет для свечения голубой, режим смешивания Экран (Screen) , шум (Noise) 8, метод мягкий, размах 24%, размер 18 рх.

Повторите этот процесс для желтого и красного слоев, дублируя их (Ctrl+J) и называя «Желтое свечение» и «Красное свечение». Используйте в «Стилях слоя» оттенки свечения, соответствующие цветам шариков.

Шаг 10.

У нас все готово для создания анимации. Переходим в меню Окно-Анимация (Window/Animation) или в ImageReady (ранние версии Фотошоп). В панели слоев выключите видимость (глазик) слоев «Голубое свечение» и «Желтое свечение». Вы должны увидеть первый кадр в окне анимации с яркими красными огнями и временем в 0 секунд.

Шаг 11.

Далее, в правом верхнем углу окна нажмите стрелочку и выберите строку – Новый кадр (New Frame) .

В панели слоев выключите видимость слоя «Красное свечение» и включите слой «Желтое свечение». Добавьте Новый кадр (New Frame) . Второй кадр будет у нас с включенными желтыми огнями гирлянды.

И, последнее, выключите желтое свечение и включите видимость слоя с синими вспышками. Добавьте новый кадр (New Frame) . Итого у нас получилось три кадра со вспышками разных цветов.

Шаг 12.

Теперь нажмите кнопку Воспроизведения анимации (треугольник) и вы увидите, что огни беспорядочно мелькают. Чтобы гирлянда меняла цвет через равные промежутки времени, установите для каждого кадра свое время (у меня 0,5 сек). Для этого, выделите все кадры или нажмите в окне каждого кадра стрелочку внизу и установите время. Внизу окна, рядом с кнопками управления анимацией, выберите режим : постоянный.

Шаг 13.

Теперь нам необходимо сохранить анимацию. В версиях выше Photoshop SC2 переходим в меню Файл-Сохранить для Веб (File-Save for web) и выполняем настройки со скриншота ниже. Если у вас ранняя версия фотошоп, перейдите в меню Окно-Оптимизация (Window/Optimize) , выполните настройки со скриншота, а затем сохраните оптимизированный файл ((File-Save optimized (Ctrl+Alt+S)) в любом месте вашего компьютера. Помните, что любая анимация сохраняется в разрешении GIFи уже готова к выходу в интернет. В программе Фотошоп вы не сможете просмотреть сделанную анимацию.

Финальный результат:

Шаг 1.

Создаем Новый документ (Ctrl+N) большого размера (1000х1200 рх) и прозрачным (Transparent) фоном. Инструментом Заливка ((Paint Bucket Tool) Shift+F5) заполняем фоновый слой голубым цветом # 89defd.

Шаг 2.

Создаем Новый слой (Layer-New Layer или Ctrl+Shift+N) и инструментом Эллипс (Ellipse tool) в режиме Заливки пикселей (в верхнем меню значок квадрата) рисуем большой круг белого цвета (ffffff). Вообще-то ваш круг может быть не идеальной формы, но если хотите сделать ровный круг, удерживайте Shift при рисовании.

Затем, создайте Новый слой (Ctrl+Shift+N) выше предыдущего и нарисуйте еще один круг меньше поверх большого. Если круг расположен неровно, инструментом «Перемещение» (Move Tool) выровняйте его положение относительно большого круга.

Шаг 3.

Устанавливаем цвет переднего плана (Foreground) на серый (CCCCC). Создаем новый слой (Layer-New Layer) между двумя слоями с кругами и инструментом Эллипс (Ellipse Tool) в режиме Заливки пикселей делаем окружность чуть больше размера верхнего круга слева от него.

Переходим на слой с телом будущего снеговика (большой круг) и загружаем его выделение (Ctrl+клик по иконке слоя). Теперь, на слое с серым кругом нажимаем сочетание Ctrl+J, копируя часть серого круга на другой слой. Этот слой нам нужен для создания тени головы, а оригинал с серым кругом можно удалить (Delete).

На дубликате серой части переходим в меню Фильтр-Размытие-Размытие по Гауссу (Filter-Blur-Gaussan Blur) и ставим радиус опции на 3-4 рх. Тень головы готова.

Шаг 4.

Загружаем выделение слоя с телом (Ctrl+клик по иконке этого слоя) и активируем инструмент Градиент с радиальным стилем (Gradient Tool radial gradient) черно-белого цвета. На Новом слое (Layer-New Layer) проводим линию из центра круга к его краю, заполняя градиентом. Затем снижаем непрозрачность (Opacity) слоя до 20%. Снимаем выделение (Ctrl+D).

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

Шаг 5.

Теперь сделаем нашего снеговика более реальным, добавив ему текстуру снега. Создаем новый слой (Ctrl+Shift+N) выше всех слоев и устанавливаем цвета по умолчанию, нажав на клавиатуре «D». Выбираем инструмент Кисть (brush tool) размером 10-15 рх с жесткими краями (100% hardness) и открываем панель настроек инструмента (F5). В опции «Форма отпечатка кисти» (Tip Shape) настраиваем интервал на 20%. Находим параметр «Динамика формы» (Shape Dynamics) и все значения уравниваем до 0. Далее в опции «Рассеивание» (Scattering) изменяем значение рассеивания на 372%, счетчика (Count) 1%. Переходим к параметру «Другая динамика» (Other Dinamics) и настраиваем колебание непрозрачности (Opacity Jitter) на 100%.

Загружаем выделение слоя с головой (Ctrl+клик по иконке этого слоя). Проводим кистью по ее краям и немного в центре. Изменяем режим смешивания для слоя на Перекрытие (Overlay) и Непрозрачность (Opacity) снижаем до 35-40%. Повторяем рисование кистью на туловище снеговика, предварительно выделив его. Выполняем мазки кистью на отдельном слое. Изменяем режим смешивания на Перекрытие (Overlay) и снижаем непрозрачность до 35-40 %. Можете использовать Фильтр «Размытие по Гауссу» (Gaussan Blur) с небольшим радиусом, сглаживая мазки кисти.

Шаг 6.

Выберите Кисть (Brush) с жесткими краями, маленького размера черного цвета с настройками по умолчанию и нарисуйте два глаза на лице снеговика. Затем двойным щелчком по миниатюре слоя откройте окно «Стилей слоя» (Layer Style) и поставьте значения со скриншота ниже:

Внутреннее свечение (Inner Glow):

Тиснение (Bevel and Emboss):

Шаг 7.

На Новом слое (Ctrl+Shift+N) выше всех предыдущих, инструментом Перо (Pen Tool) в режиме контуров (Paths) создайте фигуру морковки, имитируя нос снеговика. После того, как вы закроете контур, нажмите по нему правой кнопкой мыши и выберите из меню – Выполнить заливку контура (Fill Path). В диалоговом окне заливки укажите оранжевый цвет # e37b19. Возьмите Осветлитель (Dodge Tool) и проведите им сверху и по правой части носа. Затемнителем (Burn) создайте тень внизу морковки.

Шаг 8.

Теперь добавим тень от носа снеговика. Для этого, создадим Новый слой (Layer-New Layer) ниже слоя с носом. Кистью (Brush) черного цвета с жесткими краями размером больше головы делаем клик в основании морковки. Затем, переключаемся на Ластик (Eraser) такого же размера и удаляем лишнюю часть круга. Загружаем выделение головы (Ctrl+клик по иконке слоя) и нажимаем Ctrl+J на слое с кистью. Cнимаем выделение (Ctrl+D). Удаляем оригинал с кругом (delete) и на дубликате добавляем Маску слоя (Layer-Layer Mask или значок круга в квадрате внизу панели слоев). Мягкой черной кистью с низкой непрозрачностью смягчаем тень, делая ее светлее у края головы.

Если тень выглядит грубо, снизьте непрозрачность слоя (Opacity).

Шаг 9.

Далее нарисуем рот. Выбираем инструмент Овальное выделение (Ellipse Marquee tool) и создаем окружность (удерживая Shift) на лице снеговика на Новом слое (Ctrl+Shift+N). Затем, нажимаем правой кнопкой мыши по выделению и выбираем из меню – Выполнить обводку (Stroke..). Указываем ширину в 4 рх черного цвета и нажимаем Ок.

Добавляем Маску (клик по ее значку внизу панели слоев) на этот слой и черной кистью (Brush) удаляем лишнее, оставляя только нижнюю часть обводки.

На новом слое нарисуйте поперечные маленькие швы поверх рта снеговика Кистью (Brush) черного цвета, как на изображении ниже:

Шаг 10.

Пером (Pen Tool ) рисуем меховой отворот шапки поверх головы. Образуем выделение после закрытия контура (клик правой кнопкой мыши) и заполняем его (Shift+F5) белым цветом (ffffff). Затемняем левую нижнюю часть отворота мягкой Кистью (Brush) темного цвета с низкой непрозрачностью. Снимаем выделение (Ctrl+D).

Шаг 11.

Далее, сделаем форму шапки инструментом Перо (Pen Tool) на отдельном слое под слоем с мехом. Заполните (Shift+F5) контур красным цветом # a90505, предварительно загрузив его выделение. Завершив действие, снимите выделение (Ctrl+D).

Откройте тканевую текстуру в Фотошоп и перенесите ее в наш документ. Расположите слой с текстурой над слоем шапки. Загрузите выделение шапки (Ctrl+клик по иконке слоя), затем инвертируйте его (Ctrl+Shift+I) и на текстурном слое нажмите Delete (удалить). Снимите выделение (Ctrl+D) и измените режим смешивания для этого слоя на Яркость/Свечение (Luminosity), снизьте непрозрачность (Opacity) до 20-25%.

Шаг 12.

Добавьте тень на шапку снеговика, используя инструменты Затемнитель (Burn Tool) в нижней ее части и около мехового отворота, и объем, применяя Осветлитель(Dodge Tool ) наверху.

Шаг 13.

Дополним образ снеговичка пуговицами на животе. Применим технику, как в шаге при создании глаз. На Новом слое (Ctrl+Shift+N) используем Кисть (Brush) черного цвета с жесткими краями маленького размера, делая пять точек вниз по линии живота. Дважды нажимаем на миниатюру слоя и открываем «Стили слоя» (Layer-Layer Style). Выполняем настройки со скриншота для параметров Тень (Drop Shadow) и Тиснение (Bevel and Emboss).

Шаг 14.

Под слоем с шапкой создаем новый слой (Ctrl+Shift+N) для помпона. Инструментом «Овальное выделение» (Ellipse Marquee tool) рисуем круг на кончике шапки. Заливаем (Shift+F5) выделение белым цветом (ffffff). Создаем небольшую тень в центре помпона на месте соединения с шапкой при помощи мягкой кисти (Brush) темного цвета с низкой непрозрачностью.

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

Шаг 15.

Теперь займемся созданием симпатичного шарфика. На Новом слое (Ctrl+Shift+N) Пером (Pen Tool) рисуем полукруглую фигуру по форме нижней части головы. Заполняем контур (Shift+F5) красным цветом # 8b0404, предварительно загрузив его выделение.

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

Шаг 16.

Теперь нарисуйте поверх шарфа полоски Пером (Pen tool) в режиме Добавления к области контура на отдельном слое, затем создайте выделение полос и заполните их (Shift+F5) зеленым цветом # 0b6a16.

pen tool.jpg

Добавьте объема шарфику при помощи Затемнителя и Осветлителя (Burn и Dodge Tool) в указанных местах, как на примере ниже:

Создайте новый слой (Ctrl+Shift+N) под слоем с шарфом и нарисуйте тень Кистью (Brush) c мягкими краями темного цвета.

Шаг 17.

Создайте новый слой наверху панели слоев и мягкой Кистью (Brush) белого цвета нарисуйте сугробы в нижней части холста.

Шаг 18.

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

Для создания первой коррекции переходим в меню Слои-Новый корректирующий слой- Кривые (Layer-New Adjustment Layer-Curves или значок черно-белого круга внизу панели слоев) и изменяем значения в окне опции, следуя примеру ниже.

Создаем дубликат всех слоев, предварительно выделив их (Ctrl+клик по миниатюрам слоев), затем нажимаем сочетание Ctrl+Shift+Alt+E. Теперь, на объединенном слое переходим во вкладку Фильтр-Имитация-Акварель (Filter > Filter Gallery > Watercolor) и выполняем настройки со скриншота. Создаем Маску слоя (Layer Mask) и Кистью (Brush) черного цвета с мягкими краями удаляем акварельный эффект с шарфа и шапки с помпоном. Снижаем непрозрачность (Opacity) слоя до 30%.

Далее идем в меню Слой-Новый корректирующий слой- Фотофильтр (Layer-Adjustment Layers > Photo Filter) и выбираем теплый фильтр 50% (Warming Filter 50%). Плотность изменяем на 51%.

Добавляем еще один корректирующий слой «Цветовой баланс» (Color Balance) и выполняем настройки со скриншота ниже. Затем, активируем маску этого слоя, щелкнув по ней, и инструментом Заливка (Paint Bucket Tool) заполняем ее черным цветом. Белой Кистью (Brush) рисуем на маске по шарфику снеговика, восстанавливая коррекцию на нем.

Добавляем Корректирующий слой (Adjustment Layer) «Карта градиента» (Gradient Map). Нажимаем на Редактор градиентов в диалоговом окне (Gradient Editor) и вводим цветовые значения, как на изображении внизу. Заполняем Маску этого слоя черным цветом (000000), кликнув по холсту инструментом Заливка (Paint Bucket Tool), затем Кистью (Brush) белого цвета проводим по шарфику снеговика, чтобы градиент распространялся только на него.

На маске этого слоя переходим в Фильтр-Размытие-Размытие по Гауссу (Filter > Blur > Gaussian Blur) и ставим радиус в 3 рх. Снижаем непрозрачность (Opacity) этого слоя до 30%.

Далее, выделим все слои (клик по верхнему слою, затем, удерживая Shift, клик по нижнему) и скопируем их на один слой (Ctrl+Shift+Alt+E). Переходим в Фильтр-Штрихи-Акцент на краях (Filter > Filter Gallery > Accented Edges) и выполняем настройки для слоя:

Добавляем Маску (Layer Mask) на этот слой и заполняем ее черным цветом. Кистью (Brush) белого цвета рисуем по шарфу.

Добавляем корректирующий слой «Цветовой баланс» (Layer-Adjustment Layer-Color Balance), вводим значения, а затем на маске слоя черной Кистью (Brush) закрашиваем снеговика и сугробы, удаляя коррекцию с них и воздействуя только на фон.

И, наконец, создадим последний корректирующий слой «Кривые» (Curves). Вводим значения со скриншота:

Объедините все слои документа в один слой (Ctrl+E).

Шаг 19.

Наша зимняя картина готова к анимации, не хватает только падающего снега. Создайте Новый документ (Ctrl+N) в два раза больше, чем документ со снеговиком. Используйте темный фон для удобства, потом мы его удалим. На новом слое активируйте Кисть (Brush) с мягкими краями белого цвета (ffffff) и настройте ее в палитре инструмента (F5) в параметрах: «Динамика формы», «Рассеивание» «Форма отпечатка кисти». Можете использовать свои кисти со снежинками или кисти из ресурсов данного сайта «Зимние» Winter. Нарисуйте по всему полотну снег. Затем, удалите фоновый слой, чтобы снежинки остались на прозрачном фоне.

Шаг 20.

Перетащите слой со снегом в документ «Снеговик». Переместите снег в верхнюю область рабочего окна так, чтобы слой со снеговиком находился в его левом нижнем углу. Весь снежный слой не просматривается, видна только его часть на изображении снеговика. Для удобства работы уменьшите масштаб в рабочем окне (Ctrl -) и выполняйте действия в таком режиме. Назовите слой снега «Снежный кадр 1».

Дублируйте этот слой (Ctrl+J) и назовите копию «Снежный кадр 2». Выключите его видимость (глазик напротив иконки слоя). Вернитесь на оригинал и, удерживая Shift, переместите снежный слой по диагонали вниз. Ваш снеговик теперь должен находиться в правом верхнем углу снежного слоя.

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

На слое «Снежный кадр 2» нажмите Ctrl+A, чтобы выделить весь холст, а затем дублируйте видимую выделенную часть снега (Ctrl+J) на другой слой.

Выберите слой «Снежный кадр 2 копия» и «Снежный кадр 1» (Ctrl+ клик по миниатюрам слоев) и объедините их в один слой (Ctrl+E).

Шаг 21.

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

Шаг 22.

Перейдите в меню Окно-Анимация (Window > Animation), чтобы открыть рабочую панель. Там вы увидите первый кадр (Frame), соответствующий активному на данный момент слою.

Шаг 23.

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

Шаг 24.

Выставьте время отображения кадров в анимации на 0,2 секунды. Теперь, когда вы нажимаете на первый кадр, снежный слой должен быть расположен вверху, и, наоборот, если вы нажмете на второй кадр, снежный слой будет находиться ниже снеговика. Если при нажатии на кадры ничего не меняется, значит анимация выстроена неверно. В этом случае, удалите анимацию (нажмите на стрелку в правом углу панели и выберите опцию – Удалить анимацию) и внимательно сделайте все снова по инструкции.

Шаг 25.

Далее, внизу панели анимации нажмите кнопку Промежуточных кадров (Tween) и в диалоговом окне укажите их число (25 в данном случае). Всего должно получиться 27 кадров, каждый из которых длится 0,2 сек.

Теперь смело нажимайте кнопку Воспроизведения (треугольник) и наслаждайтесь настоящим новогодним снегопадом!

Шаг 26.

Чтобы сохранить сделанную анимацию, переходим в меню Файл-Сохранить для Веб и устройств (File > Save for Web & Devices). В диалоговом окне сверяем настройки: разрешение GIF, количество цветов 256 и нажимаем кнопку Сохранить (Save). Указываем любое место вашего компьютера, где будет храниться ваша анимация.

Теперь вы можете просмотреть картинку вне программы Фотошоп. Успехов и с Новым годом!

Используемые материалы:

Тканевая текстура

Шаг 1.

Создаем новый документ любого размера (Ctrl+N или File-New) в Фотошоп и активируем инструмент «Эллипс» (Elliptical shape tool) в режиме слой-фигуры (иконка рамки в верхней панели). Устанавливаем цвет переднего плана на желтый. Удерживая Shift, рисуем ровный желтый кружок.

Шаг 2.

Открываем двойным кликом по миниатюре этого слоя окно «Стили слоя» (Layer Style) и выполняем настройки для параметров: Внутренняя тень (Inner Shadow), Внешнее свечение (Outher Glow) и Тиснение (Bevel and Emboss). Вводим значения со скриншотов ниже.

Шаг 3.

Снова выбираем инструмент Эллипс (Elliptical shape too) и рисуем горизонтальный овал белого цвета поверх желтого круга. Это будет глаз смайлика.

Шаг 4.

На слое с глазом открываем «Стили слоя» (двойной клик по миниатюре слоя или клик по иконке «fx» внизу панели слоев) и активируем параметр «Тиснение» (Bevel and Emboss). Выполняем настройки.

Шаг 5.

Устанавливаем насыщенно-голубой цвет переднего плана и активируем инструмент Эллипс (Elliptical Shape Tool). Создаем радужку глаза смайлика, рисуя голубой круг поверх глаза. Не забываем удерживать Shift для создания ровного круга, а не овала.

Шаг 6.

Теперь, выбираем инструмент Произвольная фигура (Custom Shape Tool) и в верхнем меню открываем панель фигур. Выбираем фигуру сердечка и рисуем красным цветом его поверх радужки на новом слое (Ctrl+Shift+N). Каждая созданный элемент смайлика должен находиться на отдельном слое.

Шаг 7.

Снова открываем «Стили слоя» (Layer Style) на слое с сердечком и вводим значения для опции «Тиснение» (Bevel and Emboss).

Шаг 8.

Устанавливаем черный цвет переднего плана и инструментом Эллипс (elliptical shape tool) рисуем горизонтальный овал, который будет носом смайла. Копируем стили слоя со слоя глаза (клик пр.кн.мыши по миниатюре слоя с глазом и выбираем – Copy Layer Style), затем переходим на слой с носом и вставляем стили (снова нажимаем пр.кн.мыши по миниатюре и выбираем – Paste Layer Style).

Шаг 9.

Теперь, инструментом Перо (pen tool) создаем бровь смайлика. После того, как вы создали нужную вам форму брови, выделите контур (Ctrl+Enter) и заполните (Edit-Fill или Shift+F5) его черным цветом. Снимите выделение (Ctrl+D). Чтобы бровь получилась закругленной, используйте инструмент Угол на опорных точках контура, чтобы вытянуть кривые из них и сформировать нужную фигуру.

Шаг 10.

Дублируем слой с глазами (без сердечка) и слой с бровью, нажав Ctrl+J. Используя Трансформирование (Edit-Transform или Ctrl+T), отражаем дубликат брови по горизонтали (клик пр.кн.мыши по рамке трансформирования и выбираем - Flip horizontal).

Размещаем дубликат брови на другой стороне лица. Второй глаз также перемещаем (Move Tool) на другую половину лица.

Шаг 11.

Далее, рисуем рот. Устанавливаем белый цвет переднего плана (#ffffff) и Пером (Pen Tool) создаем контур рта. Выделяем его (Ctrl+Enter) и заливаем (Edit-Fill) белым цветом. Чтобы нарисовать по краям рта ямочки, снова используем инструмент Эллипс (Elliptical Shape tool) и рисуем круг с левого края рта. Дублируем этот слой (Ctrl+J) и переносим (Move Tool) дубликат на другую сторону рта.

Выделяем все слои со ртом (Ctrl+клик по миниатюрам слоев) и объединяем их в один слой (Ctrl+E). Добавляем стили слоя на рот, копируя их со слоя носа или глаза (см. шаг 8).

Шаг 12.

Дублируем оба слоя с сердечками (Ctrl+J) и масштабируем дубликаты (Ctrl+T), увеличивая их размер.

Шаг 13.

Еще раз дублируем слои с сердцами (Ctrl+J) и снова увеличиваем их еще больше, чем в предыдущем шаге, используя Трансформирование (Ctrl+T).

Шаг 14.

Открываем окно «Анимация» (Window-Animations). Для первого кадра скрываем видимость слоев с увеличенными сердцами (клик по глазикам миниатюр), оставляя все остальные слои.

Шаг 15.

Дублируем кадр (клик по иконке нового кадра внизу панели анимации) и включаем видимость слоя с сердцем средней величины.

Перемещаем слой с бровями на несколько пикселей вверх (Move Tool и стрелки клавиатуры).

Шаг 16.

Снова дублируем кадр и открываем видимость слоев с самыми крупными сердцами. Перемещаем слой с бровями еще на несколько пикселей вверх.

Шаг 17.

Дублируем второй кадр и перемещаем его в конец последовательности анимации. Установите время каждого кадра на 0 сек. Можете поэкспериментировать с разным временем для каждого кадра.

Шаг 18.

Теперь вы можете посмотреть свою получившуюся анимацию, нажав клавишу Play (треугольник на панели анимации). Чтобы сохранить анимацию, нажимаем сочетание Ctrl + Alt + Shift + S и в открывшемся окне «Сохранить для Web и устройств» (Save for Web&Devices) сохраняем анимацию в формате gif.

Надеюсь, вас порадовал сегодняшний урок. Удачи в творчестве!

Далее делаем такие настройки !!!!



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


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

Урок похож на урок Металлический блеск собственно от туда и вырос.

1 И так открываем картинку в фотошопе. у меня такая.



2 Теперь подыскиваем в инете или рисуем узор на новом слое.

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

Если решились на группу, то каждый завиток делайте на новом слое, и анимируйте отдельно. Чем их больше тем сложнее но и красивее.

В уроке я расказываю как делать группу а в конце вы можите сравнить два варианта

У меня такие завитки.



3

Для тех у кого завитки на одном слое.

Кликаем с зажатой клавишей CTRL на нужный слой в палитре слоев и получем выделение нужной части узора.

Отключаем видемость слоя с узором.

И сразуже после этого кликаем на новый слой.

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

Должно получится так.



И делаем к этому слою маску.



Теперь рисуем на новом слое, кистью с мягкими краями, кружочек или полосочку, кому что больше нравится, я рисую кружочки.

Цвет контрастный фону, я беру белый.

Кружочек лучше рисовать в том месте откуда начнет проявлятся узор.

У меня от центра.



4

Теперь отцепляем маску, для этого жмем на замочек между слоем и маской.



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

5

Если у вас один слой то можите переходить к анимации

Если у вас группа слоев, то тоже сомое делаем с остальными частями узора. Если мы отключим маски (нажав на маску с зажатым Shift) получится вот такое большое белое пятно в центре.



У меня пятно в центре т.к. анимация будет начинаться от центра.

Анимация

1

И так все блики нарисованы, все маски отцеплены и включены. Начинаем анимировать.

Включаем палитру анимации.



И сразу видим в палитре анимации первый кадр (фрейм) делаем еще один кадр.



На новом кадре двигаем наши блики от начала узора к концу. У меня анимация идет от центра, по этому двигать я их буду от центра к краям картинки, так что бы блик проходил по узору.

Жмем Tween и выставляем кол-во промежуточных кадров, между, теми что у нас есть например 20



Функция Tween делает промежуточные кадры между нашими двумя кадрами, постепеннь сдвигая блик от центра к краям, по заданой вами троектории.

Вот что получилось если делать с одним слоем завитков

---

2

Для тех кто решил делать группу слоев

Если после того как подвинуть блики вы отключите маску (нажав на маску с зажатым Shift) получится что белое пятно от центра разбежалось к краям.



Далее жмем Tween и выставляем кол-во промежуточных кадров

Важно

Движение Tween идет по прямой. Если вы хотите сделать змйку делайте ее в несколько этапов, разбивая участки на прямые



Тоесть двигайте ваши блики до поворота, затем жмем Tween между двумя первыми кадрами, затем на последнем кадре снова двигаете блики до поворота, и жмете Tween между двумя последними кадрами

Не исключено что на каких то кадрах блики придется подвинуть вручную

Получаем вот такой результат

---

1. Открываем картинку.



2. Создать дубликат слоя Ctrl+J, глазик на нижнем слое
отключить. Вырезать отверстия для блика любым вам удобным способом (я вырезала Лассо)



3. Создать новый слой и поместить его между картинок



4. Отключите глазики со слоёв с основными фонами что бы видеть
блик. Взять Прямоугольное выделение, растушёвку поставте на своё
усмотрение ( у меня 20) создать прямоугольник и залить любым цветом




При желании трансформацией можно развернуть блик




5. Переходим к самому интересному... Открываем окно аннимации. В

слоях включаем все глазики. Создаём новый кадр




Стоя на слое с бликом перемещаем его из одного угла в другой






6. Добавим промежуточных кадров. Нажмите в окне аннимации

кнопку " Создание промежуточных кадров" и выставите их количество у меня

их 15



Установите время отображения кадров




Просматрите результат и если он вас устроил сохраняйте.




Также заливать прямоугольное выделение можно и градиентом.