Os gráficos SVG do Adobe Illustrator CC raramente são entregues a designers digitais com fundos. Normalmente, os gráficos flutuam acima de qualquer plano de fundo existente no site, aplicativo, animação ou contexto interativo.
Antes de discutir o que está envolvido na eliminação do fundo por trás da arte em SVG, concentre-se em aplicar transparência a gráficos SVG. Você precisa definir a opacidade da arte usando o painel Transparência. Por exemplo, 50 por cento de transparência foi aplicada à forma amarela na figura e você pode ver a transparência em vigor. E sim, essa imagem é um arquivo SVG, com todos os recursos leves, de carregamento rápido e infinitamente escalonável integrados ao SVG.
Uma forma SVG semi-opaca sobre um fundo colorido.
Os designers estão acostumados a pensar em termos de fundos que se tornam transparentes ou permanecem visíveis. Pensamos em eliminar um fundo. As imagens PNG e GIF funcionam assim - você cria com um plano de fundo ou escolhe um plano de fundo transparente em um programa como o Illustrator ou Photoshop para criar esse plano de fundo.
Com GIFs e PNGs, você pode ter uma cor transparente que permite que as cores de fundo ou imagens apareçam nas páginas da web. Mas a lógica de eliminar o fundo é diferente em um arquivo SVG e em PNGs e GIFs. Basicamente, não existe um gráfico SVG com fundo não transparente porque não existe fundo. Em outras palavras: por padrão, os gráficos SVG são salvos e exportados sem plano de fundo.
Então qual é o problema? Bem, é fácil acidentalmente acabar com um fundo transparente ao salvar ou exportar arquivos SVG! A figura a seguir pode ter um fundo branco ou transparente. Você não pode dizer apenas olhando para a tela do Illustrator; você deve escolher Exibir → Mostrar grade de transparência.
Este gráfico pode ter um fundo branco ou pode não ter nenhum fundo.
Com o Transparency Grid habilitado, como mostrado, você pode ver que o pássaro tem um retângulo branco atrás dele, e que o fundo branco irá “combinar” com o gráfico se você salvar o arquivo como um SVG ou exportá-lo como um SVG.
A visualização da grade de transparência revela um retângulo branco atrás do gráfico.
Deixe-me enfatizar e iluminar isso de outro ângulo. Quando vou exportar esta imagem como um SVG, a caixa de diálogo Exportar para telas, mostrada, não tem uma opção para selecionar uma cor de transparência.
Você não pode escolher uma cor de transparência em SVG porque não há cor de fundo.
Freqüentemente encontro designers que insistem em colocar um retângulo de fundo atrás de sua arte destinada a SVG para que possam ver como o gráfico ficará ao ser coberto por uma cor no meio de destino (como uma página da web ou aplicativo). Tudo bem, eu os advirto, contanto que você se lembre de remover o retângulo de fundo ao salvar ou exportar o SVG. E no mundo atual de alta pressão, alta produtividade e resposta rápida, quem precisa de mais uma coisa para se lembrar?
A melhor solução é definir uma “grade” de transparência com uma única cor que corresponda ao ambiente no qual o gráfico será colocado. Por que coloco a grade entre aspas? Porque essa técnica engana: com ela, você define as duas cores da grade como a mesma cor, simulando efetivamente uma página da web ou a cor de fundo de um aplicativo.
Para usar essa técnica para criar um plano de fundo personalizado enquanto desenvolve a arte em SVG, siga estas etapas:
Escolha Arquivo → Configuração do documento.
Na guia Geral, localize a seção Opções de transparência e impressão sobreposta.
As mudanças que você deseja são controladas nesta seção da caixa de diálogo.
Não se preocupe em definir o tamanho da grade porque você está efetivamente dispensando a grade.
Na seção Grade de transparência da caixa de diálogo, clique no primeiro dos dois painéis de cores da grade e escolha uma cor de fundo usando uma das várias paletas de cores no pop-up Cores mostrado na figura a seguir.
A propósito, nenhuma dessas paletas de cores é particularmente compatível com o digital. Não há paleta para RGBA, hexadecimal ou outros formatos de cores padrão da web, mas o conta-gotas seletor de cores pode ajudá-lo a obter a cor de fundo que você deseja combinar.
Definindo uma cor de fundo de visualização com uma grade de transparência.
Selecione o segundo dos dois painéis de cores da grade e atribua a mesma cor a ele.
Lembre-se de que você pode usar o conta-gotas com seletor de cores para selecionar essa cor.
Clique em OK na caixa de diálogo Configuração do documento.
Tudo o que fiz no conjunto de etapas anterior foi definir como a grade de transparência é exibida quando está ativada . Portanto, se a sua grade de transparência não estiver habilitada, escolha Exibir → Grade de transparência.
Nesta figura, selecionei a prancheta com o gráfico e estou visualizando o projeto contra uma cor de fundo simulada.
Visualização da cor de fundo de saída com uma grade de transparência personalizada.
Quando a transparência (como 50 por cento de opacidade) ou efeitos de transparência, como cor queimar, escurecer ou multiplicar, são aplicados a gráficos SVG, esses efeitos retêm a escalabilidade de SVG.
Esta figura mostra o mesmo gráfico - três retângulos semitransparentes laranja - exportado como um arquivo PNG (parte superior) e um SVG. Você pode ver como a qualidade do arquivo PNG diminui quando eu o amplio em um navegador. O que você não pode ver é que o arquivo PNG é quase duas vezes maior que o SVG.
Comparando a saída PNG (topo) com SVG quando a transparência é aplicada
Aqui está um resumo das vantagens de usar SVG para efeitos de transparência:
A propósito, se você está curioso sobre a aparência do código SVG gerado para este conjunto de retângulos e como é fácil para um desenvolvedor de aplicativos ou web trabalhar com ele, aqui está o código para a primeira das três caixas SVG , com 60 por cento de opacidade aplicada:
<= "" code = "">
Finalmente, se você quiser que o plano de fundo do seu SVG tenha um preenchimento colorido, isso também pode ser feito nas Propriedades do documento cardápio. Basta clicar na faixa branca posicionada ao lado de Cor de fundo. Um seletor de cores aparecerá na tela.
É importante observar que o plano de fundo do SVG continuará transparente, apesar do preenchimento de cor, desde que a coluna A (que representa o transparência da cor) permanece em 0. Se quiser que o documento tenha essa cor de fundo (mesmo nas exportações), você pode aumentar essa coluna de 0 para 100.
E isso deve bastar para trabalhar com planos de fundo no Inkscape. Se você tiver alguma dúvida que não foi respondida neste post, deixe um comentário abaixo e responderei se puder ajudar.
Você pode usar a ferramenta Snapshot no Adobe Acrobat CS5 para selecionar texto e imagens e criar uma imagem de uma determinada área em um arquivo PDF. O resultado é comumente referido como uma captura de tela de uma seção em um arquivo PDF. O resultado é uma imagem, e seu texto não é [...]
Projetado para pesquisadores e cientistas, os recursos de medição do Photoshop CC são bastante poderosos. Você pode medir qualquer coisa e contar o número de qualquer coisa em uma imagem técnica, talvez de um microscópio ou telescópio. Se você sabe o tamanho exato de qualquer elemento em uma imagem, você pode descobrir quase tudo [...]
Ao usar as ferramentas Liquify no Adobe Creative Suite 5 (Adobe CS5) Illustrator, você pode dobrar objetos - torná-los ondulados, pegajosos ou pontiagudos - criando distorções simples a complexas. As ferramentas Liquify podem realizar todos os tipos de distorções criativas ou malucas (dependendo de como você as encara) em seus objetos. Vocês […]
Quando você tem texto em seu projeto Adobe XD, pode começar a alterar as propriedades do texto. Essas propriedades incluem Família da fonte, Tamanho da fonte, Peso da fonte, Alinhamento, Espaçamento entre caracteres (kerning e rastreamento), Espaçamento entre linhas (entrelinha), Preenchimento, Borda (traço), Sombra (sombra) e Desfoque de fundo. Então, vamos revisar como essas propriedades são aplicadas. Sobre legibilidade e fonte [...]
Você pode usar o InDesign para criar e modificar gráficos de código QR. Os códigos QR são uma forma de código de barras que pode armazenar informações como palavras, números, URLs ou outras formas de dados. A usuária escaneia o código QR usando sua câmera e software em um dispositivo, como um smartphone, e o software faz uso [...]
Assim como no Adobe Illustrator, as pranchetas do Photoshop oferecem a capacidade de criar páginas ou telas separadas em um documento. Isso pode ser especialmente útil se você estiver criando telas para um aplicativo móvel ou um pequeno folheto. Você pode pensar em uma prancheta como um tipo especial de grupo de camadas criado com o painel Camadas. Seu […]
Empacotar texto no Adobe Illustrator CC não é exatamente o mesmo que embrulhar um presente - é mais fácil! Uma quebra automática de texto força o texto a envolver um gráfico, conforme mostrado nesta figura. Esse recurso pode adicionar um pouco de criatividade a qualquer peça. O gráfico está forçando o texto a envolvê-lo. Primeiro, crie [...]
Ao projetar no Adobe Illustrator CC, geralmente você precisa que uma forma tenha um tamanho exato (por exemplo, 2 x 3 polegadas). Depois de criar uma forma, a melhor maneira de redimensioná-la para medidas exatas é usar o painel Transformar, mostrado nesta figura. Selecione o objeto e escolha Janela → Transformar para […]
Aprenda como aplicar transparência a gráficos SVG no Illustrator. Explore como gerar SVGs com fundos transparentes e aplicar efeitos de transparência.
Depois de importar suas imagens para o Adobe XD, você não tem muito controle de edição, mas pode redimensionar e girar as imagens como faria com qualquer outra forma. Você também pode arredondar facilmente os cantos de uma imagem importada usando os widgets de canto. Mascarando suas imagens, definindo uma forma fechada [...]
