Создаем молнию в Adobe Illustrator. Создаём реалистичную молнию в Фотошоп

Как создавать одежную молнию в Adobe Illustrator – Часть 2

Во второй части урока мы раскрасим в Adobe Illustrator векторные объекты застежки – молнии, используя традиционные техники, а также создадим текстуру ткани при помощи Phantasm CS. В создании бликов нам поможет Width Selector Tool (плагин WidthScribe).

Первая часть данного урока находится здесь.

Шаг 1

Начнем с создания фона. Я всегда двигаюсь от нижележащих и больших по размеру объектов к вышележащим и более мелким объектам при их раскраске. Это правило позволяет сразу выбрать цветовую схему и установить направление света в композиции. Итак, создаем прямоугольник при помощи инструмента иллюстратора Rectangle Tool (M), затем заливаем его эллиптическим градиентом от белого к серому цвету.

Копируем прямоугольник и вставляем его вперед (Cmd / Ctrl + C; Cmd / Ctrl + F). Заливаем новый объект светло-серым цветом.

Шаг 2

Дублируем объект еще раз. Заливаем верхний прямоугольник более темным оттенком серого цвета.

Создадим текстуру при помощи Phantasm CS. Не снимая выделения с последнего прямоугольника, переходим Effect > Phantasm CS > Halftone…. В открывшемся диалоговом окне устанавливаем параметры, указанные на рисунке ниже.

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

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

Шаг 3

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

Шаг 4

При помощи Pen Tool (P) создадим путь, форма и расположение которого показана на рисунке ниже.

Выделяем путь и три верхних прямоугольника, созданные в предыдущих шагах, затем переходим Object > Clipping Mask > Make или используем комбинацию горячих клавиш Cmd / Ctrl + 7.

Шаг 5

Перетащим застегнутую часть молнии в Clipping Group, которая была создана в предыдущем шаге. Это действие необходимо произвести в панели Layers. Часть молнии, которая выходит за пределы фона стала не видна.

Выделяем видимые зубцы застегнутой молнии при помощи Direct Selection Tool (A), затем заливаем их вертикальным линейным градиентом, который состоит из двух оттенков серого цвета.

Шаг 6

Создадим прямоугольник и расположим его ниже зубцов молнии. Заливаем прямоугольник горизонтальным линейным градиентом от белого к темно-серому цвету и затем опять к белому цвету. Применим к этому объекту режим смешивания Multiply.

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

Шаг 7

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

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

Точки градиентной сетки окрашены в белый и темно-серый цвет.

Шаг 8

Применим режим Multiply к градиентной сетке.

Перетащим градиентную сетку в Clipping Group в панели Layers для того чтобы скрыть ее ненужные части.

Такая же тень должна быть создана со второй стороны замка, но вы, надеюсь, понимаете, что ее нужно просто продублировать при помощи Reflect Tool (O).

Шаг 9

Приступим к раскрашиванию ползунка молнии. Формы этого объекта заливается градиентами в соответствии с направлением света (сверху вниз). На рисунках ниже представлены этапы этой работы.

Шаг 10

Создадим кромку по краю одного из колец. Выделяем кольцо, затем переходим Object > Path > Offset Path… и устанавливаем величину смещения в диалоговом окне.

Заливаем полученный объект другим линейным градиентом. Так мы получили блик на кромках кольца.

Шаг 11

Используя эту технику, создадим кромку на других объектах.

Шаг 12

Приступим к созданию бликов. Создадим эллипс, затем переместим нижнюю его точку при помощи Direct Selection Tool (A). Заливаем эллипс радиальным градиентом.

Создадим еще один эллипс, который обрежем по контуру нижележащей фигуры при помощи Shape Builder Tool. Заливаем полученный объект радиальным градиентом от белого к черному цвету, затем применяем режим Screen.

Шаг 13

Некоторые блики будут иметь дугообразную форму. Создадим путь, как показано на рисунке ниже.

Применим к нему width profile1 в панели Stroke.

Шаг 14

Мы получили путь переменной ширины, с которым продолжим работать при помощи Width Selector Tool (плагин Width Scribe). Нажимаем на кнопку Return / Enter для открытия диалогового окна Width Selector Preferences. Выбираем опцию Shift Stroke From Side to Side

Теперь выделим центральный маркер ширины и используя клавишу “правая квадратная скобка” сместим его внутрь криволинейного сегмента.

Шаг 15

Выделяем путь, затем переходим Object > Path > Outline Stroke. Теперь заливаем полученный объект линейным градиентом, который состоит из нескольких оттенков серого цвета.

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

Шаг 16

И в заключении создадим тень от ползунка. Создадим два объекта, форма которых показана на рисунке ниже. Нижний объект залит светло-серым цветом и имеет прозрачность 0%. Верхний объект залит темно-серым цветом и имеет прозрачность 100%. Выделяем оба объекта, затем переходим Object > Blend > Make (видимость вышележащих объектов отключена для наглядности).

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

31 марта 2014 | Опубликовано в Уроки | 3 Комментариев »

В этом уроке для Adobe Illustrator мы пройдемся по важным и базовым техникам и инструментам иллюстратора. А задачей нашей будет создание изображения молнии. Мы будем использовать эффект Roughen/Огрубление, Tweak/Помарки и создавать множество световых эффектов.

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

Шаг 1

Создайте новый документ размером 800 x 600px. Инструментом Rectangle/Прямоугольник (M) нарисуйте прямоугольник по размеру документа. Теперь в палитре Gradient/Градиент укажите прямоугольнику радиальный градиент от темно-серого (R=77 G=77 B=77) до черного (R=0 G=0 B=0). Инструментом Gradient/Градиент растяните его как показано ниже.

Шаг 2

Копируйте серо-черный прямоугольник и вставьте копию поверх. Откройте палитре Gradient/Градиент и укажите копии прямоугольника линейный градиент следующий оттенков синего: R=45 G=136 B=190, R=0 G=66 B=199, R=16 G=95 B=160, R=4 G=86 B=235. Не снимая выделения в палитре Transparency/Прозрачность смените Blending Mode/Режим наложения на Overlay/Перекрытие (Opacity/Непрозрачность 85%).

Шаг 3

Пришло время рисовать молнию! Кликните для начала на инструменте Paintbrush/Кисть (B), чтобы открыть настройки кисти. В появившемся окне укажите настройки как показано ниже. Нажмите OK.

Инструментом Paintbrush/Кисть (B) нарисуйте волнистую линию как показано ниже. Не снимая выделение с контура, в палитре Stroke/Обводка выберите ‘Width Profile 4′ и укажите толщину в 4pt. В палитре Color/Цвет выберите белый цвет для линии (R=255 G=255 B=255).

Шаг 4

Убедитесь что линия все еще выделена, и в меню выберите Effect > Distort & Transform > Roughen…/Эффект>Исказить и трансформировать>Огрубление. Настройте параметры как на второй картинке ниже.

Теперь в меню выберите Effect > Distort & Transform > Tweak…/Эффект>Исказить и трансформировать>Помарки. Укажите параметры как на четвертой картинке ниже.

Не снимайте выделения с линии и зайдите в палитру Graphic Styles/Стили графики. Кликните по New Graphic Style/Новый стиль графики. Дважды кликните по стилю и переименуйте его в ‘Main Lightning Strike’.

Шаг 5

Инструментом Paintbrush/Кисть (B) нарисуйте линии-молнии отходящие от основной. Выделите их и в палитре Graphic Styles/Стили графики выберите созданный нами в предыдущем шаге стиль. В палитре Stroke/Обводка укажите линиям меньшую толщину обводки.

Сгруппируйте все линии составляющие молнию (Ctrl+G) и в меню выберите Effect > Stylize > Outer Glow…/Эффект>Стилизация>Внешнее свечение. Примените параметры как показано на четвертой картинке ниже.

Шаг 6

Давайте нарисуем ответвления света. Инструментом Paintbrush/Кисть (B) нарисуйте ответвление от молнии. Не снимая выделение с линии, и в палитре Stroke/Обводка выберите ‘Width Profile 1′. Укажите обводке толщину в 0.2pt и белый цвет (R=255 G=255 B=255). В палитре Transparency/Прозрачность снизьте Оpacity/Непрозрачность до 50%.

Шаг 7

Не снимайте выделения с ответвления и в меню выберите Effect > Distort & Transform > Roughen…/Эффект >Искажение и трансформация > Огрубление. Настройте параметры как показано на второй картинке ниже.

Теперь в меню выберите Effect > Distort & Transform > Tweak…/Эффект >Искажение и трансформация>Помарки. Настройте параметры как показано на четвертой картинке ниже.

Откройте палитру Graphic Styles/Стили графики и нажмите на New Graphic Style/Новый стиль графики. Переименуйте новый стиль в ‘Forks of Lightning’.

Шаг 8

Возьмите инструмент Paintbrush/Кисть (B) и нарисуйте столько ответвлений, сколько вам хочется. Когда закончите, выделите все ответвления и примените к ним последний созданный стиль графики. Вы можете указать некоторым ответвлениям другую толщину обводки, чтобы разнообразить общую картину. Сгруппируйте все ответвления и в меню найдите Effect > Stylize > Outer Glow…/Эффект>Стилизация>Внешнее свечение. Укажите параметры как показано на четвертой картинке ниже.

Шаг 9

Теперь нам нужно создать яркое облако света. Возьмите инструмент Ellipse/Эллипс (L) и нарисуйте круг размером 140 x 140px. В палитре Gradient/Градиент укажите кругу градиент от белого к черному, а инструментом Gradient/Градиент растяните его как показано на первой картинке ниже. В палитре Transparency/Прозрачность смените Blending Mode/Режим наложения на Screen/Осветление (Opacity/Непрозрачность 100%).

Теперь создайте овал размером 300 x 65px и поместите его прямо поверх предыдущего. Откройте палитру Gradient/Градиент и залейте овал градиентом, как показано на четвертой картинке ниже. Укажите Blending Mode/Режим наложения Color Dodge/Осветление основы.

Создайте еще один круг размером 90 x 90px. Укажите ему режим наложения Color Dodge/Осветление основы. Поместите его поверх всех остальных овалов.

Всю получившуюся конструкцию поместите в основании молнии.

Шаг 10

Инструментом Ellipse/Эллипс создайте идеальный круг (удерживайте Shift для этого) размера 150 x 150px. Залейте круг радиальный градиентом следующих цветов: светло-серый (R=177 G=177 B=177) и черный (R=0 G=0 B=0). Смените режим наложения на Color Dodge/Осветление основы. Сделайте несколько копий и расположите их по всей молнии.

Эффект молнии в Photoshop

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

