Инстаграм.Основы | 11. Создание макета микро-лендинга для Instagram

Есть 2 варианта: делаем через сервис или пробуем сами. 

Вариант 1

Маленький сервис, который режет картинки для страниц-лендингов в Инстаграме. Не надо мучаться с ФШ. Загрузил, получил архив — всё. 

Ссылка на сервис - Instagram Cutter 

Вариант 2

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

1. Выбираем оффер

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

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

1) Взять несколько изображений товара и загрузить их в аккаунт; 
2) Сделать одну большую картинку и разрезать её на 9 маленьких, чтобы получился такой микро-лендинг. 
Давайте пойдём нестандартным путём и выберем второй вариант, т.к. с первым, в принципе всё понятно. 

2. Создаём макет микро-лендинга для Instagram

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

Открываем редактор и создаём новый документ размером 900 на 900 пикселей с белым фоном. 


После этого, сразу же зададим направляющие, по которым впоследствии будет «разрезаться» изображение. Жмём «Просмотр» —> «Новая направляющая» и ставим значение 300px. 


Далее делаем тоже самое со значением 600px и повторяем для горизонтальной ориентации. В результате получаем следующую картину в PS. 


Супер! 
Давайте сразу выберем инструмент «Заливка» (G) и зальём фон каким-нибудь не очень ярким цветом, например #fafafa.  

А ещё добавим вертикальные направляющие на 50px и 850px, чтобы внутри них можно было расположить текст и кнопки, и одну направляющую на 450px для центрирования. 


Далее нам необходимо поместить в центр изображение товара. Откуда его взять? Конечно же, с самого лендинга TeslaWatch! Немного пролистав вниз, мы находим картинку, которая нам лучше всего бы подошла – пять браслетов в разных цветах: 


Нужно её сохранить. Жмём правой кнопкой по изображению браслетов и… не видим кнопки «Сохранить изображение как»  А всё потому, что лендинг делали умные ребята, которым важна скорость его загрузки. Чтобы «выудить» это изображение, открываем исходный код страницы (ctrl+U в браузере типа Chrome) и нажимаем ctrl+F для поиска фразы «выбери свой». 


После этой фразы на лендинге идёт наше изображение, следовательно, оно спрятано в блоке <div class=”braclet”>. Запоминаем слово «braclet» и возвращаемся наверх страницы, чтобы найти файл стилей style.css.  

Кто немного знаком с вёрсткой, тот знает, что местоположение данного файла прописываете в теге <head>. Там мы его и находим. 


Открываем ссылку “.css/style.css” обычным щелчком мыши, в результате чего в новой вкладке загрузится файл стилей лендинга. Опять нажимаем ctrl+F для поиска фразы “braclet”. 


Видим, что это слово встречается на странице 20 раз, но нас интересует только то место, где прописывается путь до изображения с пятью браслетами, следовательно нам нужно смотреть только те строки, где есть расширение картинки *.jpg или *.png 


Вот они. Осталось подумать логически, какой файл за какое изображение отвечает. Скорее всего, наше изображение это braclets.png, т.к. оно лежит в стиле третьего слайда и в его названии используется множественное число. Выделяем и копируем фразу “/images/braclets.png” и возвращаемся на лендинг tesla-watch.ru. В поле адреса сайта в самый конец вставляем нашу скопированную фразу, чтобы получился следующий адрес: http://tesla-watch.ru/images/braclets.png и нажимаем Enter. 


То, что нужно! И вот теперь мы наконец-то можем нажать на картинку правой кнопкой и выбрать пункт «Сохранить изображение как…». 

Как видите, всё не так уж сложно  Открываем сохранённое изображение с помощью Adobe Photoshop, жмём на кнопку V (активируется инструмент «Перемещение») и перетаскиваем картинку в центр нашего макета. 


Теперь нужно добавить мотивирующий заголовок, который мы поместим сверху. Для этого нажимаем на U, выбираем инструмент «Прямоугольник со скругленными углами» и настраиваем следующим образом: заданный размер 800x150px, радиус скругления 40px, цвет #ff733f. 


Жмём левой кнопкой в любом месте макета и перетаскиваем наш прямоугольник таким образом, чтобы он оказался между крайними направляющими и отступом сверху ~10px. 


Жмём на английскую кнопку «T» (Инструмент: Текст) и пишем белым цветом внутри полученной фигуры то, что должно завлечь потенциальную аудиторию.  

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


Естественно, если вы проявите креатив, то у вас может получиться ещё круче. 
   
Итак, макет готов, осталось его нарезать таким образом, чтобы мы получили 9 изображений. Для этого используем «Инструмент: Раскройка» (C), с помощью которого мы делим наш макет на 9 равных частей, размером 300x300px. 


Практически, всё! Осталось только сохранить  
Открываем Файл – Сохранить для Web и устройств и сохраняем в нужную нам папку. 


Готово! Мы подготовили изображения для нашего рекламного аккаунта. Кстати, для особо ленивых, прикладываю .psd исходник, который можно скачать вот тут.  

Источник: sarkazm.name