Todo ano a Pantone, maior empresa do mundo no ramo de sistemas de cores, elege as cores que serão usadas para representar o ano seguinte.
A ideia da empresa é, principalmente, criar um catálogo a fim de representar as tendências para o ano seguinte. Catálogo este criado pela The Pantone Color Institute, que busca utilizar de padrões e tons que são significativamente mais globais e genéricos em termos culturais, sobre o que se esperar do ano seguinte.
No ano de 2019, definiu-se que a cor que movimentaria o ano de 2020 foi o Classic Blue (19-4052):
As Cores de 2021: Otimismo e Força
Diante da maior crise sanitária da era moderna, a Pantone sugere que as cores de 2021 deverão representar o casamento entre otimismo e força, e escolheu como suas representantes as cores PANTONE 13-0647 Illuminating (similar ao amarelo canário) e o PANTONE 17-5104 Ultimate Gray (similar ao cinza elefante).
“Ao combinar PANTONE 17-5104 Ultimate Grey e PANTONE 13-0647 Illuminating para ser nossa cor Pantone do ano em 2021, destacamos como dois elementos diferentes se unem para expressar uma mensagem de força e esperança, que é ao mesmo tempo duradoura e edificante, transmitindo a ideia de que não se trata de uma cor ou de uma pessoa, é sobre vários”. — disse Laurie Pressman, vice presidente da Pantone Color Institute. — “Elas comunicam uma compreensão mais profunda da importância dos relacionamentos e da necessidade que temos uns dos outros. A união dessas duas cores diferentes mostra a força e o otimismo que resultam da junção de diferentes ingredientes”.
É importante salientar que Pantone é uma empresa privada e seus sistemas são proprietários, então você não deverá encontrar atualizações em paletas automatizadas em aplicativos como GIMP e Inkscape, mas nada impede que você crie suas próprias paletas manualmente, replicando as cores, ou até encontre algumas na internet feitas por terceiros.
Todavia, as cores e assets já estão disponíveis em serviços como o Adobe Stock e Freepik Premium:
Algumas variações de paletas usando as cores Pantone 2021 já estão disponíveis publicamente no Adobe Color. Dessa forma, já é possível usar as cores em novos projetos através da Creative Cloud, no Adobe XD, Illustrator, Photoshop e InDesign, além de plataformas para projetos de mídias sociais e vídeos, nos dispositivos móveis.
Brasil
No Brasil, através do Twitter, algumas pessoas tem manifestado reações sobre a decisão da Pantone.
Quando o Google comprou o Android em 2007, seu objetivo era entrar no emergente mercado de mobilidade. Durante os últimos 10 anos, a Google enfrentou diversos problemas de performance e até judiciais (em especial com a Oracle) com relação a esse sistema operacional.
Em 2016 a Google anunciou o misterioso Fuschia. Um sistema operacional gratuito, de código aberto e licença mista, que está em desenvolvimento pela empresa.
Apesar de já ter sido divulgado algumas imagens, é a primeira vez que temos o vislumbre do visual do Fuschia OS em execução e interface, através do site ARS Techinica.
Veja o vídeo de demonstração do futuro Google Fuschia OS
Design
O Fuschia foi anunciado originalmente para ser um sistema operacional leve que funcionasse em diversas situações e fosse adaptável para vários meios.
Em primeiras imagens, já podíamos ver leiautes que se assemelhavam muito ao Material Design, porém sem a adição de sombras que estamos acostumados na aplicação Android. Essa homescreen era chamada de Armadillo.
Primeira aparição do Google Fuschia
Já em sua nova aparição, o Fuschia apresenta uma solução responsiva, que parece significar um interesse em criar uma aplicação híbrida entre smartphone e tablet multitarefa.
Nitidamente, o ponto mais diferente do design seja a localização dos indicadores de bateria e wifi, além da barra do Google, que se encontram pouco abaixo do centro vertical do dispositivo. De certa forma, essa decisão parece muito interessante visto que as telas dos dispositivos estão cada vez maiores e mais difíceis de alcançar o topo com apenas uma mão.
A interface gráfica é escrita em uma plataforma SDK chamada Flutter, uma tecnologia multi-plataforma que hoje já se encontra funcional tanto para iOS quanto para Android. A tecnologia usa Dart e algumas integrações HTML/CSS para criação das interfaces.
Programação
O Fuschia, diferente do Android e do ChromeOS é baseado em um microkernel chamado Zircon (anteriormente chamado de Magenta) que usa um subconjunto em C, C++ e possui, junto com o Fuschia, diversas linguagens compondo todo o sistema operacional, como o Dart, Go, Rust, Python e até Swift. Da mesma forma, já foi anunciado que o Fuschia OS trará suporte para desenvolvimento ao menos em C/C++, Go e Swift.
Desde o ano passado já é possível experimentar o Fuschia em Chromebooks, mas é a primeira vez que é possível fazer isso com interface gráfica.
Vale lembrar que recentemente a JetBrains recentemente liberou um beta da IDE CLion que permite que Kotlin seja compilado sem a necessidade da JVM. A chamadad Kotlin/Native pode ser uma alternativa de fácil portabilidade de aplicativos Android para a nova plataforma.
Rumores afirmam que Fuschia seria uma consequência das confusões em tribunais entre a Oracle e o Google. Porém é importante salientar que se trata de algo ainda pré-alpha e não há informações de quando haverá um lançamento ou sequer se o produto vai chegar a ser lançado.
Será esse prenúncio do fim do Android?
Com notícias e imagens do ARS TECHNICA e informações do Google.
O final do ano é o momento perfeito para aprender CSS com efeitos divertidos para o Ano Novo. Graças aos navegadores modernos, podemos fazer animações e efeitos interessantes e divertidos de forma leve e funcional. Que tal fazer um efeito neon divertido e interessante sem nenhum framework?
ATENÇÃO: Devido a quantidade de código e efeitos nesta página, pode apresentar lentidão se você for testar os exemplos abaixo em dispositivos móveis mais antigos (e até alguns mais recentes). Se você fizer o uso comedido, você não encontrará esse tipo de problemas.
Adicionando a Logo SVG
Para poder funcionar de forma leve, precisamos que a imagem que vamos adicionar seja em SVG. Dessa forma podemos manipular seus parâmetros de forma simples e adicionar efeitos.
Vários programas permitem exportar os objetos em SVG. Inkscape (que é de código aberto e gratuito), Illustrator ou CorelDRAW, todos eles possuem uma área de exportação específica.
No Illustrator, você pode usar a opção Exportar para Telas. Importante salientar que, para ficar com um melhor acabamento, coloque apenas contornos, sem preenchimento no objeto.
Opção de Exportar para Telas, no Adobe Illustrator CC
O resultado será um arquivo de extensão SVG. O interessante é que você pode abrir esse arquivo em qualquer editor de texto e ver os detalhes. Você deverá guardar esse arquivo para uso posterior no HTML.
Montando o HTML
Uma vez criado o SVG, precisamos montar o HTML. Para isso, basta criar a área e organizar as classes e ids de forma apropriada, ficando:
Em seguida, vamos colocar o SVG acima do h1. Para isso, basta copiar o código gerado acima do SVG. Em seguida, adicione a classe específica que vamos usar no CSS e mude (caso necessário) para uma id mais fácil de compreender.
Porém, para ficar mais legal, devemos usar uma tipografia mais apropriada. No Google Fonts podemos encontrar tipografias interessantes, com cantos arredondados, que nos darão resultados mais interessantes.
Uma vez escolhida a fonte, clique no Select this Font (no Google Fonts) e ele vai dar um código similar a este abaixo, que você deverá colocar dentro do header do seu HTML.
Neste momento precisamos pensar em instâncias. O Neon pode estar ligado ou desligado. Por isso, precisamos pensar nos objetos das duas formas.
Leia os comentários no código para entender o seu funcionamento.
<style>
/*
Configuração do container
onde ficará os Neons
*/
.area_neon{
background-color: #0F0F0F;
font-family: 'Nunito', sans-serif;
left: 0;
right: 0;
bottom: 0;
top: 0;
padding: 20px;
padding-top: 40px;
position: absolute;
}
/*
Base do Neon apagado (TEXTO).
Iremos simular um efeito as lâmpadas
de neon apagadas.
*/
.area_neon h1.neon{
font-weight: 400;
font-size: 7em;
/**
O filtro BLUR deve ser mantido em 0, porque
iremos usa-lo quando ligado.
Para a animação de transição funcionar
corretamente, ele precisa ser declarado
mesmo desligado.
**/
filter: blur(0);
/**
Para simular a lâmpada, colocaremos um
contorno bem suave, para delimitar o
objeto, porém com o fundo
quase transparente
**/
-webkit-text-stroke: 1px rgba(255,255,255,0.1);
color: rgba(255,255,255,0.1);
/**
O TextShadow e o BackgroundClip
irá servir para colocar um efeito de
profundidade no objeto
**/
text-shadow: -5px 5px 5px black;
-webkit-background-clip: text;
/**
O Transition é responsável por
adicionar uma sensação de animação
entre os eventos.
**/
transition: all ease 1s;
}
/**Texto com o Neon Ligado**/
.area_neon h1.neon.on{
/**
Será fundametal o desfoque para dar
a sensação de luminosidade.
**/
filter: blur(1px);
/**
Um objeto com luz precisa possuir seu
centro branco, caso contrário, vai dar
a sensação de que está apenas com um
sombreamento e não com luz.
Por isso, devemos manter a cor branca,
que vai representar o centro luminoso,
e a borda da cor que desejamos usar.
O TextShadow será a luminosidade do
ambiente vinda da luz do Neon.
O contorno e a sombra deverão ser
da cor que você escolher para o neon,
mas a cor do texto deverá ser sempre
branca.
**/
color: white;
-webkit-text-stroke: 1px #00FFB3;
text-shadow: 0 0 5px #CCFFF7, 0 0 200px #00FFDB;
-webkit-background-clip: none;
}
/**
O neon para a imagem SVG terá que ser
um pouco diferente, mas podemos
manter a mesma lógica.
**/
.area_neon svg.neon_img{
width: 50%;
margin: 0 auto;
/**
Ao invés de usarmos color, usaremos
o parâmetro FILL para poder determinar a cor
do objeto e o STROKE para a borda.
Porém usaremos as mesmas lógicas
usadas no Texto
**/
fill: rgba(255,255,255,0.1);
stroke: rgba(255,255,255,0.1);
filter: blur(0) drop-shadow(-5px 5px 5px black);
/**
Usaremos o drop-shadow aplicado no filter,
para poder ter o efeito similar ao do texto.
**/
transition: all ease 1s;
}
/**SVG com o neon Ligado**/
.area_neon svg.neon_img.on{
/**
Aqui aplicamos a mesma lógica usada
no texto, porém adaptada para o tipo de objeto.
**/
fill: white;
stroke: #F0FF00;
filter: blur(1px) drop-shadow(0 0 10px #F0FF00) drop-shadow(0 0 200px #F0FF00) ;
}
</style>
Ligando o Neon
Vamos usar o Javascript puro para ligarmos a luz. Tudo o que precisamos é adicionar on ao parâmetro classe das tags HTML correspondentes.
Para isso vamos criar a função turnOn():
<script>
function turnOn(){
var texto = document.getElementById("texto_neon");
texto.className = texto.className.concat(" on");
var imagem = document.getElementById("img_neon");
imagem.setAttribute("class", imagem.getAttribute("class").concat(" on"));
//Repare que temos que usar setAttribute no SVG. Isso porque o SVG não possui o mesmo comportamento de uma tag HTML comum
}
</script>
➡ Emojis estão alta na comunicação social e hoje são peças-chave em diversas mídias, sendo aplicadas mais e mais como uma espécie de linguagem universal. Mas afinal, de onde vieram os emojis e qual a diferença deles em relação aos antigos emoticons?
Para entender mais sobre os emojis e sua história, primeiro precisamos entender sobre charsets e como o sistema operacional compreende e padroniza as informações referentes ao texto.
Do Bit à Organização
No princípio era o bit, o bom e Velho Bit 😉. O caractere era traduzido diretamente de um conjunto de 1 byte e impresso no dispositivo de saída de acordo com as variações desse byte. Óbvio que falar que a letra A era equivalente a um conjunto de 1 e 0, logo se tornou ultrapassado e foi necessário codificar isso de forma mais inteligente. Com a popularização cada vez maior dos mainframes, os conjuntos de caracteres precisaram seguir padrões mais organizados e específicos para universalizar a escrita computacional. Foi nesse momento que foi criado o padrão hexadecimal para especificação de caracteres.
A programação hexadecimal, no início da era da computação, era muito usada para simplificar a compreensão de códigos. Posteriormente, com linguagens de programação, como o COBOL, a forma de escrita foi simplificada justamente a partir dos caracteres hexadecimais.
Obs. Para quem não está acostumado com o termo hexadecimal, se trata de um sistema numérico com base em 16 digitos. Diferente do sistema decimal mais comum, que vai de 0 a 9, o sistema hexadecimal passa pelos digitos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Através desse sistema, é possível criar uma variação maior e mais adequada de numerais, o que auxilia na definição de elementos, como neste caso, caracteres.
Porém, outros sistemas também foram usados para padronização de caracteres, como o próprio sistema decimal e o sistema octal. A partir dessa interpretação, foi criado nos anos 60 o primeiro documento oficial de padronização desses elementos, através de sistemas básicos, o ASCII (American Standard Code for Information Interchange).
Table ASCII
O ASCII consiste em um padronização e é conhecido como o sistema básico de codificação de caracteres. Como a computação moderna nasceu nos EUA, é de se esperar que o padrão ASCII cobriria muitos caracteres usados em seu idioma. Por isso, era necessário que essa padronização fosse regulamentada a partir de uma entidade mais internacionalizada. Por se tratar de glifos, algo que já era padronizado em máquinas de escrever e prensas tipográficas, nada mais natural que a responsável por essa padronização fosse a ISO (Organização Internacional de Normalização), que é composta por vários países. De pleno acordo, foi criado o padrão ISO 646, formalizado como o padrão US-ASCII, por usar uma base de caracteres ocidentais norte-americanos.
A partir daí o ISO formalizou diversas outras tabelas de codificação de caracteres, gerando uma enorme variação adaptada para cada região ou base de caracteres, havendo variações latinas, saxônicas e orientais. Como muitos países possuem idiossincrasias em seus caracteres, a quantidade desses padrões foram crescendo e gerando uma dificuldade de controle, resultando quase em uma despadronização. Se você é programador, provavelmente já deve ter tido muitos problemas com a Windows 1252, que é uma vertente da normalização ISO 8859-1 e já deve ter tido que converter alguns arquivos por problemas de caracteres, seja no banco de dados ou na interpretação da leitura de arquivos.
O Consórcio Unicode
Visto que o ISO não era padronizado exatamente por uma organização da área de tecnologia, algumas questões acerca de caracteres ficaram insolúveis ou eram demasiadas burocráticas para fazer determinadas atualizações. Por isso, diversas empresas de tecnologia se juntaram para organizar um consórcio mais específico e organizado para uma diversidade maior de caracteres, em padrões adequados para a computação.
O Unicode (Universal Code) foi criado para organizar caracteres do ponto de vista mais computacional e adequado, baseado em experiencias anteriores da Xerox (sim, saíram muito mais coisas de lá do que apenas a interface gráfica). Fazem parte do Unicode empresas como a Adobe Systems, Apple, Facebook, Google, Huawei, IBM, Microsoft, Oracle Corporation, Yahoo! e várias outras que entram e aparecem, ou simplesmente seguem essas regras. Essa universalização foi fundamental para a criação de padrões que são altamente usados por praticamente todas as empresas no mercado de tecnologia. Sem dúvida, se você é programador ou designer, já deve ter usado constante, ou buscado por ele, o padrão UTF-8.
UTF-8 significa Unicode Transformation Format de 8 bits. É um padrão que, além de dar muito espaço para criação de caracteres, também é totalmente compatível com o padrão ASCII, tornando tudo mais simples e descomplicado para codificação adequada de caracteres. Existem outras codificações UTF, mas, por regra, o último numeral representa a quantidade de bits da codificação e, claro, quanto mais bits, mais espaço para adição de novos caracteres.
A Comunicação Social
Se por um lado haviam engenheiros desenvolvendo melhores formas de entrada e saída de caracteres, por outro a internet trouxe uma nova forma de se comunicar. Graças a velocidade com que as conexões foram ficando mais ágeis, diminuindo a distância entre os países, sistemas de chat foram ficando cada vez mais populares. Do antigo BBS ao mIRC, mais pessoas digitavam e buscavam formas mais simples e rápidas de demonstrar intenções e rostos a partir de padrões visuais. Foi daí que surgiram os famosos emoticons.
Emoticons (emotion icon) foi o termo dado a pequenas figurinhas que podia-se fazer a partir de representação com caracteres. Quem nunca usou o famoso 🙂, para representar felicidade, ou 😉, para mandar uma piscadela charmosa? Isso acontece porque nosso cérebro é perfeito para reconhecer padrões e podemos criar assimilações de diversas expressões ou situações.
Logo, o emoticon se tornou algo popular, por se tratar de uma forma moderna e mais expressiva de comunicação. Se tornaram cada vez mais detalhadas e com mais caracteres e, muitas vezes, com caracteres pouco conhecidos, como ( ͡° ͜ʖ ͡°), ¯\_(ツ)_/¯, (╬ ಠ益ಠ) e até alguns que exigiam mais de uma linha e espaços de caracteres iguais.
Visto essa popularização, programas como MSN Messenger (mais tarde renomeado para Live Messenger), ICQ, Chat da UOL, dentre outros, começaram a introduzir ícones mais complexos que representassem essas expressões. Emoticons ganharam um status mais visual e reconhecível na comunicação e obtiveram o apelido de smiles, termo importado a partir do famoso símbolo Smiley, criado pelo artista gráfico Harvey Ball, e seguindo a mesma lógica estética.
Agora mais complexos, em PNG, coloridos e até animados, os emoticons se tornaram elementos obrigatórios na comunicação em programas de chats modernos.
Emoticons do Live Messenger – smileys
E, Finalmente, os Emojis
Uma vez que os emoticons fizeram muito sucesso em chats e se tornaram uma forma padrão de comunicação na internet, as empresas que correspondem ao consórcio Unicode resolveram organizar para que os emoticons fizessem parte também de suas codificações de caracteres, a fim de que as pessoas pudessem receber emoticons padronizados e que as expressões fossem mais próximas possíveis uma das outras, para facilitar o entendimento. Daí surgiram os emojis.
Emoji é um termo japonês para pictograma, que ao pé da letra seria uma junção de imagem e letra e fora criado em 1999 por Shigetaka Kurita para uma plataforma móvel de internet. Em 2009, vendo a necessidade de melhorar a integração com seus dispositivos móveis, a Apple e a Google fizeram uma requisição ao consórcio para inclusão dos emojis dentro dos sistemas Unicode. A versão 6.0 do padrão Unicode, em 2010 trouxe ao mundo a integração com os emojis.
Com a popularidade do emoji pela adoção das frabricantes, a versão 7.0 do Unicode trouxe um pacote com 250 glifos inspirados em tipografias como Webdings e Wingdings. Até a finalização deste post, o Unicode Emoji estava em sua versão 11.0 (beta) com uma lista “xigante” de emojis vinculados ao UTF.
Dessa forma, é importante deixar claro que a inclusão de um novo emoji depende do requerimento de uma fabricante a aprovação de todo consórcio. Dessa forma, é criada uma padronização na visualização desses emojis. Todavia, ainda fica pendente a implementação desse emoji no sistema operacional usado pela fabricante e na atualização desse sistema. Por isso acontece de às vezes emojis enviados pelo iOS não serem visíveis em um Android, ou vice-versa, principalmente pelo problema de fragmentação deste último.
😚🤩🤯🤬💩🦔🦉👩💻🧛♀️🧜♀️🧝♀️🙏
A Aparência dos Emojis
Apesar do acordo dos emojis especificar por escrito quais emojis podem ser aplicados, cabem as fabricantes disponibilizarem a aparência estética desses emojis. Ou seja, cada Sistema Operacional, ou determinados dispositivos e aplicativos, possuirão seus estilos de emoji, adequando-se ao design de sua aplicação. Isso as vezes causa problemas de interpretação, pois alguns emojis são extremamente diferentes entre fabricantes, como no caso do emoji do ET 👽 e do Robô 🤖.
Exemplos de variação de emojis do mesmo tipo
Fazendo parte também do consórcio, mais recentemente a Adobe resolveu incorporar uma nova estrutura de font para a utilização de emojis personalizados. As fonts SVG foram especificadas por outro consórcio muito conhecido, a W3C, onde especificou o uso de SVG à estrutura de fonts vetoriais. Apesar de não ter sido muito adotada para web, e já estar sendo quase abandonada, a Adobe viu nessa estrutura a chance de lançar famílias tipográficas inteiras baseadas em emojis, que é o caso do EmojiOne. Porém existem também diversos serviços e bibliotecas que substituem os glifos específicos por um padrão personalizado de emoji, no caso para quem pretende usar algo mais personalizado para sistemas web.
A Adobe na sua atualização de 2016, trouxe algumas novas famílias tipográficas baseadas em emojis.
Concluindo
Os emojis são o resultado de uma evolução natural da comunicação online. Elas são formas de demonstrar emoções e ideias com apenas um caractere e da forma mais universal possível. Não se trata simplesmente de uma terra sem lei, pois todos pertencem a um consórcio específico da área de tecnologia e as empresas devem seguir esses padrões para o funcionamento correto em navegadores e sistemas operacionais.
De código aberto, qualquer um pode acessar o site do Emoji Unicode e verificar suas tabelas e documentações para criar e implementar as próprias imagens ou comportamentos em seus sistemas.
Se você gostou deste post, compartilhe e, se quiser, deixe seu comentário. 😘
Muitas pessoas, principalmente os menos experiêntes, da área de design não conseguem imaginar o mundo antes da editoração eletrônica. E, realmente, quem não acompanhou sua evolução, pode acreditar que o WYSIWYG (What You See Is What You Get) é algo absoluto. Mas a verdade é que há limitações técnicas que impedem que o que seja mostrado no monitor seja exatamente o que vai ser impresso.
Apesar dessas limitações, os softwares de ilustração e editoração tentam simular situações referentes a cores, formas e até possíveis erros. Já falamos, inclusive, sobre cores e como manter a fidelidade aqui mesmo no site. Porém, nem sempre essa simulação é perfeita, mas faz-se necessário indicar ao profissional possíveis erros. Por isso, o Illustrator pode apresentar comportamentos que podem parecer bugs, mas que na verdade são apenas alertas e devem ser interpretados como tal.
Um dos casos mais comuns e extremamente discutido nos sites de tecnologia é o caso de uma “borda branca” que fica ao redor de alguns elementos mais escuros ou pretos.
Detalhe de Borda Esbranquiçada que fica ao redor de objetos pretos
Diferentes tipos de preto
Primeiro precisamos reforçar: isso não é um bug. É um alerta do comportamento esperado para um determinado tipo de preto.
Na impressão existem diferentes tipos de preto. Os mais conhecidos são referenciados como preto simples, preto composto e preto absoluto.
Como já sabemos, quem trabalha com impressão costuma trabalhar no modo CMYK (ou outro modo subtrativo), onde temos a cor aplicada a partir de quantidade de pigmento no papel. O preto simples é aquele que possui apenas o pigmento preto em sua composição. Porém, o tom desse preto pode variar de acordo com a marca do pigmento, papel onde vai ser aplicado e da calibração da impressora. Todas essas variações acabam por causar uma sensação diferente de preto em cada impresso. Com o tempo, técnicas de calibração e padronizações, essa diferença tem diminuído, mas ainda existe. Nos softwares de edição, esse preto geralmente é representado por um cinza muito escuro. Apesar disso não ser uma simulação absoluta, essa técnica é usada para que o profissional saiba onde está sendo utilizado o preto simples.
Por outro lado, as vezes a densidade do preto não é apropriada para o projeto, ou um erro de registro pode fazer com que fique uma borda branca ao redor do elemento. Existe várias formas para evitar erros visíveis de registro, como trapping ou, neste caso, sobreposição. Então o preto composto é uma técnica usada para diminuir erros de registro ou intensificar o tom do preto, onde é adicionado uma quantidade razoável de outros pigmentos nos elementos desejados da imagem.
Porém, há pessoas que exageram, aplicando o preto absoluto. O preto absoluto nada mais é do que aplicar 100% de todos os pigmentos disponíveis. Não é uma técnica recomendada, principalmente em alguns tipos de papeis, por poder causar borrões, relevo ou outros problemas que variam de acordo com a técnica de impressão usada.
Variações de Tipos de Pretos
Como Corrigir Esse “Problema”?
Isso na verdade não é um problema do Illustrator, é apenas um indicador. É a forma do Illustrator alertar o usuário que a impressão desse elemento pode causar erros de registro. Ou seja, não significa que essa borda vai aparecer, mas há boas chances de que, se ocorrer um erro na impressão, esse problema aparecerá.
Erros de registro ocorrem quando, por algum motivo, as chapas de impressão não estão bem alinhadas, causando um posicionamento errado do local onde a cor foi originalmente planejada.
Primeiro vale lembrar que isso só acontece em documentos abertos no modo CMYK. Então se você não está fazendo um documento para impressão, troque para o modo RGB e você não vai ter esse problema (Arquivo > Modo de Cor de Documento > RGB).
Porém, a forma ideal de resolver esse problema, é você aplicar uma quantidade razoável de outros pigmentos ao preto que você está utilizando. Por exemplo, se você está usando o preto para contornar algo magenta, acrescente cerca de 20% a 50% de magenta para esse objeto, o mesmo pode ser feito para outras cores.
Apesar de ser uma solução rápida para diversos casos, principalmente onde há muitas cores próximas, uma terceira possibilidade, porém não muito ideal, devido aos problemas já supracitados, é usar o preto absoluto, onde simplesmente é colocado C=100, M=100, Y=100, K=100 ao preto que deseja aplicar.
Melhorando a Qualidade da Compreensão de Cores
Se por um lado pode parecer incômodo esse alerta, por outro é ainda mais interessante que você busque uma visualização melhor do material que vai ser impresso.
Para isso, o Illustrator nos trás algumas configurações referentes a forma como o preto é demonstrado.
Para acessar essas configurações, vá ao meno Editar (ou Illustrator, no MacOS) > Preferências > Aparência do Preto. Nessa tela, você pode especificar como vai ser o comportamento do preto na impressão ou exibição. É extremamente recomendado que, se você vai trabalhar com algo que vai ser impresso, marque as opções como Exibir Todos os Pretos Com Precisão. O resultado vai ser uma emulação da diferenciação dos tipos de pretos, de acordo com a porcentagem de pigmentos que você aplicar.
Com tudo isso, podemos concluir que o caso da borda, queixa muito comum de usuários do Illustrator, nada mais é do que o indicador de comportamento de preto para impressão. É um caso específico do uso em modo CMYK e é bem-vindo para uma melhor qualidade do material final impresso. É interessante usar a visualização de preto composto, unido a visualização de cores de prova (Visualizar>Cores de Prova), para garantir um controle mais ideal e fidelidade.
Compartilhe este post com todos da comunidade de Illustrator ou com aqueles que você imagine que vai tirar um bom proveito das informações aqui passadas.
Você conhece o Adobe Capture CC? É um aplicativo mobile criado pela a Adobe que permite capturar informações do mundo real para serem usadas dentro de sua biblioteca da Adobe.
Ele é a união do Adobe Color CC (antigo Kuler), Shapes, Brushes e Hue em um único aplicativo, porém com melhorias consideráveis.
Através do Capture CC você pode criar novos pincéis, vetorizar desenhos reais, criar paletas de cores e filtros para fotos. Os objetos gerados são compartilhado a partir da biblioteca do Adobe Creative Cloud e pode ser utilizado em programas como Photoshop, Illustrator, InDesign, Premiere e outros, além dos apps móveis.
O Adobe Capture CC está disponível para iOS e Android para todos que possuem a suite Adobe profissional ou estudante.
Quem nunca imprimiu uma cor e apareceu outra completamente diferente? Cada dispositivo possui um modo diferente de interpretar as cores. Este artigo foi feito para explicar como funcionam as cores e como garantir uma melhor fidelidade entre tela e impressora.
Existem várias formas no mundo de se gerar cores. É possível misturar tinta, luz ou simplesmente causar uma ilusão de ótica por aproximação. Quimicamente, aprendemos, ainda no pré-escolar, o conceito de cores primárias, onde misturamos o azul, vermelho e amarelo para ter as cores secundárias e terciárias. Todavia, o conceito de cores primárias mudam de acordo com o meio em que a cor vai ser exibida. Para compreender quais são esses modos de cor, precisamos primeiro entender como funcionam os principais dispositivos usados por designers gráficos, para geração de cores, os monitores e as impressoras.
Monitores
A grande maioria dos monitores e displays LCDs usados hoje em dia ainda trabalham da mesma forma, mas com tecnologias diferentes que foram sendo implementadas conforme a evolução tecnológica e barateamento dos custo de produção. Basicamente, tratam-se de filamentos de metal acomodados em uma grade matricial. Cada campo dessa matriz possui 3 partículas de cristais líquido, que ao serem eletricamente estimuladas adquirem a característica de absorção de uma determinada área do espectro de luz e se solidificam, deixando vazar o restante. Cada uma das 3 partículas é responsável por deixar passar um pedaço do espectro, baseado no que chamamos de cores primárias da luz, que são vermelho, verde e azul (RGB). Aumentando ou diminuindo a solidificação, mais luz ou menos luz é absorvida. Porém, o cristal líquido não emite luz própria e, por isso, precisa ser retro-iluminado por uma luz branca, que vai ser filtrada por pelo LCD.
Lembrando que essa é um explicação bem simplificada e o que diferencia na qualidade das cores, hoje em dia, é o tipo de retroiluminação. Aí se é OLED, AMOLED, IPS, é uma outra história.
Impressoras
As impressoras, diferente dos monitores, jogam tinta (ou produzem tinta a partir de pigmentos) em pontos muito, muito próximos, mas não chegam a misturar os pigmentos (a não ser que ele sobreponha uma tinta na outra, mas isso não é bem misturar). Esses pontos, chamados de retículas, são fixados no papel (ou no material escolhido), que de tão próximos faz parecer que eles formam outra cor. Isso funciona porque a luz do ambiente, quando bate nesse pigmento, absorve um intervalo do espectro de luz e reflete outro. Esse intervalo chega aos olhos e são interpretados. As cores básicas para impressão são ciano, magenta e amarelo, que, por justamente ser reflexão e não emissão, são as cores secundárias do RGB (e vice-versa). Todavia, como os tons não emitem feixes, mas sim os refletem, eles acabam sendo mais fracos que as cores dos monitores, dependendo da quantidade e tom de luz do ambiente para prover uma boa leitura. Quando colocamos pontos cianos, magentas e amarelos próximos, temos uma sensação amarronzada, meio acinzentado escuro e, por isso, é necessário um complemento de pigmento preto, tornando o conhecido CMYK (onde K, outrora chamado de Bk, é uma letra usada para se diferenciar do Blue, representa o blacK).
Concluímos dessa forma que os monitores trabalham com modelos de cores aditivos (geralmente o RGB), por adicionar luz, e o impresso com modelos de cores subtrativos (geralmente o CMYK), por retirar luz.
Deixar RGB para monitor e CMYK para impressão é suficiente para fidelidade das cores?
A resposta é não. Isso porque você deve levar em consideração diversos outros fatores. Cada aparelho é de uma marca diferente e possui uma tecnologia diferente e ainda é calibrado de uma forma diferente. Essa forma diferente de calibração acaba causando diferenças que muitas vezes comprometem o resultado do trabalho.
O designer deve, em primeiro lugar, calibrar o sue monitor. Essa calibração é feita de forma pessoal, e depende do ambiente em que você trabalha e da capacidade de seus olhos de interpretar as cores. Para fazer a calibração, geralmente usa-se um aplicativo próprio do sistema operacional. Essa calibração gera um arquivo icc, ou icm, que é conhecido como Perfil de Cores.
Gamut de Cores
Cada aparelho possui um perfil de cores padrão. Se você abrir agora o gerenciador de cores do sistema operacional, poderá ver alguns perfis de cores configurados. Isso é necessário porque cada equipamento tem uma quantidade diferente de cores que pode gerar / interpretar, dependendo de sua tecnologia. Essa quantidade de cores é representada em um mapa de cores o qual chamamos de GAMUT. Que não somente são diferentes entre si por quantidade, mas também por capacidade de exibição de determinadas cores. Por exemplo, o gamut CMYK, por padrão, é menor do que o RGB, mas possui uma quantidade muito maior de variações de amarelo do que o modelo aditivo. O que usamos para atingir esses tons que estão fora do gamut do CMYK, e até do RGB, na impressão, é a adição de Cores Especiais, que são tintas ou pigmentos fabricados com uma cor específica e, geralmente, somados ao CMYK.
Porém, essa diferença de cores gera uma problemática muito grave que é a diferença absurda de cores entre dispositivos diferentes, mesmo que seja do mesmo modelo. Para web, por exemplo, quando queremos que todos os monitores exibam as cores mais próximas possíveis do planejado, utilizamos as Cores Seguras, que, por conta dessa necessidade, acaba por diminuindo ainda mais o gamut de cores utilizáveis.
Fidelidade de Cores
Para garantirmos uma melhor fidelidade de cores na impressão, precisamos configurar o nosso dispositivo de produção para que tenha o mesmo perfil de cores que o dispositivo de impressão. Ou seja, precisamos configurar o gerenciamento de cores de nosso software de edição gráfica com o perfil de cores da impressora. Obviamente que precisamos saber, enquanto estamos produzindo o material finalizado, em qual gráfica será impresso. Para conseguir esse arquivo, o melhor é você ligar para a gráfica
– Gráfica Enrolada, bom dia! Em que posso ajudar?
– Olá, eu gostaria de saber qual o procedimento para impressão e se vocês podem me mandar o perfil de cores.
– Ah, um momento que vou perguntar para o pessoal de produção.
(música de Beethoven)
– Senhor, é só enviar em CMYK mesmo.
– Não, não, amiga, estou querendo saber qual o perfil icc, queria que vocês me mandassem para eu poder trabalhar melhor nas cores.
– Um minuto, Senhor.
(música de Beethoven)
– É isso, mesmo, CMYK.
– Tá OK, obrigado.
Se isso acontecer com você, troque de gráfica. Se por acaso for uma gráfica parceira, vá até lá e explique o que é um perfil de cores. Muitas vezes, esses perfis de cores são geradas durante a calibração da impressora e podem mudar de calibração para calibração e até com a marca da tinta/pigmento que a gráfica utilizar.
Todavia, pode acontecer de gráficas seguirem padrões. Nas configurações dos aplicativos Adobe, vocês poderão ver padrões de perfis de cores CMYK, como FOGRA 39, US WebCoated, dentre outros. Se a gráfica mandar o perfil de cores, vocês devem carregar o perfil de cores CMYK em seus softwares gráficos para finalizar as imagens, se elas indicarem um padrão, basta selecionar qual padrão ela pediu. Atenção que vocês devem também configurar também o Cinza, para garantir a fidelidade de preto, de acordo com as indicações da gráfica. Lembre-se de também atribuir o perfil de cor RGB de seu monitor (ou o que você calibrou), caso esteja trabalhando com um impresso.
Perfis de Cor Incorporados
Arquivos de imagem possuem perfis de cores incorporados, por padrão. Então, quando forem utilizar um software gráfico de impressão, vocês devem incorporar o perfil que está configurado no aplicativo ao arquivo. Quando você incorporar (ou converter) para o perfil de impressão, na mesma hora o software irá reconfigurar a calibração de cores e se adaptará ao do perfil, mudando as cores da imagem, tornando-a mais próxima possível ao resultado impresso.
A imagem deve ser finalizada já com o perfil incorporado, fazendo as adaptações necessárias nas cores e luminosidade.
Incorporações de Perfis na Exportação do InDesign
Uma vez com seu arquivo finalizado e todos os perfis de cores configurados nas imagens que serão utilizadas pelo InDesign, a exportação para PDF (que é o mais comum) também deve se atentar a incorporação do perfil de cores. Ao exportar, na guia Saída, deve-se marcar para converter em destino. Essa opção não é 100% necessária, se você configurou corretamente antes o InDesign enquanto trabalhava, e os arquivos de imagem já tem incorporados os perfis, mas é uma segurança a mais que tudo vá correr bem. O destino escolhido, obviamente, deve ser o perfil CMYK que foi enviado / recomendado pela gráfica. Por padrão, o InDesign já deixa marcado para incluir o perfil, o que, obviamente, é o mais recomendado de se fazer.
Concluindo
Se você busca fidelidade nas cores de impressão, fique atento a manter sempre o seu monitor calibrado e bem configurado. Se usa Windows, lembre-se que o monitor deve ser instalado ou reconhecido, nada de Monitor Plug And Play. Faça regularmente calibragem no seu ambiente de trabalho e sempre incorpore os perfis de cor enviados / recomendados pela gráfica em seu material impresso.
Lembre-se que a cor é essencial para um projeto gráfico, e para atingir o resultado esperado, você precisa planejar e reconhecer muito bem a cor.
Há pouco tempo (da publicação deste texto), uma imagem começou a gerar certa polêmica nas mídias sociais, um vestido azul… ou branco?
A dúvida que paira é porque algumas pessoas enxergam branco e outras azul e qual, afinal, é a cor do vestido?
Muitas teorias pairam acerca disso. Seriam estas: o quanto o ser-humano está feliz, algo biológico e como os cones se comportam em cada indivíduo, etc. Mas, na verdade, a resposta mais provável está na psicodinâmica das cores.
O que é cor?
A cor é a forma como um indivíduo interpreta uma determinada frequência de um feixe luminoso. A cor não é um fenômeno físico, mas um fenômeno individual. Cada ser-humano interpreta as cores de forma diferente.
A interpretação das cores se dá por três formas: biológica, cultural e sensorial. Ou seja, cada cor pode ser interpretado de acordo com fatores genéticos, com o ambiente social em que vivemos e/ou com a história de vida do ser humano.
Biologia
Existem dois grupos de células, cones e bastonetes que, unidas às células ganglionares, passam passam a informação luminosa para o cérebro. A teoria mais aceita é que os bastonetes interpretam a luminosidade, enquanto o três diferentes tipos de cones cuidam de interpretar as frequências dos feixes, vermelho, verde e azul. Todavia, isso não explicaria certos tipos de daltonismo. Por isso, há outra teoria que diz que há somente dois tipos de cones e não três, um que interpreta amarelo-azul e outro verde-vermelho.
Cultura
O meio em que cada ser-humano vive muda a forma como este enxerga e nomeia as cores. Se para a maioria a água é azul, uma outra cultura pode ter dado outra cor para a associação, indo de acordo com o que a sociedade enxerga. A água, então, poderia ser considerada verde ou vermelha, de acordo com o ambiente. Em alguns casos, algumas comunidades podem responder que depende da hora do dia. Independente do significado que cada cultura dá a uma cor, a interpretação das nuâncias também varia. Saber se algo é marrom ou laranja, verde piscina ou azul piscina, roxo ou violeta, vinho ou carmim, muda de acordo com o que o meio aceita e isso cria um “carimbo” na mente do indivíduo.
Fenômeno Sensorial
A interpretação das cores é relativa em cada indivíduo de acordo com o seu cotidiano. Simplesmente não somos capazes de reconhecer coisas que não conhecemos. A instrução visual é desenvolvida na infância e, quando adultos, a maioria do aprendizado é feito através de assimilações. Como, por exemplo, a associação de comparar um objeto que nunca viu com um outro objeto. O mesmo acontece com as cores. Criamos associações frequentes baseadas em nossa história de vida.
Na imagem abaixo podemos ver duas imagens do Homem-Aranha, uma do segundo filme do Sam Raimi e a outra, mais recente, do filme de Marc Webb. Se fosse perguntado qual a cor do uniforme do Homem-Aranha, a resposta seria claramente azul e vermelho.
A verdade é que as cores usadas na cena, causadas pelo filtro, e até mesmo as cores ao redor não são capazes de mudar, pelo menos não conscientemente, a ideia que sua herança de vida, seu conhecimento adquirido por anos, dá de que a roupa do Homem-Aranha é azul e vermelha.
O filme Jogos Mortais – O Final é um outro bom exemplo, onde o sangue é rosa, pois esta cor trabalha melhor com a tecnologia 3D, todavia a sensação do espectador é que o sangue é vermelho, pois este tem um conhecimento prévio de que se trata de sangue e cria a associação com a cor.
Afinal de que cor é?
Azul. Isso pode ser comprovado através de outros blogs de notícias e Tumblr da moça que publicou a imagem original.
Então porque alguns enxergam branco?
Pela internet há tentativas de explicar usando a diferença biológica de cada indivíduo (quantidade de cones e bastonetes) e até mesmo a diferença da calibração dos displays (monitores e celulares). O ponto falho dessas propostas de explicação é que algumas pessoas mudam sua opinião após algumas observações ou começam a notar outra cor, quando a cor predominante é visto ao lado. Além disso, as diferenças não se resumem a computadores diferentes. Pessoas diferentes, no mesmo dispositivo, alegam identificar cores diferentes.
O motivo pelo qual algumas pessoas enxergam o vestido branco é por uma causa sensorial, pela identificação do objeto em relação a outros tons e experiências anteriores. Essas experiências fazem com o cérebro conclua que a cor é branca, mesmo estando em um ambiente em que outros fatores alterem a cor do objeto. Uma experiência anterior muito comum que deve ter sido gravada no cérebro para dar essa sensação é o por do sol.
A respeito da imagem acima, temos plena convicção de que o cachorro é branco. Sabemos disso, e se nos perguntarem a cor do cachorro, ninguém vai dizer que o cachorro é azul. Temos consciência e inconsciência de que ambientes no por do sol, que tem esse contraste, causam tons azulados em coisas que são brancas. O cérebro, já treinado com esses tons, cria a resposta instantânea de que o objeto é branco.
Além disso, as cores predominantes na imagem são justamente cores opostas, que são complementares entre si, na escala cromática. A cor complementar tende a anular a outra quando sobreposta por meio de cores aditivas (emissão de luz), a confusão dificilmente aconteceria em um material impresso, por exemplo.
Por que nem todos enxergam branco?
Nem todos possuem uma história de vida igual. Algumas pessoas simplesmente não tiveram tantas experiências com esses tons de cores ou possuem outras experiências sensoriais que mudam a forma como é observada. Designers e artistas plásticos, por exemplo, acostumados a identificar pequenas diferenças em tonalidades de cores, tendem a ver o azul, pois identifica mais rapidamente a qual escala cromática pertence aquele tom.
Então pessoas que tem experiência com cores conseguem identificar pequenas nuâncias de cinza, como cinzas azulados, cinzas amarelados, etc. Pois isso é usado, inclusive, para ajustar materiais impressos de acordo com a forma com que a gráfica coloca a tinta.
Com o tempo a sensação da cor pode mudar, pois os olhos se acostumarão com os tons e se adaptará para compreender a imagem.
E quanto ao preto e o dourado?
Os tons pretos e dourados é mais por uma questão cultural do que sensorial. Claro que existe a questão do tom alaranjado da imagem ser reconhecido pelos olhos e a pessoa tender a aceitar que é preto. Mas a realidade é que o monitor não exibe dourado, mas marrom, logo, afirmar dourado é uma forma de falar por conta dele possuir tons que são comuns em objetos dourados. Então chamar aquele tom de marrom, dourado, ou preto é mais pela percepção cultural que se tem daquele tom, apesar de possuir um pouco da questão sensorial.
Concluindo
A capacidade do ser-humano de identificar cores em diferentes ambientes é o causador da confusão se o vestido é branco ou azul. O que fará com que uma pessoa identifique ou não o tom na imagem depende de suas experiências anteriores e meio social. Não tem nada de sobrenatural e anormal, mas é um efeito bem interessante que pode, deve e é aplicado em muitas áreas do design e artes.
