воскресенье, 28 ноября 2010 г.

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

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

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


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

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

После того, как вы завершили свой шаблон сайта в Photoshop, вам необходимо позаботиться о том, чтобы внедрить его в код. Поскольку в HTML мы будем складывать свой дизайн по кусочкам, вам следует с использованием «Ножика» (Slice Tool) вырезать каждый элемент и сохранить его. Для оптимизации изображений выбирайте функцию «Сохранить как», где вам будет предложено сохранение в различных форматах и со всевозможными размерами. Постарайтесь выбрать оптимальные варианты.

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

Пост про то, как создать свой сайт своими силами.

Другие посты по этой теме:



Комментариев нет: