Design no Mac: medindo distâncias na tela

Uma necessidade comum a quem desenvolve ou implementa layouts de tela (por exemplo, em páginas web ou em aplicativos) é a de medir tamanhos e distâncias de elementos na tela: seja para testar seu próprio trabalho ou para identificar os tamanhos aos quais o seu trabalho deverá se adequar, na ausência de um briefing completo ou da documentação adequada.

Não há escassez de ferramentas para esta finalidade, assim como também não faltam truques para substitui-las em sua falta - por exemplo, se os elementos a medir estiverem em paralelo com as extremidades da tela, usar a captura de tela (pela opção que permite selecionar livremente uma área da tela para copiar) mostra as dimensões (em pixels) da área selecionada, mesmo que você não complete a operação. Quando se trata de uma página web, uma inspeção atenta ao CSS (com os cálculos precisos de bordas, margens e espaços internos) também pode permitir ter uma idéia precisa do tamanho dos elementos. E também dá de abrir uma cópia da tela em um editor gráfico com bons recursos de medida, por exemplo.

Já usei todos estes truques, mas para mim esta é uma necessidade comum o bastante para justificar uma ferramenta especializada capaz de medir com precisão suficiente os elementos no lugar em que estiverem.

Analisei várias, e optei por uma que me satisfez desde então: o PixelStick, uma verdadeira régua de pixels, acompanhada de esquadro e compasso ツ

Como você pode ver na imagem acima, o PixelStick funciona medindo a distância em pixels e o ângulo entre 2 pontos quaisquer na tela, representados por um círculo e um losango (que posicionei nas extremidades da ilustração de um MacBook Air, acima).

Para facilitar as visualizações de layout, guias perpendiculares são traçadas em ambos os pontos selecionados e no ponto médio entre eles, guias circulares com raio igual à distância são traçadas ao redor de cada ponto, juntamente a uma terceira guia circular ao redor do ponto médio, com diâmetro igual à distância - e todas estas guias são desativáveis se você não desejá-las.

As distâncias e o ângulo são exibidos em uma janela flutuante, na qual também pode ser ativado (pelo botão da lupa) um zoom para posicionamento mais preciso dos 2 cursores, bem como um visualizador e copiador da cor que estiver sob o cursor.

Isso é tudo que eu preciso de uma ferramenta do gênero, mas ela faz algo mais (que não testei): o uso de escalas, associado ao Google Maps, Photoshop, Yahoo Maps ou a escala personalizada que você desejar.

Existem outras ferramentas do gênero (Guideliner, xScope, etc.) caso você queira pesquisar por recursos adicionais. Mas o PixelStick, que sai por US$ 6,99 na Mac App Store, foi a minha escolha, e recomendo!

Comentar

Comentários arquivados

Mais acessados:

Artigos recentes: