Import Photoshop PSD as Widget

Posts: 785
Release 1.21.1 will come with a new experimental feature: the ability to import a Widget from a Photoshop PSD file.

You can access the feature from the File - Import - Photoshop PSD menu.

After selecting your PSD file, the Theme Editor will attempt to read it and create a new Widget in your Theme. For each layer in the PSD, a new SubWidget will be created, with the background image created from the image in the layer. The SubWidget will be named to match the layer name.

The position of the SubWidgets within the parent Widget will match the position of the images in your PSD. The position of the parent Widget should also be set such that the relative position of the SubWidgets are correct, but this only applies if your PSD file is the same size (width/height) as your Theme.


Since this is a bit experimental we are asking for your feedback. Please let us know if you find any issues, for example file formats that cannot be read, or mistakes in positioning or rendering of the images. I am not sure if every possible Photoshop 'action' can be rendered properly, it may be that some effects do not translate properly.

We'd also like to know if you are using different tools (other than Photoshop) to make your Theme images. We'll see if we can support different file formats as well.
Posts: 62
Nick, I'm really looking forward to trying this new feature.

This should really make it much easier to design new themes, so the timing is perfect because I was just about to start from scratch to build something new.

I'll let you know if/when I encounter any issues with this new feature.

-Jeremy
Posts: 785
Looking forward to your feedback. I moved this update into the beta channel by the way with update 1.21.2. Also added a couple bug fixes and small improvements for it. Please try it in the beta channel if possible!

I agree it should make theme building easier. Let me know if you can think of any improvements to it.
Posts: 49
When trying to import from psd click the button and nothing happens.
When trying to import from a adt file the explore pops up to find a adt file


nvm...
it works if you have a theme open i done goofed


Edited (1 time)
Posts: 62
Hey Nick

I'm still very excited about the ability to import PSD file a new theme.

I haven't tested extensively yet because there was one item that would probably prevent me from relying on it at the moment. I recognize this is just the first implementation, so here is my initial feedback so far. I hope this would be a straightforward request to add:

The way I'm building my themes in Photoshop is to create a new folder structure for everything that will become it's own scene in ATVO.

So, for example, in Photoshop, I have a folder for "commentator" which has the few layers in the lower third for the graphics and text that show the commentator name, another folder for the "starting grid" that contain my header, footer and ticker elements.. Etc

One or my PS files had about 7 such folders.

When I imported it into ATVO, a widget was created for all layers, but without any hierarchy.. This would make it too cumbersome to create my scenes.

My work around was to save my PS file multiple times and have only one folder per file. Then I imported each PS file into ATVO and it created a new widget group for each file.. Which is what I wanted because then I could quickly create a scene and select the widget group.

So my feature request would be for ATVO to support Photoshop layer folders and import those into separate widget groups.

Without that, given my workflow, I don't think this feature would speed me up.

Smaller things I noticed were that my transfer mode didn't seem to come across, I had one layer at 19% transparency, but it came in fully opaque, and it also ignored PS layers that had a comma in the name (but I appreciated the verbose error that told me the exact problem!)

So, in short, I'd love to test and use this feature more and hope you can address the widget grouping request so that I can get you some more detailed feedback. :)

Jeremy
Posts: 785
Thanks for the feedback!

For the folders / groups into separate Widget, I recognize this is a likely problem. However the library I'm using to read the PSD file does not seem to give my any indication which folder a layer is in. Therefore currently I cannot know which layers should go into which Widgets. I will see if I can somehow extract that information. If not, a possible alternative is that I give you a dialog with the list of layers found and allow you to group them into separate Widgets manually. Not as automatic as you'd probably like but maybe better than having to save separate PSD files?


As for transparency, that one should work and I have tested it (it's the reason why Widgets now support transparency in the first place). In my test PSD I had two distinct tests:
  • One layer fully opaque (opacity = 100), but a shape drawn with a semi-transparent brush. The result was a PNG that was semi-transparent and a Widget with Opacity = 1 (Correct!)
  • One layer 50% opacity, with a shape drawn with a fully opaque brush. The result was a PNG with fully opaque image, and a SubWidget with Opacity = 0.5 (also correct).

Perhaps your PSD file is a different version/format that doesn't play nice with my parser. Can you upload an example PSD somewhere perhaps?
Posts: 785
I had a quick look to see if I could extract folders / groups names somehow but did not manage it.

Additionally, I should warn you that there are other things that do not translate directly from Photoshop to ATVO, most noticeably the blend modes. If you have anything other than Normal blending between two layers, it will not look the same in ATVO as the concept of blending does not exist. It is also unlikely that we'll ever implement this kind of blending, ATVO is not an image editor after all...

So the best thing to do is "flatten" all your layers such that everything that you want to be a single SubWidget is on one layer.
Posts: 62
Hi Nick,

Thanks for the explanation.

For widget/grouping, I wouldn't ask you to create a dialogue to group layers prior to import, as that would be a lot of work on your side, for minimal gain on the workflow side.

And in fact, I like your suggestion of flattening all the groups in PS. I really should be doing that anyway, since my goal for this workflow is to build all my overlay elements a strong graphics package like Photoshop so that I can align everything properly and make it easier to version.

But you're right. Once I have my object defined for my top 10 scene, for example, I don't really need to bring in every single layer it includes. If I just "mix-down" all my PS groups into a flat object then I will have the end result I wanted: one top widget for every ATVO scene I want to create, and then I would just add my sub-widgets from there .. which is really what i need ATVO for .. to add all the dynamic information to my overlay.

So, I just need to adjust my workflow a bit.

As for the transparency issue .. I think you're right .. I might have been using a non-standard transfer mode, like Multiply or something .. I'll work with defaults for my initial designs instead.

What I'm really liking about the PSD workflow is that I find it easier to position all of my elements in Photoshop, and so far, all the positioning is being imported correctly.

I did notice that for my main logo which I put up in the top right corner, ATVO nicely cropped the height of the widget to the height used by that layer in PS, which was nice, but the widget was still the full width of my entire ATVO canvas .. and from reading your other post about optimizing for performance, I think what I want to aim for is having my widgets only be the size of their content, as opposed to being full raster .. i'll do more tests to see what happens when I have different layers in different locations taking up different vertical and horizontal space ..

-Jeremy
Posts: 785
For each layer, the size of the SubWidget created should match only the visible elements in that layer. So if your layer is just one block in the corner, the SubWidget should be small and positioned in the corner.

The size of the parent Widget however would encompass all the SubWidgets. So if you have a PSD file with a logo in the bottom-right corner and something else (even one pixel) in the top left, the Widget size would still be the full theme size. SubWidgets must always be inside their parent.

Is this not working properly? If not please send me an example PSD.
Posts: 287
I don't try the solution to import, but I have some trouble with size of picture. I had a PSD in 1920*1080 with 72 pixel/pouce of resolution (standard photoshop).
I extract some picture in .png I take information of number of pixels of width and height.
I create a Widget with the same number of pixel and use picture in background.

I must use FILL to get see my picture complet !
If I use NONE the picture is too big.

I will try to change the resolution to see if it change something.
Posts: 287
With 100 pixels / pouce (inch) the picture is a little smaler than the widget.

Could you tell me what is the resolution you use in Photoshop ?
Posts: 287
Ok, after some tests, it seems we have to use 96 pixel by inch (pouce) to get the correct proportion.
Posts: 785
Yes we use 96 DPI (or pixels per inch) so if you make images with a different DPI they will be smaller or larger. I can see if I can add a DPI setting but it is a complicated topic and you also have to consider the DPI of your own display.
Posts: 287
Pictures are done by my brother and he just explain me difference standard between paper format and video format.
I think you have to do nothing,perhaps I don't see the information. ;)
import photoshop psd