Уроки Фотошоп Уроки Фотошоп Скачать для Фотошоп

скачать

Уроки Фотошоп

Уроки Фотошоп

Скачать PhotoShop CS6
главная в избранное карта сайта контакт

Уроки Photoshop

Уроки Фотошоп


Уроки Фотошоп


Кнопки


Вторым специфическим элементом дизайна Web-страниц являются графические элементы управления — кнопки. Рисование кнопок стало своеобразным особым "жанром", и если вы не хотите ударить в грязь лицом, используйте возможности Adobe Photoshop 5.5 — эффекты для слоев. Они позволяют создавать самые замысловатые кнопки в несколько щелчков мышью. Набор эффектов и их комбинации позволяют создавать огромное количество вариантов кнопок. Ниже приведен список предопределенных эффектов:

Эффект Имитация Параметры
Drop Shadow   Тень от объекта на плос кости. Объект производит впечатление приподнятого над фоном Режим наложения (Mode).
Непрозрачность (Opacity).
Цвет тени.
Угол, под которым направлен свет (Angle). Расстояние от объекта (Distance).
Размывка тени (Blur)
"Густота" тени (Intensity)
Inner Shadow Тень от границ объекта на самом объекте Объект производит впечатление вырезанного из фона  Режим наложения (Mode)
Непрозрачность (Opacity)
Цвет тени
Угол, под которым направлен свет (Angle)
Расстояние от объекта (Distance)
Размывка тени (Blur)
"Густота" тени (Intensity)
Outer Glow Свечение объекта Режим наложения (Mode)
Непрозрачность (Opacity)
Цвет свечения
Величина свечения (Blur)
Яркость свечения (Intensity)
Inner Glow Свечение объекта изнутри Режим наложения (Mode)
Непрозрачность (Opacity)
Цвет свечения
Величина свечения (Blur)
Яркость свечения (Intensity)
Выбор светящейся части объекта— края
(Edges) или центр (Center)
Bevel and Emboss Барельеф и горельеф. Объект выглядит выдавленным на фоне, вдавленным в фон или сам приобретает рельеф Режим наложения (Mode) для теней
Режим наложения (Mode) для светов Непрозрачность (Opacity) для теней Непрозрачность (Opacity) для светов
Цвет светов
Цвет теней
Вариант эффекта
  • Внешний скос (Outer Bevel)
  • Внутренний скос (Inner Bevel)
  • Барельеф (Emboss)
  • Вдавленный барельеф (Pillow Emboss)
Угол, под которым направлен свет (Angle)
Высота рельефа (Depth)
Размывка рельфа (Blur)
Выбор между барельефом (Up)
и горельефом (Down)


  При умелом сочетании эффектор с остальными богатыми возможностями Photoshop можно получить весьма оригинально выглядящие кнопки.

 Следующий пример показывает, как легко сделать "реалистичное" изображение кнопки сочетанием эффектов Photoshop и фотографического изображения. По сути это несложный монтаж, в котором применены большинство средств Photoshop. Создадим крупную круглую кнопку с тенью и прозрачным фоном, что позволит помещать ее на страницу с любой фоновой текстурой.

  Совет

 Создавайте изображения для Web-страниц с большими размерами, чем реальные. Это позволит вам лучше видеть их детали Придать изображению окончательный размер лучше уже после того, как оно полностью готово.

  1. Создайте новый документ размером 200х200 пикселов и белым фоновым слоем с помощью команды New... меню File.

2. С помощью инструмента Elliptical Marquee выделите круг с диаметром примерно на 30 пикселов меньшим, чем ширина документа.

3. Откройте документ с текстурой мрамора rnarble.jpg, который использовался в упражнениях предыдущего раздела.

4. Выделите весь документ и скопируйте в буфер обмена.

5. Закройте документ rnarble.jpg.

6. Вставьте текстуру из буфера обмена в выделенную область нового документа с помощью команды Paste Into меню Edit.

7. Выберите команду Bevel and Emboss... меню Effects.

8. Перед вами диалоговое окно самого сложного из эффектов (рис. 9.26). Грубо говоря, эффект рельефа создается четырьмя растяжками, примыкающими к объекту. Две смежные растяжки создают переходы между цветом объекта и более темным цветом. Две противолежащие растяжки, напротив, осуществляют переход от цвета объекта к более светлому.

Совет

Если вы желаете увидеть механизм эффекта, воспользуйтесь командой Create Layers меню Effects. Она помещает растяжки, создающие эффект рельефа, на отдельные слои.

9. С помощью элементов управления полей Highlight и Shadow определяются конечные цвета этих растяжек и режим их наложения на объект или фон. По умолчанию это черный цвет для теней и белый цвет для светов. Для теней определен режим Multiply, а для светов — Screen. Эти установки годятся для большинства случаев. Оставьте их в исходном состоянии.



Рис. 9.26. Диалоговое окно эффекта Bevel and Emboss

10. Отдельно для светов и теней определяются непрозрачности растяжек. Для уменьшения контраста установите в обоих полях Opacity значение 65%.

