Tipografia e ritmo vertical para designers de IU e desenvolvedores de web | Muhammad Ahsan | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Tipografia e ritmo vertical para designers de IU e desenvolvedores de web

teacher avatar Muhammad Ahsan, UI UX Visual Designer 10+ Years

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

71 aulas (8 h 29 min)
    • 1. O que vamos abordar neste curso

      4:35
    • 2. Introdução à tipografia

      4:40
    • 3. Sobre fontes e fontes

      5:09
    • 4. Termos de anatomy

      6:36
    • 5. Humanista e de transição

      6:45
    • 6. Sans Serise e Script

      5:34
    • 7. Sobre o comprimento de linha

      3:14
    • 8. Alinhamento de texto

      4:55
    • 9. Altura de linha Line-Height

      6:39
    • 10. Espaçamento de letras (Kerna)

      4:47
    • 11. Crie o exercício para aplicar o que aprendemos

      10:58
    • 12. Hifen, em e em de

      2:28
    • 13. Como usar as marcas de citação

      2:52
    • 14. Papéis de tipos

      4:37
    • 15. Escalas tipográficas

      3:00
    • 16. Ferramentas online para de escala tipográfica

      5:28
    • 17. Quantos de Hierarquia tipográfico

      3:13
    • 18. Ritmo vertical

      5:13
    • 19. Ritmo vertical no Photoshop

      7:02
    • 20. Exercício para o ritmo vertical

      12:04
    • 21. Introdução à grade modular

      11:07
    • 22. Como preparar a grade para o exercício de design de layout de blog

      10:44
    • 23. Crie primeiro layout do blog

      16:21
    • 24. Crie segundo layout para blog

      10:02
    • 25. Como refinar o segundo design de layout

      3:10
    • 26. Última layout para design de blogs

      9:30
    • 27. Quantas fontes selecionar?

      5:18
    • 28. Moods/de de tipo/de Moods/Voices

      12:42
    • 29. Efeito da cor no clima de tipo (voz) (de voice)

      3:57
    • 30. Introdução à emissão de fontes

      3:49
    • 31. Correspondência de x

      5:28
    • 32. Emparelhando com contraste

      7:47
    • 33. Como citar as fontes em a

      10:04
    • 34. Evite muito similaridade

      4:15
    • 35. Como citar fontes do mesmo designer ou família

      5:15
    • 36. Ferramentas online para o

      5:31
    • 37. Preperations de exercício do de de Dribbble

      5:00
    • 38. Design de cabeçalho de heróis parte 1

      16:19
    • 39. Design de cabeçalho de heróis parte 2

      15:31
    • 40. Design de cabeçalho de heróis - tema

      3:52
    • 41. Design de cabeçalho de heróis - segundo tema

      7:42
    • 42. Design de cabeçalho de heróis - segundo tema

      5:34
    • 43. Design de redes de redes de sociais

      3:59
    • 44. Mídia de redes sociais de design

      6:38
    • 45. Mídia de redes sociais

      14:26
    • 46. Toques finais para redes sociais

      2:54
    • 47. Exercício de design de suculento - Preperations

      3:26
    • 48. Exercício de tipografia suculenta

      15:58
    • 49. Exercício de tipografia suculento em suculento

      12:03
    • 50. Introdução a ponto (PT) em dispositivos de IOS

      12:00
    • 51. Especificações de tipografia para IOS

      3:22
    • 52. Como criar várias telas de IOS de resolução com o Photoshop

      13:57
    • 53. Pergunta sobre Resoluções

      13:55
    • 54. Como Mirroring sua loja de fotos para o iPhone

      5:04
    • 55. Tipografia e escalas para Android

      4:16
    • 56. Desinging para vários tamanhos de tela para Android

      8:30
    • 57. Para desenvolvedores → usando o Google Fonts

      3:36
    • 58. Para desenvolvedores → usando fontes premium

      5:38
    • 59. Para desenvolvedores → CSS Fonts

      2:37
    • 60. Para desenvolvedores → em dimensionamento de fontes

      8:11
    • 61. Para desenvolvedores → remar de fontes

      4:34
    • 62. Para desenvolvedores → % dimensionamento de fontes

      4:15
    • 63. Para desenvolvedores →

      4:09
    • 64. Para desenvolvedores → Como a ritmos verticais em CSS

      8:28
    • 65. Para os profissionais de programadores→ de gridlover

      8:05
    • 66. Para os desenvolventes de a balança tipográfica de de

      12:33
    • 67. Para desenvolvedores → Dont, usar o código da Typescale

      2:22
    • 68. Para desenvolvedores → introdução à tipografia responsiva

      6:55
    • 69. Para desenvolventes de profissionais para vários tamanhos de tela

      9:44
    • 70. Para profissionais de profissionais → de de Percentage para tipografia responsiva

      11:39
    • 71. QA para estudantes → como expandir a escala tipográfica para uso de web de

      6:56
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

2.257

Estudantes

11

Projetos

Sobre este curso

Você já se perguntou que por que as desenhos do Dribbble e Behance parece tão elegante. Um dos segredos por trás desses grandes web e em móvel é o uso de combinações de fontes, uso de espaço e grde em branco.

Para aprender esse poder super da tipografia e uso do tempo e espaço, faça este curso

Este curso é na tipografia para designers e desenvolva Todos grandes designers têm a habilidade da tipografia e seu uso do espaço em branco está para o curso.

Pegue a de designers :

Neste curso, vamos converter seus designs de nível do Dribbble to

  • Noções básicas de tipografia e anatomia
  • Aprenda como tornar seu texto interessante usando técnicas de variação
  • Crie um design de aplicativo de web e móvel selecionando e Create fontes significativas
  • Como a a de fontes trabalha
  • Domine o par de fontes e aprender com as
  • Como usar o espaço branco usando ritmo vertical e
  • Aprenda sobre tipografia de aplicativos para IOS e entenda diferentes tamanhos de tela do iPhone
  • Aprenda a tipografia do Google Android e sua unidade de tipo
  • Use os aplicativos gratuitos para conectar sua tela do Photoshop para o iPhone ou dispositivo Android
  • Como equilibrar seu design usando o método LEGO Blocs
  • Exercícios de design de de de derna de de

Leve para que desenvolva

  • Como usar de de padding, margens e outros elementos para criar ritmo vertical para CSS
  • Como usar ritmo vertical no Bootstrap
  • O que são unidades de de tamanho de fonte absoluta e relativos por exemplo, de rem, vm, % e quando usá-los?
  • Exercícios de codificação passo a passo
  • Como mostrar a grade de base na página de base na página em HTML com apenas uma linha de código
  • Quais são os melhores padrões como de fonte de fonte base
  • Como configurar a escala de tipografia usando ferramentas online facilmente
  • Muitos testes para testar seu conhecimento

Então, se você quiser se dar a melhor de sua pessoa de designers e quer sair da multidão.

Requisitos para fazer este curso::

  • Deve ter bons conhecimentos do Adobe Photoshop (para desenhos)
  • Deve saber HTML e CSS (para desenvolvedores)
  • Faça o download e instale o Adobe Photoshop CC2015 ou a versão mais recente

Faça este curso agora e vou ver você no curso

  • NÃO para nozes (deve ter alguma experiência no Photoshop
  • Designs de web
  • Designs de aplicativos móvel
  • Todos os designers que acham seu design em têm algo à falem
  • Desenvolventes na web
  • Designer gráfico

Conheça seu professor

Teacher Profile Image

Muhammad Ahsan

UI UX Visual Designer 10+ Years

Professor

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. O que vamos abordar neste curso: Vamos ver o que vamos cobrir neste curso, e projetar neste curso, e desenvolver neste curso. Estes não são tiros Dribbble, são exercícios reais deste curso, então vamos vê-los. Este é um deles. Outra. Vamos esconder as grades. Há outro, e outro, outro, outro, outro, outro, e também este. Mais alguns anúncios, estaremos projetando como estes, e há mais um tema para este anúncio, você pode ver aqui. Mas como vamos conseguir isso, vamos aprender o uso efetivo de grades de tipografia usando espaço em branco. Vamos dominar as habilidades de tempo e espaço para designers, e na verdade é chamado de espaço em branco. Isto é tudo para designers. Também aprenderemos como combinar fontes diferentes, como emparelhá-las, como selecionar fontes efetivas, como transmitir sua mensagem usando tipografia. Como usar grades de forma eficaz para projetar diferentes layouts e um monte de coisas ótimas. Mesmo para desenvolvedores, eu tenho um monte de coisas interessantes como esta unidade VW, você pode ver aqui como ele se expande e contrai com o web design responsivo, e vamos discutir um monte de tipografia web design responsivo ou é chamado topografia basicamente responsiva. Você pode ver aqui em ação, grande, médio. Você pode ver como o tamanho da fonte está mudando. Para pequenos, você pode ver o tamanho do cabeçalho apenas deslocado. Em seguida, vamos discutir como usar habilidades tipográficas personalizadas no Bootstrap. Também no Bootstrap, como vamos usar a habilidade tipográfica personalizada com um post de blog como este. Isso também é chamado de ritmo vertical. Também implementamos ritmo vertical neste exercício. Então, para aprender tudo sobre essas técnicas e padrões de tipografia em CSS e HTML, você vai realmente desfrutar deste curso. Há coisas mais excitantes neste curso, como telas móveis e seus tamanhos de fonte e PT, SP, DPI, DIP, todas as diferentes resoluções de tela bagunça e como vamos projetar com essa bagunça. Então, esses são poucos dispositivos IOS, todos os dispositivos diferentes que têm a mesma postagem de blog projetada para eles. Este é um dos exercícios. Além disso, vamos procurar a habilidade de tipografia do Google Android e como usá-lo de forma eficaz. Além disso, vou compartilhar com você um segredo como conectar sua tela ou como ver este design em suas telas móveis para que você possa facilmente escolher e selecionar fontes, e design, e cores, e tudo o mais. Então ver é acreditar. Se você pode ver seu design diretamente em uma tela móvel, você pode projetar muito melhor. Ok, agora a questão é, quem deve fazer este curso? Eu não recomendo designers ou designers muito novatos que acabaram de começar a usar o Photoshop para fazer este curso. Este é um curso de dificuldade de nível médio, então todos os designers que já conhecem um pouco do Photoshop e sabem como usá-lo, conhecem os atalhos, devem fazer este curso. Além disso, todos os desenvolvedores que conhecem conceitos básicos de HTML e CSS são bem-vindos. Se você acabou de começar a aprender CSS e HTML, acho que este curso não é para você. Você pode não entender poucas coisas. Além disso, preciso que você baixe e instale a versão mais recente do Photoshop CC. Qualquer designer que pense que seu design tem algo faltando ou algo estranho, então ele realmente deve fazer este curso para melhorar seu design. Tenho certeza de que este curso vai melhorar seus projetos muito, mesmo para os designers de nível Dribbble ou nível Behance. Então vamos cavar e começar, e eu vou te ver no curso. 2. Introdução à tipografia: Se estamos projetando para um aplicativo móvel ou qualquer site ou web design ou até mesmo anúncio, 95 por cento de cada design é basicamente Type, que é texto. Para usar esse texto a seu favor, você precisa ser um designer muito bom e você deve ser muito bom em Tipografia. Todos os bons designers possuem a habilidade. O texto é a maior parte de qualquer tipo de mídia, sejam eles anúncios, TV, sites, blogs, livros, títulos de filmes, aplicativos, tudo, há sempre um monte de texto que você precisa ver ou consumir. O que é tipografia? Se você pode usar este texto, ou escrito digitado corretamente, ele pode agir como uma espada samurai duelo gumes, ou talvez mais do que uma espada samurai, para cada designer. Qual é o propósito da tipografia? Sempre que você cria algo ou está projetando um anúncio ou aplicativo ou qualquer coisa, você está fazendo duas coisas com o seu tipo. Número 1, você precisa organizá-lo efetivamente para legibilidade e legibilidade. Se o usuário não conseguir lê-lo, não faz sentido criar tal anúncio ou aplicativo móvel. O segundo é, você precisa comunicar seu humor, sua mensagem para o leitor ou visualizador. Estes são os dois objetivos básicos de usar a tipografia em seus projetos. Agora, tipografia para Web e Aplicativos Móveis, estaremos cobrindo um monte de coisas neste curso. Então, apenas alguns conceitos básicos que as pessoas só digitalizam sites e blogs. Eles realmente não lêem a menos que seja muito importante. A segunda coisa é que vamos estar respondendo a um monte de perguntas sobre topografia do site, como qual fonte vamos usar, se eu usar essa fonte para site de negócios ou blog ou um aplicativo web. Para aplicativos móveis, estaremos cobrindo como usar tipografia em telas pequenas, porque é muito complicado usar tipografia em telas pequenas e existem diferentes iOS e Android, diferentes especificações de fontes e tamanhos que Apple e Android têm especificado. Sempre que você projetar algo, você deve fazer perguntas a si mesmo, qual fonte será carregada mais rápido, ou devo usar cinco fontes ou três fontes ou 10 fontes para o meu site? Às vezes nós designers fazemos algo assim; “Proxima Nova está em tendência nos dias de hoje. Pessoal, eu deveria usá-lo em todos os lugares.” Então, seja qual for o aplicativo ou site do seu design, basta colocar sua fonte Proxima Nova lá. Isso é muito estranho. Cada site tem suas próprias especificações, tipo de negócio e tudo, então isso não é sábio. Vamos cobrir muito neste curso, não se preocupe. Vamos ver o que temos a seguir. Agora, se você é um designer ou desenvolvedor novato, você pode estar pensando em como combinar diferentes formas, qual fonte é adequada para sites divertidos, para sites de negócios ou um blog de moda. Também um monte de desenvolvedores que eu vi eles só usam Open Sans porque é o único que eu posso facilmente combinar. Não tome tais decisões ou essas decisões de design. Estes podem realmente colocá-lo em problemas se você continuar projetando usando a mesma fonte para como 10 sites. Vou guiá-lo através de muitos exemplos, mesmo com o Bootstrap para mostrar como podemos usar diferentes técnicas tipográficas para desenvolvedores e designers. Então vamos começar o curso e passar para a próxima lição. 3. Sobre fontes e fontes: Cada designer deve estar familiarizado com alguns dos termos tipográficos como fonte, famílias de fontes, e o que são estilo de fonte. Vamos ver o que é basicamente uma fonte. Font é basicamente um conjunto de caracteres de estilo e tamanho específicos. Na verdade, antigamente, o tamanho era relevante para tipo de letra ou tipo de rosto. Hoje em dia, uma fonte está disponível em tamanhos diferentes, então você pode usar qualquer tamanho como 72 pontos, 12 pontos, 100 pixels ou o que você quer que o tamanho, porque é digital, você não precisa fazer um bloco de metal pedaço de caractere fonte. Nos velhos tempos, as fontes e os caracteres eram feitos com blocos metálicos específicos. Vamos ver alguns dos exemplos de fontes. Estou mostrando aqui duas fontes diferentes, uma é a família Amsi Pro e a segunda é fonte Crique Grotesk. Estes são tamanhos diferentes, podemos usar qualquer tamanho, não há limite para tamanhos. Podemos usar de um ponto para ilimitado, tamanho não é relevante nos dias de hoje com fontes. Agora, o que é um estilo de fonte? Ou podemos chamá-lo font-face também. Para uso moderno, basta ter em mente que é estilo de fonte. Estilo específico de uma fonte, você adivinhou direito. Agora, os exemplos são Negrito, Itálico , Regular, Exibição Média, Condensado , Preto, Negrito, Preto e Extrabold. Existem muitos estilos diferentes de fontes nos dias de hoje. Aqui estão alguns exemplos de estilos de fonte, estou usando Amsi Pro Ultra Style, que é ultra negrito, agora. Há mais um estilo aqui, que é Amsi Pro Light 48 pontos tamanho, e nós temos Proxima Nova Condensado, os personagens são condensados ou pressionados juntos, e então temos Proxima Nova Extrabold. Estes são estilos diferentes, como este é estilo condensado, este é Extrabold, este é pro, ultra pro, e este é estilo leve. Agora, o que são famílias de fontes? Então família de fontes significa que deve haver uma grande família da mesma fonte, por isso é basicamente diferentes estilos de fonte que são projetados em uma mesma geometria, forma ou estilo. Por exemplo, Helvetica é uma família muito grande, ela se condensou a estilos e tem muitos estilos ousados do que muitos estilos arredondados. Helvetica tem mais de 30 ou 44 fontes diferentes em uma única família, é uma família muito grande. Você também pode encontrar diferentes grandes fontes do Google família a partir deste site eu vou mostrar-lhe agora. Este é o site melhor fontes do Google, e você pode ver aqui temos esta família Raleway, e você pode ver que temos 1, 2, 3, 4, 5, 6, 10, 15, 16, 17, 18, estilos diferentes de uma única fonte. Esta é basicamente uma família muito grande, um monte de estilos que você pode ver aqui, este Source Sans Pro também é uma família muito grande, Roboto, também uma família muito grande. Além disso, se você pode ver que temos Roboto condensado para, se nós temos aqui você pode ver este Roboto Mono, este também pertence a esta família Roboto. Tem um estilo diferente, mas eles são na verdade a mesma família, eles são primos. Então temos o Source Code Pro, que também está relacionado com o Source Sans Pro, e temos este Roboto Condensado, também está relacionado com a família Roboto. Estas são diferentes fontes do Google que têm famílias muito grandes. Olhe e veja aqui Exo, eXo 2 e Kanit, eles também têm famílias muito grandes, um monte de estilos diferentes. A vantagem de uma grande família é que você pode usar uma única família e você pode ter um monte de estilos diferentes para escolher quando você está projetando. Isto é tudo sobre fontes, tamanho da fonte e famílias de fontes. Vamos passar para a próxima lição. 4. Termos de anatomy: Agora, nesta lição nós vamos aprender alguns dos termos de tipografia e um pouco de sobre anatomia tipo. Então estes são muito cruciais porque podemos facilmente emparelhar força aprendendo estes termos tipográficos. Então vamos começar. Primeiro de tudo, vamos aprender sobre linha de base, linha média e linha de tampa. Cap-line significa linha de capital, por isso é a linha, linha imaginária sentada no topo da letra maiúscula. Então temos a linha de base, o que é muito importante. Linha de base é a linha em que todas as nossas cartas se sentam nela. A linha média é basicamente no topo de nossas letras pequenas ou podemos dizer altura x. Esta é basicamente a altura das nossas letras pequenas. Então isso é basicamente uma linha média. O mais importante é esta linha de base. Então certifique-se de saber qual é essa linha de base. Mais uma coisa que algumas dessas letras vão acima desta linha de maiúscula e algumas como estas y, p e outras, elas vão além dessa linha de base. Então, apenas tenha em mente. Vamos aprender sobre a altura x e a altura maiúscula de qualquer fonte. Então, basicamente, a altura da pequena letra x é basicamente a altura x de qualquer fonte ou qualquer tipo. A altura da letra maiúscula é basicamente a altura maiúscula. Agora, x-height é muito importante e a relação entre x-height e letra maiúscula também é fator muito importante na legibilidade da fonte. Então, agora, se temos boa altura x, pode ser mais fácil de ler em pequenos dispositivos ou pequenos folhetos ou algo assim. Então, se você estiver projetando para aplicativos móveis, você precisa considerar uma fonte com altura x maior. Além disso, as fontes eficientes como Helvetica e poucos outros, eles têm altura x de 67 por cento a 69 por cento da altura de capital. Então eles são quase 65-70 por cento da altura de uma letra maiúscula. Então este também é outro fator, este é um fator entre diferentes classificações de fontes. Os tipos de fontes mais antigos, as famílias de fontes antigas, ou fontes antigas como Garamond, eles têm baixa altura x. Agora, vamos aprender sobre ascendentes e descendentes. Ascensores são basicamente a porção de letra que é estendida acima da linha média ou você pode ver aqui o topo do d. Então temos descendente, que é basicamente estendido para baixo a partir da linha de base. Então tudo o que cai da linha de base é basicamente descendente. Counter é outro fator muito grande no reconhecimento ou legibilidade de qualquer fonte ou tipo. Portanto, existem dois tipos de contador, aberto e fechado. Contador aberto é basicamente a parte aberta de letra engraçada como esta. Não está totalmente fechado por todos os lados. O espaço entre esta letra e é basicamente o contador aberto e, em seguida, temos contador fechado. Contador fechado é basicamente o espaço fechado em qualquer letra como esta o e a parte superior deste e. Por que estamos aprendendo sobre isso? Porque eles podem ajudar com a legibilidade se tivermos contadores muito grandes, essa fonte ou esse tipo ou estilo é muito legível. Agora este é também outro fator para a letra para esta altura x. Então, esses dois desempenham um papel muito importante na legibilidade ou no contador de fontes e altura x. Vamos aprender alguns outros termos tipográficos, para que possamos facilmente identificar qualquer tipo. Então aqui vamos nós temos este bico, que é um pouco pontudo final de qualquer letra maiúscula ou letra pequena. Eles são encontrados normalmente no início e no final da carta. Então temos este derrame. Você pode ver a parte superior desta letra p, há dois traços variados. Um é muito magro no início e no meio é muito grosso. Então, basicamente, isso é chamado de diferença de traço parecem tomar e é parte muito importante na identificação de diferentes classes de fontes. Então temos o loop inferior, que é basicamente a parte inferior do g. Você pode ver aqui. Também diferentes classes de fontes. Eles têm um estilo de loop diferente. Então temos ouvidos. Orelha é basicamente este botão estilo orelha pontudo sair deste a partir de g letra. Este também é um fator muito importante. É diferente em fontes diferentes. Então temos este ápice. Apex é basicamente a parte superior de qualquer letra onde temos este estilo de caneta restante de algo como vizinho de intestino aqui ou algo assim. Então temos cauda. Esta é basicamente a parte inferior da letra y. Então temos este terminal que também é como cauda, mas não está se estendendo na parte inferior. É basicamente estendido no lado esquerdo ou direito de uma letra como esta a. Então temos serif. Serif é basicamente qualquer linha ou qualquer coisa que é basicamente separar os tipos de fonte, como nós temos essas fontes serif, eles têm essas lajes no final de suas letras como esta. Você pode ver aqui Y. Então também na parte inferior da letra Y. Então isso é basicamente serif, e isso é tudo sobre diferentes termos tipográficos. Espero que tenha gostado da sua palestra. Vamos passar para a próxima lição. 5. Humanista e de transição: Nesta lição, vamos ver diferentes classificações de tipos para que possamos usá-los de forma eficaz. Antes de ir para ver diferentes classes de tipos, vamos aprender sobre o estresse diagonal. Você pode ver no fundo daqui, o O, Eu mostrei um estresse diagonal. Você pode ver que este O tem taxas variáveis de traços, então aqui nos lados é um pouco grosso, e onde eu coloquei o estresse diagonal, é basicamente o golpe mais fino. Onde o traço é mais fino, você apenas desenha a linha do mais fino para o mais fino e mostra o estresse das diagonais. Este é um dos fatores na identificação de fontes diferentes. Agora o primeiro é humanista. Humanista, como o nome sugere, é basicamente como os humanos escrevem com a caneta nos velhos tempos. Você pode ver os traços e o estilo de escrita parece escrita humana com uma caneta. Agora, ele tem dois fatores básicos para identificá-lo, um é esta barra transversal muito inclinada de e. Você pode ver que é como um ângulo de 30 ou 40 graus, e você pode ver aqui na letra Urso como é escrito. Segundo é, você pode ver as serifas na parte inferior deste n eu apontei. Você pode ver que as serifas são meio curvas como um pé humano, então este é um outro fator. Então, isso é três fatores. Tem um estresse diagonal muito bom, muito inclinado, e então temos barra transversal inclinada e, em seguida, temos serifas estilo pé. Agora eu mostrei a você estilo antigo ou garalde. Estas são duas classes diferentes, estilo antigo e de transição. Estilo antigo era um pouco velho e de transição foi construído sobre, ou você pode dizer, versão improvisada deste estilo antigo. Agora, o estilo antigo tem muito poucos fatores para identificá-lo, um é esse estresse diagonal, tem um bom estresse diagonal, menos que os humanistas, mas tem um bom estresse diagonal. Em seguida, o topo destes você pode ver estes ascendentes e descendentes, eles têm este final serif inclinação, e então nós temos este W, é uma propriedade muito única deste estilo antigo ou estilo garalde garamond. Você pode ver aqui o W cruzou a versão, então eles estão se sobrepondo, é como duas letras V, V estão se sobrepondo umas com as outras. Você pode ver que eu destaquei este e. Dentro do e, é basicamente contador, então eles têm muito menos espaço contador. Você pode ver aqui nós temos dentro da letra e, em seguida, eles têm no topo do T, você pode ver que há bicos são um pouco inclinados, e então se olharmos para as serifas, você pode ver no final da letra h eles não são totalmente reto, eles são um pouco curvilíneos. Isto é tudo sobre estilo antigo, principais fatores são este W e o bico, e estes topos inclinados de letra d e um pouco deste estresse diagonal em tudo o que você pode ver por aqui. Além disso, você pode ver que a letra R tem um golpe de caverna no final, e se você olhar para a transição, há muitas diferenças com isso. Você pode ver no topo do d, o serif é um pouco muito pontudo, então o estresse diagonal é quase reto. Você pode ver que o estresse diagonal é quase reto, e também você pode ver dentro desta letra e, o contador é um pouco mais largo ou um pouco maior do que o estilo antigo, então temos este W. W não está se sobrepondo, é um pouco diferente, e, em seguida, também os bicos desta letra T, eles também estão apontando para baixo um pouco estrutural. Você pode dizer um pouco estrutural. Além disso, há mais uma diferença que me esqueci. Se você ver a diferença de traço no estilo antigo, diferença de traço é que se você ver esta letra h, você pode ver aqui no final do h, temos um pouco de contraste de traço menos. O grosso e o fino são muito próximos um do outro, mas na transição, você pode ver os traços são muito, fino é muito mais fino e o grosso é um pouco mais espesso. Esta é também uma diferença entre o estilo antigo e o estilo de transição. Aqui estão alguns exemplos de estilo antigo. Esta é a fonte de adobe devanagari, e você pode ver aqui como esta fonte foi definida, é uma versão itálica da fonte. Ainda assim você pode ver que T é um pouco inclinado, e nesta fonte você pode ver que é talvez uma versão diferente, então é por isso que em fontes diferentes alguns recursos não podem ser encontrados. Como aqui temos W. W é exatamente como a fonte de transição, então às vezes esses designers de tifo, eles misturam propriedades diferentes de duas fontes. Então temos este Minion, Pro, também é fonte de estilo antigo. Você pode ver aqui ainda o W é diferente, mas outras propriedades como este final deste r e as melhores sluts e serifas superiores, eles são quase como o estilo antigo. 6. Sans Serise e Script: Agora vamos falar sobre fontes modernas. Estes são chamados basicamente de Bodoni, e sua principal característica é a largura do curso. A diferença de curso é muito, muito fina a muito grossa. Então a outra é que essas serifas são como lajes, tiras muito finas, seja lá o que eu chamo. Esta é a propriedade principal deste Bodoni. Além disso, o estresse, você pode ver no o, é muito reto, 90 graus. Agora, a laje serif ou também é chamada laje egípcia. Você pode adivinhar que eles têm serifas como lajes grossas, e é por isso que eles são chamados de serifas de laje. Aqui está o tipo mais comum que usamos, que é sans-serif. Sans-serif não tem serifas, nem lajes, ou sem fim no final. Eles são muito limpos e muito modernos. Isto é tudo sobre este sans-serif. Eles têm muitas outras classes de sans-serifs. Diferentes designers de tipos tipográficos, eles misturam as qualidades do estilo antigo ou às vezes toque humanista na fonte sans-serif. Agora, o próximo é script ou caligrafia. Eles são tipos diferentes de fontes de script ou caligrafia, mas eu vou combinar todos eles em um. Você pode ter visto esse script ou fontes manuscritas. Eles não são usados muito na web, porque eu não acho que se você escrever um parágrafo em script ou fonte manuscrita, e ele pode ser facilmente lido. Agora eu disse a vocês no slide anterior que sans-serif tem algumas outras alterações, como esta é humanista sans-serif. Agora você teria adivinhado que ele compartilha as características deste tipo humanista que discutimos no início desta palestra. Humanista sans-serif, você pode ver, o topo é Gill Sans. Eles têm este final no A, e então eles têm um pouco de diferença de acidente vascular cerebral. Além disso, se você olhar para este Open Sans e as inclinações no contador no a não são muito geométricas. Eles são um pouco inclinados. Se você olhar para o g, também é um pouco como fonte humanista. Você pode ver, eu sou Open Sans-Serif e eu também sou humanista Sans-Serif, e eu estou ótimo. Se você olhar para o g, é o fator comum em todos os humanistas Sans-Serif. Eles são um pouco como humanista ou estilo antigo. Além disso, este outro exemplo é esta fonte Calibri, Open Sans, Gill Sans. Eles são um tipo de humanista Sans-Serif. É por isso que você vê Open Sans é muito popular nos dias de hoje. Uma outra variação dos sans-serifs são geométricos sans-serifs, e eles são construídos sobre uma geometria muito específica, como triângulos muito específicos, retângulos, ou talvez círculos. Eles são baseados na geometria. Você pode ver aqui temos a primeira fonte, um primeiro exemplo é Futura. Você pode ver os os os e os es, eles são quase um círculo perfeito. Aqui você pode ver. Agora, se você olhar para esta fonte Proxima Nova, é muito popular. Também é geométrico. Se você olhar para o seu o e es, eles são quase o círculo perfeito. Museo Sans também é geométrico. Onde a palavra geométrica está, você pode ver como eles são construídos. A letra c também é construída em círculo perfeito. Depois, há outra fonte no final, Texta. É também um Sans-Serif geométrico. Eles podem se assemelhar ao Humanista ou pode ter alguma natureza curvilínea, mas eles devem ser construídos em formas geométricas específicas. Pode não ser apenas círculos ou quadrados, pode talvez alguma forma deformar de quadrado ou algo assim. Isso arredonda nossa Geométrica Sans-Serif e todas as classes diferentes. Eu não vou entrar em muitos detalhes de mostrar 16 ou 17 classes de fontes diferentes. Acho que estas são boas o suficiente para começar. Eu vou compartilhar alguns dos recursos se você quiser ir em frente mais do que estes, como um grotesco e outros sans-serif. Na próxima lição, eu vou fazer um exercício para ver o quanto você pode reconhecer uma fonte. Posso estar te dando fontes geométricas, humanistas e outras. Isso será exemplos, e vamos ver o quão bem você faz ao reconhecer classes de tipos diferentes. Vamos passar para a próxima lição. 7. Sobre o comprimento de linha: Um dos maiores fatores sobre legibilidade é o comprimento da linha, que realmente afeta sua legibilidade. Agora surge a questão, quanto comprimento uma linha deve ter em um parágrafo para uma leitura ideal? Alguns dizem que são 65, 70 caracteres por linha e 40 caracteres por linha, algo assim. Eu vi muitos artigos e livros diferentes, e o intervalo é de 45 a quase 85 caracteres por linha. Eles são ótimos. Agora, por que esse comprimento de linha ideal? O problema é que se você tem linhas muito longas, então o usuário ou leitor precisa mover a cabeça da esquerda para a direita para ler essa linha. Agora, se você tem uma linha muito curta, então eles têm que saltar de cima para baixo, linha para linha de novo e de novo. Isso vai produzir fadiga em seu usuário, até mesmo seus olhos ou cabeça ou talvez alguns de seus músculos. Da minha experiência, se traduzimos caracteres em palavras, então quase 10-17 palavras por linha é ideal. Eles podem ter 19 ou 20 dependendo do comprimento da palavra, mas é quase a média. Agora, um outro fator é o tamanho da fonte. Se você tem um bom comprimento de linha e você mudar a fonte para a fonte menor, então você tem um monte de palavras no mesmo espaço e você precisa alterar o comprimento da linha novamente. Agora, se você tentar mudar para fonte pequena, então o comprimento da linha é muito grande e você precisa ler as longas linhas. Este é um outro fator, então escolha o tamanho da fonte com sabedoria, para que o comprimento da linha seja ideal. Agora, e sobre dispositivos móveis e sites? Os celulares têm telas pequenas, então eu acho que geralmente o texto deve ser um pouco mais maior, corpo de texto deve ser maior. Agora, normalmente em celulares o corpo do texto ou os parágrafos são basicamente 120 por cento do tamanho dos parágrafos em nossos sites de desktop. Se você está desenvolvendo um site e mostrando diferentes visualizações desse site no celular, no desktop e no tablet, então você deve cuidar disso. Também em telefones celulares as linhas serão menos longas porque temos menos espaço. Alguns dos princípios de comprimento de linha não se aplicam lá. Além disso, você precisa mudar o tamanho do cabeçalho e a altura da linha também. Todos esses fatores que você precisa para cobrir os celulares. Na área de trabalho, se você for um desenvolvedor, precisará usar consultas de mídia para ajustar o tamanho para obter o comprimento de linha e a legibilidade ideais. Isso é tudo sobre o comprimento de linha ideal e como vamos usá-lo em celulares e desktop design, se você estiver projetando para dispositivos móveis ou desktop. Vamos aprofundar todas essas coisas sobre tamanhos de celular e desktop nas duas últimas seções do nosso curso. Vamos passar para a próxima lição. 8. Alinhamento de texto: Vamos discutir sobre alinhamento de texto. Agora, muitos designers dizem, “Ok, eu sei alinhamento de texto, o que é alinhamento de texto, eu sei”, mas há usos específicos para cada um deles. Se você pode usá-los corretamente, você pode realmente melhorar seu design e legibilidade. Vamos ver diferentes exemplos e diferentes usos de alinhamento de texto. Agora, o primeiro é o alinhamento mais comum à esquerda e o alinhamento à esquerda não é usado para idiomas da direita para a esquerda. Estamos falando de inglês e outras línguas que são da esquerda, direita. Agora, o alinhamento à esquerda é basicamente usado para artigos, parágrafos, livros, títulos e muitas outras coisas. Então, principalmente, é o alinhamento usado mais comum. Certifique-se de que não é para idiomas da direita para a esquerda. Da direita para a esquerda são basicamente opostos a isso. Para o alinhamento esquerdo , será o alinhamento direito. Em seguida é align à direita e align text é usado para normalmente pequena quantidade de texto. Se você estiver usando em um parágrafo, então você está realmente arruinando seu usuário e seu leitor. Portanto, certifique-se de que você está usando align direito para linhas muito pequenas ou muito poucas palavras. Agora, aqui temos o fator é basicamente direita para as línguas esquerda. Para idiomas da direita para a esquerda, alinhar à direita é a melhor opção. Agora, chegando ao centro, alinhe. O alinhamento central deve ser usado somente para linhas importantes e não ser aplicado a parágrafos. Eu vi alguns designers usando centro alinhar para quatro ou cinco linhas. Acho que não é muito sábio. Então talvez títulos e slogan de algum produto possam ser alinhados no centro ou talvez mais uma linha, mas não acima de três, eu acho. Então aqui temos fator de legibilidade. Nossos olhos saltaram de uma para a próxima linha, e eles normalmente estão prevendo que eles devem ser saltados para o mesmo local. Agora, no alinhamento central, eles pulam de um lugar para outro, então não é uma linha reta. O alinhamento justificado é basicamente quando os lados esquerdo e direito são quase iguais. Não há espaços no lado direito. Portanto, o alinhamento justificado é normalmente usado em livros, revistas e jornais. Eu não recomendo que eles usem para sites ou blogs. É difícil controlá-los. Talvez seja necessário alterar o texto, o corpo do texto ou editar o texto de cópia para realmente justificar o alinhamento dos parágrafos. Deixe-me mostrar-lhe alguns dos exemplos de alinhamento esquerdo e direito. Você pode ver no lado direito, Eu lhe mostrei alinhar direito, uso adequado de alinhar direito. Eu estou mostrando apenas três linhas, e você pode ver este direito alinhado em um monte de cartões de visita. Agora você se lembra por que o e-mail, número de telefone está quase alinhado em um monte de cartões de visita, porque é muito menos texto e você pode ver alinhá-lo direito não prejudica a legibilidade. Agora, à esquerda há um parágrafo, então eles devem estar alinhados à esquerda. É assim que usamos alinhar à esquerda e à direita. Este é o uso adequado de textos alinhados à esquerda e à direita. Aqui temos o exemplo de justificar align e centralizar align. Você pode ver no lado esquerdo, justificar alinhar, temos diferentes espaços ou rios correndo dentro. Algumas palavras são mais espaçadas para a próxima. Alguns têm menos espaço entre eles. Então estes são chamados basicamente rios. Isto é quando você tenta justificar alinhar seu texto. Portanto, certifique-se de que não há rios muito largos ou rios muito proeminentes dentro do seu texto. Agora, chegando ao centro, alinhe. Agora, alinhamento central você usá-lo em muito poucas linhas de texto ou talvez poesia, como eu usei aqui. Não sei como escrevi isso, mas é assim que devemos usar o alinhamento central, poucas linhas, e talvez poesia ou algo assim. Talvez uma citação de duas linhas. Então não mais do que duas ou três linhas, eu acho. 9. Altura de linha Line-Height: Nesta lição, eu vou falar sobre a altura da linha e também foi chamado de liderança. Nos últimos tempos, eles costumavam colocar blocos de chumbo derretidos entre duas linhas diferentes para separá-los. Isso se chamava liderar. O que basicamente está liderando? É a distância de uma linha de base para a próxima linha de base. Como se tivéssemos duas ou três linhas de texto, então a distância de uma linha de base para a próxima linha de base é basicamente a altura da linha. Agora, quanta altura de linha devemos ter? Ela varia de 120 por cento a 60 por cento para o corpo do texto. Corpo de texto é basicamente os parágrafos e texto onde temos um monte de textos. Precisamos lê-lo. Agora, para títulos, você não deve defini-lo mais de 120 por cento em títulos. Texto muito grande, normalmente, a altura da linha é quase de 100 por cento a, ou talvez 90 por cento a 120 por cento. Para o corpo do texto, ele varia de 120 por cento a 160 por cento, e para títulos, é um pouco menor do que a nossa altura normal de linha. Aqui estão alguns exemplos de altura da linha do corpo do texto. corpo do texto é basicamente parágrafo, então não se preocupe se você não sabe o que é o corpo do texto. São muitos textos que devem ser lidos. No lado esquerdo, temos a altura da linha 133 por cento, ou também chamamos de 1,33 por cento. Trinta e oito pixels é o tamanho dos nossos textos. Basicamente, o que fazemos aqui é, multiplicamos 38 pixels por 1,33, e o que obtemos é, basicamente, nossa altura de linha. Pode ter 42 pixels, 46 pixels, ou o que quer que seja. No lado direito, temos uma altura de linha um pouco maior que é 1,45 por cento. Você pode ver como isso afeta a legibilidade. Além disso, se você tiver uma altura de linha muito apertada, você pode ver a parte inferior das caudas superiores, e as caudas de caracteres diferentes, e a parte inferior de caracteres diferentes vai tocar o topo da próxima linha. Este é um grande problema de legibilidade. Tente ajustar a altura da linha onde você acha que é mais fácil de ler. Agora, aqui está um exemplo para o texto do cabeçalho. Você pode ver à esquerda, eu defini para 110 por cento, e o tamanho do nosso texto é 60 pixels cabeçalho. À esquerda você pode ver que é bom o suficiente. Mas se você vê no lado direito, Eu aumentei o tamanho do texto mais. É um cabeçalho de 72 pixels, e eu o defini para 1,05 por cento. Como vamos calculá-lo? Setenta e dois multiplicam por 1,05, e está perto de 75-76 pixels. Além disso, você pode configurá-lo para 100 pixels. Se você tiver 72 pixels, também poderá definir a altura da linha, 72 pixels para cabeçalhos maiores. Deixe-me mostrar como podemos definir a altura da linha no Photoshop para títulos e textos de parágrafo. Como podemos controlá-lo. Eu tenho essa mensagem aqui. Este é um título, e você pode ver, eu vou selecionar este texto, e eu vou pegar este painel de caracteres. Já tenho este painel de personagens aqui. Você pode ver aqui temos 72 pontos que é o nosso tamanho do texto, e este é o controle onde temos que controlar a altura da linha. Eu também posso configurá-lo para 72 pixels. Você pode ver que está parecendo bom. Mesmo eu posso ir abaixo disso, 70 pontos também está parecendo bom. Mas se eu for para 65, parece um pouco problemático, ou talvez muito próximo. Você pode ver aqui, o i do tempo está tocando o g. Eu acho que 70 pixels como o último que podemos ir e 72 pixels é, eu acho, ideal, ou talvez 75 como tínhamos antes. Isso é sempre definido a altura da linha. Vamos ver outro exemplo que eu mostrei com o parágrafo. Aqui tínhamos o parágrafo. Eu vou selecionar este parágrafo e, você pode ver agora é tamanho de texto de 38 pontos, font-size, ea altura da linha é 55 pontos. Se eu tentar aumentá-lo para 60, você pode ver, ele ainda está bonito, mas se formos além de 60, como 72, você pode ver que o nosso é não pode saltar tão longe, abaixo é um pouco muita distância. Se você continuar aumentando este 90 ou 100, você pode ver que ele não está parecendo um parágrafo, mas linhas separadas. Esta é uma questão muito grande em legibilidade e legibilidade, você deve mantê-los à distância ideal. Vou ajustá-lo para 50. Vamos ver como se parece. Ainda está um pouco perto para mim, acho que 55 foi melhor. Agora, aqui está. Isso é tudo sobre como podemos definir a altura da linha no Photoshop e qual altura da linha devemos usar para o corpo do texto e qual altura da linha deve ser usada para o cabeçalho a seguir. Mesmo em HTML, você pode defini-lo para line-height propriedade com line-height propriedade. Um é 100 por cento, 1,2 é 120 por cento, e o mesmo assim. Isto é tudo sobre a altura da linha, vamos passar para a próxima lição. 10. Espaçamento de letras (Kerna): Você deve ter ouvido designers diferentes dizendo, ok, estas falhas ou este tipo kerning é um pouco fora, ou essas duas palavras precisam ser kerned. Então, basicamente, kerning é o espaço entre duas letras individuais de qualquer tipo, ou qualquer fonte, ou qualquer palavra. Então você pode ver aqui o espaço entre o e t, é basicamente o kerning. Se olharmos para esta palavra, eu aumentei o kerning, então basicamente, eles têm um espaço um pouco maior entre as duas letras, ou mesmo todas as letras. Basicamente, o que significa é que algumas das letras, se você pode ver aqui na palavra topografia, algumas letras como g e r são um pouco mais próximas umas das outras do que algumas letras como p e o e outras letras. Então isso é basicamente chamado Kerning. Vamos ver como esse kerning vai afetar nossa tipografia. Então, o que significa é que se tentarmos ter um bom espaço entre as nossas diferentes letras, então é mais arejado, abertura, moderno, elegante, elegante relacionado com a tecnologia. Se tivermos menos espaçamento entre letras, então seu humor é para a intimidade, e você pode ter visto usando as letras muito próximas umas das outras em logotipos diferentes. Basicamente, menos espaçamento entre letras é usado principalmente em logotipos porque realmente cria um problema de legibilidade e legibilidade. Deixe-me mostrar-lhe alguns dos exemplos de espaçamento de letras ou kerning. Vou mostrar-vos o mau exemplo e o arranjado. Aqui nós escrevemos o FedEx em duas formas diferentes. No lado esquerdo, você pode ver que o e o x estão muito próximos um do outro. Eu não mudei nenhum espaçamento de letras. É o padrão da fonte. Na parte inferior, você pode ver que eu ajustei o espaço entre e e x, então kerning é basicamente o espaço entre duas letras separadas. Eu consertei o kerning entre E e X. No lado direito, você pode ver o E, D e E, eles parecem ter mais espaço. Então, no fundo, eu consertei isso. Eu reduzi o kerning entre estas três letras e ele está olhando mais para os nossos olhos. Então é assim que usamos kerning. Principalmente, é usado em logotipos. Você já viu logotipos da FedEx, é basicamente kerning muito apertado, maioria das letras tocando uns aos outros. Foi assim que fizeram o logótipo da FedEx. Mas é assim que corrigimos o kerning e quais são os maus e bons exemplos de kerning. Deixe-me mostrar-lhe como você está indo para acessar este kerning no photoshop. No Photoshop, se você não vir este painel de caracteres A aqui, você pode ir para a janela e clicar neste personagem aqui, e isso aparecerá aqui. Você pode ver aqui, nós temos este V/A e há um pouco espaço barra entre duas letras. Isto é basicamente o kerning. Podemos ter duas opções como ópticas. Você pode ver que este kerning espaçamento de letras mudou. Então óptica é basicamente relacionada com seus olhos, o que seus olhos vêem, e métrica é basicamente kerning máquina, então isso é baseado em software. Então temos zero e outras opções não estão disponíveis para essa falha. Estas são duas opções agora. Se você quiser alterar o espaçamento entre letras específicas, selecione esta letra e use esse controle em vez disso, como este. Agora, se eu aumentar para 200 por cento, você pode ver que o espaçamento entre a e c foi aumentado. É assim que uso este painel Caractere para aumentar o kerning. Selecione uma letra, e você pode usar este controle de rastreamento, mas eu usá-lo para letras simples como essa. Isso é tudo sobre como usar o kerning no Photoshop. 11. Crie o exercício para aplicar o que aprendemos: Olá a todos. Nesta lição, vamos projetar esta página de blog incrível. Agora aprendemos a altura da linha, espaçamento de letras, kerning, rastreamento, tudo. Então vamos aplicar isso neste design e vamos começar. Eu vou usar a fonte do Google para este exercício, que é Source Sans Pro, esta é única fonte do Google e no lado direito, eu estou usando a imagem de um site livre pode ser Pixabay ou algo assim. Você pode usar qualquer imagem aqui. Vou compartilhar os links na seção de recursos então certifique-se de usar os links para obter esta fonte, Source Sans Pro. Vamos começar e eu vou abrir um novo arquivo e a largura deve ser 1400 por 1800 pixels, resolução de 72 pixels transparente. Não colorir Gerenciar este documento. Clique em “Ok” e aqui temos nossa tela vazia. Vou pressionar “Alt+Delete” para preenchê-lo. Vamos usar a cor branca como fundo. Selecione “Branco” aqui e, novamente, pressione “Alt+Delete” e aqui temos nossa opção Excluir no seu Mac. Agora temos nossa tela vazia. Agora podemos começar a projetar, mas antes de tudo, vamos ter uma grade aqui para colocar nossas coisas. Sobre a grade, vou explicar na próxima seção, então não se preocupe com isso agora. Faz o que estou a fazer agora. Vá para Exibir e Novo Layout de Guia e, nas colunas, use a predefinição personalizada. Nas colunas, você também pode usar este 8 Coluna e calha largura 20 ou se você quiser mais do que isso, você pode usar 30 assim e clicar em “Ok”. Agora nossa tela está pronta. Vamos começar e eu estou usando o site Real Lorem Ipsum para obter o texto aqui, então eu vou usar o Chrome para obter isso. Aqui estão os dois recursos que estou usando para este exercício. Este é o site Real Ipsum e eu realmente gosto de como eles têm texto real aqui com os títulos, tudo o resto e estamos usando a fonte Source Sans Pro Google. Se você quiser abri-lo em fontes do Google, você pode clicar aqui e ir para esta página e selecionar qualquer fonte aqui, como negrito, semi-negrito, ou talvez selecionar todos eles e baixar a partir deste botão. Clique aqui, você pode ver aqui ele diz, arquivo Zip. Baixe o arquivo zip e instale-o em seu PC ou Mac. Estes são os dois recursos que estamos a utilizar. Este é o que vamos usar para o título, copiar este texto de cabeçalho, e vamos colá-lo em nosso Photoshop. Vamos selecionar esta fonte Sans Pro fonte regular, tamanho, Eu vou selecionar 64 pontos ou 64 pixels e eu vou selecionar aqui, Controle V. Eu tenho o texto aqui. Vamos usar esta cor preta acinzentada aqui. Vamos usar o Source Sans Pro regularmente, mas precisamos de uma cara ousada aqui. Esta é uma fila muito longa. Vamos clicar com o botão direito sobre ele, converter para texto de parágrafo, e arrastar este aqui, assim. Agora temos um problema de altura de linha, então vamos usar esta linha de altura ou à frente 64 e eu acho que 72 será mais do que suficiente como ele está indo. Vamos usar perto de 64 ou é 66. Vamos fazer a área delimitadora do parágrafo um pouco maior assim. Nossa direção está pronta. Em seguida, vamos copiar esta quinta-feira, Julho algo como isto, esta data. Se quer isso há nove minutos, pode copiá-lo. Eu só não gosto deste, então eu vou usar este aqui. Cole aqui. Agora vamos usar texto de 18 pontos e deve ser regular. Agora regular e precisamos mudar sua cor para alguma cor acinzentada, algo assim, cinza acastanhado. É 808080. Porque este não é muito importante, vamos fazer algo assim. Então precisamos que todo esse texto seja copiado, três parágrafos, copie e precisamos colá-lo aqui. Nossa ferramenta de texto já está selecionada, então vamos arrastá-la assim nesta área como esta e Controle V. Agora temos um problema de altura de linha aqui, então agora temos 18. Por que não usar 18 multiplicado por 1,5, 27. Talvez precisemos de um pouco de texto maior, então estaremos usando 21 multiplicado por 1,5, 32. Trinta e dois pontos na altura da linha e 21 pontos para o tamanho do texto como esse. Já está com bom aspecto. Selecione este, top um, precisamos que ele seja um pouco maior, então vamos usar 24 pontos e em relação a 24 pontos, estamos usando 1.5. Sua altura de linha deve ser de 36 pontos. É assim que vou calcular tudo. Estou usando altura de linha 1,5, e estou usando esse tamanho de deck para ser 21, este é 24, e este é 18, e este é 64. Vamos alinhá-los todos à esquerda. Selecione todos eles clicando com a tecla Control pressionada sobre eles ou Shift. Clique no último e no primeiro e, em seguida, pressione “V” e alinhe à esquerda assim. Eles estão todos alinhados à esquerda e estão com boa aparência. Vamos tornar este encontro um pouco mais aborrecido como este, esta cor acinzentada. Você pode usar qualquer cor, talvez você possa usar algo assim aqui B6B6B6 e esta é a cor que eu tenho. Agora o nosso texto está pronto. Você pode ver como eu estou colocando para fora, eu estou usando 1, 2, 3, 4 colunas, esta área delimitadora para este texto, e nós vamos usar esta área para a imagem. Vamos desenhar a linha laranja aqui, basta selecionar a ferramenta de retângulo e vamos arrastar uma linha laranja de 15 pixels até aqui. É branco agora, então vamos clicar duas vezes nele e selecionar a cor laranja. Isto é f7a94a. Agora, isso está tudo pronto. Vamos torná-lo um pouco maior deste lado estendido para fora. Agora vamos esconder a linha da grade, dois pontos de controle, e nossa grade está escondida. Vamos selecionar este. Já está parecendo muito agradável e legal, então vamos arrastar a imagem até aqui. Vou usar a mesma imagem para não precisar encontrá-la de novo e de novo. Aqui temos Janela, Organizar, Telha Tudo Verticalmente, e este é o nosso design original. Vou usar este aqui, arrastá-lo até aqui, e fechar este. Agora temos uma imagem muito grande, então precisamos amarrá-la em uma caixa. Vamos esconder esta imagem primeiro. Crie um retângulo aqui, ative suas guias, Controle dois-pontos, e eu vou usar esta área para a imagem. Este é o meu retângulo. Basta mover o retângulo abaixo desta imagem e nós vamos criar uma máscara. Vou clicar entre esta imagem e este retângulo e aqui temos a nossa máscara. Este retângulo está basicamente atuando como uma máscara. Também podemos reduzir o tamanho deste retângulo se quisermos. Talvez precisemos mover os dois para o lado direito. Basta digitar 1, 2, 3 pixels, então 30 pixels. Mudei um pouco mais para a direita. Nosso design está quase ótimo e completo. Vamos adicionar uma variedade e vamos usar Itálico para o estado e é assim que configuramos nosso projeto. É realmente legal olhando já, muito bom e eu acho que muitos designers não podem projetar assim. Isto é muito simples. Usei todas as técnicas que aprendemos nas lições anteriores. Vamos melhorar este design no final da próxima seção. Fique atento e espere por mais exercícios. Antes disso, cuide-se e tchau. Vamos passar para a próxima lição. 12. Hifen, em e em de: Hoje, vamos aprender sobre hífens e traços. Existem dois traços, em e en traços e hífens. Agora vamos aprender tudo sobre eles. Primeiro, vamos falar sobre hífen. hífen é o mais curto e está localizado no teclado à esquerda do sinal de adição. Agora, hífen é usado de três maneiras. Número um, ele é usado quando uma palavra é dividida no final de uma linha de texto, como você pode ver aqui na palavra irrealista no final. Ele também é usado para combinar duas palavras juntas para criar palavras compostas como você pode ver aqui, divertido amoroso. Há um hífen entre diversão e amor. Além disso, ele é usado com duas palavras números como 20-42. Estas são todas as maneiras pelas quais podemos usar hífens. Agora vamos falar sobre en dash. En traço é o segundo maior comprimento e é usado para mostrar espaço de tempo ou intervalo numérico. Você pode ver os exemplos como 9:00 AM - 17:00 PM, julho-setembro, férias são de 5 a 9 de junho. É assim que usaremos en dash. Agora, Em Dash. Em traço é o mais longo em comprimento de todos os três traços, e é usado para mostrar uma pausa no pensamento. Como você pode ver aqui nos exemplos abaixo da estrada e ao longo da estrada sinuosa, foi. Há uma pausa no pensamento e é assim que eles a separaram. Além disso, você pode ver no próximo exemplo, nós reunimos nossos suprimentos. Há uma pausa, todos os oito caminhões e começou lentamente. É assim que usamos em traço. Agora vou resumir esta palestra sobre hífen en e em dash só para ter certeza de que você se lembra. Tenha em mente que em para mega. Em traço é o mais longo e en traço é o segundo mais longo, e hífen é o mais curto. Além disso, tenha em mente que você precisa usá-los onde eles são usados corretamente e necessários. Não os use em qualquer lugar que você gosta. Mesmo um monte de tipógrafos ou mesmo em sites diferentes, eu vi um monte de pessoas cometendo os mesmos erros uma e outra vez. Isto é tudo sobre traços e hífens. Vamos passar para a próxima lição. 13. Como usar as marcas de citação: Hoje vamos falar sobre aspas. Agora, muitas pessoas que eu vi não sabem o uso adequado de aspas. Agora, vamos ver nesta palestra, como usar aspas corretamente como um profissional. Agora, a primeira coisa que você precisa saber é que todas as fontes, eles não suportam aspas. No primeiro exemplo, você pode ver essas marcas não são encaracoladas. No segundo eles são puramente encaracolados, e no terceiro eles são um pouco como citações encaracoladas estilo máquina de escrever. Certifique-se de que você está usando uma fonte que suporta aspas e aspas curvadas são basicamente usadas em boa tipografia. Aqui você pode ver que eu mostrei alguns exemplos. “ Olá”, ela disse. As aspas são usadas corretamente aqui. Eu vi muitos designers e desenvolvedores que eles não conhecem o uso adequado de aspas, e os tipos de aspas. Existem dois tipos de aspas. Um deles são aspas retas, e outro são aspas encaracoladas. Agora, as aspas retas são normalmente usadas para pés e polegadas, e também eles são chamados pés e polegadas marca ou segunda e marca minuto. Estes são basicamente retos, e as aspas são basicamente usadas quando você está mostrando que alguém está falando. Este é o uso adequado. Você pode ver no primeiro exemplo, estou usando aspas de abertura e fechamento no final e início. Seis pés é mostrado com apenas uma aspas retas, e polegadas é mostrado com duas aspas que são retas. Os outros dois são os usos errados de aspas. Agora, na tela eu vou mostrar as teclas de atalho para mostrar estas ou usar essas aspas no Photoshop, ou qualquer outro programa, programa de edição do Word, abertura de aspas simples, Alt mais 0145. Precisamos pressionar isso enquanto pressiona a tecla Alt. Para usuários de Mac, Opção mais colchete direito. Também a citação única de fechamento, Alt mais 0146, e para Mac, Opção mais Shift mais colchete direito. Agora, para as aspas de abertura dupla, você precisa usar Alt mais 0147 no Windows, e no Mac, você precisa usar Option mais colchete esquerdo. Para fechar aspas duplas, você precisa usar Alt mais 0148 e, no Mac, você precisa usar Option mais Shift mais colchete esquerdo. Isto é tudo sobre usar aspas corretamente e quando usar qual, um reto ou o encaracolado. Se tiver alguma pergunta, pergunte-me. Vamos passar para a próxima lição. 14. Papéis de tipos: Agora, quais são os papéis de diferentes tipos de letra? Na verdade, dentro de uma única família, você pode ter visto algumas fontes com nomes como exibição, legenda, subcabeçalho, regular, itálico, algo assim. Na verdade, essa exibição, legenda e subcabeçalho são basicamente as funções dessa fonte ou tipo de letra. O que basicamente tipo de exibição é, tipo de exibição é feito apenas para cabeçalhos ou texto muito grande. O tipo de texto é para parágrafos de corpo de texto normal ou um monte de texto onde você precisa lê-lo muito. Agora, há também alguns outros papéis de fontes como legenda. Se vimos alguma imagem na Internet, você pode ver que há uma legenda acinzentada na parte inferior. Isso é basicamente algumas vezes uma família de fontes tem tipo de legenda nele, então você precisa usar essa legenda porque ele é basicamente projetado para esse propósito. As fontes de exibição são projetadas para cabeçalhos, portanto, você não pode usá-las para fontes de corpo ou um parágrafo muito grande ou grande. Subtítulo significa subposição. Exibição significa que você normalmente pode usá-lo para cabeçalhos. Isto é tudo sobre os papéis das fontes. Sempre use a função e defina-os corretamente. Se você estiver usando uma fonte para o tipo de exibição, não a use para o tipo de texto. Vamos ver alguns dos exemplos. Agora, você pode ver aqui eu usei basicamente um tipo de exibição de uma maneira boa e uma maneira ruim. No lado direito, você pode ver que eu usei um tipo de letra, que se destina a ser para tipos de exibição no parágrafo. Você pode ver que é tudo em maiúsculas, e eu acho que você não pode lê-lo muito facilmente. Ele foi basicamente projetado para o tipo de exibição ou basicamente cabeçalhos. No lado esquerdo, você pode ver que eu usei corretamente, e eu estou usando basicamente para títulos. Você deve saber a fonte Bieber é nova e/ou Bieber, basicamente é uma fonte muito alta, igual à que eu estou usando agora. Isso é basicamente projetado para tipos de exibição. Às vezes, se você estiver comprando alguma fonte ou vendo on-line, talvez seja necessário ler um pouco do texto abaixo dela. Se ele diz que ele é para exibição ou é um tipo de exibição, então usuário para cabeçalhos. Em todo o seu design, use-o apenas para cabeçalhos, não o use para texto de parágrafo. Defina seus papéis. Este tipo de letra vai ser o meu tipo de cabeçalho ou tipo de exibição, e usá-lo para exibição. Este é outro exemplo de usos errados de tipos de letra. Você pode ver à esquerda que eu estou usando uma fonte de transição, e é tipo de exibição como cabeçalho, e no lado direito, eu estou usando como um parágrafo, o que é errado. Não use um tipo de exibição de qualquer fonte como parágrafo. Tente usá-lo apenas para títulos ou talvez subtítulos, não para o texto do parágrafo. Aqui estão mais alguns exemplos de papéis de fontes. Estou usando aqui fonte PT Sans Google no lado direito e no lado esquerdo é capela pro font. Eu não sei se é grátis ou eu comprei, algum dia eu não me lembro. No lado direito você pode ver PT Sans do Google vêm em um monte de sabores como legenda, regular, e ousado ou algo assim. Estou usando todos os três para estilizar legendas. Na parte inferior e no meio eu estou usando regular e no topo eu estou usando negrito. Do lado esquerdo, é a mesma história. Estou usando o tipo de exibição como meu cabeçalho, regular como meu parágrafo, e legenda como a legenda na parte inferior. Isto é tudo sobre papéis de tipos de letra. Defina o papel de sua fonte quando você estiver projetando algo e use-o em seu design. Mantenha-o consistente e seu design ficará ótimo e incrível. Vamos passar para a próxima lição. 15. Escalas tipográficas: Já vi muitos designers que nunca usaram hierarquia tipográfica ou escala. Agora, isso acontece com muitos designers novatos ou designers que aprendem com diferentes tutoriais ou algo assim. Então a hierarquia tipográfica basicamente vem da hierarquia visual onde temos conceito de coisas importantes obter tamanhos maiores. Então, se você tiver títulos ou subtítulos ou slogan, eles serão maiores do que os textos normais ou de parágrafo. Portanto, tenha em mente que o tamanho será diferente com importância. Vamos ver como vamos criar uma escala. Chegando ao passo que como criar uma hierarquia tipográfica ou escala. Então, primeiro de tudo, o que vamos fazer é selecionar um tamanho base. Por exemplo, você considera que 16 pixels devem ser meu tamanho base ou tamanho de parágrafo ou a base da minha hierarquia tipográfica. Então você vai selecionar uma proporção de escala ou quanto você vai escalá-la. Como em cada passo, você vai escalá-lo em 1,5 ou 1,25, ou a proporção dourada, que é chamada de 1,618. Então, no fundo, estou dando a vocês um exemplo simples de como calculá-lo. Por exemplo, meu tamanho base é 18 pixels. Assim, a próxima etapa de escala será de 18 pixels multiplicar por 1,5 que será 27 pontos ou 27 pixels tamanho de fonte. Portanto, tenha em mente que é assim que vamos calcular a escala. Então este é o primeiro passo. Se você quiser o segundo passo, então você vai multiplicar 27 por 1,5 para obter o próximo passo. Então deixem-me mostrar-vos um exemplo. Agora aqui temos exemplo de hierarquia. No lado direito, estou mostrando a vocês que temos uma proporção de escala de 1,44, e você pode ver usando essa proporção, temos o cabeçalho em 54 pixels e, em seguida, o subtítulo é 37 pixels. cabeçalho quatro é 26 pixels e o cabeçalho quatro é 18 pixels e o texto pequeno é 13 pixels. Você pode ver no tempo esquerdo usando esta escala para o slogan, eu estou usando cabeçalho três tamanho que foi 26 pixels para o cabeçalho 54 e para o corpo do texto, eu estou usando 18 pixels. Então este é basicamente o conceito de como vamos harmonizar basicamente cada passo. Isso é calculado para que fique bem. Se você apenas selecionar valores aleatórios, eles não vão se encaixar. 16. Ferramentas online para de escala tipográfica: Agora vou mostrar-lhe algumas das ferramentas online para criar esta hierarquia automaticamente ou obter os valores. Mesmo que você seja um desenvolvedor ou um designer, isso irá ajudá-lo muito. Vamos ver o que são essas gemas escondidas. O primeiro site que vou mostrar a vocês é este modularscale.com. Você pode ver aqui temos, à esquerda, é base e, em seguida, a proporção. Você pode definir a proporção a partir disso. Este é o terceiro maior e estes são baseados em, eu acho que música. Posso estar a usar esta proporção dourada. Você pode usar este ou você pode definir o seu personalizado. Eu posso definir como 1,35, algo como isso ou talvez 1.4, que é número par. Para os designers, eles podem estar confusos quais são esses valores em. Basicamente, é uma medida relativa. Então 1em é igual a basicamente 16 pixels. Você pode multiplicar todos esses valores por 16 pixels, como 7.53 multiplicar por 16 para obter seu valor de pixel. O outro método é que bem aqui, 18 pixels. Você pode ver junto com este em, ele está mostrando a você com o tamanho base de 16 que o valor do pixel é basicamente este. Agora, 18 pixels, depois 25 pixels, 35 com essa proporção. Se eu mudar a proporção, você pode ver que isso vai aumentar. Vou usar 54. Algo como isto. Talvez 618. Esta é a proporção de ouro; 18, 29, 47, 76, 123, e assim por diante, e assim por diante. O benefício deste site é que podemos ir nos tamanhos menores também. Após 18 pixels, temos 11 pixels. Eu normalmente gosto que ele seja mais perto deste 1.33 ou algo assim. Dá-lhe um monte de bom alcance como 18, depois 24, 32, 42, 56, algo assim. Também nos tamanhos pequenos, não é muito pequeno. Tenho 14 pixels aqui. Agora é assim que vamos usar esta escala modular. Então há outro que é este. Também é muito legal e você pode facilmente pegar o CSS. Ele gera automaticamente. Para os desenvolvedores, é uma ferramenta muito agradável. Ele pode facilmente gerar as medidas relativas e tudo para você. Novamente, o tamanho base é 16 pixels igual a 1em. Está a mostrar-te. Então você pode usar isso. Acho que gosto deste. Então você também pode ver uma visão muito agradável de como ele vai se parecer. Aqui está o título e depois temos os parágrafos e o título 1, 2, 3, 4, eu acho. Aqui temos o pequeno texto ou talvez legenda. Esta é outra ferramenta. Esta é uma ferramenta muito legal. Você pode ver aqui nós temos os valores em eles. Se você quiser em pixels, multiplique facilmente com 16 pixels. Vou configurá-lo para 18 pixels agora mesmo. Ele mudou novamente com 18 pixels. Agora o meu texto é um pouco maior. A última ferramenta, que também é muito agradável e tem um outro fator que é esta altura da linha. Se você está usando essa escala como eu estou usando 1,33, há outro fator para controlar aqui, que é a altura da linha. Você pode ver que ele mostra como esta altura da linha será semelhante. Eu defini para 1.45. Vamos pré-visualizar. Muito agradável. Feche a visualização. Há algumas coisas boas sobre isso e alguns poucos contras sobre este site ou esta ferramenta. Ele pode criar o código em valores de pixels. Você pode ver aqui o tamanho da fonte, a altura da linha, tudo. Na unidade de RAM, que se destina a desenvolvedores. Então, se você é um designer, não se preocupe com isso. Basta usar este valor de pixel aqui e você estará pronto para ir. Aqui temos textos corporais, que é o parágrafo 18 pixel, então o título 1 é 42 pixels. Se você é um desenvolvedor, você pode facilmente copiar todo esse código aqui e usá-lo em seu desenvolvimento. Aqui está o HTML que eles usaram, aqui está o CSS. Estas são todas as ferramentas que eu queria mostrar a vocês sobre como usar escalas de grade ou escala tipográfica de uma maneira boa e para melhorar seus projetos. Espero que tenha aprendido algumas boas lições nesta palestra. Vamos passar para a próxima lição. 17. Quantos de Hierarquia tipográfico: Já aprendemos sobre a hierarquia tipográfica e o que é. Agora, precisamos saber quantos níveis de hierarquia eu preciso? Talvez isso dependa do seu projeto, mas normalmente 4-6 níveis são mais do que suficientes. Agora, o que significa 4-6 níveis? Vou mostrar-te nos próximos minutos. Agora, você deve ter visto esses títulos pequenos como o título 5 ou o título 6. Se você é um desenvolvedor, você pode entender o que estou dizendo agora. Então, se você é um designer, não se preocupe. Eu vou te mostrar em alguns segundos. Raramente são utilizadas rubricas pequenas, como a rubrica 5 ou a rubrica 6. Algumas pessoas podem concordar ou outras podem não concordar comigo, mas eu acho que seis níveis de hierarquia são mais do que suficientes. Agora, em primeiro lugar, podemos precisar de títulos, que são os títulos 1, 2, 3, 4. Então quatro níveis para cabeçalhos ou quatro tamanhos diferentes para títulos diferentes, como título 1 e, em seguida, subtítulo e subtítulo, algo assim. Então precisamos de um tamanho para o corpo do texto, que pode ter 18 pixels, 20 ou 16 pixels. Então precisamos de um pequeno texto. Às vezes precisamos escrever um texto muito pequeno, como legendas ou texto muito acinzentado, em algum lugar como você pode ter visto algumas datas escritas em números muito pequenos ou tamanho muito pequeno. Então, do meu ponto de vista, seis níveis de hierarquia são mais do que suficientes, se você estiver projetando para dispositivos móveis e web. Não estou falando de livros. Livros ou revistas podem precisar de mais do que esses níveis. Vamos ver como eu usei cinco níveis de hierarquia, ou você pode dizer cinco tamanhos diferentes da proporção de escala em minha hierarquia e como eu implementei isso. Você deve ter visto isso antes. Este é o mesmo exercício. Você pode ver à direita que eu estou usando cinco tamanhos diferentes; 54, 37, 26, 18 e 13. Agora, no lado esquerdo, estou usando um slogan, um título e um texto de parágrafo. Assim, você pode ver para o cabeçalho 4 e corpo do texto, o tamanho é o mesmo, apenas o cabeçalho é um pouco negrito. Cabeçalho está em negrito e o corpo do texto é uma fonte normal. Então eu estou usando 26 pixel, que é cabeçalho 3 tamanho para o meu slogan. Então, se você está projetando, você é o designer ou um web designer ou designer de aplicativo móvel, você deve manter isso em consideração. Então você pode usar os mesmos cinco níveis em seus slogan, cabeçalhos , corpo de texto, listas, ou algo assim. Então isso é sobre níveis de hierarquia, ou quantos níveis realmente precisamos em nosso web ou design móvel. Espero que tenham gostado desta palestra. Vamos passar para a próxima palestra. 18. Ritmo vertical: Agora, vamos falar sobre o que é ritmo vertical ou grade de linha de base. Alguns de vocês podem estar usando a linha de base, mas eu sei que a maioria dos designers, mesmo que estão usando o Photoshop dos últimos anos, eles não sabem o que é um ritmo vertical ou grade de linha de base. Basicamente, vamos criar harmonia em diferentes elementos de design usando um espaçamento vertical uniforme. Isto é basicamente para layout do nosso texto. Mesmo você pode aplicá-lo em diferentes elementos de design, como botões, gráficos e algumas outras coisas. Basicamente, cria uma harmonia vertical entre os nossos elementos de design e o nosso tipo. Agora, como calcular o tamanho da grade de linha de base. Basicamente, o tamanho da grade de linha de base é baseado no tamanho da fonte base multiplicado pela altura da linha. Então, se eu tiver um tamanho de fonte base como 18 pixels e minha altura de linha for 1,5, você terá tamanho de grade de linha de base de 27 pixels. Agora, isso é basicamente o tamanho da grade de linha de base. Você também pode usar múltiplos do tamanho da fonte base, como se você tiver grades de linha de base de 27 pixels, você também pode usar nove pixels ou talvez 18 pixels. Às vezes você pode precisar usar nove ou talvez múltiplos de 27. Esta grade de linha de base é basicamente a unidade de harmonia. Então, se você quiser usá-lo, você pode usá-lo em todos os seus elementos de design. Como se você quiser dimensionar um botão, então você pode dimensioná-lo como 27 multiplicar por 2, é 54, eu acho. Agora, você pode usar a altura de 54 pixels para seus botões. O mesmo se aplica à largura. Este é basicamente o ritmo vertical, por isso será mais aplicado à altura dos itens em vez da largura dos itens. É assim que você o aplica ao seu design, seu tipo e tudo mais. Deixe-me mostrar-lhe o exemplo de grade de linha de base de 26 pixels. Do lado esquerdo, estou usando uma palavra sem ritmo vertical. Só estou espaçamento com o meu instinto. Você pode ver no lado esquerdo, eles não estão alinhados verticalmente muito bem. Além disso, o parágrafo é um pouco desalinhado. Então, no lado direito, você pode ver que eu estou usando a grade de linha de base e eu estou alinhando verticalmente tudo de acordo com meu ritmo vertical e linha de base. Você pode ver o subtítulo Roboto Condensado 26 pixels no lado direito está alinhado entre, no meio das duas linhas de base. Além disso, nosso cabeçalho principal está alinhado entre três unidades de linha de base, e nosso parágrafo também está sentado dentro de cada linha de base e no meio dela. Você também pode alinhá-lo com a parte inferior do texto. Então você pode simplesmente, em vez de alinhar parágrafos no meio dessas linhas de base, você pode colocá-los ou você pode fazê-los sentar-se na parte inferior de sua linha de base de força. Combine a linha de base de força com a grade de linha e isso também pode ajudá-lo a alinhar tudo perfeitamente. Nesta seção, vou mostrar como você pode usar os múltiplos de grade de linha de base, margens de avanço, espaçamento e/ou outros elementos de design. Como eu já disse antes no slide anterior, você pode ver à esquerda que eu estou usando o 26 pixel como minha linha de base, então 13 pixel também é uma unidade desta linha de base um múltiplo desta linha de base, em seguida, 52,78,104, e 130. Como eu consegui isso, 26 multiplicado por 2 é 52, e depois multiplicar por 3, 78, multiplicar por 4,104. No lado direito, você pode ver que eu estou usando esses mesmos múltiplos para espaçar duas seções. O parágrafo superior e cabeçalho e nova seção na parte inferior você pode ver que eu sou eles com 104 pixels, que também é um múltiplo de 26 pixels. Isto é basicamente como criar harmonia e ritmo vertical em seus projetos. Isso realmente vai melhorar seu design para o próximo nível. Se você estiver usando uma habilidade tipográfica muito boa junto com esta grade de linha de base, então até mesmo o tipo de seu design, apenas o tipo, cabeçalho e textos podem realmente impactar o usuário, então use-os com sabedoria e vamos passar para a próxima lição. 19. Ritmo vertical no Photoshop: Agora, deixe-me mostrar algumas das maneiras que podemos criar esse ritmo vertical no Photoshop. Vou abrir um novo arquivo e vou dimensioná-lo 1400 por 972 pixels. Não gerencie este documento com cores. Aqui temos a tela vazia. Vou pressionar “Alt Delete” para preenchê-lo com uma cor de primeiro plano. Agora, vou usar a escala modular de base de 18 pixels. Este aqui, eu estou usando este site 18 pixel base e 1.5 é a minha proporção. Basicamente, minha linha de base é 27 pixels. Vou mostrar-lhe como desenhar essas linhas de 27 pixels para que você possa facilmente usá-las em seus designs. O que eu vou fazer é mostrar a vocês como fazer isso no Photoshop. Primeiro, vamos usar algum texto aqui. Talvez eu escolha essa cor acinzentada. Vou usar um parágrafo aqui. O tamanho deve ser de 18 pixels. A nossa nota de 18 pontos é de 18 pontos. Vou digitar e colar Lorem Ipsum aqui. A altura da linha que vou usar é de 1,5. Então eu vou dizer 27 pixels aqui. Tenha isso em mente, você vai usar a altura da linha igual a uma linha de base. Então 27 pixels é basicamente a altura da sua linha para fonte de 18 pontos. Agora, este é o texto do nosso parágrafo. Desculpe, eu deveria estar usando uma fonte normal em vez de uma mídia. Esta é a minha fonte base, tipo base, e eu vou usar um cabeçalho. Vamos ver qual é o tamanho do título, 41 pixels. Vou usar agora, 41 pixels. Vou clicar uma vez aqui, 41 pontos aqui. Vou usar a cara ousada aqui. Vou mostrar-te que este vai ser o nosso rumo. Vamos usar algumas subposições aqui. Vamos usar o meio para isso. É uma subposição. subtítulo está aqui. Isto é apenas um texto falso, por isso não te preocupes com isso. Eu vou mudar sua cor para um pouco de cor acinzentada agora, assim, só para obter alguma variedade. Vamos ver o que cai no próximo tamanho, 27. Vou usar 27 para este, assim. Neste momento, não estou usando nenhuma grade para alinhar tudo isso. Então agora vamos usar uma grade. Vamos começar. Vamos criar um novo arquivo com a largura de 100 pixels e o tamanho da grade era 27. Então, defina a altura desse documento para 27 pixels, pressione Ok. Em seguida, neste menu Formas, selecione esta ferramenta de linha. Amplie um pouco, controle mais e arraste um pixel. Certifique-se de que no topo é uma linha de ponto. Então eu estou usando esta linha de um ponto e arrastá-lo para a parte inferior. Também podemos usar uma cor preta um pouco mais escura. Agora, controle A marchando S, selecione tudo. Vamos usar patrono definido. Aqui nós o nomeamos grade de linha de base de 27 pixels. Pressione Ok. Mover para este documento. Selecione esta camada, e eu vou pressionar e ir para estilos de camada. Então vamos usar essa sobreposição de padrão. Vamos usar este último, que era o nosso padrão de base. Agora, este é o nosso padrão de linha de base. Você pode ver que nosso texto não está alinhado. Há duas maneiras de alinhá-lo assim, sentar-se no fundo da linha de base. É assim que eu faço normalmente, assim. O subtítulo deveria estar aqui, assim. É assim que vamos alinhar tudo. Se você quiser, você pode ir, por exemplo, se eu quiser que o subtítulo fique mais perto deste, quanto eu posso mover para cá, você sabe? Você se lembra? Posso mover nove pixels abaixo. Então agora eu vou mover 1, 2, 3, 4, 5, 6, 7, 8, 9. Ainda está em proporção porque nove é também o múltiplo de 27 e 18. Então é assim que nosso texto ficará em uma linha de base, e usando uma grade de linha de base. Mais uma coisa é normalmente, alguns designers também usá-lo assim na web, usá-lo no meio assim, e também alinhá-lo assim. subtítulo deve ser aqui, assim. Então este é outro acordo. Estou alinhando tudo no meio. Este é outro arranjo que é recomendado por um monte de desenvolvedores web. Então agora vamos usar este, seguir este. Está parecendo mais profissional para mim. Agora, se tentarmos ocultar essa sobreposição de padrão, você pode ver que nosso texto está definido perfeitamente. Aqui está o próximo desafio para vocês. Crie algo assim. Use uma balança modular. Você cria uma hierarquia tipográfica e usa isso, alinha-a com o ritmo vertical e mostra-a para mim. Vamos passar para a próxima lição. 20. Exercício para o ritmo vertical: Nesta lição, vamos melhorar a última lição que fizemos na seção um. Esta é a lição que fizemos na seção um. Agora o que vamos fazer é aplicar as habilidades que aprendemos, habilidades tipográficas que aplicaremos nisso. Em seguida, vamos aplicar grade de linha de base para este projeto e altura de linha e tudo mais. Vamos começar. Este é o artigo do nosso blog da lição anterior, então vamos salvá-lo como outro arquivo. Talvez consertado ou algo assim. Agora, primeiro de tudo, vamos usar este site que é gridlover.net e nosso tamanho de fonte base é 20 pixels, altura da linha, eu vou usar 1.6, fator de escala é 1.3. Fatores de escala basicamente significa quanto a diferença de um título para o outro. Nossa diferença de dimensionamento do tamanho da fonte. Esta é a proporção. Estou usando uma proporção muito baixa. Não misture essa altura de linha com o fator de escala. O fator de escala é diferente, altura da linha é diferente. Então 20 multiplicado por 1.6 é 32, então nossa altura de linha será 32. Primeiro, vamos aplicar a altura da linha a esta página ou a este design. O que vou fazer é duplicar este fundo. Primeiro vamos aplicar rapidamente o padrão. Nas lições anteriores, eu lhe disse como criar esse padrão, então eu não quero repeti-lo novamente. Eu já criei um padrão para este 32 pixels. Vou aplicá-lo a este documento. Você pode ver que este documento não está se encaixando bem na parte superior e inferior. O que vamos fazer é editar o tamanho da imagem. Vamos ver, dividir 800 por 32 e é 25, por isso é quase perfeito. Vamos começar. Vamos mudar o fundo um pouco para cima. Zoom, 1, 2, 3, 4, 5, 6, 7, 8. Isto parece perfeito. Agora ele está se encaixando nossa sobreposição padrão de 32 pixels está se encaixando. Se você não se lembra de como criar isso, veja a seção um, Eu criei isso para você. Agora, primeiro de tudo, agora vamos mudar as configurações e tamanhos para o nosso texto e tudo mais. Este é o nosso texto. Primeiro vamos usar 20 pixels porque 20 pixels é o nosso tamanho de linha de base. Vamos para 20 pixels e altura da linha foi 1.6, por isso é igual a 32 pontos. Vamos mudar isso para 32 pontos. Vamos mover nosso texto de acordo com as linhas de base para aqui, grade para aqui. É assim que parece. Vamos mudar a quinta-feira. Tamanho de quinta-feira é 18. Agora aqui temos o problema. Precisamos de outra escala que mostre também o nosso pequeno texto. Vamos usar escala modular e 20 pixels e 1.3. Isso já é que eu salvei, então digite 20 pixels, proporção 1.3. Eu vou ver o tamanho menor que este 20 pixels, é 15. Se você quiser, você pode usar 15 aqui assim, 15 pontos e movê-lo acima e abaixo deste título. Agora, por que eu uso este? Porque este nível de grade não me mostra o tamanho do texto pequeno. Se você ir para este código, você não pode ver nenhum pequeno texto aqui. título cinco tem 20 pixels e nenhum tamanho está abaixo de 20 pixels. Precisamos de um tamanho abaixo de 20 pixels, então eu mudo para esta escala modular. Agora, se você ver nossos tamanhos de fonte são 20, 26, 34 e 44. O mesmo é aqui. Você pode ver que o título um tem 44 pixels. Você pode ver aqui tamanho da fonte 44 pixels, então temos 34, depois temos 26, e 20. A escala é a mesma, só que não temos o cálculo de tamanho pequeno aqui. Nosso próximo passo será dimensionar esta posição perfeitamente. Vamos usar talvez 57 ou 44. Você pode decidir o que quiser usar. Eu vou com este 44 pixels. Agora vou selecionar este cabeçalho e vamos configurá-lo para 44 pixels. É assim que está parecendo agora. Vamos adicionar mais alguns textos para que ele se encaixe em duas linhas. Não queremos deixar uma segunda ou duas letras no final. Não é uma boa prática de tipografia. O tamanho é 44. Agora eu vou definir a altura da linha para 44 também porque eu quero apenas um igual a altura da linha, um para cabeçalhos. Se você se lembrar do meu último tutorial ou lição, você pode lembrar que a altura da linha para o título é quase 100% ou 110%, então está mais perto de 100%. Você pode ver que eu estou usando essas três linhas aqui para equilibrar este título. Você pode ver que eu estou usando essas três linhas, então vamos alinhá-lo um pouco mais na parte inferior. Vamos ter o tamanho deste igual a 20 pixels, por isso é facilmente legível. Não estamos à procura de muita variedade. Precisamos que o usuário leia e tudo está definido agora. Acho que vamos mudar o tamanho deste. Altura é 15, então nós torná-lo igual a oito, que também está relacionado ao nosso tamanho de linha de base e nós apenas colocá-lo no meio do C assim. Mais uma coisa. Na lição anterior, aplicamos essa linha de grade, então certifique-se de que seus elementos estão alinhados a essa linha de grade. Se você não se lembrar de como criar essa linha de grade, vá para Exibir, Novo Layout de Guia e use oito colunas, calha de 30 pixels e tudo mais. Deixe as margens. Se você não quer margem, deixe-os assim e pressione Ok. Você vai gerar algo semelhante a mim. Oito colunas, calha de 30 pixels, e até agora eu acho que você pode não saber o que é sarjeta porque será na próxima lição. Então não se preocupe com isso. Apenas mantenha as configurações assim. Eu ativei minha grade com essas colunas de controle para ver onde minhas coisas estão alinhadas. Esta barra laranja está alinhada com precisão. Tudo o resto está ótimo. Este é o nosso primeiro marco. Vamos ocultar a sobreposição de padrão e ver como nosso documento está olhando. Está muito bonito. O espaçamento entre os elementos é ótimo, tudo parece bem. Aplicamos escala tipográfica e linha de base para aprimorar nossos projetos. Agora o segundo passo. segundo passo é que se você ver de perto entre esses dois parágrafos e os parágrafos inferiores, eu acho que é um pouco maior espaço entre todos esses parágrafos. Por que não os aproxima? Nós vamos para o Controle J neste texto. Este é o nosso texto antigo, então eu vou duplicar esta camada. O que vamos fazer é remover um espaço ou voltar para cá. Pressionei Enter ou voltar aqui. Agora eles estão alinhados. Agora selecione a primeira linha e veja qual é a altura da linha é 32. Precisamos de algo entre 48 ou 64. O próximo passo é 64, mas vamos dividir nossa linha de base para metade, então metade da linha de base é 16 pontos. Estou adicionando 32 mais 16, então são 48. Vou mudar isso para 48 em vez de 64, que era a configuração anterior. Também este para 48. Vou mostrar-lhe a diferença assim que terminar. Deixe-me ativar a sobreposição de padrão para nossa grade de linha de base. Esta é a nossa grelha de base. Você pode ver aqui que nossa linha de base está ficando fora da batida como na música, mas assim que ele vai para o próximo ponto ele está novamente dentro do padrão. Ele está novamente alinhado para a nossa grade de linha de base. Por quê? Porque nossa escala de base, que é de 48 pontos, é basicamente, o que é? É basicamente 1,5 vezes o nosso tamanho de linha de base, então 32. Vamos te contar o segredo aqui, 32 multiplicados por 1,5, 48. Sempre que você tentar sair da batida basta ir algo assim, multiplicar com 1,5 ou 1,25, 32 multiplicar por 1,25, algo assim. 1,25 e 40, também pode correr bem, mas eu acho que 1.5 é bom o suficiente. É assim que usamos nossa grade de linha de base e este é o texto anterior. Este é anterior e este está um pouco deslocado para cima. Aqui você pode ver um pouco menos de diferença entre os parágrafos e está olhando muito bom. Estes são os segredos da altura da linha e escalas, escalas tipográficas, grade de linha de base. Além disso, se você contar as palavras nesta linha, eu acho que eles estão mais perto de algo como talvez 70 caracteres. Acho que está mais perto de 70 ou 80, talvez. Acho que o comprimento ideal da linha. Não quero desperdiçar seu tempo contando aqui. Foi assim que aplicamos nossa altura de linha com dois métodos diferentes. Um deles é usar a altura perfeita da linha, que é 32 pixels ou 32 pontos. Em seguida, fomos um pouco exagerados com a multiplicação da nossa altura de linha para 1,5, deslocando dois parágrafos mais próximos um do outro. Estas são duas técnicas que fizemos. Espero que vocês tenham gostado deste exercício, baixem seus arquivos dos recursos e nos vemos em breve com mais em tais exercícios. Este é outro desafio para você, tentar replicar o que eu fiz aqui. Vamos ver o que você pode criar e esperar ver seus projetos muito em breve. Vamos passar para a próxima lição. 21. Introdução à grade modular: Nesta aula, nós vamos aprender sobre grade modular, e vamos ver como usá-la, quais são as diferentes partes dela, e como usar módulos, margens, dispersões e linhas de grade para criar designs incríveis. Nosso primeiro passo é que já sabemos sobre linhas de base. Esta é a nossa linha de base de 30 pixels. O que eu fiz foi que eu criei este documento com o tamanho, que é múltiplo de 30 pixels. A altura é 810, então a altura é basicamente múltipla da minha linha de base de 30 pixels. Você pode ver no painel de camadas, Eu criei uma camada que é chamada linha de base de 30 pixels. Então, como mostrei em lições anteriores, criei um padrão com linha de base de 30 pixels, e apliquei-o a uma camada. A partir daqui, você pode ver que nós já sabíamos esse material de linha de base, este é o primeiro passo. O segundo passo é que vamos dividir esse projeto em porções horizontais e verticais. Aí vem as calhas. Como eu criei essas calhas, você pode ver aqui, esta é basicamente a minha grade. Se eu ativar minha coluna de linhas de grade controlada no Photoshop. Grades são basicamente espaços entre colunas diferentes. Você pode ver aqui a porção branca é a coluna e a cinza é a sarjeta. Então calha é basicamente margens internas entre diferentes colunas, isso é apenas para espaçar itens diferentes uns aos outros para que eles não toquem nas orelhas ou nariz do outro, etc. Então, se eu estou projetando algo e eu coloquei algo aqui Assim, a próxima coisa é que eu vou colocar outro aqui assim. Esta é basicamente a margem entre eles. Ele realmente cria uma elegância em seu design se você seguir isso. Se você é um desenvolvedor web, você já sabia cerca de 12 colunas ou 60 linhas de grade de colunas. Eles também são baseados nisso. Mesmo Bootstrap usa 30 pixels calha. Então esta calha em Bootstrap é igual a 30 pixels. Como eu criei essas calhas no Photoshop, eu só fui para este novo layout de guia e eu tenho 30 pixels calha e oito colunas. Neste momento, dividi este layout em oito colunas. Você pode usar 12, 16, o que quiser. Além disso, a terceira parte que estou usando no meu design, que é muito importante, é que você deixe alguma margem em torno do seu design. Então deixe-me primeiro limpar a margem, mostrar-lhe a margem. Então esta porção amarela é basicamente a minha margem. Então, se você vê-lo aqui na linha da grade, você pode ver que eu tenho 90 pixels margem superior, esquerda 30, 90 na parte inferior, e direita em 30. Aqui está o segredo: Por que eu estou deixando 30 pixels e 90 pixels margens, o segredo é nossa linha de base. Nossa linha de base é de 30 pixels, então eu defini tudo em torno desse número; 30 pixels, depois 90 pixels, múltiplos de nossa linha de base. Então foi assim que preparei tudo. Nós configuramos nossa grade de linha de base, é isso, e então temos calhas, então temos margens, e depois o próximo passo. Então o próximo passo é que temos o espaço dentro desta área, nós dividimos em colunas horizontais e colunas verticais, oito colunas, mas agora vamos criar outra coisa que é chamada de módulos. Vamos subdividir isso em diferentes caixas ou módulos. Você pode ver aqui que este é um módulo, este é um módulo, e este é outro, ou nós também podemos usar módulos como este; como nós temos 1, 2, 3, 4, algo assim, mas a altura que usaremos será igual a este módulo. Então, na verdade, o que fizemos foi dividir todo o design em diferentes porções que são matematicamente calculadas para trazer harmonia e elegância aos olhos do seu usuário. Então, por exemplo, se eu estiver usando esses dois para a minha imagem assim, então eu vou usar, por exemplo, primeiros quatro módulos como esse ou talvez esta parte para o meu texto. Para um Lorem Ipsum menos espaçado aqui, vamos mudar o tamanho, talvez 72 seja bom. Vamos mudar a altura da linha para 72 e aumentar o tamanho para 100, talvez assim. Altura da linha deve ser 90, e vamos usar 10 aqui assim. Ainda assim, acho que estamos tendo algum problema com a altura da linha. Este parece bom, basta criar um layout simples como este. Então esta era a nossa imagem, vamos esconder esta. Onde está a imagem? Ok, este aqui. Vamos bloquear essas camadas que são nossa linha de base e tudo, vamos prendê-las. Gutter, eu vou trancá-lo, margens, eu vou bloquear este aqui para que nós não selecioná-los por engano. Este foi um pouco hediondo, então eu vou convertê-lo para esta cor e nós vamos remover sua borda. Onde estão as propriedades? Aqui temos as propriedades da forma, não precisamos de fronteiras. Criamos um layout simples. Vamos apenas esconder essas margens e tudo para que você possa ver como estamos fazendo com a palavra design. Vamos esconder isso e tudo mais. Então você pode ver como estamos usando margens e tudo mais para expor nossas coisas e tudo mais. Vamos criar uma outra camada de texto aqui. Agora, eu vou usar toda essa área ou talvez toda essa área para criar texto aqui. Vamos espaço Lorem Ipsum, e desta vez vamos usar tamanho muito pequeno, como talvez 24 pixels. Vamos usar a altura de 30 pixels como esta, vamos usar zero ou talvez menos que zero, menos 10 assim, e estamos quase lá com nossas margens como esta. Vamos mudar a cor para algum preto ou algo acinzentado como isso, vamos esconder nossas margens, sarjeta, e tudo mais para ver como ele parece. É assim que o nosso design está agora. Há mais uma coisa que podemos fazer, podemos usar as margens um pouco mais aqui para que não pareça estar tocando do lado direito. Então talvez possamos reduzir seu tamanho para 30 pixels. Com 30 pixels, vamos criar um pouco mais de margem aqui. Do lado direito, criei uma caixa de 30 pixels aqui. Então isto é 30 pixels, então eu vou duplicá-lo com a minha tecla alt. Isto é novamente 30 pixels, então temos agora 90 pixels margem aqui. Então vamos dimensionar este parágrafo novamente para esta margem de 90 pixels como esta, e vamos ocultar essas margens e tudo mais. Você pode ver como criamos o layout assim, você viu esses tipos de layouts em revistas. Mesmo que possamos torná-lo um pouco mais ousado, algo assim, talvez um pouco menos espaço entre letras, menos espaço entre 72 como este. Você pode ter visto esse tipo de layouts em revistas para que você saiba que os designers de revistas, eles são muito bons em criar esses layouts ou essas grades modulares. Tenha em mente como usar esta grade. Estes são os conceitos básicos. Temos calhas que estão entre nossas diferentes colunas. Você pode ver que meu conteúdo não está dentro de nenhuma sarjeta. Eu os largo como aqui, vamos tocá-lo à esquerda da nossa sarjeta assim, e você pode ver que até mesmo o meu conteúdo não está tocando em nenhuma margem, está longe da margem. Há duas coisas que você deve ter em mente ao projetar. Um deles é usar grade modular, e no próximo exercício vamos criar um monte de temas diferentes como você pode ver aqui, este, este, e este usando nossa grade modular. Agora, você aprendeu tudo sobre grades modulares, então vamos passar para a próxima lição. 22. Como preparar a grade para o exercício de design de layout de blog: Nesta série de exercícios, vamos projetar algo semelhante a isso. Deixe-me esconder os detalhes aqui para que você possa ver como vai ser. Este é um exemplo. Troco muitos layouts e designs diferentes pelo mesmo conteúdo. Este é o nosso conteúdo. Este é um arranjo, este é o segundo. Você pode ver como isso está afetando nosso design. Este é o terceiro. Vamos usar módulos, margens, linha de base, tudo neste exercício, até mesmo ritmo vertical. Este é o último. Há muitas coisas que você precisa configurar primeiro. Neste exercício, vou dizer-lhe como configurar esta linha de base, este tamanho de dispersão, estas margens e como criar estes módulos. Este é o nosso documento. Vamos primeiro ver que outros recursos vamos usar para este documento. O primeiro passo que vamos dar é escolher nossas fontes do Google. As duas fontes que estou tentando selecionar aqui são Lato e Source Sans Pro. Se você se lembra dos meus últimos exercícios, você já sabe que uma fonte vai ser para títulos e uma vai ser para o corpo do texto. Estou usando o Source Sans Pro para títulos e Lato para o meu texto. Estas são duas fontes. Se você quiser baixá-los, você pode baixá-los daqui, este ícone aqui e instalá-los em seu PC ou Mac e usá-los. Então vamos usar Gridlover ou Modular Scale, o que você quiser usar. Vamos usar um fator de escala 1.3, altura da linha 1,5 e tamanho da fonte base é de 20 pixels. Altura da linha sólida será igual a 20 multiplicado por 1,5, 30 pixels. Trinta pixels, altura da linha, tamanho da fonte será de 20 pixels, fator de escala será de 1,3, então nosso cabeçalho 1 será de 44 pixels. Você pode ver aqui, tamanho da fonte 44 pixels. Se você mudar para a escala modular, você pode obter os valores mais facilmente porque ele tem apenas proporções e tamanho base. Temos 44 aqui. Você também pode usar este 57 se quiser, mas 44, 34, 20, depois 15. Esta é a nossa escala se você quiser usar a tabela aqui, você pode mudar para esta tabela para ver todos os tamanhos. Selecionamos nossa escala, escala tipográfica, nossas fontes e seus papéis, qual fonte vai desempenhar qual papel. Estes são os passos que cobrimos. Então vamos usar os dados deste site, o conteúdo deste site, Realipsum. Para imagens, você pode baixar imagens deste picjumbo.com ou Pixabay ou qualquer outro bom site. Eu realmente gosto deste site. Se você for para Categorias, você pode mudar para Pessoas, Natureza, Amor, qualquer que ou qualquer categoria que você preferir, você pode ir para Arquitetura. São imagens muito bonitas, você pode ver por aqui. Você pode selecionar qualquer um deles, vá para a próxima página. Para imagens, use este picjumbo.com, categoria, pessoas ou qualquer categoria que você gosta, RealipSum para texto. Selecionamos nossas fontes e linhas de fontes e nossa escala modular e nosso tamanho de grade, que é o grau de linha de base, que é de 30 pixels, e tamanho de fonte base 20 pixels. Agora, o nosso primeiro passo será, vamos criar algo assim. Vamos começar e abrir um novo arquivo. O que vamos fazer é definir a largura para 1400 e a altura vai ser 810 pixels. Por quê? Porque 810 é facilmente divisível pela nossa linha de base, que é de 30 pixels. Se você tentar dividir 810 dividido por 30, será um valor inteiro que é 27. Oitocentos e dez e pressione Ok. Este é o tamanho dos nossos documentos. Agora vamos montar uma grade aqui. Primeiro, o que vamos fazer é criar um novo layout de guia. Não vamos usar 12 colunas, vamos usar oito colunas. Se você quiser criar linhas, cabe a você. Você pode criar linhas ou você pode criar oito linhas. Acho que aqui temos oito linhas, 1, 2, 3, 4, 5, 6, 7, 8. Isso é basicamente criar nossos módulos. Agora vou escondê-lo. tamanho da calha vai ser de 30 pixels. Cada coluna tem um espaço entre o qual é 30 pixels. Esta é a nossa sarjeta. Agora, para as margens, a margem superior é 90, o que é igual à nossa altura de linha de base três. Isto vai ser 30, fundo vai ser 90 novamente, e a direita vai ser 30. Não há regras rígidas e rápidas, se você quiser definir mais margem, como 120 ou talvez à direita e à esquerda você quer ter 45 ou 60, cabe a você. Certifique-se de que ele esteja sincronizado com a altura da linha de base, que é de 30 pixels. Agora é assim que criei minha grade. Pressione Ok. Esta é a minha grade, calhas e margens no topo e no fundo e à direita e à esquerda aqui. Isto é apenas um começo do meu documento. Agora o que vamos fazer é criar alguns módulos. Como vamos criar alguns módulos. Mas o primeiro passo é, precisamos de uma grade de base. Vamos criar uma grade de linha de base que será de 30 pixels. Então pese 100 pixels, altura 30 pixels. Vamos ampliar 1.200 por cento e usar esta ferramenta de linha, pressionar “Shift” e criar uma linha aqui, mudar a cor para algum cinza. Uma linha de pixel, certifique-se de que é uma linha de pixel. Veja no topo aqui onde está a altura de um pixel. Certifique-se de que a altura é de um pixels porque ele criará problema se você tiver uma linha de dois pixels. Controle A e defina o padrão de linha base de 30 pixels. O que vamos fazer é criar uma nova camada para nossa grade de linha de base. Controle A ou Alt + delete para preencher esta camada com cor cinza. Nós vamos para Pattern Overlay esta camada que vai ser nossos 30 pixels assim. Nossa rede está um pouco fora. Vamos ajustá-lo. Não se preocupe, certifique-se de que isso é dimensionado para 100% Ajustar à origem, e eu acho que ele já está corrigido. Pressione Ok, e Controle D. Esta é a nossa grade de linha de base, está configurada. Agora vamos criar alguns módulos neste documento. O que vamos fazer é, vamos criar 1, 2, 3, que vai ter 90 pixels de altura. Faça 90 pixels. Esta vai ser uma cor um pouco diferente como esta, ou talvez esta aqui. Este é o nosso único módulo, ou basicamente uma linha. Basicamente, linhas e colunas, eles se misturam para criar este estilo de grade modular. Eu vou agrupar isso e controlar G. Nós basicamente vamos alinhá-los uns com os outros assim. Eu vou fazer isso rapidamente. Ignore esta etapa para entender o que estamos fazendo aqui. Aqui temos todos os módulos. Agora podemos usar algo assim. Podemos usar três assim, três módulos aqui em talvez quatro colunas e três linhas aqui. É assim que vamos usar. Basicamente, criamos alguns blocos legais aqui. Vamos agrupá-los completamente. Controle G e faça sua opacidade 50 por cento. Podemos ver nossa linha de grade, nossos módulos são linhas. Esta é a nossa rede. Nosso documento está pronto. Você já sabe que a parte superior ou a esquerda e a direita, é basicamente a margem. Criamos grade de linha de base de 30 pixels com módulos, diferentes partes são linhas e colunas. Esta é basicamente grade modular e vamos usá-lo para criar três layout diferente na próxima lição. Foi assim que eu preparei meu design e você também deve seguir esses passos quando estiver projetando e definindo seus sites ou tipografia em aplicativos móveis. Vamos passar para a próxima lição onde vamos criar três layouts diferentes desses módulos. Vamos passar para a próxima lição. 23. Crie primeiro layout do blog: Agora, primeiro, vamos criar esse layout, então no topo vamos definir nosso cabeçalho, à esquerda, nossa data deste artigo, e no lado direito, 147 curtidas. À esquerda, vamos usar Lato, uma versão inclinada em itálico, estilo itálico de Lato para ter algum texto de citação ou citação aqui, texto citado. Isto é, vamos usar 1, 2, 3, 4 blocos, quatro colunas para layout do primeiro parágrafo introdutório, e para o próximo texto vamos usar esses três blocos. Três e blocos, ou três linhas e colunas para este, este módulo para esta imagem. Basicamente, o que estamos tentando fazer é equilibrar esse layout. Vamos discutir um pouco do equilíbrio aqui. Como você pode ver esta cor azul, normalmente a cor recebe mais atenção e é mais pesada. É assim que estamos equilibrando com esta imagem e esta cor aqui. Este espaço vazio está basicamente equilibrando com todo esse texto aqui. No meio temos texto, à esquerda, novamente, temos cor para equilibrar o peso geral do design. É como se você estivesse equilibrando ou pesando coisas em suas duas mãos ou talvez como se você equilibrasse na gangorra. Aqui temos um objeto pequeno mais pesado, e aqui temos um objeto grande menos pesado, como um saco de balões de ar ou algo assim. Aqui temos duas pedras. É assim que tento equilibrar o meu design. Esta é uma dica muito, você pode dizer, básica que muitos designers podem não saber sobre. É assim que estamos equilibrando nosso layout, esta é a técnica básica entre por trás deste design. Vamos começar. Primeiro, vamos usar a escala, se você lembrar, o tamanho do título era 44 pixels, e o tamanho do texto era de 20 pixels. Agora vou usar esses dois tamanhos. Estou ignorando todos os outros. Vamos tornar nossos módulos mais maçantes ou mais em segundo plano, que possamos ver como vamos colocar coisas diferentes. Primeiro, eu vou usar essas três linhas para criar meus títulos, talvez todo esse bloco, e eu vou usar novamente Real Ipsum. Vamos ver onde está. Aqui está o Ipsum Real. Vamos copiar tudo isso e colá-lo aqui assim. O tamanho do texto que estou usando 44 pontos e Source Sans Pro negrito. Se você quer ir com preto, você pode ir com preto também, assim. Só para preencher o espaço, não se preocupe com o texto que estou usando. Vou definir a sua altura de linha para 44, assim. Se quisermos ir acima dos 44, podemos ir uns 50, assim. Apenas certifique-se de que está entre estas três linhas como essa. Também é tocante, você pode ver esta coluna aqui. Esta é a sarjeta, não estamos dentro da sarjeta, estamos dentro destas 1, 2, 3, 4 colunas. É assim que eu estou usando isso, se você quiser expandir isso, talvez você possa usar cinco assim. Não expandiu muito, porque é um cabeçalho, então precisamos de menos espaço entre as letras. Agora vamos usar algum texto aqui, talvez possamos deixar esta linha, esta linha aqui, e começar nosso texto e usar essas talvez quatro colunas neste módulo, e vamos colá-lo sobre algo assim. Este é o nosso parágrafo inicial ou parágrafo de introdução. Vou usar 20 pixels aqui. Podemos usar um pouco mais de altura de linha, talvez o 45, algo assim, e vamos usar regular, e isso vai ser Lato, não Source Sans Pro. Lato não linha fina, mas vamos usar regular. Agora você pode ver que eu posso definir este bloco de texto no topo deste módulo, ou talvez na parte inferior, depende de você. Agora, se a configurarmos assim, pode ser assim, ou talvez no fundo. Acho que vou colocá-lo no topo. Vamos criar outro bloco de texto como este, o mesmo, Control J. Eu vou copiar este, e vamos clicar duas vezes neste e ajustar a largura e a altura destas três colunas, e nós vamos usar isso ou talvez você possa ir além disso porque é uma página web contínua. Vou usar 30 pixels de altura de linha, e vamos usar estes dois parágrafos. Primeiro copie este e cola-o aqui. Penso que se trata de um parágrafo muito longo. Talvez precisemos mudar um pouco para baixo, ou talvez na linha assim. Não importa enquanto você está projetando, se você quiser definir seus textos na linha de base, você pode fazer isso acontecer, mas quando você está codificando, eu acho que não é possível facilmente, então talvez possamos definir assim, e também este eu vou usá-lo assim. Vamos escondê-lo, não está olhando muito bom, talvez vamos usar algumas configurações diferentes. Este é Lato 20 e talvez também possamos usar a mesma altura de linha aqui, ou talvez mudar a cor para uma cor mais escura como esta. Faça este parágrafo introdutório parecer agradável. Se você quiser separar com duas linhas, tudo bem, mas eu acho que duas linhas entre este introdutório e este parágrafo é demais. Vamos deixar isso agora, vamos colocar a imagem e outros textos aqui. Vamos colocar uma mensagem aqui. Primeiro vamos colocar aqui. Vamos copiá-lo daqui. Sexta-feira 30 de setembro de 2010, eu vou colá-lo aqui, e nós vamos mudar a cor para esta cor cinza, talvez um pouco mais escura cor cinza como esta. O próximo passo foi, eu acho que 15. Se você quiser dimensioná-lo para 15, você pode dimensioná-lo para 15. Agora o que estou tentando fazer é usar essas duas colunas e centralizar esse texto aqui. Agora esta data definiu tudo, então vamos usar este 147 gostos aqui, então 147 entrar e curtir. Vamos torná-lo perto juntos, e eu vou usar linha central para isso porque é um pedaço muito pequeno de texto, ele pode ser facilmente lido com centro align. Reduza para auto, e eu vou usar 34 pixels aqui. A fonte será Source Sans Pro. Se você quiser ir para este “Luz”, você pode ir para este Luz e apenas selecionar este, usar a Cor, talvez este. Vou centrá-lo nesta coluna, assim. Se você quiser ir com Bold, acho que podemos usar Bold ou talvez Semi Bold. “ Semi ousado” parece bom. Nós definimos nossos 147 gostos, nossa data e nosso título, e nosso texto. Vamos colocar mais texto aqui porque está muito estranho. Talvez possamos “Copiar” uma linha daqui e “Colar” aqui assim. Remova parte do texto para fazer com que pareça bem assim. Vamos usar um pouco de cor maçante para este porque ele está olhando todo o mesmo. Estou usando cor para esta variação. Talvez “50 por cento” e eu vou para o pouco de cor cinza. “ Cinza escuro” assim. Está ótimo agora. Podemos adicionar alguma imagem aqui e no lado esquerdo vamos adicionar algumas citações. Ele terminará a primeira iteração de design. Vamos pegar a imagem. Eu tenho um monte de coleção de imagens. Vamos usar qualquer um deles daqui, em vez de baixar e perder tempo. Talvez use esse garoto aqui com uma bola de futebol. Vou “arrastar” para aqui e “dimensionar” assim. Vou usar estes três módulos aqui. Eu colei aqui assim. Se você quer que esta imagem esteja exatamente neste módulo, então nós vamos gravar isso dentro desta caixa aqui. Crie uma caixa delimitadora e vamos “Clip” esta imagem, pressione “Alt” e “Clipe”. É assim que vamos cortar essa imagem assim. Vamos “Ocultar” nossos módulos e tudo para ver como isso vai parecer. É assim que está parecendo agora. Olhando muito bem, os espaços são ótimos e tudo parece bem. Vamos adicionar algumas citações aqui. Vou usar minha grade de novo e “Arrastar” daqui assim. Eu vou usar essas três linhas para esta citação, e eu vou usar algum texto aqui pode ser assim. Esta é a citação. “ Copiar” e “Colar” aqui. É muito pequeno. Talvez precisemos de mais mensagens. Faça algo assim. É uma citação longa, estou mudando o texto para equilibrar este design, então não se preocupe agora com isso. Vamos “Remover” as aspas, porque não vamos precisar delas. Talvez precisemos apertá-lo um pouco porque vou usar uma barra azul aqui. Vamos usar estas três filas para esta e eu vou usar a barra azul aqui assim. Dez pixels. Eu vou “mudar” a cor para este azul mais claro. A maioria dessas cores são planas, então não se preocupe se você não entende que cores estou usando. Você pode ver que eu estou usando muito poucas cores. Principalmente cinzentos, negros e azuis. Nada mais. É assim que vou expor esta citação. Se você se lembra, temos a manchete em itálico. Talvez possamos usar a manchete Itálico ou talvez Itálico Claro. Acho que “Itálico Luz” está ótimo. É um pouco difícil de ler, então talvez “Regular Itálico” seja bom. Talvez possamos mudar a cor para este azul ou este branco, ou talvez esta cor cinza. I “Módulos Duplos” e essas linhas e você pode ver como isso está olhando. Uma vez que você tenha definido seus elementos de design tentar esconder tudo o resto para ver como ele está olhando ou qual o resultado que ele está recebendo para que você possa mudar a “Cor” de aqui. Eu só mudei para esta cor “acinzentada”. Eu acho que isso é ótimo. Talvez use o mesmo “Gray” aqui como este. Agora você pode ver que é assim que usamos módulos e grade de linha de base para definir nosso design. Vamos criar mais layouts a partir do mesmo design reorganizando nossos módulos ou reorganizando nossos elementos de design. Este é o primeiro elemento. Você pode ver aqui como eu usei todos esses módulos se eu virar a grade assim. Este é o fim do primeiro exercício e você pode ver o quão bom ele está olhando. Se você quiser mudar algumas coisas como mover esta imagem um pouco abaixo porque o nosso texto não está alinhado com esta imagem. Estas são poucas configurações. Você pode ir com esse fim. Selecione esta imagem e este Retângulo e mova-a um pouco para baixo assim e reduza o tamanho do retângulo um pouco para que esta imagem pareça quase paralela ao seu parágrafo. Esconda estas linhas e todos os módulos. Isto é quase perfeito. Este é o primeiro layout. Vamos criar mais alguns layouts na próxima lição. Fique ligado e eu vou fazer muitos desses exercícios. Não se preocupe, você vai ter um monte de coisas boas daqui. Apenas remova esta citação. Está me irritando assim. Fique ligado e vamos para a próxima lição. 24. Crie segundo layout para blog: Agora, nesta lição, nós vamos criar este layout usando apenas esta cor cinza e esta cor vermelha como nossa cor de destaque e também, eu acho que nós vamos substituir a imagem e esta citação lugares um com o outro. Vamos começar e ver o que vamos inventar. Esta é a última parte onde saímos. O que vamos fazer é primeiro, vamos criar outro grupo. Este é o nosso design em segundo lugar, então esse foi o primeiro design. Agora o que vamos fazer é mudar algumas coisas por aqui. Primeiro é que eu vou usar nem todas as maiúsculas, mas eu vou usar, domingo, você gosta disso, e selecionar este th, e ir para este painel de texto e usar este subscript ou sobrescrito, seja lá o que for chamado . Também vamos mudar o tamanho para 20 pixels como este. Também vamos usar itálico aqui. Isso vai ser um monte de mudança no corretor, e poucas coisas. Agora não vamos destacar este. Vamos usar uma cor acinzentada para este 147 e usar, gosta, a mesma cor como esta. Acho que é a mesma coisa, não. O que vamos fazer é usar 44 pixels para este top, use negrito. O que estamos tentando fazer é que estamos tentando igualar a largura deste e com o segundo. Você pode usar esse valor de rastreamento. Podemos definir 30, 50, 150. Acho que 150 um pouco mais. Então 100 está parecendo bom, 147 gostos. Se você quiser mudar a largura de curtidas, você pode usar zero aqui assim. Isto está tudo pronto. Talvez possamos reduzir a altura da linha. Este é o 30 e podemos mudá-lo para 45. Acho que não parece muito bom, talvez possamos usar 30 em vez disso. Também mude esta cor para esta. Então eles parecem o mesmo embora. Agora, o próximo passo é, vamos substituir essa imagem por outra imagem de uma mulher ou menina sorridente. Vou selecionar esta imagem e vamos mover a imagem e o recipiente para aqui assim. Vamos ligar a nossa grelha. Agora eu estou ignorando minhas margens e eu vou definir o tamanho disso para todos esses três módulos aqui ou linhas, eu acho que quatro linhas. Vamos ver quantos são estes; um, dois, três, quatro, cinco, seis, seis fileiras, estou definindo o tamanho e tudo por aqui. Vamos movê-lo um pouco para baixo, igual a este texto aqui. Esta é a nossa citação, então vamos mudar tudo para cá. Agora, para a citação, vamos usar esta área, estas duas colunas e estas três linhas. É assim que organizo tudo por aqui. Vamos copiar esta imagem. Este aqui, arraste-o até aqui, e copie-o assim. Vamos arrastá-lo até aqui, remover este, e selecionar este. Está aqui, mova-o para a esquerda. Em algum momento você não pode ver a imagem quando você colá-la porque ela está fora do contêiner, você cortou nela. Vou pressionar “Shift e Alt” para redimensionar esta imagem assim. Vamos esconder a grade, é quase perfeita, mas aqui estávamos usando outra coisa. Então vamos mudar o estilo. Use algumas aspas aqui. É assim que vamos usar algumas aspas com itálico, e vamos usar um tamanho maior, que era o tamanho 74 pixels. Então eu vou usar 74 pixels. Adicione as aspas assim. Vamos girá-lo. Eu pressionei “Shift” para girá-lo em algum ângulo específico. Vamos colocá-lo aqui assim. Vamos torná-lo um pouco mais perto um do outro, assim. Agora, sobrou mais alguma coisa aqui? Então talvez possamos mudar este texto para itálico. Só uma mudança de estilo, talvez. Nós também podemos expandi-lo um pouco, 15, parece bom. Agora, há mais alguma coisa que precisamos mudar? Vamos adicionar mais alguns detalhes. Havia uma linha depois deste texto aqui. Vamos criar uma linha, linha fina, ferramenta de linha. Vou destacar esta área, esta é a nossa linha. Talvez devesse ser desta cor. Vamos movê-lo para a esquerda e torná-lo dois pixels de altura, assim. Também vamos usar alguma outra cor, destaque este texto. Vamos usar esta cor para realçar esta área apenas para equilibrá-la. Também vamos usar uma cor maçante para esta área. Talvez este 7a7d80. Também vou usar dois parágrafos separados aqui porque está parecendo muito estranho. Vamos criar dois parágrafos dando algum espaço aqui, assim, eu pressionei “1" entrar aqui e nós temos dois parágrafos agora. Além disso, se você quiser ser mais específico, você pode usar algo assim, mas eu acho que isso também é bom. Agora, podemos fazer um pouco mais aqui e usar 20 aqui assim. Também neste texto, use 15 ou talvez 20 como este. Remova uma linha para que tenhamos um bom equilíbrio do nosso design. Talvez possamos usar alguma cor aqui para representar nosso link assim. Ele está olhando grande e eu acho que isso resume nossa segunda iteração neste design. Também acho que há uma fila aqui. Acho que nos esquecemos daqui. Vamos colocar um bloco de linha aqui assim. Vamos usá-lo assim, dentro da nossa rede. Isso parece ótimo e eu acho que isso resume o segundo design. Esta é a iteração que eu inventei. Acho que é isso e devemos passar para a próxima lição. 25. Como refinar o segundo design de layout: Agora, deixe-me mostrar que eu fiz alguns ajustes neste projeto no final porque eu não estava me sentindo bem sobre esta área aqui. Então o que eu fiz foi mover isso um pouco abaixo, e movi esta linha nesta linha de base. De modo que esta linha, colocou-a na nossa linha de base. Além disso, você pode ver aqui, eu usei essas aspas entre essas duas linhas de base, e também movi um pouco para dentro desta calha. Se você quiser movê-lo mais, você pode movê-lo também como aqui, assim. Acho que precisamos mudar esse texto aqui. Vamos usar Source Sans Pro Regular para isso, e vamos usar itálico basicamente. Estas são algumas configurações ou mudanças que eu fiz para este projeto porque eu não estava me sentindo muito bem com esta área. Além disso, se você quiser voltar ao normal, você pode voltar ao normal, e talvez possamos usar mais espaço entre letras diferentes e ter algo semelhante a isso. Além disso, se você quiser, você pode mudar sua cor e torná-lo um pouco mais escuro como fizemos em nosso primeiro exercício. Vamos ver e esconder nossos módulos e tudo mais. Veja como vai parecer. Parece mais equilibrado agora porque eu movi esta parte, esta aspas um pouco abaixo porque precisamos de uma boa quantidade de espaço entre estes dois parágrafos e esta parte. É quase perfeito. Eu acho que esta linha está recebendo muita atenção, então se você quiser, você pode mudar sua cor para talvez este vermelho ou algo cinza, eu acho, que também parece bom. Talvez este, e mudar a cor das aspas para vermelho só para chamar a atenção. Eu acho que isso parece melhor, e é bom e melhor em vez do design antes. Além disso, eu acho que está olhando muito maçante, então eu vou usar um pouco de cor cinza escuro para mostrar esta data. Agora, por que eu usei uma cor um pouco mais escura porque legibilidade é nossa primeira prioridade. Então use uma cor cinza um pouco mais escura. Foi assim que eu ajustei o último design e mudei e mudei algumas coisas. Sempre certifique-se de que o design é uma coisa progressiva. Se você projetar algo uma vez, você precisa abri-lo e refiná-lo novamente e novamente, até o momento em que você encontrar o equilíbrio perfeito, e cores perfeitas, eo senso perfeito. Isto é tudo sobre como eu refinei a segunda parte. Vamos passar para a terceira parte. 26. Última layout para design de blogs: Agora, nesta terceira lição, vamos criar esta e também esta. Estes não são diferentes da segunda parte, você pode ver isso é um pouco diferente, este estilo favorito top. Além disso, eu usei apenas dois blocos para esta imagem, não toda a área aqui, todo resto é quase o mesmo. Mudei as cores de vermelho para azul aqui e, em seguida, também vamos criar este layout. Aqui, temos coisas diferentes aqui, vou explicá-las, como se tivéssemos essa cor amarelada e essa cor roxa aqui. Vamos começar e criar esses dois layouts nesta parte de design C. Este é o lugar onde nós saímos, então vamos manter tudo igual. Aqui, nós temos a imagem, e eu vou pegar alguma outra imagem, pode ser esta aqui. Acho que tivemos este, arrastá-lo até aqui e vamos usá-lo aqui assim. Além disso, você pode usar toda essa área como esta para imagem, este também é outro layout. Agora, vou usar esta imagem e prendê-la dentro daquele bloco. Agora, o que vamos fazer é destacar nossos módulos. Aqui, nós temos nossos módulos e eu vou usar e dimensioná-lo para esta área e nós vamos deixar toda essa área aqui. Só para ter certeza de que vamos dimensionar essa garota para que possamos ver seu cabelo e algumas outras coisas como suas roupas, talvez assim. Está parecendo melhor agora. Podemos esconder outras coisas, acho que isso parece estranho para mim. Talvez eu vou usar um pouco de cor azul da camisa dela, esta cor azul roxo e torná-lo um pouco mais saturado assim. Para os links, e eu vou usar o mesmo cinza. Qual é a cor deste texto? É 7a7d80. Agora, nós temos um conjunto de nossas cores aqui, nós também podemos provar cores de sua camisa. Talvez outra vez, use esta cor, 147 gostos, talvez possamos usar esta cor aqui, talvez a cor do cabelo dela ou esta cor roxa. Eu acho que é muito escuro, então talvez muito afiado, então deixe assim. Vamos esconder nossos módulos. Foi assim que acabei de mudar este design. Talvez precisemos mudar essa também. Eu posso usar uma cor muito escura aqui para chamar a atenção sobre esta cor afiada aqui, para chamar a atenção para o título. Vou usar minha ferramenta de caneta para adicionar um ponto de ancoragem aqui. “ Pressione A” e mude este ponto de ancoragem. O que está acontecendo? Você esticar ferramenta de seleção. Isto é estranho. Eu acho que eu deveria usar A e, em seguida, ferramenta Caneta para adicionar algum ponto de ancoragem aqui. Como este. Vamos ampliar e clicar nela com esta ferramenta de ponto de conversão uma vez para torná-la aresta afiada, não a arredondada. Esta é a nossa forma principal, então eu mudei essa forma e tudo mais. Está parecendo bom. Talvez eu precise usar o Lato aqui. Lato Negrito. Vamos ver como fica. Está parecendo bom. Foi assim que mudei tudo por aqui. Este é outro projeto. Vamos copiá-lo e salvá-lo como design 3.1. Agora, vamos em frente e vamos criar o design 3.2. Vamos primeiro salvá-lo com o outro nome, 3.2. Agora, o que fizemos aqui é que vamos expandir esta área. Vamos deletar essa garota aqui. Expanda este retângulo para o tamanho normal assim. Ok, então pegue um pouco de cor aqui, talvez este aqui, qualquer cor que você gosta. Deve ser uma cor um pouco mais nítida. Onde está o nosso encontro? Date, aqui está, trazê-lo para o topo desta camada, mudar a cor para branco e nós fizemos quase todo o trabalho aqui. Adicionamos alguma coisa aqui? - Não. Então vamos removê-lo. É apenas criar mais nuance. Queremos um sentimento mais aberto e vazio. Este é o nosso encontro e vamos destacar a nossa grelha. Vamos criar outro retângulo aqui usando esta área e movê-lo abaixo deste 147 gostos, vamos mudar a cor para este, ou talvez este, e mudar sua cor deste para talvez este preto ou Talvez branco. Vamos esconder isso e você pode ver que nosso design é quase perfeito, então vamos mudar as cores para isso. Nossa nova cor, cor de destaque. Talvez possamos usar essa cor acinzentada. Isso parece ótimo e se você quiser usar roxo aqui, você pode usar roxo, azul ou roxo ou este roxo. Isso está ótimo, roxo e esta cor cremosa, eles estão olhando ótimo. Se você realmente quiser, você pode usar este título e movê-lo para cá. Ele também irá criar outro cabeçalho layout aqui nesta área, e datas e gostos aqui e talvez mover o texto acima. Há muitas variações que você pode fazer com esses projetos. Nós temos essa grade e módulos configurados. Só precisamos mudar as partes legais e equilibrar o design. Você pode usá-los com o texto em negrito e talvez cores. É assim que usamos cores e texto em negrito, layout e grade modular para criar layouts diferentes. Isso resume meu último exercício, eu vou salvá-lo, ele já está salvo. Eu te dei um desafio que cria um layout como este. Este é o último. Use algumas imagens deste picjumbo.com, use um texto de Real Ipsum, Google Fonts, selecione quaisquer duas fontes do Google que você gosta. Use uma escala modular, use seu próprio fator de escala, mas mantenha-o consistente em seus projetos e crie algo incrível e mostre para mim. Você pode postá-lo nas respostas de perguntas. Dê-me o link e eu vou compartilhar com vocês minhas idéias sobre como melhorá-lo ou como mudá-lo ou algo assim. Vejo que há algo assim muitas vezes, então não se importe. Vou criar mais exercícios. Mas isso resume esse exercício de design modular. Este é o último. Eu acho que você pode ter um monte de boas habilidades em espaçamento de elementos e como usar esta topografia de forma eficaz com esta altura de linha e harmonia vertical e como usar linhas e colunas e grades modulares. Vamos passar para a próxima lição. 27. Quantas fontes selecionar?: Quando se trata de selecionar fontes, a pergunta mais difícil, a primeira é quantas fontes selecionar? Eu vi muitos designers e desenvolvedores novatos, eles cometem muitos erros. Mesmo eu vi poucos sites e fiz ajustes para eles, onde os codificadores selecionaram talvez cinco ou seis fontes diferentes do Google, e quando se trata de carregar, ele pode realmente impactar ou diminuir o seu site. Portanto, sempre tenha em mente que você não deve selecionar muitas fontes. Você só deve ir com o máximo de dois ou três, se você realmente sabe como combiná-los. Eu ainda insisto em apenas selecionar duas fontes. Eles são quase suficientes para todo o seu site. Além disso, certifique-se de que você não seleciona muitos estilos de fontes individuais. Novamente, isso afetará o tempo de carregamento e o tamanho da página. Agora, mantenha em cheque o tamanho da fonte, quanto tamanho de carregamento em kilobytes, vou mostrar-lhe apenas em alguns momentos no Google Fonts. Agora, a segunda etapa é, depois de selecionar as fontes, você selecionou uma ou duas fontes, atribuir-lhes funções. Já falámos de papéis. Escolha uma fonte para cabeçalhos, subtítulos e/ou sloglines, e tudo e uma fonte para o corpo do texto, porque a fonte do texto do corpo vai ser lida muito e deve ser facilmente legível e visível. Portanto, certifique-se de que a fonte do corpo é legível e que o nível de legibilidade é bom. Aqui está um exemplo de escolha de fontes para exibição e corpo. Você pode ver aqui eu estou escolhendo uma fonte para exibição. Agora, no lado esquerdo, você pode ver que eu usei uma fonte muito alta, uma fonte all caps, como Bebas Neue Font e você pode ver que texto ou corpo cópia é legível e muito simples Sensorial Font. Agora há mais um truque para isso. Se você estiver selecionando fonte para o seu cabeçalho ou texto de exibição, vamos chamá-lo de título em termos mais simples, então basta manter no título. Então um para ir, um para o corpo. Agora, quando você está tentando selecionar fonte para o seu cabeçalho, você pode ser um pouco criativo porque cabeçalho vai ser um pouco maior do que o corpo do texto. Então, mesmo que seja uma fonte muito rabiscada, ou uma fonte muito alta, ou algo assim, eles podem ser facilmente lidos por causa de seu tamanho, mas sobre a fonte do corpo, ele deve ser legível, seu x- altura deve ser bom, e pode ser facilmente lido em grande quantidade, por exemplo, um grande parágrafo, tente ver se ele vai ser facilmente lido ou não. Portanto, estas são algumas considerações que você precisa ter em mente. Deixe-me mostrar-lhe o Google Fonts e como vamos interpretar a nossa velocidade de carregamento. Portanto, basta ter em mente que quando você estiver selecionando, por exemplo, se eu selecionar esta fonte como esta, uma família selecionada e a próxima, vamos selecionar esta fonte Sans Pro com esta. Então eu vou selecionar Source Sans Pro e acima de um. Duas famílias foram selecionadas, então você pode ver que seu tempo de carregamento é rápido aqui no topo. Agora, se eu tentar personalizá-lo e eu tentar selecionar alguns mais, onde é como, eu quero negrito, você pode ver o tempo de carregamento é moderado. Além disso, se eu for para este Secular Font, ele só tem um rosto, então ele tem apenas um estilo, que é normal 400, que é o seu peso. Talvez possamos chegar a este itálico regular, eu acho que sim. O tempo de carregamento é moderado. Agora, você pode baixá-lo daqui assim e instalá-lo em seu PC ou Mac para usá-los em seus designs. Você pode usar essas fontes do céu. Eu nunca usei isso antes. Se você quiser experimentar, você pode tentar. Esta é uma coisa que você precisa ter em mente ao selecionar sua fonte. Se você estiver selecionando muitas fontes, se eu for para isso como mais de três ou quatro, cinco, seis estilos, você pode ver que ele vai ser lento, então certifique-se de que seu tempo de carregamento é rápido ou moderado. Não vá mais do que três estilos. Eu acho que dois estilos, como regular e regular Itálico são bons para o nosso corpo de texto e este é bom para os nossos títulos. Então, isso é tudo sobre como selecionar fontes. Vamos passar para a próxima lição. 28. Moods/de de tipo/de Moods/Voices: Nesta palestra, vamos treinar seu instinto sobre as fontes e topografia, o que a fonte está dizendo, o que seu intestino está ouvindo, e seu sentimento sobre essa fonte, vamos aumentar essa escala e eu vou dizer você como se acostumar com isso. Então, cada tipo de letra tem diferentes vozes ou humores. Se você está projetando para alguns talvez porto ou produto orgânico, você vai selecionar tipo de letra particular que está conduzindo o humor dessa marca ou algo parecido com isso. Então, primeiro, você precisa encontrar o humor se o humor desta fonte está relacionado ao seu projeto, é bom para o seu site de negócios ou sua revista de moda ou é elegante? É divertido? É bom para ler? Então, estas são situações diferentes em que você precisa ver que humor diferentes tipos de letra têm. Agora, vou mostrar-lhes diferentes humores, selecionei aleatoriamente algumas fontes da minha coleção e mostrarei como se acostumar com elas ou você pode dizer, treinar seus olhos para o humor das fontes. Então, vamos começar. O primeiro é um tema divertido. Agora, você pode ver todas essas fontes que eu selecionei, alguns são splash divertido para seus filhos, comer saudável, se divertir com azeite. Eles não são muito nervosos, então eles não têm bordas muito afiadas ou algo assim. Então este é um tema um pouco divertido, um pouco relaxado. parte superior é uma fonte Sans Serif e a segunda é uma fonte pouco Slab Serif, mas seu canto é um pouco arredondado. Então, na parte inferior, temos novamente fonte Sans Serif e seus cantos também são redondos. Mesmo você pode ver na borda da escola, de volta à escola, escola palavras, ele tem um toque muito curvilíneo para ele no final. Você precisa ver algumas coisas, você precisa escrevê-lo em alguma cor que é divertido, então este é o primeiro passo e tentar, eu tento fontes diferentes, se você gosta de um, em seguida, passar para o próximo. Não acho que esteja combinando com o meu tema, então vá para o próximo. Não há designers de tipografia, talvez haja poucos especialistas que são muito especialistas neste exercício de correspondência de tipografia. Mas para mim, normalmente eu tento continuar a iterar diferentes fontes até o momento em que eu encontrar o que parece perfeito para o meu tema. O próximo é o tema do amor. Você pode ver que eu selecionei algumas fontes diferentes aqui, poucas são fontes muito curvas e scripty, fontes escritas à mão, e uma é Slab Serif e a parte superior é uma fonte de transição pouco que têm um estilo muito distinto. Então tudo isso depende da sua situação. Se você está escrevendo para uma cerimônia de casamento ou algo assim, você pode ir para a fonte do script, talvez assim como eu tenho em John e Jenna vão se casar. Se você está em um tema de amor feliz, você pode ir para a última opção que é tudo pode ser alcançado com amor, por isso também está mostrando alguma esperança para ele. Então, estes são temas diferentes. Se você ver o tema sensação mais doce que eu tenho, amor é a sensação mais doce que eu estou usando, ciano ou cor azul esverdeado para ele e você pode ver mesmo que é uma fonte muito magro Slab Serif, mas está olhando muito agradável. O topo é algum tema como perder o amor ou talvez tê-lo para sempre ou algo assim que está relacionado com o tempo ou algo assim. Então eu o usei, um tema onde algumas das partes das minhas fontes são removidas, então isso talvez esteja relacionado com o tempo. Assim como temos memórias amorosas ou algo assim. Então isso vem com a prática, você precisa iterar um monte de fontes, escrever a linha, você quer o tema, por exemplo, eu tenho esse amor é a sensação mais doce no meu coração. Então esta é a linha do tema Escreva a linha do tema e, em seguida, continue iterando diferentes fontes um por um, até o momento em que você encontrar o melhor. Aqui está o tema da saúde, primeiro é doces doces, você pode ver que selecionados para crianças e doces, é fonte muito diferente, tem grandes lajes, toque muito engraçado. Então, temos cupcakes são a sensação mais doce para as crianças. Você pode ver que esta é a mesma fonte que eu usei no último exercício que foi tema de amor. Agora, aqui temos novamente pouco a doce, então é pouco a doçura, então podemos usá-lo com cupcakes também, então temos frutas e vegetais são mais saudáveis do que junk food. Agora, frutas e vegetais, esta é uma fonte muito larga. Ele tem alguma integridade ou você pode dizer algum peso em mostrar-lhe que esta coisa é boa. Então é descida, eu posso dizer ou muito arredondado onde eu tenho algumas formas muito regulares que está relacionado com, você pode dizer geométrica Sans Serif fonte, geometria perfeita, e parece bom sobre este tema. Então temos todos os doces naturais, orgânicos, livres de OGM para crianças saudáveis. Embora tenha cantos muito nervosos, como você pode dizer que k e h e tudo mais. Mas os ângulos são muito diferentes. Então, parece uma fonte de estilo infantil, então ele pode realmente funcionar bem para orgânicos naturais e algo parecido com isso. Então temos puro, orgânico, sem OGM tônico de saúde 500 ml, você pode ver na parte inferior. Além disso, tenha em mente que estou usando cores com mix com meu tema. Então, o pop up melhor do que apenas a cor cinza ou preta simples. Aqui temos novamente tema orgânico, mas é diferente, talvez seja um tônico para adultos ou algo assim, então eu usei uma fonte. Novamente, tem formas muito arredondadas, é Sans Serif e está olhando bem com este tema. Em seguida, temos tecnologia tema drone versão rover este 2.5 grande para adolescentes, você pode ver a diferença entre x-altura e altura de capital é grande, isso está olhando bom para sites de tecnologia, talvez técnicos modernos, algo assim. Para crianças ou talvez adolescentes, então temos outro, como a tecnologia moderna é perigosa para crianças, me diz. Este é apenas o nosso rumo divertido. Por isso, é também algumas geométricas Sans Serif com formas muito arredondadas, não rodadas perfeitas, mas formas arredondadas tipo oval. Então temos na parte inferior, estamos estúdio de design mais inovador em Nova York. Este é um pouco sério e geométrico Sans Serif e está relacionado com estúdio de design, então talvez queiramos dizer alguma seriedade com nossa inovação de trabalho, algo assim, então eu uso essa fonte talvez, você pode escolher outra fonte, Então isso depende de cada designer e seu gosto, mas isso é apenas para treinar seus olhos. Agora, temos o tema dos negócios. O negócio está relacionado com a seriedade ou talvez o poder ou algo assim, então essas fontes, mesmo elas estão parecendo muito parecidas umas com as outras, elas são Sans Serif. Eles têm tema muito sério, eles não estão mostrando qualquer grande arredondamento, você pode ver por aqui as bordas são totalmente planas. Eu vi um monte de novos designers que estão usando tipo muito moderno de fontes com temas de negócios, então este é apenas o seu julgamento, isso é apenas para treinar seu olho se você quiser. Vá com algum tipo moderno de fonte, você pode ir com ele, isso não é um problema. Este é o tema da moda, algumas fontes de aparência elegante ou tipos de letra aqui, algumas são muito finas e maçantes, assim como modelos, supermodelos. Embora eu não goste pessoalmente de modelos muito magros, eles parecem paus e talvez roupas penduradas nas varas, então essa é a minha opinião, não leve isso para o lado pessoal. Agora, o segundo é um pouco clássico, talvez relógios de pulso, então eu estou usando uma fonte humanista, você pode ver o e nos relógios e o mais recente, você pode ver e é muito inclinado, tem uma inclinação muito inclinada. Então, é basicamente uma fonte humanista e está relacionada com o tipo antigo clássico, então nós usamos este. Então, temos fonte muito geométrica na parte inferior, que é design de moda não é apenas sobre roupas, é sobre você. Está relacionado com alguma geometria, é muito geométrica, muito fina e fina, os pontos são o que você pode ver, os pontos nos olhos são verticais e como retângulos finos. Então é assim que escolho fontes diferentes para temas diferentes. Vamos ver mais alguns exemplos para tema da moda, você pode ver novamente, Eu estou usando fontes modernas Bodoni, você pode ter visto em um monte de sites. Fontes Bodoni são fontes modernas como esta, designers de moda hoje em dia são idiotas. Eles não são idiotas, é só o que eu penso às vezes. Super modelos são muito finos como vassouras, sim, isso é verdade. Vivaldi 2.0, o mais recente em relógios de pulso clássicos à venda. Então eu tento usar fontes diferentes desta vez, maioria deles são Bodoni, eles têm uma alteração muito grossa e fina de traços. Então é assim que usamos fontes Bodoni em temas de moda. Agora, temos tema esportivo. Então você pode ver aqui eu tenho quatro linhas de tema diferentes. Você pode correr como uma chita? É muito magro, inclinado para correr como uma chita, por isso está me mostrando velocidade quando é itálico. Então temos 69 flexões para deixar sua barriga magra hoje, por isso é muito difícil exercício, flexões. Acho que não posso ir mais do que 10 na minha condição atual. Agora, então eu estou usando uma fonte texturizada muito dura ou muito dura neste. Então temos, se um elefante pode ficar magro, você também pode. Agora, você pode ver como eu usei [inaudível] nesta linha para mostrar meu tema, é um tema divertido, mas você pode ver se um elefante é ousado e então magro é um pouco mais magro. Então foi assim que usei pesos diferentes para transmitir minha mensagem. Então, temos Fantasy Football está aqui. Isto é um anúncio. Por isso, está em letras muito grossas e negrito. Eu vi essa fonte usada no anúncio do Yahoo no yahoo.com, então eu só tentei este aqui. 29. Efeito da cor no clima de tipo (voz) (de voice): Agora a próxima parada é o efeito da cor em tipos de letra. Agora, você pode ver na lição anterior, Eu mostrei diferentes modos de tipografia. Então a cor tem um efeito de criação no modo de fonte. Se você estiver usando uma cor que é muito diferente do seu tema, ele pode realmente mudar ou alterar seu humor ou voz. Você pode ver, você pode correr como uma chita? Estou usando cores de chita e um pouco de cor marrom que está relacionado ao solo, talvez areia, ou algo assim. Então você pode ver na próxima linha, 69 flexões, eu estou usando cor cinza-preta, que está relacionada à resistência ou algo semelhante. Então, na linha de elefante, eu estou usando cor, que está relacionada com elefante e slim é os principais pontos focais, então eu estou usando cor vermelha que você pode ficar magro. A fantasia está relacionada à cor roxa, é mágica, é espiritual. Ou algo assim, então eu estou usando cor roxa para futebol de fantasia está aqui. Então, quando você estiver projetando ou escolhendo o tipo de letra, certifique-se de escolher a cor certa para a equipe certa, e não coloque muito nessas cores. Se você já estiver usando uma única cor para seus cabeçalhos, use-os em seu tipo de letra para títulos. Se você tiver outra cor para o corpo do texto, use isso em seus textos corporais. Então, não conserte sua mente, tente selecionar duas cores diferentes, talvez você tenha uma cor diferente para o seu subtítulo ou slogan, e uma cor diferente para o seu cabeçalho, então algo assim. Deixe-me mostrar-lhe alguns exemplos do meu trabalho onde eu usei esta cor. Você pode ver aqui sabor mentol. Eu estou usando a cor mentol para este e você pode ver aqui nós temos três sabor tradicional de tabaco onde eu estou usando cor marrom para este sabor de tabaco. Além disso, você pode ver que estas caixas também são da mesma cor que eu estou usando aqui. Você pode ver aqui eu tenho cabeçalho, em seguida, um subtítulo, em seguida, estes são títulos de seção, e nós temos dois recursos como este neste produto. Então este é um exemplo de usar cores com seu tipo de letra. Vamos ver se consigo encontrar outro, outro exemplo aqui. Aqui temos outro exemplo, você pode ver que estou usando três cores aqui para diferentes ícones à esquerda, no meio e no lado direito. Estou usando a mesma cor para cada passo, como para este, nosso passo número 1, 2, 3. É assim que estou usando duas cores. Então, novamente, eu estou usando aqui duas cores para mostrar algum interesse como, vamos ajudá-lo a adquirir, e então o número para chamar é em cores diferentes apenas para enfatizar isso. Agora você pode ver aqui eu estou usando novamente duas cores, uma é para o título e a segunda é um pouco de cor acinzentada porque eu não quero que ele seja muito proeminente. Novamente, aqui estou usando a classificação A+ com Better Business Bureau em vermelho porque eu queria destacá-lo ou