Рисуем рекламный банер Мастерклуба
|
|
Бродяга | Дата: Воскресенье, 13.06.2010, 18:35 | Сообщение # 1 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
И так, перед нами стоит интересная и серьезная задача: создать банер, который будет рекламировать наш клуб. Для этого нам понадобится небольшой сценарий, подготовка картинок и объектов в других программах, и собственно говоря, анимация во Флеш. Хочу сразу уточнить, что делаем мы не рекламный ролик, а рекламный банер. Что это такое: это короткая анимация (максимум на 10-15 секунд) в которой отображается квинтессенсия (суть) того или иного сайта. Т.е. банер — это как обложка книги. Не стоит вываливать на обложку все содержание. Банер должен быть броским, в меру информативным, но не рассказывать от и до о ресурсе, на который ссылается. Главное -- заинтересовать человека. Если ему стало интересно — он кликнет по банеру и попадет к нам в клуб. Для начала нам нужен сценарий... 
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Бродяга | Дата: Суббота, 19.06.2010, 19:30 | Сообщение # 76 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Quote (Марго) Для баннера на ленту новостей на Главной это 450х300 Ну вот с самого большого и начнем. Анимация занавеса уже отрепетирована. Мне бы теперь Аленушку дождаться с ее Бегемотом. Когда одобрите эскиз — можна будет приступать к "фокусам" Бегемота на сцене. Да, дорогие художники, вы не забыли, что нужен еще цилиндр и примус? Кстати, о примусе, кто рисовал этот агрегат для наград в нашем клубе? Не сохранился ли он в более высоком разрешении? По-моему было бы стильно. 
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Аннушка | Дата: Воскресенье, 20.06.2010, 17:05 | Сообщение # 77 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Выбирай!
Звания и титулы:
|
|
|
|
Марго | Дата: Воскресенье, 20.06.2010, 22:48 | Сообщение # 78 |
Мастер
Админ
Репутация: 543
Сообщений: 4822
|
Тот кто рисовал, уже не нарисует, к сожалению. Думаю вариант Аннушки вполне подойдёт А можно узанть как делался занавес? Цель этой мастерской, не просто сделать баннер, а делать что-то сообща. Давайте будет делиться тем, КАК мы что либо делаем, в этом и есть смысл Мастерской. Заодно будем учиться и тренироваться, или повторять пройденное...
|
|
|
|
Алена | Дата: Понедельник, 21.06.2010, 11:33 | Сообщение # 79 |
Ученик
Смотритель
Репутация: 85
Сообщений: 431
|
Quote (Марго) Давайте будет делиться тем, КАК мы что либо делаем, в этом и есть смысл Мастерской. согласна. А примус я могу отрисовать тоже. Только покажите где он
Не так важно то, что с нами происходит, как важно то, что мы делаем с тем, что с нами происходит
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 12:24 | Сообщение # 80 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Quote (Марго) А можно узанть как делался занавес? Да конечно можно. Тут ничего особо сложного. Обрабатываем картинку в Фотошопе. Для начала берем Аннушкин занавес и выделяем ламбрикен. Вырезаем его на отдельный слой, а нижний удаляем. К слою ламбрикена применяем стиль "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. Это будет время, в течение которого занавес будет стоять в открытом положении (пока наш Бегемот будет развлекать почтенную публику ) Потом переходим на последний из них и создаем копию ключевого кадра с помощью клавиши 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. Это будет время, в течение которого занавес будет стоять в открытом положении (пока наш Бегемот будет развлекать почтенную публику ) Потом переходим на последний из них и создаем копию ключевого кадра с помощью клавиши F6. Правой клавишей мышки создаем еще одну анимацию Motion tween. Увеличиваем ее длительность до 55 кадров и в последнем кадре трансформируем занавес в обратную сторону (закрываем сцену). Опять создаем после последнего кадра пустой ключевой (F7) и копируем в него занавес из последнего кадра. Вставляем кадры (допустим опять 20 или 30) — это время в течение которого занавес будет закрыт. Создаем 4-й слой, называем его "Lambriken". Располагаем на нем наш ламбрикен. Переходим на последний кадр анимации и в слоях Lambriken и Scena нажав клавишу Ctrl отмечаем мышкой кадры. Отпускаем Ctrl и жмем F5. Тем самым мы увеличили время существования фона и ламбрикена на все время действия нашего ролика. Всё. Жмем Ctrl+Enter и любуемся:
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 12:30 | Сообщение # 81 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Quote (Алена) А примус я могу отрисовать тоже. Только покажите где он Посмотри на Аннушкину аватару. Под ней стоит награда "Бронзовый примус". Мне вот такой нравится. Сможешь изобразить в векторе?
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 12:35 | Сообщение # 82 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Quote (Алена) Только покажите где он В наградах есть золотой ЗДЕСЬ
Звания и титулы:
|
|
|
|
Марго | Дата: Понедельник, 21.06.2010, 12:35 | Сообщение # 83 |
Мастер
Админ
Репутация: 543
Сообщений: 4822
|
Бродяга, ай да спасибо, ай да огромное Обязательно попробую... я давненько флеш не мучала Замечательная у нас мастерская... настоящая будем учиться и трудиться. А насчёт примусов, какой у Алёны лучше получится, такой и возьмём Кстати Алён, а ты где отрисовывашь картинки и в каком формате сохраняешь?
|
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 12:38 | Сообщение # 84 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Бродяга, задал ты нам работку, молодец!
Звания и титулы:
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 12:46 | Сообщение # 85 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Марго, я просил Алену создавать векторные картинки. Так что рисует Алена в Corel Draw, а сохраняет в формате Adobe Illustrator. Флеш знает этот формат.
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Алена | Дата: Понедельник, 21.06.2010, 12:46 | Сообщение # 86 |
Ученик
Смотритель
Репутация: 85
Сообщений: 431
|
ну, бронзовый/золотой - это мелочи уже цвет поменять. Quote (Бродяга) Сможешь изобразить в векторе? да Quote (Марго) Кстати Алён, а ты где отрисовывашь картинки и в каком формате сохраняешь? отрисовываю в Кореле. А сохраню в том формате, который нужен будет. Вам для показа пока что джипежки делаю
Не так важно то, что с нами происходит, как важно то, что мы делаем с тем, что с нами происходит
Сообщение отредактировал Алена - Понедельник, 21.06.2010, 12:47 |
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 13:41 | Сообщение # 87 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Quote (Бродяга) К слою ламбрикена применяем стиль "Drop Shadow" (Размытая тень), У меня CS4... Размытой тени нет На скрине твоём ничего не видно - сделай скрин ВИДИМЫМ, чтобы можно было глядя подбирать нужное, пожалста
Звания и титулы:
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 14:13 | Сообщение # 88 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Аннушка, увеличил. У меня Photoshop CS. Меню Layer -> Layer Style -> Drop Shadow
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 14:25 | Сообщение # 89 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Бродяга, спасибо
Звания и титулы:
|
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 14:34 | Сообщение # 90 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
На 1-м слое рисуем фон с радиальной растяжкой от серого (R=200, G=200, B=200) к черному (0, 0, 0)..... ???
Звания и титулы:
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 14:37 | Сообщение # 91 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Аннушка, что непонятно?
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 14:39 | Сообщение # 92 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Бродяга, какой фон? Он же у нас есть (чёрный с кружочком)... Или нет?
Звания и титулы:
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 14:40 | Сообщение # 93 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Аннушка, а откуда он возьмется? Его надо нарисовать во Флеше.
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 14:54 | Сообщение # 94 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Бродяга, всё поняла, но слои упустила из виду... А фон сварганила со сценой Начну сначала.
Звания и титулы:
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 16:04 | Сообщение # 95 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Quote (Аннушка) А фон сварганила со сценой Да можно и так. Это без разницы. Просто анимационный файл будет немножко больше по объему.
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 16:54 | Сообщение # 96 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Бродяга, опять я на два фронта... Ещё и автомобиль водить пытаюсь... Хде команда?
Звания и титулы:
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 17:36 | Сообщение # 97 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Quote (Аннушка) Хде команда? Дык наверное они еще и работой какой-то занимаются И как у тебя с занавесом получается?
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|
Аннушка | Дата: Понедельник, 21.06.2010, 17:39 | Сообщение # 98 |
Мастер
Клубчанин
Репутация: 561
Сообщений: 4174
|
Quote (Бродяга) И как у тебя с занавесом получается? Двигается уже... в одну сторону Давно не занималась и ужасно устала... всё забыла, что не знала Quote (Бродяга) Дык наверное они еще и работой како-то занимаются ... ага... это я бездельница
Звания и титулы:
|
|
|
|
Марго | Дата: Понедельник, 21.06.2010, 20:24 | Сообщение # 99 |
Мастер
Админ
Репутация: 543
Сообщений: 4822
|
Я прошу прощения, но мне нужны подсказки именно по Фотошопу, я там совсем не работаю, поэтому помогите мне с инструментами: Для начала берем Аннушкин занавес и выделяем ламбрикен Чем выделяем, каким инструментом? Вырезаем его на отдельный слой Чем вырезаем? Вы меня простите, я сейчас запомню и больше не буду задавать таких дурацких вопросов и, вырезав среднюю часть, штампом дорисовал верх Вероятно это тоже потребуется пояснить, что значит штампом дорисовал... ещё раз прошу пардону, но готовых картинок вы не выложили а я с фотошопом не дружу, вот и приходится вас мучать. Как толкьо пойму как всё это вырезать, приступлю к флешевой части. Вот такой я ученик... блин 
|
|
|
|
Бродяга | Дата: Понедельник, 21.06.2010, 21:18 | Сообщение # 100 |
Умелец
Смотритель
Репутация: 283
Сообщений: 685
|
Quote (Бродяга) Для начала берем Аннушкин занавес и выделяем ламбрикен Quote (Марго) Чем выделяем, каким инструментом? Жанна, есть несколько инструментов выделения. Попробуй для начала воспользоваться "Лассо". Если чуть-чуть дольше подержать нажатую мышку на инструменте лассо -- откроется панель выбора. Есть три вида лассо: рисование от руки, полигональное лассо (рисование прямыми линиями) и магнитное. Сейчас рекомендую в данном случае полигональное лассо. Кликаешь мышкой в какую нибудь точку, немножко перемещаешь мышку, кликаешь еще раз (между этими точками протянется прямая линия, перемещаешь мышку еще дальше по контуру ламбрикена и снова кликаешь. Чем короче отрезки -- тем плавнее будет изгиб. Постепенно проходишь по всему контуру ламбрикена и подходишь к началу. Замкнуть контур тебе поможет клавиша Ctrl+клик мышкой. Quote (Марго) Чем вырезаем? Когда ты закончишь выделение зоны нажми Ctrl+J и выделенный участок скопируется на новый слой. Quote (Марго) и, вырезав среднюю часть, штампом дорисовал верх Инструмент "Штамп" (Clone Stamp Tool) инструмент клонирования. Т.е. он копирует часть картинки, которая находится "под прицелом". Для начала выбираешь инструмент, нажимаешь Alt, и не отпуская его кликаешь по точке, откуда ты хочешь копировать. Затем отпускаешь Alt и мышкой нажимаешь на участок куда ты хочешь скопировать. Если не отпускать мышку и попытаться рисовать, то "прицел" тоже будет смещаться параллельно кисти.
В тапера просьба не стрелять — лабает как умеет. Звания и титулы: Эрудит июня
|
|
|
|