Crie sites de alta resolução no Adobe Muse

Aprimorado na Adobe Muse CC 2014.3 | fevereiro de 2015

Agora o Adobe Muse é compatível com telas HiDPI executadas no Windows. Se estiver usando um hardware HiDPI do Windows, observe que a interface do Adobe Muse fica drasticamente mais nítida.

HiDPI, ou High Dots Per Inch, é um termo específico para telas com densidade alta de pixels ou simplesmente de alta resolução. Com densidade de pixels mais alta, as telas HiDPI podem exibir o texto e os gráficos com mais detalhes do que uma exibição padrão. Por exemplo, a tela Retina da Apple disponível nos iPhone, iPad, alguns dispositivos Windows, iPod Touch, etc. pode exibir texto e gráficos de alta resolução.

Os designs da Web criados no Adobe Muse podem tirar proveito total da qualidade de exibição fornecida pelas telas de alta resolução (HiDPI), como as telas Apple Retina.

Aproveitar o HiDPI no Muse é simples:

• Altere a configuração de resolução do site para HiDPI
• Crie imagens que tenham pelo menos duas vezes (2x) o tamanho que parecem ter no site

Quando você carregar ou exportar um site HiDPI do Muse, o código gerado incluirá tanto imagens padrão quanto imagens 2x e detectará automaticamente quais imagens devem ser usadas quando o site for exibido em uma tela com resolução HiDPI ou padrão.

Ativar o HiDPI no Adobe Muse

O menu de resolução na caixa de diálogo Novo site oferecerá a opção de escolher entre Padrão e HiDPI (2x).

Você pode alterar a configuração de resolução depois de criar um site escolhendo Arquivo > Propriedades do site.

Criar ativos com dados de imagem 2x

Para aproveitar ao máximo as telas HiDPI, os ativos devem ser de resolução maior para serem exibidos em alta qualidade. No entanto, o tamanho de um item deve ser duas vezes (2x) o tamanho conforme indicado em seu site.

Criar imagens 2x é simples. Um ativo 2x deve ter pelo menos o dobro do tamanho visual que terá na tela. Por exemplo:

Quando você insere um ativo de HiDPI na tela da página da Web, o Adobe Muse otimiza a imagem reduzindo o tamanho em 50%. A redução no tamanho visual proporciona uma experiência de design mais uniforme e eficiente. Essas imagens são indicadas por “2x” no painel Ativos. Observe que, o Adobe Muse preserva dados do ativo original para fornecer uma densidade de pixels mais alta quando o ativo for exibido em uma tela HiDPI. O texto rasterizado, bem como os efeitos obtidos como imagens, são gerados automaticamente em 2x e tamanho padrão pelo Adobe Muse na publicação e na exportação.

Para assegurar que seus ativos sejam 2x e, portanto, contenham dados suficientes para exibição em qualidade mais alta, verifique seu painel (Janela > Ativos). Quando um ativo contém dados suficientes, o ícone 2x aparecerá ao lado da lista. Se o ícone 2x não aparecer ao lado do ativo, ele não tem dados suficientes para exibição na qualidade mais alta e será exibido na resolução padrão.

Exportação de imagens HiDPI

Há casos especiais quando o Adobe Muse não exporta uma imagem de alta resolução, que é a imagem com dados 2x. Quando as imagens são dimensionadas para ajustar-se aos contêineres, aplicáveis a várias páginas com imagens de fundo, apresentações de slides em tela cheia e assim por diante, o Adobe Muse não exporta uma versão de HiDPI da imagem na publicação. Mais especificamente, nos seguintes cenários apenas a versão padrão da imagem é exportada:

• Largura de 100%: Ajuste da escala/escala para preenchimento
• Apresentação de slides em tela cheia: Ajuste da escala/escala para preenchimento
• Navegador/plano de fundo da página: Ajuste da escala/escala para preenchimento

Observe que, imagens de plano de fundo lado a lado são processadas de forma diferente em comparação ao conjunto de imagens de fundo a serem redimensionadas para ajuste/preenchimento. No caso de imagens lado a lado, o Adobe Muse oferece imagens padrão e de alta resolução para as telas HiDPI respectivamente, ao exportar o site.   Ao trabalhar com Adobe Muse, se você colocar lado a lado uma imagem de alta resolução com dados 2x, ela será tratada como qualquer outra imagem será colocada na tela da página da Web em 50% do tamanho original. Durante a exportação, a imagem dimensionada ao meio (50%) é exportada como a imagem de resolução padrão e a imagem nativa como imagem de alta resolução com dados 2x.

Considerar os visitantes do site

As telas HiDPI permitem que os visitantes do site exibam o conteúdo da Web com a mais alta qualidade visual usando mais dados de imagem. Tamanhos de imagens 2x resultam em arquivos de imagens com 4 vezes o tamanho da imagem de resolução padrão. Para exibir imagens HiDPI, os visitantes do site devem carregar 4 vezes mais dados. Para exibir conteúdo mais rapidamente em sites HiDPI, o Muse exporta ativos HiDPI, bem como ativos com resolução padrão. Os ativos com resolução padrão são carregados primeiro, enquanto os ativos HiDPI são carregados progressivamente acima das versões padrão.

O widget de botão HiDPI (ligar/desligar)

Embora a solução de carregamento progressivo seja conveniente para muitos visitantes de site, ela poderá ser inadequada para os visitantes de site com um plano de dados limitado ou outra conexão com cotas de download limitadas ou caras. Para os visitantes do site, talvez você queira considerar a adição do Widget de botão HiDPI (ligar/desligar). Quando o botão HiDPI (ligar/desligar) for colocado em uma página, essa página carregará inicialmente somente a resolução padrão e o botão HiDPI aparecerá desligado. Se o visitante do site alternar o botão HiDPI para ligado, desse ponto em diante, todas as páginas que contiverem o botão HiDPI (ligar/desligar) carregarão imagens HiDPI, até o visualizador do site desativar o HiDPI, sair do navegador ou limpar cookies. As páginas que não contiverem o botão HiDPI (ligar/desligar) sempre carregarão imagens HiDPI quando visualizadas em uma tela HiDPI ou Retina. Se o site não estiver sendo visualizado em uma tela ou dispositivo HiDPI ou Retina, o botão estará indisponível e somente imagens com resolução padrão serão carregadas.