Completando o layout do DMG com coordenadas
Na Parte 1, apresentamos a ferramenta create-dmg e preparamos uma pasta de staging contendo apenas o .app junto com uma imagem de fundo.
Agora a peça final, o layout. Com que tamanho abrir a janela do DMG e onde colocar o ícone do app e o atalho para Applications — tudo isso é decidido pelas coordenadas que você passa para o create-dmg. Neste artigo, projetaremos essas coordenadas uma por uma.
Como na Parte 1,
FocusTimer, os valores de coordenadas e assim por diante são todos exemplos.
O comando create-dmg completo
Primeiro, vamos ver o comando completo em sua totalidade. Este é o comando que constrói o DMG para o app de exemplo FocusTimer 1.0:
create-dmg \
--volname "FocusTimer 1.0" \
--background build/dmg-background.png \
--window-pos 200 120 \
--window-size 600 400 \
--icon-size 100 \
--icon "FocusTimer.app" 175 190 \
--hide-extension "FocusTimer.app" \
--app-drop-link 425 190 \
--no-internet-enable \
"build/FocusTimer-1.0.dmg" \
"build/dmg-stage/"
As duas últimas linhas são a saída e a entrada:
build/FocusTimer-1.0.dmg— o caminho do arquivo DMG a ser criadobuild/dmg-stage/— a pasta de staging que continha apenas o.appda Parte 1
As linhas acima que começam com -- são as opções que projetam a janela e os ícones. Vamos percorrê-las uma por uma.
Entendendo o sistema de coordenadas
Antes de analisar as opções, vamos definir como as coordenadas funcionam.
Todas as coordenadas de posição do create-dmg são coordenadas dentro da janela do DMG. A unidade é o ponto (point) explicado na Parte 1.
- A origem
(0, 0)é o canto superior esquerdo da janela. - X aumenta à medida que você se move para a direita, e Y aumenta à medida que você se move para baixo. (Observe que, ao contrário de um gráfico matemático, Y aumenta para baixo.)
- Se você definir o tamanho da janela como
600 400, as coordenadas se movem dentro do intervalo0–600horizontalmente e0–400verticalmente.
A coordenada de posição de um ícone aponta para o centro desse ícone — não seu canto superior esquerdo, mas seu centro exato.
As opções, uma por uma
| Opção | Valor (exemplo) | Significado |
|---|---|---|
--volname | "FocusTimer 1.0" | O nome do volume exibido quando o DMG é montado |
--background | build/dmg-background.png | A imagem de fundo da janela (a preparada na Parte 1) |
--window-pos | 200 120 | A posição onde a janela se abre na tela (X, Y) |
--window-size | 600 400 | O tamanho da janela (largura, altura — em pontos) |
--icon-size | 100 | O tamanho dos ícones dentro da janela (em pontos) |
--icon "FocusTimer.app" | 175 190 | A posição do ícone do app (X, Y dentro da janela) |
--hide-extension "FocusTimer.app" | — | Oculta a extensão .app no nome do ícone |
--app-drop-link | 425 190 | A posição do atalho para a pasta Applications (X, Y dentro da janela) |
--no-internet-enable | — | Desativa o recurso “internet-enable” não mais usado |
Algumas dessas merecem ser destacadas separadamente.
--window-pos vs. --window-size — essas duas são fáceis de confundir. --window-pos é onde na tela (no desktop) a janela aparece quando o usuário abre o DMG, enquanto --window-size é o tamanho da própria janela. O que importa para o design de coordenadas é --window-size.
--icon-size 100 — os ícones dentro da janela são desenhados com um tamanho de 100 pontos. Você precisa saber esse valor ao projetar a imagem de fundo também, porque o espaço de 100 pontos que cada ícone ocupa (= 200 pixels na imagem de fundo) deve ser deixado vazio no fundo.
--icon e --app-drop-link — esses dois são os protagonistas esquerdo e direito da janela. --icon é o ícone do app que o usuário precisa arrastar, e --app-drop-link é o atalho para a pasta Applications que serve como destino do arrastar. Com --app-drop-link, não há necessidade de criar um link simbólico separadamente — o create-dmg cria e posiciona o atalho para Applications para você.
--hide-extension — sem isso, o ícone mostra o nome completo FocusTimer.app com sua extensão abaixo. Ocultá-la faz com que apareça apenas como FocusTimer.
--no-internet-enable — “internet-enable” é um recurso antigo pelo qual um Safari mais antigo processava automaticamente os DMGs baixados; não é mais usado hoje em dia. Passar essa opção faz o create-dmg pular essa etapa de processamento e o aviso relacionado.
Design de coordenadas — posicionando os dois ícones
Agora para o coração da questão. Definimos o tamanho da janela como 600 400, então dentro disso decidimos onde colocar o ícone do app e o atalho para Applications.
No comando de exemplo, os definimos assim:
- Ícone do app:
--icon "FocusTimer.app" 175 190 - Atalho para
Applications:--app-drop-link 425 190
Aqui está o que esses números significam:
O eixo X (horizontal) — 175 e 425
A largura da janela é 600 pontos, e seu centro é 300. Colocar os dois ícones em 175 e 425 coloca cada um 125 à esquerda e 125 à direita do centro. Em outras palavras, os dois ícones são colocados simetricamente em relação ao centro. Com o ícone do app à esquerda e Applications à direita, isso cria a direção natural de “arrastar da esquerda para a direita”.
O eixo Y (vertical) — ambos em 190
A altura da janela é 400 pontos, e seu centro é 200. Colocar os dois ícones no mesmo 190 os coloca lado a lado na mesma altura, ficando ligeiramente acima do centro exato (200). Como o rótulo do ícone é anexado abaixo do ícone, deslocá-lo ligeiramente para cima o coloca visualmente centralizado uma vez que o rótulo é incluído.
Não há uma resposta única e correta para as coordenadas. Os valores acima são apenas um exemplo equilibrado de “colocar dois ícones de 100 pontos lado a lado e simetricamente em uma janela de 600×400”. Sinta-se à vontade para ajustá-los ao seu próprio design de fundo.
Alinhando a imagem de fundo com as coordenadas
Aqui, a convenção @2x da Parte 1 reaparece.
As coordenadas dos ícones (175,190, 425,190) são as coordenadas em pontos da janela. Mas a imagem de fundo tem o dobro desse tamanho — 1200×800 pixels. Quando você desenha a seta na imagem de fundo, você precisa pensar em termos de coordenadas em pixels que são as coordenadas da janela multiplicadas por 2.
Coordenadas em pixels da imagem de fundo = coordenadas em pontos da janela × 2
Convertendo os dois ícones do exemplo para coordenadas em pixels da imagem de fundo obtemos:
| Elemento | Coordenadas da janela (pontos) | Coordenadas da imagem de fundo (pixels) |
|---|---|---|
| Centro do ícone do app | (175, 190) | (350, 380) |
Centro de Applications | (425, 190) | (850, 380) |
Portanto, quando você desenha a seta de orientação na imagem de fundo (1200×800), ela deve ser desenhada entre os pixels (350, 380) e (850, 380) — os locais dos dois ícones. Como o tamanho do ícone é 100 pontos = 200 pixels, deixe a área de 200 pixels que cada ícone ocupa vazia e coloque a seta no espaço entre eles.
Alinhar o artwork da imagem de fundo com as coordenadas de ícone do create-dmg com a mesma referência é o coração do design DMG. Se os dois estiverem desalinhados, a seta não acerta os ícones ou é desenhada sobreposta a eles.
Verificação e ajuste fino
Quando você executa o comando, build/FocusTimer-1.0.dmg é criado. Dê um duplo clique no DMG resultante e abra-o você mesmo.
- O fundo preenche a janela completamente? (Se estiver encolhido em um canto → essa é a armadilha de DPI da Parte 1. Normalize para 144 com
sips.) - O ícone do app e
Applicationsestão bem posicionados nas duas extremidades da seta de fundo? - Os rótulos dos ícones não estão cortados ou sobrepostos?
As coordenadas geralmente não se alinham perfeitamente na primeira tentativa. Apenas repita o processo algumas vezes: ajuste os números em --icon e --app-drop-link um pouco, execute o comando novamente e verifique com seus próprios olhos. Depois de finalizar as coordenadas, raramente você precisará alterá-las novamente.
Reutilizando em cada lançamento — automação
O design de DMG é efetivamente uma tarefa que se faz uma única vez. Depois de finalizar a imagem de fundo e as coordenadas, você reutiliza exatamente as mesmas configurações para cada lançamento que se seguir.
Portanto, é uma boa ideia colocar esta chamada ao create-dmg como uma etapa do seu script de build de lançamento. Em um script, o fluxo geralmente se parece com isto:
- Copie o
.appassinado, notarizado e grampeado (stapled) para a pasta de staging (Parte 1) - Copie a imagem de fundo e então normalize seu DPI para 144 com
sips(prevenindo a armadilha da Parte 1) - Execute o
create-dmgcom as coordenadas projetadas acima - Limpe os arquivos temporários como a pasta de staging
Apenas o número de versão muda de um lançamento para outro (o 1.0 em --volname e FocusTimer-1.0.dmg no nome do arquivo de saída), então se você extrair apenas essa parte para uma variável de script, não precisará tocar no comando a cada vez. Mantenha o caminho da imagem de fundo e todas as coordenadas como valores fixos.
Recomendamos fazer o script realizar automaticamente a normalização de DPI da imagem de fundo (
sips) toda vez. Dessa forma, mesmo que você esqueça de normalizar o DPI ao re-exportar e substituir o design original, o script sempre o corrigirá para você.
Resumo da série
O design DMG de duas partes está completo. Você agora tem:
- ✅ (Parte 1)
create-dmg+ uma pasta de staging do.app+ uma imagem de fundo com @2x e DPI normalizado - ✅ (Parte 2) Design de coordenadas de janela e ícones + alinhamento das coordenadas em pixels do fundo com as coordenadas em pontos da janela + automação
Para recapitular os pontos principais:
- A janela do DMG tem 600×400 pontos, e a imagem de fundo tem o dobro — 1200×800 pixels (@2x).
- O DPI do PNG de fundo deve ser normalizado para 144 — somente assim o fundo preenche a janela exatamente.
- As coordenadas dos ícones são coordenadas em pontos dentro da janela, e as coordenadas do artwork do fundo são coordenadas em pixels que são o dobro dessas — alinhe os dois com a mesma referência.
- Coloque o design que você finalizou no seu script de build e reutilize-o como está em cada lançamento.
Uma única seta pequena, ou uma posição de ícone deslocada por alguns pontos, pode influenciar a primeira impressão de um usuário. Como a janela .dmg é o lugar onde um usuário encontra seu app pela primeira vez, vale a pena projetá-la cuidadosamente, uma vez.