Задание 1. Создание шаблона web-сайта в Adobe Photoshop.

Рисунок 1.1 – Создание рабочих групп

3. Перейдем на слой «Фон» и добавляем стиль слоя «Наложение градиента» (рисунок 1.2).

Рисунок 1.2 – Наложение градиента

4. Перейдем в группу «Верхняя часть» и добавляем три текстовых объекта («Адрес», «Регистрация», «Вход») с помощью инструмента «Текст».

5. С помощью инструмента «Перемещение» перемещаем слой с адресом в левую сторону рабочей области.

6. С помощью инструмента «Прямоугольник» добавляем слой «Фон верней части», который заливаем серым цветом и добавляем с помощью стилей слоя тень (рисунок 1.3).

Рисунок 1.3 – Добавление тени

7. Загружаем картинки в программу с иконкой входа и регистрацией, уменьшаем с помощью инструмента «Трансформация» и располагаем с помощью инструмента «Перемещение» перед текстовыми надписями «Регистрация», «Вход». Структура слоев группы «Верхняя часть» представлена на рисунке 1.4.

Рисунок 1.4 – Структура слоев группы «Верхняя часть»

8. Верхняя часть сайта представлена на рисунке 1.5.

Рисунок 1.5 – Верхняя часть сайта

9. Перейдем в группу «Шапка».

10. Добавляем три рабочие подгруппы, относящиеся к шапке сайта (рисунок 1.6).

Рисунок 1.6 – Рабочие подгруппы группы «Шапка»

11. Перейдем в подгруппу «Логотип».

12. Создаем текстовые слои «Название магазина» и «Слоган магазина» с помощью инструмента «Текст» и добавляем соответствующее текстовое содержимое.

13. К слою «Название магазина» добавляем тень и тиснение (рисунок 1.7).

Рисунок 1.7 – Добавление тени и тиснения

Рисунок 1.8 – Добавление тиснения

14. Загружаем изображение иконки логотипа магазина.

15. Слои подгруппы «Логотип» представлены на рисунке 1.9.

Рисунок 1.9 – Слои подгруппы «Логотип»

16. Блог логотипа сайта представлен на рисунке 1.10.

Рисунок 1.10 – Логотип магазин

17. Перейдем в подгруппу «Контакты».

18. Добавляем текстовые слои «Заголовок», «Телефон», «Почта».

19. Загружаем картинки с иконками телефоны и почты и изменяем названия слоев на соответственно «Иконка телефона» и «Иконка почты».

20. Слою «Заголовок» добавляем тень (рисунок 1.11).

Рисунок 1.11 – Добавление тени

21. Слои подгруппы «Контакты» представлена на рисунке 1.12.

Рисунок 1.12 – Слои подгруппы «Контакты»

22. Слои подгруппы «Контакты» представлена на рисунке 1.13.

Рисунок 1.13 – Слои подгруппы «Контакты»

23. Перейдем в подгруппу «Корзина».

24. Добавляем текстовые объекты «Заголовок» и «Информация о заказе», на которых соответственно размещаем название блока «Корзина», на слое «Информация о заказе» – количество заказанных товаров и сумма заказа.

25. Загружаем изображение иконки корзины и размещаем в правой стороне.

26. Слои подгруппы «Корзина» представлена на рисунке 1.14.

Рисунок 1.14 – Слои подгруппы «Корзина»

27. Результат создания шапки представлен на рисунке 1.15.

Рисунок 1.15 – Шапка сайта

28. Перейдем в группу «Верхнее меню» и создаем там подгруппу «Поиск».

29. В верхнее меню добавляем текстовые объекты, отвечающие за пункты меню.

30. Создаем слой «Фон верхнего меню» с помощью инструмента «Прямоугольник со скругленным углами» и заливаем его черным цветом.

31. Добавляем к слою «Фон верхнего меню» тень (рисунок 1.16).

Рисунок 1.16 – Добавление тени

32. Перейдем в подгруппу «Поиск».

33. С помощью инструмента «Прямоугольник со скругленными углами» создаем фон поиска и заливаем его белым цветом.

34. Загружаем иконку кнопки поиска и размещаем в правой стороне.

35. Верхнее меню с поиском представлено на рисунке 1.17

Рисунок 1.17 – Верхнее меню

36. Слои группы «Верхнее меню» представлены на рисунке 1.18.

Рисунок 1.18 – Слои группы «Верхнее меню»

37. Перейдем в группу «Слайдер» и загружаем изображение 1 слайда.

38. Создаем с помощью инструмента «Овал» индикаторы слайдера с зажатой клавишей Shift небольшой круг им заливаем его белым цветом.

39. Загружаем изображения иконок стрелок навигации по слайдам.

40. Результат создания слайдера представлен на рисунке 1.19.

Рисунок 1.19 – Слайдер

41. Слои группы «Слайдер» представлены на рисунке 1.20

Рисунок 1.20 – Слои группы «Слайдер»

42. Перейдем в группу «Контентная часть» и создаем там подгруппы «Левый блок» и «Правый блок».

43. Перейдем в подгруппу «Левый блок» и создаем там подгруппы «Разделы», «Доставка», «Товар недели», «Сравнить».

44. В каждую подгруппу группы «Левый блок» добавляем заголовок и текстовое содержимое с помощью инструмента «Текст» и горизонтальную линию с помощью инструмента «Линия».

45. В подгруппе «Разделы» создаем с помощью инструмента «Текст» пункты меню.

46. С помощью инструмента «Прямоугольник с закругленными углами» создаем активный пункт для данного меню и заливаем его черным цветом.

47. В подгруппе «Товар недели» загружаем изображение товара.

48. Слои группы «Левый блок» представлены на рисунке 1.21.

.

Рисунок 1.21 – Слои группы «Левый блок»

49. Левый блок представлен на рисунке 1.22.

Рисунок 1.22 – Слои группы «Левый блок»

50. Перейдем в группу «Правый блок» и создаем подгруппы «Популярные товары» и «Новинки».

51. Создаем в группе «Популярные товары» слой с заголовком блока.

52. Перейдем в группу «Популярные товары» и создаем подгруппу «Блок товара», в котором создаем слои «Название товара», «Изображение товара», «Цена товара».

53. Загружаем кнопку «Добавить в корзину».

54. Слои группы «Блок товара» представлены на рисунке 1.23.

Рисунок 1.23 – Слои группы «Блок товара».

55. Копируем группу «Блок товара» 2 раза и изменяем содержимое на всех слоях.

56. Копируем подгруппу «Новинки» и изменяем название на «Популярные товары», изменяем слой «Заголовок», отвечающий за название блока.

57. Правый блок представлен на рисунке 1.24.

Рисунок 1.24.– Правый блок

58. Перейдем в группу «Футер» и создаем фон футера с помощью инструмента «Прямоугольник» и заливаем его градиентным цветом от светло-голубого до белого.

59. С помощью инструмента «Текст» добавляем элементы ссылок черным цветом, копируем, располагаем в три столбца.

60. Загружаем изображение социальных кнопок и применяем к ним стиль «Тиснение», размещаем в правой нижней части (рисунок 1.25).

Рисунок 1.25 – Добавление тиснения

61. Добавляем надпись с помощью инструмента «Текст» «Мы в социальных сетях» чуть выше социальных кнопок.

62. Добавляем копирайты сайта с помощью инструмента «Текст» фигуру «Копирайта» с помощью инструмента «Произвольная фигура».

63. Слои подгруппы «Футер» представлены на рисунке 1.26.

Рисунок 1.26 – Слои группы «Футер»

64. Футер представлен на рисунке 1.27.

Рисунок 1.27 – Футер

65. Результат создания дизайна сайта главной страницы представлен на рисунке 1.28.

Главная страница интернет-магазина цифровой техники и электроники:

Рисунок 1.28 – Дизайн главной страницы сайта интернет-магазина

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