Информационные технологии в дизайне
..pdf61
19. Создайте фигуру под областью заголовка сайта. Убедитесь, что его ширина не превышает отведённые пределы.
20. Перейдите в меню Параметры наложения (Layer Style - Blending Options) и настройте так:
61
62
Отбрасывание тени (Режим – Умножение):
Наложение цвета (Режим – Нормальный):
62
63
Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):
21. Инструментом Прямоугольник (Rectangle Tool) или Прямоугольная область (Rectangular Marquee Tool) создайте чёрный прямоугольник и немного наклоните его в режиме Свободного трансформирования (Free Transform).
63
64
22. Сделайте выделение этого слоя с прямоугольником (Ctrl+Click) и примените Сжатие (Modify – Contract) со значением 10 пикселей. Вставьте в это выделение какое-нибудь изображение.
23. Создайте на вставленном изображении свечение, используя инструмент Перо (Pen Tool).
Теперь можно переходить к созданию стрелок. Выберите инструмент Произвольная фигура (Custom Shape Tool) и выберите стрелку, показанную ниже.
64
65
24. Создайте фигуру белого цвета где-нибудь на холсте и создайте выделение, как показано ниже:
25. Перейдите в режим Деформации (Transform – Warp) и потяните левые точки вверх.
65
66
26. Установите Непрозрачность слоя – 60% и примените стиль Отбрасывание тени (Layer Style - Drop Shadow) со стандартными настройками. Сделайте копию стрелки и поместите её на другую сторону. Справа напишите какой-нибудь текст.
27. Перейдём к созданию навигационного меню. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей создайте фигуру под предыдущей большой областью под заголовком.
28. Сделайте копию слоя несколько раз:
29. Напишите текст на каждой фигуре:
66
67
30. Установите Непрозрачность слоёв с кнопками – 70% и измените угол наклона каждой из них. Сделайте выделение слоя с большой областью, на которой мы расположили картинку, стрелки и текст. Потом по очереди выбирайте слои с чёрными прямоугольниками и нажимайте Delete. Это удалит видимую область кнопок позади большого прямоугольника.
31. Создайте большой прямоугольник с закруглёнными краями с радиусом 10 пикселей под предыдущей областью с картинкой. Скопируйте на него все стили слоя с этой области.
32. Заполните большой прямоугольник контентом. Я создал три колонки с заголовками и картинкой.
67
68
33.Создайте обычный прямоугольник в нижней части холста под областью контента. Скопируйте на него все стили с области контента
34.Сделайте выделение цветного заголовка той же ширины, что и создаваемый стейлер (нижняя часть сайта). Высота выделеия – 20-40 пикселей. Потом перейдите в меню Редактировать»Скопировать совмещенные данные (Edit > Copy Merged). Потом вставьте выделение в нижний прямоугольник.
35.Напишите нужную информацию в стейлере и на этом можно закончить:
Финальный результат:
68
69
Ссылка на источник урока http://hv-designs.co.uk/2009/11/11/the-design-lab-2/
Самостоятельная работа
1.Подбор графического материала Web-страницы..
2.Подбор материала для персональной Web-страницы.
69