publicado no portal da Revista Webdesign em 25/09/2009

No artigo do mês passado, apresentei as características de um programa open source de diagramação, o Scribus. Neste novo texto, o assunto em destaque são os “PDFs on-line” e vamos dividir sua análise em duas partes: na primeira, vou falar sobre uma aplicação possível sem ser como e-books e afins. E, na segunda, sobre e-books, e-zines, e-editoras e-etc.

PDFs diagramação

Os PDFs podem ser embed (inseridos em um post de blog, por exemplo) assim como os vídeos do YouTube ou as músicas do Blip. Um dos mecanismos mais simpáticos de fazer isso é usando o Scribd, que tem até mesmo a opção do seu PDF ser aberto com as páginas no estilo pageflip.

Um uso meio óbvio é o de organizar um portfólio. Podemos criar “books” como os fotógrafos fazem e publicá-los em um blog sem muita dificuldade, ainda com a vantagem de já estar pronto para impressão se for necessário.

Outra utilização que pode ser interessante é a publicação de documentos que exigem uma determinada formatação rígida, como atas de uma associação ou pareceres jurídicos. Ou ainda, criar uma seção de downloads no seu site com agendas para o ano seguinte, marcadores de página, ou o que mais a sua imaginação criar.

Existem muitos sites que permitem o upload e embed de PDFs, como o Issuu ou o Scribd. Antes de começar a fazer upload para todos, vale passear um pouco pelas publicações disponíveis para ver como cada um lida com os PDFs:

O Scribd, assim como muitos outros, está tentando criar uma comunidade on-line, com presença no Twitter e uma página inicial que lembra muito o Facebook, mostrando as últimas atualizações de pessoas na sua lista.

O Issuu, por sua vez, foca mais em periódicos, tanto que, em sua home, o destaque é para “Featured magazines”. Se o seu plano é uma revista em PDF gratuita on-line, certamente este é um bom lugar para se estar. Existem verdadeiras pérolas por lá. Uma das minhas favoritas é a Illustration:

PDFs e-publicação

Que o futuro é e-book, e-zine, e-qualquer-coisa, ninguém duvida. A grande questão é como ganhar dinheiro com isso. Afinal, o escritor precisa pagar suas contas, o ilustrador precisa comer etc. Algumas soluções começam a aparecer, como a portuguesa Bubok (disponível para o Brasil), mas existe ainda a questão do trabalho editorial.

Antes de tudo, publicações são necessariamente fruto de um trabalho em equipe. O escritor está preocupado (ou deveria, pelo menos) com a qualidade do que escreve. O ilustrador/fotógrafo/etc. se preocupa em dialogar com o texto esteticamente. O diagramador se preocupa em fazer com que estes elementos funcionem juntos. O revisor se preocupa com nossa língua pátria.

E quem se preocupa com o conjunto da obra, com posicionamento de mercado, com marca, com tudo isso? O editor! Ele não é fabricante de papel, mas sim um fabricante de ideais. E essa função não morre nunca. Acredito pessoalmente que os e-etc. ainda não são o padrão justamente porque os autores acham que se podem colocar os seus livros em um blog da vida, não precisam do editor. Estão errados. O resultado é um livro sem unidade, sem posicionamento, sem todo um trabalho de raciocinar o produto final como algo interessante, palatável e vendável. O que acontece, no final das contas, é uma publicação eletrônica perdida no espaço.

Naturalmente, existem exceções de profissionais que são, ao mesmo tempo, autores ou ilustradores e editores, mas não são a maioria e, muito menos, o padrão. A diferença é que agora você não precisa mais de uma sala comercial para fazer isso. Você pode reunir profissionais de sua confiança e criar você mesmo, a um custo muito baixo, uma minieditora funcional. Ainda não sabemos ao certo o caminho a tomar, mas afinal de contas é justamente por causa do leque de possibilidades que você gosta de trabalhar com internet, né?

Segundo o IBGE, 24,5 milhões dos internautas brasileiros não ficam um único dia sem internet. Já estudos da Intel Brasil apontam que 64% dos usuários brasileiros têm o hábito de comprar on-line. É uma fatia de mercado muito significante. E esse povo todo é alfabetizado. Esse povo todo lê.

O Scribd lançou nos Estados Unidos um sisteminha de cobrar pelos PDFs. Por enquanto ainda não está disponível no Brasil. A portuguesa Bubok tem um trabalho bastante interessante, inclusive registrando ISBN* se assim o autor desejar. Ainda percebo alguns problemas práticos nesta solução, além dos conceituais citados acima, como, por exemplo, tamanhos rígidos ou a venda dos livros impressos sob demanda ser necessariamente em euros.

