УберДата — используем реальные данные в макетах

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-файлы или брать данные из публичных JSON API, не требующих авторизации, таких как:

Работайте с API и JSON-файламиРаботайте с API и JSON-файлами

RSS

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

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

Получайте реальные данные из RSS-потоковПолучайте реальные данные из RSS-потоков

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

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

Создавайте собственные списки данных в текстовых файлахСоздавайте собственные списки данных в текстовых файлах

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

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

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

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

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

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

Создавайте собственные списки данных в текстовых файлахСоздавайте собственные списки данных в текстовых файлах

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

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

Создавайте собственные списки данных в текстовых файлахСоздавайте собственные списки данных в текстовых файлах

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

Создавайте собственные списки данных в текстовых файлахСоздавайте собственные списки данных в текстовых файлах

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

Поддерживаемые версии

Не работает в версиях CS6 и ниже.

Где скачать

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

Перейти на сайт УберПлагинов

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

Моя почта | Твиттер | Фейсбук

Раньше
Типограф для Фотошопа