Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Создаем шапку для сайта в стиле 3D,урок по веб-дизайну
Adobe Photoshop » Уроки 07 декабря 2009 SmokymoПечать


  Шапка является первым элементом,на который попадает внимание пользователя при загрузке сайта, поэтому с уверенностью можно называть ее одним из наиболее важных элементов веб дизайна,она является так называемым заглавным элементом любого веб сайта. Поэтому созданию шапки стоит уделить особое внимание,ведь от нее зависит первое впечатление,полученное пользователем при входе на ваш сайт.

Создаем новый документ под любым названием, размерами 1000x750. Двойной щелчек на слой, Color Overlay > Отмечаем темный коричневый.
Находим линейку и приводим ее в действие (View>Rulers). на созданном листе ставим линии как показано ниже.
Отмечаем 2 горизонтальные полоски, первая на 30px от верхнего края документа, вторая на 250px от верхнего края. И две вертикальные, первая на 100px слева направо, вторая на 900px слева направо.
Рисуем прямоугольник c помощью формы "прямоугольник" на панели инструментов фотошоп,для этого используем проставленные ранее линии как ориентир. Этот слой называем "header" или "шапка".
Отмечаем черный как основной цвет. Рисуем форму круга подобную форме на скриншоте,для создания теней.Для этого воспользуемся формой "круг " на панели инструментов фотошоп. Делаем форму капельку больше чем созданный ранее прямоугольник,для того,чтоб тень выходила за его края. Называем этот слой в "shadow"("тень") и перетягиваем его под наш первый слой "шапка".
Далее конвертируем форму в Smart Filters,далее воспользуемся фильтром Gaussian Blur .Уровень непрозрачности 60 процентов.
Заходим в стили нашего слоя "шапка". Находим вкладку Gradient Overlay (градиент поверх) и переставляем стиль градиента на radial (радиальный). Выбираем понравившийся цвет,например пурпурный.
Создаем линию (берем инструмент линия на панели) ,используя цвет на тару тонов выше,чем выбранный. Над этой линией располагаем еще одну другого цвета. Выделяем данные линии на панели слоев фотошопа и групируем. Даем этой группе название,например "vDivider".
Далее следуем таким путем: Layer(слой)>Layer Mask(маски слоя)>Reveal All (показать все)l. Используя инструмент градиент, которому задаем черно-белый перелив, на панели сверху задаем градиент Radial (радиальный) и применяем маску ко всей группе. Проводим градиент от центра группы с неольшим отклонением.
Делаем менюшку,взяв инструмент "текст" с панели инструментов . Написанный нами текст групируем и даем имя "White Links"(белые ссылки).
Дублируем данную группу и помещаем продублированное в изначально созданную группу,с которой была сделана копия. Меняем цвет нашей копии на черный,теперь текст в копии стал черным и с помощью перемещения группы на 1 пиксель в верх и влево мы добиваемся прикольного эффекта объемного текста.
Повторяем действия с созданием линий, но здесь уже создаем вертикальные деления для текста в меню. Вновь воспользуемся инструментом "линия" и создадим пурпурную линию, затем справа от нее нарисуем черную. Снова групируем нарисованное и опять дублируем эту группу столько раз, сколько понадобиться для меню. Т.е. если у вас как в примере будет четыре пункта, то следует создавать четыре дубликата + оригинал. Размещаем наши созданные линии на одинаковом расстоянии друг от друга:
Теперь мы выделяем и объединяем в едуную группу все созданные группы линий и именуем их "hDividers". Далее на данную группу накладываем маску слоя, Layer(слой)>Layer Mask(маска слоя)>Reveal All(показать все). Делаем маску как это показано на примере ниже:
Теперь займемся созданием текстуры для нашего дизайна шапки. Находим на компе завалявшийся файл с интересным узором,как напримере,можно любой другой,который вы сочтете подходящим,открываем. Указываем фотошопу,что этот файл является текстурой- Edit (добавить) >Define Pattern (определить как текстуру). Придумываем подхонящее название,например "webPattern" (веб текстура). Дублируем слой "шапка" и даем ему называние "pattern" (текстура). Заходим в стили слоя, и устраняем галочку с Gradient Overlay(градиент поверх), поставьте на Pattern Overlay(текстура поверх). Берем наш "webPattern" и накладываем-ставим режим Overlay.
Применяем к слою маску с радиальным градиентом.
Остается только добавить ваш фирменный логотип.
Вставлем какой-нибудь текст.
В стилях слоя меняем параметры Drop Shadow (отброс тени), Gradient Overlay (градиент поверх), and Stroke (штрих). Это даст красивый текстовый эффект.
С помощью таких несложных комбинаций в фотошопе получилась элегантная изысканная шапка, которая сможет украсить любой сайт.


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (2)

#1 написал: zend | 7 марта 2010 09:22
     

спс
#2 написал: inflex.ble | 3 сентября 2012 16:13
     

классно с текстурой смотрится bomb
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.