3 Replies Latest reply on Jan 5, 2017 12:58 PM by JavierAroche

    Imitating Photoshop's UI with CSS style

    bluebeezle Level 1

      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?



      custom1.PNG custom2.PNG


      Photoshop native:

      ps1.PNG ps2.PNG

        • 1. Re: Imitating Photoshop's UI with CSS style
          JavierAroche Level 3

          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.

                    <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>
          • 2. Re: Imitating Photoshop's UI with CSS style
            Jarda Bereza Level 4

            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

            • 3. Re: Imitating Photoshop's UI with CSS style
              JavierAroche Level 3

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