Você
terá acesso à nossa biblioteca de utilitários,
com dezenas de ícones, fotos, imagens, fontes, cliparts,
logotipos, sons, botões flash e objetos 3d.
Seja um colaborador do Layout Expresso!
Envie-nos
o seu artigo para ser publicado nesta seção.
Você terá publicidade gratuita no site Layout
Expresso! Mais detalhes...
Abrir
o arquivo PSD
Um arquivo PSD é composto de camadas onde estão
dispostos todos os elementos que compõem o desenho,
facilitando desta forma a edição individual
de imagens, textos, etc. Para trabalhar com os arquivos
PSD, você precisa ter o Adobe Photoshop instalado
no computador. É possível fazer qualquer
tipo de modificações no seu template com
este poderoso editor, o Adobe Photoshop.
Você deve carregar o arquivo PSD no Photoshop
para poder editar o seu template. É muito simples.
Selecione File/Open no menu superior e procure
o arquivo na pasta correspondente. Uma maneira mais
simples é arrastar o arquivo do Explorer diretamente
para o programa. Se os arquivos PSD estiverem associados
ao Photoshop no seu computador, basta um clique duplo
no arquivo para abri-lo e iniciar o programa, se este
não estiver ativo.
Como abrir o arquivo PSD
Nota: Se você receber uma mensagem
de alerta que diz Algumas camadas contêm
fontes que não estão disponíveis
significa que você não instalou todas as
fontes incluídas no seu template. Para mais informações
sobre a instalação das fontes veja: Instalação
das Fontes
Modificar o Texto
A maior parte dos textos é apresentada em HTML
para simplificar a sua edição e ainda
permitir que os sites de busca façam a leitura
das informações contidas no site. Lembre-se
que os sites de busca não reconhecem imagens,
flash, java scripts, etc. Por isso é importante
ter bom conteúdo em todas as páginas do
seu web site, assim você terá mais chances
de obter um bom posicionamento nos motores de busca.
Mas para que os visitantes permaneçam e retornem
ao site, as suas páginas devem ter além
de bom conteúdo, uma boa apresentação.
Por isso algumas partes do texto são apresentadas
como imagens no arquivo HTML. Estas imagens são
editadas no arquivo PSD com o Photoshop. Abaixo serão
descritas formas de editar este tipo de texto. Para
saber como editar o texto simples em HTML, veja a seção
Edição dos
Arquivos HTML.
Na verdade, você pode inserir
textos em forma de imagem, (gif ou jpeg) usando qualquer
editor gráfico de sua preferência. Mas
esta forma de modificação do template
não é recomendada porque assim você
não será capaz de criar os mesmo estilos
de fonte e efeitos. O Photoshop parece complicado no
início, mas na verdade é simples de utilizar.
Quando você estiver mais à vontade com
este software irá perceber que este é
uma ferramenta indispensável para edições
de imagens e criação de web sites de qualidade.
Depois de ter aberto o arquivo PSD no
Adobe Photoshop, pressione a tecla T
para abrir ferramenta de texto. Clique com o cursor
Type na porção de texto
que deseja editar. Se aparecer a mensagem The
following fonts are missing significa
que você não instalou todas as fontes que
acompanham o pacote do template. Para instruções
sobre a instalação das fontes veja a seção
Instalação das
Fontes.
Se o campo de texto tiver várias
linhas você pode iniciar a digitação
em uma nova linha pressionando Shift + Enter.
Para finalizar o modo de edição do texto,
pressione Ctrl + Enter. Se quiser
finalizar a edição do texto e descartar
todas as modificações feitas, pressione
a tecla ESC.
Se desejar modificar os atributos do texto, como o tipo
de fonte, estilo e cor, basta selecionar o texto desejado
e editá-lo no painel de opções,
que se encontra na parte superior da tela. Se não
conseguir visualizar este painel, selecione-o em Window/Options
no menu superior.
Painel de Opções
No painel de opções estão
disponíveis quatro menus dropdowns, ícones
de alinhamento de texto e barra de cores. O primeiro
menu dropdown permite a alteração da fonte,
mas é recomendado que você não altere
a fonte padrão. Os nossos designers já
selecionaram a melhor fonte para o seu template.
O segundo menu mostra os estilo de fonte, Negrito, Italico
e Normal.
O próximo menu representa o tamanho da fonte.
Utilize fontes de maiores para o nome da sua empresa
ou slogans e fontes menores para textos em botões
e cabeçalhos.
O último menu dropdown faz a mudança do
entrelinhamento do texto. Use esta opção
para suavizar o serrilhado e dar um aspecto mais profissional
ao texto.
Para modificar a cor do texto, clique na barra de cores
do painel de opções.
Opções mais avançadas podem ser
especificadas no painel de tipos type panel.
Para abrir este painel pressione Ctrl + T.
Type Panel
Depois de ter feito todas as edições
no texto, você deve atualizar estas alterações
no template. Para instruções detalhadas
de como fazê-lo leia a seção "Atualizar
as Alterações no Template" no final
deste tutorial.
Como alterar imagens no Adobe Photoshop
Um importante passo na criação de um web
site único a partir dos nossos templates é
inserir o logotipo de sua empresa e suas próprias
imagens. Se você está iniciando um novo
projeto na internet a ainda não possui um logotipo
poderá adquirir um em nossa seção
de logos clique aqui
Para iniciar a edição de imagens, carregue
o arquivo PSD no Photoshop.
Antes de inserir a sua imagem no template você
deve remover ou esconder a imagem original. Prefira
a opção de esconder a imagem se precisar
utilizá-la futuramente. Para qualquer das opções,
remover ou esconder, primeiro você terá
que localizar a camada que contém a imagem. A
maneira mais fácil de fazer isto é clicar
na imagem pressionando a mesmo tempo a tecla Ctrl.
Mas se existe alguma camada transparente sobre a camada
da imagem você terá que ter um pouco mais
de cuidado, pois a camada superior será selecionada
ao invés da camada de imagem desejada.
Painel de Camadas
Para verificar o conteúdo da
camada atual faça o seguinte. Vá até
ao painel de camadas, escolha Window/Layers se
este painel não estiver visível. Descubra
a camada que está marcada na lista de camadas
esta é a camada atual que está
selecionada. No lado esquerdo do nome da camada existe
um ícone no formato de um olho. Clique
algumas vezes neste ícone para mostrar/ocultar
a camada e veja qual elemento de imagem desaparece do
desenho geral. Se esta é a imagem que deseja
remover, você está quase lá! Se
a seleção da camada não é
a correta, você pode usar outra opção.
Clique como o botão direito do mouse sobre a
imagem. Com isto serão mostradas todas as camadas
que ocupam aquela posição no desenho.
Experimente com as diferentes camadas até encontrar
a que deseja. Use o procedimento descrito acima para
ter a certeza que selecionou a camada correta.
Clique com o Botão Direito do Mouse mostra
a lista de camadas
Uma vez que você conseguiu selecionar
a camada com a imagem que deseja remover. Para ocultar
a imagem clique no ícone em forma de olho no
lado esquerdo do nome da camada. Se preferir remover
definitivamente a imagem clique no ícone da lixeira
no canto inferior direito do painel de camadas.
Agora você já pode inserir a sua imagem
no arquivo PSD, é muito fácil. Basta arrastar
do file browser diretamente para o Photoshop. Ou ainda
File/Open no menu superior. A imagem irá
aparecer em uma nova janela. Podem ser feitas modificações
prévias na imagem nesta etapa. Por exemplo, você
poderá recortá-la com a ferramenta de
corte (tecla de atalho C) ou efetuar
ajustes de cor para que a imagem fique compatível
com esquema de cores do template.
O próximo passo é mover a imagem para
dentro do template PSD. Para isto selecione a ferramenta
Move no
painel de ferramentas ou use o atalho V.
Depois usando esta ferramenta arraste e cole a imagem
para dentro do template.
Com a mesma ferramenta, mova a imagem para o local apropriado.
Se a imagem que escolheu está sobreposta por
outras imagens ou texto você deverá movê-la
para a parte superior da lista de camadas. Vá
até o painel de camadas e arraste esta camada
para a cima, até a sobreposição
desaparecer.
Depois de ter feito todas as alterações
nas imagens você deve atualizar estas mudanças
no template. Para mais detalhes veja as instruções
no final deste tutorial.