Пример создания кнопки WEB в Adobe Photoshop CS5

wpid-AdobePhotoshopCS5forAll_image728-min-vs.jpg

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

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

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

1.                       Создайте новый документ размером 200 200 пикселов, с разрешением 72 pixels/ inch с помощью команды New (Новый) меню File (Файл). Выберите модель RGB в поле Color Mode (Цветовая модель), 8 bit. Это будет квадрат со сторой 7,06 см с прозрачным фоновым слоем (установите в поле Background Contents (Цвет фона) значение White (Белый)).

2.                       С помощью инструмента Elliptical Marquee Tool (Эллиптическое выделение) выделите круг с диаметром примерно на 30 пикселов меньшим, чем ширина документа. Не забудьте удерживать нажатой клавишу <Shift>, чтобы выделие было в виде круга. Выделенная область находится на слое Background (Цвет фона).

3.                       Откройте документ с текстурой мрамора Фоновая_текстура.jpg, с прилагаемого диска.

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

5.                       Закройте документ Фоновая_текстура.jpg.

6.                       Вставьте текстуру из буфера обмена в выделенную область нового документа с помощью команды Paste Into (Вставить в) меню Edit (Редактирование). Пвился новый слой Layer1 (Слой 1) (рис. 15.14).

7.                       Для этого нового слоя в диалоговом окне Layer Style (Стиль слоя), которое вывается командой Layer | Blending Options (Слой | Параметры наложения), выберите команду Bevel and Emboss (Барельеф и горельеф).

Рис. 15.14. Слева — вид документа, справа — отражение слоев в палитре

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

9.                       В разделе Blending Options (Параметры наложения) установите для Blend Mode (Режим наложения) значение Difference (Случайный), получился очень темный круг; чтобы он стал светлее, уменьшите Opacity (Непрозрачность) до 50%.

10.                   В разделе Bevel and Emboss (Барельеф и горельеф) активизируйте флажки Contour (Контур) и Texture (Текстура), чтобы эффект применялся как к конту будущей кнопки, так и к ее внутренности. Все установки сразу отражаются в документе.

11.                   В разделе Knockout (Выворотка) установите значение Deep (Глубокий).

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

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

14.                   В раскрывающемся списке эффектов выберите эффект Drop Shadow (Падаие тени).

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

Стиль Inner Bevel (Внутренний скос) соответствует приданию рельефа самому объекту. Растяжки при этом накладываются на края самого объекта. Стиль Outer Bevel (Внешний скос) имитирует рельеф лежащего под объектом фона. Растяжки проводятся наружу от краев объекта.

16.                   Нажмите кнопку OK. Кнопка приобрела рельефную окантовку, как пуговица. А в палитре слоев отразились параметры слоя (рис. 15.15).

17.                   Выделите кнопку, например, инструментом Elliptical Marque (Эллиптическое выделение).

18.                   Выберите команду Contract (Сжать) из списка Modify (Изменение), вложенно в меню Select (Выделение).

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

20.                   Скопируйте выделенную область на новый слой командой Layer Via Copy (Слой копированием), находящейся в списке New (Новый), вложенном в меню Layer (Слой). Быстро этого можно добиться нажатием клавиш <Ctrl>+<J>. Оатите внимание, что выделенная область скопировалась вместе с эффектами, приложенными к исходному слою. Скопированная область разместилась  на слое Layer 2 (Слой 2).

Рис. 15.15. Слева — вид документа,

справа — отражение заданных параметров слоя в палитре

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

Layers (Слои).

22.                   В открывшемся окне Layer Style (Стиль слоя) отмените эффект Drop Shadow

(Падающие тени), сняв флажок в соответствующем разделе диалогового окна.

Рис. 15.16. Слева — новый вид кнопки, справа — отражение слоев в палитре

23.                   В  разделе  Blending Options (Параметры наложения) активизируйте флажок

Texture  (Текстура),  а  флажок  Contour  (Контур)  установите,  чтобы  эффект

применялся не к контуру будущей кнопки, а только к ее внутренности. Все уановки сразу отражаются в документе.

24.                   Нажмите кнопку OK. Кнопка изменила свой внешний вид (рис. 15.16).

25.                   Сделаем мрамор кнопки более темным и придадим ему зеленый оттенок. Соайте новый корректирующий слой командой Hue/Saturation (Цветовой фон/Насыщенность). Нажмите кнопку OK. В палитре Layers (Слои) появился новый слой Hue/Saturation 1 (Цветовой фон/Насыщенность 1).

26.                   Измените тон обоих нижележащих слоев на темно-зеленый (Hue (Цветовой фон): 44; Saturation (Насыщенность): +37; Lightness (Свет): 17). Нажмите кнопку OK.

27.                   Сделаем очень темной среднюю часть кнопки. Создайте новый коррек-тируий слой командой Brightness/Contrast (Яркость/Контраст). Тип слоя устаните Brightness/Contrast (Яркость/Контраст). Нажмите кнопку OK. В палитре Layers (Слои) появился новый слой Brightness/Contrast 1 (Яркость/Контраст 1).

28.                   Уменьшите яркость и контраст до значений, показанных на рисунке. Нажмите кнопку OK.

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

29.                   Для того чтобы коррекция тона действовала только на нужный слой (Layer 1), наведите курсор мыши на середину слоя Hue/Saturation 1 (Цветовой фон/Насенность), нажмите левую кнопку мыши и перетащите его вниз, размещая над слоем Layer 1 (Слой 1).

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

1.                       Выберите инструмент Type (Текст).

2.                       Выберите шрифт Webdings, кегль 100 пунктов и черный цвет.

3.                       Введите символ, соответствующий заглавной русской букве З. Появился рисок торопящегося автомобиля.

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

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

6.                       Готовая кнопка показана на рис. 15.17 и на прилагаемом диске в файле (Фоная_текстура.htm). Убедительно, не правда ли?

7.                       Пересчитайте изображение на размер 60  60 пикселов с помощью команды Image Size (Размер изображения) меню Image (Изображение).

8.                       Сохраните файл с расширением gif.

Источник: Комолова, Н. В., Adobe Photoshop CS5 для всех / Н. В. Комолова, Е. С. Яковлева. — СПб.: БХВ-Петербург, 2011. — 624 с.: ил. + CD-ROM — (В подлиннике)

По теме:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Оставить комментарий