Как сделать движущийся многослойный рисунок
Как сделать многослойную Parallax иллюстрацию на CSS & JavaScript
Рисунок используемый для parallax эффекта. Автор Patryk Zabielski
Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).
Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.
Подготовим илюстрацию
Давайте начнем с того, что нарежем иллюстрацию на слои. Лучшим вариантом развития событий будет, то что вы сами нарисовали или у вас есть доступ к исходному файлу со всеми слоями.
Если нет, то не волнуйтесь мы разберемся с этим.
Я буду работать с картиной, которую нарисовал в прошлом году. Если у вас нет возможности создать свою, мы можете скачать мои исходники перед тем, как мы начнем.
Визуализированный концепт слоев в 3D пространстве
Нам нужно разделить картину на несколько png файлов с прозрачным фоном, что даст нам возможность создать чувство глубины.
Слои на заднем плане будут двигаться медленнее, чем те, что на переднем, что даст нам эффект глубины.
Еще одна вещь, которая даст нам лучший переход к следующей секции — это нарисовать внизу картинки линию такого же цвета, как фон страницы. Я добавил незаметную линию на переднем фоне внизу картинки.
На картинке справа есть незаметная линия, которая даст нам лучший переход в следующую секцию
Начнем кодить
Подготовление
Что вам потребуется:
Добавим базовых стилей. Начнем с #hero. Я установил высоту иллюстрации 800px
Теперь, перейдем к стилизации повторяющего класса слоев. У каждого из них будет одинаковая высота, как у #hero и позиционирование, и мы добавим position: fixed
Следующая вещь, которую мы хотим сделать это добавить картинки, которая мы подготовили до этого. Мы создадим еще несколько классов, по одному для каждого слоя. После чего добавим ссылку на картинку внутри свойства background-image.
Не забудьте обновить HTML и назначить классы к нужным div в нашем порядке, первым слой это задний фон, следующие слои будут накладывать поверх друг-друга
Время JavaScript
Добавим методом, который будет проверить если пользователь начал прокручивать страницу вниз.
EventTarget.addEventListener() метод регистрирует слушателя на EventTarget. event target может быть элемент в document, сам document, объект Window или любой объект поддерживающий события (такие как XMLHttpRequest)
Сохраним количество пикселей, которое проскролено вертикально от начала страницы в переменную topDistance. Чтобы сделать это, будем использовать свойство pageYOffset
После этого, мы выберем все слои в нашей илюстрации и сохраним их в переменную layers. Для этого мы будем использоваться методом querySelectorAll и data атрибут внутри элементов HTML, который мы установили до этого.
Следующее что мы сделаем, это пройдемся циклом через все слои и применим свойство transform к каждому из них. Но перед этим, мы укажем еще одну вещь внутри нашего HTML файла, атрибут data-depth. Он даст нам возможность контролировать как быстро элемент будет двигаться, давайте не будем глубоко углубляться в значения, мы вернемся к этому позже.
Чтобы пройтись через все элементы, мы будем использоваться цикл for. Начнем наш цикл с создания переменной, где мы будем хранить наши слои. После чего возьмем значение из data-depth атрибута, который мы указали внутри нашего HTML. Далее, мы вычислим передвижение слоев, умножив дистанцию скрола от начала страницы на значение атрибута data-depth данного слоя. Элемент со значение 1.0 будет двигаться нормально с остальной страницей, вы можете воспринимать его, как элемент с выключенным parallax.
Последнее что мы сделаем, это обновим окончательное значение движения для параметра transform translate3d слоя, чтобы сделать это мы будем использовать свойство style вместе со всеми вендорными префиксами для transform.
Чтобы код был более читаем и DRY, мы сохраним параметр translate3d в переменную translate3d
Теперь когда мы указали data-depth=»1.00″ элемент будет двигаться вместе со страницей, как обычный элемент без parallax эффекта. Все значение меньше чем 100 будут иметь эффект parallax.
Телефоны
Для телефонов мы отключим parallax версию и заменим ее на статичную картинку, чтобы сохранить производительность. Чтобы сделать это, создадим новый div ниже нашего div #hero, с id hero-mobile и применим к нему display: none вместе с параметрами background и height.
Чтобы показывать его вместо parallax, будем использовать media query и применять параметр display: none к десктопной версии, переопределяя наш display: none на display: block для #hero-mobile.
Твой Сетевичок
Все о локальных сетях и сетевом оборудовании
5 лучших приложения, чтобы заставить фото двигаться
Картинка, которая двигается, — новый тренд в «Инстаграме» и на других развлекательных социальных платформах. Часть фото статична, а другая часть подвижна, например, область с небом, морем, машинами на дороге — всё что угодно. Как самостоятельно создать такую картинку-видео с помощью обычного мобильного приложения?
Топ-5 приложений для движущихся фото для «Андроида» и «Айфона»
Расскажем о нескольких мобильных программах, которые позволяют быстро сделать оригинальное изображение: какая-то его часть будет двигаться и тем самым завораживать внимание. Приложения работают по одному из двух принципов: часть картинки замораживается в редакторе (если это видео) или оживляется (если это просто фото).
Программы также сохраняют движущиеся фото в разных форматах — «гифках», просто видео, анимированные PNG и в других.
Loopsie
Эта программа подходит для «Андроида». Она полностью бесплатная. Сначала вы снимаете предварительно короткое видео в этом же приложении, потом в редакторе делаете неподвижной определённую область на ролике. Получается изображение с определённой движущейся областью. Программа удобная, с интерфейсом на русском языке.
Огромный плюс в копилку утилиты — она не ставит водяные знаки.
Какие ещё у программы функции:
Скачать программу можно с «Плей Маркета».
«StoryZ Живые фото»
У программы тоже понятный и удобный интерфейс, как и у предыдущей, но она работает по принципу оживления статичного фото. Можно заменить какой-то один элемент фото на видео. Это могут быть облака, вода, дым и прочее. Эта функция называется «Движение».
В этой же программе есть ещё одна аналогичная функция — «Анимация». Вы выбираете элемент (область будущей анимации) на фото и задаёте векторы стрелочками — направления, в которых будут двигаться выделенные элементы.
Кроме того, в этом редакторе можно снимать, сохранять видео в разрешении до 4К, а потом делиться ими с друзьями через это же приложение. Что ещё радует: в этом софте есть набор обучающих видео, то есть вы точно освоите все функции, которые предлагает приложение. Программа подходит для «Андроида».
Скачать её можно с «Плей Маркета».
Plotaverse
Это приложение подходит и для «Айфона», и для «Андроида».
Скачать его можно из App Store по этой ссылке либо с «Плей Маркета».
Жирный минус утилиты — она платная, стоит 379 рублей. Но оно того стоит.
Какие у программы возможности и плюсы:
Cinemargraph
Ещё один вариант для Android. Работает по тому же принципу, что и Plotaverse. Программа бесплатная, сохраняет движущееся фото в формате GIF. Что входит в функционал:
применение фильтров; добавление фото в социальные сети прямо из приложения; регулировка частоты кадров картинки в «гифке»; настройка качества движущегося фото; фокусировка на предмете при съёмке.
Cinemagraph Pro
Для «Айфона» есть программа, похожая по названию на предыдущую, — Cinemagraph Pro. Но это не одно и то же приложение — разработчики разные. Она бесплатная и с множеством функций: от фильтров и добавления текста на картинку до обучающих видео. Но за использование придётся «заплатить» водяным знаком на обработанной «фотке». Убрать его можно только за подписку.
Программа работает по принципу заморозки определённых участков снятого только что видео — как в Loopsie для «Андроида».
Здесь можно редактировать движущееся фото: делать его ярче, увеличить свет, сатурацию и многое другое. Можно выбрать разрешение для отредактированного видео, а также его формат. Можно сразу подогнать размер, разрешение и формат файла под определённую социальную сеть или мессенджер (Instagram, Twitter, SnapChat и другое).
Как сделать движущееся фото
Рассмотрим, как сделать анимированное изображение на примере программы Loopsie, рассмотренной выше:
Программа запустит стабилизацию видео. После этого можно переходить к редактированию. Выберите опцию анимации. Закрасьте пальцем ту часть картинки, которая должна двигаться. Укажите тип движения: от начала и до конца либо туда-обратно, как в «Бумеранге». Сохраните движущееся фото себе на телефон либо сразу поделитесь им в социальных сетях: в приложении вы сразу увидите иконки для «Инстаграма», Facebook, WhatsApp.
Если у вас «Андроид», самый простой вариант — использовать Loopsie: снимаете видео и замораживаете часть картинки на видео. Если у вас есть фото, которые вы хотите оживить, используйте программу «StoryZ Живые фото». Для «Айфона» подойдут приложения Plotaverse, Cinemagraph Pro. Первая из них платная.
Как создать анимацию в Photoshop. Пошаговая инструкция
Анимация уже давно превратилась в инструмент улучшения юзабилити. Она помогает взаимодействовать с интерфейсом и привлекает внимание к самому важному.
Анимация — это последовательное отображение кадров друг за другом. Каждый кадр немного изменяется, поэтому кажется, что картинка движется.
Чтобы создать простой веб-баннер или презентацию, необязательно разбираться с многочисленным софтом. Для этого подойдут и встроенные средства Photoshop. Это лишь небольшая доля возможностей программы, а раскрыть их все на практике поможет курс «Photoshop с нуля до PRO».
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
C чего начать
Первым делом нужно определиться с тем, что мы будем анимировать и какого результата планируем достичь.
Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который я и анимировал.
«Шкала времени»
Перед созданием анимации необходимо подготовиться — включить отображение «Шкалы времени», которая помогает управлять кадрами в анимации.
Открываем вкладку «Окно» и ставим галочку напротив строки «Шкала времени».
Внизу окна в Photoshop должна появиться широкая строка, с помощью которой управляют кадрами в анимации.
Чтобы создать первый кадр, нажимаем «Создать анимацию кадра» на «Шкале времени».
Как первый кадр появится, можно приступить к созданию движения.
Промежуточные кадры
В Photoshop анимируют двумя способами:
Сначала я анимирую изображение балалайки. Для плавного появления изображения использую инструмент «Вставка промежуточных кадров». Чтобы Photoshop самостоятельно анимировал элемент, необходимо задать два состояния для элемента — начальное в первом кадре и конечное в следующем.
Поэтому добавляем ещё один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».
После добавления нового кадра переключаюсь на первый и убираю видимость слоя с балалайкой. Также можно задать непрозрачность слоя 0%.
На следующем кадре проверяю, виден ли слой с балалайкой.
После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же — сдвигаю влево, пока он не исчезнет.
Создаем иллюзию движения
Автор: Художник Наталья
Сложность: 
(3 из 5).
Что такое иллюзия? С латинского переводится как обман, заблуждение. Приготовьте своему малышу сюрприз. Иллюзию! Он будет в восторге от того, как оживают рисунки на бумаге!
Вам понадобятся
Содержание материалов для урока (миниатюры изображений из PDF файла представлены ниже, а для печати скачайте PDF по ссылке выше)
Результат иллюзии
Внимание! Анимация представлена в виде GIF картинок. Они могут долго грузиться из-за большого размера, дождитесь полной загрузки страницы =)
Ход работы
Берем и вырезаем. Все предельно просто. Но какой эффект?! Вам надо попробовать. Если вы можете ребенку доверить ножи для вырезания, то он сам прекрасно справится. Лет с 10, дети уверенно держат в руке такие инструменты. Но они должны быть предельно внимательны и аккуратны!
Другие интересные поделки для детей вы найдете в главном разделе по этой ссылке
Анимируем в Photoshop. Два простых способа: покадрово и через Puppet Warp
Рассказываем о двух простых способах создания GIF-анимации.
Большинство пользователей воспринимают Adobe Photoshop как программу, в которой редактируют изображения или рисуют статичные картинки. Но здесь можно делать и анимацию — это направление дизайна приносит хорошие деньги при том, что профессионалов в России не так много.
А если хотите шагнуть дальше Photoshop и пойти навстречу востребованной профессии, посмотрите курс «Motion Design с нуля до PRO» от Skillbox.
Пишет про дизайн и маркетинг в Skillbox. С 2011 по 2017 год писала про бизнес в деловые СМИ, соучредитель агентства копирайтинга «Абзац».
Покадровая анимация
Покадровая анимация — один из самых лёгких способов работы с анимацией в Photoshop. Но учитывайте, что этот несложный процесс окажется довольно долгим. Приступим.
Для начала создадим новый документ, а затем зайдём в меню Window и поставим галочку напротив Timeline («Шкала времени»). После этого появится видеоредактор. В нём будут отображены все слои, которые открыты в документе.
Далее кликаем на кнопку Create Video Timeline, переходим в меню Layers («Слои»), выбираем пункт Video Layers и создаём пустой видеослой.
Теперь ваша задача — нарисовать анимацию покадрово. Это можно делать с нуля либо рисовать поверх готовой картинки, открытой в отдельном слое.
Берём кисть и создаём первый кадр анимации. Далее передвигаем ползунок времени и рисуем содержимое следующего кадра. Чтобы увидеть свои действия на предыдущем этапе, кликните по меню в правом верхнем углу и выберите Enable Onion Skins («Перейти в режим кальки»).
Из таких простых, но монотонных действий состоит процесс создания покадровой анимации: шаг за шагом вы добавляете очередной элемент движущейся картинки. Здесь в каждом новом кадре мы рисуем цветной кружок.
Чтобы сделать плавную анимацию, поделите изображение на максимально короткие отрезки. Скорость каждого кадра можно изменить, кликнув по нему правой кнопкой мыши.
Основная работа закончена, займёмся эффектами. Например, добавим на шкалу времени слой с надписью или картинкой. Если понадобится изменить цвет анимации, делайте это так же, как у обычных слоёв. Дважды кликните по слою, выберите команду Color Overlay («Наложение цвета»), возьмите нужный цвет, скопируйте стиль слоя и вклейте его на все остальные слои.
В конце сохраним полученную анимацию как видео. Перейдите в меню File → Export → Render Video. Если нужен формат GIF, выбираем пункт Save for Web. В открывшемся окошке можно поменять настройки, а затем нажать Save.
Анимация при помощи «Марионеточной деформации»
GIF-анимацию в Photoshop создают и при помощи инструмента Puppet Warp («Марионеточная деформация»). Это гораздо быстрее, чем рисовать анимацию вручную. Сперва возьмите изображение в формате PNG без фона. Если он всё-таки есть, объект придётся вырезать.
Итак, откройте изображение в Photoshop и перейдите в панель слоёв. Кликните правой кнопкой мыши по созданному нулевому слою и преобразуйте его в смарт-объект.
Если собираетесь использовать какие-то эффекты, например тень или обводку, — примените их с самого первого кадра. Это намного проще и быстрее, чем позже добавлять что-то на все созданные слои. Далее кликните Duplicate Layer.
Потом жмём на меню Edit и выбираем пункт «Марионеточная деформация». В этот момент картинка покроется сеткой, а значок курсора превратится в кнопку.
Перед тем как оживить нашу картинку, нужно «приколоть» её с помощью кнопок и оставить свободной только те части, которые будут двигаться
на GIF-анимации.
Теперь самое интересное: левой кнопкой мыши зажимаем ту часть картинки, которая должна находиться в движении, и слегка тянем в нужную сторону. Затем отпускаем мышь и жмём Enter.
Чтобы анимация была плавной и реалистичной, придётся двигать картинку постепенно. Для этого несколько раз повторите весь процесс: копируем слой → двигаем изображение → жмём Enter. В нашем случае понадобилось создать 14 слоёв, чтобы «поднять» ухо персонажа и вернуть его в исходное положение.
Когда закончили двигать картинку, выделите все слои, кликните по ним правой кнопкой мыши и нажмите Rasterize («Растрировать слой»).
Далее начинается работа со «Шкалой времени». Кликаем на Create Frame Animation, переходим в меню, расположенное в правом верхнем углу, и выбираем команду Make Frames From Layers.
Теперь все слои собраны на одной шкале. Если щёлкать по ним поочерёдно, мы увидим, как картинка движется по заданной траектории. Далее установим время для каждого движения и способ воспроизведения (однократно, постоянно или несколько раз). Можете выбрать из предложенных вариантов или добавить свои параметры. Чтобы посмотреть, как всё работает, жмём кнопку воспроизведения.
Если всё устраивает — сохраняем нашу анимацию в формате GIF. Для этого в меню «Файл» выбираем пункт «Сохранить для Web».
Заключение
Теперь вы умеете делать анимацию в Photoshop двумя простыми способами. Их можно применять при создании баннеров или логотипов, которые украсят любую веб-страницу.
Если вы всерьёз заинтересовались анимацией и дизайном — присмотритесь к моушн-дизайну. Это одно из модных направлений современности. Освоив его, вы будете на профессиональном уровне создавать анимацию для крутых проектов.
Motion-дизайн с нуля до PRO
Вы научитесь создавать анимацию, освоите профессиональные программы, сделаете первые работы и получите новую востребованную профессию! Вы расширите диапазон рабочих инструментов, дополните свое портфолио работами c анимированной графикой и сможете претендовать на более сложные и дорогие проекты. После прохождения обучения — помощь в трудоустройстве.