Os objetos no Adobe Muse contêm elementos de design criados ou importados de fontes externas. Imagens, textos, quadros de imagens e muito mais podem ser adicionados à página da Web e ser manipulados usando diversas ferramentas do Adobe Muse.

Um dos fluxos de trabalho mais comuns é criar e importar um botão do Adobe Photoshop. Da sua parte, o Adobe Muse reconhece camadas e composições de camada criadas no Photoshop. O Adobe Muse permite definir essas camadas como estados de botão em seu site.

Para objetos inseridos na tela da página da Web, é possível adicionar transformações para atender às necessidades de design do site. Você também pode isolar um objeto para adicionar propriedades de ajuste de preenchimento e da medianiz para manipular elementos aninhados de espaçamento.

Inserir quadros de imagens em projetos do Adobe Muse

É possível inserir quadros de imagens diretamente em projetos do Adobe Muse clicando na ferramenta Quadro de imagem. No painel Ferramentas, clique na ferramenta Quadro de imagem e, em seguida, no local requerido no projeto.

Posicionar imagem única na página

O área de trabalho do Muse funciona de maneira semelhante a do Ilustrador e do InDesign, na qual você carrega a imagem inserida primeiro e depois clica na página onde deseja exibi-la. Para adicionar um arquivo de imagem colocando-o diretamente na página, faça o seguinte:

1. Escolha Arquivo > Posicionar ou use o atalho de teclado: Command-D (Mac) ou Control-D (Windows) para abrir a caixa de diálogo Importar.
2. Navegue para selecionar o arquivo denominado made-with-muse.png, localizado na pasta de arquivos de exemplo. Clique em Abrir para selecioná-lo e fechar a caixa de diálogo Importar.

Clique uma vez na parte inferior da página para posicionar a imagem. Nesse caso, você deseja inserir a imagem em tamanho normal, portanto, basta clicar uma vez. Entretanto, se você quiser redimensionar a imagem inserida, poderá clicar e arrastar para redimensionar a imagem com um tamanho específico. 

Usando a ferramenta Seleção, arraste a imagem para o centro vertical do retângulo de rodapé lado a lado e observe como as guias vermelhas e as caixas de medição turquesa aparecem rapidamente para ajudá-lo a alinhá-la ao centro.

Depois de fazer essas alterações, a seção do rodapé estará quase completa.

Como o Muse otimiza imagens quando você publica ou exporta um site

Você também pode inserir imagens prontas para impressão no Adobe Muse, convertendo-as em um formato para a Web. No entanto, tornar as imagens amigáveis para a Web frequentemente significa comprimir a imagem e sacrificar sua qualidade. Colocar imagens que não são para a Web no Muse resulta em uma compactação automática. Se você publicou ou exportou um site e não está satisfeito com os resultados automatizados, experimente criar e otimizar suas imagens para a Web manualmente no Photoshop ou Adobe Fireworks®. Exclua as imagens originais e coloque as imagens otimizadas nas páginas, depois publique ou exporte seu site novamente.

Lembre-se de que as demais alterações em uma imagem no Muse - como cortes, redimensionamentos ou adições de chanfrados, sombras e brilhos - resulta na recriação da imagem e na compressão automática. Para obter mais controle sobre o processo de otimização, você pode adicionar efeitos a uma imagem usando o Photoshop ou o Fireworks. Otimize o arquivo em um programa de edição de imagens e coloque a imagem no Muse para definir o nível de compactação. É possível inserir arquivos PSD do Photoshop diretamente no Muse, em vez de exportar um arquivo PNG, JPG ou GIF, mas isso também fará com que o Muse gere automaticamente um novo arquivo de imagem usando seus algoritmos de compactação automática.

Otimizar imagens para exibição na Web

Erros de exportação e operações de exportação mais lentas podem ocorrer quando um arquivo vinculado for colocado em uma resolução muito alta e depois dimensionado em uma escala muito menor na página. Este não é um fluxo de trabalho recomendado. Os problemas começam a ficar mais evidentes quando imagens de tamanho total (mais de 2.000 pixels) são posicionadas e dimensionadas para que se encaixem ao design.

Se você inserir um arquivo de imagem muito grande, o Muse limitará automaticamente o tamanho e redimensionará a largura da imagem para 2.048. Se você passar o mouse sobre o nome de um ativo no painel Ativos, uma dica de ferramenta exibirá o tamanho original da imagem inserida e o tamanho da imagem redimensionada (criada para se ajustar ao limite de tamanho máximo).

É uma prática recomendada redimensionar e otimizar gráficos da Web para um site em um programa de edição de imagens antes de colocá-los nas páginas. Colocar imagens com dimensões muito grandes pode fazer com que o tamanho do arquivo .muse seja muito maior do que o necessário. O arquivo .muse deve processar os dados de pixels adicionais que não são necessários para exibir a imagem na Web. Isso pode resultar em um tempo de processamento mais longo ao exportar e publicar sites. Em alguns casos, um arquivo .muse muito grande pode expirar ao tentar redimensionar e otimizar todos os arquivos durante o processo de publicação ou exportação. Erros de expiração podem ocorrer.

Para solucionar esse problema, clique com o botão direito do mouse nos nomes dos ativos e escolha Otimizar tamanho do ativo para remover dados desnecessários e exibir a imagem dimensionada.

Se você dimensionar uma imagem otimizada para que ela apareça maior em um design, o erro de ativo Muito ampliado pode ser exibido. Para solucionar esse problema, selecione Importar em tamanho maior para recuperar os dados adicionais da imagem necessários para exibir uma imagem dimensionada aceitável.

Desenhar formas de espaços reservados

Os espaços reservados pode podem ter a forma de uma elipse, retângulo ou polígono e você pode preenchê-los com imagem, texto ou cor.

Colocar um arquivo do Photoshop como botão de rolagem

O botão Compartilhar exibe os estados conforme esperado. Na próxima seção, você aprenderá como alinhar o botão Compartilhar à imagem de gotejamento no lado direito da navegação do site.

A seguir, você aprenderá a definir as áreas de cabeçalho e rodapé da página-mestre.

Fixar objetos na janela do navegador

Ao inserir uma imagem ou usar outros métodos para adicionar arte em uma página, use as teclas de seta e a ferramenta Seleção para reposicioná-la. À medida que mover a imagem ao redor, ela será movida em relação a outros elementos (imagens, texto e mídia) que também existem na página. Você tem a capacidade de mover os outros elementos também, mas a página inteira se comporta como um folheto ou pôster. Os itens de página existentes em um único plano. Se a página for longa (com muito conteúdo vertical) e o visitante rolar para baixo, não verá mais as imagens na parte superior da página.

É provável que você tenha visto objetos fixos ao exibir; eles são itens “persistentes” que sempre são exibidos em um local. Parecem flutuar acima do restante do conteúdo da página.

Quando você usar a ferramenta Fixar, basicamente removerá uma imagem do fluxo de página. Em vez de organizá-la em relação a outros elementos da página, você ajustou-a para um local específico em relação ao navegador. Imagens fixas parecem estar "coladas" – sempre ficando em um mesmo ponto (como o canto superior direito ou a passagem do mouse perto da parte inferior) independentemente de outros elementos de rolagem da página. Se o visitante redimensionar o navegador, imagens fixas sempre permanecerão no local fixo em relação à janela do navegador.

Pense na fixação como uma forma de “dividir a imagem” do design de uma página e prendê-la no navegador, como a fixação de uma anotação em um quadro de cortiça. O elemento fixo será movido para manter sua posição em relação ao navegador se o visitante redimensionar a janela do navegador, mas o elemento fixo não será movido se o visitante tolar o conteúdo da página horizontal ou verticalmente.

Siga estas etapas para usar a ferramenta Fixar:

1. Com a página-mestre A aberta no modo de exibição Design, selecione o ícone do Facebook com a ferramenta Seleção.
2. Clique na posição do pino superior direito na interface Fixar no painel de controle. Essa configuração "fixa" o elemento no local atual do canto superior direito.

3. Repita as etapas 1 a 2 para fixar os botões de ícone Google+ e Twitter em suas posições superiores à direita, para que eles não sejam movidos na janela do navegador quando o restante da página for rolada.
4. Clique no Plano para exibir miniaturas de página. Observe que todas as páginas agora incluem os três ícones de mídia social, pois eles foram adicionados à página-mestre.
5. No modo de exibição Plano, clique duas vezes na página alimentos para abri-la no modo de exibição Design. Ou se estiver aberta, clique na guia da página alimentos para torná-la ativa. Escolha Arquivo > Visualizar página no navegador para visualizar a página em um navegador.
6. Clique no item de menu Sobremesa para ir para a página com a seção de menu Sobremesa. Observe que durante enquanto os outros elementos da página rolam, os três ícones de mídia social permanecem na posição no lado direito da página, pois estão fixos.

Vá para Criando seu primeiro site no Muse, Capítulo 6, para saber como agrupar conjuntos de objetos para que eles se comportem como um elemento. Você também concluirá a página Visitas adicionando um mapa do Google incorporado que exibe as localizações do Katie's Cafe aos visitantes. E, depois de finalizar o site, você verá como é fácil carregá-lo em um servidor de hospedagem (do Business Catalyst) para publicá-lo on-line, para que seja possível compartilhar o trabalho em andamento com seus clientes e colegas.

No Capítulo 4 de Criando seu primeiro site com o Muse, você aprendeu a adicionar marcas de ancoragem e vinculá-las aos itens de menu em um widget de Menu horizontal manual. Você também aprendeu a fixar elementos da página para impedir sua rolagem. E você viu como adicionar links a arquivos para que os visitantes possam fazer seu download.

Você também pode observar os objetos de grupo e como trabalhar com grupos para poder colar conjuntos de conteúdo nas páginas. Você também trabalhará com mais HTML incorporado; dessa vez, você adicionará um mapa do Google interativo à página Visitas. E, finalmente, você verá como dar os toques finais em seu site adicionando um favicon e depois publicando o site de teste nos servidores de hospedagem incluídos.

Agrupar objetos e cole grupos como uma única unidade

Assim como no InDesign e outros programas de design, é possível combinar vários objetos em um grupo para que sejam tratados como uma unidade. Nesta seção, você criará um projeto composto de vários elementos (imagens e quadros de texto inseridos) e depois verá como agrupá-las para facilitar o posicionamento ou copiá-las como um item. Siga estas etapas:

1. No modo de exibição Plano, clique duas vezes na miniatura de página inicial para abri-la no modo de exibição Design.
2. Escolha Arquivo > Posicionar. Procure e selecione o arquivo chamado panel-open-bottom.png na pasta de arquivos de exemplo. Clique em Abrir para fechar a caixa de diálogo Importar e clique uma vez perto da parte inferior da página inicial (abaixo do Widget de composição de negatoscópio e acima do rodapé) para inserir o gráfico no tamanho cheio.

O arquivo PNG foi definido como uma opacidade menor, por isso o projeto semi-transparente de flor permite que a imagem de fundo lado a lado seja mostrada.

3. Escolha Arquivo> Inserir novamente. Dessa vez, navegue para selecionar a imagem chamada spoon-map.png. Clique em Abrir e clique em uma vez na pétala central superior para inseri-lo.
4. Com a imagem de colher selecionada, pressione e mantenha pressionada a tecla Option (Mac) ou Alt (Windows) para duplicar a imagem de colher e arrastá-la para a pétala imediatamente à direita do centro. Repita essa ação novamente, para duplicar a imagem da colher central e arraste a cópia duplicada da pétala para a esquerda. Use a ferramenta Seleção para posicionar as três colheres, conforme mostrado na imagem.

5. Usando a ferramenta Texto, desenhe um quadro de texto na pétala central e digite o seguinte:

Katie's Cafe

Noe Valley

123 Elizabeth Street

SEG-SEX 6 AM - 10 PM

SÁB-DOM 7 AM - 10 PM

6. No painel de texto, aplique as seguintes configurações para formatar o texto:
   • Fonte: Droid Serif (ou qualquer fonte com serifa)
   • Tamanho da fonte: 14
   • Cor da fonte: #222222  (na parte 5 você renomeou essa cor como katieblack)
   • Alinhamento de origem: Centro
   • Entrelinha: 120%

7. Em seguida, selecione apenas as últimas duas linhas (que começam com os dias da semana) e defina a cor da fonte como vermelho (#A6342A).
8. Selecione o quadro de texto com a ferramenta Seleção. Pressione e mantenha pressionada a tecla Option (Mac) ou Alt (Windows) para duplicar o quadro de texto e arraste-o para a pétala imediatamente à direita, acima da imagem de colher. Repita essa ação novamente, para duplicar o quadro de texto central e arraste a cópia duplicada da pétala para a esquerda. Use a ferramenta Seleção para posicionar os três quadros de texto de modo que estejam alinhados acima das três colheres, conforme mostrado na imagem.

9. Alterne para a ferramenta Texto. Selecione o texto no endereço à esquerda e altere-o para:

Katie's Cafe

Laurel Heights

800 Spruce Street

SEG-SEX 5 AM - 12 AM

SÁB-DOM 9 AM - 1 AM

10. Selecione o texto no endereço à direita com a ferramenta Texto e altere-o para:

Katie's Cafe

Cole Valley

301 Carmel Street

SEG-SEX 7 AM - 10 PM

SÁB-DOM 9 AM - 10 PM

Agora que o design está completo, selecione os elementos e agrupe-os.

11. Use a ferramenta Seleção e clique e arraste sobre o design inteiro de flor, certificando-se de selecionar tanto a imagem de flor inserida, como as três imagens de colher e os três quadros de texto. Clique com o botão direito do mouse e escolha Agrupar no menu exibido. Se preferir, você também poderá escolher Objeto > Agrupar.

Observe que, após o agrupamento do conjunto de objetos, o Indicador de seleção no canto superior esquerdo do Painel de controle exibe a palavra: Agrupar.

12. Copie o grupo selecionado. Clique no plano para retornar à exibição Plano e clique duas vezes na miniatura da página Visitas para abri-lo na exibição Design. Escolha Editar > Colar no local, para inserir todo o grupo de elementos no mesmo local.

Como é possível ver neste exemplo rápido, os grupos são úteis sempre que um design é concluído e você deseja trabalhar com ele como um elemento simples, para reposicioná-lo em uma página ou copiá-lo e colá-lo em uma página diferente.

Além do agrupamento, você também pode achar os recursos Bloquear úteis quando terminar um Design. Clique com o botão direito do mouse em um grupo ou conjunto selecionado de elementos e escolha Bloquear no menu contextual exibido para bloqueá-los. (Como alternativa, você pode escolher Objeto > Bloquear). Bloquear garante que você não vá acidentalmente mover, nem excluir alguns elementos concluídos em uma página, pois não será mais possível selecioná-los. Se for necessário atualizar os elementos bloqueados depois, escolha Objeto > Desbloquear tudo na página.

Depois que você colar o design de flor na parte inferior da página Visitas, o conteúdo da página estará parcialmente concluído. Na próxima seção, você continuará editando a página Visitas para adicionar uma interface interativa de mapa para ajudar os clientes a localizarem o café mais próximo.

Incorporar conteúdo de mídia avançada para adicionar animação

Usar o painel de espaço

O painel de espaçamento permite aproveitar o preenchimento CSS e propriedades da medianiz. O preenchimento limpa uma área ao redor do conteúdo (dentro da borda) de um elemento. O preenchimento é afetado pela cor de fundo do elemento.

Os preenchimentos superior, direito, inferior e esquerdo podem ser alterados independentemente usando propriedades separadas. Também é possível igualar todas as propriedades de preenchimento para editá-las uniformemente.

1. No Adobe Muse, selecione Janela > Espaçamento para ativar o painel Espaçamento.

2. Especifique valores para as propriedades esquerda, direita, superior e inferior de preenchimento. Se quiser inserir valores diferentes, desmarque o botão.

3. Você também pode especificar propriedades horizontal e vertical da medianiz.

Dimensionar e girar objetos usando o painel Transformar

O Adobe Muse permite aplicar transformação 2D em objetos. É possível posicionar, dimensionar e girar objetos nos eixos X e Y.

Alternar a largura de 100% no painel Transformar permite definir objetos à largura de 100%. Você também pode definir objetos escaláveis para estendê-los à largura do navegador e ajustá-los na tela do computador.

Para aplicar transformações em um objeto selecionado, faça o seguinte:

1. No Adobe Muse, selecione Janela > Transformar.

2. Com o objeto selecionado, aplique uma das seguintes transformações:
   • Posição: Insira valores X e Y para posicionar o objeto no local desejado na página da Web.
   • Escala: Digite valores de largura e altura para o objeto. Você também pode dimensionar o objeto com largura e altura uniformes clicando no botão.
   • Rotação (): Digite o ângulo de rotação do objeto.
   • Largura de 100% (): Você pode definir o objeto à largura de 100% e permitir que seja redimensionado conforme a largura do navegador.