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

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

На данной странице не обязательно повторять наличие блоков первой страницы, в частности: анонс рецепта, конкурс, раздел литературы, а вот рекламные блоки лучше покинуть, но разместить их с учетом дизайна конкретной страницы.

Не будем создавать новый файл, а скопируем файл макета страницы. Удалим из него последовательность слоев и покинем в таком виде.

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

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

При необходимости размер возможно поменять.

Вставляем изображения (пример 1, пример 2), каковые располагаем в противоположных углах. Уменьшаем их при помощи функционала «Изменение». Инструментом «Ластик» стираем границы слоев.

Создаем новый слой и заливаем цветом под главную тональность изображений, каковые будут составлять коллаж. В данном примере это цвет #e0eafd.

Создаем корректирующий слой «Цветовой баланс». Настраиваем тональность: -3, +8, +20.

Создаем новый слой и заливаем его тем же цветом, что и фон. Приводим «к Параметрам наложения»: вкладка «Слои» — «Стиль слоя» — «Параметры наложения». В открывшемся окне устанавливаем галочку около параметра «Наложение узора».

Выбираем узор, что необходимо создать самим.

Делается это следующим образом:

— создать новый файл размером 1*1 пикселей,

— верхний пиксель заливаем черным цветом,

— заходим во вкладку «Редактирование» и выбираем «Выяснить узор».

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

Потом добавляем к этому слою слой-маску, надавив внизу окна слоев иконку «Добавить слой-маску».

Включаем «Вспомогательные элементы», дабы выделение делать с сохранением расстояний: вкладка «Просмотр» — «Вспомогательные элементы».

Инструментом «Прямоугольная область» выделяем квадраты и заливаем их в слое-маске черным цветом.

Чтобы заливку сделать в слое-маске необходимо в конце слоев надавить на миниатюру слоя-маски, тем самым сделав её активной.

Приводим «к Параметрам наложения» и устанавливаем «Наложение градиента». Тип градиента возможно выбрать в окне градиента.

Устанавливаем галочку около параметра «Тень», нажимаем на параметр и настраиваем тень.

Устанавливаем галочку около параметра «Обводка» и делаем обводку градиентной.

Сохраняем в формате JPEG коллаж и вставляем его в макет страницы.

Опять включаем «Вспомогательные элементы» и создаем новый слой. Выделяем инструментом «Прямоугольная область» полосу в той части макета, где будет рекламный блок и заливаем её «Градиентом» типом «От главного к фоновому». Предварительно необходимо выставить на панели инструментов в верхнем квадрате цвет #eac4dd и в нижнем #40142e.

Для этого слоя приводим «к Параметрам наложения» и устанавливаем обводку.

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

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

В открывшемся окне задаем цвет и размер обводки. Потом возможно улучшить несложную обводку, приведя «к Параметрам наложения» и задав «Градиент».

В случае если нужен количество, то возможно добавить «Тень».

Пояснения:

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

Как подготовить макет сайта для верстки, для верстальщика


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

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

  • Гостевая страница для сайта

    Общение с визитёрами сайта возможно очень нужным и потому возможно сделать на сайте страницу «Гостевая». Так как мы используем как пример макет…

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

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

  • Чашка с чаем. создаем иконку для сайта

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

  • Карандаш. создаем иконку для сайта

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

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

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

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

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