O que nós podemos fazer:

• Antecipar e atender as solicitações da comunidade brasileira sobre:
• • Logos e outros elementos de design dos projetos relacionados ao Ubuntu;
  • Web design dos sites da comunidade;
  • Material de marketing;
  • Ilustrações em documentos, guias e apresentações.
• Criar e disponibilizar artes como:
• • Papéis de parede;
  • Temas;
  • Ícones;
  • Temas sonoros;
  • Materiais gráficos diversos.
• Auxiliar usuários na aplicação de temas e personalização de interfaces através dos canais de suporte disponíveis.
• Discutir e defender procedimentos livres relacionados à criação de arte e design.
• Participar das discussões de design de projetos FOSS.
• Desenvolver, traduzir e manter documentação no wiki.
• Providenciar guias e tutoriais que encoragem o uso de ferramentas FOSS para arte, música e design(*).

(*) Observação: para o fim específico de uso de ferramentas livres no exercício profissional do design, conheça o projeto FreeDesign-BR.

Veja mais no wiki do Time de Arte Ubuntu Brasil de onde o texto acima foi retirado.

Seja bem-vindo a fazer parte dos times já existentes, como o Time de Documentação e o Time de Tradução.

Grupo para intercâmbio de informações sobre design gráfico, digital e web com uso exclusivo de softwares livres, centrados no Ubuntu Linux e em língua portuguesa. Nosso objetivo é criar, através das nossas comunicações, uma extensa base de conhecimentos sobre ferramentas e técnicas que os profissionais e entusiastas das diversas áreas do design possam consultar ao migrarem de ambientes proprietários para livres. São considerados tópicos válidos para o grupo:

- todo os tipos de tutoriais, notícias e reflexões acerca de softwares livres para produção em design utilizando o Ubuntu Linux e distribuições diretamente derivadas;

- debates acerca da administração e rumos do próprio grupo.

Quaisquer outros assuntos não serão permitidos.

Para ser aceito no grupo, você deve ser cadastrado no Launchpad e, obrigatoriamente, ser signatário do Código de Conduta do Ubuntu.

Percebam que não é um grupo para tirar dúvidas ou para o desenvolvimento de softwares. Em vez disso, nosso foco é a construção de um repositório de conhecimento consistente e útil que, de acordo com o desenrolar dos fatos, pode vir a ser concretizado sob a forma de um wiki ou site colaborativo.

Apesar de ser um grupo centrado no Ubuntu Linux, tenho certeza de que a nossa base de conhecimentos será fartamente útil para usuários de qualquer distribuição ou sistema operacional.

Sobre isso, é bom que se esclareça desde já que a decisão pelo Launchpad (como base para o time) e pelo Ubuntu (como distribuição central) diz respeito apenas aos meios que eles disponibilizam para garantir um mínimo de segurança, confiabilidade e, principalmente, seriedade dos membros do grupo.

Conto com a sua participação no time!

Com a surpresa, vem também um sentimento de responsabilidade enorme. A cada novo artigo a minha exigência pessoal por fornecer informação útil e com qualidade aumenta. Hoje pesquiso muito mais, experimento muito mais os programas que uso, tudo em função dessa responsabilidade. Claro que, com isso, o meu ganho pessoal em conhecimento cresceu muito, mas tudo que a gente acumula sem compartilhar acaba estagnando e, fatalmente, se perde.

Este é o espírito e a riqueza do ato de compartilhar que este blog me fez descobrir para além de um conceito vago, e tudo graças à visita de cada um de vocês. Mais ainda, graças aos seus comentários, sejam eles desafiadores ou manifestações de apoio. A todos sou muito grato e, na medida dos meus limites, pretendo continuar fazendo valer cada clique, cada minuto dispensado à leitura dos meus artigos.

A todos, muito obrigado!

Arquivo de 27/8/2010 a 27/9/2010

• Tutorial Inkscape 0.47 – modelando um ícone de pasta
• Tutorial Básico #2 – criando uma esfera de cristal no Inkscape 0.47
• Wallpaper: Devos Ubuntu Waves (1920×1080)
• Tutorial Básico #3 – desenhando um olho no Inkscape 0.47
• O cinto de utilidades do web designer
• Tutorial básico #4 – desenhando botões com o Inkscape 0.47
• Menos propaganda e mais marketing para o Gimp
• Um gabarito para o seu grid web design
• Tutorial em vídeo: manipulando um template de página com o Inkscape
• Tutorial Inkscape: trabalhando com simetria
• ClipArt Finder

O ClipArt Finder pode ser iniciado tanto pelo menu de aplicativos, quanto pelo painel do Gnome, e a pesquisa pode ser feita em diversos idiomas, já que ele mesmo cuida da tradução para o inglês. Além disso, através das configurações disponíveis na própria janela do programa, você pode escolher o(s) formato(s) que deseja e diversas outras opções de exibição de informações sobre as imagens listadas.

Para instalar, siga as orientações do desenvolvedor no Launchpad. Lá você também vai encontrar um vídeo demonstrativo muito interessante. Mas se quiser ir direto aos testes, pode copiar as linhas abaixo e colar no seu terminal (testei apenas no Ubuntu 10.04).

sudo add-apt-repository ppa:osmoma/clipart-finder && sudo apt-get update

sudo apt-get install clipart-finder

É por sua conta e risco, ok?

Nem jarros, nem bacias! Nosso alvo é o conhecido “Tux G2“.

2. Preparando o ambiente

Para começar, importe a imagem do Tux para o Inkscape. A idéia é utilizá-la como referência para as proporções originais.

Tux importado com o menu Arquivo > Importar...

3. O Corpo

Com a imagem importada, desenhe um círculo para cobrir a cabeça, e outro para o corpo do pinguim. Você verá que, para um melhor preenchimento, os círculos precisarão ser esticados ligeiramente para as laterais.

4. A asa

Com a Caneta Bézier, trace o contorno geral da asa esquerda (de quem vê). Observe na ilustração que, para facilitar meu traçado, eu coloquei as cores dos círculos em 50%.

Com a ferramenta de edição de nós, desloque os nós da asa que acabamos de esboçar para que cubra o vão entre os dois círculos. Se precisar, crie outros nós dando um duplo-clique nos segmentos do contorno onde eles forem necessários.

5. Finalizando o corpo

Agora selecione os dois círculos e tecle “CTRL +” (ou menu: Caminho > União) para criar um único objeto a partir dos dois.

6. O pé

Desenhe uma elipse para cobrir o pé esquerdo. Também desenhe um retângulo sobre a parte da elipse que será cortada. Selecione o retângulo e a elipse e, usando as teclas “CTRL -” (ou o menu: Caminho > Diferença), faça o corte.

7. O bico

Para fazer o bico, utilize a caneta bézier e faça um traçado geral.

8. Tudo pela metade

Agora nós temos todos os elementos necessários para começar a trabalhar com as simetrias. Antes, porém… Mais um pequeno macete. Para nós só interessa a metade do conjunto corpo+cabeça. Para cortar, desenhe uma linha vertical com a caneta bézier e alinhe-a ao centro do conjunto.

Com a linha selecionada, transforme-a em caminho (menu: Caminho > Converter contorno em caminho). Depois selecione o conjunto e tecle “CTRL -” (ou Caminho > Diferença). Isso fará um corte de 1px no meio exato do conjunto.

Para eliminar a parte da direita, vá no menu Caminho > Separar, e depois delete-a.

O mesmo procedimento pode ser aplicado para dividir o bico ao meio.

Para finalizar esta etapa, vocẽ pode unir a asa ao corpo (CTRL +). Retire o contorno do bico, pinte-o de qualquer cor e estamos prontos para…

9. Finalmente, o truque!

A essência deste macete para trabalhar com imagens espelhadas consiste basicamente em: (1) criar um grupo de objetos, (2) clonar este grupo, (3) clicar com o botão direito no grupo original e escolher a opção “Entrar no grupo #nome_do_grupo”. A partir daí, qualquer alteração feita no grupo será refletida no seu clone. Vamos fazer isso com o nosso meio pinguim.

Para começar, agrupe as peças criadas até agora selecionando-as e teclando “CTRL G”. Com o grupo selecionado crie um clone clicando neste botão…

Um clone é uma cópia do objeto que está vinculada ao original. Você não pode editar o clone a partir dele mesmo, somente a partir do objeto original. Agora que seu clone foi criado, inverta-o horizontalmente.

Alinhe todo mundo, selecione o grupo original e clique com o botão direito sobre ele para entrar.

Faça todos os ajustes necessários no grupo original e observe que todas as mudanças são refletidas no seu clone. Observe também que o Tux não é exatamente simétrico (talvez o seu criador não conhecesse uma ferramenta tão boa quanto o Inkscape… hehehe), mas você só deve se preocupar em fazer o melhor possível com o lado esquerdo.

Saia do grupo clicando sobre ele com o botão direito e escolhendo a opção “Ir para o pai”. Esta na hora de pintar esta que será a camada básica do nosso Tux. Você pode aplicar um gradiente radial no pé, mas o bico deve esperar mais um pouco.

Com apenas o clone selecionado e usando a ferramenta abaixo, desfaça o vínculo do clone, desagrupe o original e o clone (que agora não é mais um clone) para unir as duas metades do corpo e as duas do bico (este último procedimento você já conhece).

A clonagem não é feita só para trabalhar em grupos. Ela é até mais útil, na minha opinião, para trabalhar objetos isolados, como veremos no procedimento para dar um reflexo nos pés do nosso Tux. Crie uma elipse sobre o pé esquerdo e faça um clone, posicionando-o sobre o pé direito. Agora faça um gradiente linear no original como na ilustração abaixo.

A partir daqui, todos os demais elementos podem ser criados seguindo as mesmas técnicas em conjunto com outras já abordadas nos tutoriais anteriores. O resultado é este:

Muito importante é saber que a simetria pode ser obtida de várias formas, e as ferramentas a utilizar dependerão de cada caso. Assim, também podem ser considerados recursos auxiliares para simetria: a duplicação, os alinhamentos, os nós simétricos, os passos de deslocamento e rotação, a tecla “Shift” com as alças de redimensionamento, etc. Mas a mais fundamental ferramenta será sempre a criatividade.

COMPLEMENTO ESPECIAL

Para deixar ainda mais claro o truque do espelho, eu fiz este pequeno vídeo. Agora, como isso vai ser útil é com vocês!

(o vídeo termina aos 3 minutos, mas o processamento louco do Youtube deixou ele rodando por mais uns 6 depois do final…)

Este vídeo ilustra:

1 – a organização dos elementos da página em camadas;

2 – o uso de uma camada superior chamada “slices”, que fica transparente e onde são desenhados retângulos para determinar as áreas de exportação;

3 – o uso das propriedades do objeto para nomear cada “fatia” da camada slices, de modo a facilitar a exportação em lotes;

Com o botão direito sobre o slice selecionado, clique em Propriedades do objeto

Basta alterar o ID do objeto para que o nome do arquivo exportado seja automaticamente determinado.

Exportar Bitmap (Shift+Ctrl+E) - com esta opção marcada, todos os slices selecionados serão exportados de uma vez.

4 – como as camadas visíveis e invisíveis afetam o resultado da exportação das fatias;

5 – como obter uma fatia com transparência;

6 – a possibilidade de, utilizando o mesmo template, conseguir diferentes designs, tudo através da manipulação das camadas, caso elas sejam criadas de modo bem planejado.

Observem que, apesar de utilizar o meu gabarito para grid design na camada superior, o fato é que ele está ali apenas para referência.

O arquivo SVG utilizado neste vídeo pode ser baxado aqui (clique com o botão direito do mouse e escolha “Salvar link como…” ou opção equivalente).

Recomendações:

* Assista em HD com tela cheia.

* O vídeo não tem áudio, então apenas observe o que eu digo nos tópicos numerados acima.

Para utilizar, basta importar esta imagem para a camada mais superior do Inkscape ou carregá-la no pixel perfect. Sintam-se à vontade para usar, modificar, redistribuir, etc… é livre e grátis! Por enquanto vai a versão em PNG mas, quando o site estiver no ar, eu publico o SVG.

Pessoalmente eu não sei como o Gimp se comporta com imagens gigantescas, como os perfis ICC vão afetar a impressão do meu trabalho, ou se a separação CMYK funciona. Mas se você também não sabe, ou se não sabe nem o que é isso, provavelmente você não precisa do Photoshop. Eu sou designer digital há 20 anos, usei (e ensinei a usar) o Photoshop e hoje uso o Gimp para 100% dos meus trabalhos já há 2 anos (nos 3 anos anteriores eu o alternava com uma instalação do Photoshop pelo wine). Isso foi uma escolha profissional que envolveu até mesmo pesar se valia a pena ou não investir no meu treinamento nesta outra ferramenta.

O que falta às comunidades de software livre em geral é menos propaganda e mais marketing. Eu gostaria muito de ter uma noção da proporção entre os usuários licenciados do Photoshop que o utilizam só para retocar as fotos das férias (que são um grupo que nem do Gimp precisam) e aqueles que editam grandes lotes de imagens pesadas; saber a proporção entre os profissionais usuários do Photoshop que tem de mandar seus trabalhos para uma gráfica e aqueles que os entregam sob forma digital. Esse é o tipo de informação relevante que nós não temos. Sem ela, somos obrigados a apenas arriscar palpites e ficar lendo os intermináveis “debates” sobre o profissionalismo de quem escolhe uma ferramenta ou outra.

Sobre isso, para mim, a questão está decidida: o Photoshop só será profissional quando conseguir fazer um cafezinho e me servir. Até lá, o profissional sou eu!

Bom proveito!

parte 1/2

parte 2/2

Editor: Geany

Pessoalmente, nunca trabalhei com IDE’s do tipo WYSIWYG, nem mesmo no tempo em que usava o Windows quando, por último, minha escolha recaía sobre o excelente Notepad++. Já com o Ubuntu, e depois de muitas experiências (algumas bem frustrantes), acabei por fixar-me em um editor realmente muito bom: o Geany.

O Geany com todas as suas barras...

E aqui com tudo oculto, como eu prefiro...

Além das capacidades normais de um editor voltado à programação, o que me agrada muito no Geany é a sua leveza. Códigos longos costumam pesar em outros bons editores, como o Gedit, por exemplo, mas não parecem afetar o Geany. Para conhecer todas as funcionalidades do Geany, visite http://geany.org.

Navegador e muito mais: Firefox

Hoje não é mais novidade falar que o Firefox é muito mais do que um navegador nas mãos do designer e desenvolvedor de web. Com sua enorme lista de complementos, ele se torna uma suite quase completa e totalmente adaptada às necessidades de cada profissional. No meu caso, não podem faltar os seguintes complementos:

MeasureIt: permite desenhar uma régua em pixels sobre a página.

ColorZilla: basicamente um seletor de cores, mas com outras tantas funcionalidades. Infelizmente não funciona direito com minha instalação 64bits do Ubuntu, o que me fez adotar um segundo complemento do gênero (abaixo).

Editado em 11/9/2010: Houve uma atualização do ColorZilla ontem, e ele passou a funcionar perfeitamente na arquitetura 64 bits. Mesmo assim, mantive o Rainbow por conta da sua capacidade de analisar cores em imagens.

Rainbow: uma completa ferramenta de gerenciamento de cores e paletas. Pode selecionar uma cor, analisar toda a paleta da página e ainda mantém uma biblioteca das análises onde nós podemos atribuir tags às cores e realizar pesquisas posteriormente. Esta é uma ferramenta que descobri recentemente, mas já não posso ficar sem ela!

Screengrab!: O mais simples e eficaz dos complementos para captura de páginas. Com ele nós podemos capturar a página inteira, a sua porção visível, ou até uma área selecionada.

Dummy Lipsum: um ótimo gerador de “lorem ipsum”, muito utilizado para popular áreas de texto nos nossos layouts.

Dummy Images: um simples gerador de imagens vazias (só com o texto das medidas) para preencher espaços de imagens em layouts.

FireFTP: excelente cliente de FTP que abre numa aba do próprio Firefox.

Web Developer: uma excelente barra de ferramentas com dezenas de utilidades para facilitar o nosso trabalho.

Visualização no Internet Explorer 7

De fato, este é o maior problema para todos os designers e desenvolvedores de web. O pior navegador é, infelizmente, o mais utilizado, e nós precisamos desenhar nossos sites pensando nas anomalias impostas pela equipe de desenvolvimento da Microsoft. Pessoalmente, desisti de fazer ajustes para o IE6, e hoje me concentro no IE7. Mas como testar meus sites no Ubuntu? Existem duas alternativas:

Alternativa online – IE NetRenderer

Se você tem como deixar o seu site num espaço de testes na web, basta informar o URL que o IE NetRenderer irá lhe mostrar como ele irá parecer na versão do IE que você escolher. O serviço é útil e interessante, mas as desvantagens são óbvias, a começar pela lentidão do processo e pela necessidade de se ter a página no ar.

Alternativa no desktop – PlayOnLinux

O PlayOnLinux é um assistente de instalação para diversos programas Windows no Linux. Ele depende do Wine e pode, entre outras coisas, instalar o Internet Explorer 7 facilmente no Ubuntu. Como navegador, ele não vai funcionar nada bem, mas para testar nossas páginas é o que basta. O meu eu instalei seguindo este tutorial.

Programas gráficos: Gimp, Inkscape e Agave

Já faz um bom tempo que todos os meus layouts são produzidos no Inkscape e finalizados no Gimp. Sobre estes excelentes programas, aliás, não tenho nada a acrescentar, já que a sua popularidade tem crescido vertiginosamente ao lado da sua aceitação entre profissionais. O que talvez poucos conheçam é este pequeno e útil programa destinado à criação de paletas de cores: o Agave.

Ele está nos repositórios e é facilmente instalado pelo Synaptic ou pela linha de comando. Entre os seus recursos existe a possibilidade de salvar as cores selecionadas numa paleta do Gimp, formato que também é utilizado no Inkscape.

Ferramentas diversas: Web Developer Tools

Como estamos sempre alertas a tudo que possa facilitar e enriquecer nossas atividades, acabei descobrindo recentemente no GNOME-Look um programa bastante promissor e que já tem a sua utilidade garantida: o Web Developer Tools.

O desenvolvedor ainda não criou um site para o programa, mas a sua página no GNOME-Look fornece todas as informações necessárias para a instalação no Ubuntu.

Apache + PHP + MySQL + outros: XAMPP

Definitivamente a forma mais prática e segura de se ter tudo isso funcionando no Ubuntu para fins exclusivos de testes. o XAMPP não é realmente “instalado” na sua máquina, mas copiado para uma pasta e, de lá, executado apenas quando você quer e precisa.

Eu fiz a minha instalação seguindo este tutorial, e ainda criei um lançador para o seu painel de controle por este outro. Aqui funciona que é uma beleza!

Bom, pessoal… Por agora as dicas são essas. Como disse, é a minha lista, e me interessa muito saber qual é a sua.