Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Tutoriais de web design / Workshop de Photoshop
SEÇÕES
Manuais relacionados
+Tutoriais de web design
+Workshop de Photoshop
Categorias
+Design

Índice do Manual Tutoriais de web design
+ Como fazer um gif animado com Photoshop
+ Definições de tela
+ As cores e HTML
+ Formatos gráficos para páginas web
+ Tabela com esquinas arredondadas
+ Tabela com desenho em sua base
+ Tabela com desenho em sua base II
+ Frames sem bordas
+ Barra de navegação HTML simples
+ Barra de navegação HTML
+ Setores de Photoshop
+ Listas HTML feitas com tabelas
+ Tabela melhorada com imagens para barra de navegação
+ Informe sobre o estudo Eyetrack III
+ Montar uma web a partir de uma imagem com Photoshop
+ Como criar um gif com Photoshop II
+ Fluxograma
+ Formatos de Arquivos
+ 30 dicas de Photoshop
+ Criar imagem em miniatura (thumbnail) com Photoshop
+ Efeito de texto com Photoshop
+ Links sem sublinhado
+ Fundo tipo mosaico a partir de uma imagem com Photoshop
+ Efeito de reflexo de texto em Photoshop
+ Fazer um texto que se adapta a um círculo, Photoshop CS2
+ Trabalho com ações de Photoshop. Gravar e executar uma ação
+ Lote com Photoshop para executar uma ação sobre os arquivos de um diretório
+ Mudar o tamanho de todas as imagens de uma pasta com Photoshop
+ O banner perfeito
+ Páginas fluidas

Descrição dos capítulos

Índice do Manual Workshop de Photoshop
+ Como fazer um gif animado com Photoshop
+ Como criar um gif com Photoshop II
+ Setores de Photoshop
+ Montar uma web a partir de uma imagem com Photoshop
+ Criar um fundo com linhas diagonais com Photoshop
+ Fundo tipo mosaico a partir de uma imagem com Photoshop
+ Efeito de reflexo de texto em Photoshop
+ Efeito de texto com Photoshop
+ Criar imagem em miniatura (thumbnail) com Photoshop
+ Fazer um texto que se adapta a um círculo, Photoshop CS2
+ Trabalho com ações de Photoshop. Gravar e executar uma ação
+ Lote com Photoshop para executar uma ação sobre os arquivos de um diretório
+ Mudar o tamanho de todas as imagens de uma pasta com Photoshop
+ Definir um motivo para fazer um fundo com Photoshop
+ Pincéis de Photoshop
+ Instalar pincéis de Photoshop
+ Recortar uma silhueta com Photoshop e seleções poligonais

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net


Como criar um gif com Photoshop II

Vejamos outro exemplo de GIF animado que pode ser criado facilmente com Photoshop e Image Ready.


Vamos ver outro artigo sobre como criar um GIF animado com o programa Photoshop e Image Ready, um software que acompanha Photoshop desde sua versão 5.5. Este artigo debe ser lido como continuação de Criar um GIF animado com Photoshop, que explica passo a passo o processo, incluídas algumas tarefas que não vamos relatar aqui, para não repetir os conceitos.

Vamos realizar um GIF como o que pode ser visto debaixo destas linhas. A mensagem publicitária não importa muito, o que realmente quisemos incluir é a famosa frase "clique aqui", que costuma incrementar o nível de efetividade de um banner em vários pontos. Então, vamos criar uma animação que imita e solicita o clique do mouse em cima do banner.


Criar um arquivo .psd com os distintos fotogramas

Como já foi explicado no artigo sobre criar um GIF animado em Photoshop, o primeiro passo consiste em criar um arquivo de Photoshop (dos que têm extensão .psd) com as distintas camadas que contém os diversos fotogramas da animação. Na imagem pode-se ver esse arquivo que contem a camada do punhal, e a dos distintos textos e ponteiros do mouse que, ao estar colocados cada um em uma posição distinta e ao ver um atrás do outro, darão a sensação de movimento.


Para conseguir as imagens dos ponteiros do mouse que serão utilizados na animação acessamos a janela de configuração do mouse do painel de controle do Windows. Pode-se ver na seguinte imagem a janela a qual nos referimos.


Trabalho com Image Ready

Uma vez tendo a imagem realizada, a passamos a Image Ready clicando o botão de mais embaixo da barra de ferramentas. Em Image Ready definiremos a animação à base de indicar quais camadas estarão visíveis em cada fotograma. Para isso criaremos fotogramas na janela de animação e, em cada fotograma, selecionaremos as camadas que desejamos que se vejam na janela de camadas.


Posteriormente, haverá que atribuir um tempo adequado a cada fotograma. Não é recomendável fazer uma animação muito lenta que deixe o possível leitor entediado, e nem muito rápida, que poderia tornar a leitura mais difícil. O tempo se atribui na janela de animação clicando debaixo da miniatura de cada fotograma. Podemos selecionar vários fotogramas e dar um mesmo tempo a todos ou então, selecionar fotograma por fotograma e atribuir diferentes tempos.

Para salvar a animação em um arquivo GIF, selecionamos a opção "salvar otimizada como" do menu arquivo. Há que observar neste ponto na janela de otimizar, que aparece com a opção Janela > Mostrar otimizar, onde podemos selecionar o formato no qual desejamos salvar a imagem (neste caso GIF) e as características do arquiivo, como podem ser número de cores, tramado, paleta, etc.


Resultado obtido

Mostramos a seguir mais uma vez o resultado obtido neste exercício, que esperamos ter sido interessante.

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Tutoriais de web design
Seguinte: Fluxograma

Dentro de Workshop de Photoshop

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Design


Comentário sem rever
Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.
 Foram econtrados 3 comentários sem rever

VerVer os comentários não revistos



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites