Как сделать эффект падающего снега на фото для инстаграма?

jSnow – универсальный скрипт падающего снега на jQuery

Начнем мы нашу подборку с очень красивого эффекта снега, который добавляется на сайт посредством плагина под названием «jSnow».


Демонстрация:

Согласитесь – красиво!

Для того, чтобы установить этот эффект к себе на сайт, сделайте следующее.

1. Скачайте архив jsnow.zip в конце статьи. Разархивируйте и содержимое загрузите на ваш сайт по FTP или другим удобным для вас способом.

2. Далее в секцию HEAD вы подключаете библиотеку jQuery:

К сожалению, с новыми версиями jQuery скрипт не работает, так что довольствуемся тем, что есть.

3. Перед закрывающим тегом </body> подключаете скрипты:

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

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

Или же связку круглого снега и звезд:

А также любой другой символ (и даже знак доллара – $).

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

Вступление

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

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

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

Какие приложения существуют для эффекта падающего снега

Лучшими программами для наложения эффектов выступают платные. Если автор приложения просит деньги за свою работу, значит, она сделана качественно. Анимация снега накладывается на статическую картинку. Большинство пользователей платных приложений используют Rhonna DM или Color Lake. Первая стоит 149 рублей, вторая 229.

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

Использование инструментов «Шум» при создании снега

Итак, приступим:

  • Открываем исходное изображение, нажимаем Ctrl+O, чтобы открыть его на всё рабочее пространство.
  • Создадим новый слой: нажимаем латинскую клавишу D, чтобы сбросить цвета по умолчанию.
  • Нажатием клавиш Alt+Backspace заливаем этот слой черным цветом.
  • К этому слою применяем фильтр «Шум»/»Добавить шум». Ставим примерно 100–120% распределение по Гауссу и о. Нажимаем «Ок».

Затем к этому слою применяем фильтр «Имитация»/«сухая кисть». Для версии фотошоп CS6 идём по пути «Фильтр»/»Галерея фильтров»/ «Имитация»/»Сухая кисть». Меняя размер кисти, мы получаем больше или меньше снежинок, в зависимости от настроек параметров кисти. Остановимся на значении размера кисти 2, детализацию оставим 0 и текстуру 1.

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

Теперь нажатием сочетания клавиш Ctrl+J дублируем этот слой. На первом мы будем создавать снежинки переднего плана, на втором – заднего. Скроем видимость второго слоя и работать пока будем с верхним.

Чтобы избавиться от чёрного фона, поменяем режим наложения на «Осветление» или «Экран». И черный фон у нас становится прозрачным — невидимым.


Снежинки не должны быть такими резкими, поэтому мы немного размоем их «по Гауссу». Радиус поставим примерно 1–1.5 пикселя, в зависимости от изображения.

Добавляем реалистичный снег в «Фотошоп», управляя только параметрами наложения

Этот экспресс-метод не завалит снегом весенний, летний или осенний пейзаж, но эффект от его применения может вызвать в памяти стихи со словами «зима пришла» или картины с таким названием.

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

Создайте новый слой и залейте его белым цветом. Затем двойным щелчком по слою откройте диалоговое окно «Параметры наложения»/Blending Option и в секции «Наложение, если» внизу разделите черный ползунок нижней шкалы («Подлежащий слой») слева на две части (с клавишей Alt) и подвигайте ими, поглядывая на свою картинку, которую вы преображаете, «добавляя» в пейзаж снег, иней, изморозь, а может быть, и лёд.

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

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

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

Режим наложения слоя

Когда вы нажмете ОК, вы увидите только черный холст с белыми пятнами. Итак, чтобы объединить его с вашим изображением, вам нужно изменить режим наложения слоя на Экран; вы можете сделать это в раскрывающемся меню вкладки слоев.

Теперь вам нужно придать снегу какое-то движение, чтобы он выглядел так, будто он падает. Для этого вы можете перейти в меню Фильтр> Размытие> Размытие в движении. Настроив угол, вы измените направление, в котором будет падать снег. Установка расстояния изменяет пространство между «снежинками». Когда вы будете довольны результатом, нажмите «ОК».

Вот и все, ваш снегопад готов! Вы можете настроить непрозрачность слоя, если хотите, чтобы эффект был менее интенсивным. Вы также можете повторить процесс, чтобы создать больше слоев и изменить значение размытия в движении, чтобы сделать его менее однородным и, следовательно, более реалистичным.

Однако, это всегда будет общим эффектом. Если вы хотите сделать снег более точным и более контролируемым, то смотрите следующий ряд шагов во втором методе.

