RSS
 

Стильное навигационное меню для Web

25 марта

Мы будем создавать блестящее навигационное меню.

glossy_plastic

resize

Создайте новый документ размером 430×70 пикселей. Закрасьте фон белым цветом. Выберите инструмент «Прямоугольная область» и создайте контур выделения размером 312×30 пикселей, как показано ниже. Создайте новый слой и залейте выделенную область любым цветом.

resize(1)

Щёлкните на значке f в нижней части палитры и примените следующие эффекты:

Drop Shadow, Structure, [Blend Mode: Multiply ]; [Color: чёрный ]; [Opacity: 75% ]; [ x (выкл.) - Use Global Light]; [Angle: 0° ]; [Distance: 0 px ]; [Spread: 28% ]; [Size: 32 px ];
Quality, [Contour: линейный ]; [ x (выкл.) - Anti-aliased]; [Noise: 0% ]; [ v (вкл.) - Layer Knocks Out Drop Shadow].

Inner Glow, Structure, [Blend Mode: Screen ]; [Opacity: 75% ]; [Noise: 0% ]; [ v (вкл.) - □, x (выкл.) - ●, gradient: от #fffabc к прозрачному ]; resize(3)
Elements, [Technique: Softer ]; [Source: x (выкл.) - Center, v (вкл.) - Edge]; [Choke: 0% ]; [Size: 9 px ];
Quality, [Contour: линейный ]; [ x (выкл.) - Anti-aliased]; [Range: 50% ]; [Jitter: 0% ].

Bevel and Emboss, Structure, [Style: Inner Bevel ]; [Technique: Smooth ]; [Depth: 71% ]; [Direction: v (вкл.) - Up, x (выкл.) - Down]; [Size: 25 px ]; [Soften: 0 px ];
Shading, [ x (выкл.) - Use Global Light]; [Angle: 90° ]; [Altitude: 70° ]; [Gloss Contour: линейный ]; [ v (вкл.) - Anti-aliased]; [Highlight Mode: Screen ]; [Color: белый ]; [Opacity: 100% ]; [Shadow Mode: Screen ]; [Color: #db9c03 resize(4) ]; [Opacity: 59% ].

Satin, Structure, [Blend Mode: Multiply ]; [Color: d99109 resize(5) ]; [Opacity: 50% ]; [Angle: (-141° ]; [Distance: 16 px ]; [Size: 41 px ]; [Contour: по Гауссу ]; [ v (вкл.) - Anti-aliased]; [ v (вкл.) - Invert].

Color Overlay, Color, [Blend Mode: Normal]; [Color: #fde900]; [Opacity: 100%].

Stroke, Structure, [Size: 16 px ]; [Position: Outside ]; [Blend Mode: Normal ]; [Opacity: 100% ]; [Fill Type: Gradient (#e92e0f; #ffa509; #e92e0f ]; [ x (выкл.) - Reverse]; [Style: Shape Burst]; [ v (вкл.) - Align with Layer]; [Angle: 90°]; [Scale: 100%].

resize(7)

Вот результат применения эффектов:

resize(8)

Выберите инструмент «Текст» и напечатайте название вашего веб-узла в левом пустом углу. Вы можете разместить здесь эмблему веб-узла, лого или что-то в этом роде.

resize(9)

Создайте новый слой и выберите инструмент «Кисть» размером 8 пикселей. Удерживая клавишу Shift нарисуйте линию вдоль верхнего края слоя. Цвет кисти не имеет значения.

resize(10)

Скопируйте эффекты, которые вы применяли. Для этого нажмите клавишу Alt и перетащите значок f на имени слоя на новый слой с линией. В этом слое, в раскрывающемся списке эффектов щёлкните на значке глаза эффекта Тень, чтобы отключить его.

Выберите инструмент «Текст» и напечатайте несколько навигационных слов, которые будут служить кнопками. Убедитесь, что между словами вы оставили достаточно места и не выбрали слишком тонкий шрифт. Мы использовали шрифт «Eight Track Program 3» доступный на dafont.com. После этого щёлкните на значке f в нижней части палитры и примените эффекты, показанные выше. Постарайтесь выполнить всё как можно точнее и подобрать соответствующую высоту букв, как на образце ниже.

Drop Shadow, Structure, [Blend Mode: Multiply ]; [Color: чёрный ]; [Opacity: 23% ]; [ x (выкл.) - Use Global Light]; [Angle: 117° ]; [Distance: 6 px ]; [Spread: 3% ]; [Size: 6 px ];
Quality, [Contour: линейный ]; [ x (выкл.) - Anti-aliased]; [Noise: 0% ]; [ v (вкл.) - Layer Knocks Out Drop Shadow].

Inner Shadow, Structure, [Blend Mode: Multiply ]; [Color: чёрный ]; [Opacity: 45% ]; [ x (выкл.) - Use Global Light]; [Angle: 108° ]; [Distance: 16 px ]; [Choke: 0% ]; [Size: 16 px ];
Quality, [Contour: линейный ]; [ x (выкл.) - Anti-aliased]; [Noise: 0% ].

Inner Glow, Structure, [Blend Mode: Linear Dodge, Линейный осветлитель ]; [Opacity: 21% ]; [Noise: 0% ]; [ v (вкл.) - □, x (выкл.) - ●, gradient: от #fcfcfc к прозрачному resize(13)];
Elements, [Technique: Precise ]; [Source: x (выкл.) - Center, v (вкл.) - Edge]; [Choke: 15% ]; [Size: 25 px ];
Quality, [Contour: Конус ]; [ v (вкл.) - Anti-aliased]; [Range: 56% ]; [Jitter: 0% ].

Bevel and Emboss, Structure, [Style: Inner Bevel ]; [Technique: Smooth ]; [Depth: 241% ]; [Direction: x (выкл.) - Up, v (вкл.) - Down]; [Size: 25 px ]; [Soften: 9 px ];
Shading, [ x (выкл.) - Use Global Light]; [Angle: 66° ]; [Altitude: 37° ]; [Gloss Contour: линейный ]; [ v (вкл.) - Anti-aliased]; [Highlight Mode: Linear Dodge ]; [Color: белый ]; [Opacity: 82% ]; [Shadow Mode: Multiply ]; [Color: чёрный ]; [Opacity: 0% ].

Contour, Elements, [Contour: конус ]; [ v (вкл.) - Anti-aliased]; [Range: 53%].

Результат.

resize(16)

Выберите инструмент Ломтик для преобразования изображения в навигационное меню.

Author: Liza (Lorelei) Kliko

 
Комментариев нет

Опубликовано в рубрике Уроки Photoshop

 

Прокомментировать