Создаём 3D анимацию логотипа в Фотошоп. 3D логотип фотошоп


Создаём 3D анимацию логотипа в Фотошоп

В этом уроке вы узнаете, как сделать объёмным плоский логотип с помощью 3D инструментов и оживить его, используя новую Шкалу времени (Timeline) в Photoshop CS6.

Детали урока.

Программа: Adobe Photoshop CS6 ExtendedСложность: средняяПредполагаемый срок завершения: 1 час + время рендерингаФинальный результат

Материалы для урока:

логотип ресурса Envato.

Архив

Примечание переводчика: стоит заметить, что для этого урока потребуются значительные ресурсы вашего компьютера, так как рендеринг длится достаточно долго. Логотип, предоставленный для использования -  большого размера, поэтому предлагаю сразу уменьшить его для работы.

Шаг 1

Откройте логотип в Photoshop. Обратите внимание, что файл с расширением PNG -это важно, потому что он содержит прозрачность и так будет удобнее, когда мы будем преобразовывать объект в 3D.  Сейчас нет необходимости корректировать размер логотипа, так как мы будем изменять его в конце, при сохранении анимации.

Шаг 2

Выберите инструмент Рамка (Crop Tool) и расширьте верх и низ документа, чтобы увеличить пространство для нашей сцены. Нажмите Enter, чтобы принять изменения.

Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите текст Envato, исключая листик логотипа и внизу палитры слоёв нажмите кнопку Добавить слой маску (Add Layer Mask). Это действие позволит выделить только текст.

Шаг 3

Чтобы облегчить задачу, автор переименовал слой с видимым текстом на Text. Создайте копию этого слоя, переименуйте её в Leaf и сделайте активной маску слоя. После этого мы сможем её редактировать. Теперь нажмите комбинацию клавиш Ctrl + I, чтобы инвертировать маску. Таким образом, на этом слое будет виден только лист, а текст будет исключен. Результат должен выглядеть идентично оригиналу изображения с логотипом, которые мы открыли в начале урока.  Разница лишь в том, что текст и значок листика в настоящее время на отдельных слоях.

Делаем активным слой с листиком Leaf и идём в меню Слои – Слой маска – Применить( Layer > Layer Mask > Apply). Это действие позволит удалить все пиксели, которые были скрыты под маской.

Теперь идём в меню 3D и выбираем пункт Новая 3D-экструзия из выделенного слоя (3D > New 3D Extrusion From Selected Layer). После этого вы будете автоматически перемещены в 3D пространство, где будете работать с 3D сценой. Если этого не произошло, вы можете самостоятельно включить его в меню Окно – Рабочая среда - 3D (Window> Workspace> 3D). Обратите внимание, что теперь слой с листиком является 3D слоем в палитре слоёв.

Шаг 4

Перейдите в 3D палитру, выделите объект Leaf (обозначается значком звезды) и включите палитру Свойства (Properties). В настройках палитры установите Глубину экструзии (Extrusion Depth) на 35 и снимите флажки с опций Захват тени (Catch Shadows) и Наложить тени (Cast Shadows).

Теперь нам нужно переместить объект Leaf точно в центр сцены. Прежде чем мы это сделаем, для удобства изменим вид нашей камеры. Выделите Текущий вид (Current View) в 3D палитре и выберите настройку Сверху (Top) для опции Вид (View) в палитре Свойства (Properties).

Используя экранные рычаги управления 3D объектом, переместите листик точно в центр сцены, который обозначается пересечением красной и синей линиями.

Примечание переводчика: для того чтобы элементы управления стали видимыми, щёлкните курсором по 3D объекту.

Шаг 5

В настоящее время наш документ имеет вид сверху. Для изменения и сброса вида камеры в палитре Свойства (Properties) установите вид По умолчанию (Default Camera). Обратите внимание, что 3D объект Leaf не окажется в правильном положении.  Мы исправим это в следующем шаге.

Исправим положение листика. Используйте инструменты камеры в верхнем меню, которые показаны на скриншоте. Перемещайте камеру до правильного размещения логотипа. Просто перемещая камеру, мы можем добиться вида объекта в надлежащем положении. Важно, что на самом деле, таким образом, не двигается 3D объект, как это было в шаге 4.

Шаг 6

Примечание переводчика: Важно, перед началом создания анимации, продумайте какой у вас будет фон, например - цвет, градиент Необходимо подготовить фоновый слой заранее самым нижним в палитре слоёв. Автор не говорит об этом, но у него завершённая анимация с белым фоном.

Теперь мы готовы к создании анимации. Откройте Шкалу времени (Timeline) и нажмите кнопку Создать временную шкалу для видео (Create Video Timeline). Если вы не видите в рабочем пространстве программы шкалу времени, вы можете её открыть в меню Окно – Шкала времени (Window > Timeline).

Когда вы сделаете это, то увидите, что все слои отображаются в виде отдельных видео-слоёв в шкале времени. В нашем случае это будет два видео-слоя.

Шаг 7

Так как нужно анимировать листик, нам необходимо получить доступ к его свойствам в шкале времени. Чтобы раскрыть список свойств, которые могут быть анимированы, щёлкните по маленькой стрелке напротив названия видео-слоя. Для этой анимации мы сосредоточимся на опции Положение 3D сцены (3D Scene Position).

Щёлкните по иконке секундомера чтобы Включить анимацию ключевых кадров (Enable Keyframe Animation). Это действие добавит первый ключевой кадр в шкале времени, обозначенный жёлтым ромбиком.

Поскольку ключевой кадр анимации включен, Photoshop автоматически добавит ключевой кадр, когда вы внесёте изменения в положение сцены (или вращения).Прежде чем начать вращать сцену, необходимо указать, как долго будет длиться анимация.  Для этого перетащите индикатор текущего времени (обозначается синим слайдером) в другую точку на временной шкале.

Шаг 8

Вернитесь в 3D палитру активируйте слой Сцена (Scene) и перейдите в палитру Свойства (Properties). Щёлкните иконку Координаты (Coordinate) и измените на оси Y значение угла на 360 градусов. Это будет вращать сцену вокруг ее Оси Y на 360 градусов.

Обратите внимание, что после этих действий на шкале времени был добавлен новый ключевой кадр. Используя индикатор текущего времени (голубой слайдер), двигая его назад и вперёд, вы можете просматривать процесс анимации 3D объекта. Так как наш 3D листик был помещен в самый центр нашей сцены, мы будем видеть его вращающимся на месте.

Шаг 9

Наша цель состоит в том, чтобы 3D объект листик постоянно вращался вокруг своей оси, но показывал всё время только свою переднюю часть. Чтобы сделать это, нужно сначала дублировать слой Leaf в палитре слоёв. Обратите внимание, что копия слоя  с листиком сразу же появится и в шкале времени.

Теперь очистим шкалу времени, чтобы 3D объект листик делал три четверти оборота.

Подведите курсор к началу видео-слоя с копией листика. Когда курсор изменится на значок с видом квадратной скобки с двумя стрелочками, перетащите слой к красной линии. Этот видео-слой теперь будет обрезан и его анимация начнётся после трёх четвертей оборота.

На этот раз нужно очистить первую часть нашей анимации. Для этого нужно найти точку, в которой объект листик поворачивается на одну четверть. Активируйте видео- слой Leaf в Шкале времени (Timeline) и перетащите его конец к красной линии как показано на скриншоте.

