Донецкий техникум промышленной автоматики

Створення анімації в графічному редакторі Adobe Photoshop

розділи: Інформатика

Практична робота № 1. "Створення найпростіших анімованих зображень"

Вказівки до виконання

  • У Adobe Photoshop створіть новий файл шириною 200 і висотою 300 пікселів, прозорий.
  • Зробіть заливку чорним кольором (Відро) - це буде ваша основа для світлофора.
  • Намалюйте три кола (Овал), схематично зображують лампочки світлофора - залийте їх сірим кольором. Об'єднайте шари (Шари - Об'єднати видимі) і вийшов шар назвіть "Зелений"

Об'єднайте шари (Шари - Об'єднати видимі) і вийшов шар назвіть Зелений

  • Створіть дві копії цього шару (Шар - Дублювати шар) - відповідно "Жовтий" і "Червоний". Зверніть увагу, що зображення світлофора в цих шарах повинні розташовуватися строго один під одним.

Зверніть увагу, що зображення світлофора в цих шарах повинні розташовуватися строго один під одним

  • У вас повинно вийти три однакових шару. Активізуйте шар під назвою "Зелений", виконайте заливку однієї (нижньої) окружності зеленим кольором. Зверніть увагу на палітру Шари - зафарбувати нижня окружність, хоча на малюнку змін немає.

Зверніть увагу на палітру Шари - зафарбувати нижня окружність, хоча на малюнку змін немає

  • Таким чином, виділяючи потрібний шар і фарбуючи потрібну окружність в правильний колір, ви повинні отримати наступне:

Таким чином, виділяючи потрібний шар і фарбуючи потрібну окружність в правильний колір, ви повинні отримати наступне:

  • Перейдіть в Adobe ImageReady, використовуючи відповідну команду або кнопку на панелі інструментів.
  • Відкрийте палітру Анімація, якщо її немає на екрані (Вікно - Анімація).
  • У контекстному меню палітри Анімація виберіть команду Make Frames From Layers (Створити кадри з шарів). Після цього в палітрі з'являться три кадри, відповідні верствам зображення світлофора.
  • У контекстному меню палітри Анімація виберіть команду Seleсt All Frames (Вибрати всі кадри), і задайте час показу кадрів 0,5 секунди. Якщо виділені всі кадри, то досить задати час показу для одного кадру, інші отримають цей час автоматично.
  • Переконайтеся, що кадри розташовані в потрібній послідовності: червоний, жовтий, зелений світло. Якщо порядок не правильний, то в палітрі Анімація переміщайте кадри, утримуючи лівою клавішею миші в потрібну позицію.

Якщо порядок не правильний, то в палітрі Анімація переміщайте кадри, утримуючи лівою клавішею миші в потрібну позицію

  • Запустіть анімацію. Якщо все вийшло як треба, то світлофор повинен по черзі блимати червоним, жовтим і зеленим кольором. <Малюнок 20>

Практична робота № 2. "Створення анімаційних банерів"

Завдання 1. Створення рекламного банера розміром 468х60 в форматі GIF.

Вказівки до виконання

  • Відкрийте редактор Adobe Photoshop, створіть новий малюнок, розміром 468х60, прозорий, з дозволом 72dpi, колір в форматі RGB.
  • Залийте фон будь-яким кольором (Відро).

Відкрийте файл з фотографією ведмедя < малюнок 6 >, Використовуючи інструменти виділення (Лассо) вам необхідно виділити фігуру ведмедя і скопіювати її в банер. Додайте її зліва.

  • Зробіть напис, підібравши розмір і тип тексту (Інструмент Текст).

Зробіть напис, підібравши розмір і тип тексту (Інструмент Текст)

  • У вас повинно вийти кілька шарів. Виконайте об'єднання цих шарів в один (Шар - Об'єднати видимі). Цей шар буде першим кадром банера.
  • Додайте новий шар до наявного (Шар - Новий - Шар). Повторіть всі пункти від заливки. Відкрийте файл з малюнком бджілки < малюнок 9 >. Виділіть бджілку і вставте його в праву частину банера, зробіть напис.
  • Таким чином, у вас вийде другий кадр банера.

Таким чином, у вас вийде другий кадр банера

  • Перейдіть в Adobe ImageReady і задайте анімацію з часом показу кадру 1 секунда.
  • Збережіть банер як оптимізований < малюнок 21 >.

Завдання 2. Створення рекламного банера розміром 100х100 в форматі GIF.

Вказівки до виконання

  • Для виготовлення цього банера будемо використовувати тільки заливку і написи.
  • Створіть шар з заливкою і невеликим малюнком в куточку.

Створіть шар з заливкою і невеликим малюнком в куточку

  • Потім, в кожен шар вносите елемент, який буде змінюватися. Наприклад, текст, який розбитий на літери.

Наприклад, текст, який розбитий на літери

  • Перейдіть в Adobe ImageReady і задайте анімацію з часом показу кадру 0.5 секунди
  • Збережіть банер оптимізованим < малюнок 22 >.

Завдання 3. Створення рекламних банерів на задану тему.

Необхідно створити серію іміджевих банерів (розміром 468х60, 100х100) єдиної тематики, розробивши слоган, візуал, колірну гамму, текст.

Обов'язкові елементи:

  • Єдина колірна гамма;
  • Рекламний слоган;
  • Практична робота №3. Ефектна поява аватара (міні-картинка в Інтернет, що відображає внутрішній стан його власника, або просто його фото або елемент творчості власника)

    Завдання. Створити власний аватар для форуму з застосуванням ефектів анімації.

  • Створюємо новий документ. (200х200, колір - білий)
  • Беремо кисть (brush tool). Вибираємо зі списку кисть, схожу на мазки і зображену на картинці (23 пікселя).
  • Вибираємо зі списку кисть, схожу на мазки і зображену на картинці (23 пікселя)

    • Створюємо новий шар (Шар - Новий - Шар) і малюємо пензлем як показано нижче.

    Створюємо новий шар (Шар - Новий - Шар) і малюємо пензлем як показано нижче

    • Вставляємо фото. Ми використовуємо зображення Мони Лізи. < малюнок 12 >. Якщо він не підходить за розмірами, використовуємо інструмент Вільне трансформування

    Якщо він не підходить за розмірами, використовуємо інструмент Вільне трансформування

    • Тиснемо Ctrl + Alt + G, або Layer> Create clipping mask


    Тиснемо Ctrl + Alt + G, або Layer> Create clipping mask

    • Зверніть увагу на палітру Шари. Вона виглядає наступним чином:

    Вона виглядає наступним чином:

    • Виділяємо Слой1 і Слой2 і об'єднуємо обидва шару (Шар - Об'єднати шари). Дублюємо вийшов шар (Ctrl + J).
    • Потім беремо ластик (Еraser tool) з такими ж налаштуваннями кисті як і раніше. Дублюємо шар і робимо невидимим попередній. Стираємо нижній штрих як показано нижче.


    Стираємо нижній штрих як показано нижче

    Таким же чином кілька разів дублюємо шари і стираємо штрихи.

    Таким же чином кілька разів дублюємо шари і стираємо штрихи

    • Переходимо в Image Ready. Відкриваємо вікно анімації. Для створення першого кадру сховаємо всі шари. Далі натискаємо на панелі значок Дублювати кадр і робимо видимим другий шар на палітрі.
    • Продовжуємо дублювати фрейми, поступово роблячи видимими заховані шари.

    Продовжуємо дублювати фрейми, поступово роблячи видимими заховані шари

    • Тиснемо Ctrl + Alt + Shift + S (File> Save optimized As), щоб зберегти анімацію.
    • Милуємося результатом: < малюнок 23 >
    • Використані джерела:

  1. www.demiart.forum.ru
  2. www.globator.net

31.01.2008