Из шаблонов Photoshop (.psd формат) готовый сайт

[CaLuNer]

Раз уж бум пошёл и много людей ринулось качать халявные шаблоны (templates), то для некоторых вопрос преобразования оных вида .psd в юзабильное состояние (тобишь html) стал открытым. Кто-то, небось, просмотрел етот .псд с каким-нибудь acdsee и бросил. Ну да ладно, не даром ИМХО один из лучших форумов, если не самый... приступим к освоению фотошопа.

1. Редактирование шаблона

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

К сожалению необходима установка новых шрифтов для редактирования текста, если его у Вас нету, а в шаблоне используется. Насколько мне помнится, в халявных темплейтах ( Web.Templates.Collection-Argento ) дополнительные шрифты не прилогаются, а жаль. Если всё же Вы решите установить свои шрифты, то делается это так:

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

2. Редактирование названия компании

На данном шаге Вы изучите что такое Слой (layer) и как найти тот Слой, который необходим для редактирования.

1. Кликнете два раза на файле *.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" на "AcmeSoftware" или на название Вашей компании.
8. Подвиньте отредактированный текст чуть левее используя Move Tool . Вы заметите, что остальные слои будут также подвинуты. Это происходит из-за того, что слои связанны. Вы можете установить, какие слои будут связанны с текущим, сделать это можно с помощью иконки связывания слева от имени слоя. Для того, чтобы выключить связывание, кликните по иконке связывания и передвиньте "AcmeSoftware" независимо от остальных слоев.

3. С редактированием цветов думаю понятно.

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

4. Замена картинок

1. Веберите Файл->Открыть (File>Open) и найдите нужный файл (*.jpg).
2. Веберите Image>Image Size для отображения диалога "Image Size"
3. Проверьте, что чекбоксы "Constrain Proportions" и "Resample Image" отмеченны и размер указан в пикселах (Pixel)
4. Введите "120" в поле "ширина" (Width) и нажмите Ок
5. Веберите Select>All и Edit>Copy для копирования картинки в буфер обмена
6. Закройте окно "*.jpg". Вам не нужно сохранять изменения.
7 .Выберите Edit>Paste для вставки картинки в шаблон. Новый слой будет создан автоматически и ему присвоится название по умолчанию.
8 .Кликнете правой кнопкой мыши на новом слое в панели слоев (Layers Tab) и выберите пункт "свойства" (Layer Properties). Введите "portrait" в поле "Name" для удобвства дальнейших ссылок на этот слой и нажмите Ок.
9. Сделайте текущем слоем слой "portrait" и используйте инструмент "Move Tool" для помещения картинки слева от текста приветствия.
10. Найдите слои "man" и "man shadow" и кликнув по иконке, которая расположенна слева от названия слоев, сделайте их невидимыми.

5. Вставка дополнительных картинок

Как добавлять картинки в шаблон посредством создания нового слоя.

1. Выберите "File>Open" и найдите нужный файл "*.gif" в вашей папке.
2. После того, как картинка открылась, используйте "Select>All" и "Edit>Copy" для помещения ее в буфер обмена. Закройте окно "*.gif"
3. Выберите "Edit>Paste" для того, чтобы вставить картинку в шаблон. Новый слой будет создан автоматически.
4. Кликнете правой кнопкой мыши в "Панели Слоев" (Layers Tab) и из выпавшего списка выберите "Layer Properties".
5. Введите "stripe" в поле "Name" и затем нажмите Ок.
6. При активном слое "stripe" воспользуйтесь инструментом "Move Tool" для того чтобы разместить название компании на месте логотипа.
7. Найдите слой, допустим, "LOGOTYPE" (заменим лого фирмы) и сделайте его невидимым. Для этого кликните на иконке

6. Скрытие части слоя

1. Выберите "Edit>Deselect" для того, чтобы убрать все возможные выделения.
2. Выберите инструмент "Rectangular Marquee" и нарисуйте квадрат вокруг "website!".
3. Выберите "Select>Inverse" для того, чтобы инвертировать выделение.
4. Нажмите кнопку "Layer Mask" вверху панели слоев "Layers Tab" для того, чтобы скрыть не невыделенную часть слоя, т.е. ту часть, которую Вы выделяли в пункте 2.
5. Если Вы хотите вернуть обратно только что скрытую часть, выберите "Layer>Remove Layer Mask>Discard" для удаления этой маски или "Layer>Disable Layer Mask" для отключения ее.

Это было всё необходимое для того чтобы подготовить шаблон для своего сайта. А вот как сделать из .psd файла web страницу следует дальше.

7. Нарезка и создание web страницы

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

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

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


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

После этого необходимо поработать с полученным .html файлом. На следующих шагах предполагается, что будем использовать Macromedia Dreamweaver 4.0 HTML редактор. В других HTML редакторах расположение и названия кнопок могут отличаться.

1. Откройте полученный .html при помощи Dreamweaver. Проверьте, что открыто окошко Properties. Если его нет, то выберите Window>Properties для того, чтобы оно отобразилось.
2. Кликните мышкой на кнопке "Company" на Вашей странице и внимательно посмотрите на окно свойств (Properties). Вы можете редактировать поле "Link" для изменения ссылки (URL) которая будет открываться при нажатии на эту кнопку.
4. Выделите область с текстом под приветствием. 5. Выберите "Window>Code Inspector" для редактирования HTML. Тег <img...> автоматически подсветится (он будет выглядеть примерно так <IMG SRC="images/edited_TEMPLATE_07.jpg" WIDTH=424 HEIGHT=161 ALT="">. Замените этот тег своим текстом. Закройте окно редактора кода. Для форматирования текста используйте свойства из окна "Properties".
6. Сохраните Вашу работу и посмотрите, что у Вас в итоге получилось. Это можно сделать выбрав "File>Preview in Browser>"

Может кому и помог разобратсья.
Удачи в освоении веб строительства !

P.S. если есть редкие красивые шрифты, сообщите.

Информация частично взята с www.templater.ru