Olá turma do bem!
Muitas vezes necessitamos de inserir uma imagem em nosso projeto WebAcappella. Como disse em uma postagem um dos critérios do Google para rankeamento é o site estar bem otimizado. Inclusive em imagens. Portando não aconselho redimensionar as imagens pelo WebAcappella, e sim adicionar a imagem no projeto exatamente no tamanho que ela é.
Porém algumas imagens ficam grandes e pesam o carregamento do site, o que não é ideal. Por esse motivo em certas situações faz-se necessário repartir a imagem em várias partes.
O Adobe Photoshop possui este recurso mais nem todo mundo sabe utilizar. Para contornar esta situação eu sugiro um programinha que se encontra gratuito na net para download: O TileMage Image Splitter.
Muito simples de se utilizar e quebra um galhão.
Então vou mostrar a utilização deste programinha de forma bem básica para repartirmos nossa imagem e inserir no WebAcappella.
Aaaaaa... vocês perceberão que nosso blog agora tem uma logo? Pois é , tamo ficando xikes.!!! rs.
Vou utilizar então a imagem da logo como exemplo.
"Óia" a logo aí: (mineiro é foda..rsrsrsrs)
Então mãos a obra no que interessa:
com o programa aberto, na aba Source Image clique em "Browse" e localize a imagem a ser repartida.
Agora na área de "Parameters" você define em quantas linhas e colunas você quer repartir. Para facilitar no WebAcappella eu sugiro sempre manter a linha em 1, e alterar somente a quantidade de colunas.
No exemplo vou definir somente 5 colunas:
Beleza, nosso próximo passo é clicar em "Split"
Observe que na janela que abre, você pode definir parâmetros para o nome e tipo de arquivo para imagens repartidas criadas.
No padrão ele define como Nome+posição da coluna + posição da linha
Em "Destination Path" você informa o local que deseja onde será armazenado as imagens repartidas criada pelo programa.
Agora clique em "Split" e as imagens serão criadas na pasta definida no local determinado em "Destination Path".
Repare que ele informou o nome, coluna e linha. Como defini 1 linha só todos recebem R1 , que seria linha 1.
Vamos agora usar no WebAcappella.
Com a opção INSERIR>>IMAGEM, nas ferramentas clique em NORMAL para adicionar a primeira imagem.
Na tela que abrirá "Biblioteca de imagens / arquivos", você aproveita e já insere todos os pedaços da imagem. Isto para agilizar o processo e ganhar tempo.. heheh..tempo é dinheiro lembra..rs
Reparem que marquei todas as imagens para serem adicionadas.
Assim já tenho todas as imagens adicionadas na minha Biblioteca de imagens do WebAcappella
Clico na 1ª e adiciono na página do projeto.
Agora em vez deu repetir o processo para todas as imagens. Eu copio a 1ª imagem e colo ela 4 vezes. Já que reparti a imagem original em 5 partes. Então seria, esta primeira que adicionei + 4 dela = 5 imagens.
Agora vou da segunda em diante e informo a imagem correta:
Este é apenas uma forma de ganhar tempo. Repare que fica muito mais rápido. Na imagem acima eu tentei demonstrar que para a imagem da esquerda com a seta receberá a imagem da direita com a seta.
Repita o processo para todas imagens até ter cada parte da imagem na página:
Agora com auxílio das guias de régua alinhe as imagens somente na vertical.Não preocupe com a horizontal.
Agora vem o motivo pelo fato de ter repartido a imagem mantendo apenas 1 linha:
Marque todas as imagens :
Reparem que todas elas estão assinaladas (repare pela linha laranja em cada uma).
Agora com a opção do WebAcappella DISPOSIÇÃO>> ALINHAMENTO DOS OBJETOS >> ALINHAR ABAIXO (OU ACIMA), você terminou de ajustar todas as imagens de forma ser uma só.
Para completar e ajudar a você trabalhar com a imagem inteira daqui em diante, vamos marcar novamente todas as partes:
Se sua barra de Camadas não estiver visível no WebAcappella , ative com a opção VER >> MOSTRAR BARRA DE CAMADAS.
Agora adicione uma nova camada clicando no ícone circulado de vermelho na imagem abaixo:
E com todas partes das imagens selecionadas adicione as mesmas na camada criada clicando no ícone circulado de vermelho conforme a imagem abaixo:
Reparem agora que você pode posicionar a imagem onde quiser na página que todas as partes se moverão juntamente. Assim você trabalha como se fosse uma imagem só.
Por hoje é só galera..
Abraços a todos e aproveitando a deixa, tento explicar da maneira que qualquer leitor independente do nível de conhecimento consiga fazer. Quero deixar claro aos mais conhecedores que não estou considerando vocês leigos na ferramenta.
Boa quinta pra todos.
