Ramon Victor

Photoshop para desenvolvedores web

| 1 Comment

Como 90% (ou  mais) dos layouts que chegam em nossas mãos são produzidos no Photoshop é importante que tenhamos conhecimento de algumas facilidades que este software nos oferece. Funcionalidades como: medir espessura de elementos, fatiar imagens, consultar tamanho de texto são algumas das atividades rotineiras que podem ser otimizadas.

Ajustar medida de régua e tipografia

Para que possamos visualizar as medidas da tipografia e régua em pixel, precisamos acessar o painel “preferences” (Edit > Preferences > Units & Rulers) e configurá-lo da seguinte forma:

Ajustar unidade de medida: Ferramenta seleção

No painel “info” (exibido via Window > info), é interessante que sejam configuradas as medidas para pixels também. Assim quando selecionarmos qualquer elemento veremos suas medidas exatas nesse painel.
Acesse: Info > Panel Options > Ruler Units

Exportação de imagens

Para exportação de imagens existem basicamente duas soluções. A primeira seria criar um novo arquivo colando nele apenas a layer que deseja exportar a outra seria utilizando a ferramenta slice tool. Adotei a segunda solução pois acredito ser bem mais eficiente. Vejamos como utilizar cada uma delas:

Slice tool

Atalho: ‘C’ na versão CS4  e ‘K’ na CS3.

Com essa ferramenta podemos criar diversas fatias com diferentes dimensões. Além disso é possível predefinir o nome que as imagens terão quando exportadas. Para acessar as propriedades da fatia precisamos acionar dois cliques em cima da mesma. Vejamos o painel abaixo.

Agora estamos com as informações da fatia configurada. Normalmente precisamos esconder as demais layers que não serão exportadas, para fazer isso existe uma maneira muito simples: basta pressionar “Alt + icone olho” (ver imagem abaixo) que o próprio PS se encarrega de esconder as demais layers. Para retornar a exibição basta acionar o mesmo atalho.

Criando um novo arquivo

Uma outra solução adotada por muitos, para exportar imagens, é colar a layer em um novo arquivo. É comum fazer isso de duas formas:

A primeira seria utilizando a ferramenta de seleção(M) e acionando o seguinte atalho “Ctrl + Shift + C”. Depois da cópia feita só é acessar “File > New” e deixar a opção de Clipboard marcada, feito isso só colar (Ctrl + V).

A outra forma seria utilizando a função de duplicar layer (Acessando “Layer > Duplicate layer …”). Com essa função podemos criar um novo arquivo com a layer desejada.

E você conhece mais algum “macete”?

Author: ramonvictor

Designer de Interação e Desenvolvedor Frontend. Especialista em Design da Informação pela UFPE e graduado em Sistemas para Internet pela Faculdade Marista.

One Comment

  1. Photoshop é ótimo para edição de fotos, mas para web… só uso Fireworks.
    No caso de exportar imagens (ou parte delas) por exemplo… tem uma ferramenta “export selection”, vc seleciona a area, o tipo do arkivo/qualidade e pronto. Fim de papo.

Deixe uma resposta