SEMNIC                                                     Главная | HTML | CSS | Статьи


 

Дизайн сайта в стиле гранж

В последнее время при создании сайтов очень актуально использование дизайна в стиле гранж. Тенденции этого дизайна направлены на изображение состаренных элементов, текстуры и элементы дизайна изображаются, например, в виде старой бумаги. Дизайн гранж отлично смотрится практически на любых интернет-проектах, начиная от блога, заканчивая винтажным интернет-магазином. Такой дизайн довольно востребован в Интернете, поэтому большинство вновь создаваемых сайтов использует именно этот дизайн.

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

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

Рисуя дизайн в Photoshop разбиваем фон на отдельные элементы, объединение делать нужно при помощи папок, которым нужно давать название, это поможет не запутаться при разрезании на отдельные элементы. Вставляем текстуру отдельно для верхней части сайта и отдельно для нижней. Центральную часть можно оставить без текстур, это позволит ускорить загрузку страниц сайта. Если требуемые текстуры не найдены, то при помощи того же Photoshop можно слегка осветлить и размыть похожую текстуру и при помощи фильтров можно добиться эффекта состаривания. При оформлении фона в тусклых тонах нужно обратить внимание, что бы отдельные элементы и ссылки не сильно выделялись и не были слишком резкими. Потом пишется при помощи Dreamweaver html-шаблон, а нарисованный дизайн разрезается на отдельные элементы. Используя каскадные таблицы стилей собираем дизайн в единое целое и тестируем на локальном сервере.


Если навыков верстки и создания сайтов нет, то готовые шаблоны сайтов можно найти в Интернете. Правда, так как направление дизайна сайтов новое то готовые шаблоны будет тяжело найти, следует верстать сайт нужно самому. Это поможет набраться опыта и следующие сайты будет создавать намного проще.