6. Делаем собственный тизер

  • 8
  • 31.07.2014

Доброго дня, мой дорогой читатель! Начиная с 25 июля, в этой ветке — мы начинаем публиковать серию статей об арбитраже тизерного трафика. Данное мероприятие проводится с нашей стороны абсолютно бесплатно благодаря нашим друзьям и партнёрам из CPA сети M1-SHOP.RU — регистрируйтесь по ссылке для дальнейшего обучения в рамках нашего бесплатного тренинга.

reklpost

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

Не знаю, и даже представить себе не могу, кем бы я был сейчас и где находился, если бы в моей жизни не было одного правила, которому я четко следовал – если хочешь сделать хорошо, сделай это сам. Я практически никогда не отдаю работу на аутсорс или заказываю ее на стороне – нужны были сайты, я научился верстать сайты, нужна была графика – я научился рисовать графику, нужен хостинг, домены, сервер – я учился все это обслуживать и настраивать, и так было везде. Сейчас, начиная какие-то крупные проекты, я стараюсь уйти от этого стереотипа, не везде он работает и очень часто приходится делегировать работу, чтобы не терять продуктивности, но чтобы понимать, как все работает и на чем держится, нужно хотя бы раз поработать с этим. Вы будете хреновым директором магазина, если не будете знать суть работы за кассой, не будете знать, где вас обманывают и обсчитывают. Вы будете паршивым маркетологом, если сами не занимались продажей и не ощущали на себе влияние определенных факторов. Вы не будете арбитражником, если не научитесь делать хорошие рекламные изображения.

Создаем собственный тизер

Работать я буду в программе PhotoshopCS3, найдёте на торрентах самостоятельно.

Для начала создаем новый проект, для этого жмем CTRL+N, и вводим атрибуты нового изображения, его высоту и ширину. Предположим, это будет 200х200 пиксельный квадрат.

1

Делать тизер я буду для оффера «Фонарь-электрошокер» в m1-shop’е. Хочу сделать крутой анимированный тизер и показать процесс его создания на его примере. Для того, чтобы сделать анимацию этого тизера, я сперва найду видео с фонарём-электрошокером в процессе его использования, а затем просто сделал парочку покадровых скриншотов. Как сделать скриншот – можно узнать в гугле.

2

Теперь мне нужно вставить все эти изображения в проект фотошопа. Для этого достаточно нажать сочетание клавиш CTRL+O и выбрать наши изображения. Можно выбрать все 4 сразу, и нажать «открыть».

3

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

4

Должны стать видны все рабочие области наших проектов, примерно вот так.

5

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

Чтобы это сделать, выбираем инструмент «перемещение» и нажимаем на изображение нашего скриншота с электрошокером, а затем, зажав кнопку мыши, перетаскиваем это изображение в рабочую область проекта нашего тизера (белый квадрат).

6

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

Если всё получилось, окно слоёв должно содержать 4 новых слоя, на которых и будут наши скриншоты с видео.

7

Теперь нам нужно выставить изображение так, чтобы в рабочей области был сам шокер, для этого, нам необходимо скрыть верхние слои (Слой 2, Слой 3, Слой 4), и с помощью всё того же инструмента «Перемещение» выставить изображение так, как мы этого хотим. Для того, чтобы скрыть слой, необходимо нажать на «глаз» в окне работы со слоями. Для того, чтобы двигать слой, необходимо выбрать и выделить Слой 1.

Должно быть вот так.

8

Далее в рабочей области нашего тизера двигаем мышью изображение.

9

Далее проделываем это со слоем выше – Слой 2. Но для того, чтобы видеть и попасть изображением в нужное нам место, нужно сделать Слой 2 прозрачнее, чтобы видеть и нижний слой, и верхний слой который мы двигаем, и путём наложения друг на друга сделать так, чтобы они «совпали». Для этого, включив новый слой, выделив его для перемещения, я выставляю ему параметр прозрачности на 50%.

10

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

11

Вот как теперь выглядят все выставленные слои.

12

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

13

Если все сделали правильно, оно должно появиться и выглядеть вот так.

14

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

15

Теперь нужно сделать так, чтобы на каждом кадре, отображалось то, что нужно нам. Для этого мы выбираем первый кадр, и скрываем из виду Слой 2, Слой 3, Слой 4. Берем второй кадр, и скрываем из виду Слой 1, Слой 3, Слой 4. Берем третий кадр, и скрываем из виду Слой 1, Слой 2, Слой 4. В четвертом кадре – думаю, сами догадались.

Выглядит это всё вот так.

Кадр 1:

16

Кадр 2:

17

Кадр 3:

18

Кадр 4:

19

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

20

Всё, анимация изображения готова, теперь я хочу сделать текст поверх анимации, со словом «АКЦИЯ!!!», который тоже будет мигать, но с интервалом раз в 2 кадра.

Для этого нужно выбрать инструмент «Горизонтальный текст» (горячая клавиша Т) и написать поверх изображения это слово, отредактировав затем его шрифт и цвет.

21

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

22

Перед нами откроется окно редактирования стилей текста, конкретно редактирование его обводки, тут мы можем выбрать цвет и толщину обводки нашего текста.

23

Предложенный цвет обводки и толщина в 3 пикселя меня вполне устраивают. Поэтому жмем «ДА» и делаем копию слоя. Для этого снова выбираем наш слой с текстом, и в меню жмем «Слой – создать дубликат слоя».

24

В итоге, мы должны получить 2 слоя с нашим текстом, выглядит это вот так.

25

Теперь нам нужно сделать так, чтобы обводка на слоях была разной, для этого два раза жмем на слово «Обводка» в окне работы со слоями, под слоем «АКЦИЯ!!! (копия)». Это снова откроет меню редактирования обводки, сделать это можно так-же из меню навигации, выделив слой, и выбрав в меню «Слой – Стиль слоя – Обводка».

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

Для этого выделяем первый кадр, и скрываем слой с синей обводкой, оставляя только красный. То же самое проделываем со вторым кадром.

26

На 3 и 4 кадре сделать наоборот, скрыть первый слой, который с красной обводкой, и оставить слой с синей обводкой, выглядеть это будет вот так.

27

Ну все, теперь сохраняем наш тизер в формате .gif

Для этого жмем «Файл – Сохранить как для Web и устройств…»

28

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

29

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

тизер

На самом деле всё просто, лично у меня на такой тизер уходит от двух до трёх минут. С вами был Эвик!

 

Оставить комментарий