Rapid UI prototyping in UE4 with Adobe Photoshop and Coherent GT
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 save the document using the “save for web” option in the “file” menu in Adobe Photoshop. Then simply set the resulting html page to a Coherent GT view in UE4.
Below are detailed instructions on how to use this rapid UI prototyping workflow:
1. Design your UI
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.
2. Define the separate UI elements using the slice tool
First select the slice tool from the Tools panel
Then drag over the area where you want to create a slice.
Repeat the procedure for each of your elements that you wish to be separate (have separate image file).
Then choose File/Save for Web
And the “Save to web” window appears
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 “slice selection tool” selected, you can edit the options for the slice.
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
and you will be able to see the UI directly in your game.
– you can actually import 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.
– even though this is an article regarding Coherent GT and UE4, the same methods can be applied to UI design for any game engine that uses Coherent GT. Just save your UI with the “Save for web” option in Adobe Photoshop and set the resulting page to the URL of the Coherent GT view.
For more information about the slice tool in Adobe Photoshop, you can have a look at the following articles: