Редактирование шаблона
1. Разархивируйте полученный файл с шаблоном, используя WinRar.
2. После разархивирования Вы найдете следующие папки:
FONTS
Данная папка содержит шрифты, необходимые для редактирования файлов PSD. Возможно, они не установлены на Вашем компьютере. Об установке шрифтов смотрите далее.
HTML
Данная папка содержит файл и папку img. Вы можете использовать файл для создания страниц своего сайта, хотя некоторые пользователи предпочитают начинать работу с PSD файла, производя HTML-верстку самостоятельно.
HTML-версия не содержит надписей на кнопках и других элементах страницы. Вы можете их вставить сами.
PSD
Данная папка содержит файл TEMPLATE.PSD. Используя этот файл, Вы сможете вносить любые изменения в дизайн Вашего сайта. Вы можете изменить шрифты, цвета и т.д., что сделает Ваш сайт действительно уникальным. Позднее Вам будет необходимо это сверстать. Но об этом позднее.

 

Установка новых шрифтов для редактирования текста
Следующие инструкции помогут Вам установить необходимые шрифты для редактирования текста в .psd-файле Вашего шаблона.
1. Выберите:
Пуск->Настройка->Панель Управления->Шрифты
(Start->Settings->Control Panel->Fonts), для того чтобы открыть необходимую системную папку.
2. Выберите Файл->Установить Шрифты (File->Install Font).
3. В открывшемся окне выберите папку (FONTS) с шрифтами, которую Вы разархивировали из скачанного файла.
4. Нажмите на кнопку "Выбрать все" ("Select All") и затем кнопку Ок.
5. Закройте окно.

Редактирование названия компании
На данном шаге Вы изучите, что такое Слой (layer) и как найти тот Слой, который необходим для редактирования.
1. Кликните два раза на файле TEMPLATE.PSD, для того чтобы открыть его в Photoshop.
2. Проверьте, что панель инструментов (toolbox) и панель настроек (tool options bar) видна. Если они невидимы, то выберите на закладке Window > Tools and Window > Options необходимые пункты.
3. Изображение может быть слишком большим или слишком маленьким. Для изменения размера выберите "Zoom Tool" из панели инструментов (toolbox).
4. Проверьте, что панель слоев (Layers Tab) видна. Если это не так, то выберите Windows>Layers для отображения ее.
5. Выберите Move Tool и кликните правой кнопкой мышки на слове "company" в верхнем левом углу. В выпадающем окошке выберите название слоя COMPANY. Этот слой станет выделенным в панели слоев (Layers Tab). Можно рассматривать слои как прозрачные пленки с картинками и текстом, наложенные друг на друга. Вы можете независимо редактировать содержание текущей "пленки", изменять порядок, в котором они "сложены" друг на друга, и многое другое.
6. Для того чтобы быть уверенным в том, что выбран необходимый слой, попробуйте сделать его невидимым. Для этого кликните на иконке слева от названия слоя на панели слоев (Layers Tab). Текст должен пропасть.
7. Кликните два раза на "заглавной Т" в панели слоев (Layers Tab). После этого Вы переключитесь в Type Tool , и редактируемый текст подсветится. Замените "company" на название Вашей компании.
8. Подвиньте отредактированный текст чуть левее, используя Move Tool. Вы заметите, что остальные слои будут также подвинуты. Это происходит из-за того, что слои связаны. Вы можете установить, какие слои связаны с текущим, с помощью иконки связывания слева от имени слоя. Для того чтобы выключить связывание, кликните по иконке связывания и передвиньте "ваше название" независимо от остальных слоев.

Редактирование цветов
На предыдущем шаге Вы редактировали текст. Сейчас мы научим Вас изменять цвет графических элементов.
1. Выберите слой на котором хотите изменить цвет.
2. Выберите инструмент Paint Bucket. Этот инструмент перерисовывает все точки с похожими цветами на слое в соответствии с цветом переднего плана (foreground color).
3. Установите цвет переднего плана. Для этого кликните на верхнем квадрате выбора цвета и в открывшемся окне выберите требуемый цвет.
4. С выбранным инструментом Paint Bucket кликните на новостях, и Вы увидите, что цвет изменился на требуемый.

Нарезка и создание web-страницы
На этом шаге Вы узнаете, что такое направляющие, как их создать и отредактировать. Вы нарежете .psd-картинку для получения HTML-страницы, которую Вы сможете просматривать в браузере.
В отличие от картинок, которые состоят из одной части, web-страница состоит из большого количества элементов, связанных между собой языком разметки HTML. Каждая картинка на web-странице представляет собой отдельный файл. Несмотря на то что эти картинки могут иметь различный формат и размер, в момент отображения страницы в браузере они производят эффект целой картинки.
HTML-код будет сформирован автоматически, если Вы воспользуетесь возможностью Photoshop для получения такого эффекта. Вам необходимо лишь обозначить какие части шаблона должны быть сконвертированны в отдельные картинки, другими словами сделайте нарезку.
1. Выберите инструмент "Slice Tool" и нарисуйте квадрат вокруг кнопки "company". Вы можете изменять границу этого квадрата после создания. Для этого Вам необходимо будет использовать инструмент "Slice Select".
2. Кликните правой кнопкой мыши на вновь созданный элемент нарезки (Slice) и выберите из выпавшего меню "Edit Slice Options". Поле "URL" предназначено для адреса web-страницы, которая откроется при клике на эту кнопку.
3. Сделайте другой Slice вокруг текста под приветствием. Вы замените эту картинку форматированным текстом, для того чтобы страница грузилась быстрее.
4. Выберите "File>Save For Web...". Это диалоговое окно позволит Вам установить опции оптимизации для каждого Slice.

Размещение Вашего сайта в Сети
На этом шаге мы расскажем Вам, как загрузить Ваши web-страницы на сайт. После этого Ваш сайт будет доступен для всех пользователей Сети.
1. Откройте Ваше браузер и наберите в строке адреса ftp://ftp.domain.ru (это то, что Вы получили от хостинг-провайдера).
2. В Internet Explorer выберите Файл->"Зайти как..." (File>Enter as...) для открытия окна авторизации. Введите свой логин и пароль и нажмите Ок.
3. Скопируйте все web-страницы и директории на Ваш сайт. Это делается точно так же, как любое другое копирование из папки в папку.
4. Ваш сайт доступен для просмотра.