Создание меняющейся картинки в Photoshop (обновлено)
Сделать в Photoshop такую картинку, где два (или более) изображения плавно переходят одно в другое, совсем не сложно.
Простая анимация, сделанная в Photoshop:
Для примера, тут использовалось фото самой красивой актрисы Одри Хепберн.
Как это сделать – плавное изменение картинки в Photoshop
1. Открываем в Photoshop две (или больше) картинок
2. С помощью инструмента «Перемещение» (Move Tool, клавиша V)…
…перетаскиваем одно изображение на другое.
Должно получиться два слоя с разними исходными рисунками
Подсказка! Если размер изображений разный, то с помощью трансформации (клавиши Ctrl+T) меняем размер картинок.
3. В старых версиях Photoshop нужно было открыть меню Анимация: Windows – Animation.
В новых Photoshop, по умолчанию, «меню анимации» в виде шкалы времени и вкладки Mini Bridge расположено внизу главного рабочего окна. Чтобы их открыть/закрыть: в меню «Окна» — «Шкала времени».
Подсказка! Если нижний слов – фон, дважды кликните на нем и нажмите «ОК» для создания нового слоя.
4. Чтобы не запутаться, ставим сразу прозрачность нижнего слоя = 0% (верхний остается = 100%)
5. В меню «Шкала времени» дублируем наш первый кадр (нажимаем на пиктограмму «Создание копии выделенных кадров»).
Появляется следующий кадр:
6. Теперь в меню слоев меняем прозрачность (в новом кадре) нижнего слоя на 20%, а верхнего — на 80%.
7. На шкале времени снова дублируем кадр (второй копируем в третий)…
…и меняем свойства слоев в нем: прозрачность — 40 и 60%.
Повторяем эти две операции (дублирование кадра и изменение прозрачности), пока верхний слой не станет невидимым (прозрачность = 0%), а нижний не проявится полностью (прозрачность = 100%).
С двумя слоями и шагом в 20% прозрачности должно получиться 6 кадров.
8. Чтобы картинка изменялась циклически (то есть, поменялось из одной картинки, а затем – назад к первой), повторяем операции в обратном порядке, пока верхний слой не станет на 80% непрозрачным (еще 4 кадра).
На 80% процентов – потому что 100-процентный слой у нас находится в первом кадре.
9. Теперь выставим продолжительность первого и шестого кадров (с главными картинками 100%-ой непрозрачности) — 1.0 секунды, а остальные — 0.1 сек.
Подсказка! Чтобы выбрать два разных кадра, нажмите на один, а затем, удерживая Ctrl, — на другой нужный кадр. Чтобы выбрать несколько кадров подряд, нажмите на первый их них, а затем, удерживая Shift, — на последний нужный кадр.
10. Сохраняем полученный файл в формате GIF: меню «Файл» — «Сохранить для Web». Можно использовать комбинацию клавиш Alt+Shift+Ctrl+S.
В верхнем правом блоке окна сохранения указываем формат файла GIF (для анимации).
Подсказка! Чтобы уменьшить размер картинки, можно выделить все кадры и нажать Ctrl+Alt+I (или через меню «Изображение» — «Размер изображения». Также можно после выбора «Сохранить для Web» указать нужный размер сохраняемой картинки.
Вот и всё. Надеюсь, что этот простой пример станет началом какого-то невероятного креатива.
Творческого вдохновения и удачи!
P.S. В уроке допущена одна ошибка, которую будет видно при сохранении. Домашнее задание: понять, в чем дело (это просто) и исправить. А может быть, никакой ошибки и нет…
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Как сделать смену слайдера с плавным переходом?
В прошлой статье (ссылка на статью) мы изучили, как сделать на собственном сайте, слайдер, в котором меняются изображения. Но, это был лишь базовый элемент, который присутствует почти на каждом втором сайте в интернете. Если же поискать среди просторов мироздания сети, можно наткнуться на множество различных библиотек, которые достаточно просто встраиваются на сайт, по смене слайдера. Но, нет ни чего лучше, чем самописный сайт, не зависящий ни от чего.
В этой статье, я бы хотел рассказать, как улучшить слайдер, находящийся в верхней части сайта, а именно – сделать плавным переход между пула изображений.
Вероятнее всего, для вас сейчас прозвучала несколько незнакомых слов, с которыми вы ни разу не сталкивались, а если и сталкивались, то не так часто. Расскажу подробнее. Header – он же верхушка сайта, та самая часть, которая должна в первую очередь захватить внимание пользователя, который зашёл на ваш сайт. Слайдер – эта та самая картинка, которая привлекает внимание. Слайдер может состоять из нескольких картинок, поочерёдно меняющихся.
Рисунок 1: Слайдер на сайте
Перед прочтением этой статья, я бы настоятельно порекомендовал вам ознакомиться с некоторыми из статей на нашем сайте, в которых достаточно подробно описано создание самых простых элементов на сайте.
Как сделать плавный переход в слайдере сайта?
Что же, как и говорил, я использую прошлый код слайдера, и немного изменю его.
В первую очередь нам необходимо изменить стили одного из контейнеров, а именно background-image. Меняем значение свойство background-position: 0px 0px; Так, мы накладываем одну из картинок, поверх второй.
Следующими нововведениями, является изменение скрипта, меняющего изображения.
Суть этого скрипта заключается в том, что он меняет изображения из определённого пула, и обнуляет свойство прозрачности у изображений, что позволяет сделать плавную смену изображений.
Важно! Чтобы у изображений было прописано правильно название. А именно, последующим образом:
Рисунок 2: Название изображений
Рисунок 3: Результат слайдера
