New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the LMMS logo and mimetypes #4519

Merged
merged 16 commits into from Sep 24, 2018

Conversation

Projects
None yet
4 participants
@Umcaruje
Member

Umcaruje commented Aug 2, 2018

This has been a project that was long in the making, started it with Rebecca around the time we worked on the new stable-1.2 theme, but the icons were left unfinished in my dropbox folder, until now.

The whole logo was redesigned from scratch, to be flat and fit with the new theme better. All the icons were designed to conform to specific pixel sizes: 16x16x, 24x24, 32x32, 48x48, 64x64, 128x128, and I have also rendered them at double the dpi so they stay sharp on hidpi displays.

Here's the application icon in various sizes:
64x64 48x48 32x32 24x24 16x16

Here's the application mimetype in various sizes:
project-64x64 project-48x48 project-32x32 project-24x24 project-16x16

Also, I reverted back the changes from e84b537 to now have proper file association inside windows. We embed two icons inside lmms.exe now, one being the app icon, and the other one being the file association icon (mimetype). Also changed the logic inside of the file association code to always rewrite the registry for the new file association entry. A big thank you to @tresf and @PhysSong for helping for this part.

Here are some screenshots on how the mimetype icons look inside of dark and light Arc themes on elementary OS:

screenshot from 2018-08-02 20 49 36
screenshot from 2018-08-02 20 32 40
screenshot from 2018-08-02 20 33 11
screenshot from 2018-08-02 20 48 23

And some screenshots of the new icons on macOS:

screenshot at aug 01 17-44-21

screenshot at aug 01 17-43-19

screenshot at aug 01 17-42-53

Also, I updated the mainwindow icon to conform to a 16x16 grid, so it's sharp at a small size. a new icon in the theme was created for this called icon_small

I can't seem to get my VM to work for building windows artefacts, but Tres offered to create an installer so I'll post the windows screenshots soon enough.

Thank you for reading this lengthy post, let me know if you like the new icons!

@tresf

This comment has been minimized.

Show comment
Hide comment
@tresf

tresf Aug 2, 2018

Member

@Umcaruje Is it really so important to have a dozen different resolutions of the mimetype? Does the SVG really render that badly at the various resolutions?

Member

tresf commented Aug 2, 2018

@Umcaruje Is it really so important to have a dozen different resolutions of the mimetype? Does the SVG really render that badly at the various resolutions?

@tresf

This comment has been minimized.

Show comment
Hide comment
@tresf

tresf Aug 2, 2018

Member

Something's wrong with the icon being used for the corner of the Window...

image

Member

tresf commented Aug 2, 2018

Something's wrong with the icon being used for the corner of the Window...

image

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Aug 2, 2018

Member

Something's wrong with the icon being used for the corner of the Window...

Sorry about that, fixed it

@Umcaruje Is it really so important to have a dozen different resolutions of the mimetype? Does the SVG really render that badly at the various resolutions?

Answered at discord, but lemme answer here too:
Scaling down svg’s to the really small sizes is bound to have artifacts, you can’t expect an icon designed on a 64x64 grid to fit down to 16x16.
I started with one icon and gradually worked it down resolution wise, And I had to tweak the logo every time because it just lands on half pixels when you scale it down.

Example of a rendered scaled svg vs a pixel fitted icon:
screenshot from 2018-08-02 23 39 57
screenshot from 2018-08-02 20 49 36

Zoomed in, custom icon vs scaled svg:
screenshot from 2018-08-02 23 51 22 screenshot from 2018-08-02 23 51 30

I do now realise I could probably put svg's inside the specific size folders, but I see that .png's seem to be the standard in any folders other than scalable

Member

Umcaruje commented Aug 2, 2018

Something's wrong with the icon being used for the corner of the Window...

Sorry about that, fixed it

@Umcaruje Is it really so important to have a dozen different resolutions of the mimetype? Does the SVG really render that badly at the various resolutions?

Answered at discord, but lemme answer here too:
Scaling down svg’s to the really small sizes is bound to have artifacts, you can’t expect an icon designed on a 64x64 grid to fit down to 16x16.
I started with one icon and gradually worked it down resolution wise, And I had to tweak the logo every time because it just lands on half pixels when you scale it down.

Example of a rendered scaled svg vs a pixel fitted icon:
screenshot from 2018-08-02 23 39 57
screenshot from 2018-08-02 20 49 36

Zoomed in, custom icon vs scaled svg:
screenshot from 2018-08-02 23 51 22 screenshot from 2018-08-02 23 51 30

I do now realise I could probably put svg's inside the specific size folders, but I see that .png's seem to be the standard in any folders other than scalable

@PhysSong PhysSong added this to In progress in Release LMMS 1.2.0-RC7 Aug 4, 2018

@PhysSong PhysSong removed this from In progress in Release LMMS 1.2.0-RC7 Aug 4, 2018

@tresf

This comment has been minimized.

Show comment
Hide comment
@tresf

tresf Aug 6, 2018

Member

@Umcaruje is the splash screen slated for this change? There is now a slight branding disparity between icon and splash screen.

image

Member

tresf commented Aug 6, 2018

@Umcaruje is the splash screen slated for this change? There is now a slight branding disparity between icon and splash screen.

image

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Aug 8, 2018

Member

@Umcaruje is the splash screen slated for this change? There is now a slight branding disparity between icon and splash screen.

Yeah, that's true. One of the reasons for the logo update was because the current logo is too detailed for being shown on small sizes. The splash screen is large enough for that detail in the logo to have effect.

I do see it creates a slight branding disparity, but I kind of like it. I'm not sure how I would redesign it.

Member

Umcaruje commented Aug 8, 2018

@Umcaruje is the splash screen slated for this change? There is now a slight branding disparity between icon and splash screen.

Yeah, that's true. One of the reasons for the logo update was because the current logo is too detailed for being shown on small sizes. The splash screen is large enough for that detail in the logo to have effect.

I do see it creates a slight branding disparity, but I kind of like it. I'm not sure how I would redesign it.

@tresf

This comment has been minimized.

Show comment
Hide comment
@tresf

tresf Aug 8, 2018

Member

One of the reasons for the logo update was because the current logo is too detailed for being shown on small sizes.

The current logo has no more or less detail than any other icons that I see on Windows, Linux or Mac, so let's call it what it is -- a flattening and rebranding as part of our new theme. :D

I do see it creates a slight branding disparity, but I kind of like it. I'm not sure how I would redesign it.

Ok, if it's going to say, this PR just needs final testing and then it can be merged, right?

Member

tresf commented Aug 8, 2018

One of the reasons for the logo update was because the current logo is too detailed for being shown on small sizes.

The current logo has no more or less detail than any other icons that I see on Windows, Linux or Mac, so let's call it what it is -- a flattening and rebranding as part of our new theme. :D

I do see it creates a slight branding disparity, but I kind of like it. I'm not sure how I would redesign it.

Ok, if it's going to say, this PR just needs final testing and then it can be merged, right?

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Aug 8, 2018

Member

The current logo has no more or less detail than any other icons that I see on Windows, Linux or Mac, so let's call it what it is -- a flattening and rebranding as part of our new theme. :D

Hahah true 😁

Ok, if it's going to say, this PR just needs final testing and then it can be merged, right?

Yeah, this is ready to merge, I think the windows file association should just be double checked.

Member

Umcaruje commented Aug 8, 2018

The current logo has no more or less detail than any other icons that I see on Windows, Linux or Mac, so let's call it what it is -- a flattening and rebranding as part of our new theme. :D

Hahah true 😁

Ok, if it's going to say, this PR just needs final testing and then it can be merged, right?

Yeah, this is ready to merge, I think the windows file association should just be double checked.

@tresf

This comment has been minimized.

Show comment
Hide comment
@tresf

tresf Aug 8, 2018

Member

Yeah, this is ready to merge, I think the windows file association should just be double checked.

I assume you're on this since we fixed your build environment. Let me know if this changes.

Member

tresf commented Aug 8, 2018

Yeah, this is ready to merge, I think the windows file association should just be double checked.

I assume you're on this since we fixed your build environment. Let me know if this changes.

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Aug 8, 2018

Member

I assume you're on this since we fixed your build environment. Let me know if this changes.

Yeah, I'm on it

Member

Umcaruje commented Aug 8, 2018

I assume you're on this since we fixed your build environment. Let me know if this changes.

Yeah, I'm on it

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Aug 9, 2018

Member

Just tested on windows, everything seems to be in perfect order. File association registers even when a previous version is installed. Here are some screenshots:
screenshot
capture5
capture4
capture3
capture2
capture

Member

Umcaruje commented Aug 9, 2018

Just tested on windows, everything seems to be in perfect order. File association registers even when a previous version is installed. Here are some screenshots:
screenshot
capture5
capture4
capture3
capture2
capture

@tresf

This comment has been minimized.

Show comment
Hide comment
@tresf

tresf Aug 9, 2018

Member

This should be merged. The only concern that I have is that the icon border comes off a bit strong in these two screenshots:

image

image

This border does NOT come off as strong at higher resolutions on Windows. @Umcaruje it's your call, but I just wanted to point it out before merging as we'll be living with this new icon for quite a while. :)

Member

tresf commented Aug 9, 2018

This should be merged. The only concern that I have is that the icon border comes off a bit strong in these two screenshots:

image

image

This border does NOT come off as strong at higher resolutions on Windows. @Umcaruje it's your call, but I just wanted to point it out before merging as we'll be living with this new icon for quite a while. :)

@PhysSong

This comment has been minimized.

Show comment
Hide comment
@PhysSong

PhysSong Aug 26, 2018

Member

the icon border comes off a bit strong in these two screenshots:

I also think the borders of 16x16 and 24x24 look strong.

Member

PhysSong commented Aug 26, 2018

the icon border comes off a bit strong in these two screenshots:

I also think the borders of 16x16 and 24x24 look strong.

@PhysSong

This comment has been minimized.

Show comment
Hide comment
@PhysSong

PhysSong Sep 6, 2018

Member

@Umcaruje Are you still on it?

Member

PhysSong commented Sep 6, 2018

@Umcaruje Are you still on it?

@PhysSong PhysSong added enhancement gui in progress and removed gui labels Sep 12, 2018

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Sep 19, 2018

Member

Ok, did some rebasing, and updated the icon to have the same border/background combination as the mimetype:
16x16 24x24 32x32 48x48 64x64 128x128

This is how it looks on windows:
image
image
image
image

Note that I am not finished, I am planing on making custom tiles for windows 10 tomorrow and updating the .icns file for mac.

Also, sorry it took me so long to get to this.

Member

Umcaruje commented Sep 19, 2018

Ok, did some rebasing, and updated the icon to have the same border/background combination as the mimetype:
16x16 24x24 32x32 48x48 64x64 128x128

This is how it looks on windows:
image
image
image
image

Note that I am not finished, I am planing on making custom tiles for windows 10 tomorrow and updating the .icns file for mac.

Also, sorry it took me so long to get to this.

Umcaruje added some commits Sep 20, 2018

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Sep 20, 2018

Member

Ok, so updates: the icon looks lovely on mac too:
screenshot at sep 20 16-08-09

And also, I have added custom artwork for windows 10 tiles:
image
image

And the icon looks like this in the start menu:
image

I also started work on an apple dmg background but I can put that in a new PR, if desired.

Member

Umcaruje commented Sep 20, 2018

Ok, so updates: the icon looks lovely on mac too:
screenshot at sep 20 16-08-09

And also, I have added custom artwork for windows 10 tiles:
image
image

And the icon looks like this in the start menu:
image

I also started work on an apple dmg background but I can put that in a new PR, if desired.

@tresf

This comment has been minimized.

Show comment
Hide comment
@tresf

tresf Sep 20, 2018

Member

I also started work on an apple dmg background but I can put that in a new PR, if desired.

Your call. Just add "Closes #4289" in the PR subject if you do it here.

Member

tresf commented Sep 20, 2018

I also started work on an apple dmg background but I can put that in a new PR, if desired.

Your call. Just add "Closes #4289" in the PR subject if you do it here.

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Sep 20, 2018

Member

Just noticed the small icon was blurry, windows documentation is really weird on this, but I changed the icon to be pixel perfect on 48x48:
image

Member

Umcaruje commented Sep 20, 2018

Just noticed the small icon was blurry, windows documentation is really weird on this, but I changed the icon to be pixel perfect on 48x48:
image

@jibin1573

This comment has been minimized.

Show comment
Hide comment
@jibin1573

jibin1573 Sep 21, 2018

Lovely tiles!

jibin1573 commented Sep 21, 2018

Lovely tiles!

@Umcaruje

This comment has been minimized.

Show comment
Hide comment
@Umcaruje

Umcaruje Sep 24, 2018

Member

Did another check of all the files, and everything looks good. Merging.

Member

Umcaruje commented Sep 24, 2018

Did another check of all the files, and everything looks good. Merging.

@Umcaruje Umcaruje merged commit 8154f88 into LMMS:stable-1.2 Sep 24, 2018

2 checks passed

ci/circleci Your tests passed on CircleCI!
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment