Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Gravit Designer
Webdesign

Iniciando com o Gravit Designer

by
Difficulty:BeginnerLength:LongLanguages:

Portuguese (Português) translation by Ingrid Fornazari (you can also view the original English article)

O Gravit Designer é, na minha opinião, o próximo grande programa de edição vetorial. É amigável ao usuário, tem grau profissional, e realmente cruza plataformas de modo que funciona no navegador, em Linux, Mac, ChromeOS e Windows, e futuramente estará disponível para iPad e Android também. está sob um desenvolvimento ativo com novos recursos sendo adicionados em uma taxa rápida.

E ainda por cima de tudo isso é totalmente grátis sem anúncios ou métodos de monetização incômodos. Nas palavras de Alex do Gravit quando perguntaram se o programa permaneceria livre.

"Sim ele irá permanecer gratuito definitivamente e nunca será 'aleijado' por um estúpido fremium ou que quer que seja. Nós mais tarde poderemos oferecer conteúdo adicional para equipes que poderão ser pagos (pois nós precisaremos pagar as contas desses servidores também) mas o Designer ficará gratuito pois nós queremos que qualquer um possa ter acesso a uma ferramenta pro design de graça."

Nesse tutorial eu conduzirei você através das características que fazem do Gravit Designer tão promissor. Nós não entraremos nos mínimos detalhes colocando cada ferramenta sob o microscópio, em vez disso daremos uma ampla visão geral para que você tenha a melhor ideia possível o que está incluído nesse software. Vamos começar!

Instalação e Primeira Execução

Se você gostaria de usar uma das versões para desktop do Gravit dirija-se a designer.io/#download e agarre o instalador para seu OS. (Nota: no momento há um bug nos menus suspensos na versão Linux, então por hora todos vocês pinguins podem preferir usar a versão de navegador ao invés disso.

Para aqueles que preferirem usar a versão para navegador, que tem a vantagem de sempre ser a mais atualizada, e no momento oferecer uma melhor performance, vá até: designer.gravit.io/

Logo no começo as coisas já ficam legais. Nós somos saudados com uma tela de boas vindas que nos dá a opção de configurar uma altura e largura preferidas para o documento. Entretanto você também pode deixar os campos altura e largura em branco e sua tela será infinita; uma característica fantástica para quando você não tem certeza de qual será o tamanho do seu design.

Também em sua primeira tela nós temos cerca de 50 conjuntos de predefinições de tamanhos para escolher, com 19 predefinições para impressão, oito para design de website, quinze para capas de mídias sociais e conteúdo, seis para fones e relógios, e sete para tablets.

Com tudo isso, se você se inscrever de graça para uma conta grátis do Gravit Cloud você tem acesso a uma nova gama de modelos pré prontos clicando em New from Template (novo a partir do modelo) no lado esquerdo da tela de boas vindas.

Alguns dos modelos pré prontos de mídia social do Gravit.

Aqui você vai encontrar gráficos de mídia social prontos para usar, trinta e seis apresentações de slides, oito posteres, vinte e quatro gráficos de postagem para Facebook, vinte e três gráficos para blog, vinte e seis pôsteres A4 e vinte gráficos de cartões. Todos eles prontos para usar como estão, ou podem ser usados como base para acrescentar em outro. Essa coleção é muito nova, de apenas algumas semanas atrás, então espere que ela cresça com o passar do tempo.

Rápida Visão Geral da Interface

Agradecidamente, a interface do Gravit Designer é bem intuitiva então você não se encontrará particularmente perdido se você for as cegas para explorar o software. No entanto, nós temos uma rápida visão geral dos componentes chave.

A primeira coisa que você deve saber é que a interface não tem que ser roxa. Se você gosta de roxo pode deixá-la como está, mas se preferir uma UI monocromática vá até o menu principal no canto superior esquerdo e escolha Edit > Settings (Editar > Configurações) e selecione tanto o "Dark Theme" (Tema Escuro) ou "Light Theme" (Tema Claro).

Os usuários do Sketch vão achar sua interface familiar pois o layout é bem semelhante. Através do topo nós temos a nossa barra de ferramentas com todas as ferramentas que você espera encontrar num app de vetor, tais como tela controles de movimento e encolhimento, caminhos e criação de textos e ferramentas de seleção, rotação e virada de forma, operações de multi formas, controle de ordem de empilhamento, e teclas de atalho de exportação e apresentação. Observe que também podem ser abertos múltiplos documentos de uma vez e serão visíveis via abas do lado direito.

Gravit menu options

No lado esquerdo nós temos três abas: Layers,  (Camadas), Libraries (Biblioteca) e Tutorials (Tutoriais). As abas de tutoriais (devem ser movidas para a barra de menu Help (Ajuda) com a versão 3.2) é uma ótima orientação quando você está em seu primeiro uso do Gravit. A aba de Bibliotecas fornecem a você uma extensa coleção de recursos arraste e solte, esses são em acréscimo aos modelos que nós falamos acima. A aba de camadas é a que você abrirá a maioria das vezes, uma vez que ela mostra a lista das suas páginas (mais em páginas brevemente), e é claro, suas camadas.

Do lado direito do documento você tem o contexto específico dos controles de design para seu atual objeto selecionado. Se nada estiver selecionado, as configurações do documento serão mostradas no lugar.

Paginas; como Pranchetas com Bônus do "PowerPoint"

As páginas no Gravit Designer são meio um híbrido de páginas e pranchetas, você pode encontrar outras aplicações. Cada página é como um documento autônomo, com suas próprias dimensões, sangria, margem e configurações de cor da tela. Você começa com uma única página por padrão e acrescenta mais clicando no pequeno botão Create New Page (Criar Nova Página) no canto superior direito do painel Pages (Páginas). Você pode então visualizar qualquer página selecionando-a naquele painel.

Se você quiser usar as páginas como você geralmente usa as pranchetas, ative a alternância à esquerda do ícone delete e você verá todas as suas páginas de uma vez no "modo Multipáginas". Essas páginas podem ser selecionadas, movidas, e redimensionadas manualmente, ou alterne para um dos diferentes tamanhos predeterminados como se elas fossem documentos individuais. No modo multi página você pode também duplicar páginas clicando em seus títulos na tela para selecioná-los e então tanto pressine ALT + arrastar ou pressine CTRL/CMD + D.

As páginas do Gravit também tem o fantástico recurso de "Master Pages" (páginas mestres). Com esse recurso você pode configurar uma página para agir como se fosse a "pagina mestre", com elementos como plano de fundo ou cabeçalhos que serão comuns às outras páginas. Então você pode configurar essas outras páginas para desenhar a partir da página mestre, trazendo todos os seus conteúdos, sobre  os quais você pode criar elementos adicionais. Quando você atualizar os elementos na página mestre, todas as outras páginas serão atualizadas em tempo real também.

E uma característica muito legal, usando as páginas do Gravit você pode instantaneamente ter a habilidade de criar uma apresentação "estilo PowerPoint". Apenas clique no botão Play o mais distante à direita na barra de ferramentas e cada uma de suas páginas se tornará um slide. Acione a seta para baixo para ir para o próximo slide e a seta para cima para voltar.

Gravit exibindo uma apresentação.

Caminhos e Formas

Criações de caminhos e formas no Gravit tem as ferramentas familiares que você espera em qualquer programa de gráficos vetoriais. Nós temos a ferramenta caneta padrão para desenhar linhas retas e curvas bezier, e uma série de ferramentas para linhas predefinidas, retângulos, elipses, polígonos, triângulos e estrelas.

Entretanto nós também temos uma ferramenta extra que é bem útil, esta é a ferramenta bezigon. Se você segurar o Alt enquanto estabelece pontos com a ferramenta bezigon, curvas suaves serão geradas automaticamente em cada ponto.

Uma vez que os caminhos e formas são desenhados eles podem  ter suas propriedades alteradas na coluna lateral. Caminhos regulares podem ser configurados como abertos ou fechados, deixando fácil fechar um caminho que não é totalmente correto, ou abrir um caminho para continuar acrescentando pontos. As formas tem configurações contexto específicas tais como a habilidade de converter elipses em gráficos de pizza, ou configurar os números de pontos que um polígono ou estrela deve ter.

Texto Regular, e Texto em um Caminho

A ferramenta de texto também funciona como se espera quando se usa outros aplicativos. Com a ferramenta texto selecionada você pode clicar em um ponto para começar a digitar algum texto dimensionado dinamicamente, ou você pode clicar e arrastar para desenhar uma caixa onde seu texto estará contido.

E um recurso que é super útil para web designers, se você digitar "lorem" e então pressionar ESPAÇO você conseguira um parágrafo de texto "Lorem ipsum" em uma caixa de texto gerada automaticamente para você.

Ter um texto seguindo um caminho é extremamente fácil com o Gravit. Apenas desenhe qualquer caminho ou forma, selecione a ferramenta texto, passe o mouse sobre o caminho até você ver uma linha vermelha aparecendo ao longo dele, então clique. Isso vai iniciar algum texto próximo que seguirá a forma do caminho. O caminho pode ser modificado depois e o testo será atualizado para corresponder a forma.

Quando você seleciona o texto que você vai colocar no caminho você também tem acesso a alternadores na coluna do lado direito para configurar o texto dentro ou fora do caminho, e reverter o texto. E também há um jeito simples de posicionar o texto, apenas clique e arraste a o pequeno marcador laranja no começo do texto e é tudo o que é preciso.

Google Fonts Integrado

A maioria dos designers já esteve no carrossel de fontes para web muitas vezes antes; Ir até o Google Fonts, escolher sua fonte, baixar, instalar (reiniciar o app de design em muitos casos), selecionar a fonte no app de design, e repetir se ela não ficar boa. Ou talvez nós podemos apenas usar Skyfonts no lugar para evitar o passo "baixar e instalar".

Entretanto no Gravit Designer toda a seleção do Google Fonts está disponível em linha, fora da caixa, então, usar fontes para web exatamente tão fácil quanto usar fontes regulares.

Além disso, você pode importar suas próprias fontes quando usar a versão web do Gravit com o File > Import > Add Fonts...(Arquivo > Importar > Adicionar Fontes)

É claro que a presença de fontes para web não significa que você não possa usar as fontes do sistema, contanto que você esteja usando a versão para desktop do Gravit todas as suas fontes locais estarão disponíveis também.

Múltiplos Preenchimentos e Traçados

Uma coisa que eu amo no Gravit, é outro recurso que os usuários do Sketch estão bem familiarizados, múltiplos preenchimentos e traçados. Em muitos aplicativos se você quer criar efeitos de composição colocando, por exemplo, ruido sobre imagens de ladrilhos sobre cores planas, você precisa duplicar sua forma alvo cada vez. No Gravit isso não é necessário, porque você pode adicionar quantos preenchimentos e bordas você quiser a qualquer forma dada.

Cada  preenchimento ou borda se comporta mais como uma camada separada, com seu próprio status de mostrar ou ocultar, modo de mesclagem e configurações de opacidade. Preenchimento também pode ser organizado em qualquer ordem que você quiser. E porquê você pode usar cores planas, imagens de texturas, gradientes ou ruido há muito espaço para criatividade.

Efeitos; Melhores que Estilos de Camadas

Efeitos no Gravit são mais parecidos como os efeitos de camada que você está familiarizado de outros aplicativos, mais assim como nos preenchimentos e traçados, você não está limitado a um efeito por camada; você pode ter quantos quiser.

Efeitos incluem o arranjo padrão de sombra projetada (dobrado como brilho externo), brilho interno (duplicado como brilho interno) e sobrepor (cor ou gradiente). Efeitos de traçado e sobreposições de padrão não são desnecessários, é claro, devido as ferramentas existentes no Gravit de preenchimento e traçado. Entretanto há também algum interesse real em efeitos adicionais como "espelho", que cria um efeito de reflexo abaixo da forma, ou a "sombra curva" que cira uma sombra como essa:

Há também um desfoque gaussiano, um simples efeito de recolorir com controle deslizante de matiz, e mais efeitos de ajuste de profundidade de cor. Todos esses efeitos podem ser colocados em camadas e configurados como você quiser, e ajustados e reconfigurados em qualquer ponto do processo de design.

Estilos Compartilhados; Para Estados e Economia de Tempo

O Gravit tem a habilidade de criar estilos que definem o preenchimento da camada, bordas, efeitos e configurações de textos. Esse estilos tem um par aplicações super benéficas.

Um, você pode criar estilos que representam diferentes estados na mesma forma, tais como botões padrão e aparência suspensa por exemplo. Dois, você pode aplicar um estilo a múltiplos objetos na tela e então você atualiza o estilo em um desses objetos e você tem ele aplicado a todos os outros também.

Âncoras para Semi Responsividade

As configurações de âncora permitem que você defina como uma forma deve responder quando seu objeto pai é redimensionado, o que significa que você pode criar semirresponsividade funcionalmente e economizar um tempo enorme.

Duplicar a Página (topo) ancorar o topo, parte inferior e centro horizonta para controlar sua resposta a um objeto pai redimensionado.

Por exemplo, se você está criando uma UI que precisa funcionar em múltiplos tamanhos de telas, você pode criar um layout de um tamanho e configurar pontos âncora para controlar como os elementos do design devem ser esticados, encolhidos ou movidos quando o tamanho do documento mudar. Você deve então fazer uma duplicata da página atual e redimensionar ela, mantendo a maioria do seu já existente design sem de fato precisar refazê-lo.

Enbcerrando

O Gravit Designer já é um software fantástico, e mostra uma promessa forte do que está por vir. No próximo lançamento, a versão 3.2, nós veremos a inclusão de símbolos, que alguns usuários podem achar ser a peça final do quebra-cabeça. Para ter uma visão geral de tudo o que está por vir nas próximas versões confira o roadmap.

O Gravit é poderoso, flexível, desenvolvido ativamente, realmente cruza plataformas, e completamente livre de taxas. Qualquer que seja a sua razão para trabalhar com vetores, o Gravit Designer, absolutamente, vale a pena você conferir.

Pra saber mais visite: designer.io.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.