Здравствуйте. Пришла пора и мне написать статью. А поскольку я хорошо знаю 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. Создание меню», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела.
Предлагаются такие схожие материалы:
Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.
Не впечатляет, в обычном флеш за 2-3 минуты тоже самое делается. Если уж пишешь про фотошоп и про то, что ты его хорошо знаешь, так и подавай красиво, с большим-большим эффектом "вау".