Трехмерная кнопка, тип 2

1. Для изготовления кнопки создаем новое квадратное изображение, к примеру, 50x50 пикселей. Создаем выделение окружностью.

2. Выбираем светлый цвет для первого цвета, а темный для второго. Используя заполнение внутри выделения заполняем окружность от светлого к темному.

3. Командой Select/Modify/Contract уменьшаем выделенную окружность и заполняем ее теми же цветами только в обратном направлении.

4. А теперь можно что ни будь написать на кнопке и отбросить от нее тень.

1	2	3	4

Круглая кнопка

1. Создайте новое изображение. Используя инструмент Область (овальная), задайте выделенную область (при нажатой клавише Shift область получиться круглой). Будет лучше, если вы зададите область с фиксированным размером (в примере я использовал 80*80). Для этого два раза щелкните мышью на инструменте Область в панели инструментов. Появиться окно свойств. Установите следующие параметры: режим – заданный размер, ширина – 80 пикселей, высота – 80 пикселей.

2. Заполните область градиентом под углом в 45 градусов (один из цветов белый, а другой синий).

3. Теперь опять перейдите к окну свойств области и установите меньший размер (60*60). Новую область поместите в центре кнопки. Эту область тоже заполните градиентом, только уже в обратном направлении.

4. Кнопка уже готова. Осталось только написать текст.

2	3	4

Трехмерная кнопка, тип 3

1. Создадим новое квадратное изображение 50x50 пикселей. Выбираем светлый цвет для первого цвета и темный для второго. Используем инструмент и заполняем изображение, так как показано на рисунке.

2. Используем команду Select/All (CTRL A), а затем SELECT/MODIFY/BORDER и в поле Width вводим небольшое число, я использовал 5. Затем опять используем инструмент , но заполняем в обратном направлении.

3. А теперь напишем какой-нибудь текст на кнопке.

1	2	3

Квадратная кнопка

1. Создайте небольшое изображение 70*70 пикселей. Выберите два оттенка одного цвета, один оттенок более темный чем другой. Инструментом Градиент заполните изображение сверху-вниз под углом в 45⁰.

2. Выделите все Ctrl-A. Выполните Выделение/Модификация/Граница (SELECT/MODIFY/BORDER) с установкой в 5-6 пикселей. Заполните полученную область градиентом в обратном направлении.

3. Напишите какой-нибудь текст на кнопке, и она готова.

1	2	3

Анимированная кнопка

1. Создаем изображение, заполненное любой текстурой или цветом. Текстура, использованная на примере, была создана следующим образом: залив фон желтым цветом, я запустил фильтр Add Noise (FILTER/ NOISE/ADD NOISE).

2. Выделяем окружность – . Сохраняем выделение. Выбираем два цвета: светлый и темный (на примере – оттенки зеленого). С помощью инструмента 2 плавной заливки – заполняем выделение от светлого к темному под нужным углом.

3. Теперь на 5 пикселей сожмем выделение: SELECT/MODIFY/CONTRACT/5 PIXELS. Нажмем CTRL +SHIFT+D, в открывшемся окне установим параметр – 2 пикселя. Заполним получившееся выделение от темного к светлому.

1	2	3

4. Создаем новый слой. Пишем надпись или картинку на кнопке.

5. Создаем 3-й слой. Загружаем выделение (CTRL+ALT+4). Обводим кнопку черным кольцом: EDIT/ STROKE – (1 PIXEL, OUTSIDE, BLACK). Полдела сделано. Сохраняем результат работы в формате GIF: FILE/EXPORT/GIF89A. При желании можно сделать часть изображения прозрачным. Для этого предварительно переводим изображение в индексированный цвет (IMAGE/MODE/INDEXED COLORS), затем при сохранении GIF указываем цвет, который должен быть прозрачным (естественно, пространство вокруг кнопки должно быть залито однородным цветом).

6. Дальше – больше. Создадим третий слой. Поместим его между слоем с текстом и черным кольцом. Загрузим выделение (CTRL+ALT+4). Заполним его 30% черным. (EDIT/FILL/BLACK/30%).

4	5	6

7. Давим CTRL+SHIFT+D, и проставляем 3 пикселя. Обращаем выделение (CTRL+SHIFT+I). Сдвигаем его на 4 пикселя вправо и вниз и заполняем 80% черным.

8. Загрузим выделение: CTRL+ALT+4. Обратим его: CTRL+SHIFT+I. Теперь удалим выделенную часть, нажав DELETE.

9. Для пущей реалистичности сдвинем изображение на кнопке вправо и вниз на 1-2 пикселя. Все! Кнопка готова. Сохраним нажатую кнопку, как и прошлый раз (см. пункт 5), но под другим именем.

10. Вот так будет выглядеть Ваша анимированная кнопка. Используйте JavaSctript и событие OnMouseOver чтобы при наведении мышкой на кнопку она "нажималась".

7	8	9 – 10