1.7. Создание макета сайта на Photoshop. Пагинация, сайдбар

Автор Ivan Samoilov
1.7.  Создание макета сайта на Photoshop. Пагинация, сайдбар

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

Давайте создадим новый слой текстовый здесь пропишем цифры то как они должны город и давайте выберем шрифт размер 14. Да и цвет цвет у нас основное. Итак прописываем цифры она пример 1234 далее.

Многоточие и вот такой вот значок значок далее секунду вот в принципе вот так вот мы создаем пагинацию.

Давайте её немножко акцентируем примерно так на глаз и сейчас также посмотрим как — это выглядит. Когда например у нас выбрана какая страница 1 например. Здесь мы с. Вами просто на этим. Давайте вот — это вот подожди немножко наметил выбранную страницу до укажем как она должна выглядеть выбранная страница и так. Так примерно и выбираем инструмент прямоугольник. СДМ такой вот свой выпускаемого ниже и. Пусть — это будет. Ну давайте вообще наверное выберем вот этот цвет. Да, а цвет циферок текстового слоя. Я сейчас вот — это да по-моему выбирали так добавим так посмотрим, что у нас получилось вот в принципе вот так вот у нас получается да всё в принципе неплохо и. Давайте теперь ещё сдадим, что один слой где будем показывать. Что происходит с цифрой при наведении давайте для этого возьмем наш Pointer ручку. Да так перенесём её так где она сейчас появилось. Ага вот здесь вот так пенсионный вниз сейчас не видно она белого цвета давайте сделаем обложку для неё. Так — это получается у нас много вот 1 пиксель чёрного цвета и например наведем на третью страничку на 3 навели и также вот здесь вот сделаем небольшую разметку вот прямоугольник отмечаем Skype ниже и изменение цвета происходит следующим образом также возвращаемся к ловчим использовал. Такой цвет меняем вот-вот принципе мы сделали пагинацию здесь кстати можно ещё наметить, что цифер как будет становиться беленькое совсем чтобы хорошо её было видно. И вот вот так вот ну в принципе — это сделали вот у нас pagination так и сейчас. Я бы ещё предложил уменьшить немножко размер основного блока до подтянуть его немножко повыше осталось немножко в вот-вот принципе и всё с пагинацией и сейчас. Давай перейдём к саундбару sidebar находится на справа вот мы здесь отмечали область сайдбара давайте сейчас создадим ещё одну папку назовём её sidebar sidebar так здесь надо подумать вообще о том, что здесь может находиться. Ну давайте как обычно. Да всё как обычно ничего не меняем не меняют традиции так скажем напишем здесь просто. Что у нас здесь в рубрике как рубрики сайта в рубрике сайта немножко увеличена заголовок взял 18 пикселей цвет цвет у нас основной будет использоваться вот так рубрики сайта. Да и здесь. Мы также можем перечислить все рубрики которые у нас есть могут быть на сайте вспоминаем выпадает меню. Давай посмотрим на него. Так она сейчас открыто. Сейчас подними он просто повышен. Посмотрим Да вот у нас выпадающее меню у нас здесь с спкп. Да так вернём всё как было далее. Далее сейчас здесь пропишем да создаем новый текстовый слой шрифт цвет шрифта у нас основной на 14 пикселей и пишем здесь HTML CSS далее. У нас там Java Script и пкп здесь может быть, что какая-то рубрика. Перечисли надо быть оставим наверное пока так музыка всё выглядит скудненько Android ещё что-нибудь добавим там что-нибудь типа WordPress интернет-магазин что-то. Типа такого вот такая вот такой вот незамысловатая sidebars перечислением рубрик немножко под винил так и говорит попробуем сейчас убрать просто вот этот фон который нам показывает область область область область сайдбара. Так где-то у нас был в контенте вот так вот да вот мы убираем здесь мы можем например сделать следующая. Так значит перекинь ем sidebar в текстовый слой на рубрики сайта так и вот здесь вот мы можем. Например у нас как раз вот здесь вот пока такая линия. Да вот здесь мы можем использовать инструмент линия, что — это там например 5 пикселей цвет можем также выбрать основной и нажимая клавишу Shift на принципе можно не нажимать по линии мы. Нарисуем изобразим эту линию очень много надо. Вот такая вот у нас получается штука немножко опускаем пониже. Да чтобы — это всё посимпатичнее смотрелось дальше здесь уже создадим группу назовём её рубрики рубрики и давать просто-напросто с копируем эту группу эту группу опустим немножко ниже назовем эту рубрику заметки сайта метки сайта. Да я здесь напишем таблетки сайта и также можем в принципе изменить здесь текст. Да я я бы не стал его менять допустим в принципе всё так и остаётся вот в принципе. Мы создали такую вот sidebar ещё очень часто сайт барах создают специально такую область область для рекламы. Это называется да. Давайте нам этим создадим просто папку здесь напишем область рекламы. Если вы создаёте макет сайта для заказчика на и одним двое было поставить оставить какое-то место для будущей рекламы сайта.

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

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