Динамика движения – снежинки, летящие в разные стороны

Теперь нашим снежинкам необходимо создать какую-то динамику движения, так как в «Фотошопе» сделать снег нужно реалистичным и динамичным. Если использовать фильтр «Размытие в движении», то он размоет все снежинки под углом, какой мы зададим. Мы пойдём другим путём и создадим эффект снежинок, хаотично летящих в разные стороны, как в природе:

  • Для начала преобразуем этот слой в смарт-объект, чтобы иметь возможность редактировать его. Идём в меню — «Фильтр»/»Искажение»/»Волна».
  • «Число генераторов» ставим 1, тип – «Треугольник». «Повторить граничные пикселы» ставим по умолчанию, а вот с настройками «Длины волны», «Амплитуды» и «Масштаба» можно поиграть и подобрать подходящие к вашему изображению.

Теперь все снежинки у нас разлетаются в разные стороны. Если вам не понравится результат, то при двойном клике на строчке «Волна» под слоем «смарт-объект» у вас снова откроется диалоговое окно данного фильтра, которое можно редактировать.

Снег

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

Бесплатные

Эти приложения для зимы можно найти как на iOS, так и на Андроид:

  • Snow Effect Photo Editor – много снега, узоров и новогодних текстур.
  • Snow FX – красивая анимация снега.
  • LD (Lens Distortions) – искать на вкладке Snow и Shimmer.
  • Just snow – можно сделать любой снег, даже цветной!
  • Pics Art – найти можно в разделе Маска – Арт, но текстур снега немного. Остальные маски надо докупать.
  • Snowing Pic – есть парочка милых эффектов снега.
  • Snower – создает анимационный эффект, но снимать надо в реальном времени + есть водяной знак, который не убирается.
  • Snow Effect – много-много снега.
  • СнапСнепСнег (снеговик на жёлтом фоне) – красивые зимние рамки и эффект снегопада.
  • Snow Creator – можно создать собственные снежинки, а потом снять селфи с этими падающими снежинками.

А также отдельные приложения для Android:

  • Nature Photo Effects;
  • Just snow.

Относительно бесплатные

Относительно бесплатные зимние приложения – это те, в которых нужно что-то докупить. Например, пак фильтров или удаление водяного знака.

  • Werble – вполне реалистичный снег и волшебная пыль. Но есть водяной знак. Убрать его стоит 299 рублей.
  • Lumyer – есть эффект снега, салюта и конфетти. Убрать водяной знак стоит тоже 299 рублей.
  • Photo Snow (снежинка на синем фоне) – анимационный снег, но ооооочень медленный. Есть водяной знак.

Платные приложения

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

  • Rhonna Designs MAGIC (149 рублей);
  • Color Lake (229 рублей);
  • InShot – Эффекты (snow и star) – 149 рублей за фильтры.

Сияние

Куда же новогодние фотографии без ослепляющего свечения, блёсток и мерцания? Украсить ваши фотографии могут следующие приложения:

  • kirakira+ (75 рублей);
  • RicaRica Bling Bling;
  • Pictail – Cykik;
  • Sparkle Cam.

Первый способ

Шаг 1. Вначале следует добавить в Gimp фото, которое предстоит редактировать. Для этого обычно используют возможности меню «Файл» — «Открыть». Чтобы было легче понять, как сделать эффект падающего снега на фото, следует рассмотреть необходимый для этого порядок действий на конкретном примере. Для этих целей было взято расположенное ниже фото (Рис. 1).

Рис. 1

Шаг 2. Следующим шагом станет создание нового прозрачного слоя. Программа для редактирования фотографий Gimp, как и Adobe Photoshop, во главу угла ставит работу со слоями, так как это важнейший инструмент, при помощи которого пользователю покоряется растровая графика.

Перед тем, как создать слой, нужно обратить внимание на расположенную справа панель инструментов, где следует найти и выделить: «Слои» — «Кисти». Далее, щелкнув по этому инструменту правой кнопкой мыши, вызывают к жизни контекстное меню, в котором выбирают пункт: «Создать новый слой»

Шаг 3. Полученный, прозрачный по умолчанию слой заливают черным цветом. Для этого используют специальный инструмент с соответствующим названием — «Заливка». Найти его можно на основной панели, расположенной в левой части главного окна программы для редактирования фотографий Gimp.


Шаг 4. Теперь можно рассмотреть, как, собственно, создают эффект падающего снега.

Вначале необходимо воспользоваться основным меню, размещенным сверху, и открыть «Фильтры» — «Шум» — «Шум HSV» (Рис. 2), после чего устанавливают такие параметры:

Рис. 2

  • а) на вкладке «Цвет» отмечают «Обесцвечивание»;
  • б) открыв вкладку «Фильтры» — «Размывание» — «Размывание», применяют эффект размытия.
  • в) на вложении «Цвет» регулируют настройки вкладки «Уровни», пока не получится желаемый результат.

Для выбранной фотографии (Рис. 1) были применены следующие параметры (Рис. 3):

Рис. 3

1) Был изменен режим нового добавленного слоя с «Нормальный» на «Экран».

В результате чего фото стало выглядеть так, как на Рис. 4.

Рис. 4

2) Для придания еще большей правдоподобности, снежинки получили эффект движения, которого удалось достичь, воспользовавшись возможностями специального фильтра, находящегося по адресу: «Фильтры» — «Размывание» — «Размывание движением» (Рис. 5).

Рис. 5

Результатом проведенных действий стал красивый зимний пейзаж, где на уходящую вдаль одинокую улицу неспешно падает снег (Рис. 6).

Рис. 6

Специальные кисти

Так же сделать снежок можно с помощью специальных отдельно устанавливаемых кистей. Тут вообще ничего сложного нет: ищем в поисковых системах «Кисти снега для фотошопа». Но в случае чего кисть можете взять из того же архива, что и текстура.

Теперь устанавливаете кисть в сам фотошоп. Знаете как это делается? Если нет, то прочитайте мою статью про это. Я всё подробно расписал.

Ну а теперь просто выбираем кисть в нашем фоторедакторе, которую мы только что установили, выбираем размер, например 150-200, и начинаем нажимать (только не зажимать!!!) по разным участкам изображения. Только все таки для закрашивания снегом лучше создать отдельный новый слой, чтобы в случае чего снег можно было бы обработать.

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

Цветовая коррекция

Шаг1 Как только мы завершим создавать снег, мы можем провести цветовую коррекцию, чтобы сделать нашу картину более интересной, а также совместить все элементы композиции вместе. В первом шаге мы добавим синий оттенок, чтобы создать холодную атмосферу. Добавьте новый корректирующий слой Карта Градиента

(Gradient Map) поверх всех остальных слоёв через нижнюю панель инструментов. В окне редактора градиента, установите тёмно- синий и светло-синий оттенок, нажмите OK.

Дважды продублируйте корректирующий слой Карта Градиента

(Gradient Map). Поменяйте режим наложения для каждого корректирующего слоя наЦветовой тон (Hue),Цветность (Color) иМягкий свет (Soft Light) соответственно. Установите непрозрачность для всех слоёв 10% плюс-минус.

Вы также можете добавить новый корректирующий слой Кривые

(Curves), чтобы немного усилить контраст.

Шаг2 В этом шаге мы добавим эффект виньетки, чтобы немного выделить нашу главную героиню. Вначале создайте новый слой. Выберите инструмент Прямоугольная область

