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

Recentemente devido a nova série de Ícones que estou fazendo encontrei este site, com excelentes ilustrações, muito coloridas e que passa muita alegria ao visitante.

Vale a pena fazer a visita e baixar os ícones.

Indeepop

Mais uma vez decidi fazer uma série de posts aqui no Dk Design.

Desta vez com algo que todos podem baixar além de admirar, e usar em seus projetos, blogs, sites, etc.

O tema desta série são ícones. Nela irei fazer uma seleção do que existe de melhor em ícones na web. Porém não manterei um tema fixo, poderão ser desde frutas até ícones de sistema e Rss.

Semana que vem na quinta-feira tem mais.

As ferramentas de seleção são usadas para facilitar o processo de selecionar formas, cores e objetos dentro do Photoshop, e posicioná-las dentro da área de trabalho.

No Photoshop podemos trabalhar áreas separadas sem alterar o restante ao seu redor.

Basicamente lhe permite pintar, editar ou deletar uma parte única de seu trabalho enquanto o restante permanece inalterado.

Ferramentas Marquee

As Marquee Tools são usadas para fazer seleções retangulares, elípticas, e em linhas horizontais e verticais.

Para criar uma seleção com as marquee tools simplesmente segure e arraste sobre a área a ser selecionada.

Seleções perfeitas

Quando usamos a ferramenta de seleção retangular ou a elíptica, podemos fazer um quadrado e um circulo perfeitos, bastando segurar shift enquanto arrastamos pela imagem.

Lasso Tools

As ferramentas de seleção Lasso permitem que façamos seleções de formatos irregulares.

Usando a Lasso Tool (padrão) basta ir “desenhando” o que deseja selecionar. Com a Ferramenta de Lasso Polygonal, clique para fazer diversos pontos que definirão a seleção, e para terminar basta clicar novamente no ponto inicial.

A Magnetic Lasso combina as 2 mencionadas anteriormente. Você clica uma vez e começa a acompanhar a mão livre o que deseja selecionar. A ferramenta tenta automaticamente acompanhar os cantos da imagem (pode definir os pontos se necessário com cliques). O resultado final será uma seleção muito mais precisa que as outras 2.

A varinha mágica seleciona áreas baseado nas cores. Para usar a ferramenta basta apontar e clicar na cor que deseja selecionar na área ativa.

Usando o diagrama abaixo poderão ter uma idéia da seleção por cores, iremos selecionar apenas a cor do interior.

Uma dica: Quando estiver usando a varinha mágica, é possível selecionar um maior ou menor número de cores, ajustando a opção Tolerance na barra de opções. Quanto maior o número, mais cores similares serão selecionadas.

Combinando seleções:

Às vezes é necessário combinar múltiplas seleções para selecionar uma área inteira. Nestas horas podemos usar um simples atalho de teclado.

Com uma seleção basta segurar shift e crie uma nova seleção, ela será adicionada a seleção existente.

Removendo seleções:

< p class=”info>Assim como é possivel adicionar seleções, podemos remover apenas segurando a tecla Alt e criando uma nova seleção. Podemos também criar seleções em interseção (segurando Shift e Alt ao criar a nova seleção).

Move tool

A ferramenta Move é usada para mover as áreas selecionadas de uma imagem, layer, forma ou outros objetos. Para mover a parte selecionada da imagem, basta selecionar a ferramenta Move , clicar e arrastar a seleção até o local desejado.Desta forma irá recortar a seleção de sua posição original e reposicionar onde escolher.

Essencialmente mover um objeto selecionado é como recortar uma parte de um desenho e fazendo uma colagem.

Crop Tool

A ferramenta Crop é usada para redimensionar o canvas e a área ativa. Para usar basta arrastar formando uma espécie de seleção em volta do que deseja.

Note que usar a ferramenta Crop não irá deletar os dados dos layers, todos os dados serão preservados e a imagem ficará em um tamanho menor. Alguns dados de layers podem não estar visíveis pois ficaram fora da área da imagem ativa.

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 118 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 (114) - 227.37 KB

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

Créditos Finais:

Daniel Kaiserlino, autor do tutorial.

Felipe Alves,pelo desenho do Capitão Nascimento.

Apesar do nome um pouco estranho, gostei bastante deste site de upload de imagens.
O seu diferencial é o envio múltiplo de imagens sem sair da página, tanto para pegar os links para postagem como o envio de outras. Tudo isso feito muito rapidamente.

PICAMATIC