Як зробити кнопки для сайту в фотошопі

Як зробити кнопки для сайту в фотошопі

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

Інструкція

  1. Створіть новий документ і на панелі інструментів виберіть Rounded Rectangle Tool. Намалюйте вузький прямокутник із закругленими кутами, а потім виберіть на панелі інструментів Elliptical Marquee Tool і в лівій частині прямокутника намалюйте коло, перекриває його краю і виходить за його межі.
  2. Правою клавішею миші клацніть на шарі з прямокутником і виберіть опцію Rasterize Layer, а потім в центрі виділення знову кликніть мишею і виберіть у контекстному меню опцію Layer via Cut, щоб скопіювати виділення на новий шар.
  3. Відкрийте меню налаштувань шару і у вкладці Drop Shadow встановіть режим змішування Normal, прозорість на 23%, а дистанцію на 3 пікселі. У вкладці Color Overlay встановіть потрібний колір при режимі змішування Normal і прозорості в 100%. У вас повинно вийти двокольорове зображення.
  4. Знову виберіть на панелі інструментів Elliptical Marquee Tool і всередині лівого кольорового виділення намалюйте гурток. Натисніть Delete. Після цього перенесіть виділення на новий шар і залийте його будь-яким кольором.
  5. Відкрийте знову меню Layer Style і налаштуйте вкладку Gradient Overlay в будь-яких кольорах, які підходять до кольорової гами вашого сайту. Встановіть радіальний стиль градієнта. Потім у вкладці Stroke встановіть товщину обведення в 2 пікселя, зовнішню позицію контуру, а також прозорість в 30%. Виберіть градієнтну заливку обведення. Натисніть ОК.
  6. На панелі інструментів виберіть кисть білого кольору, налаштуйте її так, щоб вона була м’якою, а діаметр кисті складав 10 пікселів. У правій верхній частині забарвленого вами кола поставте крапку, щоб намалювати відблиск.
  7. Потім виберіть шар з основною частиною кнопки і в меню Layer Style встановіть параметр Inner Shadow з режимом змішування Multiply і прозорістю в 33%. Встановіть лінійний градієнт із прозорістю в 25%. Ваша кнопка готова — залишилося додати на неї напис.