Метка

instagram


Есть желание пользоваться любимой сетью Instagram на компьютере?
Для этого нужно воспользоваться клиентом Instagram для компьютера – Webstagram, который является наиболее популярным сервисом, дающим доступ к данным Instagram онлайн.


Плашка с логотипом на сайте Instagram

Плашка с логотипом на сайте Instagram

Instagram — это социальная сеть, позволяющая быстро и красиво обрабатывать фотографии, а потом делиться ими с пользователями Instagram.

Для пользователей Mac было разработано приложение Carousel, позволяющее просматривать фотографии друзей, комментировать их публикации, а также выполнять различные функции, доступные через мобильное приложение Instagram, но уже своем большом компьютере. Также с помощью Carousel можно скачать фото в полном размере на Mac или IPhoto.

Как быть тем, у кого нет Mac, но есть желание пользоваться любимой сетью на компьютере?


Webstagram — возможности приложения Instagram на компьютере

Для этого нужно воспользоваться клиентом Instagram для компьютера – Webstagram, который является наиболее популярным сервисом, дающим доступ к данным Instagram онлайн. Разработчики Instagram предоставляют открытый API, через который работает Webstagram. Несмотря на то, что через Webstagram нельзя пока публиковать и обрабатывать фотографии, он имеет широкий набор полезных инструментов и функций для работы с любимой сетью Instagram.

Webstagram - главная страница веб сайта

Webstagram — главная страница веб сайта

Возможности Webstagram:

  1. Просматривать фотографии людей, которых вы зафоловили.
  2. Комментировать фотографии и ставить лайки.
  3. Смотреть своих подписчиков.
  4. Вести обзор популярных фото и пользователей, а также изучать их по хештегам.

Webstagram это дополнение, позволяющее  наслаждаться фотографиями из Instagram на широком экране компьютера.


Вход в Webstagram

  1. Если Вы попали на сайт webstagram впервые, то для входа в  систему используйте имя пользователя и пароль от Instagram. На следующей странице нажмите «Разрешить» для доступа к возможностям и особенностям программы Webstagram.
  2. Если у вас нет учетной записи, пожалуйста, создайте ее через мобильное приложение Instagram на iPhone или Android для того, чтобы в дальнейшем использовать данные учетной записи для входа в систему Webstagram.

Теги:

Это стоит посмотреть




Поговорим о Seen? — веб-сервисе Тарика Корула, который автоматически воссоздает события, прочесывая Сеть, чтобы найти соответствующие фотографии, видео и аккаунты.


Стартап Тарика Королла, известный как Seen, появился в момент разочарования. Он организовал работу программистов над одной темой для популярного блога TechCrunch и хотел создать пост, чтобы поздравить победителя, но не смог найти подходящее фото – и это несмотря на то, что демо победителя было сфотографировано несколько раз собравшимися гиками.

131104_tarikh_korula-660x442

Tarikh Korula, основатель и генеральный директор стартапа Seen. Визит в Сан-Франциско. Фото: Josh Valcarcel/WIRED

«По-видимому, они сделали около 10 тыс. снимков», — сказал Корула, — «И я не знаю, где они. Ужасно бесит, что мы не можем их найти».

Чтобы решить проблему раз и навсегда, Королл объединил свои силы с Мором Намааном, профессором информатики, чтобы создать Seen, веб-сервис, который автоматически воссоздает события, прочесывая Сеть, чтобы найти соответствующие фотографии, видео и аккаунты. Если бы Seen существовал тогда, когда Корула искал фотографии, он бы  не тратил все свое время во Фликере, прокручивая блоги и вбивая запросы в Google. Seen бы уже создал специальную коллекцию фотографий и видео для событий TechCrunch, и посетители бы оценили самые интересные изображения – в том числе включая ту самую фотографию победителя.

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

Между последующей работой Намаана в Rutgers, где он возглавлял лабораторию соцмедиа, и работой Корулы в студии развития, известной как Uncommon Projects, Seen отошел на второй план после того, как работа началась в 2010. Но затем год спустя Корула и Намаан полностью закончили проект. Они приняли участие в программе timeSpace от New York Time’s и полностью организовали инвестиции из газеты компании (которая теперь в процессе закрытия).


Seen сегодня

На данный момент сервис компании обрабатывает Твиттер и Инстаграм, чтобы воссоздать крупные события, проходящие вживую.

В Seen сейчас 6 сотрудников, которые работают из офисов в районе Сохо города Нью-Йорк. На данный момент сервис компании обрабатывает Твиттер и Инстаграм, чтобы воссоздать крупные события, проходящие вживую, такие как концерты и другие заслуживающие освещения в печати. Недавно, к примеру, была восстановлена виртуальная версия конференции RubyConf 2013, которая подарила Seen всплеск трафика. События восстанавливаются при помощи комбинации определенного программного обеспечения, которое выстраивает «автоматические сроки события» путем анализа таких метаданных, как теги, заголовки и др., а кураторы этого проекта помогают осветить наиболее интересные моменты из этих сроков.


RubyConf 2013 в представлении Seen

ruby_conf__from_seen__primer

Конференция RubyConf 2013 в Seen

Алгоритмы разработанные в Seen подобрали посты с изображениями из нескольких сервисов, тем самым воссоздав событие!


Планы развития

План Seen состоит в том, чтобы расширить свою базу соцсетей и затем усовершенствовать свои алгоритмы ПО для того, чтобы привязать СМИ к событиям. Например, одно недавнее изобретение считывает отпечатки пальцев с аудиотреков в видео на канале YouTube и сравнивает их с большой выборкой других отпечатков пальцев с аудио. Предполагается, что видео с частично похожим фоновым звуком —  это освещение одного и того же события.

Студенческая работа Корулы была в сфере физических компьютерных программ  в университете Нью-Йорка. Он «выработал» Seen среди других интернет-стратапов, например, Foursquare, который привязан к событиям, происходящим вживую в определенных местах локации (основатель Foursquare Деннис Кровли окончил тот же факультет в университете Нью-Йорка, что и Корула). После нескольких лет борьбы с технологиями и их ограничениями, такие стартапы наконец-то готовы расширяться  и расти, говорит Корула. Десять лет назад он работал над проектом, спонсированным дизайнером Томми Хилфайдегом, который отслеживал ход гоночной яхты при помощи карты и постов в блоге. Сегодня даже самый скромный американский турист может носить такие технологии для сравнения всего со всем в своем кармане.


«Мы наблюдали за трендом 10 лет», — сказал Королл, — «И прямо сейчас для нас очевидно, что происходит изменение парадигмы в количестве СМИ и их типов, чьими новостями можно делиться. Мы ощущаем великолепную возможность для организации этого изменения, но никто этого не делает… Не все видят это изменение так, как это видим мы, потому что они вроде как не настолько понимают, как было мало соцмедиа 5 лет назад».

 



Это стоит посмотреть



  /    /  Комментариев нет


В этом уроке мы рассмотрим принцип работы фильтров в Instagram, а так же постараемся воссоздать некоторые из них в Photoshop. Кроме того, мы познакомимся с несколькими новыми и интересными CSS-свойствами, которые позволяют добиться Instagram-эффектов «на лету» в браузере.


Как работают фильтры в Instagram

Instagram включает в себя множество фильтров от «Lomo-fi» до «Nashville», каждый из которых создан с использованием разнообразных методов, фильтров и эффектов. Со-основатель Instagram Кевин Систром (Kevin Systrom) по этому поводу сказал:

«Это сочетание множества методов. В некоторых случаях мы рисуем поверх картинки, в других используем множественное наложение изображения — всё зависит от конечного эффекта, который мы хотим достигнуть. Например, Lomo-fi ничто иное, как изображение с увеличенной контрастностью.»

На изображении ниже представлены разнообразные эффекты в Instagram:

