Cada um no seu quadrado

quadrado-thumb

Faz tempo que não posto nada desde que comecei a freelar. Acho que ultimamente estou muito no meu “quadrado”. Fora que, há uns meses atrás, apaguei uns comentários sem querer quando estava limpando os spams e não fiz backup do bd rsrsrs.

Nesta ilustração, comecei com algo infantil (nota-se pelas cores) mas pirei, bati com a cabeça no teclado, quis fazer tudo diferente, quebrando todas as regras. Achei muito maneira essa foto de dançarino no stockxpert para montar esta ilustração.

Clique aqui para ver a ilustração maior.

Creative Commons License
A obra de Sergio Almeida é licenciado sob Creative Commons Atribuição 2.5 Brasil License.

Retro + Tipo + Justice = DVNO

De final de semana eu costumo ficar na sala de estar com a TV ligada na MTV, o PS3 baixando demos e trabalhando e navegando com o MacBook. Fiquei MALUCO quando vi o clipe de Justice – DVNO, pela aplicação pesada, se não integralmente, de referências retrô e inteligente uso tipográfico.

A música é legalzinha mas, esse clip… é espetacular! Veja você.

Comentário inútil, ou não: Pronuncie DVNO em inglês. Os fonemas proporcionam “DIVINO” quando falado!!! hueheuhehehueheue 🙁

Tutorial – Converter CMYK para Pantone no Illustrator

Conteúdo revisado e atualizado em 18 de julho de 2013.

Através do Illustrator você pode converter as cores daquele seu logotipo que foi desenvolvido em CMYK para as cores da tabela Pantone. Possui tutorial para as versões CS3 e superior, bem como versões anteriores ao CS2.

Tutorial para versão Adobe Illustrator CS3 ou superior:

Desde a versão do Illustrator CS3, é possível utilizar um recurso nativo chamado Recolor Artwork (Recolorir Trabalho), que serve para harmonizar ou experimentar novas paletas de cores em seu trabalho, testando combinações de matizes, brilho e saturações diferentes; além de oferecer sugestões de combinações análogas e complementares de cores! É mágico!

Além disso, com o Recolor Artwork é possível limitar o grupo de cores baseada em uma biblioteca de paleta (Swatch Library). É lá que estão as paletas Pantone.

Passo 1: Selecione seu trabalho

Selecione todo ou parte do seu trabalho em que haja necessidade de conversão de cores com Selection Tool (atalho V)

Passo 2: Abra a ferramenta Recolor Artwork

Vá em Edit > Edit Colors… > Recolor Artwork

Passo 3: Limite as cores ao grupo de cores da biblioteca Pantone

Clique no botão “Limits the color group to colors in a swatch library” sinalizado em vermelho.

Escolha a Biblioteca Pantone

Passo 4: Veja como ficou e pronto!

Pronto. Note que alterou inclusive as cores do gradient! Muuuuuito bom!!!

Esta dica do Recolor Artwork foi uma colaboração genial do Marlon Bruno da Silva nos comentários. Obrigado amigão! Colabore e comente você também.

Tutorial para Adobe Illustrator CS2 ou anteriores:

Um homem de bom coração desenvolveu um script extremamente útil chamado CMYKtoPMS que faz a medição da cor CMYK e sugere as paletas da tabela Pantone mais próximas. O autor é John Wundes e seu site possui diversos outros tutoriais.

Então vamos lá:

Passo 1: Instalando o Script

Baixe o arquivo aqui clicando com o botão direito e selecionando Salvar link como… e coloque o arquivo com extensão .js na pasta:

  • Do Windows:
    • “C:\Program Files\Adobe\Adobe Illustrator CS3\Presets\Scripts”
    • Ou “C:\Arquivos de Programas\Adobe\Adobe Illustrator CS3\Presets\Scripts”
  • Do Mac:
    • “Applications\Adobe Illustrator CS3\Presets\Scripts”
    • ou “Aplicativos\Adobe Illustrator CS3\Presets\Scripts”

Inicie ou reinicie seu Illustrator e, em File > Scripts… (Arquivo > Scripts), haverá o script como cmyktopms.

Passo 2: Como utilizar?

Selecione um elemento com uma cor CMYK chapada. Mantenha selecionada e vá acesse os script cmyktopms. Uma caixa de diálogo perguntará se deseja incluir o livro de cores Pastel do Pantone. Clique yes.

O script apresentará uma caixa de alerta contendo as paletas Pantone que mais se aproximam da cor seleciona. Anote o número do Pantone e pronto! Depois é só procurar por esse Pantone no livro de cores ou color book em Swatches.

Facilita sua vida na hora de comparar a cor CMYK e Pantone.

Espero que isso seja útil para todos vocês! :o)

Obrigado por todos os comentários. Vocês fazem parte da motivação que preciso para atualizar este blog.

Update #1: Dando um alt+tab de assunto: esse post é o mais popular que já escrevi em meu blog. Portanto gostaria de fazer um “merchan”. Quero muito que vocês conheçam o Nanosite, meu serviço de criação de sites celular. Ficaria muito feliz com o page view e opinião de vocês. Além disso, se você gostou do tutorial, clique no link promoção da Black Friday para ajudar a manter o blog sempre atualizado.

Inspiração #3: Omni

Omni magazine cover
Omni Magazine Cover

Omni foi uma revista americana sobre ficção científica, que continha artigos sobre fatos científicos e amostra de trabalhos sobre ficção científica. A primeira edição foi lançada antes mesmo de meu pai pensar em ter um filho. Em 1978, nasce a primeira edição de uma revista que prometia explodir a cabeça de fãs sobre ficção científica, nerds, ufologistas e, por ultimo mas não menos importante – e não menos diferente hehe – designers! Isso mesmo!

Veja a capa da primeira edição a seguir.

Omni Magazine Cover #1
Omni Magazine Cover #1

Quero deixar bem claro que NUNCA li uma revista dessas se quer. Na verdade, eu soube da existência dela até alguns minutos atrás, quando navegava pelo blog do artista Scott Hansen, onde li um post sobre capas da revista Omni. E tudo o que sei é devido à algumas pesquisas rápidas que fiz sobre a Omni. Entra no time o Wikipedia e este site com um acervo incrível de capas.

O que chama a atenção é a qualidade das capas. Os diretores de arte não estavam pra brincadeira nessa época e mostraram muito talento no desenvolvimento.

Omni Magazine Cover
Omni Magazine Cover
Omni Magazine Cover
Omni Magazine Cover

Fica um sério ar retrô ao ver estas capas. É bem gostoso de se ver. Uma inveja boa quero dizer. Bah! São lindas pra cara*%#!

O mais legal é que capas antigas tem um ruído natural criado pelo próprio tempo. Isso dá mais personalidade a revista hoje.

Omni Magazine Cover
Omni Magazine Cover
Omni Magazine Cover
Omni Magazine Cover

É uma explosão de miolos estes trabalhos. Terrific!

Ilustração e diagramação de primeira, combinadas a uma direção de arte precisamente fod*. Isso é mais um daqueles exemplos para mostrar pra galera que tá começando que não importa se você tem a versão 47 do Photoshop com filtros mega blaster master plus plus+ para criar. O que importa é o talento. Pense nisso e inspire-se no velho – evite o novo.

A revista teve sua ultima edição em 1995. O que não é muito triste pois mesmo não estando viva, a revista e a equipe que fazia a direção de arte das capas acabam de ganhar um fã que se inspira ao ver obras depois de pouco mais de 10 anos de existência.

Omni Magazine Cover
Omni Magazine Cover
Omni Magazine Cover
Omni Magazine Cover

E você? O que te faz inspirar? O novo ou o velho? Só não vale responder “tudo me inspira” pois, apesar de ser verdade, tudo pode ser nada. 😉

Tutorial #1: Who’s Bad?

He's Bad!

Uma coisa que minha professora do curso de concept de personagens ensinou é buscar muitas referências. Muitas mesmo! Depois de descobrir onde estão essas maleditas, é hora de filtrar e selecionar as que são realmente interessantes para o job. Mas não fique triste achando que você perdeu tempo lendo sobre o mercado de ações explodindo, com o divino encostando em você, sendo que seu objetivo é criar algo relacionado a música, por exemplo. TUDO o que você vê, lê e ouve fica registrado no seu cérebro e isso acaba refletindo no momento de criação.

A referência fundamental deste trabalho foi quando encontrei conteúdo artístico de primeira no blog Signal Noise, do artista James White, que me inspirou pelas cores que ele usa e estilo retrô.

Então vamos lá:

Passo 1: Criando novo quadro

tutorial-mj-1

Esse é um passo muito pessoal, o quadro pode ser de qualquer formato. Como não achei que renderia um tutorial esta experiência com o Michael, criei em resolução 72dpi, sendo que o ideal é planejar sua aplicação inicialmente e então decidir se será um impresso (300dpi) ou um trabalho web (72 dpi).

turorial-mj-2

Fiz um degrade utilizando as cores #aebaa4 e #b3bfab, dois tons próximos de verde claro. Não precisa ser exatamente essas cores. A ideia é gerar meios-tons ao fundo que é o que darão naturalidade ao trabalho no final.

tutorial-mj-3

Passo 2: Colocando o Michael Jackson na arte


Recortei esta foto de Michael e posicionei no canto superior direito no quadro, planejando uma manipulação na foto dele “despedançando” em um movimento da esquerda para a direita.

Deixe a foto de Michael mais esverdeada colocando um Color Overlay na camada de Michael com a cor #b0bba6, Blend Mode Color e 75% de opacidade.

tutorial-mj-7

Escureça os meio-tons pelos Levels (CTRL+L ou CMD+L) para aumentar o contraste.

tutorial-mj-6

Veja como ficou:

tutorial-mj-4

Passo 3: Fazendo Michael virar tinta

tutorial-mj-brushes

Utilizei um excelente seleção de brushes gratuitos que simulam respingos de tinta no bittbox.com. Clique aqui para baixar os brushes.

Com uma camada em cima e outra abaixo da camada de Michael, pintei de forma que pudesse criar uma composição interessante com a foto, tambem proporcionando uma maneira de esconder o notável recorte da pélvis e aquelas mãos difusas.

As cores utilizadas foram selecionadas da própria foto, usando a ferramenta Eyedropper. Note que há o branco da camisa e o preto do paletó na tinta.

tutorial-mj-8

Veja como ficaram as camadas:

tutorial-mj-10

Eu costumo usar máscaras para trabalhar com brushes. Normalmente, eu pinto uma camada por inteiro, habilito a Layer Mask, inverto de branco para preto para fazer sumir a camada e então, clicando no quadro Layer Mask, seleciono a cor branca para pintar com brushes. No caso do Michael, não fiz isso (rs). Pois iniciei com brushes diretamente na layer e, para retocar, habilitei a Layer Mask para “apagar”, ou melhor, mascarar as partes que não me interessavam.

Em um próximo tutorial explicarei melhor o uso das Layer Mask que é de extrema utilidade, principalmente para manter a integridade da layer.

Passo 4: Mais detalhes, contraste e a cor de interferência

tutorial-mj-11

Decidi colocar tinta branca do lado direito de Michael, para aumentar o contraste de seu rosto. Aumentei os níveis de detalhes colocando pequenos brushes com a cor #ff7c00, que eu chamo de cor de interferência pois ela é a cor que se destaca da paleta habitual do quadro.

Passo 5: Destruindo Michael, no bom sentido

tutorial-mj-13

Dupliquei a foto de Michael, aumentei a saturação das cores e depois habilitei a Layer Mask. Na máscara, com o Polygonal Lasso, fiz seleções de pequenos pedaços, escolhendo entre a parte branca e preta da camisa, gravata e paletó. Pinte com a cor preta a seleção e deselecione. Inverta as cores da máscara com o atalho CTRL+I/Command+I. Agora, com os pedaços prontos, basta movê-los para o lado esquerdo, respeitando sempre o “ritmo” da arte.

Utilizei uma Layer Mask e fiz um trabalho usando os mesmos brushes para detonar o lado esquerdo da foto.

Passo 6: Mais detalhes e aplicação da segunda foto


Atrás da camada da foto de Michael, coloque esta foto. Tire a saturação de cores com o atalho CTRL+SFHIT+U/Command+Alt+U e selecione o blend mode Screen. Habilite uma Layer Mask para que você possa limpar as áreas que rodeiam o rosto.

tutorial-mj-14

Adicionei mais brushes usando a uma cor clara que capturei dessa nova foto.

Criei um vetor no Illustrator com linhas curvas, na maioria delas bem finas e algumas poucas bem grossas (entre 1pt e 3pt) e pode ser baixado aqui. Dei um Place no Photoshop e repeti esse vetor ao lado direito de Michael diversas vezes. Coloque o Blend Mode em Luminosity. Eu não ajustei a opacidade neste caso pois como os riscos são bem finas, parecem quase transparentes. Vejam ele sozinho:

tutorial-mj-15

Passo 7: Volume e UAU!

tutorial-mj-16

Essa é fácil e faz uma baita difereeeença no trabalho em geral: Volume. Coloque um degrade com foreground #e4eddb e background transparent, de cima para baixo. Duplique a layer para dar mais volume e voilá.

Passo 8: Fatlove loves Michael Jackson

tutorial-mj-18

Baixe aqui a fonte Fatlove e monte o texto nessa diagramação. Usei tracking de -90 e coloquei um stroke de 2px através do Layer Style. Coloque Fill 0% para deixar o corpo da camada transparente. Apenas no “Jackson” coloquei uma linha a mais.

tutorial-mj-17

Para criar o ruído no texto é fácil e divertido de fazer. Habilite uma Layer Mask na Type Layer e use um brush para “destruir” o texto. Depois de terminado, vá em Filters > Noise e selecione 3,5%.

Passo 9: Voilá

Bom, ficou muito massa assim. Ficou? Não ficou?? Quer mais???

Então tá bom, vamos alterar toda a paleta das cores usando o poderoso Gradient Map.

tutorial-mj-19

Crie um Adjustment Layer, selecione Gradient Map, escolha o gradiente roxo para laranja e a mantenha no topo de suas camadas.

tutorial-mj-20

Mude eu Blend Mode para Screen e altere o valor de opacidade para 30%.

Eita, olha que legal que ficou! Deixou a arte com um aspecto lavado.

tutorial-mj-21

Passo 10: Toques finais

Aumentar o contraste pois o nosso olho não consegue fixar muito bem para os pontos principais do trabalho. Isso é muito importate. Para isso, criaremos mais um Gradient Map e selecionaremos o gradiente laranja/amarelo/laranja. Mude Blend Mode para Soft Light.

Para finalizar, salve este PSD depois gere um PNG, utilizando o Save for Web (CTRL+SHIFT+ALT+S ou Command+ALT+SHIFT+S), com o propósito de manter a arte toda em uma só camada. Agora faça o seguinte para finalizzzh… eita… ouviu alguma coisa?! Parece uma sirene…

Killer tip alert! Killer tip alert! Killer tip alert!

Dica Matadora #1

tutorial-mj-sharp

Uma coisa que muitos designers esquecem é da utilidade do Sharpen, nosso querido filtro de de nitidez. Quando você finaliza um trabalho, NUNCA se esqueça de mandar pelo menos um Sharpen. Caso seu trabalho tenha que ficar em um tamanho final reduzido, por exemplo um banner publicitário com 20k, mande mais de 2 sharpens. O JPG, responsável por comprimir a imagem e, naturalmente, a compressão deixa imagem difusa, com ruído e padrões. A imagem com sharpen deixa seu trabalho, mesmo compactado, muito mais nítido e bonito. Ainda mais quando trabalhamos com ruído e artes com pequenos detalhes.

Pelo menos na versão CS3, você pode ajustar a intensidade do filtro. Após aplicar o filtro Sharpen, aperte CTRL+Z ou CMD+Z e acesse Edit > Fade Sharpen…

Conclusão

tutorial-mj-23

Como esse é o primeiro tutorial que escrevo, gostaria que saber se vocês gostaram, odiaram ou se ficou legalzinho… não importando o que achou, deixe um comentário para fazer o final de semana do autor mais feliz. :o)

É isso aí galera. O PSD (4MB) está aqui para vocês baixarem e consultarem. Este que é uma versão com quadro reduzido para estudos.

Divirtam-se.

Creative Commons License
A obra de Sergio Almeida é licenciado sob Creative Commons Atribuição 2.5 Brasil License.

14º Encontro de Web Design 2009 em Sampa

14 Encontro de Webdesign 2009 em São Paulo

EWD – para os mais íntimos – será no próximo dia 25 de abril, no maravilhoso Centro de Convenção AMCHAM.

Os temas desta edição serão: Entretenimento e Redes Sociais. Para levar à você o melhor de cada assunto, as palestras serão realizadas por Julius Wiedman, editor da Tashen, e Gil Giardelli, da Permission.

Se você acha que só terão designers, webdesigners e estudantes da área, neste ano, a Arteccom traz uma novidade: o Encontro de Tecnologia da Informação, que está em sua 2ª edição e vai ser realizado paralelamente ao Encontro de Webdesign, nas mesmas datas e locais, mas em ambientes separados. Para saber mais sobre o ETI, acesse o site www.encontrodeti.com.br.

E não é só! Essa vai para os Blogueiros: Profissionais especialistas em empreendedorismo e na ferramenta livre WordPress , ministrarão as oficinas, que serão oferecidas tanto para o EWD quanto para o ETI.

Todos os eventos serão realizados aos sábados, das 9h às 18h. Então, deixe aquele cineminha com pipoca do final de semana, inscreva-se no site e nos encontramos lá! Eu já garanti o meu!

Who’s Bad?

He's Bad!
He's Bad!

Michael Jackson é uma inspiração para qualquer ser que habita este planeta – caso você não saiba de quem estou falando, provavelmente você não pertence a Terra e, portanto, avise seus líderes que este planeta possui astros e por isso nunca nos renderemos! Ou colocaremos Axl Rose para apitar no ouvido da enorme cabeça cinza de vocês, lixos galáticos.

Bem, dado o recado aos alienígenas, enquanto pesquisava por Michael Jackson no Google, encontrei um site com uma coletânea gigante de fotos do nosso astro. Elas estão aqui. Aparentemente, são fotos de uma mesma época… selecionei duas que gostei e fiz um trabalho ao estilo retro e grunge – apesar de se tratar de um artista pop e a arte não “colar” muito com o universo musical dele.

Não sei se as fotos são da fase do “Sou Mau”de Michael mas tentei transmitir esse lado bandidão do Michael, pendendo mais para “Sou Mau Fod*” do que “Sou Maléfico Sanguinário”. Entendeu? E ele fica malandro com o chapeuzinho. Aliás, Master System tinha um jogo bem legal com ele; acho que se chamava Moonwalker.

Estou escrevendo o tutorial deste trabalho para ajudar toda comunidade de designers. Aguardem! :o)

Coloquei um lembrete para não esquecer…

tutorial-michael

Creative Commons License
A obra de Sergio Almeida é licenciado sob Creative Commons Atribuição 2.5 Brasil License.