Практикум №1: Подготовка многослойного баннера

Для формирования навыков подготовки небольших многослойных изображений следует самостоятельно подготовить многослойное изображение, например для баннера, который можно установить на веб-страницу (Рис. 16).

Рис. 16. Формируемое многослойное изображение.

В качестве программного приложения следует воспользоваться графическим редактором Adobe Photoshop версии 9 (CS2) и выше. В данном примере использована версия 10 (CS3).

Для начала работы над рисунком следует запустить программу и аккуратно реализовать следующую последовательность действий:

1. Запустить программу.

2. Создать новый документ File/New(Файл/Новый)на соответствующей вкладке (Рис. 17). Для этого установите следующие параметры Preset = Web, Size = 800x600 и нажмите ОК.

Рис. 17. Окно параметров нового документа.

3. Сохраните документ File/Save As(Файл/Сохранить как) в личной папке под именем 1_Ph_ФИО.psd (Инициалы студента), не изменяя параметров сохранения файла.

В дальнейшем следует периодически сохранять документ (File/Save), чтобы не потерять полученный результат.

Разверните рабочий стол на весь экран и на статусной строке, расположенной на кромке рабочего окна, установите значение масштаба = 100%.

4. Выберите инструмент Horizontal Type Tool(горизонтальный текст) (T). Теперь, с помощью крайней правой кнопки на панели параметров инструментов Toggle the Character and Peragraph Palettes перейдите к вкладкам показанным на рис. 18.

Рис. 18. Листы «Character» и «Paragraph»

На листах вкладки «Character» и «Paragraph» выберите шрифт, кегль и способ размещения текста на строке. Выберите следующие параметры: шрифт = Comic Sans MS, кегль = 120 pt, выравнивание – по середине (Рис. 18). Обратите внимание на то, что строка выделения текста не используется: . Закройте вкладку.

Щелкните правой кнопкой посередине чуть выше центра и наберите на трёх строчках следующую последовательность: Кафедра, ее краткое наименование, её обозначение. Например, наберите на каждой строке по одному из слов: Кафедра, Менеджмент, ИБМ4.

Эту надпись нужно передвинуть с помощью инструмента Move Tool (Перемещение) (V). При этом на рабочем поле появится курсор в виде стрелки, следует нажать на клавишу мыши и перетащить изображение в нужном направлении. Выравнивайте текст по центру рабочего поля.

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

5.Следующая задача, которая стоит перед разработчиком изображения, заключается в том, чтобы подготовленный текст представить в виде «Произвольной фигуры» - Custom Shape.

Для этого перейдите на панель слоёв, щелкните правой кнопкой мыши по слою с текстом. Выберите из контекстного меню опцию Convert to Shape.

После выполнения этой операции текст преобразуется в векторную фигуру. Обратите внимание: операция необратима!

6. Объединим текстовую фигуру со стандартной фигурой из базы программы. Для этого выберите на панели инструментов кнопку Custom Shape Tool (Произвольная фигура) (U) и на панели параметров, раскройте список Shape, а затем выберите необходимый рисунок (Рис. 19). Если нужно расширить поиск, то следует на панели рисунков перейти по стрелке и выбрать опцию All (Все).

Рис. 19. Фрагмент панели параметров фигуры.

Выберите кнопку «Arrow2» с изображением стрелки (Рис.20).

7. Включите режим Exclude overlapping shape areas,кнопка управления которым находится на панели параметров (Рис. 20).

Рис. 20. Панель параметров фигуры

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

Рис. 21. Промежуточный рисунок баннера

9. Для установки небольшого рисунка в верхнем левом углу воспользуемся новым слоем и ещё одним шаблоном «Blob2» в виде звёздочки, размещенном в списке Shap.Здесьследует выбрать фигуру, а затем, следует включить режим Create new shape layer (Рис21) с помощью соответствующей кнопки на панели параметров.

В результате будет создан новый слой с изображением звёздочки Shape1.

Рис. 21. Фрагмент панели параметров фигуры.

Для установки выбранной фигуры, следует установить в верхний левый угол курсор мыши и протащить её до диагонали, удерживая клавишу Shift для сохранения пропорций (Рис. 22).

Рис. 22. Установка нового слоя со стандартной фигурой.

Для размещения еще одного графического объекта в виде цветка, также на новом слое, выполним подготовительные операции:

Выберите соответствующую фигуру «Floral Ornament 1» на панели орнаментов. Программа сформирует третий слой с изображением цветка.

Переведите эту фигуру в нижний правый угол, удерживая клавишу Shift для сохранения пропорций фигуры.

10. Следующая группа операций позволит изменить как стиль оформления подготовленного текста, так и его элементов (Рис. 25).

Начнём с выбора стиля для промежуточного рисунка с текстом (Рис. 21). Активизируем соответствующий слой («Кафедра Менеджмент ИБМ4») и откроем панель стилей с помощью команды Window/Styles (Окно/Стили), где развернем список , в поле которого следует отыскать стиль Web Styles.

На слое щелкните правой кнопкой мыши по стилю Slick Chrome .

Рис. 23. Фрагмент контекстного меню слоя.

11. Для изменения стиля слоя с изображением звёздочки сначала скопируем выбранный стиль для слоя «Кафедра Менеджмент ИБМ4», а затем воспроизведём его на слое Shape 1. Для копирования щёлкните правой кнопкой мыши по слою «Кафедра Менеджмент ИБМ4» и выберите опцию Copy Layer Style (рис.23).

12. Для установки скопированного слоя на слой «Shape 1» щелкните правой кнопкой мыши по слою и активизируйте опцию Paste Layer Style.

13. Чтобы изменить стиль оформления третьего слоя, где помещено изображение цветка «Shape 2», следует на палитре стилей выбрать стиль «Green Gel with Drop Shadow» (Рис. 24).

Рис. 24. Фрагмент палитры стилей.

В результате выполненных операции будет сформировано новое изображение, показанное на рис. 25.

Рис. 25. Новый стиль оформления рисунка.

14. Следующая группа операций позволит использовать активный цвет для подготовки фона рисунка.

Рис. 26. Палитра слоёв.

Создадим новый слой, используя опцию Layer/New/Layer, или комбинацию клавиш Shift+Ctrl+N, или, нажав на клавишу , и назовите его «Фон» (рис. 26).

Для удобства дальнейшей работы следует увеличить размер панели слоёв, перемещая мышью его верхнюю границу.

Поместите новый слой ниже слоя «Кафедра Менеджмент ИБМ4» с помощью мыши, чтобы фон оказался за полем рисунка, а не наоборот.

15. Для изменения цвета заливки нового слоя выберите инструмент Paint Bucket Tool (G или ), который может находится за инструментом «Градиентная заливка». В этом случае воспользуйтесь контекстным меню.

На палитре инструмента укажите цвет, например #ffcc00 (R=255, G=204, B=0), а в качестве параметра «Mode» выберите из списка строку «Normal».

После заливки слоя «Фон», с помощью щелчка левой кнопки мыши будет сформировано необходимое изображение, показанное на рис. 16.

Задание для самостоятельной работы:

Сформируйте многослойное ( не менее 4-х слоёв) изображение торговой марки продукции промышленного предприятия, работающего в области ИТ-технологий, авиационного, космического, подъемно-транспортного, энергетического машиностроений, материалообработки и т.п. для её размещения на сайте организации.

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

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