Это первая часть из серии статей по созданию дизайна сайта, которые охватывает все от создания макета до верстки.
Программы:
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» устанавливаем следующие параметры:
Вот, что у нас должно было получится:
На этом первая статья закончена. В следующей мы нарисуем шапку шаблона.
Скачать файлы проекта.
А я сначала верстаю на дивах, а потом уже и фотошоп
Reply