Уроки Joomla! 1.5

---

Урок 7. Разрезка PSD-шаблона

Цели:

• Научить подготавливать PSD-шаблон созданный в Adobe Photoshop к HTML-верстке.

Задачи:

1. Сформировать навыки работы с инструментами выделения и рамки в Adobe Photoshop.
2. Сформировать знания по логическому анализу PSD-шаблона для структурной разметки под HTML-шаблоны.

Как правило, один из важных этапов создания web-сайта - это разработка и утверждение его дизайна. После утверждения постановки задания на разработку сайта наступает второй этап – разработка дизайна сайта. Ориентируясь на техническое задание по разработке сайта, выполняется 2-3 эскиза разных вариантов дизайна, из которых выбирается наиболее подходящий.

Наиболее подходящий вариант дорабатывается. В результате выполнения этого этапа работы получается так называемая «нарезка сайта» – то есть, готовый шаблон, который может быть использован как основа для создания отдельных страниц сайта. Шаблон обычно приставляется в двух видах - в виде файла PSD и в виде HTML-файла с готовыми картинками. Этот этап обычно занимает 2-3 недели.

Так как наша основная задача не рисовать шаблон сайта, а подготовить его к верстке займемся непосредственной разрезкой предоставленного PSD файла.

Запуск Adobe Photoshop и знакомство с необходимыми элементами панели инструментов

1) Запустите программу Adobe Photoshop.

После запуска программы Вы увидите следующее окно (оно может немного различаться в зависимости от версии Photoshop) (Рис. 7.1):

Рисунок 7.1. Окно программы Adobe Photoshop CS5

Панель инструментов находится слева, рассмотрим необходимые нам её элементы.

- Рамка - данный инструмент позволяет обрезать изображение по выделенной рамкой области.

- Пипетка - используется для выбора и определения цвета используемого на изображении.

Также нам понадобится рабочая область Слои, в которой будут выделяться рабочий слой и скрываться лишние (Рис. 7.2).

Рисунок 7.2. Рабочая область «Слои»

Открытие файла с PSD-шаблоном сайта и работа со слоями

2) Откройте файл PSD-шаблона - template.psd, который располагается в папке с дистрибутивами (в папке /lab_7/template.psd).

Для этого кликните на данный файл дважды или в программе Adobe Photoshop выберите в меню Файл – Открыть (Рис. 7.3).

Рисунок 7.3. Меню «Файл-Открыть»

После чего откройте папку в дистрибутиве lab_7, выберите файл template.psd и нажмите кнопку Открыть (Рис. 7.4).

Рисунок 7.4. Открытие файла в Photoshop CS5

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

Если внимательно посмотреть на область Слои, то можно заметить, что шаблон состоит из 9 слоев, причем самый нижний - это общий фон.

3) Отключите все слои кроме последнего слоя с именем Background (Рис. 7.5). Для этого нажимайте на значок видимости напротив слоев -  , переводя его в противоположное состояние - .

Рисунок 7.5. Видемость слоев

Таким образом, должно получиться, что на изображении присутствует только фон без лишних элементов.

Сохранение обрезанных изображений и логика в выборе элементов для верстки

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

4) Обрежьте верхнию часть изображения находящегося на слое Background.

Для этого выберите инструмент Рамка, нажмите на изображение и ведите до тех пор, пока она не выделит область картинки. Чтобы более точно установить края используйте маркеры, находящиеся на краях рамки, для масштабирования изображения можно использовать инструмент Масштаб -  или удерживая сочетание клавиш Ctrl+Alt и крутя колесико на мышке на себя или от себя.

Необходимо установить рамку таким образом, чтобы её края были в тех местах, где изображение переходит в однотонный цвет фона (Рис. 7.6).

Рисунок 7.6. Выбор обрезаемой области

После того как область выбрана необходимо нажать по кнопке Выполнить кадрирование на верхней панели инструментов (Рис. 7.7) или нажать клавишу Enter.

Рисунок 7.7. Панель инструментов

5) Сохраните изображение  под именем background.jpg, но сперва подготовьте отдельную папку, куда будите сохранять все нарезанные файлы (например, в папке Шаблон/html/images/)

Для этого нажмите в меню Файл – Сохранить как..., выберите папку куда будут сохраняться изображения, после чего впишите название файла, укажите тип файла JPEG и нажмите по кнопке Сохранить (Рис. 7.8).

Рисунок 7.8. Сохранение файла

В появившемся диалоговом окне Параметры JPEG кажите их как показано на рисунке 7.9 и нажмите ОК.

Рисунок 7.9. Параметры JPEG

6) Проверьте, что файл сохранился.

7) Отмените действия обрезки по рамке нажав в меню Редактирование – Шаг назад или нажав сочетание клавиш «Alt+Ctrl+Z». Тем самым Вы вернетесь к первоначальному виду изображения.

8) Сделайте видимым только слой Fon table. Так как этот слой имеет однотонную заливку и рамку в виде сплошной синей линии, то необходимо сохранить всего лишь часть данной картинки.

9) При помощи инструмента Рамка, вырежьте аналогичным образом, как было описано выше, однотонный фон размером 1x1 пиксел (Рис. 7.10). Впоследствии он будет применяться как фон данного объекта в HTML, повторяясь за счет параметров разметки CSS.

Рисунок 7.10. Обрезка изображения размером 1x1 пиксел

10) Сохраните вырезанный фрагмент файла под именем bg1.png. Так как фон прозрачный, необходимо выбрать формат сохранения png.

11) Проверьте, что файл сохранился.

12) Отмените действия обрезки по рамке нажав в меню Редактирование – Шаг назад или нажав сочетание клавиш Alt+Ctrl+Z. Тем самым Вы вернетесь к первоначальному виду изображения.

13) Слои с именами Left, Center, Right и Search имеют одинаковый фон, обрежте и сохраните фрагмет изображения с их фоном аналогичным образом как было описано выше. Сохраняемый файл назовите bg2.png.

Остался последний элемент эскиза, который еще не был использован - это место под верхнее меню. Оно имеет более сложную структуру, для его воссоздания в HTML потребуется разрезать его на три части: левый край, центральная часть (которая будет заполняться по горизонтали, её размер в ширину можно указать в 1 пиксел) и правый край.

14) Активируйте слой Top_Menu.

15) Выделите и обрежьте левый край изображения как показан на рисунке 7.11

Рисунок 7.11. Обрезка левого края верхнего меню

16) Сохраните полученное изображение под именем top-menu-left.png.

17) Выделите и обрежьте центральную часть меню, как показано на рисунке 7.12.

Рисунок 7.12. Обрезка центральной части верхнего меню

18) Сохраните полученное изображение под именем top-menu-center.png.

19) Откройте файл top-menu-left.png, который был создан на 16 этапе, в Photoshop.

20) Открывшееся изображение необходимо отразить по горизонтали, чтобы получилась правая часть верхнего меню.

Для этого выберите в меню Редактирование – Трансформирование – Отразить по горизонтали.

21) Сохраните полученное изображение под именем top-menu-right.png.

В итоге проделанной работы должно получиться всего 6 файлов:

• background.jpg;
• bg1.png;
• bg2.png;
• top-menu-left.png;
• top-menu-center.png;
• top-menu-right.png.

Из этих файлов в теме № 8 будет верстаться HTML-шаблон.

Теперь необходимо определить цвета которые будут использоваться для основного фона и цвета, используемые на рамках объектов.

22) Отобразите слой Background, остальные скройте.

23) Активизируйте инструмент - Пипетка. Наведите на однотонную область слоя и кликните левой кнопкой мыши, тем самым установив основной цвет в палитре на панели инструментов (Рис. 7.13).

Рисунок 7.13. Выбор цвета инструментом «Пипетка»

24) Дважды кликните по основному цвету в палитре на панели инструментов, тем самым открыв окно Палитра цветов (Основной цвет) (Рис 7.14).

Рисунок 7.14. Определение выбранного цвета.

В данном окне внизу можно найти название цвета в кодировке - #03345c. Запишите её, она потребуется в следующей теме.

25) Аналогичным образом определите цвет рамки слоя Fon table и запишите ее.

Резюме

• При нарезке графических файлов для HTML-шаблона в Adobe Photoshop используют инструмент - Рамка.
• Файлы, которые имеют прозрачность, необходимо сохранять в формате PNG или GIF, в зависимости от количества цветов и требуемого качества изображения.
• Фон, который будет повторяться можно вырезать размером 1x1 пиксел, в последствии его повторение задается параметрами стилей CSS.
• Для выбора цвета используется инструмент - Пипетка.

Контрольное задание

1. Выберите PSD-шаблон наиболее подходящий теме вашего проекта из предложенных в папке с дистрибутивами (в папке /lab_7/PSD/...) или используйте свой вариант, предварительно обговорив его с преподавателем.
2. Подготовьте файлы для верстки HTML-шаблона по образцу PSD файла.

Вопросы для самоконтроля

1. Какие основные инструменты Adobe Photoshop используются для разрезки PSD-шаблона? Назовите их назначение.
2. Какие форматы файлов поддерживают прозрачность.
3. В какой кодировке необходимо использовать цвета, для последующей работе с HTML-файлами?