-Кнопки рейтинга «Яндекс.блоги»

 -Видео

 -Поиск по дневнику

Поиск сообщений в avalona

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 14.11.2006
Записей: 1179
Комментариев: 21728
Написано: 33547


Как сделать кнопку для сайта

Вторник, 26 Мая 2009 г. 13:43 + в цитатник

Это урок Photoshop научит вас делать вот такие кнопочки для сайта, блога или сообщества.

 

Шаг 1. Начнем с того, что зальём холст цветом #D1CEC7 (данное действие делается исключительно для удобства).  

Создадим  новый  слой, назвав его - Основа. В новом слое рисуем  белый круг. Удостоверьтесь, что ваш круг соответствует следующим размерам: Ширина: 104px и Высота: 104px

Добавим следующие стили слоя: Тень (Drop Shadow):


Шаг 2. Создадим новый слой, и нарисуем круг #B23C3C цвета. Этот круг, по размерам, должен быть меньше, чем предыдущий.

Выберем  инструмент Brush (кисть). Найдем кисть Rough Rounded Bristle . Она должна быть ближе к  концу в стандартном наборе кистей.
Установим основной цвет -  белый. На новом слое сделайте несколько коротких мазков в произвольном направлении.

Далее, используя инструмент ластик ( Eraser)  с тем  же самым типом кисти - Rough Rounded Brisle, стираем ненужные элементы.  

Шаг 3. Установим основной цвет - черный. Выбираем инструмент кисть с мягкими краями и диаметром 35px и на новом слое рисуем диагональную линию.

Теперь переходим на слой с белым кругом, который мы рисовали в 1 шаге. Далее Select > Load Selection > Default (Выделение > Загрузить выделение > По умолчанию). Снова Выделение (Select) и выбрать инверсию.

Вернемся снова к текущему слою, с черной кистью. Щелкнем на Edit > Cut (Редактировать > вырезать).

В опциях слоя устанавливаем Soften light (Мягкий свет). Непрозрачность (Opacity) слоя установите на 25 %.

Шаг 6. Выбираем инструмент линия \- из главных, 4px (line tool, или жмём U).
На новом слое рисуем  белую наклонную линию, используя инструмент линии.

Дублируем  линию  (Duplicate line), потом переходим  на  Filter > Blur > Guassian Blur Radius 3.4px (Фильтр > Размытие  > Размытие по Гауссу,  Радиус 3.4px).

Выбираем первоначальный слой линии, и перемещаем его, как показано  ниже. Далее переходим Select > Load Selection (Выделение > Загрузить выделение) к выбранной линии. В то время как линия  уже выбрана, берем размытие линии слоя. Потом  Edit > Cut (Редактировать > Вырезать).
Удаляем первоначальную линию, установив уровень непрозрачности (Opacity) слоя 45 %.

На новом слое рисуем  1px линии, как показано  ниже. Непрозрачность (Opacity) слоя устанавливаем на 21 %.

Шаг 8. Добавляем текст, используя  шрифт Eurostile, Bold, 16.5pt , белый цвет и следующие стили слоя:
Stroke (Выполнить обводку). Устанавливаем непрозрачность (Opacity) для слоя с текстом на 85 %.

А вот и результат.

Успехов!

 

***
Продаются недорого шотландские вислоухие котята и британские котята как в рекламе вискас. Все котята шоу-класса, от титулованных родителей, с родословной Word Cat Federation. Она красивы, здоровы, игривы и просто очаровательны!

Рубрики:  Уроки Photoshop
Метки:  

Процитировано 47 раз
Понравилось: 1 пользователю

Rele_Vremeni   обратиться по имени Вторник, 26 Мая 2009 г. 14:35 (ссылка)
Интересно, попробую
Ответить С цитатой В цитатник
светлый_человечек   обратиться по имени Среда, 27 Мая 2009 г. 00:39 (ссылка)
Спасибо, пригодится ;)
Ответить С цитатой В цитатник
hohohotun   обратиться по имени Среда, 27 Мая 2009 г. 01:31 (ссылка)
Ответить С цитатой В цитатник
lon159   обратиться по имени Среда, 27 Мая 2009 г. 01:34 (ссылка)
Классный урок!
Ответить С цитатой В цитатник
Симонова_Галина   обратиться по имени Среда, 27 Мая 2009 г. 07:17 (ссылка)
я не умею,но ссылочку возьму- может научусь

(Добавил ссылку к себе в дневник)

Ответить С цитатой В цитатник
cdefg   обратиться по имени Среда, 27 Мая 2009 г. 09:26 (ссылка)
Спасибо, буду учиться.
Ответить С цитатой В цитатник
Елена_Тинькова   обратиться по имени Среда, 27 Мая 2009 г. 11:41 (ссылка)
Спасибо,может и у меня получится да пригодится!
Ответить С цитатой В цитатник
Elena_Khokhlova   обратиться по имени Среда, 27 Мая 2009 г. 12:43 (ссылка)
Интересно, попробую
Ответить С цитатой В цитатник
Валентин_Савин   обратиться по имени Среда, 27 Мая 2009 г. 13:41 (ссылка)
Право слово, не знаю, что и сказать. По природе я человек инертный, при этом мне кажется, грубо говоря, зачем козлу баян. Но на всякий случай ссылку сохраню. Просвятите как-нибудь насчёт обработки фотографий в фотошопе или другом редакторе фото. Заранее признателен.
С уважением,
Ответить С цитатой В цитатник
натаха-08   обратиться по имени Среда, 27 Мая 2009 г. 14:54 (ссылка)
Еще ничего не могу, но буду учиться авось пригодиться, спасибо
Ответить С цитатой В цитатник
борисюлька   обратиться по имени Среда, 27 Мая 2009 г. 18:59 (ссылка)
Спасибо,буду пробовать!!!
Ответить С цитатой В цитатник
Аноним   обратиться по имени Среда, 27 Мая 2009 г. 22:45 (ссылка)
Фигня, а не кнопочки.
Ответить С цитатой В цитатник    |    Не показывать комментарий
EgoEl   обратиться по имени Среда, 16 Сентября 2009 г. 20:08 (ссылка)
хороший урок!
Ответить С цитатой В цитатник
Аноним   обратиться по имени Суббота, 23 Января 2010 г. 14:14 (ссылка)
Прикольный урок!! Спасибо)) Себе поставлю такую кнопочку)))
Ответить С цитатой В цитатник    |    Не показывать комментарий
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку