Domine os grids de layout (Figma, Adobe XD e Sketch)

1. 1 - introdução: Ei, bem-vindo a este novo tutorial que vamos falar sobre Ótimo como fazer suas notas de camada para o produto digital. Você vai ver um pouco fora da teoria? Sobre o quê? Nossas colunas, Rose calhas, Martin é tudo e vamos ver e a saudação mais usada em todo o mundo, que são reforçando grãos e oito pixels. Então vamos chamá-la de como fazê-las. - Como? Toe Use-os e eu mostrarei como usar. Quero dizer, invenção em um esboço em. Então, se você estiver interessado em aprender tudo sobre a Layer Greece juntou-se a mim. Dedo do pé neste curso. By the way, eu vou ux designer 20 anos de experiência em todo tipo off gráfico e centrado no usuário. Hum, assine. Então, siga-me e vamos a isto. Por que agora? Nós somos o curso. Então venha, junte-se a mim e te vejo mais tarde. No resto 2. 2 - que inferido são Grades (teoria): Ei, bem-vindo a estes cursos. Vamos ver tudo sobre o Les Upgrades. Bem, eles são. Então, quando você não sabe nada sobre re para assistir a si mesmo, o que diabos são os jogadores com? Certo, então o que diabos são mentirosos? Ótimo. Bem, cumprimentos são instrutores invisíveis que nos permitem fazer mais equilibrados em decisões consistentes e, portanto, tomar decisões menos cegas enquanto fazemos qualquer tipo fora de produto que, digamos, trazer física digital qualquer coisa. Então eles são baseados em negócios verticalidade. Eles são chamados de colunas em divisões não se assemelham, que geralmente os chamamos de Rose. E depois de todas essas fileiras estarem puxando para uma cena, isso é o que chamamos de linha de base. Certo? Então nós temos, como, uma breve introdução sobre isso aqui. Podemos ver algumas amostras gananciosas para qualquer sentido, este tipo de revista ou jornal para que possamos ver aqui estas divisões de sopa, subdivisões verticais aqui. Sim. Então, neste caso particular, temos 123456789 10 11 e 12 colunas. Tudo bem, então este é layout de 12 colunas, ganância para esta revista ou jornal em particular. E aqui nós temos, tipo, algum anúncio da Adidas onde você pode ver que eles dividiram o patê em meio seis. As colunas. Por isso, têmo-los aqui e também eles têm o pelo debate em três linhas. Desculpe, em seis fileiras. Você pode vê-los aqui, certo? Então, mesmo que não possamos vê-lo aqui no design, eles são. Eles têm feijão. Todos os projetos foram projetados com algum grau de layout atrás. Então, mesmo que seja em negrito BC, você pode ter algum senso fora de ordem, algum tipo de estrutura atrás. Então aqui você pode apreciá-lo novamente para que a posição do texto seja se não é aleatória. Digamos que está tudo ajustado para a grade de layout. Neste caso, os destinos se opõem aqui em baixo que nesta parte da isca, certo, certo, por exemplo, em protestos físicos, o mesmo que você pode ver aqui nós temos como, sim, Tipo, você sabe, eu não sei o nome desses em inglês, mas digamos que você sabe, guarda-roupa ou algo assim. E como você pode ver, é o sinal de vitória concordado. Então eles começam com a forma e depois dividem-se verticalmente e horizontalmente. Eles espaço você metade bem, então você faz um layout consistente sobre a mesma coisa se aplica aos sites. Como você pode ver, aqui está um layout muito típico é dividido por 12 colunas. E como você pode ver, mesmo que seja ah, é um sinal inicial de partícula aqui você pode ver que não é o texto, por exemplo, não está anexado à primeira linha. Algumas coisas são iniciadas na primeira linha, como a urze neste acabamento, bem como na Última Coluna, e este texto começa aqui. O mesmo aqui. O mesmo material aqui. E como você pode ver a foto também, está seguindo esta coluna. Ok, então vamos ver alguns conceitos. Então você acalmou todas essas coisas. A coisa importante. Você precisa saber. Por que fazer eles concordaram são esses termos colunas, rosa, calhas e margens. Algumas pessoas se levantaram de forma útil. Não os use. OK , você também. Principalmente estão indo trabalhar com colunas calhas no Martin. Mas isso é meio importante. Vamos ver mais tarde por que, mas vamos ver alguns exemplos desses um pouco mais fora da teoria. Certo, então com base nesse design teria à sua direita, vamos ver, já sabemos o que na Coram são. Então eu não vou explicar muito isso. Mas colunas, como já vimos antes, dividir a bússola, o ARB ou debates seu físico provocou tudo na vertical e fora o mesmo fora do mesmo com ladrão Parece tudo bem. E como você pode ver entre essas colunas, há alguns espaços, ok? E esses espaçadores são o que chamamos de calhas. Ok? Essas calhas são o espaçamento entre as colunas. Ok, se você está seguindo qualquer tipo fora, vamos voltar para o dedo do pé. Sim, voltou do dedo do pé são basicamente se você está seguindo qualquer tipo fora da ganância ou, você sabe, há uma dor típica sobre um pico de vendas, tudo. O que significa é que todas as colunas no espaçamento na Martine em seu separado em sobre a separação entre os alemães são múltiplos fora que número oito pixels é o mais comumente usado na parede na Web design e na obrigação de cima design. Se você está falando de revistas ou jornais desse tamanho, é diferente. Normalmente é ter fotos. Certo, 1214. Algo em torno de que alguns jornais que têm fontes super minúsculas eles usaram, hum, como 10 pixels com ok, mas geralmente em produtos digitais. O que você está indo para usar este post filme off comeu algumas algumas algumas pessoas. Está chegando a números mais baixos, a fim de ganhar mais versatilidade, como eles estão caindo para quatro pixels ou para excesso, como Google ou IBM com seu sistema projetado Carbone. Eles estão caindo porque percebem que precisam de mais flexibilidade. E às vezes um píxeis pode ser um pouco apertado. OK, então o que está de volta? Linhas de base? Linhas de base são principalmente são divisões horizontais, e, como você pode ver aqui temos como o mesmo está enfrentando estes tipo fora Bink costurado e este branco . Então, como você pode ver, nós temos como colunas horizontais. Vamos colocar dessa forma. Então temos, como a largura da coluna, que é de oito semanas L. E então temos a calha horizontal ou um espaço entre colunas. Neste caso, Rose. São oito pixels para então Cada passo que é feito por oito semanas é então eu acho que é importante porque se você seguir uma maneira super rigorosa de fazer muito bem, eu sou como, neste caso, ou se você está seguindo estes neste caso, Há um pixel. Ótimo o que você recebe. É um super assado e um bom ritmo vertical. Então todos os elementos são separados pela mesma quantidade fora de um espaço, ou é uma vitória é sempre vai ser como destino múltiplo, digamos oito, 16 ou 32 ou 24. E então se você tornar esses espaços consistentes, você vai ter, como um bom ritmo vertical. E isso também é importante, também é importante, porque se mais tarde, veremos isso com mais detalhes. Mas é importante que se você está colocando suas fontes com alguns tamanhos e tudo mais, é super importante que quando você disse que eles estão na altura fora da ordem fora da sua tipografia é com seus telefones. É importante que eles sejam múltiplos um dedo do pé do destino, por exemplo. Você está sentado como um tamanho de telefone de 14 pixels, mas a altura deitada deve ser múltipla off oito. Então, para esse caso, você quer ir para talvez 16 vai ser muito apertado. Talvez, mas talvez queiras aumentar para 24. Por que é isso? Veremos mais tarde, mas este é o dedo do pé bom. Obter adequado em bom vertical brilhante em seus projetos. Ok, então vamos com um “como conceito “aqui. Como eu disse, calhas são os espaços. Esteja fazendo suas colunas. Ok. Os suprimentos aplicados à sua rosa são os espaços entre cada fileira. Então você tem alguns está se baseando e outros também. Deve ser consistente em dois tamanhos. O mesmo com E se você for atacado no reboque, pixel. Ótimo. Digamos que umas fotos. Nosso filho. Exemplo. Você pode usá-lo como 16 pixels para celular a ciência e ir para 24 32 para desktop no design tablet . Certo, então as margens são os espaços que estão fora das nossas colunas. Ok, então nossas colunas, todas as colunas fazem nosso, digamos, trabalho prático em um espaço lá fora. Nós não trabalhamos. Não colocamos nenhum elemento. Ah, bem, estes têm alguns. Se você colocar como uma imagem de herói ou algo assim, você pode ir para o caminho para a amostra. Mas o resto do seu conteúdo vai ser anexado ao seu, digamos, trabalhar, trabalhar, costurado ou sua zona segura onde você coloca seu teste E esse lugar é o que você está colocando suas colunas tão fora que colunas o espaço que você tem vazio Esses são chamados de margens. Ok para mais amplamente assinar. Geralmente é entre 16 picaretas, vende 20. Pick vende algo em torno disso. Ok, algo que alguém vai cheio com. Mas na maioria das vezes você vai se ver trabalhando com 16 pixels. Eles têm 16 anos. Dependente de 14, dependendo de quê? Seu que tipo de pixel ler você está fazendo. Talvez estejas a trabalhar com uma luta, Pixel. Espere. Então você vai para cinco. Então, cabe a você. Mas lembre-se, é importante que você deixe algum espaço do lado de fora, dependendo do seu design. Neste trabalho, é o que chamamos de margens. Ok, então esta é toda a fúria que você precisa conhecer Eso agora. Vamos impactados. Pratique alguns layouts o mais comumente fora que você está indo para descobrir lá fora. Vamos, vamos aos vencedores. Ouça. 3. 3 - Bootstrap o grade de layout: Então vamos a essa lição nesta lição. Nós estamos indo toe aprendeu a fazer o layout bootstrap ganância. E você vai dizer O que é bootstrap e por que precisamos aprender o bootstrap. Ótimo. Bem, na verdade faço. Você não precisa saber, mas é um bom ponto de partida para aterrar o roubo. Por que é isso? Bootstrap? É uma estrutura para desenvolvimento rápido fora de sites em East Basin Esteem, L. CSS e JavaScript. E tem todos os componentes que você pode precisar. Estamos aqui para chegar à documentação. Você vai ver que ele tem um monte de componentes como fundos e tudo mais. Então isso é ótimo, porque podemos tomar nossas decisões. E os desenvolvedores de front-end podem codificá-lo super rápido porque eles já têm os fundos feitos e os cartões, os alertas e tudo mais. E, claro, mais tarde, mais tarde no front-end, os desenvolvedores podem mudar sobre isso. Estas garrafas biam o nosso design, mas eles já tê-los feito para que eles não têm que escrever todos estes óculos, colocar tudo no lugar para que eles só vão ter que sobrescrever o nosso novo design estético você I . Certo? E então há uma coisa importante aqui na documentação de bootstrap que é todos esses tipos de pontos de quebra que eles colocam pontos de quebra são quando? Quando o tamanho da tela. Então, para telas maiores que 1200 pixels, você estará trabalhando com o contêiner. Pensamos, digamos um local de trabalho e fora 1000 140 pixels. Ok. E vamos voltar para a casa. Quero mostrar-lhe uma coisa interessante aqui. Se inspecionarmos a casa fora Bootstrap, você verá que post op obviamente é construído em impulso sob bootstrap. E se eu selecionar este recipiente aqui, podemos ver aqui algo realmente legal, podemos ver as margens aqui como podemos ver em laranja, então perto dele aqui à direita. Nós temos como ele bar verde, que seria o nosso fora sarjeta que impulsiona abusos. Mas veremos isso mais tarde. Mas o importante aqui que eu quero que vocês vejam é que estamos trabalhando com uma área de trabalho real de 100 em 1110 pixels. Você pode ver aqui que temos aqui no meio. Temos todos esses valores, está bem? Mesmo que eles vejam, é eu que o faço maior. Você pode ver que esta área de trabalho ainda é a mesma aqui. Temos, tipo, tipo, uma borbulhante lá fora, adiando 15 pizza fit grandes vendas para o seu lado. Certo, então agora se formos para o dedo do pé do sigma e formos para as nossas notas, preparei todas as então agora se formos para o dedo do pé do sigma e formos para as nossas notas, preparei todas assaudações viáveis agora mesmo. Impulsionar. Uma pessoa estável é 4.5, mas eles estão prestes a lançar Bootstrap cinco. Uma vez que este é o mais comum, vamos replicar isso. Ok, este impulso embrulhado para o layout, mas não os cinco. Eu só vivemos aqui para que você possa dar uma olhada porque eu vou entregar esses documentos com você . Então você pode copiar e colar e duplicar e fazer o que quiser com. OK? E mais tarde, trabalharemos em nossos oito pixels, inicializando sua documentação, colocando esses pontos de quebra e contêineres e todas essas coisas. Ok, então aqui está a digamos, as configurações que inicializa colocar por padrão. E estas são as configurações que vamos aplicar o layout do dedo do pé aqui. Ok, então vamos ver. Sobre o que é isso? Então, temos o impulso de 44 configurações de layout são 12 colunas por padrão. Eles a pegaram. Lembra-se? Eles chegaram lá é o espaço entre as colunas é 30 pixels, e há alguma coisa articular que foi descartado. Nós, como vimos antes aqui, é que ele tem uma separação fora, que é a metade, como você pode ver, é 15 e 15 com somas 30. Então o que ele faz é pegar a sarjeta e colocar uma filha do lado de fora em uma filha do outro do lado de fora, lá fora fora fora do grande. Ok. E também podemos ver aqui. Vamos só fazer estes. Bem, talvez vejamos quantos fazemos, mas aqui temos o tamanho X l. O ponto de interrupção para o Excel é 1000. Então nós vamos criar aqui como Ann Arbor fora desta habilidade de carne criada a partir do zero. Então, para isso, vamos e vamos fazer. É para criar no nosso quadro fora. Ah, 1200. Meu 720. Está tudo bem. O importante aqui é o com ok. Fora do mandril. Mais lá em baixo. Você pode precisar mais tarde, mas estamos mais interessados na divisão vertical aqui. Então vamos fazer um par com ângulos. Aqui. O 1º 1 muda a cor aqui, um fala suíço. Queremos o contentor. Vamos criar o primeiro contêiner, que é 1140. Certo, então temos isso. Isso e nós a enviamos. Então colocamos para você aqui. E então eu vou replicar este e o que vamos fazer seu dedo do pé descansar 30 pixels . Porque lembre-se que já vimos antes é que, por padrão, Bootstrap coloca 15 pixels à esquerda e 15 pixels à direita fora das colunas. Então não temos todos esses 1140 pixels para trabalharmos. Isto é menos de 30? Ok, então isso parece ligar. Então podemos ver que a diferença está aqui, e eu óbvio para o centro. Ok, então isso vai ser vamos ver a cor. Então este é o nosso recipiente principal sobre isso vai ser exatamente assim. Ok, então deixe-me escrever um pouco isso. Rápido aqui. Então nós temos o nosso realmente ou em um contêiner mineiros. 15 seleções são da esquerda da coluna e menos 50 pixels da direita. Então estes nos dão 100 1000 110 células grandes fora. Agir trabalho selvagem no espaço. Tudo bem, então estamos quase conseguindo. Agora o que? Precisamos do Juiz Goto Lion ganance e ter uma mentira. Concordou. Aqui na marca de pés, você tem que escolher colunas e, em seguida, eles contam como vimos, ele tem 12 nessas configurações e eles se reúnem vai ser 30. Ok, então deixe-me aumentar isso um pouco. Ok? Então temos essa parte. Temos as nossas configurações. Tem 12 colunas e 30, mas ele disse para um trecho, quero dizer, se eu fizer estes quadros maiores, tudo vai dar o dedo do pé. Como você pode ver, as colunas um trecho isso está indo é isso é bom dedo do pé o sinal. Ah, 100% como cheio com os sinais ou sinais mais responsivos. Mas geralmente o que você vai precisar ou o que você encontra usando mais do que a ameaça dele. Se você quiser seguir estes bootstrap. Ótimo. É que você coloca isso no centro, e agora você tem que digitar uma semana para a coluna. Ok, então vamos aumentar isso até chegarmos ao nosso ponto. E agora, se assumirmos que significa, vemos que a nossa ganância de camada está perfeitamente online. Então, já temos nossa primeira ganância mentirosa. Ok. Para o bootstrap, este pode ser o tamanho da expiração para Busta. Vamos replicar. Sim, quanto mais, uh, o impulso móvel cair configurações projetou. Está bem, já o tenho aqui. Ok, então eu estou indo contra ir para replicar isso e apenas assim, excluir todos os elementos. Bem, neste caso em particular e apenas indo embora, eu vou me livrar disso e aqui. Sim, temos. Como eu tenho escolhido um 3 60 pixels com tipo off dispositivo android, mas você pode escolher o que quiser. Basta lembrar que a largura da coluna não é tão importante em termos desligados. Ajustar o dedo do pé como em um luto de pixel. Porque algo por causa dos sinais são responsivos. Então você não pode controlar o com fora da coluna tanto. Mas é mais importante do que o espaço vertical. Vamos ver agora. Imagine que queremos ter uns 15. Imagine que temos uma margem aqui, como 15 células de porco à esquerda e 15 imagens à direita, como dissemos antes. uma margem aqui, como 15 células de porco à esquerda e 15 imagens à direita, E é uma boa prática em dispositivos móveis, então temos, tipo, tipo, 330 caixas com aqui para o nosso contêiner. Então vamos e mentir concordado. Dito isto, as nossas colunas e o que vamos fazer aqui. Dizem que contam até três. Aqui é mais grátis. Quero dizer, você pode apenas colocar 635 o que você quiser e a margem sobre para ser consistente com o layout fora da muestra, e isso vai para três e o outro. Lembrem-se , eram 30. Ok? E o marketing. Aqui tem 15. Está no seu tamanho. , Às vezes,no design móvel, recomendo a mudança do dedo do pé para fazer um ponto de ruptura muitos patrimônio. Então você muda aqui os valores e talvez cabra com 24 ou até menos talvez 15 ou 16 dependendo do seu lado Georgie. Vamos capaz Strapped para aqui no design móvel é um pouco mais, um, mais um, relaxado para estes reforço particular para o que eu recomendo é dito que eles têm o seu para 15 também. Ok, 15 ou 20 múltiplos de cinco. Impulso para é mais baseado em múltiplos de cinco. Então porque como você pode ver, se nós jogarmos aqui como um retângulo, podemos ver que essas colunas têm 65 a separação é 30. Então tudo é múltiplo de cinco. Ok, então eu recomendo que você faça isso. E vamos ver aqui. O que você tem? É uma coluna de 97 ah. Mas se você quiser ser mais preciso, você pode mudar esses dedos você continua a sarjeta e fazer estes, eu não sei, talvez 95. Ou, você sabe, para que você possa brincar com esses convidativos. Você tem isso e o que você faz, é você vir aqui e então você tenta a justiça que nós temos lá. Sim. Então, se você colocar como um grupo de 22 o que você recebe, é uma coluna fora 95 e cabe a você neste caso particular. Mas eu coloquei aqui os valores padrão. OK, para mim, 30 pixels em separação móvel é demais, mas bem, é o que Bootstrap diz. Ok, então nós completamos nosso primeiro layout para a parada deles e para o celular. Mas formar um tempo. Vamos fazer alguma coisa com isto. Rose está aqui, qual é? Bem, eu não vou fazer isso com Bootstrap. Vamos ver como o que Rose e ritmo vertical com o nosso personalizar um pixel com na próxima lição. Ok, então você tem esses arquivos para que você possa olhar em volta e copiar todas essas saudações. Eles já estão aqui. Baseou-nos o estilo. Então você pode sim. Copiar. Cole-os, faça o que quiser com eles. Ok, então o sindicato está menos ligado. E vamos falar sobre as oito semanas acordadas. 4. Grelhas X 8px explicadas (e configurações no Figma): Ei, bem-vindo a esta lição. Ouça, nós vamos falar sobre um grande acordo de venda e como eu faço isso. Então, sem demora, eu só vou colocar aqui, como por padrão. Michael Bro sentado com este 1140 por ele. Não gosto desta sessão. Eu prefiro sim, pegar meus 100. É mais paisagem, tudo bem. De qualquer forma, o importante aqui é que com Então você está trabalhando para telas grandes fora do curso, você pode ficar grande. Você poderia ir maior, tipo, eu não sei, 100 1920 por você sabe, os valores padrão. Mas eu geralmente prefiro dedo do pé trabalhar um menor como algo em torno de que Estes são os meus valores padrão para a configuração. Há javalis. Ok, então vamos. E vamos um grego aqui. Bem, mais isso está de acordo? Somos colunas. Ok, então para a contagem, o padrão, lembre-se, é 12 para esta parada. E o que queremos aqui é apenas centralizar nossas 12 colunas aqui e a reunião. Uma vez que estamos trabalhando com uma dor de oito pixels, temos que tomar uma decisão se quisermos isso em 24 ou 32. Ok, vamos deixar agora com 24 na conta, fora das colunas para 12 e queremos controlar o com. Você pode pensar que você quer fazer o luto super perfeito com um grande diz Tudo é múltiplo um fade mesmo as colunas com seu múltiplo off oito Então, poderíamos começar com 80 com é o valor mais usado para começar. Certo. E isso está parecendo muito bom. Podemos ver que o outro é 24 com este 80. Por isso, estamos na retaguarda no nosso local de trabalho. Isso não é bootstraps, então não precisamos fazer alguns foram, uh, somas descansar minha notícia. Seja qual for. Então esta seria a nossa bússola de trabalho, OK? - Sim. Então deixe-me apenas, uh, o valor da polícia aqui. Então este vai ser o nosso contentor principal. Se gostamos disso com de recipiente, somos bons para trabalhar. É assim que se faz uma dama. Você não precisa do dedo do pé. Estresse mais. Certo, então seu centro, seus valores de entrada de mentira, que são múltiplos de oito. Então nós temos isso. Ok, então as colunas são 80. Como você pode ver, todas as colunas são 80 no espaço entre eles é 24. OK, e agora vamos sair das nossas estradas. Certo, então pressionamos aqui em figo MMA em direção a outro tipo de grande na rosa. Neste caso em particular, não queremos 12 porque 12 só nos faria ter, uh, Rose. E veremos que fomos mais novamente em vez de um trecho. Neste caso, queremos aliar os dedos. Nossas separações subiram no topo. Ok, e para este caso em particular, o que nós temos, o que nós queremos é o espaço entre as colunas com nós queremos eles fora em oito grandes vendas altura. Queremos nos reunir para ser também, oito. Então, agora temos nossa coluna desligada. Oito semanas é a nossa reunião. Oito semanas é assim que temos todas estas separações são oito semanas de separações na contagem . O que costumo fazer. Colocou um número enorme aqui, como 800. Por que é isso? Porque você geralmente seu quando você está projetando você geralmente está projetando coisas maiores do que isso. Então, quando você faz isso, quando você é o nosso conselho e você está fazendo página de destino, por exemplo, ou seu portfólio ou projetando um bloco ou o que quer que você está projetando, você provavelmente precisa de muito esconderijo por dias . Certo? Então, se você tiver sorte se você crescer aqui, você apenas colocar eu não sei, 200. Desculpe, tipo, 50. O que acontece? É Ah, quando você está quando você está tamanho, você tem que voltar aqui novamente. Lembre-se que temos 900 aqui. Sim, você não tem a Rose necessária aqui. Então, já que queremos ter um monte de rosa aqui, você pode ir com 1000 e está tudo bem. Então você sempre tem espaço e essa rosa suficiente para isso. Ok, então esta é a nossa 1ª 8 semanas de perfeição. Ótimo para isso. Vamos fazer para quatro formulários. Ok, então vamos remover esta semana que criamos antes e vamos nos livrar disso porque queremos criar o seu Isso vai estar lá, um grande formulário de venda por um tempo e o que queremos aqui, é fazer a mesma coisa. Ouvimos bem ou tudo em múltiplos de destino que está fora. Colunas acordadas neste caso, vamos para ir com cor. Uma contagem de três de novo. Centralize-os. Está bem. Bem, neste caso em particular, o que você pode fazer é colocá-lo em um trecho na margem para que possamos controlar. São 16 células de pico na sarjeta. Você pode brincar com 6 16 também. Por 24. Eu escolheria esta coisa para isto. E então temos o nosso Nós temos nossos oito pixels com o que acontece aqui que, hum, você sabe, você pode projetar para Android mais esposas como estas para 3 360 ou você pode estar projetando para Vamos pegar alguns outros valores aqui como eu não sei iPhone oito plus aqui e fazer a mesma configuração. Vamos fazer isso aqui muito alto. Isso é fora, como combinado e, em seguida, nossas colunas. Digamos que três colunas. Isso é um seis, e então nosso marketing vai ser 16 no nosso Got. Vai ser 24 OK, ou trazê-lo para fora para 16 novamente. Então vamos ver como a coluna com vai. Então são 50. Como pode ver, não é possível. Ou vamos com três para que possamos fazer como um mesmo design. Aqui. Você pode ver que não é mesmo o seu 117 então eles chamam-lhe a coluna com não é tão importante para realmente dia seguinte. Grade de pixels, ganância de pizza. É mais sobre as calhas, o espaço das calhas e como você monta sua rosa. Então, neste caso, fizemos jaqueta perfeita oito escolhas, um ótimo, e isso é perfeitamente bom. Ele funciona em telefones celulares não vai ser tão possível ter as colunas como você quer, certo? E é por isso que conversamos sobre isso. Por exemplo, iPhone 11 Pro X. É 375 com Então não podemos dividir por oito vai nos dar os Simoes e vai nos fazer diferentes tipos de colunas. Então, mas o que podemos controlar e isso é o que quero apontar. Muitas vezes, mesmo que eu seja um pouco gêmeas sobre isso, é quando criamos. Esta é a coisa importante para criar a rosa para que você possa colocar aqui novamente. O importante aqui não é a conta. Nós colocamos no topo, o grosso para fora vamos aumentá-lo para 500 é bom. E lembre-se que a altura aqui vai ser de oito pixels e a coleta novamente vai ser oito semanas é então agora nós temos, tipo, uma ganância perfeita. Mesmo que nossas colunas não sejam uma imagem, a coluna não é importante. O importante é que eles têm o deles e são estas rosas a espaçamento. Vamos ver um exemplo Imagine que eu quero dizer para definir uma foto aqui. E o importante é que esta foto em altura vai ser múltipla fora oito com isso , o que é bom. Mas o importante também é quando estamos criando um texto. Ah, mas o importante aqui em vez disso, fora neste tipo de valores eu não sei o que eles são, o que podemos fazer. Dizia que múltiplos oito neste caso, tipo 32. E o que está acontecendo? É isso. Deixe-me adivinhar sobre justiça. Se eu tivesse o Estes, você pode ver que isso vai enfileirar. Ele está começando aqui, e esta linha está começando lá. Ok, mas o mais importante é que agora você pode ver meu texto descansando aqui. Ok, você pode ver, certo? Então agora a separação Bem, vamos ver que eles são tão agora a separação entre esses elementos neste é 16 e imagine. Quero um dedo fora como um texto Aqui, deixe-me do meu maravilhoso Senhor Solto e em breve gerador. Então nós vamos trazer que estes 14 e este vai ser, tipo, tipo, 24 nosso para a nossa cópia. Vamos com o nosso gerador Senhor e Epsom. Então vamos em um raio fixo. Está bem? Às vezes, você pode trabalhar para posicionar as coisas, mas com isso, você não coloca seus elementos aqui, certo? E neste elemento aqui, se você quer ser super purista, o que você pode fazer e o que é uma boa prática é configurar este texto na linha de base é o que é chamado de linha de base. Aqui onde a saída, você pode vê-lo aqui. Você pode sentir certo que é o Texas sentado em nossa em cada linha, cada espaço de turnê, está comendo, ok? E isso é bom porque porque podemos definir, por exemplo, podemos dizer, “ Ok, vamos sair como, bem, nós gostamos disso? Podemos dizer entre o texto eo título vai ser 24 pixels com seu sido pessoas de fé entre este e este é 16. Ou talvez possamos dizer que queremos dizer agora eu apenas o que eu quero todos os destinados ao grande com o mesmo é basear-se. Então você tem 20 pixels aqui você tem 26. Desculpe. 16 picaretas estão à esquerda. 16 peças à direita e 24 nos escolhem aqui e tudo mais. É o Justin? Perfeitamente bem. E isto deve ser uma brincadeira, na verdade. Se você sabe, ferramentas de prototipagem geralmente não alimentam perfeitamente a realidade deles. Ou o que você vai ver mais tarde, eles estão assinando, OK, porque isso deve ficar aqui e é sim, o pixel que está me deixando louco, mas é aliado terno lá dentro, ok, mas isso vai depender do seu em seus telefones. Mas o que é importante aqui é esse valor, ok? Porque eu posso mudar o tamanho e como você pode. E como você pode ver, isso vai continuar a ser no no no luto porque o número importante é um 30 para a vida oito. Então, enquanto coisa humana que este como ódio como em múltiplos de destino, você está pronto para ir. Então isso é praticamente um pixel grande e como ele ajuda a projetar as coisas. E deixe-me perguntar, Deixe-me apenas fazer um design rápido aqui para que possamos ver como vemos é em direção com glitz toe fazer o sistema. Então imagine. Temos aqui, como três elementos. Então nós só temos que dividi-lo aqui para pegar quatro colunas e apenas lá. E se você ver os elementos aqui e ali na linha de base, tudo vai ser orgânico e hop tem o mesmo espaço, e você pode brincar com seus cumprimentos mais se quiser. Como sabemos, este tipo fora da Praça Montreal, o sinal de que é feito de cubos. Mas é aqui que se trata. É consistente, é aguçado. Você não tem que tomar decisões Se você está tentando projetar cegamente, imaginou sua entrada e concordou com isso. Deixa-me livrar-me disto. Como sei que devemos prosseguir. Algumas coisas eu poderia colocar estes lá e colocar isso lá e está lá e colocar este texto aqui e tentar alinhar a necessidade por mim ou com ferramentas. Mas esse tipo de aleatório, sabe, e o dedo do pé dão consistência à aproximação. O que você precisa é fazer todo esse ajuste. OK, então OK, então isso é praticamente o aperto de imagem. Lembre-se que Você pode alterar os valores solicitados. Por favor, aqui. Imagine que você quer trabalhar com ele, em seguida, escolhe concordou Este valor seria bom. Talvez aqui você possa. Ou cinco pixels rasgar. Então você está bem aqui. Dedo do pé. Aqui você pode ir com 30. Você chegou lá. Coloque o com múltiplo de cinco ou oito ou 10. Qualquer saudação que você decidir ir é bom. Bom para você. Certo, mas lembre-se de manter a altura da linha. Sempre consistente. Então vamos ver como replicar isso. Um pixel. Grandes em fuga, Andi em adulto x'd. Se você não estiver interessado nisso no software, você pode simplesmente ignorá-lo e ir para o final da aula. Certo, vejo você na próxima aula. 5. 5 - 8px no Sketch: de Bem-vindosdevolta a estas bênçãos. Vamos ver como fazer com que as oito semanas acordadas e escapadas sejam algumas colunas sobre drogas. Ok, então para isso nós vamos apenas inserir um r quatro. Ou você pode pressionar um, em seguida, selecione aqui no Tech Stop HD nossa guerra, e aqui imbui Nós vamos mostrar layout. Então nós temos, tipo, quatro colunas aqui. E vamos ver como isso é configurado por padrão com ele que estão com desligado nos 160 pixels . Lembre-se que fora do curso que queremos com colunas que não queremos ter em torno do exterior. Isso é bom se você estiver fazendo a camada de bootstrap grande. Mas neste caso, estamos fazendo apenas no oito porque seu grande simples, então não precisamos se reunir no velho set. Você pode ver que está se movendo. Queremos que eles tenham de sair 24. E gostaríamos de ter, tipo, 8 80 pixels para a coluna com o que aconteceu aqui em um esboço. Quando você coloca esses valores aqui monta eins o total com aqui. Então é meio complicado porque você tem dedo ou pé aumentar isso por eu sinto que você tem os valores que você quer ou você tem que fazer. Não sei, multiplicação deles está lá fora. Ok, então primeiro você precisa saber o total com você vai obter, então não é tão fácil fazer sua camada concordar aqui. Eso para a morte. O que eu vou fazer é ele copiar este valor que temos em pés meu antes de 1200 2024 . Então, vou copiar isto aqui e agora. Vamos centralizar os dias. E agora temos essas configurações, certo? Tudo o que queremos 24 picaretas é para a sarjeta. Não. Reúna-se no início em direção a colunas e chamando com off 80 pixels. Centro de imprensa aqui. Então, seu layout, ganância e seu contêiner ficam no centro e nós temos isso. OK, agora temos meia hora de nosso contêiner. Que instrutor? Podemos ver aqui o valor. Ok. E nós nos queremos. Bem, vamos voltar aos nossos cenários mentirosos. Nós também queremos que Rose montada em oito grandes celas. Então queremos a altura da função, a distância multiplicada pela altura da calha. Então, em um caso particular, queremos que haja mais para jogar por um. Então é o mesmo para nós. Oito peças. Ok, então você poderia desenhar os Ori algumas linhas, mas eu acho que é demais. Com este cenário, sinto-me bastante confiante, está bem? E nós vamos embora. Quero dizer, agora, tudo o que posicionarmos aqui vai ser múltiplos de oito. E estamos prontos para ir. Então esta é a nossa configuração. E no caso de kits de escritório é bom porque cria toda a rosa necessária. Então você nunca sair da Rose Light pode acontecer na figura. Ok, então vamos inserir outro são para quatro ou mais enquanto dispositivo. Neste caso, podemos ir com estes móveis, os 320 baht antes de configurar o andróide. Então vamos com o andróide. Como vimos na outra lição, isso realmente não importa. Hum, qual cara? Dispositivo suficiente Você também. Porque o importante não é a coluna fora do com importante. O importante são as calhas na separação. Certo, então para isso o que queremos, é o apoio que temos lá, lembra? Você tem uma outra vez? Fomos para 16 escolha vende o número de colunas neste caso particular vai ser três. Vamos começar a ver o que está fazendo. R Então você pode ver que o peso total é demais. Então o que nós queremos aqui é lembrar, é, hum, é 36 60 menos 32 porque nós queremos, tipo, 16 peças à esquerda e 16 pixels à direita para que possamos fazê-lo assim. Então nos deu 328 muito legal. E agora eles têm a erva deles. Podemos apenas ir com 16 e então incentivar estes e vir com ele vai nos dar 93 certo? Então, sim, isso está muito fora. Estamos armados, mas algo qualquer coisa. Temos estes se reunindo do lado de fora novamente. Nós não queremos isso. Eu estava me perguntando por que tanto espaço aqui, mas sim, você tem que remover a sarjeta no início. Nós não queremos isso a menos que estejamos fazendo este design bootstrap. Ok. E para a estrada, mesma coisa. Sim, eles chegaram lá. Kate vai fazer oito anos. E a altura do papel, lembre-se em multiplicações pelo outro ódio. Então, neste caso em particular, queríamos por um, então temos, tipo, tipo, oito correções consistentes, junta-se e subiu aqui. E ainda assim estamos prontos para ir. Então, se nós arbustos e agora elementos aqui e desculpe, porque para isso eu não quero 24. Quero 16 lá dentro. Você tem Ok. Então aqui temos nossas colunas e podemos começar a decidir. Lembra-se? Novamente, como vimos no passado. Ouça, que o importante aqui é trabalhar com a posição, todos os elementos separados pela mesma quantidade de espaço. Normalmente você quer o dedo do pé na maioria das vezes que você quer separá-lo. O mesmo com esta distância vai ser o mesmo que a sarjeta. E algumas outras vezes. Talvez queiras separá-lo mais. Mas manter o seu espaço é consistente. Ok? Se você está se separando aqui como 56 grandes células aqui, é uma boa prática separá-lo também. Em 56 pixels ou o que você pode precisar, lembre-se também da altura deitada ou direita. Então aqui no esboço, mesma coisa, , você tem o dedo do pé aqui na linha Heights seção e destino múltiplo. Ok, então para este particular eu não sei. Você pode ir com 72 e se nós vê-lo aqui, você pode ver que está quase tocando a linha de base. Seria como se um pixel para cima acontecesse. Igual ao estigma. Pensamento como você pode ver, vai ser dedo do pé estar todos sentados na linha de base e vai dar-lhe mais consistentemente ciência. Então vamos para Dennis Lesson, onde vamos ver como criar uma grande ganância de venda em adultos X'd. 6. Grades de 6 de 8px no Adobe XD: Ei, bem-vindo de volta ao útero. Nossa última lição aqui nós vamos ver como criar uma leitura de pixels na OPEP de para estas partículas são um. Eu só vou pressionar aqui, e como você pode ver, nós temos todos os off por modelos padrão mal para estes e vai escolher novamente. Andre More Wild One e nós. Bem, vamos pegar Vamos para e esta bolsa novamente em Selecione um chicote, hum, por padrão. Outros X'd faz como tipo de um tamanho diferente para o acontecer para estes são javalis ficou fora 1000 440. Eles combinam com isso. Sr. Isso realmente não importa. Você lutou aqui. Se você quiser ou deixar estes por padrão, tudo bem. Coisa importante. É o nosso É o nosso grande Então, para ver o grande, você só vai ver painel e você pode apenas pressionar aqui a ganância do marcador ou se estiver desligado, você pode vir aqui para ser você e então deixar verde também. Quando você está selecionando o quadro, você pode pressionar aqui a ganância e dois vão apenas trazer isso para cima. Ok, então vamos começar sem eles pararem o sinal para este caso. Eu só quero maneira tinha alguns valores anteriores é muito fácil de fazer. Aqui em Adobe 60 é pedaço de bolo, Devo dizer que o reunido com temos vindo a usar 24 pixels para a nossa separação entre colunas e a coluna com temos usado 80. Isso é um comportamento estranho para mim, devo dizer, porque se estou tentando colocar esses valores para Theis,está sempre brincando com isso com a sarjeta e o conduíte. Isso é um comportamento estranho para mim, devo dizer, devo dizer, porque se estou tentando colocar esses valores para Theis, Então você tem que calcular reboque também. Quanto? Quanto Martine você quer aqui, certo? Então, para mim, é meio irritante se eu quiser colocar meus valores como 24 aqui eu quero colocar 80. Devia as respeitarasminhas decisões. Mas isso é o importante aqui. Está me deixando um pouco nervosa. Então, para isso o que eu tenho que fazer, é calcular Traga a calculadora. Então nós temos o nosso. Este é o número que queremos ser. Nossos Toby são ótimos sentando nosso ou nosso contêiner. Então nós o baseamos aqui e o que fazemos, é ah, apenas fazer isso descansar e continuar. Esta vai ser a margem orbital. Precisamos dividir por dois. Então 71 vai ser o nosso marketing aqui. Então precisamos ir aqui 71 e agora, como você pode ver chamando com 80. Então agora está funcionando. Tudo bem. Então você tem que trazer suas calculadoras ópticas tipo fora Messi e o ponto razoável que eu realmente não gosto sobre adotar X'd ao fazer leituras é que eu não posso eu não posso ter ambos ao mesmo tempo porque porque porque eu não excedo não me permite colocar como linhas horizontais. Muito bem, isso é para mim. Uma espécie de falta de pés. Er vamos com a configuração móvel. OK, então para este caso particular, como sabemos, queremos 16 pixels do lado de fora, fora das margens e da sarjeta com Remember, estamos usando 16 16 também. Eu não sei o que então 16 está bem, e as colunas. Você quer um três, então está bem preparado. É muito fácil fazê-lo aqui porque você tem que controlar todas essas configurações e você está pronto para ir. Então é que nós estamos tendo aqui os mesmos valores que tínhamos antes, mas novamente, é meio irritante que eu não possa configurar como Rose e eu tenho que estar mudando para este tipo fora de um quadrado e, sim, você tem que colocar seu tamanho quadrado em oito. Então é o nosso são ótimos, mas eu não posso ter os dois fora deles ao mesmo tempo. Neste caso em particular, se você quiser se você quiser fazer o seu tipo de ganância, às vezes você tem que começar a colocar como são como guias. fazer o seu tipo de ganância, Ok, então é tão, uh, uh, para mim, algo está faltando aqui. Alguma coisa importante. Se você quiser usar, tipo, um super apertado, ele escolhe com ele. Mas é assim que você ganha o grande salário do que Adobe 60. E eu espero que você goste destes tutorial. Então vamos para o vídeo final e onde eu vou dizer parabéns para você por terminar. Vejo vocês no próximo vídeo. Obrigado. 7. 7 — parabens: Ei aí. Então, parabéns. Termine seu layout. Curso. Então, eu espero que você tenha aprendido tudo dedo do pé para que você possa desenvolver o seu jogador. Grandes habilidades. Então, temos vindo a cobrir atualizações de cartazes e fotos. Desistir. E se você gosta desse vídeo, espero que você me siga. Então você está acordada hoje. Tutoriais novos. E se você gosta, então revisão do fígado para que outras pessoas possam encontrar seu curso mais facilmente. E sim, obrigado por se juntar. E espero que tenha tido uma ótima experiência. Obrigado.