WebDesign and Photoshop community

Объявление


Скрепка:

(29.10.08)
Если вам надоело слушать на форумах техподдержки "Учите CSS" или "Пользуйтесь поиском где то это есть", то обращайтесь в тему помощь в CSS, всегда поможем чем сможем.


(28.10.08)
После долговременного ожидания сайт InAStudio открыт и ждет вас на своих страничках! Приношу глубочайшие извинения, ранее зарегистрированным на нем участникам придется пройти регистрацию еще раз. Уверяю больше этого не повторится, и бэкап базы данных будет проводиться впредь регулярно во избежании таких проблем.


(17.10.08)
Темы "Аватар", "Юзербар", "Баннер" закрыты. Больше бесплатных заказов не будет. Причины: 1. большие требования для бесплатного, 2. я не успеваю. Те заказы, которые уже приняты будут выполнены.


(16.10.08)
Приносим извинения за неудобства и долговременное ожидание выполнения заказов. Выполнялся оплаченный заказ. Ведь если человек платит, то не пристало заставлять его долго ждать верно? А так же возникли проблемы с софтом, так как сервер, через которые скачивались программы изменил ключевые ссылки. Ведется работа по восстановлению. И во избежании повторения этой ситуации более переводящими серверами пользоваться не будем



(14.10.08)
Завершена работа над стилем Star Wars. Скриншоты и код самого стиля выложены в теме Стили для форумов.


(13.10.08)
Произведено небольшое пополнение каталога программ. Добавления внесены (и будут вноситься) в конце разделов, то есть смотреть на последних страницах.


(13.10.08)
Закончены работы над галереей, в которой вы можете посмотреть аватары, сделанные на нашем форуме. В планах организация в ней коллекции обоев для рабочего стола
(планируется на конец октября - начало ноября)


(13.10.08)
Ведется работа над гостевой книгой, которая вскоре будет добавлена.
(планируется на 15-16 октября)


Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » WebDesign and Photoshop community » Photoshop » Делаем 3D-кнопку своими руками


Делаем 3D-кнопку своими руками

Сообщений 1 страница 3 из 3

1

Итак, делаем объемную кнопку (псевдо 3D). Сразу хочу оговориться, что во многом внешний вид ваших кнопки зависит от вас, от вашего воображения и даже смелости.

http://s46.radikal.ru/i111/0810/45/088675978a76.jpg

Для начала нарисуем контуры кнопки. Для этого воспользуемся инструментом Rounded Rectangle Tool (U) на панели инструментов:

http://i058.radikal.ru/0810/40/3f3c8816cad4.jpg

Значение Radius выставляем равным 20 пикселей:

http://s52.radikal.ru/i138/0810/be/165d17605237.jpg

Вот что у вас должно получиться:

http://s50.radikal.ru/i129/0810/45/a9813bdd31df.jpg

Далее мы должны перевести нашу фигуру в растр, т.е. в точечное изображение:

http://s43.radikal.ru/i101/0810/5f/f0ef0f44e53c.jpg

Теперь лезем в свойства слоя (Blending options) и выставляем следующие параметры:

Gradient Overlay:

http://s52.radikal.ru/i135/0810/99/10fbfa359db4.jpg

http://s52.radikal.ru/i136/0810/cc/49f6a63d9b5b.jpg

Inner Shadow

http://i057.radikal.ru/0810/41/282a9d6c7a57.jpg

После всех наших манипуляций внешний вид кнопки должен быть такой:

http://s50.radikal.ru/i128/0810/b5/ab53696a8fa6.jpg

Теперь мы должны как бы "склеить" свойства слоя с самим слоем. Для этого создаем новый слой ниже того, что с кнопкой. Выделяем верхний слой и жмем Ctrl+E, при этом два слоя соединяются в один. Обратите внимание на то, что теперь у слоя с кнопкой нет свойств, хотя внешний вид его остался прежним.

Дублируем наш слой с кнопкой и перекрашиваем его в красный цвет. Обрезаем лишнюю часть.

Получается:

http://i049.radikal.ru/0810/33/e25250fd3108.jpg

Создаем новый слой и в нем рисуем круг, во много раз превосхо-дящий размер нашей кнопки, заливаем его белым цветом. Параметр Opacity слоя, в котором находится круг, выставляем равным 5-10% (по настроению), накладываем его так, чтобы он наезжал на кнопку и отрезаем лишнее (не пугайтесь, красную часть я просто скрыл):

http://s57.radikal.ru/i158/0810/0e/1018d1f79b3a.jpg

http://i078.radikal.ru/0810/c0/206380e824a7.jpg

Теперь рисуем разделитель для кнопки (воспользуемся инстру-ментом Pencil Tool (B)):

http://i051.radikal.ru/0810/7a/49ce0b29902e.jpg

Теперь нужно сделать разделы полупрозрачными (если не умеете, то попросите я вам помогу). Операцию можно повторить два раза, с верхней и нижней частью разделителя. Если вам кажется этот процесс сложным, можно отазаться от него вовсе.

http://s59.radikal.ru/i165/0810/96/9f525ae2667c.jpg

Далее делаем легкое внутренне свечение кнопке. Выделяем в новом слое эллипс:

http://s55.radikal.ru/i150/0810/2f/5f7a97b9f94a.jpg

Заливаем его белым цветом. Далее Filter->Blur->Gaussian Blur и значе-ние Radius выставляем по настроению, например 10px. Немного подровнять и вот что вышло:

http://s43.radikal.ru/i102/0810/a8/bb7f612467f8.jpg

Все остальное зависит целиком и полностью от вашей фантазии:

http://s39.radikal.ru/i086/0810/20/24a511191d83.jpg

Отредактировано Stranger2512 (2008-10-22 07:44:30)

2

Stranger2512:cool:
Попробовал, вот чего вышло

3

Diesel написал(а):

Попробовал, вот чего вышло

Тоже не плохо! :cool:


Вы здесь » WebDesign and Photoshop community » Photoshop » Делаем 3D-кнопку своими руками


Рейтинг форумов | Создать форум бесплатно