1.2. Создание макета сайта на Photoshop. Верстка меню сайта

Автор Georgiy Dronov
1.2. Создание макета сайта на Photoshop. Верстка меню сайта

Привет всем продолжаем создание макета сайта — это второе видео урок цифры видео урок по созданию макета сайта в.

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

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

Да здесь мы можем немножко настроить цветовую модель здесь очень гибкая самом деле настройка. Ну мы сейчас сильно вдаваться в подробности не будем мы просто здесь вот выберем контраст. То есть — это 2 основных цвета и теперь кликая по любому из этих цветов. Да можно просто посмотреть цвета. Оформи в виде таблицы и давать сейчас вот здесь вот у нас положено основной цвет да давайте сейчас просто выберем цвет такой как бы синеватый голубоватый светлый. Да мы перейдём уже к созданию пунктов меню. Да сейчас до того чтобы создать пункт. Меню Нам необходимо выбрать инструмент текст великан в любом месте можем сразу выбрать некий шрифт который вам понравится кстати дальше в дальнейшем мы с вами также по учимся добавлять шрифт подключить шрифт на сайт — это уже опять же в цикле второй части циклов видеоуроков по верстке макета сайта сейчас он просто выберем понравишься шрифт и также установим размер надо и зададим как раз используя сервис. Колчин Вадим значение цвета делается. Причём легко несколько кликов в муке и пишем. Давай напишем 1 пункт. Меню у нас будет главное вообще создавая создавая макет сайт. Нам необходимо понимать конечный продукт обзор так скажем конечного продукта, а на самом деле я не задавал себе в этом видеоуроке в этом курсе вообще сделать какой-то определенный то есть всё то, что мы будем с вами делать, что — это абсолютно импровизационная возможно этот дизайн скорее всего — это дизайн получится не очень красивым не аккуратно. Но самое главное, что вы поняли суть вообще создание макета сайта в. Фотошопе то есть вообще в принципе то, что у вас будет получатся всё будет зависеть от вашей фантазии и так. Мы создали первый меню на твоего главное давайте сейчас с помощью разметки поставим черту на 10% в 10% таким вот образом мы с вами отметили область первого пункта меню далее. Давайте создадим ещё один пункт. Меню Что делаем просто. Скопируй ем свой свой первый слой текстовый как — это сделать при нажатой клавише Alt нажимаем левую клавишу мыши и просто не подвигаем вверху такая вот у нас обратить внимание толстая чёрточка появляется сдвигом вверх и отпускаем и мышку таким образом нас копировался слой. Теперь мы его просто выделяем. Обрати внимание здесь написано копия просто мы выделяем двигаем стрелочкой. ВПР и сейчас просто переименуем. А вот перепишем назовем его дать назовем его рубрики рубрики вообще я в принципе я думаю, что мы можем с вами создать некий — это сайт который будет посвящен например. Пусть — это будет называться блог веб дизайнера да пусть — это будет дизайнера или просто блог вебмастера скажем так да. Ну вот создать создаем нас с вами раздел рубрики дальше. Давайте дальше следующие этапы то у нас опять отмечаем область второго пункта меню да. Опять же добавляем 10% 20% устанавливаем немножко акцентируем и также следующие действия копируем предыдущий слой точно также Alt Alt кулер в камыше двигаем вверх дали скопированный свой переносим правее и также меняем, но здесь напишем. Пусть этот пункт будет ананас пункт. Меню она дальше также намечаем область и немножко центрированным. Да и. Давайте создадим ещё один пункт. Меню назовем его контакты. Пусть — это будет контакты контакты вот также намечаем обувь меню и. Сейчас давай мы уже немножко понимаем то, что вообще вся область меню которым сейчас создали будет занимать у нас от 0 до 40% да то есть ширина области меню будет составлять 40%, а вообще от сайта. Да от всей ширины сайта так ну в принципе сейчас я думаю мы закончим с вами второй урок давать не забудем сохранить сохранить наш макет нашей изменением эти делается очень просто нажимая файл сохранить выбираем необходимое место на на компьютере да то есть чтобы его не потерять в принципе просто заемному здесь название до макет сайта блога. Мастер и сохраняем его сохраняем и таким образом всё. О'КЕЙ на этом заканчивается второй урок и переходим к уроку номер три.

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

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