(Rectangular Marquee Tool (M), создайте прямоугольное выделение в центре изображения. Далее, нажмите клавиши (Ctrl + Shift + I), чтобы инвертировать активное выделение, а затем идёмРедактирование — Выполнить заливку (Edit > Fill) и заливаем активное выделение тёмно-синим оттенком (#222838). Далее, примените большой радиусРазмытие по Гауссу (Gaussian Blur), а также поиграйте с масштабом слоя, пока вас не устроит результат.


Назовите слой с виньеткой ‘Виньетка’, поменяйте режим наложения для слоя с виньеткой на Умножение

(Multiply), непрозрачность слоя 50%.

Шаг3 При работе с данной фотографией, я также добавил новый корректирующий слой Цветовой тон / Насыщенность

(Hue/Saturation) и немного поиграл с оттенками красного цвета, чтобы листья на земле создавали очень красивый контраст с синим оттенок всей картины. Перейдите на слой-маску корректирующего слояЦветовой тон / Насыщенность (Hue/Saturation) и с помощью мягкой чёрной кисти, скройте эффект коррекции на волосах и на коже девушки.

В конце, сгруппируйте все корректирующие слои в одну группу. Назовите новую группу ‘Коррекция’.

Шаг4 Наше изображение готово, но мы можем добавить отдельные детали, чтобы сделать картину более выразительной. Во-первых, если у вас установлена программа Photoshop версия CS6 или выше, вы можете добавить эффект Размытие диафрагмы

(Iris Blur). Для этого, вам вначале необходимо выделить все слои, нажать клавиши (Ctrl + J), чтобы продублировать их, а затем идёмСлой- Объединить видимые (Layer > Merge Layers), чтобы объединить дубликаты слоёв в один слой. Далее, идёмФильтр — Размытие — Размытие Диафрагмы (Filter > Blur > Iris Blur) и играем с настройками, чтобы получить красивый эффект размытия.

Находясь на том же самом слое, мы можем применить фильтр Резкость

(Sharpen), для этого идёмФильтр — резкость — Умная резкость (Filter > Sharpen > Smart Sharpen). Т.к. я работаю с большими размерами изображения, то я использовал радиус 4px, но вы должны уменьшить значение радиуса, если вы работаете с изображением небольших размеров. Основная идея здесь — это утончённость.

Если вы что-то упустили в уроке, то на скриншоте ниже, вы можете увидеть, как должна выглядеть палитра слоёв.

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

Свои алгоритмы на канвасе

Год: 2015 Демо и песочница: ветер с падением и случайными блужданиями скорости, весь экран, завёрнутый в тор
Частиц на демо: 100
Тип: Canvas
Песочница — ДА
Загрузка: 35%
Строк кода: 50
Случайность блужданий приводит к тому, что некоторые частицы, довольно большое их число, летят, постепенно меняя направление и летают всё более произвольно. Нужно «затухание» отклонений скорости, чтобы рой частиц приводился к общему потоку. Множитель *.999 в коде создаёт это «успокаивание». Но действует на скорость вообще, поэтому со временем они будут всё больше замедляться. Для бесконечного падения это не подходит, но нужно падение в пределах экрана. Следующий шаг — это создание земли. Снег будет на ней останавливаться и таять, чтобы, растаяв, частицы снова появлялись сверху (для простоты будет пока что одинаковое число частиц, без оптимизаций).
Демо 2 и песочница: Сцена с таянием снега внизу окна, весь экран
Частиц на демо: 1000
Тип: Canvas
Песочница — ДА
Загрузка: 40-50% (30 FPS)
Строк кода: 50
Величина частиц влияет на то, где они будут останавливаться: чем больше частица, тем ближе к низу окна. Это тоже создаёт эффект трёхмерности и случайное заполнение «земли» снежинками. Вначале нужно запустить заряд снега помощнее, чтобы быстро образовался покров. Через минуту он на глазах начнёт таять, а полностью растаявшие частицв снизу переходят наверх. Круговорот воды. Для изначально равновесного процесса, конечно, нужно равномерно поставлять снег с небес. Но и сезоны таяния и снежных зарядов имеют свой шарм и нескучность. Из этого демо немедленно получаем картинку с оленями, ссылка на которую была вверху статьи (код в песочнице, 30% загрузки, 120 частиц).

Как сделать падающий снег в Инстаграме

Чтобы сделать кружащийся снег на Андроиде, используют специальные программы. Природные фотоэффекты, Nature Photo Effects, простая в использовании бесплатная программа, обрабатывающая изображения. Она накладывает природные анимации на фото. Работа заключается в следующем:

  1. Откройте программу и запустите обработку.
  2. Выберите фото, которое нужно обработать.
  3. Кадрируйте и нажмите кнопку Crop.
  4. Среди представленных эффектов выберите понравившийся и запустите обработку.
  5. Сохраните результат в галерею.

Кроме Nature Photo Effects, есть Just Snow и Afterlight. Оба приложения бесплатны и включают несколько различных текстур.

Для iPhone используют программу Lens Distortions. Чтобы добавить снег, необходимо:

  1. Открыть программу.
  2. Выбрать фотографию и прокрутить список текстур до снега.
  3. Выберите любой, понравившийся, Snow или Shimmer. Наложите текстуру.
  4. Отредактируйте показатели по своему усмотрению или измените текстуру.
  5. Сохраните фото.

Используйте полученное изображение по своему усмотрению.

Ещё немного

Другие крутые зимние приложения для ваших фото:

в Afterlight 2 (цена 229 рублей) – можно сделать волшебный эффект с помощью пункта Свечение.

  • Новый Год 2018: рамки – новогодние рамки, текстуры и шапки;
  • Snapchat – к Новому году появляются крутые маски;
  • Snow – маски, мордочки, стикеры. Сезонная вкладка и раздел Bling;
  • ElfYourself – сделать из себя эльфа;

  • PicNewYear – можно создать красивые и стильные открытки к Новому году или картинки для постов;
  • Рождество и Новый год – рамки для фото, пожелания;
  • Новогодние маски, фотоэффекты, стикеры и смайлики – тут всё понятно;

  • New Year Photo Frames – рамки;
  • Новогодние фото стикеры на Рождество и Новый год.

Обзор алгоритмов с примерами

(При просмотре страниц с примерами будьте готовы к иногда 100%-ной загрузке ядра процессора. При показе ссылки в статье об уровне загрузки предупреждается.)увиденноеновееwww.softtime.ru/javascript/snow-falling.html

Не чистый JS Демо: 400×400, Snowman with Falling Snow
Частиц на демо: 100
Тип: Canvas
Песочница — ДА
Загрузка: 70%
Строк кода: 106 +ProcessingJS (800K)
Рисуется в среде ProcessingJS на 800К несжатого кода, создающей язык типа «Рапира». Снеговик рисуется тем же кодом. Пример — особый. Показывает, что с оболочками наворотить можно чего угодно (для решения простых задач сложными способами), и даже в этом случае Canvas не катастрофически проигрывает решениям на DOM.
Статья (en), 2012 Код: Github Демо: весь экран
Частиц на демо: 500
Тип: Canvas
Песочница? Нет
Загрузка: 100%
Строк кода: 50 + 100 в *.html +ThreeCanvasJS (72K)
72 К сжатого неупакованного кода библиотеки ThreeCanvas.js. 3D-сцена с вращением её движением мыши. Здесь ради плавного движения поставлен малый битрейт, поэтому всё красиво, но как фоновое действие — не слишком подходяще.
Год: 2010 Код: JS Демо и описание: весь экран
Частиц на демо: 60, крутятся в плоскости рисунка
Тип: Canvas
Песочница? Нет
Загрузка: 100%
Строк кода: 160
Очень частая анимация не позволяет и здесь оценить достоинства Canvas. Есть вращение рисованых снежинок вокруг своей оси, медленное падение с блужданиями. Но часть из них «ходит» по синусоидам, кручение в одной плоскости нисколько не придаёт реалистичности, что, наоборот, отторгает от восприятия эффекта, создаёт, скорее, эффект назойливости. Код — наоборот, показывает свою мощность и компактность. В сумме — отличные усилия направлены на достижение немного не тех эффектов, что для потребителя — ничем не лучше поедающих энергию движков на DOM.
    Посмотрим на примеры скриптов, работающих с DOM (слоями), без Canvas.
Год: 2009 Демо: jSnow – jQuery Snow Effect, весь экран Код: JS (несжатый прежней версии)
Частиц на демо: 25
Тип: DOM
Песочница? Нет
Загрузка: 70%
Строк кода: 160 + jQuery
Варианты в песочницах Fiddle (везде используются символьные снежинки):
  • Упакованный (обфусцированный) оригинальный код в песочнице с адаптацией к jQuery 2.
  • Распакованный, но плохо движущийся (малые синусоиды) мод mod1 кода в песочнице с адаптацией к jQuery 2.
  • Восстановленный с рефакторингом имён, стиля, максимально похожий и работающий код (Fiddle) этого скрипта в песочнице. Останавливается/запускается по кнопке останова. В сжатом виде — 1.5К.
  • Расширенный до возможности запуска нескольких объектов в блоках или в целом окне. Запуск по коллекции. В сжатом виде — 1.8 К, меньше оригинального, который 2.2-2.4 для разных модов.
У этого скрипта — характерный почерк движений частиц (сильно в стороны). Если присмотреться — это просто очень большие синусоиды, воспринимающиеся как один большой вихрь посередине окна. Он очень сдержан по трате ресурсов. Исходный код версии 1.2 — утерян или всегда был обфусцирован пакером; распакованные версии 1.1.mod2 (доработанные другими авторами) — есть в песочнице Codepen, но не работают с новыми jQuery, потому что обращаются к отменённым $.browser. И в них видны следы распаковки. Прекрасно смотрится в невысоких заголовках (пример), когда синусоиды не успевают проглядеться. Из десятков примеров, если стоит приглядеться к паре из них (по исполнению и коду), то этот пример — один из них. Поэтому за версию jSnow возьмёмся основательно, запустив в песочнице.

нагружает процессор на 40%1.1.mod2 — на 55%(Калек побеждать — чести маловато.)ограничимся здесь ссылкой на демо демо, (код в репо). Это DOM, нагрузка 30% на поток (15% — общая) с битрейтом 12. Несколько влияет то, что картинки — крупные и прозрачные.типа такого

демо, (кот в репо), загрузка 50% при 75 частицах и 12 FPS.


С этим читают