Tutorial Photoshop Cs3 – Criando um layout para website – Parte 1

Hoje iremos aprender a criar um layout para um web site.

Introdução:Hoje iremos aprender a criar um layout para um web site.
O artigo será dividido em algumas partes, para que possamos nos aprofundar na mecânica do desenvolvimento e explicar detalhadamente alguns tópicos importantes na criação de um layout.

1º Passo:
Crie um documento de 778 x 600, com 72 ppi de resolução.
Porque a escolha dessa dimensão horizontal ? Geralmente se estipula essa dimensão, pois na maioria dos navegadores mesmo os que possuem barra de rolagem mais grossas,
o layout não estrapolará o navegador.
Sobre a dimensão vertical, ela ficará ao critério de conteúdo. Coloque como 600 px, porém, caso seja necessário você poderá e deverá aumentar a dimensão de acordo
com o conteúdo a ser acrescentado.
Utilize a cor branca como fundo. É importante que nós saibamos um pouco sobre a teoria das cores, para que possamos ter embasamento e coerência na escolha das cores para o seu website.
Abaixo, um pouco sobre as cores mais utilizadas em web sites:

…………………………………………………………………………

DETALHAMENTO SOBRE CORES:

Amarelo: A cor amarela transmite alegria e vivacidade. Chama a atenção em qualquer ponto onde é aplicada, e é perfeita para o destaque de algum
elemento no layout.
Azul: O azul é uma das cores preferidas por quase todas as pessoas. Passa uma sensação de tranquilidade, profundidade (se escuro) e limpeza (se claro)
Branco: A cor da pureza. Representa o vazio, a clareza. Web Sites com grande predominância de branco tendem a ser mais legíveis aos usuários, não
por coincidência, vemos muito essa cor em site de jornais.
Cinza: O cinza transmite a sensação de algo impuro e indeciso (por não ser claro, nem escuro, nem preto nem branco). É uma cor triste e sombria, porém
pode definir um website sóbrio e sério. Dê preferência ao cinza claro (20% a 30%), para passar essa sensação de sobriedade.
Laranja: Cor que “alimenta”, produz uma sensação de saciedade, aconchego, intimidade. É uma cor quente e permite resultados excelentes quando utilizada
na intensidade e lugar corretos.
Marrom: Cor sóbria e sólida, deve ser usada com moderação por trazer um aspecto pesado a qualquer local onde esteja aplicada.
Preto: A presença de todas as cores. A eternidade, elegância. A cor da morte. Presente em 99% dos websites, na maioria em pequenos detalhes.
Deve também ser utlizada com cuidado, pois o excesso dela poderá carregar muito o seu layout.
Rosa: O rosa é uma dor feminina,por excelência. Sugere doçura, simplicidade, intimidade.
Roxo: É uma cor que pode apresentar duas funções distintas. O roxo tanto pode conferir um aspecto divertido quanto misterioso, nobre, dependendo das cores
com as quais é associado.
Verde: É a cor da natureza. Suas diversas tonalidades transmitem diferentes sensações, nenhuma delas relacionada à alegria ou paixão.
O verde mais claro é assim como o azul, calmo, agradável.
O verde escuro transmite ideia de profundidade, seriedade.
Já o verde amarelado confere a sensação de alegria, ou até mesmo serenidade.
O verde é uma cor que deve ser utilizada com muito critério e moderação, já que diversos tons tem a propriedade de desagradar os olhos (como, por exemplo, o verde-bandeira).
Vermelho:O vermelho estáintimamente ligado aos desejos pasisonais. É quente, imponente, chamativo. Suas diversas nuances apresentam diversos significados:
O vermelho escuro sugere sobriedade e poder.
O vermelho cereja é apaixonado, feminino, sensual.
O vermelho mais claro é energizante e forte.

O uso das cores e suas combinações podem ser o diferencial de seu trabalho final. Aproveite estes fundamentos e realize estudos de cor, observando as mais diversas
tonalidades e percebendo quais sensações elas transmitem.
Mais detalhes sobre cores, acesse o artigo “Cores em web sites – Aplicações corretas e errôneas” aqui mesmo em nosso portal

…………………………………………………………………………

2º Passo: A barra de navegação

Bom, voltando ao layout, vamos agora adicionar uma logo no topo do site. Portanto, na parte superior esquerda do layout, adicione a logo.
Agora acresentaremos alguns elementos.
Começaremos pela barra de navegação do site. Crie uma camada por baixo da camada da logo, e utilizando a ferramenta retangle tool   , e configure-a como na imagem seguinte  .
Utilizando a ferramenta retangle tool, poderemos manter o elemento facilmente editável, pois na opção “Paths” configurada por nós, teremos o shape
ativo, para que possamos alterar as dimensões do elemento, sem deformá-lo.
Crie agora um retangulo com a cor:#7b7e79, esse retângulo deverá ter a mesma largura do layout, e a altura deverá se igualar a altura da logo.

Agora, aplicaremos um estilo de camada em cima deste shape criado.
siga para o menu Layer(Camada)>Layer Style(Estilo de camada)>Gradient Overlay(Sobreposição de degradê).
Abaixo, veja como deverá configurar o efeito.

Criaremos agora os separadores para o menu.
Crie com a ferramenta line tool     com a configuração mostrada ao lado   , duas linhas verticais.
Uma com a cor branca e outra com a cor preta, as duas linhas devem estar encostadas uma na outra.
Ao criá-las, mescle-as, marcando as duas camadas com a tecla control e em seguinda teclando CRTL + E
Configure a camada referente ao traçado como modo de mesclagem Overlay e opacidade para 70%
Veja abaixo a imagem ampliada de como deverão ficar os dois traçados verticais.

Em seguida, iremos posicioná-lo na barra que criamos, na seguinte localidade.

Feito o posicionamento, agora iremos “mascarar” esse traçado com um degradê, afim de criar uma transparência difusa em suas extremidades.
Clique no ícone mostrado abaixo, para criar a máscara de camada.

Veja abaixo a miniatura que representa a criação da máscara.

Agora, acione a ferramenta Gradient Tool (Degradê)
com as configurações mostradas abaixo:

Iremos agora aplicar a ferramenta no traçado, clique na miniatura referente a máscara para termos certeza que a máscara está ativa.
Aplique posicionando a ferramenta no meio do traçado e puxe o mouse para cima.
Faça como na imagem abaixo.

Visualize abaixo como deverá ficar o traçado.

Agora quadripique essa camada. Teremos 4 camadas com traçado.

Feita essa parte, marque clicando com o mouse e a tecla CTRL pressionada as 4 camadas referentes ao traçado.
Tecle CTRL + T ou acesse o menu Edit(Editar)>Free transform(Transformação), e aumente os tracados de forma que eles cubram toda a barra.
Em seguida, preencha com os textos referentes aos botões(Utilize a ferramenta texto, e escolha a fonte de sua preferência, eu escolhi a “Helvetica medium condensed” e o tamanho da fonte foi estipulada em 14 pt
Organize os separadores de forma que a distribuição de textos e separadores fiquem coerentes. Se achar conveniente, aplique uma leve sombra projetada no texto, pelo menu Layer(Camada)>Layer Style(Estilo de camada)>Drop Shadow(Sombra projetada)
Visualize abaixo como deverá ficar a barra de navegação.

…………………………………………………………………………

Falemos agora um pouco sobre a tipografia de um site.

QUAL FONTE DEVEMOS UTILIZAR EM NOSSO SITE?

Fontes existem para serem usadas, certo ? Certo, mas não podemos perder a coêrencia na utilização delas, exitem muitos tipos e estilos de fontes, portanto, diversas aplicações para elas.
É comum nos perdermos um pouco na escolha e combinação dessas fontes. Abaixo teremos algumas explicações que poderão ajudar-los a fazer essa escolha.
É necessário que saibamos sobre o público alvo de seu projeto e o tipo de trabalho realizado.
Precisamos saber que trabalhar com as fontes, e tipologias de fontes é essencial para um resultado perfeito. Uma fonte perfeita é aquela que completa o layout, como um toque final.
Antes de pensarmos em beleza e estrutura da fonte, devemos avaliar a legibilidade dela, afinal de contas, essa é a principal função dela, a leitura.
Se tratando de web, os textos devem ser escritos de maneira clara e da forma mais simplificada possível, já que a leitura de ítens na tela do computador é mais cansativa e, por isso,
realizada pelos internautas de forma mais ligeira.
Para garantir que a leitura será tranquila, prefira fontes não serifadas(principalmente em textos longos), pois allém de facilitar a leitura, também se adequam
a qualquer estrutura de layout.
Boas fontes de texto são, arial, Tahoma, helvetica e verdana.
É importante saber que as fontes definidas no codigo html de uma página são exibidas de acordo com as fontes existentes no computador do internauta, por exemplo,
se você escolher a fonte Impactpor exemplo, no código fonte da página estará definido que ela deverá ser exibida nos computadores que tiverem essa fonte instalada
caso contrário, se ele não tiver a fonte impact instalada, ela será automaticamente substituida, fazendo assim com que seu projeto tenha um resultado diferente do esperado.
Portanto, para que evitemos esses problemas, devemos priorizar as fontes mais comuns e presentes na maioria dos computadores.
As fontes padrão do windows são: Arial, Comics sans, Courier, Georgia, Microsoft Sans Serif, times new roman, verdana, impact, tahoma…entre outras.

…………………………………………………………………………

Para finalizarmos a barra de navegação, com a mesma ferramenta utilizada anteriormente, a retangle tool  , configurada da mesma forma
utilize a cor :#898a89 e crie um retângulo mais fino e posicione-o abaixo da barra principal.
Utilize a imagem abaixo como referência.

Bom, concluida a barra de navegação, ficaremos por aqui e continuaremos na segunda parte deste artigo.
Até lá.

Referência:
Livro Webdesign Teoria e Prática – Anielle Damasceno

Tutorial Photoshop Cs3 – Criando um layout para website – Parte 2

Na primeira parte desse artigo, nós pudemos entender um pouco sobre cores, fontes e criamos uma barra de navegação para nosso site. Nessa segunda parte, iremos criar mais alguns elementos.

Introdução:Na primeira parte desse artigo, nós pudemos entender um pouco sobre cores, fontes e criamos uma barra de navegação para nosso site.
Nessa segunda parte, iremos criar mais alguns elementos.

Antes de começarmos, visualize como está nosso projeto, com a barra e menu de navegação prontos.

.

1º Passo:
Escolha uma imagem para compormos a home do site e crie uma camada e posicione como mostrado abaixo. Eu escolhi a seguinte imagem:

.

Criaremos agora mais 2 elementos, um quadrado e um retângulo.

…………………………………………………………………………

FORMAS E SUAS APLICAÇÕES

Antes de mais nada, porque a escolha de quadrados e retângulos? Parece óbvio, mas há algumas teorias a serem consideradas para que tenhamos harmonia nessa escolha e distribuição de elementos.
Devemos conhecer alguns princípios básicos, a harmonia, a forma e suas funções e o equilibrio entre os elementos.
A harmonia nada mais é do que a adequação visual do conjunto de elementos que compõem um todo. Ou seja, a coerência visual.
Imagine entrar em uma sala toda mobiliada em estilo clássico, móveis escuros, cortinas brancas, tons terrosos e o sofá ROSA “SHOCKING”esse é um exemplo de desarmonia.
É importante sabermos diferenciar desarmonia de destaque intencional. Nós, como designers, temos total liberdade de criar novos estilos e enfatizar elementos da melhor forma
que pudermos, e é isso que diferencia o bom profissional dos demais.
Devemos procurar manter a coerência entre todos os elementos de uma página web, cores, tamanho de imagens, posicionamento, etc..) As formas assim como as cores, são elementos de sinalização. Conheça o significado visual e instintivo de algumas formas e suas aplicações: Triângulo: O triângulo, quando apoiado em sua base sugere estabilidade, imponência, (lembre-se das pirâmides egípcias), equilíbrio.
Quando invertido, apoiado sobre uma aresta, denota desequilibrio iminente, dinâmica, impulsividade.

.

Retângulo: É uma das formas mais utilizadas em layouts, especialmente os mais modernos. É centralizador, abrangente, firma e pode ser aproveitado em inúmeros ítens.

.

Quadrado: Simboliza a simetria, a solidez e a igualdade. Entretanto, quando utilizada em layouts, sugere falta de criatividade, apatia e peso.

.

Circunferência: Simboliza a eternidade. Não possui começo, meio e nem fim, é perfeita, estável e neutra. Possui a capacidade de centralizar a atenções frente outros elementos à sua volta.
É única e deve ser utilizada para enfatizar elementos que serão destacados.

.

Elipse: É sinuosa e feminina. Suas laterais definidas sugerem equilíbrio delicado; a elipse é uma forma muito dinâmica. Quando bem aplicada, pode conferir muito movimento visual a diversos elementos de um layout.

.

Formas poligonais e sinuosas: As demais formas poligonais são muito expressivas por si só, e devem ser utilizadas com muita moderação. As formas sinuosas
compreendem as curvas, que não definem nem circunferências nem elipses. São elementos muito utilizados na composição de certos tipos de websites, e quando bem aplicadas
são a melhor saída para um design correto, divertido ou até mesmo elegante.

.

O equilíbrio dos elementos em um layout depende a compreensão daquilo que você pretendeu criar. Tão importante quanto saber preparar cores e formas gráficas, está o entendimento do equilíbrio visual de uma página da web.
Quando se menciona equilíbrio, fala-se em proporção. Um bom exemplo de desequilíbrio, é uma foto grande, com um texto de chamada muito pequeno. Certamente seus olhos estranharão.
O design de um website é equilibrado quando possui a corrte combinação de cores, proporção ideal entre imagens e textos, hierarquização correta dos elementos e também quando confere
fácil identificação de todos os componentes aos usuários.

…………………………………………………………………………

Voltando à criação do layout:
Criaremos o quadrado e o retângulo com a mesma ferramenta que utilizamos anteriormente.
Crie uma camada acima de todas, e faça o quadrado da forma mostrada abaixo, posicionando-o também no mesmo local. Utilize a cor #77796f

.

Agora, criaremos um retângulo de mais ou menos 1/4 do anterior, e o posicionaremos na parte superior do recém criado. Faça o em uma nova camada acima de todas, com a cor branca e coloque a opacidade dessa camada para 50%.

.

Feita essa parte, vamos adicionar um texto com o slogan da empresa.
Utilizarei a fonte Myriad pro, e com algumas variações.
Verifique que utilizei nas palavras “A informação no” a variação “condensed” e na palavra “momento” a variação “Bold condensed”, e nas palavras “que você precisa”
a variação “regular”, dessa forma conseguimos com uma só fonte, criar uma variação na exposição da frase. Perceba também que utilizei caixa alta (maiúsculas) na frase inteira. Dessa forma destacando mais ainda a frase
E, como forma de aprimorar, caracterizar e sofisticar o slogan, coloquei a palavra MOMENTO com uma das cores do logotipo da empresa.
Nessa mesma camada do texto, aplique uma sombra projetada, com configurações suaves. Acesse o menu Layer(camada)>Layer Style(Estilo de camada)>Drop Shadow(Sombra projetada)

.

.

2º Passo:
Criaremos agora mais um elemento com a ferramenta Custom shape tool e as seguintes configurações.

Configure a cor #bce21b e crie 4 formas em sequência, uma abaixo da outra. Em uma mesma camada.
Utilize o mesmo efeito de sobra projetada nesses elementos. O mesmo efeito aplicado no texto do slogan. Clique com o mouse botão direito em cima da camada do slogan,
e clique em “copy layer style”, e em seguida, clique na camada referente aos elementos (circulos) e com o botão direito do mouse, clique em“paste layer style”.
Desta forma copiaremos o efeito.

.

Agora, utilizando a mesma fonte do menu, acrescente categorias ao lado dos elementos. E aplique o mesmo efeito de sombra projetada, clicando com o mouse botao direito nas camadas referentes
aos textos, e acionando a opção paste layer style.
Após feito isso, centralize tudo.

.

Agora, criaremos mais dois retângulos.
Utilize as cores: #bfc1b4
E: #dee0d5
E faça-os em camadas distintas, uma para cada elemento.

.

3º Passo:
Agora, iremos aumentar o canvas da imagem, para que possamos inserir mais conteúdo na página.
Acione menu Image(imagem)>Canvas Size(Tamanho da tela de pintura). Repare que seguindo as configurações abaixo, teremos um ganho de espaço de 25% na parte inferior do layout.
E configure como mostrado abaixo:

.

Agora, com as cores mostradas abaixo, crie novamente 2 retângulos.
Cores: #86877f e #bfc1b4

.

Bom, a estrutura do layout está praticamente montada, na 3ª parte desse artigo, iremos inserir o conteúdo, e o rodapé do layout.
Até lá !

Referência:
Livro Webdesign Teoria e Prática – Anielle Damasceno

Tutorial Photoshop Cs3 – Criando um layout para website – Parte 3

Na segunda parte desse artigo, pudemos entender um pouco sobre formas e suas aplicações em um layout. Nessa última parte, iremos acrescentar conteúdo e criaremos o rodapé do site.

Introdução:Na segunda parte desse artigo, pudemos entender um pouco sobre formas e suas aplicações em um layout. Nessa última parte, iremos acrescentar conteúdo e criaremos o rodapé do site.

Antes de começarmos, visualize como está nosso projeto.

.

1º Passo:
Vamos inserir conteúdo em texto e imagens aos boxes de conteúdo.
Insira um retângulo vertical no Box superior direito que servirá como moldura, nesse retângulo, iremos inserir uma fotografia, não se prenda a cores nesse elementos, pois ele será ocultado pela fotografia. Faça-o com a cor branca.
E aplique uma sombra projetada com as configurações mostradas abaixo:

.

Em seguida, com a mesma fonte utilizada no menu (Helvética), e insira algum texto principal. Ao lado da moldura.
Acrescente também uma descrição com a fonte “Tahoma (Regular – None)”.

.

Agora, vamos inserir uma imagem no retângulo que criamos.
Abra a imagem, coloque-a no layout em uma camada acima da camada da moldura, dimensione-a de acordo com o maldura e em seguida, siga para o menu Layer>Create a clipping mask
Perceba que dessa forma iremos criar um vínculo entre a moldura e a foto, inserindo-a dentro da moldura.

.

Quando inserimos uma imagem em um layout, ela deve ser colocada frontalmente ào texto referente a ela. Por exemplo, na imagem que inseri, a frente da pessoa está voltada para o texto.

2º Passo:
Vamos agora inserir conteúdo no box ao lado.
Copie o texto do box anterior e insira-o no box esquerdo.
Utilize essse box para a área de newsletter.
Insira algum ícone de mail. E posicione junto ao texto.

.

Insira logo abaixo do trexto, uma lacuna de preenchimento.
E aplique o efeito abaixo.

.

Aplique o texto de “email” e “enviar”, juntamente com algum botão representativo.

.

Agora, seguindo o mesmo procedimento, vá inserindo conteúdo nos demais boxes.

.

Reparem que já criei o rodapé do layout, com o menu administrativo.
Abaixo podemos ver o resultado do nosso layout.

.

Bom terminamos o artigo sobre a criação de um layout web, espero ter ajudado.
Até a próxima.

Referência:
Livro Webdesign Teoria e Prática – Anielle Damasceno

Tutorial Photoshop CS3: Criando um telefone celular

Nesse artigo, iremos criar um aparelho de celular estilizado como iphone.

Vamos a mais um artigo de Photoshop.
Nesse artigo, iremos criar um aparelho de celular estilizado como iphone.
Espero que consigam finalizar com sucesso.

Começe criando um novo documento, de dimensões 640 x 480 px.
E em seguida, preencha o fundo com um gradiente com as seguintes colorações.
Primeiro plano: #4c4d4c
Segundo plano: #252525
Faça como na imagem abaixo:

Agora, crie uma nova camada Shift + Control + N nomeie-a como base, e em seguida acione a ferramenta rounded retangle tool

E com as configurações como mostradas acima, faça um retângulo da cor que desejar.

Agora, vamos preencher esse retângulo com um degradê.
Portanto, clique com o botão direito do mouse sobre a camada do retângulo, e escolha a opção Blending Options (Opções de mesclagem), e na caixa de opções, escolha o efeito Gradient overlay(Sobreposição de degradê)
Escolha a cor do lado esquerdo como: #8F9498
E no lado direito: #000000
E configure como mostrado abaixo:

Com isso, teremos o retângulo da seguinte forma:

Agora, crie uma nova camada, nomeie-a como brilho, e crie um novo retângulo com a mesma ferramenta utilizada anteriormente, porém, agora modificando o radius para 20px
Faça o retângulo com a cor branca levemente menor do que o retângulo base.

Duplique a camada brilho, e nomeie-a como borda.
Agora, tecle Control + T, e reduza um pouco o tamanho do retângulo.
Em seguida, acione mouse botão direito nessa mesma camada, e selecione Blending Options (Opções de mesclagem) > Color Overlay (Sobreposição de cor)
Escolha a seguinte cor: #1F2326
Teremos a seguinte imagem até o momento:

Agora, CONTROL + CLICK do mouse, na camada “borda”. E repare que dessa forma, criaremos uma seleção em torno da forma da camada borda.
Feita a seleção, vá ao menu Select (Selecionar)> Modify (Modificar)> Contract (Contrair), e configure para 3PX.
Em seguida, o mesmo caminho, com uma mudança Select (Selecionar)> Modify (Modificar)> Feather (Difusão), configure para 2PX.
Crie uma nova camada chamada Brilho 2.
E nessa nova camada, preencha essa seleção com a cor branca.
E teremos a imagem da seguinte forma.

Crie uma nova camada chamada “frente”.
Nela, crie um novo retângulo, com Radius de 18Px, e tamanho mais ou menos de 8 pixels menor do que a camada base.
Preencha com um gradiente com as seguintes cores:
Cor de primeiro plano: #2D3037
Cor de segundo plano: #000000
Temos agora a base completa de nosso celular.

Vamos agora aos detalhes do aparelho.
Salve essa imagem abaixo e insira no topo da superfície do celular.

Posicione-a como mostrado na imagem seguinte, e coloque a camada referente a logo no modo Screen (Divisão)

Agora, vamos criar 2 traçados, que serão os delimitadores da tela e botoes.
Acione novamente a ferramenta rounded retangle tool , crie uma nova camada e com as configurações como mostradas na imagem seguinte.

Crie um retângulo na parte superior.
Agora selecione a Brush Tool(Ferramenta Pincel), configure ponta redonda, tamanho para 2 px e a cor para #4a4a49

Em seguida, retorne para a ferramenta Rounded Retangle Tool, e clique com o botão direito do mouse sobre o retângulo selecionando a opção Stroke Path (Traçar demarcador)

Feito isso, agora marque como abaixo confirmando em seguida:

Tecle delete para remover o demarcador, pronto, já criamos o primeiro delimitador
Nomeie essa camada como traçado 1.
Vamos agora ao próximo, dessa vez, iremos criar o mesmo retângulo, porém em dimensões menores.
Acione a mesma ferramenta Rounded Retangle Tool, om o raio de 15 px e em uma nova camada c.

Faça um retângulo na posição mostrada abaixo:

Agora, iremos acertar a parte superior do traçado.
Com a ferramenta Direct selection tool, clique em cima do traçado, para ativar os pontos âncora.

Agora, utilizaremos a ferramenta Pen Tool (Caneta) para remover os dois pontos âncora superiores.
Portanto, faça como na imagem abaixo, clicando nos locais indicados.

Feita essa parte, vamos trocar de ferramenta, agora para a Convert point tool (Ferramenta de conversão de pontos).

Essa ferramenta como já diz o nome, é responsável por converter os pontos ancoras em ângulos, e vice-versa.
Então é só acionarmos a ferramenta e clicar sore os dois pontos indicados abaixo. Reparem que as curvas irão se tornar angulos retos

Agora, vamos aplicar o traçado, selecione a Brush Tool(Ferramenta Pincel), configure ponta redonda, tamanho para 2 px e a cor para #4a4a49

Em seguida, retorne para a ferramenta Pen Tool, e clique com o botão direito do mouse sobre o retângulo selecionando a opção Stroke Path (Traçar demarcador)

Feita a estrutura do aparelho, agora iremos criar os botões.
Com o mesmo procedimento utilizado acima para criar os retângulos, vamos agora criar um pequeno retângulo, com a rounded retangle tool, mas dessa vez com o radius em 3px.
Crie uma nova camada, faça o traçado do retângulo e em seguida, configure a ponta do pincel(Brush) para

a cor para #353434, e acione a ferramenta Pen Tool, ápós isso, com o mouse botão direito, acione o Stroke path.
E confirme ok. Assim teremos um retângulo como mostrado abaixo. Não esqueça de nomear essa camada, eu nomeei como “Botão”

Acione a ferramenta Magic Wand Tool (Varinha mágica) , e dê um clique dentro do botão, para selecionarmos a parte interna dele.
Quando visualizar o pontilhado, ative a ferramenta Brush Tool (b) (Pincel), e com a cor #707070, e ponta de pincel com hardness 0, opacidade 50% e fluxo 50%.

Pinte a parte inferior do botão.

Agora duplique essa camada e passe a cópia para o outro lado.
Crie agora com o mesmo procedimento porém com a ferramenta Elipse Tool, um círculo, na parte central, entre os dois botões, faça-o em uma nova camada nomeando como botao central.
Faça o mesmo que fizemos anteriormente, criando o traçado, e após isso, selecione a parte interna e pinte-a.

Utilizando o mesmo procedimento, com a ferramenta rouded retangle tool, crie agora um botão menor. Faça-o em uma nova camada

Duplique o novo botao várias vezes, e distribua-os pelo painel.
Se necessário, reduza-os para que encaixem com harmonia.
Feita a redução e distribuíção, ficaremos com o painel dessa forma.

Agora processo é simples, com a ferramenta texto, preencha os botões, finalizando as teclas. Regule a opacidade das camadas dos numeros para que não fiquem muito gritantes.

Em seguida, iremos criar alguns ícones, para representas algumas funções eu criei um para musicas, outro para mensagens e outros para as teclas de acesso.
Então utilizando a ferramenta Custom Shape Tool , com as configurações seguintes, escolhendo a forma adequada, preencha os botões.

Feita a colocação dos ícones, ficaremos com o teclado da seguinte forma, já com o celular pronto.

Bom pessoal, está pronto o celular.
Quaisquer dúvidas, estou a disposição.
Até a próxima.

Tutorial Photoshop CS3 – Colorização de olhos

Atendendo a pedidos irei apresentar 2 técnicas para coloração de olhos. Com essas técnicas você poderá colorir olhos em imagens preto e branco, e também alterar a coloração de olhos.

Olá pessoal, a pedidos irei apresentar 2 técnicas para coloração de olhos. Com essas técnicas você poderá colorir olhos em imagens preto e branco, e também alterar a coloração de olhos. Vamos à elas então. Utilizaremos a imagem abaixo para o processo de colorização. 1º Processo: O primeiro processo de colorização é mais conhecido, é baseado no ajuste de matiz e saturação, e apesar de mais conhecido não deixarei de explicá-lo. Nosso primeiro passo será criar uma camada de ajuste de matiz e saturação. A camada de ajuste, por possuir uma máscara e por ser uma camada independente, fica mais prática, pois poderemos aplicar mudanças sempre que necessário, e sem prejudicar a imagem base. Portanto, clique na base do painel de camadas no ícone mostrado abaixo e selecione o ajuste de matiz e saturação (Hue & Saturation). Repare que ao criarmos a camada de ajuste, lá estará a máscara citada por mim anteriormente, essa máscara terá a cor branca. Pense nessa máscara como um “tapume”, algo que cobre alguma coisa. Quando branca, voce verá o que está por trás dela, quando preta, não verá, e com o pincel do photoshop(e algumas outras ferramentas), voce pode pintar algumas partes e essas partes pintadas, dependendo da cor (branca ou preta) farão com que voce veja o que está por trás da parte pintada, ou não veja. Parece meio complicado para que não conheçe, mas você verá que na prática e bem simples. Ao mesmo tempo que criamos a camada de ajuste, se abrirá na área de trabalho do photoshop, a caixa de matiz e saturação. Nela podemos observar algumas caracteríticas. Chave de regulagem de Matiz: Altera a base da cor utilizada. Chave de regulagem de Saturação: Altera a força da aplicação da cor. Chave de regulagem de Luminosidade: Altera a luminosidade da cor. Opção de cor sólida: Se marcada, modifica o forma de regulagem para uma só cor sólida, que tomará toda a extensão da imagem / Se não marcada, mantém a forma original de regulagem, utilizando todas as cores originais da imagem. Opção de visualização: marcando e desmarcando, podemos ver as mudanças ocorridas. Feita essa apresentação, vamos aplicar mudanças. Configure como na imagem abaixo. Agora, vá ao painel de camadas e com o mouse, clique em cima da máscara, e em seguida tecle Control + I, assim inverteremos a cor da máscara, de branco para preto, e como explicado anteriormente, a máscara preta, esconderá o efeito. Agora é simples, selecione a ferramenta Brush Tool (Pincel), e escolha a ponta de pincel do mesmo tamanho da íris do olho. Selecione a cor branca para primeiro plano, e clique com a ferramenta exatamente em cima da íris. Repare que a máscara ficará com uma bola branca exatamente no local onde clicamos com o pincel. E esse ponto da máscara que agora é branco, passa a “desmascarar” o efeito, fazendo com que ele apareça na imagem, esverdeando o olho. Agora voce deverá estar entendendo o que expliquei no inicio do artigo sobre as máscaras. Pois por trás da parte branca da máscara, você pode ver o efeito aplicado. Ao clicarmos com a ponta do pincel redonda, obviamente teremos um excesso de cor extrapolando os limites da íris. Então, vamos removê-lo, modificando a cor da ponta do pincel para preto, e pintando essa parte não desejada. Com eu disse no inicio do artigo, a camada de ajuste, permite que alteremos o resultado do efeito a qualquer momento, mantendo a imagem base intacta. Para fazermos essa alteração, é simples, dê dois cliques em cima do ícone ao lado da camada, e a caixa de matiz e saturação se abrirá novamente para uma nova edição. Com a caixa aberta, faça suas mudanças, editando as cores, utilize também a opção Colorize, para ver a mudança nas alterações. 2º Processo: O segundo processo de colorização utiliza outro tipo de ajuste fino, o Color Balance, nele teremos capacidade de fazer edições mais avançadas, obtendo resultados mais satisfatórios. No color balance, nós podemos editar diretamente as cores localizadas nos realces, tons médios e sombras da imagem. Então vamos a ela, antes de mais nada, oculte ou exclua a camada de matiz e saturação. O processo para “chamarmos” o efeito é o mesmo, através de camada de ajuste, então, localize-se pela imagem abaixo, e selecione a opção mostrada. Feita essa parte, perceba que teremos uma nova caixa de edição na área de trabalho do photoshop. A caixa de balanceamento de cores (Color Balance) Essa ferramenta de ajuste, funciona como o nome já diz, balanceando as cores, ou seja, repare que temos cores opostas. Cyan(Ciano) – Red(Vermelho) Magenta – Green (Verde) Yellow(Amarelo) – Blue (Azul) Pense que ao movermos a chave para a cor red, iremos remover o Cyan. E vice versa. Ao movermos a chave para a cor Green, estaremos removendo todas as informações da cor magenta da imagem. E vice versa. E ao movermos a chave para a cor Blue, estaremos removendo as informações que compõem a cor yellow. E vice versa. E esse processo todo vale para as sombras, tons médios e realçes da imagem. Então vamos exemplificar. Configure os tons médios, realces e sombras como abaixo, e veja como avermelharemos a imagem. E agora que temos a imagem toda vermelha, clique com o mouse em cima da máscara, e em seguida tecle Control + I, assim inverteremos a cor da mesma, mascarando o efeito. Agora selecione a ferramenta Brush Tool (Pincel), e faça o mesmo procedimento do primeiro processo, escolha um tamanho semelhante ao da íris, diminua a suavidade da ponta do pincel, selecione a cor branca para primeiro plano, e clique em cima da íris. Dessa forma teremos o efeito se desmascarando. Agora, vamos remover o excesso, modificando a cor da ponta do pincel para preto. E apagando a parte que extrapolou. Faça agora seus testes, variando as cores nos 3 tons, os medios, os realces e as sombras. E alcançe as misturas de cores mais exóticas possíveis. Abaixo, alguns exemplos que podem ser alcançados. Bom gente, então ficamos por aqui, e até o próximo artigo.

Tutorial Photoshop CS3: Textura Jeans

Hoje veremos mais um tipo de textura que podemos criar no photoshop, criaremos a textura de Jeans.

Olá internautas ! Hoje veremos mais um tipo de textura que podemos criar no photoshop. Criaremos a textura de Jeans. Vamos a ela.Inicialmente, abra um documento tamanho 9000 x 1500 px. e 150 ppi de resolução Preencha tal documento com a cor #30457c. Agora, crie uma nova camada pressionando as teclas shift + control + n. Em seguida, acione o menu edit(editar) > fill(preencher) Selecione a opção 50% Gray (50% cinza), e confirme ok. Feita essa parte, pressione “d” em seu teclado, para que as cores de primeiro plano e plano de fundo se tornem as padrões do programa. Preta e branca Iremos aplicar um filtro, e esse filtro utilizará as cores de primeiro plano e fundo para a criação do efeito, por esse motivo, devemos escolher as cores padrão. Feito isso, vamos acionar o primeiro filtro. Menu Filter > Sketch > Halftone Pattern, e configure como mostrado abaixo. Assim teremos uma superfície listrada. Agora vamos a outro filtro, na mesma camada, acione o menu Filter > Pixelate > Mezzotint, e escolha a opção Fine Dots. Passe essa camada para o modo de mesclagem Soft Light (Luz Suave), e duplique-a. Teclando Control + J Clique na camada duplicada e tecle Control + T, dessa forma teremos a caixa de transformação em torno da camada. Agora, configure a barra de propriedades como mostrado abaixo. Aumentando em 190 % suas dimensões e rotacionando 45° a camada. Passe essa camada para o modo Multiply (Multiplicação) e aplique o filtro Gaussian Blur-Filter> Blur> Gaussian Blur, configurando para raio de 1 pixel. Reduza a opacidade dessa mesma camada para 70%. Ficando a textura como mostrada abaixo. Agora, com a ferramenta Laso tool (L), crie uma seleção no local mostrado abaixo. E crie uma nova camada Shift + Control + N. Feita a seleção, tecle Control + Backspace e preencha a seleção com 50% Gray (Cinza). Passe essa camada para o modo Hard Light. Clique com o botão direito do mouse sobre essa camada e acione a opção Blending options (opções de mesclagem) Ao se abrir a caixa de Blending, configure os dois efeitos como mostrado abaixo: Drop Shadow (Sombra projetada): Bevel & Emboss (Chanfro e Entalhe): Feito o processo de aplicação de efeitos, teremos a imagem da seguinte forma: E a textura com zoom em 100% como abaixo: Agora, poderemos criar uma linha de costura para o tecido. Crie agora uma nova camada, e acione a ferramenta Brush Tool, selecione a ponta de pincel redonda de 19 pixels e configure as opções como mostradas abaixo. Em seguida, acione a ferramenta Pen Tool(Caneta), e com a barra de propriedades configurada como abaixo, crie um traçado na vertical, por toda a extensão do tecido. Após isso, com o botão direito do mouse, selecione a opção Stroke Path(Traçar demarcador), e confirme ok, marcando a opção simulate pressure. Dessa forma teremos a costura feita. Agora, clique com o botão direito do mouse em cima da camada da costura e acesse Blending options, e configure os dois efeitos aplicados como mostrado abaixo. Reduza a opacidade da camada da costura para 75% e agora teremos a imagem dessa forma: E com zoom em 100% para visualizarmos a textura. Agora que você já sabe como criar a costura e o sobreado, vamos um pouco além de somente a textura. Vamos criar bolsos para esse tecido, simulando assim a lateral de uma calça jeans. Em uma nova camada, crie uma seleção no formato de um bolso, e preencha com 50% Cinza. Passe essa mesma camada para o modo Hard Lighte com o botão direito do mouse em cima da camada, acione Blending options (Opções de mesclagem) Marque o efeito Inner Shadow como mostrado abaixo. Assim, alcançaremos o efeito abaixo. Agora, utilizando o mesmo procedimento anterior para a criação da costura, faça a costura como mostrada abaixo. Lembrando que será necessário somente alerar a posição da ponta do pincel. Agora, com a pen tool, faça o traçado e aplique o stroke para criar a costura. Repita o efeito aplicado sobre ela nos passos anteriores Temos feito o nosso primeiro bolso, agora vá criando de acordo com sua imaginação, novos bolsos pela calça. E finalmente o resultado final. E é isso pessoal, finalizamos aqui nosso artigo. Até a próxima!

Tutorial Adobe Photoshop – Aumentando lábios

Olá pessoal, hoje trarei para vocês, à pedidos, um artigo sobre aumento de lábios. omo podemos fazer para destacar e aumentar os lábios de modelos em fotografias?

Olá pessoal, hoje trarei para vocês, à pedidos, um artigo sobre aumento de lábios. Como podemos fazer para destacar e aumentar os lábios de modelos em fotografias ? Tenho certeza que gostarão. Antes de iniciarmos, gostaria de explicar como se destaca o tamanho dos lábios de uma pessoa, gráficamente falando. E em seguida, aplicaremos na prática Obviamente, a boca se constitui de 2 lábios, o inferior e o superior. Porém, o relevo aparente nesses dois lábios se faz de forma diferenciada. Como assim? Bom, o lábio inferior, possui a luz natural do espaço projetada sobre ele, como essa luz se origina de cima, a mesma se projetará na parte superior do lábio inferior. Essa projeção de luz no labio inferior, causará uma sombra, logo abaixo dele. E a intensidade dessa sombra, será o indicador do tamanho do lábio inferior. Já o lábio superior, receberá a luz projetada em sua parte superior, causando uma iluminação nesse ponto, o que indicará, seu tamanho. Então, basicamente a luz e a sombra sobre os lábios, serão os indicadores do tamanho deles. Também iremos trabalhar a grossura dos lábios, e esse será feito a partir do filtro liquify. Então vamos parar de teorias e partir para a prática. Usaremos a seguinte imagem.Vamos então começar dando grossura ao lábio inferiores. Vamos fazê-lo como dito anteriormente a partir do filtro liquify. Portanto, vamos duplicar a camada base, para termos a original intacta como referência. Tecle Control + J em seu teclado, e repare que duplicaremos a camada com a imagem base. Nomeie essa nova camada como “edição” Agora, sim, vamos começar o trabalho. Acione o menu Filter(Filtro)> Liquify(Dissolver) Nesse filtro, teremos algumas ferramentas de edição, porém, só utilizarmos duas no momento. A ferramenta Zoom e a ferramenta Bloat Tool, a zoom, será utiizada para aproximarmos a boca, e a bloat tool, será utilizada para darmos grossura aos lábios. Portanto, selecione a ferramenta zoom, e com o cursor do mouse circule a boca. Dessa forma aproximaremos a mesma, caso não funcione, simplesmente vá clicando em cima da boca para aproximá-la. Agora que temos uma boa visualização, selecione a ferramenta bloat tool, e dê rápidos cliques com mouse nos pontos indicados acima. Utilize as seguinte configurações para o uso da ferramenta. Faça o procedimento com coerência, para não extrapolar e inchar demais os lábios. Confirme ok, e repita o procedimento. Agora, vamos para a parte de iluminação e sombreamento. Faremos a partir de traçados, criados com a ferramenta pen tool (caneta). Então vamos acionar a ferramenta caneta (p), e configure como abaixo. Agora temos que configurar a ponta da caneta. Com ela, iremos configurar a cor que queremos e o tipo de ponta, se sólida ou difusa. Então, vamos acionar a brush tool (b) o painel de brushes (f5), e configurar como abaixo. Escolha a cor #faf6f1, para primeiro plano. E em seguida sete as seguintes configurações: Agora sim, crie uma nova camada, nomeie-a como realce, e retornando a ferramenta caneta (p) com aquelas configurações que marcamos acima, e faça um traçado como abaixo. Em seguida, clique com o botão direito do mouse e escolha a opção Stroke path (Traçar demarcador), e ao se abrir a caixa de traçado, marque como abaixo e confirme ok. Teremos então o seguinte traçado: Tecle delete e removeremos o demarcador, e manteremos somente o traçado. Agora apicaremos um filtro de desfoque. Então siga para o menu Filter(filtro)>Blur(Desfoque)> Gaussian Blur(Desfoque gaussiano), e aplique 2 pixels de radius. Em seguida, selecione a ferramenta borracha (e), e com as configurações abaixo, apague as laterais do traçado de realce. Agora, reduza a opacidade da camada para 50%. Pronto, a parte superior está pronta, agora vamos a parte inferior que será o que dará o grande destaque ao aumento dos lábios. O processo será muito parecido com o da criação do realce, porém, nesse caso, iremos utilizar uma cor mais escura, pois não mais obteremos um efeito de realce, e sim de sombreado. Vamos então a esse processo. Crie uma nova camada, e nomeie-a como sombreado. Agora, tecle i, para acionarmos o capturador de cores, ao acioná-lo, clique em cima do local indicado abaixo. Porque capturamos essa cor ? Porque é a cor predominante na sombra já existente no rosto da modelo. Feita a captura, iremos agora utilizar essa cor para criarmos a sombra abaixo do lábio inferior da boca. Então, vamos ao processo de configuração, selecione a ferramenta caneta (p), e marque as opções como abaixo. Feito isso, agora selecione a ferramenta pincel (p), e configure como abaixo. E na sequência faça o traçado como mostrado. Em seguida, vamos aplicar o traçado. Portanto, clique com o botão direito do mouse e escolha Stroke path (traçar demarcador). Após isso, teremos a seguinte imagem. Agora, vamos desfocar o efeito, acione o menu Filter(filtro)>Blur(Desfoque)> Gaussian Blur(Desfoque gaussiano), e aplique 5 pixels de radius. Agora, selecione a ferramenta borracha (e), e com as configurações abaixo, apague as laterais do traçado de sombreado. Então, reduza a opacidade para 80% e teremos o sombreado da seguinte forma. Agora estamos na fase final, vamos dar um realce a parte central do lábio inferior. Crie uma nova camada, nomeie-a como realce lábio e vamos retornar ao processo de criação de traçado, utilizando as mesmas configurações do traçado que acabamos de fazer, acionando a ferramenta caneta (p), crie um traçado no local indicado abaixo. Em seguida, com a cor branca selecionada, aplique o traçado utilizando o atalho do botão direito do mouse Stroke path(traçar demarcador). Passe agora o blend essa camada para o modo Soft Light (Luz suave) e reduza sua opacidade para 65%. E com a ferramenta borracha, com as configurações abaixo, vá apagando as laterais e algum excesso que possa sair pra fora dos limites do lábio. Dessa forma, deveremos alcançar algo como mostrado abaixo. E pronto, vamos agora ver a diferença entre as duas imagens. Antes: Depois: Bom pessoal, espero que tenham compreendido o processo de realces e sombreamentos para indicar volumes. Esse mesmo tipo de processo, pode ser utilizado para aumento de músculos e semelhantes e até mesmo de rugas, que apresentam o mesmo contexto de visualização, por terem curvas e profundidades. Então é isso, continuem acompanhando nosso portal e até a próxima !

Tutorial Adobe Photoshop – Aumentando lábios

Olá pessoal, hoje trarei para vocês, à pedidos, um artigo sobre aumento de lábios. omo podemos fazer para destacar e aumentar os lábios de modelos em fotografias?

Publicado em: 03/12/2009

Compartilhe

Olá pessoal, hoje trarei para vocês, à pedidos, um artigo sobre aumento de lábios. Como podemos fazer para destacar e aumentar os lábios de modelos em fotografias ? Tenho certeza que gostarão. Antes de iniciarmos, gostaria de explicar como se destaca o tamanho dos lábios de uma pessoa, gráficamente falando. E em seguida, aplicaremos na prática Obviamente, a boca se constitui de 2 lábios, o inferior e o superior. Porém, o relevo aparente nesses dois lábios se faz de forma diferenciada. Como assim? Bom, o lábio inferior, possui a luz natural do espaço projetada sobre ele, como essa luz se origina de cima, a mesma se projetará na parte superior do lábio inferior. Essa projeção de luz no labio inferior, causará uma sombra, logo abaixo dele. E a intensidade dessa sombra, será o indicador do tamanho do lábio inferior. Já o lábio superior, receberá a luz projetada em sua parte superior, causando uma iluminação nesse ponto, o que indicará, seu tamanho. Então, basicamente a luz e a sombra sobre os lábios, serão os indicadores do tamanho deles. Também iremos trabalhar a grossura dos lábios, e esse será feito a partir do filtro liquify. Então vamos parar de teorias e partir para a prática. Usaremos a seguinte imagem.Vamos então começar dando grossura ao lábio inferiores. Vamos fazê-lo como dito anteriormente a partir do filtro liquify. Portanto, vamos duplicar a camada base, para termos a original intacta como referência. Tecle Control + J em seu teclado, e repare que duplicaremos a camada com a imagem base. Nomeie essa nova camada como “edição” Agora, sim, vamos começar o trabalho. Acione o menu Filter(Filtro)> Liquify(Dissolver)Nesse filtro, teremos algumas ferramentas de edição, porém, só utilizarmos duas no momento. A ferramenta Zoom e a ferramenta Bloat Tool, a zoom, será utiizada para aproximarmos a boca, e a bloat tool, será utilizada para darmos grossura aos lábios. Portanto, selecione a ferramenta zoom, e com o cursor do mouse circule a boca. Dessa forma aproximaremos a mesma, caso não funcione, simplesmente vá clicando em cima da boca para aproximá-la. Agora que temos uma boa visualização, selecione a ferramenta bloat tool, e dê rápidos cliques com mouse nos pontos indicados acima. Utilize as seguinte configurações para o uso da ferramenta. Faça o procedimento com coerência, para não extrapolar e inchar demais os lábios. Confirme ok, e repita o procedimento. Agora, vamos para a parte de iluminação e sombreamento. Faremos a partir de traçados, criados com a ferramenta pen tool (caneta). Então vamos acionar a ferramenta caneta (p), e configure como abaixo. Agora temos que configurar a ponta da caneta. Com ela, iremos configurar a cor que queremos e o tipo de ponta, se sólida ou difusa. Então, vamos acionar a brush tool (b) o painel de brushes (f5), e configurar como abaixo. Escolha a cor #faf6f1, para primeiro plano. E em seguida sete as seguintes configurações: Agora sim, crie uma nova camada, nomeie-a como realce, e retornando a ferramenta caneta (p) com aquelas configurações que marcamos acima, e faça um traçado como abaixo. Em seguida, clique com o botão direito do mouse e escolha a opção Stroke path (Traçar demarcador), e ao se abrir a caixa de traçado, marque como abaixo e confirme ok. Teremos então o seguinte traçado: Tecle delete e removeremos o demarcador, e manteremos somente o traçado. Agora apicaremos um filtro de desfoque. Então siga para o menu Filter(filtro)>Blur(Desfoque)> Gaussian Blur(Desfoque gaussiano), e aplique 2 pixels de radius. Em seguida, selecione a ferramenta borracha (e), e com as configurações abaixo, apague as laterais do traçado de realce. Agora, reduza a opacidade da camada para 50%. Pronto, a parte superior está pronta, agora vamos a parte inferior que será o que dará o grande destaque ao aumento dos lábios. O processo será muito parecido com o da criação do realce, porém, nesse caso, iremos utilizar uma cor mais escura, pois não mais obteremos um efeito de realce, e sim de sombreado. Vamos então a esse processo. Crie uma nova camada, e nomeie-a como sombreado. Agora, tecle i, para acionarmos o capturador de cores, ao acioná-lo, clique em cima do local indicado abaixo. Porque capturamos essa cor ? Porque é a cor predominante na sombra já existente no rosto da modelo. Feita a captura, iremos agora utilizar essa cor para criarmos a sombra abaixo do lábio inferior da boca. Então, vamos ao processo de configuração, selecione a ferramenta caneta (p), e marque as opções como abaixo. Feito isso, agora selecione a ferramenta pincel (p), e configure como abaixo. E na sequência faça o traçado como mostrado. Em seguida, vamos aplicar o traçado. Portanto, clique com o botão direito do mouse e escolha Stroke path (traçar demarcador). Após isso, teremos a seguinte imagem. Agora, vamos desfocar o efeito, acione o menu Filter(filtro)>Blur(Desfoque)> Gaussian Blur(Desfoque gaussiano), e aplique 5 pixels de radius. Agora, selecione a ferramenta borracha (e), e com as configurações abaixo, apague as laterais do traçado de sombreado. Então, reduza a opacidade para 80% e teremos o sombreado da seguinte forma. Agora estamos na fase final, vamos dar um realce a parte central do lábio inferior. Crie uma nova camada, nomeie-a como realce lábio e vamos retornar ao processo de criação de traçado, utilizando as mesmas configurações do traçado que acabamos de fazer, acionando a ferramenta caneta (p), crie um traçado no local indicado abaixo. Em seguida, com a cor branca selecionada, aplique o traçado utilizando o atalho do botão direito do mouse Stroke path(traçar demarcador). Passe agora o blend essa camada para o modo Soft Light (Luz suave) e reduza sua opacidade para 65%. E com a ferramenta borracha, com as configurações abaixo, vá apagando as laterais e algum excesso que possa sair pra fora dos limites do lábio. Dessa forma, deveremos alcançar algo como mostrado abaixo. E pronto, vamos agora ver a diferença entre as duas imagens. Antes: Depois: Bom pessoal, espero que tenham compreendido o processo de realces e sombreamentos para indicar volumes. Esse mesmo tipo de processo, pode ser utilizado para aumento de músculos e semelhantes e até mesmo de rugas, que apresentam o mesmo contexto de visualização, por terem curvas e profundidades. Então é isso, continuem acompanhando nosso portal e até a próxima !

Foto Efeitos: Pêra com Laranja

Olá Neste tutorial aprenderemos as técnicas para a criar uma montagem simples
mas interessante.

 

 

Técnicas principal Neste Tutorial
Clipping Mask

 

Primeiro abra a seguinte imagem

 

 

desbloquei a camada da fatia de laranja

 

 

no próximo passo você seleciona a ferramenta Borracha e
apaga a casca externa da fatia de laranja

 

veja a imagem abaixo

 

 

Abra a outra imagem

 

 

Selecione a ferramenta Pen Tool marque
a opção shape Layers ,
selecione o fore ground coma cor braca e crie uma forma como mostra a animação
abaixo

 

 

 

 

Selecione a imagem da laranja e passe para a imagem da pera. posicione a camada
da laranja sobre a camada da shape.

 

 

agaora vamos aplicar um dos recursos mais interesantes do photoshop a clipping
mask

 

selecione a camada da fatia de laranja e a parte Ctrl + Alt + G

 

será aplicada a clipping mask

 

 

teremos o seguinte

 

 

Nos próximos passos repita os últimos processos para aplicar a textura de
laranja na outra parte da pera.

 

Criando a máscara com a pen tool

 

 

aplicando a clipping mask

 

 

para dar mais realidade colete a borda da fatia de laranja e aplique na borda
da pera

 

veja o exemplo

 

 

Duplique a camada da laranja ( Ctrl + J) e gire um com a free tranformation(Ctrl
+T) até alinha a borda da fatia de laranja com a borda da pera

 

 

De um clipping mask na camada duplicada para melhor visualização da borda

 

 

Selecione a ferramenta borrcha e apague o excesso de borda

 

teremos o seguintes

 

 

agora é só repetir na outra parte da imagem.

 

utilize a mesma borda que utilizamos

 

 

Bem e chega ao fim este tutoriail até mais.

Efeito de Beleza Sintética

Tutorial ensinando o Efeito de Beleza Sintética

O tutorial a seguir baseia-se em um filtro pouco explorado no Photoshop. Após aplicarmos esse filtro, serão necessários vários ajustes para que a imagem fique com uma aparência legal. Então se você ainda não está familiarizado com os recursos de máscara de camada e camadas de ajuste, já é hora de colocar as mãos na massa para aprender.

Eu considero as técnicas de ajustes e retoques importantíssimas, pois são elas que dão aquele toque a mais na imagem. Esta será nossa imagem inicial:

1) Abra sua imagem no Photoshop. Após abrir a imagem, duplique a camada onde ela está, pra isso clique com botão direito do mouse sobre a camada e escolha Duplicar camada, na janela que abrir apenas clique em OK. Vá até o menu Filtro/Ruído/Mediana, coloque 5 e dê OK.

2)  Clique no botão de máscara de camada na paleta de camadas  (layers). Aparecerá um quadrado branco ao lado do ícone da camada, essa é sua máscara. Agora você deverá pegar a ferramenta pincel (brush) , cor preta, escolha opaticidade 50% na barra de opções (ou tecle 5 no teclado), vá passando em partes da imagem usando um pincel (brush) de 10px do tipo círculo suave (soft round).

Confira abaixo como sua máscara deve ficar. Basicamente você deverá passar sobre os olhos, contorno da boca, linha do queixo, algumas partes do cabelo e nos traços do nariz.

Dica: Segure ALT no teclado e clique sobre a máscara para vê-la. Clique novamente segurando ALT pra voltar ao normal.

Após o Filtro Mediana

Como deve ficar sua máscara

Resultado após a máscara

3)  Agora adicione uma camada de ajuste Matiz/Saturação, para isso clique neste botão na paleta de camadas e escolha a opção Matiz/Saturação. Clique na caixa de seleção “Colorir” e coloque os valores: 160, 25, 0, nesta sequência.

Agora clique na máscara que aparece junto á camada de ajuste e pinte o interior dos olhos de preto. Isso serve pra não aplicar o ajuste da camada aos olhos. Agora coloque esta camada no modo “Divisão” (Screen) e duplique esta camada mas coloque-a no modo “Normal”.

Após a primeira camada de Matiz/Saturação no modo” Divisão”

Como deve ficar sua máscara

Após a segunda camada de Matiz/Saturação no modo “Normal”

4) Adicione mais uma camada de ajuste Matiz/Saturação, desta vez marque a opção “Colorir” e coloque os valores 160, 50, 0 e clique em OK. Clique na máscara desta camada e aperte “Ctrl+I”. Isto inverterá a cor da máscara, agora você deve pegar o pincel com 100% de opaticidade e com a cor branca passe na parte interna dos olhos evitando o branco dos olhos.

5) Adicione uma camada de ajuste de Níveis e coloque os valores 0 | 1,00 | 98 e dê OK. Clique na máscara desta camada e aperte “Ctrl+I” e faça como antes, pinte de branco a área interna dos olhos. Isso fará com que os olhos fiquem mais claros.

Abaixo você pode ver como deve ser estas duas máscaras:

6) Ok, agora a garota já está com um visual diferente. Mas ainda não acabou. Adicione uma nova camada clicando nesse botão na paleta de camadas. Vá ao menu Editar/Preencher ou aperte “Shift+Backspace”. Escolha 50% Cinza e dê OK.

Coloque esta camada no modo “Sobrepor”. Ela irá sumir. Agora com a Ferramenta Superexposição /30% de exposição você deverá passar nas partes que deseja escurecer e com a Ferramenta Subexposição com 20% de exposição deverá passar nas partes que deseja clarear. Você deverá usar essas duas ferramentas com a Escala  na opção Realces. Isso é bem parecido com maquiagem.

Uma escurecida ou clareada no lugar certo pode ficar lindo, mas se for aplicada no lugar errado pode ficar horrível. Dê uma olhada na minha camada cinza pra ver como eu fiz.

Se Preferir, oculte as camadas de Matiz/Saturação para ter uma visão melhor da pele. Para isso basta clicar no olho que fica na camada.

Como deve ficar sua camada cinza 50% (#808080)  no modo “Sobrepor” após uso das ferramentas Subexposição  e Super exposição.

Resultado com as camadas de Matiz/Saturação visíveis:

Resultado com as camadas de Matiz/Saturação ocultas:

7) Pra dar uma escurecida a mais vamos adicionar outra camada de ajuste de níveis com os valores 59 | 1,00 | 255. Nesta camada você pode até passar um pouco a ferramenta pincel com a cor preta sobre os dentes pra fazer com que eles apareçam mais.

A imagem está verde demais?

Então adicione uma outra camada de ajuste Matiz/Saturação, coloque a Saturação  em -100 e dê OK. Diminua a Opaticidade desta camada para 40% e na máscara desta camada passe um pouco o pincel com a cor preta/50% de opaticidade sobre os olhos e boca para manter a cor.

Opcionalmente para destacar mais as partes escuras da imagem e dar um contraste maior, você pode adicionar uma nova camada e preenchê-la completa mente com preto (Aperte “D” no teclado e depois ALT+DEL). Coloque esta camada no modo Luz Suave e diminua a Opacidade da camada para 19%.

Bem, se você seguiu o tutorial até aqui sua imagem deve estar parecida com a minha imagem abaixo. Se não conseguiu, continue praticando, ajuste são sempre meio complicados mas com prática você conseguirá ótimos resultados.

Dicas:

* Se você não quiser essa cor verde você pode mudar as configurações das camadas de Matiz/Saturação ou até mesmo ocultar todas elas, assim a garota ficará com suas cores naturais.

* Diminuindo a opacidade da camada onde foi aplicado o filtro Mediana você pode dar uma aparência menos sintética à imagem.

Até a próxima!

Clarear os Dentes

Tutorial de como clarear os dentes nas suas fotos

1º Abra sua imagem.

2º Utilizando a ferramenta Laço Poligonal (L)  com 2 px de difusão selecione os dentes. Para melhor seleção aumente o zoom para 250%. Caso tenha dúvidas neste passo, observe a imagem abaixo onde a seta vermelha indica a ferramenta laço poligonal e a seta azul indica a difusão:

3º – Após a seleção estar completa. Pressione CTRL+U para entrar em Matiz/Saturação. Ou vá em Imagem > Ajustes > Matiz / Saturação e configure assim:
Editar: amarelo
Matiz: 0
Saturação: 0
Luminosidade: +100

4º  Lembre-se de deixar a caixa EDITAR em amarelo e não marcar a caixa colorir.

5º Dê o OK e pronto… Adeus aos dentes amarelados !

Antes:

Depois:

Até a próxima!!!