Клавиша клавиатуры.

Nerom

Я забил на форум.....фу таким быть.

Nerom

Я забил на форум.....фу таким быть.
Сообщения
301
Реакции
289
Баллы
0
Клавиша клавиатуры.

И так, сегодня мы будем делать вот такую кнопочку



Шаг 1. Подготовка основы кнопки.
Берем инструмент "Прямоугольник со скругленными углами"
устанавливаем радиус на 5px
и рисуем объект размером 82х84px. Заходим в стили слоя "Наложение цвета" и устанавливаем цвет #222222.
Берем белую мягкую кисть размером 100px и делаем пятно на новом слое, нажимаем комбинацию клавиш Ctrl+T(Либо ЛКМ -"Свободное трансформирование")и сжимаем в ширину до 15px что бы получился вот такой объект:



Теперь зажимаем Ctrl+T и с зажатым Shift'ом крутим наш "блик" на -45градусов, дальше выставляем наш "блик" вот таким образом копируя его с помощью комбинации Ctrl+J (делаем три копии) Отражаем по горизонтали и по вертикали наши копии и размещаем их вот таким образом:



Загружаем выделение нашего "Прямоуголника" нажимаем на иконку слоя
загрузиться выделение области нашего прямоугольника, дальше - ЛКМ - Инверсия выделенной области и выделяя наши слои "блики" нажимаем кнопку Delete. В итоге у нас должно получиться нечто подобное:



Выделяем все наши слои с бликами дальше ЛКМ - "Преобразовать в смарт объект". Заходим в стили слоя "Наложение цвета" и устанавливаем цвет #5c5c5c.

Теперь нам необходимо добавить "переднюю" часть кнопки. Для этого выбираем
"Прямоугольник со скругленными углами"и рисуем область размером 70x70px. Размещаем ее как показано на изображении ниже:



Заходим в стили слоя "Наложение цвета" и устанавливаем цвет #292929. Получается вот такой вид:



Шаг 2. Добавление света и теней.
Теперь слоем ниже создаем пятно белой мягкой кистью с размером 140p. Убавляем "Непрозрачность" до 30%, загружаем выделение самого первого "Прямоугольника со скругленными углами" - ЛКМ - "Инверсия выделенной области" и нажимаем Delete тем самым удаляя лишнюю часть. Получается у нас вот такой эффект:



Берем мягкую кисть черного цвета размером 100px и рисуем подобную дугу:



Проводим операцию с выделением и инверсией области еще раз и удаляем лишнее. Должно получиться вот такое:



Так же добавляем белый блик мягкой кистью размером 100px сжимаем ширину до 130px размещаем ее вот таким образом:



Устанавливаем непрозрачность 25% загружаем выделение верхнего "Прямоугольника со скругленными углами" проводим махинацию с Инверсией и удалением. На этом этапе у нас должно получиться нечто подобное:



Шаг 3. Добавление деталей кнопки.
Копируем наш верхний слой "Прямоугольник со скругленными углами" дальше отчищаем его стили слоя ЛКМ - "Отчистить стили слоя" перемещаем его выше нашего белого блика кнопки, устанавливаем "Заливку" на 0
, заходим в стили слоя "Выполнить обводку" белого цвета и выставляем вот такие значения:



Растрируем слой ЛКМ по слою - "Растировать стиль слоя" убавляем "Непрозрачность" до 30%, дублируем слой обводки (Ctrl+J и скрываем копию
) возвращаемся к предыдущему слою, берем мягкий ластик размером 100px и стираем половину обводки. Должно получиться вот так:



Активируем наш второй слоя обводки, берем мягкий ластик размером 50px и стираем почти всю обводку что бы остался только линия верха. Сразу копируем слой обводки (Ctrl+J) выделяем ее Ctrl+T дальше ЛКМ- "Отразить по вертикале" и с зажатым Ctrl смещаем на 1px низ. Должно получиться вот так:



Осталось добавить текст. Я взял шрифт Arial с цветом #aeaeae размером 30px и разместил его ровно по середине нашей кнопки. У меня получилась вот такая кнопка:



Так же поэкспериментировав дальше и добавив еще несколько кнопок я сделал вот такую игровую "подсказку" управления. Поэкспериментируйте и Вы. Результат должен Вас удивить


 

Сверху