Практически на всех сайтах есть кнопочки Вперед и Назад. На этом уроке рассмотрим вопрос как сделать кнопку для сайта в Фотошопе.


на главную уроки Фотошоп как сделать кнопку для сайта в фотошопе

как сделать кнопку для сайта в фотошопе

На любом сайте есть кнопочки Вперед, Назад или Следующая, Предыдущая. И очень часто такие кнопки выполнены в форме стрелочек. Мы предлагаем Вам посмотреть один из вариантов как сделать кнопку для сайта в Фотошопе в виде красивой полупрозрачной стрелочки. После ее создания можно добавить еще соответсятвующие надписи около кнопочек.

как сделать кнопку для сайта в фотошопе

1. Создаем новый документ (Файл-Новый File-New) с прозрачным фоном, размером 500х500 пикселей.

2. Активируем инструмент "Прямолинейное лассо" (Polygonal Lasso Tool) и делаем треугольное выделение как на рисунке.

3. Устанавливаем основным темно-синий, а фоновым голубой цвет. Активируем инструмент "Градиент" (Gradient Tool), выбрав линейный (Linear Gradient) градиент "От основного к фоновому цвету" (Foreground to Background), и проводим им сверху вниз так как показано на рисунке.

4. Снимаем выделение (Выделение-Отменить выделение Select-Deselect). Активируем инструмент "Перемещение" (Move Tool горячая клавиша V). Нажимаем клавишу Alt и нажимаем на клавишу со стрелочкой вниз. Тем самым мы делаем копию слоя и смещаем изображение на 1 пиксель вниз.

5. Снижаем непрозрачность полученного слоя до 70%. Кликаем по слою, а затем снова зажимаем клавишу Alt и нажимаем на клавишу со стрелочкой вниз столько раз, пока Вас не будет устраивать глубина кнопки. Должно получиться примерно как на рисунке. В нашем примере получилось 35 копий слоя.

6. Отключаем видимость самого верхнего слоя нажав на значек глаза рядом со строкой слоя на палитре слои, активируем предпоследний слой и применяем команду Слой-Объеденить видимые (Layer-Merge Visible). У Вас должно остаться два слоя.

7. С нажатой клавишей Ctrl кликаем по строке верхнего слоя, чтобы появилось выделение (в некоторых версиях программы кликнуть нужно не по строке, а по миниатюре слоя), активным при этом должен остаться нижний слой.

8. Снова активируем инструмент "Градиент" (Gradient Tool), но проводим им теперь справа на лево так как на рисунке.

9. Снимаем выделение. Возвращаем видимость верхнему слою, делаем его активным и устанавливаем непрозрачность 85%. При помощи инструмента "Перемещение" (Move Tool), перемещаем треугольник так, чтобы он как бы "закрывал" кнопку.

10. Создаем новый слой, нажав на значек "Создать новый слой" (Create a New Layer) в нижней части палитры Слои (Layers). Активируем инструмент "Овальное выделение" (Elliptical Marquee Tool), делаем овальное выделение и при помощи трансформации (Выделение-Трансформировать выделенную область Select-Transform Selection) делаем выделение примерно как на рисунке.

11. Устанавливаем основным белый цвет. Активируем инструмент "Градиент" (Gradient Tool), выбираем линейный (Linear Gradient) "От основного к прозрачному" (Foreground to Transparent) и проводим им внутри выделения от середины к низу кнопки.

12. Нажав на клавишу Ctrl кликаем по строке самого нижнего слоя (или по миниатюре слоя), при этом активным остается слой с белой заливкой. Применяем команду Выделение - Модификация - Сжать (Select-Modify-Contract), уменьшаем примерно на 8 пикселей.

13. Инвертируем выделение (Выделение-Инверсия Select-Inverse) и нажимаем клавишу Del, чтобы убрать лишнее. Снимаем выделение и снижаем непрозрачность слоя до 65%.

14. Создаем новый слой, нажав на значек "Создать новый слой" (Create a New Layer) в нижней части палитры Слои (Layers). Активируем инструмент "Кисть" (Brush Tool), выбираем жесткую кисть диаметром приблизительно 13 пикселей (в зависимости от размера Вашей кнопки). Кликаем кистью в левом нижнем углу верхнего треугольника, нажимаем клавишу Shift и кликаем в правом нижнем углу. У нас получится прямая линия, такая как на рисунке. Снижаем непрозрачность слоя до 25%.

15. Склеиваем слои Слой-Объеденить видимые (Layer-Merge Visible), и при помощи инструмента "Ластик" (Eraser Tool) немного закругляем острые углы. И вот один из способов как создать кнопку.



Добавлено: 21:05:2009

Это один из множества вариантов как сделать кнопку для сайта в Фотошопе. А Вы можете поэкспериментировать, добавить что-то свое, например, надписи Вперед и Назад.








Полезные советы

Что бы открыть изображение в Фотошопе не обязательно заходить в меню Фаил-Открыть (File-Open), можно щелкнуть два раза левой кнопкой мыши на пустом месте в окне программы, либо перетащить изображение из окна файлового менеджера (Проводника Windows или Total Commander) в окно программы Фотошоп.


При перепечатке материалов сайта активная ссылка обязательна