3.10 Лабораторная работа № 11 Photoshop. Создание кнопки

Цель работы:

• научиться создавать новые изображения заданного размера;

• закрепить навыки, полученные при выполнении лабораторных работ №8-10

Задание

1. Запустить Photoshop, в меню Файл выбрать Новый, в открывшемся окне задать имя файла (например, Кнопка), ширину и высоту установить равными 100 пикселам, содержание сделать прозрачным. Масштаб изображения сделать 300%.

2. Выбрать инструмент Овальная область, на панели свойств инструмента выбрать стиль Фиксированный размер, ширину и высоту установить 80 пикселов. Поместить область в центр изображения.

3. Выбрать инструмент Градиент, тип градиента установить Радиальный, щелкнуть по градиенту на панели свойств и настроить переход цветов по своему усмотрению (например, от синего к белому). Растянуть градиент от центра выделенной область к краю изображения. Выполнить команду Выделение-Убрать выделение.

4. Снова выбрать инструмент Овальная область, ширину и высоту установить в 60 пикселов. Поместить область внутрь предыдущей и тоже залить градиентом. Убрать выделение.

5. Выбрать инструмент Текст и создать надпись на кнопке (например, Домой), цвет и шрифт надписи - на ваше усмотрение. Выбрать инструмент Перемещение и поместить надпись в центр кнопки. Снова выбрать инструмент Текст, выделить текст на кнопке и щелкнуть по инструменту Создать искаженный текст на панели свойств. Выбрать какой-либо стиль (например, Выпуклость), настроить его и нажать ОК.

6. Щелкнуть по значку Слоя 1 на палитре Слои, затем по кнопке Добавить стиль слоя и настроить эффекты слоя (например, тень, рельеф и т.д.). Повторить ту же операцию с текстовым слоем.

7. Выполнить команду Слой-Выполнить сведение.

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

9. Выполнить команду Файл-Сохранить для Web. В открывшемся окне в разделе Settings выбрать GIF 32 Dithered, нажать кнопку Save и сохранить файл в свою папку.

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

1. Создайте новое изображение размером 100х100 пикселов с прозрачным фоном.

2. На основе этого изображения создайте прямоугольную кнопку; надпись, заливка, эффекты – на свое усмотрение.

3. Сохраните кнопку в свою папку в формате GIF.

Контрольные вопросы

1. Как создать новое изображение?

2. Каким образом можно создать выделенную область фиксированного размера?

3. В чем преимущества формата GIF для хранения элементов web-страниц?

4 Редактор web-страниц Microsoft FrontPage

Microsoft FrontPage — современная визуальная интегрированная оболочка для построения отдельных web-страниц и целых web-узлов. В программе FrontPage разработчик составляет содержание web-страницы так, как оно будет выглядеть в браузере, а программа сама составляет соответствующий код на языке HTML.

Web-узел — это набор файлов в формате HTML, расположенных в определенной папке и связанных друг с другом гиперссылками. Один из файлов web-узла назначается главным, он называется домашней страницей и открывается в браузере пользователя при подключении к web-узлу (обычно он называется index.htm или home.htm). Остальные web-страницы выводятся в окно браузера по мере перехода к ним по гиперссылкам. Кроме файлов HTML в состав узла входит набор графических объектов формата GIF или JPG, предназначенных для оформления страниц.

Для создания web-страниц используется язык HTML (HyperText Markup Language - язык разметки гипертекста). Под разметкой понимается использование специальных конструкций, которые легко отделяются от смыслового содержания документа. Эти специальные конструкции называются тегами. Все теги заключаются в угловые скобки <...>. HTML-документы открываются и просматриваются специальными программами, которые называются браузерами или Web-обозревателями (например, Internet Explorer). Теги на экран не выводятся, а указывают браузеру, как интерпретировать текст, заключенный между ними.