COMO EDITAR OS ARQUIVOS PSD NO PHOTOSHOP

Tutoriais / Personalize o seu template / Edição dos arquivos PSD no Photoshop parte 2 << anterior

Como mudar as cores dos gráficos no Adobe Photoshop
Durante a personalização do seu template talvez seja necessário modificar as cores de alguns elementos de imagem, de maneira a adequá-los às cores de sua empresa. Nesta seção você irá aprender como fazer estas alterações.
Se desejar alterar as cores de um elemento isolado, primeiro você deve localizar a respectiva camada. Siga os passos descritos na etapa anterior.
Quando a camada que deseja editar estiver selecionada, você deverá fazer o seguinte. Escolha Image/Adjustment/Color Balance… no menu superior ou use o atalho
“Ctrl + B”. Irá aparecer a janela Color Balance. Nesta janela você verá três controles deslizantes. Experimente com cada um deles até estar satisfeito com o resultado. Agora confirma as alterações de cores com um clique no botão Ok ou cancele as mudanças pressionando o botão Cancel.

Janela Color Balance

Se você deseja alterar o esquema de cores de todo o template deve faze o seguinte. Selecione a camada superior do Painel de Camadas. Selecione a opção
Layer/New Adjustment Layer/Color Balance… do menu superior.
Confirme a criação da nova camada de ajuste de cores pressionando a tecla Ok na janela pop-up. Na janela de balanço de cores experimente com os três controles deslizantes até conseguir o padrão de cor desejado. Agora confirme a mudança de cor clicando na tecla Ok ou cancele as alterações com um clique em Cancel.
Note que a alteração de cor foi feita apenas na camada de cores, e não no desenho original. Mesmo depois de feitas as alterações, se desejar retornar ao esquema de cores antigo, basta ocultar ou remover a camada de cores. Esta é a grande vantagem de trabalhar com camadas separadas, a flexibilidade é muito grande. Você deve se habituar desde o início a atribuir camadas individuais a cada elemento de imagem que criar no Photoshop.

New Adjustment Layer

Atualizar as Alterações no Template
Depois de feitas todas as mudanças necessárias para personalizar o seu template no Adobe Photoshop, você deve atualizar todas estas alterações no seu documento HTML.
Primeiro você deve saber um pouco sobre os slices (fatias) no Adobe Photoshop. Cada slice no arquivo PSD representa uma imagem ou parte do background (fatia) do documento HTML. Os slices são representados por retângulos azuis. Se não for possível visualizar os slices, selecione View/Show/Slices… no menu superior. Para a editá-los, utilize a ferramenta Slice no painel de ferramentas (tecla de atalho “K”). Na verdade existem duas ferramentas Slice que podem ser selecionadas: Slice Tool e Select Slice Tool . A primeira ferramenta é usada para a criação dos slices e a segunda para a edição.
Use o atalho “Shift+K” para alternar entre estas duas ferramentas.
Todos os slices necessários já estão inseridos nos arquivo PSD dos tempaltes Layout Expresso. Você só precisa editá-los com a ferramenta Select Slice.
Antes de atualizar as imagens com o comando File/Save for Web, você deve se certificar que os slices que modificou não se sobrepõem a outros slices. Por exemplo, o slice de fundo (background) pode conter slices menores destinados às imagens de botões. Antes de salvar este slice, você deve trazê-lo para o topo. Para isto você deve selecionar o slice com a Ferramenta Select Slice. Em seguida vá ao painel de opções localizado no topo da tela. Se não for possível visualizar este painel, selecione Window/Options no menu superior. À esquerda do painel existem quatro botões de ordenação dos slices: Bring to Front, Bring Forward, Send Backward e Send to Back. Clique em no botão Bring to Front para trazer o slice para frente. Se precisar editar os slices dos botões no futuro, basta enviar o slice maior para trás. Desta forma você poderá visualizar e editar os slices menores.

Slice Order Buttons

Agora é hora de atualizar as modificações no arquivo HTML com o comando Save For Web. Selecione File/Save For Web… no menu superior ou utilize o atalho “Ctrl+Alt+Shift+S”. A janela Save For Web irá aparecer.
Nesta janela serão feitas as otimizações das imagens que serão exportadas. Na verdade os nossos designers já otimizaram as imagens para a melhor relação qualidade/tamanho do arquivo. Mas se você desejar que o seu web site carregue mais rápido, pode diminuir a qualidade das imagens, reduzindo com o isso o tamanho das mesmas e o conseqüente tempo de download. Selecione com a ferramenta Select Slice o slice correspondente à imagem que deseja otimizar. No lado direito da janela Save For Web existe um painel com as opções de imagem.
Você poderá alterar os valores da caixa de seleção de qualidade para as imagens JPEG ou quantidade de cores para as imagens no formato GIF e PNG.
Agora selecione o slice que deseja atualizar clicando no mesmo com a ferramenta Select Slice. Se desejar atualizar vários slices ao mesmo tempo selecione-os mantendo a tecla “Shift” pressionada.

Opções de Imagens

Quando todos os slices estiverem selecionados, clique no botão Save que está localizado no canto superior direito da janela Save For Web. A janela Save Optimized As irá aparecer. Procure pela pasta HTML do seu template. Selecione a opção Images Only na caixa de seleção Save as type e Selected Slices na caixa de seleção Slices. Outras opções podem danificar a estrutura original do documento HTML.

Janela Save Optimized

Se tudo correu bem, você verá uma janela pop-up pedindo a confirmação para a substituição das imagens. Clique em Replace para confirmar.

Confirmação de Substituição das Imagens

Se esta janela não aparecer, se certifique que as imagens estão sendo salvas para a pasta apropriada (pasta HTML do pacote do template). Também verifique o nome do slice com um clique duplo no mesmo. O nome e o formato de imagem devem ser os mesmos do arquivo HTML.
Agora é hora de verificar as modificações que foram feitas. Navegue até a pasta HTML do template e abra o arquivo para visualizar as alterações.

<< anterior