only

Тільки Photoshop

Підручники та ресурси Photoshop

Ласкаво просимо до SoloPhotoshop, де ви знайдете найкращу інформацію про навчальні посібники, ресурси та статті Adobe Photoshop!

Сучасна пластикова кнопка для Інтернету з Photoshop | Тільки Photoshop

Сучасні веб-кнопки з Photoshop

Продовжуючи серію елементів дизайну веб-інтерфейсів, ми зараз створимо сучасну пластикову кнопку з Photoshop.

Після підручника з елегантних пастельних кнопок ми будемо працювати з другою в цій серії Сучасною пластиковою кнопкою, яка трохи складніша, але ще не вимагає надзвичайних знань Photoshop.

Ми збираємося створити новий документ для нашої кнопки, якщо ви хочете створити його з тими ж характеристиками, що і я. Перейдіть до "Файл> Створити".

Далі вам потрібно активувати правила та створити кілька посібників, які допоможуть нам сфокусувати нашу нову кнопку. Кнопка матиме ширину 220 пікселів та висоту 80 пікселів. Візьміть інструмент "Закруглений прямокутник" і радіусом 35 пікселів за допомогою напрямних створіть форму кнопки, як ми бачимо на наступному зображенні.

Застосування стилів шарів

Для створення пластичного ефекту нашої кнопки ми знову використаємо стилі шарів, які є простими та ефективними, але перш за все їх можна зберегти для подальшого використання. Двічі клацніть на шарі кнопки на палітрі шарів, і з’являться параметри Стилі.

Дотримуючись параметрів наступних зображень, ми досягнемо нашого стилю пластичного ефекту:

Зовнішнє світіння

Внутрішнє сяйво

Градієнтне накладання

Інсульт

Пластиковий стиль

Підсвічування кнопок

Ефектом, якого важко досягти за допомогою стилів шарів, є освітлення, яке чудово підсилює контрастність дизайну, з цієї причини ми будемо робити це традиційним способом, з кількома білими шарами, що не в фокусі і трохи граючи з "Режими шарів".

Користуючись перевагами керівників, ми створюємо сферичну добірку навколо нашої фігури, як ми можемо бачити це нижче:

Потім ми опускаємо виділення і заповнюємо його, на новому шарі, білим кольором, зображення виглядає ідеально як слід:

Скасовуємо вибір, натискаючи "Ctrl + D". Тепер ми робимо те ж саме, але в новому шарі, і тепер рухаємо його вгору. Якщо ви хочете, ви можете продублювати перший шар, а потім змінити положення і підняти його у відповідне положення, яке ми бачимо на зображенні:

Ми застосовуємо "розмиття за Гаусом" радіусом 10 пікселів (Filter> Blur> Gaussian Blur) на обох шарах, тоді необхідно змінити "Layer Mode на Overlay" і зменшити непрозорість до значень, що варіюються від 50 до 75% в залежності щодо того, чого ви хочете досягти. І ми насправді готові до використання нашої сучасної пластикової кнопки, однак ми додамо кілька простих деталей, щоб виглядати краще.

Зайві предмети

Що ж, ми додамо трохи тексту та одну з фігур, яку приносить сам Photoshop, тоді за допомогою простих ефектів шару вони будуть готові.

У нестандартних формах фотошопу ми знаходимо велику кількість фігур, які ми могли б використовувати, цього разу я використав просту стрілку, яку я продублював і повернув, щоб вона виглядала як подвійна стрілка, яка вказує на завантаження або щось подібне, безумовно у вас щось краще станеться з ними ха-ха. Після з’єднання фігури ми застосовуємо стилі шару «Внутрішня тінь і кольорове накладання» лише з параметрами, які ми бачимо нижче:

Потрібно знизити "Заливку" шару до 0%, ми робимо це, щоб зник вихідний колір фігури і щоб відображалися лише нещодавно застосовані стилі шару.

За допомогою інструмента «Текст» я написав «Пластикова кнопка», а потім зі стилями шарів застосовуємо наступну тінь. Пограйте з варіантами, щоб досягти інших і кращих результатів, якщо хочете.

Нарешті я додав альтернативний текст, який через відсутність ідей я поставив "Lorem Ipsum" і також застосовується тінь, в даному випадку колір, відповідний кольору тієї самої кнопки. На наступному зображенні показано параметри:

І вуаля ми маємо нашу просту, але разючу та сучасну пластикову кнопку, яка, безсумнівно, буде корисною у ваших веб-проектах.

До зустрічі у наступному уроці цієї серії ...