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

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

Перед тем как приступить к созданию макета направляться набросать ориентировочную схему строения сайта.

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

Итак, берем за пример создание макета кулинарного сайта.

Придумываем наименование (блок 1.2).

Разрабатываем логотип сайта (блок 1.3).

Информация: логотип и название сайта будут размешаться в хедере, другими словами шапочке сайта (блок 1). В большинстве случаев данный блок разрабатывается раздельно и в него включена графическая составляющая (на схеме выделена зеленым цветом). В этом же блоке предполагается регистрация пользователя (блок 1.4).

Определяем какое количество разделов у нас будет. Главные разделы выносятся в меню (блок 2):

  • основная страница сайта и главная;
  • гостевая;
  • контакты.

Потом планируем строчок поиска (блок 3).

Сейчас делим поле макета под блоки:

  • главной блок, что отражает сущность сайта, в данном примере содержащий статьи и рецепты сайта (блок 4);
  • сбоку планируем место под блок, в котором будет анонсироваться самая популярная статья (блок 5);
  • создаем блок, что будет содержать данные об истории кулинарии, разные исторические факты, ссылки на электронные книги (блок 6);
  • для их участия и привлечения пользователей в жизни сайта стоит позаботиться о блоке с мероприятиями, конкурсами сайта, разными занимательными рецептами от пользователей (блок 7).

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

Завлекаем к партнерству сайты и размещаем их баннеры (блок 8).

Под рекламу выделяем три блока: (9.1), (9.2) и (9.3).

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

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

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

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

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

Перед тем как приступать к созданию макета стоит определиться с заглавием сайта, логотипом и слоганом.

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

Создаем новый файл размером 200*200 пикселей. Рисуем букву, которая будет одного из главных цветов сайта. Подбираем размер и шрифт.

Сверху добавляем векторный клипарт (пример).

Растрируем текстовый слой. Для этого правой кнопкой мыши становимся на миниатюре слоя и вызываем контекстное меню.

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

К слою с рисунком добавляем слой-маску и кистью тёмного цвета прокрашиваем лишние участки.

Возвращаемся к тестовому слою и во вкладке «Слои» выбираем «Стиль слоя» и потом «Параметры наложения». Устанавливаем галочку около параметра «Обводка» Раскрываем настройки и задаем размер и цвет обводки.

В случае если нужно, то создаем обводку и для векторного клипарта.

Логотип готов.

Как создать логотип в Adobe Illustrator


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

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

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

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

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

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

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

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

  • Пошаговая инструкция создания оптимального размера фотографии для сайта

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

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

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

  • Создание динамических пейзажей

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