0

Создание сайта от «А» до «Я» — Урок 1 — Создание макета

Здравствуйте дорогие друзья. Вот и настал урок по созданию макета. В данном уроке текста будет достаточно мало. Вся основная суть в видео-уроке.

Цели данного урока:

  1. Создание простого макета
  2. Получить понятие о том что такое макет и как происходит создание

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

Для чего он нам потребуется в дальнейшем? Он понадобится нам в следующих уроках по верстке. А после с использованием получившегося шаблона мы будем писать скрипты и свою CMS на языке программирования PHP.

Софт, который вам понадобится в данном уроке:

  1. Adobe Photoshop

Я использовал Adobe Photoshop CS6 вы можете взять любую другую версию, которая вам удобнее, это не принципиально.

Создаем холст размером 1280x1300 пикселей (вы можете взять любое другое разрешение, которое удобно вам). На нем создаём необходимые блоки.

Обычно сайт состоит из следующих основных элементов:

  1. Header - верхняя часть сайта, чаще всего в неё входи меню и логотип
  2. Content - основная наша часть сайта, в ней находятся различные новости или любой другой контент сайта, а также сайдбары, слайдеры и различные блоки
  3. Footer - них сайта, наш подвал, там чаще всего информация о сайте, контакты какие-то, копирайты, а также баннеры под счетчики или меню

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

 

макет сайта в psd скачать

Созданный в этом уроке макет в формате PSD

 

 

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

 

Материалы урока:

  1. Макет в PSD формате (скачать)

 

На этом урок закончен. Ожидайте следующего урока. Он будет по верстке, в нем мы сверстаем этот макет и подробно разберем принцип блочной верстки, как на теории, так и на практике. Спасибо всем за внимание.

Запись опубликована В категории: Изучение PHP

Shnapik

Вебмастер с опытом ищет приют! Возьмите меня, а то меня рвут!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *