Як зробити об’ємні кнопки

Як зробити об'ємні кнопки

В оформленні сайтів досить часто використовуються об’ємні елементи навігації. Такі кнопки можна зробити в графічному редакторі Photoshop, зімітувавши обсяг за допомогою тіней і градієнтної заливки.

Вам знадобиться

- Програма Photoshop.

Інструкція

  1. Створіть у графічному редакторі новий документ за допомогою опції New з меню File. Розмір нового документа виберіть такий, щоб у нього помістилася кнопка, а фон зробіть прозорим.
  2. Активізуйте інструмент Rounded Rectangle Tool. Якщо вам потрібна не дуже сильно заокруглена кнопка, в панелі налаштувань інструменту вкажіть значення для параметра Radius, рівне одному міліметру. Намалюйте округлений прямокутник за допомогою обраного інструменту. Отримана фігура буде основою для кнопки.
  3. Клацніть правою кнопкою миші по шару і виберіть опцію Rasterize Layer. Завантажте виділення опцією Load Selection з меню Select.
  4. За допомогою інструмента Gradient Tool залийте кнопку двоколірним градієнтом, вибравши підходяще поєднання квітів з пресетів на панелі градієнтів. Стиль градієнта має бути лінійним, виберіть його, якшо по кнопці Linear Gradient під головним меню. Верхня частина кнопки після заливки повинна виявитися світліше нижньої.
  5. Застосуйте до шару стиль. Для цього скористайтесь опцією Blending Options з контекстного меню. Виберіть вкладку Drop Shadow та введіть для параметра Angle значення сто двадцять градусів. Параметр Size виставте на три пікселя.
  6. У вкладці Inner Shadow поставте таке ж значення для параметра Angle, а для Size поставте величину в п’ять пікселів. Застосуйте стиль, натиснувши на клавішу Enter.
  7. Зробіть тінь від кнопки. Для цього клікніть по кнопці Create a new layer і залийте виділення нового шару чорним кольором. Виберіть для цього інструмент Paint Bucket Tool. Відмініть виділення клавішами Ctrl + D.
  8. Застосуйте до чорного прямокутника фільтр Gaussian Blur з групи Blur меню Filter. Параметр Radius поставте на чотири пікселя. Перетягніть мишкою шар з тінню під шар з кнопкою і підніміть тінь на три-чотири пікселя вгору. Для цього активізуйте інструмент Move Tool і посуньте тінь кнопками управління курсором. Знизьте значення параметра Opacity для цього шару до шістдесяти відсотків.
  9. Зробіть активним шар з кнопкою і завантажте з нього виділення. Скоротіть виділення на два пікселя опцією Contract з групи Modify меню Selection.
  10. Створіть новий шар і залийте на ньому отримане виділення лінійним градієнтом від білого до прозорого так, щоб біла частина опинилася в нижній частині кнопки. Відмініть виділення. За допомогою опції Free Transform з меню Edit зменшите область, закриту градієнтом, по вертикалі. Застосуйте трансформацію клавішею Enter.
  11. Змініть режим накладання шару з градієнтом на Overlay. Це можна зробити, вибравши режим із списку в лівій частині палітри стилів. Зменшіть параметр Opacity шару до шістдесяти відсотків.
  12. За допомогою інструмента Horizontal Type Tool напишіть текст, який повинен бути на кнопці.
  13. Зберіть усі верстви в папку опцією Group Layers з меню Layer, виділивши їх при затиснутій клавіші Ctrl. Збережіть кнопку в файл psd опцією Save з меню File.