• Авторизация


Анимация текста. 22-11-2009 12:59 к комментариям - к полной версии - понравилось!


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

В результате у нас получится такая анимация текста:
[показать]

Я взяла готовую заготовку для баннера Отсюда:
[468x60]

Такие заготовочки легко делать самим, но если мы учимся, то почему бы не воспользоваться готовыми, тем паче нам их любезно предлагают)))


Открываем картинку в фотошопе.
Можно щелкнуть правой клавишей по сохраненной картинке и выбрать "открыть с помощью photoshop", так:
[показать]

Как видим у нас гифка, в палитре слоев - Index:
[показать]

Переводим в RGB. Так:
[показать]
(у кого русский фотошоп, - смотрим по скринам.)

Результат:
[показать]

Выбираем инструмент "Текст". Т.к. баннер у нас горизонтальный, - текст, само собой, тоже выбираем горизонтальный:
[показать]

Настраиваем текст. Выбираем шрифт, ставим размер (я ввела вручную 40, чтобы точно попасть в размер заготовки - синяя стрелка), проверяем остальные настройки по красным стрелкам, и выбираем цвет любой, контрастный, чтобы текст был виден (зеленая стрелка):
[показать]

Нажимаем Caps, чтобы писать заглавными буквами и щелкаем по файлу примерно здесь:
[показать]

Пишем. У меня надпись "СПАСИБО!":
[показать]

Растрируем текстовый слой. В палитре слоев щелкаем правой клавишей по слою и выбираем "растрировать":
[показать]

Давайте отцентрируем слой с текстом. Выбираем инструмент "Перемещение":
[показать]

Теперь с зажатой клавишей Shift щелкаем по слою с текстом и слою с фоном (в палитре слоев, например). Как видим, у нас выделились синим оба слоя, т.е. оба активны:
[показать]

Теперь щелкаем вверху сюда и сюда (по стрелкам), выравниваем слои относительно вертикального и горизонтального центров:
[показать]

Стало как-то аккуратнее:
[показать]

Применяем к тексту какой нибудь красивый стиль. (Стили я грузила, посмотрите В этом разделе.
Опишу последовательность действий.
1. Скачиваем стиль.
2. Разархивируем.
3. (простейшее, конкретно для данного урока, чтобы не углубляться и вас не путать) затаскиваем стиль в окно фотошопа просто мышкой затаскиваем Стиль!, т.е. файл ASL. Вот я ташу мышкой стиль с рабочего стола в окно фотошопа:
[показать]

Двойной клик в палитре слоев по текстовому слою, сюда:
[показать]

Теперь в открывшемся окне стилей слоя, кликаем сюда:
[показать]

Как видим все новые, "затащенные")) стили у нас появились:
[показать]

Кликаем по любому из стилей и подбираем подходящий (синие стрелка). Обязательно ставим галочку на "Превью" (красная стрелка). Когда нас все устроит жмем "ОК":
[показать]

Теперь не испугайтесь!!!! На самом деле новичков жутко пугает слово маска... Но все просто. Повторите последовательно мои действия и все получится. Вариантов сделать "печатающийся текст" масса, но для данной картинки и для этого урока , на мой взгляд, подойдет именно этот способ. Другие способы рассмотрим позже. Приступаем? :-)

Стоя на слое с текстом кликаем на этот значок в палитре слоев:
[показать]

Результат:
[показать]

Кликаем по цепочке, чтобы "отделить" маску от текста:
[показать]

Результат:
[показать]

Кликаем по маске, чтобы работать именно с ней. Она должна стать как бы обведенной в прямоугольник (если у вас обведен текст, кликните еще раз по маске). Должно получиться так:
[показать]

Берем инструмент прямоугольное выделение:
[показать]

Настройки (сверху). И выделяем текст, чтобы он как бы полностью оказался в этом прямоугольном выделении. Так:
[показать]

Теперь "Редактирование", "Заливка", так:
[показать]

В открывшемся окне выбираем "Черный" и жмем ОК:
[показать]

Результат такой. Щелкаем правой клавишей по файлу и снимаем выделение:
[показать]

Все. Подготовительный этап закончен. Переходим к анимации картинки. У кого версия фотошопа до CS 2 переходим в Image Ready, а остальные просто открывают окно анимации:
[показать]

Способ первый (быстрый. :-) )
Выбираем инструмент "Перемещение":
[показать]

Кликаем сюда в палитре анимации:
[показать]

Результат:
[показать]

Теперь, стоя на маске (как мы и стояли) с зажатой клавишей Shift двигаем нашу маску (черную) вправо (Профессионалы советуют двигать стрелками на клавиатуре). Так примерно:
[показать]

Должно получиться так:
[показать]

Щелкаем по первому кадру в палитре анимации, зажимаем клавишу Ctrl и щелкаем по второму кадру. У нас оба кадоа выделились синим цветом. Так:
[показать]

Нажимаем на этот значок:
[показать]

В открывшемся окне проставляем кол-во промежуточных кадров и проверяем остальные настройки:
[показать]

Получилось:
[показать]

Нажимаем на этот треугольничек:
[показать]

Проставляем (сорри, не знаю, как в русском, но типа "всегда"):
[показать]

С зажатой клавишей Ctrl кликаем по всем кадрам, кроме последнего, в палитре анимации. Они выделяются синим цветом. Затем кликаем на этот треугольничек, чтобы проставить время, длительность всех выделенных кадров:
[показать]

Я поставила "0,2", можно выбрать "Другое" и проставить вручную:
[показать]

Теперь кликаем по последнему кадру и ставим его длительность (я проставила 1 секунду):
[показать]

Для просмотра анимации щелкаем по этому значку:
[показать]

Вышло:
[показать]

Сохраняем файл в формате gif. В версиях с CS 3 идем в "Файл" > "Сохранить для web":
[показать]

В предыдущих версиях идем в "Файл . > Сохранить оптимизированный как"

Настройки я поставила такие. Просто повторите пока. Потому как все эти настройки требуют достаточно длительного и нудного описания:
[показать]

Немного объясню. Маску мы создавали, чтобы перекрывать движущимся черным прямоугольником только текст, не задевая цветочки и все прочее. Это очень удобно во многих случаях. И этот прием, как я считаю, следует знать. Да и вообще я делаю много "лишних" движений.. Но, мне кажется, вам пригодится иакое знакомство с возможностями фотошопа.. Если нет, - пишите)) Буду сокращать)))
Собственно пока все. Продолжение следует.)) Уроков по анимации текста, надеюсь, будет много)) Всем удачи)))
вверх^ к полной версии понравилось! в evernote
Комментарии (101): вперёд» последняя»
Kapitoshka_N 22-11-2009-13:01 удалить
Inmira, доброе утро, Иннуличка :))) Спасибо за урок !!! Буду осваивать :)))) Прекрасного настроения!!!
Inmira 22-11-2009-13:07 удалить
Ответ на комментарий Kapitoshka_N # Kapitoshka_N, привет, солнце))) спасибо)) и тебе замечательного дня и успехов)))
Inmira 22-11-2009-13:17 удалить
Ответ на комментарий лика1009 # лика1009, всегда пожалуйста) удачи)
Nataly_Nataliya 22-11-2009-13:20 удалить
Спасибо огромное за урок!!!! Буду учиться!!!
Svetlana_Gridina 22-11-2009-13:25 удалить
Спасибочки большое.
A-lekssa 22-11-2009-13:30 удалить
Добрый день, Инна! Большое спасибо за урок! Немного страшновато приступать к освоению, но желание сделать такую же красивую картинку очень большое! :-) Отличных тебе выходных!
Inmira 22-11-2009-13:32 удалить
Ответ на комментарий Nataly_Nataliya # Nataly_Nataliya, удачи))) если где-то, что-то не пойдет - сразу пиши) разберемся) чудесного дня тебе)
Inmira 22-11-2009-13:32 удалить
Ответ на комментарий Svetlana_Gridina # Svetlana_Gridina, всегда пожалуйста) прекрасного настроения)
Inmira 22-11-2009-13:33 удалить
Ответ на комментарий A-lekssa # A-lekssa, солнце, не страшно) все просто) главное - точно по пунктикам) и все получится) пиши, если вдруг проблемы)))
спасибо) и тебе замечательного дня)
kru4inka 22-11-2009-13:37 удалить
Спасибо. Но за фотошоп я даже браться боюсь пока.
Inmira 22-11-2009-13:39 удалить
Ответ на комментарий kru4inka # kru4inka, ой зря))) это просто пугающее название.. в инете бродят слухи, что начинать надо с чего попроще(( неправда все)) в фотошопе все предельно просто и можно сделать массой способов) даже банальным тыком) чес. пионерское)
Спасибо за урок, попробую сделать!
Kapitoshka_N 22-11-2009-14:05 удалить
Ответ на комментарий Inmira # Inmira,
Ledy_OlgA 22-11-2009-14:07 удалить
Иннуль, спасибо, все очень понятно!
[470x60]
Ledy_OlgA 22-11-2009-14:07 удалить
Ответ на комментарий Ledy_OlgA # ссылка на баннеры не открывается(( пришлось делать самой)))
TALA_SNG 22-11-2009-14:09 удалить
Дело у меня за малым: найти где-то "фотошоп" на русском, загрузить и..... Спасибо, очень!!! ценные даёте всегда консультации.
[334x345]
Спасибо за уроки! Конечно же очень хочется все это уметь делать!
svekrucha 22-11-2009-14:21 удалить
Добрый день!Спасибо за замечательный урок, всё очень понятно!!!Хорошего настроения и удачного дня!
 (200x200, 8Kb)
