Cruz Céltica

Uma arte no estilo céltico. Como de hábito, traçada no Inkscape e finalizada no Photoshop:

Essa cruz eu vi na foto de uma tatuagem. Uma foto em baixa resolução e um tanto deformada. Estava há tempos nos meus arquivos, esperando pelo dia que eu a vetorizasse direitinho...e, hoje, esse dia chegou. Demorou, mas veio!

Resolvi postar, também, a imagem png, gerada a partir do arquivo original do Inkscape. Você pode usá-la livremente, desde que forneça o link do meu blog, caso a poste em qualquer outro local da internet. Infelizmente muita gente não faz isso, talvez por esquecimento. Uns poucos agem pior: pegam a arte e querem passar por autores dela. Fazer o que, né?

Bom, é quase certo que esta será minha última postagem de 2016. Se for assim, aproveito para desejar a todos um Feliz Ano Novo!

Arte no Inkscape e Photoshop

Esta me deu mais trabalho, nem tanto na construção e sim no acabamento: as primeiras tentativas saíram demasiadamente artificiais, com excesso de degradês e estilos de camada. Muito anos 90, hehe! Tudo porque eu tinha uns estilos de camada antigos, encostados aqui e cismei de mexer com eles. Decidi simplificar...e aí está:

A imagem abaixo (clique para ampliar) é um screenshot do Inkscape, programa vetorial open-source. Foi nele que construí a forma. À esquerda estão as principais linhas de construção utilizadas. No centro, a forma completa e, à direita, o desenho original em que me baseei.

Esse desenho eu tirei destas páginas do livro The power of form applied to geometric tracery, de Robert William Billings. A obra é de domínio público e pode ser baixada, livre e gratuitamente, aqui. Quando abrir a página, vá até o final dela e você verá uma lista de formatos de arquivo, escolha um deles para fazer o download.

Eu costumo escolher o formato PDF. Esse livro é ótimo! Inclusive já havia mostrado um outro desenho baseado nele, nesta postagem.

Como Evitar o Contorno Ondulado no Photoshop

O título dessa postagem poderia ser "Vivendo ou Aprendendo" ou "Quem disse que cachorro velho não aprende novos truques?" Depois de eu ter publicado aqui meu tutorial, Melhorando Contornos, o hbcarvalho, da Central de Quadrinhos, demonstrou um modo simples de se evitar o contorno ondulado no Photoshop. Meus agradecimentos a ele, pela dica!

Então aquele meu tutorial é inútil? Não necessariamente: se você já aplicou os contornos ao demarcador e, tarde demais, percebeu o problema do contorno ondulado (ou, pior ainda, tenha deletado os demarcadores), o tutorial será de ajuda...portanto, uma razão suficiente para conservá-lo no blog. E a técnica continua servindo para eliminar serrilhas em contornos.

O hbcarvalho já explicou claramente no tópico da Central como resolver o problema...porém, decidi redigir um pequeno tutorial e publicá-lo no meu blog. Isto porque a Central de Quadrinhos fica offline, durante alguns períodos de tempo (certa vez ela ficou por tanto tempo inacessível, que cheguei a pensar que aquele fórum tinha fechado definitivamente...).

Para evitar as ondulações no contorno, só é preciso reduzir o espaçamento (spacing) do pincel que você aplicará ao demarcador (path). Na figura 1, temos o contorno do pincel configurado com um spacing de 25% (A) e um contorno com o pincel configurado para um spacing de 1% (B):

Obviamente, você deverá reduzir o spacing do pincel antes de aplicar o contorno ao demarcador. Como fazer? Primeiro, é necessário você ativar a Ferramenta Pincel, clicando sobre ela, na Caixa de Ferramentas (2). Em seguida, vá no canto superior esquerdo do Photoshop e clique no ícone indicado pela seta vermelha:

Irá abrir uma grande janela (figura 3, clique para ampliar). No nosso caso, só precisamos alterar o valor do spacing...e seus controles ficam na base da janela (A).

O meu pincel estava configurado para um spacing de 25% (4). Bastou reduzí-lo para 1% (A) e, em seguida, aplicar o contorno ao demarcador.

Só para esclarecer: o Photshop só aceita o valor mínimo de 1% no spacing. Mesmo tentando colocar 0% ali (5), o programa mostrará um quadro de alerta (A)...e quando você clicar em OK, o valor será automaticamente configurado para 1%.

Melhorando Contornos

Como comentei na postagem anterior, o Photoshop deixa os contornos ondulados quando você contorna um demarcador com uma espessura muita alta. Ali, eu havia dito que o problema aparece a partir de espessuras de 12 pixels. Eu estava enganado: ele acontece a partir de espessuras de 30 pixels (1), sendo bem mais visível em espessuras de 40 pixels:

O melhor meio, naturalmente, é evitar o aparecimento do problema. Para tanto, veja o tutorial Como Evitar o Contorno Ondulado no Photoshop.

Mas se você já aplicou os contornos ao demarcador e, tarde demais, notou contorno ondulado (ou, pior ainda, tenha deletado os demarcadores),então, as orientações abaixo irão ajudá-lo. Aqui temos um demarcador (path) traçado com a Ferramenta Pen (2):

Contornei o demarcador com uma espessura de 50 pixels (3), repare como ele ficou todo ondulado:

Primeiro devemos ativar a seleção do contorno (4), para isso vá na paleta Layers (A), segure a tecla Ctrl e dê um clique na camada do contorno (B):

Com a seleção ativada em sua tela (5), vá na paleta Channels (A) e clique no segundo ícone (B), na base da paleta...

...com isso um novo canal será criado (6) e automaticamente nomeado pelo Photoshop como Alpha 1 (A). A seleção não é mais necessária: desfaça-a através do do atalho Ctrl+D.

Para fazermos os ajustes seguintes (7), é essencial que somente o novo canal, que acabamos de criar, esteja visível! Geralmente basta você clicar sobre ele (A); os demais serão ocultos e você verá o contorno na cor branca, em sua tela. Caso nada disto ocorra, oculte manualmente os demais canais, deixando apenas visível e ativado o Alpha1:

Agora precisamos aplicar um Desfoque Gaussiano (Gaussian Blur) no contorno (8). Vá em Filter (A), escolha Blur (B) e Gaussian Blur (C):

O quadro de diálogo do Filtro aparecerá (9). Certifique-se de que a opção Preview (A) esteja marcada (normalmente ela estará) e preste atenção à aparência do contorno. Comece configurando o filtro com valores baixos, no caso eu experimentei com 2 pixels (B)...

...e constatei que não foi o suficiente. O ideal é que as ondulações do contorno desapareçam, no preview sem, contudo, deixar o contorno borrado demais (10). Assim, eu coloquei o valor de 4 (A) e quase resolveu o problema...

...porém acabei decidindo por um valor um pouco mais alto (11), o de 4,9 (A). Não tenha receio de experimentar até obter um valor adequado...e só então clique no botão OK (B) para aplicar o filtro.

Veja que as ondulações sumiram (12), falta agora deixarmos esse contorno nítido:

Antes, você deve aumentar o zoom em 200% (13), basta você ir no canto inferior esquerdo de sua tela (A) e digitar esse valor.

Também é importante aprender, agora, dois atalhos úteis para aumentar e diminuir o zoom, através do teclado. Segurando a tecla Ctrl e apertando a tecla de + (mais), você aumenta o zoom. Segurando a tecla Ctrl e apertando a tecla de - (menos), o zoom é reduzido. Pratique esses atalhos antes de prosseguir, pois eles servirão mais adiante.

Vá agora em Image (14), Adjustments (A) e escolha Levels (B):

O quadro de diálogo vai surgir (15). Se você nunca o usou não se preocupe, aqui somente precisaremos mover dois controles deslizantes, o da esquerda (A) e o da direita (B). Não mexa no controle deslizante do meio, mesmo porque ele acompanhará o movimento dos outros dois, quando você deslocá-los.

Para que o quadro não atrapalhe a sua visão, mova-o, clicando no topo dele e mantendo o botão do mouse pressionado, à medida que o arrasta. Desse modo você verá claramente os efeitos do ajustes (16) na sua tela. Comece, a seguir, arrastando o controle deslizante esquerdo (A) para a direita e o controle direito para a esquerda (B). Note que o contorno ganhou mais nitidez.

Repita os movimentos dos controles, eles devem ficar o mais próximos possíveis, tal como mostrado na figura 17, abaixo:

Nosso objetivo é este: queremos o contorno nítido, no entanto ele não deverá apresentar serrilhas. Para ter certeza de que isto não vai acontecer, precisamos ver o contorno com um zoom de 100% (18). É agora que você vai usar os atalhos de zoom explicados acima. Nesse caso você deverá segurar a tecla Ctrl e apertar a tecla de - (menos), a fim de reduzir o zoom.

Se o contorno estiver serrilhado ou você não achá-lo nítido o bastante, continue ajustando. Caso haja serrilhas, significa que os controles deslizantes A e B estão muito próximos: separe-os mais, movendo cada um na direção oposta, até as serrilhas desaparecerem. Se, ao contrário, o contorno ainda está borrado, você deve aproximar mais os controles deslizante entre si.

Quando estiver satisfeito, clique em OK para fechar o quadro de diálogo Levels. Aí está o meu resultado (19):

Precisamos, em seguida, ativar a seleção do canal Alpha 1 (20), para tanto segure a tecla Ctrl e clique no Canal, na paleta Channels (A):

Com a seleção ativada (21), volte à paleta Layers (A). Oculte a camada do contorno antigo (B), clicando no ícone do olho. Crie uma nova camada, clicando no penúltimo ícone (C), na base da paleta. Se você seguiu tudo, a nova camada irá aparecer (D) na paleta.

Agora você pinta a seleção (22) com a cor desejada. Como pretendo pintá-la de preto, deixei a Cor de Primeiro Plano (Foreground Color) nessa cor (A), o padrão, clicando na tecla D...

...e pintei a seleção através do atalho Alt+Backspace. Esse atalho preenche tudo o que estiver selecionado com a Cor de Primeiro Plano (se não houvesse seleção alguma na tela, ele pintaria a camada inteira). Depois, desativei a seleção, usando o atalho Ctrl+D. Veja o resultado (23):

A figura 24 (clique para ampliar), apresenta o contorno tal como era (A) e como ficou, após os ajustes (B):

Agora você já sabe como melhorar os contornos. Esse método também serve para eliminar serrilhas neles...mas, neste caso, você deverá utilizar valores menores no filtro Desfoque Gaussiano e mover menos os controles deslizantes da caixa de diálogo Levels. Com a prática, você saberá, com segurança, qual será a melhor saída para cada situação.

"Como fazer isso?"

De que maneira você age quando você precisa desenhar algo e não sabe como? Normalmente irá perguntar a alguém ou pesquisar em busca de respostas, não é? Porém, muitas vezes não dá tempo, pois desenhistas trabalham com prazos de entrega, prazos quase sempre curtos.

Portanto, haverá ocasiões (várias, eu diria) em que você estará por sua conta...quando deverá fazer sozinho, ao menos tentar, empregando os conhecimentos e ferramentas disponíveis, no momento. Foi o que aconteceu neste desenho que fiz há alguns dias:

Esse símbolo, provavelmente, é celta. Já o vi em várias imagens na internet...mas se existe um tutorial ensinando como traçá-lo, não tive a oportunidade de encontrar! Assim, tive que me virar, pegando a melhor referência (1) de que dispunha (infelizmente não lembro onde baixei essa imagem) e abri no Photoshop:

No programa, separei o símbolo do resto da imagem e utilizei as ferramentas de transformação (Warp, inclusive) para deixar o símbolo o mais plano possível. Até aquele instante eu tinha um palpite: a parte interna do símbolo lembrava bem uma estrela de cinco pontas (2)...

...então, talvez fosse melhor iniciar a construção do símbolo através de um pentágono (3), até porque eu poderia encaixar uma estrela dentro dele (a), caso fosse necessário.

Depois de construir o pentágono, notei outra coisa: se colocasse um círculo com o mesmo diâmetro de um dos lados do pentágono (4) e alinhado com precisão (setas vermelhas), eu teria uma boa base para trabalhar...

...e bastaria traçar o demarcador (ou o path, como conhecem alguns) até o topo do pentágono (5). Em seguida, era só contornar o demarcador com a espessura desejada, duplicaria as figuras resultantes mais quatro vezes (para completar cinco) e girar essas figuras 72 graus, tendo por eixo o centro do pentágono (indicado, na imagem abaixo, pela bolinha azul).

Não deu muito certo essa minha primeira tentativa (6), as formas não se encaixavam direito umas às outras (eu colorizei cada uma delas, a fim de tornar mais claro esse fato):

Eram, basicamente, dois problemas a se resolver (7): primeiro, no ponto marcado pelas setas vermelhas aparecia a emenda de duas formas e, segundo, as bordas dos contornos estavam onduladas, feias demais (a). Esse último problema ocorre muito no Photoshop, quando você contorna o demarcador com um traço muito espesso, igual ou superior a doze pixels de espessura. (Correção: na verdade, ele acontece a partir de espessuras de 30 pixels, como constatei depois de mais testes).

Na segunda tentativa,consegui deixar as bordas dos contornos mais suaves (veja aqui a técnica que empreguei), mas o problema de encaixe entre as formas continuava (8).

Ocultei, então, todas as camadas das formas, exceto duas delas (9) e corrigi a área problemática, usando demarcadores e máscaras de camadas. Veja que a curva, agora, ficou certinha (a).

Dupliquei a forma resultante e girei. Com esses cuidados, obtive o símbolo razoavelmente traçado (10) e podia partir para o acabamento.

Tratei as formas de modo a deixá-las trançadas umas às outras (11). Esse efeito não é tão difícil de se conseguir, só exige atenção e que você saiba usar máscaras de camada. Aqui tem um antigo tutorial meu, ensinado como fazer no Gimp (você terá poucos problemas em adaptar a técnica no Photoshop). Pintei as figuras com verde, de uma tonalidade média.

Selecionei todas formas, aumentei a seleção em quatro pixels e, em uma camada abaixo, preenchi a seleção com um tom de verde mais escuro (12).

Em seguida, selecionei as formas dessa camada, aumentei, de novo, a seleção em quatro pixels e pintei a seleção com o tom médio (13) em uma nova camada. Refiz essas ações, desta vez preenchendo a seleção com um tom de verde mais escuro que os anteriores(a)...

...deixando o símbolo com este aspecto (14):

Geralmente gosto de deixar um contorno interno, em um tom escuro (15). Para obtê-lo, também seleciono todas as formas...no entanto, neste caso eu,logicamente, reduzo a seleção, em vez de aumentá-la.

Para não deixar o fundo vazio, fabriquei essa figura com raios(16), semelhante às speedlines e a colorizei com degradê, de modo a ajudar a dar destaque ao símbolo (no futuro, se possível, ensinarei como traçar essa figura do fundo).

Resolvi trabalhar um pouco mais no contorno interno (17). Selecionei-o e aumentei a seleção em quatro pixels...e, em uma camada abaixo dele, pintei com um verde claro. Experimentei, ainda, aplicar patterns no contorno interno... até achar um que combinasse (a). Mais abaixo, na figura, (b) há uma amostra do pattern escolhido:

Para finalizar a ilustração, apliquei degradês de verde-claro nos quatro cantos do fundo...e fim.

Então...é isso! Até gostaria de ter postado a você um tutorial completo. Infelizmente não foi possível, isto me exigiria mais tempo e condições mais favoráveis. Mas, caso haja dúvidas, pode perguntar e responderei assim que puder... ou explicarei com maiores detalhes em futuras postagens.