 |
1. Для рисования кнопки
воспользуемся программой Adobe Photoshop v.5.0 Создаем новый файл, размером к примеру 100 х 40 и прозрачным фоном. Размер задается чуть больше чем размер предполагаемой кнопки, чтобы осталось место на эффекты. Разрешение лучше оставить стандартное т.е. 28,346 пикселей/см Режим RGB |
| 2. Наша кнопка будет
представлять собой эллипс,
поэтому для ее рисования мы
воспользуемся выделением. Выбираем инструмент "Элиптическое выделение" |
 |
 |
3. Создаем выделение размером с
будущую кнопку. Теперь
воспользуемся кистью либо
заливкой чтобы нарисовать нашу
кнопку. Для рисования элипса можно использовать непосредственно кисть - ее настройки позволяют создавать кисть практически любой формы, но мы пойдем другим путем :) |
| 4. Кисть наносит штрихи
только в области выделения, поэтому можно не опасаться махнуть лишнего. Мы познакомились со свойством выделения которое оказывается очень полезным в некоторых случаях. |
 |
 |
5. Не снимая выделения создаем новый слой. Заливаем выделение тем цветом которым будет подсвечиваться кнопка. В нашем случае это красный |
| 6. Задаем прозрачность
слоя на 40%.
Мы ведь хотим чтобы кнопка
подсвечивалась, а не полностью
меняла цвет. Прозрачность слоя можно задать сразу же при создании слоя, но поскольку невозможно представить какой получится оттенок цвета, то мы меняем прозрачность после заливки цветом. |
 |
 |
7. Создаем надпись на кнопке.
Шрифт можете выбрать на свой
вкус, главное чтобы надпись
помещалась на кнопке :) Я использовал тот же шрифт, что и при создании кнопок для своего сайта это "Gothic Rus" кегль 20 pt |
| 8. Цвет текста должен
контрастировать с цветом самой
кнопки, вот что у меня
получилось. Теперь наш рисунок содержит три слоя: черный эллипс, красный эллипс и слой текста. |
 |
 |
9. Для придания рельефности
кнопке я воспользовался
фильтром из стандартного
набора Adobe Photoshop. Это фильтр Emboss. Для рисования кнопок своего сайта я пользовался фильтрами из дополнительного набора Eye Candy. Этот набор вы можете загрузить с моего сайта, раздел "Софт" |
| 10. Настройки фильтра.
Выбор настроек зависит от
Вашего вкуса, я испльзовал эти,
изменив их можно получить
другую конфигурацию кнопки,
возможно она будет более
удачна, чем моя. Поэтому, дерзайте! Попробуйте поменять цвет эллипса, поскольку этот эффект дает результат довольно сильно отличающийся от исходного. |
 |
 |
11. Теперь необходимо временно
отключить слой отвечающий за
подсветку кнопки. Стрелкой показано где нужно снять метку отвечающую за видимость слоя. |
| 12. На текущий момент мы
имеем вот такой результат. Два слоя видимы это черный эллипс измененный эффектом и слой текста. Кнопка почти готова. |
 |
 |
13. Для того чтобы отличить
активную кнопку от неактивной
воспользуемся еще одним
замечательным свойством Adobe
Photoshop. Это эффект падающей тени,
применяется к слою. При настройке эффекта нужно ставить размытие = 0, иначе вокруг тени получится некрасивое серое пятно. |
| 14. Вот так выглядит
окончательный вариант кнопки,
теперь мы готовы
экспортировать наш первый
рисунок в файл с расширением gif.
Это делается в меню Файл->Экспорт->Gif
89a. Еще раз повторюсь,
что необходимо выбирать
наименьшую палитру из
предлагаемых. Это сократит
размер получаемого файла.
Сохранять лучше по-умолчанию в
чересстрочном формате. Назовем файл к примеру ex1.gif Но это еще далеко не последняя операция с нашим рисунком. |
 |
 |
15. Здесь мы познакомимся с еще
одним инструментом Adobe Photoshop -
это инструмент Actions.
Данный инструмент позволяет
создать макрос содержащий
определенный набор действий и
выполнять их в той же
последовательности и с теми же
параметрами, что и в первый раз. До создания макроса необходимо слепить слой текста со слоем подложки. Меню Слой->Склеить с нижним. После этого приступаем к записи макроса. Запись начинается сразу после того как задано имя макроса. Перемещаем нашу кнопку вправо-вниз и изменяем расстояние до тени с 10 до 4 пискелей. Нажимаем "стоп" и все - макрос готов. |
| 16. Вот результат нашего
действия. Экспортируем кнопку в gif. Называем файл ex2.gif После экспорта заходим в History(История) и отменяем все действия вплоть до склеивания слоев. Затем делаем видимым слой подсветки и вновь склеиваем все слои. Фон должен оставаться прозрачным. |
 |
 |
17. Сейчас мы воспользуемся
макросом который сздали ранее.
Просто нажимаем кнопку "Play"
и получаем результат который
вы видите слева. Кнопка
сместилась на то же самое
расстояние и изменила глубину
тени. Макрос остается в Photoshop'e до тех пор пока Вы его не удалите. Если Вы будете делать несколько кнопок и хотите, чтобы они смещались на одинаковое расстояние, то поймете как удобен макрос. Экспортируем последнюю картинку - файл ex3.gif |
