• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Imitating Photoshop's UI with CSS style

Participant ,
Jan 04, 2017 Jan 04, 2017

Copy link to clipboard

Copied

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

TOPICS
Actions and scripting

Views

2.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Participant ,
Jan 04, 2017 Jan 04, 2017

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jan 05, 2017 Jan 05, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 05, 2017 Jan 05, 2017

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines