Workshop de Photoshop

[helldanger1]

Uma série de artigos práticos sobre web design com Photoshop. Workshop de Photoshop orientado para web designers.



Capítulos do manual


1.- Como fazer um gif animado com Photoshop
Descrição passo a passo de como fazer um gif animado com Photoshop e Image Ready.

2.- Como criar um gif com Photoshop II
Vejamos outro exemplo de GIF animado que pode ser criado facilmente com Photoshop e Image Ready.

3.- Montar uma web a partir de uma imagem com Photoshop
Vemos como utilizar os setores de Photoshop para montar de uma maneira simples o desenho de uma página web que tínhamos em uma imagem.

4.- Criar um fundo com linhas diagonais com Photoshop
Workshop prático de uso de Photoshop para criar um fundo para uma página web composto por linhas diagonais.

5.- Fundo tipo mosaico a partir de uma imagem com Photoshop
Partindo de uma imagem e utilizando Photoshop faremos um fundo para página web, que se veja bem tramado ao fazer o mosaico.

6.- Efeito de reflexo de texto em Photoshop
Criar um reflexo de um texto que está refletido na parte de baixo, utilizando Photoshop.

7.- Efeito de texto com Photoshop
Pequeno tutorial para fazer um efeito de texto com resplendor exterior e bisel – relevo

8.- Criar imagem em miniatura (thumbnail) com Photoshop
Dois mecanismos para criar imagens em miniatura ou thumbnails, utilizando o programa Photoshop.

9.- Fazer um texto que se adapta a um círculo, Photoshop CS2
Tutorial para realizar com Photoshop CS2 um texto que se escreve ao redor de una circunferência. O texto se adapta à forma do círculo.

10.- Mudar o tamanho de todas as imagens de uma pasta com Photoshop
Vamos realizar um processamento automático de todos os arquivos de imagem que há em um diretório de nosso computador para mudar suas dimensões.

11.- Definir um motivo para fazer um fundo com Photoshop
Com Photoshop podemos selecionar parte de uma imagem para definir um motivo que podemos utilizar para pintar um fundo de uma imagem.

12.- Ressaltar as cores de uma foto com Photoshop
Um simples tutorial para ressaltar a cor de uma fotografia com Photoshop e conseguir cores mais intensas.

 

[helldanger1]

Como fazer um gif animado com Photoshop
Descrição passo a passo de como fazer um gif animado com Photoshop e Image Ready.




Por Juliana Monteiro Lázaro


A partir da versão 5.5 de Photoshop temos a nossa disposição um programa muito interessante para realizar, entre outras coisas, trabalhos específicos para o web, como podem ser a criação de GIFs animados ou imagens que mudem ao passar o mouse por cima (Rollover). O produto em concreto é Image Ready e vamos estudar a maneira de trabalhar com ele para realizar um GIF animado.

Criar um arquivo .psd com os diferentes fotogramas

A primeira tarefa para realizar um GIF animado com Photoshop eé criar um arquivo .psd, que é o formato próprio de Photoshop onde podemos manter as "layers", ou seja, as camadas que serão necessárias para realizar o GIF animado.
Nota: As camadas são próprias de Photoshop e de outros programas de desenho gráfico e permitem editar partes do gráfico de maneira independente. Quem quiser dominar Photoshop e similares deverá familiarizar-se com o trabalho com camadas.

 

[helldanger1]

Cada camada criada com Photoshop pode ser um fotograma do GIF animado, por isso podemos criar tantas camadas de acordo com quantas imagens quisermos que tenha na animação. Logo com Image Ready poderemos intercalar essas camadas na ordem que quisermos e atribuir-lhes um tempo de visualização a cada uma.

Uma vez criada a imagem com as diferentes camadas com Photoshop, podemos salvá-la com extensão .psd, para que salve toda a informação das camadas. Uma vez salvas podemos passar o arquivo a Image Ready, que é o programa que utilizaremos para animar as camadas em um GIF animado.

Para passar o arquivo do Photoshop a Image Ready comodamente, podemos utilizar um botão que existe na parte debaixo da barra de ferramentas. O botÃO se encontra nos dois programas e podemos vê-lo remarcado na imagem à direita.



Nota: A ação de passar de um programa a outro será muito repetida durante o trabalho com Photoshop e Image Ready, visto que cada programa tem capacidades distintas e as ações que se fazem com um programa não costumam estar disponíveis no outro. Por exemplo, se quisermos editar uma camada, temos que fazer a partir do Photoshop e se quisermos criar fotogramas e selecionar as camadas que devem ser visualizadas em cada um, teremos que fazer com Image Ready. É aconselhável salvar o arquivo .psd antes de passar de uma aplicação a outra.

 

[helldanger1]

Trabalho com Image Ready




Para definir cada um dos fotogramas da animação e suas propriedades temos uma janela chamada Animação. Se não a vemos ao abrir Image Ready podemos mostrá-la no menu da janela > Mostrar animação.

A janela de animação contem um botão para adicionar fotogramas que tem forma de documento novo. Em cada fotograma podemos selecionar de maneira independente as camadas que se desejam visualizar, de modo que devemos criar os distintos fotogramas da nossa animação e indicar que camadas devem ser visualizadas em cada um deles. Aliás, as camadas se podem fazer visíveis ou invisíveis pela janela de camadas com o olho que aparece do lado de cada uma das camadas. Quando se pode ver o olho, a camada está visível e quando não aparece o olho é porque está invisível.

Para atribuir o tempo de visualização de cada um dos fotogramas temos um registro dos segundos de visualização exatamente embaixo da miniatura do fotograma. Ao clicar sobre esse registro de segundos, aparecerá uma janela para selecionar qualquer duração, em segundos.

Quando tivermos a animação tal como desejarmos que apareça em nossa página web selecionamos no menu Arquivo, a opção "Salvar otimizada como..." e aparecerá a janela típica para selecionar o diretório e o nome de arquivo que queremos atribuir-lhe.

 

[helldanger1]

Otimizar a imagem com Image Ready

Podemos modificar as propiedades da imagem GIF, como número de cores ou o tipo de paleta para otimizar a imagem, com o objeto que ocupe o menor espaço possível em bytes e que seja rápida para baixar. A otimização se deve realizar respeitando a qualidade da imagem tanto como sejamos capazes. Para realizar estas ações Image Ready dispõe de uma janela chamada Otimizar, que se não aparece poderemos mostrá-la pelo menu Janela > Mostrar otimizar.

A característica mais interessante para otimizar em um arquivo GIF é o número de cores. Em geral, ao menor número de cores, menor o tamanho do arquivo. Na janela do documento podemos encontrar opções que nos permitenm selecionar a versão da imagem que queremos visualizar: a versão Original ou a Otimizada. As opções 2 cópias ou 4 coópias permitem comparar entre a versão original e algum tipo de otimização.

 

[helldanger1]

Como criar um gif com Photoshop II



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

Por Juliana Monteiro Lázaro


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.

 

[helldanger1]

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.

 

[helldanger1]

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.

 

[helldanger1]

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.

 

[helldanger1]

Montar uma web a partir de uma imagem com Photoshop




Vemos como utilizar os setores de Photoshop para montar de uma maneira simples o desenho de uma página web que tínhamos em uma imagem.

Por Miguel Angel Alvarez - Tradução de JML





Na hora de desenhar uma página web, é muito cômodo fazer as provas de criatividade utilizando um programa de desenho gráfico, no lugar de realizar a montagem diretamente em HTML.

Um dos programas mais úteis para realizar o desenho da página é Adobe Photoshop, que oferece muitas utilidades para o retoque fotográfico, mas também para o desenho gráfico em geral. As últimas versões do programa ademais dispõem de ajudas muito interessantes para desenhar as páginas web, como os setores ou a opção Salvar para web.



Nota: Já explicamos algumas coisas das quais vamos utilizar neste exercício em um artigo anterior: Setores de Photoshop

 

[helldanger1]

Vamos ver neste artigo uma amostra sobre como podem ser utilizados os setores para montar uma página web em HTML.



Por exemplo, em Photoshop poderíamos ter desenhado a seguinte imagem que vamos utilizar para o cabeçalho da página:

Podemos partir esta imagem em setores. Os setores são áreas da imagem que logo vamos salvar em arquivo independente, otimizado para se visualizar na Internet. Realizamos os setores ao nosso gosto. Possivelmente nos interesse que o logotipo ou o banner principal se encontrem em uma imagem separada, ou possivelmente temos pensado colocar uma barra de navegação que desejamos que esteja em um mesmo setor, que logo vamos encher com o texto da barra.

Os setores podem ter ficado de forma similar a como aparece nesta imagem:

Uma vez realizados os setores, selecionamos a opção "Salvar para web" do menu de arquivo. Isto nos permite acessar uma janela onde se podem escolher as opções de otimização das imagens, selecionando as características de todos os setores ou então definindo umas propriedades específicas para cada setor.

 

[helldanger1]

Uma vez selecionadas todas as opções necessárias, salvamos o trabalho, com o que obteremos um arquivo HTML com uma tabela, que contem por sua vez as distintas imagens geradas a partir de cada setor e salvas com as opções de otimização selecionadas previamente.

liminar uma imagem de um setor e substituí-la por um texto

Possivelmente alguma das partes ou setores gerados, onde temos uma imagem, queremos que disponha um texto, para poder escrever o que se deseja, ao invés de visualizar uma imagem, que sempre é muito mais estática.

Por exemplo, pode haver um espaço para o título da página e, já que o título pode mudar em cada página do web, pode ser que seja interessante que esse título seja um texto, que possa ser editado, ao invés de uma imagem. Ou também, pode ser que tenhamos um espaço para situar o endereço da empresa dona do site web, tal como fizemos no desenho que estamos trabalhando, e desejamos que o endereço apareça como um texto no lugar de uma imagem, já que os textos são indexados pelos buscadores e queremos que possam se indexar as palavras do endereço da empresa como palavras-chave da página.

Então, necessitamos substituir a etiqueta da imagem por um texto. Para isso, simplesmente há que localizar a etiqueta que corresponde à imagem que desejamos substituir e apaga-la, mudando-a pelo texto que tem que ir, no lugar da imagem. Porém atenção, porque isto pode mudar o desenho da tabela e deslocar as imagens que vão dentro. Para evitar isso, simplesmente ajustamos os valores width e height da célula onde estava a imagem, aos que tinha a própria imagem que desejamos substituir.

 

[helldanger1]

Por ejxmplo, este é o código HTML gerado por Photoshop para a composição anterior. Cada setor está em uma imagem independente.

<TABLE WIDTH=697 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=214 HEIGHT=1></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=233 HEIGHT=1></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=34 HEIGHT=1></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=1></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=215 HEIGHT=1></TD>
<TD></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="imagens/cabeçalho-original_01.gif" WIDTH=214 HEIGHT=85></TD>
<TD ROWSPAN=2>
<IMG SRC="imagens/cabeçalho-original_02.gif" WIDTH=233 HEIGHT=25></TD>
<TD COLSPAN=2>
<IMG SRC="imagens/cabeçalho-original_03.gif" WIDTH=35 HEIGHT=16></TD>
<TD>
<IMG SRC="imagens/cabeçalho-original_04.gif" WIDTH=215 HEIGHT=16></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=16></TD>
</TR>
<TR>
<TD>
<IMG SRC="imagens/cabeçalho-original_05.gif" WIDTH=34 HEIGHT=9></TD>
<TD COLSPAN=2>
<IMG SRC="imagens/cabeçalho-original_06.gif" WIDTH=216 HEIGHT=9></TD> <TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=9></TD>
</TR>
<TR>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC="imagens/cabeçalho-original_07.gif" WIDTH=483 HEIGHT=87></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=60></TD>
</TR>
<TR>
<TD>
<IMG SRC="imagens/cabeçalho-original_08.gif" WIDTH=214 HEIGHT=27></TD> <TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=27></TD>
</TR>
</TABLE>

Observamos que está em negrito a célula e a imagem onde aparece o endereço da suposta empresa que encarregou o projeto. Esta imagem é a que vamos substituir pelo texto do endereço:

<TD width=215 height=16>
<font size=1 face=verdana>C/ Mayor nº 23, 3B - 28230 Madrid</font></TD>
<TD>

Cabe remarcar que aplicamos à célula a mesma largura e altura da imagem que ia dentro. Ademais, colocamos o texto em uma fonte de tamanho pequeno porque se o texto superasse o espaço reservado para a tabela se desenquadraria o desenho.

 

[helldanger1]

Criar um fundo com linhas diagonais com Photoshop



Workshop prático de uso de Photoshop para criar um fundo para uma página web composto por linhas diagonais.

Por Juliana Monteiro Lázaro






Vamos ver como construir um tipo de fundo bastante utilizado recentemente em páginas web que é muito simples de fazer e que tem certo gosto. Trata-se de um fundo realizado com linhas diagonais que ocupam toda a tela. Não obstante, nós criaremos uma imagem muito pequena, que não ocupa quase espaço em Kb. Ao incluí-la como fundo em uma web se gerará um mosaico e se poderão apreciar as linhas diagonais.

O processo não tem nenhuma dificuldade. Começamos criando um novo documento em branco. Não tem que ser muito grande, talvez 150x150 pixels, o suficiente para não estarmos com o espaço curto.

 

[helldanger1]

Selecionaremos a ferramenta de linha, que está agrupada junto às ferramentas de formas, quadrados, retângulos, etc

Logo, faremos uma linha no documento que havíamos criado. Com isso se criará automaticamente uma camada com forma de linha. Podemos fazer a linha da cor que se deseje, dependendo de nossas necessidades. Também poderemos fazê-la com distintas larguras. Dependendo da largura o efeito conseguido variará um pouco.

Para nosso exemplo queremos que a linha tenha uma inclinação de 45 graus. Para isso, na hora de pintar a linha em diagonal, clicamos a tecla maiúscula. Veremos como Photoshop nos ajuda a que a linha fique com o ângulo desejado, pois sempre que se mantém clicada esta tecla, os ângulos que permite fazer são de 0 grau, 45 ou 90 e seus complementares.

 

[helldanger1]

Agora temos que duplicar a camada da linha, para obter várias linhas. Faremos através da janela de camadas, clicando com o botão direito do mouse na camada a duplicar e selecionando "Duplicar camada...".

Logo, transferiremos um pouco a posição da camada duplicada por somente uns píxels, porém os suficientes para que fique um espaço em branco entre as linhas. Para mover uma camada a uns píxels será útil usar o cursor do teclado, com a ferramenta de mover selecionada. Repetiremos este processo várias vezes, de modo que fiquem uma série de linhas separadas à mesma distância.

Uma vez criada a imagem com as distintas linhas, vamos acoplar suas camadas, com o menu "Camada - Acoplar imagem". Com isto conseguimos que haja uma só camada em toda a imagem.

Agora vem o momento mais delicado, que é obter a partir desta imagem uma porção que permita fazer um mosaico perfeito para que no fundo da página tenhamos linhas em diagonal por todas partes.

 

[helldanger1]

Para isso, temos que fazer uma seleção quadrada (com todos os lados do mesmo tamanho) e observarmos em um detalhe. Temos que fazer a seleção de maneira que o píxel que há na esquina superior esquerda corresponda com o píxel que teria na continuação da esquina inferior direita. Para termos uma idéia exata, seria bom ver a seguinte imagem.

Poderíamos ter feito a seleção maior, porém sempre tendo em conta que seja quadrada e que haja uma correspondência entre o píxel da esquina superior direita da seleção e o que está na esquina contrária, embora pela parte de fora da seleção.

Copiamos então a seleção e a colamos em outro documento, que salvamos com a extensão .gif, que seria a mais adequada para este tipo de imagem. Este arquivo é o que utilizaremos como fundo da página.

Agora mostramos a imagem obtida com este processo. Como é muito pequena, para que se possa apreciar, a ampliamos artificialmente, mudando no código HML os atributos width e height da etiqueta IMG.

 

[helldanger1]

Fundo tipo mosaico a partir de uma imagem com Photoshop



Partindo de uma imagem e utilizando Photoshop faremos um fundo para página web, que se veja bem tramado ao fazer o mosaico.



Por Miguel Angel Alvarez - Tradução de JML




Vamos criar um fundo com Photoshop a partir de uma imagem. Utilizaremos o fundo em uma página web e se mostrará criando um mosaico. O objetivo deste artigo é explicar como se devem fazer os retoques na imagem, de forma que o mosaico criado se veja corretamente tramado.

Esta técnica se pode fazer com diferentes tipos de imagens, por exemplo, com umas nuvens ou uma parede de tijolos. Ao fazer o mosaico, a página se mostrará com todo o fundo cheio de nuvens ou tijolos. Em nosso exemplo partimos de uma imagem com umas raízes. O resultado final será um fundo de uma página toda cheia de raízes.

 

[helldanger1]

Primeiro, criamos uma seleção de um pedaço da imagem inicial. Faremos a seleção da área que mais gostamos. O tamanho escolhido pode variar, mas observaremos que tanto a altura como a largura seja divisível por dois, para facilitar o seguinte passo.

Copiaremos a seleção e colaremos em um documento novo. Logo, sobre este novo documento, faremos um filtro de deslocamento. Isto se faz desde o menu Filtro - Outros - Deslocamento... Na janela de propriedades do filtro nos solicitam os pixels que se deseja deslocar horizontal e verticalmente. Nestes campos colocaremos a metade do tamanho horizontal e vertical da imagem. Por exemplo, se a imagem tinha tamanho 176x148, o deslocamento horizontal seria de 88 e o vertical de 74.

O resultado obtido depois de fazer o filtro é o seguinte:

A seguir, para que o fundo se veja corretamente tramado ao fazer o mosaico, devemos dissimular as mudanças bruscas que existem no desenho na parte central.

 

[helldanger1]

Para dissimular esta área utilizamos a ferramenta "Carimbo de clonar", clonando na área central outras partes da imagem, de modo que se dissimulem essas mudanças bruscas no desenho.

Se alguém não souber utilizar a ferramenta "Carimbo de clonar" há que dizer que com a tecla "alt" e clicando com o mouse em uma parte da imagem, se seleciona o ponto desde onde vamos copiar. Logo, soltando a tecla "alt", pintamos em qualquer outra parte da imagem. Pintaremos clonando o desenho da área selecionada previamente.

Dependendo da imagem da qual partido, o processo de clonar pode ser mais ou menos complicado. Nossa imagem resultado, depois de ter feito as mudanças, é a que utilizaremos como fundo da página.

Pode-se ver a imagem obtida aqui.