Skip to content
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

DMG rebranding #5013

Merged
merged 3 commits into from Jun 8, 2019

Conversation

Projects
None yet
3 participants
@tresf
Copy link
Member

commented Jun 6, 2019

Artwork courtesy @RebeccaDeField
Closes #4289

macOS 10.14 (Dark Mode, Retina Display)
image

macOS 10.8
Screen Shot 2019-06-08 at 12 53 54 AM

Note, macOS has gone dark-mode for many users so if we are to embrace that you may want to mock-up with white text as well.

This statement from #4289 is incorrect. The DMG uses black text automatically so this will not be an issue.

@tresf tresf changed the title Initial DMG rebranding DMG rebranding Jun 6, 2019

@tresf tresf referenced this pull request Jun 6, 2019

Closed

New DMG Background #4289

@RebeccaDeField

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2019

Here to help with spacing/placement of icons. A look at the .json file seems to imply that the same size is set for both icons. Can we set a different size for each icon without much fuss? If not I think that the LMMS icon lining up with the grid is the most important from an aesthetic standpoint. I'll get you some numbers to use for spacing once I know what my options are.

@PhysSong

This comment has been minimized.

Copy link
Member

commented Jun 7, 2019

@RebeccaDeField Basically, DMG is a disk image format. It seems like .DS_Store stores the icon size for items in a directory, not the icon size of individual items. I also searched for other tools, and none of them provide the functionality than you may need.

The only way I can think of is adding some spacing into icon.icns, but it will affect the appearance of LMMS icon in other places as well.

@tresf

This comment has been minimized.

Copy link
Member Author

commented Jun 7, 2019

Can we set a different size for each icon without much fuss? If not I think that the LMMS icon lining up with the grid is the most important from an aesthetic standpoint.

No, we cannot.

I'll get you some numbers to use for spacing once I know what my options are.

Spacing is X, Y from top left. Also, folder icons are provided by Apple, the dimensions are always subject to change.

There's a chance that a particular icon size brings equidistant spacing between lines/icon edges, but that trial and error is quite manual due to the points made by @PhysSong and because of this, such spacing is an investment of time that we would need another project volunteer for (or grant you temporary access to a Mac).

@tresf

This comment has been minimized.

Copy link
Member Author

commented Jun 7, 2019

@RebeccaDeField also note, we can roll a retina bg automagically (avoid blurriness at 4K) using this technique: https://github.com/LinusU/node-appdmg#retina-background

Basically, we just need a 2x background named cmake/apple/dmg_branding@2x.png

@RebeccaDeField

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2019

Thank you both for the information.

Basically, we just need a 2x background named cmake/apple/dmg_branding@2x.png

Done. Do I have access to add the file to this PR? Otherwise, I can provide another file link.

If not I think that the LMMS icon lining up with the grid is the most important from an aesthetic standpoint.

What I meant by this was that if changing the folder was not an option, having only the LMMS icon lining up as seen in your preview for the PR works well enough. In fact, it is a perfectionistic detail to match it to the pattern to begin with, I don't believe the website even does.

I can provide some adjustments to the spacing in X&Y.

@tresf I think I'm somehow missing something here because I thought you were using the already existing 128px mimetype/pixel perfect size yet the screenshot in your preview does not seem to be displaying the icon in that size.

@tresf

This comment has been minimized.

Copy link
Member Author

commented Jun 7, 2019

Do I have access to add the file to this PR?

Yes.

@tresf I think I'm somehow missing something here because I thought you were using the already existing 128px mimetype/pixel perfect size yet the screenshot in your preview does not seem to be displaying the icon in that size.

It's a retina display, everything is 2x. Sorry for the confusion. It's my first time doing a retina DMG, but AFAIK, you just divide all dimensions from my mockup in half (or shrink 50%, then measure).

@tresf

This comment has been minimized.

Copy link
Member Author

commented Jun 7, 2019

I thought you were using the already existing 128px mimetype/pixel perfect size

It's a multi-resource .icns file which should contain both 128 and 256 sizes. When macOS is running on a 4K monitor, I believe it just uses the 256 icon when 128 is requested. If it's still off, it may be a DPI difference with the OS that I'm not aware of. The .json file definitely says 128.

@tresf

This comment has been minimized.

Copy link
Member Author

commented Jun 8, 2019

@RebeccaDeField pushed 1 commit. c7f1271 add retina bg file

Screenshot updated.

@RebeccaDeField

This comment has been minimized.

Copy link
Contributor

commented Jun 8, 2019

I may have figured out part of the sizing discrepancy. Didn't realize that there was 8px padding around the 128 icon .svg using the bounding box whereas the icon in my svg was 128 edge-to-edge. Importing the .svg at 112px as it probably is in the mimetype seems to reflect your screenshot.

By measuring the distances from the screenshot and halving it, I was able to position the icon in inkscape exactly as it is in your preview. These numbers are different than what I see in this PR but consistent across measuring in gimp and inkscape.

Inkscape is telling me that the spacing for the LMMS icon as it is with the PR now without any changes should be x:140 y:144 not x:196 y:200.

I just want to change the x position over so that the icons have the same space from the arrows as to the edge of the window. Inkscape tells me this should be x:83 for the LMMS icon and somewhere around (don't have the exact size of the other because the shadow) x:507 for applications.

Example of how this looks in my document with red to just highlight why I think it should be spaced that way:
example

I'm not sure if my numbers will translate correctly on your end or why :\

@tresf

This comment has been minimized.

Copy link
Member Author

commented Jun 8, 2019

Nudged via 731a9fa, screenshot updated.

@RebeccaDeField

This comment has been minimized.

Copy link
Contributor

commented Jun 8, 2019

Looks great from a design standpoint. If/once this is tested sufficiently then I think it's good to merge.

@tresf tresf added this to the 1.2.0 milestone Jun 8, 2019

@tresf tresf merged commit ca06b88 into stable-1.2 Jun 8, 2019

1 of 3 checks passed

continuous-integration/travis-ci/push The Travis CI build failed
Details
continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
ci/circleci Your tests passed on CircleCI!
Details

@tresf tresf deleted the dmg branch Jun 8, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.