(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Уроки Photoshop: Стильная шапка для сайта, веб-дизайн

Источник: demiart
Glebash

Creating A Cool 3D Web Design Effect
Стильная шапка для сайта *

Шаг 1.
Создайте документ размерами 1000x750. Двойной клик на слой, Color Overlay > Ставим темно-коричневый цвет.
Стильная шапка для сайта *

Шаг 2.
Включите линейки (View>Rulers). на своем документе и добавьте линии как показано ниже.
Поставьте 2 горизонтальные линии, первая на 30px от верха, вторая на 250px от верха. И две вертикальные, первая на 100px слева направо, вторая на 900px слева направо.
Стильная шапка для сайта *

Шаг 3.
Создайте прямоугольник с помощью rectangle.gif , пользуйтесь линиями для ориентира. Переименуйте слой в "header".
Стильная шапка для сайта *

Шаг 4.
Поставьте черный цвет как основной. Возьмите ellipse.gif и создайте форму похожую на форму на скрине, чтобы сделать тень. Сделайте её немного больше чем прямоугольник, смотрим рисунок. Переименуйте слой в "shadow" и поставьте его под слой "header".
После всего этого, сконвертируйте форму в Smart Filters и примените на нее Gaussian Blur. Непрозрачность 60%.
Стильная шапка для сайта *
Стильная шапка для сайта *

Шаг 5.
Откройте стили слоя "header". Нажмите на вкладку Gradient Overlay. Измените стиль градиента на radial. А для цвета я использовал темно-красные тона.
Стильная шапка для сайта *

Шаг 6.
Возьмите line.gif и используя более светлый цвет, чем в градиенте, создайте линию. После этого создайте ещё одну линию над ней, только черного цвета. Выделите 2 линии на панели слоев и сгруппируйтесь их. Переименуйте группу в "vDivider".
Идем Layer>Layer Mask>Reveal All. Используя gradient.gif , черно белый, на панели сверху стиль ставим на Radial и применяем маску на группу. Градиент ложим с уклоном от центра группы.
Стильная шапка для сайта *

Шаг 7.
Создаем меню с помощью horisontal_type.gif . Цвет белый. Все надписи группируем и называем группу "White Links".
Создайте дубликат этой группы и переместите его под оригинальную группу. Измените цвет дубликата на черный (весь текст должен быть черным) и переместите группу на 1 пиксель в верх и влево. Это придаст красивый 3д эффект тексту.
Стильная шапка для сайта *

Шаг 8.
Повторите Шаг 6, только создайте вертикальные разделители для надписей на меню. Используя line.gif , сначала нарисуйте темно-красную линию, потом справа от нее, черную. Сгруппируйте их и сделайте дубликат группы столько раз, сколько вам нужно для меню. У меня в меню 4 слова, я сделал 4 дубликата + оригинал. Разместите ваши линии на одинаковом расстоянии друг от друга, смотрим скрин:
Стильная шапка для сайта *

Шаг 9.
Выделите все группы с линиями и сгруппируйте их в 1 группу, назовите её "hDividers". После этого примените маску на эту группу, Layer>Layer Mask>Reveal All. И сделайте маску как на скрине:
Стильная шапка для сайта *

Шаг 10.
Откройте файл с узором, который дан ниже. Edit>Define Pattern. Назовите его "webPattern". Создайте дубликат слоя "header" и переименуйте его в "pattern". Откройте стили слоя, и уберите галочку с Gradient Overlay, поставьте на Pattern Overlay. Выберите "webPattern" и поставьте режим наложения на Overlay.
После этого примените маску на него с радиальным градиентом.
Стильная шапка для сайта *

Шаг 11.
Теперь остается добавить нужный вам логотип.
Пишем текст, я написал PSDTUTS, и сделал PSD жирным шрифтом, а TUTS тонким.
Далее пройдите в стили слоя и измените параметры Drop Shadow, Gradient Overlay, and Stroke. После этого у вас будет прекрасный текстовый эффект.
Стильная шапка для сайта *

Заключение.
Когда работаем с веб-дизайном, мы должны учесть размеры файлов, совместимость с браузерами и многие другие вопросы. Используя 2 цвета можно создать очень хороший визуальный эффект или уникальный стиль, не напрягаясь.
Стильная шапка для сайта *

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 04.02.2009 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Symantec Endpoint Encryption, License, 1-24 Devices
Quest Software. TOAD Xpert Edition
SAP Crystal Reports XI R2 Dev 2006 INTL WIN NUL License (Version 11)
Купить Антивирус Dr.Web Server Security Suite для сервера
EMS SQL Management Studio for InterBase/Firebird (Business) + 1 Year Maintenance
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
Все о PHP и даже больше
Утиль - лучший бесплатный софт для Windows
Новые программы для Windows
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100