Знижка на товари

Тальнівський Інформаційний Портал

News Слухати радіо онлайн — насолоджуйся музикою також на iPhone і Android

Уроки Photoshop

Красивая кнопка №1 - Уроки Photoshop

Уроки Photoshop на Тальнівському Інформаційному Порталі

Как видно из названия урока, сейчас Вы научитесь рисовать не очень простую (для начинающего), но симпатичную и эффектную кнопку, которая не только украсит Ваш сайт, но и продемонстрирует всем Вашим посетителям Ваш хороший вкус (ну, или, во всяком случае, мой:))

Так вот, сейчас я научу, как это делается...

Кстати, этот урок был написан мной ( Leonid Khlivnyuk a.k.a Taurus - если Вы забыли на чьем сайте находитесь:) ) для журнала «Мой компьютер»

Итак, приступим:

Этап 1. Что нам стоит стиль построить...

1. Для начала нам нужно создать новый стиль, который будет создавать эффект полупрозрачного хрусталя с хромирующим блеском (не знаю как его еще описать :), который впоследствии можно использовать и для других целей: создаем новое изображение (Ctrl+N). Размер изображения 100х100, 300 dpi. Режим цвета - RGB Color. Цвет фона – белый.

2. Для сброса цвета в дефолт нажимаем клавишу D. Создаем новый слой (Shift+Ctrl+N) – назовем его – crystal. Активируем инструмент Brush (B), кисть называется Hard Round, устанавливаем ее диаметр 50 px (половина нашего изображения) и ставим точно по центру черную точку. Эта точка будет служить "визуализатором" наших дальнейших операций:

уроки photoshop

3. Затем двойным кликом на слое crystal вызываем окно Layer Style и изменяем в поле Advanced Blending параметр Fill Opacity на 3%. Как Вы сами видите, наша точка почти исчезла. Известно, что полупрозрачный объект графически можно передать как игру его светотени, поэтому, для придания этой самой тени, нажимаем на закладку Drop Shadow (именно нажимаем, а не ставим галочку!) и изменяем настройки на следующие:

Blend Mode – Multiply (#000000);
Opacity – 45%;
Angle – 120 – Use Global Light;
Distance – 3px;
Spread – 0;
Size – 3px;
Contour – Gaussian, Anti-aliased – check;
Noise – 0%;
Layer Knocks Out Drop Shadow – check.

4. Изменяем в закладке Inner Shadow параметры, это придаст эффекту легкую внутреннюю тень и добавит глубины, а метод наложения Color Burn немного "подпалит" фоновый слой:

Blend Mode – Color Burn (#000000);
Opacity – 43%;
Angle – 120 – Use Global Light;
Distance – 16px;
Spread – 0;
Size – 31px;
Contour – Linear, Anti-aliased – check;
Noise – 0%.

Вот таким сейчас должен быть рисунок:

уроки photoshop

5. Для большей реалистичности добавим чуть-чуть внутреннего сияния, как будто проникший свет заставляет наш круг светиться изнутри. Нажимаем на закладку Inner Glow и меняем там такие значения (остальные оставляем по умолчанию):

Blend Mode – Overlay;
Opacity – 30%;
Noise – 0%;
Color - #000000;
Size – 16px;
Contour – Linear, Anti-aliased – check.

6. А теперь самая значимая в этом эффекте закладка - Bevel and Emboss. Именно от ее значения зависит красочность и реалистичность! По большому счету, главными параметрами здесь являются значение глубины эффекта (Depth) и тип наложения тениShadow Mode: Color Dodge:

уроки photoshop

После всех этих утомительных манипуляций со свитками стилей должно получиться что-то вроде этого (немного похоже на стиль продукции Apple):

уроки photoshop

7. Так-с, для последующей работы сохраним этот стиль, для этого в окне Layer Style слоя crystal нажимаем кнопку New Style и сохраняем его под именем crystal style. Этот новый стиль будет находиться в закладке Styles (он на последнем месте – найти его проще простого). Если у Вас на экране нет закладки Styles, значит нужно в меню Window (Alt+W) поставить соответствующую галочку.

Маленький совет: если у Вас небольшое разрешение монитора (1024х768 и меньше), то при работе с большими изображениями в PhotoShop CS может возникнуть нехватка рабочего места. Значительно улучшить ситуацию поможет клавиша Tab, которая переключает окно Фотошопа в экспертный режим (убирает панели инструментов и меню) и таким образом высвобождает такое необходимое рабочее место.

Этап 2. Создание кнопки для сайта

8. Создаем новое изображение (Ctrl+N). Размер изображения 200х50, 300 dpi. Режим цвета - RGB Color. Цвет фона – прозрачный.

(При других размерах изображения могут понадобиться небольшие коррективы стиля crystal style!)

9. Делаем заливку (G) фонового слоя цветом фона вашей будущей страницы. Для примера я использовал цвет моего недавнего веб-проекта - #e8ecef. Потом инструментом Rounded Rectangle Tool (U) с радиусом округления 10px рисуем округленный прямоугольник-кнопку, немного меньшего размера, чем наше изображение. Цвет тот же, что и у фона – #e8ecef. Выравниваем прямоугольник по центру рисунка, делаем его растеризацию и называем этот слой – shape.

10. Вспоминаем про недавно созданный стиль crystal style и применяем его к слою shape:<

уроки photoshop

Уже довольно неплохо, правда? Я же обещал Вам хрусталь :) – вот он, уже почти готов – остались последние штрихи. Достоинства этого эффекта в том, что он практически не содержит градиента, а это значит, что рисунок можно очень компактно (и без потери качества) сохранить как PNG или GIF, то есть конечное изображение – 200х50px с 32 цветами – будет занимать меньше 800 байт. Это по достоинству оценят владельцы модемного соединения, к коим, к сожалению, отношусь и я.

11. Теперь избавимся от излишней блеклости – подкрасим кнопку небесно-голубым цветом. Так как тип прозрачности эффекта не позволит напрямую изменить цвет кнопки, поменяем цвет фона под ней, благо она полупрозрачна. Для этого переключаемся на фоновый слой и, удерживая зажатым Shift, кликнем левой клавишей мыши на иконке слоя shape, чтобы выделить область занятую кнопкой. Нажимаем Ctrl+U и, в появившемся окне Hue/Saturation (Colorize – включен!), меняем оттенок и насыщенность значениями параметров: Hue – 206; Saturation – 50; Lightness оставляем без изменений. С чистой совестью снимаем выделение (Ctrl+D):

уроки photoshop

12. Нужный текст названия кнопки напишем с помощью инструмента Horizontal Type Tool (T). Шрифт, конечно же, должен соответствовать общему стилю изображения – что-нибудь посовременнее. Полученный слой с текстом нужно сцентрировать и разместить под слоем shape:

уроки photoshop

13. Теперь нашей кнопке можно придать еще больше "металлического блеска". Для этого всего лишь продублируем слой shape (Ctrl+J) и отключим в этом новом слое shape copy эффект Drop Shadow, иначе вместо легкой тени получится очень темная:

уроки photoshop

Но, самое интересное случится, если инвертировать уже сохраненное готовое изображение (Ctrl+I). Поклонниками мрачного стиля посвящается:

уроки photoshop

Ну, вот собственно и все чем я хотел сегодня с вами поделиться. Надеюсь, что мой урок пригодится молодым веб-дизайнерам и вынудит некоторых из них уделять больше внимания графическому оформлению их веб-страниц. За сим откланиваюсь. С уважением Leonid Khlivnyuk a.k.a Taurus.

Наслаждаемся проделанной работой. До новых встреч!

Автор: Leonid Khlivnyuk
08.05.2007 - http://talne-info.com

Рекомендовані публікації

Редагував та розмістив – Хлівнюк Леонід © talne-info.com | 26.07.2008

Рекламка
Поділитись з друзями
  • Google+
  • VK
Link:
HTML:
BBcode:
Коментувати матеріал