Categoria: Desenho

Aplicações e aplicativos web para você desenhar online

Google Web Designer, para criar anúncios, sites dinâmicos e elementos 3D

Já falamos aqui sobre o lançamento de uma ferramenta que permite criar componentes para site em HTML5, CSS e Javascript, um novo aplicativo criado pelo Google e lançado com o nome Google Web Designer, disponível em google.com/webdesigner.

Objetivo de Google Web Designer

O aplicativo, que já tem versão (ainda em modo beta) para Linux, Windows e Mac, foi criado para permitir que qualquer usuário, sem necessidade de maiores conhecimentos de programação, possa criar anúncios elegantes, sites dinâmicos com animações, elementos 3D e gráficos que usam as últimas tecnologias em programação para Internet.

Tutoriais de Google Web Designer

Através da página de Google Plus foram publicando muitas dicas e tutoriais para poder usar essa ferramenta da melhor maneira possível, porém, todos eles terminam no mesmo site: o canal do youtube.

Ali podemos conhecer melhor a ferramenta de gradientes, o modo de código (é possível editar código, não só arrastar e soltar elementos), a possibilidade de criar banners com várias páginas… sem dúvida, um bom lugar para aprender a usar esta ferramenta.

Funcionalidades de Google Web Designer

Entre as funcionalidades destacadas da ferramenta temos:

– Dois modos de animação: No modo rápido podemos construir uma animação indicando cenas e deixando que a ferramenta se encarregue dos fotogramas intermediários. No modo Avançado animaremos os elementos individuais utilizando camadas, que muda a localização dos elementos de forma detalhada.

– Ambiente de edição 3D: Podemos criar e manipular conteúdo 3D utilizando uma série de ferramentas e a capacidade de CSS3. É possível girar objetos ao longo de qualquer eixo, visualizando transformações 3D em poucos segundos.

– Exibição de Desenho e de Código: Além da plataforma visual, podemos acessar a exibição de código e trabalhar em “modo programador”. Todos as mudanças realizadas no código são atualizadas em tempo real no modo visual.

– Ferramentas de ilustração: Podemos importar recursos de qualquer outra plataforma de criação ou usar as ferramentas de desenho integradas para criar desenhos vetoriais.

– Exportação de anúncios: Podemos publicar os anúncios criados em DoubleClick Studio ou AdMob com um só clic, assim como optar pela opção genérica para levar o código a outra plataforma de anúncios.

Como pode ver, o objetivo é permitir anúncios mais elegantes na Internet, embora possamos usá-lo para programar qualquer componente dentro de nossas páginas, copiando e pegando o código gerado.

Sites para quem trabalha com cores

Encontrar as cores adequadas para um novo projeto nem sempre é uma tarefa das mais fáceis, por isso é interessante conhecer aplicativos que possam nos ajudar a descobrir combinações, que, originais ou não, gerem o efeito adequado em nossos clientes.

Aqui mostraremos algumas das melhores ferramentas que conheço nessa categoria, fique à vontade para deixar nos comentários sugestões:

colorexplorer.com

Já é um clássico que nos permite extrair cores e imagens, guardar paletas e descobrir novas combinações.

Adobe Kuler

Famoso aplicativo de Adobe que, com uma versão web criada há mais de 8 anos, dispõe também de aplicativo para iPhone para capturar as cores das imagens que indicarmos.

brandcolors.net

Podemos encontrar as cores utilizadas por grandes marcas famosas, obtendo o código de cada uma e permitindo baixá-la em formato CSS, SCSS e LESS.

colorotate.org

Um impressionante sistema que nos permite trabalhar com paletas de cores em 3 dimensões.

design-seeds.com

Para guardar e compartilhar paletas de cores mostrando sempre exemplos do que pode se fazer com determinada combinação de cores.

Três ferramentas para criar um banner atrativo

É extremamente importante criar imagens para poder divulgar mensagens nas redes sociais. Os posts com imagens são mais atrativos no Facebook, no Twitter, no Google Plus… mas é necessário conhecer as ferramentas adequadas para poder criar bons resultados sem ter muito conhecimento de programação e design.

Para isso lhes recomendo estas três opções que, disponíveis de forma gratuita na Internet, podem ajudar bastante:

– clippingmagic, aplicativo que ajuda a eliminar o fundo de qualquer fotografia para obter um elemento específico, semelhante ao que faz a varinha mágica do Photoshop, mas com resultados mais rápidos e sem necessidade de instalar nada.

– picmonkey é uma excelente solução para criar banners com efeitos, texturas, stickers, tipografias variadas, marcos e muitos outros elementos que permitem construir um banner em poucos minutos.

– canva, aplicativo muito completo que ajdua a encontrar milhares de trabalhos já realizados por designers do mundo todo para usá-lo em nossos banners. Muitos dos componentes são gratuitos, mas esta ferramenta precisa sim de cadastro.

E vocês, o que usam para criar banners na Internet?

Criando infográficos que se adaptam aos dispositivos móveis

Já falamos por aqui de várias ferramentas que podemos usar para criar infográficos, embora esteja claro que infogr.am continua sendo a preferida por milhares de usuários em todo o mundo.