Наконец сдвиньте видео-слой с копией листика к новой красной линии. Убедитесь, что ваша анимация проходит гладко.

Шаг 10

Прежде чем продолжить создание нашей анимации, мы должны указать программе какие именно кадры хотим использовать. Используйте индикатор текущего времени, чтобы определить точку, где наш объект появляется, чтобы сделать полный оборот. Теперь сдвиньте к красной линии ползунок Задать конец рабочего участка, который находится под тайм баром. После этих действий в анимации будут показаны только эти кадры.

Шаг 11

Наша работа с подготовкой анимации завершена и нам пора заняться её сохранением в формате GIF. Рассмотрим два варианта. Первый – быстрое сохранение с низким качеством.  Второй вариант займет больше времени, но позволит нам сохранить высококачественный GIF.Вариант 1 – идём в меню Файл – Сохранить для Web (File > Save for Web). Эта опция пропускает процесс рендеринга и сохранит кадры, какие они есть в нашем документе. Идем дальше, и изменяем настройки по своему усмотрению.  Нажмите кнопку Сохранить, когда закончите.

Ниже приведен пример окончательной анимации с использованием Вариант 1 без рендеринга.  Обратите внимание, что края листьев появляются зубчатые.

Шаг 12

Вариант 2 – требует рендеринга нашей сцены. Это настоятельно рекомендуется для улучшения качества конечного продукта. Идём в меню Файл – Экспортировать – Просмотреть видео (File > Export > Render Video) и внесите изменения, как показано на скриншоте. Убедитесь, что у вас установлен параметр  Последовательность изображений Photoshop (Photoshop Image Sequence) для выхода и Окончательная трассировка лучей (Ray Traced Final). Этот метод сделает нашу сцену в виде отдельных кадров.

После того как все кадры пройдут рендеринг, мы сможем открыть их как анимацию. Идём в меню Файл – Открыть как (File > Open As) и перейдите к папке, которую вы создали для обработанных кадров. Выберите первый кадр и внизу окна поставьте флажок на опции Последовательность изображений (Image Sequence). Теперь нажмите кнопку Открыть (Open ) и в следующем диалоговом окне подтвердите ОК.

После этих действий кадры, которые прошли рендеринг, автоматически появятся новой анимацией в новой шкале времени.

Финальный шаг. Чтобы сохранить анимацию в формате GIF, просто повторите Шаг 11, и все готово!

Автор: Stephen Petrany

photoshop-master.ru

Логотип 3D в программе Photoshop

Любой компании которая занимается бизнесом нужен логотип. Наличие логотипа является очень важным аспектом бизнеса особенно когда вам нужно рекомендовать свои продукты или услуги потребителю. Есть много способов создать логотип, но одно можно сказать точно: вам нужен четкий и привлекательный логотип. Один из замечательных способов сделать логотип на котором остановится взгляд клиента, сделать его 3D.

Оглавление:
  1. 3D логотип в программе Photoshop
  2. Шаг 1
  3. Шаг 2
  4. Шаг 3
  5. Шаг 4
  6. Шаг 5
  7. Шаг 6
  8. Шаг 7
  9. Шаг 8
  10. Шаг 9
  11. Шаг 10
  12. Шаг 11
  13. Шаг 12
  14. Шаг 13
  15. Шаг 14
  16. Шаг 15
  17. Шаг 16
  18. Шаг 17
  19. Шаг 18
  20. Шаг 19
  21. Шаг 20
  22. Заключение

3D логотип в программе Photoshop

Читайте также: Сбалансированная форма регистрации

В сегодняшнем уроке я покажу Вам, как создать простой, и потрясающий объёмный логотип используя только программу Photoshop.

Шаг 1

Сначала нам нужно создать новый файл размером 600px 400px в ширину и в высоту с разрешением 72 точки на дюйм.

Логотип в программе Photoshop, шаг 1 Создать новый файл в программе Photoshop

Шаг 2

Создайте новый слой orb. Выберем цвет # 77d7ff и создадим довольно большой круг в центре холста.

Логотип в программе Photoshop, шаг 2 Создать новый слой программе Photoshop

Шаг 3

Выбираем цвета # 000000 и # 77d7ff. Дважды щелкните на слой круга, чтобы открыть окно параметров наложения. Установите флажок наложение градиента а затем измените параметры, как показано на картинке.

Логотип в программе Photoshop, шаг 3 Выбираем цвет в программе PhotoshopК началу

Шаг 4

Продолжаем делать наш шар более круглой формы, выбираем Внутренняя тень. Введите те же настройки, как показано ниже на рисунке, и нажмите OK, чтобы изменения вступили в силу.

Логотип в программе Photoshop, шаг 4 Выбираем тень в программе PhotoshopК началу

Шаг 5

Создайте новый слой и с помощью инструмента перо и сделайте изогнутую дугу по всей поверхности шара. Смотрите ниже для ясности.

Логотип в программе Photoshop, шаг 5 Создать новый слой в программе Photoshop

Залить новый путь цветом #008aff.

Логотип в программе Photoshop, шаг 5-1 Залить фигуру цветом в программе Photoshop

Убедитесь, что вы находитесь на слое шара и выберите пустое пространство вокруг него. Вернуться к вновь созданной кривой и удалить лишнее, вне шара.

Логотип в программе Photoshop, шаг 5-2 Удалить пустое пространство в программе PhotoshopК началу

Шаг 6

В параметрах наложения, выбираем пункт Тиснение и используйте настройки, показанные на рисунке ниже. Нажмите OK, когда вы закончите.

Логотип в программе Photoshop, 6. Тиснение в настройках Photoshop

Шаг 7

На новом слое с правой стороны создайте еще одну изогнутую форму, но на этот раз с закруглением вверху.

Логотип в программе Photoshop, шаг 7 В программе Photoshop создать на новом слое еще одну форму

Заливаем новый путь цветом # 008aff и выполняем действия шага 5. Смотрите ниже для ясности.

Логотип в программе Photoshop, шаг 7-1 Залить новый слой цветом в программе PhotoshopК началу

Шаг 8

Настройки в параметрах наложения:

Логотип в программе Photoshop, шаг 8 Настройки параметров наложения в программе Photoshop

Результат.

Логотип в программе Photoshop, шаг 8-1 Результат настроек наложения в программе PhotoshopК началу

Шаг 9

Нам нужно добавить градиент для этой части кривой, поэтому убедившись, что цвет переднего плана # 008aff и ваш фон # 00000, в параметрах наложения выбираем наложение градиента. Используйте настройки, показанные ниже, и нажмите OK.

Логотип в программе Photoshop, шаг 9 Выбираем параметры наложение градиента в программе Photoshop

Изогнутая часть слоя orb теперь будет выглядеть более объёмной.

Логотип в программе Photoshop, шаг 9-1 Сделать более объёмной часть слоя в программе PhotoshopК началу

Шаг 10

Создайте маленький кружок в центре слоя orb. Убедитесь, что он не касается краев кривых. Заливаем круг цветом # 77d7ff. Это будет ваш отступ.

Логотип в программе Photoshop, 10. Залить круг цветом с отступом в программе Photoshop

Далее в параметрах наложения используем настройки тиснения. Нажмите OK, когда закончите.

Логотип в программе Photoshop, 10-1 Использовать настройки тиснения в программе Photoshop

Вот так ваше изображение должно выглядеть сейчас.

Логотип в программе Photoshop, 10-2 Как изображение должно выглядеть в программе PhotoshopК началу

Шаг 11

На новом слое создадим меньший круг в середине. Заливаем цветом # ff6c00.

Логотип в программе Photoshop, шаг 11. В программе Photoshop создать круг внутри по меньше

Шаг 12

Изменим цвет фона # ffbb03 и оставим цвет переднего плана. Перейдите в параметры наложения наложите градиент, убедитесь, что ваш градиент отражает выбранный цвет переднего плана и фона. Используйте настройки, показанные на рисунке ниже. Нажмите OK, когда вы закончите.

Логотип в программе Photoshop, шаг 12 Изменить цвет фона в программе Photoshop

Вот так orb должен выглядеть.

Логотип в программе Photoshop, шаг 12-1 Результат использования настроек в программе PhotoshopК началу

Шаг 13

Продолжаем придавать нашему мини-шару объёмный вид в параметрах наложения на первом слое выбираем поле внутренняя тень. Используйте следующие настройки.

Логотип в программе Photoshop, шаг 13 Добавить объёмный вид в параметрах наложения в программе Photoshop

Для поля Тень используйте настройки, как на снимке ниже.

Логотип в программе Photoshop, шаг 13-1 Настройки для тени в программе Photoshop

Наш слой мини-orb должен выглядеть 3D.

Логотип в программе Photoshop, шаг 13-2 Слой должен выглядеть 3D в программе PhotoshopК началу

Шаг 14

Что бы сделать платформу, сделайте новый слой и с помощью мыши нарисуйте прямоугольник под шаром. Не забудьте оставить достаточное пространство между двумя элементами. Заливаем прямоугольник цветом # ffbb03.

Логотип в программе Photoshop, шаг 14 Нарисовать прямоугольник в программе Photoshop

Далее трансформируем прямоугольник искажая перспективу, придавая ему вид, верхней части. Нажмите OK, когда закончите, чтобы изменения вступили в силу.

К началу

Шаг 15

Создаем новый слой и установите цвет переднего плана на # ffcb17, используйте лассо для создания лицевой стороны платформы.

Логотип в программе Photoshop, шаг 15 Использовать лассо для создания лицевой стороныК началу

Шаг 16

Используйте тот же метод, как и выше, чтобы создать сторону, но на этот раз убедитесь, что цвет # ffc600.

Логотип в программе Photoshop, шаг 16 Создать еще одну сторону в программе Photoshop

Шаг 17

Должно создаться впечатление как будто шар плавает над площадкой, создаём овал в новый слой и заливаем его цветом # 000000.

Логотип в программе Photoshop, шаг 17 Создать овал для нового слоя и залить его цветом

Измените непрозрачность 50% и размыть в 8px.

Логотип в программе Photoshop, шаг 17-1 Изменить непрозрачность и размытьК началу

Шаг 18

Вам потребуется создать тень для платформы. Убедитесь, что вы используете инструмент прямоугольная область, и поместить этот новый слой ниже поля слоя элементов. Используйте инструмент искажение по мере необходимости и, как и раньше, измените непрозрачность 50% и применить размытие 8px, для тени.

Логотип в программе Photoshop, шаг 18 Применить размытие для тени в программе PhotoshopК началу

Шаг 19

Создайте новый слой и сделать небольшое кольцо в центре мини-orb. Добавить рамку 2px и залить цвет # ff6305.

Логотип в программе Photoshop, шаг 19 Создайте новый слой и сделать небольшое кольцо

Затем, добавим белый круг, чтобы перекрывать левую верхнею часть кольца.

Логотип в программе Photoshop, шаг 19-1 Для перекрытия левой верхней часть кольца добавим белый кругЛоготип в программе Photoshop, шаг 19-2 Перекрытие левой верхней части кольцаК началу

Шаг 20

Можно добавить белое свечение за шаром. Теперь вы можете установить размер и переместить ваш логотип, а также добавить нужный текст и красочные градиентный фон.

Логотип в программе Photoshop, готово Белое свечение за шаром в программе PhotoshopК началу

Заключение

Проектирование идеального логотипа далеко не простое дело, и как только вы узнаете несколько дизайнерских приемов задача станет легче, но в любом случае нужно практиковаться. При разработке логотипа вы должны принять во внимание направление вашего бизнеса, название компании, целевая аудитория и предоставляемые услуги. Представить, возможно ли реализовать эти идеи в дизайн. Не забывайте на всякий случай нацарапать на бумаге неожиданные творческие идеи логотипа.

htmlhook.ru

Рисуем 3D логотип

Давайте начнем с нового документа:Размер должен быть 400 х 400 пикселей. Мы будем использовать зеленый фон.Я выбрал зеленый, потому что вы сможете лучше видеть то, что я делаю,Теперь, пожалуйста, скачайте себе следующее изображение:

Это изображение поможет вам сделать хорошую перспективу для вашего логотипа.

Когда вы откроете эту картинку в фотошопе, то с помощью инструмента перемещения перетащите это изображение в ваш документ.

Затем выберите Rectangle Tool (Прямоугольник) и нарисуйте прямоугольник. Я буду использовать различные цвета. Вы можете использовать цвета, какие захотите.

Вы можете заметить, что у меня изменилась непрозрачность этого прямоугольника. Это очень важно.Теперь с тем же инструментом создайте еще 4 небольших прямоугольника и один круг:

Теперь нужно выбрать все слои, кроме фона и черного прямоугольника:

После того как вы выбрали прямоугольники заходите в меню Edit> Transform> Distort (Редактирование – Трансформирование контура – искажение) и соедините углы слоя с углами черного прямоугольника:

Как вы можете видеть, логотип выглядит уже хорошо. Это его 3D вид.Давайте добавим стиль слоя для выбранных белых прямоугольников:

Тень

Внутренняя тень:

Тиснение/скос:

Наложение цвета:

Обводка:

Теперь удаляем черный и синий прямоугольники.

Теперь добавьте стиль слоя на белый круг:

Тень:

Внутренняя тень:

Тиснение/скос:

Наложение цвета:

Обводка:

После того как вы применили стиль круга, пожалуйста, измените цвет фона на белый:

Красиво, не так ли?Выберите все слои, и  измените размер логотипа:

Теперь выделите все слои и заходите в меню Layer> Duplicate layers (Слой – Создать дубликат слоя). Теперь выберите первые слои (не выбирайте фоновый слой)

Выбранные слои опустите с помощью клавиши стрелки вниз, нажав несколько раз. Вы дадите 3D объем этому логотипу.

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

Вы уже думаете, что все готово? Гм. пока нет. Мы добавим простые тени, и будет всё готово. Выберите инструмент прямоугольники нарисуем небольшой прямоугольник, как у меня.

Теперь перейдите в Edit> Transform> Distort (Редактирование – Трансформирование контура – искажение) и переместите углы серого прямоугольника, как на рисунке.

Теперь перейдите в Filter> Blur> Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу). Вам будет предложено растрировать форму. Нажмите кнопку ОКЗатем установите радиус 7 пикселей. Нажмите OKУбедитесь, что вы перетащили этот слой над фоновым слоем.

Это мой результат:

С помощью этой техники вы сможете создать не один красивый логотип.Вот несколько примеров:

Автор: amitkПеревод: Черечеча ДенисСсылка на источник

photoshop-master.ru

Создаём 3D анимацию логотипа в Фотошоп

В этом уроке вы узнаете, как сделать объёмным плоский логотип с помощью 3D инструментов и оживить его, используя новую Шкалу времени (Timeline) в Photoshop CS6.

Детали урока.

Программа: Adobe Photoshop CS6 ExtendedСложность: средняяПредполагаемый срок завершения: 1 час + время рендерингаФинальный результат

Материалы для урока:

логотип ресурса Envato.

Архив

Примечание переводчика: стоит заметить, что для этого урока потребуются значительные ресурсы вашего компьютера, так как рендеринг длится достаточно долго. Логотип, предоставленный для использования -  большого размера, поэтому предлагаю сразу уменьшить его для работы.

Шаг 1

Откройте логотип в Photoshop. Обратите внимание, что файл с расширением PNG -это важно, потому что он содержит прозрачность и так будет удобнее, когда мы будем преобразовывать объект в 3D.  Сейчас нет необходимости корректировать размер логотипа, так как мы будем изменять его в конце, при сохранении анимации.

Шаг 2

Выберите инструмент Рамка (Crop Tool) и расширьте верх и низ документа, чтобы увеличить пространство для нашей сцены. Нажмите Enter, чтобы принять изменения.

Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите текст Envato, исключая листик логотипа и внизу палитры слоёв нажмите кнопку Добавить слой маску (Add Layer Mask). Это действие позволит выделить только текст.

Шаг 3

Чтобы облегчить задачу, автор переименовал слой с видимым текстом на Text. Создайте копию этого слоя, переименуйте её в Leaf и сделайте активной маску слоя. После этого мы сможем её редактировать. Теперь нажмите комбинацию клавиш Ctrl + I, чтобы инвертировать маску. Таким образом, на этом слое будет виден только лист, а текст будет исключен. Результат должен выглядеть идентично оригиналу изображения с логотипом, которые мы открыли в начале урока.  Разница лишь в том, что текст и значок листика в настоящее время на отдельных слоях.

Делаем активным слой с листиком Leaf и идём в меню Слои – Слой маска – Применить( Layer > Layer Mask > Apply). Это действие позволит удалить все пиксели, которые были скрыты под маской.

Теперь идём в меню 3D и выбираем пункт Новая 3D-экструзия из выделенного слоя (3D > New 3D Extrusion From Selected Layer). После этого вы будете автоматически перемещены в 3D пространство, где будете работать с 3D сценой. Если этого не произошло, вы можете самостоятельно включить его в меню Окно – Рабочая среда - 3D (Window> Workspace> 3D). Обратите внимание, что теперь слой с листиком является 3D слоем в палитре слоёв.

Шаг 4

Перейдите в 3D палитру, выделите объект Leaf (обозначается значком звезды) и включите палитру Свойства (Properties). В настройках палитры установите Глубину экструзии (Extrusion Depth) на 35 и снимите флажки с опций Захват тени (Catch Shadows) и Наложить тени (Cast Shadows).

Теперь нам нужно переместить объект Leaf точно в центр сцены. Прежде чем мы это сделаем, для удобства изменим вид нашей камеры. Выделите Текущий вид (Current View) в 3D палитре и выберите настройку Сверху (Top) для опции Вид (View) в палитре Свойства (Properties).

Используя экранные рычаги управления 3D объектом, переместите листик точно в центр сцены, который обозначается пересечением красной и синей линиями.

Примечание переводчика: для того чтобы элементы управления стали видимыми, щёлкните курсором по 3D объекту.

Шаг 5

В настоящее время наш документ имеет вид сверху. Для изменения и сброса вида камеры в палитре Свойства (Properties) установите вид По умолчанию (Default Camera). Обратите внимание, что 3D объект Leaf не окажется в правильном положении.  Мы исправим это в следующем шаге.

Исправим положение листика. Используйте инструменты камеры в верхнем меню, которые показаны на скриншоте. Перемещайте камеру до правильного размещения логотипа. Просто перемещая камеру, мы можем добиться вида объекта в надлежащем положении. Важно, что на самом деле, таким образом, не двигается 3D объект, как это было в шаге 4.

Шаг 6

Примечание переводчика: Важно, перед началом создания анимации, продумайте какой у вас будет фон, например - цвет, градиент Необходимо подготовить фоновый слой заранее самым нижним в палитре слоёв. Автор не говорит об этом, но у него завершённая анимация с белым фоном.

Теперь мы готовы к создании анимации. Откройте Шкалу времени (Timeline) и нажмите кнопку Создать временную шкалу для видео (Create Video Timeline). Если вы не видите в рабочем пространстве программы шкалу времени, вы можете её открыть в меню Окно – Шкала времени (Window > Timeline).

Когда вы сделаете это, то увидите, что все слои отображаются в виде отдельных видео-слоёв в шкале времени. В нашем случае это будет два видео-слоя.

Шаг 7

Так как нужно анимировать листик, нам необходимо получить доступ к его свойствам в шкале времени. Чтобы раскрыть список свойств, которые могут быть анимированы, щёлкните по маленькой стрелке напротив названия видео-слоя. Для этой анимации мы сосредоточимся на опции Положение 3D сцены (3D Scene Position).

Щёлкните по иконке секундомера чтобы Включить анимацию ключевых кадров (Enable Keyframe Animation). Это действие добавит первый ключевой кадр в шкале времени, обозначенный жёлтым ромбиком.

Поскольку ключевой кадр анимации включен, Photoshop автоматически добавит ключевой кадр, когда вы внесёте изменения в положение сцены (или вращения).Прежде чем начать вращать сцену, необходимо указать, как долго будет длиться анимация.  Для этого перетащите индикатор текущего времени (обозначается синим слайдером) в другую точку на временной шкале.

Шаг 8

Вернитесь в 3D палитру активируйте слой Сцена (Scene) и перейдите в палитру Свойства (Properties). Щёлкните иконку Координаты (Coordinate) и измените на оси Y значение угла на 360 градусов. Это будет вращать сцену вокруг ее Оси Y на 360 градусов.

Обратите внимание, что после этих действий на шкале времени был добавлен новый ключевой кадр. Используя индикатор текущего времени (голубой слайдер), двигая его назад и вперёд, вы можете просматривать процесс анимации 3D объекта. Так как наш 3D листик был помещен в самый центр нашей сцены, мы будем видеть его вращающимся на месте.

Шаг 9

Наша цель состоит в том, чтобы 3D объект листик постоянно вращался вокруг своей оси, но показывал всё время только свою переднюю часть. Чтобы сделать это, нужно сначала дублировать слой Leaf в палитре слоёв. Обратите внимание, что копия слоя  с листиком сразу же появится и в шкале времени.

Теперь очистим шкалу времени, чтобы 3D объект листик делал три четверти оборота.

Подведите курсор к началу видео-слоя с копией листика. Когда курсор изменится на значок с видом квадратной скобки с двумя стрелочками, перетащите слой к красной линии. Этот видео-слой теперь будет обрезан и его анимация начнётся после трёх четвертей оборота.

На этот раз нужно очистить первую часть нашей анимации. Для этого нужно найти точку, в которой объект листик поворачивается на одну четверть. Активируйте видео- слой Leaf в Шкале времени (Timeline) и перетащите его конец к красной линии как показано на скриншоте.

Наконец сдвиньте видео-слой с копией листика к новой красной линии. Убедитесь, что ваша анимация проходит гладко.

Шаг 10

Прежде чем продолжить создание нашей анимации, мы должны указать программе какие именно кадры хотим использовать. Используйте индикатор текущего времени, чтобы определить точку, где наш объект появляется, чтобы сделать полный оборот. Теперь сдвиньте к красной линии ползунок Задать конец рабочего участка, который находится под тайм баром. После этих действий в анимации будут показаны только эти кадры.

Шаг 11

Наша работа с подготовкой анимации завершена и нам пора заняться её сохранением в формате GIF. Рассмотрим два варианта. Первый – быстрое сохранение с низким качеством.  Второй вариант займет больше времени, но позволит нам сохранить высококачественный GIF.Вариант 1 – идём в меню Файл – Сохранить для Web (File > Save for Web). Эта опция пропускает процесс рендеринга и сохранит кадры, какие они есть в нашем документе. Идем дальше, и изменяем настройки по своему усмотрению.  Нажмите кнопку Сохранить, когда закончите.

Ниже приведен пример окончательной анимации с использованием Вариант 1 без рендеринга.  Обратите внимание, что края листьев появляются зубчатые.

Шаг 12

Вариант 2 – требует рендеринга нашей сцены. Это настоятельно рекомендуется для улучшения качества конечного продукта. Идём в меню Файл – Экспортировать – Просмотреть видео (File > Export > Render Video) и внесите изменения, как показано на скриншоте. Убедитесь, что у вас установлен параметр  Последовательность изображений Photoshop (Photoshop Image Sequence) для выхода и Окончательная трассировка лучей (Ray Traced Final). Этот метод сделает нашу сцену в виде отдельных кадров.

После того как все кадры пройдут рендеринг, мы сможем открыть их как анимацию. Идём в меню Файл – Открыть как (File > Open As) и перейдите к папке, которую вы создали для обработанных кадров. Выберите первый кадр и внизу окна поставьте флажок на опции Последовательность изображений (Image Sequence). Теперь нажмите кнопку Открыть (Open ) и в следующем диалоговом окне подтвердите ОК.

После этих действий кадры, которые прошли рендеринг, автоматически появятся новой анимацией в новой шкале времени.

Финальный шаг. Чтобы сохранить анимацию в формате GIF, просто повторите Шаг 11, и все готово!

Автор: Stephen Petrany

photoshop-master.ru

Логотип 3D в программе Photoshop

Любой компании которая занимается бизнесом, нужен логотип. Наличие логотипа является очень важным аспектом бизнеса, особенно, когда вам нужно рекомендовать свои продукты или услуги потребителю.

Есть много способов, создать логотип, но одно можно сказать точно: вам нужен четкий и привлекательный логотип. Один из замечательных способов сделать логотип на котором остановится взгляд клиента, сделать его 3D.

В сегодняшнем уроке я покажу Вам, как создать простой, но потрясающий объёмный логотип, используя только программу Photoshop.

Шаг 1

Сначала нам нужно создать новый файл размером 600px 400px в ширину и в высоту с разрешением 72 точки на дюйм.

Логотип в программе Photoshop, шаг 1
Шаг 2

Создайте новый слой orb . Выберем цвет # 77d7ff и создадим довольно большой круг в центре холста.

Логотип в программе Photoshop, шаг 2
Шаг 3

Выбираем цвета # 000000 и # 77d7ff. Дважды щелкните на слой круга, чтобы открыть окно параметров наложения. Установите флажок наложение градиента а затем измените параметры, как показано на картинке.

Логотип в программе Photoshop, шаг 3
Шаг 4

Продолжаем делать наш шар более круглой формы, выбираем Внутренняя тень. Введите те же настройки, как показано ниже на рисунке, и нажмите OK, чтобы изменения вступили в силу.

Логотип в программе Photoshop, шаг 4
Шаг 5

Создайте новый слой и с помощью инструмента перо и сделайте изогнутую дугу по всей поверхности шара. Смотрите ниже для ясности.

Логотип в программе Photoshop, шаг 5

Залить новый путь цветом #008aff.

Логотип в программе Photoshop, шаг 5-1

Убедитесь, что вы находитесь на слое шара и выберите пустое пространство вокруг него. Вернуться к вновь созданной кривой и удалить лишнее, вне шара.

Логотип в программе Photoshop, шаг 5-2
Шаг 6

В параметрах наложения, выбираем пункт Тиснение и используйте настройки, показанные на рисунке ниже. Нажмите OK, когда вы закончите.

Логотип в программе Photoshop, 6.
Шаг 7

На новом слое с правой стороны создайте еще одну изогнутую форму, но на этот раз с закруглением вверху.

Логотип в программе Photoshop, шаг 7

Заливаем новый путь цветом # 008aff и выполняем действия шага 5. Смотрите ниже для ясности.

Логотип в программе Photoshop, шаг 7-1
Шаг 8

Настройки в параметрах наложения:

Логотип в программе Photoshop, шаг 8

Результат.

Логотип в программе Photoshop, шаг 8-1
Шаг 9

Нам нужно добавить градиент для этой части кривой, поэтому, убедившись, что цвет переднего плана # 008aff и ваш фон # 00000, в параметрах наложения выбираем наложение градиента. Используйте настройки, показанные ниже, и нажмите OK.

Логотип в программе Photoshop, шаг 9

Изогнутая часть слоя orb теперь будет выглядеть более объёмной.

Логотип в программе Photoshop, шаг 9-1
Шаг 10

Создайте маленький кружок в центре слоя orb . Убедитесь, что он не касается краев кривых. Заливаем круг цветом # 77d7ff. Это будет ваш отступ.

Логотип в программе Photoshop, 10.

Далее в параметрах наложения используем настройки тиснения. Нажмите OK, когда закончите.

Логотип в программе Photoshop, 10-1

Вот так ваше изображение должно выглядеть сейчас.

Логотип в программе Photoshop, 10-2
Шаг 11

На новом слое создадим меньший круг в середине. Заливаем цветом # ff6c00.

Логотип в программе Photoshop, шаг 11.
Шаг 12

Изменим цвет фона # ffbb03 и оставим цвет переднего плана. Перейдите в параметры наложения наложите градиент, убедитесь, что ваш градиент отражает выбранный цвет переднего плана и фона. Используйте настройки, показанные на рисунке ниже. Нажмите OK, когда вы закончите.

Логотип в программе Photoshop, шаг 12

Вот так orb должен выглядеть.

Логотип в программе Photoshop, шаг 12-1
Шаг 13

Продолжаем придавать нашему мини-шару объёмный вид в параметрах наложения на первом слое выбираем поле внутренняя тень. Используйте следующие настройки.

Логотип в программе Photoshop, шаг 13

Для поля Тень используйте настройки, описанные ниже.

Логотип в программе Photoshop, шаг 13-1

Наш слой мини-orb должен выглядеть 3D.

Логотип в программе Photoshop, шаг 13-2
Шаг 14

Что бы сделать платформу, сделайте новый слой и с помощью и нарисуйте прямоугольник под шаром. Не забудьте оставить достаточное пространство между двумя элементами. Заливаем прямоугольник цветом # ffbb03.

Логотип в программе Photoshop, шаг 14

Далее трансформируем прямоугольник искажая перспективу, придавая ему вид, верхней части. Нажмите OK, когда закончите, чтобы изменения вступили в силу.

Шаг 15

Создаем новый слой и установите цвет переднего плана на # ffcb17, используйте лассо для создания лицевой стороны платформы.

Логотип в программе Photoshop, шаг 15
Шаг 16

Используйте тот же метод, как и выше, чтобы создать сторону, но на этот раз убедитесь, что цвет # ffc600.

Логотип в программе Photoshop, шаг 16
Шаг 17

Должно создаться впечатление как бут то шар плавает над площадкой, создаём овальный в новый слой и заливаем его цветом # 000000.

Логотип в программе Photoshop, шаг 17

Измените непрозрачность 50% и размыть в 8px.

Логотип в программе Photoshop, шаг 17-1
Шаг 18

Вам потребуется создать тень для платформы. Убедитесь, что вы используете инструмент прямоугольная область, и поместить этот новый слой ниже поля слоя элементов. Используйте инструмент искажение по мере необходимости и, как и раньше, измените непрозрачность 50% и применить размытие 8px, для тени.

Логотип в программе Photoshop, шаг 18
Шаг 19

Создайте новый слой и сделать небольшое кольцо в центре мини-orb. Добавить рамку 2px и залить цвет # ff6305.

Логотип в программе Photoshop, шаг 19

Затем, добавим белый круг, чтобы перекрывать левую верхнею часть кольца.

Логотип в программе Photoshop, шаг 19-1 Логотип в программе Photoshop, шаг 19-2
Шаг 20

Можно добавить белое свечение за шаром. Теперь вы можете установить размер и переместить ваш логотип, а также добавить нужный текст и красочные градиентный фон.

Логотип в программе Photoshop, готово
В заключение

Проектирование идеального логотипа далеко не простое дело, но, как только вы узнаете несколько дизайнерских приемов, задача станет легче, но в любом случае нужно практиковаться. При разработке логотипа, вы должны принять во внимание направление вашего бизнеса или название компании, целевая аудитория, и предоставляемых услуг. Представить, возможно ли реализовать эти идеи в дизайн. Не забывайте, нацарапать неожиданные творческие идеи логотипа, на всякий случай.

www.pixelcom.crimea.ua

Создаём 3D анимацию логотипа в Фотошоп

В этом уроке вы узнаете, как сделать объёмным плоский логотип с помощью 3D инструментов и оживить его, используя новую Шкалу времени (Timeline) в Photoshop CS6.

Детали урока.

Программа: Adobe Photoshop CS6 ExtendedСложность: средняяПредполагаемый срок завершения: 1 час + время рендерингаФинальный результат

Для прохождения урока загрузите логотип ресурса Envato.

Примечание переводчика: стоит заметить, что для этого урока потребуются значительные ресурсы вашего компьютера, так как рендеринг длится достаточно долго. Логотип, предоставленный для использования -  большого размера, поэтому предлагаю сразу уменьшить его для работы.

Шаг 1

Откройте логотип в Photoshop. Обратите внимание, что файл с расширением PNG -это важно, потому что он содержит прозрачность и так будет удобнее, когда мы будем преобразовывать объект в 3D.  Сейчас нет необходимости корректировать размер логотипа, так как мы будем изменять его в конце, при сохранении анимации.

Шаг 2

Выберите инструмент Рамка (Crop Tool) и расширьте верх и низ документа, чтобы увеличить пространство для нашей сцены. Нажмите Enter, чтобы принять изменения.

Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите текст Envato, исключая листик логотипа и внизу палитры слоёв нажмите кнопку Добавить слой маску (Add Layer Mask). Это действие позволит выделить только текст.

Шаг 3

Чтобы облегчить задачу, автор переименовал слой с видимым текстом на Text. Создайте копию этого слоя, переименуйте её в Leaf и сделайте активной маску слоя. После этого мы сможем её редактировать. Теперь нажмите комбинацию клавиш Ctrl + I, чтобы инвертировать маску. Таким образом, на этом слое будет виден только лист, а текст будет исключен. Результат должен выглядеть идентично оригиналу изображения с логотипом, которые мы открыли в начале урока.  Разница лишь в том, что текст и значок листика в настоящее время на отдельных слоях.

Делаем активным слой с листиком Leaf и идём в меню Слои – Слой маска – Применить( Layer > Layer Mask > Apply). Это действие позволит удалить все пиксели, которые были скрыты под маской.

Теперь идём в меню 3D и выбираем пункт Новая 3D-экструзия из выделенного слоя (3D > New 3D Extrusion From Selected Layer). После этого вы будете автоматически перемещены в 3D пространство, где будете работать с 3D сценой. Если этого не произошло, вы можете самостоятельно включить его в меню Окно – Рабочая среда - 3D (Window> Workspace> 3D). Обратите внимание, что теперь слой с листиком является 3D слоем в палитре слоёв.

Шаг 4

Перейдите в 3D палитру, выделите объект Leaf (обозначается значком звезды) и включите палитру Свойства (Properties). В настройках палитры установите Глубину экструзии (Extrusion Depth) на 35 и снимите флажки с опций Захват тени (Catch Shadows) и Наложить тени (Cast Shadows).

Теперь нам нужно переместить объект Leaf точно в центр сцены. Прежде чем мы это сделаем, для удобства изменим вид нашей камеры. Выделите Текущий вид (Current View) в 3D палитре и выберите настройку Сверху (Top) для опции Вид (View) в палитре Свойства (Properties).

Используя экранные рычаги управления 3D объектом, переместите листик точно в центр сцены, который обозначается пересечением красной и синей линиями.

Примечание переводчика: для того чтобы элементы управления стали видимыми, щёлкните курсором по 3D объекту.

Шаг 5

В настоящее время наш документ имеет вид сверху. Для изменения и сброса вида камеры в палитре Свойства (Properties) установите вид По умолчанию (Default Camera). Обратите внимание, что 3D объект Leaf не окажется в правильном положении.  Мы исправим это в следующем шаге.

Исправим положение листика. Используйте инструменты камеры в верхнем меню, которые показаны на скриншоте. Перемещайте камеру до правильного размещения логотипа. Просто перемещая камеру, мы можем добиться вида объекта в надлежащем положении. Важно, что на самом деле, таким образом, не двигается 3D объект, как это было в шаге 4.

Шаг 6

Примечание переводчика: Важно, перед началом создания анимации, продумайте какой у вас будет фон, например - цвет, градиент Необходимо подготовить фоновый слой заранее самым нижним в палитре слоёв. Автор не говорит об этом, но у него завершённая анимация с белым фоном.

Теперь мы готовы к создании анимации. Откройте Шкалу времени (Timeline) и нажмите кнопку Создать временную шкалу для видео (Create Video Timeline). Если вы не видите в рабочем пространстве программы шкалу времени, вы можете её открыть в меню Окно – Шкала времени (Window > Timeline).

Когда вы сделаете это, то увидите, что все слои отображаются в виде отдельных видео-слоёв в шкале времени. В нашем случае это будет два видео-слоя.

Шаг 7

Так как нужно анимировать листик, нам необходимо получить доступ к его свойствам в шкале времени. Чтобы раскрыть список свойств, которые могут быть анимированы, щёлкните по маленькой стрелке напротив названия видео-слоя. Для этой анимации мы сосредоточимся на опции Положение 3D сцены (3D Scene Position).

Щёлкните по иконке секундомера чтобы Включить анимацию ключевых кадров (Enable Keyframe Animation). Это действие добавит первый ключевой кадр в шкале времени, обозначенный жёлтым ромбиком.

Поскольку ключевой кадр анимации включен, Photoshop автоматически добавит ключевой кадр, когда вы внесёте изменения в положение сцены (или вращения).Прежде чем начать вращать сцену, необходимо указать, как долго будет длиться анимация.  Для этого перетащите индикатор текущего времени (обозначается синим слайдером) в другую точку на временной шкале.

Шаг 8

Вернитесь в 3D палитру активируйте слой Сцена (Scene) и перейдите в палитру Свойства (Properties). Щёлкните иконку Координаты (Coordinate) и измените на оси Y значение угла на 360 градусов. Это будет вращать сцену вокруг ее Оси Y на 360 градусов.

Обратите внимание, что после этих действий на шкале времени был добавлен новый ключевой кадр. Используя индикатор текущего времени (голубой слайдер), двигая его назад и вперёд, вы можете просматривать процесс анимации 3D объекта. Так как наш 3D листик был помещен в самый центр нашей сцены, мы будем видеть его вращающимся на месте.

Шаг 9

Наша цель состоит в том, чтобы 3D объект листик постоянно вращался вокруг своей оси, но показывал всё время только свою переднюю часть. Чтобы сделать это, нужно сначала дублировать слой Leaf в палитре слоёв. Обратите внимание, что копия слоя  с листиком сразу же появится и в шкале времени.

Теперь очистим шкалу времени, чтобы 3D объект листик делал три четверти оборота.

Подведите курсор к началу видео-слоя с копией листика. Когда курсор изменится на значок с видом квадратной скобки с двумя стрелочками, перетащите слой к красной линии. Этот видео-слой теперь будет обрезан и его анимация начнётся после трёх четвертей оборота.

На этот раз нужно очистить первую часть нашей анимации. Для этого нужно найти точку, в которой объект листик поворачивается на одну четверть. Активируйте видео- слой Leaf в Шкале времени (Timeline) и перетащите его конец к красной линии как показано на скриншоте.

Наконец сдвиньте видео-слой с копией листика к новой красной линии. Убедитесь, что ваша анимация проходит гладко.

Шаг 10

Прежде чем продолжить создание нашей анимации, мы должны указать программе какие именно кадры хотим использовать. Используйте индикатор текущего времени, чтобы определить точку, где наш объект появляется, чтобы сделать полный оборот. Теперь сдвиньте к красной линии ползунок Задать конец рабочего участка, который находится под тайм баром. После этих действий в анимации будут показаны только эти кадры.

Шаг 11

Наша работа с подготовкой анимации завершена и нам пора заняться её сохранением в формате GIF. Рассмотрим два варианта. Первый – быстрое сохранение с низким качеством.  Второй вариант займет больше времени, но позволит нам сохранить высококачественный GIF.Вариант 1 – идём в меню Файл – Сохранить для Web (File > Save for Web). Эта опция пропускает процесс рендеринга и сохранит кадры, какие они есть в нашем документе. Идем дальше, и изменяем настройки по своему усмотрению.  Нажмите кнопку Сохранить, когда закончите.

Ниже приведен пример окончательной анимации с использованием Вариант 1 без рендеринга.  Обратите внимание, что края листьев появляются зубчатые.

Шаг 12

Вариант 2 – требует рендеринга нашей сцены. Это настоятельно рекомендуется для улучшения качества конечного продукта. Идём в меню Файл – Экспортировать – Просмотреть видео (File > Export > Render Video) и внесите изменения, как показано на скриншоте. Убедитесь, что у вас установлен параметр  Последовательность изображений Photoshop (Photoshop Image Sequence) для выхода и Окончательная трассировка лучей (Ray Traced Final). Этот метод сделает нашу сцену в виде отдельных кадров.

После того как все кадры пройдут рендеринг, мы сможем открыть их как анимацию. Идём в меню Файл – Открыть как (File > Open As) и перейдите к папке, которую вы создали для обработанных кадров. Выберите первый кадр и внизу окна поставьте флажок на опции Последовательность изображений (Image Sequence). Теперь нажмите кнопку Открыть (Open ) и в следующем диалоговом окне подтвердите ОК.

После этих действий кадры, которые прошли рендеринг, автоматически появятся новой анимацией в новой шкале времени.

Финальный шаг. Чтобы сохранить анимацию в формате GIF, просто повторите Шаг 11, и все готово!

Автор: Stephen Petrany

Переводчик: Рыбка

Источник

www.webakvarel.com

Создаём 3D анимацию логотипа в Фотошоп

В этом уроке вы узнаете, как сделать объёмным плоский логотип с помощью 3D инструментов и оживить его, используя новую Шкалу времени (Timeline) в Photoshop CS6.

Детали урока.

Программа: Adobe Photoshop CS6 ExtendedСложность: средняяПредполагаемый срок завершения: 1 час + время рендерингаФинальный результат

Для прохождения урока загрузите логотип ресурса Envato.

Примечание переводчика: стоит заметить, что для этого урока потребуются значительные ресурсы вашего компьютера, так как рендеринг длится достаточно долго. Логотип, предоставленный для использования -  большого размера, поэтому предлагаю сразу уменьшить его для работы.

Шаг 1

Откройте логотип в Photoshop. Обратите внимание, что файл с расширением PNG -это важно, потому что он содержит прозрачность и так будет удобнее, когда мы будем преобразовывать объект в 3D.  Сейчас нет необходимости корректировать размер логотипа, так как мы будем изменять его в конце, при сохранении анимации.

Шаг 2

Выберите инструмент Рамка (Crop Tool) и расширьте верх и низ документа, чтобы увеличить пространство для нашей сцены. Нажмите Enter, чтобы принять изменения.

Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите текст Envato, исключая листик логотипа и внизу палитры слоёв нажмите кнопку Добавить слой маску (Add Layer Mask). Это действие позволит выделить только текст.

Шаг 3

Чтобы облегчить задачу, автор переименовал слой с видимым текстом на Text. Создайте копию этого слоя, переименуйте её в Leaf и сделайте активной маску слоя. После этого мы сможем её редактировать. Теперь нажмите комбинацию клавиш Ctrl + I, чтобы инвертировать маску. Таким образом, на этом слое будет виден только лист, а текст будет исключен. Результат должен выглядеть идентично оригиналу изображения с логотипом, которые мы открыли в начале урока.  Разница лишь в том, что текст и значок листика в настоящее время на отдельных слоях.

Делаем активным слой с листиком Leaf и идём в меню Слои – Слой маска – Применить( Layer > Layer Mask > Apply). Это действие позволит удалить все пиксели, которые были скрыты под маской.

Теперь идём в меню 3D и выбираем пункт Новая 3D-экструзия из выделенного слоя (3D > New 3D Extrusion From Selected Layer). После этого вы будете автоматически перемещены в 3D пространство, где будете работать с 3D сценой. Если этого не произошло, вы можете самостоятельно включить его в меню Окно – Рабочая среда – 3D (Window> Workspace> 3D). Обратите внимание, что теперь слой с листиком является 3D слоем в палитре слоёв.

