Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

9 Funções do Sketch que Você Deveria Estar Usando

by
Difficulty:BeginnerLength:ShortLanguages:

Portuguese (Português) translation by Hugo Carlos Borges Pinto (you can also view the original English article)

Sketch é um aplicativo gráfico para designers, que se encaixa muito bem no mundo do web design. Se você é novo usuário, pode não saber de alguns dos truques que o Sketch oferece, escondidos por baixo da superfície. Hoje eu gostaria de mostrar algumas dicas para agilizar seu fluxo de trabalho com design usando ele.

Espere aí. O que é o Sketch?

Ano passado o Sketch recebeu uma nova camada de tinta com a versão 2, e desde então, mais e mais designers estão mudando para ele. Sua simplicidade o torna possivelmente mais intuitivo do que o Photoshop (que, não se esqueça, foi desenvolvido originalmente para editar e processar imagens), enquanto suas ferramentas de vetores são mais do que capazes de enfrentar o Illustrator. O Sketch não é uma ferramenta de edição bitmap. Ele oferece uma pré-visualização de pixels, mas foi feito para ajudá-lo a projetar interfaces e ícones.

1. Plug-In Symbols para Objetos Inteligentes

Bem recentemente Tisho Georgiev lançou um ótimo plugin para Sketch. Chamado Symbols, ele nos dá a habilidade de imitar Objetos Inteligentes; uma função que o Sketch ainda não suporta.

Objetos inteligentes permitem que você tenha múltiplas instâncias de um objeto dentro de seu documento. Ao editar qualquer desses objetos inteligentes, e apertando CMD+E, você vai ver essas alterações em todas as instâncias.


Veja este vídeo com instruções de como usá-lo.

2. Guias Inteligentes

O Sketch suporta muitos atalhos de teclado. Um desses exemplos é para "Guias Inteligentes".

2-smart-guides

Ao selecionar um objeto e apertar ALT (or OPTION), as Guias Inteligentes vão aparecer, destacando a distância entre o objeto selecionado e as bordas do documento. Se você deseja verificar a distância entre o objeto selecionado e outros objetos, apenas paire sobre o objeto desejado e as Guias Inteligentes vão se ajustar.

3. Grades Fáceis

Criar uma grade é simples, mas pode ficar ainda mais fácil com o Sketch!

3-grids

Sketch possui uma funcionalidade, simplesmente chamada "Criar grade". Clique nas quatro caixas na sub-barra (mostrada no lado superior direito na imagem), para revelar um menu popup, no qual você pode definir quantas linhas e colunas quer para arrumar os objetos selecionados dentro.

Se você quer definir especificamente uma área ao redor de cada objeto, assim como o espaço entre eles, você pode selecionar a opção Boxed.

4. Predefinições do Artboard

Se você está utilizando Artboards (o Sketch usa um quadro infinito como padrão) é útil usar predefinições do Artboard. Ao clicar no botão do Artboard na barra de ferramentas você terá a opção de selecionar as predefinições da sub-barra.

Presets like these are also available ready to go as Templates
Predefinições como estas também estão disponíveis, prontas para uso, como Exemplos (Templates)

Predefinições permitem que você organize seu trabalho usando dimensões predefinidas. Por exemplo, você pode fazer um documento com uma série de artboards, para que você não precise relembrar todos os vários tamanhos de favicons necessários atualmente!


5. Exemplos (Templates)

O Sketch consegue criar novos arquivos diretamente de um exemplo (template), através do item de menu File > New from template, mas você também pode salvar um arquivo atual como exemplo (template) para começar cada projeto do seu estágio atual. Vá em File > Save as template para fazer isto.

5-templates

Isto pode ser muito útil, por exemplo, quando projetando para iOS. Você pode criar um arquivo com a barra de status e barra de navegção, então salvá-lo como um exemplo (template), para que você possa utilizá-lo posteriormente em outros projetos iOS.

6. Atalhos

Como mencionado antes, o Sketch oferece muitos atalhos. Dê uma olhada em Sketch Shortcuts por Robert van Klinken e Jeffrey de Groot. Eles mostram (quase) todos os atalhos que o Sketch oferece.

Você também pode criar seus próprios atalhos através das Preferências de Sistema do OS X - alguns exemplos são mostrados no final da página Sketch Shortcuts.

sketch-settings

7. Escolha de Cores

Para escolher uma cor facilmente de qualquer lugar da tela, apenas pressione CTRL+C. Uma lupa irá abrir, para te ajudar a escolher exatamente a cor que você deseja. Muito simples. Muito efetivo.

8-color-picker

8. Pixels Perfeitos

Deixe-me brevemente te mostrar a melhor ferramenta que vem com o Sketch. Ela te ajuda a ter pixels perfeitamente posicionados dentro do seu design.

Se, por exemplo, você tem uma camada que contém frações de pixels em largura ou altura, ou não está posicionada muito bem, você normalmente pode (em outros pacotes gráficos) ter uma dor de cabeça arrumando os pixels quebrados para atingir perfeição precisa. No Sketch, clique em Edit > Round to nearest pixels edge (ou crie um atalho personalizado para isto) e toda a camada vai ser limpa.

7-round-to-nearest-pixels
Duas paralvras para você: Atalhos Personalizados!

Você pode ter que usar essa função depois de importar ícones em um arquivo Sketch, certifique-se de aproximá-los da próxima borda de pixel para garantir que eles estão perfeitamente posiconados.

Nota: Se você está projetando em @2x (para telas com alta densidade de pixels) e está exportando em @1x esteja ciente que cada posição de pixel precisa ser divisível por dois, ou então você estará dividindo pixels novamente e a camada acabará borrada na versão @1x.

Outra nota: De uma olhada no artigo de Meng To para aprender mais sobre pixels perfeitos.

9. Exportando

Exportar é uma grande função que já vem de fábrica com o Sketch. Apenas vá em File > Export e desenhe quantos pedaços forem necessários. Você também pode exportar como @2x, se você projetou em @1x, e vice-versa.

sketch-export

O Sketch oferece ainda mais controle de pedaços. Com o menu File > Add Slice from Selection você pode selecionar uma camada que acabou de criar, e clicar neste item para ter um pedaço que é exatamente do tamanho da seleção.

Conclusão

Existem muitas funções, extensões e fluxos de trabalho úteis para o Sketch. Use os mencionados acima para melhorar seu fluxo de trabalho e nos diga nos comentários suas próprias sugestões!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
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.