Создание дизайна сайта от А до Я. Часть 1



Это первая часть из серии статей по созданию дизайна сайта, которые охватывает все от создания макета до верстки.

Программы:

Photoshop и любой редактор кода, для верстки.

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

  • Дизайн будет в светлых тонах.
  • Формат: шапка, контент, 1 сайдбар справа, футер.
  • Ширина от 1200px до 1000px. Остальное фон.
  • Сайдбар 1/3 всей ширины шаблона.
  • Шапка: лого, краткое описание, значок rss, строка поиска.
  • Футер: копирайты, место под счетчик.

Начнем.

Создаем новый файл Photoshop 1100x800 пикселей. Сам шаблон 1010px, остальное фон.

Вот макет, который получился у меня.

Макет

После того как мы набросали примерную схему будущего дизайна, займемся фоном шаблона. Так как в требования у нас дизайн в светлых тонах, то и фон будет светлым.

Для начала создадим новый файл photoshop с размером 3х3 пикселя. Это будет наш паттерн для фона. Выбираем инструмент «карандаш» выставляем цвет «#0084ff» и рисуем:

Паттерн

После этого в меню выбираем «Edit->Define Pattern».

Теперь возвращаемся обратно к нашему шаблону. Создаем новый слой над фоном и заливаем его нашим паттерном: «Edit->Fill» в поле «Use» выбираем «pattern» и наш паттерн, который мы только что создали. Ставим «opacity» слою в 10%. Жмем правой кнопкой мыши по слою и выбираем пункт «Blending Options», в пункте «Drop Shadow» устанавливаем следующие параметры:

DropShadow

Вот, что у нас должно было получится:

Шаблон

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

Скачать файлы проекта.



Теги: ,

Комментарии

  1. А я сначала верстаю на дивах, а потом уже и фотошоп

    Reply

Оставить комментарий