Как сделать историю в фотошопе
Обновлено: 21.11.2024
Создание шаблонов для ваших историй в Instagram — это отличный способ сэкономить время, представить свой бренд и создать увлекательные истории, которые ваши подписчики не захотят пропустить. В этом сообщении блога вы узнаете, как редактировать шаблоны Instagram Stories с помощью Adobe Photoshop! Если вы редактируете Instagram Stories с помощью шаблонов Photoshop, у вас есть бесконечные творческие возможности, давая
Последнее обновление: 6 марта 2019 г.
Будьте в курсе главных тенденций маркетинга в социальных сетях!
Создание шаблонов для ваших историй в Instagram — это отличный способ сэкономить время, представить свой бренд и создать увлекательные истории, которые ваши подписчики не захотят пропустить. В этом сообщении блога вы узнаете, как редактировать шаблоны Instagram Stories с помощью Adobe Photoshop!
Если вы редактируете истории Instagram с помощью шаблонов Photoshop, у вас есть бесконечные творческие возможности, что дает вам возможность создавать и создавать увлекательные истории без особых усилий.
Готовы начать? Посмотрите наше пошаговое видеоруководство по редактированию шаблонов Instagram Stories с помощью Adobe Photoshop:
Как редактировать шаблоны Instagram Stories с помощью Adobe Photoshop
Поскольку многие бренды, компании и влиятельные лица пытаются создать эстетику бренда в Instagram, важно, чтобы эта эстетика была неизменной и в ваших историях Instagram.
Использование шаблонов Instagram Stories — это простой способ сделать ваши истории такими же фирменными, как и ваша лента.
Но если вас пугает мысль о создании Instagram Stories в Adobe Photoshop, вы не одиноки!
Оказалось, что использовать Photoshop для Instagram Stories не так уж сложно, если вы начинаете с шаблона, и мы расскажем вам о каждом этапе процесса редактирования в этой записи блога (или посмотрите видео выше!).< /p>
Существует множество шаблонов, которые можно приобрести у создателей Instagram и влиятельных лиц, но если вы хотите сразу приступить к работе, вы можете загрузить бесплатные шаблоны Photoshop для Instagram Stories от Later.
Для загрузки Photoshop вам потребуется учетная запись Adobe, но если он уже установлен на вашем компьютере, вы можете сразу перейти к нашим шагам ниже!
Помните, что Adobe Photoshop не является бесплатным программным обеспечением, поэтому вам необходимо приобрести лицензию, если вы еще этого не сделали (начиная с 9,99 долларов США в месяц).
Если вы хотите начать работу с нашими 19 бесплатными шаблонами Instagram Stories, введите свой адрес электронной почты ниже, и мы отправим файлы прямо на ваш почтовый ящик!
После получения сообщения электронной почты нажмите кнопку "Загрузить сейчас".
На ваш компьютер будет загружен ZIP-файл, содержащий все файлы шаблонов Photoshop, файлы шрифтов (подробнее об этом мы поговорим позже) и руководство по использованию шаблонов!
Примечание. Существует множество различных способов редактирования в Photoshop, и разные авторы по-разному работают! Поэтому, если вы редактируете шаблоны Instagram Stories от других авторов, у них могут быть другие рекомендации по редактированию своих шаблонов в Photoshop.
После загрузки ZIP-файла на компьютер откройте его, чтобы разархивировать.
Для пользователей Mac: начните с открытия файла Typeface и дважды щелкните оба файла с названиями «Montserrat — Bold» и «Montserrat — Regular» внутри папки. Появится всплывающее окно с указанием шрифта, а затем нажмите «Установить шрифт». Если вы работаете с ПК с Windows, выполните следующие действия.
После установки шрифтов вы можете открыть Photoshop на рабочем столе. Отсюда вы можете выбрать «Файл» > «Открыть» и выбрать шаблон из папки «Поздние шаблоны», с которой вы хотите работать на рабочем столе.
Поддержание эстетики в Instagram Stories очень важно для сохранения единого внешнего вида на всех ваших платформах и повышения узнаваемости бренда.
Одна из лучших особенностей редактирования историй Instagram с помощью Photoshop заключается в том, что вы действительно можете точно определить и оформить свои истории в соответствии с цветовой палитрой вашего бренда.
Вот как изменить цвет в шаблоне Instagram Stories с помощью Photoshop:
Нажмите значок «Слои» в правом углу панели управления Photoshop. Он выглядит как два квадрата, наложенные друг на друга.
Откроется окно с параметрами редактирования редактируемых слоев изображения.
Нажмите на группу "Фон" в окне "Слои" (найдите значок папки) и выберите цвет, который хотите изменить.
Чтобы настроить цвет, нажмите на маленький квадратный значок поверх цвета шаблона.
Откроется окно выбора цвета. Вы можете перемещать маленький кружок по цветовой палитре или перемещать стрелки вверх и вниз по цветовой шкале, чтобы выбрать именно тот цвет, который вы хотите попробовать.
Или, если у вас уже есть активы и цвета, выбранные для вашего бренда, вы можете использовать поля RGB или ввести точный цветовой код!
Повторите описанные выше шаги для каждого слоя в шаблоне, чтобы отредактировать дизайн в соответствии с вашей цветовой палитрой.
Если вы ищете вдохновение для цвета, вы можете использовать инструмент Adobe Color CC!
Это действительно простой и интуитивно понятный инструмент, который позволяет экспериментировать с цветовыми тонами и предлагает цветовую палитру или комбинацию, которые дополняют друг друга. Вы даже можете взглянуть на монохроматические цветовые палитры, если хотите найти разные варианты одного и того же цвета, которые хорошо сочетаются друг с другом.
Если у вас есть отличные изображения для ваших историй в Instagram, и вы хотите найти цвета для использования в своем шаблоне, которые дополнят их, инструмент может даже извлечь варианты цвета из фотографии!
Просто загрузите изображение с помощью значка камеры в правом верхнем углу экрана, и оно будет содержать несколько цветовых комбинаций, которые будут хорошо сочетаться с этой фотографией!
Вы можете экспериментировать с различной насыщенностью, тонами и оттенками в параметрах отображения.
И если вы действительно хотите сфокусироваться на нескольких выбранных цветах, просто нажмите и перетащите маленькие кружки на изображении туда, где вы хотите сфокусироваться.
Уровень детализации при выборе цвета в этом инструменте невероятен — вы действительно можете поэкспериментировать с правильным тоном желтого или самым ярким уровнем оранжевого, который вы хотите для своих фотографий, и все это происходит всего за несколько секунд!
Как только вы будете довольны своей цветовой палитрой, выбранной из вашего изображения, просто нажмите «Сохранить» и назовите новую цветовую палитру. Затем вы можете загрузить его на свой рабочий стол, где его можно добавить в образцы цветов Photoshop!
Чтобы импортировать новую цветовую палитру в Photoshop:
Перейдите в "Окно" и выберите "Образцы".
Откроется еще одно окно редактирования ваших образцов.
Нажмите на маленький квадрат в углу окна редактирования образцов и выберите «Загрузить образцы».
Это откроет ваши файлы. Просто найдите и выберите только что загруженный файл образцов Adobe Color CC.
Затем цвета появятся в папке с образцами в Photoshop.
Теперь вам нужно переместить окно редактирования образцов в сторону экрана, подальше от шаблона, но в пределах легкого доступа.
Вернитесь в окно редактирования слоев и выберите раздел шаблона, который вы хотите изменить.
Затем коснитесь маленького квадратика внутри параметра цвета и наведите курсор на образцы. Курсор примет форму пипетки, и вы сможете навести курсор на только что добавленные образцы цветов и щелкнуть, чтобы выбрать тот, который хотите использовать.
Затем вы можете поэкспериментировать со всеми настраиваемыми элементами в своем шаблоне и назначить цвет из своих образцов.
Не знаете, с чего начать, когда дело доходит до брендинга вашей компании в Instagram Stories? Не волнуйтесь! Посмотрите наше бесплатное видеоруководство, которое поможет вам найти и создать потрясающую эстетику для ваших историй в Instagram и получить больше подписчиков!
Теперь, когда у вас есть фирменные цвета, пришло время добавить фотографии и оформить историю!
Если вы считаете свои истории в Instagram продолжением своей ленты, попробуйте использовать в своих шаблонах изображения одинаково высокого качества и соответствующие общей эстетике вашего бренда!
Вот как редактировать изображения в шаблонах Instagram Stories с помощью Photoshop
Для начала откройте окно редактирования слоев в правой части рабочего стола Photoshop. Если вы не видите поле редактирования «Слои», вы можете перейти на панель навигации в верхней части экрана и нажать «Окно» > «Слои».
Выберите папку «Изображения» и нажмите стрелку вниз рядом со значком папки.
Откроется список изображений, которые уже присутствуют в шаблоне. Чтобы изменить их, нажмите на маленький квадратный значок в углу предварительного просмотра изображения в окне редактирования слоя.
При этом изображение откроется на другой вкладке, и при желании вы сможете отредактировать существующее изображение на этой вкладке.
Но если вы хотите заменить свое изображение, откройте свои файлы, щелкните и перетащите изображение, которое хотите вставить в свой шаблон, на новую вкладку, которая открылась для изображения.
Чтобы изменить размер, не забудьте щелкнуть и перетащить, удерживая кнопку Shift на клавиатуре, чтобы изображение не искажалось и сохраняло правильное соотношение сторон.
Если вас устраивает размер и расположение нового изображения, нажмите «Файл» > «Сохранить», чтобы сохранить его.
Затем вернитесь на вкладку редактирования шаблона и посмотрите, как он будет выглядеть после загрузки нового изображения!
Вы можете повторить этот шаг с любыми другими изображениями в вашем шаблоне и заменить их своими собственными. Просто не забудьте отредактировать новое изображение на вкладке, которая открывается, когда вы выбираете изображение позже в поле «Позднее редактирование».
Самое лучшее в создании шаблонов Instagram Stories в Photoshop — это то, что все можно настраивать, включая шрифты! Использование фирменного шрифта — отличный способ сделать ваши истории узнаваемыми.
Если вы еще не придумали какой-то конкретный шрифт, одним из лучших мест, где можно найти красивые и бесплатные шрифты для ваших шаблонов Instagram Stories, является Google Fonts!
Вы можете выполнить поиск по всем вариантам бесплатных шрифтов Google и уточнить поиск, если у вас уже есть нужный шрифт. Просто нажмите кнопку "Фильтр" и выберите параметры, которые лучше всего подходят к стилю вашего бренда.
Помните, что шрифты в ваших историях Instagram должны быть четкими и легко читаемыми. Экран вашего телефона и размеры Instagram Stories не оставляют вам много места для работы, поэтому вы должны убедиться, что ваши шрифты максимально просты и четки.
Или, если вы знаете точное название шрифта, который хотите использовать, например Roboto, просто введите его в строку поиска!
Вы также можете увидеть такие параметры, как вес шрифта, полужирный и курсив. Вы также можете просмотреть только алфавит, вместо образца предложения, просто коснитесь первого раскрывающегося меню под названием вашего шрифта и выберите «Алфавит».
После того, как вы выбрали шрифт, нажмите на маленький красный значок плюса над шрифтом, чтобы выбрать его. В нижней части экрана появится всплывающее окно. Затем щелкните это поле.
Оттуда вы можете нажать кнопку «Загрузить» в правом верхнем углу, и ваши файлы начнут загружаться на ваш компьютер.
Как и в случае с файлами шрифтов шаблонов Later Instagram Stories, вам нужно будет дважды щелкнуть этот файл после его полной загрузки и выбрать «установить». Затем ваши файлы шрифтов будут добавлены на ваш компьютер и появятся в раскрывающемся списке параметров шрифтов в Photoshop!
Чтобы изменить шрифт и образец текста для любой части контента в шаблоне Instagram Stories в Photoshop, просто выберите текстовый слой в окне редактирования слоя.
Чтобы изменить текст, выберите слой контента, который вы хотите изменить, нажмите T на клавиатуре и начните вводить новый текст!
После того как вы вставили новый текст, вы можете изменить шрифт, размер, толщину шрифта или сделать его курсивным, полужирным или светлым, используя параметры на панели инструментов в верхней части экрана редактирования.
Наконец, чтобы изменить цвет текста, выделите текст, который хотите изменить, а затем перейдите к значку в правом нижнем углу, который выглядит как два цветных квадрата друг над другом.
Нажмите на поле с текущим цветом вашего текста, чтобы открыть инструмент выбора цвета. Опять же, как и при редактировании цвета, вы можете поиграть с цветовым кругом или выбрать из своих образцов, чтобы изменить цвет шрифта текста в Instagram Stories!
Готовы опубликовать свои индивидуальные истории в Instagram? Нет ничего проще!
Выберите «Файл» > «Экспорт» в Photoshop и выберите «Сохранить для Интернета».
Здесь вы сможете изменить некоторые настройки файлов, но для изображений из социальных сетей вы можете использовать расширение файла .jpg, .jpg или .jpg. Мы рекомендуем сохранить его в виде файла .jpg или файла .jpg.
Если вы считаете, что размер файла может быть слишком большим — в зависимости от размера файла фотографий, которые вы использовали в своих шаблонах, общий размер экспортируемого вами файла шаблона Instagram Stories может быть довольно большим — вы можете использовать процентное поле, чтобы при необходимости уменьшить размер.
Нажмите «Сохранить», назовите файл и сохраните его в папке или на рабочем столе.
Пришло время перенести файлы с рабочего стола на телефон. Вы можете использовать Airdrop, если вы являетесь пользователем Mac, или Dropbox также является отличным способом сохранения и синхронизации файлов на рабочем столе с приложением на вашем телефоне.
После того как вы сохранили свой шаблон Instagram Stories в фотопленке своего телефона, вы готовы загрузить его и поделиться им со своими подписчиками!
Знаете ли вы, что вы также можете запланировать Instagram Stories с Later прямо со своего рабочего стола?
Теперь вы можете заранее планировать свои публикации в Instagram Stories, планировать их на лучшее время для вашей аудитории и публиковать в Instagram с помощью простого уведомления по телефону! Легкий!
Научиться редактировать истории Instagram с помощью Photoshop — это отличная инвестиция не только в будущее вашего аккаунта в Instagram, но и в ваше собственное профессиональное развитие!
Вы не только повысите уровень своих Instagram-историй с помощью персонализированных и отобранных постов, которые идеально соответствуют вашей общей эстетике ленты, но и приобретете ценные навыки редактирования фотографий в Photoshop.
Не забывайте! Наши 19 шаблонов Instagram Stories совершенно бесплатны и могут оказаться у вас в папке «Входящие» за считанные минуты!
Опубликовано 18 апреля 2020 г.
Введение
Истории Instagram – очень важный маркетинговый инструмент. Делитесь с подписчиками привлекательными визуальными эффектами, которые помогут повысить узнаваемость бренда и увеличить число потенциальных клиентов.По данным Statista, ежемесячно насчитывается более 1 миллиарда активных пользователей Instagram, и более 500 миллионов из них используют Instagram Stories каждый день.
Вы будете конкурировать со всеми на платформе, как с потребителями, так и с брендами, за внимание людей, поэтому вам нужно продемонстрировать свой бренд как можно лучше. Я покажу вам несколько простых примеров, которые дадут вам основу, необходимую для создания потрясающих историй в Instagram и публикации их для вашей аудитории.
Пример 1 — Подкаст/шоу на YouTube
В этом первом примере мы создадим рекламную историю Instagram для подкаста или шоу на YouTube. Создание такого дизайна позволит вам многократно использовать шаблон, вам просто нужно будет изменить фоновое изображение в зависимости от тематики и текст в зависимости от номера эпизода.
Для начала откройте Adobe Photoshop CC 2020. Вы можете использовать более старые версии Photoshop для создания историй в Instagram, но я буду использовать их последнюю версию в этом блоге.
Создайте новый документ, выбрав «Файл», «Создать новый». Назовите документ Instagram Story. Установите ширину на 1080 пикселей и высоту на 1920 пикселей. Затем установите разрешение 96 пикселей/дюйм. Остальные настройки не так важны, но вы можете установить их так, как показано на скриншоте ниже.
Теперь, когда мы создали наш документ, давайте сначала добавим наше фоновое изображение. Изображение, которое я использую для этого примера, можно найти здесь. Лично мне нравится загружать все мои стоковые изображения в максимально возможном разрешении, поэтому при загрузке с UnSplash выберите «Исходный размер». Причина, по которой я это делаю, заключается в том, чтобы обеспечить гибкость при форматировании изображений для кросс-платформенных маркетинговых кампаний.
Нажмите и перетащите изображение в наш документ Photoshop из Finder (Mac) или проводника (Windows). Отформатируйте фоновое изображение, чтобы оно соответствовало размеру документа, с помощью инструмента «Свободное преобразование» [Редактировать, Свободное преобразование]. Отцентрируйте туфли и переместите их в верхнюю половину документа, чтобы освободить место для нашего текста позже.
Затем добавьте фигуру по всему изображению с помощью инструмента «Прямоугольник» на панели инструментов. Сочетание клавиш «U» для доступа к этой опции. Сделайте форму черной и установите непрозрачность фигуры на 40%. Причина добавления слоя формы состоит в том, чтобы сделать ваш текст легко видимым независимо от того, какое изображение используется в качестве фона. Ваш документ должен выглядеть как скриншот 1 ниже.
Добавьте текст с помощью инструмента «Горизонтальный текст». Сочетание клавиш «T» для доступа к этой опции. Напишите текст Sneaker Haul в две строки и установите белый цвет. Я использую шрифт Bebas. Выровняйте текст по нижней половине документа.
Далее добавьте прямоугольник и поместите его над текстом. Установите желтый цвет (шестнадцатеричный код: FFDE00) или любой другой цвет по вашему выбору. Добавьте в документ еще один текстовый слой и напишите «Эпизод 2» и поместите текст поверх фигуры. Убедитесь, что этот текстовый слой находится над слоем с фигурой, иначе текст будет скрыт за ним. Ваш документ должен выглядеть так, как показано на скриншоте 2 выше.
Поэкспериментируйте с дизайном и добавьте больше элементов, чтобы создать что-то, что будет соответствовать вашему бренду. Важно отметить, что вы должны оставить пространство вверху и внизу документа, а точнее 250 пикселей. Когда вы загружаете свою историю в Instagram, пользовательский интерфейс платформы будет занимать это место. Такие функции, как ваше имя пользователя и изображение в верхней части экрана, а также кнопка комментария внизу экрана.
Пример 2 – Бьюти-блогер
В следующем примере мы создадим рекламную историю Instagram для бьюти-блогера. Этот дизайн можно использовать для анонса нового видео на YouTube или публикации в блоге на вашем сайте. Скорректируйте окончательный дизайн, чтобы он соответствовал вашему бренду.
Для начала создайте новый документ или используйте существующий документ, созданный в примере 1. Если вы не следовали примеру 1 и начинаете здесь, прокрутите вверх до короткого абзаца и изображения в настройках документа Photoshop.
Измените цвет фона на любой другой. В этом примере я использовал розовый (шестнадцатеричный код: FBCCCB). Затем добавьте свое изображение в формате PNG в документ, перетащив изображение из Finder (Mac) или проводника (Windows). Я использовал это бесплатное стоковое изображение, которое я нашел в Интернете, и вырезал женщину из фона с помощью инструмента выделения. Для доступа к этой опции используется сочетание клавиш «W».
Чтобы использовать инструмент быстрого выделения, выделите область, которую вы хотите оставить на изображении, и вы увидите, что область выделения появится поверх изображения. Если вы допустили ошибку, выберите кисть минус выделения в верхнем левом углу панели инструментов Photoshop. Если вы довольны своим выбором, нажмите Удалить на клавиатуре, чтобы удалить фон с изображения.
Далее я добавил обводку к изображению женщины. Для этого дважды щелкните слой, чтобы открыть панель «Стиль слоя». Выберите «Обводка» и установите размер от 10 до 20, положение снаружи и белый цвет.Поместите изображение в нижнюю половину документа, чтобы оставить место для текста в верхней половине. Ваш документ должен выглядеть примерно так, как показано на скриншоте 3 ниже.
Добавьте в документ небольшой широкий прямоугольник белого цвета. Я смещаю прямоугольник на угол -3°, используя инструмент Free Transform [Edit, Free Transform]. Затем добавьте текстовый слой и напишите «Поговорим» и поместите текст поверх прямоугольника. В этом примере я использовал шрифт Dear Joe 6.
Наконец, добавьте еще один текстовый слой и напишите College, Careers & More и разместите текст справа от изображения. Я использовал для этого шрифт Amatic. На этом дизайн Beauty Blogger для Instagram Stories завершен. Ваш документ должен выглядеть так, как показано на скриншоте 4 выше.
Поэкспериментируйте с макетом в соответствии с вашим брендом, но этот простой дизайн можно использовать несколько раз для продвижения контента на других платформах социальных сетей еженедельно или ежемесячно.
Пример 3 – Интернет-магазин электронной коммерции
В нашем последнем примере мы создадим рекламную историю Instagram для интернет-магазина электронной коммерции, продающего одежду. Этот дизайн можно использовать для продажи любого предмета одежды, украшений и обуви или для рекламы ваших подписчиков, что я и рассмотрю в этом примере.
Создайте новый документ или используйте существующий документ, созданный в примере 1 или 2. Если вы не следовали примеру 1 или 2 и начинаете с примера 3, прокрутите вверх до короткого абзаца и изображения в настройках документа Photoshop. чтобы начать.
Установите черный цвет фона. Дважды щелкните слой, чтобы открыть панель стилей слоя. Выберите «Обводка» и установите размер 60, положение внутри и белый цвет. Теперь у вас должна быть белая рамка вокруг документа.
Добавьте изображение продукта или модели в документ, перетащив изображение из Finder (Mac) или Проводника (Windows). В качестве примера я использовал это бесплатное стоковое изображение с Unsplash. Затем перейдите в «Изображение» в системе верхнего меню Photoshop и выберите «Настройка», а затем выберите «Черно-белое». Вы можете пропустить этот шаг, если хотите, чтобы ваше изображение было цветным.
Убедившись, что ваше изображение находится поверх фонового слоя, перейдите в раздел «Слой» в верхнем меню и выберите «Создать обтравочную маску». Это поместит ваше изображение внутрь слоя формы. Ваше изображение должно выглядеть так, как показано на скриншоте 5 ниже.
Создайте квадрат с помощью инструмента "Прямоугольник", удерживая нажатой клавишу Shift при перетаскивании. Я сделал квадрат 800px 2 . Установите непрозрачность на 50 % и расположите квадрат в нижней половине изображения.
Добавьте свой текст поверх квадрата и напишите «Распродажа». В этом примере я использовал шрифт DearJoe 6. Под этим текстом добавьте текст «Все продукты», а также проведите пальцем вверх. Здесь я использовал шрифт Bebas. Под текстом «Все продукты» я добавил линию с помощью инструмента «Прямоугольник». Просто создайте широкий и тонкий прямоугольник, чтобы добиться этого эффекта.
Добавьте белый круг с помощью инструмента «Эллипс». Чтобы переключиться с инструмента «Прямоугольник», просто удерживайте параметр мышью, чтобы получить доступ к дополнительным инструментам в этом разделе. Чтобы нарисовать идеально круглый круг, удерживайте клавишу Shift на клавиатуре, пока рисуете круг. Я добавляю тонкую тень к кругу, чтобы избавиться от края формы. Для этого дважды щелкните слой, чтобы открыть панель «Стиль слоя». Установите черный цвет, непрозрачность 30% и размер 15 пикселей.
Наконец, добавьте еще один текстовый слой поверх круга и напишите 15%. Для этого я снова использовал шрифт Bebas. На этом дизайн интернет-магазина электронной коммерции для Instagram Stories завершен. Ваш документ должен выглядеть так, как показано на скриншоте 6 выше.
Заключение
Как видно из примеров, вариантов может быть множество. Цель этого блога — дать вам основу для создания потрясающих историй в Instagram и публикации их для вашей аудитории с помощью Adobe Photoshop CC 2020. Надеюсь, вы нашли ее полезной.
Если вы хотите больше подобного контента, подпишитесь на наш список рассылки ниже. В будущем вы будете получать уведомления о новых сообщениях в блогах, а также полезные руководства, шаблоны и учебные пособия, которыми мы также делимся. Кроме того, следите за нами в социальных сетях, чтобы узнать, над чем мы работаем. Все наши платформы указаны ниже.
В этом уроке я расскажу о различных шагах, которые я предпринимаю, чтобы создать простую анимацию в Photoshop для историй и публикаций в Instagram, от настройки вашего файла Photoshop до экспорта и загрузки в Instagram. Я расскажу о трех основных анимациях: трансформация, непрозрачность и положение маски слоя. Хотя инструменты анимации в Photoshop ограничены, как только вы освоите основы, у вас все равно останется бесконечное количество возможностей для создания быстрых анимированных историй и постов в Instagram. Вы можете либо следовать инструкциям, создав свой собственный дизайн с нуля, либо загрузить мой шаблон в конце страницы и начать с раздела анимации. Вы можете найти три примера анимированных шаблонов Instagram для загрузки в конце страницы здесь
Полный набор шаблонов можно купить здесь
1. Настройте PSD
Откройте Photoshop и создайте документ нестандартного размера, вам понадобится разрешение 72ppi и цветовой режим RGB. Для Instagram Stories вы хотите создать документ размером 1080 пикселей (ширина) x 1920 пикселей (высота). Для квадратной публикации размер должен быть 1080 x 1080 пикселей.
1. Подготовка дизайна и анимации
Я собираюсь использовать простой дизайн распродажи с фоновым фото, заголовком, подзаголовком и кнопкой. Для справки вы можете найти полный файл с именем «2_Sale_across_store.psd» в образце файла внизу страницы.
Шаг 1. Организуйте свои слои.
Чтобы упростить обновление и анимацию, я разбиваю свои слои по следующим папкам: "Фон", "Фотографии", "Фигуры" и "Текст".
Шаг 2. Добавьте фоновое изображение.
Убедитесь, что выбрана папка с изображениями, и выберите «Файл» > «Поместить встроенное изображение», чтобы импортировать изображение. Затем щелкните правой кнопкой мыши слой изображения и преобразуйте его в смарт-объект. Если вы добавляете маску к своему изображению, мне проще сначала добавить ее, а затем преобразовать слой в смарт-объект. Таким образом, смарт-объект будет содержать маску и облегчит обновление файла другими изображениями.
Шаг 3. Добавьте свой текст.
Я выбрал заголовок "СКИДКА 20%" в две строки и подзаголовок "избранные товары в магазине". Для заголовка я использовал «Space Mono» и «EB Garamond» для подзаголовка. Не забудьте добавить каждую строку текста в виде отдельного слоя, чтобы их было легче анимировать позже.
Шаг 4. Добавьте подчеркивание заголовка.
Чтобы сделать заголовок более заметным, я добавил к заголовку несколько подчеркиваний. Нажмите "U", чтобы нарисовать прямоугольники внизу текста.
Шаг 5. Откройте окно временной шкалы анимации
Мы почти готовы начать анимацию! Перейдите в «Окно» > «Временная шкала», затем нажмите «Создать временную шкалу видео». Если ваш экран выглядит примерно так, как показано на снимке экрана ниже, мы готовы приступить к работе.
2. Анимация
Полезно иметь грубый план различных этапов анимации и типов анимации, которые вы хотите использовать на каждом этапе. Обычно я сначала делаю набросок на бумаге. Порядок, который я решил использовать, следующий: 1) Фоновое изображение скользит справа. 2) Текст появляется построчно, раскрывается маской в нижней части текста. 3) Кнопка исчезает
Шаг 1. Анимация фонового изображения
Найдите слой Photo в окне временной шкалы и найдите слой преобразования. Убедитесь, что ваше изображение находится в центре экрана, переместите синюю стрелку так, чтобы ваша временная шкала находилась на 20-м кадре. Теперь нажмите на секундомер слева от слоя, чтобы создать первый ключевой кадр. Теперь перетащите синюю стрелку обратно к первому кадру и нажмите значок ромба рядом с секундомером, чтобы создать второй ключевой кадр. В том же кадре нажмите V и, удерживая Shift, перетащите изображение горизонтально вправо, чтобы оно оказалось за пределами экрана. Теперь, когда вы перемещаете временную шкалу от 0 до 20, вы должны увидеть, как изображение перемещается справа в центр вашего дизайна.
Чтобы закончить анимацию изображения, мы добавим анимацию непрозрачности. Найдите слой «Непрозрачность» в окне временной шкалы и перейдите к кадру 20. Как и раньше, нажмите на секундомер, чтобы создать первый ключевой кадр непрозрачности. Теперь вернитесь к первому ключевому кадру и нажмите значок ромба слева от секундомера и измените непрозрачность слоя (в правом верхнем углу панели слоев) до 25%. Теперь нажмите пробел, и вы должны увидеть, как ваше изображение скользит и исчезает в поле зрения.
Шаг 2. Анимация текста и подчеркивания
<р>1. Покажите подчеркивания.Я собираюсь сделать так, чтобы подчеркивание текста появлялось немного перед текстом, поэтому найдите верхний прямоугольный слой в окне временной шкалы. Теперь прокрутите окно временной шкалы до кадра 01:00 и нажмите секундомер на слое непрозрачности. Затем просто перейдите к предыдущему кадру (29) и нажмите на ромб, чтобы создать ключевой кадр и уменьшить непрозрачность до 0%. Это просто заставит линию появиться. Повторите это для второго прямоугольника, установив ключевые кадры на 1:20 (100% непрозрачность) и 1:19 (0% непрозрачность) <р>2. Покажите заголовок с помощью анимации слоя-маски.
Найдите и выберите верхний текстовый слой «20%», нажмите M, чтобы нарисовать рамку вокруг слоя. Затем щелкните значок «Добавить маску слоя» (обведенный квадратом) в нижней части меню слоев, чтобы замаскировать текст.
В окне временной шкалы анимации вы должны увидеть слой под названием «Положение маски слоя». Давайте анимируем текстовую маску сразу после появления первого подчеркивания. Перейдите к кадру 1:19 и нажмите на секундомер. Затем нажмите на ромб для следующего ключевого кадра в кадре 1:09. Теперь нам нужно переместить маску так, чтобы она двигалась вверх, открывая текст. На кадре 01:09 выберите маску (щелкните черный прямоугольник на текстовом слое), нажмите v и перетащите маску прямо под текст. Теперь маска должна быть анимирована. Повторите этот шаг для второй строки текста "ВНЕ ПРОДАЖА" с кадра 1:29 до 2:09.
Чтобы закончить анимацию текста, мы хотим добавить переход непрозрачности, аналогичный тому, что мы сделали с фоновым изображением. Выбрав текстовый слой «20%», перейдите к кадру 1:20 и нажмите секундомер на слое непрозрачности. Затем перейдите к кадру 1:09 и установите непрозрачность слоя на 0%. Теперь повторите это для слоя «ВНЕ ПРОДАЖИ» с непрозрачностью слоя 100% на кадре 2:09 и 0% на кадре 1:29. Наконец, нам нужно сделать это для слоя подзаголовка с непрозрачностью слоя 100% на кадре 2:24 и 0% на кадре 2:19.
Анимация кнопки
Чтобы закончить анимацию, я добавлю к кнопке простое постепенное появление. На этот раз нам нужно выбрать всю группу «BUTTON», а не один слой. В окне временной шкалы нажмите стрелку слева от группы, чтобы открыть свойства анимации. Перейдите к кадру 3:14 и нажмите секундомер на слое непрозрачности, затем установите следующий ключевой кадр на 3:04 и измените непрозрачность слоя на 0%.
Моя милая клиентка Тейлор на днях связалась со мной, желая узнать, насколько сложно ей будет создавать больше шаблонов в Photoshop, подобных тем, которые я предоставил ей во время ее ребрендинга.
Ей очень понравились шаблоны, и они действительно помогли ей упростить процесс и делиться более последовательным контентом в своих историях в Instagram, поэтому она хотела создать больше шаблонов к предстоящему свадебному сезону.
Вместо того, чтобы отправить ее в Google, я сказал ей, что это будет идеальная запись в блоге для меня. Я большой поклонник шаблонов Photoshop со смарт-объектами, и на самом деле я создал несколько разовых обучающих видео по этому вопросу, так почему бы просто не собрать все это вместе в сообщении в блоге?
Тейлор даже позволила мне позаимствовать несколько ее изображений для этого урока!
Я большой поклонник использования смарт-объектов в Photoshop для создания шаблонов, которые можно использовать снова и снова для быстрого (и простого) создания коллажей для историй в Instagram или других социальных сетях.
В этом посте я покажу вам от начала до конца процесс создания собственных на бренде шаблонов смарт-объектов Photoshop.
Настройка шаблона:
Шаг 1. Настройте холст
Очень понятно, но первым шагом в этом процессе является настройка холста в Photoshop. Необходимый размер будет зависеть от платформы социальных сетей, которую вы используете, но в этом примере мы создаем шаблон истории Instagram, поэтому мы будем использовать 1080 пикселей в ширину и 1920 пикселей в высоту.
Шаг 2. Создайте каркас
Прежде чем мы начнем добавлять красивые картинки, логотипы и другие элементы бренда, я хотел бы получить общее представление о том, как должен выглядеть окончательный макет. Может быть, у вас уже есть идея, или вы начинаете с нуля — в любом случае это нормально.
Для этого я начинаю добавлять цветные блоки с помощью инструмента «Прямоугольник», вот так:
На самом деле не имеет значения, какого они цвета, и вы всегда можете поиграть с макетом и т. д. в зависимости от того, что вы задумали!
Шаг 3. Переименование слоев Преобразование в смарт-объекты
Кроме того, я предпочитаю держать свои файлы фотошопа в чистоте и порядке, особенно если позже я буду делиться ими с клиентами или другими людьми. Хотя я могу точно знать, как я это настроил, я не хочу тратить чье-то время на поиск слоев.
Шаг 4. Преобразование в смарт-объекты
Затем мы преобразуем фигуры/прямоугольники в смарт-объекты. Это то, что на самом деле превратит это в шаблон, который мы сможем легко использовать в будущем!
Щелкните правой кнопкой мыши на каждом из ваших слоев и выберите "Преобразовать в смарт-объект"
После выполнения этого шага ваш шаблон готов к использованию!
Теперь, когда шаблон настроен, начинается самое интересное. Не забудьте сохранить psd-файл, чтобы при необходимости вернуться к нему.
Чтобы поместить изображение в прямоугольник, дважды щелкните значок прямо на миниатюре. Это откроет ваш прямоугольник на новой вкладке в Photoshop.
Размещение изображения:
В открывшейся новой вкладке поместите нужное изображение на место. Возможно, вам придется настроить его по размеру или даже увеличить/уменьшить масштаб, чтобы продемонстрировать нужные вам детали.
После того, как изображение окажется на своем месте, нажмите "Сохранить" на открывшейся вкладке изображения и закройте ее.
Вы увидите, что теперь ваше изображение помещено в один из ваших фреймов. Повторите шаги для оставшихся прямоугольников, чтобы заполнить шаблон.
Сохраните изображение:
Теперь все, что вам нужно сделать, это перейти в меню «Файл» -> «Сохранить как» и сохранить изображение в виде файла png или файла jpeg. Затем вы можете либо сохранить свой шаблон с изображениями, либо оставить его с цветными прямоугольниками для следующего создания коллажа.
И все! Вы успешно создали свой собственный шаблон Photoshop для использования в своем бизнесе! Это один из моих любимых способов создания клиентских шаблонов, особенно для фотографов, поскольку эти файлы легко обновлять, но при этом сохраняется целостность бренда.
Ищете помощь в продвижении собственного бренда и веб-сайта для вашего творческого бизнеса? Вы находитесь в правильном месте. Нажмите ниже, чтобы узнать больше о стратегии моего бренда и услугах веб-дизайна для творческих предпринимателей!
Читайте также: