Это просто бомба!

04 июня 10:43 2011

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

Этап 1. Подготовка и отрисовка основы для бомбы

Но для начала нам нужно набросать чертеж. Я открыл картинку 200х200px, и нарисовал такую форму:

Цвет я использовал не черный, а #161616, чтобы потом можно было работать доджем. Основа есть.

Дальше я придал объем бомбе, инструментом dodge (осветлитель) с такими настройками:

Просто потыкав несколько раз в середине бомбы:

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

Далее применить к нему фильтр Filter>Blur>Blur (Фильтр>Размытие>Размытие), это даст такой эффект:

Хочу придать объем пимпочке справа. 3 раза провожу по ней все тем же инструментом dodge (осветлитель) с теми же настройками, справа налево:

Ну и так как бомбы у нас никто не полирует, она будет с текстурой. Дублирую слой с бомбой, и применяю фильтр Filter>Noise>Add noise (Фильтр>Шум>Добавить шум) с такими настройками:

Получившийся слой перевожу в режим Overlay (Перекрытие), и снижаю непрозрачность до 40%:

Нижняя часть бомбы получилась слишком темной, поэтому затираю ластиком наш верхний слой с текстурой, у нижней части:

Бомба у нас будет на светлом фоне, то от плоскости на ней будет светлый рефлекс.

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

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

И стираю выделение. У нас остается вот такая штука:

Теперь иду в Filter>Blur>Gaussian blur (Фильтр>Размытие>Размытие по Гауссу), с такими настройками:

После чего этот слой перемещаю на 3 пикселя вниз:

Переводим слой в режим «Перекрытие», дублируем, переводим дубль в режим «Мягкий свет», понимажем непрозрачность дубля до 30%. Получаем нормальный рефлекс:

Ура! Но граней нет, поэтому давай их сделаем. Дублирую слой с бомбой. Делаю его белым, создаю выделение бомбы. Иду в  Select>Modifity>Expand (Выделение>Модификация>Сжать), проставляем 1 пиксель, жмем ок. Далее crtl+shift+i — это инвертирует наше выделение. Надо его отчистить с помощью backspace.

Опять жмем crtl+shift+i, и опять идем в Select>Modifity>Expand (Выделение>Модификация>Сжать), проставляем 1 пиксель, жмем ок. Опять отчищаем выделение. Готовы наши грани:

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

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

Тут очень тонкий момент, слой с гранями нужно перевести в режим перекрытие и осторожно, ластиком с интенсивностью 50% затереть места, где граней быть не должно. Это нижняя часть бомбы и бока. Затирать нужно не окончательно, а чтобы было слегка видно их. Должно получиться вот так:

Как видишь, грани есть внизу и сверху. Их еле видно. Еще я пустил небольшой белый градиент сверху бомбы, и поставил в режим «Перекрытие»:

Прекрасно, давай сделаем тень. Жмакаем черной мягкой 100пх кистью и трансформируем вот так:

Подробнее как рисовать тень, ты можешь почитать в уроках «Как нарисовать тень» и «Как нарисовать тень, часть 2«

Как видишь, внизу у нас палево. Бомба слишком светлая в нижней части, поэтому я беру ластик с интенсивностью 50%, и немного затираю грани и рефлекс снизу:

Прекрасно!

Этап 2. Рисуем Фитиль

Я взял инструмент «Кисть», в настройках проставил ее размер — 2 пикселя, так же выбрал цвет #7c6354.

Далее беру инструмент Перо (Peen tool), и рисую такую линию:

Теперь клик правой кнопкой мыши по нашей линии>Выполнить обводку контура>В выпадающем еню выбираем «Кисть», жмем ок, наша линия будет обведена. Правой кнопкой мыши>Удалить контур:

Мне он кажется немного размытым, поэтому я иду в Фильтр>Резкость>Резкость.

Теперь надо превратить эту линию в нормальный фитиль. 🙂

На новом слое я рисую такие белые линии:

Фон я сделал черным, чтобы ты смог увидеть эти белые полоски. Слой с полосками переводим в режим «Перекрытие», а непрозрачность понижаем до 50%. Дублирую слой, сдвигаю его на 1 пиксель вправо, и нажимаю ctrl+i,чтобы инвертировать его, сделать черным. Выделяю сам фитиль, инвертирую выделение через ctrl+shift+i, и удаляю ненужные куски полосок:

Теперь перемещаю фитиль под слои с бомбой, немного осветляю его через ctrl+l, и отрезаю лишний кончик у фитиля, чтобы он не был слишком длинным:

Наш чертеж почти готов. Осталось указать место запала, подожжем фитиль!

Так как, рисовать огонь на белом фоне — это смертоубийство, цвет фона я затемнил до #414141.

Далее создал плагином вот такую искру:

Уменьшаем его и размещаем слой над фитилем, далее Filter>Sharpen>Sharpen (Фильтр>Резкость>Резкость):

Перевожу слой в режим «Линейный осветлитель» (Linear dodge):

Далее берем белую мягкую кисть 15px, и на новом слое кликаем прямо в центр искр, переводим этот слой в режим «Перекрытие»:

Почти готово! Теперь на нужен дым.

Этап 3. Прорисовка дыма

Благо в Гугле рефов дыма много, я выбрал такой:

Дым уменьшаем и переводим слой в режим «Осветление основы»:

Практически готово, остались рефлексы 🙂

Проводим небольшой градиент справа налево по бомбе, цвета #b0a292, вот так:

Уменьшаем непрозрачность слоя до 70%, и переводим в режим «Перекрытие»:

Повторяем предыдущий шаг, но уже с градиентом белого цвета:

Точно так же, только не градиентом, а кисточкой, я сделал рефлекс на полу:

Осталось только сделать свет от самих искр. Для этого я кликаю мягкой кисточкой 40пх того же цвета, каким мы делали рефлексы на бомбе,  под слоями с искрами, и понижаю непрозрачность слоя до 30%:

Поздравляю, готово! Вроде все просто, а урок получился аж в 35 картинок 🙂

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

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