Slicer module panel icon in dark mode

I noticed that the “3D Slicer” icon at the top of module panel looks quite ugly in dark mode.

Current icon in default and dark mode:

image

It is not easy to create a version of the icon that looks acceptable in dark mode due to the dark shadow below the icon and the dark letters of the text and lines of the dark lines of the slice contours. I’ve removed the shadow and added bright glow to give some contrast around the gray letters and lines. Here is the result:

image

Should we replace the current icon with this revised icon?

Do anyone want to give a try to come up with a better icon that works on both bright and dark background? Ideally, it would be a single icon and that works for both “dark” and “bright” backgrounds (switching icon based on background color would need some non-trivial software changes).

That is MUCH better than the current look so :+1: for a minor improvement.

Regarding general improvements:
I would agree that a major factor should be the icon’s ability to look good on both light and dark backgrounds and for a logo to have a design that has the same feel when using the version for either on light or dark background. Slack had to do a refresh of their logo and icon this year for this very reason. You can read Say hello, new logo | Slack.

I think color works really well though the current state of the logo is heavy on grayscale which isn’t that great on white or black. I tried reading through the 3D Slicer Visual Communication Guide to understand the background and usage.

  • The lighter gray for “3D” restricts the ability of the “Slicer” text being white or black depending on the background. I think the text color needs to become the same.
  • Maybe the “3D” part even gets dropped :speak_no_evil:. It does seem like the “3D” part is dropped in more cases than not including the domain “slicer.org”.
  • Dark support is also important when Slicer runs on macOS Mojave with Qt 5.12+ with macOS dark mode support (built with 10.14 SDK though deployment target could still be 10.12). Mojave is almost a year old and macOS Catalina will be out soon.

3D Slicer is the registered trademark. USPTO was not willing to trademark Slicer because it’s too broad

Excellent points - it makes good sense to have a new look that takes these points into account. I added a note on the Slicer5 page.

I agree glow looks better in dark mode than the block of white.

Ah I see. It appears that the mark “Slicer” has been registered several times since “3D Slicer” was originally registered. They must have changed their mind. The Slicer org could probably apply and register “Slicer” if it wanted to pay.

3D Slicer - 85269905 - IC 009. US 021 023 026 036 038. G & S: Computer software for data visualization and image analysis. Registered February 14, 2012

Slicer - 86141772 - IC 009. US 021 023 026 036 038. G & S: Computer software for processing electronic payments. Registered March 31, 2015

Slicer - 86788945 - IC 008. US 023 028 044. G & S: Hand-operated food processors. Registered December 13, 2016

Slicer - 86788915 - IC 021. US 002 013 023 029 030 033 040 050. G & S: Kitchen utensils. Registered June 27, 2017

Slicer - 87089955 - IC 042. US 100 101. G & S: Providing online nondownloadable software enabling image-based business data analysis of merchandise. Registered June 6, 2017.

Slicer - 87371574 - IC 005. US 006 018 044 046 051 052. G & S: Albumin dietary supplements. Registered April 10, 2018.

Slicer - 87089944 - IC 009. US 021 023 026 036 038. G & S: computer software for business intelligence analytics. Registered September 4, 2018.

Maybe the electronic payment company had better lawyers… Anyway, there was no other medical software that was awarded the name “Sicer”.

I’ve updated all the icons in the core application and main modules to have transparent background (most of them already had that) and added a bit of bright highlight in icons that were too dark. They should look exactly the same in the default mode, but in dark mode they look a bit better.

image

A graphics designer should go through all our icons and update them to make them look more consistent. @Sam_Horvath will ask Kitware’s designer about it.

2 Likes

I like the Slack logo. It would be great if the Slicer logo could be modernized similarly (simplified, flat look, compatible with both bright and dark background, etc.).

It would be much harder for poeple to find “Slicer” compared to “3D Slicer”. It would be very hard to find projects and papers that use Slicer (if we find something that refers to “3D Slicer” or “3DSlicer” then there is a very high chance that it is about this application). Slicer name would also confuse Slic3r users even more (because Slicer is used for 3D printing, too, and it slices the images).

Yes, the search term “3D Slicer” will find this software better than just “Slicer” so I can see needing to maintain that.

Regarding the 3D Slicer Visual Communication Guide:
Is there a newer version of this guideline? If so, potentially ignore the below comments.

  • The horizontal and vertical versions of the logo do not seem to conform to the guideline for the term as the text appears as “3DSlicer” which is defined as being incorrect. Seems like the logo should have a clear space so it is seen as “3D Slicer” which is the official mark.

  • The title of the Wikipedia page (3D Slicer - Wikipedia) is also “3DSlicer” which doesn’t conform and an edit should probably be issued.

  • The name of the the twitter account is also incorrectly using the term “3DSlicer”.

  • The “small desktop/favicon” logo version is also being incorrectly used for the twitter account. I’ve never seen this cream color used before. Originally from Slicer’s own wiki (?). File:Logo-3DSlicer.png - Slicer Wiki
    image

1 Like

I am very supportive of an update and improved consistency.

It is difficult to maintain consistency over decades. Creating a new updated version of the guidelines would be greatly appreciated.

The logo has a huge brand recognition and we should make changes cautiously in order not to loose the brand recognition. If you look at NASA ‘s logo over time versus the GE logo over time you will see what I mean.

Some items / thoughts:

  • Once we decide how we want to logo updated, we will be able to have the Kitware graphic designer finalize / polish / etc
  • I think the most direct way to modernize the logo would be to
    • Remove the three thin cut planes from all versions of the logo (use favicon style)
    • Change text to “3D Slicer”
    • Switch from shaded to flat coloring
3 Likes

I like those suggestions @Sam_Horvath :+1: I can imaging a non-shaded version that is still clearly the slicer logo, but simplified will look cleaner and more modern.

Hi all, I was wondering if anyone has started working/planned to work on the Slicer icons when the default style will be the dark style one in Slicer5. For example, the icons in the toolbar may need some work:

image

Slicer icons also do not have a common theme (usually each set being done by the module developers). Maybe we should think to use an icon theme. Probably going for “windows-flat” icons will not be a good idea for 3DSlicer (since flat icons works well if the GUI elements are also very flat), but we could have a common theme. For example the overall overview of the paraview toolbars and icons looks much better:
image

1 Like

The icons have been already made compatible with dark background (without that many icons would not be recognizeable at all), but I fully agree that a complete redesign of all icons would be needed - to keep up with current design trends, increased screen resolution, and bright/dark mode requirements.

As far as I remember, @jcfr mentioned that Kitware’s designer may give this a try.

1 Like

We might be able to leverage and extend some of this work: https://react.ohif.org/elements/icon

Any end users or developers who want to contribute icons would be welcome. It would be a great way to contribute to the project for people who may not be in-depth developers.

2 Likes