{"__v":3,"_id":"56846a5a65976e0d00001c57","category":{"__v":34,"_id":"555627c5ea5e120d001884ff","pages":["555627c6ea5e120d00188501","55562fbdea5e120d00188526","5556368b150ba30d00f4e0b7","5556590e26e9bc0d0044eb61","55567be0150ba30d00f4e248","55567bf026e9bc0d0044ec55","55567c08150ba30d00f4e24a","55567c14150ba30d00f4e24c","55567c4426e9bc0d0044ec59","55567c501026001900d72abc","55567c5926e9bc0d0044ec5d","55567c9a1026001900d72abf","55567cd9150ba30d00f4e24f","55567ce4150ba30d00f4e251","55567ced26e9bc0d0044ec61","555698d62f6b480d0034d9a4","55e0c386dc6b2e170074f2e3","55e0c5e15087cb1900986c16","55e0f99926f51b0d009b1744","567b35067c40060d0056041d","567b3531ee052b1700dbd9da","56846a5a65976e0d00001c57","5684783bc11c7e0d00aaff71","56847cb55a66610d006eabbd","56848a0cf72e9e0d00e098e5","568ccdf38602880d001ce230","569431fcd8c04d1700e5ae05","569ebe1ad233620d007055fb","569edd718f6d4b0d00f13b91","56aa5c3d13a69a0d00a77a09","56aa6eda4d38401900199f7a","56c7a7d5f9aa3b0d00c8457b","56d0ab1440d36e1d00bc143b","56ec9c5a493ce620008ea4c8"],"project":"555627c4ea5e120d001884fb","version":"555627c4ea5e120d001884fe","reference":false,"createdAt":"2015-05-15T17:07:17.512Z","from_sync":false,"order":0,"slug":"design","title":"Design Studio"},"project":"555627c4ea5e120d001884fb","user":"55562799ea5e120d001884f8","version":{"__v":10,"_id":"555627c4ea5e120d001884fe","project":"555627c4ea5e120d001884fb","hasDoc":true,"hasReference":true,"createdAt":"2015-05-15T17:07:16.918Z","releaseDate":"2015-05-15T17:07:16.918Z","categories":["555627c5ea5e120d001884ff","55562a5526e9bc0d0044ea47","555653821026001900d72a3c","5556685c1026001900d72a85","5556687626e9bc0d0044ec04","555668821026001900d72a87","55566892150ba30d00f4e206","555668b826e9bc0d0044ec05","55e0fb6026f51b0d009b1746","567b3b3017368a0d009a6e54"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2015-12-30T23:35:54.335Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":12,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Overview\"\n}\n[/block]\nDesign Studio HTML5 offers the ability to import Photoshop (.psd) files into your workspace. Native Photoshop files are processed by Design Studio HTML5 to recreate layers and groups made in Photoshop in the Flite system. This allows you to easily mock up and design a creative in Photoshop and quickly import that into Flite, cutting out the complexity of recreating the design again in Flite.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"This functionality is available in Design Studio HTML5 and is not available in Design Studio Flash.\",\n  \"title\": \"NOTE\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How It Works\"\n}\n[/block]\nThere are two ways to import Photoshop (.psd) files into Design Studio HTML5:\n\n**1. Make Ad Dialog**\nUse this option to generate a fresh Flite ad from your .psd\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/DgMeZTaSqeVwcR71ttlw\",\n        \"Screen Shot 2015-12-30 at 3.42.57 PM.png\",\n        \"724\",\n        \"86\",\n        \"#7caca5\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**2. Design Studio Commands menu**\nUse this option to import your .psd to currently selected stage of an existing ad.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/0GdinjdQQePm0QWrgbTK\",\n        \"commands-menu.png\",\n        \"217\",\n        \"125\",\n        \"#4879bc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nSelecting “Import Photoshop (.psd)” will bring up a file browser which allows you to choose the file from your computer. Flite will process all the layers and groups in the file and automatically map them to layers and components in Design Studio.\n\nAfter the import process completes you may be asked “Would you like to resize the ad to fit the new layers?” This will happen if you’ve imported a .psd to an ad stage that doesn’t match the .psd’s dimensions. To automatically resize your Flite ad to the dimensions of the .psd, click “Match Dimensions,” otherwise click “Cancel” to leave your ad’s dimensions as-is.\n\nYour Flite creative will now contain the layers in your .psd.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"This is an experimental feature. Not all Photoshop features are supported in Flite Design Studio. Specific layer functionality may be omitted if not supported in Flite.\",\n  \"title\": \"NOTE\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Special Layer Name Replacement Feature\"\n}\n[/block]\nYou can apply special names to the layers in your Photoshop file to automatically replace and configure with components in Design Studio. Below is the naming convention:\n\n**$twitter:::at:::{username}** —> replaces with Twitter component with the username defined.\n**$youtube@{videoID} **—> replaces with YouTube component with the video ID defined.\n**$shape** —> replaces with a Shape component (rectangles only and no background fill).\n**$button@{label}** —> replaces with Button component with the label defined.\n**layername@60** —> imports as an Image component with lossy (JPEG) compression set to 60 (1-100 in compression weight).\n\n**Example:**\nSpecial layer naming in Photoshop CC:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/JwmSGjF7Q6m9XADNItnH\",\n        \"photo-cc-special-naming.png\",\n        \"220\",\n        \"173\",\n        \"#6387b6\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n*Pre-configured Twitter component after .psd is imported to Design Studio:* \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/SiMcqBhGTqicUn71p6cr\",\n        \"preconfigured-twitter.png\",\n        \"516\",\n        \"222\",\n        \"#3d6786\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"design-studio-importing-photoshop-files","type":"basic","title":"Importing Photoshop Files"}

Design Studio

Campaign Studio

Report Studio

Metrics

Flite Console

Ad Ops

Component Studio

Importing Photoshop Files

[block:api-header] { "type": "basic", "title": "Overview" } [/block] Design Studio HTML5 offers the ability to import Photoshop (.psd) files into your workspace. Native Photoshop files are processed by Design Studio HTML5 to recreate layers and groups made in Photoshop in the Flite system. This allows you to easily mock up and design a creative in Photoshop and quickly import that into Flite, cutting out the complexity of recreating the design again in Flite. [block:callout] { "type": "info", "body": "This functionality is available in Design Studio HTML5 and is not available in Design Studio Flash.", "title": "NOTE" } [/block] [block:api-header] { "type": "basic", "title": "How It Works" } [/block] There are two ways to import Photoshop (.psd) files into Design Studio HTML5: **1. Make Ad Dialog** Use this option to generate a fresh Flite ad from your .psd [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/DgMeZTaSqeVwcR71ttlw", "Screen Shot 2015-12-30 at 3.42.57 PM.png", "724", "86", "#7caca5", "" ] } ] } [/block] **2. Design Studio Commands menu** Use this option to import your .psd to currently selected stage of an existing ad. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/0GdinjdQQePm0QWrgbTK", "commands-menu.png", "217", "125", "#4879bc", "" ] } ] } [/block] Selecting “Import Photoshop (.psd)” will bring up a file browser which allows you to choose the file from your computer. Flite will process all the layers and groups in the file and automatically map them to layers and components in Design Studio. After the import process completes you may be asked “Would you like to resize the ad to fit the new layers?” This will happen if you’ve imported a .psd to an ad stage that doesn’t match the .psd’s dimensions. To automatically resize your Flite ad to the dimensions of the .psd, click “Match Dimensions,” otherwise click “Cancel” to leave your ad’s dimensions as-is. Your Flite creative will now contain the layers in your .psd. [block:callout] { "type": "info", "body": "This is an experimental feature. Not all Photoshop features are supported in Flite Design Studio. Specific layer functionality may be omitted if not supported in Flite.", "title": "NOTE" } [/block] [block:api-header] { "type": "basic", "title": "Special Layer Name Replacement Feature" } [/block] You can apply special names to the layers in your Photoshop file to automatically replace and configure with components in Design Studio. Below is the naming convention: **$twitter@{username}** —> replaces with Twitter component with the username defined. **$youtube@{videoID} **—> replaces with YouTube component with the video ID defined. **$shape** —> replaces with a Shape component (rectangles only and no background fill). **$button@{label}** —> replaces with Button component with the label defined. **layername@60** —> imports as an Image component with lossy (JPEG) compression set to 60 (1-100 in compression weight). **Example:** Special layer naming in Photoshop CC: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/JwmSGjF7Q6m9XADNItnH", "photo-cc-special-naming.png", "220", "173", "#6387b6", "" ] } ] } [/block] *Pre-configured Twitter component after .psd is imported to Design Studio:* [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/SiMcqBhGTqicUn71p6cr", "preconfigured-twitter.png", "516", "222", "#3d6786", "" ] } ] } [/block]