Usando o Filtro Lens Flare no Photoshop

Dando seqüência nas postagens em vídeo, uma boa dica de Photoshop.

Imagem em tons de cinza com detalhes coloridos no Photoshop CC - Com Avanzi

Estarei postando aqui uma série de vídeos que venho fazendo para o CTG Salesiano, onde sou coordenador e professor, sobre Photoshop e Illustrator. Espero que seja útil para todos!
Esta é um tutorial de Photoshop, sobre como fazer detalhes coloridos em uma imagem em tons de cinza.

Vamos beber na fonte de Duchamp

O dadaísmo foi um movimento anti movimento. Se contrapunha a tudo o que se fez e afirmava que nada deveria ser definido, estandardizado, que os manifestos eram inválidos (apesar de terem feito uma boa quantidade deles, principalmente o seu maior mentor, Tristan Tzara), e que a beleza estava morta. Até o próprio nome do movimento foi motivo de celeuma, segundo os dadaístas não havia intenção específica para o nome e cada um poderia atribuir a razão que bem entendesse. O próprio Tzara listou uma série de justificativas absurdas para o nome do movimento. O conceito da arte dadaísta então é ir contra tudo o que se havia feito em termos de arte, era a arte se dando o direito de abolir a lógica em sua criação, subverter todos os valores e não por se mostrar subversiva, mas por afirmar que nada deveria ser estigmatizado. Na sua busca por linguagens alternativas os dadaístas usavam materiais inusitados para obras de arte, tal como lixo, sucata, recortes de jornais (segundo Tzara poderia se fazer um poema dadaísta com recortes aleatórios de artigos de jornal) e mais uma sorte de materiais que viessem a cabeça do criador, que não poderia se prender a nada e nenhum conceito que o limitasse.

Marcel Duchamp, A Fonte - 1917

Neste modo de fazer arte Marcel Duchamp ficou bastante conhecido e até hoje suas obras causam impacto. Um professor de música (meu amigo Levi Guedes), me disse certa vez que a humanidade nunca está preparada para a música que se faz na atualidade, hoje em dia ouve-se Bach, Beethovem, Brahms e outros eruditos como se fossem atuais e a grande maioria, não tem capacidade de ouvir ainda Bartók, Cage, Kachaturian ou Shoemberg, entre outros e veja bem que todos citados acima já estão mortos, mas parecem ainda hoje muito “revolucionários”. Vejo isto acontecendo com frequência nas artes plásticas, Duchamp já tem quase 100 anos de mostra da peça “A fonte” e ainda hoje causa espanto e choca as pessoas que tentam apreciar arte com o botão do preconceito ligado. Isto é a essência Dada. Desligue o botão do preconceito, aprecie a obra pelo que ela é e não pela sua capacidade pessoal de associar à obra outras coisas e ideias. A fonte propõe um mictório como uma obra de arte e para escandalizar de vez usa um nome que não parece condizer com o que vemos. É atribuído a Duchamp – e com propriedade – a criação do que hoje é conhecido como “Ready Made”, objetos prontos são automaticamente promovidos a obras de arte, sem que tenham que passar por alterações ou acabamentos. A fonte é o exemplo mais clássico disso. Apenas pegou um mictório e promoveu-o a obra de arte. Alguns bizarros chegam a argumentar que o mictório tem formas curvas e portanto lembra uma forma feminina e o ato de urinar em uma forma feminina teria uma explicação conceitual e psicológica embutida. Acho isso mais bizarro que a própria obra, mas involuntariamente alimenta a vontade dadaísta de criar polêmica. Quanto mais inusitado e cheio de duplos sentidos o objeto, mais impacto ele causa. Mais dadaísta ele se torna. Querer vestir de lógica e argumentos uma obra desta natureza é tentar aparecer mais que a obra, acho que é o mesmo que tentar coassinar com Duchamp sua obra mais marcante. Mas, como ele era dadaísta, talvez não se opusesse, acho que na verdade ele nem daria atenção a tal bobagem.

Ensaio de apresentação do semestre

Ensaio sem interrupção da apresentação de final de semestre. Representa uma pequena parte do que se estudou no semestre. Em breve mais postagens do resto do material que já tem condições de ser visto/ouvido.

Robert Schumann - Op 68 n. 3

Depois de 8 meses de Conservatório, com Levi Guedes alguns resultados.

Tem mais lá no Youtube.

www.youtube.com/user/avanzito

Projeto flash - parte 2

Olá a todos.

Desculpem-me o intervalo entre um post e outro, o tempo anda escasso...

Inicio pedindo para que alteremos um pequeno detalhe do post anterior, onde eu pedi para colocarem a camada de ações no modo guide layer, coloquem de volta para o modo normal, no AS3 existem problemas no funcionamento se for colocado assim, então a camada de ações deve ser uma camada comum, ok? não esqueçam de fazer isso logo no início pois se não for feito os códigos não funcionarão.

Este post é quase todo sobre os códigos, iremos deixar a navegação no nosso index funcionando, ou seja ao clicarmos nos botões iremos para o frame específico e criaremos a marcação para identificar em que frame estamos. a parte dos códigos é bem simples e eu vos fazer da seguinte maneira, colo aqui os códigos com os comentários para que vocês possam colar no frame específico e ler os comentários para entender. Agradeço ao Ricardo Teixeira pelos toques sobre o AS3.

Bem, no nosso arquivo, no frame 1 da camada "ações" (depois de ter transformado a camada ações em uma camada comum, desmarcando nas propriedades da camada a opção guide), cole o sequinte codigo:

var carregador:Loader = new Loader();

//criamos um objeto Loader para podermos carregar os arquivos para a timeline principal.

this.addChild(carregador);

//adicionamos o Loader à timeline.

carregador.x=10;

//posicionamos o loader na timeline. Esta posição pode ser alterada posteriormente.

carregador.y=10;

//note uma pequena mudança na sintaxe das posições x e y em relação ao AS2.

Note que está comentado, quando colar o código preste atenção se não vai ser alterada a quebra de linhas, isso poderá fazer não funcionar.

No frame 2 desta mesma camada de ações cole os códigos abaixo:

stop();

//paramos a timeline

/*

Aqui vemos uma mudança significativa do AS2 para o AS3. As ações não podem mais ser aplicadas diretamente aos objetos

apenas podem ser colocadas na timeline e para o controle da timeline criamos uma função que poderá funcionar com qualquer

um dos botões, comento abaixo os comandos para entendermos os detalhes

*/

function anda(evento:MouseEvent):void {// um função agora precisa fazer referência ao tipo de evento queremos manipular

//no caso da nossa função um evento de Mouse, ao ser clicado o mouse chamamos a função.

carregador.unload();

// descarregamos o que quer que esteja carregado no Loader

var botaoClicado:SimpleButton=SimpleButton(evento.target);

// aqui criamos uma variável para identificarmos quem está disparando o evento (chamando a função)

var nomeBotao:String=botaoClicado.name;

//e aqui lemos o nome de quem está chamando a função e criamos outra variável

switch (nomeBotao) {

//criamos um switch tendo como parametro o nome do botão que chama a função

//nos cases abaixo, dependendo do nome de quem chamou a função iremos para o frame especificado.

case "intro_btn" :

//caso o nome do botão clicado seja "intro_btn"

gotoAndStop("intro");

//vamos para o frame "intro"

break;

//o break é bastante importante para que o switch não continue sendo executado sem necessidade.

case "fotos_btn" :

gotoAndStop("fotos");

break;

case "videos_btn" :

gotoAndStop("videos");

break;

case "musicas_btn" :

gotoAndStop("musicas");

break;

case "contato_btn" :

gotoAndStop("contato");

break;

}

}

//aqui abaixo outra grande diferença do AS3, não existe mais onRelease.

//Temos que criar Listenners para os botões. Listenners são como vigilantes, eles disparam eventos conforme sejam ativados

//no caso abaixo, sempre que o botão for clicado (MouseEvent.CLICK) a função anda é disparada

//o botão que dispara a função é identificado pela função a ação é executada conforme o nome do botão.

intro_btn.addEventListener(MouseEvent.CLICK, anda);

fotos_btn.addEventListener(MouseEvent.CLICK, anda);

videos_btn.addEventListener(MouseEvent.CLICK, anda);

musicas_btn.addEventListener(MouseEvent.CLICK, anda);

contato_btn.addEventListener(MouseEvent.CLICK, anda);

Ao colar, muita atenção na quebra de linhas e leiam os comentários para entender como funciona e poder criar suas próprias variações.

Para a marcação é muito fácil, mas voce pode alterar conforme queira no seu layout.

Criei um retângulo da largura dos botões e na camada "marcação" que havíamos criado eu colei este retângulo logo abaixo do nome do botão que leva para o frame onde estamos, então se estamos no frame fotos o retangulo está abaixo do botão fotos e assim por diante. Veja as imagens abaixo:

Veja que conforme o frame o marcador fica na posição que permita ao navegante saber onde ele está.

Publique e veja se está funcionando corretamente.
Por hoje é bastante, Abraço a todos.

Projeto em Flash

Olá a todos.
Depois de um longo tempo sem postar nada no blog resolvi trabalhar um projeto mais longo, criar uma apresentação completa em flash usando AS3. Desde a criação da estrutura do arquivo até a criação dos códigos para comandar a timeline. Nesta apresentação iremos carregar imagens externas, textos externos, videos e música, e, numa pequena variação, criaremos uma pequena interação do flash com PHP para criar um formulário de contato por mail, para que a apresentação possa ser usada como um pequeno site e possa ser publicado na web. Claro que o projeto é meio longo, portanto os posts serão feitos aos poucos, iniciando com este primeiro onde iremos criar a estrutura do arquivo em Flash, portanto mãos à obra! Neste momento inicial não irei me preocupar absolutamente em nada com o layout, depois de criada a estrutura do documento irei fazer o meu layout e substituirei os desenhos básicos aqui criados por um layout trabalhado e aí cada um fará o seu layout, isto não vai interferir no funcionamento do documento.

Abra o Flash e crie um novo documento selecionando a opção de AS3, assim que o documento for criado vá até o menu MODIFY>>DOCUMENT e altere o formato para 650x500 pixels, conforme a figura 1.












pensando na estrutura da nossa timeline criaremos camadas para cada um dos conteúdos que serão trabalhados, e as seções na verdade serão arquivos de flash independentes que serão carregados para o filme principal (esse que criaremos hoje), para que o conteúdo não fique concentrado em um só arquivo que ficaria muito pesado e complicaria a edição, portanto esse arquivo que criaremos hoje será a base, nele os outros arquivos serão carregados assim que solicitados. Vamos às camadas conforme a figura 2.











Para criar novas camadas clique na na pequena página que aparece no canto esquerdo do painel TIMELINE. Começando pela camada "base", onde poderemos colocar alguma imagem ou desenho, apenas para layout, em seguida crie a camada "conteúdo", onde iremos carregar os conteúdos que necessitem de camadas, a camada "menu", onde colocaremos os botões para comandar a timeline, a camada "marcação" que usaremos para que o indivíduo que esteja vendo a apresentação ou o site saiba em que seção ele está. Em seguida a camada "labels", onde nomearemos os frames e finalmente a camada "ações" onde colocaremos todo o ActionScript, já que no AS3 não se coloca Script nos objetos e sim apenas na timeline. Por costume eu transformo a camada ações em um GUIDE LAYER (botão direito do mouse diretamente na camada e selecione a opção GUIDE), apenas para uma visualização diferente, isso não interfere no funcionamento.
Vamos agora fazer os frames ao longo da timeline e instanciá-los para que possamos chamá-los através de ActionScript.
Pois bem, vamos clicar no frame 2 da camada "ações" e pressionando a tecla SHIFT clicar no frame 2 da camada "base", assim toda a linha de frames ficará selecionada, em seguida vá ao menu INSERT>>TIMELINE>>KEYFRAME, conforme a figura 3, isso criará keyframes em todas as camadas (o atalho para este comando é F6).









Repita o procedimento para os frames 10, 20, 30 e 40. Para o frame 50 ao invés de criar KeyFrames criemos um frame comum. Com o frame 50 de todas as camadas selecionado vá ao menu INSERT>>TIMELINE>>FRAME (atalho: F5). A timeline deve ficar conforme a figura 4.









Feito isso vamos instanciar os frames da camada "labels" conforme o conteúdo que iremos exibir.
Clique no frame 2 da camada "labels" e no painel PROPERTIES digite no quadro NAME a palavra intro. Clique no frame 10 e no quadro NAME digite fotos. No frame 20 digite videos, no frame 30 digite musicas e no frame 40 digite contato, conforme a figura 5.














Bem, já trabalhamos o suficiente para salvar nosso arquivo. Vá ao menu FILE>>SAVE e vamos criar uma pasta com o nome Projeto Flash e salvar o nosso arquivo dentro desta pasta com o sequinte nome: index.
Bem, como eu havia dito não me preocuparei com layout por enquanto, então usarei botões do próprio flash para este momento, vá ao menu WINDOW>>COMMON LIBRARIES>>BUTTONS, clique e escolha os botões para fazer mos o menu, eu usarei os da pasta buttons bar, conforme a figura 6.

















Clique no frame 2 da camada "menu" e arraste o botão "bar blue" do painel LIBRARY - BUTTONS>FLA para stage. Clique no botão que você arrastou para o stage e no painel PROPERTIES, na opção INSTANCE NAME digite: intro_btn. Por favor preste muita atenção ao digitar o instance name de objetos no painel PROPERTIES, pois estes nomes serão usados no ActionScript e deverão estar EXATAMENTE iguais aos que você instancia no painel PROPERTIES. Veja na figura 7 o detalhe do botão clicado e no painel PROPERTIES o instance name intro_btn.
















O que faremos em seguida é fechar o painel LIBRARY - BUTTONS.FLA e abrir o nosso painel LIBRARY, indo ao menu WINDOW>>LIBRARY, deve haver apenas um botão, bar blue, vamos renomeá-lo no painel LIBRARY para intro, basta dar dois cliques SOBRE O NOME do botão dentro do painel LIBRARY e renomear (figura 8).























Pois bem, agora vamos dar uma pequena editada no botão, clique duas vezes SOBRE O BOTÃO no stage e digite intro na caixa de texto que fica na camada "text" conforme a figura 9.























Volte para a timeline principal clicando no botão scene 1 que fica no alto da área do stage. Pois bem, agora vamos duplicar este botão DENTRO DO PAINEL LIBRARY, clique com o botão direito do mouse SOBRE O BOTÃO NO PAINEL LIBRARY e escolha a opção DUPLICATE e ao abrir a caixa de diálogo digite fotos, conforme a figura 10.







Em seguida arraste este botão do painel LIBRARY para o stage, de um duplo clique SOBRE O BOTÃO no stage e digite Fotos, conforme fizemos com o anterior, veja a figura 11.
















Repita todo este procedimento para criar os botões: videos, musicas e contato, em seguida arraste estes novos botões para o stage, edite os nomes e posicione no stage, conforme a figura 12.














Instancie cada um deles no painel PROPERTIES com os seguintes nomes:
o botão fotos: fotos_btn
o botão videos: video_btn
o botão musicas: musicas_bnt
o botão contato: contato_btn.
Novamente devo frisar: muita atenção ao instanciar os botões no PAINEL PROPERTIES, EXATAMENTE como pedido acima.
Aqui botei uma barra na camada base, uma barra igual a que existe dentro dos botões para que eles não aparecessem isolados. Note na timeline que a camada "base" tem conteudo, é a barra.
Para finalizar por hoje, clique com o botão direito do mouse no FRAME 1 da camada "menu" e selecione a opção CLEAR KEYFRAME. Isso fará com que o keyframe do frame 2 vá para o frame 1, depois selecione o frame 10, pressione a tecla SHIFT e clique no frame 40, toda a linha de frames ficará ativa, clique com o botão direito do mouse e selecione novamente a opção CLEAR KEYFRAME, esta camada ficará com apenas um Keyframe que é o frame 1. Repita o procedimento para a camada "base", conforme a figura 13.












Por hoje é o bastante, no próximo post criaremos as marcações e iniciaremos com os códigos para comandar a timeline. Então, até logo!

Patterns no Illustrator - Illustrator Patterns

Olá a todos!
Neste artigo vamos aprender a fazer um pattern no Illustrator. Um pattern é um desenho que pode ser aplicado como padrão de preenchimento de objetos vetoriais. Clique no título do post para baixar o arquivo do illustrator usado para este artigo.

Vamos começar com um bem simples: desenhe uma estrela dentro de um quadrado em seguida selecione o desenho e vá ao menu Edit>>Define Pattern, conforme a figura seguinte.

De um nome ao pattern, ele fica agora dentro do painel Swatches, basta clicar no objeto que você quiser aplicar e clicar no pattern no painel Swatches.

Agora o pulo do gato, vamos ver além de como criar o pattern, o que é necessário para que ele seja repetido de forma que não vejamos as emendas, já que o pattern é aplicado como um ladrilho, repetido lado a lado em toda a forma. Vamos fazer um desenho bem simples para que fique mais fácil entender o conceito. Primeiro passo: desenhar um retângulo que irá definir a área na qual o pattern será visível na aplicação.