A ideia desta plataforma é possibilitar a criação de infográficos sem necessidade de possuir grandes conhecimentos de desenho. Há vários modelos diferentes com a opção de carregar os dados para que se adaptem ao que queremos mostrar ao mundo. É possível ir incluindo mapas, gráficos, molduras, textos e outros elementos para construir o infográfico adequado.

Infogr.am participa de dezenas de eventos relacionados com a informação visual, divulga bons livros sobre o assunto em seu blog, atualiza seu aplicativo com frequência e, agora, permite que os infográficos criados se adaptem automaticamente às pequenas telas.

Assim, depois de publicar nosso trabalho podemos obter o código necessário para introduzi-lo em nosso site web. Se copiarmos o script adequado (responsive, na imagem abaixo), veremos como o desenho se adapta aos móveis perfeitamente.

Criar infográficos com infogr.am é gratuito. Podemos publicá-los em seu site, no nosso, embora para exportar o resultado em PDF ou PNG seja necessário ser usuário Pro. Este tipo de usuário também pode compartilhar o trabalho desde uma url não pública, proteger os infográficos com senha e acessar a mais desenhos dos disponíveis na opção gratuita.

Flite, para desenhar anúncios e animações em HTML5

Há poucas semanas anunciamos uma ferramenta que Google construiu para permitir que os desenhistas pudessem realizar campanhas (anúncios) em HTML5. Se tratava de WebDesigner, aplicativo que podemos instalar em nosso computador para criar banners e animações de diversos tamanhos e deixando de lado o Flash, tecnologia cada vez menos presente na web moderna.

Este aplicativo está disponível para Mac e Windows, porém, se o que quer é um que possa ser executado na web, sem necessidade de instalar nada, dê uma olhada em Flite.com.

Se trata de uma plataforma que, segundo informaram em Techcrunch, não tem muita concorrência no mercado, a exceção da mencionada WebDesigner do Google, embora neste caso, ao não precisar ser instalada (é 100% web), pode ajudar melhor quem usa Linux ou quem não pode instalar aplicativos sem passar por burocráticos processos em sua empresa.

Flite permite importar também arquivos de outras plataformas, como Photoshop ou Illustrator, sempre com a ideia de que o trabalho criado possa ser visualizado sem problemas desde dispositivos portáteis.

Embora o objetivo principal seja o de criar anúncios, podemos usá-lo para realizar qualquer tipo de animação, escolhendo o tamanho e arrastando os componentes desejados dentro do painel de controle.

Google lança ferramenta para criar sites web e anúncios em HTML5

Em www.google.com/webdesigner temos disponível a nova ferramenta do Google, um aplicativo que nasce para nos ajudar a construir sites web e anúncios em HTML5, compatíveis com qualquer dispositivo, quer seja PC ou móvel.

Foi anunciado no doubleclickadvertisers como um programa em versão beta para Windows e Mac, disponível de forma gratuita para que seja fácil criar páginas web e banners só arrastando e soltando elementos.

A ideia é que possamos criar animações HTML5 de forma intuitiva, que seja possível ver e editar o código por trás dos desenhos, que possamos construir mensagens publicitárias sem problemas, assim como receber as atualizações do produto de forma automática e que não tenhamos que pagar absolutamente nada por nada disso.

Temos já um guia de uso no suporte do google e uma página oficial em g+ para poder interagir com dúvidas e sugestões, o que é muito bem vindo, pelo menos, até estarmos acostumados com o uso desse novo aplicativo.

O objetivo é melhorar a qualidade dos anúncios usados na plataforma de publicidade do Google, claro, porém, podemos usar os resultados em qualquer lugar, e isso é deixado bem claro na nota de apresentação.

Veja abaixo o vídeo de apresentação, onde podemos conhecer as muitas possibilidades da ferramenta:

gliffy, para criar diagramas pela Internet

Faz vários meses vimos alternativas a Microsoft Visio, algumas delas gratuitas e online (como draw.io), ideais para construir diagramas de fluxo das mais diversas categorias.

Hoje vou lhes apresentar uma opção que venho usando desde 2006: gliffy.com, com extensão para navegadores web, aplicativo para chrome e plugin que permite ser usado em outras plataformas, como Microsoft Office.

O editor de diagramas Gliffy é muito intuitivo, com dezenas de diagramas que podemos criar arrastando o soltando o elemento desejado (podemos testar o sistema sem necessidade de fazer cadastro). O resultado pode se sincronizar com nossa conta do Google Drive, quando usamos o aplicativo Chrome, permitindo poder continuar o trabalho desde outros dispositivos.

A versão gratuita só permite a criação de 5 diagramas, com um espaço de armazenamento de 2 MB (o suficiente, se considerarmos que os diagramas de blocos mais simples contêm apenas texto, sem imagens ou vídeos).

Você pode experimentá-lo diretamente a partir de sua home page, onde também tem disponíveis vários exemplos criados com esta ferramenta, ideal para verificar as possibilidades do sistema e comprovar se é a ferramenta que você está procurando para fazer seu próximo fluxograma.