(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
Купить CommView for WiFi 1 лицензия
Oracle Database Personal Edition Named User Plus License
Stimulsoft Reports Server Team 10 users
IBM DOMINO ENTERPRISE CLIENT ACCESS LICENSE AUTHORIZED USER LICENSE + SW SUBSCRIPTION & SUPPORT 12 MONTHS
Microsoft 365 Business Basic (corporate)
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
СУБД Oracle "с нуля"
Компьютерные книги. Рецензии и отзывы
Все о PHP и даже больше
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100