Урок по созданию кнопки в стиле «Diablo III»

Официальный сайт Diablo III очень красив, и не последнюю роль в этом сыграли необычные кнопки, выглядящие как вставленные в старинную оправу камни. Именно их мы и попытаемся повторить в этом уроке. Сразу хочу оговориться, что стопроцентное сходство недостижимо, так как это не просто набор фильтров и параметров, который можно скопировать. В процессе создания кнопки нам довольно много придется порисовать по старинке, кистью.


Итак, начнем. Прежде всего, нам нужен шрифт. (Да-да, тот самый, знакомый фанатам еще с первых частей.) Он придаст нашей кнопке больше атмосферы.  Я брал его отсюда:

http://diablodisplay.com/download/65-kirillicheskiy-shrift-diablo.html

Но вы можете скачать любой, который вам понравится, так как они немного отличаются начертанием. Гугл в помощь.


1.Создадим документ и разместим нужную нам надпись.


2.От ее размера и будем плясать. Рисуем на слое ниже бордовый прямоугольник, а цвет надписи делаем светло-желтым. Это понадобится нам в будущем для эффекта свечения текста. Получается примерно так:

урок создание кнопка стиль диабло 3 diablo

3.Далее начинаем придавать кнопке объем. У нас должен получиться выпуклый параллелепипед. Для этого выделяем сначала верхнюю грань с помощью прямоугольного выделения и заливаем ее градиентом сверху вниз. Так же поступаем и с нижней гранью. Градиент я брал такой:

урок создание кнопка стиль диабло 3 diablo

После этого сделаем кнопку более темной по краям и светлой посередине. Применим радиальный градиент с такими настройками к центральной части кнопки:

урок создание кнопка стиль диабло 3 diablo

Следует дать пояснение по поводу градиента на гранях кнопки. Он должен подчеркивать ее форму, поэтому верхнюю грань я заливал очень сильным градиентом – от  темно-бордового до ярко - красного. Эта часть кнопки будет ярче освещена. Нижнюю же грань я лишь слегка выделил, чтобы подчеркнуть форму. В итоге получается следующее:

урок создание кнопка стиль диабло 3 diablo

4. У нас есть глянцевая заготовка для будущей кнопки, и теперь нам нужно добавить к ней текстуру. Это нужно для того, чтобы сделать кнопку более фактурной и достоверно выглядящей. Для начала применим к слою с кнопкой фильтр «Добавить шум» с такими настройками:

урок создание кнопка стиль диабло 3 diablo

Уже лучше, но кнопка все равно слишком  чистенькая. Это нужно исправлять. Возьмем текстуру камня и откроем ее в новом документе.

урок создание кнопка стиль диабло 3 diablo

Выделяем всю область с текстурой с помощью «Ctrl+A», и копируем ее в буфер обмена с помощью «Ctrl+C». Все, этот документ можно закрывать, возвращаемся к документу с кнопкой. Создаем прямоугольную область выделения поверх кнопки. Она должна совпадать по размерам с самой кнопкой. Теперь с помощью «Ctrl+Alt+Shift+V» мы вставляем в выделенную область нашу текстуру. Заметьте, теперь она расположена как бы в окошке над кнопкой, и ее можно подвигать, чтобы найти наиболее интересные места в текстуре. После этого слой с текстурой переводим в режим смешивания «Разделить».  (На самом деле, какой режим смешивания выбрать, зависит от текстуры,  моя наиболее выигрышно смотрелась именно в таком варианте.)

урок создание кнопка стиль диабло 3 diablo

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

урок создание кнопка стиль диабло 3 diablo

5. Отлично. Основа готова, теперь займемся оправой. С помощью инструмента «Полигональное лассо» (горячая клавиша «L») на новом слое выделяем уголки и окантовку и заливаем их оттенками коричневого, верхние грани светлее, нижние - темнее. И добавим какой-нибудь темный фон, на нем кнопка выигрышнее смотрится. Готово.

урок создание кнопка стиль диабло 3 diablo

Слой с уголками и окантовкой нужно перенести под  слой с текстурой.  На оправе сразу появилась фактура:

урок создание кнопка стиль диабло 3 diablo

6. А теперь самая важная и самая творческая часть. С помощью инструментов «Затемнитель» и «Осветлитель» придаем всем элементам нужный объем. Затем с помощью однопиксельной кисти начинаем добавлять мелкие детали: сколы, трещинки, завитки. Эта часть требует усидчивости и терпения. От того, насколько тщательно вы прорисуете все мелочи, зависит, насколько круто кнопка будет смотреться в итоге. У меня получилось вот так:

урок создание кнопка стиль диабло 3 diablo

Но совершенству нет предела, и вы можете продолжить прорисовку, пока результат окончательно вас не удовлетворит.

7. На этом можно было бы и остановиться, но мне, в итоге, не понравилось, как текст лежит на кнопке.  Уменьшим его размер, чтобы добавить больше свободного пространства. И применим к нему следующие свойства слоя:

урок создание кнопка стиль диабло 3 diablo

урок создание кнопка стиль диабло 3 diablo

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

урок создание кнопка стиль диабло 3 diablo

Марк
1945

Популярные статьи

Облако тегов