Создание дизайна сайта от А до Я. Часть 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» устанавливаем следующие параметры:
Вот, что у нас должно было получится:
На этом первая статья закончена. В следующей мы нарисуем шапку шаблона.
Скачать файлы проекта.
Программы:
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» устанавливаем следующие параметры:
Вот, что у нас должно было получится:
На этом первая статья закончена. В следующей мы нарисуем шапку шаблона.
Скачать файлы проекта.
Теги:
дизайна, будет, шаблона, выбираем, будущего, Создаем, Photoshop, тонах, займемся, паттерн, фоном, После, макета, верстки, обратно, нашему, Теперь, возвращаемся, Define, этого, Pattern, выставляем, пикселя, размером, photoshop, создадим, Выбираем, инструмент, 0084ff, шаблону, карандаш, рисуем, создали, статья, закончена
Похожие новости:
Комментарии:
Нету комментариев для вывода...