Четверг, 25 Апреля 2024, 07:10

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Форум игроделов » Ресурсы и Примеры игр » 2D-графика и рисование » Миниурок Photoshop - рисование шейпами и стилями (на примере спрайтов пользователя SkyCapitan)
Миниурок Photoshop - рисование шейпами и стилями
SaladinДата: Суббота, 11 Августа 2012, 02:15 | Сообщение # 1
заслуженный участник
Сейчас нет на сайте

Во-первых прошу SkyCapitan меня извинить, за то что без спроса использовал его спрайты для этого урока. Честно говоря изобретать велосипед мне было не с руки, да и многим эти спрайты понравились, поэтому выбор для меня был очевиден smile
Во-вторых использование профессионального по подразумевает под собой знание инструментария. Не рассчитывайте, что я вам подробно разжую какие кнопки жать степ-бай-степ. Для знакомства с инструментами есть специализированные уроки.

Начнем пожалуй с вводной. Что такое шейпы и что такое стили. Шайп - (от англ. форма, фигура) в фотошопе это векторная маска нанесенная на слой. Так как для калькуляции формы используются математические формулы, как в векторной графике, они предпочтительнее чем нарисованные кистью, так как имеют равномерный четкий край и масштабируются без искажений. Есть несколько инструментов в фотошоп, которые позволяют работать с шейпами:

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


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

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

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

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

Под спойлером все эффекты, которые я использовал для щитков:

Где то в процессе этих экспериментов у меня получились вот такие заготовки:

Еще немного поработав с простыми фигурами волучилось вот так:

Для "внутренностей" этого то ли вездехода, то ли танка, процесс создания равно настолько же прост. Под спойлером используемые эффекты:

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


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

Вот так смотрятся эти эффекты на отдельно взятом куске градиента smile

А вот они же на наших заготовках:


Ну вот мы практически завершили сборку спрайта. Нужно совместить все заготовки воедино. Выделите все слои относящиеся к шасси и выполните сведение, теперь то же самое для слове башни. Я на свой вкус добавил после сведения на башню еще эффект падающей тени и немного поработал инструментом "Осветление/Затемнение".


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

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

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


Анбаннэд. Хэлоу эгин =)
GeForceVolumeДата: Суббота, 11 Августа 2012, 05:53 | Сообщение # 2
почетный гость
Сейчас нет на сайте
Очешуенный урок! Возьму на заметку!

Guitar Hero - Blur
dima9595Дата: Суббота, 11 Августа 2012, 09:09 | Сообщение # 3
почти ветеран
Сейчас нет на сайте
GeForceVolume, согласен!
Saladin, лови +


andre_yДата: Суббота, 11 Августа 2012, 09:44 | Сообщение # 4
почти ветеран
Сейчас нет на сайте
Saladin, да урок хороший, тоже часто рисую подобным образом
sk0rpi0nДата: Суббота, 11 Августа 2012, 10:14 | Сообщение # 5
Tiberium
Сейчас нет на сайте
Добавлю в закладки, может пригодиться при рисовании текстур для объектов. smile



Adventures of the Purple Ball - готов.
Wanderer - готов.
GameMixДата: Суббота, 11 Августа 2012, 10:57 | Сообщение # 6
старожил
Сейчас нет на сайте
Saladin, хорош урок! Ещё будут?

Steel Standoff - 2D аркада.
Мои статьи
SilkTДата: Суббота, 11 Августа 2012, 11:02 | Сообщение # 7
участник
Сейчас нет на сайте
Насколько помню, SkyCapitan делает модели в фш и натягивает текстурки.
За урок спасибо, хочу еще урок по моделингу в фш
Stalker_ShooterДата: Суббота, 11 Августа 2012, 11:09 | Сообщение # 8
3D XNA'шник
Сейчас нет на сайте
Урок отличный. Жаль, что нет чего-то подобного для Gimp

*Не убегай от снайпера, умрешь уставшим.
*Мои статьи...
SnakeRДата: Суббота, 11 Августа 2012, 11:44 | Сообщение # 9
постоянный участник
Сейчас нет на сайте
SilkT, какой моделинг в фотошопе? Что вы несете сударь) SkyCapitan делает таким же точно образом из примитивов.

Unity3D Developer
Ваш лучший помощник при разработке в Unity3D
SilkTДата: Суббота, 11 Августа 2012, 12:34 | Сообщение # 10
участник
Сейчас нет на сайте
Тогда я не правильно понял его фразу
Quote
SilkT, моделированием в PhotoShop. Строю из примитивов основу, раскрашиваю ее, делаю тени и детали
M@sterДата: Суббота, 11 Августа 2012, 14:10 | Сообщение # 11
был не раз
Сейчас нет на сайте
урок хороший)
SaladinДата: Суббота, 11 Августа 2012, 14:16 | Сообщение # 12
заслуженный участник
Сейчас нет на сайте
Уф... я рад что вам понравилось. Если найду еще какую нибудь интересную тему для урока - обязательно напишу еще. smile

Анбаннэд. Хэлоу эгин =)
SkyCapitanДата: Воскресенье, 12 Августа 2012, 00:08 | Сообщение # 13
SkyDigital
Сейчас нет на сайте
Лол, только сейчас заметил этот урок) Молодец Saladin, круто получилось) На самом деле я чуть иначе делал)

"Что общего между Вселенной и тупостью школоты? Да они оба бесконечны. Только насчет Вселенной не уверен."

Альберт Эйнштейн
SilkTДата: Воскресенье, 12 Августа 2012, 00:32 | Сообщение # 14
участник
Сейчас нет на сайте

Вот моя попытка, как вам?


Сообщение отредактировал SilkT - Воскресенье, 12 Августа 2012, 00:41
SkyCapitanДата: Воскресенье, 12 Августа 2012, 00:37 | Сообщение # 15
SkyDigital
Сейчас нет на сайте
Форму нужно задавать не только модификатором Bevel and Emboss. Некоторые тени нужно рисовать вручную. Свечения у соответствующих объектов слишком тусклые. Края форм нужно обрабатывать кистями, создавая эффект пошарпанности.

"Что общего между Вселенной и тупостью школоты? Да они оба бесконечны. Только насчет Вселенной не уверен."

Альберт Эйнштейн
SilkTДата: Воскресенье, 12 Августа 2012, 00:52 | Сообщение # 16
участник
Сейчас нет на сайте
А какими кистями обрабатывать края
Quote (SkyCapitan)
создавая эффект пошарпанности

А то я пытался довольствоваться приемами предоставленными в уроке и текстурами, найденными в гугле.
SkyCapitanДата: Воскресенье, 12 Августа 2012, 00:58 | Сообщение # 17
SkyDigital
Сейчас нет на сайте
SilkT, кстати текстурой можно сделать любое изображение, предварительно выбрав Edit > define pattern... (Даже если буду Кэпом, мне по***))).

Кисти вполне могут подойти и эти:



"Что общего между Вселенной и тупостью школоты? Да они оба бесконечны. Только насчет Вселенной не уверен."

Альберт Эйнштейн
SilkTДата: Воскресенье, 12 Августа 2012, 01:02 | Сообщение # 18
участник
Сейчас нет на сайте
Quote (SkyCapitan)
SilkT, кстати текстурой можно сделать любое изображение, предварительно выбрав Edit > define pattern...

Так и делаю smile
SkyCapitan, спасибо за кисти
SaladinДата: Воскресенье, 12 Августа 2012, 02:44 | Сообщение # 19
заслуженный участник
Сейчас нет на сайте
Quote (SilkT)
Вот моя попытка, как вам?

Quote (SilkT)
А то я пытался довольствоваться приемами предоставленными в уроке

Ты не правильно понимаешь принцип создания спрайта и концепт арта.
Никто не делает спрайты размером в мегапиксель чтобы потом ужать их до 30-60 пикселей. Во-первых это непродуктивно, так как ужимая такую большую картинку ты теряешь множество мелких деталей, на которые предварительно тратишь время, теряешь четкость картинки, которая при уменьшении обязательно станет мыльной. А во-вторых намного удобнее рисовать в натуральный, или чуть больше натурального, размер, ибо так ты сразу видишь как это будет выглядеть без искажений, масштабирования и прочего, что отвлекает от поставленной цели.
Еще нужно учитывать, что фотошоп в некоторых случаях просто не в состоянии обработать нужный эффект на большой картинке. У него тоже есть свои ограничения. И вообще это ужасная привычка - рисовать громадные картинки, от которой нужно избавляться, чем раньше - тем лучше. Большой размер это необходимость а не фетиш или прихоть. Ваш рисунок не становится круче от того, что вы нарисовали его в десять раз больше нужного. Учитесь быть аккуратными и лаконичными.

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


Анбаннэд. Хэлоу эгин =)
SkyCapitanДата: Воскресенье, 12 Августа 2012, 03:00 | Сообщение # 20
SkyDigital
Сейчас нет на сайте
Quote (Saladin)
это либо есть либо нет


Согласен


"Что общего между Вселенной и тупостью школоты? Да они оба бесконечны. Только насчет Вселенной не уверен."

Альберт Эйнштейн
Форум игроделов » Ресурсы и Примеры игр » 2D-графика и рисование » Миниурок Photoshop - рисование шейпами и стилями (на примере спрайтов пользователя SkyCapitan)
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг