[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Стильные черные кнопки
DooDLeZДата: Понедельник, 11.05.2009, 17:17 | Сообщение # 1
Admin
Группа: Проверенные
Сообщений: 805
[ 21 ]
:-)
Создайте новый документ, которы будем минимум шириной в 75 px. Я сделал документ 600x100px. Но это даже будет много, вы потом увидите.

Выберете цвет переднего фона: #1d1d1d. Теперь залейте слой. Edit-Fill...-ok

Теперь, когда мы залили фон в хороший, безмятежный, черный цвет, пора переходить к фактическому созданию кнопки. Создайте новый слой. Layer-new-layer (shift+ctrl+N). Переместите созданный слой, в свою групп, названную "menuspace" (кажется фантастическим, но это в основном только обозначает каждый пункт меню), так чтобы мы могли дублировать кнопки с непринужденностью, когда все будет сделано. Что бы создать группу идем Layer-new-Group... Вы можете изменить названия всех слоев, это хорошо отразиться на вашем представлении об иерархии.

Теперь возвратитесь к слою, который Вы создали. Выберете инструмент Rectagular Marquee. Размер: 142x50px. Выделите любую область, желательно рядом с краем. И залейте этот участок тем же цветом, что и фон #1d1d1d. Edit - fill...-ok

Снимите выделение, это время забавной части smile Выберете тот же самый слой. Идем Layer>Layer Styles>Gradient Overlay. Удостоверьтесь, что Opacity: 100%, Blend Mode: Normal, Style: Linear, Angle: 90%, Scale: 100%. Еще не жмите "ок", мы не закончили.

Теперь щелкните два раза на область градиента, это приведет Вас к редактору градиента. Там мы волнотим в жизнь нашу кнопку. На сетке ниже, цвета должны быть слева на право: #000000, #272727, и #3d3d3d.

Сейчас у Вас должно быть что-то подобное:

Теперь мы поправим края этой кнопки, чтобы придать реалистичности. Создайте новый слой в папке "menuspace", который будет выше Вашего последнего слоя. Первая вещь, которую мы сделаем, добавляет градиенты на каждой стороне, которые делают кнопку реалистичной. На краю будующей кнопки выберите участок, шириной в 1px, используя Rectangle Marquee Tool. Измените цвет переднего плана на: #5f5f5f. Теперь выберете Gradient tool. Потяните градиент снизу в верх. Снимите выделение.


Дублируем слой, который мы только что сделали. Преобразуйте градиент (Ctrl+T), повернув на 180 градусов. После этого, переместите его к противоположной стороне, это добавит реалистичности.

Что бы завершить нашу кнопку, добавим к обеим сторонам черную полосу. Создайте новый слой в папке "menuspace", который будет выше остальных. Используя Rectangle Marquee Tool выберите, внешнюю сторону Вашей кнопки (ширина 1px). Смените цвет переднего плана на черный (#000000). Теперь зайлейте, выделенную область.

Теперь у Вас должно быть, что-то типо этого:

Замечательно. Теперь Вы можете добавить текст на кнопку. Я добавил такой: Arial, 11px, None, Bold, но Вы можете сделать как пожелаете. Больше всего я надеюсь, что это Вам помогло.
Что получилось у меня:

Работа автора:

Взято: http://www.tutorialized.com
Перевод: Serious


IP админа скрыт!
  • Страница 1 из 1
  • 1
Поиск: