Jabref: Add JabRef logo as tiff for Mac OS installer (retina support)

Created on 17 Dec 2019  路  16Comments  路  Source: JabRef/jabref

The jpackage tool has now the option to provide a tiff with high resolution for Mac OS retina
displays. JabRef should also provide a high resolution image.

Refs: https://bugs.openjdk.java.net/browse/JDK-8234284

Some tutorials. It seems to be someone with a mac is required.

https://computers.tutsplus.com/tutorials/how-to-create-a-retina-ready-dmg-based-app-installer--cms-21653

https://developer.apple.com/library/archive/documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Optimizing/Optimizing.html

build-system good first issue macOS enhancement

Most helpful comment

OK, the image is updated. Source files are located in "Simple Bebas Neue font" folder.

When I created dmg install file, I used the following settings:

  • JabRef & Applications icons are of 84 size (dmg file properties);
  • font size of JabRef icon & Applications icon - 12 px;

Any more comments are welcome.

All 16 comments

@Siedlerchr
if I understand correctly, you need a Tiff file with 2 images: hi res & low res. As stated in this video https://computers.tutsplus.com/tutorials/how-to-create-a-retina-ready-dmg-based-app-installer--cms-21653 - scroll to 4:27

Correct?

@Gena928 Exactly. You can find the original tiff here:
https://github.com/openjdk/jdk/blob/master/src/jdk.incubator.jpackage/macosx/classes/jdk/incubator/jpackage/internal/resources/background_dmg.tiff

I have attached our JabRef Logo: Maybe you can integrate or design a new picture with JabRef's logo in it. That would be cool
jabref_logo_without-bg.zip

@Siedlerchr
I have some design problems. ))) Give me a few days, I'll try to create something normal.
Google drive folder with sample image

Yeah looks already good! Thanks for stepping in. Take your time. It's not a critical issue 馃槑

@Siedlerchr
please see sample images in "All screenshots" folder: Google drive folder with samples

Any comments a highly appreciated. Design is very sensitive area, so if you think you need more options from other people, let's wait for more contributors for this issue.

Thank you very much for your work proposals! I pinged the other devs for a quick look.
@JabRef/developers

Thanks @Gena928, they screenshots look really good. I like the "Simple with comment" the most. Some comments:

  • Having the JabRef icon twice feels a bit too much. I would remove the big one at the top.
  • Is it possible to make the icons at the bottom a bit larger?
  • The arrow is a bit "fancy". Can you replace them with a somewhat simpler one?
  • The font color and family should match the one we use in our flyers. I.e. "JABREF" should be blue, and the "To install, ..." text black. @stefan-kolb which font did you used?
    flyer

I liked the following ones:
firefox
Without the "firefox" below the icon and with an installation note as in
moro

@stefan-kolb which font did you use?

https://www.dafont.com/de/bebas-neue.font

@stefan-kolb
Sorry, simple "Bebas Neue" or maybe "Rounded", "by FontFabric"?
https://fonts.adobe.com/foundries/dharma-type

Added 2 new samples:

  • Simple Bebas Neue font (w bg).png
  • Simple Bebas Neue font.png

@Gena928 Toe me the Bebas variant without a background is the best. Matches the flyer

Wow, that looks nice. I agree with @Siedlerchr that the Bebas layout with the white background looks the best. One small remark: I think it should be "to the Applications folder" in the description.

OK, the image is updated. Source files are located in "Simple Bebas Neue font" folder.

When I created dmg install file, I used the following settings:

  • JabRef & Applications icons are of 84 size (dmg file properties);
  • font size of JabRef icon & Applications icon - 12 px;

Any more comments are welcome.

Perfect! I think you can go ahead and create the PR.

PR created.
Is it OK if I attach images in PR comment as ZIP file?

Thanks to @Gena928 this is now implemented in the latest development version. Could you please check the build from http://builds.jabref.org/master/. Thanks! Please remember to make a backup of your library before trying-out this version.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

caugner picture caugner  路  3Comments

LinusDietz picture LinusDietz  路  3Comments

oscargus picture oscargus  路  3Comments

humbleambition picture humbleambition  路  3Comments

tobiasdiez picture tobiasdiez  路  4Comments