Saiba como organizar, gerenciar e transformar vários objetos na Adobe Muse. Leia sobre como otimizar imagens para Adobe Muse.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

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.

Usar imagens em projetos do Adobe Muse

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.

  1. No painel Ferramentas, clique na ferramenta Quadro de retângulo ou na ferramenta Quadro de elipse.

    Ferramenta Quadro de imagem no Adobe Muse
    Arraste e solte os quadros de imagens retangulares e elípticos no Adobe Muse.

  2. Clique na ferramenta de quadro de imagem e arraste para inserir o quadro de imagem no projeto.

    Você pode continuar clicando e inserindo diversos quadros de imagens no projeto. Você pode também redimensionar e mover os quadros de imagens para atender às suas necessidades de design.

    É possível preencher o quadro com cor ou inserir imagens nos quadros. Para inserir uma imagem, arraste e solte a imagem no quadro. A imagem é redimensionada para caber no quadro.

    Quadros de imagens retangulares e elípticos
    Quadros de imagens retangulares e elípticos

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.

Inserir uma imagem em Adobe Muse
O rodapé é composto por um único retângulo com uma imagem de fundo lado a lado com uma imagem alinhada ao centro posicionada na parte superior.

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.

  1. No painel Ferramentas, selecione uma das ferramentas Retângulo ou Elipse.

    Desenhe formas espaço reservado em Adobe Muse
    Selecione a ferramenta retângulo ou a ferramenta elipse da barra de ferramentas

  2. Arraste para inserir a forma de retângulo ou elipse no projeto do Adobe Muse.

    • Para criar quadrados, mantenha a tecla shift pressionada e clique na ferramenta Retângulo.
    • Para criar círculos, mantenha a tecla shift pressionada e clique na ferramenta Elipse.

    É possível preencher as formas com gráficos, texto ou cor.

  3. Para definir as propriedades de ajuste de objetos, selecione o retângulo ou a elipse e clique em Objeto > Ajuste.

    Escolha uma das seguintes opções de Ajuste:

    • Ajustar conteúdo proporcionalmente: redimensiona o conteúdo para ajustá-lo a um quadro preservando as proporções do conteúdo. As dimensões do quadro não são alteradas. Se o conteúdo e o quadro tiverem proporções diferentes, isso cria certo espaço vazio.
    • Ajustar quadro proporcionalmente: redimensiona o conteúdo para preencher o quadro inteiro preservando as proporções do conteúdo. As dimensões do quadro não são alteradas. Se o conteúdo e o quadro tiverem proporções diferentes, parte do conteúdo será cortada pela caixa delimitadora do quadro.
    Conteúdo de ajuste proporcionalmente para objetos em Adobe Muse
    Ajustar conteúdo proporcionalmente nos objetos

    Ajustar quadro proporcionalmente nos objetos (Adobe Muse)
    Ajustar quadro proporcionalmente nos objetos

Colocar um arquivo do Photoshop como botão de rolagem

  1. Escolha Arquivo > Inserir botão do Photoshop. Na caixa de diálogo Importar do Photoshop que é exibida, localize o arquivo PSD. Clique em Selecionar (Mac) ou Abrir (Windows) para selecionar o arquivo.

  2. A caixa de diálogo Opções de importação do Photoshop é exibida. Reserve um momento para investigar como as configurações são aplicadas. Você pode usar os menus para especificar qual camada no arquivo do Photoshop será mostrada de acordo com um dos estados: Estado normal (a maneira como o botão é exibido quando a página é carregada pela primeira vez), Estado da rolagem (a maneira como o botão é exibido quando os visitantes colocam o cursor nele) e Estado de pressionamento do botão do mouse (a maneira como o botão é exibido quando os visitantes clicam no botão). Os três menus de estado exibem os nomes das camadas do Photoshop, e as miniaturas de imagens indicam visualmente como cada camada selecionada será exibida.

  3. Neste exemplo, as camadas do Photoshop já foram ordenadas corretamente para exibir os estados dos botões. Não há necessidade de alterar as configurações de menu. Clique em OK para aceitar os estados conforme foram organizados por padrão.

    Use a caixa de diálogo Opções de importação do Photoshop para associar camadas existentes do Photoshop aos estados de botão desejados.
    Use a caixa de diálogo Opções de importação do Photoshop para associar camadas existentes do Photoshop aos estados de botão desejados.

  4. Clique uma vez na área superior direita do cabeçalho da página-mestre A para colocar o arquivo do Photoshop no tamanho original.

  5. Clique no link Visualização para usar o emulador de renderização baseado no WebKit. Revise a exibição da página-mestre A. Como você primeiro visualiza a página, o Estado normal do botão é exibido. Se você passar o cursor do mouse sobre o botão, sua aparência será alterada ligeiramente (tons de marrom ficarão mais claros) e, se você clicar no botão, o texto branco se transformará em marrom claro.

  6. Clique em Design para voltar para a edição da página-mestre A no modo de exibição Design.

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.
  1. 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.
  2. 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.
  3. 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.
  4. 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.
Fixe os objetos na janela do navegador em sites de Adobe Muse
Fixar objetos na janela do navegador

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.

  1. 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.
  2. 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.
Posicione as três imagens de colheres nas três pétalas superiores do design.
Posicione as três imagens de colheres nas três pétalas superiores do design.

  1. 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

  1. 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%
  1. 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).
  2. 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.
Agrupar objetos em Adobe Muse
Reposicione os três endereços para exibição acima das três colheres nas três pétalas superiores do design.

  1. 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

  1. 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.

  1. 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.

  1. 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

  1. Na exibição Plano, clique duas vezes na miniatura do MasterFlash para abri-la para edição no modo de exibição Design. Observe que, como você duplicou anteriormente a página-mestre A, a imagem estática do logotipo ainda está ali. É útil usar a imagem estática para copiar a posição do retângulo de animação, mas não se esqueça de excluir a imagem estática do logotipo inserido depois de incorporar o elemento de mídia avançada.

  2. Escolha Arquivo > Posicionar. Na caixa de diálogo Importar, navegue dentro da pasta Kevins_Koffee_Kart e selecione o arquivo denominado logo.swf.

  3. Coloque o arquivo SWF no canto superior esquerdo, combinando o local do arquivo de imagem de logotipo existente.

  4. Depois de alinhar a nova janela SWF que você acabou de posicionar com o logotipo estático antigo, exclua o logotipo estático, selecionando-o e pressionando a tecla Delete.

  5. Para analisar como todo o site é exibido com as novas alterações na página inicial, escolha Arquivo > Visualizar site no navegador para testar a exibição do logotipo em várias páginas. Sem publicar o site, você pode trabalhar localmente no computador e depois visualizar o site em um navegador para clicar nas páginas na navegação do site. Observe que a animação (arquivo SWF) aparece uma vez e depois para na página inicial. Se você clicar em outras páginas, somente o logotipo estático será exibido.

    Observação:

    Se você escolher Arquivo > Visualizar página no navegador, a nova janela do navegador carregará mais rapidamente para exibir a página inicial, mas só visualizará a página ativa (Inicial). Escolha esta opção se quiser verificar uma página do site, e não o site inteiro.

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.
Abra o painel espaçamento em Adobe Muse
Abra o painel espaçamento em Adobe Muse

  1. Especifique valores para as propriedades esquerda, direita, superior e inferior de preenchimento. Se quiser inserir valores diferentes, desmarque o botão.
Configure as configurações de preenchimento e medianiz do painel espaçamento.
Configure as configurações de preenchimento e medianiz do painel espaçamento.

  1. 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.
Abra o painel transformar em Adobe Muse.
Abra o painel transformar em Adobe Muse.

  1. 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.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online