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

shabl

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

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

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

Вам нужно запустить Photoshop, создать новый проект с размерами 1200 на 1600 и установить прозрачный фон. Далее нужно включить инструмент “линейка” одновременным нажатием Ctrl+R и привязку нажав на “Просмотр”, затем “Привязка”.

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

Вам нужно найти фон для шаблона. Это может быть небольшое изображение имеющее повторяющийся рисунок. Вам нужно открыть его в редакторе, затем выделить и скопировать. Далее нужно вставить его в шаблон полностью заполнив им фон. Для вставки нужно открыть “редактирование”, затем “вставить” и перетянуть кусок фона на место. Для более быстрой вставки картинки можно использовать сочетание “Ctrl+V”. Аналогично добавляется фон для шапки.

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

После создания шаблон нужно произвести его разрезку на куски чтобы вставить в html-страницу. Для резки шаблона можно использовать инструмент “раскройка” (Slice Tool). Для его использования вам нужно нажать правую кнопку мыши и открыть инструмент “рамка”. Затем в открывшемся окне нужно выбрать “раскройка”. После окончания раскройки шаблона, вы должны его сохранить. После выполненных операций вы должны получить файл index.htm с папкой images где находятся нарезанные изображения.

Вы можете оставить комментарий, или ссылку на Ваш сайт.