В этом уроке мы будем создавать Web Button. Это очень простое и довольно эффективное учебное пособие, поэтому все, что вам нужно это Adobe Photoshop для создания этого эффекта. Надеюсь, вам понравится этот урок.

Как создать веб-кнопки в Photoshop

Шаг # 1

Откройте Photoshop и создайте новый документ, у меня 550px × 125px с белым фоном.

Шаг # 2

Заполните цвета в фоновый слой, мои цвета # 3A3A3A.

Шаг # 3

Выберите Rounded Rectangle Tool и создавать кнопки, мои Радиус 7px, ширина и высота 156px: 38px..

Шаг # 4

Сейчас мы будем применять некоторый эффект

Gradient Overlay

Стайлинг кнопки дважды щелкните по кнопке миниатюрами слоя на панели "Слои, чтобы открыть Layer Styles диалогового окна, мы будем применять Влияние вертикального градиента на кнопку. Затем щелкните на цвете градиента на правом градиента возможность открыть Редактор градиентов цветов.

Дважды щелкните на левом цвета остановки и введите значения цвета # 9E4C45, затем дважды щелкните на правой цвета остановки и введите значения цвета # EA8484.

Drop Shadow

Нанесите слой Drop Shadow стиля. Хранить угол при 120o, чем изменения значений дымности, расстояние и размер. Я выбираю установить прозрачность на 23%, расстояние, на 1px и размер, при 9px.

Шаг # 5

Выберите Horizontal Type Tool и тип текста на фронт.

Мы будем применять некоторый эффект для текста.

Color Overlay

Дважды щелкните на уменьшенное слой текста на панели "Слои, чтобы открыть Layer Styles диалогового окна. Вначале мы будем применять цвета оверлея, я выбираю цвет # 0D0D0E

Drop Shadow

Наконец мы будем применять тени, сначала измените Blending возможность нормального. Изменить цвет тени от стандартных до # FFFFFF. Хранить угол при 120o, чем изменения значений дымности, расстояние и размер. Я выбираю установить прозрачность на 32%, а расстояние, на 1px и размер на 1px.

Заключительный Preview

Позвольте нам знать, как что данное учебное пособие может быть более лучше? Если Вы обнаружили другие Photoshop учебник, который вы хотите поделиться с нами, не стесняйтесь, сообщите нам, сбрасывая в комментарии.

Если Вы хотели бы получать больше вдохновение из нас, пожалуйста, подпишитесь на наш канал по RSS или по электронной почте.

Подано в: Бесплатно, Photoshop, Tutorials по администратора