portaldacalheta.pt
  • Principal
  • Web Front-End
  • Gestão De Engenharia
  • Ciência De Dados E Bancos De Dados
  • Ascensão Do Remoto
Ferramentas E Tutoriais

Coisas que você pode não saber sobre tipografia no Sketch



Todo designer sabe que existem muitas ferramentas diferentes que os ajudarão a trabalhar com tipografia. Nem é preciso dizer que aplicativos como Adobe InDesign, Scribus e Photoshop são provavelmente o seu kit de ferramentas de escritório. Ainda assim, embora você possa ter ouvido falar do Sketch, provavelmente o ignorou como uma mera ferramenta de design da web, que não deve ser usada quando se trata de fontes.

Não tem que ser assim. Na verdade, o Sketch pode se tornar uma das melhores ferramentas para a criação de peças tipográficas incríveis. O segredo é simples; você precisa conhecer algumas dicas e truques para ajudá-lo ao longo do caminho.



Neste artigo, examinaremos algumas maneiras rápidas e fáceis de corrigir as pequenas deficiências do Sketch quando se trata de tipografia. Na verdade, este é o terceiro artigo da nossa série Dicas e truques de esboço . Se você quiser ver os outros, verifique-os aqui: Símbolos Aninhados no Sketch , Usando Emojis para gerenciar arquivos de esboço .





Tipografia em Sketch

Se você já conhece CSS, deve estar familiarizado com os recursos básicos de tipografia do Sketch. Isso inclui tudo, desde selecionar uma fonte e transformar o texto até parâmetros de configuração, como espaçamento de caracteres e altura da linha.



No entanto, alguns dos recursos menos conhecidos do Sketch não são tão imediatamente óbvios. É aí que saber algumas dicas adicionais pode ajudar muito. Na verdade, depois de aprendê-los, você pode transformar o Sketch em algo mais online com o InDesign como uma ferramenta tipográfica. Isso é o que você precisa saber:

Recurso OpenType:

Muitos tipos de fontes vêm com conjuntos de caracteres alternativos usados ​​para facilitar a leitura ou para fins estilísticos, como diferentes espessuras de fonte. Como você já sabe, no Photoshop, basta apertar um botão para ativá-los. Enquanto isso, no Sketch, simplesmente não é tão fácil assim.



Se você quiser verificar uma gama completa de fontes, terá que fazer algo extra. Apenas vá para Menu Sketch> View> Show Fonts Y clique no ícone de engrenagem e depois em Tipografia . Depois disso, você terá acesso a funções de tipo adicionais, como ligaduras e um conjunto alternativo de caracteres. É simples!



Texto em um traço:

Hoje, raramente vemos texto escrito em um traço em web design. Ainda assim, ainda é um estilo bastante comum na impressão e até mesmo no design de logotipo. Criar texto em um traço usando o Sketch é surpreendentemente fácil. Basta desenhar o traço usando a ferramenta Caneta e escrever o texto próximo a esse traço. Depois de fazer isso, você deve selecionar a partir do Menu Sketch> Texto> Stroke Text . E aí está!



Kerning e linha de base:

Se você for um usuário do Photoshop, poderá acessar quase todos os recursos de tipografia nos painéis Caractere ou Parágrafo. No Sketch, você encontrará os mesmos recursos, apenas eles estão ocultos. Felizmente, você pode encontrá-los facilmente, desde que saiba como. Se você quiser abrir mais opções de estilo como Kerning, Ligature e Baseline, basta ir para Menu de esboço> Texto . É realmente muito simples!



Estilos em esboço:

Estilos são o que chamamos de predefinições de tipografia ao usar o Sketch. Além disso, você pode criá-los facilmente no menu suspenso de estilos localizado logo acima dos parâmetros de tipo na barra lateral direita. Fazer seus próprios estilos é uma prática bastante comum ao usar esta ferramenta. No entanto, nem todos sabem que os estilos podem ser classificados como símbolos. (Leia mais sobre este processo em meu artigo anterior Aqui).

Para criar uma pasta com estilos de fonte, as etapas de nomenclatura são as seguintes: folder_name style_name ou mesmo folder1 / folder2 / folder3 / style_name . Dê uma olhada neste exemplo abaixo para ver o que quero dizer:

Neste exemplo, agrupei meus estilos dentro da pasta contrato e então criei outra pasta para diferentes tamanhos de texto e outra para diferentes cores. Portanto, o nome do estilo é assim: * contract / h1 / dark *.

EUA: a principal rua histórica de Ellicott City, em Maryland, em ruínas após a tempestade

Noticias Do Mundo

EUA: a principal rua histórica de Ellicott City, em Maryland, em ruínas após a tempestade
Construir componentes de Rails elegantes com objetos simples e antigos de Ruby

Construir componentes de Rails elegantes com objetos simples e antigos de Ruby

Processo Interno

Publicações Populares
Nvidia Shield - Uma visão diferente dos consoles de jogos Android
Nvidia Shield - Uma visão diferente dos consoles de jogos Android
Planejamento de sucessão de private equity: o que fazer e o que não fazer
Planejamento de sucessão de private equity: o que fazer e o que não fazer
Representante do Queen's em Londres diz que a realeza apóia o movimento Black Lives Matter
Representante do Queen's em Londres diz que a realeza apóia o movimento Black Lives Matter
Truques de magia indiana que surpreendeu o mundo
Truques de magia indiana que surpreendeu o mundo
Métricas de sobrevivência: familiarizando-se com a taxa de queima de inicialização
Métricas de sobrevivência: familiarizando-se com a taxa de queima de inicialização
 
PM Modi compara o exército indiano ao de Israel: Aqui está o porquê
PM Modi compara o exército indiano ao de Israel: Aqui está o porquê
Um guia para gerenciar dependências de Webpack
Um guia para gerenciar dependências de Webpack
De Khirki a Fathepur e ‘Sambhaji Nagar’, os muitos nomes de Aurangabad
De Khirki a Fathepur e ‘Sambhaji Nagar’, os muitos nomes de Aurangabad
Como Sequel e Sinatra resolvem o problema da API Ruby
Como Sequel e Sinatra resolvem o problema da API Ruby
Caixa de ferramentas do Forecaster: como realizar simulações de Monte Carlo
Caixa de ferramentas do Forecaster: como realizar simulações de Monte Carlo
Publicações Populares
  • exemplos de aprendizado de máquina em python
  • atualize o python 2 para 3
  • rubi sobre trilhos vs rubi
  • exemplo de estimativa de custo de projeto de software
  • o que você pode fazer com o node js
  • custo do exame do associado arquiteto de soluções aws
Categorias
  • Web Front-End
  • Gestão De Engenharia
  • Ciência De Dados E Bancos De Dados
  • Ascensão Do Remoto
  • © 2022 | Todos Os Direitos Reservados

    portaldacalheta.pt