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

User Interface 4K High Quality Icons, Possible?

Explorer ,
Apr 04, 2019 Apr 04, 2019

Hi there, last year I created a photoshop extension. This year I bought a new 4K monitor and I realised that the UI Icons of the extension are not looking so pretty as the old HD monitor. Is there a way to scale the icons and look better in extreme resolutions?

1.5K
Translate
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

correct answers 1 Correct answer

Guru , Apr 05, 2019 Apr 05, 2019

You just either use RGBs that are double size and set the width to to size you want or use SVGs.

Let's say you want an image 100x100px you make the rgb 200x200 and set width to 100.

<img scr="my200x200.png" style="width:100px">

You can use css classes too.

Translate
Community Expert ,
Apr 04, 2019 Apr 04, 2019

You can make Hi DPI icons.

スクリーンショット 2019-04-05 13.49.12.png

Reference: CEP 9.0 HTML Extension Cookbook.md

Translate
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
Explorer ,
Apr 05, 2019 Apr 05, 2019

Thank you for your answer! That solves one part of my question about the main extension icon. Can I use the same idea for the inner icons (example some buttons) in the extension? I tried with the above trick but doesn't fix the issue.

Translate
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
Guru ,
Apr 05, 2019 Apr 05, 2019

You just either use RGBs that are double size and set the width to to size you want or use SVGs.

Let's say you want an image 100x100px you make the rgb 200x200 and set width to 100.

<img scr="my200x200.png" style="width:100px">

You can use css classes too.

Translate
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
Explorer ,
Apr 05, 2019 Apr 05, 2019
LATEST

SVG files looks like the perfect solution for that! Thank you both!

Translate
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