Создание шапки сайта

Создание макета сайта начинается с его шапки, на опытном языке эта область именуется хедер (header). Как раз тут будет размешаться наименование сайта, логотип, вход и регистрация для пользователей.

Определяем цветовую гамму для оформления макета сайта.

Для хедера направляться применять цвет шрифтов и заливку слоёв в определенной цветовой гамме. В данном примере главные цвета:

для градиентов и заливки: 40142e, ca7aa9 и ffffff;
для шрифтов: 40142e и caa4bc.

Создаем новый файл размером 960*450 пикселей.

Располагаем на поле хедера логотип и название сайта (создали в прошлом уроке). Создаем под логотипом и текстовыми слоями новый слой и заливаем его цветом ca7aa9.

Создаем новый слой и на панели инструментов в верхнем квадрате устанавливаем цвет ca7aa9, а в нижнем 40142e.

Инструментом «Прямоугольная область» в новом слое выделяем прямоугольник, что заливаем градиентом тип «От главного к фоновому».

Во вкладке «Слои» выбираем «Стиль слоя» — «Параметры наложения». В открывшемся окне устанавливаем галочку около параметра «Обводка» и нажимаем на параметр, дабы раскрыть его настройки. Устанавливаем цвет обводки 40142e и толщину в 1 пиксель.

Создаем новый слой и заливаем его цветом ca7aa9. Придадим ему узор, что создадим сами. Делается это следующим образом, создаем новый файл размером 2*2 пикселя. Увеличиваем файл: удерживая надавленной клавишу Alt прокручиваем скроллинг (колесико прокрутки мыши) вверх.

Инструментом «Прямоугольная область» выделяем один пиксель (один квадратик) и заливаем его черным цветом. То же самое проделываем с квадратиком наоборот.

Заходим во вкладку «Редактирование» и выбираем «Выяснить узор».

Возвращаемся к файлу с хедером. Для нового слоя, залитого цветом приводим к окошку «Параметры наложения» и устанавливаем галочку около параметра «Наложение узора». Раскрываем настройки и выбираем узор, что мы создали из перечня. Устанавливаем галочку в строчке «Связать со слоем» что разрешит изменять режим наложения слоя с узором.

Снижаем непрозрачность до 20-30%.

Изменяем режим наложения слоев на «Замена ярким».

Создаем под ним новый слой и «Прямоугольной областью» обводим верхнюю половину слоя и заливаем её белым цветом ffffff.

Этому слою добавляем слой-маску, надавив на иконке внизу окна слоев, как продемонстрировано на рисунке. В слое-маске кистью тёмного цвета мягкого типа громадного диаметра прокрашиваем нижнюю границу, дабы не была видна линия раздела. Этому слою изменяем режим наложения слоев на «Мягкий свет».

Добавляем элементы оформления. Создаем новый слой и посредством инструмента «Карандаш» цветом 40142e проводим линию. Дабы линия была четкой необходимо поставить первую точку «Карандашом» и надавив клавишу Shift совершить «Карандашом» линию до последней точки.

При необходимости изменяем режим наложения слоев. В данном примере это «Твёрдый свет».

Создаем кнопку регистрации/входа для пользователей, в случае если такая функция предполагается. Создаем новый слой и «Прямоугольной областью» выделяем мелкий прямоугольник, что заливаем цветом ca7aa9. Приводим к окошку «Параметры наложения» и устанавливаем галочку около параметра «Тиснение». Раскрываем настройки. Чтобы придать кнопке количество необходимо убрать смягчение и выставить маленький размер.

Направление указать вверх. Выяснить глубину, дабы кнопка смотрелась естественной.

Копируем слой с кнопкой и посредством «Масштабирование» удлиняем новый слой.

Текстовым слоем над кнопками пишем «вход» «регистрация».

Добавляем иллюстрацию (пример). Располагаем её над громадным прямоугольником. Дабы изображение не выделялось по цветовой гамме необходимо создать над ним корректирующий слой «Цветовой баланс».

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

Входим в корректирующий слой и настраиваем распределение цветов.

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

Изменяем непрозрачность наложения и режим слоёв.

Хедер готов.

Развитие на YouTube/Урок №1/Создание шапки

Интересно почитать:

Самые интересный результаты подобранные по Вашим интересам:

Создание макета сайта

В прошлых уроках мы выяснили схему макета сайта, сделали хедер и логотип. Сейчас возможно оформить основную страницу сайта. Создаем новый файл размером…
Схема макета сайта и создание логотипа

В случае если вам имеется чем поделиться с миром, то вам пора создавать личный сайт. Дело это трудоемкое и пишут сайты программисты, но чтобы они имели…
Макет страницы для сайта

В то время, когда готова основная титульная страница макета, то возможно дать волю фантазии и оформить страницу с рецептами, приукрасив её коллажами. На…
Чашка с чаем. создаем иконку для сайта

Для сайта приуроченного кулинарии время от времени незаменимы иконки чашек, ложек, тарелочек. Разглядим, как создать иконку чашки, наполненную чаем….
Карандаш. создаем иконку для сайта

Интернет пестрит разными иконками и аватарками, но для собственного сайта предпочтительно сделать их личными. Сделаем иконку карандаша, которую возможно…
Урок по созданию демонического портрета в photoshop

Совсем сравнительно не так давно был опубликован урок по Фотошопу, что стал причиной громадной интерес у визитёров сайта. Это урок о том, как создать…