Editando o banner (corte e imagem)

Acesse o novo curso e veja a ferramenta SitePX atualizada.

Nesta aula vamos ensinar a fazer um corte especial na nossa foto dentro do banner. Lembre-se que continuamos na área de Design do site.

O banner é a área intermediária do nosso site-exemplo - Kate Acessórios -  que até agora continha logo, subtítulo e uma foto inserida no banner. Quando a foto (mulher com colar) foi inserida, o sistema do SitePX fez um corte aleatório na imagem, para que ela coubesse no formato do banner, mas você pode mexer neste corte.

Passando o mouse levemente sobre o banner, surgirão dois comandos de design: “Editar Design” e “Editar Imagens”. 


Clique em “Editar Imagens” para poder acertar o corte. Surgirá imediatamente em sua tela a sua Biblioteca de imagens, onde estão as suas imagens, inclusive as do seu banner.

Você verificará na que na barra à direita está a imagem do seu banner. Vamos mexer no corte desta imagem.
Coloque o cursor em cima da imagem e surgirá a palavra “configurar” – clique nela, e estará dentro do Destaque Banner – Configurações.

Vamos clicar em Fazer corte personalizado”. Veja que a imagem está enorme e precisa entrar no formato com o corte que você escolher.

Mexa no botão “tamanho da imagem” movendo o controle com o mouse para a esquerda ou para a direita para deixá-la no tamanho que você deseja. Posicionando o mouse sobre a imagem, surgirá um controle de movimento que lhe permitirá levar a imagem mais para cima ou mais para baixo, em função da área que você deseja deixar mais em destaque.
Coloque a imagem no tamanho que você quiser e clique em “aplicar corte”. Voltará o campo Destaque Banner – Configurações, onde você observará que pode colocar uma legenda em seu banner referente à foto que aparece. Sempre se lembre de “Salvar”, concluindo o processo com “Ok” e, depois, “Concluir”.

Vamos  escrever uma legenda. Visualize a foto do banner com novo corte e legenda. Insira no campo de Destaque Banner, na área de Legenda, o texto que desejar.  Neste modelo com que trabalhamos na vídeo-aula, a legenda já vem dentro de uma faixa branca para dar melhor leitura. Se quiser pode tirar a faixa ou mudar a cor conforme o tom de sua foto. No nosso exemplo, vamos tirar esta faixa.

Para tirar a faixa, clique em “Editar design” para retomar à área de “Controles Banner”, que entrará automaticamente.

 

Nesta área há opções de trocar a fonte da legenda (que podem ser selecionadas onde já está a fonte Arvo), o tamanho e, no ícone Y, temos as “Configurações avançadas de área”. Veja que neste campo há dois símbolos iguais a este. Selecione aquele que está ao lado da palavra “Área”. Vamos trabalhar clicando neste ícone Y, para as opções avançadas. Surgirá um campo "Área".

Clique em “fundo faixa” e abrirá um campo onde você selecionará "Sem cor". Clique em “salvar.” E agora clique em "Visualizar" para ver como está ficando. A foto do banner já estará com a nova legenda e sem a faixa branca que a envolvia.

Na próxima aula, vamos aprender a colocar mais de uma imagem dentro do mesmo banner e fazer com que elas
apareçam por fusão, uma a uma, criando um movimento muito agradável na área do banner.

 

Veja esse vídeo no You Tube: https://www.youtube.com/watch?v=G7v5MD9sA6U 

 

Categoria: áreas de design, banner, design, edição de imagens, inserção de imagens
Aula: 9 

voltar para Como criar um site

left show tsN fwR fsN|left tsN b01e fwR bsd show|left fwR tsN show|bnull||image-wrap|news login c05|fsN fwR normalcase tsN|c05|login news fwR normalcase|tsN fwR normalcase|normalcase fwR c05|content-inner||