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

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

Создаем новый файл размером 1200*1500 пикселей. Ширина же страницы сайта будет 960 пикселей.

Вставляем хедер. Чтобы регулировать точность размещения на рабочем фоне элементов, то необходимо зайти во вкладку «Просмотр» и выбрать «Новая направляющая». В открывшемся окне будет по умолчанию обозначаться узкая голубая линия.

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

Её возможно левой кнопкой мыши сдвигать на поле.

Кроме этого необходимо установить «Вспомогательные элементы», каковые выглядят как сетка.

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

Слой с хедером у нас будет неизменно верхним слоем, и все последующие новые слои будут размешаться под ним.

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

Создаем новый слой и выделяем узкую полосу, которую заливаем цветом 40142e

В ней будет размешаться содержание сайта (рецепты, литература, конкурсы, гостевая, контакты).

Создаем новый слой и слева выделяем недлинную узкую полосу, которую заливаем более ярким цветом, к примеру eac4dd и пишем в ней слово «поиск».

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

Создаем новый слой и среди поля создаем продолговатый прямоугольник, что заливаем цветом eac4dd. Включаем «Вспомогательные элементы».

Инструментом «Прямоугольная область» выделяем меньший прямоугольник и высчитываем количество строчков по сетке, которое должно быть в каждом прямоугольнике. В то время, когда мы выяснили такое количество, то выделив нижний прямоугольник инструментом «Перемещение» сдвигаем его вниз. То же самое проделываем со средним прямоугольником.

Наряду с этим расстояние между ними возможно сверить по сетке.

Заходим во вкладку «Слои» — «Стиль слоя» — «Параметры наложения».

В открывшемся окне устанавливаем галочку в строчке «Тень», задаем параметры цвет 40142e, смещение 7, размах 11, размер 7.

Ставим галочку около параметра «Внешнее свечение». Нажимаем на параметр и устанавливаем значения.

В блоке «Уровень качества» определяем тип свечения «Контур», что сделает около прямоугольников обводку в виде двух линий.

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

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

Слою с фоновым прямоугольником снижаем непрозрачность до 15-20 %.

Создаем новый слой и над футером выделяем место под рекламный блок и обозначаем его круглым выделением.

В новом слое справа под строчком поиска создаем мелкий квадрат для анонса рецепта.

В новом слое справа внизу выделяем прямоугольник. Выставляем на панели инструментов в верхнем квадрате цвет eac4dd и в нижнем 40142e. Инструментом «Градиент» тип «От главного к фоновому» от верхнего левого угла проводим линию до нижнего правого.

Это будет место под баннеры и конкурсы мероприятий. Слово «Конкурс» возможно выделить типом шрифта, каким мы писали «Кулинарный сайт» и слоган, в частности ss_drebeden

 В «Параметрах наложения» задаем обводку цвет 40142e, положение «В».

Слева среди свободной полосы пишем несложным шрифтом «Разделы литературы» и внизу любой раздел в отдельности прописываем.

В свободных местах определяем для двух рекламных блоков и место под баннеры партнеров.

Ссылки на изображения использованные в уроке: Вектор 1, Вектор 2, Вектор 3.

Как создать макет сайта (mockup, мокап)


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

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

  • Схема макета сайта и создание логотипа

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

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

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

  • Макет страницы для сайта

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

  • Создание кисти в фотошоп

    В то время, когда хочется украсить изображение, то на помощь приходит кисть, а вдруг хочется применить такую кисть, какой нет ни у кого? Тогда нужно…

  • Создание текстуры для коллажа

    Частенько, в разного рода коллажах, используются текстуры. Попытаемся создавать самостоятельно текстуру с элементами, напоминающими фигуры . Эту текстуру…

  • Создание авторской кисти в фотошоп

    Тем, кто выкладывает в Интернет коллажи и свои фотографии хочется обозначить собственный авторство, для этого подойдет таковой способ, как использование…