1.5. Создание макета сайта на Photoshop. Создание шапки сайта

Автор Maksim Inshakov
1.5. Создание макета сайта на Photoshop. Создание шапки сайта

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

Ну вообще по сути мы уже принципе и так начали создавать шапку сайта да то есть одним из элементов шапке сайта — это наше меню давайте свернем здесь эти группы, что группа menudo чтобы она не мешала не бросалось в глаза и вот здесь вот создадим новую папку назовём её шапка шапка сайта. Теперь давайте подумаем о том, что мы можем здесь сделать вообще в принципе как я уже говорил я особо не задумывался о том. Какой должен получится дизайн в конце можно примерно так чтобы было всё понятно и просто взять и сделать например указать высоту пусть будет 15% да.

Вот такая вот.

Большая шапка можно поменьше может быть даже. Пусть — это будет 12% по сути — это неважно на важно другое важно как — это всё будет выглядеть и я предложила бы вам сейчас просто использовать здесь какую-то определенную картинку фоном и на этой картинке нарисовать сделать какую-то надпись то есть название сайта описание и иконку вставим иконку поехали значит вообще я очень часто пользуюсь таким вот сервисом который называется unsplash ансплеш предоставляет нам огромное количество изображение мы можем найти изображение использовать в своих работах абсолютно бесплатно и неся при этом никакой ответственности. Да здесь вот прям так и написано. Написано по-английски принципе вдаваться в подробности не надо. Да тут можно полистать посмотреть новинки и так далее. Также существует поиск и. Ну давайте просто посмотрим, что мы тут можно для себя взять. Ну примерно. Если соблюдать тематику нашего сайта блог вебмастера до скажем сдавать просто. Пиши здесь например про. ГРМ так так-так-так. Вова Вова. Вова Вова. Так ну что-то вот. Нашёлся нашли какие-то картинки, но здесь можно поискать посмотреть, что можно применить сейчас просто тупо не буду тратить время на то чтобы там подыскать подходящую. Просто давайте возьмём не знаю вот — это вот, что дальше обязательно скачиваем эту картинку до скачиваем к себе на компьютер так скачали и, что делать дальше знаешь просто берём отсюда вот перед так вот сюда Photoshop. Вот она у нас вот таким образом отображается ее сейчас давайте просто обрежем эту картинку просто-напросто оближи её так как нам надо в принципе всё все пометки всё-всё обозначу надо для этого мы просто сейчас возьмём инструмент прямоугольная область до так называется и просто-напросто удалим, а с начала нам нужно растрировать слой делать чтобы просто слои вкладка слои растрировать. Смарт объект кастрировали удаляем раз и удаляем два всё вот у нас так вот получается да в принципе неплохо выглядит. Вот такая вот у нас появилась незамысловатая шапочка. Да кстати свой мы перенесем в шапке и здесь мы можем сделать следующее мы можем в принципе немножко добавить темного тона на эту картинку чтобы она была не такая прям такая броская. Хотя я бы не сказал, что она прямо яркая блузка только сейчас вам покажу здесь вот давайте сделаем чёрный цвет и просто прозрачность уменьшил. Да вот таким вот образом быстро мы добавили в том картинки. Да мы можем кстати использовать вот этот свет свет основной. Да немножко увеличить или уменьшить до прозрачность. Ну вот всё на. Чёрном А ну-ка если будет жёлтым. Ну вот так вот принципе тоже. А если мы попробуем выбрать например вот такой вот цвет сейчас посмотрим вот немножко увеличен. Ну в принципе я думал вы поняли. Ну в принципе я бы не делал бы этого картинка неплохо вписывалась вообще в. На мой взгляд просто если такая необходимость есть вы можете — это сделать до если в этом необходимости нет в данном случае я считаю, что обходимости нет что-то здесь картинкой делать менять её просто. Давайте поверх напишем название название сайта. Я знаю как как вы будете его называть можете назвать как угодно сейчас просто напишу там что-то типа webmaster тору в master.ru. Ну в принципе надпись теряется. Донат теряется всё-таки может быть есть смысл затонировать тонировать картинку немножко. Вот таким образом. Москва увеличить прозрачность. Давайте слово webmaster немножко поменьше шрифт master.ru и сделаем какую-то небольшое описание. Дании описание сайта что-то. Типа всё для сайта. Строителей или там всё для любителей любители — это строители вот как-то так. Давайте немножко сделаем цвет поярче чтобы видно было да так. А он у нас вот так так так примерно примерно. Пусть будет так вот принципе не выглядит неплохо до выглядит неплохо. Можно немножко сместить пониже вот как-то так пусть будет не знаю. Всё зависит от вашей фантазии друзья на самом деле и. Давайте ещё что-то что-то какую-то иконку добавим там как-то картинку. Может у вас есть какой-то логотип может найти что-то в интернете можем воспользоваться сервисом фон olsun что-то что-то найти. Да помните вот мы, тогда с вами использовали такой вот кот. Так где он. А вот вот эта картинка. А может быть felcloth фильм. Код так и давай создадим новый слой Font awesome Free Solid раскладка английская Feel Good файл код WoT давайте сделаем свет поярче шрифт побольше. Вот такой вот у нас получается Icon да не знаю нравится вам или нет по сути. Вы можете выбрать какую-то свою картинку до туда добавить можете вообще ничего не добавлять в принципе это. Решайте сами. Ну вот примерно. Таким образом мы создали шапку сайта такая вещь у нас получилось и может быть ещё стоит здесь вот вверху справа. Да может быть написать например адрес почтовый да давайте здесь вот сразу воспользуемся Font awesome как там velop.

0 комментариев
0

Читайте также