A grande questão, novamente, não é a solução técnica, mas sim a questão editorial. O leitor também sente falta de uma linha editorial definida, um selo sob o qual ele sabe o que encontrar. Por outro lado o “fetiche do papel” realmente está com os dias contados. Alguma solução há de ter. Enquanto o mercado não se define, você pode ir se preparando para não ser pego de surpresa, como aconteceu com a indústria fonográfica.

* Vale lembrar que o registro do ISBN no Brasil é extremamente simples e fácil.

Às vezes me perguntam como eu fiz para aparecer a data aqui em português.

Na configuração do Wordpress, se você coloca qualquer coisa como “de” para escrever “12 de março”, ele se enrola todo, não sabe o que significa isso e dá bug.

A primeira forma de contornar isso é, no template, substituir a the_date por algo mais ou menos assim:

<?php the_time(‘l’) ?>, <?php the_time(‘j’) ?> de <?php the_time(‘F’) ?> de <?php the_time(‘Y’) ?>

l é dia da semana, j é o dia do mês, F é o mês e Y é o ano.

Eu sei que é um método tosco, mas funciona.

update
O über designer e programador Humberto Oliveira gentilmente deixou nos comentários uma maneira mais inteligente (e elegante) de fazer isso:

“Carol, tem um outro jeito bem mais simples, que resolve tudo numa única chamada.

Basta colocar uma barra invertida antes de cada caracter que não faça parte dos códigos de formatos de data. Por exemplo:

‘l, j \d\e F \d\e Y’

A barra invertida é o caracter de escape do PHP, quando ela é usada o caracter que vem em seguida deixa de ser considerado como um parâmetro da função, sendo retornado na forma de texto.”

Se você só fizer isso, em l e em F vão aparecer os nomes em inglês (friday, march, etc).

Aí o truque já é um pouco mais ninja. Precisa editar um arquivo chamado locale.php, que fica no diretório wp-includes da sua instalação do Wordpress e fazer uma tradução. Se quiser, pode copiar e colar a minha.

Se alguém souber uma maneira melhor de fazer isso, comentários são bem-vindos.

Segmentar os estilos pode trazer benefícios em sites grandes.

Sites muito grandes costumam ter vários CSS. O comum é utilizar um estilo diferente para cada “setor” do site e ao mesmo tempo querer uma identidade visual comum a todos os segmentos.

Ao invés de criar apenas um css para cada um destes setores, crie 2 (ou mais), como por exemplo:

<style type=”text/css”>

<!–

@import url(geral.css);

@import url(setor1.css);

–>

</style>

E, em “geral.css” você coloca todas as formatações em comum a todas as páginas, como por exemplo tipo de fonte. E, no css específico da página você coloca as informações que pertencem apenas àquela categoria ou segmento.

A vantagem desse recurso é apenas de atualização, mas em sites muito grandes pode fazer diferença.

É possível mudar uma classe inteira (não apenas efeitos de link) no mouse over, mouse out, etc.

Não precisa nem ser um link, pode ser uma div inteira, assim:

<div id=”ID” onMouseOver=”className=”CLASSE2″” onmouseout=”className=”CLASSE1″”>

E, no CSS, você define o que quer como cada classe.

Esse é um recurso tão simples quanto poderoso. Vale experimentar.

O Scribus é um programa open source de diagramação. Existem muitos tutoriais em inglês disponíveis on-line, inclusive em vídeo. Como esta é uma revista voltada para a web, vou considerar a meta de produção como e-books e afins e não vou me preocupar aqui com questões como resolução mínima de impressão ou geração de marcas de registro, por exemplo.

Se esta for uma questão importante para você, no site de documentação do Scribus, você encontrará bons pontos de partida: docs.scribus.net. Recomendo também a leitura do ótimo blog Imagem, Papel e Fúria, e do livro “O Design do Livro”, de Richard Hendel.

Antes de entrar na parte prática do programa, é importante pensarmos em alguns conceitos que talvez não sejam uma preocupação para quem é muito “webcentrado”. Diferentemente de sites, publicações em PDF e afins pressupõem certa linearidade. Ou seja, não usamos extensivamente hipertexto e lógicas similares. Toda a diagramação é pensada como um plano fechado, não-fluido ou muito menos elástico.

Além disso, o conteúdo também é pensado de forma a não utilizar referências externas, como um link para uma definição na Wikipédia, por exemplo. A publicação neste formato precisa ter certa unidade e independência, mesmo se parte de uma série ou se é um periódico. Pegue a Revista Webdesign como exemplo: cada edição tem uma identidade comum a todas e, ao mesmo tempo, encerra os assuntos ali propostos com artigos completos e que se sustentam sozinhos.

Podemos usar esta mesma lógica, da publicação linear, em outras aplicações. Não é incomum, por exemplo, que um artista queira sua obra dividida em anos ou em fases. Podemos criar um PDF para cada segmento ou seção e colocá-lo de forma a fazer sentido no todo, com ou sem textos explicativos. Ou, ainda, é possível que um cliente seu queira uma área de downloads de documentos que necessitam ser impressos em uma formatação específica (como atas, pareceres jurídicos etc.). Ou seja, nem só de CSS vive o homem.

O Scribus é um programa bastante complexo. Existem inúmeros bons tutoriais e uma vasta documentação a seu respeito na web e, portanto, o propósito deste artigo é apenas de apresentá-lo como uma solução possível de diagramação. Para começar, como mandam os bons costumes, abrimos um novo documento.

A caixa de diálogo exibe algumas opções interessantes, como a possibilidade de dobras duplas ou triplas e a mudança da unidade de medida para cada documento.

Na hora da criação, pedi um “Automatic Text Frame”, então é só colar o texto a ser diagramado.

Uma das principais características do Scribus é que ele trata cada elemento individualmente, inclusive com a possibilidade de mudarmos o nome para uma identificação mais rápida. No caso de uma publicação maior será muito mais fácil de identificar “Tabacaria” do que “Text1”, por exemplo.

Se você precisar criar novas caixas de texto, a passagem automática de uma para outra pode ser ligada/desligada no “Link Text Frames”.

Todos os ajustes de texto são encontrados na caixa de diálogo “Text”, os de imagem na caixa “Image” e assim por diante.

Assim como os melhores programas de Desktop Publishing, o Scribus também tem estilos de parágrafo. Clique em “New” para criar os seus estilos. Depois, para aplicá-lo é só selecionar o texto e clicar em “Style” na caixa de texto.

Se quiser quebrar uma página antes do automático, é só arrastar a linha final para a quebra ou então inserir um “Frame Break” na posição certa.

Inserimos, então, um Image Frame e, com dois cliques em cima dele, importamos uma imagem. Neste caso, estou usando uma fotografia da tabacaria Seattle Rainier Cigar Co, de 1900, encontrada no Wikimedia Commons.

As imagens podem ser tratadas de várias maneiras. Uma das mais comuns é com o texto contornando os limites da imagem. Para isso, basta clicar em “Shape” e em “Text Flows Around Frame”.

Outra coisa importante de mostrar é que o Scribus trabalha com layers e podemos, por exemplo, inserir a imagem por baixo do texto.

Em “Document Setup”, em “Sections”, você pode manipular e adicionar seções do seu documento e, depois pode gerar um índice automático em “Page of Contents”. Funciona mais ou menos como o book do InDesign. É nesta caixa de diálogo também que você encontrará a exportação para PDF.

Inserir número de páginas também é bem similar ao programa da Adobe. Basta inseri-lo como um caracter especial dentro de um frame de texto.

Acredito que, com estes poucos dados, já seja possível fazer algo com o Scribus. Assim como qualquer software open source, este também muda um pouco a lógica das coisas para quem está acostumado a similares comerciais. É necessário um período de adaptação, mas acredito que a maioria das necessidades de diagramação sejam supridas por ele. Pode ser uma boa solução gratuita para você ou para a sua empresa, inclusive para impressos.

publicado em 27/08/09 no portal da revista Webdesign

publicado no portal da Revista Webdesign em 15 de julho de 2009

Pintura digital com Artweaver

Talvez uma das coisas que os artistas mais gostem nos programas digitais de pintura seja o undo. Quando a gente está lá com um pincel real na mão e comete alguma besteira, o CTRL-Z faz uma enorme falta.

A pintura digital é uma técnica como qualquer outra (óleo, aquarela, digital etc). É bastante claro, creio, para todos que cada técnica tem sua aplicação, mas o que talvez não seja tão óbvio é que algumas se prestam melhor à experimentação do que outras. E aí, quando falamos de experimentação, poucas ganham da digital.

O sketch (rascunho) nos ajuda a formular o pensamento, nos ensina a olhar e pensar grafica/visualmente. A pintura digital, além de um ótimo instrumento de sketch, é também uma ótima oportunidade de experimentação técnica. A possibilidade de testar a sua ideia em aquarela, óleo, carvão etc., antes de finalizá-la (não importa se digitalmente ou não), é valiosíssima: tanto em termos de produtividade quanto de raciocínio e aprendizado. Depois você pode escolher finalizar a sua obra no mesmo programa de pintura digital ou, depois de “resolvida”, levá-la ao mundo analógico.

Isso sem esquecer, claro, das já conhecidas vantagens de velocidade e limpeza: não precisamos esperar a tinta a óleo secar e o ambiente não fica fedendo a aguarrás por dias a fio. É importante ressaltar, entretanto, que o seu trabalho vai se enriquecer muito se você conhecer o material com que está trabalhando. Os melhores resultados serão extraídos destas ferramentas digitais justamente por quem conhece o material real, físico.

Existem muitos programas de pintura digital. O mais conhecido é o Corel Painter®, mas a minha coluna aqui no site da Webdesign sempre mostrará soluções gratuitas. Destas, a que mais gosto é o Artweaver, um programa gratuito de pintura alemão. Existem vários outros também muito bons, como o ArtRage e até mesmo o Gimp que, apesar de ser mais de edição do que de pintura, também se presta a esta atividade. O ArtRage é muito similar ao Artweaver e do Gimp tratarei em futuros artigos.

O Artweaver também possui algumas ferramentas básicas de edição, mas o seu foco principal é, sem dúvida alguma, a pintura digital. Ele fornece algumas funções básicas de manipulação de camadas (layers) similares aos seus concorrentes comerciais, tais como: efeitos de camadas como drop shadow, transparência e todas as formas de sobreposição normalmente oferecidas (normal, darken, multiply, lighten, screen, difference, exclusion, color burn, linear burn, color dodge, hard light, soft light, color, hue, saturation, luminosity e average).

Ele tem também histórico, ajustes como o prático auto levels e toda uma variedade de funções básicas que você espera de um software minimamente eficaz. Não irei listar todas aqui, mas é importante você saber que a maioria das funções mais comuns está presente.

Assim como muitas outras soluções gratuitas, o Artweaver também tem problemas com CMYK. E, ao contrário do Gimp, ainda não existe sequer um plugin para melhorar isso. A partir da versão 0.5.7, incluíram a paleta CMYK no seletor de cores, porém não tenho certeza se podemos considerar isto um sinal de que irão implementar suporte a CMYK. Da parte de arquivos, ele é bem versátil e não abre apenas arquivos “.PSD” como também salva para este – e vários outros – formatos, inclusive “.PDF”.

Aproveitando que este artigo é para a Webdesign on-line, vou fazer uso de vídeo, algo impossível na revista impressa. É importante ressaltar que o vídeo se propõe a ser uma demonstração do programa e não de arte, técnica ou estética. Então, vejamos o programa em ação:

Este vídeo foi feito usando o CamStudio e a trilha sonora é a música Sonnet 116, de Maggie Doucet, encontrada no site Podsafe Audio, especializado em conteúdo com licenças livres.

Deixei o melhor para o final. Sabe aquela sua coleção de brushes fantásticas que você levou anos selecionando? O Artweaver importa “.ABR”:

E, então, o que você está esperando? Download e mãos ao tablet!

Coleções de brushes .ABR:
http://www.brusheezy.com/,
http://myphotoshopbrushes.com/,
http://www.psbrushes.net/,
http://getbrushes.com/.

É com muito orgulho que conto para vocês que sou agora colaboradora da revista Webdesign, tanto da revista impressa quanto do novo portal.

Fiquei muito feliz em descobrir hoje que o meu artigo foi justamente o de estréia do portal da revista. Vou escrever sempre sobre ilustração.

Esta é – sempre foi – a revista brasileira sobre o tema que mais respeito, gosto e leio e portanto deve ser fácil de imaginar a minha alegria.

Fica aqui o meu agradecimento a todo o pessoal da Arteccom e ao gentilíssimo Luis Rocha, que é quem me aguenta por lá.

Mais novidades para o site da Webdesign! Neste mês, iniciamos a publicação de artigos on-line, com o intuito de proporcionar conteúdo complementar aos assuntos abordados ao longo das edições impressas da revista, além de estimular a troca de conhecimentos entre os profissionais de nossa comunidade.

Na estreia deste novo espaço, convidamos a designer e ilustradora Carolina Vigna-Marú para apresentar um passo a passo sobre alternativas no uso de imagens a serem aplicadas em um projeto. Desejamos uma boa leitura e deixem seus comentários por aqui!

Indo além do banco de imagens

Muitas vezes, o designer precisa criar uma ilustração, um ícone ou algum outro tipo de comunicação gráfica. A questão é que nem todo designer é ilustrador e frequentemente é preciso recorrer a stock images.

Stock (de estoque mesmo) são imagens genéricas. Antigamente as chamávamos de imagens de arquivo. A ideia é pagar pelo direito de reprodução ou licenciamento daquela imagem, porém não por sua exclusividade. Os preços costumam ser baixos, mas por outro lado são imagens que encontramos em qualquer lugar, sem nenhuma personalização.

Uma saída é recorrer aos bancos de imagem gratuitos ou licenças Creative Commons, mas o problema do “lugar comum” é ainda mais evidente. Uma boa dica para contornar esta situação seja usar, como ponto de partida, uma imagem gratuita, como as encontradas na Wikicommons, e transformá-la em uma ilustração criativa.

Neste post, vamos fazer um passo a passo de um exemplo deste processo, usando apenas ferramentas gratuitas:

Passo 1: escolher uma boa imagem

A imagem precisa ser expressiva e o mais limpa possível, com pouco fundo e com um bom tamanho, para facilitar a vetorização. Certifique-se que a licença da imagem permite o uso derivado, ou seja, que você transforme a imagem original em outra. A oferta é grande e respeitar o trabalho dos outros significa ter o seu respeitado também. Site de pesquisa da imagem: Wikicommons.

Passo 2: vetorizar

Vamos utilizar uma ferramenta on-line para vetorizar a imagem escolhida anteriormente.

Passo 3: editar

Agora, é a hora de ser criativo! Uma dica: observe sempre se o seu layout precisa de algum tamanho específico. Começar o trabalho de edição já na proporção necessária adianta muito tempo e poupa dor de cabeça depois.

Lembre-se sempre de dar crédito da imagem original. O bom do Inkscape é que ele já exporta a imagem “.png” com fundo transparente.

O crédito não diminui em nada o seu trabalho, muito pelo contrário: mostra a todos que você é profissional, criativo e ético.

Viu como é simples gerar imagens personalizadas, que garantam um diferencial para você ou seu cliente? Então, o que está esperando? Não esqueça de colocar um link para o trabalho criado aqui nos comentários!

^{Por Carolina Vigna-Marú
Designer e ilustradora das antigas, do tipo que raspou fotolito com gilette e fez separação de cores no papel vegetal, mas que não é saudosista e acha tecnologia o máximo. Trabalhou com multimídia e foi SysOp de BBS. Desenvolve sites desde 1996, especializando-se em CMS e em SEO com tableless e CSS. Começou em uma editora pequena em 1982 e nunca mais parou. Gosta muito de ilustração vetorial, mas não dispensa um bom papel e lápis. Fotógrafa amadora e apaixonada por tudo que é gráfico.}

artigo publicado na Revista Webdesign online em 20/04/2009

NAS BANCAS!

Para garantir uma boa apresentação, vou listar algumas questões que considero fundamentais de serem abordadas:
- Resumo: pode parecer óbvio, mas é bom colocar do que se trata. Desta forma, você pode usar esta apresentação também como um documento, onde o cliente está ciente do que foi pedido e acordado para este job.
- Briefing: no mesmo espírito do resumo, é prudente reproduzir o que foi conversado. Serve como um lembrete ao cliente e um guia para o designer.
- Problemas detectados: problemas no posicionamento do cliente, no job, no briefing ou até mesmo no orçamento disponível (não necessariamente o nosso, pode ser uma gráfica mal orçada, por exemplo). O nosso trabalho é tornar a comunicação do cliente o mais eficiente possível, não ficar dourando a pílula.
- Respostas: o que é possível resolver, mesmo que em um segundo momento. Ao apontarmos caminhos para o cliente, nos tornamos parceiros dele.
- Layout: os elementos do design variam muito. Em um trabalho impresso, a descrição da tipografia é fundamental, enquanto um site normalmente conta com quatro a cinco fontes diferentes que serão renderizadas de acordo com o navegador, por exemplo.
- Justificativas: nunca é demais explicar as nossas opções, assim como qualquer questão técnica (opção de impressão em 1/0 para caber no orçamento, por exemplo).
- Variações: variações previstas, como estudos de aplicação de uma identidade visual ou visualização de um site em palmtop.
- Principais erros: o designer não pode desrespeitar o seu cliente e nem ensiná-lo a fazer o trabalho dele. Outro crime grave é não fornecer todas as informações necessárias.

(parte integrante de matéria sobre layouts,
publicada na Revista Webdesign de abril de 2009,
ano 6, nº 64, ISSN 1806-0099, editora Arteccom.)