{"id":5819,"date":"2015-03-18T01:41:44","date_gmt":"2015-03-18T01:41:44","guid":{"rendered":"http:\/\/coherent-labs.com\/?p=5819"},"modified":"2017-11-10T12:15:11","modified_gmt":"2017-11-10T12:15:11","slug":"rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt","status":"publish","type":"post","link":"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/","title":{"rendered":"Rapid UI prototyping in UE4 with Adobe Photoshop and Coherent GT"},"content":{"rendered":"

Coherent GT<\/strong> is powered by HTML and gives you the unique possibility to prototype your UI directly in Adobe Photoshop<\/strong> and transfer it to the game engine in a few simple steps.<\/p>\n

How does it work?<\/h4>\n

Once your UI is complete, you just need to define the separate UI elements using the slice tool and save the document using the \u201csave for web\u201d option in the \u201cfile\u201d menu in Adobe Photoshop<\/strong>. Then simply set the resulting html page to a Coherent GT<\/strong> view in UE4<\/strong>.<\/p>\n

\"slice<\/p>\n

Detailed instructions<\/h4>\n

Below are\u00a0detailed\u00a0instructions on how to use this rapid UI prototyping workflow:<\/p>\n

1. Design your UI<\/strong><\/p>\n

\"Rapid<\/p>\n

The first step is to design the UI itself. You can do this by using the built-in tools of Adobe Photoshop or import external UI assets from other image editors such as Adobe Illustrator, Corel Draw, Gimp, etc.<\/p>\n

2. Define the separate UI elements using the slice tool<\/strong><\/p>\n

First select the slice tool from the Tools panel<\/p>\n

\"3\"<\/p>\n

Then drag over the area where you want to create a slice.<\/p>\n

\"sliceSelected<\/p>\n

Repeat the procedure for each of your elements that you wish to be separate (have separate image file).<\/p>\n

Then choose File\/Save for Web<\/p>\n

\"save<\/p>\n

And the “Save to web” window appears<\/p>\n

\"Rapid<\/p>\n

In it, you can specify the image format for each of the UI elements (png,jpeg or gif). Furthermore, if you double click on a slice with the \u201cslice selection tool\u201d selected, you can edit the options for the slice.<\/p>\n

\"4\"<\/p>\n

You can enter URL (for example, if it’s a menu button it can point to an URL of another window that this button opens). You can also specify name, target, message and alt message.<\/p>\n

When you choose a slice of type “No Image”, you can enter text to be displayed in the slice area of the resulting web page. This can be plain text or text formatted with standard HTML tags. You can also select vertical and horizontal alignment options.<\/p>\n

When you are done with the options and image formats of the slices, just click \u201csave to web\u201d and a HTML page and image files will be automatically generated.<\/p>\n

\"html+images\"<\/p>\n

The last thing that you need to do is to just set the newly created HTML page to the URL of the Coherent GT component in UE4<\/p>\n

\"ue4url\"<\/p>\n

and you will be able to see the UI directly in your game.<\/p>\n

\"theShotS\"<\/p>\n

Additional notes<\/h4>\n

– you can actually\u00a0import the PSD files in your UE4 project and whenever you need to edit it and save it for web, you can right-click the file and choose open in external editor and Adobe Photoshop will be loaded.<\/p>\n

\"Rapid<\/p>\n

– the\u00a0method described in this article\u00a0is suitable for rapid prototyping of your UI. To add animations, responsive layouts and other complex functionalities, you’ll still need to use visual editor like Adobe Edge or code your UI using standard HTML\/CSS\/JavaScript methods.<\/p>\n

–\u00a0even though this is an article regarding Coherent GT<\/strong> and UE4<\/strong>, the same methods can be applied to UI design for any game engine that uses Coherent GT<\/strong>. Just save your UI with the \u201cSave for web\u201d option in Adobe Photoshop and set the resulting page to the URL of the Coherent GT view.<\/p>\n

For more information about the slice tool in Adobe Photoshop, you can have a look at the following articles:<\/p>\n

https:\/\/helpx.adobe.com\/photoshop\/using\/slicing-web-pages.html<\/a>
\nhttps:\/\/helpx.adobe.com\/photoshop\/using\/html-options-slices.html?PID=7609893#html_options_for_slices<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Coherent GT is powered by HTML and gives you the unique possibility to prototype your UI directly in Adobe Photoshop and transfer it to the game engine in a few simple steps. How does it work? Once your UI is complete, you just need to define the separate UI elements using the slice tool and […]<\/p>\n","protected":false},"author":18,"featured_media":9912,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[406],"tags":[140,151,230],"yoast_head":"\nRapid UI prototyping with Photoshop and Coherent GT in Unreal Engine 4<\/title>\n<meta name=\"description\" content=\"Rapid UI prototyping is simpler than ever with Coherent GT powered with HTML. You can prototype your game interface in Unreal Engine with Adobe Photoshop.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rapid UI prototyping with Photoshop and Coherent GT in Unreal Engine 4\" \/>\n<meta property=\"og:description\" content=\"Rapid UI prototyping is simpler than ever with Coherent GT powered with HTML. You can prototype your game interface in Unreal Engine with Adobe Photoshop.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/\" \/>\n<meta property=\"og:site_name\" content=\"Coherent Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CoherentLabs\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-18T01:41:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-10T12:15:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2015\/03\/slice-copy.png\" \/>\n\t<meta property=\"og:image:width\" content=\"727\" \/>\n\t<meta property=\"og:image:height\" content=\"901\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alexandra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CoherentLabs\" \/>\n<meta name=\"twitter:site\" content=\"@CoherentLabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexandra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/\",\"url\":\"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/\",\"name\":\"Rapid UI prototyping with Photoshop and Coherent GT in Unreal Engine 4\",\"isPartOf\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\"},\"datePublished\":\"2015-03-18T01:41:44+00:00\",\"dateModified\":\"2017-11-10T12:15:11+00:00\",\"author\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791\"},\"description\":\"Rapid UI prototyping is simpler than ever with Coherent GT powered with HTML. You can prototype your game interface in Unreal Engine with Adobe Photoshop.\",\"breadcrumb\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/coherent-labs.com\/posts\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rapid UI prototyping in UE4 with Adobe Photoshop and Coherent GT\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\",\"url\":\"https:\/\/coherent-labs.com\/posts\/\",\"name\":\"Coherent Labs\",\"description\":\"Cross-Platform Game UI Middleware\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/coherent-labs.com\/posts\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791\",\"name\":\"Alexandra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g\",\"caption\":\"Alexandra\"},\"url\":\"https:\/\/coherent-labs.com\/posts\/author\/alexandra\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rapid UI prototyping with Photoshop and Coherent GT in Unreal Engine 4","description":"Rapid UI prototyping is simpler than ever with Coherent GT powered with HTML. You can prototype your game interface in Unreal Engine with Adobe Photoshop.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/","og_locale":"en_US","og_type":"article","og_title":"Rapid UI prototyping with Photoshop and Coherent GT in Unreal Engine 4","og_description":"Rapid UI prototyping is simpler than ever with Coherent GT powered with HTML. You can prototype your game interface in Unreal Engine with Adobe Photoshop.","og_url":"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/","og_site_name":"Coherent Labs","article_publisher":"https:\/\/www.facebook.com\/CoherentLabs\/","article_published_time":"2015-03-18T01:41:44+00:00","article_modified_time":"2017-11-10T12:15:11+00:00","og_image":[{"width":727,"height":901,"url":"https:\/\/coherent-labs.com\/posts\/wp-content\/uploads\/2015\/03\/slice-copy.png","type":"image\/png"}],"author":"Alexandra","twitter_card":"summary_large_image","twitter_creator":"@CoherentLabs","twitter_site":"@CoherentLabs","twitter_misc":{"Written by":"Alexandra","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/","url":"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/","name":"Rapid UI prototyping with Photoshop and Coherent GT in Unreal Engine 4","isPartOf":{"@id":"https:\/\/coherent-labs.com\/posts\/#website"},"datePublished":"2015-03-18T01:41:44+00:00","dateModified":"2017-11-10T12:15:11+00:00","author":{"@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791"},"description":"Rapid UI prototyping is simpler than ever with Coherent GT powered with HTML. You can prototype your game interface in Unreal Engine with Adobe Photoshop.","breadcrumb":{"@id":"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/coherent-labs.com\/posts\/rapid-ui-prototyping-in-ue4-with-photoshop-and-coherent-ui-gt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/coherent-labs.com\/posts\/"},{"@type":"ListItem","position":2,"name":"Rapid UI prototyping in UE4 with Adobe Photoshop and Coherent GT"}]},{"@type":"WebSite","@id":"https:\/\/coherent-labs.com\/posts\/#website","url":"https:\/\/coherent-labs.com\/posts\/","name":"Coherent Labs","description":"Cross-Platform Game UI Middleware","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/coherent-labs.com\/posts\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/b0252689790c3d1c9036209533d03791","name":"Alexandra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/coherent-labs.com\/posts\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/687476ba742eac5c6da76b305bc4004b?s=96&d=mm&r=g","caption":"Alexandra"},"url":"https:\/\/coherent-labs.com\/posts\/author\/alexandra\/"}]}},"_links":{"self":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/5819"}],"collection":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/comments?post=5819"}],"version-history":[{"count":7,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/5819\/revisions"}],"predecessor-version":[{"id":12892,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/posts\/5819\/revisions\/12892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media\/9912"}],"wp:attachment":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media?parent=5819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/categories?post=5819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/tags?post=5819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}