ПеРина:
всем, привет) я принесла кое-что из последних домашних заданий...
...
curling-sue:
» ФШкола. Тема 5. Анимация. Дым и пар.
Итак, дорогие девушки) Начинаем семестр анимации
Скажу сразу, анимация дело нелегкое, но очень занимательное

. Главное правило анимации - это целесообразность. У вас есть картинка девушки и душа просит блесток на задний фон. *дзинь* Задание провалено

. Зачем? Если вы не можете ответить на этот вопрос, то скорее всего анимация в этом случае не нужна. У анимации должен быть смысл. Вы хотите оживить картинку, вдохнуть в статику немного жизни, а может анимация поможет вам рассказать историю и воплотить свою задумку в жизнь? Отлично! Урок усвоен)
С разрешения Morah, вашему вниманию представляются статьи из серии "Парад Монстров". Монстров анимации или как делать нельзя
Парад монстров. Выпуск №1
Парад монстров. Выпуск №2
Парад монстров. Выпуск №3
Парад монстров. Выпуск №4
Парад монстров. Выпуск №5
Тут все очень здорово написано. Иногда становится очень жаль, что в свое время мне не довелось почитать что-то подобное прежде, чем садиться за анимацию.
Итак, вы прочитали все это и все еще упрямо смотрите на меня, горя желанием изучать анимацию? Великолепно!))) Тогда, полный вперед.
Урок для всех желающих: Результаты я жду в этой теме, НО, огромная просьба сохранять PSD работы, чтобы я могла посмотреть где и что не так и наглядно объяснить вам (PSD можно присылать мне лично)
Анимация дыма и пара
На нашем форуме есть урок для данного эффекта, но делается он в совершенно другой программе(Fanta Morph). На мой взгляд, прежде, чем переходить в другую программу, надо узнать способности самого фотошопа. На просторах интернета я нашла интересный
урок, но мне он показался трудным, один шаг у меня так и не получился в силу непонятных мне причин. В тот момент когда пар повалил у меня из ушей, я сделала все по своему, поэтому представляю вам мою версию велосипеда

, оставляя все права на эту задумку у автора

(убираю текст и скриншоты под спойлер)
Открываем наш фотошоп, и вызываем окно анимации, если оно у вас не открыто, все волшебство происходит именно здесь. Для этого нажимаем
Окно>Анимация (Window> Animation).
Шаг 1. Открываем любое подходящее изображение в фотошопе. Я взяла девушку с сигаретой (банально, но зато все видно). Выбирая изображение, помните о том, что дым должно быть видно, поэтому постарайтесь, чтобы никакие лишние объекты не препятствовали этому. Я взяла эту картинку:
Шаг 2. Нам нужно загрузить кисти дыма. Вы можете найти их самостоятельно в интернете. Я качала их отсюда
Кисти.Дым, но советую найти коллекцию побольше.
Нажимаем на панели справа инструмент
Кисть(Brush)
и выбираете папку, в которую сохранили скачанные кисти
Шаг 3. У нас есть картинка. Создаем новый слой

и к нему же слой-маску
Должно получится так:
Слой-маска у нас белого цвета. Нужно перекрасить ее в черный цвет. Для этого выбираем инструмент
Заливка (Paint Bucket), а ниже выставляем черный цвет

. Нажимаем на СЛОЙ-МАСКУ в "Слоях" и щелкаем по нашей картинке инструментов заливка. Получаем такой результат:

.
Выбираем инструмент
Кисть(Brush), меняем цвет на с черного на белый и на СЛОЙ-МАСКЕ рисуем наш контур дыма (отрегулируйте кисть по размеру, она должна быть меньше, чем основной дым). Получится должно так:
Шаг 4. У нас есть белый контур нашего дыма. Это некая граница, по которой будет двигаться наш дым, но пока наша маска включена, на картинке мы его не видим. Создаем теперь основной дым. Берем ту же кисточку (немного увеличиваем ее размеры в сравнении с дымом на маске), кликаем на слой, а НЕ на маску и нажимаем. Получается наш дым) Примерно так:
Половина пути пройдена. Это было совсем несложно). Теперь переходим к самому интересному)
Шаг 5. Копируем наш слой с дымом. Для этого выделяем его и нажимаем Ctrl+J. В копии нажимаем значок

, тем самым отделяя слой от маски(чтобы двигать наш дымок). Вот так:
Зажимаем клавишу Shift и кликаем мышкой на маски слоя(на оба). Они выключатся и на них появится красный крест. А наш дым теперь отчетливо виден.
Следим, чтобы копии Слоя 1 выла выделена основа, а НЕ маска, нажимаем инструмент

и тащим наш дым вниз(строго вниз, для этого лучше всего используйте стрелки на клавиатуре), чтобы 2 дымка сошлись на стыке. Вот так:
Шаг 6. Скопируем наш "Слой 1 копия"(Ctrl+J) . Берем маску с "Слой 1 копия" и тащим его на "Фон". После этого "Слой 1 копия 2" можно удалить. Получаем такую картинку:
Щелкаем по Слою 1 и, зажимая клавишу Ctrl, по слою "Слой 1 копия". У нас должны выделиться два слоя. Переходим в Слои>Объединить слои (Layer > Merge Down) и перетаскиваем слой маску с Фона на получившийся слой
Шаг 7. Анимация.
Убедитесь, что в окне анимации на первом кадре у вас выставлено время 0,1, а ниже "Постоянно", для бесконечной цикличности нашей анимации.
Выключаем нашу маску (Shift и нажимаем на нее), это позволит нам видеть дым.
на первом кадре оставляем все так, как есть. В окне Анимации нажимаем

и получаем наш второй кадр. С ним мы и будем работать. Нажимаем на наш дым (не на маску) и тянем дым вверх, чтобы один виток дыма сменился на второй, который мы поставили ниже. Так:
Включаем обратно нашу слой маску(на обоих кадрах) и возвращаемся к нашему первому кадру.
Нажимаем

"Tween" (создание промежуточных кадров), например 20 или 25, на ваше усмотрение. Данная функция позволяет создать плавый переход от первого кадра ко второму. Нажимаем плей и любуемся))) Наш дым готов). Можно сделать его менее ярким, поиграв с прозрачностью на панели "Слои"
Для того, чтобы сохранить работу нажимаем Файл>Сохранить для Web и устройств и выставляем следующие параметры
Дерзайте, спрашивайте. У меня эффект занял от силы 5 минут. Он простой, а написано много, потому что я попыталась сделать его максимально подробным для новичков. Данный эффект можно применить для пара из кружки, дыма из ушей, для анимации паровоза или капящего чайника, а может и дымящейся кружки. Используйте свою фантазию по максимуму

. Надеюсь, что урок понятен и вдохновит вас на прекрасные работы

. Я же жду ваших результатов
Мой результат:
...
Аquamarinе:
Я уже делала такую анимацию, не знаю каким чудом, но вся таки все получилось
Обязательно все ещё раз посмотрю, и повторю заново.
...
juli:
Очень интересный, а главное доступный урок, спасибо!
Все получилось с первого раза, правда ничего красивого и достойного не получилось даже с 10-го))) Но с каждой тренировкой все лучше)
У меня вопрос по уроку, не дает покоя деталь:
Там где подчеркнуто ведь имеется в виду слой 1 копия
2 Верно?
Немного зацикливаюсь на этом))
...
curling-sue:
Девочки, вы только не обижайтесь на мои комментарии
Ксения, буду ждать)
Джули, хорошо, что уже что-то получается) Но что-то там пошло не так... видимо, когда ты двигаешь сам дым на втором кадре) Нет зацикленности. Это второе правило анимации. Работа не должна визуально иметь начало и конец, должно создаваться ощущение бесконечной анимации, за редким исключением, конечно.
Да) Моя ошибка

Слой 1 копия 2) Цель в том,чтобы сохранить нашу масочку, потому как при слиянии слоев она пропадает). Джули, пришли мне, пожалуйста PSD работы (Файл-Сохранить как-и выбираем формат PSD) на почту, я посмотрю, может увижу где именно дымок встает, поправлю, и объясню) Так намного продуктивнее

Молодец, что учишься
Если все пойдет хорошо и быстро, могу каждую неделю давать что-то интересное) Главное - дерзайте
...
Кармен:
Всем привет!
Даша, большое спасибо за урок!
Немного споткнулась на шаге 3.
...
Зоя:
Делала для наших леди. Решила попробовать первый раз эффект дыма у меня получилось со второго раза.
...
juli:
curling-sue писал(а):Девочки, вы только не обижайтесь на мои комментарии
Ксения, буду ждать)
Джули, хорошо, что уже что-то получается) Но что-то там пошло не так... видимо, когда ты двигаешь сам дым на втором кадре) Нет зацикленности. Это второе правило анимации. Работа не должна визуально иметь начало и конец, должно создаваться ощущение бесконечной анимации, за редким исключением, конечно.
Да) Моя ошибка

Слой 1 копия 2) Цель в том,чтобы сохранить нашу масочку, потому как при слиянии слоев она пропадает). Джули, пришли мне, пожалуйста PSD работы (Файл-Сохранить как-и выбираем формат PSD) на почту, я посмотрю, может увижу где именно дымок встает, поправлю, и объясню) Так намного продуктивнее

Молодец, что учишься
Если все пойдет хорошо и быстро, могу каждую неделю давать что-то интересное) Главное - дерзайте

К сожалению, про PSD я напрочь забыла((( Но я и не планировала останавливаться на выложенной работе, ясно было, что она ужасная. Я ж говорю - урок поняла, а вот красиво и естественно сделать - не получается((( Буду пробовать еще. На критику никогда не обижаюсь
...
Izobella:
Уф, еле дополз до этой темы)
По 4 теме буду должником))) Текст про Лондон попытаюсь ближе к выходным сделать)
Даша, спасибо, что взялась учить нас анимации) это здорово!))
По мне так она дергается при переходе с последнего кадра на первый) или может я что-то не так делала)
или может то уже мой глаз дергается)) ...
Dizel:
Ыыы, я делала раз пять
И всё равно не ясно до какого момента нужно поднимать дым, может я что-то не то делаю, но у меня двигается весь дым, и я как-то теряюсь, как его так поднять, чтобы получилось естественное движение как у тебя
...
niklasss:
Тоже решила пофотошопить))

Да и с дымом и паром у меня бывают проблемы в анимации.Хоть руку набью))
Даша, спасибо за урок!
Dizel писал(а):Д/з анимация

Как однако сошлось))
Алена, тебе огромнейшее спасибо

, что несмотря на нас, прогульщиков

, выкладываешь интересную информацию и уроки.

Потихоньку делаю все, но реал не всегда позволяет.Но я с вами!
...
ПеРина:
всем, вечер добрый)
принесла результат, но буду переделывать, не нравится как дергается(
Ой, все, кажется, я поняла ошибку... Я опустила дым, а надо было поднять((( но мигание не пойму из-за чего получилось..
еще с чашкой, но тоже не в восторге(
...
juli:
ПеРина писал(а):Ой, все, кажется, я поняла ошибку... Я опустила дым, а надо было поднять((( но мигание не пойму из-за чего получилось..
еще с чашкой, но тоже не в восторге(
Так ведь в уроке сказано, сначала опустить, потом поднять...
Цитата:тащим наш дым вниз(строго вниз
...
Nimeria:
Всем привет!
Принесла домашку по анимации

Тренировалась, переделывала, но всё равно недовольна
...
curling-sue:
*разгребая завалы*
ПСД получила, сегодня всем все напишу в личку, кто просил
Вот сижу и... честно, понятия не имею почему дым почти у всех дергается... Где-то ошибка. И скорее всего в движении кистей.
Дым рисуем дважды друг за дружкой по вертикали... он не должен обрываться, он должен за рамки нашей картинки выходить, аккуратнее сливаем слои. Сегодня еще скринов сделаю, будем бороться с рывками) По всем коротко пробегусь:
Вика, красиво) Дергается правда... пришлешь ПСД?) А так я бы только посоветовала, чтобы пар пониже был, так реалистичнее будет, а то он слишком высоко взвивается)
Лена, все хорошо, только, я бы прозрачность сделала поменьше, чтобы он был не таким явным
Джули, посмотрю твоё ПСД и отпишусь в Личку)
Элла, красиво

) Все нравится и по прозрачности... Но да, дергается...
Ева, я пришлю тебе свое ПСД, скинешь мне свою почту в ЛС? Посмотришь как я двигала. А так, я тобой горжусь) Хорошо выйдет, как уберем "рваность" дыма.
Лена, не дергается! *облегченно вздохнула* Я думаю, может я уже что не так в уроке написала. Отлично! Из моих придирок - можно дым поближе нарисовать. Чтобы между первым дымом и тем, что идет ниже, поменьше расстояние было, чтобы дым не заканчивался. Но это так, на мои фломастеры) а у каждого они свои
ПеРина, Ира, вот чашка же хорошо! Единственное, видно, что на одном кадре ручкой сдвинула дым на пару пикселей. А так все верно. А не нравится тебе результат по двум причинам: 1) для этого урока бы прозрачность сделать меньше на панельке слоев, чтобы из кружки шел именно пар, а не густой дым. При желании его можно размыть (Фильтры>размытие по Гаусу), а так, технически все здорово, но можно попробовать другие кисти

Ты молодец)
Nimeria, Наташа, очень здорово в плане техники) Посоветовала бы тоже самое, что и Ире. Уменьшить прозрачность и размыть. Или выбрать картинку, чтобы дым доходил до ее края. Как у меня на образце, так не будет видно где заканчивается дым.
_______________
Итог: девочки, отпишитесь все, кому нужно мое ПСД. Это поможет посмотреть до коли я двигала этот злосчастный дым)) И все желающие могут отправить свои ПСД мне на почту: curling-sue@mail.ru, найду ошибку и скажу как исправить
Очень рада, что вы пробуете

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