11. Список Style определяет вид рельефа, который, в свою очередь, определяется видом растяжек, имитирующих света и тени Выберите стиль Inner Bevel.

Примечание Стиль Inner Bevel соответствует приданию рельефа самому объекту Растяжки при этом накладываются на края самого объекта Стиль Outer Bevel имитирует рельеф лежащего под объектом фона Растяжки проводятся наружу от краев объекта Стиль Emboss является промежуточным между первыми двумя Растяжки проходят как по объекту, так и по фону Стиль Pillow Emboss создает иллюзию того, что рельефный объект вдавлен в фон Такой эффект достигается противоположными растяжками от краев объекта к его центру и от центра.

12. Установите высоту рельефа Depth 16 пикселов.

13. Задайте значение 14 для размытия рельефа Blur.

14 Значение по умолчанию для угла Angle, под которым направлен свет, подходит для данной задачи. Значение 120° соответствует направлению света слева сверху. В этом поле можно установить июбое значение угла. Если при этом расположенный рядом флажок Use Global Angle установлен, то введенное значение распространяется на все слои эффектов в изображении Такой принцип вполне оправдан, поскольку направление света, как правило, едино для всего изображения.  Глобальный угол можно изменить и с помощью специальной команды Global Angle... меню Effects.

15. Переключатели Up и Down предназначены для быстрого изменения угла падения света на 180°. Оставьте активным переключатель Up.

16. В раскрывающемся списке эффектов выберите эффект Drop Shadow....

17. Создайте тень с параметрами по умолчанию.

18. Нажмите кнопку ОК.

19. Выберите команду Equalize из списка Adjust меню Image.

20. Загрузите маску слоя щелчком на ее миниатюре при нажатой клавише .

21. Выберите команду Contract... из списка Modify, вложенного в меню Select.

22. Уменьшите выделенную область на 15—16 пикселов

23. Скопируйте выделенную область на новый слой командой Layer Via Copy, находящейся в списке New, вложенном в меню Layer. Быстро этого можно добиться нажатием клавиш +. Обратите внимание, что выделенная область скопировалась вместе с эффектами, приложенными к исходному слою.

24. Сделайте двойной щелчок мышью на пиктограмме эффектов слоя в палитре Layers.

25. В открывшемся окне Effects отмените эффект Drop Shadow, сняв флажок Apply в соответствующем разделе диалогового окна.

26. Перейдите в раздел Bevel and Emboss диалогового окна Effects. Измените тип рельефа на Outer Bevel и уменьшите высоту до 10 пикселов. Установите переключатель Down. Нажмите кнопку ОК. Кнопка приобрела рельефную окантовку, как пуговица.

27. Сделаем мрамор кнопки более темным и придадим ему зеленый оттенок. Создайте новый корректирующий слой щелчком на пиктограмме нового слоя в палитре Layers при нажатой клавише . Тип слоя установите Hue/Saturation. Нажмите кнопку ОК.

28. Измените тон обоих нижележащих слоев на темно-зеленый (Hue: -44; Saturation:  +37; Lightness: -17). Нажмите кнопку ОК.

29. Сделаем очень темной среднюю часть кнопки. Создайте новый корректирующий слой щелчком на пиктограмме нового слоя в палитре Layers при нажатой клавише . Тип слоя установите Brightness/Contrast. Нажмите кнопку ОК.

30. Уменьшите почти до минимума яркость и контраст. Нажмите кнопку ОК.

31. Для того чтобы коррекция яркости действовала только на нужный слой (Layer 2), сгруппируйте с ним корректирующий слой. Напомним, что сделать это быстрее можно посредством всего одного щелчка на границе этих слоев в палитре Layers при нажатой клавише .

Кнопка создана — осталось разместить на ней какую-нибудь пиктограмму. Допустим, эту кнопку предполагается разместить на странице, содержащей сногсшибательный материал.

1. Выберите инструмент Type.

2. Выберите шрифт Windings, кегль 120 пунктов и темно-зеленый цвет (например, R:0; G:77; B:32).

3. Введите символ, соответствующий заглавной букве N.

4. Нажмите кнопку ОК.

5. С помощью инструмента Move установите пиктограмму по центру кнопки.

6. Выберите Outer Glow... меню Effects

7. Создайте эффект свечения, установив 100%-ную непрозрачность, размытие на 12 пикселов с интенсивностью 56, чистого зеленого цвета.

8. Нажмите кнопку ОК. Кнопка полностью готова (рис. 9.27). Убедительно, не правда ли?



Рис. 9.27. Кнопка готова

9. Пересчитайте изображение на размер 60х60 пикселов с помощью команды Image Size... меню Image.

10. Отключите видимость слоя Background.

11. Экспортируйте документ в формат GIF с помощью команды GIF89a Export... меню Export, вложенного в меню File. Применение фильтра экспорта необходимо для сохранения прозрачных областей изображения. При экспорте используйте адаптированную палитру.

Уроки Фотошоп

Уроки Фотошоп © 2005-