Все уроки Фотошоп

Есть вопрос? Задайте здесь и сейчас!

Форум Регистрация Выслать активацию Восстановить пароль Дополнительно Файлы Видео Галереи Справка  
Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

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

Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

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


 
Опции учебника
Стильная шапка для сайта, веб-дизайн

Предыдущий учебник Стильная шапка для сайта, веб-дизайн Следующий учебник
Опубликовал(а) Gostemilov
22.06.2015
Стильная шапка для сайта, веб-дизайн


Creating A Cool 3D Web Design Effect


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


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


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


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



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


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


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


Шаг 8.
Повторите Шаг 6, только создайте вертикальные разделители для надписей на меню. Используя , сначала нарисуйте темно-красную линию, потом справа от нее, черную. Сгруппируйте их и сделайте дубликат группы столько раз, сколько вам нужно для меню. У меня в меню 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 цвета можно создать очень хороший визуальный эффект или уникальный стиль, не напрягаясь.


Автор: Fabio
Перевод: Glebash

Опубликовал(а)
Аватар для Gostemilov
Администратор
Он малахольный
Регистрация: 07.09.2007
Адрес: Россия, Москва. 100 метров до МКАД
Возраст: 55
Сообщений: 92,013
Вес репутации: 10
Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима


Рекомендовать другим

Копирайт
Оригинал урока
demiart.ru/forum/index.php?showtopic=45193
 



Опции учебника

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Выкл.
Pingbacks are Выкл.
Refbacks are Выкл.


Похожие темы
Название учебника Автор учебника Раздел Числу комментариев Последнее сообщение
Волшебная шапка для сайта, дизайн "шапки" для сайта (блога) Gostemilov Необработанные уроки Photoshop 0 22.06.2015 21:45
Дизайн сайта в DJ стиле, DJ Layout #2, дизайн, макет Веб-Сайта Gostemilov Необработанные уроки Photoshop 0 22.06.2015 08:05
  Урок Photoshop для начинающих     Alien Header.Шапка сайта в Фотошоп Gostemilov Уроки Adobe Photoshop 0 16.01.2013 02:17
  Урок Photoshop для начинающих     Графическая подпись к E-Mail или шапка сайта Gostemilov Уроки Adobe Photoshop 0 28.03.2007 19:31

###
Социальные сети
Группы
Основные разделы
Скачать и поделиться

Новости Фотошопии
Подписаться письмом
Дополнительно

Текущее время: 04:14. Часовой пояс GMT +2.


удаленная проверка сервера uptime российских хостеров
Rambler's Top100


.
Locations of visitors to this page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc. Перевод: zCarot
vBulletin Optimisation by vB Optimise (Reduced on this page: MySQL 15.00%).