Шаг 4

Перейдите в 3D палитру, выделите объект Leaf (обозначается значком звезды) и включите палитру Свойства (Properties). В настройках палитры установите Глубину экструзии(Extrusion Depth) на 35 и снимите флажки с опций Захват тени (Catch Shadows) и Наложить тени (Cast Shadows).

Теперь нам нужно переместить объект Leaf точно в центр сцены. Прежде чем мы это сделаем, для удобства изменим вид нашей камеры. Выделите Текущий вид (Current View) в 3D палитре и выберите настройку Сверху (Top) для опции Вид (View) в палитре Свойства (Properties).

Используя экранные рычаги управления 3D объектом, переместите листик точно в центр сцены, который обозначается пересечением красной и синей линиями.

Примечание переводчика: для того чтобы элементы управления стали видимыми, щёлкните курсором по 3D объекту.

Шаг 5

В настоящее время наш документ имеет вид сверху. Для изменения и сброса вида камеры в палитре Свойства (Properties) установите вид По умолчанию (Default Camera). Обратите внимание, что 3D объект Leaf не окажется в правильном положении.  Мы исправим это в следующем шаге.

Исправим положение листика. Используйте инструменты камеры в верхнем меню, которые показаны на скриншоте. Перемещайте камеру до правильного размещения логотипа. Просто перемещая камеру, мы можем добиться вида объекта в надлежащем положении. Важно, что на самом деле, таким образом, не двигается 3D объект, как это было в шаге 4.

Шаг 6

Примечание переводчика: Важно, перед началом создания анимации, продумайте какой у вас будет фон, например – цвет, градиент Необходимо подготовить фоновый слой заранее самым нижним в палитре слоёв. Автор не говорит об этом, но у него завершённая анимация с белым фоном.

Теперь мы готовы к создании анимации. Откройте Шкалу времени (Timeline) и нажмите кнопку Создать временную шкалу для видео (Create Video Timeline). Если вы не видите в рабочем пространстве программы шкалу времени, вы можете её открыть в меню Окно – Шкала времени (Window > Timeline).

Когда вы сделаете это, то увидите, что все слои отображаются в виде отдельных видео-слоёв в шкале времени. В нашем случае это будет два видео-слоя.

Шаг 7

Так как нужно анимировать листик, нам необходимо получить доступ к его свойствам в шкале времени. Чтобы раскрыть список свойств, которые могут быть анимированы, щёлкните по маленькой стрелке напротив названия видео-слоя. Для этой анимации мы сосредоточимся на опции Положение 3D сцены (3D Scene Position).

Щёлкните по иконке секундомера чтобы Включить анимацию ключевых кадров (Enable Keyframe Animation). Это действие добавит первый ключевой кадр в шкале времени, обозначенный жёлтым ромбиком.

Поскольку ключевой кадр анимации включен, Photoshop автоматически добавит ключевой кадр, когда вы внесёте изменения в положение сцены (или вращения).Прежде чем начать вращать сцену, необходимо указать, как долго будет длиться анимация.  Для этого перетащите индикатор текущего времени (обозначается синим слайдером) в другую точку на временной шкале.

Шаг 8

Вернитесь в 3D палитру активируйте слой Сцена (Scene) и перейдите в палитру Свойства (Properties). Щёлкните иконку Координаты (Coordinate) и измените на оси Y значение угла на 360 градусов. Это будет вращать сцену вокруг ее Оси Y на 360 градусов.

Обратите внимание, что после этих действий на шкале времени был добавлен новый ключевой кадр. Используя индикатор текущего времени (голубой слайдер), двигая его назад и вперёд, вы можете просматривать процесс анимации 3D объекта. Так как наш 3D листик был помещен в самый центр нашей сцены, мы будем видеть его вращающимся на месте.

Шаг 9

Наша цель состоит в том, чтобы 3D объект листик постоянно вращался вокруг своей оси, но показывал всё время только свою переднюю часть. Чтобы сделать это, нужно сначала дублировать слой Leaf в палитре слоёв. Обратите внимание, что копия слоя  с листиком сразу же появится и в шкале времени.

Теперь очистим шкалу времени, чтобы 3D объект листик делал три четверти оборота.

Подведите курсор к началу видео-слоя с копией листика. Когда курсор изменится на значок с видом квадратной скобки с двумя стрелочками, перетащите слой к красной линии. Этот видео-слой теперь будет обрезан и его анимация начнётся после трёх четвертей оборота.

На этот раз нужно очистить первую часть нашей анимации. Для этого нужно найти точку, в которой объект листик поворачивается на одну четверть. Активируйте видео- слой Leaf вШкале времени (Timeline) и перетащите его конец к красной линии как показано на скриншоте.

Наконец сдвиньте видео-слой с копией листика к новой красной линии. Убедитесь, что ваша анимация проходит гладко.

Шаг 10

Прежде чем продолжить создание нашей анимации, мы должны указать программе какие именно кадры хотим использовать. Используйте индикатор текущего времени, чтобы определить точку, где наш объект появляется, чтобы сделать полный оборот. Теперь сдвиньте к красной линии ползунок Задать конец рабочего участка, который находится под тайм баром. После этих действий в анимации будут показаны только эти кадры.

Шаг 11

Наша работа с подготовкой анимации завершена и нам пора заняться её сохранением в формате GIF. Рассмотрим два варианта. Первый – быстрое сохранение с низким качеством.  Второй вариант займет больше времени, но позволит нам сохранить высококачественный GIF.Вариант 1 – идём в меню Файл – Сохранить для Web (File > Save for Web). Эта опция пропускает процесс рендеринга и сохранит кадры, какие они есть в нашем документе. Идем дальше, и изменяем настройки по своему усмотрению.  Нажмите кнопку Сохранить, когда закончите.

Ниже приведен пример окончательной анимации с использованием Вариант 1 без рендеринга.  Обратите внимание, что края листьев появляются зубчатые.

Шаг 12

Вариант 2 – требует рендеринга нашей сцены. Это настоятельно рекомендуется для улучшения качества конечного продукта. Идём в меню Файл – Экспортировать – Просмотреть видео (File > Export > Render Video) и внесите изменения, как показано на скриншоте. Убедитесь, что у вас установлен параметр  Последовательность изображений Photoshop (Photoshop Image Sequence) для выхода и Окончательная трассировка лучей (Ray Traced Final). Этот метод сделает нашу сцену в виде отдельных кадров.

После того как все кадры пройдут рендеринг, мы сможем открыть их как анимацию. Идём в меню Файл – Открыть как (File > Open As) и перейдите к папке, которую вы создали для обработанных кадров. Выберите первый кадр и внизу окна поставьте флажок на опции Последовательность изображений (Image Sequence). Теперь нажмите кнопку Открыть(Open ) и в следующем диалоговом окне подтвердите ОК.

После этих действий кадры, которые прошли рендеринг, автоматически появятся новой анимацией в новой шкале времени.

Финальный шаг. Чтобы сохранить анимацию в формате GIF, просто повторите Шаг 11, и все готово!

Источник: photoshop-master.ru

bb3x.ru


Смотрите также