Dkcell Design Tendências, inspiração e novidades do design

Um dos recursos mais usados no Photoshop são os layers (ou camadas). Com eles podemos dividir nosso trabalho em partes individuais que no trabalho final formam uma imagem só. Desta forma podemos alterar partes sem interferir diretamente nas outras.

Como os layers funcionam:

Para que está olhando isto se trata de uma imagem plana bidimensional e única. Porém quando a criamos usamos 3 layers diferentes, uma sobre a outra, que são:

• O fundo em Azul
• O texto Dk Design
• O ícone do Photoshop

Como trabalhar com layers:

Iremos criar um novo documento com as seguintes medidas: 400×350px e resolução de 72DPI (caso tenham dúvidas, já foi explicado em tutoriais anteriores). Com este documento iremos criar a seguinte imagem usando os layers (download do .PSD no final do post):

Caricatura do capitão nascimento por: Felipe Alves

Criando o fundo:

Para começar iremos criar o fundo de nossa imagem, o céu. Para isso usaremos a ferramenta gradiente com as seguintes configurações de cor: #8fbff5 no Foreground Color e #e9f2fd no Bakground color e configurada para ir de Foreground to Background como na imagem abaixo:

Basta agora arrastar a ferramenta do topo da imagem até a parte de baixo, criando assim o mesmo efeito que criamos na imagem.

Criando um novo layer:

Iremos aqui mostrar como funciona a paleta Layers e criar um novo layer para continuar o nosso trabalho.

Iremos criar um novo layer clicando no botão correspondente como desmonstrado na imagem acima. O layer será adicionado sobre o layer de fundo.

Desenhando o chão:

Podemos desenhar o chão de diversas formas, porém decidi usar a forma mais simples. Selecionamos a cor que desejamos de foreground (em nosso caso #aeb0b3) e a ferramenta retângulo. Arrastamos desde a esquerda até a direita ocupando o espaço que acharmos necessário.

Adicionando o Capitão Nascimento:

O Capitão Nascimento não foi desenhado por nós e seu procedimento não será explicado neste tutorial. Foi criado pelo Felipe Alves e pode ser baixada clicando no botão abaixo:




Baixado num total de 60 vezes

Apenas iremos copiar e colar a imagem em um terceiro layer, que criaremos acima dos outros 2 do cenário. (no arquivo acima temos a imagem em 2 tamanhos, 1 grande caso queiram trabalhar em alguma outra obra e 1 no tamanho exato da imagem usada).

Movemos a imagem para o local que desejarmos.

Criando o Sol e as Nuvens:

Iremos criar 3 layers diferentes desta vez, 1 para cada nuvem e 1 para o sol.

Em cada um dos layers iremos adicionar os shapes necessários, porém antes na ferramenta shapes (já explicamos anteriormente também) iremos na barra de ferramentas para mostrar todos os shapes do Photoshop como na imagem a seguir:

Agora em cada layer iremos criar 1 imagem diferente, no caso as 2 nuvens e o sol, não importando a ordem dos layers no momento pois iremos mostrar como alterar caso um esteja no local errado.

Caso estejam como na imagem ao lado, o que teremos que fazer é clicar no layer correspondente ao que queremos mover e arrastar o mesmo para a nova posição dentro da paleta layers que demonstramos acima.

No caso a ordem que teremos que deixar estas 3 imagens seria (de cima para baixo, assim como deve ficar no photoshop)

• Nuvem Grande
• Nuvem Pequena
• Sol

Pronto, agora temos todas as imagens posicionadas corretamente e praticamente terminamos a imagem.

Criando Grupos:

Agora para uma questão de organização iremos criar grupos de imagens, no caso são 2 grupos:

• Cenário
• Personagem

Com isso diminuimos o espaço usado na paleta layers podendo adicionar e trabalhar em mais imagens com maior facilidade. e também caso seja necessário alterar partes da imagem em projetos com muitos layers fácilitará para encontrar.

Para criar os grupos, basta clicar na opção de criar grupo na paleta dos layers. Clicando duas vezes sobre o grupo podemos alterar o seu nome e a cor com que será exibido na paleta.

Criado o grupo, basta arrastar os layers para dentro dele. Lembrem-se que o posicionamento também é válido dentro dos grupos, portanto tomem cuidado com a ordem dos mesmos.

Arquivos para download:

Tutorial 4 Photoshop: Layers (66) - 227.37 KB

Capitão Nascimento Por Felipe Alves (60) - 923.19 KB

Créditos Finais:

Daniel Kaiserlino, autor do tutorial.

Felipe Alves,pelo desenho do Capitão Nascimento.

Anatomia da Caixa de Ferramentas

A caixa de ferramentas pode ser dividida em 4 partes, de forma que achar a ferramenta certa não seja problema. As categorias seriam:

Feramentas de Seleção, Corte e Fatiar
Ferramentas de Retoque e Pintura
Ferramentas de Desenho e Texto
Anotações e Medidas

Além destas 4 categorias, temos ainda algumas ferramentas, com destaque para a escolha de cores primárias e secundárias (background e foreground).

Iremos fazer uma breve descrição de cada ferramenta abaixo, pois cada uma possui diversos recursos detalhados, que talvez explicaremos mais tarde em tutoriais separados.

Ferramentas de Seleção

A ferramenta Marquee é usada para selecionar objetos como retângulos, triângulos e elipses.

A ferramenta Move é usada para mover os objetos selecionados, ou layers.

Existem várias ferramentas Lasso, usadas para criar seleções irregulares. Existe a Polygonal Lasso usada para objetos poligonais e a Magnetic Lasso que acompanha as bordas dos objetos.

A Magic Wand (varinha mágica) seleciona áreas de cores similares, como a parte azul no exemplo acima.

A Ferramenta Crop é usada para redefinir a área ativa da imagem, porém sem redimensionar a imagem toda.

Seria como recortar um pedaço de uma foto com tesouras.

A ferramenta Slice é comumente usada para criar áreas de websites em layouts.

É usada para dividir as fatias que serão exportadas para depois serem codificadas com Css e

Xhtml.

Após selecionar as fatias, basta clicar em File>Save For Web que o programa cria as divisões automaticamente.

Continuar Lendo

As Paletas

Para ter uma idéia de como as paletas são importantes, aperte Tab e todas elas irão ser ocultas. Praticamente as paletas incluem tudo desde as Ferramentas, a Barra de Opções até os Layers e a aba de Cores.

Iremos demonstrar neste tutorial como:

• Organizar Paletas.
• Redimensionar, ocultar e mostrar paletas.
• Fechar, Abrir e Resetar Paletas.
• Usar Opções Internas das Paletas.

Organizando Paletas

É possivel organizar as paletas ao seu gosto. Fazendo isto pode aumentar sua produtividade, pois organizará as que mais usa para áreas mais acessíveis.

Para Mover uma Paleta para outro grupo ou dentro de seu próprio grupo, basta arrastar a mesma para a área desejada.

Para Mover um Grupo de Paletas, arraste a barra de título da mesma e solte quando estiver encaixada.

Você também pode Anexar Paletas uma a outra apenas encaixando a parte inferior de uma com a superior, ao fazer isso elas se encaixarão automáticamente.

Redimensionando, Ocultando e Mostrando Paletas

Talvez você trabalhe usando diversas Cores, Estilos de Camada ou Camadas, todas que deseja acessíveis ao mesmo tempo. Você pode redimensionar a maioria das paletas simplesmente arrastando o canto direito inferior da mesma até atingir o tamanho desejado.

Caso deseje minimizar a paleta que não está em uso, aumentando assim a área útil, basta clicar no sinal de menos ou clicar 2 vezes na aba onde está o nome da paleta. Para maximizar basta refazer o processo.

Fechando, Abrindo e Resetando Paletas

Se você possui diversas paletas abertas que não usa pode fechar simplesmente clicando no X no canto direito superior da paleta.

Caso necessite abrir uma nova paleta vá em Window na Barra de Menus e selecione a paleta que deseja reabrir.

Caso esteja com problemas para reabrir alguma paleta e deseja voltar ao padrão, basta ir em Window> Workspace> Reset Pallete Locations na Barra de Menus. Com isso voltará a quando abriu o Photoshop pela primeira vez.

Usando opções das Paletas

Dentro das paletas, você irá encontrar diversas opções, variando de cores, opacidade, efeitos e muitos outros. Mas iremos mostrar isso posteriormente. Agora iremos mostrar como operar as funções.

Menus Drop Down:

Para operar um menu Drop Down como este ao lado, basta clicar na seta.

Uma lista com as opções irá aparecer. Basta clicar em um dos valores para selecionar.

Sliders:

Para operar basta clicar na setinha e arrastar até obter o valor desejado.

Swatches e Styles

Para selecionar uma cor ou estilo basta passar o mouse sobre para ver a descrição e dar apenas um clique para selecionar.

Vamos iniciar mais uma série de posts aqui no DK Design. Desta vez iremos publicar tutoriais básicos sobre o funcionamento do programa de edição de imagens mais conhecido no mundo todo: Adobe Photoshop.

Usaremos a versão Cs2 pois pouquissimas pessoas tem acesso a versão Cs3, inclusive cursos e faculdades.

Neste primeiro post faremos uma breve introdução do programa e suas principais ferramentas, e nos seguintes iniciaremos os tutoriais de uso.

A tela de Boas Vindas:

A primeira janela que se abre é a de Boas Vindas, a qual é uma ótima oportunidade para iniciantes conhecerem melhor o programa e suas funções. Porém caso deseje que a mesma não apareça mais, basta desmarcar a opção Show This Dialog at Startup. Sempre que quiser ver esta tela novamente mesmo depois de desabilitada, basta ir em Help > Welcome Screen.

Para começar a trabalhar, basta clicar em Close.

A Área de Trabalho:

Antes de trabalhar realmente vamos mostrar a área de trabalho do Photoshop, pois para muitos é assustadora.

• A. Barra de Menus: Área de menus organizada por tipo de tarefa a ser usada.
• B. Barra de Opções: Contém opções para a ferramenta selecionada.
• C. Barra de Ferramentas: Contém as principais ferramentas, além das opções de cor, zoom, etc.
• D. Janela do Documento: A janela que contém o documento a ser trabalhado.
• E. Área Ativa: A área onde iremos trabalhar.
• F. Navegador: Ferramenta usada para imagens grandes onde podemos navegar por uma miniatura da mesma.
• G. Paleta de Cores: Paleta usada para selecionar as cores a serem usadas para pintar/desenhar.
• H. Histórico: Acompanha todas as ações realizadas, muito útil para tutoriais e desfazer algum erro.
• I. Layers (camadas) : São camadas do trabalho, onde podemos trabalhar fundo , frente e objetos separadamente.

Criando um Novo Documento:

Para criar um novo documento basta ir em File>New na Barra de Menus.

Abrirá uma caixa de diálogo como a demonstrada abaixo:

• A. Nome do Arquivo: Onde escolhemos um nome para o arquivo (opcional).
• B. Presets: Escolha de uma lista de padrões já criados.
• C. Dimensões dos Documentos: Escolhemos altura e largura do documento.
• D. Unidades de Medida: Aqui escolhemos se iremos usar pixels (digital), cm (gráfico) ou outras.
• E. Resolução: Resolução significa o número de pixels por polegada. Para impressão normalmente usamos 300Dpi ou maior, o que também irá aumentar o tamanho do arquivo. Porém para trabalhos digitais ou web, o padrão é de 72Dpi.
• F. Modo de Cor: Escolhemos o padrão a ser usado, normalmente RGB, porém podemos usar CMYK (impressão) ou P&B.
• G. Conteúdo do Background: Escolha uma cor ou defina como transparente.

Na caixa demonstrada acima criamos um documento de 800×600px com fundo branco. O nome seria “Document Name” e a resolução seria a padrão para trabalhos digitais.

Salvando e Fechando um Documento:

Para salvar um documento criado no Photoshop, basta ir em File>Save na Barra de Menus. Ao salvar lembre de por um nome que irá lembrar e de manter a extensão *.PSD. Fazendo desta forma irá garantir que o arquivo irá manter os dados de camadas e atributos especiais do Photoshop para que possamos dar continuidade no trabalho posteriormente. Note que o arquivo gerado não é compativel com Browsers e outras aplicações, para isso teria que salvar com outra extensão que iremos explicar em próximos posts.

Para fechar um documento, basta ir em File>Close na Barra de Menus. Para fechar todos os documentos abertos, vá em File>Close All.

Como prometido anteriormente no post onde disponibilizamos o link para o tema Fresh Press, foi feita a tradução do tema para o Português, incluindo alguns comentários do autor no tema, e o humor foi mantido.

O readme foi mantido em inglês, porém caso hajam pedidos, o faremos, ou caso alguém faça nos envie que anexaremos e daremos os devidos créditos.




Baixado num total de 449 vezes

Demo Fresh Press Theme (inglês)
Fresh Press Theme Original (inglês)
Download Fresh Press Pt-Br (449)