Понедельник, 23 января 2017, 07:24

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

Меню сайта
Категории каталога
Создание игр [298]
Статьи об общих понятиях связанных с созданием игр.
Программирование [66]
Гайды по программированию на разных ЯП.
Движки и Гейммейкеры [120]
Статьи о программах для создания игр, уроки и описания.
Софт [27]
Различные программы, в том числе в помощь игроделам.
2D-графика [7]
Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.
3D-графика [8]
Уроки по моделированию, ландшафт, модели, текстурирование и пр.
Моддинг игр [4]
Модификация компьютерных игр, создание дополнений, перевод, хакинг.
Игры [65]
Статьи об играх, в том числе и сделанных на гейммейкерах.
Разное [53]
Статьи, которые не вошли в определённые разделы.
Наш опрос
Какая рубрика портал GcUp.ru вам более нравится?
Всего ответов: 1458
Главная » Статьи » Создание игр

Работа в Photoshop. Создание меню
Здравствуйте. Пришла пора и мне написать статью. А поскольку я хорошо знаю Photoshop, я написал статью про Photoshop.
Внимание! Я использую английскую версию Photoshop CS6.
Сегодня мы нарисуем меню для игры с разрешением 800x600 (хотя по такой же технологии можно сделать и для 1024x768)
Вот как оно будет выглядеть:

А теперь начнём работать.
Создаем документ с Photoshop разрешением 800x600:

Переименовываем слой из Layer 1 в Background. Выделяем инструментом Rectangular Marquee Tool весь рисунок и закрашиваем его
тоном любого цвета, нам сейчас цвет не важен, или возьмите инструмент Paint Bucket Tool и закрасьте рисунок.
Загружаете вот этот рисунок:

Открываете его в Photoshop, переходите в Edit -> Define Pattern... и вводите имя вашей текстуры.
Выделяем слой background, нажимаем на кнопку эффектов и выбираем пункт "Pattern Overlay":

Разверните палитру и выберите появившиюся текстуру из вашего изображения. Параметр Scale установите на 150%, а то слишком
мелко выглядит.
Итак, фон выглядит скучно и плоско:

Нужно его как-то "поднять", разнообразить.
Нажимаем на уже знакомую кнопку и находим пункт "Bevel & Emboss", залазим на подпункт под названием "Texture" и выбираем неровность:
разворачиваем текстуры, нажимаем на шестерёнку и выбираем понравившиюся текстуру:

Вот так лучше.
Теперь переходим к самому меню - к кнопкам, к тексту, и т.д.
Загрузите вот это изображение (это типо логотип, я нарисовал за пять минут с помощью инструмента Pen Tool):

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

Теперь рядом напишите текст "GameTool" (хотя вы можете написать туда что угодн0), используя шрифт Segoe UI с размером 72 pt.
Цвет дайте тексту #666666.
Текст стал сливаться с фоном, надо ему добавить обводку для чёткого разделения.
Слой с текстом стал называться так же, как и вы туда написали в этот слой. У меня он называется "GameTool".
Переходим на слой с текстом, нажимаем уже знакомую кнопку для вызова эффектов и выберем "Stroke".
Устанавливаем параметры: Size - 3px, Position - Outside, цвет - полностью чёрный (#000000), остальные параметры не трогаем.
Вот так хорошо стало:

Ну теперь к самой вкусной части этого урока - создание кнопок. Какое же меню без кнопок? А главное, вы научитесь делать такие аппетитные кнопочки.
И так, раскрываем меню инструмента Rectangle Tool и выбираем Rounded Rectangle Tool:

Теперь переходим к View и открываем пункт New Guide. Выбираем Hopizontal и вводим 4,87 cm.
Опять нажимаем на данную вкладку, опять выбираем Hopisontal и вводим 9,10 cm.
Еще раз нажимаем туда, оставляем Vertical и вводим 8,78 cm.
Ещё один раз нажимаем, оставляем Vertical и вводим 20,57 cm.
Для того, чтобы их случайно не сдвинуть, переходим в View -> Lock Guides. Теперь можно в получившиимся центре сделать кнопку с помощью инструмента
Rounded Rectangle Tool. Инструмент уже выбран, так что просто выделяем его и проводим от левого верхнего угла получившися окошка до правого нижнего края:

Слой с фигурой стал называться Shape 1. Переименовываем его в cnopka1. Нажимаем на кнопку эффектов и выбираем эффект Gradient Overlay.
Градента, который нужен, нет в списке, поэтому мы его сами создадим. Нажимаем два раза на градиент (не на кнопку открытия градиентов!), и открывается Gradient Editor.
Выставляем цвета:

И применяем этот градиент.
Кнопка выглядит плоско, надо её поднять. Поэтому нажимаем на кнопку эффектов и выбираем пункт "Bevel & Emboss".
Выставляем настройки:

Вот и готова кнопка.
Теперь переходим во View и снимаем галочку с Lock Guides.
Затем опять переходим во View и нажимаем пункт Clear Guides.
Перейдите на слой cnopka1 и дублируем его через Layer -> Dublicate Layer, или нажимаем правой кнопкой мыши на слое и выбираем Duplicate Layer.
Дайте имена нашим новым слоям: cnopka2 и cnopka3. Визуально ничего не изменилось, но если мы инструментом Move Tool подвинем наши новые слои, то они сместятся.
Перейдите на слой cnopka2 и зажимая клавишу Shift, перемещаем его вниз. Таким же образом переместите слой cnopka3. (Примечание - зажимать кнопку Shift надо было, чтобы
слой перемещался строго по горизонтали или вертикали.
(Ещё одно примечание: если вы используете Photoshop CS6, то можете видеть, насколько перемещается слой, в этом случае переместите его на ~1,5 cm)
Ну вот, остался только текст:

Напишите текст тем же шрифтом Segoe UI, 48 pt, цвет опять #666666. Напишите тексты - New Game, Help, Exit.
Ура, готово!

Таким же способом можно делать разные меню с разным стилем.
Если что непонятно, исходник прилагается.
Категория: Создание игр | Добавил: mobipak (25 июня 2012)
Просмотров: 6751 | Комментарии: 21 | Рейтинг: 2.1/24 |
Теги: работа в photoshop, Обучение, Photo shop CS6, Photoshop, урок, графика, рисование, меню, Кнопки
Дополнительные опции:
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

Игровые объявления и предложения:
Если вас заинтересовал материал «Работа в Photoshop. Создание меню», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела. Предлагаются такие схожие материалы: Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.

Всего комментариев: 211 2 »
+1-
21 EchoIT   (19 октября 2012 20:49)
EchoITО! Что это?! surprised

Автор, не ну как можно было вообще написать статью о создании такого убожества? cry

+1-
20 zibixibi   (10 октября 2012 23:43)
мне было грустно. прочитал статью улыбнулся)

+0-
19 TLT   (06 сентября 2012 23:07)
TLTНичего не понять, если следовать по шагам, указанным автором.

+2-
18 Undead   (08 августа 2012 16:50)
UndeadУжасный урок, автору отрубить руки.
Вот на такую кнопку у меня ушло 5 минут, притом, что я совершенно не умею рисовать.

+1-
17 ЁжыгГГгГ   (31 июля 2012 13:00)
Не. Не оч. У фотошопа намного больше возможностей.

+1-
16 ЁжыгГГгГ   (31 июля 2012 12:59)
Я в пэйнте лучше нарисую)))

+3-
15 775470   (16 июля 2012 07:03)
не ну прост это тупо картинка.если не прав поправьте

+6-
14 775470   (16 июля 2012 07:01)
для этого и виндоуский пэйнт подойдёт...... blink

+3-
13 kolyanez   (13 июля 2012 22:07)
Твою ж мать...

+11-
12 TimKruz   (30 июня 2012 16:59)
TimKruzА зачем рисовать меню в каком-то фотошопе? Меню рисуется сразу в программе, из отдельных частей.
Чтобы сделать такое меню, достаточно сделать отдельно кусок фона (он же повторяющийся) или весь фон, логотип (если, конечно, нужен), и две кнопки - просто кнопка и в нажатом положении. Дальше программно просто рисовать в нужном порядке на нужных местах - это проще.
А сам урок плохой. Ни о чём. Ты просто предлагаешь применить пару эффектов к готовым картинкам, при этом просто говоришь, куда кликать, не объясняя, что там и как (да, я думаю, ты сам не знаешь, что и как там работает, поэтому молчишь об этом).
И, если ты считаешь полученную картинку красивой - у тебя дурной вкус. Серые тонкие надписи на огромных кроваво-красных кляксах на фоне цвета фекалий, размазанных ровным слоем по неровной доске.
А название игры должно быть по центру. "Логотип" вообще не к месту.
Quote
Загрузите вот это изображение (это типо логотип, я нарисовал за пять минут с помощью инструмента Pen Tool):

Пять минут у тебя ушло на три полоски? Да любой первоклассник нарисует такую же картинку в MS Paint за 10 секунд. Не стоило хвастаться этим.
Quote
Если что непонятно, исходник прилагается.

Куда он прилагается, к какому месту? У тебя там только PNG-картинки с конечным вариантом. Исходник в Photoshop (а также Paint.NET, Corel Draw и в других подобных редакторах) - специальный файл (для Photoshop - формата .psd), в котором сохранено разбиение на слои, объекты (если вектор) и т.п. А ты, наверное, сохранил сразу в PNG...
Quote
хотя вы можете написать туда что угодн0

Спасибо, что разрешил мне написать туда что-то своё, а не "GameTool". smile
Quote
Переименовываем его в cnopka1.

Может быть, всё-таки лучше Button1? Или хотя бы Knopka1, если в английском даже такого простого слова не знаешь.

1-10 11-18
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
10 случайных движков
  • Noobster
  • Risen3D
  • nGENE
  • GameDirector
  • ScoreDoom
  • GamePlay
  • Phaser
  • DizzyAGE
  • HeroEngine
  • Demoniak3D
  • Друзья сайта
    Игровой форум GFAQ.ru Перевод консольных игр
    GameDev, Уроки OpenGL, Программирование, Создать Minecraft
    Все права сохранены. GcUp.ru © 2008-2017 | Free GIF Animator Рейтинг