Вам понадобится
  • - программа Adobe Photoshop.
Инструкция
1
Создание собственного шаблона не является такой уж трудной задачей, как может показаться на первый взгляд. Для работы вам потребуется программа Adobe Photoshop – разумеется, необходимо иметь хотя бы основные представления о работе с ней. Но до того, как запустить программу и начать творить, необходимо заранее продумать будущий дизайн. Удобнее всего это делать так: сначала познакомьтесь хотя бы с сотней готовых шаблонов, оцените их достоинства и недостатки. Обращайте внимание на удачные решения тех или иных элементов дизайна. Это не значит, что вы будете их копировать, но взять какие-то красивые и удобные решения за основу вполне разумно.
2
На основе анализа чужих шаблонов и собственного творчества вы должны составить представление о том, как будет выглядеть ваш сайт. Примерные наброски будущего дизайна лучше всего делать цветными карандашами на обычных листах формата А4. Приступать к работе с Фотошопом следует только после того, как вы будете ясно представлять, что именно вам предстоит нарисовать.
3
Запустите Фотошоп, создайте новый проект размером 1200х1600, установите прозрачный фон. Включите инструмент «Линейка», если он еще не включен, для этого нажмите комбинацию клавиш Ctrl+R. Включите привязку: «Просмотр» — «Привязка».
4
Теперь надо разделить шаблон направляющими, которые будут показывать границы его элементов – боковых сторон, колонок и т.д. Например, вы хотите так разделить шаблон, чтобы слева была узкая колонка, справа – широкая до правого края шаблона, а вверху было место для шапки. Значит, вам понадобится три вертикальные линии (левая граница шаблона, правая и линия между ними) и горизонтальная, показывающая нижнюю границу шапки. Чтобы установить вертикальную линию, подведите курсор к левой линейке с левой стороны, нажмите V и, удерживая клавишу, перетяните линию в нужное место. Так же поступите с двумя другими вертикальными линиями. Горизонтальные строятся аналогично, только используется верхняя линейка.
5
Найдите фон для вашего шаблона, это должна быть небольшая картинка с повторяющимся рисунком. Откройте ее в Фотошопе, выделите, скопируйте. После этого вставьте в шаблон столько раз, сколько понадобится для его заполнения фоном. Вставка производится так: «Редактирование» - «Вставить», после чего перетягиваете участок фона в нужное место. Еще быстрее вставлять изображение командой Ctrl+V. Точно так же добавьте фон для шапки сайта. Вы можете использовать для создания фона и различные градиентные заливки.
6
При помощи инструмента «Карандаш» проведите границы шаблона, ориентируясь на уже проведенные линии (то есть поверх них). Вы получили основу простейшего шаблона, теперь надо дополнить ее нужными деталями – кнопками навигации, строчками меню, различными украшающими элементами и т.д. О том, как создавать кнопки и другие элементы, лучше прочитать в соответствующих статьях, посвященных работе с Adobe Photoshop.
7
Шаблон создан, теперь необходимо разрезать его на кусочки для их вставки в html-страницу. Для разрезания воспользуйтесь инструментом «Раскройка» (Slice Tool). Чтобы найти его, щелкните правой кнопкой мышки инструмент «Рамка» и выберите в открывшемся меню «Раскройку». Теперь вы можете раскроить шаблон нужным образом, затем сохранить: «Файл» - «Сохранить для Web». В открывшемся окне выберите тип файлов: HTML&images, укажите имя файла: index.htm и сохраните его. У вас появятся файл index.htm и папка images с нарезанными изображениями.