«Обучающая программа: Photoshop в Web-дизайне» - Дипломная работа

Содержание

Введение 3

1.1 Особенности графики для Web 5

1.1.1 Размер WEB-страницы 5

1.1.2 Скорость загрузки 5

1.1.3 Способы оптимизации 6

1.2 Интерфейс ImageReady 6

1.3 Использование инструментов ImageReady 9

1.3.1 Слои 9

1.3.2 Эффекты слоев 10

1.2.3 Сохранение набора эффектов 12

1.2.4 Текст 13

1.2.5 Градиентные заливки 15

1.2.6 Текстуры 17

1.2.7 Фон web-страницы 18

1.4 Карты ссылок 23

1.5 GIF-анимация 26

1.4.1 Создание кадров 26

1.4.2 Расчёт промежуточных кадров 26

1.4.3 Тайминг 27

1.4.4 Оптимизация анимации 27

1.4.5 Удаление кадров 29

1.4.6 Редактирование готовой анимации 29

1.6 Сохранение 29

Глава 2. Тестирующая часть 31

2.1 Тесты по Photoshop в Web-дизайне 31

Глава 3. Апробация 34

Глава 4. Характеристика программы 35

Заключение 36

Литература 37

Введение

Бурное развитие сети Интернет и графических технологий во много раз расширило круг пользователей Photoshop. Самая популярная служба Интернета – World Wide Web – пока в основном использует растровую графику. А самый лучший редактор для растровых изображений Photoshop. В результате эта программа стала едва ли не самой популярной среди пользователей Интернета. Таким образом, пакет Photoshop стал основным инструментом для web-дизайнеров. Совместно с Photoshop развивался и его «сиамский близнец» - программа ImageReady, поставляемая вместе с Photoshop и предназначенная для оптимизации изображений, для создания web-страниц, анимации и ролловеров (элементов web-страницы, меняющих свой вид в разных ситуациях).

В связи с расширением информационных систем и внедрением их практически во все сферы человеческой деятельности, учащиеся должны уметь не только пользоваться найденным в Интернете материалом, но и создавать свои web-страницы и внедрять их в Интернет.

Поэтому наша задача представляет собой создание обучающей программы «Photoshop в web-дизайне». Эта программа должна быть предназначена для ознакомления и обучения школьников, студентов, а также всех желающих возможностям Photoshop в web-дизайне. Применение компьютерной техники в обучении позволяет не только ускорить процесс усвоения большого количества учебного материала, но и подавать эти знания на качественно новом уровне: моделировать процессы и явления микро- и макромира, строить модели исторических процессов и т.д.

Новые методы обучения дают возможность решить проблему дефицита времени учащихся и преподавателей, проводить обучение в соответствии с индивидуальными особенностями учащихся. В условиях массовой общеобразовательной школы, в каждом классе имеются дети, как с высоким уровнем, так и с достаточно низким уровнем. Фронтальная работа и ориентация на среднего ученика в таких условиях себя не оправдывает и приводит к потере интереса к происходящему на уроке. Индивидуальная работа ученика за компьютером создаёт условия комфортности при выполнении заданий, предусмотренных программой: каждый человек работает с оптимальной для него нагрузкой, так как не чувствует влияния окружающих.

Работа представлена в виде трёх глав. Первая глава посвящена рассказу о применении Photoshop 7.0 при создании графики для Интернета. В ней рассмотрены возможности работы с изображениями в ImageReady: применение эффектов слоёв, в том числе применение градиентной, узорной заливки; создание областей ссылок; создание анимации (создание, удаление, копирование, перемещение кадров анимации), оптимизация анимации; сохранение оптимизированного изображения в виде web-страницы с изображением и без него, а также в виде графического файла. Весь этот теоретический материал в обучающей программе реализован в виде отдельных web-страниц, доступ к которым осуществляется через ссылки в оглавлении на начала тем. Вторая глава – тестирующая часть, в ней приведён ряд вопросов по теме. Она поможет проверить полученные знания. При работе на компьютере каждый ученик может обдумывать ответ столько времени, сколько ему необходимо; снимается вопрос о субъективной оценке знаний при опросе, так как оценку выставляет компьютер, подсчитывая количество верно выполненных заданий; происходит мгновенный анализ ответа, что даёт возможность опрашиваемому либо утвердиться в своих знаниях, либо скорректировать неверно введённый ответ, либо обратиться за помощью к учителю. Третья глава результаты апробации.

Выдержка из текста работы

1.1 Особенности графики для Web

1.1.1 Размер WEB-страницы

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

Поскольку изображения на web-странице предназначены только для просмотра на экране, их разрешение должно совпадать с разрешением экрана, а размеры не должны превышать размеров экрана. На практике страницы проектируются исходя из средних величин. Наиболее типичное разрешение мониторов составляет 72 пиксела на дюйм(800х600 пикселов)

Из этих размеров следует вычесть площадь, занимаемую элементами интерфейса самого браузера. Кроме того, большинство пользователей предпочитают открывать окна браузера не на весь экран, чтобы иметь возможность быстро переключаться между ними. В результате получится 600х400 пикселов.

1.1.2 Скорость загрузки

Для повышения скорости загрузки страниц можно использовать два направления: уменьшения количества графики и сокращение размеров графических файлов

Количество изображений на странице определяется её дизайном. Если у вас есть возможность изменить дизайн страницы таким образом, чтобы уменьшить количество изображений и/или их размеры, то обязательно воспользуйтесь ею, например:

1. примените сплошной цветовой фон вместо графического;

2. используйте цветовой фон ячеек таблиц вместо графического;

3. вводите для серии страниц повторяющиеся графические элементы, чтобы избежать их постоянной загрузки по сети;

4. идентифицируйте долго загружающиеся изображения и рассмотрите возможность уменьшения их размеров.

1.1.3 Способы оптимизации

Оптимизацией изображений назовём сокращение размеров файлов изображений без уменьшения самих изображений. Выигрыш в размере достигается благодаря:

1. использованию специальных форматов файлов GIF, JPEG, PNG, позволяющих сжимать изображения;

2. уменьшению количества цветов в изображениях;

3. удалению избыточной графической информаций;

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

5. раздельному хранению фрагментов изображений с различными параметрами сжатия.

Все перечисленные методы сохраняют геометрический размер изображений и не меняют дизайна страницы.

1.2 Интерфейс ImageReady

Главное окно ImageReady в первый момент легко перепутать с Photoshop, настолько они похожи внешне: та же панель инструментов, знакомые палитры.

Отметим некоторые особенности. В первую очередь это несколько специальных инструментов на панели инструментов.

o Инструменты Rectangle Image Map (Прямоугольная карта ссылок), Circle Image Map (Круглая карта ссылок), Polygon Image Map (Многоугольная карта ссылок) и Image Map Select (Выделение карты ссылок) служат для создания карт ссылок. Первые три используются для определения прямоугольных, круглых и многоугольных областей карты, а последний - для их выделения в документе.

Кроме того, на панели инструментов имеются кнопки режимов:

o Toggle Slices Visibility (Переключение видимости фрагментов). Если кнопка не нажата, то границы фрагментов, на которые разрезано изображение, отсутствуют на экране, в противном случае они видны. Кнопочному переключателю на панели инструментов соответствует команда переключатель (Фрагменты) подменю Show (Демонстрация) меню View (Вид).

o Toggle Image Maps Visibility (Переключение видимости карты ссылок). При нажатой кнопке ImageReady отображает границы областей карты ссылок. Кнопочному переключателю на панели инструментов соответствует команда-переключатель Image Maps (Карты ссылок) подменю Show (Демонстрация) меню View (Вид).

o Preview Document (Просмотр документа). При нажатой кнопке, в режиме просмотра документа, можно проверить работу интерактивных элементов прямо в окне документа. Редактирование интерактивных элементов в этом режиме невозможно.

o Preview in Default Browser (Просмотр в браузере по умолчанию). Щелчок на кнопке открывает текущее изображение в браузере, принятом в системе по умолчанию. Это окончательный режим проверки карт ссылок, интерактивных элементов и анимации. Только он обеспечивает полностью адекватное отображение этих элементов страницы. Изображение в браузере сопровождается дополнительной информацией о нем и текстом, необходимым для работы динамических элементов.

Редактор ImageReady имеет и несколько особых палитр.

o Optimize (Оптимизация). Содержит параметры оптимизации изображений для экспорта в выбранный формат. Оптимизированное изображение демонстрируется прямо в окне каждого документа. В строке состояния окна документа указываются текущие параметры оптимизации или иная информация, которая выбирается в списке, открывающемся щелчком на треугольной стрелке. В этом же списке выбирается предполагаемая скорость модема, позволяющая оценить время загрузки изображения в браузер пользователя.

o Color Table (Цветовая таблица). Показывает текущую палитру изображения, если задан режим оптимизации в индексированном формате (GIF или PNG-8). Она также имеет свой аналог в модуле Save For Web (Сохранить для Web) Photoshop и работа с ней тоже аналогична. Layer Options/Style (Параметры слоя/Стиль). Используется совместно с палитрой Layers (Слои) и позволяет задавать параметры слоя и ассоциированных с ним эффектов. Если в палитре Layers (Слои) выделена строка эффекта, то в палитре Layer Options/Style (Параметры слоя/Стиль) оказываются параметры для настройки этого эффекта и название палитры меняется на название эффекта. Если же выделен слой, то в этой палитре вы найдете параметры слоя.

o Animation (Анимация). Содержит перечень всех кадров анимации и управляет их очерёдностью и просмотром.Image Map (Карта ссылок). Используется для создания карт ссылок.

o Slice (Фрагмент). Предназначен для установки параметров отдельных фрагментов, на которые изображение разрезано с помощью инструмента Slice (Фрагмент) или команды Divide Slice (Разделить фрагмент) меню Slices (Фрагменты).

o Rollovers (Интерактивные элементы). Хранит варианты изображения, сменяющегося в зависимости от того, находится ли на нем указатель и нажата ли кнопка мыши в браузере пользователя.

Палитры Color (Цвет), History (Протокол), Info (инфо), Character (Символ), Paragraph (Абзац) и Actions (Операции) почти полностью идентичны одноименным палитрам Photoshop. Правда, палитра History (Протокол) в ImageReady несколько упрощена. В ней отсутствует возможность создания снимков (snapshots) и назначения исходного состояния для кисти History Brush (Восстанавливающая кисть), поскольку ImageReady не имеет такого инструмента.

1.3 Использование инструментов ImageReady

1.3.1 Слои

Работу над web-страницей обычно начинают с макета, выполненного на бумаге в программе иллюстрирования или визуальном редакторе HTML.

1. Откроем файл с нашим макетом командой Open (Открыть) меню File (Файл). После щелчка на кнопке Открыть (Open) в окне открытия файла откроется диалоговое окно Rasterize Options (Параметры растрирования).

2. Щелкнем на кнопке ОК. На открывшемся изображении цветом обозначено расположение основных элементов.

Создадим требуемые слои.

3. Выберем инструмент Magic Wand (Волшебная палочка) в панели инструментов -ImageReady. Этот инструмент в этом случае наиболее удобный. Выделим зеленый квадрат щелчком в его внутренней области.

4. Создадим слой из выделенного фрагмента командой Layer Via Cut (Слой вырезанием) подменю New (Новый) меню Layer (Слой) или контекстного меню, открывающегося щелчком правой кнопки мыши. Еще удобнее воспользоваться клавиатурным эквивалентом этой команды Ctrl+Shift+J. Теперь зеленый квадрат размещен на отдельном слое, а исходный слой стал в этом месте прозрачным.

5. Чтобы изменить имя слоя следует воспользоваться диалоговым окном Layer Options (Параметры слоя). Как и в Photoshop оно открывается для выделенного слоя с помощью одноименной команды меню палитры Layers (Слои). Новое имя надо ввести в поле Name (Имя) в верхней части окна.

1.3.2 Эффекты слоев

Познакомимся с эффектами слоёв на примере эффектов Bevel and Emboss (Скос и рельеф) и Color Overlay (Наложение цвета).

1. Перейдите к слою, к которому будем применять эффекты в палитре Layers (Слои).

2. Щелкните на кнопке с буквой f в нижней части палитры Layers (Слои). Она открывает список доступных эффектов.

3. Выберите эффект Bevel and Emboss (Скос и рельеф). Вместо кнопки в палитре Layers (Слои) можно было бы воспользоваться и командой Bevel and Emboss (Скос и рельеф) подменю Layer Style (Слоевые стили) меню Layer (Слой).

4. Строка слоя в палитре слоев приобрела дополнительную подстроку эффектов. Расположенная в этой строке слева треугольная стрелка разворачивает список ассоциированных со слoем эффектов. Пока это только эффект Bevel and Emboss (Скос и рельеф).

Обратите внимание, строка эффектов имеет значок видимости. Щелкнув на значке видимости эффекта, вы временно отключите его демонстрацию. Повторный и щелчок вновь покажет скрытый эффект.

Заключение

Задача решена, обучающая программа выполнена. В ней рассмотрены такие возможности Photoshop 7.0 в Web-дизайне, как создание карт ссылок, GIF-анимации, работа с текстом, со слоями, эффектами слоёв. Рассмотрены особенности графики для Web. Составлен тест, позволяющий провести контроль знаний. И проведена апробация.

Список литературы

1. Тайц А.А., Тайц, А.М., Петров М.Н. Эффективная работа: Photoshop7. – СПб.: Питер, 2003. – 768 с.: ил.

2. Панкратова Т. Photoshop 7: учебный курс. – СПб.: Питер, 2003. – 258 с.: ил.

3. Матросов А.В., Сергеева А.О., Чаунин М.П. HTML 4.0 – СПб.: БХВ – Петербург, 2002. – 672 с.: ил.

4. Хейз, Дидре. Освой самостоятельно HTML и XHTML. 10 минут на урок, 3-е издание. : Перевод с англ. – М.: Издательский дом «Вильямс», 2002. – 224 с.: ил. – Парал. тит. англ.

5. Гиз К., Холмс А. Основы Web-дизайна: вспомогательное руководство: Пер. с англ. – М.: Издательский дом «Вильямс», 2002. – 640 с.: ил.

6. Дронов В.А. Java Script в Web-дизайне. - СПб.: БХВ – Петербург, 2001. – 880 с.: ил.