Как сделать портфолио для инстаграм
Портфолио в Инстаграм для творческих профессий
Для продвижения в Instagram в 2020 году придется постараться — на сайте уже более миллиарда пользователей, конкуренция огромна, поэтому обратить на себя внимание сложно. Интересно оформленное портфолио поможет выделиться среди конкурентов.
Важность портфолио для творческих профессий
Пользователи Инстаграм в первую очередь обращают внимание на визуал, а затем уже на текстовое наполнение. Именно через фотографии тренер, представитель бьюти-индустрии, креативщик, художник, фотограф, хендмейд мастер может продемонстрировать свое мастерство. Качественные снимки расскажут о работе мастера красноречивее любого описания.
Но уделить внимание оформлению портфолио стоит и журналистам, музыкантам, копирайтерам, айтишникам. Аккуратное портфолио как бы доказывает, что и к работе вы подходите серьезно.
Использование Инстаграм в привлечении заказчиков: как оформить портфолио
Аккуратно выглядят страницы с расположением связанных фотографий по горизонтали, вертикали, диагоналям, в шахматном порядке. Однако способ требует плановой выгрузки снимков.
Чуть нарушите график — и получите результат как здесь.
Фишкой аккаунта может стать повторяющийся элемент.
Рамки — тот элемент, который пригодится текстовикам, делающим упор на обложки.
Черно-белый аккаунт выглядит несколько однообразно, но демонстрирует, что фотограф нашел свой стиль.
Одинаковые фильтры помогают свести контент к единому стилю.
Расположение с учетом градиента — вариант для терпеливых.
Старомодные рамки, шрифты из 2000-х годов, фотографии плохого качества, личный контент вперемежку с работами — признаки непрофессионала.
Методы продвижения портфолио
У платных и бесплатных методов есть как плюсы, таки минусы.
Бесплатные методы
SFS продвижение
Совместный пиар используется как открыто, так и в завуалированной форме — как конкурс.
После скрытия лайков охваты в Инстаграме начали неизбежно падать. Лайк тайм — взаимная активность юзеров в профилях друг друга.
Тэги помогают найти профиль, без них вашу страницу отыщут разве что друзья. Также хештэги выводятся у пользователей, подписанных на тэг.
Комментарии в экспертных профилях
Экспертные высказывания в профилях популярных блогеров привлекают внимание к вашей странице.
Сервисы для продвижения
Всю работу можно перепоручить сервисам, которые подберут стратегию продвижения. Используются методы увеличения активности и накрутки живых комментариев, также есть сервисы для создания мультиссылки и биржи аналитики.
Используйте Zengram для автоматических лайков, подписок, отправки сообщений в Директ и обработки коммерческих аккаунтов.
Платные методы
Для серьезного продвижения бизнес-аккаунта используйте платные методы.
Реклама у блогеров
Заказ рекламы у добившихся популярности блогеров поможет привлечь заинтересованную аудиторию. Перед заказом рекламных постов стоит проверить статистику охвата публикаций. Искать блогеров можно на специальных биржах.
Таргетинг появился еще в 2015 году. Этот инструмент позволяет рекламировать профиль в новостной ленте.
Сервис Парсер необходим для сбора ЦА по геолокации, хештегам, возрасту, получения контактных данных, фильтрации готовой базы.
Создадим портфолио для Instagram в Photoshop
Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)
В этом уроке я расскажу вам о создании простого портфолио для Instagram. Мы будем использовать яркие изображения, чистую цветовую палитру и гладкие шрифты. Начнём с веб-версии, а затем я покажу вам, как её адаптировать для мобильных устройств.
Ресурсы урока
Для прохождения урока вам потребуются следующие (бесплатные) ресурсы:
Создаём документ
Шаг 1
Обратите внимание: разрешение 72 pixels/inch
Шаг 2
Установим направляющие, чтобы макет имел достаточно места и выглядел сбалансированным. Я не пользуюсь сеткой, но несколько направляющих помогут определить рамки страницы сайта. С помощью View > New Guide… установите направляющие. Я обычно выбираю ширину в 1000px и добавляю направляющие по углам для свободного пространства.
Внимание: размеры для урока: по вертикали 100px, 600px и 1100px.
Совет: для быстроты пользуйтесь плагином Photoshop GuideGuide.
Шаг 3
Придерживаясь этикета Photoshop, мы будем поддерживать порядок для навигации и редактирования. Создадим три группы слоёв: Заголовок, Фото и Контакты. Для этого перейдите по Layer > New > Group… и дайте слоям название. Для ускорения кликните по иконке.
Организация области Header
Заголовок (как бы то ни было) играет очень важную роль в привлечении внимания пользователей сайта. Для этого портфолио я буду использовать красивые снимки гор с намёком на приключение и вызов.
Шаг 1
Сначала создадим фоновое изображение. Внутри группы Header нарисуем цветной прямоугольник с помощью Rectangle Tool (U). У меня это прямоугольник размером 1200x600px, расположенный вверху документа.
Теперь загрузите Mountains photo, перетащите в документ Photoshop и поместите над слоем прямоугольника. Переименуйте слой с изображением, в моем случае я использовал IMG. Зажмите клавишу Alt и наведите курсор на слой с фотографией, пока не увидите маленькую стрелку, указывающую вниз, затем отпустите. Вы только что создали Clipping Mask.
Для изменения размера фото зажмите CMD+T.
Совет: удерживайте клавишу Shift для сохранения пропорций.
Шаг 2
Внесём некоторые изменения в нашем изображении, чтобы оно выглядело более ярким и запоминающимся. Создайте новый слой по имени Shadow с Clipping Mask, как мы сделали раньше. Затем выберите инструмент Gradient Tool (G) и установите цвета градиента от чёрного # 000000 к прозрачному, удерживая нажатой клавишу Shift от нижней части изображения до середины. Поставьте прозрачность слоя Opacity на 60%.
Обычно я использую эту технику, чтобы затемнить яркие изображения и помещать белый текст сверху.
Шаг 3
Для привлекательности добавим ещё несколько цветов в наш заголовок. Добавим слой по имени Gradient и применим Gradient Tool (G). Установите цвета градиента от фиолетового # 37056b к розовому # ff01fc (или любого другого цвета) и перетащите его из левого верхнего угла изображения в правый нижний угол. Уменьшите Opacity до 20%.
Шаг 4
Пора разместить в портфолио логотип. Выбрав Horizontal Type Tool (T), введите в название портфолио своё имя или никнейм. В этом уроке я пользуюсь стильным шрифтом Kaushan Script 21px размера. Поместите логотип в верхний левый угол вашего сайта рядом с вертикальной направляющей. Отодвиньте его на 50px, чтобы всё смотрелось чисто и профессионально.
Шаг 5
Добавим несколько иконок социальных сетей, чтобы людям было проще следовать за вами. Перетащите значки Facebook, Twitter и Instagram из Iconfinder в документ Photoshop, переименуйте слои, чтобы они были быстро узнаваемы и поместите их вверху справа возле направляющей. После этого щёлкните правой кнопкой мыши на одном из слоёв иконок, выберите Blending Options. и примените опцию Color Overlay с белым цветом #ffffff. То же самое проделайте с остальными значками.
Оставляйте достаточно места по сторонам и выравниваете значки по горизонтали с вашим логотипом.
Шаг 6
Закончим область Header. У нас есть красивое изображение и много места. Сделаем простое пояснение, чтобы посетители могли понять, что это за сайт.
С помощью инструмента Horizontal Type Tool (T) введите текст размером 36px шрифтом Lato (Black). Я написал «HELLO! I’M JONATHAN». На новой строке и с меньшим шрифтом введите ещё несколько слов о себе или своей работе, которые смогут заинтересовать посетителей. Я взял шрифт размером 16px Lato (Regular)
I love to travel all around the world and design beautiful things.
Убедитесь, что интервал достаточен для того, чтобы ваш текст мог дышать. Разместите текст посередине области Header.
Область Photos
В этой области мы помещаем фотографии из Instagram с примерами работ, квалифицирующих уровень художника или дизайнера.
Шаг 1
Для начала изменим фон этой области. Сверните группу заголовков, щёлкнув маленькую стрелку рядом с названием группы и откройте группу Photos. После этого выберите инструмент Rectangle Tool (U) и нарисуйте серый прямоугольник. У меня это прямоугольник цвета #eeeeee и размером 1200x880px.
Шаг 2
Теперь добавим строку описания работы. Можно просто «Latest Work» или «LATEST PHOTOS». Для читабельности текста я взял цвет #9b9b9b для шрифта Lato (Bold) 12px. Обратите внимание, что расстояние между буквами довольно значительное (270) для стилизации названия области и не подходит для обычного текста. Дайте подписи достаточно места и переместите вниз от изображения на 80 пикселей.
Шаг 3
Отлично! Наконец, мы готовы добавить интересные фотографии в портфолио. Создаём группу Photo. Решаем, сколько изображений вы хотите отобразить в строке. Я остановился на четырёх, поэтому мне нужно сделать некоторые математические вычисления.
Ширина страницы составляет 1000 пикселей, я разделил её на 4, получив 250 пикселей для каждого изображения, но ещё нужно оставить некоторое расстояние, скажем, 20px между ними. Итак, ширина снимка будет (1000px-60px)/4=235px.
Выбрав Rectangle Tool (U) с зажатой клавишей Shift рисуем 235x235px квадрат. После этого выберите изображение из Instagram или возьмите его с сайта unsplash.com или getrefe.tumblr.com, перетащите его в документ Photoshop и поместите над прямоугольником. Зажав клавишу Alt, сделайте Clipping Mask и по команде CMD+T измените размер снимка.
Шаг 4
Теперь нам нужно добавить «likes» (как доказательство привлекательности) и краткое описание. Создайте новый слой Shadow, поместите его над изображением и обязательно создайте для него Clipping Mask. После этого с помощью Gradient Tool (G) примените градиент, идущий от чёрного до прозрачного. Поставьте Opacity на 60%.
Возьмите Horizontal Type Tool (T) и введите количество лайков. Я использовал шрифт Montserrat размером 13px и оставил 15px пространство слева и внизу, чтобы дать достаточно свободного места.
Примечание: если вы использовали пробелы 15px для количества лайков, выполните то же самое с описанием.
Шаг 5
Рисуем область Contact
Здесь мы поместим простое сообщение и «призыв к действию», а также информацию об авторских правах.
Шаг 1
Сверните группу Photos и откройте группу Contact. В окне Horizontal Type Tool (T) подберите шрифт для подзаголовка, в моем случае это текст «GET IN TOUCH». Оставив пространство наверху, добавьте краткое описание, чтобы вызвать реакцию пользователя. Я использовал # 565d64 для шрифта Lato (чёрный) и 36px для заголовка и 16px Lato (Regular) для описания.
Шаг 2
Теперь нам нужна кнопка вызова к действию, которую пользователи смогут нажать по желанию. Для этого урока возьмём простейший вариант. Я нарисовал Rectangle Tool (U) простую форму и разместил текст сверху. Оставьте вокруг кнопки побольше чистого пространства.
Шаг 3
Вот и готова ваша версия портфолио для Сети! Теперь я покажу вам, как это преобразовать в версию для мобильных устройств.
Создаём версию Mobile
Шаг 1
Создадим новый документ размером 320x2100px. Размечаем три вертикальных направляющих в 20px, 150px и 300px с отступом по сторонам. Затем выбираем все группы в документе веб-версии, переносим их на новую вкладку документа до тех пор, пока не появится новый документ с группами.
Шаг 2
Теперь откройте группу Header, найдите наш логотип и с помощью Move Tool (V) переместите его вправо, пока он не появится в нашем новом узком макете. Оставьте его рядом с первой направляющей. Иконки соцсетей переместите влево.
Шаг 3
Адаптируем основное сообщение. Выберите инструмент Horizontal Type Tool (T) и уменьшите шрифт основного сообщения, чтобы он поместился между направляющими. Отрегулируйте высоту линии и продолжим.
Шаг 4
Откройте группу Photos и сместите заголовок «LATEST PHOTOS». Расположите группу Photo между вертикальными направляющими. Откройте группу, щёлкните по прямоугольнику с фоном описания, нажмите CMD + T и измените размер на 280px по ширине. То же самое для квадрата с фото. Наконец, поставьте фотографии в одной колонке, изменив их размер.
Шаг 5
Раздел Photos стал длиннее, чем в веб-версии, поэтому необходимы корректировки фона. Найдите фоновый слой Photos и нажмите CMD+T, чтобы изменить его размер, но оставить некоторое пространство в нижней части секции.
Шаг 6
Наконец, изменим и подравняем секцию с контактами. Откройте группу Contact и в окне Horizontal Type Tool (T) приведите размер сообщения в соответствие с направляющими. Обязательно уменьшите пространство сверху и снизу. Кроме того, уменьшите высоту строки сообщения, чтобы она выглядела чистой и профессиональной.
Законченный mobile вид.
Поздравляю!
Это всё. Мы закончили работу с веб-и мобильными версиями нашего портфолио для Instagram. Надеюсь, вы узнали что-то новое и приобретенные навыки помогут вам в будущем.
Я бы хотел услышать ваши отзывы и посмотреть результаты этого урока!
Создаем портфолио на основе фотографий из Instagram
Здравствуй, дорогой хабрадруг! В этом уроке мы создадим простой сайт-портфолио, который будет базироваться на фотографиях из вашего аккаунта в Instagram. Дизайн сайта сделал Tomas Laurinavicius, и он получился у него простым, функциональным и просторным. Итак, начнем.
Инструменты
Теперь Bootstrap. Мы будем использовать Bootstrap на базовом уровне для управления некоторыми элементами страницы. Необходимо скачать Sass версию, чтобы включить ее в нашу таблицу стилей.
Почти готово! Теперь нужно загрузить Instafeed.js, плагин, который берет фотографии из Instagram. Стоит заметить, что для того чтобы скрипт мог забирать фотографии из Instagram, необходимо предоставить ему client ID, который может быть сгенерирован на страничке для разработчиков.
Ну и наконец, нам необходимо скачать последнюю версию Modernizr, JavaScript-библиотеку, которая узнаёт, что из HTML5 и CSS3 умеет браузер пользователя.
Итак, мы собрали все необходимые инструменты, начинаем конструирование сайта.
Структура сайта
Настройка Sass
Теперь настало время настроить наш проект для использования Sass. В приложении Koala вся настройка заключается в переносте папок в окно приложения. Думаю, что такой же процесс характерен и для других подобных программ.
Добавление файлов
Откройте проект в программе, которую вы выбрали, чтобы мы смогли добавить необходимые файлы.
Советую вам обновить приложение, которое вы используете для настройки Sass, чтобы оно «подхватило» новые файлы. Некоторые приложения делают это автоматически, но все же лучше перестраховаться.
Думаю, что с предварительной настройкой мы закончили. Теперь приступим непосредственно к каркасу!
Начинаем строительство
Откройте файл index.html и вставьте следующий код HTML:
Давайте детально рассмотрим наш шаблон.
Секция с тэгом содержит четыре основных элемента, к которым мы применили классы, чтобы понимать, что для чего служит.
Добавляем файлы JavaScript
Добавьте следующий код ниже секции footer-bottom :
Стили
Здесь мы настроили шрифты, затем цвета нашего сайта, а также переменные padding и margin.
Больше стилей
Продолжим прописывать необходимые нам стили:
Придаем форму шапке сайта
Так как дизайн нашей шапки довольно-таки простой, то и писать для него код не составит труда:
Стили шапки
Вот, что у нас получается!
Выглядит неплохо! Подредактируем немного заголовки.
Модный шрифт
Нужно изменить стиль заголовка в левом верхнем углу. Поместите следующий код в конце файла Sass:
Мы применим наш модный шрифт всем элементом с классом fancy-font.
Социальные иконки
В нашем случае нужно обратить внимание на социальные иконки, которые мы будем строить с помощью спрайтов для отображения на обычных дисплеях и экранах высокого разрешения.
Перейдите на сайт Iconfinder и выберите нужную иконку. Лучше всего выбирать большой размер иконки, например, 256px.
В вашем любимом графическом редакторе создайте файл 152x52px. Поместите в документ иконки и измените их размер до 48x48px. Покрасьте иконки в белый цвет.
Между иконками должно быть расстояние в 2px. Поэтому разместите первую иконку к самому краю и затем отодвиньте ее вниз и вправо на 2px. Таким же образом поместите остальные две иконки. Вот, что у вас должно получиться:
Это наша версия для Retina. Не обращайте внимания на черный фон, я сделал его лишь для того, чтобы вы могли отчетливо видеть иконки.
С помощью функции Photoshop Save for Web сохраните изображение назвав его social-sprite@2x.png в папку с изображениями. Теперь нужно сохранить изображениями с размерами для стандартных дисплеев (не Retina). Это можно сделать прямо в окне Save for Web. Важно, чтобы размер изображения составлял 76px на 52px. Сохраните файл под именем social-sprite.png и также разместите его в папку с изображениями.
Теперь давайте займемся основным контентом сайта, то есть Instafeed.js — скрипт, который будет отображать фотографии на нашем сайте.
Лента Instagram
Сетка Bootstrap
Стили для Instagram
Теперь, когда у нас есть каркас, добавим стили:
Этот код нужно размести сразу после блока header в нашем файле Sass.
Этот кусок кода внес основательные изменения. Но нам надо сделать наш сайт еще красивее, поэтому добавьте следующие строчки кода в файл Sass:
Выглядит очень даже неплохо! Теперь нам нужно заменить изображения фотографиями из настоящей ленты Instagram. Сделаем мы это с помощью Instafeed.js.
Используем Instafeed.js
Способ работы плагина делает его простым в использовании. Однако, вам понадобиться создать Client ID на сайте Instagram, чтобы использовать плагин. Сделать это можно на странице для разработчиков.
Как только вы получили клиентский ID, добавьте следующий код в файл app.js :
Итак, давайте обсудим что к чему.
Задаем переменную feed и даем ей значение Instafeed .
Затем прикрепляем к Instafeed различные параметры:
Когда вы сохраните файл и обновите страницу в браузере, то увидите следующее:
Если вы все сделали правильно, то вы должны увидеть восемь изображений с отображением лайков и описаний.
Приводим в порядок
Теперь нам надо привести наш код HTML в порядок, так как у нас до сих пор стоит первоначальный шаблон. Вернитесь к файлу index.html и найдите следующий код:
Либо сотрите, либо закомментируйте этот код.
Подвал
Стили подвала
Теперь надо добавить стили нашему подвалу.
Низ подвала
Добавьте немного текста в HTML файл, а затем откройте файл Sass и добавьте стили:
Вот и все! Сайт выглядит круто как на десктопе, так и на мобильном устройстве. Хорошая работа!
Заключение
Что мне нравится в нашем сайте — это то, что его можно адаптировать к портфолио любого рода. Я надеюсь, вы без проблем прошли через все этапы и научились чему-то новому. Оставляйте в комментариях ваши впечатления и предложения по улучшению! Спасибо за внимание.
От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!