1.4. Создание макета сайта на Photoshop. Выпадающее меню

Автор Filip Sergienko
1.4. Создание макета сайта на Photoshop. Выпадающее меню

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

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

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

Такого же цвета. И сейчас нам следовало бы убрать направляющие доношу разметку убирается. Ты очень просто нажатием Control H вот так вот у нас уходит. Уточняю пропадает разметка также Control H мы возвращаем разметку обратно так далее теперь намечаем с вами высоту каждого пункта меню выпадающего меню. Так скажем у нас у нас вот вообще меню. Пуск каждый занимает 2%, но также с вами 2% на каждые 20% вот я теперь можно отправить. Вот этот кусок на которого остался то есть мы можем его сделать пошире довести до 10% или же наоборот уменьшить его довести до 8% делать всё очень просто нажимаем Control T у нас появляется такое вас свободное масштабирование и про уменьшаем выпадающее меню до далее. Далее, что мы делаем мы с вами добавим текстовый слой текстовый слой. Здесь также у нас будет шрифт на 14 цвет шрифта остается прежним у нас и выберем которому не помню какой сейчас посмотрю Franklin Gothic Medium на Franklin Gothic Medium ниток создаем новый текстовый слой так шрифт выбран. Ну и одним из выпадающих пунктов меню я предлагаю сделать просто. Как назвать его HTML и CSS так подставляем нужно место так вот здесь вот у нас видите скрывается текст за этим квадратом на заднем прямоугольником здесь нужно просто поднять на уровень выше этот свой текстовый. Да и ставим в нужное место так включаем разметку с натрием следующую нас хвой будет так выбираем выбираем шрифт следующий следующий пункт. Меню у нас не знаю пусть будет Java Script Java Script. И следующий следующий ещё один пункт. Меню пусть будет. Пасха ппкп вот таким вот образом центрированным до выставляем в принципе можем также. Добавить сюда какие-то icon очки. Если есть желание давайте посмотрим может быть у нас font-awesome, что есть по этому поводу. Так давайте посмотрим HTML email. Ну вот принципе такая так вот. в принципе использовать html5 у нас туда html5 копируем выбираем текстовый слой создаем текстовый слой. Так стоп регион здесь на салют меняем так что-то не идёт у нас, что не идёт почему не получается. А до. Я вот вспомнил тут же надо выбрать бренд и теперь же сквер. Вот я тоже самое с HTML. Вот она вот в чём была проблема вот так вот меняем вот так вот так. Давайте попробуем всё-таки насчёт использовать HTML так бренд меняем HDMI пять вот у нас получилось добавляемый курочку и. Давайте ПХП посмотрим, что давать просто наберём посмотрим, что будет за. ПХП тоже работает вот так немножко тренируем. Вот вот таким вот образом. Мы создали с вами пункты подпункты до меню и сейчас вообще не сказал самого главного в. Рекомендую вам создавать группировать слои определённой группы смотрите, что мы делаем мы сейчас просто выбираем последний или первый слой неважно первый который мы создавали и последние зажимаем клавишу Shift кликаем левой кнопкой мыши. Таким образом мы выделяем все твои которые у нас есть еда нажимаем просто Control G и все свои. У нас группируются в одну определенную группу то есть мы можем просто их убрать одновременно и всё. Мы их не видим назовем эту группу меню и вот здесь вот где мы уже с вами создавали выпадающее меню до также с группируем назовём нападающая падающие меню и мы можем его просто скрыть. Да вот так вот и теперь ещё очень важный элемент который тоже не могу сделать это, что будет происходить с пунктом меню при наведении для этого мы используем иконку я даже не знаю как она по-русски называется ну называется она Pointer вот так вот да вот этот ручку мы используем когда мы наводим на что-то. Да она у нас курсор у нас приобретают другой вид то есть не стрелки, а именно руки здесь копируем название создаем новый текстовый слой так уменьшен размер изменен цвет переместимся вот сюда да то есть таким незамысловатым образом показываем вообще верстальщику да. Что происходит с выпадающими пунктам меню и вообще при наведении на какой-то объект так. Что делаем теперь выбираем квадрат и прямоугольник инструмент прямоугольник вот здесь вот так скажем скрываем. Да и немножко. Вот — это вот слой который. Мы создали нам нужно поднять выше меню. Так секунду вообще надо меню так что-то не идёт так выпадающее меню так нет. Вот так надо фоном. Донат самым основным фондам мы его выставляем то есть сделаем таким образом чтобы он был выше ниже пунктов меню. Да и вообще всех текстовых слоев теперь обратимся к сервису. Колчин посмотрим какие цвета у нам предложил. Ну вот выбрал такой потемнеет.

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

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