Понедельник, 22 Сентября 2025, 21:36

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

Меню сайта
Категории каталога
Создание игр [360]
Статьи об общих понятиях связанных с созданием игр.
Программирование [85]
Гайды по программированию на разных ЯП.
Движки и Гейммейкеры [156]
Статьи о программах для создания игр, уроки и описания.
Софт [47]
Различные программы, в том числе в помощь игроделам.
2D-графика [14]
Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.
3D-графика [22]
Уроки по моделированию, ландшафт, модели, текстурирование и пр.
Моддинг игр [5]
Модификация компьютерных игр, создание дополнений, перевод, хакинг.
Игры [175]
Статьи об играх, в том числе и сделанных на гейммейкерах.
Разное [135]
Статьи, которые не вошли в определённые разделы.
Наш опрос
Игры какого типа вы предпочитаете делать?
Всего ответов: 16708
Главная » Статьи » Создание игр

Работа в 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)
Просмотров: 16187 | Комментарии: 21 | Рейтинг: 2.1/24 |
Теги: работа в photoshop, обучение, Photo shop CS6, photoshop, Урок, графика, рисование, Меню, Кнопки
Дополнительные опции:
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

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

Всего комментариев: 21« 1 2
+5-
9 animdroid   (29 Июня 2012 00:50) [Материал]
animdroidсо вкусам у тебя не лады wink

+3-
10 Spihex   (29 Июня 2012 02:36) [Материал]
SpihexА у тебя, выходит, с русским языком. Да и не во вкусе дело, а, скорее, в умении.

+6-
11 SanAV   (29 Июня 2012 12:44) [Материал]
SanAVМогу поспорить...

Quote
А поскольку я хорошо знаю Photoshop

+4-
8 romgerman   (27 Июня 2012 22:11) [Материал]
romgermanНе, ну что это такое!? Такое меню, во-первых, режет глаза, а, во-вторых, старомодно.

+5-
7 Gavolot   (27 Июня 2012 17:18) [Материал]
GavolotНе впечатляет, в обычном флеш за 2-3 минуты тоже самое делается. Если уж пишешь про фотошоп и про то, что ты его хорошо знаешь, так и подавай красиво, с большим-большим эффектом "вау".

+3-
6 Wizaryx   (27 Июня 2012 08:59) [Материал]
WizaryxОчень, очень хитрый план) Достаточно сетку включить, скажем 50 на 50, а также привязку к ней. И по кубикам расставить все нужные объекты

+8-
4 sk0rpi0n   (26 Июня 2012 09:16) [Материал]
sk0rpi0nТС, в фотошопе можно с той же сложностью сделать гораздо красивей и более адекватный стиль придумать. Статья на тройку. wink

+-9-
3 FSO   (25 Июня 2012 19:29) [Материал]
FSOТа нормально, но цвет чуть не в тему

+16-
2 SanAV   (25 Июня 2012 18:12) [Материал]
SanAVМои глаза...
Отрубите руки автору.

+4-
5 Stalker_Shooter   (26 Июня 2012 18:47) [Материал]
Stalker_Shooter+1

+13-
1 TLT   (25 Июня 2012 16:47) [Материал]
TLTС подбором цветов у тебя нелады – не сочетаются.

1-10 11-18
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
10 случ. движков
  • AppGameKit Studio
  • Jo Engine
  • Advanced RPG Maker
  • CoolBasic
  • iFVN
  • Amp II Game Engine
  • Rootex
  • PuzzleScript
  • GBDK-2020
  • EMG Studio
  • Друзья сайта
    Игровой форум GFAQ.ru Перевод консольных игр
    Все права сохранены. GcUp.ru © 2008-2025 Рейтинг