Uma das técnicas mais populares da web hoje é a rolagem paralaxe. Todos nós já visitamos os sites em que você gira a roda de rolagem do mouse e o conteúdo da página se move para cima e para baixo ou pela página à medida que você gira a roda do mouse.
Para quem é novato em web design e design gráfico, essa técnica pode ser extremamente difícil de alcançar devido à quantidade de CSS necessária.
Se isso descreve você, há vários aplicativos que podem atrair apenas artistas gráficos. Eles basicamente usam uma abordagem de layout de página familiar para páginas da web, o que significa que não há muito, se houver algum, codificação está envolvida. Um aplicativo que realmente se destacou é o Adobe Muse.
O trabalho que está sendo feito por profissionais gráficos usando o Muse é incrível e você pode ver uma amostra do que você pode fazer visitando o Muse Site do dia . Embora os profissionais da Web tendam a considerar o Muse como uma espécie de “brinquedo de corda”, ele também está sendo usado por designers para criar protótipos móveis e da web que serão eventualmente entregues aos desenvolvedores de sua equipe.
Uma técnica incrivelmente fácil de realizar com o Muse é a rolagem parallax e, se você quiser ver a versão completa do exercício. Quando você gira a roda de rolagem do mouse, o texto parece se mover para cima ou para baixo na página e as imagens mudam.
Vamos começar.
01 de 07Crie uma página da Web
Quando você iniciar o Muse, clique no Novo site ligação. Isso abrirá o Novas propriedades do site. Este projeto será projetado para um aplicativo de desktop e você pode selecioná-lo no Layout Inicial menu pop-down. Você também pode definir os valores para o número de Colunas, Largura da Medianiz, Margens e Preenchimento. Nesse caso, não estávamos muito preocupados com isso e simplesmente clicamos Está bem.
Formatar a página
Quando você define as propriedades do site e clica Está bem você foi levado para o que é chamado Plano Visão. Existe um Casa página no topo e um Pagina principal na parte inferior da janela. Nós só precisávamos de uma página. Para chegar ao Design View, clicamos duas vezes na página inicial que abriu a interface.
À esquerda estão algumas ferramentas básicas e, à direita, uma variedade de painéis usados para manipular o conteúdo da página. Na parte superior, estão as propriedades, que podem ser aplicadas à página ou qualquer item selecionado na página. Nesse caso, queríamos ter um fundo preto. Para conseguir isso, clicamos no Preenchimento do navegador chip de cores e escolheu preto do Color Picker.
03 de 07Adicionar texto à página
O próximo passo é adicionar algum texto à página. Nós selecionamos o Ferramenta de texto e tirou uma caixa de texto. Nós inserimos a palavra “Bem-vindo” e, nas Propriedades, definimos o texto para Arial, 120 pixels em branco. Alinhado ao centro.
Em seguida, mudamos para a ferramenta Selection, clicamos na caixa de texto e definimos Posição Y para 168 pixels a partir do topo. Com a caixa de texto ainda selecionada, abrimos o Alinhar painel e alinhou a caixa de texto ao centro.
Finalmente, com a caixa de texto selecionada, nós seguramos o Opção / Alt e Mudança chaves e fez quatro cópias da caixa de texto. Alteramos o texto e a posição Y de cada cópia para:
- Para, 871
- Gráficos, 1621
- Software, 2371
Você notará que, ao definir a localização de cada caixa de texto, a página será redimensionada para acomodar a localização do texto.
04 de 07Adicionar espaços reservados para imagens
O próximo passo é colocar imagens entre os blocos de texto.
O primeiro passo é selecionar o Ferramenta Retângulo e desenhe uma caixa que se estende de um lado da página para o outro. Com o retângulo selecionado, definimos sua altura para 250 pixels e os seus Posição Y para 425 pixels. O plano é que eles sempre estiquem ou contraiam na largura da página para acomodar a porta de visualização do navegador do usuário. Para conseguir isso, clicamos no Largura de 100% botão nas Propriedades. O que isso faz é esmaecer o valor X e garantir que a imagem seja sempre 100% da largura da viewport em um navegador.
05 de 07Adicionar imagens aos espaços reservados para imagens
Com o retângulo selecionado, clicamos no Preencher link - não o chip de cor - e clicou no eutinta de mago para adicionar uma imagem ao retângulo. No Apropriado área, nós selecionamos Escala para caber e clicou no alça central no Posição área para garantir que a imagem seja dimensionada a partir do centro da imagem.
Em seguida, usamos o Option / Alt-Shift-drag técnica para criar uma cópia da imagem entre os dois primeiros blocos de texto, abriu o painel Preenchimento e trocou a imagem por outra. Fizemos isso também para as duas imagens restantes.
Com imagens no lugar, é hora de adicionar o movimento.
06 de 07Adicionar rolagem de paralaxe
Existem várias maneiras de adicionar rolagem paralaxe no Adobe Muse. Vamos mostrar uma maneira simples de fazer isso.
Com o painel Preencher aberto, clique no Rolagem e, quando abrir, clique no Caixa de seleção de movimento.
Você verá valores para Inicial e Movimento final. Eles determinam a rapidez com que a imagem se move em relação à roda de rolagem. Por exemplo, um valor de 1,5 moverá a imagem 1,5 vezes mais rápido que a roda. Usamos um valor de 0 para bloquear as imagens no lugar.
o Setas horizontais e verticais determinar a direção do movimento.Se os valores forem 0, as imagens não serão alteradas, independentemente da seta em que você clicar.
O valor médio – Posição chave - mostra o ponto em que as imagens começam a se mover. A linha acima da imagem começa, para esta imagem, a 325 pixels da parte superior da página. Quando o pergaminho atinge esse valor, a imagem começa a se mover. Você pode alterar esse valor alterando-o na caixa de diálogo ou clicando e arrastando o ponto no topo da linha para cima ou para baixo.
Repita isso para as outras imagens na página.
07 de 07Teste de Navegador
Neste ponto, nós terminamos. A primeira coisa que fizemos, por razões óbvias, foi selecionar Arquivo> Salvar site. Para o teste do navegador, nós simplesmente selecionamos Arquivo> Visualizar página no navegador. Isso abriu o navegador padrão do computador e, quando a página foi aberta, começamos a rolar.
