Создание макета микро-лендинга для 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
То, что нужно! И вот теперь мы наконец-то можем нажать на картинку правой кнопкой и выбрать пункт «Сохранить изображение как…».
Как видите, всё не так уж сложно Открываем сохранённое изображение с помощью Adobe Photoshop, жмём на кнопку V (активируется инструмент «Перемещение») и перетаскиваем картинку в центр нашего макета.
Теперь нужно добавить мотивирующий заголовок, который мы поместим сверху. Для этого нажимаем на U, выбираем инструмент «Прямоугольник со скругленными углами» и настраиваем следующим образом: заданный размер 800x150px, радиус скругления 40px, цвет #ff733f.
Жмём левой кнопкой в любом месте макета и перетаскиваем наш прямоугольник таким образом, чтобы он оказался между крайними направляющими и отступом сверху ~10px.
Жмём на английскую кнопку «T» (Инструмент: Текст) и пишем белым цветом внутри полученной фигуры то, что должно завлечь потенциальную аудиторию.
Под картинкой с браслетами также добавим немного текста с лендинга товара и завершим это крупной надписью «Заказывайте по ссылке в описании». Для написания нижнего текста мы использовали цвет #a73e5c и вот, собственно, что у нас получилось.
Естественно, если вы проявите креатив, то у вас может получиться ещё круче.
Итак, макет готов, осталось его нарезать таким образом, чтобы мы получили 9 изображений. Для этого используем «Инструмент: Раскройка» (C), с помощью которого мы делим наш макет на 9 равных частей, размером 300x300px.
Практически, всё! Осталось только сохранить
Открываем Файл – Сохранить для Web и устройств и сохраняем в нужную нам папку.
Сервис поддержки клиентов работает на платформе UserEcho