Стильная шапка для сайта
Автор: ykiigor, Дата: 2 апреля 2009, Категория: Уроки / Web-дизайн / Adobe PhotoShop
Вот и время web-дизайну.В этом уроке вы научитесь создавать шапку для сайта.
- Создайте документ размерами 1000x750. Двойной клик на слой, Color Overlay -> Ставим темно-коричневый цвет:
- Включите линейки (View -> Rulers). на своем документе и добавьте линии как показано ниже.
Поставьте 2 горизонтальные линии, первая на 30px от верха, вторая на 250px от верха. И две вертикальные, первая на 100px слева направо, вторая на 900px слева направо:
- Создайте прямоугольник с помощью
, пользуйтесь линиями для ориентира. Переименуйте слой в “header”:
- Поставьте черный цвет как основной. Возьмите
и создайте форму похожую на форму на скрине, чтобы сделать тень. Сделайте её немного больше чем прямоугольник, смотрим рисунок. Переименуйте слой в “shadow” и поставьте его под слой “header”.
После всего этого, сконвертируйте форму в Smart Filters и примените на нее Gaussian Blur. Непрозрачность 60%:
- Откройте стили слоя “header”. Нажмите на вкладку Gradient Overlay. Измените стиль градиента на radial. А для цвета я использовал темно-красные тона:
- Возьмите
и используя более светлый цвет, чем в градиенте, создайте линию. После этого создайте ещё одну линию над ней, только черного цвета. Выделите 2 линии на панели слоев и сгруппируйтесь их. Переименуйте группу в "vDivider".
Идем Layer>Layer Mask>Reveal All. Используя
, черно белый, на панели сверху стиль ставим на Radial и применяем маску на группу. Градиент ложим с уклоном от центра группы.
- Создаем меню с помощью
. Цвет белый. Все надписи группируем и называем группу “White Links”.
Создайте дубликат этой группы и переместите его под оригинальную группу. Измените цвет дубликата на черный (весь текст должен быть черным) и переместите группу на 1 пиксель в верх и влево. Это придаст красивый 3д эффект тексту.
- Повторите Шаг 6, только создайте вертикальные разделители для надписей на меню. Используя , сначала нарисуйте темно-красную линию, потом справа от нее, черную. Сгруппируйте их и сделайте дубликат группы столько раз, сколько вам нужно для меню. У меня в меню 4 слова, я сделал 4 дубликата + оригинал. Разместите ваши линии на одинаковом расстоянии друг от друга, смотрим скрин:
- Выделите все группы с линиями и сгруппируйте их в 1 группу, назовите её “hDividers”. После этого примените маску на эту группу, Layer>Layer Mask>Reveal All. И сделайте маску как на скрине:
- Откройте файл с узором, который дан ниже. Edit>Define Pattern. Назовите его "webPattern". Создайте дубликат слоя “header” и переименуйте его в “pattern”. Откройте стили слоя, и уберите галочку с Gradient Overlay, поставьте на Pattern Overlay. Выберите "webPattern" и поставьте режим наложения на Overlay.
После этого примените маску на него с радиальным градиентом.
- Теперь остается добавить нужный вам логотип.
Пишем текст, я написал PSDTUTS, и сделал PSD жирным шрифтом, а TUTS тонким.
Далее пройдите в стили слоя и измените параметры Drop Shadow, Gradient Overlay, and Stroke. После этого у вас будет прекрасный текстовый эффект.
- Заключение.
Когда работаем с веб-дизайном, мы должны учесть размеры файлов, совместимость с браузерами и многие другие вопросы. Используя 2 цвета можно создать очень хороший визуальный эффект или уникальный стиль, не напрягаясь.
№1 8 апреля 2009 14:44 | Delphia поддерживаю тему |
№2 8 апреля 2009 17:30 | alglex Ой, благодарю. Круто, спасибо! ;) |
№3 7 июня 2009 07:11 | Дизайн просто супер. |
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
| Главная | Уроки | Загрузки | Статьи | Обратная связь |
