Анимация текста.
22-11-2009 12:59
к комментариям - к полной версии
- понравилось!
вверх^
к полной версии
понравилось!
в evernote
Текст скрыт для удобства комментирования
Ответ на комментарий #
Анатолий_Щепкин, назовите не найденные кнопки, пожалуйста, - поищем вместе)
УкраИнночка
23-11-2009-12:54
удалить
sophy-catherine
23-11-2009-13:14
удалить
Cпасибо за подробное разъяснение! Все очень интересно! 
Спасибо большое за урок!:good: Давно хотела научиться.
Утащу его к себе.
Утащу его к себе.
23-11-2009-15:24
удалить
Спасибо, Инна , за урок. Но, пока в ФШ - всё выходит. А когда сохраняю - нет. Вопрос - надо ли слои соединять в конце работы????
Вздохнув с грустью пишу...Все складываю себе к норку, складываю, а вот сесть и разобраться все руки не доходят. И с такой завистью (с чистой завистью) смотрю на девочек,какие все умницы. И как ты все доходчиво объясняешь, но вот как бы сутки удлинить... Может просыпаться раньше часа на 3-4...вдруг удлинятся :)) Спасибо, тебе душечка! Удачи и счастья!
[показать]
[показать]
Капелька44
23-11-2009-16:27
удалить
С великой благодарностью забираю твой урок и надеюсь последовать твоим вказивкам как только у меня появится фотошоп! Столько много всего, что мне, отъявленному чайнику, страшно браться. Но когда-то надо. Спасибо огроменное!
Ответ на комментарий #
Виктор_Марченко,неть) не надо соединять) надо созранять для web по моим настройкам.. когда у меня появился фотошоп CS3, Я ЧТО-ТО ОБ ЭТОМ ПИСАЛА.. ЧИЧАС НАЙДУ, ЗАПОЩУ И ССЫЛКУ СЮДА ЖЕ КИНУ...Сорри за капс)
если у тея CS2 и ниже, в тот же пост постараюсь скрины к ним добавить.. поищу)
если у тея CS2 и ниже, в тот же пост постараюсь скрины к ним добавить.. поищу)
Pessimist52
23-11-2009-17:09
удалить
Столько времени терять, чтобы сделать какую то шевелящуюся картиночку!
Лидия_Крапивина
23-11-2009-19:22
удалить
Спасибо! Очень хорошо расписано. Думаю, даже у меня получится повторить ))
Я еще чайник в дневнике, но благодаря таким классным учителям, думаю, что многому научусь. Большое спасибо за прекрасный урок.
ирина_попова_50
23-11-2009-23:17
удалить
какие вы все умные,надо у вас учиться.Спасибо 
Татьянка_Д
23-11-2009-23:18
удалить
Спасибо!!! Очень интересно!!!
Людмила_Казанцева
01-12-2009-07:23
удалить
Надо обязательно научиться. Спасибо!
НАДЕЖДА_БЫКОВСКИХ
24-01-2010-00:37
удалить
Спасибо за урок!!!:heart:
Исходное сообщение Inmira
Начнем учиться анимировать :-)
( 2-ой урок, продолжение, - ТуТ )
Сейчас будет простейший урок, чтобы понять общий механизм. Как анимировать. Ничего нового я не открою, но урок просят, значит он имеет право быть!
В результате у нас получится такая анимация текста:
Я взяла готовую заготовку для баннера Отсюда:
Такие заготовочки легко делать самим, но если мы учимся, то почему бы не воспользоваться готовыми, тем паче нам их любезно предлагают)))
Открываем картинку в фотошопе.
Можно щелкнуть правой клавишей по сохраненной картинке и выбрать "открыть с помощью photoshop", так:
Как видим у нас гифка, в палитре слоев - Index:
Переводим в RGB. Так:
(у кого русский фотошоп, - смотрим по скринам.)
Результат:
Выбираем инструмент "Текст". Т.к. баннер у нас горизонтальный, - текст, само собой, тоже выбираем горизонтальный:
Настраиваем текст. Выбираем шрифт, ставим размер (я ввела вручную 40, чтобы точно попасть в размер заготовки - синяя стрелка), проверяем остальные настройки по красным стрелкам, и выбираем цвет любой, контрастный, чтобы текст был виден (зеленая стрелка):
Нажимаем Caps, чтобы писать заглавными буквами и щелкаем по файлу примерно здесь:
Пишем. У меня надпись "СПАСИБО!":
Растрируем текстовый слой. В палитре слоев щелкаем правой клавишей по слою и выбираем "растрировать":
Давайте отцентрируем слой с текстом. Выбираем инструмент "Перемещение":
Теперь с зажатой клавишей Shift щелкаем по слою с текстом и слою с фоном (в палитре слоев, например). Как видим, у нас выделились синим оба слоя, т.е. оба активны:
Теперь щелкаем вверху сюда и сюда (по стрелкам), выравниваем слои относительно вертикального и горизонтального центров:
Стало как-то аккуратнее:
Применяем к тексту какой нибудь красивый стиль. (Стили я грузила, посмотрите В этом разделе.
Опишу последовательность действий.
1. Скачиваем стиль.
2. Разархивируем.
3. (простейшее, конкретно для данного урока, чтобы не углубляться и вас не путать) затаскиваем стиль в окно фотошопа просто мышкой затаскиваем Стиль!, т.е. файл ASL. Вот я ташу мышкой стиль с рабочего стола в окно фотошопа:
Двойной клик в палитре слоев по текстовому слою, сюда:
Теперь в открывшемся окне стилей слоя, кликаем сюда:
Как видим все новые, "затащенные")) стили у нас появились:
Кликаем по любому из стилей и подбираем подходящий (синие стрелка). Обязательно ставим галочку на "Превью" (красная стрелка). Когда нас все устроит жмем "ОК":
Теперь не испугайтесь!!!! На самом деле новичков жутко пугает слово маска... Но все просто. Повторите последовательно мои действия и все получится. Вариантов сделать "печатающийся текст" масса, но для данной картинки и для этого урока , на мой взгляд, подойдет именно этот способ. Другие способы рассмотрим позже. Приступаем? :-)
Стоя на слое с текстом кликаем на этот значок в палитре слоев:
Результат:
Кликаем по цепочке, чтобы "отделить" маску от текста:
Результат:
Кликаем по маске, чтобы работать именно с ней. Она должна стать как бы обведенной в прямоугольник (если у вас обведен текст, кликните еще раз по маске). Должно получиться так:
Берем инструмент прямоугольное выделение:
Настройки (сверху). И выделяем текст, чтобы он как бы полностью оказался в этом прямоугольном выделении. Так:
Теперь "Редактирование", "Заливка", так:
В открывшемся окне выбираем "Черный" и жмем ОК:
Результат такой. Щелкаем правой клавишей по файлу и снимаем выделение:
Все. Подготовительный этап закончен. Переходим к анимации картинки. У кого версия фотошопа до CS 2 переходим в Image Ready, а остальные просто открывают окно анимации:
Способ первый (быстрый. :-) )
Выбираем инструмент "Перемещение":
Кликаем сюда в палитре анимации:
Результат:
Теперь, стоя на маске (как мы и стояли) с зажатой клавишей Shift двигаем нашу маску (черную) вправо (Профессионалы советуют двигать стрелками на клавиатуре). Так примерно:
Должно получиться так:
Щелкаем по первому кадру в палитре анимации, зажимаем клавишу Ctrl и щелкаем по второму кадру. У нас оба кадоа выделились синим цветом. Так:
Нажимаем на этот значок:
В открывшемся окне проставляем кол-во промежуточных кадров и проверяем остальные настройки:
Получилось:
Нажимаем на этот треугольничек:
Проставляем (сорри, не знаю, как в русском, но типа "всегда"):
С зажатой клавишей Ctrl кликаем по всем кадрам, кроме последнего, в палитре анимации. Они выделяются синим цветом. Затем кликаем на этот треугольничек, чтобы проставить время, длительность всех выделенных кадров:
Я поставила "0,2", можно выбрать "Другое" и проставить вручную:
Теперь кликаем по последнему кадру и ставим его длительность (я проставила 1 секунду):
Для просмотра анимации щелкаем по этому значку:
Вышло:
Сохраняем файл в формате gif. В версиях с CS 3 идем в "Файл" > "Сохранить для web":
В предыдущих версиях идем в "Файл . > Сохранить оптимизированный как"
Настройки я поставила такие. Просто повторите пока. Потому как все эти настройки требуют достаточно длительного и нудного описания:
Немного объясню. Маску мы создавали, чтобы перекрывать движущимся черным прямоугольником только текст, не задевая цветочки и все прочее. Это очень удобно во многих случаях. И этот прием, как я считаю, следует знать. Да и вообще я делаю много "лишних" движений.. Но, мне кажется, вам пригодится иакое знакомство с возможностями фотошопа.. Если нет, - пишите)) Буду сокращать)))
Собственно пока все. Продолжение следует.)) Уроков по анимации текста, надеюсь, будет много)) Всем удачи)))
[500x500]
Интересно и просто получается с маской. Спасибо, Инночка, за такое подробное объяснение, где много тонкостей, о которых раньше не знала!
La-Perla_Margarita
19-02-2010-14:32
удалить
Вы сейчас не можете прокомментировать это сообщение.
Дневник Анимация текста. | Inmira - Дневник Inmira |
Лента друзей Inmira
/ Полная версия
Добавить в друзья
Страницы:
«позже
раньше»