Добро пожаловать, Гость. Пожалуйста, выберите Вход или Регистрация
Привет.лв Главная Справка Поиск Вход Регистрация
Страниц: 1
Печать Bookmark and Share
Удалить этот блок рекламы?
Удали рекламу
Кнопки в стиле Web 2.0 (Прочитано 3352 раз)
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Кнопки в стиле Web 2.0
09.06.2007 :: 11:47:18
 
В последнее время стал очень популярен стиль Web 2.0. С каждым днем появляются сайты, которые радуют своей простотой, яркостью и интересными штуками. Стандартов по созданию каких-либо элементов в стиле Web 2.0 не существует, однако есть некоторые признаки и отличия этого стиля, например, сочные и чистые цвета, обилие градиентов.

Сегодня я хочу показать Вам на нескольких примерах, как можно создать кнопки в стиле Web 2.0 с помощью Adobe Photoshop CS2.

  • Открываем Photoshop, создаем новый документ для кнопки.
  • С помощью инструмента Rounded Rectangle на панели инструментов создаем форму для будущей кнопки, указав радиус скругления углов.

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!


  • Нажимаем правой кнопкой мыши на слое с прямоугольником на палитре Layers, выбираем Blending Options.
  • Настраиваем параметры эффекта Gradient Overlay. Цвет первого и второго ползунков у меня 434343, третьего – 000000.
  • Параметры эффекта Stroke показаны ниже. Цвет обводки – 363636.
  • Настраиваем параметры эффекта Inner Glow.
  • В результате получается вот такое изображение:

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

  • Инструментом Rounded Rectangle создаем форм прямоугольник, который будет являться бликом на кнопке.
  • Правой кнопкой мыши нажимаем на слое glare, выбираем Rasterize Layer.
  • На панели инструментов нажимаем Edit in Quick Mask Mode.
  • Выбрав инструмент Gradient Tool, создаем градиент вроде такого:

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

  • Выходим из режима быстрой маски, получаем выделение. Нажимаем Delete.

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

  • Добавляем слой с текстом “Entries RSS” и иконкой RSS. Настраиваем параметры эффекта Drop Shadow.

Получается вот такая кнопка:
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

Изменяя различные параметры эффектов, добавляя и изменяя отдельные элементы, у меня получились вот такие кнопочки.
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!


Вы можете загрузить исходники PSD Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
.

Источник: Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
BuGSy
Его знают
***
Вне Форума

Наш мир это мы!

Сообщений: 110
Латвия
Пол: male
Re: Кнопки в стиле Web 2.0
Ответ #1 - 08.02.2008 :: 00:28:42
 
Люблю такие темы.. вообще люблю создавать и рисовать. хотя рисовать особо не умею. А вообще люблю учится было бы вермя! Улыбка
Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
WWW   IP записан
Страниц: 1
Печать Bookmark and Share
www.privet.lv

Privet.lv/forum » Powered by YaBB 2.2.3 (fix)!
YaBB © 2000-2012. Все права защищены.
Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge