17 Dezembro 2017 Dom

2 visitantes e 0 Usuários online

  Indique Download Forums Links Polita de Privacidade
PC-SOS :: Photoshop :: Dividir imagens para web
PC-SOS
Notícias
Anúncios
Estatística
FAQ
Usuários
Usuários Online
Conteúdo
1-Política de Privacidade
Artigos
Celular
Flash
Linux
Discos Rígidos
Hardware
Internet
Modem
MSOffice
MSOffice - Excel
Multimedia
Photoshop
Programação
Rede
Segurança
Sistema Operacional
Software
Software p/ PenDrive
Termos & Siglas
WEB
Windows
Xoops
Área de Usuário

Usuário:
Senha:
Lembrar!
Esqueci minha senha
Registrar

Pesquisa Avançada

Patrocinadores

 


Teste de Velocidade

Desenvolvido por

 

 

 

2.01.2009
Como configurar o Windows para aceitar 8GB de RAM
3.12.2008
Quando Pen Drive USB Não Aparece No Windows
15.02.2008
BBS, sistema que foi o antecessor da internet
26.11.2007
Firefox 3.0
5.10.2007
Hitachi trabalha em Blu-Ray de 100GB e 200GB
24.09.2007
Novo supercomputador entra em operação no Brasil
24.09.2007
IBM oferece software gratuito de edição de texto
19.09.2007
Processador com 80 NÚCLEOS
19.09.2007
IBM terá suíte de escritório gratuita
17.09.2007
Clone do Office online, e grátis

Dividir imagens para web
2.04.2005

Algumas vezes, convém dividir uma imagem que será mostrada em uma página web em vários pedaços. Este procedimento, acelera o início do carregamento da página, uma vez que, por exemplo, o browser não precisa carregar uma imagem de 40kb para só então mostrar a página e sim, carrega 4 pedaços de 10kb cada ou quantos pedaços você desejar dividir suas imagnes. Neste tutorial vamos aprender a dividir uma imagem em várias partes.

01. Ativando rulers. 

Para nos auxiliar a dividir uma imagem, devemos, primeiramente ativar a régua (Rulers). Para isto pressione Control+R ou menu view/Show Rulers.

02. criando as grids (linhas)

Com a régua ativada, clique na régua superior e, pressionando shift, arraste uma linha (grid) até o ponto desejado horizontal que você deseja dividir a imagem. Ao soltar o mouse, é criada a primeira grid. Faça este mesmo passo com a régua vertical e crie uma grid vertical. Na figura ao lado é mostrado, com uma linha vermelha, a posição inicial e final do arraste do ponteiro do mouse para criação de cada linha (grid). Repita estes passos até criar 3 grids horizontais e verticais (figura acima).


03. Selecionando cada parte

Uma vez criada as grids, estas serviram para nos auxiliar a selecionar cada parte a ser dividida da imagem. Utilize a ferramenta (Retangular Marquee) ou pressione "M" para selecioná-la. Agora você deve fazer a seleção do primeiro retângulo superior a esquerda conforme mostra na imagem ao lado. Você notará que as grids atraem o cursor do mouse. Este é o propósito de criarmos as grids. Se não fosse assim, seria muito difícil para sabermos onde iniciar e terminar cada seleção.

04. Criando novas imagens a partir das seleções.

Para criarmos estas novas imagens, após selecionar cada parte, pressione Control+C para copiar para memória e Control+N para criar uma nova imagem.

Nosso objetivo é criar várias imagens (pedaços do original) e salvar cada uma em separado com um nome diferente. Cada pedaço terá um tamanho muito inferior a imagem original.

Após criar uma nova imagem, pressione Control+V para colar a parte selecionada na imagem original para esta nova imagem de tamanho reduzido.
Repita esta operação com todas as partes da imagem e salve cada parte com um nome diferente tipo 01.jpg, 02.jpg, etc.

Ao final, você deverá ter 9 novas imagens salvas em uma pasta.


05. Inserindo as imagens em sua página web.

Ok... Agora, em sua pagina web, crie uma tabela com 3 linhas e 3 colunas e insira um link de cada figura em cada retângulo da tabela. Não esqueça de deixar Cellspace em 0 (zero) para que não apareça a emenda da imagem (figura ao lado) quando a página estiver carregada no browser por completo.

Bons recortes!!!



PC-SOS
Hits: 1793
Photoshop >>
 Ruim  Bom 
Comentário de Usuário: Nosso usuário podem revisar conteúdos

 

 

 

     

Número de visitas deste fev/2005 - Número de consultas ao site:

  © Copyright 2005 PC SOS. All Rights Reserved. contato@robweb.com.br