делаем кнопку

В нижеприведенной статье вы узнаете как без особого труда сделать вот такую кнопку.

Поводите по ней мышкой , ага шевелиться !

1. Для начала запустим photoshop и создадим новый файл (обзывайте его как хотите , я же назвал - knopka )

2. Выбираем в панели инструментов Paint Bucket Tool ( она же заливка ) , выбираем нужный цвет и заливаем фон , если нужен белый цвет , то этот пункт пропускаем ( в нашем примере цвет синий ).

3. В панели инструментов выбираем Type Tool кликаем на нашей заготовке и автоматически создается новый слой , предназначенный для ввода текста , пишем что-нибудь ( в нашем примере - назад ).

4. Далее выбираем Layer ( слой ) - Merge down ( склеить с нижним ) после чего у нас получается один слой.

5. Выбираем Select ( выделить ) - All ( все ) , далее Select - Modify ( модифицировать ) - Border ( рамка ) . Width ( ширина ) выставляем равную 1 px .

6. Далее в панели инструментов кликаем по уже знакомому нам Paint Bucket Tool и заливаем рамку черным цветом.

7. Выбираем Pencil Tool ( карандаш ) , в настройках Brush выставляем самый маленький размер и корректируем края так чтобы осталась рамка только черного цвета( не забедте увеличить изображение ). Результат должен выглядеть так :

8. Жмем File ( файл ) - Save for web ( записать для web ) и сохраняем нашу кнопку в gif формате.

Так можно передохнуть половина пути пройдена.

Шагаем дальше.

9.Начинаем мудровать с той картинкой какую только - что сохранили
Жмем Select - All , Select - Modify - Border выставляем равную 1 px как прежде.

10. В панели инструментов кликаем на Paint Bucket Tool , и обратите особое внимание заливаем нашу рамку цветом фона нашей страницы ( куда собственно мы ее собрались вставлять ).

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

12. Результат сохраняем File - Save for web в формате gif.

Итак у нас получилось два изображения кнопки.Теперь нам нужно как-то вставить их на свою страницу.

Для этого запускаем программу Dreamweaver , открываем страницу куда мы хотим поставить нашу кнопку и в панели инструментов выбираем Rollover Image .

Где написано Original image вставляем второе изображение соответственно где написано Rollover Image первое.
Ну и ссылку куда эта кнопка ведет. Для получения обратного эффекта , то есть кнопка уменьшается Original и Rollover поменяйте местами.

А для тех кто не пользуется Dreamweaver и тому подобными редакторами я даю исходный код;

также вы можете скачать исходники этих изображений

скачать