Device-Art-Generator
Device-Art-Generator copied to clipboard
Published
20 hours ago •
Ashung
Ashung
Device Art Generator for Photoshop
Photoshop Scripts for iOS and Android UI designers to generate the device art.
How to use
Dialog, The Easy Way.
Run "Scripts/deviceArtGeneratiorUI.jsx" set the Device, Design and Options, then press the "Generate" button.
Separate File
| Parameter | Parameter type | What it does |
|---|---|---|
createDeviceArt([deviceId] | String | Id list in devices array. like: 'nexus_4', 'iPhone5_white'. |
[, designFile] | NULL,Boolean,File | Null and Boolen will open a dialog to choose a file. |
[, isPortrait] | Boolean | Ture to use portrait mode, (default: true). |
[, transparentBackground] | Boolean | Background of Psd document, (default: true). |
[, hasShadow] | Boolean | Shadow of devices, (default: true). |
[, hasForeground]); | Boolean | glare of device, (default: true). |
Create a new jsx file in "Device_Art_Generator/Scripts" floder. Open and type the code below:
#target photoshop
#include 'deviceArtGenerator.jsx';
app.bringToFront();
createDeviceArt('iPhone5_black', true, true, false);
You can change the last line like below:
createDeviceArt('nexus_4'); //Google Nexus 4 device with transparent background.
or
createDeviceArt('iPhone4s_white', true, true, false); //iPhone 4s white device with white background.
or
createDeviceArt('iPhone5_black_3d'); //iPhone 5 3D view with transparent background.
or
createDeviceArt('iPhone4s_black', null); //iPhone 4s black device without design.
or
createDeviceArt('iPhone5_black', activeDocument.fullName, true, false, true, true); //Use current document as design.
or
createDeviceArt('iPhone5_black', File('~/design.psd'), true, false, true, true); //Use a exists document as design.
Save document, double click the jsx file to run. If has trouble go to Photoshop, run this script form the 'File' -> 'Scripts' -> 'Browse...' menu.
Support Devices:
| Device | ID | Portrait | Landscape | Screen resolution (px) |
|---|---|---|---|---|
| Android Mobile and Tablet | ||||
| Nexus 4 | nexus_4 | Y | Y | 768x1280 |
| Nexus 7 | nexus_7 | Y | Y | 800x1280 |
| Nexus 10 | nexus_10 | Y | Y | 800x1280 (1600x2560) |
| Motorola XOOM | xoom | Y | Y | 800x1280 |
| Galaxy Nexus | galaxy_nexus | Y | Y | 720x1280 |
| nexus_s | nexus_s | Y | Y | 480x800 |
| htc One X | htc_one_x | Y | Y | 720x1280 |
| SAMSUNG Galaxy Note | samsung_galaxy_note | Y | Y | 800x1280 |
| SAMSUNG Galaxy s3 | samsung_galaxy_s3 | Y | Y | 720x1280 |
| SAMSUNG Galaxy Tab 2 | samsung_galaxy_tab_2_7inch | Y | Y | 600x1024 |
| iOS Mobile and Tablet | ||||
| iPad 2 Black/White | iPad2_black, iPad2_white | Y | - | 768x1024 |
| iPad 2 Black/White Perspective | iPad2_black_perspective, iPad2_white_perspective | - | - | 1024x768 |
| iPhone 4s Black/White | iPhone4s_black, iPhone4s_white | Y | Y | 640x960 |
| iPhone 5 Black/White | iPhone5_black, iPhone5_white | Y | Y | 640x1136 |
| iPad 3 Black/White | iPad3_black, iPad3_white | Y | Y | 1536x2048 |
| iPad Mini Black/White | iPadMini_black, iPadMini_white | Y | - | 768x1024 |
| iPhone 5 3D Black/White | iPhone5_black_3d, iPhone5_white_3d | - | - | 640x1136 |
THANKS
All Android devices image download from Device Art Generator and android-ui-utils project.
All iPhone and iPad image download from Pixeden.com
Ashung