Приветствую Вас Гость | RSS Главная | Рисуем рекламный банер Мастерклуба - Страница 4 - Форум | Регистрация | Вход
Написать администрации: [masterclub.admin@gmail.com] Последние сообщения · Одноклубники · Правила форума · Поиск · RSS
Форум » Adobe Flash » Adobe Flash » Рисуем рекламный банер Мастерклуба (Командная работа во Флеш. Приглашаются все желающие.)
Рисуем рекламный банер Мастерклуба
БродягаДата: Воскресенье, 13.06.2010, 18:35 | Сообщение # 1
Умелец

Смотритель
Репутация: 283
Сообщений: 685
И так, перед нами стоит интересная и серьезная задача: создать банер, который будет рекламировать наш клуб. Для этого нам понадобится небольшой сценарий, подготовка картинок и объектов в других программах, и собственно говоря, анимация во Флеш.
Хочу сразу уточнить, что делаем мы не рекламный ролик, а рекламный банер. Что это такое: это короткая анимация (максимум на 10-15 секунд) в которой отображается квинтессенсия (суть) того или иного сайта. Т.е. банер — это как обложка книги. Не стоит вываливать на обложку все содержание. Банер должен быть броским, в меру информативным, но не рассказывать от и до о ресурсе, на который ссылается. Главное -- заинтересовать человека. Если ему стало интересно — он кликнет по банеру и попадет к нам в клуб.

Для начала нам нужен сценарий... 15


В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
БродягаДата: Суббота, 19.06.2010, 19:30 | Сообщение # 76
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Quote (Марго)
Для баннера на ленту новостей на Главной это 450х300

Ну вот с самого большого и начнем. Анимация занавеса уже отрепетирована. Мне бы теперь Аленушку дождаться с ее Бегемотом. Когда одобрите эскиз — можна будет приступать к "фокусам" Бегемота на сцене.

Да, дорогие художники, вы не забыли, что нужен еще цилиндр и примус? Кстати, о примусе, кто рисовал этот агрегат для наград в нашем клубе? Не сохранился ли он в более высоком разрешении?
По-моему было бы стильно. 15


В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
АннушкаДата: Воскресенье, 20.06.2010, 17:05 | Сообщение # 77
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174

Выбирай! 3




Звания и титулы:
 
Награды: 9
МаргоДата: Воскресенье, 20.06.2010, 22:48 | Сообщение # 78
Мастер

Админ
Репутация: 543
Сообщений: 4822
Тот кто рисовал, уже не нарисует, к сожалению.
Думаю вариант Аннушки вполне подойдёт 15
А можно узанть как делался занавес? 5
Цель этой мастерской, не просто сделать баннер, а делать что-то сообща. Давайте будет делиться тем, КАК мы что либо делаем, в этом и есть смысл Мастерской. Заодно будем учиться и тренироваться, или повторять пройденное...
 
Награды: 1
АленаДата: Понедельник, 21.06.2010, 11:33 | Сообщение # 79
Ученик

Смотритель
Репутация: 85
Сообщений: 431
Quote (Марго)
Давайте будет делиться тем, КАК мы что либо делаем, в этом и есть смысл Мастерской.

согласна. А примус я могу отрисовать тоже. Только покажите где он 15


Не так важно то, что с нами происходит, как важно то, что мы делаем с тем, что с нами происходит
 
Награды: 0
БродягаДата: Понедельник, 21.06.2010, 12:24 | Сообщение # 80
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Quote (Марго)
А можно узанть как делался занавес?

Да конечно можно. Тут ничего особо сложного. 15

Обрабатываем картинку в Фотошопе. Для начала берем Аннушкин занавес и выделяем ламбрикен.

Вырезаем его на отдельный слой, а нижний удаляем. К слою ламбрикена применяем стиль "Drop Shadow" (Размытая тень), направление вертикально вниз.

Ламбрикен сохраняем в формате PNG (portable network graphics). Этот формат поддерживает прозрачность и его прекрасно понимает Флеш.

Дальше я снова загрузил картинку занавеса и, вырезав среднюю часть, штампом дорисовал верх. У меня получилась половинка занавеса, которую тоже сохраняем в PNG.

Аннушка предложила две картинки с занавесом. Из второй я вырезал сцену и сохранил в JPG.

Всё. Детали готовы, приступаем к анимации во Флеш.

Создаем новый файл с размерами 450х300 пикселей.

Сохраняем его у себя на компьютере под каким-нибудь именем и не забываем периодически сохранять изменения (Ctrl+S).

На 1-м слое рисуем фон с радиальной растяжкой от серого (R=200, G=200, B=200) к черному (0, 0, 0).

Импортируем в библиотеку картинки: File -> Import -> Import to library (Файл - Импорт - Импорт в библиотеку). Обратите внимание, что в библиотеке появились ваши файлы и два символа типа графика. Я заметил, что Флеш создает эти символы автоматически из файлов PNG. Ну, для ламбрикена символ не понадобится, т.к. он у нас в анимации участия не принимает, поэтому этот символ можно просто удалить. А вот занавес будет двигаться. Переименовываем символ в Zanaves.

Из библиотеки на рабочий стол тащим изображение сцены и масштабируем внизу картинки.

Переименовываем слой в Scena.

Создаем новый слой, переименовываем его в Zanaves_left и располагаем на нем в левой половине символ Zanaves.

Правый клик мышкой по ключевому кадру этого слоя. В контекстном меню выбираем Create Motion Tween (создать анимацию движения).

Цепляемся мышкой за хвост анимации в таймлайне и растягиваем ее до 55-го кадра.
Переходим на 55-й кадр и инструментом Free Transform Tool (Q) (Свободное преобразование) сплющиваем занавес по вертикали и смещаем влево, к краю сцены (частично даже за край).

В 56-м кадре создаем пустой ключевой кадр (F7). Из последнего кадра анимации, (55-го) копируем трансформированный занавес (Ctrl+C) и в 56-м вклеиваем его на это же место (Ctrl+Shift+V). Начиная с 57-го кадра омечаем сколько хотим кадров (ну пока допустим 20), кликаем правой клавишей мышки и выбираем Insert frames (Вставить кадры) или можна просто нажать F5. Это будет время, в течение которого занавес будет стоять в открытом положении (пока наш Бегемот будет развлекать почтенную публику 15 ) Потом переходим на последний из них и создаем копию ключевого кадра с помощью клавиши F6. Правой клавишей мышки создаем еще одну анимацию Motion tween. Увеличиваем ее длительность до 55 кадров и в последнем кадре трансформируем занавес в обратную сторону (закрываем сцену). Опять создаем после последнего кадра пустой ключевой (F7) и копируем в него занавес из последнего кадра. Вставляем кадры (допустим опять 20 или 30) — это время в течение которого занавес будет закрыт.

Теперь переходим в самое начало анимации, создаем еще один слой, переименовываем его в Zanaves_right, на него из библиотеки опять тащим символ Zanaves. С помощью меню Modify -> Transform -> Flip Horizontal отзеркаливаем его. Располагаем его в правой половине рабочей сцены и повторяем все действия, которые мы делали для левой половины, но теперь уже перемещаем в анимации занавес вправо:

Правый клик мышкой по ключевому кадру этого слоя. В контекстном меню выбираем Create Motion Tween (создать анимацию движения).

Цепляемся мышкой за хвост анимации в таймлайне и растягиваем ее до 55-го кадра.
Переходим на 55-й кадр и инструментом Free Transform Tool (Q) (Свободное преобразование) сплющиваем занавес по вертикали и смещаем ввправо, к краю сцены (частично даже за край).

В 56-м кадре создаем пустой ключевой кадр (F7). Из последнего кадра анимации, (55-го) копируем трансформированный занавес (Ctrl+C) и в 56-м вклеиваем его на это же место (Ctrl+Shift+V). Начиная с 57-го кадра омечаем сколько хотим кадров (ну пока допустим 20), кликаем правой клавишей мышки и выбираем Insert frames (Вставить кадры) или можна просто нажать F5. Это будет время, в течение которого занавес будет стоять в открытом положении (пока наш Бегемот будет развлекать почтенную публику 15 ) Потом переходим на последний из них и создаем копию ключевого кадра с помощью клавиши F6. Правой клавишей мышки создаем еще одну анимацию Motion tween. Увеличиваем ее длительность до 55 кадров и в последнем кадре трансформируем занавес в обратную сторону (закрываем сцену). Опять создаем после последнего кадра пустой ключевой (F7) и копируем в него занавес из последнего кадра. Вставляем кадры (допустим опять 20 или 30) — это время в течение которого занавес будет закрыт.

Создаем 4-й слой, называем его "Lambriken". Располагаем на нем наш ламбрикен. Переходим на последний кадр анимации и в слоях Lambriken и Scena нажав клавишу Ctrl отмечаем мышкой кадры. Отпускаем Ctrl и жмем F5. Тем самым мы увеличили время существования фона и ламбрикена на все время действия нашего ролика.

Всё. Жмем Ctrl+Enter и любуемся:



В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
БродягаДата: Понедельник, 21.06.2010, 12:30 | Сообщение # 81
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Quote (Алена)
А примус я могу отрисовать тоже. Только покажите где он

Посмотри на Аннушкину аватару. Под ней стоит награда "Бронзовый примус". Мне вот такой нравится. Сможешь изобразить в векторе?


В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
АннушкаДата: Понедельник, 21.06.2010, 12:35 | Сообщение # 82
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Quote (Алена)
Только покажите где он

В наградах есть золотой 3 ЗДЕСЬ




Звания и титулы:
 
Награды: 9
МаргоДата: Понедельник, 21.06.2010, 12:35 | Сообщение # 83
Мастер

Админ
Репутация: 543
Сообщений: 4822
Бродяга, ай да спасибо, ай да огромное 10 Обязательно попробую... я давненько флеш не мучала 3
Замечательная у нас мастерская... настоящая 2 будем учиться и трудиться.
А насчёт примусов, какой у Алёны лучше получится, такой и возьмём 15
Кстати Алён, а ты где отрисовывашь картинки и в каком формате сохраняешь? 15
 
Награды: 1
АннушкаДата: Понедельник, 21.06.2010, 12:38 | Сообщение # 84
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Бродяга, задал ты нам работку, молодец! 11



Звания и титулы:
 
Награды: 9
БродягаДата: Понедельник, 21.06.2010, 12:46 | Сообщение # 85
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Марго, я просил Алену создавать векторные картинки. Так что рисует Алена в Corel Draw, а сохраняет в формате Adobe Illustrator. Флеш знает этот формат.

В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
АленаДата: Понедельник, 21.06.2010, 12:46 | Сообщение # 86
Ученик

Смотритель
Репутация: 85
Сообщений: 431
ну, бронзовый/золотой - это мелочи уже цвет поменять.
Quote (Бродяга)
Сможешь изобразить в векторе?

да
Quote (Марго)
Кстати Алён, а ты где отрисовывашь картинки и в каком формате сохраняешь?

отрисовываю в Кореле. А сохраню в том формате, который нужен будет. Вам для показа пока что джипежки делаю


Не так важно то, что с нами происходит, как важно то, что мы делаем с тем, что с нами происходит

Сообщение отредактировал Алена - Понедельник, 21.06.2010, 12:47
 
Награды: 0
АннушкаДата: Понедельник, 21.06.2010, 13:41 | Сообщение # 87
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Quote (Бродяга)
К слою ламбрикена применяем стиль "Drop Shadow" (Размытая тень),

У меня CS4... Размытой тени нет 5 На скрине твоём ничего не видно - сделай скрин ВИДИМЫМ, чтобы можно было глядя подбирать нужное, пожалста 11




Звания и титулы:
 
Награды: 9
БродягаДата: Понедельник, 21.06.2010, 14:13 | Сообщение # 88
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Аннушка, увеличил. У меня Photoshop CS. Меню Layer -> Layer Style -> Drop Shadow

В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
АннушкаДата: Понедельник, 21.06.2010, 14:25 | Сообщение # 89
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Бродяга, спасибо 11



Звания и титулы:
 
Награды: 9
АннушкаДата: Понедельник, 21.06.2010, 14:34 | Сообщение # 90
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
На 1-м слое рисуем фон с радиальной растяжкой от серого (R=200, G=200, B=200) к черному (0, 0, 0).....
??? 5




Звания и титулы:
 
Награды: 9
БродягаДата: Понедельник, 21.06.2010, 14:37 | Сообщение # 91
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Аннушка, что непонятно?

В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
АннушкаДата: Понедельник, 21.06.2010, 14:39 | Сообщение # 92
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Бродяга, какой фон? Он же у нас есть (чёрный с кружочком)... Или нет? 5



Звания и титулы:
 
Награды: 9
БродягаДата: Понедельник, 21.06.2010, 14:40 | Сообщение # 93
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Аннушка, 15 а откуда он возьмется? Его надо нарисовать во Флеше.

