Create DMG background

Need to create a Finder background image with Mullvad branding

added Backlog Brand Feature UX Team Sponsor 131 Q1 labels

assigned to @nicob

marked this issue as related to #13 (closed)

mentioned in issue #13 (closed)

removed Backlog label

added Next label

removed Feature label

added Feature label

added MacOS label

We now have a temporary private -s131 repository to store files with Mullvad branding.

So, the blocker has gone . However, I don't think this has become a priority (but we'll need a background for the March release).

changed due date to March 01, 2023

@nicob status of this?

hi @richard I haven't gotten around to this yet, what's an ideal delivery to get it over to you?

Sooner rather than later of course, but in general this only blocks the initial release in a few weeks/a month.

hi @richard, I think this is everything you might need, but let me know if there's anything I missed/need to clarify :) Full mock-up can be viewed here: Figma

• mullvad-dmg-background
• mullvad-dmg-background_2x
• Mullvad icon size: 112px
  • MacOS_App_Icon
  • MacOS_App_Icon_2x
• Applications folder icon size: 112px
• Text size: 12px

Here's another 2x asset @pierov, if you want to give it a go: mullvad-dmg-background_2x

If that doesn't work, we may need to run it through another program first.

Good news is that it works!

It seems that setting the DPI/print size from GIMP would've worked, too.

Bad news: I might need a new asset .

The current one shows a small border that is shown in older macOS.

Also, the 512x342 size includes the black borders that macOS already adds, so could you please check if it's okay, or if we need a smaller asset? Also, the writings might need to be moved of 1 or 2px for this reason.

But I'll leave these considerations to your much more expert designer eyes (FWIW it looks great to me).

@nicob FYI I accidentally re-exported the asset with the border (I didn't see it on "rectangle 7" ), and the size needs to be tweaked to account for the borders too.

@pierov here is the new asset! I included the space for the title bar and also reduced the total size to 510x340 to account for the borders.

• mullvad-dmg-background_2x

We will either need to adjust the position of the icons, or restore the previous position of "Mullvad Browser":

I think the previous background looks better actually, for the position of the writing, but maybe adjusting the icon position works, too.

Hi @pierov, I think I misread/misunderstood before and thought I also needed to adjust the window size to account for the title which is why the placement is off on this screengrab, sorry about that!

This asset should work (I hope), and the positions of the icons, highlight, and text are the same as the original, but the mockup is here for reference: Figma

• dmg-window_2x

That was exported as a 1x .

Therefore, I set the DPI with GIMP (I didn't do it the first time because I didn't know this was the issue).

Result:

Awesome, I'd say !

@ruihildt

@pierov Validated, very nice!

@nicob Are you running it through image optim by any chance? If so, that'll clear the metadata (which we want to keep in this instance).

@donuts ah, yes I was. @pierov oops here's an actual 2x, and this one also has the metadata:

• dmg-window_2x

Thanks!

Is the position okay? In case, I'll merge after checking the new file is okay.

Or do you want to check the .dmg, too?

I checked it against the mockup and it lgtm! thanks @pierov! ^^

changed due date to March 14, 2023

@nicob Looks like we can specify:

• the background asset
• window size
• window position (we don't want to do this)
• icon positions
• icon size (up to 128px)
• text size (10-16px)

More details here: https://github.com/create-dmg/create-dmg

The title bar seems to be 28px too.

thanks @donuts!

removed Next label

added Doing label

removed Doing label

added Needs Review label

Imagine the right icon (doing a test build soonish):

Oh! The border was visible also here, but I didn't notice it earlier.

mentioned in merge request tor-browser-build-s131!9 (merged)

closed

marked this issue as related to #117 (closed)

mentioned in issue tor-browser#41955 (closed)