Воскресенье, 2024-04-28, 8:06 AM
Приветствую Вас Гость | RSS

Design for You!

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Serious  
Форум » Курсы графики от DIZ4U.info » Уроки фотошоп для всех » Стильные черные кнопки (Наверно, больше для начинающих ;))
Стильные черные кнопки
SeriousДата: Четверг, 2008-02-07, 1:54 PM | Сообщение # 1 |
Анаграфист
Группа: D4U Team
Сообщений: 188
Репутация: 13
Статус: Offline
Создайте новый документ, которы будем минимум шириной в 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

 
kydapodatsyaДата: Четверг, 2008-02-07, 5:34 PM | Сообщение # 2 |
Дизайнер
Группа: Администраторы
Сообщений: 2641
Репутация: 226
Статус: Offline
в стиле WEВ 2.0 wink
 
broneloko7Дата: Воскресенье, 2008-04-06, 8:43 PM | Сообщение # 3 |
Начинающий дезиГнер
Группа: Помощник D4U
Сообщений: 163
Репутация: 19
Статус: Offline
Невидно нех*8а..Тогда строк сделайте 1 пикс белым =/ biggrin


Лось-вечен, не спорь..
one shot, one kill,
no luck, just skill.
 
GT1Дата: Понедельник, 2009-03-09, 11:47 PM | Сообщение # 4 |
Спектографист
Группа: Пользователи
Сообщений: 4
Репутация: 0
Статус: Offline
Мне не очень это нравится sad wink


[url=http://depositfiles.com/signup.php?ref=brat13][img]http://img2.depositfiles.com/adroot/df/referral/360_rus.gif[/img][/url]
 
kydapodatsyaДата: Среда, 2009-03-11, 11:18 AM | Сообщение # 5 |
Дизайнер
Группа: Администраторы
Сообщений: 2641
Репутация: 226
Статус: Offline
GT1, на вкус и цвет...
 
Форум » Курсы графики от DIZ4U.info » Уроки фотошоп для всех » Стильные черные кнопки (Наверно, больше для начинающих ;))
  • Страница 1 из 1
  • 1
Поиск: