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

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 nos