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 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 torná-lo mais poderoso, talvez parecer mais poderoso. Então é assim que estou usando cores diferentes em diferentes tipos de letra. Então isso é tudo sobre como usar cores para diferentes tipos de letra. Então vamos passar para a próxima lição. 30. Introdução à emissão de fontes: Aqui está uma breve introdução sobre emparelhamentos de fontes, então apenas para limpar sua mente de algumas suposições ou alguns pensamentos sobre como emparelhar fontes. Em primeiro lugar, não há regras rígidas para emparelhar fontes, então você precisa treinar seus olhos e entranhas para isso. Tente desenvolver seu instinto sentindo que, ok, essas duas combinações parecem horríveis homem, é feio ou algo assim. Essas duas fontes estão ótimas juntas. É assim que você treina seus olhos ou intestinos, mas vem com o tempo. Você continua vendo combinações diferentes de novo e de novo de diferentes designers, e então seus olhos e tripas serão treinados automaticamente. Existem algumas regras básicas. O primeiro é evitar muita semelhança entre fontes. Se houver fontes que são igualmente redondas, e a altura X for a mesma, e as curvas forem as mesmas, elas serão idênticas para instalar [inaudível] tais fontes. Então a segunda regra é procurar contraste. Mesmo na natureza, você pode ver o contraste está em todos os lugares, mesmo em plantas, flores, cores, tudo. Então, duas fontes diferentes que são muito diferentes umas das outras, como Serif e Sans Serif, ou Sab serif e sans serif, eles funcionam muito bem uns com os outros. Agora, a terceira regra é procurar recursos semelhantes. Você precisa procurar a geometria dessa fonte, arredondamento, contadores abertos ou contadores fechados. Se os contadores têm espaço muito grande ou têm muito menos espaço. Em seguida, procure também a altura X. Se partilharem a mesma altura X, podem ficar bem juntos. Vamos ver todas essas regras em detalhes na próxima lição, então não se preocupe com isso. Aqui estão alguns pontos importantes que você precisa ter em mente ao tentar emparelhar fontes. A primeira é a legibilidade. É muito importante. Se você estiver escolhendo texto para seu corpo , a legibilidade é nossa primeira prioridade. O segundo é fonte de exibição ou fonte de cabeçalho. Você pode ser um pouco criativo aqui, você pode selecionar qualquer fonte, talvez muito larga, muito grossa, muito rabiscada, ou algo assim. Agora, o terceiro é a voz do tipo. Você vai aparecer as duas fontes ou selecionar as duas fontes, tendo em mente o tema ou a finalidade do seu design. Se é um design orgânico ou algo relacionado à natureza, então você deve ter em mente que ambos os pares de fontes devem refletir isso. Há última coisa que eu preciso limpar, que é algumas fontes, eles apenas armazenado correspondência em tudo. Então, se você está sentindo que essas fontes não estão correspondendo, então não tente correspondê-las. Algumas fontes eles realmente repelem uns aos outros. O último é que continuam combinando diferentes fontes juntos. Você aprenderá com experimentação. Ninguém te diz esse truque. É o melhor para aprender emparelhamento de tipografia. Abra as fontes, selecione uma para o corpo do texto e, em seguida, iterar para o título do tema. Continue iterando até o momento em que você encontrar o melhor. Então é assim que você treina seu intestino e treina seu olho para combinar diferentes fontes. Esta é uma pequena introdução sobre emparelhamentos de fontes, então vamos começar e ver e mergulhar profundamente nas próximas lições de como emparelhar fontes. 31. Correspondência de x: Vamos dar uma olhada em outra combinação de tipografia ou técnica de emparelhamento, que é chamado de correspondência de altura x. Você já sabe sobre altura x. Se você pode combinar a pequena letra x altura de duas fontes, é provável que elas funcionem muito bem juntas. Vou mostrar-vos algumas fontes que encontrei só para treinar os vossos olhos. Não é magia de vodu ou algo assim. É só trabalho duro. Você precisa combinar um x com outro x de outra fonte. Então continue iterando e selecionando fontes diferentes até o momento em que você obter a altura x quase exatamente correspondida. Assim, você pode facilmente combinar essas fontes. Este é o primeiro. Estas são as fontes no lado direito, Andron e Chaparral Pro Regular. Esta é a primeira combinação. Estou licitando fonte Old Style ou fonte estilo Garamond com Slab Serif. No canto superior esquerdo, você pode ver que ambos os x estão no topo, eles têm a mesma altura. Somente eles diferem no acidente vascular cerebral e nas terminações Serif. Então, os finais Serif, um é estilo Slab Serif, um é estilo antigo. Tem um pouco de lajes curvas no topo. Você pode ver no canto inferior esquerdo, eu combinei com estes. Um é usado para o título. O outro é para o corpo de texto e eles estão bem juntos. Nem sempre parece que eles são realmente perfeitos ou eles estão olhando grande juntos. Às vezes eles podem parecer normais juntos. Eles podem surpreendê-lo : “Isso é incrível. Eles estão ótimos.” Mas, às vezes, quando você está combinando altura x de duas fontes, às vezes elas combinam perfeitamente. Vejamos outro exemplo aqui. Novamente, tenho a mesma altura X. Um é o estilo antigo com Slab Serif e espessura de estilo antigo. Você pode ver que tem uma alternância muito grossa e fina. Neste exemplo, eu estou usando Chaparral Pro com fonte Garamond e você pode ver que eles estão olhando grande juntos. Se você quiser variar, você pode ir em frente e escolher outros estilos como eu usei neste capítulo 25 aqui à esquerda no título. Eu usei itálico aqui. Então é assim que você pode introduzir uma terceira fonte. Use outro estilo da mesma fonte. Se você selecionou Chaparral Pro como seu título, você pode usar Chaparral Pro itálico como sua sub-linha ou subtítulo, ou data, ou mostrando o número do capítulo, ou algo assim. Então este é um truque muito básico. Aqui está outro, transição com estilo antigo. Eles, novamente, compartilham a mesma altura x e você pode ver que um é este Plantagenet Cherokee. Outro é o MM Times, que parece ser um pouco de fonte de transição para mim. Aqui estou usando um de transição como meu título e o outro como meu corpo de texto. Aqui está outro par. Estou usando MM vezes negrito como meu cabeçalho e Inconsolata Medium, que é um pouco de fontes monoespaciais assim como máquinas de escrever na parte inferior. Eles estão ótimos juntos. Eles compartilham a mesma altura x. Um é de transição, outro é Sans-Serif, ou você pode dizer muito de uma fonte monoespacial máquina de escrever em vez de Sans-Serif. Então vamos olhar para outro exemplo. Aqui temos um ótimo jogo. Eu não sei, talvez você se sinta de outra forma. Estou me sentindo assim. Isto é da mesma fonte ou da mesma família datilógrafa, Droid Sans e Droid Serif. Novamente, a altura x é a mesma. Apenas o ousado deles é diferente. Um é Slab Serif ou outro é Sans-Serif e eles estão ótimo juntos. Estou usando um estilo itálico para variação. Você aprenderá mais sobre variação na próxima seção. Este é o último exemplo. Eu obtive esse exemplo de pesquisar e achei muito útil. Uma é a Geórgia e outra é a Proxima Nova. Realmente eles ficam ótimos um com o outro, e por quê? Porque a altura do x combina perfeitamente. Assim, você pode ver que nem mesmo um único pixel está para cima ou para baixo. Eles combinam perfeitamente um com o outro. Então eu estou usando Georgia como meu título e Proxima Nova como meu corpo de texto. Então, isso é tudo sobre a correspondência de fontes com altura x semelhantes. Você precisa encontrá-los. Eles não virão à sua porta. Você precisa encontrá-los. Tentei combinações de fontes diferentes. Em seu tempo livre, tente usar essa técnica e tente emparelhar algumas fontes. Então isso é tudo sobre essa técnica de correspondência de altura x. Então vamos passar para a próxima lição. 32. Emparelhando com contraste: Agora vamos falar sobre outra técnica que é chamada de contraste no emparelhamento de fontes. Alguns anos atrás, eu era apenas um novato e iniciante em correspondência de tipografia. Ainda me considero um novato como vocês. O que é contraste no emparelhamento de fontes? O contraste é basicamente de muitos tipos. Pode ser um contraste na espessura de duas fontes, talvez espessura do traço, uma é muito fina e a outra é muito grossa. Também pode ser uma diferença no estilo, talvez porque um é muito arredondado e um é muito ousado e volumoso e sólido, não é muito redondo. Não corrija sua mente que é apenas contraste entre talvez x altura ou algo assim, pode ser contraste em quaisquer características de duas fontes. Agora, você pode ver aqui eu combinei três fontes; Gadugi Regular, Colaborar-Regular, Aleo Regular, e eu mostrei as alturas x de todos esses três. Você pode ver que um é um pouco menor e os outros dois estão quase combinando. Eu vi alguns exemplos na Internet, eu tenho pesquisado em torno de alguns exemplos de onde os designers combinaram três fontes. Agora, a coisa mais comum e o segredo mais comum que eu diria que encontrei é que na maioria das vezes, 90% do tempo, as duas fontes, como aqui temos duas fontes que compartilham a mesma altura x, então uma é Diferente. Na maioria das vezes, os outros dois compartilham a mesma altura x. Então essa é a chave para a correspondência de três tipos de letra diferentes juntos. Portanto, isso também pode nos ajudar a usar contraste em nosso emparelhamento de fontes. Aqui temos três fontes, e dois têm a altura x semelhante. Além disso, um é um pouco mais fino, os dois têm mais espessura. Se você tiver uma fonte mais grossa, você pode usá-la apenas para cabeçalhos. Isto é bom senso. Se você quiser ir com alguns detalhes como esta subseção Internet/Mercado/Últimas Postagens ou slogan ou algo assim, você pode usar outro. Para o corpo do texto, escolha aquele que tem boa altura x e é fácil de ler ou algo parecido com isto. Então é assim que vamos usar contraste no emparelhamento de fontes. Aqui temos outro exemplo. Aqui, novamente, temos três fontes; Garamond, Franklin Gothic, e basicamente Franklin Gothic Medium; estes são dois estilos da mesma fonte. É por isso que estou a mostrar-vos apenas duas alturas X porque estes Franklin Gothic têm a mesma altura X. Então aqui, o que eu fiz é que estou usando Garamond como meu título. Garamond é um pouco mais ousado do que outras fontes Góticas Franklin, então eu o usei para o meu título. Em seguida, no subtexto, Internet/Mercado/Último Post, eu estou usando Franklin Gothic Medium, eu acho, e para o corpo do texto, eu estou usando Franklin Gothic. Então é assim que eu combinei todas essas fontes e elas estão parecendo realmente incríveis. Aqui está outro exemplo em que eu correspondi Garamond, Halifax Light e Georgia, três fontes diferentes, e é difícil combinar três fontes diferentes. Agora, a fonte secreta que eu já disse é que duas fontes com alturas x semelhantes e uma é diferente dessas duas. Então um tem menor altura x, outros dois compartilham a mesma altura x. No que diz respeito ao contraste, eles têm muitas características semelhantes, mas sua espessura e curso são diferentes. Então Halifax Light é usado como um slogan e Garamond é usado como título, e Georgia é usado para corpo de texto. Aqui está outro exemplo de contraste. Aqui estou eu usando Garamond, Garamond Italic e Georgia. Então basicamente duas fontes, Garamond e Georgia. Você pode ver que eles têm contraste aqui, se você olhar para o X aqui à esquerda. Eles têm contraste na altura x. Então, um monte de contraste na altura x, embora suas características sejam muito iguais, um é Old Style, um é Transitional, e ainda estão olhando ótimo. Eles fazem um tema de um poema ou talvez uma história de suspense ou algo assim. Então este é um bom exemplo de contraste usando apenas a nossa altura x e um pouco de contraste entre Estilo Antigo e Transicional. Aqui está outro exemplo correspondente a duas fontes. Novamente, temos fontes Transitional uns com os outros. Só que eles têm diferença de acidente vascular cerebral e estilo um pouco. Um deles, eu acho, é o velho estilo Garamond fonte. Então eles não têm muito contraste, mas ainda assim eles podem fazer um bom par. Plantagenet Cherokee, uma fonte é, e a outra é MMTimes. Do meu ponto de vista, meus sentimentos intestinais é que não é uma combinação muito grande, porque há apenas contraste entre a espessura do curso. Caso contrário, sua altura x é semelhante. Então eles não estão nos dando uma deixa de dizer que eles são um par perfeito. Aqui está outro exemplo. Aqui, temos um bom contraste entre as alturas x, embora as características sejam as mesmas. Ambos se parecem com fontes geométricas. Um é monospace Inconsolata Medium, que é fonte monoespacial e outro é Montserrat Regular, e este realmente cria um par de fontes muito impressionante. Então este é outro exemplo. Aqui, eu usei x-height como meu contraste e também um pouco de espessura do curso. Aqui está outro exemplo de contraste com o uso duas fontes da mesma família que é Droid Sans e Serif. Embora eles compartilhem a mesma altura x, sua diferença de curso e também suas lajes e Sans e Serif é basicamente o contraste. Muitas vezes, Serifs e Sans Serifs, formam um casal incrível. Este é o último exemplo que vou mostrar a vocês. Então não se aborreça com a minha voz chata. Sei que odeia muito a minha voz. Este é Ubuntu e Proxima Nova. Você pode ver que o Ubuntu é muito grosso e um pouco curva em suas pernas de X. Você pode ver também a altura x de ambos é um pouco diferente, mas eles ficam muito bem juntos. Eles podem fazer uma equipe muito boa, relacionada à saúde ou talvez relacionada à tecnologia. Este é o último em contraste, no exemplo de emparelhamento de fontes. Eu acho que você pode ter adquirido um bom conhecimento e talvez um bom sentimento desta sessão. Então vamos passar para a próxima lição. 33. Como citar as fontes em a: Nesta aula, nós vamos aprender outro truque muito básico para combinar a fonte, que é combinar as características de duas fontes diferentes. O que significa recursos? Permitam-me que o explique com alguns exemplos. Porque esta técnica só pode ser aprendida mostrando alguns exemplos. Caso contrário, não é fácil de aprender. Aqui eu tenho, este é um blog stored.org. Eu encontrei este exemplo a partir deste site. Este é Typ.io. Você pode ver aqui que temos uma fonte no cabeçalho. É apenas levou carta dois título. Então temos a fonte de cópia, aqui temos. Se você olhar de perto, até você pensará que essa fonte tem um traço muito grosso. Mas se você olhar para as características como o E, a inclinação de E, e o X, como ele é escrito. Também o I, tudo eles combinam muito com aquela fonte abaixo. A fonte aqui você pode ver se você olhar para a letra Q. Se eu descer um pouco aqui, você pode ver no final, você pode ver que Q, você pode ver que o Q é quase semelhante a este, apenas a diferença de um pouco de traço e estilo, a forma e a colocação, tudo é quase o mesmo. Além disso, se você olhar para A, este é A, e aqui temos A novamente, a inclinação desta área de contador de A é quase a mesma. Então eles têm as mesmas características. Você pode ver por aqui. Se pudermos ampliar um pouco mais, talvez possamos ver isso facilmente. Você pode ver a semelhança entre A's, também o T, o final deste T. Você pode ver aqui. Este é quase o mesmo como este. É também tem o mesmo final. Estes são poucos recursos que você estará procurando. Eles combinaram essas fontes com recursos semelhantes. Embora eu ainda acredite que você deve treinar seu instinto ou olhos para combinar com as fontes. Esses recursos podem ser sentidos. Você não pode olhá-los assim e analisá-los matematicamente. Vamos ver outro exemplo. Aqui temos outro exemplo. Esta é uma fonte. É muito ousado. Acho que é circular, o nome da fonte é circular. Então temos aqui outra fonte no parágrafo que é texto frito. Agora, chegando às semelhanças, vamos ampliar. Se você ver ambas as fontes, algumas das curvas, eles têm assim, é quase o mesmo. Então temos “T”. Você pode ver o topo do T, como está se encontrando aqui nesta área. É quase o mesmo com este T. Estas são poucas características que são semelhantes nestas duas fontes. Parece muito próximo um do outro no que diz respeito a algumas das curvas e algumas características. Este é outro exemplo, então temos, vejamos, mais alguns exemplos. Agora, se você olhar para os espécimes do Google Fonts em que o Google Fonts compartilham algum emparelhamento de fontes, vamos para o novo emparelhamento do Google. Acho que é melhor. Talvez possamos dar uma olhada aqui também, então não há problema. Agora, se você olhar para este primeiro emparelhamento, eles sugeriram Open Sans e Roboto, você pode ver que há muita semelhança entre esses dois. Ambos são Sans Serif, você pode olhar para os A's no parágrafo, e eles são quase o mesmo robô é um pouco magro ou o O, O's do robô são um pouco, você pode ver que tem menos contador e um pouco vertical em vez deste contador aberto Sans, temos mais contadores nos O's. Ainda assim eles parecem muito semelhantes, embora eu ache que eles compartilham muita semelhança, mas ainda assim eles mostraram isso como um par. Então eu gosto deste Open Sans e Source Sans Pro, eles também compartilham um monte de semelhanças como as curvas que você pode ver N e A é um N e também o O's. Eles são muito parecidos. Do meu ponto de vista, eles fazem um par muito bom. Última parada é que este site, é typeconnection.com e eu tentei emparelhar duas fontes com personalidades semelhantes. Uma fonte é este Adobe Garamond Pro, e a segunda é Chaparral Pro. Ele também mostra alguns dos físicos de como uma vala, guarnição, sólido, durável, ágil com formas definidas. Não sabemos muito sobre isso. Não sou um perito. Mas o que quero mostrar a vocês é este gráfico correspondente aqui. É muito interativo e muito agradável. Agora eu cliquei neste Garamond Pro e você pode ver este destacado é fonte Adobe Garamond Pro. Você pode ver o poço no fundo, muito leve, que é basicamente Chaparral Pro. Você pode ver que os contadores são quase os mesmos e, portanto, laboratórios são serifas que compartilham o mesmo comprimento. Embora estes Adobe Garamond Pro têm lajes arredondadas, desculpe, serifas eles têm extremidades arredondadas, eles não são afiados ou nervosos. Mas a forma ou os ângulos são quase os mesmos. Você pode ver o L aqui, está quase indo no mesmo ângulo e direção. Além disso, você pode ver aqui que mostra serifas de cabeça em forma de cunha. Eles são em forma de cunha para ambas as fontes. Então temos pequenos contadores. Então temos um atraso varrendo. Não sei o que é, mas eles mostraram aqui. Agora, barra transversal horizontal. Temos barra transversal horizontal muito reta. Então temos transições suaves para serifas dos pés. Transição suave significa que há ângulo muito suave para o caule para este serif pé. Isto é o que eles estão mostrando. Agora mude para este Chaparral Pro. Agora, Chaparral Pro está na frente, o que é um pouco escuro. Você pode ver que os finais são um pouco grossos e slabish. Mas ainda é muito semelhante ao Adobe Garamond Pro ou alguns recursos, as ações nos mesmos recursos. Como você pode ver, O tem pequenos contadores. Ambos têm contadores pequenos do que têm modulação ligeira. Eu acho que é isso que eles estão tentando dizer sobre o ângulo. Em seguida, serifas de cabeça em forma de cunha. Este é o mesmo, então serifas de laje sem suporte, é diferente da outra fonte. Tem lajes em vez de serifas curvas aqui como este Adobe Garamond Pro. Mas este é um site muito bom se você quiser tentar conectar diferentes fontes com semelhanças, você deve verificar este site. Vou compartilhar todos os links desses sites nos recursos. Você pode experimentá-los, jogar este jogo. É muito agradável e muito legal. Ele irá melhorar o seu olho para correspondência de fontes. Além disso, quero mostrar-vos mais um exemplo. Bebas Neue e Din Teia Condensada. A primeira coisa quando olho para ambas as fontes é que elas são altas. Este é um pouco alto. Também esta é uma fonte muito alta. Embora seja grosso, mas parece um pouco magro e alto. O construído é alto, o X-altura é bom. É por isso que eles parecem muito semelhantes porque isso também é grosso e alto. Isso também é grosso e alto. Esta é a única semelhança que eu posso ver porque agora o Bebas Neue Font está em todas as maiúsculas e eu acho que ele está disponível apenas em todas as maiúsculas. Estes são alguns exemplos que eu queria compartilhar com vocês, Adobe Garamond Pro, Chaparral Pro e alguns outros. Você pode pesquisar os sites, este typ.io, e procurar semelhanças apenas para treinar seu olho e continuar melhorando suas habilidades de tipografia. Vamos passar para a próxima lição. 34. Evite muito similaridade: Nesta lição, vamos falar de demasiada semelhança. Então, na lição anterior, falamos sobre tentar encontrar características semelhantes entre diferentes fontes para combiná-las. Mas nesta lição vamos olhar, se você tentar encontrar muita semelhança, isso prejudicará seu contraste e seu design, pode facilmente arruinar seu design. Portanto, tenha em mente que muita semelhança pode facilmente eliminar o aspecto de contraste de nossa técnica de correspondência direta e pode realmente impactar seu design, então tente evitar muita semelhança. Aqui estou eu mostrando duas fontes, Noto Sans e Open Sans. Enquanto eu estava projetando para algum aplicativo web para médicos, eu acho, eu inventei essa combinação. Eu tentei usar Noto Sans e Open Sans uns com os outros naquela aplicação e, para minha surpresa, não havia nenhum contraste. Eu só estava confuso por que isso está acontecendo de novo e de novo. Eu deveria usar alguma outra fonte, eles não estão combinando muito bem. Você pode ver no topo que a altura x é semelhante, mesmo a largura do traçado é semelhante, eles têm traçado quase semelhante. Na parte inferior você pode ver que eu estou mostrando letras diferentes, crescer foax, não significa nada só para mostrar as curvas, ângulos e contadores, quanto grandes os contadores são? Qual é a forma do contador? Você pode ver dentro das letras O, ambas as fontes têm quase 99% de semelhança. Mesmo se você olhar para A as curvas são as mesmas, mesmo os contadores são quase iguais, W é mesmo, única diferença é esta letra G, eu acho que um é Humanista Sans-Serif e há um pouco geométrico. O problema que quero mostrar aqui é muita semelhança, então tente evitar muita semelhança. Aqui está outro par que eu encontrei que é Euphemia Regular e Open Sans. Eu acho que eles não são muito semelhantes, mas ainda assim eles compartilham um monte de mesma personalidade. Se você olhar para Euphemia Regular, Eu acho que tem um pouco mais de natureza curvilínea e termina e você pode ver uma cauda depois de uma carta aqui. Além disso, F é um pouco diferente, mas a estrutura básica da letra é quase a mesma. Este é outro exemplo, tente evitar tais combinações. É melhor que você escreva algo como duas linhas em duas fontes diferentes e tente ver se elas se assemelham umas com as outras ou não. Agora aqui está outra combinação que encontrei. Eu procurei muito e tentei misturar um monte de fontes, então eu alcancei essas duas combinações muito semelhantes. Então, se você olhar para Droid Sans e Source Sans Pro. Há muitas semelhanças entre essas duas fontes. Se você olhar para o G e a orelha de G, a letra R, é quase a mesma, W é quase o mesmo, um é mais largo, um é um pouco menos largo, F é quase o mesmo e então as curvas no A, o contador dentro da letra A, contador fechado, este é o mesmo, e o X é quase o mesmo. A altura X é um pouco diferente entre essas duas fontes, mas ainda assim elas compartilham muitas semelhanças. Então isso é tudo sobre evitar muita semelhança, se seu instinto sentir que essas fontes não têm diferença porque seus olhos e cérebro são mais treinados para olhar para diferenças e semelhanças. Se você encontrar alguma semelhança ou achar que há muita semelhança entre duas fontes, tente evitá-las. Agora, vamos passar para a próxima lição. 35. Como citar fontes do mesmo designer ou família: Primeiro vamos decolar muito devagar. Então, vamos olhar para técnicas que estão relacionadas a combinar facilmente diferentes fontes. Então, como podemos emparelhar fontes muito facilmente. Agora, a primeira regra é, se as fontes pertencem a uma família muito grande ou a um mesmo designer, então elas se encaixam muito bem. Agora, por que isso? Porque mesmo designer ou mesma família significa principalmente a geometria similar. Assim, as formas e ângulos, a maioria deles eles compartilharão seus traços. Agora há famílias que são chamadas de super-famílias como temos o Roboto aqui. Deixe-me mostrar-lhe no Google Fonts. Se você olhar para Roboto, onde está Roboto? Aqui. Um é o Roboto aqui. Tem 10 ou 15 tamanhos diferentes. Depois Roboto Mono. Esta é uma família muito grande, por isso tem diferentes variações como Roboto Mono. Há mais um, Roboto Condensado. Então, tudo isso pode ser misturado muito facilmente porque eles são construídos e projetados pelo mesmo designer. Na verdade, é basicamente muito grande Jimbo mega família de fontes. Assim, a mesma família pode ser uma família muito grande ou pode ser uma mistura de sans-serif ou serif do mesmo tipo. Dróide Sans, você deve conhecer o Droid Sans e o Droid Serif. É também dois casal de famílias e eles são basicamente os mesmos. Então Roboto e Lato são grandes famílias solteiras. Portanto, tenha em mente que se uma fonte tem uma família muito grande e tem estilos de, por exemplo, deixe-me mostrar-lhe. Como este Kanit. Por isso, tem muitas variações, muitos estilos diferentes, muitas espessuras. Então espessura do curso; 100, 200, 300 diferentes. Também este Exo, Exo 2, tem muita variação. Com essas fontes, podemos criar muitas variações. Então o primeiro passo é encontrar uma família que tenha muitos estilos. Assim, você pode usar apenas uma família e usar diferentes maneiras e estilos para criar variação e contraste em seu texto. Então, este é o primeiro. Em seguida, o segundo é que você seleciona fontes do mesmo designer. Deixe-me mostrar-lhe o exemplo. Aqui estou a mostrar-vos exemplo de Justin Gravante Sítio do Dia. É de janeiro e está usando fontes FF Mark, Freight Display e Frete Text. Agora Freight Display e Freight textos são basicamente projetados pela mesma fundição de fonte, que é GarageFonts. Você pode ver aqui minhas fontes aqui, Freight Text, GarageFonts. O designer é basicamente este Joshua Darden para ambas as fontes. Este é o mesmo designer. Se você clicar no “Perfil” deste Joshua Darden, você pode ver que ele tem um monte de fontes de design diferentes como Freight Text Pro, Freight Display Pro, Freight Sans. Então todas essas fontes, elas podem ser misturadas facilmente porque eu acho que elas estão quase compartilhando a mesma geometria, porque elas são projetadas pelo mesmo designer. Também seu nome é mesmo, Freight Sans, Freight Sans. Então é assim que combinamos fontes diferentes do mesmo designer. Então temos mais alguns exemplos destes Frete Text e Frete Display. Você pode ver aqui, eles usaram quatro fontes diferentes neste design. Você pode ver por aqui. É muito maravilhoso uso de fontes. Acho que ele pode ser muito perito em tipografia. Então temos outro lado. Aqui é UrbansTEMS. Ele também está usando apenas Freight Display e Freight Sans. Eles estão ótimos juntos. Um é sans serif e o outro é serif font. Então aqui, este é um site do Viaduct Rail Park e também é destaque no Typewolf. Aqui novamente, estamos usando Freight Display e Freight Sans. Não nós, mas este designer. Eles estão parecendo legais juntos. É também um é um pouco relacionado com sans serif família e um é para serif. Então eles são projetados pelo mesmo designer. Isso é basicamente, eu quero te mostrar aqui. É assim que você usa fontes da mesma família grande ou do mesmo designer. Use este site, melhores fontes do Google. Partilharei este recurso. Então certifique-se de mantê-lo e procurar formas diferentes que têm famílias grandes. Então isso é tudo sobre a primeira regra, que é como vamos facilmente combinar fontes da mesma família ou do mesmo designer. Então vamos passar para a próxima lição. 36. Ferramentas online para o: Nesta palestra, eu vou compartilhar com vocês alguns dos melhores sites que realmente irão melhorar suas técnicas de emparelhamento de fontes, e guarda de emparelhamento de fontes, e seus olhos de emparelhamento de fontes, e seu emparelhamento de fontes, Não sei, talvez cérebro, algo assim. Eu não sei se você tem ou não. Agora, este primeiro é tipo de conexão. Este é um jogo muito grande para digitar emparelhamento. Você pode selecionar diferentes fontes, como temos essas fontes antigas, Garamond Pro, ITC Century fontes, Univers, muito estrutural, um monte de fontes de estilo sans serif. Então temos algumas fontes de estilo serif laje, e esta é uma fonte muito diferente. Se você selecionar qualquer um deles como se eu selecionar este, então ele lhe dá quatro opções. Procure o similar, você quer usar a mesma semelhança em duas fontes ou você quer obter o contraste, explorar o passado, ou você quer ir com os dados históricos desta fonte como qual fonte estava em 1800 e que foi em 1900 ou algo assim assim. Além disso, você pode confiar na família. Se você deseja selecionar da mesma família como este Adobe Garamond Pro. Estas são poucas opções. Se você clicar sobre isso como “Abrace o Outro”, então ele lhe dá opções para selecionar mais três. Você pode selecionar qualquer um desses três. Por exemplo, se eu selecionar este, vamos ver como eles vão combinar um com o outro. Mostra a cabeça sobre o coração. Eles realmente combinam, vamos enviá-los para um encontro. Talvez não porque são muito parecidos, ambos são serif estilo antigo que permanecem batatas fritas de pequeno porte. É assim que ele treina você com correspondência de tipos. Volte e tente combiná-los de novo como aqui. Este é um jogo muito legal, você pode jogá-lo novamente e novamente e treinar seu olho. Por exemplo, se você selecionar este e eu vou abraçar o outro, ele é muito arredondado, então podemos ir com Futura que é muito afiada, fonte ousada. Vamos enviá-los para um encontro, ver como acontece. Sim. Eles fizeram um jogo muito bem sucedido. Vamos ver o quão bem você pode fazer por aqui. Então temos mais alguns lados. Este é muito bom, Type Genius. Você seleciona uma fonte como esta, ea vista corresponde, e ele vai mostrar-lhe um monte de jogos diferentes como Adelle, FF Dagny Pro. Esta é uma correspondência encontrada para esta fonte. Você pode selecionar outros como talvez Bebas Neue e ver partidas e você vai encontrar um monte de como 1, 2, 3, 4, e 5 combinações diferentes. Isso é muito bom, outra ferramenta para talvez treinar seu olho ou encontrar rapidamente um par de fontes. Então temos este site, fontpair.co. Você pode procurar aqui ou você pode selecionar fontes aqui. Você também pode ir com san serif, san serif combinação, ou cursivo com san serif, ou serif e sans serif, algo assim. Um é para o título, o segundo é para o corpo do texto. Normalmente, ele está mostrando a você, maioria das vezes, o Google Fonts. Estas são todas as fontes do Google. Ele também mostrará onde baixar essas fontes. Então temos alguns outros sites para inspiração tipo. Este é criar typewolf.com, e ele irá mostrar-lhe todos os novos projetos de criação e mestres de tipografia e suas obras-primas e junto com suas fontes. Você pode ver na parte inferior, eles têm três fontes usadas neste site. Se você clicar nele, você pode ver os detalhes aqui, como este. Na parte inferior, e na parte superior, se você clicar nessas fontes, você pode ir para os detalhes dessa fonte e onde ela foi usada. Além disso, você pode baixar essa fonte ou talvez você comprá-la. Depois há mais um typ.io, ele mostra inspirações de fontes diferentes, também as fontes usadas aqui. Também as tags que significa que a categoria que ele pertence. Em seguida, o link do site, se você quiser ir até aqui, você pode verificar o seu próprio. Estas são algumas ferramentas que eu poderia encontrar mais e eu vou incluir um PDF ou talvez outro arquivo nos recursos para baixá-lo e ver por si mesmo. Continue praticando e melhorando suas habilidades de emparelhamento de fontes. Vou lhe dar muitos desafios nas próximas lições, então vamos ver como você pode melhorar e quanto você já melhorou. Vamos passar para a próxima lição. 37. Preperations de exercício do de de Dribbble: Neste exercício, vamos criar algo semelhante a este. Primeiro, vou mostrar-lhe os recursos que vamos usar e as fontes que vamos usar. Deixe-me mostrar-lhe os recursos. Para a imagem de fundo, eu usei este pixabay.com. Você pode ver aqui iPad tablet. Você pode procurar aqui, iPad tablet e eu acho que esta imagem vai aparecer. Para as fontes, estou usando três fontes. Um deles é Bitter by Google fontes, este. Você pode procurar por aqui. Então, temos fonte Aller, que é uma fonte livre de Font Squirrel. Eu realmente gosto dessa fonte. Em seguida, estamos usando fonte Aleo apenas para o logotipo. Portanto, ele não vai ser usado no design, apenas para o logotipo. Então, para a escala de módulo, na verdade, eu não usei nenhuma escala de módulo. Acabei de usar 42, 16 e 18 pixels, três valores. Mas na verdade, eu encontrei uma escala que está relacionada a essa proporção, base de 16 pixels e relação de 1,15, e você pode obter os mesmos valores que eu usei 16, 18 e 42 ou 43. Então você pode usar essa escala. No final, vamos usar este arquivo de simulação da mão Galaxy, arquivo livre de graphicburger.com, e vamos usá-lo em nosso design. Você pode usar tudo isso, já que não temos nenhum aplicativo móvel agora, então vamos usar a mesma visualização aqui. Vamos começar. Primeiro de tudo, vamos apenas configurar a nossa tela. Vamos em frente, novo arquivo. Vou selecionar 1.920 por 1.080 Full HD. Não gerencie cores este documento, pixels quadrados, e vamos clicar em “OK”, assim. Então, vamos arrastar esta imagem para o nosso Photoshop assim, e apenas tentar expandi-la para que ela cubra toda a tela assim. Então, no meio, vamos criar um retângulo. Clique aqui uma vez, e a largura do retângulo deve ser 1,360 por 784. Então 784 é basicamente divisível por 16 pixels, então estou considerando esse tamanho em altura. Vamos criar isto. Vamos esconder a fronteira. Selecione uma cor acinzentada aqui, e vamos movê-la no meio, assim. Agora, o primeiro passo é nós vamos criar alguns guias, colunas, e algumas calhas e todas as coisas ao redor desta camada. A melhor maneira nesta situação é que vou usar um plug-in chamado GuideGuide. Primeiro, eu vou fazer uma seleção, clique de controle em torno desta camada, e nossa margem é 0, 0, 0, e 0, 12 colunas. Número de linhas, eu vou dividi-lo em quatro seções. Aqui temos 1, 2, 3 e 4, então quatro seções. Então, não temos largura e aqui está nossa calha tamanho 20 e vamos adicionar as guias assim. Agora, se você não tem esse plug-in, não se preocupe, você precisa criar, primeiro, o tamanho do documento. Neste caso, você vai criar 1,360 e 784. Basta criar este documento primeiro e construir algumas guias em torno dele, como este, New Guide Layout, 12 colunas, 20, e deixar as margens em torno dele assim. Aperte “OK”. Então, se você não tem este plug-in, seu primeiro passo será este. Então, primeiro, você precisa criar este documento, depois ir para este tamanho de tela e expandir seu tamanho de tela para 1.920 por 1.080. Aperte “OK”. Agora você pode ver que sua tela foi expandida e seus guias têm lá. Então você pode usar esses guias assim. Mas agora, estou usando esse plug-in. Então, apenas para facilitar os passos, estou usando esse método. Vamos fazer um pouco mais de cor branca, cor cinza esbranquiçada. Agora, nossa grade modular foi criada. Temos muitas colunas e quatro linhas. Vamos usar todas essas linhas para criar nosso design. Na próxima lição, vamos projetar sobre esta tela. Então vamos passar para a próxima lição. 38. Design de cabeçalho de heróis parte 1: Agora, vamos começar a criar seu logotipo primeiro, vamos selecionar a ferramenta de texto ou digite T no teclado para selecionar esta ferramenta. Nós estamos indo para selecionar fonte Aleo. Eu acho que foi negrito, e o tamanho deve ser 36 pontos, e a cor será este, eu acho aaafb2, pressione “OK”. Clique em qualquer lugar e escreva F-A-S-T. Rápido é basicamente o nome da empresa, nós apenas imaginamos. Havia algo abaixo dela, uma linha laranja só para enfatizar que é um logotipo. É um logotipo fictício, então não se preocupe se você se preocupar muito que por que e de onde este logotipo veio. Basta arrastar uma linha abaixo dela. Basta remover este traço e usar esta cor laranja. Esta cor laranja que usamos aqui, é um pouco de laranja plana, mas um pouco afiada assim. Agora, não se preocupe com as colocações. Basta criar um grupo aqui chamado Logo para que tudo seja organizado. Este é o nosso contêiner principal, então nomeie-o Container. Este é o nosso passado, por isso faça-o de fundo. Sempre use convenção de nomenclatura que é significante e fácil de entender. Caso contrário, criará uma bagunça muito grande no final. Agora, para esta navegação superior, vamos usar fonte, que é Aller. Então, basicamente, estamos usando duas fontes; Aller e Bitter. Eu vou usar Aller regular e tamanho da fonte será 18 pontos, deslocá-lo para 18 e cor será um pouco mais cor cinza escuro, talvez este, eu acho que não foi este, foi este, 333683, pressione “OK”. O primeiro foi sobre nós. Por que eu não posso ver porque eu tenho pode movê-lo para cima, sobre nós. Depois tivemos Estudos de Casos, Recentes e Contato. Eu aconselho você a usar outra cópia. Estudos de caso, agora todos eles foram criados. Vamos mover o último que é Contato para o fim onde precisamos dele. Destaque suas linhas e colunas clicando em “Controle e vírgula”, selecione todas elas e vamos alinhá-las assim. Isto é basicamente distribuí-lo horizontalmente. Às vezes ainda não distribui horizontalmente muito bem. Você pode ver que Sobre nós, foi movido para cá. Eu preciso que ele esteja aqui, e então novamente, eu vou selecioná-lo assim. Preciso que os Estudos de Casos estejam aqui. Vamos arranjar outra vez. Não se preocupe se Recent está aqui, então vamos mantê-lo assim. Agora, vamos criar estas três barras aqui. Para isso, vamos usar esta ferramenta retangular, que é o nosso retângulo. Você também pode usar este retângulo arredondado, se desejar. Eu acho que eu usei retângulo arredondado pode ser assim. Tem uma cor acinzentada como essa. Aqui, vamos selecionar a cor, talvez esta, talvez a cor acinzentada mais clara. Duplicar, um, dois. Como isso. Agrupe-os e temos nossa navegação aqui. Se você quiser movê-lo para cima, você pode movê-lo para cima aqui. Basta manter a distância, que vai ser 1, 2, 1, 2, 3, 4. Também podemos adicionar mais alguns, talvez mais seis, 1, 2, 3, 4, 5, 6. A distância total do topo é de 30 pixels. Não estou agora, considerando minha linha de base, então agora estou livre da minha linha de base. Às vezes, quando você está projetando, você não precisa pensar muito sobre a linha de base quando você não tem um parágrafos muito longos ou textos muito longos para editar ou você precisa projetar para blogs ou algo assim. Agora estou projetando para o cabeçalho. Então estou usando meus blocos de legos para organizar tudo. Quatro linhas ou quatro seções, horizontal e verticalmente, tenho 12 colunas. Vamos chamá-lo Menu ou Nav, navegação. Vamos movê-lo para cima, alinhar-se com isso. Por que eu estou usando grupos porque eu posso facilmente alinhá-los uns com os outros. Este foi alinhado com isso facilmente. Além disso, você pode clicar duas vezes nele e você pode alterar a cor de todo o grupo simultaneamente. Color Overlay, e nós vamos usar alguma sobreposição de cor aqui assim, isso parece ótimo em vez de cor cinza muito escuro. Além disso, isso é chamado de menu Hamburger. Nossa barra de guias está quase pronta. Vamos alinhar os logotipos também com estes. Talvez eu precise ter 1, 2, 3, 1, 2, 3, 4, 5, 6. Acho que 16 multiplicado por 2 é igual a 32. Então vamos movê-lo quatro pixels aqui, 1, 2, 3, 1, 2. Então 32 pixels, eu o movi do topo. Vamos movê-los dois pixels abaixo, um e dois. Um grande design é basicamente muito calculado. Então não pense que você precisa ser muito criativo para projetar isso. Eu acho que você precisa ser muito analítico para projetar isso. Vamos esconder isso e ver quais são as distâncias entre nossos elementos. Eu ainda acho que há muito mais distância entre Sobre e Recente. Vamos usar o nosso sentimento interior para alinhar estes. Vou movê-lo para cá e mover o Recente para lá. Vamos movê-lo assim. Vamos mover o Conteúdo duas vezes para cá. Agora, está parecendo perfeito. Você pode ver como eu usei meu senso interior, ou intuição para alinhar estes. Nem sempre confie nessas grades. momento estou usando esta área para a navegação, 1, 2, 3, 4, 5, 6 colunas e duas colunas para este logotipo. É assim que estou alinhando tudo. Agora, eu preciso do texto aqui, que vai ser em Bitter. Vou usar este bloco inteiro, 1, 2, 3, 4 colunas. Vamos colar alguns textos aqui, que era este, ver como Woo-Commerce e tudo mais. Estou usando Bitter aqui, e o tamanho da fonte é 43, como mencionei anteriormente em nossa habilidade tipográfica. Vamos copiá-lo. Eu vou usar o Bloco de Notas para colá-lo porque ele vai colar todo o estilo. Eu quero que você me veja enquanto estiliza este texto. Vamos colá-lo aqui. Esta é uma camada falsa, esta era real. Este é o nosso texto. O que vamos fazer é selecionar Bitter aqui. Isto será Bitter Bold. Não sei, foi ousado ou algo assim? Vamos ver. Não, não era ousado, era normal. Agora 43 e eu selecionamos a altura da linha para 60. Você pode ver por aqui. Agora o espaço parece um pouco menos aqui. Não sei por que não está se encaixando aqui. Vamos expandir isso para o próximo. Então, 1, 2, 3, 4 , 5 colunas, agora estamos usando aqui. Agora eu vou selecionar isso e eu vou usar alguma cor mais escura aqui. Acho que foi este. Está ficando abaixo de alguma camada? Eu acho que estava dentro deste grupo e eu tinha aplicado sobreposição de cores nesta navegação. Então eu mudei para fora. Vou usar um pouco de cor cinza-azulada maçante aqui. Acho que isso parece ótimo. Serei um pouco menos. Isso parece ótimo, agora vou usar isso. Selecione isso primeiro e eu vou usar esta cor azul-acinzentada maçante. Esta área está pronta. Agora vamos criar nosso botão aqui. Então, para o botão eu vou usar retângulo arredondado, e vamos usar algum tamanho. Vamos usar 240 por 36. Vamos tentar este, e nosso raio será 30. Vamos usar 30 aqui, e 30 aqui, e 30 aqui, e 30 aqui. Por isso, é muito magro. Vamos criar um pouco mais de altura, um botão um pouco mais grande. Talvez possamos usar 16 multiplicar por 3 é 48, eu acho. - Sim. Acho que 48 está mais perto. Vamos ver qual era o tamanho que usei aqui. Controle D, e a altura era de 60 pixels. Então eu acho que 64 estará em nosso alcance para nossa altura de linha de base ou tudo. Vamos usá-lo aqui. Então eu vou usar 64 pixels. Vamos colorir outra coisa agora. Agora temos algum problema com redondeza. Desloquei-o para 32 pixels. Agora é perfeitamente redondo. Nós criamos nosso botão. Vamos movê-lo um pouco para baixo, talvez nesta área, ou talvez se precisarmos de espaço para fora, podemos usar 1, 2, 3 e 1, 2. Então 32 pixels de distância desta área. Vamos ver quanto foi desta área. Acho que foi no meio destes dois, de cima e de baixo. Talvez devesses usar o teu intestino interior aqui, por isso não te preocupes. Além disso, eu acho que você pode ver aqui que eu consertei em duas colunas. Então agora é estendido a partir desta coluna. Vamos contratá-lo a partir daqui. Vamos corrigi-lo em duas colunas, assim. Vamos movê-lo um pouco mais abaixo de 10 pixels e um, dois. Ele está agora a 48 pixels de distância do topo. Então vamos usar Aler aqui, então 16 pontos de pixel, Saiba mais. Está parecendo muito legal. Vamos mudar sua cor para branco, assim. O que está acontecendo comigo? Para o ícone aqui, o ícone de seta, Eu usei este plug-in chamado Font Awesome PS. Eu vou procurar aqui seta, e ele vai me mostrar todas as setas dentro deste Font Awesome. Esta é a flecha que usei porque, em última análise, vou dá-la aos programadores. Então isso vai ser uma grande ajuda se eles puderem usar esta flecha aqui. Vamos mover esta flecha. Ele coloca uma flecha muito pequena, então não se confunda onde está minha flecha ou ela foi sequestrada em algum lugar. Vamos usar branco agora e mover o tamanho para cima. Vou ampliar e Control T, e vamos pressionar “Shift” e “Alt Shift Option”, e vamos aumentar o tamanho assim. Acho que o tamanho é quase perfeito. Agora criamos nosso botão. Vamos colocar o texto aqui. Agora não se preocupe com esta cor do botão. Nós vamos dar alguns toques finais no final. Então este é o texto. Eu acho que eu deveria ter copiado isso antes de começar este curso; em algum lugar assim, em algum lugar aqui. Isso é um inconveniente para você, mas acho que deveria suportar isso comigo. Agora você pode ver aqui, esta é a área que eu estou usando. Assim que esta área terminar aqui, este quarteirão, vou colocar o meu texto aqui. Vou colocar texto aqui como aquele Controle V. Estas são duas camadas, vamos colorir com este cinza agora. Eu acho que eles têm muita separação devido a esta altura de linha. Então eu fixei a altura da linha para 24, e eu acho que nós precisamos fazer este um pouco mais acinzentado assim. Então eu usei essa cor de botão. Se você está projetando, é melhor e sábio que você primeiro use cores cinza. Então tente usar tons de cinza em todo o seu design, em vez de usar qualquer cor. Então, no final, use uma ou duas cores para destacar tudo. Esta é outra ótima dica para você começar e criar um design muito grande. Vamos passar para a próxima lição, onde daremos alguns toques finais a este design. 39. Design de cabeçalho de heróis parte 2: Ok, agora esta é a última sessão. Vamos primeiro trazer a tela do nosso celular para cá. Vamos para a tela do celular que baixamos. Vamos extraí-lo aqui. Vamos usar este primeiro. Este é o primeiro. O que vou fazer é esconder este fundo. Você pode trazer tudo assim, Controle G e agrupar isso, Janela Organizar e ir para Tile Up verticalmente e movê-lo para aqui assim. Vamos fechar este 1.psd. Vamos arrumar as janelas de volta. Consolidar tudo para guias como esta. Agora, isso é muito grande. Vamos mantê-lo móvel, diminuir o zoom, Controle T , Ok, e vamos movê-lo assim. Pressione “Enter”. Agora, eu vou me desculpar. Agora vou selecionar este grupo. Vamos usar o nosso turno e as teclas de seta para movê-lo assim. Agora, o que eu vou usar é eu vou usar 1, 2, 3, 4, 5 colunas para este telefone. Neste momento, estou a usar quase seis, por isso não te preocupes. Vai estar quase aqui. Acho que o tamanho é quase perfeito. Como isso. Agora, você pode ver que eu estendi a mão no fundo um pouco e você pode ver que a mão está saindo. O que vamos fazer é, vamos convertê-lo em objeto inteligente, movê-lo para baixo para o contêiner. Este fundo branco é especificamente o recipiente e o clipe assim. Esta mão foi consertada. Vamos esconder [inaudível]. Tudo parece bem agora. Há poucas coisas como precisamos consertar a área aqui. O que eu vou fazer é selecionar este botão,fundo do botão Saiba mais, fundo do botão Saiba mais, ir para Estilos de Camada Gradiente Sobreposição. Vou usar esta laranja para não se multiplicar, mas normal. Isto vai ser laranja para amarelo. Não deve ser radial, deve ser linear. Vou usar 180 da esquerda, o ângulo é da esquerda, então esta cor vem da esquerda. Você pode usar esse método para o que quiser. Agora estou a usá-lo assim. Se você quiser corrigir as cores, você pode ir em frente e usar mais saturação aqui como 95 talvez. Também para esta cor talvez, é muito leve, vamos torná-lo um pouco maçante. Talvez 95 e saturação 100. Não, eu acho que é muito perto desta cor, então eu vou usar alguma outra cor talvez na área amarela como essa. Um pouco mais amarelo. Ok, agora está ótimo. Basicamente, estou combinando amarelo com cor laranja. Eles são muito próximos no espectro, então eles parecem realmente agradáveis e vibrantes. Basicamente, foi assim que criei isto. Vamos usar 1, 1, 2, 3, 4, 5, 6 e 1, 2, 1, 2, 3, 4. Eu usei 24 aqui, então vamos criar 24 aqui também. Então 1, 2, 1, 2, 3, 4. Então 24 de ambos os lados. Se você quiser, você pode usar sua própria imaginação e seu próprio instinto para alinhar estes. Se eu tentar movê-lo para cá talvez 1, 2, 3, 4 pixels, está com bom aspecto. Além disso, esta seta, se você quiser movê-la para cima, ou talvez para a esquerda, talvez para a direita. Está mais parecendo melhor agora. Se você quiser obter alguma sombra em torno deste botão, selecione este e eu vou usar alguma sombra difusa aqui, então assim. O que estou usando é que estou usando 20% de opacidade para a sombra e vamos criar a sombra um pouco mais perto. A distância é de três pixels. Você pode usar nove ou qualquer outra coisa se você quiser mudar essa distância no fundo assim. Eu acho que talvez seis será bom o suficiente ou talvez oito, é o meio de sua altura de linha de base, então 16. Agora, está ótimo. Se você quiser mudar a cor mais sutil, você pode ir assim. Sombra muito sutil, muito leve, sombra muito difusa. Aperte “Ok”. Acho que terminamos este exercício. Ainda assim, se você sentir que esta área tem menos espaço do que esta, você pode deslocar este botão um pouco para baixo. Vamos criar esses alinhamentos. Vamos usar a nossa intuição interior para mudar isto. Vou usar aqui, 1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7, 8. Está quase alinhado com esta área ou este fundo de telefone celular aqui. Além disso, podemos mudar esta seta e este botão. Vamos agrupá-los para o botão. Vamos movê-lo para baixo, ou um pouco para baixo, 10 pixels para baixo. Então isso é melhor agora. Você pode ver aqui, ainda assim, se você sentir, você pode mover o botão para baixo assim, eu acho que foi melhor aqui. Talvez 1, 2, 3, 4, pixels para baixo. Abra sua imaginação, não conserte seu pensamento de que vamos usar a linha de base, e isso não vai estar na linha de base. Usa a tua imaginação. Apenas certifique-se de que isso vai ser em toda esta área, e também você pode jogar com a altura da linha, se você quiser. Se você quiser, você pode jogar com a luz de altura da linha 64 ou talvez 68, algo semelhante a este. Você pode usar mais espaço aqui e você pode enviar o botão um pouco mais para baixo assim. Esta é uma maneira. Outra coisa é, você pode ver aqui que nosso alinhamento visual está um pouco fora. Por quê? Porque estes têm bordas e este é redondo. Se você olhar para ele, você pode ver que ele está olhando um pouco dentro desta área, então eles não parecem alinhados com esta linha. Como você pode corrigir isso, você pode mudar este parágrafo e isso aqui. Acho que é um pouco mais. Eu vou usar 64, e eu também posso deslocá-lo oito pixels para baixo. Desloquei-o oito pixels para baixo, é apenas do meu agrado. Eu quero criar mais espaço aqui, então eu vou deslocá-lo para baixo. Além disso, se você quiser selecionar este telefone celular e e nós vamos deslocar-lo um pouco mais assim. Talvez mova a Samsung para dentro. Vamos movê-lo um pouco para cima e um pouco para a esquerda. Às vezes, você precisa ocultar suas notas e guias para ver o que o design está chegando e mover as coisas livremente. Agora, para corrigir esses dois problemas, temos nossas duas áreas de texto, vamos enviá-los para cá assim. Eram 10 pixels, então vamos movê-los de volta 1, 2, 3, 4, 5. Eu acho que cinco pixels, ou talvez quatro pixels serão mais do que suficientes para fazê-los mostrar em seu alinhamento visual. Isso é basicamente chamado de alinhamento visual, embora eles estejam matematicamente alinhados, mas visualmente aos nossos olhos, eles não parecem muito alinhados. Além disso, acho que usei um tipo de letra normal aqui, então vamos mudar para normal. Se você quiser usar negrito, a escolha é sua. Acho que é um ótimo exercício. Eu compartilhei muitas das minhas dicas de design muito especiais ou dicas secretas com você, como eu desenho, como esconder notas. Às vezes você precisa ver seu design de longe. Reduza o zoom e veja como ele está olhando. Você pode que este texto está olhando muito distante. Talvez eu precise mudar sua altura de linha de volta para 60. Está melhor agora. Talvez eu possa movê-lo para baixo. Agora, você pode ver que há muita distância entre este botão laranja e este texto. Posso movê-lo para cá ou talvez eu possa mover o botão um pouco para cima. Estas são todas as suas escolhas. Como isso. Acho que agora está melhor. Isto parece um bloco, este é contínuo. Isto está separado. É assim que criamos designs mais próximos do nível de drible. Continue praticando, não perca o foco. Eu acho que este tem um pouco desfocado porque eu usei esta outra técnica. Eu acho que da próxima vez se você quiser movê-lo para cá, você pode ver que é mais claro aqui. Não use isso arrastar as camadas inteiras, mas copie e cole aqui. Deixa-me mostrar-te. Acho que é melhor se eu te mostrar assim. Esconda isto, Control A, Control Shift C ou Copiar mesclagem basicamente. Este é o nosso design agora, e vamos colá-lo aqui. Segure F5, converta-o para objeto inteligente. Vamos esconder o primeiro, que está embaçado. Vamos movê-lo por aqui. Seu design deve ser perfeito, então você precisa movê-lo assim. Isso é mudar com o contêiner. Além disso, estou alinhando com esta área quase no meio. Vamos ver onde nossa mão está agora. Vamos movê-lo um pouco para baixo assim. Agora, eu acho que está perfeitamente equilibrado. Se você quiser adicionar algo a ele ou tentar criar algo semelhante a ele, você pode ver agora que ele não está desfocado de áreas por aqui. É assim que você cria um design muito legal, um design mais próximo do design de nível de drible. Agora, para esta seleção de quatro, este é o tópico principal aqui. Agora você pode ver que eu selecionei esta fonte beta, que é um pouco, você pode ver curvas e ter muito lajes. Mostra forma sólida. Temos uma forma muito sólida e muito inovador como temos um muito boas curvas, superfícies curvas. Parece muito moderno, sólido e muito ajustável e talvez empresa flexível. É por isso que eu usei este, eu tentei usar Aleo, eu acho que antes A-L-E-O eu acho, sim. Também tentei usar o Aleo aqui. Se você quiser mudar, você pode ver como toda a mensagem mudou para cima. Você pode ver agora que não parece muito sólida ou ousada empresa. Se você tentar usar regular, você pode ver aqui o efeito. Se eu voltar para a fonte que selecionei, o beta que você pode ver terá mais peso e mais valor. Foi assim que selecionei beta em vez de Aleo para este exercício. Além disso, você pode ver esta fonte Aleo tem superfície muito arredondada, é cantos bem arredondados, e é muito legível. Eu tentei esta fonte e eu acho que está olhando perfeito. Vamos mover este recente um pouco para cá assim. Eu vejo o espaço um pouco fora entre esses dois elementos. Vamos salvá-lo exercício final 1. Eu acho que você gostou desta lição. Vou criar muitos desses exercícios. Fique atento e continue assistindo as atualizações. Vou te enviar as atualizações, então cuide delas. Vamos passar para a próxima lição. 40. Design de cabeçalho de heróis - tema: Agora, nesta lição vamos projetar algo semelhante a esta. É muito elegante e muito poderoso procurando site de negócios ou de negócios para site de negócios com um monte de soluções fornecidas a outras empresas. Então, a partir da última lição, vamos converter nosso último exercício para este. Primeiro, deixe-me mostrar quais são as fontes e cores que estou usando. Você pode ver que a cor dominante é vermelha aqui, e o fundo é um pouco texturizado, essa arquitetura. Agora você pode ver que todo o tema foi alterado apenas mudando o fundo e poucas cores e algumas fontes. Então é assim que vamos criar e usar nossas combinações de pensamento de design ou tipografia e converter um design em outro tema totalmente diferente. Cálculos, altura e largura, tudo é o mesmo, só que eu mudei através de fontes, que é basicamente topografia e poucas imagens aqui que reflete esta organização. Então é assim que você converte um tema para outro. Deixe-me mostrar algumas das fontes e recursos que estou usando nesta lição. Agora a fonte que estou usando para o logotipo é este ARCHIVE TYPEFACE. Eu realmente amo isso. É muito ousado, muito grosso, e muito techno-side ou talvez você possa dizer baseado em tecnologia, muito arredondado e reto. Então temos esse Clear Sans. É moderno Sans Serif, eu acho, e tem algumas curvas nele. Estou usando Clear Sans para texto menor. Então esta é uma fonte premium que estou usando, que é Amsi Pro. Eu comprei, eu acho que um ano atrás, naquela época, ele foi lançado e eu acho que eu consegui por talvez 26 ou US $30. Agora é por 300 dólares. Então eu vou te dar uma outra alternativa para esta se você não tiver esta. Aqui está uma alternativa para este Amsi Pro. Se você não tem este Amsi Pro, você pode usar esta fonte do Google que é Muli. Você pode usar a versão light ou versão extra light dele para o texto. Então eu vou mostrar a vocês o documento que vamos projetar. Então aqui está nosso Amsi Pro, e aqui está Muli. Por isso, estou a mostrar-vos exemplos. Você não notará muita diferença. Então o que eu fiz foi na verdade eu selecionei esta fonte, alguns do texto aqui e eu usei a coisa mais recente do Photoshop que é essa fonte de correspondência. Quando eu combinar com esta fonte, eu encontrei Muli aqui. Então, foi muito perto. Eu acho que vai levar algum tempo para combinar fontes. Então dê algum tempo e se você tiver uma fonte similar ou a minha, você pode ir em frente. Você pode ver aqui são algumas fontes que ele correspondeu. Além disso, eu fui para fontes do Google para ver pelos meus olhos qual fonte vai ajudar, e foi este Muli. Então você pode usar Muli aqui. É muito elegante, muito original. Então você pode usar Muli em vez de Amsi Pro. Então, neste exemplo, vou usar Amsi pro. Tem algumas curvas e curvas arredondadas muito agradáveis em torno dele, em torno do texto. Então eu realmente amo isso. Então, para esta área, estamos usando Clear Sans, este também é Clear Sans, este também é Clear Sans. Para este logotipo, estamos usando arquivo e poucas cores aqui, eu já os montei. Então vamos começar e ver o que podemos encontrar nesta sessão de design. 41. Design de cabeçalho de heróis - segundo tema: Agora, nesta lição, vamos criar algo semelhante a isso. Vamos começar a partir do nosso design anterior. Este é um tema totalmente diferente, é muito empresarial elegante, ou tema premium de negócios. Este é um tema um pouco enérgico e criativo, então há poucas diferenças como o texto, as cores e as fontes. As curvas das fontes, Eu selecionei fontes muito diferentes. Nesta situação aqui você pode ver que eles são muito diretos, você pode ver algum tempo negrito, e um pouco sério, como fontes baseadas em tecnologia muito sérias. Vamos começar, e mudar este tema para este. Primeiro de tudo, vamos mudar o fundo, temos este fundo de imagem. Consegui este passado de um lugar que não me lembro. Aqui está o meu passado. Era de um site livre. Vou arrastá-lo e soltá-lo no meu Photoshop aqui assim. É quase perfeitamente encaixado e eu vou apenas movê-lo por aí assim. Shift e Alt, para fazer isso no centro assim. Você pode pegar algumas coisas pontudas aqui se quiser. A segunda coisa que vamos fazer é adicionar alguma opacidade a este recipiente. Estou a usar 90 por cento deste contentor. Vamos ampliar e fazer algumas outras alterações, como mudar essas fontes aqui. Primeiro vamos mudar este logotipo e mudar a fonte deste logotipo que foi Archive. Arquivo Regular é a fonte e o tamanho é 36. Vou mudá-lo para Userable. Isso vai ser no vermelho, então eu vou mudá-lo para esta cor vermelha que é maçante vermelho ae5240 cor. Você pode obtê-lo um pouco mais nítido, assim. Pode ser aumentar a saturação um pouco para cima. Estou usando esta cor, então remova esta linha laranja daqui. Então a segunda coisa é que vamos mudar as fontes de todos esses textos aqui, esses links de texto ou navegação. Eu vou selecionar personagem e eu vou mudar todos os links de uma só vez. A fonte que vamos usar é Clear Sans Regular. Vai ser 18 pixels, não se esqueça sobre esta altura da linha, e então nós vamos mudar alguns textos aqui, alguns botões, e algumas outras coisas aqui, também esta imagem. O ajuste final do ajuste fino será feito na próxima etapa ou próxima lição, então não se preocupe com isso agora. A distância e tudo o que vamos ajustá-los na próxima lição. O texto que vamos colar aqui será o texto que já escrevi para esse exercício. Eu vou copiar isso, nós fornecemos soluções poderosas, copie e eu vou colá-lo aqui. Control+V ou Command+V, clique duas vezes para realçar e eu vou alterá-lo para Amsi Pro Light, e o tamanho da fonte era 36 e a altura da linha é 48. Como isso. Agora vamos para este botão, remover o gradiente, então temos isso. Em seguida, vá para essas propriedades, e vamos usar quatro pixels para o arredondamento. Bom para ir, parece bom. Saiba mais, a fonte é Aler, então eu vou mudá-la para Clear Sans, que é a nossa fonte para o corpo do texto. Então, para esta área, nós também vamos mudar a fonte para Clear Sans Regular, e nós vamos mudar o texto também. Vamos para o texto ou conteúdo aqui, e vamos copiar isso, e vamos colá-lo aqui no Photoshop. Cole assim. Então vamos sublinhar isto porque se trata de uma ligação, isto é mais um passo. Vai ser um link, eu vou usar azul maçante, cor acinzentada. Nós estamos usando basicamente cores maçantes aqui, este é 376899. Também vamos sublinhá-lo. Estou usando este têxtil para sublinhá-lo. Você também pode usar sublinhado colocando uma linha sob ele e eu acho que é mais eficaz agora você pode ver que é uma linha um pouco desfocada pelo Photoshop. A melhor maneira é usar uma ferramenta de linha aqui e desenhar uma linha manualmente como esta. Agora seu tamanho é de 10 pixels, então eu vou mudar sua altura para um pixel. Vamos remover o sublinhado deste texto, você pode ver aqui. Agora mude a cor para isso, e você pode ver que está parecendo mais vivo e mais preciso. Eu vou selecionar isso, movê-lo um pouco assim, você pode ver que está olhando mais nítido, e também você pode mudar a cor deste. Este texto para este, também para isso eu acho que algo confuso. Agora terminamos com a maioria das mudanças. Nós vamos mudar a imagem aqui se você quiser mudar a imagem, ou você pode colocar qualquer coisa aqui como talvez agora eu vou copiar esta área aqui e eu vou copiá-la, copiar mesclada, e eu vou colá-la Por aqui. Só para conseguir uma demonstração, é outro aplicativo que eu projetei. Eu não estou muito orgulhoso disso, mas era uma linha de trabalho muito estranha. É assim que mudamos a imagem aqui. Na verdade, essa imagem realmente importa. Seja o que for que você está projetando, o tema que você está projetando, esta imagem deve ter algumas cores ou esquema de cores semelhante a este tema. Se eu estou projetando em blues e vermelhos, você pode ver que este é o nosso blues e vermelhos. Isto está realmente combinando com isto. Esta é a principal razão pela qual estamos usando tudo aqui. Você pode ver que este é o exercício que estamos projetando, eu acho que eu deveria fechar este. Para evitar erros, eu fechei esse. Estamos a trabalhar nesta área. Na próxima lição, vamos ajustar e mudar todo o espaçamento ao redor, e eu vou mostrar a vocês como vou usar essa grade para espaçar essas três áreas. Estes três são muito importantes. Também vamos usar algum espaçamento em torno desta e desta área. Então vamos passar para a próxima lição. 42. Design de cabeçalho de heróis - segundo tema: Agora, nesta lição vamos afinar este design. Ajuste alguns problemas de espaçamento e espaço em branco que é, você pode dizer, uma parte muito importante do seu design. Basicamente, seu design vai melhorar e obter mais atenção ou mais forma e forma com esses problemas de espaço em branco. O que eu vou fazer é antes de tudo, esta área ou este texto, nossa manchete principal, vamos mudar para esta linha de fluxo superior. Estes são basicamente chamados de linhas de fluxo. Estas linhas. Estes são basicamente módulos ou áreas espaciais. Você pode ver aqui, estes são poucos módulos. Este é um. Agora, o que eu vou fazer é alinhá-lo no topo desta linha. Agora, para este, este botão, vou alinhá-lo no meio deste módulo. Esta área aqui, eu vou ficar no meio dela. Isto é realmente útil. Por quê? Porque você pode ver que isso está tomando todo esse espaço e isso está tomando todo esse espaço. Agora, novamente, eu vou repetir esta área, este mesmo patrono, e o que eu vou fazer é eu vou alinhar isso junto com esta, novamente, linha de fluxo. É assim que eu alinhei meus textos perfeitamente para um melhor espaçamento. Aqui, temos um espaço assim. Se pudermos tentar melhorá-lo, talvez possamos melhorá-lo com um pouco mais de altura de linha, talvez 52, algo assim. Ou talvez possamos aumentar para 38, algo assim. Vamos esconder as linhas de fluxo e nossos guias e ver como ele está olhando. Talvez deva ser 36. Trinta e oito estava bem. Vamos movê-lo para 54, vamos ativar as linhas e eles estão com boa aparência. As distâncias entre estes dois estão ótimas. Mesmo se você quiser usar 48, ainda ficará ótimo. Toda a distância será harmoniosa. Foi assim que tratei esta área. Agora, para esta área, você pode ver aqui, nós precisamos ter o mesmo espaço por aqui. Vamos ativar nossos guias e remover este guia aqui. Além disso, eu vou mover este guia para o topo assim, e um guia, eu vou colocar aqui. Agora, nós vamos selecionar este contêiner, Controle e clique ou Command clique sobre isso, e nós vamos usar Griddify para obter algum espaçamento de 42 em torno dele no topo, assim, e também daqui assim. Acho que 42 está parecendo demais, talvez. Vamos apenas tentar. Agora, o que vamos fazer é alinhar a nossa navegação com estas linhas aqui, assim. Então 42 é o espaço que estou usando na parte superior e na parte inferior, assim, com bom aspecto. Além disso, eu vou fazer o mesmo para este utilizável. Vou alinhá-lo na cruz disto. Agora, você pode ver como ele está parecendo realmente legal, você pode ver o espaço ao redor desta área. É muito manejável, muito bom. Este é o benefício das margens de vida em torno do seu design. Agora, tudo parece bom. Há um pequeno problema que é, você pode ver, esta mão é um pouco transparente no fundo e também neste fundo de arquitetura atrás. Agora, o que está acontecendo aqui é que este telefone é cortado dentro deste contêiner e o contêiner é basicamente opacidade de 90%. É um pouco transparente, 10 por cento de transparência. Está tomando as propriedades deste recipiente. O que vamos fazer é desclicar assim, e vamos usar uma máscara. Comando clique neste contêiner, em seguida, vá para o telefone e clique nisso. Então estamos feitos, nós completamos este projeto. Se tiver alguma pergunta, pergunte-me. Se você quiser mais exercícios ou algo que você tem em mente, você pode me enviar uma mensagem. Se algo parecer bom, vou realmente tentar atualizar este curso. Eu vou adicionar mais um exercício a este curso e então eu vou parar porque eu tenho quase transmitido um monte de dicas de design e técnicas relacionadas ao espaçamento e uso de grade. Se tiver mais perguntas, pergunte-me. Me avise. Se você está enfrentando algum problema, você pode ir em frente e me perguntar a qualquer momento. Se necessário, pode marcar uma videoconferência comigo. Um dos alunos já fez isso. Então vamos passar para a próxima lição. 43. Design de redes de redes de sociais: Neste exercício, vamos projetar algo semelhante a isso. Você pode chamá-lo de um anúncio de mídia social, um anúncio de desconto ou um anúncio impresso. Você pode projetá-lo mesmo no Illustrator ou Photoshop ou qualquer ferramenta que você gosta, mas a base desse design permanecerá a mesma. O que vou fazer é usar um padrão no fundo. Então eu tenho este fundo de sobreposição em cima deste padrão. É um pouco transparente. Então temos texto em três fontes diferentes e poucas cores como esta, laranja pálido e esta cor amarela. Em primeiro lugar, vou mostrar-vos todos os recursos que utilizei nesta palestra. Vamos ver os recursos e onde você pode obter todas essas fontes porque eu misturei três fontes aqui. Um é um pouco que você pode dizer muito largo e muito alto como este. É Aileron, e, portanto, um pouco, você pode dizer fonte de script, e então nós temos essa fonte arredondada, muito ousada Signika. Deixe-me mostrar-lhe todos esses recursos. Primeiro, vamos ver que outras fontes estou usando. Este é o Google fontes Signika Negativo. Esta é a de cima que estou usando. Você pode ver por aqui, é uma natureza muito curvilínea e muito brincalhão. Então temos essa fonte Antre, que é de um cara, Taner Ardali, Istambul, Turquia e realmente se conecta com a próxima letra muito bem. Você pode ver por aqui. Este é outro. Então a terceira fonte que estamos usando é por TipoType Aileron, e é uma fonte gratuita, você pode baixar daqui, digite 'zero' aqui e Adicionar ao carrinho e você pode baixar toda a sua grandeza. Estas são três fontes. Em seguida, movendo-se para os outros elementos. Eu usei este tipo docemente splash coisa aqui, esta arte floral ou como você pode chamá-lo. Depois há este fundo aqui, este padrão. Eu baixei eles gratuitamente e vou mostrar-lhe um site onde você pode baixar todas essas coisas de graça. É basicamente este site. Creative Market sempre mostra seis downloads gratuitos a cada semana e dá-lhe esses fundos, ícones, pincéis e fontes gratuitos e incríveis . Este é o pacote desta semana. Eu baixei essas poucas semanas atrás como este, este Ditsy Floral Digital Pattern por, eu não sei, por JSquarePresents, e então eu baixei este. Eu tenho eles gratuitamente, então eu não recomendo que você comprá-los, mas você pode se inscrever ou criar uma conta neste site e você pode obter downloads gratuitos todas as semanas. Talvez você possa encontrar essas coisas online no Google pesquisando. Talvez você possa encontrá-los livres, mas eu uso esses dois elementos. Padrão digital floral Ditsy e elementos de design de flor desenhada à mão. Vamos começar. Vamos passar para a próxima lição em que vamos começar essa lição e projetar. Vamos passar para a próxima lição. 44. Mídia de redes sociais de design: Na última lição, analisamos os recursos deste exercício de design. Vamos começar. Vou abrir um novo arquivo e o tamanho será 1.400 de largura e 900 pixels de altura. Aperte “OK” e este é o nosso quadro de arte. Para converter esta camada em plano de fundo, basta nomeá-lo de fundo e nós estamos indo para a camada, novo, e fundo de camada. Podemos alinhar as coisas com isso porque está trancado. Agora, nós vamos criar caixa interna sobre isso porque nós tínhamos esta e esta camada amarela e então nós temos o texto dentro. Na verdade, temos um e dois retângulos neste plano de fundo. Vamos criar um outro retângulo. Clique na ferramenta de retângulo enquanto você pressiona “U” no teclado e pressione uma vez assim e o tamanho deve ser 1.200 por 725. Você pode ajustar em seu lado se você quiser, mas eu calculei todos esses tamanhos antes para que possamos configurar rapidamente. Alinhe-os no meio e agora precisamos do terceiro. Terceiro retângulo estará dentro deste retângulo que será o nosso principal traçado amarelo. Será realmente 900 por 500 pixels. Este foi criado, mas você não pode ver as camadas porque é alguma outra cor agora. Vamos alinhá-lo no meio deste retângulo. Vamos nomeá-los de acordo. Esta é a nossa parte traseira transparente. Será um pouco transparente, então esta é a nossa principal fronteira amarela. É assim que vamos projetar esta área, na verdade o que tínhamos é que tínhamos este retângulo como nosso amarelo, que tinha um traço amarelo. Vamos definir o traçado amarelo ir para camada, efeitos de camada, e vamos para traçado, e a cor é F-F-E-E-9-9, pressione “OK”. O tamanho do traço é seis. Estou configurando no lado de fora e isso é tudo que você pode clicar em “OK”, então você pode ir para preencher, pressione zero, e aqui temos o nosso retângulo amarelo. Agora, para o padrão no fundo podemos criar, o que é isso, uma nova camada aqui, preenchê-lo com qualquer coisa que você quiser. Controle+Alt delete para preenchê-lo, como este. Enchi com esta cor. Agora o que vamos fazer é criar um padrão a partir deste arquivo. Vou soltá-lo no Photoshop assim, apenas ignore as cores e vamos criar um padrão. Controle A, selecione tudo isso, e vá para editar, definir padrão e este é o nosso padrão, vamos fechá-lo, e nesta camada 1, que era nossa camada de fundo, apenas uma camada. Nós vamos usar esta camada para o nosso padrão, então camada padrão. Vamos colorir outra coisa para que não se sinta muito estranho. Talvez este, então parece diferente do outro. Não se preocupe com a cor porque nosso padrão vai se sobrepor neste design. Vá para o fim e você verá esse padrão. Vamos redimensioná-lo para 100 por cento. A opacidade deve estar cheia e está parecendo muito grande. Talvez possamos ir a uma região. Podemos reduzir seu tamanho para 50 por cento ou 25 por cento, 25 por cento está ótimo. Pressione “OK” e temos o nosso padrão. Vamos mudar a cor deste para este tom de terra. Este é um pouco do tom da terra, você pode ver aqui. Talvez esta cor ou esta. É uma mistura de vermelho e graxa. Para fazer este tom de terra, você pode usar este. Acho que este está mais perto. Agora, vamos torná-lo um pouco transparente, alterando essa opacidade para 90 por cento. Você pode ver que nosso plano de fundo já está concluído. Vamos criar um padrão aqui. O tamanho do padrão será de 500 por 110 pixels, também será um retângulo aqui assim. Vamos movê-lo acima desta janela, e vamos colorir com alguma cor laranja, talvez esta, uma laranja mais nítida ou esta laranja. Seja qual for a cor que goste, acho que não parece muito bem por aqui. Talvez precisemos de uma cor mais nítida. Algo aqui assim. Vamos diminuir o zoom e ver como está agora. Acho que esta cor laranja está parecendo algo um pouco estranho. Este parece melhor. Vou usar uma cor um pouco mais nítida aqui. Também esta cor parece um pouco estranha para mim. Não sei por que, mas tem algo faltando. Agora, parece ótimo. Não se preocupe com os detalhes finais, podemos afiná-lo no final. Podemos mudar de cor por uma hora, então não quero que perca seu tempo aqui. 45. Mídia de redes sociais: Em primeiro lugar, vamos criar o nosso título, que será em Signika negativo. Selecione a fonte. Você já instalou a fonte, procure aqui Signika. Existem duas fontes, Signika regular e Signika negativo. Vou usar a Signika negativamente, e o tamanho será de 170 pontos. Esta não é uma regra difícil e rápida, não se preocupe onde eu vim com este tamanho, na verdade. Acabei de experimentar e descobri que este é o melhor tamanho que corresponde à próxima linha, deixe-me mostrar-lhe 35 por cento OFF. Neste exercício, não vou contrair este tamanho. Eu não vou movê-lo um pouco menor. Vamos movê-lo para o meio. Vamos criar outra camada e vamos usar a fonte Andre regular. Vamos usar a surpresa de verão linha e o tamanho deve ser 83 pontos. Agora, você pode ver que é quase do mesmo tamanho que o topo. Você pode ver as bordas estão um pouco fora, está acontecendo por causa desse rastreamento, eu acho. Vamos defini-la para zero. Agora, eles são realmente atendidos na próxima carta. Isso é bom, até agora, tão bom, vamos criar outra camada. Este vai ser o texto “PRESSE”. Qual era o texto? A PRESSA expira 31 de julho. Vamos escrever aqui, depressa. A terceira fonte que usamos foi Aileron Regular e vamos reduzir seu tamanho para 50 pontos. Você pode ver aqui que é quase o tamanho do ajuste aqui, na verdade é igual ao tamanho acima da surpresa do verão. Agora, a próxima linha que era código de cupan de verão, alguns dizem código de cupom. Eu digo código coupan, então não se preocupe com isso. Summer16. Será largo e devemos movê-lo acima deste botão. Vou usar uma versão mais leve desta fonte agora. Isso deve ser tudo maiúsculo, então vamos usar este. Vamos movê-lo em torno disso, eu vou alinhá-lo no meio. Você pode usar isso. Criei teclas de atalho personalizadas que expliquei no meu outro curso, onde criei muitos atalhos de teclado personalizados para o Photoshop. Há mais uma coisa, precisamos fazer sobrescrito. Chamamos-lhe sobrescrito? Sim, sobrescrito. Agora, só para ter certeza de que ele vai se alinhar com todos os top, vamos aumentar seu rastreamento, é quase igual ao topo. Surpresa de verão. Por que temos surpresas de verão aqui? Vamos alinhá-los e usar esse espaçamento vertical. Ainda está um pouco fora, então vamos mover tudo no meio assim. Cabe a você, você pode deixar esta mensagem mais perto desta, ou você pode separá-los com o mesmo espaço. Cabe a você o que quiser. Você também pode criar algo como isso, como se eu tivesse duas mensagens de promoção principal na parte superior e, em seguida, a ação na parte inferior. Então separei ambos em duas áreas diferentes. Além disso, se você quiser arredondar este retângulo, você pode ir para este painel de propriedades e obter algum arredondamento. Talvez esteja mais perto desta equipa. É realmente surpresa verão, ou você pode dizer venda de verão. Vou acrescentar mais uma coisa. Vou adicionar um pouco de sombra a este padrão. Vai estar mais perto deste padrão. Assim, você pode ver aqui, um pouco de sombra saindo e você pode aumentar a opacidade desta sombra. Talvez isso seja bom o suficiente. Estamos quase terminando este exercício. Se você quer mudar algo para isso, desculpe, eu tenho a ortografia errada do verão. Agora, é surpresa de verão e talvez precisemos mudar o tamanho para 81 pontos, ajustar de acordo com suas necessidades. Mais um pequeno detalhe. Deixei a coisa do swoosh. Este é o que eu usei. É o Clip Art. Eu mostrei os recursos antes então eu vou apenas arrastá-lo para o Photoshop assim. Vamos reduzir o seu tamanho. Gire assim. Estou pressionando shift para que ele esteja girando com os ângulos que eu especifiquei no Photoshop. Se você não sabe disso, então você deve ir para essas preferências e você deve definir os tamanhos aqui. Nós temos aqui, eu não me lembro agora, mas eu acho que é neste cenário. Você pode encontrá-los aqui. O meu Photoshop está a abrandar. Está parecendo muito grande, então vou apertá-lo um pouco mais. Isto está quase perfeito. Vamos dar-lhe sobreposição de cores porque não queremos um swoosh preto por aqui. Sobreposição de cores, talvez você possa usar este. Cabe a você. Você pode usar branco ou cinza ou o que quiser. Certifique-se de que a opacidade da cor é 100%. Este é um Controle J, e eu vou movê-lo para cá. Vou para o Controle T ou Comando T no seu Mac. Então substitua, sempre que eu digo controle, você substitui com o comando flip horizontal e pressione Ok, e torná-lo um pouco mais perto deste. Agora uma coisa, certifique-se de que este espaço desta linha, esta fronteira para este, este espaço é igual ao espaço por aqui. Isso é uma coisa que você precisa ter certeza. Agora, você pode ver que nós quase terminamos nosso exercício. Talvez precisemos de um botão maior porque está parecendo um pouco menor para mim. Além disso, se você quiser, você pode torná-los mais próximos ou talvez mais espaçosos, depende de você assim. Então talvez torná-lo mais espaçoso. Além disso, eu acho que o botão está parecendo um pouco menor para mim, então eu vou aumentar seu tamanho. Acho que é demais. Talvez a altura vai ser 120 pixels, é bom. Agora, talvez eu precise movê-lo. Estes são apenas os detalhes finais. Você pode usá-los sempre que quiser, ou experimentá-los e apenas bloquear isso. Vou selecionar este, movê-lo um pouco para cima, ou talvez mais perto disso. Então, faz sentido. Eu também vou mover esses dois um pouco mais para cima assim. Então vamos criar um grupo de todos esses elementos principais. Mova-os um pouco para cima. Acho que aqui temos o equilíbrio perfeito. Agora, se você quiser adicionar algo mais a este design, você está livre para ir. Este é apenas um exercício para criar algo semelhante ao, você pode ter visto um monte de anúncios de mídia social como estes, então você sabe como criá-los. Agora você pode ver, eu vejo que há menos espaço aqui do que este aqui. Então você pode ver aqui que é equilibrado. Temos mais espaço aqui. Eu adicionei isso intencionalmente, então vamos adicioná-lo aqui. Então, faça um pouco mais grande assim. Então você pode ver é um pouco de espaço mais equilibrado. Precisamos de mais incrementos de tamanho assim. Então é assim que usamos nosso próprio julgamento e habilidades intestinais para alinhar as coisas e projetar as coisas. Então talvez precisemos de uma cor laranja mais nítida como esta. Isso é melhor, eu acho. Este é melhor. Além disso, precisamos de mais tons de terra, então talvez precisemos nos mover um pouco. Talvez aqui, este parece bom. Então isso vem com a prática. O senso de cor não é fácil de desenvolver. Além disso, essas habilidades de correspondência de tipografia não são mais fáceis de desenvolver. Você pode ver que todas essas fontes estão parecendo bem juntas. Este é um pouco sério, ou você pode dizer um pouco legível, mais legível porque eu queria que o usuário lesse isso exatamente o que é. Isso é muito grande, então eu posso ser criativo com essas áreas. Então surpresa de verão, pois é usado em uma fonte muito grande. Por isso, é bom ir com a fonte do script, tão mais fácil de ler. Certifique-se de que você não tem muito rastreamento na carta. Portanto, ele deve sempre preencher um script em vez de alguma fonte de script quebrada. Então, agora, temos essa área interna de conteúdo. Então vamos fazê-los todos juntos. Também este, mova este aqui. Então vamos agrupá-los juntos. Novamente, estou pressionando Shift. Então este é o nosso conteúdo de design principal. Eu sempre faço isso porque precisamos mover isso e alinhá-lo. Então eu não sei o que está acontecendo, por que não está alinhando com nossos antecedentes. Então vamos movê-lo para cima. Então temos uma camada bloqueada dentro desta. Então desbloqueie isso e vamos movê-lo. Agora, é quase perfeito, por isso é muito mais próximo deste design. Acho que tinha mais cor de pêssego aqui. Qual é a cor, o que é essa cor? B10. Por isso, é mais na sombra laranjada e é na mistura de laranja acinzentada. Então você pode ver aqui, aqui temos controle deslizante de cores. Então aqui temos um pouco de cor mais escura. Eu acho que nem sempre é perfeito, dizer que copiar tudo do mesmo design. Então eu tento criar algo diferente a cada vez. Então isso parece um pouco mais. Talvez eu precise de uma cor mais clara como esta. Por isso criámos este exercício. Nós vamos criar uma nova alternância ou nova variação para este, que foi, eu acho que este. Então faremos isso na próxima lição. Vamos usar este Sian, cor muito siana afiada. Então faremos isso na próxima lição. Então fique atento para esses exercícios e continue coletando diferentes fontes, tente combiná-las e criar alguns projetos usando essa técnica de padrão de fundo. Então, basta adicionar um pouco de contexto em seu design. Então isso parece um padrão de roupas ou sua camisa ou camisa feminina, algo assim. Então vamos passar para a próxima lição. Mais uma coisa, não se esqueça de baixar os arquivos de exercícios, arquivos PSD, arquivos originais que vou incluir. Então também, vou incluir todos os links para todos esses recursos de design como todas essas fontes que eu usei. Então vamos passar para a próxima variação na próxima lição. 46. Toques finais para redes sociais: Olá pessoal. Este é o mesmo design que fizemos na última lição. Acabei de fazer alguns ajustes. Acho que devo compartilhá-los com você. A primeira coisa é que eu movi todos esses elementos no centro. Reduzo o tamanho deste texto de 50 pontos para 45, apenas um pouco maior do que este botão. Se você quiser alinhá-lo com o botão, eu acho que está tudo bem, mas é melhor para mim como se estivesse lá. Também seguir este fundo, era algo mais perto desta área. Cinzento e laranja. Eu mudei em um pouco mais parte superior onde é cor mais pêssego. Algo mais próximo deste, ou talvez deste. Então a terceira coisa que eu fiz foi editar algum efeito, você pode ver aqui é laranja e aqui é uma cor pêssego avermelhada. Eles são como esquema de cores pêssego completamente. Cores avermelhadas e laranja, se você já viu um pêssego, todas essas cores são do pêssego, eu acho amarelo, esta cor e esta cor do botão. O que eu fiz foi adicionar uma sombra interior com esta cor, e55f50. O que eu fiz foi mover o controle deslizante um pouco para baixo e isso é tudo que eu fiz. Eu uso a distância de configurações 81 porque eu preciso de uma área muito boa coberta por aqui. Você também pode fazê-lo com sobreposição de gradiente. Há muitas coisas que você pode fazer para aplicar o mesmo estilo. O tamanho é 128. Isto é o que eu fiz. Além disso, eu mudei o tamanho deste, Eu acho que um pouco 81 pontos. Eu mudei de 83 para 81 pontos. Isso é tudo o que eu acho que fiz. Acho que está perfeito. Mostrei-te isto porque acredito que o design é algo progressivo. Você tenta e tenta melhorá-lo de novo e de novo. Se você está projetando algo e não está parecendo muito bom, levante-se do seu assento e talvez volte mais tarde depois de 30 minutos e comece seu projeto novamente. Acrescentei algumas coisas aqui. Eu vou compartilhar este PSD com você, não se esqueça de baixar este PSD. Isto é tudo sobre este design, na próxima lição vamos projetar a versão alternativa deste. Só vamos mudar algumas cores. Isso é tudo, todo o design permanecerá o mesmo. Vamos passar para a próxima lição. 47. Exercício de design de suculento - Preperations: Nesta série de lições, vamos criar este impressionante olhar fresco e suculento, cabeçalho de receita de refeição saudável. Vou fazer muitas variações, então deixe-me mostrar-lhe as variações. Você pode ver que este é o que eu lhe mostrei. Então temos isso com o botão oval e fonte diferente aqui. Então temos o terceiro que está com outra fonte como esta compartilhada por Venessa Malik ou algo assim. Estes são basicamente quatro fontes diferentes combinados juntos e eu ainda não tenho certeza sobre o quarto, mas eu sou muito - como esta combinação, estes três combinação. Um é muito gordo e você pode dizer tipo espremido, canto arredondado e brincalhão e engraçado, fonte de aparência divertida, este. Isso está olhando bom para este tema, que é fresco e suculento. Então lembre-se do exercício que eu falei, eu tenho um exercícios anteriores onde tivemos essa seleção de fontes temáticas. Esta seleção de fontes é baseada neste tema. Então temos refeições saudáveis, por isso é apenas para ser mais aberto e autoritário que estas são refeições realmente saudáveis. Então temos essa fonte de script usada aqui para Navegar Recepie. Talvez seja para intimidade ou talvez proximidade com o seu cliente ou algo assim. Então, ele está basicamente olhando muito bom com essas três combinações. Vou mostrar-lhe nesta lição que, onde os recursos que consegui para este exercício? Todas essas fontes são grátis, vou te mostrar essas três. Certo, uma fonte é essa Blenda Script. Eu usei esta fonte, esta é uma fonte livre e você pode ver aqui, licença; Livre para uso pessoal e comercial. Você pode baixar esta fonte e instalá-la. Então temos esta fonte Damion, então também baixe e instale esta. Vou compartilhar os links para esses recursos, então baixe-os. Este é Gilroy, É uma fonte premium, mas eles têm duas fontes livres junto com ele. Se você olhar para baixo, você pode ver que este é zero, Gilroy Light e havia mais um, Gilroy Extra Bold, este também é zero. Então baixe essas duas fontes ou você pode ir para Font Squirrel e baixar esses Gilroy. Ele também tem esses mesmos dois tipos de letra. Então temos essa imagem. Eu peguei no picjumbo.com e este é o link, laranjas frescas no mercado de pequenos agricultores. Eu acho que mais uma fonte foi esta Doze Free Font e eu baixei a partir deste freedesignresources.net. Então você pode ver aqui pessoal e comercial, é gratuito e projetado por Kenny LKC. Então baixe todos esses recursos antes de iniciar este exercício. Vamos avançar e cavar para projetar este exercício incrível aparência. 48. Exercício de tipografia suculenta: Agora vamos começar e criar este exercício incrível, fresco e suculento. Vamos começar com um novo arquivo. O tamanho será 1920 por 1080, e conteúdo de fundo, não gerencie este documento de cor, clique em “OK”. Primeiro, vamos arrastar nossa imagem até aqui, então vamos arrastar a imagem. Vamos arrastar a imagem para o Photoshop e vamos soltá-la. Ele será convertido em um objeto inteligente e nós vamos escalá-lo assim. Não escale muito, já está nas fronteiras. Vamos pressionar Enter, e esta é a nossa prancheta ou fundo principal que está pronto agora. Selecione esta camada e nós estamos indo para convertê-lo em camada de fundo. Este é um bug com este Photoshop aqui, então ele desapareceu meu passado. Esta é basicamente a prancheta. Excluí a prancheta selecionando-a e meu plano de fundo está de volta. Agora vamos jogar algumas fontes nele, e primeiro de tudo, vamos selecionar essa fonte Doze, que era nossa fonte principal. O tamanho será de 96 pontos. Estou usando quase essa escala, então o tamanho será este, fresco e suculento. Controle A, Controle Alt H, para centralizá-lo. Estes são os meus atalhos personalizados. Se você não sabe como criá-los, você deve olhar para o meu outro curso, design de interface do usuário no Photoshop. Este é criado, agora em seguida vamos criar este retângulo arredondado ou talvez este retângulo. Crie assim. Basta usar a largura da cabeça para as proporções, assim. Nós vamos colorir branco, e vamos mover este fresco e suculento para cima. Primeiro vamos mudar o raio do canto. Vá para este painel de propriedades para este retângulo, e este canto será 60, e desbloqueá-los. Vamos escolher configurações diferentes para eles, como 60, 60, 0 e 0. Agora deixe-me colorir outra coisa para que você saiba que está ali. Agora o que vamos fazer é colocar isso em primeiro lugar dentro deste retângulo, assim. Está um pouco acima, então use seu centro visual. Há dois centros em um redesenho. Um é calculado por máquina e o outro é calculado pelos seus olhos. Agora estou movendo-o para baixo. Meus olhos pensam que está no centro. Agora está quase no centro. Isso é quase perfeito. Agora o que vamos fazer é clicar em Control sobre isso para selecionar esta seleção de camada, esta fonte. Em seguida, vamos selecionar este retângulo, o retângulo abaixo, e inverter a seleção, Control Shift I, e, em seguida, clique nesta máscara. Você pode ver aqui, ele criou uma máscara. Esta é esta camada que a nossa seleção é quase transparente. Se você não entende, vou repetir este passo novamente. O primeiro passo foi que vamos selecionar esta camada. Controle clique sobre isso para selecionar esta seleção, em seguida, inverter a seleção, Control Shift I. Nós selecionamos tudo o resto, esta área dentro deste texto. Inversa a seleção, em seguida, clique nesta camada, e clique sobre isso. Agora você pode ocultar esta fonte e você pode ver que esta camada foi esvaziada. Mais uma coisa que esqueci, vamos usar uma grade modular aqui. Vamos dividir tudo isso em sete divisões. Por que sete? Como nosso design é basicamente centralizado, tudo é centralizado, então estamos basicamente usando dois módulos no topo para o espaço e dois na parte inferior, e três dentro desta área. Três módulos aqui em direção ao topo, vamos mostrar-lhe para que você possa entendê-lo melhor. Com Griddify eu vou dividi-lo assim nesta direção com isso. Vou ao Colón de Controle mostrar minha nota. Se você não tem Griddify você pode usar esta vista aqui, e o novo layout de guia. Deixe-me mostrar-lhe outro caminho. Vamos limpar essas diretrizes claras do Canvas, e vamos criar um novo layout de guia. Neste exemplo, não precisamos de colunas porque tudo é centralizado. O que vamos fazer é precisarmos de filas, sete linhas sem qualquer calha. Como isso. Além disso, se você quiser remover as margens, é melhor. Sete linhas, você pode criar um layout de guia assim. Aqui temos este retângulo quase concluído. Vamos movê-lo para baixo nessas laranjas assim. Acho que é melhor. Agora vamos selecionar a segunda fonte que vai ser o nosso Gilroy. É basicamente uma fonte geométrica. Eu vou usar Gilroy bem aqui, e nós vamos escrever refeições saudáveis em todas as maiúsculas. Se você se lembra, usamos todas as maiúsculas para títulos, então vamos usá-lo, colorir para branco. Precisamos dimensioná-lo um pouco para baixo, talvez 60. Mova-o aqui no meio, Controle A. Vamos fazê-lo no meio, assim. Mais uma coisa, vamos usar algum rastreamento para abri-la, assim. Acho que 75 será bom, assim. Está parecendo um pouco pequeno para mim, talvez eu acho que devemos usar 72. Setenta e dois é bom, 72 e 96, estes são dois tamanhos de fonte que estamos usando agora. Vou movê-lo um pouco para baixo, assim. A próxima coisa é que vamos criar um botão aqui. Para o botão, vamos usar retângulo arredondado, ou talvez apenas o retângulo, retângulo regular, e vamos criar um botão como este. Agora, apenas esqueça a cor agora nós vamos usar traço aqui, traço de quatro pixels. Deve ser branco, e deve ser 100 por cento opaco. Vamos usá-lo do lado de fora. Agora, uma coisa nós vamos usar este preenchimento para zero. Vou te mostrar mais um truque agora. Agora vamos adicionar a terceira fonte para este, que era Damion, eu acho. Sim, foi Damion. Este aqui, Damion regular, e nós vamos escrever aqui a receita de navegação. Acabei de adicionar um “S” aqui. Agora, vamos reduzi-lo para 36. Não, acho que 36 é muito pequeno. 48, 48 é muito grande, então vamos encontrar um meio termo, talvez 42. Não se preocupe com a balança. Neste momento, estamos usando nossa própria imaginação ou o que você pode ver. Agora, nós quase temos o nosso botão aqui. Agora adicione algumas flechas no lado negativo. Mais uma coisa que você pode ver, que o nosso texto não é visível. Agora, é um truque simples. Como nosso plano de fundo é preenchido, movemos o preenchimento para zero por cento, ou estamos usando algum preenchimento aqui. Você não pode notar este preenchimento agora, mas ele está lá. Nós escurecemos o fundo um pouco abaixo deste texto e você pode ver que ele está olhando incrível. Este é o truque que usei aqui. Você pode não notar, mas você pode ver aqui, cinco por cento de preenchimento. Agora, estou usando 12 por cento de preenchimento. Você pode configurá-lo onde você gosta, então eu gosto daqui. Agora vamos adicionar uma flecha aqui. Para isso, vamos usar nossa fonte incrível. PS esta extensão. Se você não sabe como instalá-lo, você deve ir e tal para ele, fonte incrível extensão PS e instalá-lo. Eu falei sobre todas essas extensões e extensões secretas no meu outro curso, que é o design da interface do usuário para o Photoshop. Então o que vamos fazer, é flecha, então talvez precisemos anotar. Este, é o que precisamos. Vamos dimensionar um pouco mais. Talvez aqui, movê-lo para baixo, controle A movimento, ele no centro. Também precisamos emparelhar isso. Isto é um botão. Então nomeie o botão. Vamos usar sobreposição de cor para esta seta, vamos usar cor branca. Vou alinhar tudo no mesmo meio. Agora você pode ver, nós já criamos muita bondade. Agora, há mais algumas coisas que eu fiz ou você pode. Você não pode ver agora, deixe-me mostrar-lhe. Se você olhar para essas refeições saudáveis, há uma sombra vermelha ao redor. Então, nessas refeições suculentas, você pode ver que há alguma sombra aqui nessas áreas. Então, esses pequenos toques ou detalhes realmente impactam ou criam um impacto muito grande no usuário. Você pode não sentir isso muito instantaneamente, mas está lá. Então, para estas refeições, eu vou usar algumas gotas de sombra e a cor vai ser esta leitura bf 4.000. Você também pode provar a cor daqui, aqui, ou talvez aqui, depende de você. Como este. Você pode fazer uma amostra de uma cor da imagem assim. Eu provei daqui agora mesmo. Agora, é assim que você pode usar 30 por cento multiplicar, manter a mesma distância espalhada para no mínimo dois e três pixels. Não muito, mas é do seu agrado. Se você quiser aumentá-lo, você pode aumentá-lo. Então é assim que temos usado. Se você quiser adicionar outra sombra, vamos adicionar outra sombra. Agora o que vamos fazer, é adicionar uma sombra escura aqui e vamos espalhá-la assim. Como este. O que estamos fazendo é, na verdade, deixe-me mostrar o efeito. Se eu tentar esconder isso, você pode ver o efeito indo e voltando. Na verdade, estamos a torná-lo mais visível aqui. Então, se eu adicionar alguma sombra ou sombra muito difundida em torno dela, você não vai sentir que a sombra está lá, mas vai fazer seus textos parecerem mais nítidos e fáceis de ler. Você pode ver se eu tentar aumentar a multiplicação desse efeito, você pode senti-lo assim. Também vou aumentar isso um pouco. Está realmente ótimo. Quatro. Vamos movê-lo para o normal em vez de multiplicar. Pressione Ok. Agora está ótimo e acho que quase terminamos, só precisamos de mais um aqui. Então nesta camada, esta é a nossa principal camada fresca e suculenta, nova camada suculenta e nós vamos adicionar uma outra sombra aqui, cair sombra assim. Não vai ser este, vai ser este vermelho. Agora, o que vamos fazer, é mantê-lo muito pequeno assim. A distância seria de um pixels ou dois pixels, algo mais próximo disso. Faça 35 pixels, e faça dois e este três. Então é assim que eu uso esse efeito. Talvez você possa aliviar mais esse efeito, torná-lo mais leve assim. 15, não, 15 é para acender. 25 é bom. Se quiser tentar, pode tentar algo assim. Você pode ver como esse efeito está saindo. Então mantenha esse tamanho no mínimo. Talvez dois pixels seja bom. Também esta distância, você pode ver como ele está movendo toda a área acima e para baixo. Também mantê-lo muito mínimo, eu acho que dois pixels é mais do que suficiente, você não pode ir além disso porque ele vai mostrar áreas mais distorcidas aqui na parte inferior. Então isso é bom. Acho que estamos quase terminando nosso exercício. No próximo exercício, vamos fazer algumas variações e também vamos reanexá-lo para os detalhes finos. Então vamos passar para a próxima lição. 49. Exercício de tipografia suculento em suculento: Nesta palestra, vamos fazer alguns retoques finais que são realmente importantes para obter a forma real do seu design. Nós quase terminamos tudo, mas está olhando para fora devido a alguns problemas. Vou criar a grade, não sei por que não está mostrando minha grade. Onde está a minha rede? Desculpe. Eu só quero minhas linhas de grade aqui. Agora, você pode ver a distância no topo, este é um problema com um monte de novos designers, é mais do que a distância na parte inferior. Isso é o que torna nosso design um pouco, você pode dizer, “Não em harmonia.” Vamos usar a cabeça neste jogo. Agora, esta seta, eu vou movê-la para baixo por 1, 2, 3, 4, ok, 24 pixels. Vamos fazer este botão ficar aqui onde quer que esteja. Nós vamos mover essas duas camadas superiores no topo um pouco para cima assim. Talvez assim. Agora, a próxima coisa que você vai fazer é continuar escondendo e mostrando suas linhas de grade guias e ver se esse design está parecendo equilibrado ou não. Se você quer movê-lo para baixo ou talvez você precisa movê-lo para cima, é assim que funciona. Você vai movê-lo para cima e para baixo. Você também pode fazer algo assim. Só tem metade das letras e o resto das cartas assim. Você pode esconder esta sombra, apenas manter a sombra vermelha. Também às vezes as pessoas colorem isso, alguma outra metade de cor, e a outra é colorida em alguma outra cor. Você também pode ver aqui que estamos tendo algum problema como se tivéssemos algum outro elemento vindo dentro disso. O que vamos fazer é duplicar a nossa camada, esta camada de fundo, e vamos ajustá-la. Nós vamos movê-lo para cima. Temos um problema aqui porque a imagem original está perdida. Vamos torná-lo um pouco mais grande assim, mais perto e mais maior. Mexa-se assim, e teremos nossas laranjas frescas e suculentas de volta no quadro. Agora, vamos mover essas refeições saudáveis um pouco para cá, eu acho que está bom. Talvez eu acho que podemos mover este botão e esta seta um pouco para cima, talvez 1, 2, 3, 4, 5, 6, 60 pixels na parte inferior. Deveríamos também medir este. Então 1,2, 1,2,3,4, temos 24 e 60 pixels aqui. Ainda assim, acho que está faltando algo. Então eu vou movê-lo para trás um pouco assim, e nós vamos novamente movê-lo mais para cima, um pouco mais para cima. Sim, acho que está melhor agora. Se você quiser torná-lo mais fino porque este botão está ocupando mais espaço. Então vamos torná-lo um pouco magro. Vá para esta altura e faça 85 pixels, algo assim. Está parecendo melhor. Precisamos de mais foco e mais energia aqui nesta área e não neste botão, por isso faça-o magro. Além disso, vou ver se este texto está alinhado com este botão. Agora, eu acho que nós estamos quase terminando este exercício. Talvez precisemos mover este fundo um pouco para cima assim. Torná-lo mais grande assim. Penso que fizemos este exercício, que quase completámos o efeito final. Além disso, se você quiser torná-lo mais grande, você pode torná-lo mais grande assim. Então tem mais efeito como este. Outra coisa que você pode fazer você pode mover essas refeições saudáveis no topo e você pode mover esta seta um pouco para cima assim. Talvez possamos mover o botão, talvez tenhamos 1 e 1, 2 assim. Se você tentar aumentar o tamanho deste bloco, ele vai aumentar de tamanho proporcionalmente, então não se preocupe com isso. Agora, vou voltar às minhas configurações anteriores. Não quero que pareça muito grande. Acho que devemos mover o tamanho deste um pouco para baixo. Agora, parece mais equilibrado. Refeições saudáveis são um pouco menores, são 60 pixels, este é 96, e isso é, eu acho 42. Vamos fazer 40, 42 está parecendo um pouco maior para o meu gosto. [ inaudível] e eu vou me mover um pouco para baixo. Apenas centralizando visualmente. Agora, este é o nosso último exercício. Estes são realmente importantes, esses toques finais. Agora, para o botão, eu vou mudar o botão, e nós vamos usar o outro botão aqui, como fizemos antes, e esse era o nosso botão Eclipse, 190 por 190, e eu vou colocá-lo sobre Aqui. Agora, vamos usar a fonte Blenda Script sobre isso, então eu vou selecionar o script blenda. Agora, eu vou centralizá-lo, aqui assim, e também vou fazer o tamanho um pouco menor, 32 pixels, escondendo o botão na parte inferior. Também acho que está parecendo muito pequeno, então torná-lo um pouco maior. Vamos bloquear em tamanho e aumentar sua altura para 200 pixels assim. Também vamos precisar dessa flecha angular para baixo, então eu vou usar essa seta aqui, e vamos movê-la para cima neste eclipse. Esta é a nossa flecha. Você pode usar uma seta, você pode duplicá-la, depende de você. Agora, chegando a este script de navegação, temos muito rastreamento aqui, então vamos mantê-los perto porque é uma fonte de script. Nas fontes de script, sempre certifique-se de que você não usa muito rastreamento, ele vai separar seu efeito assim. Você pode ver que eles ficam bem quando eles estão muito perto assim. Portanto, sempre certifique-se de que ele está definido como 0 em fontes de script. Se você quiser torná-lo mais grande como 36, ok 36 parece melhor. Deixe-me mostrar-lhe mais um truque aqui. Se você vai para este S, e você pode ver que temos mais alguns recursos disponíveis aqui. Estes são chamados de ligaduras ou mais recursos em fonte de tipo aberto. Se eu mudar para este estilo alternativo, você pode ver como esta swash aconteceu abaixo minhas receitas S. Também você pode dar o mesmo efeito a este E, se você selecionar isso, você pode ver aqui. É assim que podemos usar efeitos alternativos e caracteres alternativos para o mesmo tipo de letra. Este recurso não está disponível em todos os tipos de letra ou tipos de letra, está disponível em alguns deles. Então sempre procure por essas opções aqui. Se um estiver habilitado, você poderá usá-lo. Vou reverter agora mesmo. Talvez isso pareça melhor para mim, eu não gosto dele em tamanho muito pequeno, então se você tem uma fonte de tamanho muito grande você pode usar esses efeitos alternativos. No tamanho pequeno, eu não recomendo usar esses swashes de terminações florais. Então este é o nosso próximo. Podemos duplicar essa seta e movê-la para baixo e reduzir sua opacidade para 50 por cento ou talvez 30 por cento, o que quiser e como quiser. Acho que uma flecha é mais do que suficiente aqui, então use isso assim. Agora, por que essa cor está ótima nisso porque eu provei a partir daqui. Então você pode provar a cor daqui. Talvez esta cesta aqui. Então foi assim que eu criei a segunda alternância para este projeto, e eu acho que isso vai terminar meu trabalho aqui. Eu não recomendo que vamos adicionar outra fonte aqui. Se você realmente quer outra fonte, eu usei esta. Este é o meu aluno Saqib Ameen. Então receita por Saqib Ameen e fonte que eu estou usando realmente. Uma fonte geométrica e esta também é geométrica, então duas fontes geométricas um script e uma fonte um pouco arredondada e divertida. Você pode adicionar uma fonte geométrica aqui se quiser, e você vai adicioná-la no último módulo aqui nesta área. Mantenha-me atualizado sobre este design. Vou compartilhar esse PSD com você. Então eu vou guardá-lo para a parte suculenta 2 e me dizer se você pode criar algo assim. Este é também um exercício, tente criar algo assim. Você também pode mudar o título aqui, como talvez liquidificador suculento, ou algo assim. Espero que você tenha gostado desta lição, e se você enfrentar algum problema, ou não conhece as teclas de atalho, você deve entrar em contato comigo ou fazer meu outro curso que é o design da interface do usuário no Photoshop. Cuide-se, e vamos para a próxima lição. 50. Introdução a ponto (PT) em dispositivos de IOS: Primeiro de tudo, você precisa entender quais são esses tamanhos de pontos porque todos os tamanhos para o design do iPhone estão em pontos. Então você precisa entender dois conceitos aqui. Um é pontos e um é este 1x, 2x, e 3x, então é chamado basicamente densidade de pixels. Agora, o iPhone original quando ele veio, ele tinha tela pequena e a densidade de pixels era 1x, então isso significa que se as especificações do iPhone são 320 por 480, isso significa que o mesmo deve ser nos pixels. Se você ver abaixo, ele é traduzido em pixels. Então 1x significa que é o mesmo, e quais são os pontos? Os pontos são basicamente unidades de medição relativas para Android. Eles têm diferentes DPs e SPs e para iPhone são pontos. Este é o tamanho da tela, 320 é a largura, 480 é a altura. Agora, se você vier para o iPhone, que é o iPhone 5, você pode ver 320 largura é a mesma e o 568 é a altura. Agora, se você ver tamanhos reais de pixel, seu tamanho real de pixel é o dobro de seus pontos. Então 320 multiplicar por 2 é igual a 640, 568 multiplicado por 2 é igual a 1,136. Agora um ponto é basicamente igual a dois pixels. Aqui tivemos no iPhone original, um ponto é igual a um pixel, agora temos um ponto igual a dois pixels. Isso continua até chegarmos a este iPhone 6 plus, que tem 414 pontos. Então 414 multiplicado por 3, isso é 3x. Cada ponto contém 3 pixels, portanto, cada ponto é igual a 3 pixels, então é 1242 pixels real, e é baixado pela amostra do dispositivo iPhone 6 para 87 por cento para estar em 1080 por 1920 tamanho de alta definição. Tenha em mente toda essa relação que temos pontos, que são realmente iPhones próprias unidades de medida relativa. Então, tudo estará em pontos, até mesmo o tamanho do seu texto, que discutiremos na próxima palestra será em pontos. Se você estiver projetando para esse tamanho, 320 por 480 no Photoshop, não é necessário alterar o tamanho da fonte. Você deve usar o mesmo tamanho de fonte e ele será 320 por 480 porque seus pixels e pontos correspondem. Então, se você tentar projetar para o iPhone 5, seus pontos serão diferentes. Também neste, porque nossos pixels, agora pixels têm proporção diferente nesta tela. Aqui duplicamos os pixels, aqui triplicamos os pixels na mesma tela. Então, antes de projetar qualquer aplicativo para iPhone ou qualquer coisa, você deve entender toda essa relação entre pontos e pixels. Aqui está outra explicação de tamanho de tela muito boa por esse Kyle. Encontrei-o online. Kyle Larson. Você pode ver aqui é o tamanho real da tela, 5,5 polegadas, então temos o tamanho da tela em pontos, multiplicar por 3x, e os pixels renderizados devem ser 1.242 por 2.208 pixels. Em seguida, ele é amostrado para baixo por pixels físicos, que é pixel de dispositivo, no dispositivo eles serão exibidos 1080 por 1920. É assim que todos esses pontos e pontos são convertidos em pixels reais. Estes são os pixels que vamos projetar para 1.242 por 2.208. Aqui está uma comparação relativa no Photoshop, então eu vou compartilhar esse arquivo PSD com você, então não se preocupe com isso. Estas são quatro pranchetas diferentes. Se você não sabe sobre pranchetas, você deve ver meu outro curso sobre design de interface do usuário para iniciantes. Este é o iPhone original, isto é 320 pixels. Então eu estou apenas agora calculando a largura. Não estou mostrando altura. Então 320 pixels no iPhone original é 320 pontos. Então este é o tamanho da tela. Então, no iPhone 5, temos 2x, por isso é quase um duplo. Então 320 pontos, mas o tamanho da tela em nosso documento do Photoshop é de 640 pixels de largura. Então temos 375 pontos e 750 largura de pixel, é um duplo. Então, no iPhone 6 Plus, este é o iPhone 6 Plus, então temos 1.242 pixels, que é amostra baixa para 1.080 pixels. tamanho real do ponto é de 414 pontos. Deixe-me mostrar um exemplo no Photoshop sobre como vamos escalar todas essas coisas, todas essas telas. Primeiro vamos abrir a primeira tela, iPhone original. O padrão é projetar usando esta tela. Então é 1x. Então, sempre projetar em 1x em vez de 2x ou 3x. Então eu vou clicar aqui. Este é o nosso quadro de arte. Então eu vou usar a tela compacta sensível, semi-negrito, 32 pontos diz o meu rumo. Este é o meu rumo. Vamos colocar uma mensagem falsa aqui. Vamos colocar o texto falso. Eu vou colocar 16 pontos aqui e eu vou usar tipo, colar Lorem Ipsum. Vamos ajustar a altura da linha para 24. Vamos mudar a cor para que não pareça tão diferente do nosso título. Agora nós configuramos esta prancheta, que é o nosso iPhone original. Agora, como vamos projetar nossa segunda tela ou terceira tela, então vá para este tamanho de imagem. Você pode facilmente dobrá-lo 640 e certificar-se de que tudo está selecionado assim. Isto está na fechadura. Então estes dois estão trancados. Eles vão aumentar uns com os outros. A resolução será de 72 pixels, o mesmo reamostragem e clique em “Ok”. Agora, esta é a nossa tela do iPhone 5, por isso é 2x. Multipliquei para 2x. Você pode ver aqui 640 x 960. Nossa altura real é diferente, mas não se preocupe com isso agora. Agora, vamos verificar os tamanhos da fonte. Eu cliquei duas vezes nesta fonte, é 32 pontos. Você pode ver que o Photoshop dobrou automaticamente o tamanho da minha fonte. Antes era 16 pontos para o meu texto, agora é 32 pontos. Certifique-se de que é assim que a escala está acontecendo. Se eu reverter para o tamanho original e eu ir para o terceiro 3x, e então o que eu preciso aqui é 3x significa 320 por, foi algo como 1.080 talvez. Era 1.242. Então eu vou usar 1.242 e pressionar “Ok”. Esta é a minha tela do iPhone 6 plus. Vamos ver como foram os tamanhos. Então você pode ver o tamanho do meu título foi aumentado para 124 pontos e o tamanho do meu deck é 62. Acho que deveria ser 64, na verdade. Agora, o problema está entre essa multiplicação desses quatro tamanhos. O que está acontecendo aqui é que o Photoshop está tentando multiplicar e ajustar nossos tamanhos de fonte. Certifique-se de que os tamanhos de fonte são múltiplos de dois. Se eles são multiplicados por três ou algo como dois ou três, deve haver um valor inteiro. Agora, 16 deve ser 3 multiplicado por 3, 16 três são 48. Acho que é o tamanho correto. Então, para o título, deve ser 32 multiplicado por 3 é 96, então deve ser 96. Esta é a nossa rubrica e deve ser de 96 pontos. Algo como isto. Não, não sei por que o Photoshop o escalou de forma diferente, mas há outra maneira de dimensionar isso. Vou mudar tudo de volta para o meu tamanho original, que é este. Agora eu baixei algumas ações que estão relacionadas à escala por ações de escala B Django. Você pode ver por aqui. Se você não sabe como instalar as ações, você deve assistir meu outro curso onde eu discuti todos os conceitos básicos do Photoshop. Agora, vamos escalá-lo para 300 por cento. Estou selecionando isso e tocarei. É assim que ele foi dimensionado para 300 por cento. Agora você pode ver que os tamanhos são perfeitos, então eu estou preferindo que você deve usar essas ações. Incluirei o link para aumentar ou diminuir a escala. Então vamos reduzi-lo assim. Agora, isso é tudo sobre pontos e pixels e como vamos usar diferentes tamanhos de tipos e como eles mudam de um tamanho para outro. É assim que estamos multiplicando nosso tamanho quando estamos projetando em que resolução? Setenta e dois pixels por polegada. Há outra maneira que eu vou discutir nas próximas lições que é como ajustar diferentes tamanhos de fonte. Vamos usar 144 e 216 pixels de resolução por polegada aqui. Para esta lição, eu só queria que você entendesse como esses pixels e pontos funcionam uns com os outros e como vamos escalar nosso design 1x, que era, este era o design real que estava em 320 x 480. Nós aumentamos isso em 200 por cento e 300 por cento e tentamos usar essas ações B Django. Estas são realmente grandes ações. Isto é tudo sobre escala, tipo de ponto, pixels e pontos físicos, e renderização em 2x ou 3x Retina ou 3x Retina, o que quer que seja. Vamos passar para a próxima lição. 51. Especificações de tipografia para IOS: Nesta lição, vamos olhar para as diretrizes de interface humana da Apple, e estas são chamadas de Diretrizes de Interface Humana do iOS. Vamos olhar para a seção de tipografia. Você pode ler tudo sobre isso aqui. Se você quiser baixar, você pode ir para Recursos e baixar as fontes para as pessoas que estão usando o Mac, eu acho que eles já podem ter instalado essas fontes San Francisco, então há duas fontes basicamente. Um deles é o San Francisco UI Text e San Francisco UI Display. A exibição é para cabeçalhos e o texto da interface do usuário é para parágrafos e texto com tamanho pequeno. Sua especificação é se você tem 19 pontos são menores do que você deve usar San Francisco UI texto e se temos 20 pontos ou maior do que devemos usar fonte de exibição porque eles são feitos para tamanhos de texto maiores. Aqui estão mais alguns pontos sobre as Diretrizes do iOS. Enfatize informações importantes. Já sabemos como usar o peso da fonte, o tamanho e a cor. Então, se possível, use uma única fonte porque misturar muitas fontes pode ser um pouco desleixado, ele também pode retardar seu aplicativo ou algo assim, então esta é a sugestão. Se você pode possivelmente usar esta fonte San Francisco você deve usá-lo porque é fonte do sistema. Ele será carregado facilmente em seu aplicativo. Para usuários do Windows, você deve baixar sua fonte San Francisco a partir daqui. Este é o repositório GIT. Além disso, você pode Google sobre isso, em seguida, baixar San Francisco fonte para Windows. Você certamente encontrará muitos links basta baixá-lo e instalá-lo em seu PC. Aqui estão algumas especificações se você estiver usando San Francisco UI display, que é para cabeçalhos, há uma linha aqui que é o tamanho da fonte em 2x, 144 P PI. Basicamente está dizendo que em 2 x, em telas de retina para iPhone 55 S, 6, não 6 plus. Estes são tamanhos para adicionar telas 2x Acho que discutimos tudo isso na lição anterior. Estes são os tamanhos de fonte em pontos. Isto é rastreamento. Rastreamento é basicamente a quantidade de espaçamento entre letras que temos entre em nosso texto ou parágrafo. Vamos ajustar isso usando o rastreamento de lojas de fotos e estes são alguns tamanhos de fonte para nossos cabeçalhos. Agora, chegando a este texto de IU de São Francisco, há muitos tamanhos diferentes em pontos. uma vez, temos muitos rastreamentos. Você pode ver que quando o tamanho é muito baixo, rastreamento é muito alto porque o texto muito pequeno não é legível se as letras estiverem muito próximas. Em seguida, vamos projetar algo como isso para o tamanho original do iPhone 1 X, 2 X e 3 X. iPhone, iPhone antigo iPhone regional, iPhone 4, eu acho, iPhone 5,6 e iPhone 6 Plus. Vamos passar para a próxima lição. 52. Como criar várias telas de IOS de resolução com o Photoshop: Vamos criar um quadro de arte com todos esses tamanhos diferentes. Vamos criar um novo arquivo com este quadro de arte. Vamos usar o nosso tamanho é 320 por 480. Aperte “Ok”. Agora vamos adicionar outra tela aqui. Este é o iPhone quatro ou iPhones antigos. Em seguida, vamos clicar neste ícone de mais e vamos selecionar o iPhone cinco aqui e clicar nos aqui. Esta vai ser a tela do iPhone 5s. Então vamos adicionar mais um aqui. Vamos criar outro aqui. Vou clicar no iPhone 6 e clicar aqui uma vez. Então eu vou criar outro aqui, que é o iPhone 6 Plus. O último foi selecionado. Eu vou clicar neste e eu vou pressionar ou destacar assim. Agora diminua o zoom e você pode ver que estas são todas as telas. Vamos alinhá-los. Esta é uma linha para este seclect este. Eu sou o controle de jogar estes para alinhá-los. Então, todos os nossos quadros de arte estão prontos, então vamos começar. Primeiro vou começar com a nossa tela mais pequena, que é 1x. Vou usar meu texto de IU de São Francisco. Primeiro vou desenhar algumas margens em torno dele. Agora eu vou usar photoshops, padrão, GridLayout e vamos remover as colunas. Vamos usar algumas margens no topo, 20, 20, 20 e 20. Esta é a nossa moldura. Nós vamos projetar nele. Eu escondi todas as outras placas de arte para que possamos facilmente projetar nele. Vou selecionar o texto aqui. Vou clicar e arrastar assim. Este é o nosso principal título. Nosso título deve ser 32 pixels ou 32 pontos. Vou definir o tamanho de 32 pontos daqui, aqui temos um tamanho de ponto diferente é 32 e 12 pontos de rastreamento. Aqui tenho, vamos ampliar para 100 por cento. Agora o nosso documento está pronto, nós estabelecemos as margens em torno dele. Nós vamos usar a ferramenta de texto e desenhar alguma linha aqui para obter o nosso título. Vamos usar 32 pontos com a tela de UI de São Francisco. Vamos usar semi negrito. Eu vou escrever aqui este, meu grande e longo, longo caminho, e é só por diversão. Vou mudar a altura da linha para 1,5. Acho que se o rastreamento foi o 12º, acho que o rastreamento foi 12 pontos. Rastreamento está definido como 12, e eu vou definir isso para 36 pixels como a altura da minha linha, então este é o meu rumo. Vamos mudar a cor para esta cor azul. Agora vamos adicionar mais texto aqui. Vou selecionar este Lorem Ipsum, Lorem Ipsum. Vamos usar 14 pontos com 21 pontos de altura da linha, e é menos 11 em San Francisco IS diretrizes de interface humana. Vamos configurá-lo para talvez precisemos de um pouco de cor maçante, algo assim. Agora vamos ampliar um pouco mais para que possamos ver o espaçamento. mais um texto publicado em 6 de maio de 2016. Eu vou selecionar este t e h, e eu vou usar este comando para torná-lo sobrescrito ou subscrito. Eu não sei o que isso disse. É sobrescrito. Agora vamos mudar a cor para este título. Esta data. Eles mudaram a cor para um pouco de cinza maçante. Vamos alinhá-lo a esta linha, assim. Mode, agora vamos usar 12 pontos aqui para a data e eu vou ver quais são as especificações para rastreamento para 12. Vamos usar Zeroover aqui, assim. Vamos ver como é este. Eu acho que por 14 pontos, é menos 11, então deve ser menos 11. Tudo está pronto, então vamos copiar isso para nossos outros quadros de arte. Agora vamos usar todas essas configurações e todo esse texto, e vamos duplicá-lo para nossas outras placas de arte, então vamos diminuir o zoom. Vou arrastar o meu quadro de arte até aqui, alinhá-los com estes. Agora eu vou selecionar todo o texto, excluir esta camada vazia, também, esta em um grupo. Basta dar um nome de texto, e eu vou usar Alt e arrastá-lo para o próximo. Vamos esconder outras, todas as outras placas de arte como essa. Basta ampliar este 100 por cento. Agora, se você se lembra, estamos agora no iPhone 5. iPhone 5, agora o que vamos fazer é dimensionar esses textos e vamos “controlar T”. Nós vamos mudar a largura disso também. Vamos fazer isso por cento e vamos mudá-lo para 200 por cento. É assim que vamos encaixar tudo aqui. Assim, e se você quiser definir as margens, você pode definir a sobrecarga de margens. Agora, se você verificar os tamanhos de toda a força, você pode ver que está perfeitamente dobrado. Os 64 pontos e tudo o resto é o mesmo. Se você quiser, porque temos mais altura, você pode arrastar isso assim, e nós podemos ter mais mensagens aqui. É assim que vamos usar outras telas com isso, então nós completamos duas telas. Eu não estou usando nenhuma margem, você pode usar as margens, você pode usar margens em cada uma dessas telas. Talvez o dobro das margens ou as aumente em 10 pixels, o que você gosta mais. Agora vamos passar para o próximo, que é o iPhone 6. Agora vamos copiar novamente isso e vamos arrastá-lo até aqui na tela do iPhone 6. Você pode ver que o tamanho do nosso texto deve ser o mesmo. Só temos um pouco mais de tamanho de tela em pixels ou tamanho de tela física. Vamos apenas aumentar nossos tamanhos, tamanhos parágrafo na largura e também na altura. Também podemos ir para o título e podemos arrastá-lo e torná-lo igual ao nosso parágrafo. Agora temos mais espaço aqui para que possamos mudá-lo para cima. Agora você pode ver como isso vai mudar em telas diferentes porque nossos tamanhos de tela e dimensões de tela, temos mais espaço em algumas telas e alguns em algum esquema temos menos espaço. Vamos manter tudo igual. Tente copiar todas as distâncias entre diferentes elementos da mesma forma. Se você quiser aplicar ritmo vertical, você vai aplicá-lo porque se eu tentar aplicar verticalmente então não, eu acho que esta palestra vai durar 30 minutos. Não quero que seja tão longo. Aqui temos a última tela, que é o iPhone 6 plus. Agora eu vou selecionar novamente isso e eu vou pressionar “Alt” e arrastá-lo para aqui assim. Agora, este é o nosso iPhone 6 Plus. Vou mudar o nome deste quadro de arte. Agora aqui você pode ver esses títulos e tudo está parecendo um pouco menor, então vamos aumentá-lo para 150 por cento. Por que 150 por cento? Porque este é 200 e este é 300 por cento. Vamos aumentá-lo para multiplicar para 150 por cento, então mude a largura para 150. Espere um minuto. Primeiro, certifique-se de que você tem “controle T” e pressione este bloqueio porque queremos que tudo seja aumentado em proporção. Vamos fazer 150 por cento. É assim que nosso texto vai caber na tela, iPhone 6 Plus tela. Agora, você pode ajustar tudo de acordo, se você quiser ajustar o cabeçalho e o espaçamento, você pode ajustá-lo assim. Todas as nossas telas estão prontas agora você pode ver como eu usei todas essas técnicas para copiar tudo. Fizemos um cálculo simples de multiplicar nossas dimensões e resoluções de pixels do iPhone. Nós criamos todo esse design. Por uma próxima hora. Tudo foi igual para 2x. Ele foi multiplicado por dois, nós aumentamos o tamanho, então isso também é 2x, então nenhuma diferença de tamanho. Isto é 3x. Nós multiplicamos este 2x com 1,5 para obter este tamanho 3x. Além disso, você pode copiar este texto e arrastá-lo até aqui e multiplicá-lo com 300 por cento deslocá-lo para 300 por cento. Isso lhe dará o mesmo efeito. Agora, se você verificar o tamanho da fonte. Este deve ser 96. Este deve ser 64. Este deve ter 32. Se formos selecionar este, este é 32. Ele é como usamos tamanhos de texto porque um desenvolvedor de aplicativos iOS, ele vai precisar das distâncias e tamanhos de texto em pontos. Você vai dar a ele algo assim. Altura da linha, este ponto e tamanho da fonte, fonte. Você usou esta cor, você usou esta. espaçamento entre elementos é tanto. É assim que você vai projetar dispositivos iOS e usar a tipografia em dispositivos iOS. Isso é tudo sobre esta prática iOS nesta lição, nós criamos quatro telas diferentes iPhone 6 mais iPhone 5 e iPhone quatro. Há um desafio que eu quero que você desenhe algo semelhante a este. Tentou projetar, criar quatro quadros de arte como este. Tente replicar seu design em todos eles. Mostre para mim. Você pode postar nas perguntas. Faça uma pergunta, mostre-me seu trabalho e tentarei melhorá-lo. Se você quiser aplicar ritmo vertical, você vai aplicar ritmo vertical, você pode definir a linha de base e tudo mais. Mesmo se você quiser projetar apenas uma tela, então você pode selecionar apenas uma tela e projetá-la corretamente. Eu só queria ter certeza de que você entende que se você tem que projetar iOS app em tamanhos diferentes, como você está indo para gerenciá-lo. Esta é a coisa mais difícil em, enquanto você está projetando seu aplicativo iOS ou Android aplicativo ou algo semelhante a este. Vamos passar para a próxima lição. 53. Pergunta sobre Resoluções: Hoje, um dos meus alunos me perguntou sobre a solução iOS e foi uma pergunta muito boa. Nunca pensei nisso que isso virá de um dos meus alunos. Deixe-me mostrar-lhe a pergunta. Ele perguntou que por que você está projetando em um x, que é 32 pixels em um iOS com as quatro especificações em 2x. Eu estou basicamente usando 32 pontos aqui e ele está perguntando por que eu estou usando 32 pontos em vez de 16 pontos em 1x. Então, para limpar todo esse problema ou conceito, eu acho que nós, designers, devemos experimentar primeiro. Sempre aprendemos com experimentação. O que eu vou fazer é mostrar a vocês no Photoshop que como vamos lidar com isso e como entender toda essa bagunça. Vamos começar. Vou abrir um novo arquivo do Photoshop. Arquivo e Novo. O que vamos fazer desta vez é selecionar prancheta daqui e vamos selecionar iPhone 6 ou talvez iPhone 5, que são basicamente dispositivos de alta resolução ou 2x. Agora, o que eu vou fazer em vez de usar 72 pontos solução, que é o nosso padrão, eu vou usar 144. Basicamente, o que eu fiz foi mudar este 144 para 2x. Agora meu documento já é retina. É 2x, então eu vou pressionar “Ok”. Esta é a nossa prancheta. Agora, para este problema ser resolvido, vou selecionar o tamanho do meu título para 32. Você pode ver aqui esta é uma das dimensões dos dispositivos iOS. Qual é o seu jogo? Vamos ter algo como este e eu vou alinhá-lo no meio. Vamos apenas mudá-lo para o tamanho do ponto, converter para o tamanho do ponto para alinhá-lo melhor porque é uma única linha. Agora você pode ver que é 32 pontos em telas 2x. Se você for para imagem, tamanho da imagem, você pode ver, apenas ignore esses centímetros. Nossa resolução é basicamente 144 pixels por polegada. Agora, o que vamos fazer é desmarcar esta nova amostra e vamos reverter para basicamente nossa solução 1x que é 72 pixels por polegada. Isto é apenas para clarear sua mente de que como estamos indo usando nosso tamanho de ponto. Basicamente, nossos desenvolvedores devem estar usando esse tamanho de fonte iOS de 32 pontos. Mas enquanto estamos projetando apenas pela simplicidade, normalmente usamos documentos de 72 pixels de resolução em todas as nossas telas diferentes. Basta pressionar “Ok”. Se você selecionar agora sua fonte, você pode ver que ela está deslocada para 64 pontos. Por que é isso? Porque nós convertemos de volta de 2x para 1x resolução. Agora temos menos pixels por polegada, então é por isso que nosso tamanho de fonte acabou de se expandir e porque nas telas maiores, isso vai ser contratado. Em uma tela maior, este 64 será 32 pontos. Por quê? Porque temos mais pixels para mostrar por polegada. Assim, mais pixels são pressionados uns contra os outros em menos espaço nas telas de retina. Isso vai ser, você pode dizer comprimido para 32 pontos. É por isso que em 72 pixels, o tamanho completo é ampliado. Você pode ver aqui que foi assim que isso foi ampliado. Às vezes, quando você desenha, como ele perguntou porque eu usei 32 pontos nesta tela porque se eu tentar usar, você pode ver 64 aqui, vamos usar 64, este é o meu título, apenas cabeça é suficiente. Acho que não podemos consertar isso aqui. Se tentarmos usar algo assim e então mudamos nosso tamanho de imagem para 144. Vamos alterar os valores de pixels para onde o pixel está. Vou reformulá-lo. Vamos ter os pixels. Eu acho que era 750, cerca de 750 ou 760 algo assim. Vamos ver o tamanho do nosso iPhone 5 porque eu não me lembro deles. 640 por 1136. Vou mudar a largura aqui para 640. Vamos reformular aqui, 144 e pixels. Já está deslocado para 640, por isso acabei de alterar a resolução e podem ver que é 640. Se você quiser mudar a altura, você pode mudar a altura usando 1140 aqui, assim. Eu acho que você deveria ficar com ele assim, 144. Estamos mudando em nossa resolução, então pressione “Ok”. Agora você pode ver que isso já foi deslocado para 64. Não muda de tamanho. Isto é muito estranho. Sempre tente usar o tamanho da fonte que é, você pode dizer realista, e eu acho que 64 é muito grande aqui. Talvez precisemos de 32 pontos. Este é, eu acho, um bom tamanho de direção. Vamos tentar 32 com nossa tela 1x assim. Este é o tamanho do meu título. Vou usar 32 pontos. Vamos deixar assim agora. Não se preocupe com isso. No tamanho da imagem, vou mudar para 144. Vamos ver o que vai fazer. Mais uma vez é 32 pontos. Basicamente o que significa é que em 1x, se você estiver usando 32 pontos, será 32 pontos. Se você mudar o tamanho da imagem para 2x. Neste exemplo, como você pode ver, eu mudei para 144 resolução em que as especificações do iOS são e nosso tamanho de fonte mudou foi o mesmo. Este é o verdadeiro problema, o estudante que seu nome é Antonella, eu não sei se ele é um ele ou ela, mas Antonella me perguntou isso, por que eu estou usando 32 pontos em uma tela 1x? Esta é a resposta. Vamos repetir novamente. Vou usar 320, 480, 72 pixels. Esta é a tela 1x iPhone 4. Pressione “Ok”, e eu vou usar 32 pontos aqui para meu tamanho de exibição e olá Antonella. Qual era o nome dele? Antonella. Vamos usar o carro aqui. Agora você pode ver que estamos usando essas configurações, 320, 480, 72 pixels resolução, e eu estou usando 32 pontos. Agora vamos mudar até 144 resolução e pressione “Ok”, é basicamente tela Retina em 2x. Pressione OK e se você selecionar este tamanho, você pode ver que ainda é 32 pontos porque nós mudamos nossa resolução. É assim que vamos dizer aos nossos desenvolvedores que estamos usando 32 pontos para o tamanho. No meu exemplo anterior, eu não estava mudando tamanhos como este, estávamos usando apenas resolução de 72 pixels. Estávamos usando uns 32 aqui. Deixe-me mostrar-lhe este exemplo. Isto está indo. Se tentarmos criar uma nova prancheta aqui, se formos a essa prancheta e tentarmos criar uma nova aqui com esse tamanho, é basicamente o tamanho do iPhone 6, e eu acho que é um tamanho médio. Vamos apagar, iPhone 5. Vamos criar este iPhone 5 aqui e pressionar este mais e clicar neste aqui. Este é o iPhone 5 e é uma tela de prontidão. Se tentarmos arrastá-lo até aqui, você pode ver que são basicamente 32 pontos. O que vamos fazer é multiplicá-lo com 2 e vai ser 64. Este é basicamente o tamanho real. Se o movermos de volta aqui nesta prancheta , deve ser 32 pontos. Aqui está a regra de que se você estiver projetando com os 72 pixels por polegada, você precisa multiplicar o tamanho da fonte em telas maiores como retina e tela 3x, que é iPhone 6 plus. Em 1x, você estará usando esse tamanho de ponto. O que quer que você use em sua tela 1x, ao projetar com esta resolução de 72 pixels, este será o seu tamanho real, você vai dizer aos seus desenvolvedores que estamos usando 32 pontos, exibição, tamanho de cabeçalho, e para a facilidade de trabalho que estávamos projetando em 72 pixels por polegada, então não precisamos deslocar pixels em qualquer lugar ou resolução. Estão todos na mesma resolução. Este tamanho de fonte estava realmente ligado, este era para 144 então nós multiplicamos com dois porque estamos projetando em 72, que é metade desta revolução. Nossas especificações estavam em 144, mas estamos na metade, então multiplicamos com dois para obtê-lo igual às nossas especificações. Acho que isso deixou sua mente clara sobre essa resolução e essa bagunça de telas. Acho que é isso. Se alguém tiver algum problema como este, estou disposto a criar uma nova palestra ou vídeo para isso. Não tentes classificar o meu curso como duas ou três estrelas. Primeiro, faça perguntas. Eu vi um monte de estudantes que fazem perguntas, eles têm um monte de grandes melhorias em seus projetos, e os alunos que não fazem perguntas e às vezes lêem mal, e então eu lhes mandei uma mensagem que foi a razão e Surpreendentemente, eles dizem: “Tivemos esse problema.” Eu digo: “Por que você não me perguntou primeiro esse problema antes de classificar meu curso mal e me causar um ataque cardíaco?” Antes de classificar meu curso mal ou ficar frustrado, você deve primeiro me fazer perguntas. Eu sempre tento responder o mais rápido possível e, se necessário, criarei um novo vídeo para você. Então tome cuidado e vamos passar para a próxima lição. 54. Como Mirroring sua loja de fotos para o iPhone: Nesta lição, vou mostrar a você como conectar seu Photoshop com seu dispositivo iOS para visualizar esse quadro de arte no seu iPhone. Primeiro você vai para esta edição e conexões remotas. O que estamos liderando é esse nome de serviço de servidor. É partir por escrito como este como servidor Photoshop e fazer alguma senha aqui. Deve ter seis caracteres. Não o torne muito complexo, apenas um simples. Então você vai precisar deste endereço IP. Copie isto ou mantenha isto em sua mente que você vai precisar desta senha e este endereço IP e o nome do serviço. Vamos começar. Agora vou mudar para a tela do meu iPhone. O aplicativo que estou usando agora é este. Isto é iTunes Store, Apple Store, Ps jogar para Photoshop. Eu vou mostrar-lhe este aplicativo, e também eu vou mostrar-lhe este dispositivo Photoshop provou aplicativo de pré-visualização. Esses são dois aplicativos que você pode usar para conectar seu dispositivo iOS ao Photoshop e visualizar seus designs. Vamos mudar para a tela do iPhone. Esta é a minha tela do iPhone, e como você pode ver na terceira linha, Eu tenho este aplicativo Ps jogar. Você pode clicar nele e você pode ver que ele já foi conectado. Então eu vou voltar e mostrar como você vai conectá-lo com o seu iPhone. Ele está mostrando conexões descobertas e algumas conexões salvas. Então, muito provavelmente você está indo para ir com isso descoberto, ele vai se conectar com ele. Ele exigirá o endereço IP ou senha, mas você precisa copiá-lo e colá-lo aqui. Vou adicionar novo. Por alguma razão no meu computador, ele não está me mostrando. Ele não está me deixando conectar a este servidor iPhone com novas conexões, talvez seja meu firewall. Então, se você tem tais problemas 79.1, e aqui você está indo para digitar sua senha, o meu foi microsoft. Quando você tiver inserido todas essas informações, pressione Ok e ela será conectada à sua tela. Agora eu já tenho uma conexão, então eu vou usar este aqui. Você pode ver que ele está atualizando e me mostrando a tela. Se você tocar uma vez, você pode ver todas essas funções desapareceram. Você pode tirar uma captura de tela, expandi-la e também há alguma essa opção de 101, uma por uma proporção, eu acho que a proporção de tela. Além disso, você pode atualizá-lo se quiser. Não uso este aplicativo para tirar capturas de tela ou fazer outras coisas. Eu só o uso para, você pode dizer ver meu projeto aqui e ver quantos espaços eu preciso, ou talvez eu precise mover algum elemento aqui ou ali. É assim que eu uso este aplicativo. Deixe-me mostrar-lhe outro aplicativo, que vai ser o nosso Photoshop, Adobe Photoshop app, que é este último sobre visualização. Você precisa estar conectado ao Photoshop Server, que é basicamente o Photoshop CC. Você pode ver que ele já está conectado. Está me mostrando o quadro de arte 1. Então ele está mostrando o nome do quadro de arte dois. É assim que este aplicativo está conectado. Normalmente, você só precisa fazer login na sua conta da Adobe, sua conta da Adobe CC e ela será conectada ao seu servidor do Photoshop. Eu não me lembro como eu liguei-o e não está me mostrando nenhuma opção. Você pode ver por aqui. É só me dar este iPhone placa de arte cinco e documento Canvas, este aqui. Estes são dois métodos que você está indo para conectar seu iPhone com seu Photoshop. Verifique se o Wi-Fi está em execução porque ele usa a conexão Wi-Fi para se conectar a este servidor. Então, isso resume esta palestra sobre como você pode conectar seus dispositivos com seus iPhones ou dispositivos Android. De alguma forma, nos meus telefones Android devido às configurações do firewall, acho que não está me deixando conectar ao servidor do Photoshop. Então, só fiquei com esta opção para mostrar-lhe nos dispositivos iOS. Então eu acho que vai fazer o truque. Então, se você tiver algum problema ou tiver algum problema, apenas me avise e certifique-se de que você não tem nenhum firewall. É assim que você usa diferentes apps para se conectar ao iPhone e mostrar essas telas. Isso acaba com essas palestras, e vamos passar para a próxima palestra. 55. Tipografia e escalas para Android: Agora você está projetando para o sistema Android. Então, há duas coisas que você precisa entender. O que é DPI eo que é SP que é a unidade de escala de quatro tamanhos para sistemas Android, que é chamado de escala pixels independentes ou pixels escaláveis como este que você pode ver aqui. Agora, se você vai para este material, Google.com estilos tipografia, você pode ver que eles têm colocado para fora tudo e não de uma forma como a Apple faz, mas eu acho que é melhor do que eles, porque ele está mostrando um monte de opções diferentes para exibição 4,3 ,2,1. Aqui eles têm alguns tipos de escala por aqui. Você pode ver aqui é a escala tipográfica 12, 14, 16, 20 e 34. Então você pode usar todos esses, eu acho que eles têm duas ou às vezes lacunas de quatro. Aqui eles têm alguns exemplos como título de exibição de título 2, 3, 4, subtítulo, corpo 2, corpo 1, botão de legenda. Eles estão usando 12sp para isso. Eles também estão mencionando todos os tamanhos aqui, 112sp, 56, 45. Esta é uma escala muito bonita. Ele tem um monte de, você pode dizer variações ilimitadas. Aqui estão algumas telas que eles estão mostrando, por exemplo, como vamos usar todos os tamanhos interpretados em nosso Photoshop enquanto projetamos para Android. Agora, há duas coisas. Uma é, o que é DPI? DPI é basicamente as diferentes telas tamanhos resoluções que são suportados pelo Google. Estes são LDPI baixo, DPI, DPI médio, alto, extra alto, extra extra extra alto, extra extra extra extra alto DPI. Ao contrário da Apple, eles têm um monte de resoluções, 1.5x, 2.0x, 3x, 4x, tamanho original e 0.75x, o que é muito bom. Agora como estes são calculados, se você pode ir para esta pequena ferramenta, você pode ver aqui, é calculadora muito simples para calcular diferentes tamanhos e escalas. Agora, se você mudar para este MDPI e colocar uma polegada aqui, é basicamente uma polegada na tela e ele contém 160 pixels, que é igual a este MDPI que também é 160. Assim, em DPI médio, sua resolução de tela e seus tamanhos de pixel eles são correspondidos. Então, vamos estar projetando usando este tamanho de tela MDPI. Não se preocupe com este 160 agora. Ok, agora os pixels independentes de escala também são 160, então todas as unidades neste tamanho de tela serão iguais aos valores reais. Além disso, você pode ver pixel independente densidade eles também são 160. Tudo o resto é 160, 160 e 160. Agora, se você for para este HDPI, você pode ver agora o tamanho da tela dentro desta polegada é de 240 pixels. Então apenas tente entender esse conceito em uma polegada de uma tela agora temos embalado 240 pixels. Então, todas as outras coisas mudaram, mas os pixels independentes escaláveis são os mesmos e pixels independentes de densidade são os mesmos porque eles são independentes dos valores de pixel. Então, para evitar confusão, vamos projetar para este MDPI e podemos extrair nossos recursos e tudo mais. Podemos dizer aos nossos codificadores que este é o tamanho que usei, não precisamos calcular nada. Agora, para quatro tamanhos, estamos usando este SP. Então, nossos programadores ou desenvolvedores Android, eles vão precisar da escala de quatro ou quatro escala tipográfica nesses tamanhos. 56. Desinging para vários tamanhos de tela para Android: Vamos projetar uma tela simples, talvez algo muito simples. Agora vamos começar com um arquivo de 320 por 480 altura. Você pode aumentar a altura, talvez 600, e pressionar “Ok”. Deixe a resolução para 72 porque nossos pixels independentes de escala serão do mesmo tamanho. Este é o tamanho que vamos desenvolver, que é MDPI. Você também pode mudá-lo para 40 se você quiser, mas 320 por 600 parece bom para mim. Aperte “Ok”, não pinte este documento, e este é o nosso tamanho. Vamos ampliar um pouco. Agora, para o título, vamos usar a fonte do Google, que é Roboto. Vamos usar este Roboto ousado talvez, e 56 pontos. Eu acho que eles têm 56 lá dentro. Vou usar 56 aqui. Este é um título muito grande para nós e vamos usar 56, mesmo. Vamos deixar isso para Auto assim, ou talvez possamos usar 56 aqui, 56. Eles não especificaram nenhum rastreamento, então vamos usar nossos próprios olhos e intuição. Basicamente intuição ou talvez possamos usar zero aqui, talvez eles tenham desenvolvido uma fonte como essa. Este é o rumo e, em seguida, vamos para a subposição. Subtítulo deve ser algo 24 título, 24 sp, então isso vai ser 24. Cálculo é muito fácil assim. Vamos mover isso para cima. Nós vamos usar não Bold, mas talvez Light font para este. Agora talvez nós vamos usar essa cor cinza assim. Vamos aproxima-lo disto. Reduza o zoom para ver como vai parecer. We_can _do_it, este é o nosso grande cabeçalho e também podemos dizer Sim, apenas para ter certeza de que está bom aspecto. Este é o nosso grande título e, em seguida, vamos colar algum texto aqui como este. Vamos usar o tipo Lorem Ipsum. O tamanho que vamos usar é que vamos para 40 sp, então 14 sp é para o corpo 14 pontos. Vamos usar 18 pontos para a liderança, assim. Talvez, eu acho que talvez mais de 18 é bom, 20 é bom. Nós definimos o nosso principal tudo neste tamanho de tela. Para este MDPI, é quatro MDPI. Todos os tamanhos são iguais. Talvez possamos reduzir este 56 para 45 porque 56 está parecendo muito grande. Este é 56, vamos voltar para 45. Sim, acho que é melhor, 45 e 45. Mantenha-se simples assim, talvez vermelho seja bom. Vamos movê-lo um pouco para baixo assim. Mova o texto mais na parte inferior assim. Vamos mudar a cor desta para esta cor escura e escura. Este é o nosso quadro de arte. Vamos mover o rumo para o topo, talvez assim. Olhando bem. Agora nós mudamos nosso título, subtítulo, e tudo de acordo com a escala desta escala tipográfica por design de material, Google Material Design. Eu acho que é isso. Se você quiser projetar para uma tela maior, eu acho que você deve ajustar seus tamanhos de fonte e multiplicá-los com as respectivas resoluções. Vamos ver se eles têm alguns tamanhos por aqui. Este é HDPI que é 800 por 480, então vamos projetar para este. Ou talvez possamos aumentar nosso tamanho de imagem para 150. Acho que são 150. Vai ser 150 por 150, e é assim que temos ido para o outro tamanho de tela. Agora, se você for para isso, você pode ver os pixels. A altura é 900, e a largura é 480. É muito fácil mudar de um para outro. Se você quiser ir para o próximo, você também pode ir para este 720. Mude 720 na largura aqui, assim, e você pode ver que é assim que estamos mudando para as próximas telas XXHDPI, 960 por 1600. Basicamente é a largura, não se preocupe com a altura. Vamos mudar para 960. Agora você pode ver que todos os nossos tamanhos de texto também estão aumentando com ele. Não devemos nos preocupar porque temos dimensionamento de pontos em nossas configurações do Photoshop. Como você pode configurá-lo, você pode ir para estas Preferências, ir para Unidades e Réguas, e definir seu Tipo como Pontos. É uma boa prática configurá-lo para Tipo de pontos por causa de você quando você está projetando para telas móveis. É assim que mudamos para tamanhos de tela diferentes e isso é 100%. Você pode ver como ele está parecendo muito bom. É a fonte do Roboto. Você pode usar outras variações do Roboto, se quiser, mas eu estou usando apenas uma fonte Roboto. Isso é tudo sobre DPIs e sps, pixels escaláveis e tamanhos diferentes. Você deve dar aos seus desenvolvedores esses tamanhos. Agora que temos, acho que esta está bem. Acho que devo voltar ao meu formato original. Passo para trás, passo para trás, passo para trás. Não está funcionando assim. Talvez devêssemos mudar o tamanho da imagem para 320 novamente, e é assim que nosso tamanho real do texto é basicamente definido. Vamos ver o que foi isso. São 14 pontos, depois 24 pontos ou basicamente 45 pontos. Nós vamos dizer a eles que 45, 24, e 14 sp são usados. Isso é tudo sobre a tipografia em seus aplicativos Android e telefones celulares. Eu disse a você como fazer isso no Photoshop também, e como atender a diferentes tamanhos de tela. É isto. Se eu arranjar outra coisa ou precisares da minha ajuda, faz-me sempre perguntas. Acho que devemos passar para a próxima palestra. 57. Para desenvolvedores → usando o Google Fonts: A primeira e mais importante opção para cada desenvolvedor é usar o Google Fonts. Até mesmo os designers adoram usá-los porque podem ser hospedados facilmente e podem ser mais fáceis de usar para designers e desenvolvedores. Você só precisa incorporá-los com apenas uma linha de código e você está pronto para ir agora há 804 para famílias que são totalmente gratuitos e hospedados para você. Hospedado significa que eles estão em outro servidor nos servidores do Google. Além disso, o problema com essas fontes do Google é a qualidade da fonte. Às vezes, Kerning está desligado, às vezes problemas de suavização de borda. suavização de borda significa que as bordas podem ser irregulares e não são suaves. Isso acontece com muitas fontes do Google. Às vezes, a maioria deles é de boa qualidade, mas alguns deles, eles têm bordas irregulares. Há mais algumas das coisas boas sobre o Google Fonts. Vamos mudar para o Google Fonts, agora, há mais uma coisa, você pode facilmente selecionar uma família e se você for personalizá-la, você só precisa incorporar essa linha de código e você está pronto para usar essa família. Este é o código também mostra o tempo de carregamento, que é rápido, se você tentar personalizá-lo, ele tem apenas um [inaudível] agora. Vamos tentar outro, como este, um com este, vamos selecionar mais alguns. Você pode ver que ele mostra qual é o tempo de carregamento será. Mesmo que você seja um designer, você deve escolher suas fontes facilmente nesta Visualização do Google New Fonts. Mais uma coisa é se você tentar selecionar este espécime view, você pode realmente ver um monte de grandes coisas aqui, como todos os estilos diferentes, então estilos diferentes aqui, então nós temos rolamento, que é muito bom. Por que se preocupar em gastar horas, tente combinar fontes diferentes. Por que não devemos usar apenas formulários incorporados ou já combinados, escolher um que você goste acima ou que esteja realmente mais próximo de seus projetos. Tente usar este também está mostrando o uso quanto ele é usado em diferentes países ou áreas, e este é o número de sites que está servindo. É uma ótima ferramenta para você começar, copiar uma linha de código, começar a baring a partir daqui. Há muitas coisas boas sobre isso. Mas ainda assim você pode ver, se você vê algumas das fontes, eles podem ter, algumas das bordas irregulares como você pode ver aqui, isso não é muito suave na minha tela. Além disso, você pode ver ou ouvir Merriweather Sans, você pode ver entre A e M escurecimento é um pouco fora. Então essas são poucas coisas, e ainda acho que é uma ótima opção para começar com o Google Fonts porque os desenvolvedores vão adorar, porque é muito mais fácil para eles usá-la. Basta copiar uma linha de código e eles estão prontos para usar, se você é um desenvolvedor, você deve se comunicar com seu designer, se você é um designer, você deve se comunicar com seu desenvolvedor para começar e saber quais são as possibilidades. Vamos passar para a próxima lição. 58. Para desenvolvedores → usando fontes premium: Agora vamos falar sobre fontes premium e por que devemos comprar essas fontes premium e quais são as gemas escondidas nelas? Agora, a primeira coisa é ótima qualidade, ok? Eles são realmente ótimos. Eles têm um grande kerning. Eles são projetados por grandes tipógrafos e empresas tipográficas, fundições tipo. Kerning é ótimo, e eles têm muitas ligações e poucas opções extras. Anti-serrilhamento é bom. Eles não têm bordas irregulares, suas fontes web são ótimas. Agora a maior vantagem que você tem é um visual personalizado, ok? Agora você tem uma marca, você tem uma equipe em sua mente, então se você usar uma fonte premium, isso vai causar muito impacto em seus espectadores e usuários, ok? Escolha com sabedoria, você pode comprar fontes premium e usá-las em sua marca, em seus sites, em seus aplicativos móveis em todos os lugares. Os clientes vão reconhecer instantaneamente a sua empresa ou empresa ou produto do seu tipo, ok? Agora, há alguns contras associados a isso. Os problemas que temos é que eles são caros. Algumas fontes se você tentou comprá-los, eles são $700 toda a família por isso é muito caro. Mesmo, eu gosto de alguns telefones que são quatro ou US $500 e às vezes eu acho que alguém deve me dar tais fontes porque eu não posso comprá-los. Ok, então a outra coisa é que eles podem não ser hospedados de graça, ok? Se você comprar uma fonte deste site, myfonts.com, este é o meu site favorito. Você pode ver aqui, eu estou logado. Eu comprei um monte de fontes daqui, um monte de famílias que você pode ver aqui. Agora, o benefício de tais sites é que você pode encontrar ou combinar sua equipe exatamente o que você está procurando. Você pode ver aqui letras diferentes, há formas, ok? Há usos que você pode ver aqui. Britannica, depois contadora de histórias, está bem? Há milhões de temas. Você pode procurar grandes artistas, você pode procurar ofertas especiais. Você pode comprá-los com algum desconto. Além disso, você pode procurar algumas fontes gratuitas, se quiser. Eu realmente sugiro que você deve se inscrever neste site e eles vão enviar-lhe algumas fontes gratuitas. Se você quiser pesquisar algumas fontes livres que você pode tal aqui e adicioná-los ao seu carrinho e usá-los na web ou seus projetos. É assim que eu tenho um monte de coleção de fontes premium grátis. De qualquer forma, este é o site que eu realmente amo. Há um monte de idéias de design também. Se você olhar para esses tipos de letra e sua apresentação, há um monte de idéias também, então compre algumas fontes boas a partir daqui e compre-as com sabedoria. Talvez você precise apenas de um ou dois ou três estilo não toda a família de fontes. É assim que você começa a usar fontes premium. Há outro que é Typekit, que está relacionado com esta licença de loja de fotos. Você também pode comprar Typekit, é site baseado em assinatura com um monte de fontes. Eu não sei se é typekit.com ou qualquer outra coisa, mas eu acho que é da empresa Adobe e lá está. Acho que estou desligado, acho eu. De qualquer forma, agora estou logado. Ok, agora você pode ver aqui há um monte de classificações que você pode selecionar qualquer um aqui e como mono manuscrito, lajes decorativas raspadas fora se isso é muito bom e você pode adicioná-los. Você pode usar essas fontes em sua barra da Web, aplicativos para dispositivos móveis ou até mesmo em seus designs no Photoshop. Eu tenho agora, eu acho que alguns 276 fontes e se você operar para outro plano, você pode ser ter muito mais opções. Esta é outra maneira. Essas fontes são hospedadas no Adobe Typekit, então elas também funcionam como o Google, eu acho. É assim que existem diferentes opções para usar fontes premium. Pode haver mais sites como este. Temos este Adobe Typekit. É aqui que você compra diferentes fontes e fontes da Web. Ok, então você pode ver aqui fontes web, mesmo que você vá para qualquer fonte como esta. Você pode ver suas fontes da Web imediatamente. Se você clicar aqui, você pode ver, se você clicar aqui, você pode ver como esta fonte vai se parecer na web, aqui está e você pode ver aqui. Se você quiser comprar, você pode ver nas escolhas de compra. Temos fontes desktop e web, então você deve sempre clicar em fonte web se você estiver indo para usá-lo na web, se você estiver indo para usá-lo em aplicativo ou publicação como livro ou algo assim, então você precisa comprar mais licenças. Isso é tudo sobre fontes premium e seus diferentes métodos de compra baseada em assinatura ou você precisa comprar toda a fonte suas licenças para que você possa ter uma boa compreensão e vamos passar para a próxima lição. 59. Para desenvolvedores → CSS Fonts: Quando se trata de fontes web dimensionando unidades CSS, existem na verdade duas categorias. Uma é unidades absolutas como pixels que usamos para usá-los no passado muito, talvez quatro ou cinco anos atrás. Agora, há outra categoria que é relativa. Assim que isso é responsivo e adaptativo, Web Design está ficando popular e é agora nos dias de hoje. É realmente essencial desenvolver sites que tenham unidades principais de pixel relativo. Temos; em, rem vw e%. Pixel é usado muito menos nos dias de hoje. Talvez no corpo ou algo assim na fonte da base, talvez precisemos usar isso. Caso contrário, há muito menos uso para valores de pixel, Agora, primeiro vamos ver que em e% são ambos relativos aos pais. Eles são realmente semelhantes uns com os outros. Se eles têm div pai e, em seguida, outro div pai, então ele pode criar alguns problemas. Vou explicar isso em um vídeo de exercícios de codificação, então não se preocupe se você não entende agora. vw significa largura da viewport, por isso é relativo à viewport, que é a janela do navegador que nosso usuário tem aberto. É muito responsivo se você tentar espremer seu tamanho viewport ou seu navegador, seu cabeçalho ou fonte será espremido também. Ele irá mudar o seu tamanho para que seja relativo ao viewport. Vamos ver o seu exemplo com o código. Vou apenas dar-lhe uma breve visão geral. Agora, o último é Rem. Rem é relativo ao tamanho da fonte do corpo base. Se você definiu o tamanho da fonte do corpo para 18 pixels, então um rem será igual a 18 pixels. Não é dependente de nenhum pai Div ou qualquer coisa. Então, em todo o seu site, todo o seu WordPress Blog. Se você estiver usando rem como seu tamanho de fonte, ele sempre procurará o tamanho da fonte do corpo e fará seu cálculo de acordo com ele. Dois rem serão 36 pixels. Este é um recurso muito grande se você quiser manter a consistência. Vamos cavar nas seções de codificação. Vamos passar para as próximas lições de codificação. 60. Para desenvolvedores → em dimensionamento de fontes: Primeiro, vamos olhar para unidades em, então como vamos especificar. Vejamos, aqui está um documento de exemplo que criei para vocês. ambos os lados, estamos usando unidades em mas em diferentes situações e pais diferentes. Vamos ver como isso pode estragar tudo, um problema como o que temos no lado esquerdo. No lado direito, temos o uso adequado. Vamos ficar na codificação. Não há nada chique. Vamos ver o que temos em nosso documento HTML. Eu importei este normalizar para normalize.min.css. Se você não sabe o que é normalizar, é basicamente para eliminar todos os estilos de navegador e outros problemas, problemas incompatibilidade que temos. Ele vai redefinir seus estilos. Então temos essa API do Google. Estamos basicamente importando este em. Nós importamos esta fonte Source Sans Pro e, em seguida, temos uma folha de estilo ligada a ele. É isso. Este é o meu cabeçalho para o cabeçalho, não tem nada a ver com o exemplo. O código mínimo está aqui. Este é um cabeçalho de contêiner 1, 2, 3, tags corporais, span. Então temos um pequeno texto, pequeno, e então temos outro recipiente que está no lado direito aqui. Este é outro contêiner. À esquerda está o contentor. Temos dois contêineres, direita e esquerda do lado esquerdo e direito. Agora, o que está acontecendo aqui é se você olhar para este recipiente, vamos para o CSS style.css. Aqui, eu tenho todos os tamanhos especificados. Agora, no meu elemento HTML, eu estou dizendo para tamanho 18 pixel, então a altura da linha 1.5. Quando você quiser configurar sua fonte base, sempre use HTML ou suas tags de corpo. Você também pode usar o init, mas eu prefiro usá-lo aqui. Você pode usar em ambos. Você pode usar esse tamanho de fonte. Estamos definindo nosso tamanho de fonte base. A linha de base é 27 agora. Se você multiplicar 18 por 1,5, é 27. Agora, você pode ver aqui nosso tamanho de parágrafo é 0,9 em. Se calcularmos 18 pixels multiplicados por 0,9, 16,2 pixels, a altura da linha é 1,25. mesmo que os outros cálculos como três em, 18 pixels multiplicados por 3, e assim por diante e assim por diante. O que estamos fazendo é multiplicar nossa fonte base com nosso valor em cada elemento. Se tivermos elemento parágrafo, estamos multiplicando seu valor com o HTML. O nosso EM funciona de certa forma, como se tivéssemos esta unidade EM. Ele procura o pai imediato. Se o parágrafo estiver dentro deste corpo e tag HTML, não há outro div, então ele será 18 pixel. Neste caso, se você olhar para o nosso código de contêiner, vamos mostrar-lhe o que meus contêineres têm. Se você olhar para este recipiente à esquerda, este é o da esquerda. Vamos adicionar aqui. Agora, você pode ver o recipiente esquerdo tem algum tamanho para o tamanho que é dois em. Mas este no lado direito, este recipiente não tem nenhuma especificação de tamanho de fonte. O que vai acontecer aqui é que todos os elementos dentro desta div serão calculados com 18 pixel fonte base HTML. Isto vai acontecer aqui. Neste recipiente, cada cabeçalho, cada elemento de parágrafo, tudo o que vemos, você pode ver no lado direito, ele é calculado no nível do nosso tamanho de fonte base do elemento HTML. Se você clicar nele e inspecionar elemento, você também pode fazer isso no Chrome. Se formos para este modelo de caixa computada, então este computado, você pode ver o tamanho da fonte é 16,2 pixels. Então, 18 multiplicar por 0,9, é o tamanho correto da fonte. Mas se olharmos para o parágrafo dentro deste recipiente, que é o esquerdo, é 32.4. Como é que este 32,4 pixel foi calculado? Vamos ver como isso foi calculado. Tudo o que é um pouco diferente está neste recipiente. Temos dois. Este contêiner tinha um pai que era HTML. Nosso tamanho de fonte base era de 18 pixels multiplicado por 2, é igual a 36 pixels. Agora, nesta situação, nosso pai tem o tamanho da fonte base mudou. Então, tudo o que está dentro deste contêiner vai usar este 36 pixels como sua fonte base, porque agora seu contêiner tem fonte base diferente. Estou usando a tecla de atalho para o meu texto sublime. Então, 18 multiplicado por 36 pixels é a nossa fonte base para este elemento filho recipiente. Basicamente, elementos filho significa que tudo neste recipiente é seu filho. Aqui, podemos ver se você olhar para isso, por que isso foi calculado como 32.4, porque nosso tamanho de parágrafo era 0,9. Se multiplicarmos 36 pixels multiplicados por 0,9, serão 32,4 pixels. É assim que o nosso parágrafo foi calculado. É assim que o tamanho do nosso parágrafo é calculado e também todos os nossos tamanhos de cabeçalho. Três em nesta situação agora significa que temos 36 pixels multiplicados por 3, é igual a 108, 108 pixels é o nosso título 1 nesta situação. Vamos ver se este título 1 tem 108 pixels ou não. Vamos inspecioná-lo e você pode ver aqui. Tamanho da fonte, 108 pixels, também a altura da linha é 108 pixels. É assim que a Em funciona. Aqui, temos apenas um pai, que é HTML. Este contêiner, ele não tem nenhuma especificação de fonte. Neste caso, temos recipiente dentro deste elemento HTML e temos dois níveis deste cálculo. Em é basicamente relativo ao seu pai imediato. Seu pai imediato era este contêiner. Tínhamos esse tamanho de fonte dois em, então agora seu tamanho de fonte base mudou. Se você quiser usá-lo, use-o com cuidado e certifique-se de que você está usando bons cálculos relativos. Isto é tudo sobre unidades EM. Vamos passar para o próximo. 61. Para desenvolvedores → remar de fontes: Vamos falar sobre unidade de Rem ou especificação de tamanho de fonte CSS. Este é o meu favorito, é relativo ao corpo. Vamos ver como vai funcionar. Estou definindo meu tamanho de fonte base em HTML em vez de corpo. Sessenta e dois pontos cinco por cento significa 10 pixels que é 16 pixels multiplicar por 0,625 que é igual a 10 pixels que é como ele vai ser igual a 10 pixels. Isso é às vezes designer fazer designers ou quartos eles usam esta técnica, é muito antigo para tornar seus cálculos mais fáceis, mas o recomendado é quatro tamanho 100 por cento, então sempre use este. Estou usando apenas para este exercício apenas para explicar alguns conceitos. Agora rem sempre vai procurar este HTML ou dentro desta tag body, for a fonte base. Se não tivermos HTML ele vai olhar na tag body. Ele vai olhar para este tamanho que é de 10 pixels, e todo o seu cálculo será baseado nisso, então 10 pixels. Nosso parágrafo aqui é 1.6 rem que é 10 multiplicado por 1.616 pixels. Em seguida, nossos tamanhos de span 2.4 rem que será igual 24 pixels, por que? É mais fácil de calcular porque temos configuração aqui. Então, dentro do h_2, é 36 pixels, isto é 24, 2016, 14 pixels assim por diante e assim por diante. Agora dentro do contêiner, se você tentar especificar algum tamanho de fonte como eu estou especificando agora, 24 pixels. Vamos ver se ele vai olhar para este tamanho como nosso tamanho base ou ele vai olhar para este tamanho. Eu abri agora no Chrome apenas para dar-lhe um pouco de sabor dos níveis do Chrome. Agora você pode ver que é um eficaz e nosso tamanho de fonte é, este vai ser, vamos ver qual é o tamanho da fonte computado. Vamos ver. A altura da linha é de 48 pixels. Então há o nosso tamanho da fonte, ele será no f, c, d, e, f. Aqui temos. Tamanho da fonte 48 pixels. Foi um pouco difícil encontrar esse valor no Chrome porque ele tem um monte de outros valores como flex, outro o oculto. Isso é difícil de encontrá-lo, mas aqui temos o tamanho da fonte 48 pixels. Nós especificamos 4,8 rem. O que significa que está calculando de acordo com este valor. Ele não está procurando por esse valor ou nem sequer considerá-lo. Devemos sempre ter certeza de que isso vai funcionar com o elemento fonte base. Será sempre consistente. Se eu quiser mudar todos os tamanhos, vou mudar o seu aqui. Uma mudança controla tudo o resto. Esta é a coisa que eu amo, refrescar. Isso é realmente mágico e eu realmente amo esse recurso que você pode controlar todos os tamanhos de fonte em relação a um elemento que é este HTML, ou se você tem corpo, é assim que usamos este HTML CSS Rem Sizing Unit, e nós usamos HTML como nosso tamanho base e alterar todos os valores de acordo com ele. Eu normalmente tento usar rem em meus projetos se eu tiver uma página de destino eu tento usar rem porque então eu sei que todos os meus tamanhos de fonte são relativos a este. Se eu quiser mudar, eu posso mudar aqui e tudo será mudado em todas as páginas ou em todo o tema. Certifique-se de fazer esses exercícios e baixar os arquivos de exemplo. Vou carregar todos esses arquivos, que você possa checá-los. Vamos passar para a próxima lição. 62. Para desenvolvedores → % dimensionamento de fontes: Nesta lição, vamos olhar para o uso de unidade percentual em especificações de tamanho de fonte CSS. Se você estiver usando porcentagem, também é semelhante a emular, então é por isso que eu discutido emular antes. Agora, aqui no meu corpo, que é o tamanho da fonte principal. aqui estou especificando o tamanho da fonte base igual a 100 por cento, o que significa 16 pixels. Para quase todos os padrões do navegador, 100 por cento é um valor de 16 pixels. Ele também é considerado padrão, então certifique-se de especificar o tamanho da fonte 100% em seu elemento de corpo ou em seu elemento HTML. Agora, temos contêineres esquerda e direita. No contêiner esquerdo, você pode ver que estou especificando o tamanho da fonte 140 por cento. No contêiner certo não há fonte, então tudo dentro deste contêiner será calculado na base deste corpo porque este é seu pai. Não há especificação de tamanho de fonte nos outros pais como este, mas este tem especificação de tamanho de fonte de 140 por cento. Então, tudo dentro deste recipiente esquerdo será tratado da mesma forma que calculamos M. Deixe-me mostrar-lhe um exemplo aqui. Este é o uso de unidade percentual, e você pode ver no recipiente esquerdo tudo é maior, e no recipiente direito tudo é o tamanho certo. Por que estamos tendo esse problema? É também o mesmo problema com a unidade M que o pai imediato deste quarto esquerdo, este, H1, H2 e H3, eles têm seu tamanho pai definido para 140 por cento. Significa que o tamanho pai é 16 multiplicado por 1,4, que é 140 por cento. Então 22.4 é o tamanho base deles. Agora aqui temos 22,4 pixels como nosso tamanho base. Se tivermos 22,4, o tamanho da fonte 100 por cento será 22,4. Você pode ver aqui, se formos a este parágrafo e clicar com o botão direito do mouse e inspecionar elemento, ele será igual a 22.4 porque é agora calculado de acordo com seu pai que é este recipiente esquerdo, este sobre Aqui. Agora, isso também é o mesmo que M, então eu não vou mostrar uma palestra muito detalhada sobre isso. Você pode ver aqui, para os outros tamanhos que estou usando REM, então vamos removê-lo agora mesmo para evitar confusão. Então, rubrica 1, 2, 3. Agora você pode ver aqui no meu cabeçalho 3, Eu estou usando o valor absoluto 36 pixels. Vamos ver em ambos os exemplos, lado direito e lado esquerdo você pode ver o nível de cabeçalho 3 é fixo, por isso é 36 pixels, mas tudo o resto está em unidade relativa, que é porcentagem. Então eles têm tamanhos diferentes em ambos os recipientes. Agora você pode ver aqui eu estou usando 400 por cento, 350 por cento, e assim por diante, e assim por diante. Para pequenos, estou usando 90 por cento. Está bem. Há outro uso dessa porcentagem que eu vou discutir nas palestras posteriores quando vamos olhar para a tipografia responsiva, então vamos passar para a próxima lição. 63. Para desenvolvedores →: Aqui está um pouco de introdução a esta unidade incrível VW e eu realmente amo como ele se expande e contratos em sites responsivos. Aqui estão três títulos e, em seguida, temos um parágrafo aqui e você pode ver parágrafo é muito grande. Deixe-me explicar por que é muito grande. Agora, se passarmos para este recipiente, desculpe, estilo CSS. Então, o que está acontecendo aqui? A primeira coisa é o tamanho da fonte HTML um 100 por cento, também esta largura do contêiner é 80 por cento e tamanho da fonte neste contêiner pai também é 24. Então você pode ver aqui esta unidade VW, é relativa ao tamanho desta janela do navegador. Portanto, ele não tem efeito deste 100 por cento ou este tamanho de fonte 24 pixels. Então o que está acontecendo é que eu defini para um tamanho de fonte de parágrafo para 4,5 vw. Você pode experimentar com isso. Então você pode ver que é muito grande. Este tamanho de parágrafo também os títulos são muito grandes. Tamanhos de cabeçalho também são em vw 15 largura viewport e, em seguida, temos line-altura, outras coisas, margens e configurar tudo. Além disso, o cabeçalho dois, o cabeçalho três e o texto pequeno está na RAM ou você pode ver se eu tento usar este vw, então talvez possamos usar 2,5 vw aqui, assim. Vamos ver como ele vai se parecer com o nosso pequeno texto. Então, texto pequeno é assim. Agora, para os títulos, é muito bom, mas para o texto do parágrafo não é realmente bom. Então, vamos mudar para a nossa visão responsiva. Agora, você pode ver como eu expandir e contrair o tamanho do meu viewport, você pode ver aqui no top 623 pixels, eu pressiono “Control+Shift +M” no meu Firefox. Se você estiver usando o Chrome, acho que você pode “Shift” e pressionar “F12" e selecionar este dispositivo Alternar. É também “Controle”, “Shift, M”. Então você pode vê-lo em tamanhos diferentes como este, assim, e assim. Então agora eu estou usando este navegador Firefox. Agora você pode ver o tamanho do nosso cabeçalho é relativo à largura da janela de exibição e é realmente responsivo assim que o contratamos. Vamos passar para essa largura de 320 pixels, que é o iPhone cinco ou quatro, eu acho. Ok, então é assim que o nosso texto vai parecer. Mas você pode ver que o pequeno texto está realmente sofrendo. É muito pequeno e o tamanho do cabeçalho é bom em dispositivos pequenos, mas é muito grande, desculpe, texto do parágrafo é muito grande em telas grandes. Portanto, esta não é uma prática muito boa. Então, quando você está usando este VW tente usá-lo apenas nos títulos, como o título 123, não os títulos pequenos porque eles vão ficar muito pequenos. Assim, títulos muito grandes podem obter bons benefícios firmes. Se você estiver usando um parágrafo, eu acho que você deve usar o valor de RAM ou algo mais próximo a isso, como 1.2 RAM aqui. Portanto, ele vai ficar bem também para o pequeno texto. Vamos usar a RAM aqui. Então eu vou usar uma RAM aqui para o pequeno texto. Há três facetas. Então é assim que podemos usar esta unidade VW e tentar evitar as coisas que mencionei aqui. Não o use no texto do parágrafo. Ok, então vamos para a próxima lição. 64. Para desenvolvedores → Como a ritmos verticais em CSS: Agora você está familiarizado com espaçamento vertical ou ritmo vertical, mas como esses cálculos vão realmente funcionar em CSS. Para controlar o espaçamento vertical em CSS de diferentes elementos tipográficos ou até mesmo seus outros elementos gráficos, imagens ou botões ou algo assim, você precisa usar margens, preenchimento e altura da linha. Agora tenha em mente que todas essas coisas serão relativas à nossa altura de linha de base. Se você tiver uma linha de base de como 27 pixels, suas margens e preenchimentos e alturas de linha serão múltiplos de 27 pixels ou talvez metade dessa altura de linha de base. Agora como isso é calculado é que precisamos de uma altura total que deve ser um múltiplo de nossa linha de base. Aqui você pode ver que a margem superior é 27 pixels, já que minha linha de base é 27 pixels. margem inferior também é igual à linha de base, e a altura da linha também é igual à linha de base. A altura total será de 81 pixels. Se for uma única linha, nossa linha de texto será igual a 81 pixels de altura. É assim que a altura será calculada em nosso navegador. Pode ser múltipla desta altura da linha de base, ou deve ser múltipla de altura da linha de base ou igual à altura da linha de base que também pode funcionar. Aqui está outro exemplo. Às vezes você pode usar metade da sua altura de linha de base. Se você estiver usando metade da altura da linha de base, não recomendo usar esses valores de 13,5 pixels ou meio pixels. Em vez disso, você pode usar 13 pixels e 14 pixels. A altura total será novamente 54 pixels. Cinquenta e quatro é também um múltiplo de linha de base, por isso não nos vamos preocupar com isso. Vai caber no nosso ritmo vertical muito bem. Certifique-se de não usar esses valores de 0,5 ou 0,5 meio pixel, você pode usar 14 pixels e 13 pixels. Mais uma coisa. Às vezes, se você está tentando alcançar talvez algum slogan ou algumas manchetes, algo assim e você não quer usar o mesmo tamanho de fonte que você já usou em seu fator de escala, você quer se desviar daqui como você vai espaço vertical esse elemento. Por exemplo, altero a altura da linha. Não gosto da altura da linha da minha linha. Você pode dizer muito espaçoso. Talvez ocupando muito espaço. Vou configurá-lo para 32 pixels. Eu mudei a altura da linha e eu realmente preciso da altura total que deve ser igual ao múltiplo da linha de base. O que eu vou fazer é 54 menos 32, e eu fico com 22 pixels. Eu os dividi em margem superior e margin-bottom, que é 11 pixels, 11 pixels. O total é novamente 54 pixels. Conseguimos a palavra ritmo igual novamente. Aqui está um exemplo de espaçamento vertical, como vamos usar essa técnica. Se você pode ver meu título, eu estou usando margem superior e margin-bottom para o título e a altura da linha. Adicione todos estes três e o bloco total é onde tudo está cinza. Este é o espaço que vai demorar. Então temos o texto do nosso parágrafo. Você pode ver que é tudo vermelho, então uma altura de linha é igual a 27 pixels. Vai ser 27 pixels para cada linha. A margem inferior, só estou usando margem inferior aqui. Alguns especialistas eles sugerem que você só deve usar margem inferior para todos os seus elementos para alcançar espaçamento vertical. Nesta situação, eu estou usando apenas margin-bottom e eu não estou usando margem superior porque margem superior é basicamente eu estou recebendo do meu título. direção já tem muito preenchimento ou margem na parte inferior, então não preciso de mais espaço aqui. É assim que usamos cálculos diferentes. Deixe-me mostrar-lhe um exemplo. Aqui está Bootstrap Custom Typographic Scale. Este é o último exercício que vamos fazer com Bootstrap. Embora seja muito, muito difícil alcançá-los verticalmente no Bootstrap porque há muitos elementos para encadear o preenchimento e tudo mais. Bootstrap realmente é uma droga em escalas tipográficas ou ritmo tipográfico. Aqui eu tenho este título no topo. Está dirigindo um. Se eu clicar com o botão direito do mouse e inspecionar elemento, você pode ver o espaçamento em torno dele. Seu total de altura é 135, que também é um múltiplo de 27 pixels. Neste momento, a linha de base da minha escala tipográfica é de 27 pixels. Você pode ver que eu tenho preenchimento superior que é 27 pixels, e então eu tenho preenchimento inferior, que também é 27 pixels. Isto é como eu tenho usado estofamento superior e inferior neste título um. altura da minha linha é igual a 81 pixels. Esta é basicamente a altura. Se você vir aqui estilos calculados, você pode ver o tamanho da fonte é 61 e a altura da linha é 81. Você pode ver por aqui. Então não temos margem superior e inferior. Temos preenchimento inferior e margem superior, que é igual a 27 pixels, que é a minha linha de base. Agora, como você pode ver na parte inferior todos esses elementos, nossos parágrafos título 3, este é o cabeçalho 2, eles estão perfeitamente alinhados com nosso ritmo vertical ou linha de base. Você pode ver até mesmo a imagem que eu usei, a altura da imagem que eu defini para a linha de base múltipla 1,2,3,4,5,6,7,8,9, 27 multiplicado por nove, Eu não sei o que é, mas é igual a este. Agora, é assim que eu usei minhas margens e tudo mais. Deixe-me mostrar-lhe um outro exemplo que é um exemplo estranho. Este é 32 pixels, altura da linha, texto 32 pixels. Vamos ver como isso é colocado para fora. O tamanho da fonte é 32 pixels, altura da linha é 32 pixels, margem inferior é 27 pixels. Você pode ver o preenchimento inferior e o preenchimento superior são 11 pixels. Você pode ver aqui 11 pixels. É assim que eu usei minhas próprias configurações personalizadas para alcançar o ritmo vertical, você pode dizer no mesmo contexto. Então 11 e 11 e 32 é igual a 54. Basicamente 54 é novamente o múltiplo da nossa linha de base, que é 27 pixels. Deixe-me mostrar-lhe um outro exemplo onde eu eliminei, este aqui. Isso também é 54, mas aqui o que eu estou fazendo é que eu não estou usando nenhum preenchimento, qualquer margem ou qualquer coisa, apenas a altura da linha para conseguir isso. Agora, por que eu usei a altura da linha? Porque eu não queria chegar muito perto deste parágrafo. Eu uso a altura da linha para alcançar este ritmo ou este espaçamento, espaçamento vertical. É assim que você usa as margens, preenchimento e a altura da linha para alcançar o ritmo vertical e o espaçamento vertical. É assim que usamos CSS para alcançar ritmo vertical ou espaçamento vertical. Vamos passar para a próxima lição. 65. Para os profissionais de programadores→ de gridlover: Nesta lição vamos criar algo como isto. Nós vamos criar ritmo vertical usando esta ferramenta Grade-Level e ventilador [inaudível] este Basehold.it. Então vamos começar e vamos criar algo assim. Vou usar o Sublime Text. Você pode usar os dados de codificação que você tem, você pode até mesmo usar o bloco de notas. Eu vou usar rapidamente Doc, que é um atalho para documento HTML e eu vou salvá-lo, usar Control S, então eu vou usá-lo e salvá-lo na área de trabalho agora apenas para fins de prática. Este é o nosso ritmo vertical HTML. Assim que eu usar HTML, você pode ver aqui. Agora eu vou remover este bootstrap nós não precisamos bootstrap agora. O que vamos usar é que vamos usar folha de estilo e algumas outras coisas como link rel. Vamos usar folha de estilo para fins de normalização. Então vamos usar CDNJS normalizar. Vamos ver o que vai aparecer com este. Vou normalizar meu CSS, copiar e ir para este. Aqui temos o nosso CSS normalizar e precisamos de algum texto de exemplo. Eu vou abrir minha barra de ferramentas secreta, e eu vou usar este HTML Ipsum para obter algum código aqui. Então o que precisamos é talvez precisemos de alguns títulos. Onde estão os títulos? Aqui não temos títulos. Este é um pouco dourado. São títulos e tudo mais. Vou removê-lo aqui e colá-lo assim. Talvez precisemos de mais parágrafos aqui como este, e talvez de ir para o nível três. Talvez possamos usar um contêiner. Estou usando MX. Então é por isso que está pegando tudo no atalho e eu estou enchendo todo o resto. Então, se você conhece CSS, você terá a idéia. O que eu estou tentando fazer é que eu estou apenas preenchendo isso e eu estou usando este normalizar e eu estou indo para vincular e, em seguida, também vincular outra folha de estilo. Eu vou usá-lo como, style.css. Eu vou criar outro arquivo, na verdade, é o primeiro. Então este é o arquivo CSS que eu criei aqui. Agora vamos usar algo daqui, Nível de Grau. Então esta é minha configuração 4 tamanho é igual a 18 pixels, altura da linha 1,5, fator de escala 1,44, e eu estou usando valores de pixel. Você também pode usar REM ou M. Então o que vamos fazer é copiar tudo daqui, 1.44 sim. Isso funciona melhor no Chrome. Algumas funções não estão funcionando no Firefox. Não sei por que razão. Então eu vou usar REM e eu vou copiar tudo e copiar e colar no meu CSS. Vamos ver como ele vai ficar como em nosso navegador. É assim que meus títulos agora e tudo está funcionando. Vamos ver se ele foi aplicado ou não. Vamos aplicar o ritmo vertical usando nosso basehold.it, e nosso ritmo vertical é 27. Vou usar 27 aqui assim. É assim que nosso ritmo tipográfico atual é. Então, está bonito. Talvez eu precise de mais espaço em torno deste título HTML 1. Você pode ver como tudo isso está parecendo muito bom nesta configuração. Então vamos ver, talvez a Direção 1 precise de mais duas vezes. Talvez eu possa adicionar uma margem inferior de 1,6, uma guarnição como esta. Está parecendo melhor agora. Então também podemos usar algo para os parágrafos. Com o tamanho dos parágrafos, acho que está levando o tamanho do corpo. Agora, para o tamanho da fonte no corpo, eu vou corrigi-lo em 18 pixels. A altura da linha será de acordo com este tamanho da fonte. Podemos deixá-lo assim ou também podemos usar 27 pixels aqui e deixar tudo descansar assim. É assim que usamos o nível de nível de nível para obter nosso espaçamento vertical e alinhamento e tudo mais. Esta é a sua próxima tarefa, que é você vai me criar algo como esta. Certifique-se de que está alinhado verticalmente à sua linha de base. Você pode usar o nível de grau e criar algo semelhante a este. Também você pode ver aqui no topo eu estou usando este cabeçalho, que é a altura das minhas três linhas de base. Portanto, é quase 81 pixels. Se você quiser semelhante, aqui, você pode usar cabeçalho e você pode usar essa coisa aqui. O que eu uso é que há apenas três coisas que eu usei. Uma delas é que normalize.css apenas para manter suas folhas de estilo de configurações legais, então incorpore isso na parte superior, então estamos usando nossa folha de estilo personalizada, que é essa onde nós apenas copiamos e colamos, nosso código de RAM de nível de grau. Então este é o código que ele gerou e nós o usamos aqui. Em seguida, usamos Basehold.it para nos mostrar 27 pixels linha de base, e isso é tudo que precisamos usar, um ritmo vertical agradável olhando. Não vou importar força do Google diferente. Se você quiser alguma força, você pode importar isso. É assim que usamos o alinhamento vertical em nosso código, e para alcançar o alinhamento vertical em HTML e CSS. Seu próximo desafio é criar algo semelhante a este ou este você pode usar texto falso ou qualquer outra coisa, apenas me mostre suas habilidades e eu estarei esperando. Então vamos passar para a próxima lição. 66. Para os desenvolventes de a balança tipográfica de de: Hoje vamos aprender como usar a escala tipográfica personalizada Bootstrap, então como editar fonte base e outras coisas para Bootstrap. Agora uma coisa que você deve saber que Bootstrap realmente é uma droga no ritmo vertical, porque há muitos elementos, e estofos, e tudo mais. Você não pode mudar tudo por aqui. Também é responsivo, por isso ele vai atender a telas diferentes e tamanhos diferentes então você deve usar escala tipográfica padrão que Bootstrap já tem. O que eu fiz, eu acabei de baixar Bootstrap e começar Bootstrap. Agora é a versão 3.3.6. Agora, se você quiser baixar o código-fonte, você pode baixar o código-fonte em Sass ou Less. Eu uso Menos. Sass e Less, se você não sabe, eles são basicamente pré-compressores CSS. Se você ainda não os conhece, você deve começar a aprender qualquer um deles, Sass ou Less. Sass é um pouco mais popular e Menos é um pouco menos, mas eles também são quase os mesmos. Agora você pode clicar aqui e baixar a fonte. Você pode usar os dois. Se você quer menos, você pode baixar Less ou este. Eu baixei este aqui, e extraí aqui. A pasta que eu realmente preciso é este Menos. Esta é a pasta que eu preciso. Acabei de copiar esta pasta e incluí-la neste post de blog ou documento de escala tipográfica. Ambos estão usando todos esses arquivos Less. Deixe-me mostrar como tudo isso está funcionando. Agora aqui temos nosso arquivo HTML, e você pode ver aqui eu tenho link rel="stylesheet/less”, então eu estou usando “less.js”. Você pode ver na parte inferior ou aqui o tipo de script, JavaScript e CDN. Este é o “less.js” que você precisa incluir para permitir que o último script ou código para compilá-lo para CSS. Se você não sabe sobre o Less, basta ir para este “less.js” e ler sobre ele. É muito fácil, como pode ver por aqui. Não é difícil de usar. Você só precisa incluir uma linha de código em seu front-end e, e você pode alterar a folha de estilo rel para esta folha de estilo/menos em vez de CSS, e você começa a usar menos arquivos. Aqui eu tenho esse arquivo meno/bootstrap, importado aqui. Acho que importei duas vezes, então vamos remover este. Vamos abri-lo no navegador, e ver que tudo está funcionando bem. Temos este nível de cabeçalho 1, 2, 3, 4, 5, e esta fonte de parágrafo, e esta. Vamos ver como eu usei esses tamanhos personalizados para minhas fontes. A primeira coisa é que já sabemos este gridlover.net, e eu estou usando novamente a mesma configuração, 18, linha de altura 1,5, fator de escala 1.44. Agora o que precisamos daqui são esses valores em dessas fontes. Vire isso para eles, e nós vamos usá-los no Bootstrap. Então vamos abrir arquivos Bootstrap. Basicamente, o arquivo principal que você precisa incluir aqui a partir desta pasta Less é este arquivo bootstrap.less. Ele tem todas as importações de arquivos diferentes, e os arquivos que vamos mudar são essas “variables.less”, e outro, se você realmente precisa mexer com ele, é este “type.less”. Eu recomendo que não estrague este “type.less”. Tem outras configurações. Só estamos indo para este “variables.less”, e ir para esta seção onde temos tipografia, fonte, altura da linha e cor. Agora, para a família de fontes Sans Serif. Se você quiser alguma outra fonte, como eu queria ter Source Sans Pro, eu mudei para Source Sans Pro, e eu também importei este Source Sans Pro em meus documentos HTML para que possamos usá-lo aqui. Então família de fontes Serif é este, família de fonte mono-espaço. Agora a base da família de fontes é basicamente nossa família de fontes Sans Serif, então nossa fonte base é basicamente este, Source Sans Pro. Eles estão substituindo valores por essas variáveis. Não é muito difícil de entender. Agora o tamanho da base da fonte era de 18 pixels, como vemos aqui. É 18 pixels. Eu defini para 18 pixels. Estas são funções diferentes, ceil e chão, para arredondar esses valores. Você pode usar qualquer um deles. Um arredonda para o próximo dígito, e um para o anterior. Você pode conferir se quiser alterá-lo. Agora como esse valor está vindo, esta é basicamente a minha escala. 1.44 é a minha escala. Você também pode usar este Modularscale para obter todos esses valores, então eu vou usar este. Deixe-me mostrar-lhe como usar este, 18 pixels e nossa relação é 1,44. Esta é a nossa primeira fonte, que é 18 pixels, depois 1,44, depois 2,074, depois 2,968, depois 4,3. No mesmo sentido, se formos para isso, ele tem cálculos diferentes, tamanho da fonte 3 em, 2,05, ou algo assim. Então o que vamos fazer é copiar esses valores e colá-los onde precisamos deles. Como 4.3 vai ser o nosso, por exemplo, Título 1 tamanho. Então o que vamos fazer é o título 1 tamanho é 4.3, então temos 2.986. Vou pular tudo rapidamente para que você possa usar o tamanho que quiser. Estou usando o título 5, que tem o mesmo tamanho em 18 pixels. A rubrica 6 é um pouco menor. Eu acho que nós dois devemos ter o mesmo tamanho para este aqui. título 6 é um pouco menor, talvez possamos usar um tamanho pequeno para este, que é 0,694 aqui, mas vamos usar um que é 0,694 aqui, tamanho menor que é 694 aqui. É 694. Então temos 2.074, e depois temos 1.44. Eu tenho que mudar um monte de telas, 1.44. Então temos 1 em, este, e depois este. Estamos prontos para as rubricas. Altura da linha. Você pode mudar a altura da linha, se quiser. Eu defini para 1,25 porque, se você se lembra, cabeçalhos precisam de menos altura de linha. Então, estamos definindo menos altura de linha para cabeçalhos. Você também pode usar 1 ou talvez 1.1, algo assim. Vamos salvá-lo e ver como o nosso post vai se parecer. Esta é a nossa escala tipográfica definida em Bootstrap. Esta é a escala, basicamente, personalizada para Bootstrap, ritmo vertical, então não vamos mexer com o ritmo vertical personalizado do Bootstrap. Se você realmente quer, vá em frente e mexa com isso. Deixe-me mostrar-lhe um exemplo. Você precisa alterar o arquivo “type.less”, basicamente. Então aqui temos um rumo para a família com altura de linha e tudo definido para todos os títulos. O que vamos fazer é mudar as margens, o topo, o fundo, e tudo para cada rubrica, até o parágrafo e tudo mais. Deixe-me mostrar-lhe o arquivo de exemplo. Vou incluí-lo neste post. Esta palestra exerce fontes, confira. Deixa-me mostrar-te onde está. Isso também é um exercício para vocês, pessoal, então eu só dificultei um pouco. Este é o post que eu mostrei a você post de blog com Bootstrap usando escala tipográfica personalizada e tamanhos, e eu estou usando 27 pixels como minha linha de base. Como eu fiz isso, deixe-me mostrar as variáveis nesse tipo de arquivo. Deixa-me mostrar-te como é. Agora você pode ver aqui, eu mudei alturas de linha e tudo para H2. É diferente. Você pode ver margem superior, inferior, preenchimento, 0, mas a altura da linha é a altura da linha multiplicada por 2. Então temos o título 3, tudo é 0, altura da linha por dois. Então temos o teste de Cabeçalho 3, que é a manchete superior aqui, este aqui. Ele tem [inaudível] -los fora da batida, por isso é padding-top 11, em seguida, padding-bottom 11, linha de altura 32 para que todos estes igual a 54, tamanho da fonte 32, e família de fontes também é personalizado. Estas são as configurações personalizadas das configurações padrão do Bootstrap, então não se preocupe com elas. Então foi assim que preparei tudo por aqui. Você precisa ajustar cada cabeçalho superior, margens inferiores e tudo mais, e altura da linha para realmente usar o ritmo vertical no Bootstrap. Então eu não aconselho isso porque isso vai apenas definir o texto. Mas e os botões, janelas modais, outros controles? Eles vão sofrer com essa configuração, então eu sugiro que você fique com as configurações padrão do Photoshop e apenas altere as variáveis. Brinca com eles. Então, o que aprendemos hoje é que usamos nossa Modularscale para obter esses valores e usá-los em nosso Título 1, 2, 3 e 4, ou você também pode usar esses valores também se quiser, se você gosta deles. Então é assim que usamos escala tipográfica personalizada no Bootstrap. Isto termina a minha palestra. Também quero que você jogue com ele, tente baixá-lo, e altere algumas configurações, e veja como eles se parecem. Tente também mudar essas famílias de fontes e brincar com ela. Então este é o fim para esta seção. Vou tentar incluir qualquer coisa nova que eu vir acima com como mudar fontes ou escala tipográfica para dispositivos móveis e dispositivos de tamanho médio como iPads e outros dispositivos de tamanho médio. Vamos passar para a próxima palestra. 67. Para desenvolvedores → Dont, usar o código da Typescale: Olá a todos. Eu lhe falei sobre uma ferramenta que é typescale.com. Hoje eu experimentei seu CSS, este e falhou miseravelmente. Portanto, não tente usar seu CSS ou valores daqui em sua escala. A melhor ferramenta é novamente este gridlover.net. Então use este código daqui. Agora eu uso este código e deixe-me mostrar como minhas coisas saíram. Deixe-me mostrar-lhe o exemplo na demonstração. Ok, agora a altura da linha, eles não mostraram, mas eu calculei, são 29 pixels. Você pode ver que nossos títulos estão alinhados muito bem na altura de três linhas de base. Mas o problema é que com os nossos parágrafos, eles não estão alinhados. Agora há um outro problema que é com o nosso nível de direção 2 e 3. Então, se você usar o título 2 e, em seguida, o título 3, há um monte de lacuna. Como este código está usando a mesma margem superior que você pode ver aqui, margem superior é 1.4144, título 1, 2, 3 e 4. Então, todos esses títulos têm uma margem superior que é muito, então eles vão ser muito separados um do outro. Eu não acho que você deve usar este aqui. Você pode usar valores aqui em sua escala. Então, se você estiver usando algo como 1,44, para que você possa ver que o valor mais baixo ou valor de texto pequeno é 0,694, você pode usar isso, mas eu não recomendo usar ou pegar seu CSS. Para mim isso gera alguns problemas. Não está alinhando com precisão. Eu não sei para que o fabricante de ferramentas ou codificador usou ou talvez o que ele tinha em mente. Mas para mim não está alinhando. Então esta é outra dica para não usar código de escala de tipo e usar nível de grade. Acho que devemos passar para a próxima lição. 68. Para desenvolvedores → introdução à tipografia responsiva: Vamos falar sobre tipografia responsiva para aqueles que são codificadores e designers de front-end ou codificadores que eles sabem que este é um problema muito grande. Existem duas maneiras que pode haver um monte de poucos plugins disponíveis a partir jQuery ou algo assim, mas eu normalmente uso essas duas soluções. Topografia responsiva significa que seus tamanhos de fonte devem ser ajustados de acordo com o tamanho da tela. Se você tem um tamanho de fonte muito grande como 80 pixels ou 61 pixels fonte ou talvez fonte de 70 pixels em uma tela grande. Você acha que em um pequeno dispositivo como talvez 480 pixels de largura é um tamanho bom ou relevante? Não, porque o tamanho da sua fonte será muito grande para essa tela pequena, talvez a tela inteira seja preenchida apenas com o seu cabeçalho. Você realmente quer isso? Não, tudo bem. Vamos ver quais são as soluções para esse problema. A primeira solução que vou falar é usar o valor percentual do tamanho da fonte HTML. O que fazemos aqui é que nós corrigir o tamanho da fonte nosso tamanho da fonte base e altura da linha no elemento HTML. HTML basicamente é o elemento superior. Ele vai controlar tudo o tamanho de cada fonte ou cada texto em sua página. Para telas pequenas ou talvez médias, você define o tamanho da fonte para alguma porcentagem, de modo que seja relevante para a tela da área de trabalho. Se você tiver tipo de fonte de 18 pixels na tela da área de trabalho ou grande para telas grandes para telas pequenas, defina como 80%. Você pode definir em telas médias para 90%. É uma solução pouco barata para este porque os nossos acolchoamentos, margens e tudo o resto será o mesmo que pode gerar algum problema, mas é uma boa solução. Reduza o tamanho da fonte para 80% do tamanho base. Se seu cabeçalho for como 60 pixels, ele pode se tornar 50 pixels ou talvez menos do que em telas pequenas. Esta é uma maneira. Vou mostrar-lhe exemplos de codificação exemplos para ambas as soluções. Esta é a primeira solução. Vamos dar uma olhada na segunda solução. segunda solução é mais avançada ou você pode dizer que é mais eficiente do que a anterior. Aqui usamos duas escalas de tipo separadas para nossas telas diferentes. Para a minha tela móvel ou telas pequenas, eu posso estar usando escala de tipo que escala menos quando atualizado de 18 pixels para algum outro tamanho de cabeçalho. Para tela de desktop eu posso ter uma escala muito abrupta que escala com um monte de mudança de um tamanho de fonte para outro. Deixe-me mostrar-lhe um exemplo com o uso de site de escala modular. Aqui temos o site em escala modular. Vou usar 18 pixels e minha base. Minha primeira proporção será de 1,5 ou você pode ter 1,44 que estávamos usando em nossos exercícios anteriores. O que você pode fazer é usar o segundo como 1.2 para algo assim. Você pode ver tamanho B e tamanho A estes são dois tamanhos diferentes. Em telas móveis nosso primeiro tamanho de fonte será 18 pixels, então será 22 pixels em seguida, será 27 pixels aproximadamente, em seguida, será 32 pixels ou 33 pixels. Ou se você quiser ir mais à frente disso, você pode ir para 40 pixels. Mas você pode ver nossa relação superior que era azul um sobre aqui.You pode ver 18 pixels é a nossa base que está em preto e a próxima parada é 26 pixels, depois 37 pixels, então 54 pixels ou talvez como os 77 pixels. Temos uma gama muito grande de mudanças em uma proporção e na outra relação que vamos definir para nossos dispositivos móveis ou pequenos que vamos usar relação menor ou menor. Um outro conselho é que eu vi em diferentes sites ou especialistas eles dizem que se sua proporção é 1,5 tentar obter a outra proporção que é como com a diferença de 0,25. Isso basicamente não vai mudar abruptamente o problema de dimensionamento, então é basicamente uma mudança passo a passo, um passo vai ser 0,25. Estamos basicamente aumentando ou diminuindo a relação com 0,25 que é a metade de 5,5. Se eu tiver 1.44, eu poderia ir para algo como 1.2 para algo assim. Parece mais racional e é assim que existem duas escalas de módulo para telas diferentes. Você pode ter um terceiro, mas eu acho que para tablets e telas grandes uma proporção é suficiente e um é bom para o seu celular e telas menores. Estas são as soluções que usamos para topografia responsiva. Você pode encontrar um monte de ferramentas JavaScript ou talvez plug-ins. Eu vou compartilhar um documento de recursos contendo todos os links ou talvez os plugins JavaScript que eu encontrei neste tópico, mas agora eu estou mais preocupado com soluções CSS em vez incluir outro arquivo extra JavaScript. Isto é tudo sobre topografia responsiva. Nas próximas duas lições, vamos ver os exemplos para ambos. Vamos usar essas escalas, então vamos começar e passar para a próxima lição. 69. Para desenvolventes de profissionais para vários tamanhos de tela: Nesta lição, vamos usar a segunda técnica ninja secreta para o nosso dimensionamento de fontes, para web design responsivo. O que é, na verdade, nós vamos apenas mudar o fator de escala porque nosso tamanho de fonte parece muito grande em telas pequenas. Anteriormente, estávamos usando 1,44 como nosso fator de escala, agora vamos usar 1,22. O que vamos fazer é, vamos copiar tudo daqui. Vamos mudá-lo para pixel e, em seguida, REM, apenas para ver que os tamanhos foram atualizados. Eu vou copiar daqui para o topo, CTRL+C, e o que eu vou fazer é, eu vou para a minha tela pequena, que é esta, então a tela somente mídia, esta é pequena tela, eu vou remover essa porcentagem HTML sistema de controle, e nós vamos colá-lo aqui. Vamos substituir isso por nossos 18 pixels. Para a altura da linha usamos 27 pixels, desculpe, era 27. Não consigo ver o meu teclado na parte de trás do meu microfone, está mesmo à frente do meu rosto. HTML. Isto é muito mau. O primeiro passo é, eu sempre tento usar o meu tamanho da fonte para elemento HTML. É melhor para mim e às vezes acho que é recomendado pela maioria dos usuários especialistas. Se você é mais especialista do que eu, você pode escrever sobre isso na pergunta ou qualquer coisa que você possa sugerir sobre isso. Agora, o que vamos fazer é, vamos ver como vai ficar na nossa pequena tela. Primeiro, o que vamos fazer é remover esse tamanho de fonte HTML e mudar em nossas telas médias, porque não precisamos dele. Vamos ver como estão as nossas fontes e os tamanhos. Mude com este grande, ok, médio, é o mesmo, não precisamos de nada para mudar. Vamos a isto. Aqui temos o pequeno. Você pode ver que o tamanho é deslocado drasticamente, mas nossas alturas de linha estão parecendo algo estranho. Além disso, há muita distância entre esses dois parágrafos. nossa segunda posição é boa, terceira posição também é boa, mas a primeira posição tem um pequeno problema. Vamos consertar isso. Vamos para o título um em nossa consulta de mídia, então este é o nosso início de consulta de mídia, e este é o nosso título um. Tamanho da fonte é este, altura da linha é um pouco acima do tamanho da fonte, então eu acho que deve ser semelhante. Talvez você possa usar algo assim, apenas a altura da linha um. Vamos salvá-lo e atualizá-lo. Está parecendo melhor agora, mas agora temos outra questão que é, este parágrafo ficou muito mais perto deste título. Vamos afastá-lo da direção um. Nós vamos usar este aqui. Nós estamos indo para copiar e colar margem, inferior, e superior são os mesmos. Agora, não se preocupe com a vertical com eles, só vamos seguir o nosso instinto, então não se preocupe com isso agora. Está parecendo melhor. 70. Para profissionais de profissionais → de de Percentage para tipografia responsiva: Nesta lição sobre tipografia responsiva, vamos olhar para o primeiro exemplo que vimos em nossa palestra anterior, a mudança de valor percentual para o elemento HTML para controlar o tamanho da fonte. Agora este é o arquivo que estávamos usando em nossos exemplos anteriores. Deixe-me mostrar-lhe quais são as configurações que temos. Tamanho da fonte que é 18 pixels, gridlover.net. Estamos usando essas configurações,1,5 altura da linha, e o fator de escala é 1,44. O que eu fiz foi copiar este código REM daqui para o arquivo CSS. Este é o mesmo arquivo CSS. Há poucas coisas que fiz com ele. Um, é que eu importado normalizar, sempre tentar importar este normalizar para redefinir seus estilos CSS ou estilos padrão do seu navegador e tudo mais. Então este é um must-have, sempre inclua isso em seus projetos. O segundo é este meta viewport. Você deve ter este para suas telas móveis ou dispositivos, pequenos dispositivos. Esta é a nossa folha de estilo e é assim que ela está olhando agora. Deixa-me mostrar-te esta. Vamos abrir no navegador. Aqui temos, você pode ver no lado direito que está mostrando tela grande. Como eu fiz isso, eu usei body:after tag. Se você não estiver familiarizado com essas pseudotags ou pseudo-elementos de HTML, você deve estudar sobre eles. Digite o site Google ou W3C para saber mais sobre eles. Isso é basicamente adicionar um botão depois do meu corpo tags. Então é assim que está se mostrando aqui. posição é fixa e centro de alinhamento de texto. Basicamente, estou exibindo um botão depois do corpo. Assim como os meus elementos do corpo começaram, este continua a aparecer depois disso. Então estas são todas as configurações. Esta é a cor de fundo. Por que eu estou usando isso? Porque, deixe-me mostrar-lhe, se eu mudar para a minha visão responsiva, você pode ver como a tela fica muito pequena, ele muda o texto e a cor para pequeno. Usei-o para testar a nossa topografia responsiva. Esta é uma tela média e esta é grande. Aqui temos assim. Você pode ver pequeno, médio e, em seguida, grande. Vamos torná-lo um pouco maior. Agora, isso é uma coisa, como eu consegui isso rápido? Eu declarei este corpo no meu simples CSS normal. Então eu fui para esta consulta de mídia em mídia única largura máxima da tela 600 pixels. Neste ponto, qualquer tela que é 600 pixels ou menos de 600 pixels, eu estou adicionando um conteúdo de pequeno para este corpo: após tag e cor de fundo é este. Este é um pouco esverdeado. Este é um pequeno trecho que escolhi de um cara online. Eu não tenho certeza de lembrar qual era o nome dele, mas é uma ferramenta muito útil quando você tem que testar suas consultas de mídia. Isto está tudo pronto. Neste momento, o tamanho da nossa fonte não muda. Se você vai para a tela média ou pequena, você pode ver se eu vou para este tamanho de tela pequena, que é como 360, algo assim, não está mudando em tudo. Então o título é que você pode ver uma letra, desculpe, uma palavra por linha, está parecendo muito estranho para mim. Acho que não devia estar assim. Agora, o que vamos fazer é, deixe-me ver se o arquivo correto está aberto no navegador. Sim, é o mesmo. Agora o que vamos fazer é usar outra escala, desculpe, uma porcentagem para nossos documentos HTML. O que eu fiz foi, copiei todo esse código. Vamos copiá-lo novamente só para ter certeza de que você pega tudo. Então “Copiar” isso e eu vou colá-lo no meu style.css assim. Apague tudo o que eu tinha antes. Não este corpo: depois da etiqueta e do Controlo V. Isto é o que estou a usar. Basta atualizar o arquivo, e você pode ver que essas são as configurações que eu estava usando. Você pode ver aqui eu tenho alguns problemas com a margem inferior neste título 1, vamos ignorá-lo agora. Agora a primeira mudança que vamos fazer é, vamos escrever nosso modelo HTML porque precisamos controlar os elementos. Então HTML, e vamos usar o tamanho da fonte e a altura da linha neste. Vou usar em vez de 1,25 REM, vou usar 18 pixels. Esta é a nossa fonte base, e a altura da linha será de 27 pixels. Então o primeiro passo é, eu vou remover esse tamanho de fonte do meu corpo para este elemento HTML, e nós salvamos isso vamos atualizá-lo. Nada vai mudar. Vamos mudar esta margem inferior igual a esta margem superior para o título um que está olhando muito diferente da minha perspectiva. Agora está melhor. Também você pode ver nesta área aqui, este cabeçalho 2 tag, tem um monte de altura de linha, que é este. Vamos fazer a altura da linha igual a isto, igual a este tamanho da fonte, que é dois pontos algo parecido com isto. Está melhor agora. Estes são os poucos ajustes que fiz. Usei o meu sentimento interior ou o que quer que lhe chames, para garantir que tudo parecesse bem. Agora, se passarmos para o pequeno, médio, e então grande, ele está mostrando fonte muito grande na tela pequena, eu acho. Vamos ver qual é o tamanho dessa fonte. Eu acho que vai ser 61 pixels antes de irmos para computá-lo. Sim, é 61, 60,75, que é 61 pixels. Então vamos ignorar isso agora mesmo. Agora vamos usar nossa porcentagem HTML para controlar o tamanho nos tamanhos da tela. Então, vamos copiar este código e vamos para esta tela somente de mídia. Vou colá-lo dentro disto, porque este está relacionado com... Vamos movê-lo para cá. Vou colá-lo aqui assim. Agora, para as telas pequenas, vamos mudar nosso tamanho de fonte para 80 por cento ou talvez 85, 80 por cento. Vamos definir para 80 por cento. Para nossas telas médias, vamos usar o meio do sistema, vamos usar 90 por cento. Vamos ver como isso parece ou se sente. - Sim. Agora na tela pequena você pode ver que temos pelo menos duas palavras em nós, uma única linha e está olhando melhor do que antes. Antes era apenas uma única palavra em uma linha, e estava ocupando um monte de tela no meio, você pode ver o tamanho vai mudar para cima. Você pode ver como o tamanho está mudando nos diferentes tamanhos de tela. O problema com essa técnica é que você pode ver que o tamanho da fonte do parágrafo também muda, e parece um pouco menor em sua tela pequena. Então, se você quiser ajustar isso, você pode ajustar o tamanho da fonte do parágrafo aqui assim. Tamanho da fonte, 120 por cento. Aumente o tamanho porque seu HTML já está diminuindo. Vamos copiar, desculpe. Temos que colá-lo aqui, assim. Então vamos ver como vai parecer. Agora está melhor. Você pode ver aqui, na tela média, está parecendo melhor. Na tela pequena, novamente, nosso tamanho de parágrafo é melhor do que antes. Esta é uma correção rápida para sua tipografia responsiva, e se você não souber sobre consultas de mídia, leia sobre elas ou aprenda sobre elas. Não é muito difícil. Vamos ver qual é o efeito disso. Então é assim que usamos valores percentuais para o nosso HTML, desculpe, tamanho da fonte HTML e diferentes elementos como eu usei no parágrafo. Você também pode direcionar suas tags de cabeçalho como H1, H2, H3, H4 e dimensioná-las usando valores percentuais. Acho que é uma técnica muito elegante. Mas o problema é que com essas margens, elas vão ficar iguais em todas as telas como você pode ver aqui. Então, se você quiser ajustá-los, precisamos da segunda técnica. Vou incluir todos esses arquivos nos recursos, então certifique-se de baixá-los e ver o código você mesmo. Se tiver algum problema, se não entender nada, faça perguntas. Não se preocupe com isso. Vou responder a qualquer uma das suas perguntas mais estúpidas. Então não resista, não se preocupe, apenas pergunte. Então vamos passar para a segunda técnica, que é que vamos usar duas escalas tipográficas diferentes para telas diferentes. Vamos passar para a próxima lição. 71. QA para estudantes → como expandir a escala tipográfica para uso de web de: Nesta lição eu vou falar sobre Escalas Modulares, e eu vou falar sobre escalas modulares especificamente para web, celulares e tablets. Uma de minhas alunas, o nome dela é Sandra, e eu acho que ela está tendo um problema em entender como ela pode usar uma escala modular diferente para um celular e para tablet, porque em tablets e celulares, você não pode usar um tamanho muito grande como desktops. Eu vou mostrar a vocês usando escala modular ponto com, como podemos escolher diferentes escalas, ou talvez podemos ter várias escalas, possamos usá-las em qualquer dispositivo; talvez dispositivos menores, escala diferente e, em seguida, tablets, escala diferente, e para desktops vamos usar uma escala diferente. Vamos começar. Agora, como você pode ver nesta escala modular ponto com, minha base está definida para 16 pixels e proporção é 1.5, então este é o padrão. Agora, eu recomendo que não opte por uma proporção muito maior porque você pode ver aqui, você tem este 81 pixels, então talvez possamos usá-lo é um tamanho muito grande. Então temos este 54, então 36, 24, 16 é o nosso tamanho base. Agora, se formos a este tamanho pequeno, eles são quase inutilizáveis, então não podemos usar este 11 pixels ou 10 pixels, porque ele é realmente pequeno. Agora, como resolver esse problema? Agora, se você for para essa proporção, vamos usar ou adicionar outra proporção aqui, então o que vamos fazer é, vamos usar, basta remover isso; e vamos usar, anote esses tamanhos Aqui, 81, 54, 36, 24 e 16. Agora, o que vamos fazer, é dividir este cinco pela metade, então vamos usar metade dele, que vai ser 0,25. Agora, temos um conjunto separado de tamanhos, que é 61 e 49, 39 pixels, 31 pixels, 25, 20, 16, e lá temos outro tamanho que é 13 pixels ou 13 pontos. Este é um tamanho agradável, agora temos uma escala muito grande, tínhamos quatro tamanhos da escala anterior, onde estávamos usando a proporção 1.5, então um, dois três, quatro, cinco, então 16 é comum, então Vou usar estes três, 54, 36 e 24. Então também podemos usar 0,25 e também podemos usar isso, 49, 39. Por exemplo, se você estiver usando algum celular, você quer tamanho móvel para o seu título um, então maior título, você pode usar este. Porque se você usar este ou talvez 54 pixels, ele será muito grande, então aqui vamos nós. Temos um monte de opções de tamanhos diferentes todos aqui assim, e se você quiser mais, você também pode ir para 1,75 e você terá tamanhos diferentes como 49, 28. Você pode ver que este é um novo tamanho, 28, também, você pode ver este 85 ou 86. Estes são os métodos que eu uso para obter escala com um monte de tamanho diferente. Se eu for para este add, agora você pode ver que eu adicionei duas telas aqui, eu usei este plus, então eu tenho duas escalas diferentes, 1.5 com este, e se eu for para este, eu posso utilizar 1.25. Agora, eles são lado a lado, agora você pode ver aqui, se eu for para esta mesa, você pode ver que temos um monte de tamanhos que são realmente utilizáveis, e você pode ver este 61, 48, um, dois, três, quatro, cinco, seis e sete; sete tamanhos aqui, um, dois, três, tamanhos aqui, então sete e três, temos muita flexibilidade de 16 pixels, então temos 20, 24 ou 25, então você pode usar 31, 36, 54, 40 pixels e 49 pixels, então podemos usar 61, e então podemos usar 81. Você pode ver aqui nós temos outra escala, então você também pode adicionar mais uma, que vai ser 1,25, e você pode ver aqui, nós temos mais alguns tamanhos, então 1,75, agora você pode ver que temos 28, que é um novo tamanho, 49. Já temos 49, pode ver aqui. Se você incrementar ou diminuir seus valores neste intervalo, como passos de você pode dizer quantidades iguais como se nós temos, por exemplo, 1.8 como uma proporção. Por exemplo, este, este é 1.8, então eu vou mudar este para 1.6, e este para 1.4. Você pode ver como eu estou usando tudo isso, então é 22 então nós temos 26, então nós tivemos 29, três tamanhos diferentes. 32, 41 e 52. Desta forma, você pode ter várias balanças modulares, uma ampla gama de tamanhos diferentes e você pode usá-los como quiser, você pode usá-los em celulares. Você pode selecionar três ou quatro tamanhos para celulares, e você pode selecionar apenas dois ou três para desktop, então é assim que você pode aplicar essa escala modular e expandi-la para qualquer aplicativo. Isso é tudo sobre balanças modulares e como você pode expandi-lo para celulares, tablets e smartphones. Acho que é isso, e se ainda não fizer sua confusão ou tirar suas confusões, você pode me fazer perguntas a qualquer hora. Vejo você em breve em outra lição. Cuide-se e adeus.