Design de site responsivo no Adobe XD

1. Introdução ao curso: Criar um design responsivo é uma parte essencial de qualquer conjunto de habilidades de designer, especialmente no mercado atual, quando mais tráfego está vindo de dispositivos móveis e tablets. O Adobe Extreme torna esse processo muito fácil porque ele tem algumas ferramentas excelentes dentro para ajudar a acelerar a parte responsiva do seu design. E também tem ótimas opções de exportação, que significa que vai fazer os desenvolvedores felizes porque você vai entregar arquivos no tempo e formatos de arquivo impróprios. Cater. Meu nome é Alex. Neste curso, você aprenderá o que é um design responsivo e por que isso importa. Como projetar usando colunas e conteúdo, como trabalhar com diferentes bibliotecas, pontos de quebra de água e como lidar com eles. Como criar um Adobe X'd, em seguida, torná-lo responsivo para diferentes tamanhos e como enviar corretamente esses arquivos para desenvolvedores e clientes. Este curso é para todos os interessados em design responsivo no Adobe X deep, e você não precisa saber como usá-lo será X'd. Eles vão cobrir adultos neste curso, então você quer ser mais desejável como designer, entregar arquivos mais rapidamente para clientes e desenvolvedores que clicam e rolam, e eu vou vê-lo no curso 2. O que é design responsivo: Web design responsivo é uma abordagem para Web design que faz com que as páginas da Web se render bem em uma variedade fora de dispositivos e tamanhos de tela. Para um site dedo do pé trabalhar bem em diferentes dispositivos. Ele precisa ser preparado com antecedência. Senhor, Job é um designer é projetar todos os seus elementos com isso em mente para alcançar consistência no design em vários dispositivos e tamanhos de tela. Designers usam sistemas de grade para ajudá-los a colocar os elementos de tal forma que ele irá trabalhar consistência em diferentes dispositivos e manter a mesma sensação de Loken. À medida que mais e mais tráfego do site está se movendo em direção a dispositivos móveis. O design de site responsivo é essencial para qualquer designer, pois a maioria dos sites que você vai criar serão visualizados em telas diferentes , desde desktops , laptops , tablets, telefones até relógios inteligentes. 3. Colunas e conteúdo: quando você está projetando Website Responsive tudo que você tem que pensar sobre nossas colunas e conteúdo. Você pode ter um número de colunas dependendo do layout ou se estiver usando biblioteca de componentes , como bootstrap. Essas colunas devem ser fluidas, que significa que quando os tamanhos dos dispositivos ficam menores ou maiores, essas colunas e o número de colunas estão se adaptando ao tamanho da tela que o site está carregando. Você também tem conteúdo de piso, e o exemplo básico é o texto, que são responsivos, está se adaptando ao número de colunas que o dispositivo que está carregando o site tem. O que é típico acontece é que o conteúdo e as colunas estão se adaptando juntos e para os elementos que não são fluidos. Alguns controles deslizantes, por exemplo, acenou está carregando as versões menores fora desses elementos que o desenvolvedor preparou antecipadamente, deixe-me saber, mostrar como isso parece em um exemplo ao vivo. Então aqui estou eu no meu site Web donut, que net e eu estou na página de produtos e este site é responsivo, que significa que todas essas colunas e conteúdo estão indo toe agir de forma responsável quando você redimensionar o tamanho do navegador. Então deixe-me mostrar-lhe o que quero dizer você pode ver claramente que temos algumas colunas bem aqui porque há um pergaminho para baixo. Todos eles estão atrasados, um abaixo do outro, e todos eles são, como você pode ver, exatamente o mesmo com. Então todas essas imagens são a mesma sagacidade. texto está posicionado à esquerda, como você pode ver, bem como os preços, e temos algumas categorias aqui no topo também. Suponha que o texto e a navegação permaneça onde está neste tamanho de tela. Então este é o tamanho da tela do meu navegador. E quando eu clicar aqui, dedo do pé Laurie para baixo um pouco e quando estendido como para que você possa ver que todas essas colunas estão se adaptando e como um movimento da área de trabalho e para com todo o caminho até, por exemplo, tablet em algum lugar por aqui, você pode ver que agora menu de hambúrguer está mostrando, e essas colunas estão ficando muito menores. E quando eu vou até Mobile, por exemplo, por exemplo, em algum lugar por aqui você pode ver isso. Agora temos duas colunas e em todo o caminho para baixo em dispositivos menores, que eu não posso mostrar a vocês aqui. Você tem que carregar este site no seu celular. Todas essas colunas vão empilhar um em cima do outro porque eles estão agindo forma responsável. Então você pode ver bem aqui. Conforme eu os redimensiono para cima e para baixo, você pode ver como eles se movem e área justa e reposicionam onde eles precisam estar. Então, como eu disse, no menor dispositivo, todas essas colunas vão ser empilhadas umas sobre as outras, e você pode ver claramente como elas estão reagindo a diferentes tamanhos de tela. Então, como isso é concluído é este site está usando bootstrap, e ele tem 12 grades de coluna. Então, basicamente, você vai ver isso no design um pouco mais tarde quando chegarmos à parte de design neste curso. Mas basicamente temos um jogo de 12 colunas, e todas essas cartas estão levando quatro colunas cada. Então esta imagem tem quatro colunas. Isto também tem para. Isto também é guerra. São 12 no total, e esta é a sagacidade dessas colunas. Como você pode ver, é por isso que a navegação e esta imagem estão alinhadas à direita e o logotipo e esta imagem estão alinhados à esquerda. Então, basicamente, quando você está ficando cada vez menor, essas colunas e o conteúdo dentro dessas colunas estão ajustando e se adaptando. Então, basicamente, ele sabe que o seu carregamento de um tamanho de tela menor. Então ele diz basicamente para o casaco. Ok, agora carregue-me esta versão, e quando você descer todo o caminho, vai mostrar-lhe, OK, OK, carregue-me dispersão. E agora quando você clica aqui, navegação está indo dedo do pé aparecer dentro deste menu de hambúrguer porque ele sabe que ele deve exibi-lo assim. Você pode ver que o texto está se adaptando bem aqui, e não parece bonito no momento porque às vezes nós temos apenas uma linha de texto e então nós temos que, e é por isso que isso parece Então talvez eu possa ir para outra página. Vamos seguir, por exemplo, assinatura para que possamos ver como isso se parece. E este é o exemplo perfeito porque nós temos essa imagem grande no topo, e quando eu clico aqui e começo a baixar, você pode ver claramente que esta imagem está se estendendo e, em seguida, diminuindo de tamanho para que você possa lê-la claramente todos os tamanhos de tela. E agora o menu está aqui. Como você pode ver, o texto está se adaptando, e esse é o exemplo perfeito. Como um set off, o texto fluído de conteúdo é um deles, porque quando você está estendendo, você pode ver que o texto está ficando menor ou aumentando em sagacidade. Como você pode ver bem aqui. E quando você chegar até o menor tamanho possível e começar a rolar, você pode ver que esses cartões estão se ajustando também. Então, por exemplo, temos esse preço aqui para que você possa vê-lo em Lee como um cartão em tamanhos de tela móvel . Mas quando eu estendê-lo, você pode ver que eles são duas cartas. Então, quando eu vou até aqui, você pode ver que a inteligência fluida dessas cartas está mudando, porque quando eu fico menor e menor, você pode ver essa inteligência fora. Cada uma dessas cartas está ficando cada vez menor, como aqui, por exemplo, você pode ver que o fundo está ficando menor também. Texto todos esses tamanhos de texto diferentes, por exemplo. Tudo está ficando menor e quando você chegar ao tamanho da tela do dispositivo móvel, você pode ver que eles estão empilhados uns sobre os outros. Então basicamente eles vão de 12 colunas em que todo o caminho até basicamente uma ou quatro colunas diferentes, talvez duas, talvez três, dependendo. Você está usando bootstrap ou outra coisa? Ou você está usando personalizado chamado Richard Developer lhe disse para fazer. Quando você está projetando para Responsive, você precisa saber quais tamanhos de tela você está suportando para que você possa saber quantas variações diferentes você tem que projetar. Mas você tem que ver isso com seus desenvolvedores porque cada projeto é obviamente diferente. Então, se os desenvolvedores estão usando bootstrap, por exemplo, você ainda tem que perguntar a eles, Você vai suportar o tamanho de tela menor ou apenas os maiores? Você vai suportar tamanhos de tablets, tamanhos móveis e assim um? Então você tem que saber que antes de eu começar a projetar para Responsive, só para que você possa saber quais tamanhos de tela você vai suportar com seu design e mais uma coisa, você tem que projetar esses tamanhos de tela diferentes em variações porque os desenvolvedores simplesmente não sabem o que vai acontecer nesses diferentes pontos de quebra e vamos explicar diferentes pontos de quebra mais tarde. Começamos a projetar, mas basicamente em todos esses tamanhos diferentes. Então, basicamente, este é um ponto de ruptura. Você pode ver claramente a navegação aqui. Mas se eu abaixá-lo um pouco também aqui, você pode ver isso no tamanho estabelecido. Toda essa navegação de parada vai para o menu de hambúrgueres bem aqui à esquerda. Assim, os desenvolvedores têm que saber quais tamanhos de tela você vai suportar com seu design e então você tem que projetar com responsivo em mente. Então você tem que mostrar-lhes todas essas mudanças diferentes, diferentes pontos de quebra, que eles saibam como o conteúdo vai ser assim que começarem a codificar e começarem a criar a vida do website Toby. 4. Primeiros abordagem móvel: antes dos primeiros sites móveis, que suportavam dispositivos móveis, eram geralmente divididos em dois sites, um para desktops e telas grandes e versão adaptada para telas móveis, que incluía controles de toque. Esta foi uma abordagem ruim porque significava que você tem que abordar ASIO de forma diferente. Você teve que usar o sub-domínio M quando você estava carregando o site menor, e porque os dispositivos eram muito mais lento Bagdá em comparação com hoje, isso significava que as velocidades de carregamento eram muito mais lentas e as taxas de rejeição eram muito altas. Quando os dispositivos móveis começaram a ser acessíveis há uma década, metodologia de design de sites chamada Mobile apareceu pela primeira vez, sugerindo que toda vez que você projetou um site você deve começar do menor tamanho. Você vai apoiar e adaptar seu design a partir do deles para dispositivos maiores, porque cada vez mais tráfego começou vindo de dispositivos móveis. No entanto, hoje, neste dia e idade, temos vários dispositivos de toque diferentes de telefones, tablets e relógios inteligentes. Na minha opinião, essa abordagem realmente não importa mais, porque hoje, porque hoje ao contrário de uma década atrás, maioria dos dispositivos não tocou no suporte do Microsoft Surface Studio e dispositivos como tela sensível ao toque laptops, tablets, telefones e smartwatches. Você tem que projetar com suporte de toque em mente em todos os tamanhos. Então, quando você estiver projetando, você deve sempre pensar com antecedência como seus elementos serão parecidos ou sem tamanhos de tela de largamente fora, como TVs inteligentes até relógios inteligentes. Portanto, você tem que projetar da maneira que quiser, desde que você esteja planejando com antecedência para manter a aparência e a funcionalidade fora de seus elementos consistentes. 5. Os diferentes bibliotecas: Às vezes, quando você está projetando, você tem que usar bibliotecas quer porque seu cliente quer ou seus desenvolvedores pediram que você use bibliotecas e bibliotecas diferentes trazem consigo mesmos desafios diferentes e diferentes funcionalidades. Então, neste vídeo, eu vou correr rapidamente através de três fora basicamente os mais populares. Então, estes fundação bootstrap ar e angular e todos estes vêm com diferentes desafios e diferentes fundações que você como um designer tem que saber. Então, basicamente, você não tem que realmente saber nenhum desses. Você pode apenas projetar com responsivo em mente, e você tem o dedo Sempre planeje com antecedência e apenas fale com os desenvolvedores antes começar a projetar, que você possa saber tamanhos de tela ricos que você tem que suportar. Você tem que saber quais tamanhos de tela você tem que projetar antes de enviar-lhes o design acabado . Mas você tem que saber sobre estes porque estes são basicamente elementos pré-preparados e tamanhos pré-preparados , e você tem tudo dentro de diferentes fundos, controles deslizantes, imagens, textos, paginação e todos esses diferentes elementos preparados para que eles trabalhem em avançado no design responsivo. Então, o que quer que você esteja trabalhando em um projeto simplesmente pergunte aos seus desenvolvedores fazer trabalho em algum tipo fora da biblioteca. Então, por exemplo, bootstrap ou fundação. E então, se o fizerem, basta ir a esses sites e aprender mais sobre essa biblioteca de componentes em particular antecipadamente . Então você tem que saber quando você está projetando. Por exemplo, Bootstrap tem uma coluna específica com tamanho, e eles têm uma coluna diferente pré-preparado, então você tem que saber sobre isso. Se você não sabe nada sobre isso, basta olhar on-line. Então, basicamente, você pode assistir a um vídeo do YouTube. Você pode acessar esses sites e acessar a documentação. Ou você pode clicar sobre os exemplos de equipes e assim por diante. E simplesmente você pode aprender mais sobre ele porque eles gostam de usar essas bibliotecas de componentes porque isso torna seu trabalho muito mais rápido. Então, por exemplo, alguém já preparou todas essas informações e todo esse código, os desenvolvedores possam simplesmente usar esse frio quando começarem a codificar, e seu trabalho será muito mais rápido. Então, para que seu trabalho fique muito mais rápido, você tem que se familiarizar com todas essas diferentes bibliotecas de componentes em que você está trabalhando nesse projeto específico, para que você possa saber antecipadamente o que você deve usar, que tamanhos de tela Você deve projetar quatro, e você deve sempre basicamente perguntar aos seus desenvolvedores se eles estão indo para suportar o menor tamanho de tela, maior tamanho de tela e assim um para que você possa saber o que você deve ser projetado, significa e quais resoluções de tela e tamanhos você deve suportar. Então, não tenha medo quando alguém lhe perguntar, você pode projetar um site usando a fundação? Porque basicamente, tudo que isso significa é que você tem que conhecer diferentes perspicácia dessas colunas, quantas colunas elas estão dentro e quais elementos são suportados e quais não são. E você sempre pode descobrir isso basicamente usando as docas em seus sites, e você pode se familiarizar com antecedência antes de eu começar a projetar para que você não tenha nenhum problema quando você está projetando. Mais tarde, você sempre pode perguntar aos seus desenvolvedores, e é sempre uma recomendação fora do meu dedo do pé. Pergunte aos desenvolvedores qualquer coisa que você não entende, porque quando você começa a projetar e você já está investido com seu tempo, por exemplo, semana ou mês em um projeto, e então quando você envia esses desenvolvedores de arquivos, Então você aprende que você não dionizou nada, acordo com um plano, então pode ser realmente agitado dedo redesenhar tudo o que você fez porque você já perdeu esse tempo projetando para algo que não deveria ser projetado em primeiro lugar. Então, para recapitular, basta olhar para a documentação e ver se há algo específico sobre cada uma dessas bibliotecas de componentes e se ele está simplesmente envolvido em seu design e aprender basicamente, como branco são as colunas, o número fora das colunas e como eles estão agindo no design responsivo? 6. Pontos de interrupção de dispositivos e pontos de pausa: quando você está projetando, você deve sempre perguntar aos seus desenvolvedores sobre dispositivos, esportes e pontos de quebra. Isso significa que você tem reboque. Pergunte a eles quais dispositivos eles vão suportar, para você possa saber quantos designs diferentes e responsivos você vai criar para que ele possa criar, por exemplo, por exemplo, e chame-o por um dia se isso é algo que eles querem. Então, por exemplo, eles querem suportar tamanhos grandes. E talvez o tamanho do tablet esteja endividado porque é daí que vem a maioria do tráfego deles . Mas geralmente você tem que suportar mais de dois, e aqui estamos na documentação sobre os sites de bootstraps, e você pode ver claramente que os dispositivos extra pequenos formulários retrato são menos de 576 pixels branco. E isso significa, basicamente, que quando você está criando um layout, que é menos de 576 pixels em sagacidade, como o design vai se parecer nesses dispositivos para que você possa realmente pensar em telefones celulares ou relógios inteligentes, por exemplo, que são menores do que 576 pixels em sagacidade. Então você pode apoiar isso, se os desenvolvedores estão exigindo que você para apoiá-lo e, em seguida, lamentar aqueles 576 na frente. Então, mais uma vez, eu estou falando sobre o bootstrap bem aqui. Neste exemplo específico, você deve sempre falar com seus desenvolvedores e saber mais sobre qual biblioteca de componentes e eles usarão, se houver, e você poderá seguir em frente. Por exemplo, você pode ver que os formulários de paisagem de pequenos dispositivos são 576 e acima. Dispositivos médios, o que significa tablets e acima, estão indo de 768 e sagacidade. E então estamos mudando para um dispositivo grande, então desktops e, por exemplo, por exemplo, notebooks maiores são nove para um Extra. Dispositivos grandes são desktops grandes, que vão de 1200 pixels ou mais. Então tudo isso significa que você basicamente tem que criar cinco tamanhos diferentes fora do seu design a fim de suportar todos esses requisitos diferentes. Se o seu cliente e seus desenvolvedores estão solicitando isso mais uma vez, se eles só querem suportar, por exemplo, três tamanhos para que eles querem suportar tablet móvel e grande. Então é para isso que você precisa projetar. E basicamente, como eu disse várias vezes ao longo deste curso, você tem que projetar com resposta em mente, então cada componente que você está projetando. Você tem que pensar de antemão como ele vai parecer nesses diferentes tamanhos de dispositivo . Não importa se você está usando bootstrap ou fundação ou qualquer coisa em tudo, você tem que projetar que todos os seus componentes estão indo para o dedo do pé e trabalhar lindamente em todos os tamanhos de tela diferentes. É por isso que o suporte a dispositivos é realmente essencial. E antes de começar a projetar, você deve sempre perguntar a seus desenvolvedores e clientes quais dispositivos você vai oferecer suporte para que você possa saber quantas portas diferentes você vai criar dentro do Adobe X'd para mostrar essas diferentes projetos e pontos de quebra. 7. Design para telefones: Ah, muitos designers vão projetar um amplamente fora para desktops e, em seguida, criar diferentes nossas placas em adobe X T. Para eu aposto que iPhone e Android adaptar o layout para caber e chamá-lo de um dia. Esta abordagem é errada porque você está assumindo que todos os usuários vão acessar o site usando apenas esses três dispositivos. Isso é quando o site quebra, porque quando alguém visita de outro dispositivo, site não é suportado e ele não está indo para o trabalho direito. Esses dois tamanhos são específicos para APS móveis porque tanto IOS quanto Android são projetados para funcionar com componentes específicos criados desde o início para esses sistemas operacionais. Então, quando você carrega seu site em um tamanho que não é suportado por ele, você terá problemas de usabilidade, problemas carregamento, elementos que não são mostrados corretamente e mais que devemos usar nossos tamanhos de furo para APS móvel , Onley e para sites responsivos. Você deve usar pontos de interrupção e tamanhos de dispositivo, que você vai suportar desde o início 8. Gerenciamento de tempo: antes do Adobe X'd até semelhante a ele. Você tem que projetar todos os tamanhos separadamente e adaptar os elementos de uma maneira muito demorada . Mas como o Ecstasy é criado com a velocidade em mente, usando seu recurso de redimensionamento responsivo, você pode projetar para tamanhos diferentes muito rapidamente. A principal coisa em que você deve se concentrar é pensar antes de um design e planejar com antecedência como seus elementos serão parecidos em diferentes tamanhos de tela. E na próxima seção do curso, vamos passar para o design. Vamos ler o resumo da Zion, fazer algum planejamento e começar a projetar nosso site e, em seguida, adaptado para diferentes tamanhos que o cliente vai apoiar, então eu vou vê-lo lá. 9. Introdução de design responsivo: nesta parte do curso, vamos lidar com design. E eu vou mostrar a vocês como eu criei este modelo de estúdio de design que você pode baixar e usar gratuitamente para seus projetos pessoais e comerciais. Vamos dividi-lo. Vamos mergulhar fundo em como você pode criar você mesmo, se quiser. Eu vou dar-lhe todos os recursos são usados para criá-lo, e então nós vamos criar um design responsivo usando este modelo exato. Então vamos analisar rapidamente o que temos aqui. Temos uma navegação simples no topo. Então temos uma boa imagem de herói grande com dois botões. Temos alguns patrocínios e agências com quem esta agência trabalhou no passado . Então temos sobre nós seção. Então temos mais uma seção aqui com o texto. Temos alguns futuros. Em seguida, temos bons preços grandes com três níveis de preços. Então, abaixo disso, temos alguns bons testemunhos abaixo disso, temos um apelo à ação. Temos a seção do bloco e finalmente temos o flutuador no fundo. Então o que vamos usar é eu vou te dar esse arquivo exato. Então você vai receber todas essas cores. Você vai receber todos esses estilos de personagem e nós usamos senso aberto, que é livre. Frente legal. E eu vou te dar um link. Em um arquivo pdf, senhor pode facilmente baixar e usar senso aberto neste e em todos os projetos futuros, se você quiser , bem como Carla, que é mais uma vez livre Google Front, que você não pode mais uma vez, Donald e novidades em seus projetos. Então o que temos aqui no topo são bootstrap, grandes tamanhos. Então, se eu clicar em um dos aeroportos, por exemplo, este e clicar no Grande, você pode ver que todos esses modelos têm grande incluído dentro. E um grande é um pouco diferente, especialmente para esta árvore no final. E vamos passar por isso nos vídeos futuros. Mas eu vou explicar rapidamente alguns desses são portos. Então eu vou escolher usar bootstrap neste exemplo. E como eu disse em vídeos anteriores na seção de oração fora do curso, você pode usar algumas outras notas responsivas se quiser, ou você pode criar as suas próprias notas. Tudo depende de você, seu design e especialmente dos seus desenvolvedores, porque tudo depende se eles vão apoiá-lo com sua cotação. Então, neste exemplo, vamos usar bootstrap e vamos usar grade de coluna caiu. Então, como eu disse, se eu clicar aqui e ir para o meu layout, você pode ver que para áreas de trabalho extra grandes, que são mais de 1200 pixels em que temos 12 colunas, tirou Erwitt de 30 chamando 65. E estas são as margens que estão ligadas tanto para o lado esquerdo como para o lado direito, então você pode ver lá 165 Então, neste caso, colunas são estas colunas azuis claras que você vê aqui, e você pode clicar aqui e condenar uma parte inferior. Você paga cidade aqui se você quiser, para que você possa facilmente ver o design por trás de todas essas colunas. Você pode, se você escolher, mudar a cor para a cor que você quiser, se isso é algo que você quiser, mas eu vou escolher usá-lo 25% só para que você possa vê-lo um pouco melhor. Em seguida, temos próximo dedo extra grande que pára que são mais uma vez 200 pixels, em que temos um grande dispositivo que são desktops até 992 pixels, em que em seguida temos tablets médios que são até 7 68 pixels, em que temos pequenos dispositivos tablets que são até 576 pixels em sagacidade. E, finalmente, temos dispositivos extra pequenos que são formados abaixo de 576 pixels em sagacidade. Então, se eu clicar neste aqui, você pode ver que temos quatro colunas porque mais uma vez, esta é uma inteligência muito pequena fora de sua tela. Então você vai usar as últimas colunas porque não há nenhuma razão para você usar 12 colunas para este também. Em seguida, temos oito colunas para dispositivos pequenos e tablets. Temos 12 colunas para tablets médios e dispositivos, e então temos Telkom para este e para este também. Agora, quando você está projetando esses grandes sites, você pode imaginar que essas margens esquerda e direita, estão vazias no estado. Mas o que acontece é imaginar que alguém está visualizando seu site em tela extra grande . Então, por exemplo, você tem todas essas telas curvas modernas, e elas têm essas grandes margens esquerda e direita. Então, o que acontece lá? Você é ótimo fica exatamente o mesmo, e permanece exatamente o mesmo. Wit, e este recipiente não muda, mas essas margens mudam. Então você tem duas opções. Você pode estender esta imagem, por exemplo, esquerda e direita para que você possa ver este colarinho azul escuro bem aqui. Você pode estendê-lo para o que quiser para a esquerda e para a direita. Se isso é algo que você quer. Se for uma imagem, pode escalar o dedo esquerdo e direito. Sinta a tela inteira. Ou você pode ver com seu desenvolvedor para criar um layout em caixa agradável para que você possa imaginar que isso se eu clicar aqui, você pode ver que é 1440 pixels branco. Basta imaginar que este é o seu recipiente, e tudo fora fora fora que 14 40 pixels não vai ser incluído na caixa vai ser contido fora da caixa, então você pode imaginar que você pode colocar uma cor de fundo, por exemplo. Você pode colocar a imagem de fundo que vai escalar em todas essas telas extremamente grandes . Então você pode imaginar às vezes, especialmente dentro das empresas. As pessoas estão vendo esses sites em TVs grandes. Por exemplo, existem micro dispositivos de superfície que são extremamente brancos. Por exemplo, 10.000 pixels em sagacidade. E aqui, se bem me lembro. Sim, nós temos 1440 pixels em sagacidade, então você pode imaginar como uma pequena dívida vai parecer na tela. É por isso que os layouts em caixa são bons, porque o site não vai perder. Qualidade vai escalar até o ponto em que o desenvolvedor decide que vai parar de escalar. E então, depois que o layout da caixa está indo dedo do pé, expanda com o fundo e vai conter tudo o que está dentro deste recipiente bem aqui. E o seu design basicamente vai continuar o mesmo. Mas o lado de fora dessa caixa vai aumentar muito bem para sentir a tela restante. Então eu espero Desk que esclarece algumas das coisas com o layout responsivo e bootstrap para o nosso caso, e vamos agora correr rapidamente através de nossos projetos. Então eu vou clicar em qualquer um dos aeroportos e clicar aqui para esconder as notas. Por enquanto, eu também vou clicar aqui para ocultar o painel de ativos aperte o controle zero para encaixar na posição, e eu vou dar zoom um pouco mais perto. Então você viu áreas de trabalho extra grandes antes, no início deste vídeo, você pode ver como ele se parece. E agora, se eu toda a minha chave espacial e navegar aqui, você pode ver como ele se parece com um próximo dispositivo de garagem de lei. Então esta ilustração vai ser dimensionada proporcionalmente. E se você vê ou tablets médios e todo o caminho até pequenas telas vai parecer um pouco diferente do que é agora. Isso é porque eu queria sentir este texto até aqui. Como você pode ver, essas seções com os clientes anteriores e sobre nós parecem exatamente as mesmas aqui, bem como em extra grande aqui. Mas eles estão começando a mudar para dispositivos médios, tablets e tablets pequenos, e especialmente para extra pequenos lá. Eu usei a ilustração para vir no topo e texto para vir na parte inferior e basicamente, como você pode ver enquanto descemos. Essas seções vão mudar. Então temos quatro seguidos aqui. Há um pouco mais perto aqui, mas eles estão respondendo a rece ice um pouco melhor aqui porque eles estão muito na estrada só porque fora da questão do espaço e em seu tamanho móvel, como você pode ver lá, um em cima fora um do outro. Agora, se voltarmos com os preços, ST Ng vai para isso Então você pode ver nesses tamanhos de desktops há três em linha. Mas aqui mesmo em tablets em tablets grandes Há dois em uma fileira com um abaixo em pequenos comprimidos lá dentro três se inscrevem assim. Como você pode ver, este contêiner está dimensionando para caber o espaço restante. E, finalmente, para os tamanhos e formas extra pequenos, você pode ver que eles se empilham em cima um do outro. Bem, isso é responsivo para você em poucas palavras, e nós vamos cavar um pouco mais, e eu não vou recriar este design do zero, mas eu vou passar por cada seção no próximo vídeo, e eu vou te dizer como eu o criei. Mas vamos correr rapidamente apenas para que você possa ver algumas diferenças. Como você pode ver aqui para os depoimentos. Temos três bem aqui. Temos dois aqui. Temos um também. Como o quê? Estes dois para o bloco que temos nesta mesma seção. Então 33 aqui. Temos que bloquear postes. Aqui ouvimos um. E aqui temos um também. E você pode ver que a imagem está sendo dimensionada muito bem comparada com essas anteriores. Finalmente, a pasta é exatamente a mesma em todos eles, exceto o tamanho do celular. Porque nós temos que empilhar este texto em cima um do outro e porque eles estão rolando para baixo , realmente não importa se você colocar um em cima do outro. Mas eu escolhi usar para Rose porque é muito mais simples para o usuário clicar em qualquer um desses itens de menu porque eles são empilhados assim. Então é isso que vamos abordar no próximo vídeo. E eu vou mostrar a vocês como você pode criar esse design também. Se quiseres, vou mostrar-te como podes usar alguns destes bens. E então, uma vez que criamos este design quer mostrar a você como você pode criá-lo. Então vamos enfrentar alguns desses três tamanhos responsivos. E eu vou mostrar a vocês como você pode reduzir este dedo do pé de design de site. Parece exatamente assim. Vemo-nos no próximo vídeo. 10. Anatomia de página: Tudo bem. Então, para começar, vou simplesmente clicar aqui para criar um 1920 com 10. 80 na tela inicial. E o que eu vou fazer é simplesmente pular dentro do meu arquivo original e eu vou primeiro copiar a grade. Vou rebocá-lo bem aqui. Então eu vou simplesmente fazer isso aqui porque eu estou falando sério. Nós só usamos para criar o documento original. Então Bill Odette. Eu vou usar o design do meu site no tamanho extra grande e eu vou ampliar um pouco mais perto e posicionar algo assim. Então o que eu vou fazer é o que ele selecionou. Eu posso simplesmente clicar nas minhas cores. Como você pode ver, ele mostra todas essas cores diferentes, mas eu não quero. Podemos ir cor por cor, e eu vou mostrar como você pode fazer isso. Além disso, o que você pode fazer é usar estilos de caractere. Como você pode ver, temos todos esses estilos de personagens diferentes aqui. Então você pode fazer isso se quiser, ou você pode manter essas coisas simples. Mas eu gosto de fazer isso porque ele mostra todos esses estilos de personagens diferentes em cores diferentes, então você pode simplesmente acessá-lo assim. Não vai dar o dedo do pé. Encomendá-los por tamanho, o que é um pouco irritante. Então o que você pode fazer é simplesmente todas as ordens, algumas delas. E eu vou fazer aquele simples clique e arrastar, e eu vou pausar o vídeo até que eu fiz tudo isso. E agora que eu fiz isso, eu quero selecionar minhas cores para que você possa apertar controle ou comando. Clique em qualquer um destes e você pode clicar em sua cor. Então eu posso fazer o mesmo por este fundo. Talvez um zoom um pouco mais perto só para ver o que estou fazendo. Posso fazer o mesmo pelo botão. Posso fazer o mesmo por este plano de fundo. Posso fazer o mesmo com o texto. Vamos ver. Eu posso fazer o mesmo para o texto abaixo dele, e vamos escolher um sob a cor. Então são judeus, algo um pouco mais leve. Então vamos ver qual deles é? Todos eles são 70 70. Vamos ver, talvez seja este. Sem olhar, realmente criar uma nova forma como esta. Eu estou indo toe remover a borda e para a cor usado algo como oito F oito F oito f Vamos um apresentador ou retornar e então eu vou clicar aqui para selecionar essa cor. Agora, como esta é a minha cor principal, eu vou simplesmente clicar e arrastá-la para cima e simplesmente ordená-los dos Dockers para nos deliciar com as cores. Agora, nós também temos esta cor de sotaque bem aqui que não pegou por algum motivo. Como você pode ver, essa é a nossa cor aqui na ilustração bem aqui nas camisetas. Então isso é uma espécie de cor vermelha. Então essa cor mais uma vez eu vou clicar aqui é F f 6584 e quero clicar aqui e posicioná-lo fez muito esses dois. Agora que temos nossas cores e estilos de personagem, vou simplesmente esconder este painel por enquanto e vou mostrar como criei esse design de site. Então eu vou clicar aqui e clicar em Insight. Como você pode ver na navegação temos logotipo, que é apenas dois textos e basicamente inventou isso Agora um rápido conhecido antes de eu ser um um. Se você quiser aprender a criar designs para sites a partir do zero, eu tenho um curso dedicado sobre isso em que nós percorremos sobre design. Resumo sobre como pesquisar sua concorrência sobre como você pode ser inteligente sobre o posicionamento, como você pode falar com seus clientes, como você não pode entender o design. Breve, como você pode manter o prazo e como você pode ir a partir da idéia. Rebocar armações de arame para o design completo e, em seguida, você pode exportar esse design para desenvolvedores. Mas como este curso é sobre redimensionar responsivo, é por isso que estou fazendo dessa maneira. E eu não vou aborrecê-lo muito sobre como você pode criar um site design do zero mais uma vez. Se você não sabe como fazer isso, você pode simplesmente pular dentro desse curso, e você pode aprender tudo sobre o design do site a partir do zero. Como eles disseram, isso é apenas para design de site responsivo. Tudo o que é mais, como eu disse, Aqui está o logotipo aqui estão sobre os itens do menu para que você possa ver Eu ordene-los da esquerda para a direita de cima para baixo. Como assim. Então temos o botão de demonstração. Como você pode ver, obter uma demo nbt e para o fundo. Agora vamos nos mover Pertence. Temos aqui um texto que é este texto aqui temos o H um, bem como o H dois. Temos democratas e abaixo aprendemos mais sobre o próximo a isso. Então temos ilustração de heróis e formas. Deixe-me cobrir rapidamente a ilustração do herói de Hill. Então, para obter esta ilustração, eu simplesmente fui para plugins. E se você não tem este blog, você pode simplesmente clicar aqui e encontrá-lo qualquer parar, mas é chamado andro. E dentro de Andhra, você pode simplesmente clicar lá e você tem todas essas ilustrações gratuitas incríveis que você pode usar na votação seus projetos pessoais, bem como comerciais e dentro que você pode simplesmente digitar o que quiser. Então eu acho que eu usei o design e ele vai procurar todas essas demonstrações de design diferentes . Como você pode ver, ele tem essas ilustrações incríveis que realmente você deve verificar e você pode usá-los em seus projetos gratuitamente. Claro que sim. Obrigado, Toa. Essa pessoa aqui que tem sido incrível o suficiente para compartilhar todas essas ilustrações. Então, basicamente, quando você encontra seu projeto, você condensa. Basta escolhê-lo, por exemplo, que usou este. Clique nele e você pode simplesmente fazer e você pode vir em algum lugar fora bater Controle V, e ele vai com base em seu design agora um principais inconvenientes sobre nestas ilustrações . Como você pode ver, eles estão vindo como um grupo. Mas quando você abre esse grupo, nenhuma camada é nomeada. Então isso é realmente grande desvantagem, porque se você quiser encontrar algo, você tem que realmente clicar nele e ver o que é. Se você quiser mudar algo realmente rápido, você não pode fazer isso porque você tem que clicar em várias camadas e, em seguida, mudar suas cores. Então, no nosso caso, você pode simplesmente segurar a tecla de comando de controle, e você pode clicar aqui para saltar dentro desta camada. Mas então você tem que segurar sua tecla shift para pular aqui dentro. Então aqui, depois aqui, e se você quiser mudar isso, você pode pular aqui e depois mudar o dedo do pé, que tem uma cor que você quer. Então isso é um pouco de uma desvantagem, mas uma vez que você já começa, você pode ser apreciativo fora. São ilustrações incríveis e são de graça. Você pode usá-los como eles disseram em projetos pessoais e comerciais. Então vamos pular nossas ilustrações. Tudo o que eu tinha feito aqui, Sim, se eu abri-lo, Eu dividi o personagem, bem como o principal ponto de ilustração. Então, como podem ver, aqui está a nossa ilustração e aqui está a nossa pessoa. Então isso é tudo o que eu fiz porque eu quero redimensioná-los mais tarde para todas as nossas outras ilustrações. E é muito para todos os nossos tamanhos, e é muito mais fácil fazer isso e desta forma quando você os tem separados em diferentes pastas agora para as formas em segundo plano, tudo o que eu fiz foi basicamente criar uma forma, e se eu pulasse para dentro bem aqui, eu usei muito próximo ingrediente, que é branco deste lado, vazio no site. Então, se eu clicar nele, você pode ver que ele está em zero ou pagar cidade. Vai de cima para baixo, e eu também reduzi você paga a cidade para 20% aqui. Foi tudo o que fiz por todas estas formas. E finalmente, para este grande, eu só uso um dedo da mesquita cobrir a parte desta imagem de herói, e essa mesquita vai diminuir à medida que seguirmos em frente com o resto fora dos tamanhos nos próximos vídeos. Mas você pode ver que é apenas a praça com coordenadas ou 50. Eu usei exatamente a mesma sensação para todas essas formas, ou basicamente, para ela está em 10%. Só para que seja muito mais fácil ver o Bill por trás deste texto. Então, basicamente, isso é tudo que eu fiz por essa seção. Se nos movermos abaixo disso, temos todos esses logotipos diferentes. Eu só os uso gratuitamente da Internet. Mas você obviamente vai incluir seus clientes, madeireiros bem aqui ou seu próprio logotipo. Se você está criando um design como este para sua própria agência abaixo disso, temos outra ilustração da mesma fonte, então é de andro. Mais uma vez, você pode usá-lo em você pode ver, Eu só uso exatamente a mesma administração Aziz que eles oferecem. Mas eu acabei de mudar essas cores de fundo bem aqui para combinar com as cores dos meus botões e um texto bem aqui abaixo disso, nós apenas temos algum texto e nós temos isso dividido bem aqui e é muito bem dividir esta idade para com este texto do parágrafo aqui. Abaixo disso, temos esses pequenos ícones agradáveis e temos todos esses recursos divididos em seções Aguardado divider Ike quer também. Agora esta seção é exatamente a mesma que a seção de heróis. Tudo o que fiz foi incluir o preço aqui. E nós temos esses fundos grandes para uma compra de pacotes e tudo mais. Eu fiz para diferenciá-lo um pouco da página inicial da seção de heróis aqui . Eu apenas re ordenou alguns desses elementos ao redor, e eu fiz exatamente o mesmo para esta chamada à ação seção construído para os depoimentos que eu usei mais uma vez este logotipos livres e eu apenas usei algum texto aleatório e alguns nomes aleatórios, e eu usou essas duas setas para que os usuários possam navegar pelo site à esquerda. E logo abaixo que eu uso esse problema com o botão exatamente a mesma configuração e, finalmente para as mensagens de bloco e rodapé, vamos bloquear cartazes. Você pode ver que temos três mensagens de bloco, e se eu abri-lo, você pode ver post 123 e dentro de cada post temos imagem. Então temos o carimbo de hora aqui que temos no texto do parágrafo. Temos o avatar da pessoa que está escrevendo o texto, e temos o nome da pessoa. O mesmo para todos os três. Temos botão para ver tudo e vai levá-lo para a praia bloco. Como você pode ver, ele está ligado aqui e finalmente temos o mais longe Então mais uma vez é o logotipo. São todos estes itens de menu diferentes. Temos ícones de mídia social abaixo, e finalmente este texto na parte inferior para que você possa ver este design. É realmente muito simples. É realmente muito fácil de criar. E como eu disse, não vou aborrecê-lo e desperdiçar muito do seu tempo para discursar com ela. Você pode criar este design de site se você quiser aprender que mais uma vez, ter um curso sobre como você pode criar um site design a partir do zero, e nele você vai explorar em muito mais detalhes como você pode criar sites como estes e como você pode vendê-los para reclináveis. Basicamente, quando você está criando este resumo design perfeito pitch, que é realmente escrito em pedra para que tanto você como um designer e seus clientes vão segui-lo para o chá porque você vai concordar com tudo na frente e você está indo para pesquisar site Der, bem como seu site de competições Muito bem, para que eles possam realmente entendê-lo e você pode facilmente seguir esse resumo de design. Então, mais uma vez, se você estiver interessado, você pode conferir. Mas se não, podemos seguir em frente com este curso. E no próximo vídeo, eu vou mostrar a vocês como você pode reduzir esse site em particular e nós vamos usar cada vídeo sobre como você pode redimensionar neste site para que você possa obter um design totalmente responsivo que você pode compartilhar com seus desenvolvedores. 11. Como redimensionar responsive: design responsivo é basicamente site está reagindo ao dispositivo que o usuário está vendo . Então, se você está olhando para a tela do telefone, Responsive está indo para o pé. Adapte-se a essa tela de formulário particular para olhar apenas para a direita para olhar facilmente acessível para que você possa facilmente navegar todas as informações que esse site tem para oferecer na tela do dispositivo móvel . Escusado será dizer que ele funciona em todos esses outros dispositivos exatamente o mesmo. Então, se você está olhando para um desktop, basicamente você está chegando à versão desktop dele. Se você está olhando para um telefone celular, você está recebendo uma versão de telefone móvel dele, e ele funciona exatamente o mesmo em todos esses outros dispositivos é um mostrado a você no primeiro vídeo fora da parte de design deste curso porque ele está se adaptando de forma responsável para os dispositivos em que você está visualizando seu site. Então, como isso se traduz na parte de design? Bem, é bastante simples no Adobe Exit porque eles têm essa opção de redimensionamento agradável e responsivo para que você possa ativar essa opção de tamanho responsivo a partir daqui, e ele vai redimensionar todo esse design de forma responsiva, pois acha que deve, na minha opinião, e na minha experiência, nunca funciona como deveria. Então você sempre tem que adaptar esse redimensionamento responsivo. E na minha opinião, você deve sempre usá-lo. Mas você deve sempre usá-lo parte por parte, fora do seu design, não todo o design de uma só vez. Então, como funciona. Basicamente, como você pode ver, você pode apenas ligar e desligar essa luta, e você pode clicar bem aqui na borda do seu design, e você pode simplesmente adaptá-lo. E você pode ver que ele tenta resolver todos esses diferentes componentes e como ele está indo forma responsiva. Olhe para todos esses outros tamanhos. Então, como você pode ver, estamos em 3 95 que é basicamente o nosso design móvel neste ponto. Mas como você pode ver, nenhum desses componentes parece o que deveria. Então, se você apertar controles que para voltar, você sempre pode saltar para dentro seção por seção. E quando você faz isso, você pode ver todas essas outras configurações. Então temos estofamento bem aqui. Você pode habilitar ou desabilitar o preenchimento para grupos, e basicamente você pode escolher qual tapinha você tem entre todos esses diferentes elementos . Então rebatidas diferentes para cada borda ou mesmo rebatidas para todas as arestas. Então você pode ver que nós temos um estofamento de borda direita em 1 65 que é esta aposta bem aqui. 165 está aqui. Temos cama de borda superior em apostas de borda inferior e você pode usar todas essas diferentes medidas para configurá-las como quiser. E vai dar o pé quando você armar para eles. Vai redimensionar todos esses componentes de forma responsável. Mas o que não pode fazer é não empilhar os componentes uns sobre os outros. Então, se você se lembra do exemplo que eu lhe mostrei antes, deixe-me arrastá-lo aqui. E se eu ampliá-lo, você pode ver que eu uso redimensionamento responsivo e design responsivo em geral para posicionar, por exemplo , o imposto sobre esta ilustração. Não pode fazer isso em ovos de adobe. Você tem que fazer essas coisas manualmente. Então, basicamente, tamanho responsivo está lá para ajudá-lo junto com seu empreendimento de design responsivo. Mas basicamente não pode fazer nada e tudo por você. Você tem que fazer algumas dessas coisas você mesmo. Além disso, você pode usar auto redimensionar responsivo, então use restrições de tamanho re automáticas ou você pode clicar no menu e, basicamente, como você vai corrigi-lo e como ele está indo dedo do pé como quando você está usando responsivo para que você possa corrigir sagacidade e corrigir altura. Mas você pode clicar aqui, por exemplo, e agora ele vai ser fixado no topo e fixo à esquerda. Então, se eu e zoom um pouco clique em nossa porta em clique aqui, você pode ver que ele permanece fixo para a esquerda e fixo para o topo. Agora você pode fazer isso para os componentes, ou você pode fazer isso para esses vários elementos dentro de seu design. Então, se eu usar exatamente as mesmas configurações aqui, e se eu começar a redimensioná-lo, você pode ver que ele está mantendo as restrições esquerda, inferior direito como sua direita fixo lá. E vai ser fixado no topo e fixado à esquerda. Neste caso, você pode ver que seu design responsivo funciona bem até um ponto onde ele começa a quebrar, e então você tem que pular nessa altura, tipo de trigo, que é de 9 78 pixels neste ponto e você tem para fazer alguma coisa. Então ele vai estar funcionando corretamente a qualquer momento. Então, basicamente, mesa como redimensionar responsivo funciona e no próximo vídeo, vamos começar a redimensioná-lo. Então, vamos criar esse ótimo que você pode ver aqui, e vamos mudar de desktops extra grandes, dispositivos muito grandes. E eu vou mostrar a vocês como você pode adaptar este trabalho de design do dedo do pé em dispositivos grandes que param . 12. Crie design responsivo 1: Então, vamos agora começar com um design responsivo. Como disse no primeiro vídeo, Certifique-se de falar com seu desenvolvedor sobre como você pode projetar se eles estão usando bootstrap se eles estão usando angular ou outra coisa se eles estão usando sistema de grade personalizado se eles estão usando nenhum sistema de grade em tudo? Se você tem que criar um ótimo sistema você mesmo, então simplesmente fale com seu desenvolvedor antes mesmo de começar com o design para que você possa saber como ele vai se adaptar uma vez que você criou seu design, e agora você tem que adaptá-lo manualmente, nem mais um lado. Nota. Se você está começando com extra pequeno. Então você está começando com o tamanho do telefone, por exemplo, e você quer adaptá-lo muito grande lá pára ou uma hora, então ele funciona exatamente da mesma forma. Então você está indo exatamente do mesmo jeito. Adapte todos esses componentes e tamanhos diferentes para caber nessas telas diferentes muito. Agora, vamos começar. Vou clicar aqui, apertar o Control de para duplicar este. Vou posicioná-lo aqui mesmo, abaixo de um desktop de dispositivos grandes. Eu vou clicar duas vezes sobre o nome que ele iria controlar, ver duplo clique aqui direito hit controle do e agora eu vou fazer eu vou simplesmente clicar aqui para que eu possa ver todos esses tamanhos diferentes. Então, basicamente , são 10. 24 em sagacidade, então eu vou fazer isso. Primeiro você pode sair do curso para isso manualmente simplesmente clicando aqui e indo para 10. 24. Mas como você pode ver, layout está quebrando bastante. Então eu não vou fazer isso. Vou simplesmente clicar aqui e usar 10 24 assim. Mas eu vou desligar o tamanho da responsabilidade neste momento porque eu quero fazer todos esses componentes ter exatamente o mesmo tamanho. Então ele vai para o dedo do pé, manter exatamente o mesmo tamanho para todos os nossos estilos de personagem e são ilustrações. Então, eu só vou desligar o redimensionamento responsivo neste ponto. Mas eu vou mudar para baixo por alguns desses componentes adicionais. Então, como dissemos 10 24% e agora você pode ver que alguns deles estão lá fora, mas vamos lidar com isso em uma segunda primeira coisa primeiro, temos que adaptar esses diferentes parâmetros para que, como você pode ver, é 30 50 47. Então vamos fazer o mesmo por aqui. Então, 30 15 e finalmente 47 aqui. E vamos verificar mais uma vez. Colunas tão altas 30 50 47. Diga que as colunas 30 50 e 47 devem estar aqui. Então, como você pode ver, temos exatamente as mesmas configurações que temos aqui no topo. Este é um realmente teimoso até em adobe existir, então você tem que adaptá-lo de vez em quando. Agora, deixe-me saltar rapidamente e mover este projeto para que eu possa ver o que estou fazendo. Basicamente, e posso mostrar-lhe isso neste arquivo original. Então deixe-me pular e eu estou indo para o pé. As primeiras coisas primeiro adaptam a minha navegação. Então, como você pode ver, nós consertamos para a esquerda e para o topo. Então o que podemos fazer é simplesmente clicar aqui e adaptá-lo assim. Mas eu não vou fazer isso porque eu não gosto do que ele faz com o logotipo e o que ele faz com o fundo. Quero ter exatamente o mesmo tamanho aqui. Então o que você pode fazer é simplesmente clicar aqui, colocar para fora e podemos ver que temos margens vinculadas ou 47 Então podemos clicar aqui. E podemos usar rebatidas para borda esquerda e direita off 47 assim e assim Então o que podemos fazer neste ponto, é simplesmente usar a navegação movendo-se assim, e eu vou mover isso também. Mas como você pode ver, ele continua movendo isso então eu não estou realmente gostando do que ele faz. Então eu vou fazer isso manualmente e vou simplesmente mover o botão para aqui. Vou simplesmente clicar em um desses. Segure o turno e mova-os para algum lugar por aqui. Talvez, e eu estou indo dedo do pé também reduzir o tamanho do logotipo como célula. Posicione-o no centro assim e lá está. Então agora temos nossa navegação feita, e eu vou simplesmente mover o fundo para aqui e então ouvir até que ele se encontre com a borda superior do nosso herói e nossa navegação esteja completa para que você possa ver que parece exatamente o mesmo que aqui, mas usamos alguns truques para posicionar alguns desses elementos um pouco melhor, e agora vamos fazer o mesmo para o herói. Então, como você pode ver, você pode incluir tapinhas. Você pode incluir o redimensionamento responsivo. Mas se você está usando apenas o redimensionamento responsivo, você pode ver como isso funciona, então você pode clicar e movê-lo e você pode ver que ele está realmente distorcido todos esses elementos diferentes . Então o que eu realmente gosto de fazer é simplesmente saltar para dentro e mover o texto para aqui. Mova estes dois botões para aqui, e basicamente eu vou adaptá-los em tamanho. Então eu vou clicar em um desses botões e simplesmente movê-lo para aqui. Mas posso incluir redimensionamento responsivo para isso, então eu poderia simplesmente me mudar para cá. Use este botão e mova-o para cá também. Mas se você não gosta de como eles se parecem e eu realmente não gosto porque nós ainda estamos no tamanho de desktop , você pode simplesmente aumentar o tamanho fora deste e botão. E talvez possamos incluir estofamento e o que aumentou o tamanho. Vamos usar o mesmo preenchimento, mas por alguma razão não funciona. Então vamos saltar para dentro do manual e agora ele está posicionando para aqui. Não vai ceder porque temos esses elos de preenchimento, então vou posicioná-lo aqui mesmo. E então eu vou usar o texto dentro, posicioná-lo no meio do nosso botão, e agora eu vou fazer o mesmo por isso. Saiba mais botões. Você pode ver que é realmente teimoso de vez em quando, então você realmente tem que trabalhar com ele. E neste caso, como eu disse, eu estou criando um botão Toby três colunas Branco porque ele pode realmente muito bem adepto ao tamanho. Então eu vou saltar para dentro, clicar na pessoa, e eu vou posicionar seu lugar por aqui. Digamos que talvez até um pouco abaixo, porque eu quero que os usuários vejam esse texto. E então eu vou clicar na minha ilustração, e eu vou posicioná-la aqui até que ela se encontre com a borda direita fora de nossa grade. Agora eu vou adaptar todos esses diferentes elementos canção indo dedo do pé posição aqui, posicionar isso aqui e finalmente eu vou pular dentro da nossa máscara e clicar na máscara, e eu vou simplesmente trazê-lo para aqui e ouvir o B G simplesmente trazê-lo para aqui. E como você pode ver, nós agora adaptamos a aparência e a sensação desligada em sites de dias, e eu vou simplesmente fazer mais uma coisa. Selecione os botões de demonstração de texto e mais botões e simplesmente pressione o controle G para agrupá-los. Segure minha tecla Control Command. Clique em um herói BG, e há simplesmente clique aqui para ter certeza de que ele está no centro verticalmente. E é neste caso que você pode obter um grupo e, em seguida, simplesmente podemos querer com alguns desses outros elementos. Então, para os logotipos, podemos posicioná-los aqui e, em seguida, simplesmente redimensioná-los de forma responsável para ouvir. Então podemos mover isso sobre nós ilustração e o que eu vou fazer por ela. Vou usar porque temos 12 colunas. Vou usar seis para ilustração em seis para o texto. Portanto, há alguma adaptação que precisa ser feita. Você pode usar o tamanho responsável, se quiser. Então, dois por seis, tem ponta no dedo do pé neste carro, então você pode simplesmente fazer isso. Mas se você não gosta de como ele se parece em um realmente não, você pode desativar a tecla shift do suporte de redimensionar responsivo e em um dos cantos simplesmente redimensioná-lo , até mesmo vazar como este. Então eu vou posicionar o texto e o botão para aqui. Então 246 colunas e eu vou estender o tamanho do meu Toby inferior três. Assim, e eu vou simplesmente clicar e posicionar o texto no centro. E agora o que eu preciso fazer é simplesmente posicionar alguns desses textos para que você possa ver forma responsável o tamanho. Ele está ativado para o texto, então você pode até fazer isso se quiser. Mas está reduzindo seu tamanho, como você pode ver, e isso não é algo que queremos. O que nós queremos é que nós temos que fazer isso manualmente para que você possa dobrar dentro hit enter para que você possa colocá-lo em outra linha e simplesmente criar três em vez de duas linhas. E então você pode simplesmente mover o divisor para baixo como este 20 pixels, e então podemos fazer o mesmo para essas pilhas. Então nós vamos posicionar em 20 pixels, e então talvez possamos usar 40 pixels para este como este, e então eu simplesmente vou me adaptar ao texto um pouco mais para que ele se ajuste ao nosso grande. Então ele vai simplesmente mostrar a função de redimensionamento responsivo fora deste design. E finalmente, o que eu vou fazer, eles simplesmente usam no botão de texto e demonstração. Vou posicioná-lo aqui mesmo, e vou escolher a ilustração, posicioná-la no meio do nosso texto, alguém da nossa humildade. E então eu vou me certificar de que temos o mesmo espaçamento entre nosso herói, nosso logotipo sólido usar 18 neste caso. Então mude 12345678 e enfraqueça para o mesmo para esta seção. Então 80 como você pode ver. E agora deixe-me mover isso rapidamente para o centro e usar o mesmo espaçamento. Então 18 este caso, assim e então você pode fazer o mesmo para esta seção como esta. Basta ter certeza que está em 80 e agora eles têm que fazer é simplesmente adaptar essas seções para o nosso grande. Então você pode ver que temos quatro elementos diferentes e temos 12 colunas em nosso grande, então cada um deles vai pegar três colunas, então você tem que adaptá-los Então eu cozinho na entrega rápida e vou posicioná-lo aqui. Revisão ilimitada. Vou posicioná-lo aqui e finalmente, soluções personalizadas. Eu vou posicioná-lo aqui porque cada um deles vai levar três colunas, como você pode ver, e vai dar um toque responsável auto do gerente. Temos de adaptar o nosso texto para ficar em dúvida um pouco assim, e mais um rápido. Eles nunca deixaram apenas uma linha de texto abaixo de quase uma palavra. Certifique-se de que eles são pelo menos duas palavras em sua linha para que ele parece agradável e limpo. Então pode ver que isso vai nos levar a maior parte do tempo. O que costumava apontar no final? Porque esta é a parte mais chata deste processo de design responsivo é adaptar este texto agora, como eles disseram e mostraram a você. Você pode fazer isso com redimensionar responsivo, mas o que ele está fazendo é reduzir o tamanho do texto, mesmo que isso seja algo que você não quer. Por exemplo, para esse particular suspira fora do seu design. Então você vai ver texto menor de vez em quando, ou você pode ter exatamente os mesmos tamanhos Texas para todos os seus diferentes tamanhos de site. Mas você precisa fazer isso se isso é algo que você quer para que você possa redimensioná-los de forma responsável para todos esses tamanhos. Então você pode ver que temos 80 em todos os lugares, então tudo parece bom e limpo. Então, por exemplo, podemos até colocá-lo em 100, porque eu acho que essa foi a idéia aqui. Então o que eu vou fazer é simplesmente mover tudo para baixo 20 pixels a mais. Então vamos de clientes até o fim. Então, 20 e 20. Então, como este 20 20 mais só para que tenhamos um pouco mais de espaço de leitura. O preço. É a 100 que é basicamente isso. Então, para este, mas você vai fazer é saltar para dentro, disse Aziz. Várias vezes você pode usar recitos responsivos o que? Este, mas eu não vou fazer isso. É muito simples para mim simplesmente reordenar alguns desses diferentes elementos, então eu vou pular para dentro, posicionar isso aqui e para ele. Vou usar o redimensionamento responsivo, então cada um deles vai caber quatro colunas para que você possa clicar aqui. Posição que é para aqui. Então vá para o profissional, faça da mesma maneira. Então 1234 como você pode ver e finalmente para a elite, vamos usar exatamente o mesmo fim que você pode ver. Ele funciona bem com responsivo, preciso, modo que um enviar várias vezes de forma responsável tamanho realmente funciona bem com alguns desses elementos. Mas para alguns deles e em muitos casos, maioria deles você tem que fazer tudo sozinho para tudo. Dedo, olhe corretamente no reboque. Trabalhe corretamente mais tarde em citação. Então, para este, você pode reordenar seus alguns desses elementos e você pode mostrar aos desenvolvedores como você quer que ele se pareça com um estado. Desenvolva este design que vamos usá-los algo assim. E vamos passar para a próxima seção, que é depoimentos. Então, apenas certifique-se que eles estão em 100. Então 123456789 centavos, 100 pixels. E o que vamos fazer por este aqui é que vamos dar o pé. Remova o depoimento número três. Então, vou escondê-lo. Eu vou posicionar o número um e o número dois no centro assim e eu vou mover esta seta para a esquerda dois serão alinhados como Então eu vou fazer o mesmo para a seta para a direita , porque agora eles estão indo. Eles vão caber dentro fora são ótimos. Então, na maioria dos casos, você vai ver alguns desses bugs com Adobe Eggs D, mas apenas ignorá-los e contorná-los. Então, na maioria dos casos, você terá que selecionar algumas dessas coisas seu em vez de ajudá-lo. Mas o que você pode fazer? Você simplesmente tem que trabalhar o seu caminho em torno dele. Então deixe-me posicionar isso aqui e para o botão. Deixe-me movê-lo separadamente, e eu vou fazer com que seja três colunas brancas, como fizemos com todos esses outros botões no topo. Certifique-se de que está no centro como este e o que eu vou fazer a seguir para simplesmente reordenar algumas dessas formas. Como eu quiser. Então talvez uma posição esta aqui. Talvez eu possa até reduzir o tamanho da posição americana. Isto para estar aqui. Vou saltar para dentro da mesquita. Vou transferi-lo para aqui. Vou transferi-lo para aqui. E finalmente, eu vou mover este preço Bijie Toby aqui mais uma vez, se você quiser ver este design, você pode baixá-lo a partir de arquivos de projeto e você pode brincar com ele o tempo asi tanto quanto você quiser. E como eu disse, você pode usá-lo para produtos pessoais e comerciais. Na verdade, cabe a você. Mas eu encorajo você que uma vez que você começar com isso você criar seus próprios projetos para este, por exemplo, eu vou simplesmente reduzir o tamanho da imagem porque tudo vai caber bem Aqui. Então eu vou usar três deles, e quando eu vou fazer é simplesmente adaptar o texto para este tamanho específico para que você possa ver sua oferta, isso é o que eu estava dizendo. Duas palavras no fundo. E finalmente, vou adaptar o avatar e o nome. Certifique-se de que há 20 pixels é que você pode ver o mesmo tamanho e como esses outros, e eu posso movê-lo dedo do pé aqui. Posso fazer a mesma auto-imagem. Certifique-se de que está em quatro como esse, e certifique-se de que você adapta o texto quando necessário. E só para você saber, isso vai acontecer Life in Cote quando você estiver começando o design responsivo. Mas isso é apenas para sua referência e a referência do desenvolvedor sobre como você vai criar isso. Então, basicamente, estamos quase terminando com esse tamanho, e eu vou simplesmente clicar duas vezes dentro da posição isso dentro e eu vou brincar com um texto um pouco mais. Então, como podem ver agora, só temos um texto aqui. Mas porque eu disse que não parece tão bonito, eu vou simplesmente mudar para fora deles abaixo. Vou adaptar seu Darryl na posição 20 pixels para baixo e basicamente é isso para o bloco. A única coisa que resta é que este botão vai estar 40 pixels abaixo. Então 1234 Então, agora vamos consertar o botão. Vou fazer com que sejam três colunas, então basicamente o mesmo que fizemos com todas essas outras. Então eu vou posicionar o texto no centro assim. Mas você pode fazer isso. Você pode simplesmente selecionado na posição assim. E finalmente eu vou movê-lo Toby para o centro assim ter certeza que são 40 peças como este. E finalmente o quê? Eu vou fazer isso simplesmente mover o rodapé 100 pixels para baixo. Então é basicamente a mesma distância que com todos esses outros. Então, basicamente, turno. 123456789 cêntimos. E basicamente está 100 pixels abaixo. O que você pode fazer para o rodapé é basicamente movê-lo assim, e ele vai para um tamanho de responsabilidade. Mas como você pode ver, texto realmente não funciona. Neste caso, temos que usar essas restrições. Mas para economizar um pouco mais de tempo, o que eu realmente vou fazer é usar esta abordagem manual. Então basicamente vai fazer isso, selecione tudo e simplesmente segure minha tecla shift e mova-os no centro. Agora eu vou simplesmente clicar no meu são parte aqui, e eu vou estender esta borda inferior fora do meu são parte para por aqui e é basicamente para este tamanho fora do nosso design. Então vamos correr rapidamente mais uma vez. Como pode ver, temos que nos adaptar. Esta ilustração um pouco, por isso parece um pouco diferente. E o que você pode fazer aqui é reduzir o tamanho desses botões. Toby em duas colunas White porque eles também vem bem aqui, ou você pode adaptá-lo. Toby três vem branco, então cabe a você e como você vai usar essa abordagem. Mas neste caso, eu usei três vem porque eu acho que há muito mais legível na tela menor. Então adotamos a posição do texto, tudo para ser o centro. Nós adaptamos essas colunas que adaptaram preços re adaptado estes pacotes de preços em conformidade . Para os depoimentos não temos mais três. Agora temos dois depoimentos, e para essas formas de fundo simplesmente as adaptamos e as posicionamos na página forma diferente. Para o blogueiro usou exatamente o mesmo layout. E finalmente, para o rodapé, tudo parece exatamente o mesmo. Então é isso para este vídeo. E no próximo vídeo, vamos passar para tablets de dispositivos médios e vamos adaptar isso um pouco mais, e agora vamos começar a fazer essas mudanças diferentes, porque neste para posicionar ilustrações acima do texto. Então vai parecer um pouco diferente, então nestes dois, que são para a área de trabalho, então eu vou vê-lo lá. 13. Crie design responsivo 2: Tudo bem, não vamos começar com tablets de dispositivos médios e para começar em primeiro lugar, nós vamos fazer isso. Simplesmente duplicar. Isto é parte. Eu vou pular aqui para o controle de sucesso superior C Controle de calor. Nós aqui no fundo, então ST Ng acelerou com os anteriores. Então, como você pode ver, temos 12 layout de coluna. O mesmo que fazemos aqui. Mas são 30 e 30 noites, então temos que fazer isso também. Mas antes disso, é 768 em sagacidade, então vamos primeiro fazer isso. Então é 768 Press enter, orador. Então, mais uma vez, 30 39. Então, já está virando. E, finalmente, 30 noites. E nós precisamos saber 30 aqui tão bem quanto você pode ver. É muito teimoso às vezes, mas você tem que persuadir 39 39 aqui também. 30. Isso realmente me incomoda que ele faça isso, e eu realmente não sei por que ele está fazendo isso porque, como você pode ver aqui, nós temos isso. Então, 30 30 39. Então, se eu mudá-lo, você pode ver que são 39 em todos os lugares. Está tudo bem. Mas se eu trocar bem aqui. Você pode vê-lo. Não funciona muito bem. Eu realmente não sei por que ele continua fazendo isso. Eu não sei. Isso é talvez eu possa fazer em “Pensar assim”? Talvez eu possa mudar para aqui, então vamos começar com 30. E agora vamos começar com 39. 39 e, em seguida, mude para 30. Bem aqui. Então lá vai você. 30 30 39. Então, como você pode ver, ele realmente é buggy esta ferramenta e ele realmente tem uma mente fora de si mesmo. Porque mais uma vez, se eu clicar aqui, abro nas margens. Você pode ver lá mesmo aqui e 30 em todos os lugares. Mas se eu trocá-lo aqui, você pode ver quantos problemas nós temos? Testemunha. Mas não vamos atolar com isso. Vamos passar rapidamente para o próximo. Então, porque este é o tablet, nós não vamos ver esses itens de menu aqui. Nós estamos indo para o pé. Tenha um ícone de menu incluído em vez disso. Então deixe-me saltar para dentro. Eu vou mover este nunca Bijie aqui. Vou mover este botão por aqui. Vamos ver e eu vou me esconder por enquanto. todos esses itens de menu como assim e bem aqui eu vou incluir ícone Menu e eu vou incluir um, que eu incluí no exemplo original que eu mostro a vocês. Então aqui está. E deixe-me reduzir rapidamente o seu tamanho para atacar. Não, eu vou pular dentro do meu botão e simplesmente ter certeza que tem três colunas de largura, como então certifique-se que isso está no centro assim, e vamos deixá-lo por agora. Eu vou mover este ícone de menu aqui, e o que nós temos que lidar com isso é que nós temos que ter certeza de que nós criamos um menu expandido . Então é isso que vamos criar agora. Então deixe-me duplicar isso nunca BG para que ele controlasse D. E eu vou movê-lo para baixo. Então eu vou realmente mover este assim até que ele se encontre com este aqui. Então, apenas certifique-se que eu vou desligar responsavelmente tamanho para este aqui porque eu realmente não preciso dele, e eu não tenho certeza do porquê. É muito maior. Então, 89 de altura, talvez nem pudéssemos torná-lo menor. Digamos que 60 e o que precisamos é de uma linha, e esta linha vai passar por aqui. Então, vai ser limites bem divididos, que fora de minhas colunas por agora vai muito bem dividir este nunca BG e esta beleza inferior . Então vamos usar isso como um BG suspenso, por exemplo, e vamos mover todos os nossos itens de menu abaixo. Então eu vou selecioná-los assim, então eu vou para casa. Uma mudança pode simplesmente mover isso para baixo para estar no meio do nosso caiu um Bijie. E o que eu vou fazer é talvez eu possa duplicar meu drop down BG reduziu a altura do dedo do pé um e clique aqui e deixe-me borda é excluído. Deixe-me usar esta cor, por exemplo. Sim, como você pode ver agora nós temos esta bela linha divisória. Então, se eu pulei para trás o que eu posso fazer aqui, simplesmente ordene-os. Então eu vou saltar para dentro, selecionar todos eles e simplesmente alinhá-los para a direita. Digamos e alinhados com o nosso menu como quer assim e vamos um por um . Então serviços iss primeiros recursos em contato EUA você pode ver que chamamos sua tecla shift ou remover isso por enquanto, porque mais uma vez, caixa em um nenhum b ovos, o estão presentes. Então, como você pode ver, assim que eles apertarem, mude-o, selecione tudo. Eu realmente não sei por que continua fazendo isso. Mas mesmo que eu use minha flecha, você pode ver que ela não as move mesmo que a história esteja selecionada. Então esta caixa realmente me incomoda sem trocadilhos. Mas o que você pode fazer? Simplesmente tem que seguir em frente com ele para que eu possa simplesmente selecionar esses dois e movê-los para baixo. Posso simplesmente esconder isto. Mova isso para baixo e há simplesmente ligar todos esses outros. Então o que temos aqui é 1234512345 e Block deve ir para a frente assim. Agora vamos simplesmente fazer uma seleção, e eu vou duplicar esta linha. Então vamos usar isso como um divisor, assim, e eu vou simplesmente duplicá-lo e movê-lo para baixo. Então eu vou usar 20 pixels porque isso é o que usamos para tudo. Basicamente, Então turno 12 Então eu vou usar minha linha divisória aqui, ele iss eu vou alinhá-lo com o fundo fora do meu texto assim. E então eu vou apertar Shift um dente para ter certeza que está 20 pixels abaixo. Vou selecionar todos estes. Certifique-se de que estão 20 peças abaixo assim. Vou movê-los para baixo assim. Vou estender meu BG até aqui só para ver o que estou fazendo. Eu vou bater o controle D mais uma vez e simplesmente movido para cima linha divisória 20 pixels. Mais uma vez, usar o preço que eu poderia usar e, uh, repetir ótimo para fazer esta função. Mas acho que, às vezes, métodos antiquados realmente funcionam bem, então vamos seguir em frente e simplesmente selecionar blogueiros. Você pode ver que o Adobe X'd faz sua coisa agora porque ele está me mostrando a distância de 20 pixels entre todos esses itens diferentes, como você pode ver aqui. E, finalmente, temos contato conosco e para isso, não vamos usar o divisor, então mude quer para baixo, e então eu vou simplesmente usar drop down BG para movê-lo para perto assim Shift 12 E como você pode ver, nós temos o nosso pronto para ir se você acha que esses divisores são muito ásperos em seus olhos, então, como você pode ver, você pode vê-los claramente como Então você pode reduzir a opacidade para que você possa selecioná-los todos. Eu vou agrupá-los para controlar G, por exemplo, para um grupo como então eu vou usar o branco lá, alinhados assim e você pode baixar sua cidade paga fora de toda a pasta. Mais seguro atinge 20, por exemplo. Você pode ver como isso se parece com 40. Acho que isso é bom. E você pode até selecionar essa cor se é isso que você quer, e então você pode chamá-la com essa cor particular. Mas vamos usar algo como, sei lá, 80 talvez 60. Sim, acho que 60 é bom por enquanto. Então o que nós vamos fazer é usar todos esses itens de menu, movê-los e para baixo assim e eu estou indo dedo do pé, usá-los linhas divisórias e soltar BG Group todos eles e simplesmente nomeou este drop-down porque agora eu posso esconder ele e eu posso continuar trabalhando no meu projeto. Então vamos incluir de volta são realmente ajudar. E como você pode ver, nós temos 12 coluna. Como aqui, mas as colunas são um pouco estreitas. Então o que podemos fazer para isso é simplesmente mover minha ilustração para baixo e mover meu texto para cima. E eu vou mudar este texto para estar no centro para que você possa clicar duas vezes dentro e clicar aqui para ter certeza que ele está no centro e sem mover esse espaçamento ou qualquer coisa, eu posso simplesmente posicioná-lo aqui. casa uma chave de turno. 1234 E então eu vou adaptar meus botões. Então, são três colunas brancas neste caso. Então eu vou movê-los para cá. Como você pode ver lá em nossas quatro colunas Branco, eu não gosto disso. Então eu vou ter certeza de que eles são três colunas de largura assim que eu vou mover isso no centro, e eu vou usar mais botão como esse porque você pode deixá-los para. Mas então você tem que adaptá-lo mais uma vez. Então eles têm trabalho sobre o tamanho móvel, por exemplo. Então deixe-me movê-los 40 pixels. Então 1234 Eu vou me certificar de que eles estão em um centro assim. E finalmente, vou mudar a minha ilustração. 1234 e 1234 mais uma vez apenas para ter certeza de que temos mesmo espaçamento. E agora eu vou estender meu herói BG até este ponto e então mover minha ilustração de volta. 1234 Então, para ter certeza de que eles estão no centro, o que eu vou fazer é mover a ilustração para a direita. Assim eu posso mover minha pessoa para cima e que se isso é algo que você quer, vamos deixar aqui, por exemplo. E então eu posso mover minha ilustração uma vez contra o turno dela. 1234 Agora este vai ser o nosso fundo. Alinhe nossa imagem de herói. Vou movê-lo para trás e, finalmente, mover a minha ilustração. 1234 Então é realmente brincar com todos esses elementos diferentes e ajustá-los como você faria. E então eu vou esconder rapidamente o meu grande porque eu vou brincar com esses elementos. Então eu vou pular dentro de formas e nossa mesquita, e eu vou estender minha mesquita até aqui, e então eu vou trazê-la um pouco mais perto. E então eu vou simplesmente remover essas formas ao redor, como eu fiz anteriormente. Então, se é um pouco difícil selecioná-los, então você pode segurar sua chave antiga e você pode rapidamente saltar para dentro e selecionar diretamente. Então vamos dizer que esta é a ordem que eu gosto, e eu posso simplesmente deixá-lo assim, e eu posso então seguir em frente com a próxima parte do meu design, que são logotipos e para os logotipos. Se você se lembra, nós temos redimensionamento responsivo. Mas se eu colocar uma tecla shift em casa, deixe-me ligar rapidamente o meu grande para que eu possa vê-los encaixando na posição. Então, se eu segurar a tecla shift, eles vão diminuir uniformemente assim. Mas você pode até estendê-los assim quando chegar a um certo ponto. Então, com isso sendo feito, deixe-me movê-los. Então mude 12345678 Vamos ver, e então eu posso continuar com a nossa ilustração. Então, com nossa ilustração, eu posso mover minha ilustração aqui, e eu vou escalá-la até este ponto, por exemplo, porque eu realmente queria ser bom e grande, e eu queria posicioná-la no centro assim. Então eu vou mover texto e demonstração para baixo aqui, e eu vou esconder todas essas seções para baixo porque vai ser muito mais fácil para mim trabalhar nisso. Próximo. Vou ligar para a minha chave de turno. 12342 Com 40 pixels para baixo, vou alinhá-lo, o que é ótimo. E finalmente, o que eu vou fazer porque vai ser muito mais fácil para mim usar o redimensionamento responsivo é que eu vou converter isso do texto ponto, que é isso aqui para texto de área. Então, quando eu clicar ali e eu posso estender, Toby, bem aqui, eu condeno brincar com ele. Então, por exemplo, eu quero mover isso. Como você pode ver, ele se adapta ao meu parágrafo assim eu posso deixá-lo assim, ou eu posso até pular para dentro e trazer isso um pouco mais perto. Como assim Porque nós só temos duas linhas de texto agora para os botões de demonstração. O mesmo que fizemos com os botões anteriores. Vou reduzi-lo, Toby. Três colunas brancas para garantir que temos o mesmo espaçamento, assim e para o nosso título. Você pode até converter que o texto da área se você quiser, mas eu vou deixá-lo como ele é porque ele realmente não tem muito nele. Então eu vou posicioná-lo assim. E então eu vou selecionar meu divisor, meu parágrafo, meu parágrafo, e ter certeza que eles estão em 20 pedaços como esse. Certifique-se de que a parte inferior está em 40 como assim e certifique-se de que isso está alinhado para criar É assim que é basicamente isso para esta seção. E vamos agora, movê-lo rapidamente para baixo. Certifique-se de que estamos em 80. Como você pode ver, estamos tão basicamente você está mantendo o mesmo olhar que temos aqui. Mas agora a ilustração e o texto estão se adaptando à inteligência de que agora temos mais uma coisa sobre o texto. Você pode converter este texto do texto da área do ponto X para todos eles, mas eu realmente gosto de convertê-los um pouco mais tarde, apenas para que eu possa ver onde ele precisa ser convertido e se ele precisa ser convertido em tudo. Por exemplo, para essas seções, é muito importante que saibamos secretos, mas, por exemplo, para dissecação. Talvez não seja tão crucial, mas vejamos assim que começarmos a projetá-lo. Então vamos agora usar esta seção, movê-la para o centro assim, certificar-se de que este é 80 como aquele, e, como você pode ver neste título, se encaixa bem. Mas este texto não é assim vamos saltar rapidamente à vista. Eu vou converter o texto da área do dedo do pé, e eu vou simplesmente estender isso um pouco para baixo. Eu vou mover isso aqui para encaixar na grade e mover isso aqui para pegar o maior poço. Mas como podem ver agora, só tem as palavras deste cliente nessa linha. Então, o que? Eu vou fazer isso. Basta mover isso para cima assim, e então ele é concluído. Então, como você pode ver, é realmente fácil. E agora se eu começar a movê-los por algum motivo, ele vai se adaptar, e vai empurrar todas essas palavras para baixo. Então é basicamente assim que você trabalha com o texto da área. Em seguida, vamos passar para os recursos, e eu vou selecionar esses recursos e posicioná-los para ouvir. Certifique-se de que são 80 assim e o que eu vou fazer é simplesmente dividi-los seis por seis . Então estes dois vão levar seis colunas cada. A loja foi fazer o mesmo, então vamos saltar para dentro, e eu vou mover revisões ilimitadas. E eu vou mover soluções personalizadas para baixo assim até que elas se encaixem e vamos contar seis colunas para esta. Então 1234568 Este. Deixe-me verificar mais uma vez. 123456 é e usar soluções personalizadas tão mesmo aqui e certifique-se de que eles estão em 40 separados . Mas antes de fazermos isso, vamos adaptá-lo rapidamente para que você possa abrir todos eles. E você pode, por exemplo, clicar neste clique convertido sobre este. Converta, faça o mesmo para este e, finalmente, faça o mesmo para este. Então agora eu posso simplesmente estendê-los para ouvir. Posso fazer o mesmo por este. Certifica-te que é às seis. Certifique-se de que este é seis também e o mesmo para este. Então eu vou começar do início do primeiro 1 Eu vou movê-lo para aqui apenas para que eu possa ver o que se encaixa e o que não gosta disso assim. Então tem que ser três linhas. Então, como fizemos com os anteriores, vamos movê-lo para cá. Isto está concluído, e vamos fazer o mesmo por este. Então tem que ser uma aliança de três. Se pode ser três linhas como esta, por exemplo, realmente não importa porque você vai empurrá-los 40 pixels para baixo do ponto mais baixo , que é este. Então é bom saltar para dentro e injusto isso para que ele não mexa com o nosso alinhamento. Então agora podemos movê-los para o lugar como então mudar 1234 E o que eu vou fazer é realmente mover isso. Certifique-se de que está alinhado com Margaret assim todos eles estão alinhados, exceto por este, assim. Então tudo está bom para ir agora. Não, eu tenho que ajustar meu imposto só um pouco até que ele se encaixe e faça o mesmo por este . Você vai notar problemas de alinhamento do do de vez em quando, mas você simplesmente tem que trabalhar com eles porque não há outra maneira de contornar. Apenas lembre-se, você está projetando neste ponto que você não está desenvolvendo. Então tudo está testando basicamente. E esse teste é realmente importante porque quando você está fazendo isso, você está basicamente fazendo o teste para desenvolvedores. Então você está se certificando de que as coisas estão funcionando como deveriam antes de entrar em desenvolvimento, porque é realmente muito mais fácil e mais barato para você testar todos esses problemas. Então, para os desenvolvedores, porque seu tempo é mais precioso do que o seu. Um pouco mais tarde, uma vez que o projeto começa e uma vez que tudo é codificado porque então eles têm que corrigir bugs , então eles têm que se certificar de que tudo funciona corretamente como deveria, especialmente porque este é um site. Ele tem que trabalhar em diferentes navegadores seu próprio. Então, certifique-se de que quando você está projetando, certifique-se de que você está verificando para todos esses erros, porque vai ser muito mais fácil para você e, em seguida, literal para desenvolvedor verificar tudo. Então, vamos passar rapidamente para o nosso preço. Eu vou me certificar de que ele está em 80 como ele é bem aqui e para seu pouco rapidamente esconder todos esses elementos abaixo, como assim para ele. Vou selecionar o meu texto, certificar-me de que está no centro. Nós não temos que lidar com isso em tudo. E para isso, o que nós vamos fazer é ir dedão, ter dois em uma fileira, e então nós vamos ter o próximo lá embaixo. Então, o que? Especificamente adaptado? Então, como o tamanho responsável está ativado, você pode ver que ele mantém a distância entre as margens esquerda e direita, e mantém tudo como deveria. Então, para cinco, deve ser em seis, assim, e isso deve ser em seis, bem, assim, apenas certifique-se de prestar contas. Sim, eles são, então eles estão prontos para ir, e você pode posicionar isso no centro, mas antes de fazer, certifique-se que é às seis também. Em seguida, posicione-o no centro e, em seguida, você pode estender isso. Então vamos fazer isso rapidamente 12341234 meses Mais uma vez, eu vou selecionar meu plano de fundo e simplesmente alinhá-lo com o local. Não vai gostar. Então, mova para cima. 1234 E eu vou simplesmente morto. Ajuste a minha forma. Então vou usar a minha mesquita. Simplesmente estendido todo o caminho até aqui, e então eu posso usar esta forma. Eu posso brincar com ele que pode posicioná-lo para baixo. Por exemplo. Eu posso usar este. Posicione-o para cima, volta na posição para circular aqui. Talvez eu possa mover este retângulo aqui. Vamos dizer algo assim. Talvez eu possa mover isso um pouco para baixo e, finalmente, eu posso mover os preços. BG inverte para que ele se alinha e, finalmente, mover minha mesquita para que ele se alinha também. Então é basicamente isso, pois essa seção é que você pode ver algumas seções são realmente simples, e algumas seções podem ser um pouco complicadas de trabalhar, então é rapidamente esconder preços para que eu possa mover meu testemunho para baixo. Eu vou posicioná-lo no centro da mesma forma, então certifique-se que está em 80 se ele não mostrar como ele não está no momento. Shift 12345678 E para este aqui, porque somos um tamanho de tablet naquele momento, eu só vou ter um depoimento e eu vou ter minhas flechas no limite. Então eu vou esconder meu testemunho de que eu vou posicionar isso no centro assim, e eu vou simplesmente usar minhas flechas como você pode ver. Shift Key novamente não funciona em um óbvio o Eu realmente não sei por que ele continua mostrando esses bugs, e eu vi relatórios na voz do usuário em seu site onde você pode deixar sua opinião sobre software e um monte de pessoas se queixaram sobre esta questão. Mas nada foi feito recentemente, então vamos avançar rapidamente em 80 e o que você pode fazer é simplesmente posicionar isso no centro. Mas como não temos esta mesquita aqui, descobri que é muito mais fácil fazer uma por uma. E porque estamos ficando sem espaço, você pode simplesmente estender seu porto todo o caminho para baixo, e o que eu vou fazer com este é simplesmente saltar para dentro, mover meu texto para o centro assim e ter certeza que minha garrafa é três colunas brancas assim. Você também pode acelerar isso se você quiser. Eu não fiz isso para este projeto, mas eu costumo fazê-lo. Você pode simplesmente torná-los como um componente, e você pode incluir um componente de um botão para que você possa simplesmente arrastar e soltar um componente daqui para que você possa selecionar um botão. Só me deixe ter certeza que está selecionado. Você pode apertar o controle e o comando. Kate vai transformá-lo em um componente, e então você pode simplesmente selecionar esse componente a partir daqui. Arrastar e soltar drogas no lugar, e então você pode ver qual posição ele a partir daqui. Se isso é algo que você quer, Eu não quero que ele para o momento, porque você também pode bater no componente grupo e chamar isso mais BTM. Eu não queria fazer isso porque ainda estamos brincando com tamanhos diferentes. Então, como você viu aqui, nós temos três componentes aqui para componentes e lá nós temos que comportar duas colunas e alguém, e alguém, então é por isso que eu não fiz isso ainda, porque nós estamos brincando com tamanhos diferentes. Então é apenas isso que eu vou mover este círculo para ouvir, por exemplo, mover isso aqui. Vou selecionar esta forma com aqui mesmo. Vou ver onde minha mesquita vai movê-la para dentro até que se encontre no centro. Talvez eu possa até posicionar isso por aqui, e ele está realmente brincando com esses diferentes elementos. Veja o que funciona, o que não funciona e basicamente trabalhando em torno dele. Não para o quarteirão. Nós só vamos ajudar um, por isso é rapidamente mover o seu 18º. Eu fui saltar para dentro e para o tronco você não pode deixá-lo para ver como se parece. Então sua posição é 62456 Então você pode até mesmo estender a partir daqui. Mas como você pode ver, ele continua movendo este texto, e eu não quero fazer isso. Então eu realmente gosto de fazer tudo sozinho. Vou saltar para dentro e simplesmente movê-lo. Uma coluna para ouvir tudo o resto permanece a mesma e para o post para nós vamos esconder o post árvore post dois. Nós vamos fazer a mesma coisa, então apenas pule dentro da extensão, esta imagem, é basicamente isso. Você pode brincar com este texto um pouco mais, mas como você pode ver, talvez este aviso você vai caber. Mas eu estou indo para o pé. Acredita nisso. Como é, tudo o que eu vou fazer é simplesmente mover este ver tudo para ser três colunas de largura para coincidir com nossos outros botões assim e simplesmente posicionar para estar no centro, que são texto como este e botão como aquele. Isso é basicamente uma última coisa que nos resta criar é Rodapé. E como eu disse, você pode ver a posição que ele gosta, então certifique-se de que está em 80 assim e você condensa simplesmente ajustar esquerda e direita e mover isso para dentro, e é basicamente isso. Você terminou com a coisa mais completa do Onley que restou para nós. Fazer agora é simplesmente mover isso como, então eu vou movê-lo. Werth assim e nossos tablets de dispositivos médios estão prontos para uso. Então, se eu correr rapidamente, o que fizemos foi adaptá-lo e, como você pode ver, temos que mover isso um pouco. E sim, este botão tem luz de três colunas. Então o que fizemos foi criar este menu e um menu suspenso. Então, se eu ativar ou desativar rapidamente, você pode ver que agora temos no menu suspenso. Você pode mover isso se quiser, você pode movê-lo para a esquerda. Mas eu encontrei e os usuários descobriram que porque seu dedo está bem aqui, então, quando você tocar nele, vai ser muito mais fácil simplesmente deslizar o dedo aqui, depois tocar aqui e depois esticar o dedo do pé nesta área bem aqui . Então é muito mais fácil. Não é simples e muito. Faz muito mais sentido ter todos esses itens do menu aqui porque, como eu disse, seu polegar está bem aqui. Você toca neste ícone, abriu este menu suspenso e simplesmente acessar todos esses recursos abaixo. O que fizemos 10 é simplesmente cada ordem. Alguns desses elementos removeram a ilustração abaixo. Mudamos o texto para cima. Fizemos a coisa oposta bem aqui. Reduzimos o tamanho desses logotipos. Em seguida, posicionamos estes dois parecem assim Então, em vez de quatro em uma fileira, Agora temos dois em uma fileira e duas linhas, basicamente para o preço lá agora um pouco mais largo para caber nessas colunas. E agora temos dois e um abaixo, e para os depoimentos, só temos dois. Em vez disso, só queremos em vez de dois. E finalmente, para o posto de bloqueio, temos dois em vez de grátis. Então é basicamente isso para este. No próximo vídeo, vamos projetar tablets de dispositivos pequenos, então será basicamente o mesmo. Mas vai ser ainda menor do que este, e vejo-te naquele vídeo. 14. Crie design responsivo 3: Vamos agora continuar com tablets de dispositivos pequenos e eu estou indo toe hit control de para duplicar este aqui, e eu vou posicioná-lo bem aqui. Vou clicar duas vezes aqui. Controle de batida, parece. Não choramos aqui, controle o e eu vou verificar o tamanho. É 600. Eu vou fazer o mesmo tamanho aqui como então apresentador, e vamos verificar o grande aqui. Então, são oito colunas desta vez, então vamos primeiro mudar isso. Acho que sim e 30 37 47. Então vamos tentar adaptar aquele 30 37 finalmente 47 aqui. Então, como você pode ver, ele continua nos trazendo o mesmo problema. Mas desta vez conseguimos corrigi-lo facilmente. Então 30 37 47 8 Colunas 30 37 47. Então isso é basicamente luta. Como você pode ver, às vezes você vai ter esses problemas, mas às vezes vai funcionar muito bem. Então vamos seção por seção, e eu vou usar isso nunca BG. Vou movê-lo para cá. Vou selecionar meu botão de demonstração e ícone de menu. Vou posicioná-los aqui e para este. Não vamos ter isso em três colunas. Então deixe-me adaptado rapidamente assim Porque queríamos encaixar nossas colunas facilmente. Agora, porque temos uma gota lá, temos que adaptá-la também. Então, tudo o que quero fazer aqui é movido para cair aqui. Certifique-se de que todos os meus itens serão alinhados com a nossa grade para que você possa selecionar todos os seus itens . Mova-os assim E finalmente você pode usar linhas divisórias e soltar BG e simplesmente movê-lo para aqui. Em seguida, vamos para a seção Tohira. Mas antes de o fazer, deixa-me esconder rapidamente a lista deles. Vou mudar-me para a minha secção de heróis. Eu vou usar meu herói BG e simplesmente movê-lo assim. Então eu vou entrar em formas, usei minha máscara e simplesmente movê-lo em palavras assim e eu vou agora me concentrar no texto, bem como na ilustração. Então, para o texto, temos que fazer algumas mudanças. Então vamos primeiro converter este texto da área do dedo do pé e você pode cortejar isso para o texto da área também se você quiser, mas eu não vou fazer isso. Vou simplesmente colocar isso abaixo. Eu vou mover isso para cima e finalmente mover isso para baixo assim. Então, como eu disse, nunca coloque uma palavra para que você possa brincar com ordem fora de suas palavras para que você possa fazer algo assim. Então, se você acha que se encaixa melhor do que você pode fazer isso finalmente eu vou simplesmente adaptar este texto para o meu aperto como Então eu estou indo dedo do pé, estendendo-o por conta própria. E eu vou trazer isso de volta para cima em uma linha, assim indo para passar de comprometimento para baixo de sites, abs para branding. E eu vou colocar isso para a última linha assim porque eu só acho que faz com que pareça muito mais agradável aos olhos com o aqui. E finalmente, vamos lidar com nossos botões. Então eu vou posicioná-los até aqui. 1234 E mais uma vez vamos fazê-los ser luz de três colunas, então eu vou selecionar esta. Certifique-se de que é três assim, como este para ter certeza de que ele está em três como bem posicionado texto no centro como então certifique-se de que este está no centro. Se você não conseguir encontrá-lo, basta selecionar os dois e clicar aqui e, em seguida, aqui para se certificar de que está no centro. Assim como. Posicione estes dois no centro também. E agora vamos lidar com a nossa ilustração. Então, eu vou posicionar nossa ilustração aqui, certificar-me de que o tamanho responsivamente está desligado e simplesmente certifique-se de que o dedo do pé seja dimensionado um pouco para baixo . Então eu vou ter 40 pixels aqui, então mudar 1234 E eu vou simplesmente selecionar minha beleza e movê-la até que ela alinhe com nossa ilustração. Próximo turno 12 Como você pode ver, ele realmente não funciona às vezes. Então você tem que forçá-lo basicamente. Mas você pode simplesmente movê-lo enquanto mantém o deslocamento pressionado e vai selecioná-lo 40 pixels a partir daqui. Então, basicamente, tudo o que resta é que temos que mover essas formas. Como você pode ver, o realmente parece ótimo. Mas como você pode ver, você tem que adaptá-los o tempo todo, porque para tudo o dedo do pé trabalhar como deveria, você tem que se certificar de que eles são diferentes tamanhos que eles estão posicionados corretamente. Você tem que reduzir alguns deles. Você tem que posicioná-los de forma diferente. Mas como você pode ver, é divertido projetar essas coisas. Mas quando se trata de coisas tipo de reposicionamento, você realmente tem muito trabalho a ser feito. Então vamos agora passar para nossos logotipos, e eu vou segurar minha tecla shift e reposicionar meus logotipos um pouco melhor, assim, assim, certificar-se de que eles estão em 80, por exemplo. Então vamos posicionar esta linha de reboque corretamente assim, e eu fui para uma casa com uma chave de turno. 12345678 Eu vou fazer o mesmo para a minha ilustração. Certifique-se de que está em 80. Por alguma razão, é um 78 então eu vou simplesmente movê-lo para pixels para baixo assim. Então, quando você movê-lo, ele vai mostrar 80. Então o que eu vou fazer agora é simplesmente usar minha ilustração, posicioná-la aqui, certificar-se de que ela se alinha com nosso grande simplesmente turno de chamada. Então eu vou usar o meu texto e posicioná-lo até que ele alinhe e até que ele alinhe com o nosso grande na esquerda, bem como mudar 1234 e eu estou indo dedo do pé. Basta posicionar meu botão até eu lidar com isso, então eu tenho que mover este texto um pouco para baixo. Então, na indústria, vamos usá-lo assim eu vou usar meu divisor e simplesmente se ele me permitir, eu vou me esconder. Este texto simplesmente moveu estes dois para baixo I. Então eu vou escolher o meu divisor e posição 20 pixels e, em seguida, fazer o mesmo para o texto. Então, desde o início, talvez possamos mover esses livros. Vamos ver como isso parece assim, como você pode ver, Box se adapta bem ao nosso grande e uma última coisa que precisamos fazer é simplesmente posicionar esta mudança. 1234 e eu vou ter certeza que tem três colunas de largura. Vou posicionar o meu texto no centro desta montanha. Como você pode ver, continua ficando cada vez mais rápido. Quanto mais você fizer isso, mais você vai, mais tamanhos você cria porque você basicamente estabelece esse layout. 234568 e seu conteúdo adapta rapidamente esse layout para atender às suas necessidades, então não vamos mover isso rapidamente e mover isso também. Então eu vou estender para baixo, e eu estou feliz com o jeito que isso parece. Então, basicamente, única coisa que resta aqui é adaptar este título. Então vamos movê-lo para baixo e vamos ver, onde podemos quebrá-lo? Vamos fazer isso aqui, então simplesmente mova meu divisor para 20. E esta seção está concluída agora para os futuros. Vamos atacá-lo rapidamente. Então eles se alinham com nossa grade e vamos movê-los 80 assim Às vezes você vai notar essas linhas sem, por exemplo, 80 e isso vai nos mostrar, vamos dizer 79.8, porque fora desses ícones, então você não pode lidar com isso, infelizmente, Mas você pode simplesmente seguir em frente, ir para o ponto final mais próximo e simplesmente pará-lo lá. Então, como eu disse, temos oito colunas agora, então 12345678 vamos usar quatro. E por isso vamos passar para quatro. Aqui está. Eles estão alinhados como tiro. Estes são iluminados, então basicamente ele permite agora ajustá-lo. Tudo o que você tem que fazer é simplesmente mover este texto para quatro como este e vamos ver onde ele quebra bem aqui. Faça o mesmo por este. Para simplesmente movê-lo para quatro, ver o que ele quebra, e você tem que ajustar um pouco disso. Vamos ajustar isso e isso vai aparecer às três. Então vamos lidar com isso agora, e podemos passar para esses últimos, então certifique-se de que eles estão em 40. Então, como você pode ver, vamos ter alguns problemas por causa desses ícones. 1234 39,8. É o mais próximo que podemos chegar. E você condensa. Basta ajustar este texto para caber em nossos livros assim por causa do texto, nós vamos deixá-lo como ele é porque esta frase vai para o fim. E fizemos assim em todos os tamanhos, se você notou. Então vamos tentar colocar isso. Ele se encaixa. Então você vai deixá-lo lá e finalmente adequar-se a isso até aqui. Agora que isso está concluído, tudo o que resta é mover esses 80 pickles para baixo, então mude 1234567 pés. Agora, porque estamos nos tablets de tamanho pequeno, quero fazer algumas mudanças. Então vamos primeiro lidar com o texto. Vou posicioná-lo no centro, assim, vou dividir isto em duas linhas como esta. Vou usar o meu divisor e o meu texto movido em 20 para baixo. E porque este texto não é um texto de área, vamos lidar com ele Agora eu vou posicioná-lo para aqui. Vou posicionar isto aqui. Então eu vou estender para baixo e porque eu não posso vê-lo, eu vou esconder essas informações de preços, e eu vou lidar com isso agora. Então este pacote e para atender às suas necessidades vai para a garrafa. Vamos nos certificar rapidamente de que está no final. - É. E agora vamos lidar com nossos preços. Então, como eles disseram, porque estamos em um pequeno tamanho de tablet, eu vou estendê-los para caber oito colunas em sagacidade. Então, como posso fazer isso? Eu posso simplesmente selecionar todos os três. Mova para baixo 40 pixels, então mude 1234 Verifique se isso está à esquerda. Então, mais uma vez 1234 e eu vou mover um profissional e elite para baixo, Então posicioná-los aqui, certifique-se de que eles estão no centro assim e, em seguida, simplesmente movê-los para aqui. E então eu vou selecionar todos os três e simplesmente estendê-los para ouvir se não funcionar, então você tem que fazê-lo um por um. Layout quebrou aqui por alguma razão. Então deixe-me ver o que aconteceu. Voltarei algumas vezes. Não sei porquê, porque estes dois parecem como deveriam. Bem, veja, nós temos esse erro aqui também. Mas para corrigi-lo, basta saltar para dentro e eu vou selecionar tudo em vez de fora do nosso fundo. Certifique-se de que eles estão no centro e simplesmente alinhados com o centro fora de nossos livros e finalmente comprar pacote estavam indo dedo do pé para estar no centro. E como nossos botões são diferentes, vamos usar esse fundo. Então, controle. Veja, eu vou pular bem aqui. Excluir hit Controle V e eu vou simplesmente movê-lo aqui no centro como assim Não realmente sei por que isso aconteceu, mas como você pode ver de vez em quando você está indo para notar alguns desses problemas. Vamos verificar rapidamente. Como você pode ver aqui, funciona bem. Aqui. Funciona bem. Então, não vamos saltar rapidamente. Conserte aqui também. Então o que eu vou fazer é selecionar tudo, ter certeza de que está no centro assim ter certeza que está no centro assim. Se você não pode forçá-lo a estar no centro, você pode selecionar todos eles todos o seu comando de controle. Clique aqui e, em seguida, simplesmente clique aqui. Em seguida, lá foi o dedo do pé alinhar perfeitamente no centro. Então, para os botões, vamos excluir rapidamente este. Eu vou simplesmente usar este aqui, então controle C Controle V. Eu vou posicioná-lo bem aqui. Então eu vou ter certeza que está no centro assim e depois. Uma vez que você tenha feito isso, vamos agora adaptá-los para serem responsivos. Então, vamos selecionar isso. Selecione isso, certifique-se de que eles estão na Central, então posicione lá, selecione todos os três e, em seguida, vamos estendê-los. Como você pode ver, eles estão se sentindo em boa leitura, interrompendo qualquer fora de nossos botões. Qualquer fora do layout, você pode ver tudo se encaixa como ele deve ter certeza de que eles são 40. Então 1234 e uma última coisa que eu quero verificar é isso. Botões vão ser diferentes de qualquer maneira, então vamos deixá-los assim, porque o ponto de toque é muito bom de qualquer maneira. Então vamos nos certificar de que temos espaçamento suficiente entre eles. Então 1234 e você vai lidar com a elite agora. Também mudar 1234 terminou Basicamente ele. Então agora vamos estender isso rapidamente. Vou esconder depoimentos, bloco promocional e rodapé para que tenhamos algum trabalho do dedo do pé espaço com alguma posição do dedo do pé. Isto até aqui, que como esta mudança 1234 eu vou selecionar este. Traga-o de volta, mova isso para 40 assim e então eu vou simplesmente adaptar nosso passado e adaptar alguns desses elementos. Então vamos entrar em formas indo para a mesquita e adotar a mesquita para ir todo o caminho até aqui assim e ter certeza que está no centro assim. Então você pode mover alguns desses elementos. Então, o que usou estes? Vamos deixá-los onde estão. Vou posicionar este aqui. Vou posicionar este um pouco para baixo. Então algo assim, por exemplo, talvez eu possa até aumentar o tamanho dele. E isso é basicamente para essa seção. Então vamos agora passar para depoimentos, bloqueio promocional e para ela. E antes disso, eu vou clicar duas vezes no meu quadro e simplesmente estendido até o fim. Assim, por exemplo, porque não precisamos diminuir a dívida. Então depoimentos que você pode segurar turno, selecionar tudo é simplesmente movê-lo para aqui. Shift 1234 E agora vamos saltar para dentro e podemos adaptar nossos depoimentos. Então eu estou indo para a posição A daqui para estar no centro. Certifique-se de que esta flecha está aqui e apenas certifique-se de que eu traga esta flecha em dois aqui . Quando você terminar com isso, você pode simplesmente entrar na promoção. Tenha certeza que está em 80, então eu tenho que mover tudo porque eu mudei Depoimentos. 40. Então mude 1234 Em seguida, certifique-se de que este está em 80 como é, e então o que você tem que fazer é simplesmente texto adaptado dentro, então vamos rapidamente movê-lo para o centro assim. Em seguida, basta adaptar este texto, mas a jornada abaixo. Selecione isto. Certifique-se de que está em 20 e simplesmente adapte este texto coloca um abaixo. Vamos lidar com o botão, então vou posicioná-lo para estar aqui. Certifique-se de que tem três chamadas de largura, então certifique-se de que está no centro e para os pixels baixo. Então mude 1234 E agora vamos posicionar tudo assim, certifique-se de que tudo está no centro como está e apenas certifique-se de que é tudo. É o centro como esta saudação horizontal e verticalmente. Então, vamos mudar o preço. BG. Vamos mover as formas. Então eu vou reduzir um pouco o tamanho do meu círculo. Vou reduzir o tamanho deste retângulo. Finalmente, vou mudar isto daqui a pouco. Vou ajustar a minha mesquita. Como você pode ver, tudo se move muito rapidamente assim que você começa a obter esses elementos. Assim que você começar a mover para a esquerda, direita, então oito pixels bom para alinhá-lo assim. E finalmente, vamos apenas tudo lá dentro. Então eu vou posicionar meu texto aqui. Vou remover a postagem do bloco, também. Vou estender minha imagem de postagem de bloco para ouvir que você pode clicar duas vezes dentro e você transmitir reposicionar esta imagem para caber em seguida. Isso vai continuar o mesmo, mas isso vai mudar um pouco, porque agora temos muito mais espaço para trabalhar. Então vamos mantê-lo como para que ele possa mover o avatar para ouvir cerca de 20 pixels. E vamos lidar com o nosso botão. Então, como dissemos, precisamos torná-lo três colunas de largura, então sua posição aqui e aqui. Vou selecionar o texto, certificar-me de que está no centro. Certifica-te de que é aos 40. Como o Self Man. Certifique-se de que está no centro fora do nosso porto assim. Finalmente, para enfraquecer ainda mais, fazer exatamente dizer as coisas para simplesmente movê-lo no centro. Certifique-se de que está em 80 como esse e simplesmente traga o nosso porto um pouco para que possamos terminá-lo por aqui. Quando ele pisa, você sabe que está no centro, então eu vou trazer isso um pouco mais perto, e isso é basicamente para o tamanho pequeno do tablet. Então vamos analisar rapidamente o que fizemos. Vou esconder rapidamente as minhas notas. Então nós movemos este texto e eu não vejo o espaçamento aqui como deveria. Então, tiro 12 Eu vou ter que basicamente mover tudo. Então 1234 1234 e 1234 Então eu vou mover o herói BJ aqui ilustração e, em seguida, não fazer tudo, não trabalhar em tudo. Então é rapidamente apenas mover a mesquita para baixo um pouco como então eu vou te mostrar um pequeno truque. Então eu fui até a extensão da nossa prancha está um pouco para baixo? Então, porque temos trabalhado no herói, vamos rapidamente selecionar tudo, exceto o herói. Você pode subir um pouco e, em seguida, simplesmente ajustado para ser 80 burros assim e você pode ver no lado esquerdo bem aqui. Se eu me mover, você pode ver quantos pixels existem no meio. E uma vez que você tenha feito isso, você simplesmente clique duas vezes aqui e traga seu porto até que ele se encontre no centro assim. Você também pode significar muito mais perto se quiser, todo o caminho até um pixel até que ele se encaixe e é basicamente para um pequeno tamanho de tablet. Então, mais uma vez, vamos cobrir rapidamente o que fizemos. Nós ajustamos nosso logotipo A. Ajustamos as posições de tudo. E foi bom eu ter ligado isso porque isso não estava alinhado como deveria. Então, como eu disse, incluímos tudo dentro, como fizemos para tablets de dispositivos médios. Agora temos este texto que envolve um pouco mais baixo. Temos a ilustração, que é mais uma vez um pouco menor. Aqui temos ilustração menor, logotipos menores. Temos o texto que envolve um pouco diferente. Nós temos Destexhe aqui nós temos esses dois, mas eles agora se estendem um pouco para baixo. Aqui temos esse olhar diferente do que antes, e eu não gosto de como isso parece. Talvez eu possa saber em algum lugar por aqui. É um justo para que eles não estão no mesmo espaço e para o preço que temos agora nessas caixas, que se estendem todo o caminho para ouvir seu sentimento todo o espaço porque há um espaço que preenchemos mais uma vez. Não gosto do que isto parece. Talvez você possa trazê-lo aqui. E essa é a beleza deste processo, porque você pode simplesmente correr e ver o que você não gosta. E os depoimentos ajustados basicamente não mudaram muito. Isso não mudou tanto assim. Nós só estendemos para ser um pouco mais alto dentro do texto. Mas para o bloco, agora temos apenas uma postagem de bloco, e você pode fazer isso ao contrário. Você pode incluir heros, por exemplo, depoimentos de liquidez. Você pode incluir a paginação aqui abaixo. Você pode incluir uma postagem em cima de outra, se quiser. Mas por uma questão de espaço, porque Blawg não é realmente tão essencial para este site em particular porque ele está vendendo serviços de design. Então pertencer é apenas uma das maneiras que eles estão ganhando dinheiro, mas não sua maneira principal. É por isso que mudamos para baixo e só foram incluídos um poste de bloco. Então, se eles querem ver todos os cartazes que dizem, aqui está a página do bloco, eles podem simplesmente clicar, ver tudo ou bater aqui para ir para a página de postagem do bloco. Finalmente, para o rodapé nada realmente mudou. É mais estreito do que antes. Então é basicamente isso para este tamanho. E no próximo e último vídeo, vamos discutir o tamanho do telefone porque ele vai mudar. Mais uma vez. Nós vamos passar de quatro colunas no layout dedos quatro colunas para o telefone, e nós estamos indo dedos adaptados para caber lá também, então eu vou vê-lo lá. 15. Crie design responsivo 4: Finalmente, vamos começar com dispositivos extra pequenos telefones IE. Mas antes disso, eu decidi que em alguns lugares eu quero incluir três chamadas botões brancos. Então, por exemplo, aqui eu não vou fazer isso porque vai mexer muito com o layout da nossa navegação. Também não vou fazer isso aqui, porque temos dois botões um ao lado do outro, mas vou fazê-lo aqui. Então deixe-me adaptá-lo rapidamente, e você pode usar redimensionar dedo responsivo incluí-lo assim. E agora você pode ver que é bastante grande e facilmente legível porque estes também são . Finalmente, vou incluir um aqui também, então vou estendê-lo até aqui. Vou ter certeza que está no centro, e finalmente, vou incluir aqui também, só porque temos espaço suficiente aqui. Toe incluído para ser três colunas branco. Então, agora que fizemos isso, vamos passar rapidamente para dispositivos extra pequenos. Eu vou selecionar este controle de um garoto profundo, e para este, nós vamos fazer este trabalho de arte para ser bastante longo para que eu possa muito bem estender isso desde o começo. Então eu vou estender todo o caminho para baixo e eu posso saltar à vista e mover tudo isso para baixo. Mas deixe-me mostrar rapidamente essas colunas. Então, por exemplo, aqui temos quatro colunas. Então vamos primeiro mudar de dívida. Então quatro colunas e em que eu decidi ser 375 porque é menor do que 576 Duplo clique. Rebentando isso aqui. Então eu vou mudar seu nome. Então vamos mudar a inteligência para 375 iguais. Então, e finalmente, para as colunas, vamos ver o que temos aqui. Então temos 30 61 20. Então vamos copiar isso. Então temos 30 61 finalmente temos 20 aqui na parte inferior. Então, mais uma vez, vamos ter que adaptá-lo. Então, 30 61 20. Vamos verificar isso. 30 61 20. Leva um pouco de tempo para que os ovos Matt chutem, mas uma vez que faz o que você pode ver, tudo funciona como deveria. Então, vamos agora ajustar rapidamente todos esses elementos diferentes. Então, basicamente, vai trabalhar exatamente o mesmo que para todos esses fora. Mas para este, eu vou fazer o logotipo um pouco menor. Então, por exemplo, em algum lugar por aqui eu vou mover o botão e o ícone do menu para aqui, e eu vou fazer o fundo um pouco menor. Então eu vou, por exemplo, fazer com que seja duas colunas brancas assim e vou ter certeza de que, por exemplo, é um pixel de 20, então não exatamente no centro, porque o centro será Bem aqui. Mas eu vou movê-lo. 20 pixels, por exemplo, à esquerda do nosso ícone de menu. Então é movido em R B G bem aqui. Vamos incluir a nossa lista. Vou mover tudo para dentro ou cair para a direita. Então, basicamente, vamos fazer exatamente a mesma coisa que fizemos. Então vamos selecionar todos os itens do menu, movê-los aqui, movê-los aqui, selecionar as linhas divisórias e o plano de fundo. Vou mover todos os invertidos para aqui. Tudo parece bem. Vou escondê-lo, e depois vamos lidar com os elementos abaixo. Então, para isso, eu vou selecionar o herói. BG. Mova-o em palavras assim e eu vou escolher a minha forma. Então vamos usar a mesquita. Vou trazer a mesquita daqui a pouco, e vamos lidar com eles um pouco mais tarde. Então, por enquanto, vamos esconder todas essas formas. Então eles não estão distraindo, e eu vou lidar com esses elementos ou posicioná-los no centro assim. E depois o quê? Eu vou fazer isso. Basta mover o botão demo aqui e certifique-se de que são duas colunas brancas porque agora temos quatro. Certifique-se de que são duas chamadas brancas também. Como você pode ver, tudo se encaixa muito bem, e o que eu vou fazer é simplesmente selecionar isso. E finalmente, vou mudar seu tamanho porque é muito grande para agora, e vou mudar o tamanho para isso também. Então, se saltarmos de volta para aqui, você pode simplesmente selecioná-lo. E vamos usar algo como tamanho aberto 36 e vamos selecionar isso. Esta é a Carla, 80 anos. Certifique-se de que é branco. É, e foi simplesmente, em seguida, atacou este texto para caber dedo do pé aqui como você pode ver tudo parece bem, mas eu vou mover isso de sites abs para branding. Temos você coberto, então tudo está em quatro linhas em vez de cinco. É por isso que ter ativos e estilos de personagem, especialmente, é realmente útil porque vai manter as coisas com aparência agradável e suave. Tudo vai parecer como deveria. Mas quando você está se movendo para a visualização móvel, especialmente aqui, tudo tem que ser um pouco menor porque o dispositivo é menor no geral. Então você tem que pensar sobre todas essas coisas porque quando o usuário olha para, por exemplo, este texto neste dispositivo, você pode ver quão grande esta tela é comparada a isso. Tudo vai ser coberto. Então basicamente tudo o que eles foram ver é o texto sem os botões, sem ilustração. Nós não queremos isso. Queremos que vejam tudo como está aqui. É por isso que estamos reduzindo o tamanho do texto neste caso. Então não vamos seguir em frente. Vou mudar isto para cá, por isso, turno 12, vou mudar isto para cá. Então mude 1234 Certifique-se de que temos que reduzir o tamanho deste dedo da caixa aqui? Sim, e eu estou indo para o pé. Use meus botões. Certifique-se de que eles estão 40 pixels abaixo assim e certifique-se de que tudo está 40 peças abaixo do topo. Então, aqui mesmo. 1234 E agora vamos brincar com a nossa ilustração e para a ilustração. Vamos mover tudo um pouco mais para perto, e eu vou, por exemplo, por exemplo, reposicionar essa parte da ilustração um pouco mais assim. E então eu vou reduzir o tamanho fora da ilustração como, então eu vou ter certeza que é 40 como ele é. Então mude 1234 E então eu vou trazer meu herói BG assim. Vou mover a ilustração mais uma vez até chegar aos 40 e isso é basicamente tudo para isso. Não vamos lidar com nossas formas porque mudamos como tudo parece basicamente, então eu vou me mover no meu círculo. Vou torná-lo um pouco menor. Talvez reposicioná-lo bem aqui. Eu vou lidar com este grande quadrado assim eu vou lidar com o quadrado para vamos encontrá-lo rapidamente. É aqui em baixo. Então agora temos que ajustar nossa mesquita. Vamos movê-lo para aqui. E como fizemos isso, vamos lidar rapidamente com esse quadrado porque não há necessidade de ser tão grande assim você pode segurar sua tecla shift. Você pode posicioná-lo onde quiser. Você pode até girá-lo. Mas eu não vou fazer isso. Parece simplesmente posicioná-lo aqui. Torne as coisas agradáveis e simples. Posicione isso aqui. Talvez eu possa trazer este quadrado um pouco para fora e talvez eu possa mover o círculo para dentro, assim. Então, se eu esconder meu grande, você pode ver como tudo parece ser como deveria. Tudo é colocado onde deveria ir, mas agora parece muito mais coerente nesta pequena tela. Agora, para esses logotipos, eu não vou ter que ser quatro em uma fileira. Em vez disso, vou ter que ser dois seguidos. Então eu vou usar o logotipo três para ter certeza de que eles estão no centro logotipo local um para se certificar de que eles estão no centro também, assim. E você pode até brincar com eles e, por exemplo, posicionar esse logotipo. Então, um local, você pode fazê-lo estar no centro fora deste, e você pode, por exemplo, combinar esses dois para estar no centro. Em seguida, você pode selecionar tudo e apenas certifique-se de que está no centro como agora para o destino. Do herói para baixo, você pode usar 1234 ou talvez 80. Vamos ver o que parece melhor. Então ela comeu 12345678 Eu acho que é demais porque este é apenas um espaço vazio agora, então talvez 40. Isso parece muito melhor. Então agora vamos lidar com a nossa ilustração. Você pode alinhar tudo aqui à esquerda, certificar-se de que está 40 pixels bem aqui. Você pode usar a ilustração e simplesmente reduzi-la até que ela se encaixe dentro de nossa grade. Assim, então vamos ter certeza de que tudo está onde deveria estar. Então mude 1234 e não vamos lidar com o tamanho deste imposto porque é um 36. Este texto é aquele 18. Então basicamente tudo é como este texto é, então não vamos mais brincar com ele. Mas o que vamos fazer é simplesmente lidar com a fronteira fora destas palavras. Então basicamente assim nós vamos manter a indústria baixa porque ele disse que parece muito mais agradável quando você tem que ser duas linhas de texto em vez de apenas uma. Então vamos adaptar rapidamente este texto. Vou estender isso para baixo. Como você pode ver agora funciona muito melhor. Vamos lidar com o botão e posição em 40. Vamos movê-lo para cima para 34 e eu não vou simplesmente reduzir seu tamanho para ser duas colunas brancas que está olhando bonito. Vamos descer e continuar. Reposicionar o dedo do pé é estar no centro, ter certeza que é 40 Então 1234 e nós vamos lidar com esses dois textos agora. Então, para este, vamos ajustá-lo. Então pegue seus projetos. Eu vou mover isso para baixo no caminho rápido. Vai lá para fora. Então, assim, bem, nós vamos ter que estar aqui. Cuide-se. O projeto vai ser feito aqui. Finalmente, vamos mover o divisor e um texto para baixo 20 pixels como então eu vou mover este texto para aqui. Mova-o para aqui. É por isso que o criamos como um texto de área porque, como você pode ver nesses tamanhos menores, é muito mais fácil trabalhar com ele dessa maneira. Então o dedo do pé tem que ser texto pontual. Agora, para estes, eles vão ser a nossa grande mudança porque nós vamos basicamente fazê-los ser um cada vez. Então mude 1234 E agora eu vou mover todos esses elementos para baixo porque eu não quero que eles me incomodem assim. E agora vamos nos concentrar nesses. Então vamos saltar recursos insider e eu vou selecionar estes três movido ele aqui. Certifique-se de que eles estão alinhados assim, e eu vou mover soluções personalizadas para baixo porque essa é a nossa última. E vamos saber, simplesmente trabalhar em nosso texto. Primeiro, certifique-se de que todos eles estão alinhados assim. Certifique-se de que eles se alinham com a borda esquerda fora de nossa grade, e então eu vou pular dentro e texto de justiça assim Então agora está em três linhas de texto em vez de fora para, então ele torna muito mais compacto para os usuários lerem, então certifique-se de que você está em 40. Então 1234 vamos fazer o mesmo para o texto Dis. Agora está em duas linhas, então ajuste-o de acordo. Vamos lidar com este. Vamos ver se vai encaixar na posição. É até mesmo todo o controle para clicar diretamente em seu texto. Você escolheu foi. Vamos colá-lo para estar aqui como está em todos os nossos outros exemplos. Certifique-se de que está em 40 se ele não quer ser 1234 Ele foi ver 39,8 mais uma vez. Isso é porque fora do nosso ícone e são iguais. Fomos para um lugar bem aqui só para ter certeza de que está cortada onde deveria bem aqui . E então vamos passar para o preço, então eu vou mover todos esses elementos de volta para cima. É por isso que é bom ter esses grupos porque eles são realmente úteis. Então mude 1234 Certifique-se de que está em 40 e o que você vai fazer agora é pular dentro do nosso texto , posicioná-lo assim e preços acessíveis. Vamos ver, vamos manter tudo uma espinha é apenas ter certeza de que isso está no centro, assim é. Esta caixa cabe lá fora, mas uma vez que entra no código, não haverá caixa. Então vai caber bem dentro, então não se preocupe muito com isso. Nós vamos posicionar isso em, tipo, tipo, tão estendido não até que ele se encaixe assim e então nós vamos ter esses três movê-los para ouvir, certeza que eles estão em 40. Então 1234 e nós vamos selecionar todos eles são redimensionar responsivo vai fazer sua magia. Como você pode ver, tudo parece bom, limpo e como deveria, não mudou nenhuma das proporções. A única coisa que nos resta fazer é simplesmente estender o preço Bijie para baixo. Então 1234 e vamos selecionar a beleza de preços. Certifique-se de que está alinhado. Mova isso para cima até que encaixe em 40 como este. E então vamos lidar com o preço BG. Então, como você pode ver ao longo deste projeto, este fundo com todas essas formas está nos levando a maior parte do tempo para que você possa lidar com suas duas maneiras você pode lidar com isso como estamos agora. Ou você pode ter que ser imagem que você pode criar separadamente. Ou você pode incluí-lo, Toby. Muito uma vez ou você pode criar ilustrações separadas para que você não precise redimensionar cada vez. Cabe a você e ao seu fluxo de trabalho. No entanto, você gosta de trabalhar no dedo do pé e onde você acha que se encaixa melhor com o projeto em mãos. Portanto, há muitas maneiras de lidar com essas questões e estratégias. Então, como você pensa o que quer que você pense, ele se encaixa para o projeto, é isso que você vai fazer. Então não terminamos basicamente com a nossa mesquita. Então agora podemos seguir em frente abaixo, então, mais uma vez, selecione tudo e certifique-se de que eles estão em 40. Então, algo assim aqui, vou saltar para os meus depoimentos. Vou certificar-me de que a minha seta para a esquerda está alinhada com as minhas notas, minha seta para a direita, assim como esta. E eu vou usar meu testemunho, movê-lo para o centro assim e porque agora removeu isso e não pode mais conter isso . O que eu vou fazer na verdade é mover essas setas para baixo, então eu vou selecioná-las. Mudou-se para 41 234 e eu vou posicioná-los para estar no centro e dedos on-line com grão . Então eu vou selecionar minha seta para a esquerda. Posicione-o aqui, mova o meu terror certo. Posicione-o aqui. Como você pode ver, ainda há espaço entre as linhas da grade, então dentro da sarjeta para que os usuários possam usar sua batida e ponto de batida vai ser bom e fácil acesso do dedo do pé, porque eles ainda têm espaço suficiente à esquerda, direita e no centro entre estes dois ícones. Se você estiver trabalhando com dispositivos menores, por exemplo, formulários muito menores do que esses telefones mais novos, você pode até separá-los ainda mais se isso é algo que você quer. Mas você tem que falar com os desenvolvedores para ver o que eles pensam quando você está testando nesses dispositivos. Em condições ideais, você será capaz de usar dispositivos toe test imediatamente. Mas se você não tem essa opção nesse luxo, então você pode simplesmente ler o que ele quer e o que você precisa para que você possa encaixar tudo dentro. Vamos agora mover este depoimento para baixo 40 e podemos fazer o mesmo com a nossa flecha. Então 1234 e podemos selecionar essas setas, selecioná-lo assim. 1234 Porque não temos nenhuma cor de fundo. Vamos nos certificar de que isso é aos 40. Então uma vez antes e agora eu vou selecionar estes e eles, entanto, ter certeza que eles estão em 40 também. E não vamos lidar com isso, então vou trazê-lo bem. Vou usar o meu botão de demonstração. Certifique-se de que são duas chamadas brancas como tamanho tão responsável. Isso fede e certifique-se de que estes dois estão no centro assim? Não, temos de adaptar isto. Então vamos saltar para dentro. Viagens criativas foram para baixo, e qual de nós vai para baixo? Vamos usar o divisor. Vamos ter certeza que são 20. Certifique-se de que Button está em 40, então eu fui antes. Posicione isso no centro e, vamos saber, selecione tudo e mova-o para o centro. Como você pode ver, 64 63. Portanto, ele tem muito espaço entre, então você não precisa estender esta seção se você não quiser. Se você fizer um para que você possa estender para ganhar ainda mais espaço. Mas se não for necessário que eu não aconselharia para que você possa estender todo o caminho para baixo. Porque mesmo que esta seção seja importante porque contém chamada à ação inferior, não é tão importante se ela bloqueia a exibição para o usuário, então o usuário tem que rolar todo o caminho para baixo e perder muito tempo. Eles têm que ser capazes de dizer o que é imediatamente, você possa lidar com isso dessa forma se você quiser. Então vamos chamar essa seção feita. Eu vou fechar essas pastas assim, e agora é rapidamente passar para Blawg indo para a posição aqui, certificar-se que está em 40. Então 1234 e, finalmente, vamos deixar o texto no centro assim. Vamos posicionar nosso quarteirão abaixo. Vamos mover o poste e o fundo para baixo. Então 1234 eu vou saltar para dentro, ajustar minha imagem para caber bem aqui. Vou clicar neste texto e ajustado de acordo, assim. E finalmente, eu vou mover meu avatar para injusto, então, como você vê, é bem simples. Assim que começares, vou certificar-me de que o meu botão é o dedo do pé fica branco. Igual a todos os outros botões. Certifica-te de que é aos 40 como este. E finalmente, não vamos negociar com Rodapé. Então, mais uma vez, eu estou indo para o pé. Posicione-o no centro, certifique-se de que é um 40. Então 1234 E quando eu vou fazer porque, como você pode ver, nós não temos mais espaço, eu vou usar esses itens. Então Blawg e entre em contato conosco. Eu vou me mover abaixo talvez 20 pixels. Ou vamos usar 40 porque usamos 40 em todos os lugares. Agora eu vou dar o pé. Posicione isso no centro e selecione futuros de preços e serviços e mova aqueles no centro assim, como se estivesse aqui. Ou você pode até mesmo agrupá-los e simplesmente selecionar rodapé BG. Certifique-se de que eles estão no centro. Você pode agrupar. Estes dois querem vendê-lo para o BG. Certifique-se de que eles estão no centro, e esse é o bom peso fora de fazer isso. Você pode selecionar o logotipo. Certifica-te que isto está no centro e eu vou deixar isto online. Em seguida, você pode selecionar todos estes. Certifique-se de que eles estão no centro. Então, uma vez que tudo é agradável e conciso, você pode então trazer isso para dentro e estender isso para baixo porque nós queremos ter muito mais espaço aqui. Então não vamos fazer isso porque temos 1234 Temos 40 pixels entre isso e logotipo. Vamos fazer o mesmo com todos esses outros. Nós temos 40 aqui também, então eu vou selecionar estes para movê-los para baixo até que eles estão em 40. Como podem ver, temos 40 por todo o lado. Mova isto para baixo para ser um 40 assim. Então eu vou selecionar tudo. Certifique-se de que tudo é 40. Então 1234 e finalmente moveu estes quarenta para baixo. Bem, então 1234 Eu vou trazer isso para dentro até que ele se encontre com a borda inferior. Brand simplesmente chamou minha tecla Shift até que ela se alinhe. Então agora tudo está alinhado e olhando corretamente. Uma coisa violenta a fazer é simplesmente trazer isso à tona porque não precisamos que ele ligue até o fim. Mas é bom fazer isso para que você possa estender seu porto até que ele atenda às suas necessidades, e então você pode simplesmente trazê-lo de volta. Então é basicamente isso. Criamos esta página para ser responsivo. Começamos com grande que pára do que pequeno que pára talento médio, caixas pequenas e, finalmente, telefones. Se um salto bem aqui, exclua o meu grande para que você possa ver tudo. Como você pode ver, layout se adapta bem a esses diferentes tamanhos de tela. Tudo funciona como deveria. E agora cabe a você entregar esses desenvolvedores de ativos para que eles possam desenvolver este site , e eles contestá-lo para ver se tudo funciona corretamente. Isso é o que vamos fazer na próxima seção do discurso. Vamos ir tamanho por tamanho, e vamos extrair todos esses ativos. Então você vai enviar todos esses ativos para desenvolvedores e desenvolvedores vão testá-los e ver se tudo funciona corretamente e como deveria antes que ele fique online para estar ao vivo para que as pessoas vejam em todo o mundo. Então eu vou te ver na próxima seção do curso 16. Estrutura de pasta: agora que você terminou de projetar e terminou a criação de seus designs responsivos em X'd. Agora chega a hora de exportar seus ativos para desenvolvedores, e como designer você tem que exportar esses ativos para que os desenvolvedores entendam onde tudo vai em tamanhos diferentes e onde tudo está posicionado para exportação seus ativos em X'd. É extremamente simples. Mas antes de começar a exportar em diferentes ativos para são tamanhos diferentes, você tem que criar estrutura de pasta reconhecível e lógica. Então deixe-me mostrar rapidamente como fazer isso. Aqui eu tenho uma agência de design de estúdio, que é apenas uma pasta vazia, e dentro desta pasta vazia, vamos criar pastas diferentes para tamanhos diferentes. Então, se um salto de volta para os ovos D e zoom em um pouco, você pode clicar duas vezes aqui. Aperte o controle C para copiar o nome fora desta nossa porta, e você pode saltar para a sua pasta clique direito e criar Fuller e simplesmente baseado o nome fora dessa pasta dentro. É por isso que os desenvolvedores serão capazes de entender rapidamente se eles abrem esta profanação de ovos, que são porta. Você está tentando exportar e para o qual nosso porto esses ativos são atribuídos para que você possa seguir em frente e fazer isso para todos esses outros nossos portos para que eu possa controlar, ver, saltar para trás. Eu vou criar um novo mais completo, e vai ser muito mais fácil para eles entenderem quais existem porque eles têm essas múltiplas imagens de vários tamanhos para lidar. Então é muito mais fácil para eles entenderem se você já está preparado. Tudo para eles e exportar do X, disse De Aza, é extremamente simples e fácil de fazer, e vamos chegar a isso no próximo vídeo. Mas para este vídeo, eu só quero mostrar como você pode preparar sua estrutura de arquivos. Então aqui está nossa estrutura básica de arquivos, e dentro dela, vamos colocar todos esses ativos diferentes, que vão mostrar como você pode exportá-los facilmente no próximo vídeo. E vamos falar sobre diferentes formatos de arquivo e em que formatos de arquivo você vai exportar. Quais arquivos porque é extremamente importante entender esses formatos de arquivo, especialmente quando você está exportando seus ativos para desenvolvedores. Então vamos cobrir isso no próximo vídeo, mas no final, este vídeo. Eu só quero te dizer que fora de todas essas pastas você pode salvar esses ovos principais contaminar. Então, se o desenvolvedor tem vários projetos em que eles estão trabalhando ao mesmo tempo, eles podem rapidamente saltar para aquele mais completo abrir aquele X profanar. Eles podem ver isso. Ok, este é o projeto e eles podem simplesmente pular dentro de cada uma dessas pastas diferentes que você acabou de criar e, em seguida, pegar os ativos dessas pastas. Mas você também pode fazer é criar um arquivo leia-me pdf ou lê-me arquivo de texto. Realmente não importa onde você pode simplesmente listar onde você tem seus telefones, ou você pode enviá-los telefones diretamente, ainda melhor para que eles possam trabalhar com os mesmos telefones dentro do código. Além disso, se ele tirou imagens de diferentes fontes on-line, por exemplo, nós usamos no Splash para este curso específico. Por exemplo, essas três imagens Você pode apontá-los diretamente para os links para essas três imagens, ou você pode simplesmente enviar-lhes um link para o site no Splash onde eles podem obter essas imagens e baixá-los no mais alto possível resolução. Então é por isso que a estrutura de pastas realmente importa, especialmente se você tiver ícones diferentes que você estava usando. Por exemplo, você tem diferentes coleções fora de ícones, então você vai colocá-los todos aqui. Se você tem vários recursos é que você deseja enviar no topo fora todas essas pastas diferentes , então eu realmente recomendo que você crie uma pasta separada, por exemplo, ativos e, em seguida, dentro dessa pasta, coloque suas imagens, coloque seus ícones, coloque ilustrações diferentes. Seja qual for o seu projeto, então um realmente recomendado que você crie essa pasta e coloque todos esses diferentes ativos dentro dessa pasta, como eles disseram, vai ser muito mais fácil para os desenvolvedores entender onde tudo vai, onde tudo está localizado. E eles não vão incomodá-lo com várias perguntas. Depois de terminar o projeto para este projeto, onde tudo está localizado porque você vai preparar tudo em avançado e enviá-los todos fora desses diferentes arquivos 17. Exportando ativos: Sei que criamos nossa estrutura de pastas. Chega a hora de exportar nossos arquivos, e se eu ampliar um pouco mais perto, clique em qualquer um destes são placas e pressione o controle E ou comando em um Mac. Você pode ver que esse estilo de aparece agora. Aqui você pode selecionar o formato que você pode escolher entre PNG, SVG, PDF e J Pick, e eles diferem bastante. Então PNG é basicamente uma imagem sem fundo. Então, por exemplo, se você está cortando algumas imagens de pessoas que dizem ou fora do objeto e incluindo-as em seus projetos, é aí que P e G são úteis. Em seguida, o SPG é um formato de arquivo vetorial, e é ótimo porque contém frio dentro. E também é muito útil para desenvolvedores porque eles podem pegar esse código, eles podem incluí-lo em seu próprio casaco. Eles podem adaptar, por exemplo, os tamanhos de algumas ilustrações de ícones onde este formato de arquivo SVG é usado mais, e eles podem facilmente não ser integrados em aspas. Você pode ver para cada um deles há configurações diferentes, e nós vamos cobrir isso em um segundo. Em seguida, é um pdf, que é um arquivo PDF básico. E é ótimo. Por exemplo, se você estiver exportando resumos de design criados dentro, será fácil. Ou se você tiver alguns outros documentos de texto com, por exemplo, algumas imagens. Digamos que mais quadros de humor ou algo assim, e você pode exportar isso como um PDF. E finalmente temos o Jay Peak, que é basicamente apenas uma imagem normal. Agora vamos percorrer rapidamente algumas dessas opções. Então, para P e G, você pode escolher o design, e ele vai para a exportação. Como é, você pode clicar na Web quando você pode ver que ele exporta ativos selecionados como um X e dois x, que significa em tamanho original, que é um X e dois X, que é duplicado seu site original. Exceto que temos IOS. Como você pode ver, ele está exportando-os em um x dois x e três x, que é ótimo se você estiver projetando, por exemplo, telefone menor e tamanho de iPhone menor. Digamos que iPhone oito e você quer exportar dedo do pé. Encontrei o 1011 ou o Max ou algo assim. É aí que esses tamanhos vêm a calhar, e finalmente temos Android, que é novamente diferente de todos eles porque exporta essas medidas, que é M. D P I. E você pode ver em 75% 100 % e vai todo o caminho até 400%. E ele tem todas essas diferentes abreviaturas toe percentual que ele é exportado e tudo isso basicamente significa o mesmo como para Iris, mas ele exporta em um x dois x três x para Android. Porque há muitos outros tamanhos fora das telas, você pode ver todas essas percentagens diferentes para que você possa escolhê-los e você pode ver que é projetado, por exemplo, por exemplo, em 100% este aplicativo Android, e, em seguida, você pode exportá-lo em todos esses outros tamanhos. Então, basicamente, isso é para formatos de arquivo para o SPG. Eu recomendo que você não mude nada a menos que você veja com seus desenvolvedores se eles querem algo personalizado a partir destes, mas geralmente eles vão personalizar isso dentro fora da quadra. Então nós vamos usar SVG, e vamos usar o design PNG porque eu não vou usar web porque isto é, se você não tem um design responsivo como nós fazemos aqui, isso é basicamente vai exportar isso em tamanho original e duplo o tamanho original. Então eu não recomendo porque nós ainda temos todos esses tamanhos diferentes que nós projetamos originalmente. Então, por que escolher isso? Então vamos apenas usar design e para a pasta, eu vou clicar aqui, e eu vou para o Sr. Agência e começar com o maior tamanho e clique em selecionar pasta e eu estou indo toe exportá-lo apenas para sair para lembrar onde eu exportou. E se eu pular dentro dessa pasta, você pode ver que ela foi exportada para todo o projeto. Eu recomendo que você faça isso porque, em seguida, os desenvolvedores podem facilmente olhar sobre esta imagem e ver quaisquer alterações que você fez ou algumas posições, por exemplo, é algo parecido com isso. Claro que você vai enviar-lhes o arquivo original, mas isso é apenas todo-os em seu processo de desenvolvimento. Em seguida, quando se trata de exportar, você tem que selecionar todas essas opções diferentes em todas essas camadas diferentes. Então eu vou selecionar meu painel de camadas aqui e dentro da minha soneca. Eu só quero exportar meu logotipo e meu botão de demonstração, mas em vez de texto fora. Eu vou escondê-lo e eu vou selecionar pastas Então logotipo e demonstração entre e eu vou toe hit controle e suco bong hit exportações em que se seguiu que ele acabou de selecionar e eu estou indo dedo também selecionar meu logotipo que ele iria controlar, comer e exportado é SVG porque eu quero que meu dedo desenvolvedor tem essa opção. Se eles quiserem incluir no frio mais tarde, eles podem fazer isso também. Eu vou rapidamente trazer de volta o texto para o meu botão de demonstração e uma nota lateral rápida porque eu cometi um erro. Eu nomeei todos esses botões BT e você pode nomeá-los assim, então basta clicar duas vezes aqui. Ele controlaria o controle de sucesso V e isto vai ser a demonstração de ouro Bateer. E então você pode simplesmente selecionar essa camada. Ele controlava E e exportava essa camada como um botão. Mas porque, como eu disse, eu cometi o erro. Eu vou esconder todos eles de botões e, em seguida, trazê-los de volta para tê-los no design original Em seguida com exportação. Ah, herói, vou começar com ilustrações. Eu vou selecionar ambos, mas separadamente é que você pode vê-lo controlar e e exportá-los como svg porque mais uma vez, eu quero que meu desenvolvedor toe Tenha essa opção toe exportá-los assim. Em seguida, temos todas essas formas diferentes. Eu vou selecioná-los, Controle de hit, comer e eu vou exportá-los s PNG porque eles são basicamente formas semi transparentes e desenvolvedores serão capazes de incluí-los assim. Em seguida, temos herói BG absorvê-lo controlado que ele exportou como sendo G porque não precisamos exportá-lo como SPG porque é basicamente apenas um fundo colorido. Se você tê-lo como um radiante, você pode falar com seus desenvolvedores Se eles preferirem, você enviar-lhes svg porque então eles podem adaptar o Grady e um pouco dentro de CSS. Mas se eles não querem perdoar, basta enviá-los para estar no arquivo G em vez disso. Em seguida, temos botões. Então, mais uma vez, vou esconder o texto por causa do meu erro anterior. Vou selecionar Dergarabedian e morbidade e bater o controle e exportar o PNG da exportação. E como você pode ver, um bot demo n já existe. Então, porque esse é este botão aqui, eu vou simplesmente selecionar mais entre o controle de calor E e exportação. Isso é P e G Vou esconder tudo isso. Mas antes de o fazer, vou simplesmente trazer a mensagem de volta assim. Basta clicar neste globo ocular que eu poderia Ele vai voltar e em seguida nós temos todos esses ícones diferentes agora, porque estes não são meus clientes. Vou simplesmente escolher controlar e exportar os PNG's. Só para que o desenvolvedor saiba quais são os tamanhos de logotipos que eles vão eventualmente incluir dentro. Quando você está trabalhando em um design, certifique-se toe sempre perguntar ao seu cliente se eles têm clientes originais fora, há para que você possa incluí-los em vez destes Normal eu era. Mas se você não gosta do meu cliente neste caso, então eu vou incluir esses moradores padrão. E, em seguida, os desenvolvedores podem mais tarde mudá-lo porque é simplesmente uma imagem PNG. Então basicamente uma imagem dele, o fundo transparente. Então eles vão incluí-lo assim. A administração mais uma vez bateu o controle e. Eu vou exportar isso como svg hit export e nós temos Demo VT no qual nós não vamos mudar e nós vamos mantê-lo como está. Mas porque se eu não gostar aqui, traga meu layout, você pode ver que está em três colunas brancas, e estas são para a esposa de Khan, então você pode exportá-lo com um nome diferente. Então Demo Bt em três, por exemplo, para três chamada ainda melhor. Como então talvez eu poderia incluir isso como para que os desenvolvedores saibam que é três colunas branco. Eu vou esconder o texto hit controle E exportação que é P e G. Eu então trazer este texto de volta. E agora temos basicamente todos os botões desta página, exceto este em. Vou incluí-lo um pouco mais tarde. Não, deixa-me esconder-me rapidamente. Vá bem, porque não precisamos mais dele. E agora, porque fora de todas essas linhas eu vou selecionar este texto e escolher este divisor para ser divisor. Três chamadas, por exemplo. Assim, seu controle e exportação que é p e G E para esses outros divisores, eu vou simplesmente deixá-los como estão. Então, apenas divisória pequena e você não tem que exportar todos eles. Você pode simplesmente exportar um controle de calor E, S, P e G. E agora vamos passar para ícones. Vou manter minha tecla de controle ou comando e simplesmente selecionar todos os nossos ícones. Controle de calor E. Certifique-se de selecionar SVG hit exportação porque mais uma vez eu considero realmente importante. Toby exportado na mais alta qualidade possível, porque você pode imaginar isso em telas realmente pequenas. Esses ciclos realmente funcionam bem, porque, como você pode ver no zoom total, ele não perde qualidade em tudo porque é um ícone baseado em fatores. Excepto, vamos seguir em frente a isto. E porque temos todos esses elementos dentro de nossa seção de heróis, eu não estou indo toe exportá-los porque às vezes os desenvolvedores querem usar algo como J Query para animar todas essas formas de fundo, e é realmente até eles e o cliente o que eles querem encontrar um produto para olhar como uma vez que ele é chamado e publicado. Mas no nosso caso, eu não vou exportá-los porque, como eles disseram, eles são exatamente as mesmas formas que estes. Você tem duas opções que você pode simplesmente selecionar estas duas. Você pode agrupá-los hit control E e exportar esta imagem inteira como um PNG se você quiser. E se você não fizer isso, você pode simplesmente tenda preços de exportação. BG porque fora das restrições. Então o desenvolvedor sabe o quão longe este texto está do conjunto, por exemplo, quão longe essas caixas dos cirurgiões em para que eles saibam todas essas medidas. Mas, caso contrário, eu não vou exportar todas essas formas diferentes mais uma vez. Porque, como ele disse, já temos isso em nossa pasta para que ele controlasse o preço de exportação Ito PG exportado. Pediu desculpa, PNG. E eu vou selecionar um desses porque todos eles têm exatamente o mesmo fundo, mas melhor ainda porque nós incluímos os nomes. Então preço três preço BG para ser G preço um b j. Você pode simplesmente selecioná-lo. Ele controlava as exportações dos PNG. E então o que eu vou fazer é exportar um desses botões. Então botão de compra, Eu vou esconder meu texto porque, como você pode ver, há outro aqui. Eu não renomeei cada camada como um tiro para que ele pudesse controlar exportado s PNG e agora, basicamente, desenvolvedor tem todos esses botões diferentes. Então é mais que eu vou fazer o mesmo que fez com os clientes anteriores. Porque, como você pode ver, eu os nomeei como um deveria, então você pode ver 567 local Eu vou bater o controle E exportação que Miss Bong mais uma vez. Só para que eles saibam a posição desses logotipos em relação a este texto. Vamos ver e, finalmente, exportar nossas flechas com controle. E exportá-los como SVG é porque é um vetor baseado. Eu não posso. Vou passar para a promoção. E para este, não vou editar isto, Martin. Não vou exportá-la. Não vou exportar as minhas formas. Tudo o que quero fazer é simplesmente exportar o meu problema. BG controlá-lo Exportar. Isso é PNG hit exportação. E agora vamos para o quarteirão. Vou selecionar minhas imagens e meus avatares. É por isso que eu nomeei assim para que você pudesse ver imagem um do outro e assim por diante. Aperte o controle de exportação E para perder ser fazer e selar botão. Você pode exportá-los ou você não pode deixá-lo vazio porque como você pode ver. Basicamente, você está exportando essas formas. Normalmente você não exporta botões com texto nele porque se os desenvolvedores querem mudar alguma coisa abaixo da linha, eles não podem alterar o texto porque ele é cozido dentro. É basicamente uma imagem, então vamos deixá-la como está. Em seguida, estamos movendo o pé do dedo do pé ou finalmente, e eu não vou exportar logotipo porque eu já fiz isso. Estou indo para exportar ícones de mídia social tão selecionados, como para que ele controle E. Certifique-se de que eles estão na SPG Export. E finalmente vou escolher o meu pé. RBG bateu o controle e foi exportar isso como sendo G. E isso é basicamente para este tamanho. O que você tem que fazer agora é simplesmente seguir em frente. Nós dissemos a esses outros tamanhos que eu levei algo como 10 ou 12 minutos para este, porque eu estava falando o tempo todo. Mas se você não fizer isso e se você continuar fazendo isso várias vezes, você pode ser muito rápido. E se você estiver fazendo tudo corretamente depois de um certo tempo, você pode fazer isso em dois ou três minutos. Então você vai precisar de algo como 10 ou 15 minutos para todos eles. E se você está trabalhando em projetos realmente grandes. Então, por exemplo, digamos que você está fazendo um design de APP móvel que sofreu, digamos, 200 telas. Você deve dedicar um dia a exportar todos esses arquivos diferentes. E, finalmente, mais uma coisa que eu quero mencionar é que você geralmente precisa de um guia de estilo, e eu expliquei o que um grande idéias no meu curso de Web design. Então, se você está interessado em reboque, mergulho profundo sobre os métodos de design sobre quadros de humor, fluxogramas e assim por diante, você pode verificar esse curso. Mas basicamente é uma espécie de documento aqui ou aqui. Onde quer que você queira colocá-lo dentro dele será fácil. Nós vamos selecionar e mover todos os botões, todos os textos diferentes para que você possa basicamente saltar aqui e simplesmente selecionar todas essas cores de circuitos se você usar sombras de fundo se você usou ilustrações. Se usar estilos de personagem, você vai colocar tudo dentro. E, finalmente, se você usar componentes como você pode ver, Eu já criei o botão como meu componente apenas para mostrar como ele funciona. Mas basicamente você vai colocar tudo dentro e você vai enviar este arquivo final como um trabalho. TXT. Você pode exportar esse arquivo pdf s e basicamente dá-lo aos desenvolvedores para que eles possam saber abaixo o que você usou neste projeto. Também é útil para você mais tarde quando você diz este projeto, se o cliente voltar para você e quiser algumas alterações adicionais, então você simplesmente tem esse projeto e você pode escolher os ativos que você incluiu dentro desse guia de estilo, você pode simplesmente copiá-los e colá-los em trabalhos futuros. Então, basicamente, os caras começam são realmente poderosos. Uma recomendação real que você os crie. Mas eu não criei um para este projeto porque basicamente, nós temos apenas uma página, e isso realmente não é necessário quando você está criando páginas de destino, por exemplo, para seus clientes, que este Basicamente é. Mas é realmente necessário uma vez que você começa a criar algumas páginas diferentes. Então vamos aproximar um pouco mais e você pode ver que temos cinco itens bem aqui, bem como obter uma demonstração. Talvez haja um contato conosco, talvez a dívida do Papai Noel. Então, nesses casos, eu realmente recomendo que você inclua um guia de estilo. Boa, Big One, e você pode simplesmente pular aqui, e você pode selecionar, digamos, 1920. Patane, 80 foi posicioná-lo bem aqui. Basta renomear seu guia de estilo, e você pode expandi-lo como quiser, e simplesmente copiar e colar seus elementos dentro. Você não precisa fazer isso para cada tamanho fora do seu design. Você só tem que fazer isso por um tamanho, e isso realmente recomendou que você faça isso para decidir, porque é visível de uma forma melhor do que todas essas outras porque é maior em primeiro lugar, então é basicamente isso. Você tem que simplesmente seguir em frente e exportar todos esses tamanhos diferentes para desenvolvedores porque mais uma vez eles precisam saber algumas diferenças em seu design. Como podem ver, aqui mesmo, temos algum espaço entre a nossa ilustração e o nosso texto. Não temos esse espaço aqui. Se nos movermos quer. Isso está no fundo, então eles têm que saber todas essas margens diferentes e rebatidas e assim por diante. Então você tem exportação de reboque em todos esses tamanhos diferentes. Você também tem uma opção de compartilhamento, que está bem aqui. Então, se você estiver compartilhando com eles, simplesmente certifique-se de compartilhar para o desenvolvimento. Dessa forma, eles vão pegar aquele cara do estilo digital que o XT vai gerar. E eles podem simplesmente expe esperado assim e para Cassie, as diferentes coisas ruins e margens entre todos esses diferentes elementos. Então essa é uma opção fantástica. Para ter de dentro para fora. Vai ser X'd no próximo vídeo. Vamos falar sobre enviar os arquivos para desenvolvedores e clientes, então eu vou ver lá. 18. Enviando os arquivos: Finalmente, esta é a última etapa do nosso projeto. Precisamos enviar esses arquivos para nossos desenvolvedores e nossos clientes. E para fazer isso já mostrou em vídeos anteriores. Esta é a nossa estrutura de arquivos. Então aqui temos nossas pastas e todos os nossos arquivos estão dentro porque eu fui em frente e exportei tudo. Então eu não incomodo você em selecionar cada camada de todos os nossos portos. Então, basicamente, o que você tem que fazer em, eu já expliquei que no vídeo anterior você tem que selecionar todos eles, exportar todos eles em suas pastas dedicadas para que os desenvolvedores possam navegar facilmente nele. Além disso, uma última coisa que você pode desenvolver entregar para seus desenvolvedores é guias de estilo. E eu não cobri guias de estilo nas partituras porque, como eu disse, eu já tenho um curso de Web design onde atrás realmente em profundidade todos esses detalhes sobre o cara estilo arame quadro, seus fluxogramas e assim por diante. Então, se você estiver interessado, você pode verificar esse curso. Mas para o discurso, eu só não quero criar guias de estilo porque nós só temos uma página no momento. Se temos várias páginas fora guia estilo curso é necessário para entregar aos seus clientes e desenvolvedores para que eles possam abrir rapidamente isso. Dentro. Fora deste ovos profanam e simplesmente copiar e colar elementos em sua citação ou usá-los e copiá-los onde quer que eles queiram. Também para os guias de estilo, você deve ir e criar esses componentes separados. Então, como você pode ver, nós só temos o botão de demonstração aqui como um componente para os botões. Mas para os cortes Sal, você tem que criar todos esses componentes diferentes para diferentes tamanhos Barton para que eles possam usá-los mais tarde. Ou se você concordar com o cliente para criar ainda mais páginas para este projeto específico, então você pode simplesmente usar esses componentes e simplesmente copiá-los e colá-los em seu trabalho. Então isso é basicamente para a parte de design para a parte responsiva. E agora esta parte final é entregar tudo aos desenvolvedores. Aqui estão os nossos ovos originais de adobe contaminam. Então esse é basicamente esse arquivo. Basta salvá-lo em seu computador para que você possa ver Cendant para seus clientes e desenvolvedores. E finalmente temos. Este arquivo, que é chamado Project Resource, é era apenas um arquivo de texto básico, e isso é o que eu disse. Sempre inclua esses arquivos para que você possa minimizar a quantidade de tempo que você vai gastar conversando com os desenvolvedores e obter seus clientes após o projeto ter terminado. Então, basicamente, você está respondendo todas as perguntas para eles antes mesmo que eles perguntem para você. Então aqui temos simplesmente links para as fontes do Google e simplesmente explicar que esses telefones livres de ar e quando o clique nesses links, eles podem acessar esses fundos que são gratuitos, e eles podem usá-los para uso pessoal e comercial se eles querem usar esses telefones que você usou em seus projetos, porque às vezes os clientes mudam de idéia em menos segundos, e eles querem usar uma frente diferente. Isso é bom, também, porque então eles podem falar com desenvolvedores e desenvolvedores podem mudar tudo no frio realmente facilmente. Eles podem adaptá-lo dentro do CSS, e eles podem incluir um fundo completamente diferente, então ele vai mudar o fora do site. Além disso, temos imagens e você pode, como eu disse, enviá-las imagens separadas. Mas porque exportamos todas as imagens em todos esses tamanhos de arquivo diferentes para que você possa ver essas imagens para blocos, por exemplo, e você pode enviá-las. Mas se você quiser, você pode simplesmente enviar-lhes um link para o site. Muito tem imagens de. Mas na maioria dos casos, os clientes vão usar suas próprias imagens de qualquer maneira, então estas são apenas imagens de espaços reservados, mas você ainda tem que enviar-lhes essas imagens caso queiram usar algumas dessas imagens no o seu produto final. Então, basicamente, é por isso que estamos enviando este link para que eles possam acessá-lo facilmente. Você também pode copiar e colar links para imagens individuais, se quiser, e a realmente recomendar que você faça isso para projetos menores. Mas para projetos maiores, você pode criar coleções, por exemplo, no splish diretamente, e você pode simplesmente copiar e colar o link para essa coleção específica. E eles têm imagens de toda a coleção à sua disposição para que possam usá-las no tamanho máximo possível onde e como quiserem. Finalmente, temos ícones, e neste projeto em particular usamos ícones materiais que são mais uma vez do Google em ícones , que são livres para usar em projetos pessoais e comerciais. Se você estiver usando ícones pagos, é muito importante destacar isso para o cliente. Se o cliente quiser pagar por esses ícones, ou se você estiver usando fundos premium de imagens premium, você tem que declarar tudo isso com antecedência. Para que o cliente possa saber se quer pagar por algo assim, porque às vezes seu orçamento não cobre isso. Então, uma vez que você entregar tudo isso e você não tem que entregar isso como você pode converter para pdf. Se isso é algo que você quer, você pode finalmente selecionar todos eles e no Windows. Então, basta clicar com o botão direito e simplesmente ir para o meu WinZip e adicionar a agência de design estúdio Zip. E eu quero criar um arquivo zip para este projeto específico porque é muito mais fácil enviar arquivos ZIP, especialmente via e-mail. Você pode enviá-los via folga eram chats diferentes. Portanto, é muito importante que você possa condensar todos esses arquivos no menor tamanho possível . Então, se eu trazer esta janela porque eu tenho dois monitores no meu computador, você pode ver que ele não diz muito espaço porque este projeto realmente não leva muito , especialmente se você considerar que todas essas mudanças de design que fizemos todos esses ativos diferentes estão tomando apenas algo como 2,5 megabytes, então você pode ver que tudo está levando em torno de quatro megabytes. E é por isso que eu realmente adoro Adobe X'd e todos esses outros Softwares como ele. Então, por exemplo, figo, MMA e esboço, mas esboçar não tanto, porque realmente não comprime tudo isso bem, como o figment e o próximo D fazer. Por exemplo, porque fora desses tamanhos de arquivo menores para que você possa ver menos de quatro megabytes de tamanho, você pode realmente facilmente enviar todo o projeto para nossos clientes e desenvolvedores. Eles vão facilmente baixá-lo e descompactá-lo em seus computadores e usá-lo como ele está. Então eu realmente recomendo que você empacote todos os seus arquivos de projeto dentro de uma pasta Zip porque vai ser muito mais fácil para você compartilhar isso com seus desenvolvedores e clientes. E será muito mais fácil armazenar esse tipo de arquivo para você, pois você pode querer mantê-lo em seu computador para referências futuras. Porque, por exemplo, digamos que este projeto foi lançado amanhã e o cliente quer algumas novas páginas adicionais em seis meses a partir de agora. Fique com todos os arquivos originais. Então, digamos que este projeto agência de design estúdio em seu computador para que você possa facilmente saltar de volta para ele e abrir o arquivo original e simplesmente continuar muito à esquerda do tempo anterior. Portanto, é realmente importante que você economize o máximo de espaço possível por causa do compartilhamento com os clientes e desenvolvedores, e especialmente se você quiser manter esses arquivos em seu computador a longo prazo. E eu realmente recomendo porque eu ainda hoje tenho clientes voltando para mim, mas que eu tinha eles de, por exemplo, cinco anos atrás ou seis anos atrás, querendo que eu crie algumas alterações adicionais para o design original, ou talvez um projeto completo de três. Portanto, manter os arquivos originais em seu computador é muito importante, especialmente para esses ovos. Defende porque, como você pode ver, eles são muito pequenos e você pode manter milhares e milhares de projetos diferentes e arquivos diferentes em seu computador, e isso não vai realmente ocupar muito espaço 19. Obrigado: Obrigado por assistir ao curso. Eu realmente espero que você tenha encontrado valor nisso. Basta lembrar, quando você começar a projetar para responsivo, certifique-se de dedo do pé. Pergunte sempre aos desenvolvedores o que eles estão usando antes mesmo de começar a projetar. Assim, você pode saber com antecedência quais técnicas você vai usar uma vez que você obter a parte responsiva do dedo do pé fora do seu design. Então, mais uma vez realmente não importa se você tem que criar suas soluções personalizadas ou se eles estão criando as soluções para você ou se você está usando soluções como bootstrap ou pescador que alguém já criou. Além disso, certifique-se de que quando você estiver exportando seus designs no final do projeto para exportar todos os tamanhos para que os desenvolvedores possam acessá-los de uma só vez, certifique-se de separá-los em pastas como um show você no curso e que você está indo para eliminar esse feedback adicional dos desenvolvedores e dos clientes. Você vai terminar o trabalho mais rápido. Você vai entregar os arquivos como eles devem ser entregues. E simplesmente não vai haver fricção entre vocês desenvolvedores e clientes. Obrigado mais uma vez por assistir ao curso. Agora vá em frente e crie esses designs incríveis e torne-os responsivos. Obrigado 20. Canal do YouTube para mais conteúdo: Aqui é Designer Alex. E eu só queria dizer um rápido obrigado. Obrigado por fazer o discurso, e eu realmente espero que você tenha obtido o máximo de valor possível dele se você quiser conferir mais conteúdo. Recentemente, lancei meu canal no YouTube, onde explorou alguns tópicos que podem interessar designers de freelancers para técnicas de renda passiva de Web design, design APP. Você projeta design UX. Então, se você estiver interessado em algum desses tópicos, vá até o meu canal do YouTube, conecte-o no pdf, e você pode simplesmente clicar lá e ele o levará ao meu canal do YouTube. Se você gosta desse conteúdo, certifique-se de se inscrever e certifique-se de seguir, porque eu vou tentar ser realmente regular com esse canal do YouTube e enviar o máximo conteúdo possível. Então, obrigado mais uma vez por fazer o meu curso, e eu realmente espero vê-lo no meu canal Digger 21. Junte-se ao meu grupo gratuito do Facebook: Ei, designer, eu realmente espero que você tenha gostado do curso, e que você tenha o máximo de valor possível fora dele. Se você quiser receber ainda mais valor de mim e da comunidade de design, eu criei um grupo no Facebook. Onde você pode participar é apenas um grupo do Facebook para os meus alunos sozinho para que você possa participar clicando no link abaixo ordem. Nate fora do curso é uma conta no Facebook, e é um grupo gratuito para participar. O grupo é formado para fornecer feedback adicional para que você possa anexar seus projetos seguindo este curso e usando exemplos deste curso ou qualquer outro fora dos meus cursos. Ou se você tiver seus próprios exemplos. Off design funciona do passado do presente. Você pode enviar esses trabalhos para o Facebook Group e, em seguida, recebeu feedback para mim ou de outros membros do design. Encorajo-vos também se tiverem postos de trabalho disponíveis para os partilhar nesse grupo, de modo todos possam beneficiar desse grupo. Mais uma vez, o grupo está livre. É fácil se juntar. Basta clicar no link no pdf, e eu realmente espero ver o maior número possível de vocês nesse grupo apenas para compartilhar nossas experiências como designers, e eu vou tentar postar algum vídeo adicional, algumas dicas adicionais e técnicas nesse grupo do Facebook. Mas, por enquanto, estamos apenas a começar. Nós vamos apenas formar o seu, e eu realmente encorajo você a participar e compartilhar seu melhor trabalho lá. Para inspirar outros designers ou dedo do pé pedir feedback adicional. Apenas certifique-se, por favor, quando você está pedindo feedback, pediu coisas específicas. Não basta perguntar. O que você acha deste projeto? Porque ninguém vai responder a isso. Ou se o fizerem, estão na cena do Lee. Eles vão dizer para você se parece bonito ou não parece legal. Certifique-se de pedir comentários específicos sobre seus designs. Por exemplo, faça como essa combinação de cores. Você acha que eu deveria usar uma frente diferente? Você acha que essas imagens correspondem bem com a cor de fundo, por exemplo , coisas assim, Então certifique-se de pedir feedback específico quando seus projetos, porque vai ser muito mais fácil para mim e para outros designers nesse grupo para dar-lhe são feedback específico que você pode melhorar muito mais rápido, em seguida, apenas perguntando o que? Tudo fora deste design. Então, obrigado mais uma vez por fazer o meu curso, e eu realmente espero vê-lo à vista fora do meu grupo do Facebook Digger.