Несмотря на то, что каждый из фильтров имеет собственные настройки изображения, мы можем разделить весь процесс преобразования на шесть основных шагов:


1. Коррекция

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


2. Глубина резкости

Понятие глубины резкости может быть определено как «расстояние между передней и задней границами резко изображённого пространства, в пределах которого объекты съёмки на снимке отображаются безусловно резко». Если вы занимаетесь графическим дизайном, то вы, вероятно, сможете представить это как некий объект, находящийся в фокусе на переднем плане, в то время как остальное пространство вокруг него размыто.

При фокусировке на фотографируемый объект, находящийся на переднем плане в кадре, вы получаете вокруг него размытую область, которая помогает акцентировать внимание именно на нём.

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


3. Lens Flare/Film Burn

В некоторых фильтрах добавляется дополнительный слой, включающий в себя блики и эффекты размытия света — всё это позволяет добавить изображению некоторый «вау-эффект». Однако нечто подобное следует использовать в разумных пределах, так как чрезмерное акцентирование внимания на этом может негативно сказаться на общем впечатлении от изображения.


4. Эффект старого фильма

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


5. Виньетка

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


6. Рамка

Наконец, для придания некого ретро-стиля к изображению добавляется рамка. Очень часто рамки можно было увидеть на старых фотографиях или снимках, сделанных на Polaroid. Они так же могут придать эффект рваных краёв, что непременно создаст ощущение подлинной старинной фотографии.


Разработка любого фильтра для Instagram начинается в Photoshop, а уже после этого он программируется на языке Object-C — нативном языке программирования для iOS. Со-основатель приложения добавил к этому:

«Наши фильтры это сочетание настроек изображения: тональность, цветовая насыщенность, режимы наложения и так далее. Кстати, обычно я создаю их в Photoshop прежде, чем пишу алгоритмы для их реализации на телефоне.»


Воссоздание фильтров в Photoshop

Итак, мы попробуем с вами сделать следующее (до и после):


Шаг 1. Создание холста

Создайте холст размером 600x600px и задайте ему цвет фона (любой по вашему желанию). Добавьте на него выбранное вами изображение. При необходимости кадрируйте и масштабируйте его.


Шаг 2. Отрегулируйте цвета

Сейчас самое время произвести цветовую и тоновую коррекцию. Зайдите в меню Image > Adjustments > Curves. Перед вами откроется окно, в котором вы сможете задать желаемые значения.

Начните с увеличения зелёных оттенков. Например, установите значение 30, после чего картинка станет более насыщенна зелёными тонами. Мы так же увеличим оттенки синего — установите для синего канала значение 100.

Помните, что все указанные значения даны лишь для примера, поэтому не бойтесь экспериментировать с ними до получения желаемого результата.
После того, как все настройки выполнены, продублируйте этот слой (сочетание клавиш Ctrl+J или через меню Layer > Duplicate Layer).


Шаг 3. Глубина резкости

К дублированному слою примените эффект размытия: перейдите в меню Filter > Blur > Gaussian Blur, увеличьте значение ‘Radius’ до 5px и нажмите OK. Выберите инструмент Elliptical Marquee Tool и выделите область на фотографии, которая должна быть в фокусе, после чего перейдите в меню Layer > Layer Mask > Hide Selection.

В панели со слоями кликните по появившейся там маске слоя, зажав при этом клавишу alt — на холсте отобразится её содержимое. Примените Filter > Blur > Gaussian Blur со значением ‘Radius’ в 30px. Кликните по маске слоя (с зажатым alt) ещё раз. Таким образом у нас получится эффект глубины резкости с некоторым объектом в фокусе.


Шаг 4. Lens Flare и Film Burn

Можно воспользоваться поиском Google по картинкам, чтобы подобрать для вашей фотографии подходящие блики. Достаточно будет лишь добавить выбранное изображение к холсту (выше слоя оригинальной фотографии) и применить к нему эффект наложения (blend mode), например, ‘Overlay’ или ‘Screen’.

Так же можно поэкспериментировать со встроенным в Photoshop фильтром ‘Lens Flare’ (Filter > Render > Lens Flare…).


Шаг 5. Эффект старого фильма

Попробуйте добавить немного шума к фотографии, используя Filter > Noise > Add Noise с различными настройками.
В данном случае к исходному изображению был применён метод наложения ‘Multiply’ и снижена прозрачность слоя до 14%.


Шаг 6. Виньетка

Создайте новый слой и залейте его чёрным цветом. Затем выберите инструмент Elliptical Marquee Tool и нарисуйте большой овал по центру холста так, чтобы его края почти касались границ изображения.
Удалите выбранное выделение клавишей ‘delete’ на клавиатуре. Далее воспользуйтесь размытием Filter > Blur > Gaussian Blur с произвольными значениями фильтра, но при этом следите, чтобы края слоя оставались непрозрачными. После этого уменьшите ‘opacity’ (прозрачность) слоя. В данном примере значение прозрачности составляет 63%.


Шаг 7. Рамка

Финальной частью является добавление рамки, напоминающей старые плёночные фильмы. В данном случае выбрана прямоугольная рамка с несколькими цифрами, буквами и стрелками.

Так же вы можете создать интересные эффекты «рваных» рамок, используя набор рваных кистей для Photoshop и технологию применения масок для слоёв.


Вот так достаточно просто можно имитировать фильтры Instagram в Photoshop. А сейчас давайте поговорим о реализации нечто подобного средствами CSS.


Создание фильтров Instagram средствами CSS

Я бы не сказал, что с помощью CSS получится в точности повторить все встроенные в «Инстаграм» фильтры, однако можно попробовать создать нечто похожее, экспериментируя со множеством свойств, которые доступны нам в CSS.
Ниже я представлю вам несколько таких свойств, с помощью которых можно начать.

 

Фильтры

В настоящее время только webkit-браузеры обладают поддержкой фильтров. Фильтры позволяют применять к изображениям различные эффекты в стиле Photoshop средствами CSS, например:

  • Blur (размытие)
  • Gray scale (уровни)
  • Sepia (сепия)
  • Brightness (яркость)
  • Saturation (насыщенность)
  • Hue Rotate (тональность)
  • Contrast (контраст)
  • Invert (инверсия)

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

 

Контраст

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

 

Размытие

Размытие очень полезно для достижения эффекта глубины резкости: накладываем два одинаковых изображения друг на друга, при этом размываем изображение переднего плана примерно на 5-6 пикселей, после чего мы можем с помощью CSS-маски (CSS Masking) сфокусироваться на каком-либо объекте путём «вырезания» некоторой области с верхней картинки.

 

CSS-маска

CSS-маска позволяет выделить определённый графический элемент или фигуру для её дальнейшего использования как отдельную независимую область — в общем, эффект практически тот же, что и у маски слоя в Photoshop.

 

Наложение изображений

В 2012 году я как-то напоролся на твит, в котором говорилось, что было бы здорово иметь возможность накладывать изображения друг на друга с применением эффектов смешивания цветов как в Photoshop (blending mode).
Что ж, благодаря предложению, внесённому компанией Adobe, это скоро будет возможно! Само предложение описывается как «Смешивание и наложение для веб» (‘Blending and compositing for the web’).

К сожалению, сейчас это не реализовано ни в одном из браузеров, однако более подробно о самой идее и примерах использования вы можете узнать из официальной информации на сайте Adobe.

 

Градиент

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


Заключение

Наверное, почти каждый сейчас пользуется разнообразными программами, такими как Instagram, для придания своим фотографиям различных ретро-эффектов и прочей «магии». Без всякого сомнения такие изображения выглядят более «живыми» и неординарными, чем простые и скучные снимки.

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

А знаете ли вы какие-нибудь CSS-свойства, в дополнение к уже упомянутым, позволяющие добиваться интересных и необычных эффектов? Будем рады услышать о таковых в комментариях!