UberData: Используем реальные данные в макетах

Lorem Ipsum мёртв. А если нет, то ему уже давно пора сыграть в ящик. Многие годы разработчики и дизайнеры пропагандируют использование реальных данных в макетах, взамен «рыбных текстов». А последние пару лет “Designing with Real Data” становится явным трендом на западе, чему свидетельствуют многочисленные статьи и видео выступлений на эту тему.

Представляю вам UberData — расширение для Photoshop, вставляющее данные в макет. Незаменимый инструмент для заполнения осмысленным контентом кучи однотипных блоков.

UberData умеет вставлять данные из публичных JSON API, новостных RSS-лент, JSON-файлов, текстовых файлов и папок с изображениями. В ближайших версиях UberData станет умнее, научится работать с таблицами CSV, Excel, Google Sheets, а может и ещё чему-нибудь полезному.

Ссылка для скачивания в конце заметки.

Зачем? Есть же Craft…

Я считаю, что хороших продуктов много не бывает. UberData — это мой аналог плагина Craft Data от InVision. Я сделал его потому что компания InVision давно отказалась от поддержки Windows, а на macOS их продукт работает в Photoshop только с версиями CC 2015 и выше. UberData работает на обеих платформах и охватывает все версии Photoshop CC, начиная с 2013 года, но, в отличии от Craft, не работает в Sketch.

Нудная инструкция

Вставка данных

UberData вставляет текст и изображения в выбранные слои. Можно выбрать сразу несколько слоёв — данные вставятся в правильном порядке.

Чтобы вставить текст, нужно выбрать текстовый слой. Новый текст заменяет старый или добавляется к нему, если кликнуть с зажатой клавишей Shift.

Чтобы вставить изображение, нужно выбрать шейп (векторный слой с цветной заливкой). Изображение вставится смарт-объектом над выбранным шейпом, изменит свой размер до размеров шейпа и наложится клиппинг-маской.

Добавление источников данных

Создавайте свои источники данных или подключайте готовые:

• JSON-файлы или ссылки на публичные JSON API;
• RSS или XML-потоки с сайтов;
• папки с изображениями на вашем компьютере;
• текстовые файлы со списками имен, номерами телефонов или любой другой информацией.

В левом-нижнем углу панели есть кнопка со знаком (+) для добавления нового источника.

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

JSON

Вы можете добавлять JSON-файлы или брать данные из публичных JSON API, не требующих авторизации, таких как:

• uinames.com — пользовательские данные
  http://uinames.com/api/?ext&amount=25&region=United%20States
• spotify.com — музыка
  https://api.spotify.com/v1/search?q=metallica&type=album

RSS

Вы можете добавлять новостные RSS и XML-потоки. Например:

• dribbble.com: https://dribbble.com/shots/popular.rss
• abduzeedo.com: http://abduzeedo.com/rss.xml
• meduza.io: https://meduza.io/rss/all

Лучше указывать прямую ссылку, но если вы укажите адрес сайта (например http://abduzeedo.com/), то UberData попытается найти ссылку на RSS самостоятельно.

Текстовые файлы

UberData умеет брать данные из файлов формата *.txt. Есть одно условие: каждый элемент в файле должен начинаться с новой строки.

Папки с изображениями

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

Для примера можете взять бесплатный набор из 100 аватарок.

Неочевидные советы

В списке источников

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

• Click → открыть источник
• Alt + Click → вставить случайные данные (работает с текстовыми файлами и папками с картинками)

Внутри источника

Источник можно переименовать, кликнув по его названию сверху.

В правом-верхнем углу, за тремя точками, прячется меню, в котором можно обновить источник (подтянуть свежие данные из интернета для RSS и JSON) или удалить источник.

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

• Click → вставить картинку или текст
• Alt + Click → вставить случайную картинку или текст
• Shift + Click → добавить текст
• Shift + Alt + Click → добавить случайный текст

Где скачать

Этот и другие мои плагины вы можете скачать на сайте UberPlugins.cc

Сейчас UberData находится на стадии тестирования. Это означает, что в продукте могут быть ошибки и он не всегда работает так, как ожидается. Если вы столкнётесь с ошибками в продукте или у вас есть идеи, или пожелания — напишите мне: