Шаблон сайта в Photoshop

Самостоятельная разработка шаблона сайта в Photoshop станет отличным решением для тех сайтостроителей, которые желают выразить свой творческий потенциал в веб-дизайне, а не использовать для своего ресурса какие-то готовые варианты, уже имеющие сотни копий по Сети. Если вы причисляете себя к первой категории, то давайте начнем!

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

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

Если нужные навыки у вас уже присутствуют, то приступим к разработке плана нашего будущего шаблона на Photoshop, который мы будем выполнять на бумаге. Ведь строительство сайта, так же как и строительство дома начинается со схематического плана чтобы воплотить все идеи, которые у вас есть, при этом ничего не упустить и не забыть. На своем плане изобразите каждую деталь, которую вы предполагаете внести в дизайн, учитывая навигацию и дополнительные формы (опросы, мини-чаты, подписка и пр.).

Итак, далее можно начинать создавать сам шаблон Photoshop. Открывайте программу, в ней создайте новый документ, размеры задайте примерно 800х1000 точек. Хотя можно задать и большую ширину для сайта, так у большинства пользователей Интернете сейчас мониторы с разрешающей способностью более 1000 пикселей по горизонтали.

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

И вот после этого можно готовить получившийся шаблон сайта на Photoshop к переносу в HTML-код. Возьмите инструмент «Ножик» и вырежьте каждую деталь в отдельности. Сохраняйте с помощью функции «Сохранить для Web», так вы сможете определить наиболее выгодный формат и размер файлов для оптимальной загрузки.

Теперь осталось только с помощью средств языка HTML и таблиц стилей CSS разместить все эти элементы в нужных местах на вашем сайте.

Успехов вам!