Работа с графикой в Adobe Photoshop и Flash CS.

ЛЕКЦИЯ № 3 WEB-технологии и компью терное моделирование Краткий учебны й курс 1 Структура учебного курса  Лекция 1. Введение в интернет технологии и компью терное моделирование.  Лекция 2. Создание WEB страниц с использованием HTML.  Лекция 3. Работа с графикой в Adobe Photoshop и Flash CS.  Лекция 4. Создание динамических WEB страниц с использованием JavaScript и PHP.  Лекция 5. Базы данны х и PHP.  Лекция 6. Пример реализации «Эконометрической модели экономики России» под WEB.  Лекция 7. Основы компьютерного моделирования для WEB с использованием Powersim и AnyLogic. 2 Работа с графикой в Adobe Photoshop Отметим, что работа с графическими форматами – важнейшая составляющая в современной технологии создания WEBориентированны х информационны х систем. При этом к графическим форматам можно отнести: просты е растровы е изображения на сайте, фотографии, элементы интерфейса, Flashанимации и заставки, географические карты , баннеры , и т.д. Одной из наиболее популярны х программ по работе с графическими форматами является Adobe Photoshop. Данны й пакет обеспечивает решение важнейших задач по подготовке графики для WEB, в частности, следую щих:  разработка собственны х графических файлов («рисование»);  обработка графических файлов (например, фотографий), в том числе, применение различны х эффектов, «фотомонтаж», изменение качества и размера изображения (например, резкости и т.д.) и др.;  разработка макетов WEB-страниц и WEB-интерфейсов;  вставка текстов (надписей) в изображения;  оптимизация графических файлов под WEB. 3 Работа с графикой в Adobe Photoshop Меню Информационная панель Основная панель инструментов Палитра История всех действий пользователя Работа со «слоями», цветовы ми каналами 4 Работа с графикой в Adobe Photoshop Верхнее меню : File : как всегда отвечает за операции, связанные с созданием, сохранением, открытием/закрытием файла. Edit: редактирование файла. Изменение размеров выбранных объектов, некоторые операции с цветом, шаг назад/вперед. Image: Ваша будущая картинка и все, что с ней связано. В основном это размер и цветовая коррекция. Layer: Слои. Select: Средства выделения части изображения. Filter: Графические эффекты. View: меню Window позволяет включить/выключить панельки справа. Help: Помощь. Создание нового файла. File > New Открылось диалоговое окно создания нового файла. Имя файла (по умолчанию Untitled-1). 5 Работа с графикой в Adobe Photoshop. Создание изображений. Mode (режим) либо Grayscale (черно-белый), либо RGB или CMYK. Если результат ваших плодов предназначен для показа в Интернете, выбираем RGB, ибо цвета в дальнейшем будут видны на экране монитора и останутся такими, какие вы их зададите. Если же собираетесь пустить творение на печать работайте только в CMYK если не хотите увидеть на бумаге вместо задуманного сиреневого фиолетовый цвет. 6 Работа с графикой в Adobe Photoshop. Создание изображений. RGB Цвет объекта складывается из трех составляющих: R — red — красны й G — green — зелены й B — blue — синий Каждый из этих цветов может принимать значения от 0 до 255, в результате, если и R, и G и B равны 0, то конечный цвет черный, если равны 255 — белый. Соответственно, чтобы получить к примеру зеленый цвет, R должен быть = 0, B=0, а G=255. CMYK Цвет объекта складывается из четырех составляющих: С — cyan — синий M — magenta — пурпурны й Y — yellow — желты й K — black — черны й Каждый из этих цветов может принимать значения от 0 до 100%, в результате, если и С, и M, и Y, и K равны 0, то конечный цвет белый. Чтобы получить желтый цвет, Y должен быть = 100%, остальные — 0. 7 Работа с графикой в Adobe Photoshop. Создание изображений. Слева на панели инструментов два квадратика черны й (Foreground — передний) и под ним белы й (Background — задний план). Такие же квадратики, но поменьше, есть в палитре Color. Двойны м щелчком по цвету Foreground(или Background) попадаем в Color Piker — подборщик цвета. 8 Работа с графикой в Adobe Photoshop. Создание изображений. Устанавливаем фон нашего рисунка, например «желты й». Для этого используем Paint Bucket Tool Есть две замечательны е комбинации клавиш CTRL+BACK и ALT+BACK, их надо запомнить. ALT+BACK заливает документ цветом Foreground, а CTRL+BACK — цветом Background. 9 Работа с графикой в Adobe Photoshop. Создание изображений. Добавляем какую -нибудь надпись, например, «Рисунок» предварительно вы брав цвет текста и шрифт текста Для добавления текста используем Horizontal Type Tool Обратите внимание, текст вставился как отдельны й слой (Layer) рисунка 10 Работа с графикой в Adobe Photoshop. Создание изображений. Добавляем какую -нибудь надпись, например, «Рисунок» предварительно вы брав цвет текста и шрифт текста Для добавления текста используем Horizontal Type Tool Обратите внимание, текст вставился как отдельны й слой (Layer) рисунка 11 Работа с графикой в Adobe Photoshop. Создание изображений. Допустим, мы хотим еще что-то нарисовать на нашем рисунке, например круг. Тогда добавим новы й слой к рисунку (меню Layer->New Layer). Затем создаем рисунок на новом слое с помощью инструмента Free Form Pen Tool. Для рисования используем Free Form Pen Tool, предварительно вы брав цвет и форму рисунка (например, Ellipse Tool) 12 Работа с графикой в Adobe Photoshop. Создание изображений. Последний шаг. Сохраняем рисунок для WEB (меню File->Save for WEB). Здесь определяем формат файла (для рисунков обы чно – GIF, для фотографий – JPEG) и его параметры . 13 Работа с графикой в Adobe Photoshop. Создание изображений. Финальны й шаг. Вставляем изображение в WEB – страницу. 14 Работа с графикой в Adobe Photoshop. Создание изображений. Результат 15 Работа с графикой в Adobe Photoshop. Создание изображений. В Adobe Photoshop можно работать с фотографиями. Зайдите в меню File -> Open. Откройте какую-нибудь фотографию (файл jpeg). 16 Работа с графикой в Adobe Photoshop. Создание изображений. Допустим Вы хотите изменить задний фон фотографии перед вставкой в WEB страницу, например на белы й. Воспользуйтесь инструментами вы деления и заливки. Вначале с помощью Rectangular Marquee Toll вы делите верхнюю часть фона фотографии и закрасьте ее белы м цветом 17 Работа с графикой в Adobe Photoshop. Создание изображений. Допустим Вы хотите изменить задний фон фотографии перед вставкой в WEB страницу, например на белы й. Затем снимите вы деление (повторны й щелчок мы шкой на рисунке при вы бранном Rectangular Marquee Toll). Далее воспользуетесь волшебной палочкой (Magic Wand Tool) для вы деления оставшейся незакрашенной части рисунка, предварительно подобрав значение свойства Tolerance 18 Работа с графикой в Adobe Photoshop. Создание изображений. Результат. Затем снимите Далее снова вы деление (повторны й воспользуетесь щелчок мы шкой на инструментом рисунке при вы бранном Paint Bucket Tool Rectangular для закраски Marquee Далее выToll). деленной воспользуетесь части рисунка. волшебной палочкой Теперь Вы (Magic Wand Tool) для можете вы деления оставшейся сохранить незакрашенной фотографию для части рисунка, WEB. предварительно подобрав значение свойства Tolerance 19 Работа с графикой во Flash CS. Во Flash можно импортировать различны е До сих пор мы рассматривали средства создания статичны х изображений. Однако, Вы также можете создавать эффектны е графические интерактивны е приложения используя технологию Flash 20 Работа с графикой во Flash CS. Основны е возможности Во Flash можно импортировать различны е изображения, например фотографии, и затем осуществлять с ними различны е действия, в частности создавать визуальны е эффекты ; С помощью Flash можно проектировать интерфейс пользователя сайта (интерактивны е меню, формы ввода, и т.д.), интегрируя его с Базами Данны х посредством PHP (ASP) и XML;  С помощью Flash строить лю бы е графики (2D, 3D), географические карты в динамике, получая данны е из Базы Данны х через XML;  С помощью Flash можно делать оригинальны е заставки и даже построить весь сайт во Flash;  С помощью Flash можно создавать красивы е баннеры , on-line игры и т.д.;  По функциональности Flash (Action Script 3) можно сравнить с Java апплетами, но в отличие от них, Flash бы стрее загружается и, как правило, требует меньше ресурсов. 21 Работа с графикой во Flash CS. Кадры Слои Панель инструментов рисования Стандартная панель управления Палитра Рабочая область Библиотека символов 22 Flash CS. Пример реализации простейшего эффекта смены фотографий Импортируйте во Flash две произвольны е фотографии, желательно одинакового размера (файлы с расширением *.jpeg) 23 Flash CS. Пример реализации простейшего эффекта смены фотографий Шаг №2. Создайте 2-ой слой во Flash и перенесите в первы й кадр второго слоя одну из фотографий. Обратите внимание. Работа с объ ектами осуществляется после щелчка по объ екту правой кнопки мы ши 24 Flash CS. Пример реализации простейшего эффекта смены фотографий 25 Flash CS. Пример реализации простейшего эффекта смены фотографий 26 Flash CS. Пример реализации простейшего эффекта смены фотографий 27 Flash CS. Пример реализации простейшего эффекта смены фотографий Переходим в первы й кадр Слоя 2 28 Flash CS. Пример реализации простейшего эффекта смены фотографий Вставляем ранее вы резанную фотографию в кадр 1 Слоя 2. Далее совмещаем фотографии, так что бы одна как бы перекры вала другую 29 Flash CS. Пример реализации простейшего эффекта смены фотографий Используйте «помощника» для создания эффекта «растворения» фотографии 30 Flash CS. Пример реализации простейшего эффекта смены фотографий Установите нулевой уровень прозрачности для фотографии 31 Flash CS. Пример реализации простейшего эффекта смены фотографий В результате у Вас будут автоматически сгенерированы кадры , в которы х фотография постепенно меняет прозрачность до 0 32 Flash CS. Пример реализации простейшего эффекта смены фотографий Временно отключите видимость первого слоя, что бы Вам бы ло удобно работать со второй фотографией 33 Flash CS. Пример реализации простейшего эффекта смены фотографий Преобразуете вторую фотографию в «символ» типа «графика» 34 Flash CS. Пример реализации простейшего эффекта смены фотографий Установите параметр Альфа (прозрачность) = 0% 35 Flash CS. Пример реализации простейшего эффекта смены фотографий Щелкните мы шью на 30 кадре и нажмите клавишу F6. У Вас автоматически заполнятся кадры 2 – 30 Слоя №1 Установите параметр Альфа=100% для кадра № 30 Слоя № 1 36 Flash CS. Пример реализации простейшего эффекта смены фотографий Перейдите в первы й кадр и «Создайте анимацию движения. Снимите флажок «невидимость» для Слоя 2 (преобразование 2) 37 Flash CS. Пример реализации простейшего эффекта смены фотографий Вы получили эффект возникновения второй фотографии на фоне исчезновения первой Просмотрите результат для WEB 38 Flash CS. Пример реализации простейшего эффекта смены фотографий Результат: эффект плавной смены двух фотографий 39 Flash для Эконометрической модели экономики России. Это Action Script – код позволяющий, в частности, устанавливать правила поведения Flash ролика в зависимости от действий пользователя 40