Em seguida vamos desenhar formas bem simples para compor o desenho, retângulos e círculos, distribuindo de modo uniforme dentro do retângulo, mas com o seguinte detalhe: como o pattern é aplicado de forma repetida, lado a lado, vamos fazer os desenhos passando para fora do retangulo apenas do lado direito e do lado de baixo, isso porque para que a repetição fique contínua, as formas que passam para fora do retângulo do lado direito, serão continuadas do lado esquerdo na aplicação e as do lado de baixo serão continuadas no lado de cima. Veja as figuras abaixo.

Para criar o pattern definitivo, ou seja colocar as formas que passam dos lados do retângulo na posição correta no lado oposto é bastante simples, basta selecionar todo o desenho e duplicar no lado oposto, usando o retângulo maior como referência, simulando a aplicação feita pelo Illustrator. As formas que depois de duplicadas ficarem tocando na borda do retângulo grande não são deletadas, as que ficarem sem encostar podem ser deletadas.
Quase pronto, para concluir vamos fazer com que o nosso pattern tenha uma cor de fundo e além disso definir qual a área do pattern que deve ser utilizada na aplicação. Desenhe um retângulo um pouco maior do que o primeiro retângulo desenhado, aquele que determina o tamanho do pattern, coloque a cor de fundo que deseja para o seu pattern e retire o contorno. Em seguida passe este retângulo para baixo de todo o desenho, selecionando o retângulo e indo ao menu Object>>Arrange>>Send to back. conforme a figura seguinte:

Ele passa para trás de todo o desenho. E agora para definir a área "útil" do pattern, selecione o primeiro retângulo desenhado e deixe-o sem cor de contorno e sem cor de preenchimento, ou seja invisível e em seguida passe-o para trás de todo o desenho, selecionando o retângulo invisível e indo ao menu Object>>Arrange>>Send to back, conforme figura seguinte.

Este objeto, um retângulo sem cor de contorno nem preenchimento e colocado como o desenho que ocupa o nivel mais baixo de todo o grupo que será salvo como um pattern é que determina a área de corte do pattern. Tudo que estiver para fora deste retângulo não será exibido na aplicação do pattern, a repetição do pattern no objeto em que você aplicar será feita tendo as bordas deste retângulo como limite. Portanto não se esqueça de colocar este retângulo invisível para trás de todo o desenho antes de salvar o pattern. Selecione o desenho todo, vá ao menu Edit>>Define Pattern.

Aplique agora em um objeto vetorial qualquer e veja o resultado.

Ótimo, não? Então agora, dê asas à sua imaginação e faça os seus próprios patterns usando o conceito explicado. Abraços e até o próximo post.

Efeito de gotas no Photoshop - Photoshop Drops effect

Saudações a todos.
Neste tutorial vamos ver como criar um efeito de gotas de água sobre uma imagem usando recursos que não exijam domínio de técnicas de ilustração, ou seja, usando recursos do próprio photoshop.

 

Não nos tomará muito tempo e veremos que o resultado é muito interessante. Os recursos que usaremos serão os LAYER STYLES, a configuração dinâmica da ferramenta BRUSH e a aplicação do filtro DISPLACE. Usaremos o Photoshop CS3. Então, mãos à obra!

Vamos iniciar abrindo uma imagem que servirá de base, onde faremos as nossas gotas. Caso queiram utilizar a mesma imagem que eu usei, disponibilizo no seguinte endereço: www.avaz.org/agua/agua.jpg.
Aberta a imagem agua.jpg vamos configurar a ferramenta BRUSH de modo dinâmico, para desenhar a forma das gotas com pouco trabalho.
Selecione a ferramenta BRUSH e clique no menu WINDOW>>BRUSHES. Deverá aparecer um painel como na figura 1,

vamos configurá-lo nos itens que estão marcados. Este painel é um grande menu, então para que possamos ver as configurações de cada uma das opções que ficam à esquerda, devemos clicar sobre o nome e não apenas sobre o botão. Clique inicialmente na opção BRUSH TIP SHAPE, aqui definiremos a forma do pincel principal, selecione um pincel comum, redondo e estabeleça as medidas conforme a figura 2.

Nesta janela configuramos apenas o diâmetro máximo, a suavização da borda e o espaço entre as repetições da figura do pincel. Agora clique na segunda opção: SHAPE DYNAMICS, aqui vamos configurar o BRUSH para que sua forma seja aplicada usando valores aleatórios para tamanho, achatamento e ângulo, escolhidos entre um valor máximo e mínimo que determinamos.
Na figura 3 vemos a opção SIZE JITTER marcada em 100% isso significa que estamos determinando que o photoshop irá fazer o máximo de mistura entre os tamanhos máximo (o que escolhemos no menu anterior) e o mínimo que estabelecemos aqui na opção MINIMUM DIAMETER.

O mesmo para o ANGLE JITTER, marcado em 100% fará com que o photoshop gire as manchas para todas as direções possíveis. Finalmente neste menu configuramos os achatamentos das manchas no ROUNDNESS JITTER, aqui configurado para 81% e na opção MINIMUM ROUDNESS deixamos em 25%. Seguimos para a opção SCATTERING, conforme a figura 4,

onde controlamos o afastamento das manchas em relação a linha que desenhamos com o mouse. Aqui deixamos a opção SCATTER em apenas 30% para que as “pinceladas” não se afastem demais do traço do mouse e deixamos o both axes desmarcado para que o afastamento seja apenas para cima e para baixo e não para todas as direções. Na opção COUNT deixamos em 2, essa opção faz com que a quantidade de manchas seja aumentada, vamos com um valor baixo para ter maior controle do desenho. COUNT JITTER em 0% para que não sejam criadas áreas com maior concentração de manchas que outras. Passamos agora para a opção DUAL BRUSH, aqui é que faremos com que o photoshop mescle o desenho de dois pincéis, criando uma mancha bem orgânica, ótima para fazermos a nossa gotinha ou mesmo texturas bem interessantes. Marque a opção FLIP e escolha o seu pincel, neste caso escolhi um pincel da biblioteca padrão do photoshop com o nome de CHALK 11 PIXELS, dá um ótimo resultado se misturando com o nosso pincel principal. Marque as opções conforme a figura 5, nesta janela controlamos apenas as configurações do segundo pincel. Experimente mesclar com outros pincéis e teste seus resultados.

E finalmente apenas marcamos a opção SMOOTHING, para suavizar as bordas do pincel. Apesar de não termos utilizado todas as opções deste painel, devido ao resultado que estamos querendo obter, é bem interessante dar uma boa explorada nos recursos, principalmente se você usa TABLET, isso aumenta bastante as possibilidades de utilização da ferramenta BRUSH.
Bem, configurada a ferramenta BRUSH vamos criar no nosso arquivo uma camada nova e sem conteúdo. Clique no painel LAYER na opção NEW LAYER, o botãozinho em forma de página virando, ao lado da lixeira do painel LAYER, ou use o atalho: SHIFT+CONTROL+N (PC) SHIFT+COMMAND+N (MAC). Vamos nomear esta camada de GOTAS. com a ferramenta BRUSH ativa, faça uma mancha qualquer nesta camada que você acabou de criar, conforme a figura 6.

Nesta camada vamos configurar os LAYER STYLES para fazer com que essa camada apresente uma aparência de volume e transparência. Inicialmente, no próprio painel LAYER, coloque a opção FILL OPACITY em 0%. A camada irá ficar invisível, apenas os efeitos que aplicaremos em seguida ficarão visíveis, esta é a diferença entre o FILL e o OPACITY do painel LAYER, OPACITY afeta a opacidade da camada e dos efeitos, FILL afeta apenas a opacidade da camada, não interferindo nos efeitos.
Vamos ao menu LAYER>>LAYER STYLE>>BEVEL AND EMBOSS. Veja que agora nossa camada GOTAS já tem uma aparência de volume, que iremos ajustar para parecer um líquido, apenas usando nossos LAYER STYLES. Configure o painel conforme a figura 7.

Atenção a todos os detalhes, principalmente nas opções de SHADING, que é onde mudamos o estilo do BEVEL note que o BLEND MODE da opção SHADOWS foi mudado para HARD LIGHT e a cor usada foi o branco no lugar do preto, só isso já muda bastante o aspecto do BEVEL. Explore e faça as suas configurações. Em seguida, clique na opção DROP SHADOW e modifique as configurações conforme a figura 8.


 

A opacidade foi bem reduzida e a cor usada foi mudada para um tom de verde (predominante na imagem) e o BLEND MODE mudado para COLOR BURN, mas como já foi dito, explore suas possibilidades. Em seguida, clique na opção INNER SHADOW e configure conforme a figura 9.

 

 Por último, clique na opção SATIN e configure conforme a figura 10.

Antes de clicar em OK, clique em NEW STYLE para salvar o seu LAYER STYLE no painel STYLES, podendo posteriormente aplicar em outros arquivos. Já temos uma ótima aparência de gota. Experimente pintar mais áreas da mesma camada. Como o efeito está configurado para a camada, as novas áreas já assumem a aparência. É ótimo!
Depois de feito todo o desenho vamos usar o efeito DISPLACE para fazer a deformação das áreas da camada da folha que estão por trás das gotas, criando uma aparência de lente. A primeira coisa que iremos fazer é capturar como seleção as áreas visíveis da camada gotas, clique na miniatura da imagem da camada gotas pressionando a tecla CONTROL (PC) ou COMMAND (mac). As áreas com pixels aparecem selecionadas como na figura 11.

Vamos agora criar um canal ALPHA para gerar a malha de deformação do filtro DISPLACE. Clique no painel CHANNELS e em seguida no botão NEW CHANNEL, será criado um canal ALPHA todo em preto e ele estará em edição (figura12).


 
  

Vá ao menu  EDIT>>FILL, irá aparecer uma janela igual a da figura 13,

 

na opção contents selecione WHITE e clique em OK. Nosso ALPHA CHANNEL foi pintado de branco nas áreas selecionadas, conforme a figura 14.

Vá ao menu SELECT>>DESELECT para desativar a seleção. Vamos agora aplicar um desfoque neste canal para que, quando usarmos a imagem como malha do DISPLACE as bordas sejam suavizadas e tornem o efeito de lente mais acentuado nas áreas mais claras. Então, vamos ao menu FILTER>>BLURR>>GAUSSIAN BLURR, vamos colocar 10 pixels na opção RADIUS para causar um bom desfoque, como na figura 15.

Imagine que no efeito DISPLACE, as áreas mais claras deformam mais e as áreas escuras deformam menos. Temos agora que criar um PSD que conterá como camada o conteúdo deste  nosso ALPHA CHANNEL. Estando ainda com o ALPHA CHANNEL selecionado no painel CHANNELS, vá ao menu SELECT>>ALL e em seguida ao menu EDIT>>COPY e depois no menu FILE>>NEW, na opção PRESET, se não estiver marcado CLIPBOARD, marque e clique em OK, finalmente com o novo documento criado vamos ao menu EDIT>>PASTE. Teremos um arquivo de duas camadas, conforme a figura 16.

Vamos salvá-lo para poder usá-lo no filtro DISPLACE. Vá ao menu FILE>>SAVE e salve este documento que acabamos de criar no formato PSD. Em seguida podemos fechar este documento e voltar para o nosso arquivo com as gotas. No painel CHANNEL, clique na lâmina RGB, não no olhinho, mas no nome RGB, para que o documento volte para o modo normal de edição. Feito isso vamos ao painel LAYERS terminar nosso trabalho, agora falta pouco. No painel LAYERS temos duas camadas: BACKGROUND, com a imagem da folha e GOTAS com o nosso desenho, clique na camada BACKGROUND e vá ao menu LAYER>>NEW>>LAYER VIA COPY (CONTROL+J (PC) ou COMMAND+J (MAC)). Assim duplicamos a camada BACKGROUND. Vamos renomear esta camada para LENTE, conforme a figura 17.
 

Em seguida vamos converter esta camada numa camada do tipo SMART OBJECT, para podermos editar o filtro, caso os valores da distorção não estejam conforme o seu gosto. Vamos ao menu FILTER>>CONVERT FOR SMART FILTERS. Essa é sem dúvida uma das novidades mais bem vindas do PHOTOSHOP CS3, os filtros, ou boa parte deles são editáveis do mesmo modo que os LAYERS STYLES, ficam visíveis no painel LAYERS e apenas dando-se dois cliques no nome do filtro, ele pode ser modificado. Agora que nossa camada é um SMART OBJECT vamos ao menu FILTER>>DISTORT>>DISPLACE marque as opções conforme a figura 18,


 

depois clique em OK, aí o PHOTOSHOP vai pedir para que você selecione o PSD que fará a deformação, selecione o PSD que salvamos anteriormente, aí a deformação é feita, conforme a figura 19.



Estamos quase no fim! No painel LAYERS coloque a camada LENTE acima da camada GOTAS e com esta camada ainda ativa vá ao menu LAYER>>CREATE CLIPPING MASK, clique agora no painel LAYERS na camada GOTAS e coloque a opção FILL do painel LAYERS em 100% conforme a figura 20.

 

Pronto, deu um pouquinho de trabalho mas acho que valeu a pena, na verdade aqui usamos vários conceitos importantes do PHOTSHOP para realizar um efeito de ilustração bem interessante.

Lembre-se que se você quiser aumentar ou diminuir a deformação da camada LENTE, basta dar dois cliques no nome do filtro, no painel LAYERS. Espero que tenham gostado. Até a próxima.

Contornos e Graphic Styles no Illustrator

Vamos falar de contornos, estilos e edição destes estilos
Vamos começar desenhando uma linha de cor preta.
Em seguida, abra o painel Appearence (Window>>Appearence) e no botão de opções do painel (a bolinha com um triângulo dentro, no alto e à direita), clique na opção “Add new Stroke”. Assim, estamos adicionando um novo contorno, vamos repetir este precedimento mais tres vêzes, teremos uma linha com 4 contornos, igual a da figura 1. Agora vamos personalizar cada um deles, usando o painel Appearence. Basta clicar no contorno que queremos modificar e alterar os atributos de cada um separadamente. Abra também o painel Stroke (Window>>Stroke) para fazer as alterações.

Conforme a figura abaixo, o primeiro, se contarmos de baixo para cima, com 30 pontos e preto, o segundo com 26 pontos e cinza, o terceiro com 22 pontos e também preto e o último, com 2 pontos e “dashed”, ou interrompido. Isso no Illustrator não é feito à partir de nenhuma biblioteca, simplesmente selecione o objeto e no painel Stroke, clique no botão de opções do painel e selecione “Show Options”, no final do painel existe a opção “Dashed Line”, marque. Nas janelas “Dash” e “Gap” digite os valores para escolher em Dash o tamanho do traço e em Gap o tamanho do espaço. No nosso caso foi 12 pontos de dash e 12 pontos de gap, as outras 4 casas podem ficar vazias, neste caso o Illustrator faz a repetição do padrão apenas com as casas preenchidas.

Agora vamos imaginar que queremos aplicar este desenho em outras linhas, fica simples se salvarmos este grupo de atributos como um “Graphic Style”, um estilo que pode ser aplicado em outros objetos, ou grupos de objetos, aí vamos ver uma diferença bem interessante. Bom, primeiro vamos salvar este nosso contorno como um Graphic Style. Com o objeto selecionado, vá ao painel Graphic Style (Window>>Graphic Style) e no botão de opções selecione a opção “New Graphic Style”, ou simplesmente arraste o objeto para dentro do painel Graphic Style. Como na figura 3, abrirá uma janela de diálogo para que você dê um nome ao estilo que está criando, coloquemos "estrada".

Para aplicarmos este estilo em qualquer outro objeto, basta selecionar o objeto e clicar no estilo "estrada", no painel Graphic Style.
Vamos agora desenhar duas linhas independentes e selecioná-las. Em seguida clicamos no estilo que criamos, ele é automaticamente passado para as linhas. Desenhe agora mais duas linhas e antes de aplicar o estilo, agrupe-as, em seguida aplique o estilo. veja a diferença entre as figuras abaixo.
O grupo de objetos quando recebe o Graphic Style, comporta-se como se fosse um outro objeto.

No entanto, tome cuidado, ao desagrupar os objetos o estilo automaticamente será desvinculado dos objetos, já que ele havia sido aplicado ao grupo e não aos objetos individualmente.
Podemos ainda editar este estilo que criamos. Selecione uma linha e aplique nela o estilo criado, em seguida faça as modificações que quiser na linha, no meu caso coloquei mais um contorno de 36 pontos, verde e apliquei um efeito (effect>>pixelate>>mezzotint). 

Em seguida, com o objeto selecionado, conforme a última figura, vá ao painel Appearence, clique no botão de opções e escolha “Redefine Graphic Style” e pronto! Todos os objetos que tiveram este estilo aplicado são atualizados para o novo estilo, que você redefiniu.

Espero que tenha sido útil, abraços a todos,
Avanzi.