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?

       

      Custom:

      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.

          <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>
          
          • 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