Создание шаблона сайта в Photoshop

Создание шаблона сайта в Photoshop

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

Прежде чем взяться за разработку шаблона сайта в Photoshop, потребуется выполнить два шага предварительных приготовлений:

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

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

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

При разметке наиболее удобно будет использовать «резиновые» параметры, а не фиксированные величины. Чтобы выполнить деление рисунка на элементы, нужно выделять их с помощью «ножика» – Slice Tool. Для того чтобы страница не весила «тонну» и не загружалась несколько минут, сохраняйте рисунки с минимальным размером, используя для этого специально встроенную функцию Save for Web, с помощью которой можно установить формат картинки и ее качество. Старайтесь придерживаться среднего уровня.

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

Вот и все, все нужные советы по созданию шаблона сайта в Photoshop вами получены, так что можете приступать!

Сохраните, чтобы не потерять!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *