Imitating Photoshop's UI with CSS style

[bluebeezle]

Hi, guys,

I'm relatively new to scripting in Photoshop, but being that it's javascript, I'm picking it up at a good pace. The thing is, I don't know HTML or CSS that well, and I'd like to imitate Photoshop's UI.

First, I was wondering - you can see in the images below, my custom panel's name is PHAnel. It shows a default custom script icon. Is there any way to customize this? I'm using Eclipse.

Secondly, and more importantly, I have some garish buttons without a rollover state, and when I change the menu size, the spacing gets all out of whack. Meanwhile, Photoshop has buttons with a rollover state with a dynamic width, based on if the text is showing or not.

I was wondering, someone must have created a CSS style to imitate Photoshop's GUI, right? Can anyone point me in the right direction?

Custom:

Photoshop native:

[JavierAroche]

Yes, there is a library. It's called Topcoat. It's owned by Adobe, but I don't know if they're still maintaining it. If you go to the Demo link, you will see all the customized HTML items. The library is a little limited, but it will give you a great start.

You can change the icons through your manifest. Just add the <Icons> tag under your <UI> tag.

<UI>
     <Type>Panel</Type>
     <Menu>PanelName</Menu>
     <Geometry>
          <Size>
               <Width>400</Width>
               <Height>400</Height>
          </Size>
          <MinSize>
               <Width>300</Width>
               <Height>300</Height>
          </MinSize>
          <MaxSize>
               <Width>500</Width>
               <Height>500</Height>
          </MaxSize> 
     </Geometry>
     <Icons>
          <Icon Type="Normal">./icons/Normal.png</Icon>
          <Icon Type="RollOver">./icons/Rollover.png</Icon>
          <Icon Type="Disabled">./icons/Disabled.png</Icon>
          <Icon Type="DarkNormal">./icons/DarkNormal.png</Icon>
          <Icon Type="DarkRollOver">./icons/DarkRollover.png</Icon>
     </Icons>
</UI>

[Jarda Bereza]

I would try look into: c:\Program Files\Adobe\Adobe Photoshop CC 2017\Required\CEP\extensions\com.adobe.photoshop.crema\PSPanel\css\

I am not sure what exactly is .crema purpose, but It looks a bit like Plugin Template

[JavierAroche]

Interesting, thanks for sharing Jarda! I'll have to wait until we get CC 2017 at work to look at this panel