Инночка, добрый день,солнышко!!!! А если я растрировала текст, то мне уже не поменять шрифт?
VIVIEN-VIVIEN 22-11-2009-15:39 удалить
Инночка! Ура! У меня получилось!
[468x60]
Огромное спасибо за урок!
Дарина423 22-11-2009-15:41 удалить
Инночка, какая же ты молодец!!! Я не перестаю тобой восхищаться....а ещё сколько у тебя можно найти ссылок для скачивания для шопа....а сама сегодня села искать и ничего хорошего не нашла....а у тебя Клндайк...влезу к тебя и от тебя начну....спасибо, моя хорошая!!!
LebWohl 22-11-2009-15:43 удалить
Иннуль приветик, спасибо за урок, ну много не знала, текст с маской это точно, и вот это тоже...выравниваем слои относительно вертикального и горизонтального центров,вот что значит профессионалы!
46655245_010709kissing_kitten2 (99x153, 53Kb)
УРААААААААААААААААААААААА!!!!ПОЛУЧИЛОСЬ С МАСКОЙ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
[показать]


[показать]
Inmira 22-11-2009-17:07 удалить
Ledy_OlgA, Марина_Тигра, девочки - замечательно)) я об этом еще не писала, а вы сделали)))) напишу завтра) Спасиб большой) я жутко рада))))
Inmira 22-11-2009-17:08 удалить
Ответ на комментарий VIVIEN-VIVIEN # VIVIEN-VIVIEN, прелесть)) поздравляю)) умничка))))
Ttaa 22-11-2009-17:08 удалить
Добрый вечер, Inmira, я новичок, нткогда не пробовала раньше фотошоп. Очень хорошо разъясняете!!! я успешно дошла до шага, где нужно выбрать "Анимация". Может ли быть, что в моём фотошопе этого НЕТ? я не нашла!!! у меня на русском языке... так жаль
Inmira 22-11-2009-17:09 удалить
Ответ на комментарий Марина_Тигра # Марина_Тигра, да, уже не поменять) но можно нажать Ctrl+Z и вернуться на несколько действий назад) или в палитре истории встать на нужное действие, до растрирования)))


Комментарии (101): вперёд» последняя» вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Анимация текста. | Inmira - Дневник Inmira | Лента друзей Inmira / Полная версия Добавить в друзья Страницы: раньше»