Bitcoin Logo/Icon Issues #200

1. 
   jarolrod commented at 11:00 pm on January 27, 2021: member

   Now that the Bitcoin logo/icon used with the GUI is currently facing a redesign thanks to @bosch-0’s work on #199, it’s an appropriate time to discuss and potentially fix some issues with the logo. Here I document two issues that I have found: 1) Inconsistent Color, 2) Rough/Pixelated Edges.

   A couple of notes:

   • The icon used as for the New/Proposed Icon is taken from PR #199
   • The icon used as the Current Icon is taken from the 0.21.0 Release

   Inconsistent Color

   Both the new proposed logo and the current logo appear in the GUI as a different color compared to their source. Looking at the RGB values shows that the Red and Blue values get shifted between the source and how it is represented in the GUI. There is a consistent 1 point shift down in the Green value. Tried my best to sample in the same place for all comparisons.

   I suppose that the same color shifts occur with the Regtest, Testnet, and Signet Icons. I have not tested this.

   The orange color between the current and new/proposed logo is different. I believe it would be beneficial to establish concrete colors and/or a color scheme for Bitcoin Core. With an established color scheme we can keep things consistent.

   Current Logo Color Comparison

   New Logo Color Comparision

   Rough/Pixelated Edges

   The Bitcoin logo as a PNG/ICO file that sits under src/qt/res looks completely fine on a HiDPI display. When one runs the GUI, it is apparent that the logo has rough edges that make it look abnormal. This indicates that the problem may not be with the icon/logo itself and instead with how it is painted.

   Below are some screenshots of this problem: SVG, PNG, and GUI Comparison Note: The shadow effect used on the current logo makes the rough edges less obvious. It becomes more apparent on the new logo which doesn’t have this shadow effect.

   Proposed New Logo Splash Screen

   Current Logo Splash Screen

   System icon comparison with other icons Note: Included comparisons with other application icons to highlight that this is a problem with the Bitcoin icon and not a system rendering issue.

2. jarolrod added the label Bug on Jan 27, 2021
3. 
   Bosch-0 commented at 8:25 am on January 28, 2021: none

   Inconsistent Color

   The logo uses a slight gradient of 3 shades of orange starting with #FFA440 at the base, then #FFB040, and finally #FFB640 fyi - but yes seems the GUI is rendering the logo not how it should be. The original source from where I exported the PNG / SVG from is here > https://www.figma.com/file/0oqnohjahRtprjRyaetDOL/Bitcoin-Core-Design-System?node-id=1850%3A44

   Rough/Pixelated Edges

   I did not notice this when testing will try again though I was using a non HiDPI display

4. 
   RandyMcMillan commented at 11:07 pm on January 29, 2021: contributor

   Flat icon design is challenging… :)

   Are you exporting the SVG at high dpi such as 512? 1024? 2048?

   https://iconion.com/posts/flat-icons---what-is-a-flat-web-design-exactly-g.html

   Apple’s guidelines are still useful when targeting multiple platforms (I’m my experience) https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

   It is better to start with a larger canvas (even with SVGs) and reduce the dimensions to fit.

5. hebasto removed the label Bug on Mar 4, 2021
6. hebasto added the label Design on Mar 4, 2021
7. 
   Rspigler commented at 3:06 am on March 8, 2021: contributor

   @Bosch-0 any update?
8. 
   Bosch-0 commented at 4:09 am on March 19, 2021: none

   Seems to me it’s more of an issue with Qt rather than the logo I’ve uploaded. #199 (comment) may be a solution?

Contributors
jarolrod Bosch-0 RandyMcMillan Rspigler

Labels
Design