Пятница, 29 Марта 2024, 16:51

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

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Форум игроделов » Ресурсы и Примеры игр » 2D-графика и рисование » Урок по PhotoShop - создание значка звания (В стиле космической флотилии)
Урок по PhotoShop - создание значка звания
SkyCapitanДата: Воскресенье, 12 Августа 2012, 06:22 | Сообщение # 1
SkyDigital
Сейчас нет на сайте
Всем привет. Вот решил таки сделать свой первый урок. Продолжу тему Saladin'а насчет рисования шейпами. Этот урок подразумевает выражения вашей фантазии в виде экспериментирования с эффектами и формами (впрочем, не только в этом уроке я бы советовал импровизировать. Это по жизни полезная штука - импровизация)). И я давно хотел нарисовать что-то в стиле Sins of The Solar Empire)

Вот что должно получится:



А вот и образчик:



Начнем с простенького, а именно создадим документ File > New любого размера на ваше усмотрение (я взял банальные 500Х500).

Далее создадим шестиугольник. Число сторон в графе sides зададим конечно-же... 6

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



P.S. Я пользовался методом Warp и Skew, но если вы знаете лучше... ну что ж, значит я лох)

Выделяем этот слой нажатием в панели слоев по нему и удерживая ctrl. Удаляем его. Переходим к слою-оригиналу и растрируем его (Rasterize Layer), после чего удаляем в нем выделенный внутренний шестиугольник. На выходе получаем вот это:



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

Для начала я сделал первый градиент состоящий из светло-серого,чуть потемнее, черного, предыдущего цвета и снова светло-серого. Наклонил под 26 градусов. Все. Конвертируем и делаем второй градиент, на этот раз радиальный. Я выбрал в списке градиентов второй, который наполовину черный и на вторую половину прозрачный. Расположил его чуть левее центра. В конце всего действа применил Bevel and Emboss и вот что получил:



P.S. На правой нижней внутренней грани сделал нечто похожее на блик путем мазанья по нему инструментом Dodge Tool.

Воот... следующим шагом будет создание внутренней поверхности значка. Элементарно создаем шестиугольник позади основного слоя. Я применил к нему наложение текстуры, которую сделал сам. Объясняю как: создал новый файл величиной 4Х4 и прозрачным фоном и карандашом в 1 пиксель нарисовал две параллельные линии с промежутком между ними так же в 1 пиксель. Я думаю, все равно никто ничего не понял, так что показываю:



Далее назначаем его как текстуру Edit > Define Pattern

С этим разобрались, идем далее. Создадим блик на этой поверхности. Делаем белый прямоугольник, изменяем его форму с помощью деформации Warp как показано на рисунке



Обрезаем по форме внутренней поверхности. "Как?",- спросите Вы.Да очень просто: выделяем слой внутренней поверхности нажатием на нее и удерживанием ctrl, жмем правой кнопкой мыши, выбираем Select Inverse, выбираем наш слой с бликом, удаляем лишнее предварительно растрировав. Ну вообще-то можно было просто дотрансформировать этот слой так чтобы не были видны края из-за основного слоя, но мы ведь не ищем легких путей, верно?

Делаем наш слой с бликом прозрачным до 12%. Здесь все.

Далее самый смак. Как я это называю - "имитация 3D"). Выбираем основной слой и выделяем так, как показано на рисунке:



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



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

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



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



Проявив, опять же, мою любимую фантазию, я поигрался с текстурами и внутренним свечением и вот что получил в итоге:



Если кому что-то не понятно, пишем, не стесняемся, можно даже в ЛС.

Кстати, вполне могут возникнуть вопросы по поводу создания звезды. Это делается очень просто, тем же способом "имитации 3D", т.е. созданием объемности с помощью дополнительных фигур.


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

Альберт Эйнштейн


Сообщение отредактировал SkyCapitan - Воскресенье, 12 Августа 2012, 09:49
VadichДата: Воскресенье, 12 Августа 2012, 10:40 | Сообщение # 2
почти ветеран
Сейчас нет на сайте
Хороший урок.

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


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


UX/UI designer/artist, pixel artist, 2D
SkyCapitanДата: Воскресенье, 12 Августа 2012, 10:43 | Сообщение # 3
SkyDigital
Сейчас нет на сайте
Vadich, я ожидал подобного замечания. У меня своя политика на этот счет: я не даю возможности все настройки скатать под копирку, дав возможность поэкспериментировать или подумать, если хочешь, над внешним видом получаемого рисунка)

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

Альберт Эйнштейн
VadichДата: Воскресенье, 12 Августа 2012, 10:48 | Сообщение # 4
почти ветеран
Сейчас нет на сайте
SkyCapitan, то, что настройки вариабельны, и так понятно. Ну да дело хозяйское, труд по-любому полезный и заслуживает + smile

UX/UI designer/artist, pixel artist, 2D
SkyCapitanДата: Воскресенье, 12 Августа 2012, 10:52 | Сообщение # 5
SkyDigital
Сейчас нет на сайте
Vadich, спасибо happy До этого я не прибегал к теме такого стиля

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

Альберт Эйнштейн
MrNeshДата: Воскресенье, 12 Августа 2012, 10:58 | Сообщение # 6
Воин добра и света
Сейчас нет на сайте
Мне очень потравилось...еще лучше видео смотреть smile

SaladinДата: Воскресенье, 12 Августа 2012, 11:47 | Сообщение # 7
заслуженный участник
Сейчас нет на сайте
Замечательно что люди потянулись писать уроки, может раздел все таки не безнадежно потерян)))
Урок хороший, хотя да, без хотя бы частичного иллюстрирования настроек сложновато воспринимать. Молодец, плюсую smile


Анбаннэд. Хэлоу эгин =)
SkyCapitanДата: Воскресенье, 12 Августа 2012, 11:49 | Сообщение # 8
SkyDigital
Сейчас нет на сайте
Saladin, в следующем уроке постараюсь выполнить это пожелание

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

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

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