В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
АннушкаДата: Понедельник, 21.06.2010, 14:54 | Сообщение # 94
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Бродяга, всё поняла, но слои упустила из виду... А фон сварганила со сценой 3 Начну сначала. 15



Звания и титулы:
 
Награды: 9
БродягаДата: Понедельник, 21.06.2010, 16:04 | Сообщение # 95
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Quote (Аннушка)
А фон сварганила со сценой

Да можно и так. Это без разницы. Просто анимационный файл будет немножко больше по объему.


В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
АннушкаДата: Понедельник, 21.06.2010, 16:54 | Сообщение # 96
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Бродяга, опять я на два фронта... Ещё и автомобиль водить пытаюсь...
Хде команда?




Звания и титулы:
 
Награды: 9
БродягаДата: Понедельник, 21.06.2010, 17:36 | Сообщение # 97
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Quote (Аннушка)
Хде команда?

Дык наверное они еще и работой какой-то занимаются 15

И как у тебя с занавесом получается?


В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
АннушкаДата: Понедельник, 21.06.2010, 17:39 | Сообщение # 98
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Quote (Бродяга)
И как у тебя с занавесом получается?

Двигается уже... в одну сторону 3 Давно не занималась и ужасно устала... всё забыла, что не знала

Quote (Бродяга)
Дык наверное они еще и работой како-то занимаются

... ага... это я бездельница 5




Звания и титулы:
 
Награды: 9
МаргоДата: Понедельник, 21.06.2010, 20:24 | Сообщение # 99
Мастер

Админ
Репутация: 543
Сообщений: 4822
Я прошу прощения, но мне нужны подсказки именно по Фотошопу, я там совсем не работаю, поэтому помогите мне с инструментами:
Для начала берем Аннушкин занавес и выделяем ламбрикен
Чем выделяем, каким инструментом?
Вырезаем его на отдельный слой
Чем вырезаем?
Вы меня простите, я сейчас запомню и больше не буду задавать таких дурацких вопросов 5

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

Как толкьо пойму как всё это вырезать, приступлю к флешевой части.
Вот такой я ученик... блин 3

 
Награды: 1
БродягаДата: Понедельник, 21.06.2010, 21:18 | Сообщение # 100
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Quote (Бродяга)
Для начала берем Аннушкин занавес и выделяем ламбрикен

Quote (Марго)
Чем выделяем, каким инструментом?

Жанна, есть несколько инструментов выделения. Попробуй для начала воспользоваться "Лассо".

Если чуть-чуть дольше подержать нажатую мышку на инструменте лассо -- откроется панель выбора. Есть три вида лассо: рисование от руки, полигональное лассо (рисование прямыми линиями) и магнитное. Сейчас рекомендую в данном случае полигональное лассо. Кликаешь мышкой в какую нибудь точку, немножко перемещаешь мышку, кликаешь еще раз (между этими точками протянется прямая линия, перемещаешь мышку еще дальше по контуру ламбрикена и снова кликаешь. Чем короче отрезки -- тем плавнее будет изгиб. Постепенно проходишь по всему контуру ламбрикена и подходишь к началу. Замкнуть контур тебе поможет клавиша Ctrl+клик мышкой.

Quote (Марго)
Чем вырезаем?

Когда ты закончишь выделение зоны нажми Ctrl+J и выделенный участок скопируется на новый слой.

Quote (Марго)
и, вырезав среднюю часть, штампом дорисовал верх

Инструмент "Штамп" (Clone Stamp Tool) инструмент клонирования. Т.е. он копирует часть картинки, которая находится "под прицелом".

Для начала выбираешь инструмент, нажимаешь Alt, и не отпуская его кликаешь по точке, откуда ты хочешь копировать. Затем отпускаешь Alt и мышкой нажимаешь на участок куда ты хочешь скопировать. Если не отпускать мышку и попытаться рисовать, то "прицел" тоже будет смещаться параллельно кисти.


В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
Форум » Adobe Flash » Adobe Flash » Рисуем рекламный банер Мастерклуба (Командная работа во Флеш. Приглашаются все желающие.)
Поиск:

Посетители дня
Посетители:
Последние сообщения · Одноклубники · Правила форума · Поиск · RSS
Приветствую Вас Гость | RSS Главная | Рисуем рекламный банер Мастерклуба - Страница 4 - Форум | Регистрация | Вход
Сайт управляется системой uCoz
Раскрутка сайтов