Дизайн сайта в фотошопе. Стили дизайна сайтов

Для того, чтобы сделать макет сайта в Фотошоп, нужно понимать, что Фотошоп — это редактор растровой графики. Растр — это такой формат, который не любит изменения первоначальных размеров и при редактировании теряет свои свойства, такие как чёткость, резкость, цветовые оттенки. Из этого следует: прежде чем сесть за создание дизайна сайта в Фотошоп, необходимо чётко определиться в размерах шаблона, а именно — в его ширине. В настоящее время актуальной считается ширина в 1 200 px, хотя в прошлые годы актуальными считались и 1 024 px. Но время течёт, всё меняется, мониторы становятся больше, соответственно, сайты — шире.

Стили дизайна сайтов

В общем, с шириной сайта мы определились: создаём новый документ 1 200 х1 600 и плотностью в 300 dpi. Цвет контейнера по умолчанию выставим белый, впоследствии мы всегда можем изменить цвет этого слоя. Теперь, чтобы у нас всё получилось красиво и симметрично, нам просто необходимо сделать размётку сайта по линейкам при помощи вспомогательных элементов — направляющих. Предварительно хочу напомнить для тех, кто забыл, и для тех, кто не знает: все элементы макета изготавливаются отдельно, каждый на своём слое. Это обязательное условие в разработке веб дизайна сайтов. В зависимости от стиля дизайна сайта определим место для основного блока (content) и вспомогательных блоков(ка) (sidebar). Сколько колонок в макете? Три? Значит, блок-контент посередине. Если колонок две, значит, вспомогательный блок справа или слева. Если на вашем будущем сайте будут преобладать фотоматериалы, картинки, то рекомендую делать сайт в две колонки. Посетитель лучше воспринимает фото в большем размере. Ну, и, соответственно, если будет больше текста, можно делать макет в три колонки и вмещать в него больше информации.

Если вертикальная размётка прошла успешно и вы полностью удовлетворены результатом, вполне можно приступить к созданию важной части макета сайта — шапки (header). Шапка сайта является лицом сайта и несёт первичную информацию о нем. В шапке находится его величество логотип. По логотипу можно определить тематику сайта, ранг и даже состоятельность сайтовладельца. О создании логотипов поговорим в другой статье, а вот о его размещении — сейчас. Оптимальной высотой шапки будет высота не более 100 px, при необходимости можно и меньше. Соответственно, размер логотипа будет уместным делать менее 50 px в высоту и расположить его в наиболее удачном месте методом подбора. Также в шапке можно сразу обозначить место для рекламного баннера в перспективе.

Дизайн макета сайта

Современные сайты имеют много как отдельных страниц, так и рубрик-категорий. Поэтому более правильным, на мой взгляд, будет прорисовка в макете двух меню: горизонтального, находящегося по шапкой, и вертикального — в боковой колонке сайта. По собственному опыту знаю, что мудрить с меню не стоит. Не стоит и делать фоном кнопок картинки с градиентом и прочими выкрутасами, это только утяжеляет сайт и увеличивает время загрузки. Всё можно сделать при помощи CSS. Впрочем, это уже дело верстальщика, а наше дело — продолжить дизайн макета сайта.

Ещё один важный момент — это шрифты, использующиеся на сайте. Старайтесь избегать редких шрифтов и непомерно больших или маленьких размеров. Оптимальными буду шрифты Arial, Tachoma, Verdana размерностью в 12 px. Также избегайте разноцветицы в шрифтах, да и в самом макете тоже. Два–три цвета более чем достаточно для удачного дизайна страниц сайта. Ещё одним обязательным условием будет соответствие цветов. Тёплые — к тёплым, холодные — к холодным. Для этого есть специальные таблицы, и их не трудно найти в Интернете.

И заключительным блоком в создаваемом макете будет блок (footer) подвал. Высота подвала может быть сделана произвольной, в зависимости от той нагрузки которую он понесёт. Обычно там расположены всякие реквизиты сайта, адреса, телефоны, информация о владельце, счётчики и прочее. В общем, всё, что вам захочется. Поэтому подвал делается сугубо под свои нужды. А вот цветовую гамму футера старайтесь выдержать в тон шапки, чтобы было понятно, что это законченный проект. Ну, вот так это и делается. )) Как видите — ничего сложного в этом нет.

С уважением, для вас подготовил статью дизайнер компании "ООО Апгрейд".