Для создания молнии мы используем только собственные фильтры Photoshopa`а, без применения каких-либо сторонних изображений с молниями или какими-либо вспышками.

Итак, давайте начнём.
Открываем фотографию в Photoshop, открываем панель слоёв (клавиша F7) и создаёи новый слой, нажав комбинацию Ctrl+Shift+N. На этом слое мы и будем рисовать молнию, чтобы не повредить оригинал.

Выбираем инструмент Лассо (Lasso Tool), можно обычное, можно прямолинейное, и создаём примерно такое выделение на месте будущей молнии:

Теперь следует залит это выделение белым цветом. Для этого нажимаем клавишу D (цвета в палитре цветов меняются на дефолтные, черный – основной, белый фоновый) и для заливки выделения фоновым цветом нажимаем комбинацию клавиш Ctrl+Delete или Ctrl+Backspace:

Теперь нарисуем контур будущей молнии. Выбираем инструмент “Кисть” (Brush Tool), форма – круглая, ставим жёсткость (Hardness) 100%, Непрозрачность (Opasity) также ставим 100%, диаметр подбираем в зависимости от размера изображения, цвет, как Вы помните, установлен чёрный, и рисуем примерно такую ломанную линию:

Затем докрашиваем чёрным левую сторону белой области:

Теперь размоем линию. Пройдите по вкладке главного меню Фильтр –> Размытие –> Размытие по Гауссу (Filter –> Blur –> Gaussian Blur). Это действие открывает диалоговое окно фильтра. Увеличим величину радиуса, это значение также подбирается в зависимости от размера изображения, в моём случае подошло 8 пикселей:

Нажмите кнопку ОК для применения действия фильтра. Теперь картинка будет выглядеть примерно так:

Применим фильтр “Облака с наложением”, для этого пройдите по вкладке главного меню Фильтр –> Рендеринг –> Облака с наложением (Filter –> Render –> Difference Clouds). Диалогового окна у этого фильтра нет, таким образом, Photoshop сразу применяет его действие:

Инвертируем значения яркости (иными словами, заменим тёмные участки на светлые и наоборот) в выделенной зоне изображения, для этого надо нажать комбинацию клавиш Ctrl+I:

Теперь максимально увеличим контрастность с помощью инструмента “Уровни”. Нажмите Ctrl+L для открытия диалогового окна этого инструмента.

Затем, нажмите на черный ползунок под гистограммой и перетащите его в правую сторону. При перетаскивании вы увидите, что светлые области вокруг молнии начинают исчезать ( чернеть). Продолжайте перетаскивание ползунка вправо, пока большая часть светлого вокруг молнии не исчезнет. Но у нас остались ещё несколько серых зон. Для борьбы с нами перетащите вправо серый ползунок:

Теперь изображение выглядит вот так, и у нас ещё осталось несколько серых зон:

Уберём их кистью. Снимите выделение, нажав Ctrl+D и выберите круглую кисть диаметром около 50 пикс, непрозрачность сделайте 100%, а жёсткость уменьшите до примерно 40%, цвет переднего плана у нас чёрный. Закрасьте оставшиеся серые области, а также, обведите нашу чёрную зону с тем, чтобы у неё были размытые края:

Измените режим наложения на “Экран” (Screen) и Вы увидите, как чернота исчезнет:

Теперь, если необходимо, можно изменить положение и размер молнии с помощью инструмента “Свободная трансформация” (Ctrl+Т).

Давайте добавим блеск молнии. Для этого сначала продублируем слой, нажав Ctrl+J, обратите внимание, что копия автоматически устанавливается в режим наложения “Экран”:

Применим теперь фильтр “Размытие по Гауссу” со значением примерно 8 – 10. После нажатия кнопки ОК Вы увидите лёгкое свечение вокруг молнии:

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

Вот мой результат с более интенсивным свечением:

Выделите все три слоя с молнией и нажмите Ctrl+E для их слияния, после чего в панели слоёв у Вас останутся два слоя:

У меня изменился режим наложения на “Обычный”, изменю его снова на “Экран”.

Раскраска молнии

Придадим молнии цвет с помощью инструмента “цветовой тон/Насыщенность (Hue/Saturation), для открытия его диалогового окна нажмите комбинацию клавиш Ctrl+U и измените значения, как показано на рисунке, не забудьте поставить галку у “Тонирование” (Colorize):

Вот как выглядит молния после окраски:

Нажмите комбинацию клавиш Ctrl+Shift+Alt+E, это объединяет существующие слои в новый слой над ними в палитре слоёв:

Придание молнии яркости и блеска

Для выполнения этой задачи воспользуемся инструментом “Осветлитель” (Dodge Tool). Это очень важный момент, т.к. он и делает молнию похожей на молнию. В панели параметров зададим следующие значения:
Диапазон (Range) – Подсветка (Highlights)
Экспозиция (Exposure) – 50%
Снять галку у опции “Защитить тона” (Protect Tones):

Жёсткость ставим на ноль, диаметр – в зависимости от рисунка.

Я прорисовал “Осветлителем” зону облаков, откуда “выстрелила” молния, а также область у земли. Кроме того, можно осветлить области в середине линии:

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

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение “Фонарик” для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

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

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

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое “спасибо”, поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Источники:

https://ru.vectorboom.com/load/uroki/illjustracii/kak_sozdavat_odezhdu_molnii_v_adobe_illustrator_chast_2/5-1-0-277
https://www.dejurka.ru/tutorial/lightning-bolt-effect/
https://rugraphics.ru/photoshop/effekt-molnii-v-photoshop