Здравствуйте. Пришла пора и мне написать статью. А поскольку я хорошо знаю 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. Ура, готово! Таким же способом можно делать разные меню с разным стилем. Если что непонятно, исходник прилагается.
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:
Игровые объявления и предложения:
Если вас заинтересовал материал «Работа в Photoshop. Создание меню», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела.
Предлагаются такие схожие материалы:
Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.
А зачем рисовать меню в каком-то фотошопе? Меню рисуется сразу в программе, из отдельных частей. Чтобы сделать такое меню, достаточно сделать отдельно кусок фона (он же повторяющийся) или весь фон, логотип (если, конечно, нужен), и две кнопки - просто кнопка и в нажатом положении. Дальше программно просто рисовать в нужном порядке на нужных местах - это проще. А сам урок плохой. Ни о чём. Ты просто предлагаешь применить пару эффектов к готовым картинкам, при этом просто говоришь, куда кликать, не объясняя, что там и как (да, я думаю, ты сам не знаешь, что и как там работает, поэтому молчишь об этом). И, если ты считаешь полученную картинку красивой - у тебя дурной вкус. Серые тонкие надписи на огромных кроваво-красных кляксах на фоне цвета фекалий, размазанных ровным слоем по неровной доске. А название игры должно быть по центру. "Логотип" вообще не к месту.
Quote
Загрузите вот это изображение (это типо логотип, я нарисовал за пять минут с помощью инструмента Pen Tool):
Пять минут у тебя ушло на три полоски? Да любой первоклассник нарисует такую же картинку в MS Paint за 10 секунд. Не стоило хвастаться этим.
Quote
Если что непонятно, исходник прилагается.
Куда он прилагается, к какому месту? У тебя там только PNG-картинки с конечным вариантом. Исходник в Photoshop (а также Paint.NET, Corel Draw и в других подобных редакторах) - специальный файл (для Photoshop - формата .psd), в котором сохранено разбиение на слои, объекты (если вектор) и т.п. А ты, наверное, сохранил сразу в PNG...
Quote
хотя вы можете написать туда что угодн0
Спасибо, что разрешил мне написать туда что-то своё, а не "GameTool".
Quote
Переименовываем его в cnopka1.
Может быть, всё-таки лучше Button1? Или хотя бы Knopka1, если в английском даже такого простого слова не знаешь.
1
О! Что это?! 
Ничего не понять, если следовать по шагам, указанным автором.
Ужасный урок, автору отрубить руки. 
А зачем рисовать меню в каком-то фотошопе? Меню рисуется сразу в программе, из отдельных частей. 
