UberData: Designing with Real Data in Photoshop
Lorem Ipsum is dead. If not, it must kick the bucket soon. For many years, developers and designers have promoted to use the real data in mockups, instead of dummy texts. And the last years “Designing with Real Data” is becoming an obvious trend. A lot of articles and video presentations on this topic prove it: 1, 2, 3, 4, 5, …
I’m presenting UberData. It’s an extension for Photoshop, which inserts data into the layout. UberData is an essential tool for filling heaps of similar blocks with meaningful content.
UberData can insert data from public JSON APIs, RSS feeds, JSON files, text files, and image folders. In the next versions, UberData becomes smarter. It will work with CSV, Excel, Google Sheets, and maybe something else.
What for? We Have the Craft btw
I think, too many products are never enough. UberData is my analog of the InVision’s Craft Data plug-in. I’ve done it because InVision refused to support Windows long time ago. Furthermore, their product for MacOS works only with Photoshop’s versions CC 2015 and higher. UberData runs on both platforms and works with Photoshop CC 2013 or later versions. Unlike Craft, UberData does not work in Sketch.
Boring Instruction
Inserting Data
UberData inserts text and images into selected layers. You can select several layers at once, and the data puts in the correct order.
You need to select the text layer to insert text. The new text replaces the old one or it is added to the old text if you click on with the Shift key pressed.
If you want to insert an image, you must select a shape layer (vector layer with a color fill). The image covers the selected shape as a smart object. Its size changed to the shape’s size and the image overlaid as a clipping mask.
Adding Data Set
Create your data set or connect complete one:
- JSON files or links to public JSON APIs;
- RSS or XML streams from sites;
- Folders with images from your computer;
- Text files with lists of names, phone numbers or any other information.
There is a button with the (+) sign to add a new data set in the left-bottom corner of the panel.
Each kind of data set has its own data representation, whether it’s a simple list for text files or “adaptive tiles” for folders with images.
JSON
You can add JSON files or take data from public JSON APIs that do not need authorization, such as:
- uinames.com — User Data
http://uinames.com/api/?ext&amount=25®ion=United%20States - spotify.com — music
https://api.spotify.com/v1/search?q=metallica&type=album
RSS
You can add RSS feeds and XML streams. For example:
- Dribbble.com: https://dribbble.com/shots/popular.rss
- Abduzeedo.com: http://abduzeedo.com/rss.xml
- BBC.com: http://feeds.bbci.co.uk/news/rss.xml?edition=int
It is better to specify a direct link, but if you specify the website address (eg http://abduzeedo.com/), then UberData will try to find a link to the RSS by itself.
Text Files
UberData can take data from *.txt files, but every element in the file must begin with a new line.
Folders with Images
You can add a folder with images from your computer. UberData searches for all files, including subfolders.
For example, UberData already includes a free set of 100 avatars.
Hidden Features
In the Data Sets List
- Click → open data set
- Alt + Click → insert random data (works with text files and picture folders)
If you click on the folder with pictures or on the text files with pressed Alt, you will insert the random text or picture from the folder.
Inside the Data Set
- Click → insert picture or text
- Alt + Click → insert a random picture or text
- Shift + Click → add text
- Shift + Alt + Click → add random text
To rename the data set, just click on its name on the top.
The menu is hidden in the right-top corner, behind the three points. There you can update the data set (pull up fresh data from the Internet for RSS and JSON) or remove it.
In general, RSS and JSON contain textual information, but sometimes there are also links. UberData checks them too. If a link leads to images, UberData marks them with a special icon. The icon means when you click on it, here will be the picture, not the link text.
Where can I download it?
You can download UberData and other Photoshop extensions on the site UberPlugins.cc
Now UberData is on the testing stage. This means that the product may have errors and it does not always work as expected. If you run into errors or you have some ideas or wishes, please, write to me:
