Agni.art

Veja o que o CSS3 nos trás de novo.

Chris Coyier, web designer que mantém o blog CSS-Tricks, escreveu em seu perfil no Twitter que o “CSS é como o xadrez. Você pode aprender os princípios básicos em um dia, e passar a vida inteira se especializando”. De fato, o CSS é a linguagem mais fácil de ser aprendida, possuindo uma sintaxe bem simples. Porém, criar páginas com layouts bem elaborados usando CSS, assim como conhecer todos os seus macetes, exige tempo e experiência.

A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.

Divisão da Web em três camadas

Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.

CSS ainda deixa a desejar

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes familias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

O que nos trará o CSS3?

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4 e o Firefox 3.6. Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari).

A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer:

border-radius

Com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.

text-shadow

Com essa propriedade podemos adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.

box-shadow

Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.

border-colors

Podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.

Opacity

Podemos adicionar opacidade aos elementos: opacity: 0.2.

Columns

Podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.

Multiple backgrounds

Podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.

@font-face

Podemos definir uma tipografia diferenciada para os textos da página através da importação de um arquivo de fonte: @font-face {font-family: Agni; src: url(‘agni-font.otf’)}. Em seguida aplicamos essa fonte a um elemento de texto: h3 { font-family: Agni, sans-serif}.

O CSS3 ainda não deve ser usado definitivamente em suas páginas. A nova versão da linguagem ainda se encontra em fase de rascunho na W3c, e a maioria dos navegadores não fornece suporte. Porém é essencial que possamos conhecer e testar os novos recursos, descobrir aos poucos o que vem por aí, e nos preparar para o momento em que o CSS3 será lançado como uma recomendação em definitivo.

Vocês podem encontrar mais informações sobre o CSS3 no site http://www.css3.info/.

Esteja preparado :)

Na minha infância, uma das minhas maiores diversões eram as revistas para colorir do He-man. Eram vendidas em bancas de jornais, e quando meu pai chegava do trabalho com uma dessas revistas debaixo do braço, eu já corria com meus lápis-de-cor e parava tudo que eu estivesse fazendo para ficar colorindo por horas! Também tinha entre meus brinquedos vários bonecos do He-man, Esqueleto e companhia.

Sabendo disso, é fácil de entender a minha empolgação ao ver a exposição Under The Influence: Masters of the Universe Tribute Art Show na Galeria 1988, onde vários artistas mostraram suas versões para um dos meus desenhos animados preferidos. Acessando esse link, vocês podem ver diversos trabalhos da exposição.

Dica do blog Desculpe a Poeira.

Ilustração de Fred Harper: "And The Feud Begins"

Houve uma época em que eu ainda acreditava no Design como uma ferramenta de construção do conhecimento. Não que eu ainda não acredite nisso, mas hoje o Design acaba se revelando muito mais como uma ferramenta para estimular o consumismo nas pessoas, através da criação de um poder simbólico agregado aos produtos.

Acredito que atualmente o maior representante dessa classe de produtos seja o iPhone. O que gira em torno desse SmartPhone que o torna tão especial e tão necessário, ao ponto de existirem cerca de 300 mil unidades em uso no Brasil mesmo antes de seu lançamento oficial em nosso país? O que faz as pessoas desejarem não só esse objeto em si, mas também outros objetos que representem a sua aura?

Seriam as suas revolucionárias funcionalidades, mesmo que em questões práticas encontremos funções idênticas ou similares em outros aparelhos? Ou seria sua revolucionária tela ‘Touch’? Bem, isso já existia antes do iPhone em Palm’s e outros aparelhos… Claro, mas não com a mesma Interface, e com esse Design que parece ter saído de um conto de fadas!

Usabilidade? Convergência de funções? Isso tudo é suficiente para a construção de um mito?

A influência da Mídia

É um aparelho mágico! Pelo menos assim o fantasia a ‘Revista Veja’ em sua reportagem sobre o iPhone, em 17 de janeiro de 2007:

“Quem ganha é o consumidor, que tem acesso a aparelhos que tornam a vida mais agradável, colorida, desfrutável, segura, produtiva e rica.”

“Passa-se o dedo levemente sobre a superfície da tela e as imagens deslizam na mesma direção como que impulsionadas por uma força invisível.”

Bem, encontramos o “X” da questão: o discurso midiático!

A exposição que a mídia o fornece, faz com que a Apple praticamente não precise fazer propaganda de seu produto. Vemos referência ao produto na TV, em filmes, séries, desenhos animados, e até mesmo em campanhas de outras empresas, como foi o caso do comercial da Reebok exibido na final da Liga dos Campeões da Europa entre Barcelona e Manchester United, onde jogadores desses clubes aparecem como grandes usuários do iPhone.

O mundo mágico que se cria em torno desse SmartPhone faz com ele torne-se um objeto de desejo, um símbolo de poder ao portador, capaz de lhe dar status e autoconfiança perante a sociedade em que vive. O iPhone é capaz de trazer liberdade as pessoas… Apesar de essa não ser a opinião do estudioso Jonathan Zittrain, que considera que esse aparelho, símbolo de inovação, colabora diretamente em inibir da inovação coletiva, referindo-se a sua arquitetura fechada, diferentemente de como são os PC’s e a própria Internet:

“Fechados, estes aparelhos proíbem ajustes por parte dos usuários finais. Essa capacidade de interação com os usuários finais foi fundamental para transformar os PCs e a internet em uma grande alavanca de mudança econômica, política e artística.”

Ridendo Castigat Mores

Parafraseando Molière com sua afirmação de que “Rindo castigam-se os costumes”, trago abaixo uma das melhores críticas feita a esse mundo mágico que circunda os produtos da Apple, um episodio da temporada 20 dos Simpsons onde Lisa e sua família avistam uma nova loja no shopping de Springfield, a Mapple Store!

O que foi? Estão se perguntando o porque estou criticando tanto assim a Apple?

Ora, não é uma crítica a Apple em si… Só pra constar, eu trabalho todos os dias em um iMac. Eu só quis jogar um pouco de luz na sociedade moderna :)

Querem-me perguntar algo?

Ano novo, expectativas novas… Mas algumas questões ainda permanecem!

Sendo eu um profissional de Criação, e utilizando constantemente no trabalho um iMac e as ferramentas da Creative Suite da Adobe, nunca escondi a minha predileção pelo uso de Software Livre para a área de Design, tendo inclusive ministrado várias oficinas sobre essas ferramentas. Em qualquer projeto que não envolva o meu “emprego oficial”, estou sempre adotando o uso de ferramentas como GIMP e Inkscape, dentro do Ubuntu Studio.

Uma porção de vezes pude ouvir de outros colegas de profissão comentários do tipo “mas Photoshop não é melhor?” ou então “Linux não é coisa de Hacker?”. Vamos pensar em algumas respostas…

As ferramentas livres para Design, como GIMP ou Inkscape, superam ferramentas proprietárias?

Na minha sincera opinião, não. Apesar de eu considerar ferramentas para Desenho Vetorial como o Inkscape e o XaraXtreme melhores do que o Corel Draw, não posso dizer que as ferramentas livres superam softwares como o Photoshop, Illustrator ou Indesign. A quantidade e qualidade dos recursos, a interface, ícones, atalhos, automatização, ainda são superiores nas ferramentas proprietárias.

Nesses aspectos, considero que os motivos para isso sejam os seguintes:

1. Ferramentas livres como GIMP e Inkscape não tem tanto tempo de existência quanto as ferramentas proprietárias mais usadas. Penso, por exemplo, que o GIMP se equipara a versões mais antigas do Photoshop;
2. Nas comunidades que desenvolvem essas ferramentas livres, não existem tantos Designers para um aprimoramento mais refinado das Interfaces, a Iconografia não é tão bem trabalhada, e nem parece haver um planejamento adequado das funcionalidades. Constantemente a comunidade do Software Livre considera como “Designers” pessoas que sabem simplesmente manipular bem um software de Edição de Imagens. Porém o Design se referencia muito mais como Projeto, e vários estudos e conceitos são necessários para um Projeto Gráfico coerente, e uma Usabilidade consistente. Creio que Desenvolvedores não são as pessoas mais apropriadas para trabalharem nessas questões;
3. O Suporte a CMYK e Pantone dessas ferramentas, por mais que sejam possíveis com softwares como Scribus para a área de Desktop Publishing, e por mais que venham evoluindo em ferramentas como GIMP e Inkscape, não tem ainda uma consistência adequada para um trabalho mais profissional;

É possível trabalhar com Criação utilizando somente Software Livre?

Creio que profissionalmente na área de Desktop Publishing, ainda não é possível. Isso devido a recursos limitados dos Softwares e dificuldades no fechamento dos arquivos para impressão.

Porém, na área da Web é totalmente possível, isso pelo simples fato de que o processo de criação não depende de uma ferramenta, e sim de conceitos aplicados. Não adianta saber como uma ferramenta funciona se você não souber o que fazer com ela. Para trabalhar com criação, devemos ter conhecimentos multidisciplinares, assim como disse Alexandre Wollner:

“O Web Design é um fragmento do Design. Não existe Web Designer. Existe o Designer que faz Web, e este profissional tem que aprender tudo, tipografia, fotografia, semiótica, gestalt, matemática, ótica, percepção, comportamento humano, etc. Senão, ele não consegue fazer Web.”

Acredito muito na ideia da Relação 80/20 aplicada aos softwares, isto é, executamos 80% das tarefas utilizando apenas 20% das ferramentas disponíveis. Acredito também que o uso excessivo de recursos, brushers e efeitos prontos dos softwares proprietários acaba criando certos clichês e tendências desnecessárias no Design, fazendo com que os projetos gráficos percam o foco no público-alvo, e acostumando o Mercado a ideia de não haver necessidade de estudo para a criação das peças gráficas. Cria-se assim uma necessidade estética sem função definida.

Porque eu uso Software Livre na área de criação?

Considero o uso de ferramentas como GIMP e Inkscape um estímulo ao processo de criação. Penso que não devemos ser dependentes de uma ferramenta específica para qualquer tipo de trabalho, e acredito que a qualidade dos projetos não deve estar vinculada ao uso de um software, e sim ao talento do profissional. Essa afirmação não é de forma alguma um atestado de inferioridade das ferramentas livres. Apesar de ainda ter muito o que evoluir (o que é natural), essas ferramentas tem sim grande qualidade e potencial.

Também acredito em outras questões – essas sim de cunho mais ideológico – de que o que impulsiona o Movimento pelo Software Livre não é o fato de o mesmo ser “Economicamente viável” ou “Tecnologicamente sustentável”, mas sim o fato de ser “Socialmente Justo”. Acredito que para haver uma independência econômica para o Brasil e outros países, uma das principais necessidades é que se tenha autonomia tecnológica. As possibilidades que os Softwares Livres trazem para o aprendizado e a produção tecnológica permite que seja reduzida a dependência que temos hoje das empresas estrangeiras, e o uso de ferramentas livres estimula a produção de software de código aberto, ajudando a proporcionar essa autonomia tecnológica.

E você, por acaso já testou alguma dessas ferramentas? Já tentou editar suas imagens com o GIMP, ou fazer seus desenhos no Inkscape? Faça o download e experimente, assim sem compromisso mesmo :)

Seguindo com o Desafio do Design com Software Livre, o José Luiz  perguntou em 18/06:

“Queria saber como posso fazer aqueles recortes de cabelo no GIMP, para mudar o fundo da imagem, estilo capas de revistas…
Obrigado.”

Como sempre digo, o ensino dos softwares em quase todos os cursos que existem é equivocado quando procura basear o aprendizado na ferramenta, ao invés do conceito de uso. Sendo assim, os cursos vendem Word ou Photoshop, quando deveriam vender Edição de textos ou Edição de imagens.

Os conceitos de Edição de imagens são aplicáveis em boa parte das ferramentas que existem para essa finalidade. Para mostrar isso, vou utilizar uma imagem retirada de um tutorial para Photoshop, com a mesma finalidade deste.

Na comunidade criada para o Desafio do Design com Software Livre no portal do Software Livre Brasil , uma outra dúvida foi deixada pelo Thiago A.:

“Gostaria de ver a alternativa para o filtro “Extract” do Photoshop. Seria de grande ajuda para uma migração, junto com as outras alternativas que já foram mostradas.”

O filtro “Extract” (imagem abaixo) faz a separação entre o objeto da imagem e o fundo, e é muito utilizada para fazer o mesmo tipo de recorte de cabelo. O GIMP não possui uma ferramenta equivalente.

Utilização do filtro "Extract" no Photoshop

Porém, por ser uma extração automática, o resultado só é satisfatório em imagens em que existam um alto grau de contraste entre o fundo e o objeto. Caso o contrário, falhas são sempre visiveis nesse recorte. Mesmo em imagens com um bom contraste, a técnica para recorte mostrada aqui nesse tutorial é mais satisfatória que o do filtro “Extract” (assim como outros tipos de recorte onde podemos utilizar seleções criadas através da ferramenta de Vetores), e serve tanto para o Gimp como para o Photoshop (com pequenas variações nas ferramentas).

Bem, vamos ao trabalho…

A imagem utilizada aqui foi retirada deste outro tutorial para Photoshop (como dito anteriormente)…

Essa imagem foi recortada anteriormente em um tutorial do Photoshop

Este tutorial se baseia na criação de uma máscara para a imagem, que vai ocultar todo o fundo, revelando apenas o objeto da imagem, de forma que o recorte seja o mais perfeito possível, mesmo nos fios mais finos do cabelo. Após aberta a imagem no GIMP, vamos acionar a visualização do Painel de Canais, a direita da tela, podendo visualizar os três canais existentes (Vermelho, Verde e Azul). Acionando e desligando a visualização dos canais, vamos procurar aquele que tiver um melhor contraste entre o fundo e o objeto da imagem. Nessa caso optei pelo canal “Verde” (que também é o melhor escolha na maioria dos casos). Dessa forma, vamos fazer a duplicação do canal “Verde”, para criarmos uma máscara a partir da cópia.

Para fazer a duplicação, vamos clicar com o botão direito do Mouse no canal “Verde” e escolher a opção “Duplicar Canal”, ou acionar o botão equivalente na base do Painel de Canais.

O canal "verde" é duplicado

Após a duplicação, e com a visualização do novo canal ativa, a imagem deste canal irá ficar sobreposta a imagem original, em escala de cinza. Se desabilitarmos a visualização dos outros canais (que permitem a visualização da imagem) vamos obter uma imagem toda Preta. Para conseguirmos visualizar apenas o canal duplicado, vamos até o Painel de Camadas, e criamos uma nova camada sobre a imagem original, esta na cor branca.

Inserimos uma nova camada em branco acima da imagem

Dessa forma, podemos remover a seleção dos canais “Vermelho”, “Verde” e “Azul” com um clique sobre os mesmos, mantendo apenas o canal duplicado selecionado para trabalharmos, e em seguida, acionamos sobre ele a ferramenta “Curvas”, no menu “Cores”:

Utilização da ferramenta "Curvas" no GIMP

Manipulando a Curva na base para aumentar os níveis de sombra, e no topo para aumentar os níveis de luz, aumentamos o contraste da imagem, obtendo um fundo Branco e deixando o objeto da imagem Preto.

Em seguida, podemos utilizar o ferramenta “Pincel” para finalizarmos a máscara, cobrindo as áreas claras do rosto e da blusa (com cuidado para não cobrirmos os vãos naturais existentes nas extremidades do cabelo), e com a ferramenta “Borracha” para limpar possíveis áreas do fundo que não estejam totalmente brancas. Dessa forma, temos nossa máscara pronta.

Com a ajuda do pincel e da borracha, ajustamos a máscara

Voltamos então a selecionar os outros canais, para que agora a imagem seja manipulada por completo, e voltamos ao Painel de Camadas. Vamos remover a visualização da camada Branca que cobre a imagem original, e em seguida clicar com o botão direito do Mouse sobre a camada base, escolhendo a opção “Adicionar máscara à camada”. Na janela que surgirá, podemos indicar que a nova máscara seja criada a partir de um canal, e escolhemos assim o canal duplicado ao qual trabalhamos. Vale lembrar que as máscaras são sempre em Preto e Branco, e ocutam na imagem as áreas cobertas pela cor Preta da máscara. Para que o objeto da nossa imagem não fique oculto ao invés do fundo, selecionamos também a opção de “Inverter Máscara”…

Aplicando máscara a camada

Após o fundo da imagem ter sido oculto, vamos nos certificar de que o fundo foi recortado satisfatoriamente, e para isso voltamos a acionar a visualização da camada Branca, movendo ela para baixo da camada base, para depois colorirmos com a cor Amarela (pela sua alta luminosidade, o que ajudará a reconhecer falhas).

Após aplicar a máscara na camada, adicionamos um fundo amarelo para reconhecer pequenas falhas

Temos então a certeza de que o recorte entre o fundo e o objeto da imagem foi bem feito. Podemos optar também em aplicar a máscara em definitivo na imagem original, clicando na mesma com o botão direito do Mouse e escolhendo “Aplicar máscara á camada”

Resultado final do recorte de cabelo com o GIMP

Chegamos ao fim. Aguardo vocês para o próximo desafio…

Hasta Luego!

Seguindo com o Desafio do Design em Software Livre, vamos esclarecer a dúvida de Wilson Lima, sobre uma alternativa a ferramenta Liquify do Photoshop:

“No GIMP eu apanho com ferramentas como a Liquify, que no Photoshop é fácil de achar.”

Pois bem Wilson, no GIMP é muito simples de se obter efeitos iguais aos da ferramenta Liquify do Photoshop. Para isso, usamos o filtro Deformação Interativa. Podemos acessa-la através do menu “Filtros > Distorções”…

Acessando a Deformação Interativa no GIMP

A “Deformação Interativa” é capaz de dirtorcer os pixels da imagem, movendo, ampliando, encolhendo ou girando áreas. Com isso, uma infinidade de efeitos e retoques são possíveis de serem obtidos, sem deixar nada a desejar para o Liquify do Photoshop…

A Deformação Interativa é similar a ferramenta "Liquify" do Photoshop.

Resultado final da Deformação Interativa

Acha impossível ser livre? Então lance o desafio!

Até a próxima…