Как сделать вращающийся логотип в Photoshop

Предусмотрительно сделанные анимированные логотипы привлекают внимание посетителей к вашему сайту и побуждают их просмотреть остальную часть страницы. Панель «Слои» Photoshop, инструмент «Трансформация» и панель «Таймлайн» работают вместе для создания анимированных изображений GIF, которые можно добавить на любую веб-страницу. Вы можете заставить свой логотип вращаться по часовой стрелке или против часовой стрелки.

Шаг 1

Откройте файл изображения логотипа. Используйте любой формат файла, но если файл представляет собой многослойный PSD, объедините слои.

Шаг 2

Создайте достаточно большой холст, чтобы полностью поместить логотип, который вы хотите повернуть. Например, если ваш логотип имеет ширину 300 пикселей и высоту 200 пикселей, нажмите «Файл», «Создать», а затем увеличьте высоту и ширину изображения до 300 пикселей. Выберите сплошной фон, который подходит к вашему логотипу и веб-сайту. Например, если логотип находится на белом фоне, выберите «Белый» для параметра «Фоновое содержимое».

Шаг 3

Введите имя для нового файла и нажмите «ОК», чтобы добавить пустой холст изображения.

Шаг 4

Щелкните меню "Окно" и выберите окно, содержащее логотип.

Шаг 5

Нажмите «Ctrl-A», чтобы выделить изображение целиком, а затем «Ctrl-C», чтобы скопировать его в буфер обмена.

Шаг 6

Щелкните меню «Окно», а затем выберите окно, содержащее пустой холст, который вы создали для размещения логотипа.

Шаг 7

Нажмите «Ctrl-V», чтобы вставить логотип на пустой холст.

Шаг 8

Нажмите «Ctrl-E», чтобы объединить вставленное изображение с фоновым изображением, оставив только один слой вместо двух.

Шаг 9

Создайте три копии текущего слоя. Щелкните меню «Слои», «Дублировать слой», а затем «ОК», чтобы создать каждый новый слой, содержащий копию исходного объединенного изображения. Photoshop называет слои за вас.

Шаг 10

Выберите первый слой из списка, начиная с верхней части панели «Слои», щелкните меню «Правка», «Преобразовать», а затем «Повернуть на 90º по часовой стрелке».

Шаг 11

Выберите второй слой в списке, нажмите меню «Редактировать», «Преобразовать», а затем «Повернуть на 180º».

Шаг 12

Выберите третий слой в списке, щелкните меню «Редактировать», «Преобразовать», а затем «Повернуть на 90º против часовой стрелки». Сохраните свою работу.

Шаг 13

Нажмите меню «Окно», «Временная шкала», а затем кнопку «Создать временную шкалу видео», чтобы добавить панель временной шкалы в свой проект. Панель «Таймлайн» содержит все четыре слоя логотипа. Если вы видите только три слоя, разблокируйте исходный слой.

Шаг 14

Уменьшите время отображения каждого слоя, установив его продолжительность на пять кадров. Нажмите и удерживайте мышь на правом краю каждого слоя на временной шкале и перетащите край влево, пока параметр «Длительность» не станет равным «00,05». Чем меньше кадров, тем быстрее крутится анимация.

Шаг 15

Оставьте нижний слой на временной шкале там, где он есть. Нажмите и удерживайте мышь в центре слоя чуть выше нижнего слоя на временной шкале и перетащите весь слой вправо, пока его левая сторона не выровняется с правым краем нижнего слоя. Если размер слоя изменяется, а не перемещается, нажмите «Ctrl-Z» и повторите попытку.

Шаг 16

Нажмите и удерживайте мышь на втором слое над нижним слоем на временной шкале и переместите слой вправо, пока левая сторона слоя не выровняется с правым краем слоя под ним.

Шаг 17

Нажмите и удерживайте мышь на верхнем слое на временной шкале и перетащите слой вправо, пока левая сторона слоя не совпадет с правым краем слоя под ним.

Шаг 18

Нажмите кнопку "Воспроизвести", чтобы просмотреть анимацию.

Шаг 19

Нажмите «Файл», а затем «Сохранить для Интернета».

Шаг 20

Щелкните раскрывающийся список «Параметры цикла» и выберите «Навсегда», чтобы создать анимированный логотип, который никогда не перестанет вращаться.

Шаг 21

Нажмите «Сохранить», а затем «Сохранить» в диалоговом окне «Сохранить оптимизированное как». Чтобы просмотреть анимацию, откройте созданный вами файл GIF в веб-браузере.

Совет

Чтобы логотип вращался плавно, добавьте дополнительные слои с меньшими пошаговыми изменениями между изображениями.

Предупреждение

Информация в этой статье относится к Photoshop CC 14.2.1. В других версиях Photoshop он может незначительно или значительно отличаться.