Как я стал экономить время на поиск референсов с Eagle

Проблема

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

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

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

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

Программа платная, но вместо подписки - пожизненная лизенция. Порадовало присутвие 30-дневной пробной версии, можно опробывать. Потратил 5 минут на просмотр видеоинструкций. Разработчики не пожалели средств на качественные и емкие ролики - жирный плюс. В программе интуитивно-понятный интерфейс: слева инструменты, справа информация, сверху фильтры, по центру контент.

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

Изменение списка макетов

Центральная часть представляет из себя список с, загруженным ранее, контентом. Разработчики добавили возможность менять отображение этого списка. Для удобства просмотра есть три параметра: «Расположение по ширине», «Водопад» и «Сетка»

«Расположение по ширине» гарантирует, что каждое изображение не будет обрезано. Этот макет хорошо подходит для сортировки и поиска.

Когда у вас есть длинные изображения, скриншоты веб-страниц на экране, можно изменить отображение списка на “Водопад”.

«Сетка» отображает изображения в фиксированной рамке независимо от соотношения сторон изображения, что может быть полезно при быстром поиске.

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

Облачное место хранения

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

Категории (Папки)

За основу инструмента категоризации берутся папки. Они находятся в левой части интерфейса. Внутри папок можно создавать подпапки. Есть чекбокс для отображения содержимого всех подпапок в основной категории. Для удобства просмотра иконки и цвет папок можно менять. Я выделил для себя те, которыми я пользуюсь чаще всего. Правда если у вас много папок, то возникает проблема - нет возможности сортировки. Я бы порекомендовал разработчикам ее добавить: по количеству содержимого, по алфавиту.

Из удобного: изображению можно присвоить несколько категорий. Это позволяет экономить место и не дублировать контент по несколько раз.

Теги

Еще один инструмент для классификации контента. Отличаются от папок гибкостью поиска (см. в разделе буфер обмена).

Теги помогают находить изображения, которым вы присвоили индивидуальную характеристику. Приведу пример: я определил для себя, что каждая категория будет соотвествовать блоку сайта (шапка, слайдер, подвал). При этом изображения еще можно разделить на разные стили - швейцарка, попарт, 3D. И тут на помощь приходят теги, позволяющие объединить между собой однородные изображения, без изменения категорий. При добавлении тега, вам предложат недавно добавленный тег, либо сгенерированные программой.

Чтобы объединить разные изображения тегами есть две опции: можно создать одинаковый тег, для разных изображений, либо создать общую группу для разных тегов. Такой двухуровневый подход, позволяет детальнее подойти к организации изображений. Группы тегов, как и папки, можно кастомизировать.

Импорт (Pinterest в т.ч.)

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

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

Буфер обмена

Плюс, который бросается в глаза сразу, возможность добавления изображения прям из буфера обмена. Заскринил решение, которое понравилось и ctrl+v в необходимую категорию. После добавления можно дописать информацию об изображении: заголовок, заметки, ссылка на источник, теги. Последнее, можно использоваь, как ключевые слова для поиска. Также поиск имеет возможность “вычитать” ненужные теги: illustration -flat. Такой запрос будет искать изображения с тегом illustration, но не выдаст результаты по тегу flat.

Расширение Eagle для браузера

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

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

Монохром

Присутствует режим “Оттенки серого”. С ним можно отобразить изображения в монохроме. Как я понял, графические дизайнеры используют это для подчеркивания яркости и контрастности. Я еще не нашел случая, чтобы применить этот режим, но упомянуть о нем стоит.

Объединение изображений

Интересная функция «объединения изображений» позволяет поставить два изображения рядом. Можно выбрать удобно расположение картинок. В моем случае это понадобилось для понимания, как один блок будет смотреться с другим.

Комментарии к изображениям

В Eagle есть два режима: просмотр и комментирование. В режиме комментирования можно оставлять заметки прямо на изображении. Довольно удобно, если референсов много, и всех заметки трудно удержать в голове.

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

Вывод

Eagle - удобная программа для содержания свои референсов. Современный UI и продуманный UX оставили хорошее впечатление. У программы много функционала, который подойдет творческим людям разных профессий. Гуманная ценовая политика - разовая оплата пожизненной лицензии в 30$. Для тех, кто еще не открыл для себя Eagle, но в поисках подобной программы, рекомендую опробывать.

7 симпатий

Классный обзор, тоже перешла на Eagle. В итоге купила пожизненную лицензию.