3D-текст – идеальный вариант для оформления заголовков в видео. Приятная глазу иллюзия глубины моментально приковывает и удерживает внимание зрителя. Однако, при неправильном использовании этот приём так же легко может и оттолкнуть от вашего ролика. Как не переборщить в применении 3D? В этой статье вы научитесь основам работы с анимированным 3D-текстом в программе ВидеоШОУ и узнаете, как в таком стиле:
Понравился результат? Тогда скорее запускайте программу и следуйте пошаговой инструкции ниже!
Шаг №1. Добавление материалов
Чтобы создать видео с нуля, в приветственном окне выберите вариант «Новый проект». Во вкладке «Клипы» вы увидите окно со списком папок – найдите ту, в которой расположены ваши ролики. ВидеоШОУ не ограничивает вас в выборе материалов для проекта – при желании можете использовать фотографии, картинки, текстуры. Чтобы добавить файл в проект, выделите его в окне просмотра и перетащите на шкалу времени.
Перетащите материалы для работы на шкалу времени
Шаг №2. Создание 3D-текста
Кликните по видео/фото, на котором хотите расположить 3D-текст и воспользуйтесь опцией «Редактировать слайд» . ВидеоШОУ предложит три способа преобразить ролик:
Выберите в редакторе опцию «Добавить текст»
Выберите команду «Добавить текст» . Тут же появится окно с каталогом готовых стилей для оформления надписей – обычных, объёмных и светящихся. Вам нужно перейти во вкладку «3D-текст» . Софт предложит 20 уникальных дизайнов текста – выберите тот, который кажется наиболее оптимальным и нажмите кнопку «Добавить на слайд». Не переживайте, если не подошёл ни один из вариантов, любой из них вы сможете потом полностью преобразить в редакторе.
Используйте стиль из каталога программы
Введите текст заголовка и настройте его оформление. В первую очередь выберите шрифт из выпавшего списка. ВидеоШОУ предлагает варианты на любой вкус от минималистичного начертания без засечек до курсива.
Выберите подходящий шрифт
Определитесь с цветом текста. Чтобы не ошибиться – оттолкнитесь от палитры ролика. Какие цвета преобладают в кадре? Используйте их ближайшие аналоги в спектре. При этом важно, чтобы буквы не сливались с фоном и гармонично вписывались в общий вид кадра. Избегайте слишком ярких и слишком бледных оттенков.
Программа позволяет выбрать способ заливки букв, а также настроить вид объёмного контура. Размер объёма вы можете регулировать, перемещая ползунок на шкале «Глубина» .
Измените цвет текста
Объём не обязательно должен быть чёрным, цветной контур, наоборот, придаст вашей надписи изюминки. Единственное правило – оттенок объёма должен быть более тёмным, чем основной цвет.
Шаг №3. Настройка анимации
Прежде, чем переходить непосредственно к , придумайте способ расположения текста. Он может находиться просто поверх изображения, а может являться частью композиции кадра. Во втором случае вам нужно будет основываться на пропорциях кадра и при настройке учитывать перспективу. Эффект при этом вас приятно удивит.
Итак, когда вы определитесь, перейдите во вкладку «Анимация» . Чтобы заставить текст двигаться по слайду, нужно зафиксировать каждое его перемещение с помощью ключевых кадров. Это вовсе не так сложно, как может показаться!
Обратите внимание – первый ключевой кадр находится в самом начале ролика по умолчанию, его местоположение вы менять не можете.
Откройте в редакторе вкладку «Анимация»
Создадим анимацию появления заголовка:
1. На ключевом кадре №1 уменьшите прозрачность текста до 0%.
3. Не вносите никаких изменений в параметры кадра – этот трюк нужен для того, чтобы анимация была плавной, и текст появлялся не сразу.
Теперь настроим поворот текста в обе стороны:
1. Расположите ключевой кадр №3 на второй секунде.
2. Увеличьте прозрачность до 100%.
3.
Выполните 3D-поворот примерно на
35-40 градусов.
4. Добавьте ключевой кадр №4.
5. Прибавьте масштаб, чтобы текст слегка увеличивался в движении
6.
Угол 3D-поворота измените на
-35 градусов.
Это, пожалуй, все базовые принципы работы с анимацией. Аналогичным образом вы можете перемещать и трансформировать текст так, как нравится именно там, – заставьте его летать вдоль кадра, искривляться, увеличиваться и уменьшаться, крутиться на все 360 градусов или «раздуваться». ВидеоШОУ под силу воплотить любую вашу задумку!
Шаг №4. Управление камерой
Напоследок – ещё один уникальный трюк, который усилит иллюзию объёмности видеоролика. Кликнете «Добавить слой» и в выпавшем списке найдите пункт «Управление камерой сцены» .
Перейдите в режим управления камерой слайда
С помощью этой опции вы сможете изменять точку обзора камеры – приближать, отдалять или поворачивать. Анимация при этом применяется сразу ко всем слоям одновременно. Создадим эффект наезда и переместим точку обзора как бы внутрь кадра. Принцип работы тот же – используйте ключевые кадры. Добавьте ключевой кадр №2 и не меняйте никаких параметров. До этого момента положение камеры будет оставаться в первоначальном виде.
Укажите момент начала анимации камеры
1. Разместите ключевой кадр №3 ближе к концу таймлайна.
2. Увеличьте приближение камеры на 20-30% (заголовок должен быть полностью виден).
3. Выполните 3D-поворот, чтобы надпись изменила угол обзора.
Настройте эффект наезда и поворота камеры
Вот и всё – эффектная заставка готова! Теперь вы убедились, что работать с 3D-текстом вовсе не сложно. Когда под рукой такой доступный редактор, как ВидеоШОУ, создание завораживающих роликов приносит только удовольствие! Соединяйте видеофайлы, добавляйте спецэффекты и музыку – узнайте о возможностях редактора и попробуйте создать свой первый ролик.
Здравствуйте.
В последнее время набирает популярность так называемый 3D текст: смотрится он здорово и привлекает внимание (неудивительно что пользуется спросом).
Чтобы создать такой текст, нужно: либо использовать какие-нибудь «большие» редакторы (например, Фотошоп), либо какие-нибудь спец. программы (вот на них -то я и хочу остановиться в этой статье). Программы будут представлены те, с которыми сможет разобраться, без большого труда, любой пользователь ПК (т.е. ориентированность на простоту использования). Итак…
I nsofta 3D Text Commander
На мой скромный взгляд - эта программа настолько простая для создания 3D текста, насколько это можно представить:). Даже если у вас не будет русского языка (а эта версия самая популярная в сети) - разобраться с 3D Text Commander не составит труда…
После установки и запуска программы, вам нужно в окне текста написать свою желаемую надпись (красная стрелка на рис. 1), а затем просто менять настройки, перелистывая вкладки (см. рис. 1, красный овал). Изменение вашего 3D текста будут сразу же видны в окне просмотра (зеленая стрелка на рис. 1). Т.е. получается, что мы в режиме онлайн создаем себе нужный текст, причем, без всякого программирования или нудных руководств…
Рис. 1. Insofta 3D Text Commander 3.0.3 - главное окно программы.
Когда текст будет готов, просто сохраните его (см. зеленая стрелка на рис. 2). Кстати, сохранить можно в двух вариантах: статическом и динамическом. Оба варианта у меня представлены на рис. 3 и 4.
Полученный результат весьма не плох. Представляет из себя обычную картинку в формате PNG (динамический 3D текст сохранен в формате GIF).
X ara 3D Maker
Еще одна не плохая программа для создания динамических 3D текстов. Работать с ней так же просто, как и с первой. После запуска программы, обратите внимание на панельку слева: поочередно заходите в каждую складку и меняйте настройки. Изменения будут сразу же видны в окне просмотра.
Подкупает в этой утилите огромное число опций: можно повернуть текст, изменить его тени, грани, структуру (кстати, в программе много встроенных текстур, например, дерево, металл и т.д.). В общем и целом, рекомендую всем, кто интересуется этой темой.
За 5 минут работы с программой, создал небольшое GIF изображение с 3D текстом (см. рис. 6). Ошибка сделана специально, для придания эффекта:).
Кстати, хочу так же обратить внимание, что чтобы написать красиво текст не обязательно использовать программы - есть полно онлайн-сервисов. Часть из них я рассматривал в одной из своих статей: . Чтобы текст был красивым, кстати говоря, не обязательно придавать ему 3D эффект, можно найти и более интересные варианты!
Какие еще программы можно использовать для придания 3D эффекта тексту:
- BluffTitler - программа, прямо скажем, не плохая. Но есть одно «НО» - она несколько сложнее, чем приведенные выше, и разобраться в ней неподготовленному пользователю будет сложнее. Принцип работы такой же: есть панелька опций, где задаются параметры и есть экран, где можно прсоматривать получаемый текст со всеми эффектами;
- Aurora 3D Animation Maker - большая профессиональная программа. В ней можно делать не только надписи, но и целые анимации. К этой программе рекомендуется переходить, когда будет набита рука на более простых.
- Elefont - очень небольшая (всего 200-300 Кб) и простая программа для создание трехмерных текстов. Единственный момент - она позволяет сохранить результат своей работы в формате DXF (что далеко не всем подойдет).
Разумеется, в этот небольшой обзор не попали большие графические редакторы, в которых можно не только трехмерный текст создать, а можно вообще ВСЁ…
В данном уроке мы рассмотрим основные инструменты программы фотошоп для работы с 3D объектами, а именно с текстом.
В фотошопе можно без труда смоделировать красивую 3D надпись, например для логотипа сайта или группы в социальной сети. Объемный текст в фотошопе создается гораздо проще, чем в 3D редакторах и так, приступим!
1) Создадим новый документ, необходимого Вам размера, я задал квадратный размер 1024 на 1024 пикселя. Для этого в верхнем меню слева выбираем "Файл" - "Создать" и устанавливаем необходимые параметры. Если вы не опытный пользователь программы фотошоп, то рекомендую ничего не менять, оставить все параметры по умолчанию, кроме размера документа.
2) Теперь напишем текст, который в дальнейшим будем делать трехмерным. Для этого в левом боковом меню программы выбираем инструмент "Текст", кликнув по нему левой кнопкой мыши.
Теперь, выбрав необходимый инструмент, кликаем левой кнопкой мыши на нашем холсте и печатаем необходимый текст. Для настройки размера текста, шрифта, его цвета и тп.. необходимо в панельке с правой стороны выбрать вкладку "Символ".
Если у Вас данная вкладка не отображается, то ее необходимо включить, выбрав в верхнем меню программы "Окно" - "Символ". Слева от пункта "Символ" должна стоять галочка, значит данный пункт включен. Если галочки нет, просто кликните по этому пункту левой кнопкой мыши.
3) И так, мы напечатали необходимый нам текст, настроили его размеры, цвет, выбрали шрифт, теперь преобразуем его в объемную 3D модель. Для этого в верхнем меню программы выбираем пункт "3D" - "Новая 3D - экструзия из выделенного слоя" и в всплывающем окне просто нажимаем "Ок".
При этом слой с текстом в правой панели снизу должен быть выделен, если выделен другой слой, то кликните левой кнопкой мыши по слою с текстом, чтобы выделить именно его.
4) Выполнив все описанные выше действия мы попадаем в режим 3D редактирования нашего текста. Вы можете поворачивать и перемещать текст в любом направлении, используя 3 оси, выбирая нужную и удерживая левую клавишу мыши. Так же можно произвольно выбирать ракурс текста, для этого наведите мышь за пределы текста (лучше над ним), нажмите левую кнопку мыши и удерживая ее перемещайте мышь.
5) При работе в режиме 3D редактирования нам становится доступна панель настроек в правой верхней части программы. С помощью данной панели можно настроить различные эффекты для нашего текста, попробуйте что-нибудь изменить двигая ползунки установок в данной панели. Поэкспериментировав с данными настройками можно получить необычный и интересный результат.
Вот, к примеру, регулируя ползунок настройки "Скручивание" я получил вот такой интересный эффект:
6) Создав необходимый вам текст с эффектами и нужным ракурсом его можно преобразовать в "Смарт-объект" и работать с ним уже как с обычным слоем, а не 3D объектом. Для этого в правой нижней панели перейдите из вкладки "3D" во вкладку "Слои" и выберите слой с текстом, нажмите на нем правой кнопкой мыши и выберите "Преобразовать в Смарт-объект". Но учтите, после преобразования текста в Смарт-объект вы его уже не сможете редактировать, т.е. изменить сам текст надписи, поменять шрифт, сменить эффекты 3D и т.п., поэтому данное действие лучше делать по окончанию работы.
7) Если вы хотите сделать надпись допустим на половину скрученой, а вторую часть надписи просто объемной и повернутой боком, то соответственно изначально вам необходимо создать два разных слоя в каждом из которых будет часть этой надписи и с каждым из слоев работать по отдельности, редактируя часть надписи.
Текст с 3D эффектом используется все чаще и чаще на рекламных баннерах, в газетах, интернете и прочих местах. Сегодня, есть возможность научиться делать 3D текст самому, используя программу фотошоп. Это будет нелегко, и на такое дело уйдет немало времени, когда будете пробовать первый раз, но это нормально, со временем и практикой этот урок будет даваться намного легче.
Как сделать 3D текст?
Для создания текста с 3D эффектом нам потребуется лишь фотошоп и время. Мы постараемся сделать вот такой текст:
Начнем нашу работу:
1. Сначала нужно создать новый документ, в котором мы и будем делать наш текст. Открываем фотошоп, ожидаем пока он загрузится, и нажимаем Cntr+N. В появившемся окне вводим размер нового холста, нам потребуется 10х10 дюймов (inches). Не забываем так же и о качестве, в строке расширение устанавливаем 300 pixels/inch.
2. Не забываем так же и об Background, нам нужен темно серый цвет, который обозначается #333333. После установки данного параметра нажимаем «ОК» чтобы создать холст создался.
3. На рабочем холсте нужно написать слова, которые мы желаем сделать в 3D эффекте. Выбираем инструмент «Текст» (обозначается буквой Т), и начинаем писать. В нашем примере использовался шрифт «Myriad Pro Black», желтым цветом (#FFCC00). Размер первого слова составляем 286pt, размер второго слова 83pt.
Чтобы получить максимально эффективный 3D эффект, лучше всего выбирать жирные шрифты.
4. Теперь нам нужно растеризовать текст, но перед тем как это сделать - проверяем текст на ошибки, ведь после выполнения данной функции, текст редактировать невозможно. Чтобы растеризировать текст, нажимаем на нем правой кнопкой и в контекстном меню выбираем «Rasterize Layer».
5. Следующим шагом есть наклон текста. Так он будет лучше смотреться в трехмерности. Чтобы выделить текст и начать трансформацию, нажимаем Ctrl+Т. Затем зажимаем Ctrl, кликаем курсором по правому верхнему маркеру и перетаскиваем его немного влево. Так же делаем и с верхним средним маркером. В результате мы должны получить вот такую картинку:
6. Чтобы текст выглядел более привлекательно, добавим на него несколько эффектов. Нажимаем на иконку эффектов на панели «Layers», делаем свой выбор на пункте с названием «Bevel and Emboss». Настройки устанавливаем как на фотографии:
Не забываем, что нам так же требуется изменить цвета в строках «highlights» и «shadows». Устанавливаем #FFCC66 и #DFA125 соответственно.
7. Так же можем добиться более глубокого цвета, для этого используем эффект «Satin», в строке «Blend Mode» задаем параметр цвета #F3881F.
8. И последний шаг в окне с эффектами - «Gradient Overlay». Нажимаем на градиент и изменяем цвет находящийся слева на #F7F3A7, справа на #F3881F. Остальные настройки градиента можно посмотреть на фото:
После сохранения всех примененных эффектов мы получили такую картинку.
9. Текст подготовлен и теперь можем перейти к созданию 3D эффекта. И для начала нам нужно дублировать наш слой с текстом, это делаем с помощью клавиш Ctrl+J. Переходим на нижний дубль и удаляем все эффекты с него. Далее, нам нужно поменять на нем цвет, переходим Image > Adjustment > Curves или же открываем все нажатием Ctrl +М. Кривую нужно выгнуть, как показано на фото.
10. После прошлой операции, цвет текста станет темнее, но это ещё не конец, теперь нам нужно убрать насыщенность цвета. Делаем переход Image > Adjustments > Hue/Saturation или нажимаем клавиши Cntr+U, и выставляем в открывшемся окне значения 0, -40 и 0. Подтверждаем свой выбор.
11. Переносим наш основной слой немного выше, нежели дублированный слой. Нижний слой так же следует немного передвинуть, только в левую сторону. После перетаскивания слоев, зажимаем ALT и нажимаем на стрелки вниз и влево. Такой операцией мы дублируем коричневый слой несколько раз, в зависимости от количества нажатий - будет зависеть толщина боковой грани.
12. Все слои следует объединить, и для этого на панели Layers щелкаем по самому верхнему слою, зажимаем Shift и выделяем все остальные слоя. После выделения нажимаем Cntr+Е. Далее к этим слоям нужно добавить «Gradient Overlay», причем цвет выбираем черный и белый.
Для упрощения разработки дизайнеры создают для дизайнеров специальные сервисы, где можно сгенерировать любой элемент дизайна. Имеется в виду стили для элемента страницы. Чтобы Вы понимали о чем идет речь — это сервисы для генерации градиента на CSS, границ и так далее. То есть руками писать ничего не нужно, а лишь нужно перетаскивая ползунки — смотреть на конечный результат. И, если он нравится, то просто скопировать сгенерированный сервисом код.
1. Не нужно далеко ходить…
Я не стану Вас отправлять далеко на какой-нибудь посторонний сервис, потому что сейчас генератор CSS 3D текста есть и на моём сайте!
Генератор CSS позволяет только с помощью перетаскивания ползунков сгенерировать красивый 3D текст, даже без знаний CSS. Это то, что нужно для тех, кому нет времени разбираться подробно во всех свойствах CSS3, но хочет сделать на сайте такой текст.
Также дела обстоят и с цветом. Появляется окошко выбора цвета, которое позволяет выбрать любой понравившийся цвет как в Photoshop. Все изменения сразу применяются и это отображается на конечном результате.
После всех манипуляций, когда Вас уже устраивает то, что получилось. Ниже находится стили, которые были сгенерированы при перетаскивании ползунков и выборе цвета.
Эти стили необходимо скопировать и применить их к тому тексту, который Вы хотите сделать в таком стиле.
2. Видеодемонстрация работы генератора CSS 3D текста
Небольшое видео, где я рассказал как пользоваться сервисом по генерации 3D текста на CSS.
Вывод
Генератором CSS значительно легче сделать эффект 3D, чем писать всё это самостоятельно с нуля. Чтобы не потерять генератор CSS и постоянно не искать его, нажмите сочетание клавиш CTRL+D и он всегда будет у Вас в закладках, а Вы сможете зайти на него в любое время.
Не забудьте рассказать друзьям об этом генераторе 3D текста на CSS с помощью социальных кнопок, которые находятся ниже.
Отчетность за сотрудников
