2.1 Создание программного продукта

Для создания программного продукта, а именно web-ресурса, необходимо разработать макеты шаблонов web-страниц, которые в дальнейшем будут служить основой сайта. Требуется создать следующие макеты:

главная страница;

второстепенные страницы;

Макеты шаблонов web-страниц разработаем в AdobePhotoshopCS6. Начнем с запуска программы. После запуска AdobePhotoshopCS6, создадим новый документ через меню Файл > Создать (File>New). Установим данные параметры.

Рисунок 1 - Создание нового документа в AdobePhotoshopCS6.

Начнем создавать интерфейс главной web-страницы. Для начала создадим шапку сайта. Нарисуем прямоугольник черного #000000 цвета, используя инструмент Прямоугольник (RectangleTool). Нарисуем фигуру высотой 74px, в стилях слоя добавим Наложение градиента(GradientOverlay) и поместим ее в верхней части документа.

Поверх фона создаем ещё один прямоугольник, высота 70px, и добавляем стили Тень (DropShadow), Наложение градиента (GradientOverlay) и Обводку (Stroke).

Рисунок 2 - Создание шапки сайта.

Далее добавляем кнопки для навигации по сайту с помощью инструмента Прямоугольник. А также кнопку поиска.

Рисунок 3 - Создание кнопок навигации.

Далее создаем фон. Нарисуем прямоугольникбелого цвета, используя инструмент Прямоугольник (RectangleTool). Нарисуем фигуру размером 1400x728px и поместим ее в верхней части документа.

Теперь загрузим необходимую фотографию, перетянем ее в документ Photoshop и разместим над слоем с прямоугольником. Уменьшим Непрозрачность (Opacity) слоя IMG до 90%, чтобы текст, который мы поместим наверх, был читаемым. При нажатии Ctrl + T можно изменять размер под необходимый.

Рисунок 4 - Создание фона.

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