Design de aplicativo móvel do zero no Adobe Xd

1. Design de aplicativos para móvel do zero no Adobe XD 2019: bilhões de pessoas em todo o mundo usam seus dispositivos móveis todos os dias, e mais e mais clientes querem criar abs móveis para atender a esse mercado. Portanto, conhecer a chamada para projetar um APP é uma habilidade muito importante. Ter como designer usando o Adobe X'd criado dá-lhe possibilidades ilimitadas porque é gratuito Cross platform Vector baseado, e tem atualizações regulares. Oi lá. Meu nome é Alex, e neste curso você vai aprender segredos de bom design. Breve Como planejar e inspirar-se como criar quadros de humor e esboços. Converta esses esboços em quadros de arame em imagens, ícones e sombras para criar um design, em seguida, adicione movimento e transições para criar protótipos. Compartilhe o trabalho com seus clientes para obter feedback e, finalmente, ligue para exportar seus ativos. Para desenvolvedores, este curso é destinado a pessoas com pouca ou nenhuma experiência no novo design y UX, porque neste curso você aprenderá tudo o que precisa saber para se tornar U Y ux designer . Espero que esteja pronto para aprender. Vai ser X D e o mundo incrível fora você é design UX, e eu vou te ver na aula 2. Visão geral do curso: aqui, e bem-vindo ao curso. Meu nome é Alex. E neste vídeo, vamos percorrer o que vamos cobrir dentro das pontuações. Então você sabe o que pode esperar quando começar a aprender. Então vamos começar com o resumo de design, e se eu aproximar um pouco mais, você receberá esses dois modelos. Então, este é um modelo breve projeto vazio, que você pode preencher para este e qualquer um dos seus projetos futuros. E ao lado dele, temos o resumo de design preenchido que vamos usar para este projeto em particular, e vamos cobri-lo em um breve vídeo de design em detalhes profundos para que você possa saber qual é o pensamento e a lógica por trás este projeto. Em seguida, temos modelos de arame imprimíveis, e você pode selecionar um tamanho de letra U. S de quatro tamanhos ou tamanho, que são o tamanho que você está usando em seu país, e você pode imprimi-los e, em seguida, simplesmente desenhar sobre eles, e eu vou mostrar-lhe alguns exemplos rápidos sobre que tipo de design eu consegui com esses quadros de arame imprimíveis? E eu também vou mostrar-lhe como você pode conseguir alguns layouts diferentes desses quadros de arame imprimíveis . Depois disso, vamos passar para a seção de enquadramento de fios fora do curso, e vamos criar nossos guias de estilo e incluir alguns ícones diferentes e começar com algumas imagens simples, algumas formas simples. E eu vou explicar a lógica por trás de cada elemento que você vê dentro desta seção de enquadramento da esposa. Quando terminarmos com ele, vamos passar para a seção de design na qual vamos incluir as diferentes imagens. Tons diferentes, fundos diferentes. Algumas novas cores estavam indo dedo do pé incluem alguns elementos diferentes que realmente vão trazer nosso design para a vida. E depois disso vamos finalmente passar para a seção de prototipagem, onde vamos incluir algumas novas telas. Nós vamos incluir algumas transições interessantes, e eu vou mostrar a vocês como você pode apresentar suas idéias ao seu cliente para que ele possa entender isso da maneira mais fácil, e você pode reduzir seu trabalho dessa maneira. Como a maioria dos clientes não entende imagens estáticas, você precisa mostrar-lhes movimento. Você precisa mostrar transições a eles. Você precisa mostrar-lhes todo o pensamento por trás do aplicativo para que você possa chegar ao acordo da maneira mais rápida possível. E finalmente, depois que terminarmos com a prototipagem, eu vou mostrar a vocês como você pode empacotar tudo para enviar o cliente, bem como seus desenvolvedores e como você pode se comunicar com eles e quais são os melhores tipos de arquivos que são as melhores estratégias de organização para seus arquivos, bem como como como você pode alcançar o menor tamanho de arquivo possível que você pode facilmente enviar para seus clientes e para desenvolvedores Derek. Então estou ansioso para vê-lo no curso. Muito obrigado por aceitá-lo, e eu realmente espero que você obtenha um monte de valor com isso. 3. Resumo: como qualquer projeto, vamos começar com o resumo de design, mas antes disso, eu estou indo rapidamente para o pé aberto. O recurso é pasta. E tenha em mente que mais e mais recursos serão adicionados aqui. Assim, por exemplo, você será capaz de acessar o projeto final quando terminarmos o projeto e prototipagem para que você possa abri-lo e ir de lá e usá-lo lá. Ou você pode abrir o modelo inicial que irá criar um pouco mais tarde no curso. Mas para esta lição, vamos usar o modelo breve de design e você pode clicar duas vezes no dedo do pé abri-lo. E se eu clicar aqui para abri-lo, você pode ver como ele se parece. Então, se eu aproximar um pouco mais, você pode ver que você pode inserir o nome do seu projeto aqui. Quem é o seu cliente? Quando é o seu perfil de empresa de prazo final? Então você pode escrever uma pesquisa sobre a visão geral do projeto da empresa ST Ng vai em objetivos tão certo seus objetivos e objetivos para este projeto em particular. Quem é seu público-alvo e requisitos de design. Então, o que os desenvolvedores exigem de você e, finalmente, orçamento e programação. Então você pode saber o que é o seu orçamento para este projeto, bem como espera programação Parece. Então, quando você vai começar quando você vai terminar e finalmente seu nome aqui e seu e-mail bem aqui. Agora, todas essas camadas são camadas de texto, e você pode simplesmente clicar duas vezes em qualquer uma delas no dedo do pé editá-las. Você pode clicar aqui para alterar a cor do texto. Se você quiser fazer isso, você pode mudar. Estes ícones incluem o seu próprio. Você também pode mudar suas cores fazendo a mesma coisa. E se eu minimizar isso e abrir nosso resumo de design para este projeto, você pode ver como ele se parece uma vez que todas as informações foram inseridas. Então, se eu aproximar um pouco mais, você pode ver que temos quem nós igualamos aplicativo móvel MERS. Então esse é o nosso cliente. Para este curso, você pode ver que eles possuem loja de móveis. 12 de outubro é o nosso prazo e bem aqui no perfil da empresa de Enter cabeça e preencheu . Então está localizado em Belgrado. A Sérvia tem 10 funcionários, então é realmente uma pequena empresa. Eles trabalham com os designers para alcançar consistência no design mínimo e usar materiais ecológicos e processo de produção de produtos ecológicos. Então eles usaram todas as tradições para fazer as peças e treinar seus funcionários para seguir diretrizes rígidas para proteger esse processo. Então, a partir disso, você conclui que eles são uma pequena empresa, eles usam métodos tradicionais na produção, e eles usam designers externos, bem como designers internos, para criar móveis de design mínimos e para alcançar o consistência em seus processos e sua criação. Temos projeto Oreo abaixo então o que eles querem de você. Como designer, eles querem um aplicativo móvel que deve ser mínimo, limpo, muito simples e direto. Os usuários são pessoas mais velhas porque os produtos são mais caros do que apenas lojas de móveis regulares , então eles não podem ler letras pequenas. E porque as peças estão no preço, do seu lado, elas não querem também. Então eles têm o dinheiro para pagar A e não queriam que o aplicativo ficasse lotado e fosse difícil navegar. Eles querem chegar rapidamente ao ponto e ver as peças dentro do aplicativo. Na fase posterior, eles precisarão de um site projetado, mas por enquanto eles só querem um aplicativo móvel. Queremos começar com IOS primeiro e, em seguida, ligar para o Android e criar essa versão também . Mas como eu disse para esta primeira parte fora deste projeto, eles só querem no aplicativo IOS para ser criado em seguida. Temos objetivos e objetivos. Então, misture a simplicidade feliz para que os usuários possam navegar categorias rapidamente entrar em suas pesquisas com menos cliques quicks, é possível chegar ao seu design desejado itens rapidamente. Ele também deve conter uma página dedicada para cada item que eles vendem, que o usuário possa navegar e aprender um pouco mais sobre o item antes de comprar. Então, por exemplo, se você navegar em uma cadeira e eles querem criar páginas separadas para cadeiras separadas, e quando você clica nessa cadeira na consulta de pesquisa, eles querem ser para o usuário para ser capaz de aprender mais sobre a cadeira, sobre o processo, sobre os materiais que usaram, as cores, os tamanhos de preços e assim por diante. Então eles querem que nós criemos essa página, e eles só então querem copiar e colar itens dentro dessa página para todos os outros produtos que eles têm em oferta em seguida, nós temos público-alvo. Então, como eu disse, geralmente pessoas mais velhas, porque é sobre o preço aqui. Site fora do mercado gênero, 60% masculino e 40% feminino. país de residência é a Cidade da Sérvia. Off residentes é Belgrado e eu falei com eles. Eles podem querer segmentar áreas específicas fora de Belgrado na próxima seção para eles, que é o marketing, e-mail, marketing, marketing mídia social. Eles querem atingir áreas específicas de Belgrado quando sabem que vivem pessoas que têm dinheiro suficiente para comprar suas peças. Em seguida, temos local de trabalho, então as pessoas geralmente são CEOs, fora de empresas e empreendedores hábitos de consumo de mídia. Então eles costumam usar Facebook e Instagram, mas talvez desde que através de um pouco mais do que Facebook, que é importante para esta empresa para que eles possam saber para concentrar seus esforços de marketing mais para os senhores odontológicos do Instagram, Facebook. E finalmente temos seus hábitos diários. Então, o dia de hoje está executando seu negócio pouco tempo fora para consumo de mídia social, e eles estão principalmente em significados e escritórios. Agora isso é importante, como eu disse, para o design total fora do nosso aplicativo móvel, bem como seus esforços de marketing um pouco mais tarde onde eles vêm para esse estágio fora promover este aplicativo móvel e seus negócios em geral através das mídias sociais. Finalmente abaixo, temos requisitos de design e orçamento e cronograma. Agora, para os requisitos de design lá realmente simples. Então ácido, duas dimensões e resoluções. Eles querem começar com o iPhone 10 para este projeto. E quando nos movemos para o Android, as dimensões serão determinadas mais tarde, porque eles querem fazer uma pesquisa e saber mais sobre se existem usuários do Android, que tipo de telefone para o uso para que possamos saber qual tipo de dimensionamento deve ser usado para arquivo de design android por meses deve ser Adobe X'd para o arquivo final e BMG para ativos para desenvolvedores assim que eles querem, ou imagens e ícones. Toby exportou S PNG, mas eu falo com eles e eles querem o SPG para os ícones, e nós vamos conseguir isso um pouco mais tarde. No curso, quando começamos a exportar, nossos ativos para desenvolvedores exigem paleta de cores é fornecido, e eu vou mostrá-lo ao seu muito básico. É muito mínimo. É muito simples. Ativos de imagem a serem incluídos. Eles querem imagens gratuitas por enquanto, então vamos usar imagens que são gratuitas para uso pessoal e comercial. E eu vou mostrar essas imagens mais tarde, e eu incluí a maioria delas no curso, e você pode baixar e usá-las se você abrir seu recurso é pasta e, finalmente documentos de cópia associados a serem incluídos mais tarde com imagens e eu esqueci de mencionar imagens serão substituídas mais tarde com suas próprias imagens porque eles estão usando fora fotógrafo profissional toe fazer imagens de suas peças. Então eles querem ter o layout geral fora do APP para que o fotógrafo não pode nenhum tipo de ângulos fora das peças que eles devem atirar para que eles saibam um pouco mais tarde, quando chega a hora de incluir imagens finais com os desenvolvedores? Onde eles devem colocar certas imagens e que tipos fora dos ângulos eles devem usar? Então eu falei com eles um pouco mais sobre como as imagens serão parecidas e o que é digitar as imagens que eles querem usar. Então nós determinamos isso e eu fui, baixei algumas imagens apenas para mostrá-las e incluí-las nas partituras. E, finalmente, orçamento e o tempo de programação para completar a versão do IRS é de 30 dias de detalhamento do Então são $3000,50 por cento antes do início do projeto, 50% antes das entregas de ácido. Assim, no final do projeto Android e preço do site a ser determinado mais tarde. Como eu disse, porque não sabemos no momento quantos dispositivos Android estavam indo para usar e vamos projetar quatro porque eles certamente vão precisar de algumas dimensões também tablets Android e talvez até smartwatches, e nós vamos ver isso no futuro e finalmente para o site porque nós não sabemos no momento quantas páginas eles estarão dentro do site e nós não sabemos se eles queriam ser responsivos se eles queriam ser um site projetado de uma página, nós realmente não sabemos no momento. Então o planejamento da quebra do tempo é de cinco dias. A pesquisa é de cinco dias projetando padrões com revisões. Apresentação é de dois dias e vamos incluir apresentação, bem como porque queremos mostrar a apresentação de seus stakeholders porque há, ah CEO e também stakeholders. Então eles querem ter certeza de que estamos no mesmo caminho e, finalmente, revisões finais quando eles vêem apresentação. Eles podem querer adicionar algumas alterações adicionais ao design. E nós temos oito dias para a revisão final para que você possa ver o cronograma de como tudo parece. E como eu disse, você pode mudar tudo isso dentro do modelo. Aqui está o meu nome. Aqui está o meu e-mail, e isso é basicamente tudo para este design. Breve vídeo. Em seguida, vou mostrar-lhe como você pode planejar este projeto, por que é importante planejar seu projeto. E quando fizermos isso, vamos mudar para inspiração, quadros de humor, esboços e finalmente emoldurando nosso projeto. 4. Planejamento: quando se trata de planejar seu projeto, é muito importante para você planejar quais telas você vai projetar para o projeto específico. Porque assim você pode saber o quanto você pode citar seu cliente. Se eles não têm um orçamento fixo, e na maioria dos casos eles não têm. Então você pode saber quanto tempo você deve investir neste projeto com base no número fora das telas, e, portanto, você pode saber quanto tempo o projeto vai durar. E, finalmente, você pode saber que tipo de projeto eles precisam e para que tipo de telas você precisa projetar. Assim, você pode saber, por exemplo, quais tipos de imagens você deve procurar. Se o cliente lhe pediu para encontrar imagens como é para o nosso projeto nesta classe, e finalmente você pode saber. Por exemplo, quais tipos de fundos você deve usar e o projeto contém painéis, por exemplo, contém loja contém telas de mídia e assim por diante e assim por diante. Portanto, é realmente importante planejar seu projeto em Avançado, e esta não é a fase final do processo de planejamento. Este é apenas o começo colocando algumas coisas no papel apenas para que você possa saber quanto tempo este projeto vai durar e quantas telas você vai projetar. Então, para o nosso projeto em particular , o que temos é , ah, tela inicial para começar e na tela inicial, vamos listar algumas das categorias principais ver dos principais produtos, sua história e como eles projetam suas peças. Em seguida, temos tela de categoria, então, a partir da tela inicial, as pessoas podem ir para a tela de categoria e eles podem pesquisar por categoria. Em seguida, eles têm filtros de pesquisa, que eles podem clicar, e então eles podem selecionar diferentes tipos fora. Por exemplo, preços, cores, materiais. O coágulo entra, lavável ou não, e assim por diante. Em seguida, temos a combinação de quartos, que podemos acessar a partir do menu, bem como a partir da tela inicial. Então, dentro da combinação de quartos. Nós temos a imagem de fundo principal, e nós temos as peças que são usadas dentro daquela sala para que as pessoas possam saber como é que a peça é um olhar dentro da sala, e eles podem comprar essas peças diretamente de lá. Em seguida, selecionamos itens. Então, quando eles selecionam um item a partir daqui da categoria ou da tela inicial, ele vai levá-los para selecioná-lo item. E esse é o item selecionado é o que eu falei no projeto Breve. Então, basicamente, é uma tela separada, mostrando a maioria do usuário fora de informações sobre esse produto em particular, modo que essa tela será basicamente a mesma para todos os seus produtos. Mas vamos usar, por exemplo, uma cadeira ou algo assim para apresentar o item selecionado. Então, se eles quiserem ajustá-lo e adicionados a um carrinho em seguida, passamos para o item selecionado ajustado, e você pode alterar esses nomes dessas telas à medida que você avança. Realmente não importa. Mas para este projeto, eu escolhi esses nomes para dentro do item selecionado ajustado tomado, por exemplo, mudou a cor do produto. Eles podem alterar o tamanho do produto e, finalmente, adicioná-lo ao carrinho, e quando o fazem, movemos os detalhes do pedido para que eles possam revisar os detalhes do pedido e ver quantos itens eles adicionam ao carrinho. Eles podem removê-los do carrinho se quiserem ou se não quiserem. Eles podem prosseguir com o pagamento, tela dentro da tela de pagamento. Eles serão opções para o cartão de crédito PayPal, e eles podem adicionar que as opções de lá. E, finalmente, quando eles clicam, confirmam o pagamento, eles podem então mover até, por exemplo, locais da loja, que eles podem acessar a partir do menu e dentro da tela de localização da loja. Haverá apenas mapa, e você pode acessar as informações básicas sobre seus locais de loja. Então, por exemplo, em que rua eles estão localizados, número de telefone daquela loja. E você também pode usar a navegação se quiser dirigir ou caminhar até aquele local específico , navegar pessoalmente todas as suas peças e experimentá-las, por exemplo. Então, basicamente, é isso para este processo de planejamento fora do nosso projeto. E você pode mudar o Aziz tanto quanto você quiser. Mas esta é apenas a primeira parte, e o início do nosso projeto apenas para nós, para que possamos saber quantas telas eles precisam projetadas. E tenha em mente que tudo isso pode mudar. Então, deixem-me dar-vos um exemplo rápido. Então, por exemplo, a partir do pagamento não vamos projetar a seção Adit, mas tem que ser uma seção de edição dentro do pagamento. Mas para esta primeira parte do projeto, nós estamos apenas indo a tela de pagamento design porque se na edição, que ele pode parecer basicamente padrão aplicativo IOS, realmente como uma questão. Mas nós só queremos projetar esta tela de pagamento por enquanto, também a partir da combinação de quartos, filtros de pesquisa e assim por diante. Cada uma dessas telas pode se ramificar em cinco ou 10 telas diferentes. É realmente até você e até cliente para determinar quantas funções eles querem incluir dentro deste aplicativo específico. No próximo vídeo, vou mostrar-lhe inspiração onde você pode encontrar peças de inspiração e inspiração que eu escolhi para este projeto e como você pode usar essa inspiração em seu trabalho. Então eu te vejo lá 5. Inspiração: quando se trata de inspiração sobre o seu projeto de design, eu gosto toe encontrar a minha inspiração em vários lugares diferentes. Em primeiro lugar, você deve sempre pesquisar seus clientes concorrentes apenas para ver o que eles estão fazendo e como seus sites e aplicativos móveis se parecem. Se você tiver a chance, você também deve instalar o aplicativo móvel fora de seus concorrentes apenas para ver a funcionalidade e para ver como ele se parece no seu telefone e para ver as opções e recursos que ele pode ter. Mas uma vez que você fez dívida e você quer alguma inspiração visual, você pode pular em um drible ou ser, portanto, ou você pode encontrar sites de inspiração on-line. Há tantos para escolher para este projeto em particular, eu encontrei essa pessoa no drible assim por diante. Julia realmente ajuda. É assim que se pronuncia, e eu realmente gosto dessas cartas. Então, como você pode ver, é realmente muito simples. É fácil para os olhos, e uma coisa que eu tenho que notar é que nós não vamos usar essas cores. Não vamos usar essas imagens. Isso é apenas para que possamos envolver nossa cabeça em torno de como essas formas vão ser como uma vez que nós as projetamos. Então, são realmente como essas cartas. Realmente como este espaço vazio ou este espaço em branco? Eu gosto de algumas dessas tags e como esses ícones funcionam e parecem que eles são muito simples e limpos. Se você saltar para outro exemplo, classifique este, por exemplo. Você pode ver apenas seta para trás aqui sem texto no meio, você pode ver cartões grandes com apenas uma quantidade de texto fora. Você pode ver grandes cabeçalhos e para categorias. Então estes funcionam muito bem. E se saltarmos para, por exemplo, este que você pode ver mais uma vez eles usam essas sombras sutis atrás. Eles têm estes belos parágrafos que são fáceis de ler, um fácil de entender. Então, como você pode ver, apenas a partir desses poucos exemplos, podemos realmente concluir e encontrar alguma inspiração para o nosso projeto. Este também. Então realmente imagens bastante simples, imagens de fundo, texto grande legível agradável e alguns grandes cabeçalhos agradáveis. Então eu realmente gosto dessa direção de design. Em seguida, o que você deve fazer é encontrar outros sites ou outros laboratórios móveis, que estão no mesmo nicho do projeto para o qual você está trabalhando. Então, por exemplo, estamos trabalhando neste projeto, que é para loja de móveis. Então eles têm todos os tipos de cadeiras, camas e sofás e assim por diante. Então é isso que você deve procurar e encontrar inspiração apenas para ver como as outras pessoas estão fazendo isso. Então, como você pode ver a partir deste exemplo simples, eu encontrei no início, nós temos um fundo de cor, e nós temos basicamente para colorir texto aqui. É muito fácil de ler. É muito fácil de navegar. Temos uma boa imagem bem grande aqui à direita. Se eu rolar para baixo, você pode ver alguns desses outros exemplos. Então, para esta cadeira, por exemplo, é agradável e fácil de ler. Agradável e fácil de entender, porque se você se lembra, pois do nosso resumo de design, nosso público é geralmente mais velho público que não tem muito tempo para ler. E se eles querem ler, texto deve ser bom e grande e legível apenas para que ele contrasta bem nesses fundos. Então, como você pode ver botões realmente claros muito fáceis, muito simples, não há muito acontecendo aqui. Aqui. Eles podem rolar rapidamente através de imagens, e eu realmente gosto disso Então todas essas imagens têm fundo cortado para que eles são capazes de acomodar essas cores de fundo e torná-los uniformes longe e olhar coerente. Finalmente, você pode ver botões são realmente claros. As flechas são muito claras. E todos estes estão usando este fundo, que é realmente agradável, simples, fácil para os olhos mais uma vez porque temos público mais velho para o nosso aplicativo. Então eu realmente gosto dessa direção de design e, finalmente, você. Você pode procurar APs MERS iguais no início e no drible, apenas para entender como o comércio APS funciona. Então você pode talvez obter a inspiração sobre a página de faturamento sobre as páginas onde você consorte em cartões de crédito sobre esse tipo de coisas. Apenas para se certificar de entender como no carro para funcionar em alguns desses aplicativos móveis . Só para que você possa saber onde você pode, por exemplo, posicionar fundos para que as pessoas possam adicionar ao carrinho. E talvez você possa entender como alguns dos controles deslizantes funcionam e assim por diante, até agora, para que você possa simplesmente digitar e commerce em sua pesquisa, seja no início ou drible, e você pode ver vários exemplos diferentes sobre como qualquer um desses alcançado. E como você pode ver, eu estou rolando para baixo e realmente há muitas opções diferentes para escolher. E finalmente, querer mostrar a vocês é porque esse projeto é mínimo. Você sempre pode ir dedo I, Kia e Yeske e porque eu sou da Sérvia, estavam carregando nosso site sérvio local. Mas ele mostrará seu site mais próximo ou do país de onde você é, e isso é importante apenas para que você possa entender se o projeto requer isso. Então, por exemplo, temos um design mínimo aqui e é basicamente como um ano ou estilo de risco. Então estilo do norte da Europa e você pode ver como eles colocam para fora texto em seu site e você pode baixar e instalar seu APS apenas para que você possa entender como e parte de comércio desses aplicativos funciona e você pode ver neste lado instável, para exemplo, eles têm esses ícones mínimos e eles têm o mesmo texto de cor à direita. É muito fácil de ler. É muito fácil de entender, então é algo que queremos. A mesma coisa para Yeske. Você pode ver bem aqui. Eu gosto disso. Cartões têm o seu real Eles são realmente simples, então eles têm uma linha de texto bem aqui e apenas a imagem de fundo. Então, nada mais. Você pode ter respingo fora da cor se isso depende do seu cliente. Se eles gostam e você pode ver alguns desses quadros, eu realmente gosto de como eles são integrados. Então, como podem ver a partir deste vídeo inteiro, não estamos usando nenhuma parte específica fora de qualquer off. Essas peças inspiradoras estavam apenas inspirando a nós mesmos sobre como alguns dos elementos serão parecidos na casa de página, um, cores, contraste e como algumas imagens funcionam indiferença em áreas. Então isso é realmente o que você quer descobrir em sua parte de inspiração e não apenas tirar o layout geral de qualquer um desses e apenas usá-lo direito assim. Como alguns layouts funcionam em casos diferentes, eles podem não funcionar para o seu caso, então continue explorando, continue encontrando inspiração, inspire a si mesmo e use as práticas recomendadas em seu design final. 6. Moodboard: Vamos criar rapidamente nosso quadro de humor. Então, a partir de sua tela inicial, basta clicar nesta arma 1920 apenas para abrir um novo arquivo, ampliá-lo, controlar zero para que ele possa bater em posição. E você pode digitar o quadro de humor se quiser. E este quadro de humor é apenas para inspirá-lo apenas para que você possa entender algumas combinações de cores diferentes . Algumas variações de texto diferentes que você pode explorar com os clientes. Logotipo. Se o logotipo é realmente um estilo particular dentro de seu nicho, é realmente com você, e você pode incluir quantos elementos quiser dentro do seu celular. Você pode então mostrá-lo para o seu cliente se você quiser terminar se o cliente quiser olhar para ele e isso é basicamente apenas para que você possa entender melhor dentro de sua cabeça como diferentes combinações de cores e combinações de fundos funcionarão este projeto. Então, para começar, eu vou simplesmente escolher a ferramenta de retângulo e apenas desenhar apenas direcionando assim . Por exemplo, clique repetição grade fazer para gostar deste e talvez até mesmo fazer três como este. Eu vou no grupo grande Use este clique eleitoral em um dos cantos segurar turno e, em seguida, simplesmente ampliá-lo para que eu possa ter um pouco mais de espaço para nossas imagens em seguida. Você pode então arrastar e soltar imagens dentro, mas o que eu quero fazer primeiro eles selecionam todos eles e removem a borda daqui. E então eu posso ir em frente e simplesmente arrastar e soltar algumas imagens dentro. Eu já baixei algumas imagens, e se você quiser algumas boas imagens gratuitas, você pode usar formigas blesh dot com Simplesmente digitando uma sala, por exemplo, e ele vai lhe dar todos os tipos de diferentes, mínimos coleções. E como você pode ver, inspiração é infinita apenas a partir desses exemplos particulares. Mas eu fui em frente e simplesmente baixá-lo algumas imagens para me dar uma vantagem. Você não vai tirar essas imagens de dentro de suas costas só porque elas são muito grandes. Mas como eu expliquei apenas alguns segundos atrás, você pode pular em ponto splash com e você pode clicar na imagem que você pode clicar com o botão direito sobre ele, copiar, em seguida, saltar de volta no reboque. X'd controlar ou comandar V, e vai acelerar isso dentro do seu documento. Em seguida, você pode usá-lo e incluído em qualquer fora desses titulares de lugar de imagem. Mas como eu disse, isso é apenas para que possamos entender melhor algumas dessas cores e para reposicionar algumas dessas imagens, clique duas vezes sobre elas. Mantenha o shift, e você pode posicioná-los melhor como quiser. Então eu simplesmente pularei aqui e pularei para a direita em algumas dessas imagens e talvez movê-las um pouco mais. Só para ficar mais claro o que é insight agora. Mais uma vez, essas imagens podem ser as que você quiser. Mais uma vez, você pode saltar no reboque no Splash e, por exemplo, se o seu projeto tiver cores quentes, você pode usar essas. Mas porque a nossa não usa e usa essas pedras, talvez esta imagem seja perfeita porque mostra móveis dentro do espaço e você pode usar qualquer uma delas. Por exemplo, tenha uma boa lâmpada e uma boa mesa de café ou noite. Fique bem aqui, e você pode, por exemplo, provar algumas cores dessas imagens. Mas mais uma vez, eu sou eu escolhi para usar thes uns, e você pode escolher os que você quer, exceto usar direcionando pouco mais uma vez bater grade repetição e simplesmente ampliá-lo ferramenta ao redor. Digamos, sim, algo assim está bem. Você pode até aumentar o espaçamento fazendo isso. E eu sou grande grupo porque nós vamos escolher e provar algumas cores diferentes para o nosso projeto. Agora não vamos usar essas cores porque o cliente já tem cores. Mas, em alguns casos, talvez você queira mostrar-lhes cores diferentes e como elas funcionam com imagens ou formas específicas . E na maioria dos casos, os clientes vão procurar o seu conselho e ouvir o que você tem a dizer. Então, nesses casos, você pode e, em seguida, implementar essas cores no projeto, e os clientes vão adorar você por isso porque você deu a eles e conselhos e mostrar-lhes como algumas cores funcionam com outras cores. Então, neste caso, vamos da escuridão até o mais leve, e você pode usar essa cor da foto para selecionador de cores como queremos e escolher o raio Stark, por exemplo, e talvez você possa encontrar alguns outros tons que vamos usar. Talvez este ainda pareça bem, e então você pode selecioná-lo e saltar aqui e talvez usar uma sombra mais clara, por exemplo, assim. Talvez você queira escolher essa cor, e é realmente escuro, talvez você vá lá e talvez você possa escolher, Por exemplo, isso não iria colorir. E talvez este aqui só para que você possa ter uma variação. E porque achei essas bordas irritantes, você pode selecionar todas elas. Basta clicar aqui para remover as bordas de suas cores. Agora, como eu disse várias vezes ao longo deste vídeo, isso é apenas para sua inspiração, e você pode usar as imagens e cores que você quiser. Então, por exemplo, talvez queira ir ao contrário e escolher essa cor e talvez selecionar a cor bruta porque gostamos dela para o texto. Talvez. Talvez você queira escolher esta cor mais clara porque talvez queiramos adicionar alguma sombra ou algo assim. Usado esta cor mais clara, talvez queira explorar com alguns quadros dentro de seu design usado esta cor e assim por diante e assim por diante, então é realmente até você determinar quais cores você deseja escolher. E este é apenas um exemplo rápido sobre como você pode criar uma argamassa agradável e simples. Não para nos dar área a partir do texto, você pode clicar duas vezes em seu porto e simplesmente ampliá-lo dedo do pé por aqui. Em seguida, o que você pode fazer é Presti para o título, Clique dentro e fazer digitação. Este é o nosso controle principal. Recomenda A e clientes. Um cliente quer usar o senso aberto, então instale-o. É livre de formulários do Google e talvez queiramos usar Bolt. E isto é para as nossas manchetes. Então talvez possamos aumentá-lo para 48 apenas para que possamos vê-lo um pouco melhor. Você pode posicioná-lo como controle de duplicá-lo. Posicione bem aqui. Mantenha a tecla Shift pressionada a seta para baixo , por exemplo, quatro vezes para que possamos ter um espaçamento de 40 pixels entre o título e o texto. Agora, para converter este dedo do texto da área do texto do ponto, você pode simplesmente clicar aqui e talvez nós queiramos reduzir o tamanho. Então, por exemplo, este é 48. Talvez possamos usar 24 você pode aumentar o tamanho deste parágrafo apenas arrastando essas alças. E uma última coisa que queremos fazer é saltar aqui para a tomada em Spano e encontrar uma Laura Ipsum. É gratuito para instalar e você pode voltar para a tela inicial e você pode ir para Beddoes. Você pode ir para plugins, e a partir daqui você pode simplesmente digitar Florham ipsum, e ele aparecerá aqui e simplesmente clique em instalar, e você terá essa extensão exata. Quero dizer, o blog, como eu tenho alguns mais uma vez, um monte de clique de gesso falhou com texto de espaço reservado. Verifique se o texto está selecionado. Clique aqui e você pode escolher o texto que quiser a partir daqui. Basta clicar em inserir texto. E lá vai você. Temos o nosso parágrafo completo agora mudá-lo de negrito para regular e talvez ir com isso um pouco mais escuro. Ou talvez possamos até mudar a cor para essa cor que já selecionamos a partir daqui. E finalmente, talvez possamos explorar e escolher justiça extra ousada. Veja a distinção entre o título e o parágrafo um pouco melhor para que você possa finalmente clicar duas vezes aqui. Posição bem aqui. Você pode colocar seu logotipo aqui, incluir um pouco mais de imagens, talvez incluir alguns outros sites. Então isso é basicamente um quadro de humor. Você pode incluir tantos elementos ou tão poucos elementos quanto você quiser inspirar-se para o projeto em mãos, e você pode então imprimir o South Show para seu cliente ou enviá-los por e-mail. Você pode salvá-lo como Jay de volta. Basta clicar aqui no nome do seu controle de batida porta. Comentário. E. Escolha o pacote PNG ou J a partir daqui. Escolha o destino hit export como uma única imagem, que você concorda. Mostre ao seu cliente no próximo vídeo. Vamos passar para o esboço, e eu vou mostrar a vocês um modelo que eu criei para vocês, que você pode usar para esboçar seus quadros de arame e depois usá-los como inspiração e como diretrizes em seu projeto, Então, vemo-nos lá. 7. Esboço: Se você vai para o seu recurso é pasta, clique duas vezes sobre ele e você pode encontrar um arame moldura modelos imprimíveis. Você pode abrir esse arquivo, e aqui está como ele se parece tão dentro dele. Você pode encontrar um quatro modelos de papel, modelos papel carta de Isabella EUA e você pode usar esses modelos toe imprimi-los e simplesmente desenhar qual o nosso lápis painel sobre eles e você pode ver se você ampliar um pouco mais perto. Você pode ter apenas a informação superior do iPhone aqui, bem como o indicador home aqui na parte inferior. E você pode usar nesses retângulos apenas para que você possa desenhar, Ah, Ah, melhores armações de arame dentro deles só para que você possa saber quanto espaço você pode ter e assim por diante . E mais uma vez, estes são apenas para desenho manual, e você pode usá-los também se você quiser e criar armações de arame aqui dentro se você quiser. Mas eu prefiro o dedo do pé. Imprima isso e use com a minha mão. É um processo muito melhor que encontrei ao longo dos anos, então para começar com os amigos da escuta diretamente dentro do seu software. Então, mais uma vez, você pode usar isso. Se você estiver usando um modelo de quatro ou se estiver nos usando papel carta, basta selecionar um dos quadros de arte, o que você quiser. Controle de batida. Recomenda E para exportar ativos, e a partir daqui você pode escolher Pdf e você pode exportá-lo. Abra-o e imprimido por quantas vezes quiser. E porque eu sei que temos 10 telas. Foi por isso que escolhi 10. Mas você pode usar esses para Então, por exemplo, você quer esses três. Você pode escolher este painel de camadas aqui, e você pode ocultar todos esses outros e então talvez posicionar isso livre no meio. Você pode imprimir esses três se Onley. Se você só precisa de três telas para serem impressas, você pode em muitas dessas telas que você pode talvez acostumar, pois é realmente com você e seu projeto. Agora, este modelo pode acomodar 10 como você pode ver aqui. E se você precisar de mais de 10 você pode simplesmente imprimir mais papéis desses quadros de arame particular . E agora estamos uma vez que eu mostrar-lhe que deixe-me rapidamente mostrar-lhe o que eu inventei com esses modelos. Então aqui eu tenho imagem imagem imagem imagem imagem J, e você pode usá-lo apenas para que você possa ver o que eu estou falando. Talvez possamos ampliar isso e nos opor aqui. Então estes são os que desenhei, e eu simplesmente digitalizei-os no meu computador. E se eu aproximar um pouco mais, você pode ver que eu uso nomes de tela aqui abaixo. E era disso que eu estava falando. Então isso é basicamente apenas uma mão livre. Isto é só para ti. Então você pode talvez entender como posicionar alguns elementos dentro de cada tela. Talvez você possa ver quais elementos funcionam quais elementos não funcionam. E por causa do meu scanner, você não pode realmente ver essa cor de fundo. Mas talvez seu scanner seja melhor, e você possa vê-lo. Mas quando você imprime, é muito bom. E você pode ver essa cor de fundo, bem como esses animais retângulos brancos novamente, você pode simplesmente duplicar o preservativo e mudar a cor para qualquer cor que você quiser. Se isso é algo que você quer e sua impressora pode acomodar isso, então, se aproximarmos um pouco mais, você pode ver na tela inicial. Por exemplo, temos vários elementos diferentes posicionados ao longo, e isso vai ser muito mais longo abaixo porque queremos acomodar essas combinações de sala também nesta tela inicial. Em seguida, temos a pesquisa de categoria aqui e você pode ver que, por exemplo, eu escolhi SOFA Quantos resultados há ordenar por fim. Os usuários podem clicar nesta seta tomada ordenar por qualquer um dos filtros e pensamento. Clique em aplicar, e ele irá levá-los de volta para a pesquisa de categoria com os filtros aplicados em seguida, temos combinação de sala. Como eu disse, você pode acessá-lo a partir daqui, e você também pode acessá-lo a partir do menu porque dentro da combinação de quarto, que é a tela que vende os móveis. E os usuários podem ver como algumas peças se encaixam dentro, por exemplo, sala de estar ou quarto ou cozinha e assim por diante, e eles podem escolher diferentes opções a partir daqui. Eles podem ver quanto custam, e eles podem ver todos os produtos usados dentro daquela sala particular. Então nós selecionamos item e item selecionado pode ser item a partir daqui ou daqui e no item, eles podem ver o nome do produto aqui para cima uma linha de texto. Talvez você possa incluir ah título estão no sub-título apenas para que os usuários possam saber, por exemplo, o que está ao lado dessas três ou quatro palavras. Eles podem ver o preço que cores Eles podem escolher tamanhos fora do produto e sobre o produto, como você pode ver, até 3 a 4 seções abaixo para que eles possam rolar para baixo e aprender mais sobre esse produto . E quando eles terminam com item selecionado item selecionado ajustado. Então, talvez eles escolheram, por exemplo, uma cor particular. Talvez eles escolheram o tamanho, e este botão adicionar ao carrinho aparecerá e eles podem adicioná-lo ao tribunal em seguida. Quando o fizerem, eles podem clicar no ícone do cartão e ir para os detalhes do pedido. E dentro da tela, eles podem ver todas as peças que eles pediram nome do preço da paz e quantos itens fora nessa peça em particular. Então, isto é importante. Se você está pedindo sofá, talvez você queira pedir apenas um. Mas se você está pedindo cadeiras, talvez você queira pedir quatro ou seis ou algo assim, talvez às cegas para ter alguns itens menores fora de exemplo cinzeiros ou copos ou plantas de panela ou algo assim. E talvez eles queiram incluir um número diferente desses insights para que os usuários possam pisar. Dallas vai aparecer. Eles podem simplesmente usar o dedo do teclado. Digite quatro, por exemplo, ou seis ou algo assim, e o preço fora do curso será ajustado de acordo. Finalmente, eles procederam ao pagamento, e ele vai levá-los para esta tela. E como podem ver pelo exemplo de inspiração que mostrei a vocês, só uso uma simples seta para trás, que os levará de volta a esta tela. Se há algo que eles querem mudar, e nesta tela eles podem escolher pagamentos para que eles tenham opções de cartão de crédito, e eles têm opções PayPal também. Talvez possamos incluir vários cartões de crédito, e eles podem passar por estes grandes carros para escolher o caminho certo. Ou se eles só tiverem um , será apenas um aqui. E, finalmente, informações do PayPal abaixo. Quando eles estão felizes, eles apertam fazer o pagamento e se eles quiserem fazer algumas alterações finais, eles podem clicar em editar em qualquer um desses, e ele vai levá-lo para a edição do cartão de crédito ou para a conta de pessoas. Próximo. Temos locais de lojas, então temos uma grande barra de pesquisa bem aqui com a próxima, e eles podem clicar em pesquisar em qualquer tela que contém o ícone de pesquisa. Então, quando o fizerem, ele vai levá-los para a barra de pesquisa aqui, e eles podem escolher esses filtros diferentes, e eles podem escolher diferentes peças de item que eles querem ser incluídos dentro da pesquisa. Mas se eles quiserem escolher o local, eles também podem clicar na barra de pesquisa e digitar o local, e esta tela aparecerá e, por exemplo, Daikin digite em Belgrado, que é uma Sérvia capital, e sabemos que eles têm as lojas bem ali, e podemos ver a rua bem aqui, mais detalhes, que então mostrarão a eles. Por exemplo, se eles viajam de ônibus ou de táxi, que ruas dedo do pé bateu, e ele vai pedir a localização do dispositivo apenas para que ele possa mostrar-lhes a distância entre eles e a loja, se eles querem navegar. Eles podem apertar este botão. Ele vai levá-los para o aplicativo de navegação preferido que eles usam. Então, se eles usaram o Google Maps, ele vai levá-los para o Google Maps se eles usarem aqui. Mapas. Se eles usam maneiras que a Apple mapeia, isso realmente não importa. Ele vai levá-los, rebocar seus mapas preferidos, e ele vai começar uma navegação de lá para o local em questão. E finalmente, temos o nosso cardápio. Então, onde quer que eles tenham o menu Icahn. Então, por exemplo, aqui ou aqui, eles podem acertá-lo, e ele vai levá-los apenas para este menu básico, simples, que então eles podem escolher diferentes opções de Então, como você pode ver, é realmente muito simples. Está faltando muito fora das telas, mas para esta primeira parte fora do nosso processo de design, e isso é o que nós concordamos com o cliente são as primeiras telas que eles querem. Eu indiquei a eles que este aplicativo vai exigir pelo menos 15 ou 20 telas mais. Eles dizem que estão bem com isso, mas eles só querem ver a primeira parte. E se eles gostam do design, se eles gostam da funcionalidade e querem testá-lo em alguns dos usuários apenas que eles possam entender se os usuários gostam se os usuários acharem confuso ou não, e a partir daí, quando eles coletam todos os dados, então podemos seguir em frente e projetar algumas dessas outras telas. E é muito simples quando você tem um produto completo que você pode, em seguida, adicioná-lo e incluir mais telas e incluir mais alguns desses elementos diferentes porque é muito mais rápido quando você tem algo em vez de começar a partir de tela em branco. Então esses são os molduras de arame, modelos imprimíveis. E como eu disse, você pode usá-los e imprimi-los. Você pode desenhar sobre eles, e se você quiser, você pode até mesmo criar de I frames bem aqui na próxima seção fora do discurso. Vamos pular no reboque,emolduramento de arame, emolduramento de arame, e vamos começar a projetar nossas armações de arame a partir desta informação que acabei de mostrar vocês. E eu vou explicar algumas técnicas diferentes e como você pode começar a enquadrar fios por que é importante e como isso vai acelerar seu processo mais tarde. Quando chegar a hora para as revisões, então eu vou te ver lá 8. Preparação de arquivos: nesta parte do curso, vamos começar a criar nossas armações de arame. E para fazer isso a partir da tela inicial, basta clicar em iPhone enviado e tênis para criar uma nova porta de arte. Você pode ampliar sua tela assim, e vamos rapidamente criar nossas telas. Então, como eu disse, temos 10 tela, tão maçante. Clique aqui. Eu vou digitar casa e fazer controle ou comando D para duplicar esta nossa doca de porta, como aqui e digitando categoria controle de tela de mais uma vez para duplicar este um duplo clique e digite filtros de pesquisa. E eu vou pausar rapidamente este vídeo e duplicar todos eles e criar 10 telas e depois voltar. E agora que estou de volta onde ele bateu no controle zero e você pode ver como todos eles se parecem e como você pode ver aqui no topo, os nomes são os nomes que eu mencionei ao desenhar minha esposa amigos no jornal, e você pode sempre eles incluem seus próprios nomes aqui se você está criando ah, pouco fora de um projeto diferente. Em seguida, eu estou indo toe hop em outro ex profanar que já foram criados anteriormente e copiar alguns ícones. Então eu vou apertar o controle V bem aqui para prendê-los. E obviamente você vai ter esses ícones porque estes são os ícones que vamos usar em nossos projetos. Vou colocá-los aqui, e também tenho um logotipo que o cliente me enviou. E este não é o logotipo final. Mas eles me mandaram este logotipo por enquanto. E porque eu não faço desenhos de logotipo simplesmente não gosto disso. E não é para mim. Algum outro designer criará um logotipo melhor. Este é apenas o local deles no momento. Então nós temos todas as coisas básicas configuradas e dentro eu vou apenas rapidamente salvá-lo. E para fazer isso, você pode vir aqui para o topo para nos salvar ou Shift Control ou Shift Command s. Ele vai abrir e você pode localizar sua pasta aqui clicando nele. E você pode nomear seu projeto aqui, enquanto eu já fiz isso. E eu o chamei de nosso projeto. E se eu espero no com o nosso recurso é, você pode ver que aqui está, e você pode abrir este arquivo a qualquer momento, ele será concluído, e você pode usá-lo como uma referência Quando você começar a trabalhar neste projeto e é claro, você também pode copiar e colar elementos diferentes deste arquivo e inseridos em seu novo arquivo, se você quiser, e você também pode usá-lo como um guia de referência. Por exemplo, se você perdeu alguns tamanhos ou colocação do Sr. Imagem, ou se o fizermos, por exemplo, na Cidade do Reino Unido, e você só queria verificar rapidamente se fez o trabalho certo, você também pode abra este arquivo e simplesmente olhe para ele e veja se você cortou direito. Então, no próximo vídeo, vamos começar a criar nossa tela inicial e vejo vocês lá. 9. Criação de quadros 1: Antes de começar com o trabalho de design, vamos rapidamente fazer algumas coisas básicas. Então eu quero incluir barra de status, bem como indicador de casa na parte inferior. Se você se lembra, o que fizemos quando ele criou nossos modelos de impressão de arame quadro. Então só que podemos saber onde estão os limites r n a partir de quais áreas podemos projetar para. Então eu vou saltar para outro arquivo e copiá-los porque eu já os criei nesse arquivo e simplesmente fazer controle de comando v toe, baseá-los dentro e se ampliarmos um pouco mais perto, você pode ver como eles se parecem. Então aqui está a nossa barra de status Qualquer transferido como um componente, você também pode clicar com o botão direito sobre ele e fazer no componente link porque isso irá criar um componente aqui neste arquivo. Você também pode clicar com o botão direito aqui e digitar delete, que irá excluir o link para o componente original no arquivo que eu criei, que não é este arquivo. Então o que podemos fazer agora com este selecionado é pressionar o controle Comando K, que irá criá-lo aqui mesmo. Agora, o que isso significa é que este é o componente original dentro deste documento, em vez do componente copiado e colado de outro documento externo. Então o que isso significa é que todas as mudanças que você faz dentro deste documento, que é chamado de nosso projeto deste diamante para o futuro, serão mantidas dentro deste documento e não no documento original a partir do qual eu copiou isto. Podemos fazer a mesma coisa com indicador home se você quiser, mas nós estamos simplesmente indo para copiar e colá-lo dentro de cada arquivo. Então, o que vamos fazer a seguir é selecionar os dois para que você possa apenas fazer uma seleção rápida como então pressione o controle ou o comando. Vês? Reduza um pouco, selecione todas as outras placas de arte e simplesmente aperte o controle V. Ele irá colá-los dentro de todos esses aeroportos no mesmo lugar exato como este 1º 1 E este é um ótimo complemento para outros B, X, D e grande futuro para ter, porque se você tem vários objetos repetidos dentro de fora, qualquer um é pobre, você pode simplesmente copiar e colá-los, e ele irá colocá-los exatamente no mesmo local como eles estavam no primeiro. Nosso porto. Então, em seguida, vamos criar uma barra superior. E para fazer isso, vamos selecionar rapidamente alguns ícones. Então, o que vamos precisar neste caso é menu despertar ícone de pesquisa, bem como o ícone de volta . É por isso que eu os criei, e você pode rapidamente selecioná-los. Então, controle. Veja, nós dissemos a eles. Selecionado pressione Control V nesta primeira tela na tela inicial. Segure o turno. Moveu-o até o alinhamento, assim e colocado em 20 pixels para baixo. Então, deslocamento e seta para baixo em seguida, selecionou este. Coloque-o na borda, ou você pode simplesmente clicar aqui. Qualquer coisa. Peça o dedo do pé da borda esquerda. Faça o mesmo para uma barra de pesquisa na borda direita e para a pesquisa Hold shift e seta para a esquerda . Então 12 para movê-lo. 20 pixels a partir desta borda e para o menu. Merda. Quer seta direita ponta Esta borda fazer o mesmo que para este sacos de compras. Todo o turno lugares assim até que o turno da carne deixou Arrow 12 E é por isso que criamos esses ícones porque torna o nosso trabalho muito mais fácil no início. A seguir, vamos copiar o nosso logótipo. Então controle selecionado, Veja Clique em branco aqui, controle V. Clique aqui para posicioná-lo no meio e, em seguida, simplesmente movê-lo até que ele esteja no meio. Assim como. Se você não puder, você pode selecionar estes dois e simplesmente clicar aqui e ele irá movê-los todos dentro da mesma linha. Então, em seguida, eu vou selecionar todos eles, aperte controle ou comando g para agrupá-los, clique aqui e clique maçante e nomeá-los. Nunca bar center, e eu vou pedir um pouco melhor. Então agora a barra vem logo abaixo da barra de status e eu não posso controlar. Veja. Clique aqui, Controle V. E é disso que eu estava falando. Ele vai baseá-los exatamente no mesmo local como era na primeira tela. Então, vai tornar o seu trabalho muito mais fácil mais tarde na estrada. Agora, antes de fazer qualquer outro trabalho, vamos selecionar rapidamente as cores para o projeto. Então eu estou simplesmente indo para criar alguns retângulos aleatórios borda removida e nós vamos precisar de cinco cores. Então controle, de fato. Segure o controle de mudança D mantenha a mudança. Só para movê-lo para baixo abaixo do controle D segure a mudança e movê-lo. E finalmente, mais uma vez, controle D Agora para seu primeiro 1 clique bem aqui. Nós vamos digitar em zero B zero B zero b Presenter. Vai ser uma cor escura para este próximo vamos usar 858585 percenter para este próximo vamos usar 717171 percenter para o abaixo dele. Vamos usar o centro de imprensa E B E B E B E, finalmente, para este, para este, vamos usar F f f f f f f f f f f f f f, que é o branco puro. E agora que fizemos isso, temos que criá-los como ativos. Sirkin, clique aqui. Clique nesta cor e clique aqui. Clique nesta cor clique aqui, bem aqui no plus e, finalmente, no plus. E o que eu gosto de fazer é eleger o lugar cores mais escuras na parte superior e cores mais claras na parte inferior para que você possa reverter o processo. Você pode selecionar o branco primeiro e, em seguida, passar para o topo e, em seguida, temos nossas cores criadas em seguida. Nós vamos criar a nossa frente, então eu vou selecionar Esta é má digitação T clique aqui digitando, por exemplo, por exemplo, Iniciar e controle de compartilhamento Um seleto senso aberto a partir daqui. Se você não tiver, você também pode instalá-lo. É uma frente gratuita do Google, e se você estiver usando telefones adobe, você também pode encontrá-lo lá. Basta instalá-lo e você estará pronto para ir. Nossa deixar um link no pdf, e você também pode acessar todos esses links toe o telefone enviado para as imagens, e você também pode encontrar algum adicional. Um recurso é que eu vou ligar dentro desse arquivo. Então, as primeiras coisas primeiro. Vamos selecionar 18 a partir daqui. Percenter. Vai ser semi negrito, então selecione semi bowl a partir daqui, e vai ser esta cor. Agora. Vamos usá-lo para nossos títulos para que você possa clicar aqui para criar um novo estilo de personagem . Em seguida, eu estou indo para duplicado tão controlado movimento profundo logo abaixo, e eu vou usar um regular, e eu vou selecionar esta cor, que vai ser a nossa idade para para todo o texto. E finalmente, vamos reduzir seu tamanho. Então selecione aqui para 14% e vamos usar esta cor como se fosse. Clique aqui para criar outros estilos de caractere. E é isso para este projeto, porque nós só vamos usar essas ferramentas estilos de caracteres . Na maioria dos projetos, você vai usar pelo menos três. E na maioria dos casos, você vai usar vários telefones diferentes. Mas este cliente preferiu o olhar simples fora disso e queria ir com ele. Então o que eu posso dizer é, OK, então o que vamos fazer agora é criar um guia para nos ajudar para que você possa selecionar isso e a partir desta borda, simplesmente mover o guia até que ele se encontre aqui, para que possamos saiba sempre que são 20 pixels a partir desta borda e faça o mesmo para este ícone aqui. Então podemos saber que são 20 pixels a partir desta pesquisa, e isso vai tornar nosso trabalho muito mais fácil Deu prazer para que você possa selecionar estes para movê-los aqui, e você pode alinhá-lo assim e simplesmente segurar sua seta inferior move-los, por exemplo, para cinco pixels. E o que é duplo clique aqui e digitação, por exemplo, são melhor compartilhamento de vela. Vamos dizer algo assim, e vamos criar uma imagem para ir atrás. Então, basta usar erguer um pouco e selecionar de borda a borda. Remova a borda. O que vamos usar é este um B E V E B, e vamos usar 375 que para 16% e nós saltaríamos para nossas camadas, locais bastante aqui, sendo centro de imagem e movê-lo para baixo para ouvir. E vamos pedir rapidamente algumas dessas camadas. Então, como eu disse, isso vai para as imagens superiores bem aqui, e o que vamos fazer é fazer fila para torná-lo 20 pixels assim. Então mude a seta inferior duas vezes e queremos fazer o mesmo para isso. Então alinhados como o turno 12 e foi assim que criamos nossa imagem. Em seguida, vamos usar alguma paginação aqui no então vamos criar rapidamente nos lábios. Então os homens gostam assim você pode criar, por exemplo, 10 com 10 por cento fazer um círculo perfeito e você pode duplicá-lo. Então controle de movê-lo como, por exemplo, 10 pixels controlar D com 10 pixels, como assim controlar D e ter quatro, por exemplo. Você pode selecioná-los mantendo a tecla Shift pressionada. Mova-os até que se encontrem aqui. Segure a mudança e posicione-os no meio assim. E você também pode agrupar isso e, em seguida, posicionar isso no meio, se você quiser. Mas acho que isso funciona muito bem. E se você quiser, você pode remover Bordas de todas elas. Então vamos fazer isso como tão simplesmente ótimo lá. E então o que vamos fazer é usar um selecionado. Então clique nele, então pule em nossos ativos e clique aqui para que possamos tornar este um selecionado. Se você não gosta de como isso parece, você também pode fazer a fronteira em alguns deles. Mas eu acho que isso parece muito bom. O que vamos fazer agora é renomeá-los. Então talvez você possa usar cerca de um em vez de lábios um e um círculo, também. Em seguida, circulou três. E, finalmente, cirúrgico por aqui. E então eu gosto do dedo do pé ordenando-os para ir de cima para baixo. Faz mais sentido para mim. Mas algumas pessoas preferem do outro jeito. Eu realmente sei o meu tão simplesmente tomando imaginação e você pode mover-se com logo abaixo do texto aqui. Em seguida, vamos criar um texto abaixo para que você possa selecionar ambos os controles d movê-los para baixo assim até que eles se encontrem com essa mudança de imagem na seta para baixo duas vezes porque foi assim que fizemos isso com todos eles. Então aqui mesmo, o que você vai escrever é mais popular assim e aqui vamos escrever selo porque este vai ser um link e as pessoas serão capazes de clicar neste link e ver tudo desta categoria particular. Você pode selecionar os dois, bater bem aqui, rebocá-los perfeitamente. E o que vamos fazer agora é selecionar este controle de imagem D segurar shift. Eu quero gostar disso, e o que vamos fazer é criar uma linha de três imagens. Então, vamos selecionar rapidamente o raio do canto, digitando cinco para que possamos fazer em torno dos cantos e vamos digitar para os tamanhos. Digamos 1 35 com 60 assim. Então certifique-se de que você está alinhando como para ter certeza de que tem 20 pixels como este, então certifique-se de que tem 20 passos Controle profundo, duplicado mais uma vez, alinhe, certifique-se de que tem 20 pixels para a direita e finalmente controlou o Certifique-se de que são 20 peças da direita também, e o que queremos alcançar aqui é arrastar gatilhos para que as pessoas possam arrastar e olhar para as zonas, que estão fora da tela no momento. E nós vamos criar isso um pouco mais tarde, ou o que você pode fazer é simplesmente criar um e, em seguida, agrupá-lo e duplicado. Então eu vou duplicar este texto. Dell Creek aqui mesmo, controlando o tipo em um nome, Controle A. Certifique-se de que ele está no centro assim, e você pode selecioná-lo e imagem e certificar-se de que eles estão todos alinhados perfeitamente controlados Mais uma vez. E o que vamos abaixo, isto é, vamos introduzir um preço. Então, por exemplo, 24 e finalmente certifique-se de que todos eles estão no meio assim e lá nós temos isso. Nosso grupo está pronto. E certifique-se de que você está, por exemplo, 10 pixels da parte inferior. Vamos criar esse Like assim todos eles são 10 pixels. Então daqui até aqui, 10 daqui até aqui. 10. E finalmente, o que você vai fazer é agrupar todos eles. Então, selecione todos os três mantendo o controle de controle G para agrupá-los. OK, bem aqui e digite a imagem Um talvez. E agora vamos usar o controle de para duplicá-lo e colocar, assim 20 peças para escrever o controle D e mover este 120 pixels também. Então esta é a nossa imagem. Três. Esta é a nossa imagem e, finalmente, esta é a nossa imagem. Então só queremos encomendá-los um pouco melhor. Então eles fazem mais sentido na estrada. Então, selecione todos eles, mova-os para baixo. Aqui. Também mais popular e ver todos os moveu logo acima destes, de modo que tudo isso faz muito mais sentido. Você também pode agrupar todos eles, e nós vamos fazer isso agora. Tão selecionados, como tão controlados. Apenas certifique-se de que você selecionou todos eles. Então cadeira resistente, nossa cadeira mais vendida e selo deve estar lá embaixo, então segure o controle de turno. G. Não muito ouvir talvez digitando herói, porque esta é uma imagem de herói ou são slider. E para estes, talvez possamos controlar G e nomeá-los, por exemplo. mais popular E o que queremos fazer agora é criar outra seção que vamos nomear uma combinação de sala. Então, basta controlar D neste e mover este para baixo. Então selecionado e por algum motivo, ele não vai se mover. Sim, temos que movê-lo assim. Então mude a seta inferior duas vezes e agora mova-a. Basta soprar e eles vão chutar aqui e digitar combinações de sala. E para este, o que queremos fazer é remover os preços, então remover o preço, remover o preço. E finalmente, a partir deste, você pode entrar assim e remover o preço e você pode selecionar os nomes. Então primeiro controle de buraco todo o controle moveu-o para baixo até que eles se encontram no final, assim e mudar e subir o nosso para que você torná-los 10 pixels para cima. Agora, estes serão os nomes dos nossos quartos, e estes são os produtos mais populares. Agora, finalmente, eu quero criar rapidamente mais uma seção, e para fazer isso eu tenho que estender a altura desta obra de arte. E para fazer isso, você pode simplesmente selecionar sua porta e estendê-la para o máximo que você precisar. Vamos fazer assim por enquanto. E vamos mover rapidamente o indicador de casa para baixo. E o que queremos fazer é duplicar isso mais uma vez. Então controle d mantenha a mudança com este até que eles se encontram no topo como então controle, o tipo de mudança e seta inferior duas vezes. E o que queremos escrever aqui é o nosso processo. E aqui queremos fazer campanha ler mais porque as pessoas podem estar interessadas no processo fora desta empresa e como eles fazem suas peças e eles podem ler mais. Mas aqui vamos criar um vídeo e fazer isso. Então, vamos rapidamente renomear estes. Então estas são as combinações de Roma, e esta última é o nosso processo, e nós vamos deletar estas para deixar apenas uma no grupo, como tão rapidamente nomear porque não precisamos mais dela. E para este, o que precisamos é 335 com 178 centro. E o que queremos fazer é posicioná-lo bem no meio dos anos oitenta. No meio. Como você pode ver, ele toca o guia esquerdo substituído, bem como o guia direito colocado. Só tenha certeza que é engraçado. Imagens do texto assim e o que queremos fazer é incluir outro ícone, então queremos incluir Exibir ícone Então controle. Veja saltar à vista Controle v Qualquer um para renomear isso de imagem para vídeo e usado para jogar. Eu não posso me mover. É logo abaixo, e você pode selecionar ambos e simplesmente fazer assim, e ele vai colocar para jogar. Não posso bem no meio. E finalmente, o que queremos fazer é mover isso para o topo e movê-lo 20 pixels para baixo. Então mude amanhã e, finalmente, 10 pixels a mais e clique na nossa parte. Você pode ampliar muito mais perto para que você possa ter certeza e que ele clipe no lugar certo assim. Então, mude a seta para cima, e essa é a nossa tela criada. Como você pode ver, é realmente fácil porque muitos dos elementos estão se repetindo e você vai ver nos próximos vídeos como tudo isso vai ser muito mais rápido agora que temos pelo menos alguns elementos colocados em nossa página . E nós vamos usar esses caras muito mais porque eu descobri que eles são realmente úteis porque você pode colocar diferentes guias e telas diferentes se você quiser. Mas o que é ainda mais importante é que você pode copiar o posicionamento desses guias e colá-los onde quiser em qualquer uma dessas telas. Então, no próximo vídeo, vamos começar com a tela de categoria, e eu vou ver lá. 10. Criação de quadros 2: Então vamos começar com a tela de categoria. E antes disso, clique no botão direito do mouse em casa, localize guias e, em seguida, simplesmente copie guias. Clique aqui, clique com o botão direito guias e guias baseados e mal baseado nos guias exatamente na mesma posição que estavam na primeira tela. O que vamos fazer a seguir é selecionar esses dois textos para que você possa segurar sua tecla de controle para pular dentro da tecla Control pasta. Mais uma vez, Controle. Veja, clique aqui, Controle V e o que estamos indo bem aqui é até agora. E aqui mesmo, nós vamos escrever em 129 itens porque esta vai ser uma tela de categoria. E uma vez que eles localizem a categoria, será fácil para eles navegar porque eles verão quantos itens há dentro cada categoria. E talvez possamos mover este 40 pixels para baixo apenas para que possamos ter um pouco mais de espaço entre o nosso nab nosso e nossos itens e mais uma vez movido em uma barra e barra declarada no topo. Em seguida, vamos copiar isso, Jodi, Jodi, movê-lo assim e fomos escrever o controle de preços mais uma vez e movê-lo para cima 10 pixels. Então vamos alinhá-lo perfeitamente como célula e depois movido 10 pixels. Clique duas vezes aqui e digite classificar por porque isso é o que eles vão usar para classificar esses itens. E o que vamos fazer é selecionar o controle de seta para baixo. Veja, mova-se aqui, Controle V. E nós vamos posicionar o Arqueiro Toby alinhado com o nosso preço assim. E nós vamos movê-lo até que ele se encontre com nossos guias. Mova o preço e mantenha a tecla Shift pressionada e mova-o 10 pixels para a esquerda escolha Classificar por. Alinhe-o com o preço assim e, mais uma vez, tendem porque. Ou você pode até alinhá-lo com a borda superior deste texto, se você quiser. Mas descobri que funciona exatamente do mesmo jeito ao contrário. Então, são 10 pixels de suporte de pixels, pixels tam em todos os lugares, o mesmo espaçamento. E isso tornará mais fácil para os desenvolvedores trabalharem mais tarde no seu design. Em seguida, vamos selecionar esta imagem para que, mais uma vez, você possa manter o controle. Pule à vista. Use a imagem e você também pode usar nestes dois textos. Então, controle, veja pulando bem aqui, Controle V e nós estamos indo para o pé. Alinhe assim. E talvez agora possamos movê-lo 20 pixels para baixo deste texto. Então mude a seta de baixo duas vezes. E agora vamos entrar. Mova-os, Toby, à esquerda, alinhados. E o que vamos fazer agora é uma posição assim. Então, para o topo e mantenha o deslocamento moveu-os 10 pixels para a esquerda, começou para a direita e para baixo e fazer exatamente o mesmo para este preço. Simplesmente, Nate, mova-o assim e coloque-o 10 pixels para baixo. Ou se comer é um pouco demais, basta segurar sua seta superior e com cinco pixels para baixo e você vai testá-la um pouco mais tarde, agora vamos ampliá-la. Então vai ser, uh, uh, 157 com 188 assim. E o que vamos fazer agora é agrupar todos eles. Então, certifique-se de que isto está no topo. Isto está no fundo. Mantenha o controle de deslocamento G e digite, por exemplo, item um. E o que vamos fazer agora é pedir algumas dessas camadas porque ele continua colocando camada no topo. Isso realmente me irrita, mas até onde eu sei, você não pode fazer nada sobre isso. Então você pode segurar este controle G e talvez digitando classificar por centro direito. E vamos colocar isso bem aqui. Então eu tomei um. E o que vamos fazer agora é preencher todos eles e criar seis, por exemplo, por exemplo, então controlado d movê-lo aqui e selecionar todos eles e controlar e d Então 20 pixels, como então controlar D 20 pixels como assim E nós criamos um grande off seis itens. Agora vamos ordená-lo. Então item um item para e esta é a parte chata. Mas se você quiser ser preciso para seus desenvolvedores um pouco mais tarde e cortar seu trabalho curto porque você não vai dedo do pé estar pulando dentro e fora e se comunicar com desenvolvedor em itens desnecessários, Então eu realmente recomendo que você nomeie todos os seus camadas, todos os seus grupos ou seus ativos, porque isso vai ser muito mais fácil para você do que trabalhar e para seus desenvolvedores entenderem . E o diabo eles não vão incomodá-lo porque será realmente simples para eles navegar porque tudo é nomeado corretamente. Tudo é nomeado em ordem e mais tarde na estrada, quando o código que eles estão indo para revestir como você lê, basicamente assim de cima para baixo da esquerda, direita. Portanto, é muito fácil otimizá-los com antecedência e, em seguida, apenas para dar-lhes os arquivos finais . E ele vai te amar por isso porque vai encurtar um dia de trabalho também. Em seguida, vamos criar filtros de pesquisa e vejo vocês no próximo vídeo. 11. Criação de quadros de fios 3: Então vamos começar com a nossa tela de filtros de pesquisa. E a primeira coisa que vou fazer é selecionar a barra de lanche Controle D. Estamos bem aqui. Desculpe. Eu deveria usar o controle, vê? E, em seguida, controle profundo e o que eu estou indo para o próximo é selecionar, alugado para controlar C Control D aqui mesmo. E vou usar o sofá mais uma vez. Então controle D e eu vou movê-lo aqui. Em seguida, eu vou selecionar o ícone X ou as roupas que eu posso a partir daqui. Controle. Ver saltar para esta tela Controle V e eu vou posicioná-lo assim. Então, no meio, isso é uma barra de ar. Faça as roupas à vista e, por exemplo, selecione roupas e menu e certifique-se alinhado perfeitamente. Cair para fora. Excluir nab nosso porque não precisamos mais dele. E o que vamos fazer a seguir é certo. Clique aqui. Use guias. E talvez possamos simplesmente clicar com o botão direito aqui. Não. Então temos que selecionar o nome, certo? Clique em guias. Copiar guias. Clique aqui. Guias baseado caras para que possamos usar os mesmos guias e certifique-se de mover as roupas aqui até agora está alinhado corretamente. Mas vamos dobrar bastante aqui e digitar filtros porque estes serão nossos filtros. E os usuários condenam filtrar o que querem que os itens exibam. Então o primeiro na fila vai ser cor, e eu vou mover isso um pouco para baixo. Não precisamos dela no momento. Então o que queremos é movê-lo assim e todo o turno. 1234 Para que você possa se mover com 40 pixels para baixo assim. E vamos usar essas duas setas para que você possa selecionar um parafuso delas ao mesmo tempo. Controle. Veja o controle V para que você não pule o tempo todo. Use este árabe se alinhando no meio para que você ainda possa gostar de ambos alinhados assim . E o que queremos é mais no meio fora do X porque o X é um Eichel maior. Então coloque-o assim e, em seguida, mova este ícone logo abaixo. Assim, até que se alinhe perfeitamente controlado o na mudança de retenção de cor e 12 nós estamos indo dedo do pé filtrar por preço assim e agora você pode mover este e selecionar ambos e alinhar a seta. E a seguir vou usar isto. Então, digamos, por exemplo, 349 control de mais uma vez e neste, digamos 1239 por exemplo, para que você possa espaçá-los uniformemente e você pode, talvez até mesmo assim, e nós para movê-los daqui. 40 pixels para baixo, assim só para ter um pouco mais de espaço. Então, quando eles estão fechados, seus 20 pixels separados e quando eles estão abertos, eles são para ele porque separados apenas para que possamos ter um pouco mais de espaço para respirar a seguir, nós vamos criar um círculo. Então crie um círculo grande e agradável. Talvez 16 com 16, por exemplo, foi remover a borda e para a cor Vamos usar neste. Sim, e nós vamos alinhá-lo com este texto, ou você pode selecionar ambos e você olhar para que nós vamos saltar para o nosso feitiço camada mais uma vez e nós vamos alinhá-lo com este texto, ou você pode selecionar ambos e você olhar para que nós vamos saltar para o nosso feitiço camadamais uma vez , , controlado profundamente, e certifique-se de que você está no meio com este, assim como este e nós vamos colocar uma espécie de ah linha do tempo por trás disso. Então, como vamos fazer isso é usado um retângulo e crescer ir a partir da borda do dedo do pé como assim remover a borda para o raio do canto. Vamos usar cinco. E pela cor. Vamos usar este, por exemplo. E acho que parece bom. Só precisamos movê-lo para baixo. Então vamos chamar de linha do tempo. Por exemplo, movendo-se abaixo do controle G em todos eles. E você pode até filtrar os meus preços. Então, como este e mover este preço para cima adorável chorou aqui e nós estamos indo para digitar, por exemplo, deslizante todo o intervalo , como você quer chamá-lo. E dentro temos dois círculos e nossa linha do tempo. Ou talvez possamos, por exemplo, digitar. Organize Bijie. Digamos assim e vamos agrupar todos eles. Então, selecione o preço, selecione esta seta e selecione todos estes controle G e vamos agrupá-los por preço . Em seguida, queremos movê-lo todo o caminho para baixo e ordenar algumas dessas camadas para cima um pouco. Então barra estágios bem aqui fomos para escolher filtros e fechar movendo-se para cima assim. Então, seta para cima e cor, vamos posicioná-los como então controle G. Então esta é a nossa cor. E vamos usar, por exemplo, controlar D neste e movê-lo para baixo. Só um toque. Então segure o turno até eles se alinharem com o fundo dos nossos círculos assim. Então mude 1234 E fomos usar materiais como este. E nós precisamos de uma seta para baixo aqui para que você possa clicar dentro do controle, ver e pular dentro dos materiais bater controle V e então nós vamos mover esta seta assim até que ela alinhe com a nossa seta para cima. Então, exatamente assim. E nós estamos indo para o pé. Colocá-lo como assim excluir, seta como assim E o que queremos criar insight é algo como uma seleção rápida. Então eles podem selecionar, por exemplo, coágulo de letra, alguns outros materiais , por exemplo, Sky ou qualquer material que há em oferta, e nós vamos precisar das pilhas. Então controle profundo, mova-o para fora da pasta. E, mais uma vez, para gostar desses materiais, você vê por que é importante nomear todas as suas camadas e grupos, então solte-o à vista e à posição. É assim e, na verdade, é uma questão porque queremos criar um quadro. Então clique duas vezes aqui digitando uma letra e fazer o controle D e movê-lo assim. E talvez queiramos criar um coágulo como este. Então o que queremos é criar nosso retângulo em torno dele para que as pessoas possam selecioná-lo, e quando o fizerem, ele criará retângulo básico em torno dele. Então talvez queiramos criar um retângulo como este e talvez digitar. Por exemplo, 80 meu perú. Digamos que vamos remover a cor de preenchimento e para a borda, vamos usar essa mesma cor. E agora vamos posicionar a visão da carta assim e assim. Então está no meio de todos fora dos sites, e agora vamos usar esses dois. Então vamos chamá-lo de uma moldura e uma letra e o pano para bater logo abaixo. Então estes dois selecionam-no, movem-nos até encontrarem com o nosso texto, assim para os pixels para baixo e usarem o coágulo e posicionem-no no no meio e talvez até movê-lo. Vamos ver assim 1234 peças à direita e em seguida, precisamos de mais duas seções. Então vamos usar a cor tão controlada profunda e não temos que criar outra instância dela, possamos usar exatamente a mesma instância. Então use a cor. Mas, por algum motivo, selecionou o texto. Deixe-me corrigi-lo rapidamente. Então, dentro da cor, temos um controle Barroso profundo. Fui descê-lo até encontrarem a luz aqui. 1234 E isso vai ser nosso lavável. Então, o produto é lavável ou não? Significando mais a capital na frente assim e precisamos de mais uma instância. Então, controle D e quer mover este. Então, até que eles se encontrem , como uma ferramenta, se você lembrar porque está fechada, não aberta. E isso não será mecanismo. Então, por exemplo, porque escolhemos o sofá aqui, vai ser um mecanismo? Então, você pode se retrair? São colapso ou algo assim, ou é apenas sofá fixo e você começa o que você pagou. É isso. Você não pode movê-lo. Você não pode estender ou colocá-lo de outra forma. Então isso é basicamente o que é o mecanismo é que eu tenho sido rapidamente verificar se estes on-line. Sim, eles são. E uma última coisa é pedirmos dias e criarmos o fundo. Então vamos começar do topo com filtros de ar, fechamos. Cor é o primeiro preço é o segundo material é o TERT e isso deve ser lavável, assim E finalmente, este é um mecanismo como este e uma última coisa. Queremos criar um botão aqui. Então vamos usar tudo fora da inteligência como então vamos dar o pé. Escolha esta cor porque é agradável e parafuso, vamos digitar Bt N, que é abreviação de botão, e vamos posicioná-lo, por exemplo, para pixels. Mas vamos primeiro usar as dimensões que é usado? 335 com 50 e eu vou usar cinco para o raio do canto. E então eu vou movê-lo 40 peças acima deste indicador doméstico, e finalmente eu vou precisar de apenas um texto. Então vamos usar filtros texto tão controlados, mais gravados até o fundo e talvez, por exemplo, lidar assim mais à vista, filtros permanecerão no topo. Isto vai ficar no fundo assim, e isto vai ser branco. Nenhuma visão rápida e nós vamos escrever, Aplicar alegria seleção. Certifique-se de que ele está no centro e certifique-se de posicioná-lo assim e como assim para que ele está perfeitamente no centro e você também pode agrupar. É tão controle D inferior, e é isso para a nossa tela. Como você pode ver, é realmente bastante simples porque todas essas seleções repetem umas às outras a mais unção sobre Não apenas isso, obviamente, mas qualquer software é que coloca todas as camadas no topo. Eu realmente não sei se você pode corrigir um pouco disso e se você pode encomendá-los de baixo. Mas, em qualquer caso, mesmo que você possa, na maioria dos casos que você tem reboque, ordená-los você mesmo, modo que é o bit mais demorado. Se você quiser ficar limpo n arrumado. Se não o fizeres, é mesmo contigo. Então, por exemplo, se ele está fazendo alguns arquivos de prática ou você está enviando para arquivos para um cliente e você quer passar mais tempo no final antes da entrega final para o cliente. Então está tudo bem. Você não tem que nomear todas as suas camadas e posicioná-las como eu fiz ao longo deste projeto . Mas é realmente preferível se você fizer isso porque os desenvolvedores ou te amam e ele vai cortar o seu trabalho mais tarde quando se trata de quando chega a hora de entregar arquivos finais tipo final para o seu cliente e para seus desenvolvedores no próximo vídeo, Vamos projetar tela de combinação de sala, então eu vou te ver lá. 12. Crie quadros de wireframes 4: para a tela de combinação errada. Tudo vai ser muito simples, então clique em filtros de concerto. Clique direito. Vocês copiam guias, certo? Clique em guias com base. Porque vamos usar os mesmos guias. Clique aqui no ícone de roupas Controle C controle aqui. E então vamos usar isso de volta. Controle de seta. Vês? Saltando para dentro. Clique aqui. Controle V. E fomos movê-lo assim. Soto, esta borda esquerda e esta pipa esquerda e queremos alinhá-la com nosso ícone de roupas. Então não é assim. Certifique-se de que é 20 picaretas é do topo, e finalmente nós estamos indo dedo do pé excluir nosso ícone de roupas. Então é muito simples. Basta mover esses elementos e usá-los como estão. Então vamos fazer o mesmo para os filtros. Então controle, veja, controle a direita aqui, certifique-se de que está 40 pixels abaixo. Então 1234 adulto como aqui, vamos falar sendo sala de estar porque esta sala vai ser a nossa sala controle D e fazer outra cópia. E aqui vamos escrever em produtos usar assim porque agora vamos criar um cartão que vamos exibir nossos produtos que são usados dentro desta combinação de sala . Então agora vamos criar um plano de fundo. Então use um retângulo. Eu removi a borda e para a cor de nós vamos usar esta cor E b e p, e nós vamos usar cinco para o raio do canto e para as dimensões permite que você rua 10 com 80, por exemplo, vamos colocá-lo Então, por exemplo, 40 pixels para baixo assim. 1234 E vamos usar 20 peças acima para este texto. Então, 12 em seguida, precisamos de algum texto. Então vamos saltar rapidamente para aqui. Selecione estes textos ou controle, Veja saltar aqui. Controle V e você pode colocá-los aqui. O que queremos é criar um nome para o produto, então o nome e o público aqui, e vai ser um preço. Então, por exemplo, é apenas usado 24 por enquanto. Em seguida, podemos usar esses círculos. Então controle, veja perto de tudo isso acima controle V e simplesmente posicionado círculo aqui e o que queremos é Sim, vamos usar este para o 1º 1 controlado o e talvez 20 pixels controlados o talvez 26 ponto isso e eu simplesmente quero criar algumas cores diferentes. Então é usado um pouco de cor acastanhada, como talvez assim. E finalmente, para este, vamos usar alguma cor avermelhada. Então, talvez assim? Sim, acho que parece bom. E o que queremos é espaçá-los uniformemente. Então posicionamento como este turno 12 e fazer o mesmo pelo preço. Então, mude 12 para baixo, e então você pode selecionar todos eles para que ele possa selecionar todos os círculos, controlar G, selecionar o plano de fundo e simplesmente fazer isso para que você possa posicioná-los bem no meio . Agora, você pode clicar duas vezes aqui e digitar quatro, por exemplo, porque essa é a informação básica sobre nossos produtos. Então vamos digitar a cor três, movê-lo para baixo. Esta vai ser uma chamada. Isto vai ser colorido também. E finalmente fomos colocar o nome aqui mesmo. Preço abaixo. Como você pode ver, exatamente como é encomendado. Isso vai ser BG ou você pode chamá-lo de cartão BG se você quiser Talvez colocar não linha como esta. E finalmente, vamos colocar toda essa barra de status para baixo no topo. Então seta para trás vai ser logo abaixo da barra de status produtos usar vai ser bem aqui e sala de estar bem aqui. Então, agora que temos isso, nós só precisamos de um pedido de lugar para a nossa imagem e para fazer deixar você pode simplesmente duplicar este RPG tão público aidc dizer bastante ouvir essa imagem e você pode escolher colarinho branco assim e para as dimensões. Vamos usar 40 com 162% e vamos ficar no meio assim e talvez movê-lo . 10 pixels como este. Agora que temos nosso cartão, podemos agrupar tudo isso. Então controle G digitando cartão um e acima controle D e você pode mover, descartar se você quiser, então movê-lo como para garantir que eles alinham e fazer deslocamento seta para a direita duas vezes para que você tenha 20 pixels são parte. Agora isso vai ser cartão também, e esta tela está terminada então agora vamos usar Quando começarmos a projetar esta tela, vamos usar uma dimensão de fundo para preencher a totalidade fora da tela, e vamos usar produtos separados dentro dessas imagens. Estes serão nomes fora dos produtos dentro das imagens e os preços, bem como as cores. E as pessoas podem clicar aqui, e ele irá levá-los para o item selecionado, se quiserem. E de lá em diante, eles podem ter o carrinho do pé se assim quiserem. Então, no próximo vídeo, vamos projetar itens selecionados e itens selecionados ajustados telas porque eles são basicamente dois fora exatamente da mesma tela e eles têm apenas alguns elementos diferentes entre eles, então veja lá. 13. Criação de quadros 5: Então vamos começar com itens selecionados Tela. Então, à direita, clique neste. Guias, guias de cópia, item selecionado, clique com o botão direito guias baseadas. E o que queremos é selecionar esta seta. Então controle C controle V porque ele vai estar exatamente no mesmo local. E então você pode selecionar todo esse controle. Veja, Controle V e, em seguida, eu estou agrupá-los e apenas deixar no ícone de ordens no lugar, realmente todos os outros, e simplesmente movê-lo até que ele se encontre com o nosso guia. Encomende um pouco melhor. Como assim mover Cities bar no topo. E o que queremos fazer agora é selecionar algum texto para que você possa selecionar esses dois. Por exemplo, Controle, veja pulando aqui. Controle V. E podemos deixá-los assim por enquanto. Naquela semana, bem aqui. Está escrevendo o nome do produto bem aqui. Vamos escrever em uma linha de texto para não, e podemos movê-la. Assim, por exemplo, 10 pixels para baixo controlado profundamente. Faça outra cópia como assim 10 pixels para baixo. E este vai ser o nosso preço. Então, no 24, por exemplo, e talvez possamos encomendá-los um pouco melhor, como então moveu-o para cá. E o que queremos fazer agora é criar uma imagem, e podemos criar uma imagem usando um retângulo e apenas posicioná-la um pouco melhor, assim, assim, certificar-se de que é 375 que é o peso da nossa tela removido. Border salto aqui para os ativos vai ser a cor CB dizendo, para todas as nossas imagens, Belka bastante aqui digitando imagem. Ou você pode digitar imagem de herói, por exemplo, e B. G porque isso vai ser apenas um plano de fundo e vamos colocar uma imagem PNG sobre ele, que é a imagem sem qualquer fundo, e você vai ver como isso se parece. Assim que chegarmos à parte de design deste curso, certifique-se de que é 468 e altura assim, e certifique-se de movê-lo 20 pixels desses ícones como este e certifique-se de fazer o mesmo para esses textos. Então, talvez com 20 peças como então agora vamos precisar estender este nosso porto todo o caminho para baixo, e você pode fazer, por exemplo, 1706 Vai ser suficiente e movido indicador home para baixo como assim Próximo acima. O que queremos criar é uma cor um tamanho e talvez escrever algo como sobre o produto aqui para que você possa usar exatamente este mesmo texto tão controlado D e posicioná-lo 40 pixels para baixo daqui. Clique duas vezes dentro e digitando cor, e queremos copiar essas cores para que você possa pular dentro do cartão. Uma informação. E talvez devêssemos agrupar estes e eles o nomearam para colorir e fazer o mesmo para o outro cartão. Então pule dentro do G controlado não rápido. E é por isso que eu continuo dizendo que é realmente importante nomear todas as suas camadas e grupos porque vai ser muito fácil para você navegar um pouco mais tarde quando você tem realmente um monte deles, então selecione todas elas, agrupou-os e moveu-os como assim em seguida queremos criar um tamanho para controlar d movê-lo, e logo abaixo de modo 1234 A visão semana. Eu tenho tamanho de feijão e vamos fazer mais um e 1234 o que vamos escrever aqui é sobre o produto e abaixo. Vamos escrever algumas informações sobre o produto. Mas antes de o fazermos, vamos rapidamente selecionar isto de modo a controlar. Veja o controle. Nós aqui e talvez possamos criar algo como 49 centímetros porque isso vai ser para a cadeira. E talvez possamos digitar, por exemplo, 59 centímetros e vamos criar um quadro em torno dele. Então vamos usar algo como, vamos criar um quadro primeiro e, em seguida, usar algo como 64 semanas 30. Acho que funciona muito bem. E para a cor do quadro, vamos escolher essa cor como fizemos antes de saltar para a camada. Passe tudo e digitando enquadrar sua composição, o texto dentro do quadro um pouco melhor para que você possa selecionar o texto e certifique-se de posicioná-lo no centro como este e assim, em seguida, certifique-se de mover este todo o caminho aqui e certifique-se tudo isso é uma linha no centro com o nosso tamanho. Então com talvez 12 e certifique-se de que todos eles estão exatamente na mesma linha como esta. E mais uma vez, certifique-se de que está 40 pixels do topo agora com quadro selecionado, então certifique-se de que é assim. Então 1234 e faça o mesmo para o sobre o produto. Porque agora os tamanhos aumentam porque criamos este quadro. Então, 12 e 40 pixels daqui. Em seguida, vamos criar uma imagem que irá logo abaixo aqui para que você possa copiar esta imagem. Então, baixa mover-se com todo o caminho para baixo e para as dimensões usadas 375 e talvez para 16. E certifique-se de que está 40 pixels abaixo do texto. Então 1234 assim. E agora o que precisamos é de outro fora destes. Então outro título te controlava. Posicione-o assim e talvez escrevendo, por exemplo, confortável e elegante, e vamos mover isso para baixo para os pixels. Então 1234 e precisamos de um texto assim tão controlado e colocá-lo aqui, assim. 12 talvez, e criar um texto de área. Certifique-se de que sua área é todo o caminho de guia para guia e movê-lo logo abaixo como este, e nós vamos usar o plugging Então, mais uma vez, um monte de gesso, Philip Place ou um texto inserir texto. Talvez possamos ter seis filas fora do texto. Então 1234 cinco e seis e talvez conduta vazamento aqui e terminou bem aqui. E talvez possamos incluir mais uma imagem tão controlada e posicioná-la 40 pixels iguais . Então, e para este, vamos usar diferentes dimensões. Então 335 com 2 16 vamos dizer sim, e ter certeza de que está 40 pixels abaixo é, e para estes usariam 0550 Então o que fizemos lá foi nós em torno dele, estes dois cantos e estes dois permaneceram os mesmos. Então, finalmente, selecione este controle D e com 40 peças para baixo Então 1234 assim. E, finalmente, digitação rápida e maçante projetado com o usuário em mente algo assim. E Derek, criamos nossa tela de itens selecionados. Uma última coisa que eu quero fazer é agrupar todos eles e ordená-los um pouco melhor. Então vamos usar isto isto isto e este Control G. Eu fui imagem de herói porque mais uma vez vai ser a nossa imagem principal e podemos mover barra de status e esses dois ícones todo o caminho para fora na imagem de herói superior logo abaixo. Vamos selecionar cores tão coloridas e isso vai logo abaixo da nossa imagem de herói. Em seguida, temos tamanho e você pode selecioná-los assim, se quiser. Então controle o tamanho da digitação G. Mova-os aqui sobre o produto. Lugares como este. Então esta é a nossa imagem. A cópia rápida Uma cópia. E nós vamos colocar esta imagem logo abaixo aqui, confortável e elegante como esta. E controle G. Cole C e apresentador elegante. E você também pode agrupar esses dois, então basta mover a imagem para o controle G. E, finalmente, isso é projetado com usuários no meu e esta tela está concluída. Agora, o que podemos fazer é clicar duas vezes aqui. Amplie isso para baixo. Apague este direito. Clique em guias, Copiar guias, clique com o botão direito. Eu faria guias espaciais. E agora vamos selecionar tudo, exceto para a barra de status e indicador de casa ou porque excluímos indicador de casa. Podemos usá-lo também. Então segure o turno. Selecione tudo, controle. Vês, saltando para dentro do Controle V e vais colocar tudo na mesma posição que estava aqui. Agora o que vamos fazer é quando os usuários selecionarem qualquer um deles. Então, vamos saltar rapidamente para dentro e estamos indo para o pé. Simplesmente esconda esta moldura porque não precisamos dela. Por enquanto, ele vai aparecer nesta tela para que eles possam, por exemplo, escolher esta cor e ela vai aparecer aqui, e esta imagem vai encolher para o topo e um botão será introduzido direito Aqui. Então vamos começar com a imagem. Então vamos reduzir seu tamanho 2435 percenter. Mas certifique-se de selecionar apenas imagem para 35 para que ele não afete nada além da imagem em si. Então, o que queremos fazer agora é selecionar esta cor para controlar D e talvez aumentar seu tamanho mantendo o deslocamento antigo e clique esquerdo. E nós vamos simplesmente remover e Phil incluir a borda e talvez torná-la um pouco maior , como então zoom out e você pode ver como isso se parece. O tamanho é sempre selecionado, então talvez possamos movê-los para o topo. E ele organizou isso um pouco melhor. Então 1234 E o que precisamos incluir agora é o fundo. Então é como este Controle. Veja saltar aqui, controle V e simplesmente movê-lo para os pixels para baixo. Então 1234 E o que queremos é esconder sobre o texto do produto. Você não pode vê-lo de qualquer maneira, mas apenas para ter certeza que ele está escondido da vista. 1234 Como você pode ver, temos 43 pixels agora, mas está tudo bem porque não queremos distorcer nenhum desses mais tarde porque você só quer mantê-los como estão. Este botão aparecerá assim que atingirem algo daqui. E uma última coisa que eu quero fazer é apenas certificar-se de que este é o controle de cores selecionado, Veja, porque eu quero usar exatamente a mesma camada nesta tela. Então controle v e certifique-se de que você está no meio aqui no meio aqui, acima da cor, também. E simplesmente escondê-lo porque mais tarde, quando iniciarmos nossa animação, vamos usar ecstasies de adobe, recurso de animação automática, e para que ele funcione corretamente, você precisa ter todas as camadas em exatamente no mesmo lugar e nomeá-los corretamente porque ele não vai funcionar como deveria de outra forma. Então é basicamente isso para esta tela. No próximo vídeo, vamos começar com os detalhes do pedido, e como você pode ver, assim que você tiver alguns itens na ordem, tudo funciona muito mais rápido. Tudo se moveu um pouco mais rápido, e você pode encomendá-los como quiser. E vai tornar-te um trabalho muito mais fácil, por isso vemo-nos nos próximos tempos. 14. Crie quadros de fios 6: Vamos agora passar para a próxima tela, que é os detalhes do pedido. E o que queremos fazer é selecionar este botão nosso controle. Veja para lidar com isso. Controle, temos aqui mesmo. clique direito, guias de cópia e guias de clique direito guias baseadas. O mesmo líquido em todas as outras telas. Em seguida, o que queremos é um texto e deixar rapidamente encontrar o texto que eu quero. Ou talvez possamos selecionar este. Então nome do produto e uma linha de controle de texto Veja bastado aqui. E o que queremos fazer é posicionado assim e aqui vamos escrever no total. E por aqui, vamos escrever detalhes do pedido assim. E eu vou posicionar total aqui ou os detalhes como estão e colocá-los. 123 40 pixels para baixo. Em seguida, vamos criar três cartões diferentes e um botão abaixo, porque queremos exibir o dedo do pé o que é adicionado dentro do nosso carrinho. E estes são os detalhes do nosso pedido. Primeiro, vamos criar o cartão. Então eu vou desenhar rapidamente um retângulo removido a borda. Ele era da mesma cor para tudo isso. Então é este. E vamos dar de acordo com o Raio Cinco e usado 3351 47 para isso e eu vou pisar em torno dele. Então mova-o para cá. 1234 e dado 40 pixels. Tão bom Big gap bem aqui. Em seguida, o que queremos é criar uma imagem dentro. Então eu vou apertar o controle em D para duplicar este. Vou torná-lo branco. Basta reduzi-lo um pouco e talvez tenha usado dimensões de 40 que, digamos 1 a 2, algo como dívida. E vamos fazê-lo assim no meio e posicionar pode ser, sim, 10 pixels da esquerda. Agora, o que precisamos criar aqui é o nome, preço e quantidade. Então eu vou simplesmente selecionar esses, controlar profundamente para duplicá-los e, em seguida, movê-los para baixo, saltar para a minha camada ortográfica apenas para que eu possa ver o que estou fazendo. Eu vou mover estes dois para baixo, e nós vamos começar encomendado estes em apenas um segundo, mas seu primeiro rapidamente criar um nome que seria nome fora de nossos produtos. Este vai ser o preço, Sula. Escolha 24 por exemplo, E, finalmente, aqui abaixo. Vamos criar um quadro simples com o número dentro, bem como a seta. Então eu vou usar um. E o que precisamos é de uma seta para baixo para saltarmos aqui. Selecione o controle de seta para baixo, Veja, Saltar de volta no controle , retomou, basted e podemos posicioná-los na mesma altura. Então, assim e o que precisamos criar agora é esse quadro. E para fazer isso, será realmente um quadro simples. Então vamos usar um retângulo para e criar um quadro simples sem sentir apenas cor da borda e para cor da borda. Podemos usar esta cor aqui. Agora, para o quadro, podemos usar, por exemplo, Turquia por 30 algo assim. Tão bom, grande. E vamos fazer dois amigos. Então controle D e certifique-se que eles se sobrepõem bem aqui. Então não como este lado a lado, mas então eles se sobrepõem e nós não vemos esta linha aqui. Então eu vou posicionar esses dois no meio assim posicionar a seta bem aqui e posicionar o número bem aqui no meio. Então o que temos aqui é que temos o nome do produto. Temos o preço do produto e temos a quantidade para que eles possam clicar aqui e escolher. Então isso é bom. Por exemplo, como explicado no vídeo quadros de arame imprimíveis. Se eles querem escolher quatro cadeiras, por exemplo, eles podem fazê-lo a partir daqui. Se eles querem, por exemplo, comprar vasos. Talvez queiram seis. Se eles querem cinzeiros e itens menores, eles podem escolher, que são quantidade que eles querem. Então, quando eles clicarem nesta seta pop-up, Della irá aparecer, e então eles serão capazes de selecionar quantos itens quiserem. Então, vamos pedir rapidamente estes. Então vamos escolher quadro direito o mesmo aqui. E vamos pedir isso rapidamente. Precisamos que estes estejam aqui, um acima deste, e precisamos da nossa seta para baixo acima desta. Então patrulha para agrupá-los e talvez possamos escrever em quantidade a seguir, precisamos de preço que vai acima, e precisamos do nome , que vai acima, vamos movê-los até o fim. Então o que temos aqui é imagem e finalmente cartão VG para que possamos saber qual camada é qual. Em seguida, podemos selecionar estes, torná-los uma linha à esquerda, e talvez possamos brincar com tanto espaçamento. Então vamos posicioná-lo assim até que eles se encontrem aqui, 10 pixels e façam o mesmo para esta parte inferior. Então, como aqui, 10 pixels também. Selecione o velho e controle G e selecione BG e selecionado e simplesmente posicioná-lo no meio em groupies e o que queremos é reboque. Alinhe-os com a borda direita fora da imagem e simplesmente aperte 123 quatro ou talvez até dois. É bom o suficiente por enquanto. Então, como eu expliquei nos vídeos anteriores, este é apenas um quadro de arame, então você pode adicionar todos esses elementos à medida que você avança como suas imagens. Às vezes, se formos sombras, você tem que aumentar os espaçamentos e depois voltar e aumentar os outros. Mas porque criamos estrutura de espaçamento constante, então temos geralmente 10 20 ou talvez quatro pixels entre os elementos. É muito fácil para você, então, saltar para trás e reposicioná-los, se necessário. Então vamos agrupar rapidamente todos esses Controle G e chamá-lo de cartão um, por exemplo. Em seguida, quero encomendar alguns destes. Então nós temos escadas estavam no topo, nunca apenas abaixo ou os detalhes total. Temos a carta um. Controle o e controle, de fato, mais uma vez. Então eu vou mover esses dois um pouco para baixo até que eles se encontrem bem aqui. Shift 1 para 20 pixels chamado este cartão para e, finalmente, para perturbado um fazer o mesmo 12 E o que precisamos, finalmente, é um botão. Então vamos usar esse controle de botão. Veja o Controle V aqui. E o que vamos escrever aqui é proceder ao pagamento, porque se os usuários estão satisfeitos com sua seleção, eles vão proceder ao pagamento, e então na próxima tela eles vão escolher suas opções de pagamento. Então é cartão de crédito ou PayPal, e essa é a tela que vamos projetar a seguir. Então eu vou ver lá 15. Crie quadros de fios 7: Então, em seguida, vamos criar uma tela de pagamento. Então eu vou dedo direito Clique neste guia Copiar Guias. Assim como todos os outros. Você pode acertar guias baseados e o que precisamos no topo é apenas uma seta para trás para que possamos selecionar este aqui. Você pode aproximar um pouco mais se você pode acertá-lo para controlar o controle do mar. Nós aqui, que vai ser a única opção para voltar a esta tela, e você pode abortar indo ao menu a partir desta tela e indo para casa ou qualquer outra tela que é oferecido. Vou copiar esses dois para controlar o controle C. Estamos aqui, bem aqui. Eu vou escrever em pagamentos e neste, eu vou simplesmente escrever cartão de crédito, e eu vou movê-lo para baixo, então ele vai estar nesta mesma linha, e vai ser 40 pixels e para baixo. Então 1234 e na linha certa vamos escrever. Adicione. Então controle D nele. E como nosso cartão de crédito iria abaixo disso aqui se eles clicarem em editar, eles terão a opção de mudar o cartão de crédito e mover algumas informações . E se o cartão de crédito expirou, eles podem adicionar um novo. Ou podem mudar o código CBC e algo assim. Então essa será a nossa opção. E agora vamos projetar o cartão de crédito logo abaixo disso e a opção PayPal abaixo da dívida . Então é ótimo retangular, e vai ser 335 igual a todos os outros, mas com 180 e vamos mudar a cor para algo mais escuro usar canto, raio ou cinco. O mesmo que fizemos para todos os outros. Vamos saltar na camada de reboque especial e eu vou nomear este carrinho de BG como Então fume Leap assim e eu vou movê-lo. Digamos 20 pixels para baixo. Então 12 e nós vamos selecionar isso para controlar filme de controle C e colocá-lo aqui, saltar para trás e usar branco porque todo o nosso texto vai ser branco à vista. Então eu vou posicioná-lo assim, e é bem, nós vamos entrar, selecionar o controle do logotipo Visa dela. Veja, pule direto e aperte o controle V no carrinho pulando. E talvez possamos deixar como está. Então mude 12 para baixo, um para a direita, e o que queremos fazer é reposicionar alguns desses. Então, para este, vamos usar algumas estrelas. Então o que isso vai fazer é criar uma simulação de que há números atrás dessas estrelas. A mesma coisa que você faz em todos os outros cartões quando você está comprando coisas online. Então eu vou criar quatro cartas para estrelas e, em seguida, simplesmente acertar o espaço, por exemplo, quatro vezes. Então 1234 talvez cinco. E então eu posso fazer a seleção aqui mesmo. Controle. Veja a direita Controle V Controle V. E, finalmente, para este último. Vamos usar, por exemplo, 1234 Digamos que sim. Isto vai simular o número do nosso carrinho. Em seguida, controle D duplicar o mesmo texto de clique e digite o nome do titular do cartão assim, E vamos imaginar o nome é John dope. Digamos que é realmente fácil e simples de lembrar. Vamos selecionar todos estes e torná-los uma linha à esquerda e mais uma vez. Então mude 12 e não se preocupe com as posições. Talvez possamos mudá-lo agora. Então 10 pixels e 20 pixels da parte inferior, então queira. E você poderia posicionar isso, por exemplo, aqui para que você possa ver que algo por aqui vai estar no meio. Você pode ser preciso se quiser, mas não vamos atolar com detalhes. Então os escolhidos para controlar D e eu vou colocá-los aqui mesmo. Então isso vai escrever no prazo de validade. Amber Odette. Vamos escrever um encontro. Então digamos segundo meses de folga, 2025. Digamos que algo assim o faz espaçamento, fazendo bons e claros 20 pixels da direita e pronto. Criamos nosso cartão de crédito Visa. Se você quiser. Claro, você pode mudar a cor deste cartão. Você pode adicionar uma sombra para torná-la um pouco mais atraente. Mas para este estágio fora do nosso processo, vamos apenas deixá-lo como é realmente feliz como isso acabou, e agora vamos rapidamente organizar alguns desses detalhes para que estes vão logo abaixo do nome chamado nome Holden iria até a data de validade Assim, Cartão BG e Controle G. Isto vai ser ou cartão de crédito como Então, em seguida, temos que criar a mesma coisa, mas para as pessoas. Então, vamos escolher estes dois controle profundo e posicionado apenas aqui. Então 1 a 20 pixels controle de sobre os cartões duplicados. Certifique-se de que você tem 20 pixels. Então exatamente o mesmo aqui. Não precisamos de uma data de validade porque o PayPal não a tem. Então vamos deletar esses dois. E em vez de o visto ter ocorrido, vamos substituí-lo pelo logotipo das pessoas. Logo localizado aqui. Controle selecionado. Vê? Pule bem aqui. Clique quando o visto excluir Control V e certifique-se de sua posição exatamente no mesmo local que você fez com o logotipo do visto. Então mude para a direita 22 o 20 de baixo e pronto. Basicamente, você completou seu trabalho. Olha, vamos mudar rapidamente a cor para diferenciá-los um pouco. E vamos usar talvez isso para as pessoas um logotipo, e eu gosto de como isso se parece, então vamos escrever em papal bem aqui. Assim. E em seguida, vamos duplicar este controle de botão C. Estamos aqui e digitando. Faça um pagamento. Então vamos deixar isso aqui, fazer um pagamento, e é basicamente isso. Criamos nossa tela. Vamos mover rapidamente algumas dessas camadas. Então status emprestado. Vá para o topo. Temos flecha de volta. Logo abaixo. Temos pagamentos. Aqui está. Temos cartão de crédito e editar, que vai logo abaixo do registro de pagamento acima, então aqui, bolachas. E então temos este texto que deve escrever em pessoas assim e nele. Logo abaixo temos PayPal e finalmente temos o botão. No próximo vídeo, vamos projetar, armazenar, localização, localização, tela, onde vamos incluir um mapa e algumas funções básicas abaixo. Então eu te vejo lá. 16. Crie quadros de fios 8: Agora vamos rapidamente ir em frente e terminar este processo de enquadramento de fios com locais de lojas e , finalmente, um menu. Então vamos começar com os locais das lojas. Então, a mesma coisa, grandes guias de cópia. E talvez você possa selecionar ambas as guias de clique direito e guias baseadas. Agora, eu poderia fazer isso no início, mas às vezes você nunca sabe se você quer mudar alguns desses. Então, é uma maneira mais fácil de ir um por um. E então não ter que perder tempo e voltar e fazer algumas mudanças que você não queria em primeiro lugar. Então vamos começar o que nossas roupas tão selecionados a partir daqui. Controle. Veja, pule bem aqui. Controle V. Em seguida, temos o ícone de busca, que precisamos de controle. Vês? Pule bem aqui. Controle V. E eu vou posicioná-lo bem aqui nesta borda. Certifique-se de sua posição como ele gostaria disso. E o que precisamos é de alguns textos básicos ou usar este. Controle C controle V e certifique-se de que está no meio desses como este e certifique-se de que todos eles nossa posição como deveriam. Então certifique-se de que você está 20 pixels abaixo, como nós fizemos. E certifique-se que isso é 20 peças para a direita dos ícones fora da porcaria 12 e digite em lojas ou até mesmo seus locais de busca, que tem muito mais sentido como este. E, finalmente, o que precisamos é de uma linha abaixo, que você possa criar um uso de linha em vital. Mas eu gosto de criá-lo usando camadas de forma que sempre podem me trazer de volta. E eu sempre posso ajustá-los e mudá-los depois, se eu quiser. Você pode selecionar isso ou você pode simplesmente clicar aqui. Vamos ver. E talvez pela altura que possamos aguentar ser um. E como você pode ver, nós temos nós mesmos uma linha tão alinhados para o fundo fora desses ícones deslocamento 12 Certifique-se de que você tem o mesmo espaçamento de antes, e nós terminamos com isso, então talvez possamos criar alguma ordem. Então a linha mova todo o caminho para baixo. Então nós temos, assim, fechou esta pesquisa e agrupá-los todos juntos, e talvez possamos escrever em Search Bar Realty apenas para que possamos ter um pouco mais tela organizada a seguir, podemos criar o parte inferior da tela. Então vamos selecionar um retângulo assim, usar cinco como, borda tão removido e usar singular como fizemos para todos esses outros. O que queremos a seguir é escolher algum texto para que você possa escolher isso neste controle. C controlar nós e certifique-se de colocá-los aqui dentro, então localmente chorou aqui e digitando. Por exemplo, Bell Grande loja. Isto vai ser uma rua, então vamos chamá-lo assim. Claro, você pode escrever em qualquer rua qualquer cidade que você quiser, mas angústia porque é em Belgrado, Control de e finalmente aqui em ter o mesmo espaçamento, duplo tipo rápido em. Mais detalhes controlam um e hit subjacente porque este vai ser um link simples. Pode ser uma mensagem pop-up, literal pop up de baixo ou de cima. Realmente não importa nem nada. Ele pode levá-lo para a tela totalmente diferente. Cabe a você e ao seu cliente decidirem. Mas em mais detalhes, as pessoas podem aprender sobre quatro números sobre o endereço de e-mail sobre sites específicos sobre coisas como aquelas para que eles possam acessá-lo diretamente a partir daqui. Em seguida, o que precisamos é de um ícone para a navegação, porque quando eles encontrarem a localização aqui, ele aparecerá aqui e eles podem ver aplacado bem aqui. E ele os levará para o aplicativo preferido, o uso. Então Google mapas, maneiras, mapas da Apple e assim por diante. Então, vamos escolher rapidamente esse ícone. É esse controle. Veja pular aqui, Controle V e o que você quer é criar um círculo simples. Então talvez possamos criar um. Por exemplo, 50 por 50. Que foice é essa. Então 50 por 50. Remova a borda. Certifica-te de que é branco. Salte para as camadas. Painel saltando bem aqui. Digite DoubleClick em círculos. E queremos selecionar esses dois posicionamentos assim. E o que queremos é posicionar isso no meio assim e talvez movido 40 pixels. Então 1234 E talvez possamos encomendar estes um pouco melhor assim. Selecione o plano de fundo, selecione o grupo posicionado no meio. Talvez você possa chamar essa mensagem. Vamos definitivamente criticá-lo. Eu fui consertado assim, e isso vai ser um cartão, BG. Igual a todas as outras. E talvez possamos agrupar todos eles assim, apenas certifique-se de mover estes aqui, controlar G. E você pode até mesmo agrupar as direções vendidas como aquele grupo, todos eles. Então controle G. Este vai ser o nosso carrinho, e você pode movê-lo para baixo e talvez usar 1234 pixels ou 20 pixels. Vamos verificar rapidamente o que fizemos com os outros. Então, neste 11234 Então é 40 pixels e nós fizemos isso corretamente. Como pode ver, está no meio. Parece exatamente igual a todos os outros, e o que precisamos finalmente é criar algumas direções. Agora você pode fazer isso aqui, ou você pode esperar um pouco mais tarde quando você tiver seu design acabado. Mas vamos fazer isso mesmo assim. Então eu vou selecionar este ícone de localização, saltar para o nosso controle de mapa v colá-lo em simplesmente posição. Está em algum lugar por aqui, digamos que use um clique mental logo abaixo dele. Então, assim. Talvez assim, você queira usar algumas informações de rua assim então para que possamos criar uma parte como essa, e o que precisamos é de um círculo, e podemos usar alguns desses círculos que já criamos. Então, para cores, cores seletivas e controle de descor, veja você conjuntura aqui mesmo nesta tela Controle V para colá-lo. Você pode colocá-lo assim, e esse será o seu destino final. Então, usando essa cor e preenchendo com essa cor assim e que vai ser seu destino final. Agora, o que é ótimo sobre este tapinha no Adobe X'd principalmente clique duas vezes sobre ele e você pode mover os pontos que você recebe. Segure o turno. Se você quiser fazer uma parte reta reta como esta, talvez eu queira posicioná-lo assim e talvez até mesmo assim, e o que é ótimo também é que podemos movê-lo uma vez que incluímos nosso mapa apenas para que possamos torná-lo um um pouco mais realista. Se você não gosta de como isso parece, você pode clicar em um animal de estimação e você pode criar em torno mantido, que, se nós ampliarmos, você pode ver que parece muito melhor do que sem por perto mantido porque ele vai simplesmente torná-lo como se você usar, mas Gap. Vai ser um simples erguer, realmente, realmente, como este boné redondo parece. E como todos os nossos ícones têm estas bordas arredondadas, você pode colocá-lo e posicioná-lo muito melhor do que com a tampa da garrafa, como eles chamam. Então é basicamente isso para o local da loja. E vamos rapidamente e finalmente fazer uma tela de menu. Então o que precisamos é deste ícone de fechamento Copiá-lo , recheado exatamente na mesma posição. Também precisamos de um logotipo, então vamos selecioná-lo a partir daqui. Entrar, rebocar nosso controle de tela V. Certifique-se de que está no meio e o que precisamos é de um fundo. Então vamos criar um grande retângulo em torno de toda a tela, removemos a borda. Chame de BG Move. É todo o caminho lá em baixo. Mais tudo isso para cima tão mais movido Mamula e por que criamos isso e fundo é porque queremos criar esta tela como uma sobreposição. Então, quando você cria um plano de fundo, você pode usar todos os tipos de animações diferentes. Por exemplo, você pode usar a cidade obedecer diferente. Assim, por exemplo, você pode reduzir sua cidade de pagamento se quiser e, em seguida, sobrepor toda essa tela sobre as outras telas. Agora, finalmente, o que precisamos é de um monte de texto, então escolha este. Controle de patrulha C V. Certifique-se de que é do centro e certifique-se de que está no centro. Certifique-se de que vai assim, por exemplo, 1234 O mesmo que fizemos com todos os outros. Então é chamado de 1º 1 perfil e você pode bater, entrar e, em seguida, descer algumas linhas. Mas eu gosto de manter meu texto separado porque ele realmente me dá muito mais flexibilidade para que você possa movê-lo para baixo, como assim 1234 E talvez possamos chamar este um de meus pedidos assim. Controle D Em seguida, mova este para baixo. Eu não sei por que ele continua fazendo isso, mas como você pode ver, ele continua escolhendo todos os outros. Mas, no caso, basta selecionar o top quer ou 1234 e, em seguida, posicioná-lo logo abaixo deste. Eu realmente não sei o que isso faz, mas talvez porque eu estou segurando o turno? Eu não sei. Não fazia isso antes. Então, meus pagamentos serão neste. E finalmente, porque precisamos de mais dois, podemos copiar esses dois. Então, minhas ordens e meus pagamentos, vamos mover esses dois para baixo. E como você pode ver, ele continua fazendo isso mesmo se você apenas selecionar duas ou três camadas diferentes. Mas talvez possamos fazer assim. Então mexa só um toque. Selecione estes dois para que todos os turnos e mudou-os assim Então 1234 Isso vai ser configurações como essa. E finalmente temos logout e lá vai você. Terminamos nossa tela. Certifique-se de que estão todos na mesma ordem. E se você não gosta de como isso parece, você pode posicionar este texto para baixo. Então deixe-me selecionar rapidamente todos eles assim. Controle G. E o que eu quero fazer é criar um retângulo simples do fundo do X para o topo do nosso logotipo. Então, como esses dois, e então simplesmente bater bem aqui. Está indo para o dedo do pé. Alinhe-o no meio deste espaço porque o retângulo está preenchendo o espaço finalmente delis, retângulo e, em seguida, mover alguns destes para baixo. Então aqui no grupo e aqui vamos nós. Criamos nossa tela de menu que estava indo muito no processo de design. Reiniciamos a prototipagem das nossas telas e é isso. Nós terminamos nossos arames uma última coisa e realmente importante. Se você não o tiver no auto safe, certifique-se de pressionar Control ou Command s e ele salvará seu projeto. Então você não vai perder nenhum detalhe quando voltar a ele um pouco mais tarde. Mas a Adobe é muito inteligente e está fazendo auto seguro. Então, se você não tem ele habilitado, certifique-se de encontrá-lo nas configurações ou se você não quer e você gosta de mim, gosta de salvar seu próprio trabalho de vez em quando, então simplesmente pressione control ou comando s, e ele vai salve-o no local desejado. Então é isso para a parte de enquadramento branco fora deste curso. Em seguida, na próxima seção, vamos começar com o design. Eu vou mostrar a vocês como a estrutura das imagens é configurada em sua pasta de cavalos de corrida e como você pode usar essas imagens para criar Ah, design de alta fidelidade, que você vai apresentar ao seu cliente, então eu vou vê-lo na próxima parte do curso . 17. Estrutura de imagem: nesta parte do curso, vamos começar a trabalhar em nosso design, mas antes disso, eu só quero percorrer rapidamente as imagens que estão disponíveis para você, bem como a forma como elas estão estruturadas. Então, se você entrar, seu recurso é mais completo e dentro de sua pasta de imagens, essas imagens aqui irão para telas diferentes. Então, por exemplo, esta é a tela de localizações da nossa loja. Isto é para a nossa tela inicial. Estes três são para as nossas imagens de combinação de quartos, e isto é para a imagem superior da tela inicial, e você vai ver nos próximos anos uma vez que começarmos a incluir essas imagens e fazer algumas mudanças e também você tem esses três pastas. Então todas essas pastas contêm imagens diferentes, exceto a cadeira principal e eles R P e G. Então, se eu entrar no sofá, todas essas imagens removem fundos. Então eles são PNG em, assim como você vê aqui, que significa que eles não têm um fundo, e isso também significa que você pode incluí-los em diferentes planos de fundo e sobrepô-los no topo, que eu sou vai mostrar-lhe nos próximos vídeos ST Ng para estas lâmpadas e para esta cadeira principal. Esta é a nossa principal imagem de herói para a tela de itens selecionados, e é um PNG sem qualquer fundo, enquanto estes dois têm fundos porque são apenas imagens de explicação, que vão abaixo desta imagem principal. Então isso é basicamente estrutura de imagem. É muito fácil, muito simples. E no próximo vídeo, vamos começar com a tela inicial, e eu vou mostrar a vocês como você pode incluir algumas dessas imagens, então eu vou ver lá. 18. Criação de design 1: Agora vamos começar a projetar nossas telas e incluir algumas imagens e alguns efeitos diferentes . Então, antes de fazermos qualquer coisa, o que eu gosto de fazer é simplesmente duplicar todas essas portas e arrastá-las e soltá-las abaixo deste quadro de fio, nossa seção de porta. Então, para fazer isso, basta selecionar todos eles, pressione o controle ou o comando D para duplicá-los. Em seguida, basta clicar em um deles e alinhá-los na parte inferior. E o que eu também gosto de fazer pelos clientes porque você sabe o que é. Basicamente, eu também gosto de fazer uma seleção de texto tão rápida, em algum lugar por aqui, digitando armações de arame ou moldura de arame, o que você quiser, torná-lo algo agradável e grande. Então, por exemplo, 100 e talvez até Barba e que talvez 200. Isso é bom. E simplesmente posicioná-lo no meio dessas telas. Então, mais ou menos por aqui, talvez , sim, e você também pode fazer isso como tão principalmente 400. Vamos mantê-lo assim, e você pode apertar o controle D e fazer 400 a partir daqui. Então, assim, e então simplesmente mova essas telas e para baixo e mova-as. Torná-los 400 a partir deste, eu acho que aqui é um bom controle. Zero para encaixar na posição. Dull rápido bem aqui. Digitando design e é isso. Agora o que precisamos fazer é fazer algumas alterações antes de incluir imagens, e eu quero incluir algumas sombras em algumas dessas seções, e eu também quero incluir uma nova cor porque eu falei com o cliente e eles dizem que precisamos respingo fora de cor para esses botões porque eles parecem meio estranho. Então a cor que eles escolheram deixe-me selecionar rapidamente este fundo. A cor que eles escolheram é F C 7, um centro de imprensa 00, e como você pode ver, é uma espécie de cor laranja, que significa que está indo para o pé. Destaque-se dessas cores e indo para simplesmente selecioná-lo e clique aqui, Toe adicionado dedo do pé nossas cores. Você pode pressionar o controle para dizer sobre o seu projeto, porque já fizemos algumas grandes mudanças nele, e agora vamos selecionar esses botões. Basta clicar no dedo do pé da sua cor, aplicar esta nova cor aos seus botões, e o que queremos fazer também é incluir algumas sombras, então eu quero ir direto aqui para este 1º 1 e deixe-me saltar de volta para o meu painel de camadas. Então eu sei qual eu fui selecionado? O que eu quero fazer é incluir sombra Clique aqui, cinco para o eixo X, voar para o eixo Y e 10 40 b acesso para um centro. E o que eu quero fazer é clicar na sombra, clicar aqui no seletor de cores, mas passar para o painel de ativos para que você possa selecionar melhor sua cor. Então, clique no seletor de cores e clique nesta cor. Então é 717171 e clique aqui e digite 25 percenter, porque isso vai diminuir a opacidade dessa sombra para 25% agora. O que você pode fazer é clicar direito copiar, e você pode fazer comando de controle. Clique para selecionar este diretamente porque ele está dentro da pasta. Como você pode ver aqui, clique com o botão direito do mouse com base no Controle dos pais. Clique neste clique com o botão direito na aparência baseada, e isso vai fazer com que todos pareçam iguais. Agora faça o mesmo para a combinação errada, então simplesmente vá em frente e selecione todos eles aparência baseada e, finalmente, faça o mesmo para o vídeo nesta tela baseada pais. Agora vá em frente e feche todas essas pastas, e eu gosto de fazer tudo isso antes. Eu incluo imagens, porque quando você inclui imagens nesses espaços reservados, Adobe SD as tratará como um único objeto. Portanto, você não pode remover essa imagem se você não excluir do titular do lugar ou clicar e fazer algumas vezes. Então eu vou pular e fazer isso. O mesmo para estes. Então simplesmente controle ou comando. Clique e, em seguida, basta clicar com o botão direito e colar aparência Oregon Dough Control ou comando Ault e nós. Mas acho que é mais fácil assim. O que eu também quero fazer é aplicar a mesma sombra aos botões, mas nós vamos colar a aparência nesses objetos porque é muito mais simples fazê-lo para eles porque eles são todos da mesma cor. E se você colar o desaparecimento, ele vai desligar a cor desses botões para cor cinza, e nós não queremos isso. Nós também queremos incluir as mesmas sombras para esses, mas vamos terminar rapidamente com este para colar a aparência. Agora podemos fazer isso para as cartas, então basta bater. Toe o cartão BG bateu sombra salto de volta em seu painel de ativos. Então acerte 55 e 10. Salte para a sombra. Clique aqui. Selecione esta cor 71 em todo o seu 25% básico e faça o mesmo para este final. Certifica-te de que estás no cartão, BG. E se você estiver, salte de volta para o painel de ativos. Selecione a sombra. Então, mais uma vez, 55 10 clique na sombra. Clique no seletor de cores selecionado a partir daqui 25% por cento er E agora o que resta para nós fazer é selecionar exatamente a mesma sombra, mas para esses botões. Então eu vou selecionar este primeiro 1 em uma sombra. Então 55 10 Clique aqui. Clique aqui. Certifique-se de que você está nesta cor. 7171 Certifique-se de 25%. E agora o que você pode fazer é certo. Clique em Copiar e, em seguida, vá para todos os botões e clique na aparência baseada. Agora, não se preocupe em fechar todas as pastas porque agora vamos incluir imagens em nossa tela inicial, por exemplo, mas antes disso, eu preciso fazer mais uma alteração para que você possa clicar aqui, dizer clique no nome fora do aeroporto e simplesmente excluir essas extensões, porque eu realmente não gosto de como ele parece. Parece um pouco confuso, mas simplesmente vá em frente e você também pode fazer isso rápido dentro e aqui. Você pode digitar design, por exemplo, se quiser. Mas eu descobri que é muito mais simples assim porque se você enviar este arquivo para o seu desenvolvedor, que você tem que fazer no final do projeto, eles serão capazes de entender se é, ah, arame ou um design, porque o número um tem imagens. Tem algumas sombras que já adicionamos. Ele tem algumas mudanças aplicadas a ele e também tem a escrita design logo acima. Então, se eu diminuir um pouco, você pode ver aqui para que eles sejam capazes de dizer se é um design ou uma armação de arame. Então, agora que fizemos essas mudanças, você pode bater o controle para dizer este projeto. Vamos agora ir em frente e incluir imagens para a tela inicial, então eu estava zoom em um pouco mais perto. Segure o controle. Clique dentro desta imagem de herói. Você pode fechar esta pasta porque ela está aberta e eu posso saltar para dentro. Nossa imagem é pasta e eu vou localizar a cadeira história arrastar e soltá-lo dentro e você conduzir um clique e ampliar esta imagem assim, e você pode posicionar a cadeira como então clique em qualquer lugar fora e para torná-lo um pouco mais atraente para o olho. Basta clicar aqui e selecionar no painel de ativos a cor branca para este texto inferior , porque isso fará com que ele fique um pouco mais de pé. Mais uma coisa que eu gostaria de fazer é selecionar o círculo de paginação inicial e remover a cor do campo incluído a borda e para a cor da borda Simples selecionar branco porque isso vai torná-lo se destacar um pouco mais desses elementos dentro. Em seguida, temos que criar a seção mais popular e preenchida com imagens. Então o que eu gosto de fazer é clicar duas vezes dentro deste nome e digitar Milano para este. Vou digitar em geral e finalmente para a popa, mas eu vou ter que movê-lo aqui. Então deixe-me mover tudo. Então selecione a imagem três e mova-a. Tudo bem em Palermo. Agora, para ele. O preço vai estar em 96 para os gêneros vai ser 96. E para o Milano vai ser 98 agora. Vamos mudar as cores de todos eles. Pule em seu painel traseiro Clique aqui. Então, selecione o preço. Clique aqui. Selecione o preço para o turno um clique aqui e agora vamos incluir imagens. Então selecione este 1º 1 salto em camadas Painel agora pulando para imagens e o que você deseja localizar essas lâmpadas Então nós temos que selecionar esta lâmpada um arrastar e soltá-la, mas não aqui porque ele vai preencher esta seção inteira e substituí-la e mascará-la com danos. Mas em algum lugar lá fora, como aqui. Agora mantenha o turno antigo e clique esquerdo, porque isso vai habilidade, sua imagem uniformemente e você pode diminuir o zoom e simplesmente chamado shift e clique esquerdo. Se for para você, basta arrastá-lo para a posição. Certifique-se de que está no meio e agora você pode esvaziá-lo. Então, por exemplo, a partir do texto do topo do texto você, coronel deslocamento pressione seta para cima duas vezes para posicionar em 20 pixels para o topo e, em seguida, simplesmente reduzir o tamanho até que ele se encontre assim. Talvez você possa até mesmo colocá-lo 10 se você acha que é muito parecido com isso porque nós queremos então fazer imagem um pouco maior e você pode segurá-la assim e pressionar no meio porque isso vai posicioná-lo no meio deste suporte lugar. Agora que o 1º 1 é feito, vamos rapidamente ir em frente e selecionar o 2º 1 Então saltar pasta de imagens insider, Selecione a lâmpada para arrastar e soltá-lo aqui e, em seguida, o mesmo que fizemos com o 1º 1 deslocamento de espera e reduziu seu tamanho Simples arrastar e solte-o dentro desta pasta. A mesma coisa que fizemos com o 1º 1 Então posicione-o assim 10 pixels para cima e, em seguida, simplesmente reduziu seu tamanho do topo assim. Certifique-se de que está no meio, e você também pode fazer isso ou selecionar uma peça para ter certeza que está no meio, e você pode fechar este suporte e, em seguida, você pode mover a pasta agitada um pouco mais e talvez esconder a segunda pasta para que você dedo do pé capaz. Inclua a Terceira Imagem aqui. Salte para dentro da sua pasta, arraste e solte aqui e, em seguida, simplesmente reduza seu tamanho assim, mova um pouco para baixo, amplie um pouco mais para perto, então posicione-o assim até que ele se encontre no turno superior e 10 pixels. Segure o turno. Certifique-se de que é assim e posicione os dois no meio. Assim como. Agora vou dar o dedo do pé. Inclua a imagem número dois. Segure o turno e posicione-o como. Então, até as reuniões, um turno 12 que se moverá com 20 peças para a direita. E nós preenchemos a seção mais popular com nossas imagens e porque elas são PNG. Se em algum momento você quiser mudar de idéia, você pode manter o controle. Clique dentro da imagem e, em seguida, você pode alterar a cor que falhou. Então vamos pular em frente. Você pode alterá-lo para, por exemplo, qualquer uma dessas cores. Você pode ver como isso se parece, ou você pode ir em frente e escolher qualquer fora de suas próprias cores, então é simplesmente olhar como aqui para que eu possa ter certeza de que cor é. Então é e. b. Selecione este e selecione de volta o E B. Então, como eles disseram, você pode mudá-lo para suas próprias cores. Ou você pode incluir uma imagem de fundo bem aqui logo abaixo desta imagem PNG. Então, se você quiser fazê-lo se destacar ainda mais do que é agora, em seguida, para as combinações de quartos fazer o mesmo. Então clique aqui. E se um salto fora desta pasta, você pode ver que temos três imagens de combinação crescidas para que você possa clicar sobre isso. 1º 1 é simplesmente arrastar e soltá-lo dentro porque queríamos preencher esta seção inteira e você pode clicar duas vezes aqui se quiser. E talvez eu possa movê-lo como para que ele, uh, alguns até eu det e o que eu quero escrever aqui é sala de estar. Então clique duas vezes no texto e digitando pouco, e como não podemos vê-lo, talvez possamos torná-lo branco. Então pule aqui e agora você pode ver isso um pouco melhor. Agora, o que precisamos para o 2º 1 é o número de combinação de quartos para arrastá-lo e soltá-lo para dentro, vivendo como está. Clique duas vezes aqui e digite o quarto como então certifique-se que é branco. E finalmente, para um perturbado que é selecionado, salte para a nossa combinação de sala de pastas. Três. Selecione arrastar e soltá-lo à vista. E como antes, você precisará movê-lo um pouco para que você seja capaz de mudar o visual desses textos e nós vamos escrever na cozinha para este. Certifique-se de colocá-lo de volta em sua posição como então mudar 1 a 20 pixels desta forma, e se um salto um pouco mais perto, ele não mudou a cor fora do texto por algum motivo. Mas você pode alterá-lo assim ou quando ele selecionado simplesmente aplicar branco para ele e, em seguida, saltou para trás. E eu quero posicionar em 20 pixels um turno 12 e fechar esta seção porque está concluída. E, finalmente, o que queremos incluir é o nosso processo. Então, queremos incluir uma imagem de fundo bem aqui atuar como um espaço reservado para o vídeo, e essa é essa imagem simplesmente arrastá-la e soltá-la para dentro, e você pode clicar duas vezes dentro e manter a tecla shift, reposicioná-la um pouco melhor. Vou colocá-lo em algum lugar por aqui. Clique fora e eles vão ser capazes de clicar dentro e ver que isso é um vídeo. Eles podem clicar aqui mesmo dedo do pé, reproduzir o vídeo em tela cheia ou clicar em ler mais, que os levará para cerca de US Page, que irá explicar seu processo em muito mais detalhes se eles querem ler. Então, basicamente, isso é tudo para a tela inicial você. Então incluímos uma nova cor. Incluímos algumas sombras diferentes. Nós incluímos imagens, e eu mostrei a vocês como você pode incluir tanto Jay Pek como imagens PNG, e nós mudamos algumas cores fora do texto ao redor, e nós tornamos tudo agradável e claro, e tudo agora parece muito melhor. Então ele ainda faz quando era apenas uma armação de arame com alguns retângulos vazios. No próximo vídeo, vamos passar para a tela de categoria, e eu vou mostrar a vocês como você pode incluir sofás aqui, e nós vamos mudar os nomes do sofá bem aqui no topo. Então eu vou ver lá 19. Criação de design 2: Agora está mais na tela de categoria. Vamos aproximar um pouco mais deste 1º 1 Vamos chamá-lo de Lisboa e mudamos o preço 2 para 4 para 9 porque vai do mais caro para o mais barato abaixo. Neste segundo 1 vamos chamá-lo de Roma, e vai ser dois por dez. Este vai ser Paris e sobre o preço vai ser 13 68 Em seguida, temos um Leone tão Leone, e por um preço vai ser 12 19. Em seguida, nós estamos indo dedão. Inclua o nome fora de Moscou e para o preço, quero 187 e, finalmente, para este perdido. Vamos incluir Praga e Price será 1090 Em seguida, vamos em frente e incluir nossas imagens dentro. Então salte de volta para a pasta de imagens, vá para dentro de sofás. Então, até agora, número um, número um, pule para dentro e arraste. Solte como fizemos com as imagens anteriores. Então, o que você quer é incluí-lo e reduzir o seu tamanho e localizar o item número um arraste e solte-o dentro desta pasta e uma posição que logo acima do fundo da imagem, você pode ampliar um pouco mais perto. Você pode reduzir o tamanho para aproximadamente por aqui. Certifique-se de que está no meio, e você pode selecionar esses dois e posicioná-lo no meio, se quiser. Mas você também pode movê-lo para a parte inferior da sua imagem, espaço reservado como Então pressione 1234 e colocá-lo 40 pixels da borda inferior, talvez até 50 porque isso parece muito melhor. Em seguida, vamos incluir o 2º 1 para que você possa clicar aqui. Vá dentro de seu salto pasta e com base no 2º 1 mantenha o turno até produzir seu tamanho e você também pode fazer isso. Você pode fazer um exemplo de teste. E se você está fazendo isso em quatro lojas como eu fiz assim removendo estes um fora das linhas e removendo o fundo de suas imagens, e você pode fazer isso em quatro lojas, e você pode ter certeza de que ambos estão no mesmo tamanho. Assim que você estiver dentro do adobe XY e começar a mudar as coisas, e você quiser incluir essas imagens dentro desses espaços reservados, elas já estarão no mesmo tamanho que precisam, então isso reduzirá seu tempo de espera. E vai melhorar a sua velocidade muito mais para que você possa trabalhar muito mais rápido quando você tem essas dimensões exatas desses sofás em nosso exemplo. Mas eu gosto de trabalhar assim porque, como você vai ver e você pode ver aqui, nem todos eles são exatamente do mesmo tamanho. Então esse é um grande fator. Porque se eles fossem exatamente o mesmo visual e tamanho, então, por exemplo, todos eles são assim. Então esse método vai trabalhar muito melhor porque, uh, uh, quando eles são todos do mesmo tamanho, você pode aplicar essa técnica. Mas quando eles não estão como se não estivessem no nosso caso, então você simplesmente vai ficar com ele. Alguns foram resultados estranhos, mas se eles são do mesmo tamanho, então você está pronto. E você pode trabalhar assim se quiser. Então, se por algum motivo, ele colá-lo, dois deles e você vai ver esses bugs no Adobe X'd de vez em quando. Mas apenas não preste atenção a eles e certifique-se de que você sabe o que você está fazendo porque Quando você comete um erro, você pode facilmente corrigi-lo porque você sabe onde você cometeu esse erro e você pode saltar para trás em qualquer momento e simplesmente corrigir ele. Então é saltar e incluir o nosso sofá número quatro. Então, como mencionei antes, como podem ver, todas elas são diferentes dimensões. Todos eles são diferentes formas, então é por isso que eu gosto de trabalhar assim. É muito mais demorado, obviamente, como você pode ver. Mas desta forma você pode ter certeza de que todos eles estão posicionados onde eles devem e exatamente no mesmo local. E porque alguns deles são portadores, alguns deles são mais largos do que os outros. Então, para o posicionamento, apenas certifique-se de seu globo ocular e você faça uma posição áspera de acordo com os anteriores, porque para o 1º 1 se você lembrar, colocamos 50 pixels da parte inferior. E porque era um pouco estreito, esta imagem e estas outras são um pouco mais altas, então você tem que apenas compensar e torná-las 12345, por exemplo. Como podem ver, é muito mais alto do que este e assim como este. Então, talvez coloque 40 pixels para baixo apenas para que você possa, aproximadamente, torná-los exatamente exatamente o mesmo que mencionam daqui até aqui em todos eles. E, finalmente, vamos incluir a sexta imagem. Então pulando bem aqui no zoom um pouco e inclua o sofá número seis. Então eu vou posicioná-lo mais ou menos por aqui e apenas garantir que você reduza seu tamanho como fizemos com todos fora dos outros. Posicioná-lo mais ou menos por aqui e tamanho reduzido ainda mais. E era disso que eu estava falando. Como você pode ver, este é muito mais alto do que este, mas apenas certifique-se de posicioná-lo ou no mesmo espaço que este, e é isso para esta tela. Agora vamos rapidamente mais e fazer filtros de pesquisa porque há apenas uma alteração que queremos fazer porque incluímos essas sombras de fundo. Queremos fazer o mesmo para esses materiais e esses círculos. Então, primeiro para os materiais, vamos mudar a cor do quadro e incluir essa cor. Agora vamos incluir a cor da sensação de ser branco e finalmente incluir uma sombra, mesma maneira que fizemos para todos fora deles antes. Então, clique na sombra, selecione a cor. É este e simplesmente reduzir o ritmo Cidade para 25%. E agora temos uma aparência muito mais coerente do que antes, e temos a mesma sombra em todos eles. E, finalmente, você pode fazer o mesmo por esses pontos. Então vamos saltar para uma camada espinhal. Então, para esses círculos, vamos fazer o mesmo lugar. Inclua a sombra. Então 55 10. E se você acha que é um pouco longe, você pode reduzi-lo para, para e talvez cinco. E agora está muito mais perto, e parece muito mais agradável. Salte para dentro da sombra e volte para o painel de ativos para que você possa selecionar a mesma cor para o resto deles. Então, assim, certifique-se de que está em 25% eo que podemos fazer agora é esperar ele selecionado clique direito cópia, Selecione este um clique direito colar pais, e que vai fazê-los olhar exatamente o mesmo que o resto fora. Nosso design é, você pode ver que parece muito mais agradável e mais importante, parece muito mais coerente com o resto fora do nosso desejo. No próximo vídeo, nós vamos pular e projetar uma tela de combinação de sala, então eu vou te ver lá. 20. Criação de design 3: Então vamos saltar e projetar uma combinação de sala. Mas antes disso, podemos sempre bater o controle sobre o nosso projeto, apenas para ter certeza de que não perdemos nenhuma das mudanças anteriores. Então o que não está certo aqui é a imagem para a combinação errada. Então vamos incluir o primeiro 1 Arrastar e soltá-lo dentro desta porta de arte, e eu vou pular e fechar tudo isso e simplesmente movê-lo todo o caminho para trás assim e seguida, aumentar seu tamanho até que ele se encontre com as bordas externas como este. E você pode até aumentá-lo muito mais para que você possa ampliar dentro da imagem assim. Por exemplo, algo por aqui é bom, e agora as pessoas podem dizer que é Theis Room. Se quer fazer isso, tudo bem. Mas se não, você sempre pode reduzir o tamanho para aproximadamente por aqui. Digamos, e acho que fica muito melhor assim. Agora, este texto que eu encontrei, não é facilmente legível, então vamos mudar o dedo do pé branco. Isso pode ser como é, e agora, porque queremos fazer o plano de fundo da imagem o mesmo que aqui. Vamos mudar isso. Então, vamos clicar aqui. Selecionado. Seja agora porque não podemos distinguir o fundo da imagem. Vamos clicar no fundo e vamos selecionar branco. E agora está muito melhor. Agora precisamos desse sofá, então pule dentro de sofás. É este, então para o número três, pule dentro de um feitiço de camada. Mais uma vez, certifique-se de que encontrou a imagem. Arraste e solte seu sofá para dentro. Talvez você possa colocá-lo aqui, e vamos reduzir seu tamanho até que ele caia bem aqui. Então vamos pular e ter certeza que está no meio, assim. Então você pode selecionar sofá e imagem, e você pode posicionar assim também. É assim. Agora vamos localizar o nome assim disparidades Paris. E pelo preço , são 13 68. Então certifique-se de mudar isso, e uma última mudança que eu quero fazer é para a cor. Então eu era como esta primeira cor. Selecione isso para a cor, por exemplo, certifique-se de incluir uma sombra, então vamos usar 22 e cinco. E para a sombra. Vamos entrar no painel de ativos mais uma vez. O mesmo acordo. Então selecione esta cor e mais devido basicamente a 25%. Agora isso indicará que essa cor é selecionada para este sofá particular, mas as pessoas concordam saltar para dentro e ir para a página do produto e, em seguida, mexer com ela e incluir algumas outras cores à vista. Agora saltar para trás do dedo do pé são camadas. painel fechou tudo o cartão um, e ela fez. E certifique-se que você pode mover a segunda carta aqui e agora nós vamos incluir alguns outros itens dentro. E para este, vamos usar uma lâmpada, por exemplo, assim como fizemos antes. Selecione o cartão BG e para a cor de preenchimento, certifique-se de que é branco e para a imagem, certifique-se de que é E. B para torná-lo exatamente o mesmo para todos os outros. E vamos usar eu não conheço este Genoa uma lâmpada, por exemplo. Então, clique duas vezes no texto. Mude-o e o preço foi 96. Então, quando as pessoas se movem com os dedos para a direita usando o gatilho de pista, que vamos incluir no modo de prototipagem, eles serão capazes de localizar esta lâmpada e ver que ela está incluída à vista. Salte para imagens, localize a lâmpada para que seja este 2º 1 arraste e solte-a aqui e simplesmente certifique-se de reduzir seu tamanho assim e você concorda com o globo ocular. Certifique-se de que está no meio assim, e se você quiser se mover, é um pouco mais para o topo. Você pode fazer isso também. Então é um abajur. Mova-o para fora desta pasta. Certifique-se de que está na pasta de imagens como esta e certifique-se de que ela se encontra na parte superior. Então, quando você tiver concluído isso, você também pode movê-lo para onde ele foi ativado novamente. O cartão número um, selecione este 2º 1 e simplesmente mova com 20 pixels para a direita. O mesmo líquido com todos os outros. E agora esta tela da sala de estar está concluída, e no próximo vídeo, vamos passar para o item selecionado e item selecionado ajustado, e vamos fazer as mesmas mudanças para ambos, e eu vou mostram como você pode incluir algumas sombras em algumas delas uma vez quando as pessoas selecionam esses itens. Então eu vou dizer lá 21. Crie um design 4: Vamos agora saltar para dentro e projetar telas de itens selecionados. Então, as primeiras coisas primeiro. Eu vou mudar a cor deste fundo imagem herói cada ela a cor selecionada e é de quatro b c A. Oito centro de imprensa. É de cor ligeiramente acastanhada. Em seguida, eu estou indo toe digitando também casa share e qual a uma linha de texto deixe-me digitar rapidamente e selecionar tudo isso. Pule aqui e mude o dedo do pé branco e parece bom e salte empacotado em nossos ativos. Desculpe, camada espinhal. E pelo preço, que seja 1 24 Mas para isso vamos usar esta cor também para que complemente a cor da nossa cadeira de casa no topo. Então clique duas vezes aqui, Controle. Veja, eu vou clicar aqui. Controle. Veto baseado em Clique aqui. Controle. Veja Nenhum clique aqui. Controle V e certifique-se de que é branco. E, finalmente, por esta. Mova-o para esta cor. Por que não vamos selecionar este controle de cores? Ver e saltar à vista e bater o controle V e não, vamos seguir em frente e, por exemplo, talvez possamos mudar essas cores um pouco mais tarde, mas eu quero incluir essas duas imagens porque esse é o bit simples. Então, em nossas pastas de imagens, vamos localizar a cadeira principal. Então nós temos a cadeira principal número um, que é esta imagem tão selecionada a partir daqui. Você sempre pode verificar o painel de camadas e se certificar de que está no local correto. Arraste e solte para dentro e siga em frente. Selecione esta pasta de imagens 2ª 1 e arraste e solte esta à vista, e você pode fazer o mesmo para estes dois para que você possa abri-lo. Selecione a cadeira principal número um. Clique aqui e selecione o número da cadeira principal para arrastar e soltá-lo para dentro de modo que temos muito mais coerente olhar. Agora, em seguida, vamos incluir nossa imagem principal. Então, selecione um fundo de imagem de herói. Você pode fechar as zonas, e dentro da mesma pasta, você tem a imagem de compartilhamento principal. Arraste e solte-o dentro e ST ng. Líquido com todos os outros, simplesmente arraste e reduza seus olhos observando deslocamento. Você pode ampliar um pouco mais perto, e talvez possamos reduzir o tamanho 2 em algum lugar por aqui, e selecioná-los para ter certeza de que eles estão lá no meio e, em seguida, selecione Controle de Manger. Veja clique aqui, controle V para colá-lo exatamente no mesmo local. E porque foi assim que o projetamos, você pode ver que a cadeira se destaca um pouco desse fundo, que é com propósito, porque é assim que queremos fazer a animação parecer. Então vai parecer que empurrou este fundo um pouco e o estado da cadeira no mesmo local. Você pode até mesmo reduzir os sites fora da cadeira um pouco se você quiser, apenas para acomodar esses links. Ou você pode simplesmente movê-lo para cima como cinco pixels algo assim, modo que este comprimento esteja dentro deste fundo. Agora, finalmente, vamos clicar aqui e para a cor selecionada, movendo-se logo abaixo da cor principal para o filme. Apenas certifique-se que você está no branco e, para a sombra, faça o mesmo. Liquide-o com todos os outros. Então 22 e fogo porque é círculo menor. Verifique se você selecionou o painel de ativos. Clique aqui e, em seguida, selecione esta cor. Mesmo liquidado, dissemos aos outros. Claro, está no 25 agora para a cor selecionada. Vou escolher um lugar perto do dedo do pé branco. Então, algo assim. E apenas certifique-se de copiar a mesma cor para esta primeira tela porque essa é a cor fora do assento da cadeira. E essa é a cor que selecionamos. Agora. Faça o mesmo para este quadro selecionado e para a borda. Vamos Judeus esta cor e para a sombra, vamos suco 55 10 como fizemos para todos os outros. Clique aqui e, em seguida, certifique-se de selecionar esta cor. Certifique-se de que você tem a falha em branco e para a sombra, certifique-se de que você está em 25% e essas são as telas feitas. Então você verá esta animação em muito mais detalhes quando chegarmos à parte de prototipagem fora deste curso. E agora vamos passar os detalhes da ordem, que é a nossa próxima tela, e vamos projetar no próximo vídeo, então eu vou ver vocês lá 22. Criação de design 5: Vamos agora projetar a tela de detalhes do pedido. Então, um zoom em um pouco mais perto agora para este 1º 1 já tê-lo escrito. Então nós queremos todos cadeira anfitrião lento como este e para o preço 81 24 Para este 2º 1 nós sempre fomos sofá assim E para um perturbado, temos Milão. Um sofá de lâmpada custa 24 a 9 e uma lâmpada custa 98. Próximo a mudar isso para isso, isso para descolorir. E finalmente isso para este fundo de cor deve ser branco, igual a este e igual a este para fazer parecer muito mais coerente com todos esses outros agora, porque este fundo principal é branco, talvez Esta não é uma boa escolha. Então talvez possamos incluir alguma cor de fundo aqui, ou imagem de fundo ou algo assim. Então talvez possamos experimentar para que você possa selecionar detalhes do pedido e talvez clicar em algo assim para que você possa ver muito melhor agora. Talvez possamos até incluir uma cor mais clara se você quiser, mas eu acho que parece bom por enquanto. E talvez possamos reduzi-lo um pouco. Então vá acima de algumas paragens para algum lugar por aqui. Então, em algum lugar entre essas cores para torná-lo muito mais leve, e eu acho que isso parece bom por enquanto. Então agora vamos saltar para dentro e incluir nossas imagens. Então, temos também House Chair para que você possa selecionar este cartão para localizar a imagem, saltar dentro de suas imagens pasta arrastar e soltá-lo site e mesma coisa como fizemos com todas as nossas outras imagens. Simplesmente reduziu seu tamanho até que ele se encaixe dentro de sua imagem, espaço reservado. Assim como este e amplie um pouco mais. E você pode posicioná-lo assim em algum lugar por aqui? Eu acho que é bom. Sim, você pode fechar isso quando terminar e ir para o cartão número dois. Então o que precisamos é de sofás e sofá de Lisboa. Este é o 1º 1? Então simplesmente coloque-o aqui e reduza seu tamanho. Então, a mesma coisa. Liquide-o para todas as nossas outras imagens. Agora, esses processos podem ser um pouco repetitivos, mas como você pode ver exatamente ainda tem alguns bugs e isso vai acontecer de vez em quando , especialmente quando você instala , uma nova atualização, então apenas certifique-se de manter isso em mente enquanto ele é livre. Ainda há alguma caixa de vez em quando, mas você sempre pode denunciá-los na voz de seu usuário porque eles gostam de ouvir essas coisas. E eles são capazes de esmagar quaisquer bugs na próxima atualização. Milan, não. Uma lâmpada é esta manca aqui, arraste-a à vista e reduza o seu tamanho para que ele se encaixe dentro do nosso espaço reservado assim e então mova-a um pouco mais. É para alguém por aqui. Vamos ver e, em seguida, fazer o mesmo por ele como fizemos com o resto fora de nossas imagens. E é isso. Nossa tela está pronta. A única coisa que nos resta é rebocar o amor, o custo. E se eu escrever bem aqui, colocar dois pontos no lugar ou você pode ainda melhor movê-lo aqui, então dobrar rápido. Vá para o final da digitação 2651 porque esse é o custo total off. Todos esses itens adicionados ao carrinho, e se as pessoas quiserem removê-los do atual, eles podem deslizar para a esquerda, e ele removerá este item específico do carrinho se quiserem adicionar mais peças. Então, por exemplo, para cadeiras, eles podem clicar aqui e depois agradecer. Selecione quatro ou o número que desejar. E isso aumentará o custo total dele. Se eles querem reduzi-lo e mudar de idéia, por exemplo, eles só querem uma cadeira. Eles podem fazer o processo mais uma vez, e isso reduzirá o preço total de todos os seus itens dentro do carrinho. Então, no próximo vídeo, vamos saltar para o pagamento. E como eu não gosto de como as cores deste cartão, uh, esses guardas parecem que nós vamos mudá-los e incluir algumas cores mais bonitas dentro, então eu vou te ver lá. 23. Criação de design 6: vamos agora projetado pagamentos verde. Mas antes disso, você pode clicar nos detalhes do pedido e na cor do seu campo. Clique aqui, Controle. Vês? Então você pode copiar a cor de fundo deste. Nossa porta clique aqui no campo Apresentador Control V. E incluirá a mesma cor que estava neste. Nosso porto agora. Bem aqui. O que eu preciso é do pagamento. Então, vou copiar isto. Controle total. Vês? Pular para a direita Seu controle V e baseado em localizado o pagamento. Está bem aqui. Posicioná-lo um pouco melhor agora porque já criado. E esses ingredientes, eu vou copiá-los. Então deixe-me mostrar rapidamente como é feito para que você possa selecionar o cartão BG e localizado a cor do campo aqui. Mas deixe-me saltar rapidamente dentro do meu outro arquivo e eu vou simplesmente copiar esta cor. Então, para o campo, você pode escolher um ingrediente linear e certificar-se de que você está ao contrário. Então a cor clara está no topo. cor mais escura está na parte inferior porque nossa sombra está na parte inferior. Então, para a cor mais escura ou o que queremos é que essa cor o destruiu. E para a cor mais clara, O que queremos é deixe-me rapidamente selecionado a partir daqui. Então escolha este um controle V baseado em e é assim que parece. E você também pode mudar o visual do visto e escolher branco. E isso vai parecer muito mais bonito do que era antes. Não saltar dentro de sua camada espinhal mais uma vez entrar, as pessoas selecionam carro BG e, em seguida, escolher um ingrediente linear. Agora faça o mesmo. E porque fizemos isso no 1º 1, lembrou-se. E agora você está mais escuro. A cor está na parte inferior e sua cor mais clara está na parte superior. Então, para este 2º 1 para a cor mais clara, nós vamos escolher esta cor, então simplesmente baseado em e para a cor escura. Vamos escolher esta cor, e eu vou colá-la. Então é uma bela cor azul, e é uma reminiscência do cartão de pessoas. Então, como você pode ver aqui, nós já temos um bom design, que é apenas parece muito melhor do que antes. E para terminar, foi apenas mudado o logotipo das pessoas dedo branco para que você possa selecioná-lo e clicar aqui mesmo dedo branco. Então é muito mais legível do que antes. Isso é tudo para esta tela. E no próximo vídeo, vamos começar a projetar locais de lojas e talvez até um menu, e depois terminar o processo de design, então nos vemos lá. 24. Criação de design 7: o que agora está desenhado. Armazene os locais, tela e as primeiras coisas primeiro. Vamos mudar algumas coisas, então isso vai ser branco. Este círculo vai ser laranja. Eu não posso dentro do círculo, então retomar um pouco mais perto para que eu possa selecioná-lo vai ser branco também. E nós fomos incluir a sombra. Assim como lê-lo com todos os outros. 55 10. E vamos simplesmente selecionar essa cor e ter certeza de que ela está em 25% de desconto base, então ela corresponde um pouco melhor com todas as outras. Em seguida, vamos simplesmente criar um retângulo para o topo. Então saltar para uma camada feitiço escadas foram barra de pesquisa, moveu-os no topo, e eu vou criar um retângulo logo abaixo. Então, assim, mova-o para o topo e movendo-se logo abaixo da barra de pesquisa. Então eu vejo o que estamos fazendo. Deixe-o ser branco, removeu a fronteira, e estamos fazendo isso porque vamos colocar o mapa bem aqui atrás. E se colocarmos o mapa logo abaixo deste texto e do campo de pesquisa, ele não vai ser lido. Agora que criamos esse Bijie, então não olhe bem aqui digitando simplesmente seja James indo trabalhar no dedo do pé. Apenas bem. Clique aqui e localize o mapa. Arraste e solte para dentro. Você pode usar qualquer mapa que quiser. Eu simplesmente uso, um local aleatório no mapa assim. E você pode posicioná-lo um pouco melhor se você quiser, então você pode talvez colocá-lo em algum lugar por aqui. Eu acho que ele funciona bem e aumentou até que os cantos se encontram no topo na parte inferior, movendo-se logo abaixo indicador casa porque queremos mapear Toby a camada inferior. Então, todo o caminho no fundo. E, finalmente, queremos aumentar o tamanho desta linha. Então, como você pode ver, a arte entediada sagacidade é 375 para que possamos saltar na barra de pesquisa, localiza a linha e apenas digite 375 e certifique-se de movê-lo até que ele se encontre com final fora placa de arte. Agora que fizemos isso, precisamos fazer algumas mudanças aqui. Então fomos selecionar o chamador e a cor selecionada, movê-los para algum lugar em torno de um local curativo para que você possa mover a dor por aqui. Talvez, e então você tem que adicioná-lo ao tapinha. Então vai daqui até aqui. Mas vamos primeiro mudar a cor do caminho para descolorir. Apenas certifique-se de selecionar a borda e, em seguida, mudar a cor. Então, assim. Então é laranja e um pouco mais agradável e claro. Você pode até aumentar o tamanho para fazê-lo. E então o que você pode fazer é saltar de volta para uma camada, soletrar duplo clique no tapinha e, em seguida, simplesmente mover esses pontos de pat para que ele siga o tapinha fora do mapa. Então algo como isso não basta mover o dedo do pé aqui, mover este ponto de tapinha um pouco mais então em algum lugar por aqui, assim e então simplesmente ir para o seu início de um local bem aqui. Você também pode brincar. Você pode dobrar rápido para fazê-los ao redor, se você quiser. Você pode, então, até mesmo movê-lo assim e fazer uma forma de arco agradável se você quiser, você conduz critérios prováveis e e você pode mudar sua posição como quiser para que você possa abaixar ou torná-los assim. Você pode clicar duas vezes aqui porque este é o canto e você pode clicar duas vezes bem aqui, se você acha que isso é necessário. Mas vamos deixar como está. E não analise com os detalhes sobre esta parte em particular. Então, quando você terminar isso, eu só quero ter certeza que eu clique duas vezes aqui mesmo, para que eu possa criar um canto agradável, algo assim. Talvez, e então eu posso simplesmente mudar esse ângulo, assim para torná-lo um pouco mais reto. Em seguida, mover este apenas um toque, também aqui assim e, em seguida, simplesmente movido na dor. Eu não poderia apenas um pouco acima então movê-lo assim e parece muito mais agradável e então simplesmente mover esses dois até que eles se encontrem bem aqui. E talvez possamos colorir o círculo interno com esta cor para que saibamos que esse é o nosso ponto de chegada. E esta tela está terminada. E agora o que nos resta fazer é simplesmente editar mais um item dentro do nosso menu. Sugira as configurações abaixo aqui mesmo, Salte dentro do painel de camadas. Você pode duplicar essas configurações, uh, texto e simplesmente digitando locais da loja porque essa é a parte importante que as pessoas vão precisar olhar para ter certeza de que eles estão todos espaçados uniformemente, e você pode até selecionar todos os eles e fazer como fizemos antes. Então, selecione um retângulo. Certifique-se de que você está no ponto superior do X. Selecione um retângulo. Selecione este grupo. Posicioná-lo como tão realmente o retângulo. E você pode em grupo este grupo. Se você quiser ou pode acreditar como é. Basta chamá-lo de itens porque a localização da loja é realmente importante e as pessoas podem chegar aos locais da loja . Eu grito do cardápio. Agora, uma última coisa a fazer é clicar na camada de praia e simplesmente acertar nove, porque isso vai baixar sua base 80 a 90%. E porque esta tela de menu vai ser uma tela de sobreposição porque é o biggies no 90% ele vai excessivamente em cima de qualquer uma das telas onde ele está localizado, e ele vai apenas mostrar um pouco abaixo da tela e apenas um pouco abaixo deste Bijie. Isso é tudo para a parte de design do nosso aplicativo nos próximos vídeos Off da Siri. Vamos começar com a prototipagem e eu vou mostrar a vocês como você pode conectar algumas dessas telas e como você pode escolher as transições perfeitas e como você pode apresentá-la a um cliente um pouco melhor do que é agora, então eu vou ver Você aí. 25. Organização: nesta seção do curso, vamos começar com a prototipagem, e antes de fazer tudo eu organizo meus arquivos. Agora você pode fazer o mesmo é lê-lo para o design para que você possa copiar e colar estes são portas e fazer outra cópia abaixo. Apenas coloque prototipagem. É o que vamos fazer agora. Mas também há outro método que você pode usar, que é apenas usar essas telas como eles são agora. Eu gosto de usar barco fora dos métodos, dependendo do tamanho do projeto. Se o projeto é menor, como este, eu gosto de simplesmente duplicar todas estas são peças e apenas colocá-las abaixo, porque em torna o nosso trabalho muito mais fácil. Isso torna o trabalho dos desenvolvedores muito mais fácil, e, em seguida, os clientes trabalham muito mais fácil quando vêem isso. Os ovos da Adobe contaminam se você optar por educá-los sobre como usar o Adobe X D, o que é realmente bastante simples. Se você pensar sobre isso. Se você tem um projeto grande, então você pode querer considerar incluir tudo dentro deste e projetar parte fora do projeto. Então, por exemplo, imagine que você tem 200 nossas portas ou algo assim, então pode ser demorado e fazer, e pode tornar seu arquivo muito maior do que precisa ser. Se você simplesmente duplicar essas placas, por exemplo, você tem 200 para os quadros de arame, 200 para o projeto, 200 para prototipagem. E você pode imaginar que o arquivo pode ser bem grande, muito rápido, e pode ser um tempo demorado para o seu cliente ing. Os desenvolvedores apenas o dedo do pé aberto e navegar em torno desse arquivo. Mas porque temos 10 telas dentro deste projeto e dentro da fase de prototipagem , vamos fazer mais algumas porque precisamos fazer algumas animações e alguns ajustes . E, em seguida, pode ser maneira óbvia de ir para o toque de prototipagem abaixo. Então, vamos simplesmente escolher este design e escolher. Estas são placas simplesmente controle crítico ou comando D para duplicá-los e, em seguida, simplesmente movê-los logo abaixo e posicioná-los para estar na linha, que estes no topo você pode usar velho e simplesmente arrastar para baixo com este design e duplo clique aqui e digitando prototipagem para protótipo. No entanto, você quer, e então simplesmente posicioná-lo um globo ocular e você também pode fazer a mesma distância que é daqui até aqui. Então você pode simplesmente ir, por exemplo, para 400. Acho que foi algo que fizemos pelo design. Então, basta fazer 400 e depois mover. Todas essas portas são um pouco altas para que você possa acomodar o espaço que acabamos de criar . Então algo assim e isso é tudo para a preparação do arquivo. No próximo vídeo, eu vou mostrar a vocês como você pode lidar com as telas que faltam e os elementos que faltam porque eu propositadamente fiz alguns elementos que faltam na armação de arame e na parte de design, então eu vou te ver lá. 26. Abordagem com telas divertidas: neste vídeo, vamos lidar com algumas telas que faltam e alguns elementos que faltam. Então, quanto à tela perdida vai, eu falei sobre isso nas lições anteriores. Assim, por exemplo, cada uma dessas telas pode ter outra tela adicional ou talvez algumas telas adicionais na parte superior. Então, por exemplo, temos uma tela, e você pode querer considerar incluir este Leia mais, que irá para sobre nós página, por exemplo, nossas próprias combinações. Talvez você queira incluir outra tela separada, que irá mostrar-lhes as possibilidades de combinação erradas. Quais são as combinações de quartos? Talvez queira contar a história por trás das combinações de quartos e explicar a eles como veio sobre como você lida com os fotógrafos, alto negócio com os designers de interiores para criar esses quartos em primeiro lugar, e então como você pode quer lançar esses produtos para os consumidores. Além disso, aqui no topo talvez você queira considerar, porque nós criamos para pontos para a paginação fora criando para diferentes elementos. Então quatro imagens diferentes que vão dentro deste controle deslizante então você pode querer considerar todas essas telas ou não porque esta é apenas a primeira parte deste projeto, e isso é o que nós explicamos para o cliente. Eles só querem ver os ossos do projeto antes de avançarmos, porque isso é muito importante. Queremos pregar algumas partes mais importantes na frente e tivemos que começar. E depois que descobrirmos as cores, tipografia, imagens, direção geral, talvez eles não gostem dessas sombras de fundo. Talvez queiramos removê-los, incluir alguns quadros dentro e alguns fora dessas mudanças quando temos tudo isso juntos, então podemos avançar e incluir algumas dessas telas adicionais. Além disso, é muito mais fácil quando você tem todos esses elementos no lugar para criar essas telas adicionais e, em seguida, começar em vez de 10 telas como é para este projeto começar com 200 telas, em seguida, ele faz com que seu muda muito mais complicado, muito mais demorado tanto para você quanto para seus clientes. Porque em vez de fornecer feedback para 10 telas, eles têm que fornecer feedback para 200 telas. Isso tornará seu trabalho muito mais difícil, muito mais demorado, e isso significa que eles têm que colocar seu trabalho no site e, em seguida, simplesmente trabalhar com seu tempo integral neste projeto. E deixe-me dizer, muitos dos clientes não têm esse luxo de deixar seu trabalho e sua vida para trás e simplesmente se concentrar em tempo integral em você para que você possa criar esse projeto para eles. É por isso que estamos começando com 10 telas. Sabemos que o cliente sabe, e você tem que dizer ao seu cliente, olha, essas não são todas as telas que você vai precisar. Mas estas são apenas telas iniciais que você vai precisar para nós iniciarmos este projeto que possamos avançar e criar algumas telas adicionais, incluindo algumas novas. E vamos fazer isso nas outras partes deste projeto. Então, sem mais delongas, deixe-me mostrar rapidamente quais são alguns elementos que faltam, esses elementos que eu deixei de fora de propósito apenas para mostrar o que acontece porque a maior parte do tempo quando você está projetando, você simplesmente não pode prever tudo. Não importa quanto tempo você está neste negócio, não importa quantos projetos você tem atrás de você, muitos do Times, você pode ignorar algumas coisas. Então, por exemplo, você pode perder um ícone. Você pode perder alguns botões que você pode perder alguns recursos de experiência do usuário. Então, no nosso caso, deixei de fora um ícone. Então, se eu aproximar um pouco mais e, por exemplo, ir para esta tela de categoria, você pode ver o ícone do carrinho bem aqui. Mas se um salto para a página do produto tão selecionado página do item, você não pode ver o ícone Adicionar ao carrinho. Então, quando as pessoas aplicam a seleção ou vamos alterar isso para adicionar ao carrinho ou , por exemplo , agora e quando eles clicarem agora, ele irá adicionar ao carrinho. Mas como você pode ver, não há nenhum ícone adicionar ao carrinho. Então, como vamos lidar com isso? Bem, é simples. Ampliar dentro deste ícone de ordem. Vamos criar um círculo. Então, talvez algo assim. Parece bom. Posicione-o aqui, talvez aqui em algum lugar assim. E vamos criar rapidamente o número um. E como podem ver , são 14. Vamos abaixar para 10 ver como isso se parece. Talvez possamos posicioná-lo no centro deste círculo. Eu acho que parece bom, mas você tem que testá-lo. Então, por exemplo, se eles adicionaram 10 compartilhamentos para que você possa digitar 10. E como você pode ver, isso é muito grande porque não pode acomodar este círculo. Então temos que abaixá-lo ainda mais. Talvez 28 e eu acho que oito parece bom. Então o que eu quero fazer é simplesmente criar um para este caso e fazê-lo ir do centro e agora posicioná-lo no centro fora do seu círculo. Então, assim. Mas porque o texto tem a área segura ao redor na parte superior e na parte inferior. E se eu aproximar muito mais, você pode ver que esta área no topo é muito maior do que esta área na parte inferior. Então o que eu gosto de fazer é em vez de aqui, é o meio. Mas como você pode ver, há muito mais espaço vazio no topo. Eu gosto de simplesmente atirar em algum lugar por aqui, então se você diminuir um pouco, você pode ver que está bem no meio. Agora o que queremos fazer a seguir é talvez queremos tentar na borda criativa, que é a espessura deste ícone apenas para ver como ele se parece. Mas eu não acho que vai ficar tão bom. Então, três, como você pode ver, é mais ou menos por aí, mas não parece tão bom. Então vamos simplesmente criar um. E queremos remover a borda e para a cor do campo. Vamos simplesmente escolher essa cor. E eu acho que isso parece bom. Só usei o branco para o número e acho que parece bom. É legível e as pessoas podem ler, lê-lo facilmente e ver o que está dentro. Então, o que queremos fazer agora é voltar para o painel de camadas. Não olhe bem aqui. Digite círculos. Eu só quero que você circule, vá para as ordens e selecione também Controle G. E talvez você não dê o nome. Carrinho Icahn. Algo assim, Controle. Vês? E o que queremos fazer é saltar para trás bem aqui. Onde estão os ícones e talvez queiramos mover isso um pouco, então clique duas vezes aqui. Mova-o para algum lugar por aqui. E você pode querer selecionar todos estes para cima até aqui, movê-los para fora do caminho. Então, mais uma vez, para aqui ampliando muito mais perto o controle V para que possamos baseá-lo. Alinhe-o com a borda inferior porque ele tem um círculo na parte superior e você pode movê-lo para a direita e ver o espaçamento entre eles. Então está em 60 e agora você pode selecionar todos eles mais uma vez, como então zoom em um pouco mais perto e torná-lo 60 também. Como assim. E você também pode clicar duas vezes pode talvez fazer algo assim. Então agora nós temos esse ícone e isso é exatamente o que eu estava falando. Então, muitas vezes, você pode encontrar esses problemas, mas você só quer lidar com eles à medida que eles aparecem. Então, por exemplo, agora que temos ah ícone carrinho preenchido, podemos incluí-lo em alguns outros lugares. Então, talvez eles adicionaram um item ao carrinho a partir daqui para que eles possam clicar aqui, saltou para esta página para este sofá adicionado carrinho de dedo e, em seguida, voltar para casa ou simplesmente clicado aqui para proceder ao pagamento. E talvez eles mudem de idéia. Eles disseram: “ Ok, Ok, eu quero ir para a tela inicial. Eles clicaram no logotipo. Talvez ele vai levá-los para casa ou simplesmente clicar aqui no menu, talvez escolher locais de loja, perfil meus pedidos ou ir para qualquer outro lugar. Mas este carrinho Icahn vai ficar cheio e eles podem clicar nele e saltar de volta aqui a qualquer momento. Então é assim que é importante lidar com telas ausentes para lidar com elementos ausentes. E isso vai acontecer basicamente em todos os projetos em que você está trabalhando. Então, basta lidar com isso como ele vem junto e explicar aos seus clientes que às vezes essas coisas podem passar despercebidas. Às vezes eles vão mudar o seu resumo. Eles dirão para incluir algumas coisas um pouco mais tarde no projeto, então apenas saiba quando essas coisas ocorreram, apenas lide com elas como elas aparecerem no próximo vídeo, vamos começar com nossos protótipos, e eu vou mostrar a vocês como você pode duplicar algumas dessas telas para criar algumas animações incríveis. Então eu vou ver lá 27. Protótipo 1: Vamos agora começar com a face de prototipagem fora deste projeto e antes de começarmos, eu só quero deixar algo claro. Eu fui em frente e remover a uma extensão dos nomes ST Ng como com ele para a parte de design , se você lembrar, apenas para cortar, às vezes abreviado para discurso. Então o que eu quero fazer agora é selecionar a casa e fazer duas cópias dela. Então simplesmente segure minha chave antiga e arraste-a para baixo e nos faça na mesma mais uma vez. Assim? Então, por que eu fiz isso? Porque eu quero fazer um gatilho de arrastar para esta seção, bem como atrair gatilho para esta seção para que as pessoas possam arrastar e ver elementos diferentes dentro desta seção. Então, como podemos fazer isso é ainda estavam dentro da nossa torneira de design. Então é aí que você faz todo o seu design. E quando você estiver pronto para começar a prototipar você, em seguida, basta clicar por guia de embalagem e, em seguida, passar para ele e você sempre pode alternar frente e para trás entre os dois. Então, para começar, estamos na segunda tela. Então, em segundo lugar, e talvez você possa até nomeá-los como se fosse um lar para e, em seguida, pulando aqui e selecione a casa três só para que eles pudessem Você sabe o que você está fazendo e onde você está. Então casa para enfraquecer, Selecione esta seção mais popular e clique imagem 123 mantenha o deslocamento e, em seguida, simplesmente movê-los aqui até que eles se reúnem com o nosso guia à direita. E mais uma vez, é aqui que os nossos guias são tão poderosos e tão importantes para que possamos saltar para trás e ir para casa três e depois fazer o mesmo para as combinações de quartos. Então selecionado combinações localizador imagem 123 e, em seguida, simplesmente movê-los todos para ouvir. E agora podemos começar a prototipagem para que você possa clicar na casa número um salto dentro do protótipo, e o que queremos fazer é clicar neste primeiro objeto, então Milan, uma lâmpada no nosso caso, e então simplesmente arrastá-lo até aqui e para a interação que você pode usar arrastar você pode usar auto animar home para é o destino e para a atenuação. Talvez possamos usá-los para fora e vamos clicar no nome do Our Port Click Play aqui apenas para testá-lo e ver como ele se parece. Então você pode ver que é o gatilho de arrastar. E agora para voltar, basta clicar aqui neste primeiro dragão de volta. Parecerá exatamente a mesma interação. E se eu clicar aqui, em seguida, jogar e usar o gatilho de pista mais uma vez, como você pode ver agora nós podemos voltar para ele. Então é uma pequena animação muito legal com a flexibilização. Então, quando você solta, ele meio que flui para o lugar. Agora, como você pode ver, esta nossa porta está estendida para baixo, você também pode rolar para baixo e localizar nosso processo. Mas o que queremos é passar para a segunda seção. Então, para os três da casa, queremos fazer o mesmo. Leia as combinações de quartos. Então saltei de volta para casa. Um. Selecione Este 1º 1 você pode ampliar um pouco e, em seguida, simplesmente arraste sobre este estreito para baixo, use exatamente as mesmas configurações que você fez antes e faça o mesmo que antes. Então, por que o 1º 1? Por que não o 2º 1? Bem, porque no 2º 1 você pode ver que temos este estado. Então ele é movido aqui para a seção mais popular, e no primeiro 1 eles estão todos em seu estado original, então é isso que queremos criar. Então, se eu pular aqui, bater, jogar e fazer isso, você pode ver que funciona muito bem. E eu também posso fazer isso e funciona muito bem. Em seguida, vamos rapidamente saltar em frente e fazer isso. Faça o mesmo para alguns desses ícones. Então, para o ícone de menu, podemos saltar para trás e clicar aqui. Então, em vez disso, fora do gatilho, queremos usar a torneira. Então, em vez de arrastar, você deseja usar passo em vez de ação ou animar o dedo do pé. Você deseja escolher excessivamente porque você deseja esta sobreposição do dedo da tela na parte superior desta tela, e agora você pode querer voltar atrás. Então, quando você clicar neste ícone X aqui, arrastá-lo dedo do pé aqui, Passo apenas casa se dissolve então ele vai voltar e vamos rapidamente testado para fora para que ele para jogar hit bem aqui, e como você pode ver, ele vai sobrepor na parte superior da tela, e quando você clicar em atos, ele irá fechá-lo novamente. Então, você pode rapidamente fazer isso para todas essas telas, se você quiser, mas nós estamos indo dedo do pé saltar para dentro. Isso é parte disso. Mais tarde. E agora vamos animar rapidamente as zonas para que você possa clicar na pesquisa e ele irá levá-lo para a pesquisa aqui ou aqui. Você pode escolher, quiser organizá-los. Então vamos rapidamente para os filtros porque eu quero pesquisar por filtros. Agora isto é uma torneira. Não é demais, é uma transição, e talvez queiras escolher esta nação. É este e animação que você pode escolher, dissolver ou você pode escolher ligeira esquerda deslizar para fora. Talvez possamos pegar um pouco para este, então vamos testar. Veja como parece. Jogar. Clique aqui e ele vai deslizar de cima. E eu gosto de como isso parece, então você pode simplesmente clicar aqui perto e ele vai levá-lo de volta para fora, pisar alguns fora desses outros. Então vamos usar aquele slide de transição para casa para cima ou talvez leve para baixo. Então clique aqui, acerte, jogue, clique aqui, e quando eu clicar bem aqui, ele fará o mesmo e saltará de volta para baixo. Então ele veio para cima e pulou de volta para baixo. E uma última coisa que nos resta fazer para esta tela é clicar aqui no ícone do carrinho. Talvez você possa ampliar um pouco mais perto assim e simplesmente arrastá-lo para o seu carrinho. Então, para encomendar detalhes, passo, transição ou os detalhes. E em vez desta ligeira para baixo, talvez você possa ligeira direita, por exemplo, apenas para ver como isso se parece. Então, em um clique bem ali, ele vai ligeira à direita. E eu gosto de como isso parece e uma última coisa a fazer. Você pode escolher tão popular e você pode talvez clicar em para ver velho. E vai levar-te a esta secção. Então, Tep e em vez de deslizar mordidas direitas judeus dissolver e finalmente rotear combinações de quartos. Talvez possamos escolher este 1º 1 porque é o nosso 1º 1 E porque não podemos ir a partir daí , talvez você possa escolher Seal porque nós o usamos para esta parte fora da animação, podemos apenas ver todos clique aqui. Vai levar-nos à combinação da sala de transição da sala de estar e talvez possamos escolher um pouco à esquerda neste caso. Então vamos testá-lo rapidamente para que tudo isso funcione corretamente. E se eu clicar no selo, você pode ver que ele nos leva para a sala de estar. E quando eu clicar de volta neste ciclo tão selecionado, ele pode nos levar a esta tela mais uma vez. Então, em vez da ligeira esquerda, vamos escolher ligeira, certo? Então, mais uma vez , casa, clique aqui, combinações de Roma. Então veja tudo Ok, eu gosto disso e eu posso voltar para a tela inicial e é isso para este primeiro vídeo. No próximo vídeo, vamos passar para filtros de pesquisa de tela de categoria e assim por diante, então eu vou ver lá. 28. Protótipo 2: Vamos agora ir em frente e inimigo essas outras telas. Então, para a tela da categoria, se você pular aqui, ele nos levará para a tela de pesquisa. E talvez possamos ir aqui, por exemplo, porque é isso que queremos. E em vez do slide para a direita, você pode escolher dissolver quando eu clicar insight e selecionar este sabonete ícone para os pedidos. Eu posso ir para detalhes do pedido usado. Estes velhos talvez, e você sempre pode saltar para trás e clicar em alguns desses ícones e ver o que você fez. Então você pode pular. Veja onde ele está bem aqui, e você pode ver que é luz direita para que você possa usar exatamente a mesma animação para ele, assim você pode clicar sobre ele zoom um pouco mais perto, ver se ele está selecionado. É, E como você pode ver, é certo aqui, em vez do resultado, deslize para em vez do resultado, a direita para que você possa usar exatamente a mesma animação em cada tela. Agora, finalmente, vamos usar o menu, então clique aqui, pule no menu para tocar em vez da transição, você pode escolher excessivamente, e você pode ir para a ligeira para baixo. Mesma coisa localizada para a tela inicial, e você sempre pode conferir e ver se você fez exatamente isso. Então, em vez disso, para dissolver como está aqui. Talvez possamos escolher ligeira para baixo apenas para ter essa consistência em nossa tela. Então, se eu clicar aqui, clique no menu. Será leve para baixo, e se eu clicar em algum lugar ao redor, ele nos levará até aqui. Mas em vez do X aqui, porque ele sempre nos leva para a tela inicial, queremos removê-lo. Então, quando clicamos em algum desses sob telas, ele quer nos levar de volta para casa. Mas fique nesta tela específica para que você encontre isso de vez em quando. Então, quando você estiver animando, clique aqui do que em algum lugar por aqui. Ele vai apenas fechá-lo e não voltar para a tela anterior que você estava indo encontrar finalmente para esta tela. Vamos clicar em classificar por, e ele vai levá-lo para esta tela e em vez do excessivamente vamos escolher transição eo que eu quero, por exemplo, é escolher ligeira direita e ver como isso se parece. Clique aqui, então classifique por slide, certo? Eu acho que parece bom e ST Ng como fizemos antes. Portanto, queremos remover este ícone X e tentar novamente. Então clique aqui. Então deslize para a direita. E como você pode ver agora, queremos adicionar algumas telas adicionais aqui para que possamos aplicar a seleção. E assim nos trará de volta a esta tela em particular. Então, agora que animamos tudo isso, talvez você queira clicar no logotipo que nos levará para a tela inicial. Então toque em, talvez você possa usar a animação automática. Mas vamos apenas fazer a transição e talvez você possa escolher diesel, então o que quer que você tenha o logotipo, ele irá levá-lo para a tela inicial. Então agora vamos escolher esses filtros de pesquisa e vamos animar. Mas antes de fazermos bater controle ou comando s para que possamos dizer nosso projeto e nossas mudanças. Então, o que queremos para esta tela é simplesmente saltar de volta para a parte de design. Segure o seu antigo ou opção, continue pulando abaixo e o que queremos é tê-los fechados e tê-los abertos e finalmente, tê-los aplicado. Então será este. Agora, este botão deve ser ótimo para esta primeira parte. Então escolha esta cor ou talvez até mesmo nesta cor, Vamos ver. Sim, e para o texto selecionado Cor mais escura. Então, algo assim escolhe as mesmas configurações para este, porque vai ser ótimo para fora. E, em seguida, quando você aplicar, quando você faz suas seleções, ele irá mostrar-lhe aplicar botão de seleção, que irá levá-lo de volta para esta tela. Então, o que queremos para o pessoal é mudar um pouco disso e adicioná-lo, um pouco dele. Então, o que você quer para o preço seta para baixo, você pode virar para cima, então porque ele vai ser fechado e tudo isso vai ser escondido. Então, em vez do preço e do intervalo, tudo será materiais escondidos, mesmo Pense então localize a seta para baixo e vire-a para que todos os materiais vão direto aqui que possamos ter o mesmo espaçamento e você vai esconder tudo o que é localizado dentro desta seção de materiais e finalmente lavável e mecanismo Meghan. Você pode mover essas duas seções para cima e ter o mesmo espaçamento que era para todas essas outras, assim, como você pode ver, todas elas estão fechadas, e agora quando você clica em algumas delas, então precisamos clicar sobre o preço e sobre os materiais para abrir essas seções para cima de modo que o preço e as jóias são abertas. Mas vamos remover este quadro e apenas acreditar no texto. Então, quando as pessoas clicam neste quadro, ele irá mostrá-los e ser aberto, e você pode fazer mais algumas alterações. Então, por exemplo, talvez possamos fechá-lo nesta tela e depois fazer mais uma tela. Então, assim. Então, até que , como aqui, sim e não, esta será a nossa última tela. E para este, vamos usar as mesmas configurações que fizemos antes. Então, assim, e eu vou te mostrar o que quero dizer. Então, neste 1º 1, todos eles estão fechados neste 2º 1. Apenas este 1º 1 está aberto, então vamos pular e fechar os materiais. Então, mais uma vez, seta para baixo deve estar para cima, e esta letra e coágulo vai ser escondido, e você pode mover todos eles um pouco para cima e torná-los 20 pixels a partir deles. tão separados, 20 pixels em todos eles. Então este vai ser o nosso 1º 1 no 2º 1. Vai ser aberto, mas apenas o quadro será escondido e finalmente aqui. Quando você selecioná-lo, ele vai aparecer e ele vai mostrar-lhe este quadro. Então agora vamos em frente e animar tudo isso. Então, o que você pode fazer é quando você clicar em classificar por, ele irá levá-lo para esta tela. Então vamos saltar para trás protótipo do dedo do pé, então classifique por esta tela e vamos testá-lo rapidamente. Veja se funciona. Ele faz, e agora o que podemos fazer é clicar no preço na seta e ele vai mostrar-lhe esta tela Então toque transição seria auto animates porque queremos que boa animação. E mais uma vez, quando você clicar nesses materiais, por exemplo, e você pode ampliar um pouco mais se você não pode selecionar o ícone diretamente e usar o mesmo inimigo automático para facilitar os filtros de pesquisa aqui mesmo. E, finalmente, quando você clica na escada, mesmas animações aqui, ele vai levá-lo aqui, e finalmente, quando você clicar, aplicar a seleção. Ele vai levá-lo de volta para esta tela, e para isso vamos escolher transição e para a transição você pode escolher dissolver. Então vamos testar tudo aqui para jogar. Então, quando eu clicar em classificar por, ele vai nos levar a esta tela Clique preço. Ele abrirá este elemento de preço. Clique nos materiais. Vai abrir este grego na carta. Ele irá mostrá-lo como uma seleção e, finalmente, aplicar a seleção, e ele irá levá-lo de volta para esta tela. Então é basicamente isso para este vídeo é que você pode ver às vezes você tem que fazer algumas telas adicionais e algumas mudanças adicionais. Mas é muito divertido porque você pode fazer essas animações. E finalmente, se você quiser fechar todos eles de volta, você pode simplesmente ir para o outro lado e clicar nessas setas e voltar e fazer engenharia reversa para voltar para esta tela. Mas achei muito mais fácil de clicar. Aplique seleções, porque é isso que os usuários farão na próxima coisa. Nós vamos entrar e fazer algumas animações na combinação de sala, e eu vou mostrar a vocês como você pode fazer alguma animação agradável para a imagem de fundo também. Então eu te vejo lá 29. Protótipo 3: foi saltar para dentro e criar animação para a tela de combinação errada. Então, mais uma vez, pule na parte de design, mantenha velho e obrigado abaixo. Então, coloque-o aqui e o que queremos aqui é mover isto para a direita. Então salte para dentro, localize o cartão um e cartão para simplesmente selecionar os dois e movê-los aqui. E o que também queremos é mover esta imagem de fundo um pouco para algum lugar como aqui, talvez. E o que você vai ver aqui é uma pequena animação. Quando você saltar para trás e para a frente, Então saltar para o aumento protótipo eo que você quer é clicar aqui, arraste para baixo. Trigger é um arrastar, animação automática e flexibilização que você pode usar está fora. Então como isso parece ter chorado aqui. Então, antes de o fazermos, vamos apenas localizado de volta para aqui. Então arrastar auto animador em combinação está fora e agora podemos bater pré-visualização. Então, quando a tela anterior se abriu, aqui está como isso se parece. Então você pode ver que temos esta bela animação de fundo fora desta imagem. Então você pode imaginar se você tem mais cartas aqui. Então, se você tiver três ou quatro, por exemplo, você pode mover a imagem um pouco menos para a esquerda, e então toda essa animação ficará muito mais agradável e muito mais limpa do que é agora. Então imagine que você tem mais três ou quatro cartões e as imagens muito mais brancas, e então você pode mostrar muito mais detalhes agora porque essas imagens livres de ar que eu tirei de um splash que vêm antes do cliente ter suas próprias imagens já. Imagine todos esses itens a serem posicionados perfeitamente. Então, neste primeiro cartão, digamos que eles estão vendendo este abajur. E quando você seguir em frente nesta segunda carta, digamos que eles estão vendendo esta moldura na terceira carta. Digamos que eles estão vendendo um abajur ou algo assim. Então, onde quer que o usuário se mova, esses carrinhos, esses itens aparecerão e, em seguida, pode simplesmente bater em alguns desses itens e, em seguida, abrir as páginas dedicadas para esses produtos específicos. Então é realmente uma arma poderosa que você tem aqui dentro dos ovos de adobe D que você pode explorar e depois se mover. E, finalmente, o que queremos para esta tela é escolher esta imagem, digamos ou clicar no Paris, talvez e depois arrastá-lo para esta tela. O que queremos um passo. Não queremos o dedo do pé inimigo Automático em transição e queremos estes velhos fora. Então, mais uma vez, como isso parece hit play e você pode mover estes ao redor. E quando você quiser selecionar este hit no nome e ele vai levá-lo aqui Agora, basta imaginar que esta era a cadeira e não o sofá, porque mais uma vez estamos usando imagens gratuitas, e cliente ainda não forneceu suas próprias imagens. Mas uma vez que eles o fizerem, e uma vez que entrarmos nos estágios finais deste projeto, tudo funcionará muito mais perfeitamente e ficará muito mais bonito do que é agora. Então eu vou ver vocês no próximo vídeo, onde nós vamos começar com telas de itens selecionados, e nós vamos adicionar alguma animação sutil para este fundo e esta cadeira, então eu vou ver lá 30. Protótipo 4: vamos agora animar essas telas de itens selecionados. Mas antes de o fazermos, porque este é bastante longo. Nós não queremos fazer cópia aqui embaixo, mas sim à direita. Então o que você pode fazer é mover algumas dessas telas, apenas saltar para a parte de design dela, movê-los aqui, e então simplesmente fazer o controle de para este e, em seguida, simplesmente arrastá-los de volta para a posição assim. Então por que fizemos isso é que queremos fazer este. Então este é o nosso 1º 1 sem nenhuma seleção nele. Então queremos fazer o 2º 1 para a cor e depois o 3º 1 para o tamanho. Então deixe este como se fosse este. Basta deixar a cor e nós vamos nos esconder para o tamanho. Vamos esconder a moldura, assim e em vez de aplicar a seleção, se você se lembra, mudamos para comprar agora. Então vamos fazer isso por ambos os botões. Então, vamos digitar agora, Controle. Vês? Não, ótimo aqui, Controle V só para economizar um pouco mais de tempo, você pode fechar todos eles e agora podemos fazer nossa animação, então por favor consulte esse item. Salta para o fosso de prototipagem e o que podemos fazer é por esta flecha. Se eu selecionei e arrastá-lo de volta, podemos voltar para a tela de combinação de sala, e vai ser transição passo em vez de dissolver. Vamos iluminar a esquerda e ver como isso se parece. Então ele jogava. E quando eu clicar aqui, ele vai virar para a esquerda. Ou talvez possamos mudá-lo para ligeira direita, porque vai fazer um pouco mais de sentido tão rápido. Bem aqui. Clique, toque e aperte o slide, certo? Como você pode ver, ele faz. Então agora o que podemos fazer é quando você clicar nesta cor aqui, ele irá levá-lo para esta tela e em vez de fora da transição. Queremos escolher ou animar o dedo do pé está fora. Três segundos. Parece bom. Então, agora, se eu clicar aqui, bater, jogar e selecionar a cor. Como você pode ver, ele se moveu apenas um pouco e introduziu este botão comprar agora. Então agora o que queremos é acertado aqui para que possamos fazer uma seleção para o tamanho. Deixe tudo como é, porque queremos exatamente a mesma animação para bater no 1º 1 E quando um hit aqui, você pode ver a animação é apenas um pouco movendo Esta cor para cima Clique aqui. Como você pode ver Agora temos esta seleção e, finalmente, o que precisamos é de um botão comprar agora. Então, quando você clica bem ali, talvez queiramos incluir mais uma tela aqui para que possamos animar isso. Mas vamos movê-lo daqui. Detalhes do pedido do dedo. Então clique aqui e, em seguida, bem aqui, toque em. Não queremos autonomia em transição. Queremos dissolver está fora três segundos. Taxa cíclica aqui bater o jogo. E quando você clicar agora, ele vai levar esta tela. Mas queremos fazer o mesmo daqui. Porque talvez as pessoas não queiram fazer uma seleção para este gelo. Talvez eles queiram ir para o tamanho padrão fora do tamanho que é. Então talvez eles possam clicar agora a partir daqui em vez de daqui. Mas a maioria das pessoas entrará aqui. Agora, se fosse 59 centímetros neste caso, este preço aqui será atualizado, e então será atualizado aqui também. Mas porque mantemos tudo simples com 1 24 pelo preço. Como você pode ver, é o mesmo aqui. Total é este aqui. Portanto, queremos mantê-lo o mais simples possível para este processo. Então eu acho que está bonito. Então, mais uma vez, clique aqui. Ele tocava só para que pudéssemos ver como ele se parece. E você pode ver que você também pode rolar para baixo e ler mais sobre este produto. Parece legal. Então, quando eu clico aqui, uma pequena animação ocorre. Você pode acertar o tamanho, então aqui e você pode clicar agora. Ele vai levá-lo para esta tela. Agora, finalmente, queremos animar esses três ícones, então clique neles separadamente como para que ele irá levá-lo para esta tela tão dissolvido parece bem aqui e finalmente aqui. Então, quando eu clicar em qualquer um deles e, em seguida, clicar no ícone, ele vai me levar para esta tela. Então eu acho que está bonito. Parece simples, porque era o que o cliente queria em primeiro lugar. E acho que fizemos um bom trabalho para essas telas. Agora, no próximo vídeo, vamos saltar no reboque, detalhes do pedido e criar uma boa animação para o deslizamento e remoção de alguns desses itens do carrinho, então eu vou vê-lo lá. 31. Protótipo 5: Não vamos entrar e criar algumas animações para a tela de detalhes do pedido antes que eu nos controle apenas para que eu possa salvar nosso projeto. Então o que eu quero é saltar para a aba de design, segurar o meu volumoso e fazer duas cópias. Então, assim, e talvez você possa localizar onde este estava. Se você pode alinhá-lo como é, assim e assim criar mais uma cópia abaixo, assim, certifique-se de que eles são da mesma altura. E para este, o que queremos é selecionar o cartão para o carro três e alinhá-los para o topo com o cartão um, assim e o cartão um, nós vamos escondê-lo, então ele não vai ser visível, e nós deseja atualizar os detalhes do pedido porque o removemos do CARRINHO. Então o que eu quero é localizar minha calculadora e é 2429 mais 98 ele vai ser de 5 a 7 agora. Então, como este para 5 para 7, porque o preço foi atualizado porque nós removemos um item do carrinho. Então o que queremos aqui é remover esta cadeira hostil daqui. Então eu simplesmente quero removê-lo assim e clique duas vezes em zero no meu teclado para diminuir a capacidade para zero. E o que eu quero agora é tentar conhecê-lo. Então eu vou para o protótipo. Vou clicar neste cartão, arrastá-lo e para baixo até aqui e o que eu quero é arrastar Auto. Qualquer aliviação de carne está fora. E vamos ver como isso se parece. Então ele jogava “Drag it “assim. E como você pode ver, ele removeu-o desta tela. Agora, o que você quer desta tela para baixo é que queremos animar a tela inteira. Então basta clicar no nome de quadros escuros, clicar aqui e arrastá-lo para baixo. O que queremos é tempo. Porque quando o arrastamos para cá, não vamos esperar um pouco. E então vá aqui para esta tela. Então atraso, O que queremos é talvez um segundo auto anima a ação está fora. É a duração de atenuação é de 0,3 segundos e, finalmente, o que queremos é clicar aqui. Prossiga. Aceitou o pagamento. Vá para esta tela, então toque em, porque o plano de fundo é o mesmo. Queremos usar o toque auto animar, talvez e pagamento e só vamos ver como isso se parece. Então clique neste 1º 1 clique jogar. Então, quando eu removi, soltou. Ele vai esperar um segundo e, em seguida, mover estes dois para cima em posição. E como você pode ver, Total também foi atualizado. Então, basta bater. Jogue mais uma vez, veja como isso se parece. Então preste atenção ao total. É 2651 E quando eu faço aqui e como você pode ver, total atualizado aqui e agora temos apenas esses dois itens no carrinho. Mais uma coisa que poderíamos projetar esta função. Então, quando você clica na seta e você pode escolher assim, por exemplo, para peças para peças, cinco peças, algo assim, o preço será atualizado aqui mesmo no total. Mas não vamos fazer isso porque o cliente estava mais interessado em como isso vai funcionar. Então, mais uma vez, clique aqui, pressione play e, como você pode ver arrastar, remova-os. Total atualizado. Prossiga para o pagamento. E como você pode ver, estamos agora na tela de pagamento e vamos rapidamente apenas fazer os ajustes na tela de pagamento Passar bem, então clique aqui e talvez queiramos saltar para a guia de design e fazer uma cópia rápida. Então mova com abaixo, assim Porque o que queremos é remover essas sombras da primeira tela. Então, no cartão de crédito, você pode escolher BG e simplificar a sombra para o mesmo para o carro do PayPal. BG removeu a sombra e aqui no 2º 1 queremos remover a sombra das pessoas porque o cliente quer pagar pelo cartão. Então aqui está como isso se parece com um protótipo. Uma vez que você está aqui, você pode selecionar a seta e voltar aqui. Portanto, toque em vez de animar automaticamente, você escolherá transição em vez de resultados leves. Certo, porque você quer voltar para esta tela e o que nós queremos. Então, queremos atualizar o total. Mas talvez queiramos que eles vão dar a eles a opção de ir a partir desta tela ou ir a partir desta terceira tela. Então, no caso ou se você optar por ir a partir desta terceira tela e apenas tem dois itens, você deseja atualizar o preço. Mas eu só quero fazê-lo assim. Então talvez eu possa clicar aqui, arrastá-lo daqui, tocar ou para qualquer carne que ele está fora. Então, isso é bom. E, finalmente, queremos escolher o cartão e, em seguida, saltou de volta para aqui e descartar o selecionado. Faça um pagamento, e o que queremos é que eles voltem para a tela inicial, por exemplo. Então vai ser transição. Dissolver está fora, e a duração vai ser um segundo porque queremos esperar um pouco antes de fazer isso. E, finalmente, uma alteração final é para este fundo porque eles não podem selecioná-lo antes de selecionar seu método de pagamento. Então, ele vai parecer o mesmo que esses outros botões que nós projetamos antes. Então, finalmente, vamos ver como nossa animação se parece, então está pulando da ordem. Detalhes. Clique aqui para acertar o jogo, proceder ao pagamento. Estamos aqui, então o preço é o mesmo que você pode ver. Eles não podem clicar, fazer um pagamento antes de fazer uma seleção. Então, quando você clicar aqui, essa sombra de fundo aparecerá, e agora eles podem fazer um pagamento. Eles podem clicar aqui, e quando eles pagaram pode levá-los de volta para a tela inicial. Agora, uma última coisa que queremos fazer é clicar aqui. Você pode propor um gatilho de tempo entre isso e isso para que você possa criar outra cópia desta tela fazendo ir daqui para aqui usando o gatilho de tempo e, em seguida, de volta para a tela inicial , uh, usando dissolver indecente seleção. E talvez queiramos torná-lo um pouco maior. Então, dois segundos. Veja como isso parece. Então, quando você estiver aqui, eu posso jogar hit, fazer um pagamento. E, como você pode ver, dois segundos de apostas para voltar para esta tela. Então é muito fácil. É muito simples. Como você pode ver, basta fazer essas alterações e apenas quero verificar isso rapidamente. Assim é a duração fora. Talvez seja um segundo e confira isso, veja como isso se parece. Então, quando eles clicam no cartão, leva um segundo para este dedo do pé sombra de fundo aparecer. Talvez você possa até criar um quadro em torno deste cartão apenas para indicar um pouco melhor do que ele selecionado. Mas eu acho que esta sombra de fundo funciona muito bem com o nosso design Orel. Então, no vídeo final, vamos saltar para os locais das lojas e o menu, e eu vou mostrar esses boxes também, então eu vou te ver lá. 32. Protótipo 6: agora, finalmente, vamos animar os locais da loja e as telas de menu. Mas antes disso, eu percebi uma coisa, e isso vai acontecer muito quando você estiver projetando. Às vezes, você inclui coisas que não são necessárias para algumas telas ou algumas páginas se você estiver fazendo o design do site, e no nosso caso, é esse ícone. Então são as ordens. Não consigo inserir detalhes do pedido, porque por que você precisaria do ícone do pedido dentro dos detalhes do pedido? Porque você está naquela tela para que o Seiken não faça nada. Então vamos saltar para a parte de design hit, delete, e nós vamos fazer o mesmo para todas essas outras telas, e eu vou saltar para dentro e excluí-lo para a parte de design também. Então clique aqui, excluído daqui e, finalmente, pulou dentro dos detalhes da ordem em nossa fiação e excluído de lá também. Então, como você pode ver, é muito simples toe fazer essas mudanças simplesmente saltar dentro de algumas dessas telas e fazer as mudanças. Mas essas coisas vão acontecer de vez em quando porque você está trabalhando neste projeto em tempo integral, e você dedicou seu tempo e sua energia a ele. mas às vezes comete alguns desses pequenos erros. Então agora, finalmente, vamos fazer animações para os locais da loja. Então, digamos que você está indo para ele a partir desta tela ou de qualquer outra tela onde você tem este ícone de pesquisa. Ele vai levá-lo para esta tela particular e vamos saltar dentro de um design, porque queremos fazer três telas. Então vamos usar nossa chave antiga mais uma vez e fazer uma duplicata dela e fazer um duplicado er-lo mais uma vez. Então o que queremos fazer com o 1º 1 é remover alguns desses itens. Então vamos remover a cor seletiva da cor. Nós vamos remover o tapinha e nós vamos fazer este cartão desaparecer para que possamos escondê-lo assim. E no 2º 1 em vez de localizações de busca, podemos digitar Bel Great, e vamos fazer o mesmo. Então, vamos remover pat de cor selecionada e descartar aqui para que possamos movê-lo da vista. E finalmente, vamos mostrar tudo na tela inicial, então basta clicar duas vezes aqui e digitar Belgrado e verificar se você inseriu em todos os lugares, assim podemos saltar para o protótipo. Agora clique aqui nesta primeira tela. E uma das necessidades é quando as pessoas clicam aqui dentro das barras de busca no texto Belgrado aparecerá. Vai esperar um pouco. E então ele mostrará todas essas informações aqui. Então, quando você clicar nele, você pode arrastá-lo aqui. Então toque ou dedo do pé qualquer carne e, em seguida, selecione este todo nossos portos, talvez esperar um pouco. Então tempo de atraso vai ser um segundo auto animar para esta tela bem aqui, e ele vai mostrar todas essas informações. Então vamos entrar rapidamente e ver o que fizemos. Então, quando você clicar neste 1º 1 você pode clicar local vai isca um segundo, e ele vai mostrar-lhe esta loja e loja de Belgrado bem aqui. Agora você pode fazer este carro aparecer. Então, por exemplo, talvez enfraquecer salto para esta tela e saltar para projetar localizar nosso cartão. Então aqui está, bem aqui, e talvez possamos movê-lo. Por exemplo, para baixo assim e vai ser zero pacenti e vamos ver como isso agora parece para que você possa saltar dentro. Clique aqui. Espere um segundo. E como você pode ver, Card apareceu daqui. Agora você pode até criar uma tela adicional e, em seguida, animar este ponto. Então, no terceiro cartão de tela aparecerá e aparecerá de baixo, como não é agora, mas esta parte vai aparecer na quarta tela. Pode fazer isso se quiser, mas acho que fica bem por enquanto. E, em seguida, o usuário pode clicar aqui e navegar para este local a partir de seu próprio local ou clicar em mais detalhes e saber mais sobre esta conta. Ótima loja. E talvez isso possa ser como uma janela pop-up e com o fundo preto, por exemplo, para que você possa apagar todas essas outras informações, e você poderia ter talvez outro ícone ex para que eles fechassem se quisessem fechá-la de Lá. Esse cartão pode conter, por exemplo, um pouco mais de informação, talvez imagens sobre este lugar, talvez um número de telefone, e-mail, fax. Se eles estiverem usando fax, e-mail, e-mail, endereços como esse, e eles podem entrar em contato com eles diretamente a partir do site. Ou eles podem fechar e navegar até a loja usando este botão aqui. E finalmente, o que nos resta fazer é simplesmente clicar no menu, usar protótipo e simplesmente inimigos. Um pouco disto. Então, quando você clicar no logotipo, ele irá levá-los para a tela inicial. Então toque em transição, dissolva. Ele está fora. Eu gosto disso. E finalmente, talvez possamos escolher minhas ordens também, e isso irá levá-los para a etapa de detalhes do pedido. Mesmas configurações de locais de armazenamento aqui. Talvez possa levá-los. Reboque esta primeira tela, então use o mesmo, e eu acho que é só isso. Então talvez eles possam usar meus pagamentos e ir para esta tela. Mas deve ser uma tela dedicada aos meus pagamentos onde eles podem ver todos os seus pagamentos. Então, quando eu cliquei aqui, ele tocava e ia para lojas. Você pode ver onde lá e quando eu selecionei mais uma vez, talvez clique no logotipo. Ele pode nos levar aqui, Então, quando você clicar no menu, eu posso a partir daqui clique aqui ele vai levá-lo para a tela inicial. Mas, por exemplo, se você estiver nesta tela hit play, em seguida, pressione menu. Mas não fomos animados daqui, então vamos fazer isso agora. Clique aqui e depois aqui. Tep e dissolver demais. Acho que parece bom, mas não deve diminuir, porque é o que usamos para todos esses urbanos . Então, quando você clica lá bater, jogar menu hit, ele está deslizando para baixo como você pode ver bem quando você clica aqui, ele vai levá-lo para a tela inicial. Controle é salvar nosso projeto, e é isso para a animação. Como você viu, você pode incluir diferentes tipos fora de animações Você pode ir com mais fácil uma vez como com ele. Com essas setas, que estão se abrindo para cima e para baixo, você pode ir para um pouco mais avançado tipo off animações como fazemos com a combinação de salas , onde tudo desliza da esquerda para a direita de cima para baixo. Você pode até tornar o zoom da imagem muito mais próximo. Você pode criar um gatilho de tempo como nós fizemos. Por exemplo, para este mapa, você pode animar cartões para ir da esquerda para a direita de cima para baixo, como fizemos com este local da loja. E finalmente, você pode até incluir tudo isso junto e juntar tudo para criar animações como fizemos para as ordens quando eles arrastam este primeiro carro para a esquerda, então eles esperam um pouco e tudo preenche como deveria e, em seguida, atualiza o preço e atualiza os botões também. Então isso é basicamente para o rosto de prototipagem na próxima parte. Fora deste curso, vamos falar sobre como exportar seus designs e como você pode enviar tudo o que fez até agora para seu cliente e para seus desenvolvedores para que eles possam parar. Comece a desenvolver, e seu cliente pode entender todo o seu processo que você colocou em prática e como o design está indo para o trabalho. Uma vez que está frio, ele e uma vez que é vida em dispositivos de usuários. Então eu te vejo lá 33. Criando o guia de estilo: nesta parte do curso, vamos começar com a exportação de nossos ativos porque precisamos enviar esses arquivos que estávamos trabalhando para nossos clientes, bem como para seu desenvolvedor. Mas antes disso, temos que fazer algumas mudanças, e temos que prepará-las para que possamos enviá-las para eles. Então vamos começar com a criação de um guia de estilo. Então, se eu ampliar um pouco mais perto daqui agora, este arquivo foi chamado de ícones. Mas eu posso simplesmente clicar sem graça aqui e criar um guia de estilo assim, e este guia de estilo vai conter ícones que foram usados, bem como cores e fontes. Então, para fazer isso, eu posso simplesmente estender este trabalho de arte para baixo e remover isso para que eu possa incluir o logotipo bem aqui , assim eu posso talvez até mesmo fazer uma duplicata dele e talvez fazer um local maior. Esse não é o requisito, mas você conduz isso se quiser, e agora simplesmente posiciona isso no meio para torná-lo um pouco mais atraente. E vamos movê-lo, Toby, Toby, em algum lugar por volta de 100 digamos, apenas nos dê um pouco mais de espaço, e você também pode fazê-lo com esses ícones. Simplesmente vai mudar, e talvez você possa fazer isso. Então 456789 10 e criar espaçamento desigual. Agora vamos usar cores, e o que vamos fazer é usar uma barra de ferramentas retangular. Clique em Sim, é painel e temos que por US $6 no total, para que você possa criar um bom direcionamento como este. Posicione-o, Toby, exatamente a mesma distância que estes dois estavam antes. Então 100 como esse e, em seguida, fazer seis cópias para que você possa usar uma grade de repetição e fazer assim, por exemplo, e você pode deixar o espaçamento como ele é se você quiser. Oregon simplesmente em agrupá-lo, removeu as bordas e, em seguida, simplesmente ir um por um e escolher essas cores. Então vá assim. , assim como E. B. E finalmente, este é F como era e apenas criar uma bela fronteira para ele. Agora vamos incluir um texto tão puro. Clique aqui, e este 1º 1 é F C 7800 assim, e você pode incluí-lo aqui mesmo. Certifique-se de que está no meio e simplesmente aumente o tamanho para 10 ou talvez até 16. Então, é facilmente legível. Torná-lo branco porque todas as nossas cores, exceto a cor branca, são brancas e você pode posicioná-lo como então clique duas vezes aqui e digitando zero B zero b zero b zero b para este e segure Old Key para duplicá-lo novamente. Selecione tudo isso. Então este é 858585 Então essas cores são bastante simples, então nada de grande realmente. Clique duas vezes aqui. E para este próximo, temos 717171 Temos E B B B B para este, então é E B B B e B. Assim. E finalmente, porque este é um branco, vamos usar esta cor e simplesmente digitar f f f f f f f f f f Então é isso para nossas cores. E você também pode agrupar todo esse salto de controle de hit G em camadas, painel e cores de digitação. Você pode organizá-lo um pouco melhor, então esses dois logotipos vão até o fim e finalmente essas cores vão até o fim para que você possa agrupar todos os seus ícones. Então vamos encontrar o ícone do carrinho. É este. Então é ordem. Agrupe-o como, então selecione todos eles assim. Controle G O vazou Quero dizer ícones quando este apenas para os desenvolvedores para que eles possam facilmente copiar valores a partir daqui e não entrar em seu design o tempo todo apenas para que eles possam usar cores. Agora, vamos incluir alguns fundos, para que você possa Presti e pular libras de interesse para que você possa ver quais fundos você precisa incluir. Então este é sentido aberto, e eu acho que é semi parafuso como este simplesmente selecionado a partir daqui. Então semi parafuso. Esta é uma palavra como esta e você pode usar isso. Apenas faça 18 como se estivesse aqui. Posicione-o assim e certifique-se de que seus 100 mesmos como estes outros foram assim e você pode fazer uma cópia dele. Então simplesmente controle D e posição talvez 23456 Talvez criar assim. Faça com que todos eles fiquem alinhados à esquerda. E isso vai ser 14 e seu regular, e você pode usar esse senso aberto 14 irregular para criar parágrafo de texto se você quiser proteger o controle de hit D e, em seguida, simplesmente movê-lo 60 para baixo, assim, criando texto de área como isso, talvez até aqui, em seguida, simplesmente baixá-lo para baixo como assim Ir em seus plugins, Lauren Ipsum preenchido com lugar ou texto inserir texto e é isso para este. Talvez porque é o mesmo, talvez possamos torná-lo 40 pixels para baixo como assim Ir para uma coluna vertebral camada selecionar tudo fora do texto e simplesmente ordená-lo da maneira correta como tão controlado G Move-lo para baixo. E este é o nosso texto, como “O próximo”. O que? Eu quero criar nossas sombras porque usamos algumas sombras se você se lembrar para todos esses itens então o que podemos fazer é simplesmente selecionar um desses controle C. Nós aqui, posicioná-lo como então certifique-se de que seus 100 tão assim e o que eu quero fazer é incluir algumas sombras para que você possa usar Shadow Jump aqui. E se você se lembra , são 55 10. Pressione enter saltando para sua sombra. Localize isto. Selecione esta cor. É 25% e você também pode selecioná-lo. Aperte o controle D salto aqui e talvez torná-lo 60, por exemplo. E você pode usar para dois e cinco porque essa era a nossa sombra inferior. Então você pode criar esses dois você pode saltar para o painel de camadas. Então, como os dois controlam o frio, essas sombras e, finalmente, o quê? Quero incluir o nosso esplendor. Então o que você pode fazer é duplicar esses dois então controle d movê-lo assim. E estes vão ser radiante como este e talvez fazer a distância 100 para que possamos manter tudo agradável e suave como deveria. Você pode diminuir isso porque não tínhamos ilustrações de animações, então vamos terminar com nossas sombras. Então, o que você pode fazer para este primeiro 1 é simplesmente localizar este hit cópia hit baseado neste e fazer o mesmo para este. Então copie este clique direito baseado em Paris, e o que podemos fazer é acreditar nas sombras como elas são, porque usamos as sombras lá. Mas se você quiser, você pode fazer uma cópia alternativa fora deles e criar uma sem sombras. E enquanto estamos nisso, podemos fazer isso tão bem controlado e talvez você possa usá-los para gostar disso e usar esses outros dois simplesmente torná-los 60 como este ou 40 posicionar este 140 e você pode mover todos os três assim. Então são 40 pixels ao redor, e talvez possamos fazer o mesmo por isso. Então, 12 e 40. E agora podemos mover os Grady INTs para 100 assim. Então eu gosto de encomendar meus arquivos como este apenas para que os desenvolvedores podem então não, e ter uma visão maior e agradável de tudo que eu usei dentro deste design. Então, para estes dois, vamos remover as sombras. E nesses dois, vamos deixar as sombras. Por que assim? Porque foi isso que usamos dentro da fase de prototipagem, se você se lembra. Então, para estes dois, não temos sombras. E para estes dois, temos. Então é isso. Para o nosso guia de estilo, você pode bater o controle. E localiza sua pasta REFILES iludida se você quiser, e você pode simplesmente selecionar isso como um Pdf J peg PNG. No entanto você quer e bater exportação, e você também pode deixá-lo como é um guia de estilo, e eles podem acessá-lo. E finalmente, quando você clicar em compartilhar um pouco mais tarde, e eu vou mostrar a vocês como desenvolvedores e clientes serão capazes de acessar todas essas informações dentro do Adobe X'd no arquivo compartilhado. Mas é sempre bom ter uma segunda cópia impressa se você quiser, se você quiser, para que eles possam acessá-lo a qualquer momento. Talvez estejam no telefone. Eles não têm conexão com a Internet, mas eles só querem verificar rapidamente alguns desses arquivos, e eles serão capazes de fazê-lo porque você o exportou como outro arquivo. Então, ou Jay Peak, PNG ou pdf no próximo vídeo. Vou mostrar rapidamente a estrutura de embalagem e como você pode empacotar seu arquivo para o para a entrega do cliente. Então eu te vejo lá 34. Estrutura de embalagem: neste vídeo. Só quero mostrar a minha estrutura de embalagem. Você poderia ter sua própria estrutura. Realmente não importa. O que é importante é que ele precisa ser fácil para o dedo do desenvolvedor. Compreender? Porque dentro dessa estrutura que você criou, desenvolvedor tem acesso a ele e aprender instantaneamente onde tudo está apenas para que ele acelera seu processo também. Portanto, antes de criar sua estrutura de embalagem, você pode ampliar um pouco mais perto. Nosso caso é que você pode ver que temos 10 telas diferentes e precisamos criar 10 pastas diferentes para cada tela. Não importa se ele tem apenas um item dentro que precisa ser exportado. Você ainda tem que criá-los como eles estão dentro do seu adobe x D. Então aqui está como ele se parece. Então, como você pode ver, temos 10 pastas diferentes aqui, bem como nosso guia de estilo. O que eu também gosto de fazer é criar outra pasta e chamá-la de facetas. Pressione enter porque dentro dessa pasta vamos exportar ícones do nosso guia de estilo , e é assim que vamos fazê-lo para que você possa ir tela por tela e, em seguida, exportar todas essas imagens. E para essas imagens PNG, o que você pode fazer é exportar um plano de fundo para que você não precise exportar todos os planos de fundo. Porque se você se lembra, esses três são exatamente os mesmos. Então você pode exportar apenas um plano de fundo e, em seguida, exportar essas três imagens PNG. Você pode exportar esta imagem. Você pode exportar essas três imagens, bem como esta imagem final, que é para vídeo. Mas vamos começar a exportar em um vídeo mais tarde. É isso para esta estrutura de arquivos. Eu só queria mostrar como você pode organizá-lo antes de enviá-lo para o desenvolvedor e para o cliente no próximo vídeo. Eu vou mostrar rapidamente como você pode compartilhar esse protótipo com seu cliente, como você pode obter feedback, como você pode trabalhar com eles e como você pode fazer algumas mudanças rápidas e atualizar esse projeto e esse protótipo antes de enviar novamente reclinado para revisões adicionais. Então eu te vejo lá. 35. Compartilhado com o cliente: Então vamos compartilhar nosso protótipo com nosso cliente, e você pode ampliar bem aqui. Diz “Protótipo”. Clique na casa, que é o seu primeiro salto de tela dentro do seu protótipo e basta clicar neste botão de compartilhamento aqui. Você pode convidar a edição do dedo do pé, o que significa que você pode convidar outro dedo de designer. Edite este arquivo, que significa que você vai enviá-los para o arquivo, que eu não recomendo se você não faz parte da equipe ou se o cliente ainda não pagou você , então se eles fizeram, você pode enviar este arquivo Obviamente. Mas se não o fizeram, eu realmente recomendo que você não envie nenhum arquivo antes do pagamento que você pode compartilhar para revisão, que é o que você vai fazer. Você pode compartilhar para um desenvolvimento, que é você pode compartilhar para seus desenvolvedores para ver tudo, o que é insight e você vai clicar em compartilhamento para desenvolvimento no final deste projeto . Então, quando o cliente concorda com tudo, ele não tem mais nenhuma mudança. Revisões, e você precisa enviar o arquivo para que eles sejam desenvolvedores possam acessá-lo. Em seguida, você pode clicar em compartilhar para desenvolvimento. Pouco gerar um link da mesma forma como compartilhar para revisão, e, em seguida, desenvolvedor pode acessá-lo on-line em qualquer lugar em qualquer dispositivo. Eles só precisam da conexão com a Internet, obviamente, para poder ver quais usar, quais cores você usou. Quais problemas de imagem espaçamento entre cada um dos elementos à esquerda direita? Pare o fundo no meio. Tudo está lá para eles, tudo está disponível e eles podem, claro, usar este arquivo final adobe xz para acessá-lo e verificar manualmente se ele se alinha com esse compartilhamento para a tela de desenvolvimento. Finalmente, temos links gerenciados, que você pode gerenciar seus próprios links. Então, se você estiver usando a versão gratuita do Adobe X'd, você só tem um link ativo que você pode compartilhar com seus clientes ou, se você estiver usando a versão paga, ofereceu obesidade. Então, se você tem a assinatura da Adobe Creative Cloud, você tem um número ilimitado de links, e lá você pode, obviamente, ir em frente e excluir links desnecessários. Você pode editá-los e assim um. Finalmente, você tem um vídeo gravado se você quiser gravar um vídeo, que você pode então compartilhar com seu cliente para que ele possa ver o processo antes de obter o protótipo, qual eles podem clicar obviamente, ou se quando receberem os arquivos finais. Então, vamos clicar em compartilhar para revisão e você não pode adorar comentários. Você pode nomear o projeto aqui. Nós não vamos fazer isso e nos preocupar com isso, mas você pode tê-lo e incluir o nome do seu cliente aqui e o nome do projeto mostra dicas de ponto quente. Eu recomendo que você deixe este próprio porque, em seguida, as pessoas vão saber onde clicar dentro do seu protótipo mostrar controles de navegação, que serão os controles na parte inferior da sua tela. Então eu recomendo que você deixe o sol também, abrindo tela cheia. Eu não recomendo porque as pessoas às vezes se confundem com ele porque eles não sabem o que fazer e finalmente exigem senha. Você pode criar um possível para este protótipo se você não quiser que alguém o acesse sem nenhuma senha. E qualquer pessoa com o Lincoln View ou apenas pessoas convidadas pode ver se você clicar bem ali . Você pode então enviar algumas pessoas e e-mails e apenas inserir endereços de e-mail e enviados para essas pessoas. Quando você terminar com tudo o que você pode acertar, crie um link e ele começará a criar seu link e dependendo do tamanho do seu projeto e fora de sua conexão com a Internet. Isso é o quão rápido ele vai gerar este link para você. Então, quando ele gerou o link, se você fizer alguma alteração, você pode clicar aqui onde ele diz atualização, e ele vai atualizar o link. Você pode copiar, vincular ou copiar código incorreto. Se você quiser colocá-lo dentro do seu site, por exemplo, e para vê-lo, você pode simplesmente clicar aqui. Se um salto para trás rapidamente, você pode clicar copiar link e, obviamente, compartilhou esse link com seu cliente. Mas quando você clicar lá, apenas esteja ciente de que levará algum tempo para carregar, especialmente se você tiver ah, muito fora das telas. Agora temos 22 telas porque eu sempre digo que criamos algumas telas adicionais para este projeto. Mas se você tem apenas tendem, por exemplo, ele vai carregar muito mais rápido. E isso também depende muito da velocidade da sua conexão com a Internet, então você pode obviamente clicar aqui e ver tudo o que fizemos. Tudo funciona bem e você pode clicar aqui na parte inferior, então estes são controles inferiores, e ele vai alternar entre cada tela que você criou, e os clientes podem fazer isso também. Então, digamos que eles estão nesta tela, por exemplo, e eles querem deixar seu comentário. Eles podem simplesmente colocar no que quiserem para deixar seus comentários. Então, por exemplo, neste cartão de crédito e eles dão, escreva algo como Mudar cor, Grady Int ou Changed Radiant fora deste cartão. Isso é certo. Isso e quando eles terminarem, eles podem simplesmente clicar em enviar. E, como você pode ver na tela de pagamento uma, qual é essa tela? Temos este comentário para sempre saltar de volta para a primeira tela e eles deixaram o seu comentário. Você pode ver bem aqui. Ok, está na tela de pagamento um. Mas como posso acessá-lo? Qual delas é essa tela? Basta clicar aqui, e ele irá levá-lo diretamente para essa tela. E se eles têm muitos, o que é o que eles vão fazer, especialmente no início, Fora de cada projeto e, em seguida, pontos quentes ficar cada vez menor como você ir junto. Você pode simplesmente clicar aqui, e ele irá mostrar-lhe ou clicar aqui, e ele irá mostrar-lhe aqui mesmo. Então é isso. Basicamente, eles podem clicar através. Eles podem ver tudo, como parece e você pode ver todos os comentários aqui. Você pode ocultar comentários se quiser ver um modo de tela cheia, e eles também podem acessar o modo de tela inteira por conta própria. Se você os deixar mais uma vez, você pode convidá-los para editar. Você pode enviar e-mails para as pessoas que você quer ver o seu protótipo. E como eu disse, tudo funciona como deveria. Como pode ver aqui, pesa um segundo. Atualiza o preço. Você pode proceder ao pagamento. Eu posso selecionar este. Você pode ver sombras aqui, fazer um pagamento. Vai esperar e depois voltar para cá. Então tudo está como pretendíamos que fosse. Tudo funciona corretamente, e isso é Adobe X, o compartilhamento de uma tigela recursos. E eu realmente gosto disso porque você pode chamar uma comunicação com seus clientes diretamente através deste para que você não precisa de nenhum site externo. Então, por exemplo, 99 projetos, então você tem que pagá-los para pagar apenas para poder se comunicar com seus clientes. Além disso, é muito mais agradável aos olhos. É muito mais simples do que se comunicar através do Gmail e simplesmente enviar imagens para eles. Então, como você pode ver aqui temos 22 imagens. Então imagine o quão grande é a agitação de enviar 22 imagens para seus clientes. Quanto tempo eles precisam para fazer eles achá-lo organizado ou desorganizado? Você sabe o que eu quero dizer? Então, basicamente, esta é uma adição fantástica. Toe adobe uma cidade só porque você pode fazer tudo que você precisa dentro de fora, um para cima e dentro desta tela. Então, quando eles deixarem comentários e comentários, você pode seguir esses comentários. Trabalho de volta ao Adobe X'd. Você pode voltar ao design, fazer alterações rápidas, fazer alterações rápidas voltar ao compartilhamento de cliques do protótipo mais uma vez, e você pode compartilhar para revisão e simplesmente atualizar o link e, em seguida, copiar o link e enviar-lhes esse novo link. Então, se eu saltar para trás e clicar em compartilhar mais uma vez, você pode compartilhar para desenvolvimento e você pode exportar para compradores Incluir ativos para download para que todos esses ativos sejam incluídos. Todos os ativos são imagens, ícones, ícones, esses fundos, então cada coisa que você pode exigir uma senha e você pode clicar em criar um link. Agora os desenvolvedores serão capazes de acessá-lo exatamente da mesma maneira que os clientes votam, então eles só serão capazes de medir. Por exemplo, distância entre este logotipo e este ícone de menu distância entre aqui e aqui para que eles sejam capazes de fazer isso tudo on-line, e eles serão capazes de gerar todas as coisas que eles precisam para download diretamente De lá. Mas ainda vamos usar ativos de exportação para eles. Então você tem desenvolvedores que estão confundidos com este processo. Você tem desenvolvedores que nunca ouviram off adobe eggs, D ou esboço ou algumas dessas outras ferramentas que eles trabalham, geralmente com para calar a boca ou apenas basicamente com algumas imagens básicas no passado. Então você tem todos os tipos de desenvolvedores, a mesma coisa como ter todos os tipos de designers, então você tem que aprender a trabalhar com todos. Então, se eles não souberem como fazer isso, compartilhe para o recurso de desenvolvimento no Adobe D. Não se preocupe. No próximo vídeo, vamos começar a exportar nossos ativos, empacotá-los e prepará-los para desenvolvedores. Portanto, não importa quem seja o seu desenvolvedor, você será capaz de trabalhar com eles porque você tem a estrutura de embalagem no lugar. Então eu te vejo lá 36. Exportando ativos: Vamos agora começar a exportar nossos ativos. E isso é o que eu gosto deste guia de estilo porque nós criamos tudo o que precisamos aqui, e nós podemos simplesmente selecionar tudo isso. Mas clique no toque de design primeiro, então selecione todos eles. Hit controle E e para o arquivo usado SPG apresentação estilo em que ou CSS interno você conjectura com seu desenvolvedor o que eles querem, Mas eles geralmente usam atributos de apresentação para que tudo como foi apresentado, você pode verificar direito aqui se você quiser fazer o seu tamanho otimizar, mas antes porque este SVG já está otimizado ponto do dedo do pé. Você pode ouvir a mudança aqui, e eu quero nos selecionar. É pasta, selecione pasta hit, Exportar e você está Concluído. E se um salto de volta para a minha pasta saltando ativos, você pode ver ícones aqui, e ele vai selecionar todos esses ícones, que estão dentro desta pasta, e criá-los como um só. E se você não quiser, você pode atingir a elite, e você pode UN agrupar isso e, em seguida, com eles selecionados assim você pode bater o controle E S V. G e bater exportação mais uma vez. E se um salto de volta para a nossa pasta. Agora você pode ver que todos eles são ativos separados como este, então você não pode ter qualquer maneira. Eles podem copiar o código diretamente do arquivo SPG se quiserem. Mas se você quiser, você pode fazer assim também. Então fale com eles e saiba o que é mais fácil de usar. Então é um arquivo, ou são arquivos separados agora porque você extraiu todos eles e os exportou para esta pasta separada? Porque não temos outros ícones adicionais que não exportamos? Você pode simplesmente usar este ativo mais completo e não exportar quaisquer outros ícones de qualquer estavam em seu design. Então, basicamente, você terminou com seus ícones apenas criando este guia de estilo, e eu acho que é uma adição fantástica e apenas melhora sua velocidade massivamente enquanto você está trabalhando. Em seguida, vamos usar a tela inicial para que você possa selecionar esta imagem. Por exemplo, pressione controle Comando E Judeus Jay Pek daqui localize a pasta pessoal. Então aqui está, bem aqui. Selecione a pasta hit exportação, eo que queremos é abrir isso e você pode selecioná-lo como EMP social, uma lâmpada para pousar três hit controle ser eo que queremos sp lesões Porque estes eram PNG originalmente bateu exportação e você pode fechar todas essas pastas se você quiser. Você só quer exportar um fundo para que ele o controle e você pode exportar isso como um JPEG então acerte a exportação e ele vai substituí-lo porque este 1º 1 é a nossa imagem. Então vamos mudar que esta vai ser a nossa imagem de herói como tão triste fez um erro de digitação como este controle e j pic exporta e eu posso saltar para a nossa pasta, localizar a casa Aqui está, e simplesmente excluir este porque precisamos desta imagem assim . Então clique bem aqui hit control E J Peg Export E agora ele vai exportar isso porque precisamos deste grande fundo incluído também, próximo acima combinações de sala. Então você tem sala de estar, quarto, cozinha, selecione todos os três e você não precisa toe select imagem porque nós já selecionamos. Então temos imagem, imagem e imagem. Agora você pode selecionar assim e bastado em como este baseado em como este, e enfrentá-lo em porque ele substituiu o nome fora da imagem uma vez que era Mesquita com esta imagem. Então simplesmente selecione-os. Kid Control E J Peg exportação. E finalmente, vamos selecionar este último, que é um controle de vídeo e exportação de sucesso. E aí está você. Então, como você pode ver, é realmente fácil exportar todas essas imagens. Agora, o que temos aqui são esses sofás, então você sempre pode abrir todos eles. Então, para um, então para dois. E você também pode selecionar uma dessas imagens de fundo. Então, para três, e simplesmente mantenha a tecla control command. Selecione todos eles como para que ele controlasse E e, em seguida, mude bem aqui. E isso é chamado de tela de categoria. Tão localizado bem aqui. Selecionar pasta atingiu X e não J Peg, mas PNG porque todos eles ver PNG hit export vai exportar todas essas imagens. E como você pode ver, é muito fácil mover entre essas telas para que você possa selecionar ambos os círculos ou apenas um porque eles são exatamente os mesmos. Você pode escolher materiais e escolher quadro círculo hit controle E, e você pode exportá-los como um PNG, por exemplo, mas é na tela de filtro de pesquisa, então apenas certifique-se toe exportar tudo corretamente. Assim, os filtros de pesquisa selecionam a exportação da pasta e você pode exportá-la. Isso o quê? Agora, quanto aos botões, você pode exportá-lo de duas maneiras para que você possa exportar a parte inferior como está agora. Então controle e e você pode exportá-lo como um PNG assim, ou você pode exportar o fundo sem qualquer texto nele. Então, cabe a você e ao desenvolvedor decidir como eles querem incluir tudo isso Em seguida, temos combinações de quartos, então ele controlaria E para exportar esta imagem e podemos usar J pack para ela. Então, nossa própria tela de combinação localizada aqui a partir de combinações selecionar e exportar. O que precisamos aqui é deste sofá para controlar e, podemos usar a exportação P e G. O que também precisamos são essas cores, então selecione todas as três cores. Controle E P e G está bem. Você pode exportar este cartão BG para controlar e exportado PNG e você também pode exportar esta lâmpada se você quiser tão localizado aqui controle e p e exportação G. E lá vai você, Você terminou porque nós copiamos e usamos essas cores em ambos os casos. Então vamos passar para a tela de itens selecionados e o que queremos aqui é exportar fundo do barco , bem como imagem, que possamos exportar ambos. Este controle PNG E e você pode alterar isso para ser selecionado item como este selecionar pasta PNG exportação. O que? Nós também queremos nossas essas cores. Então, selecione suas cores assim, que certamente s PNG. Isso é bom. E finalmente, o que queremos são essas duas imagens. Então esta imagem, bem como esta imagem, esta vai ser a imagem número um. Imagem número dois, selecione ambos controlam E BMG Export. E não precisamos deles dentro da outra pasta. Você pode simplesmente copiar tudo para baixo e baseá-lo para fora. Mas eu quero fazê-lo, no entanto. Então vamos usar a imagem de herói. Então herói cadeira principal, controle de imagem E S B e G apenas mudou uma pasta porque este é selecionado item ajustado. Aqui está. Selecione a exportação da pasta e o que queremos são essas cores. Então abra a pasta de cores e agora você pode ver as vantagens dessas pastas e organizar tudo corretamente porque você pode ver como isso funciona Bem. E como você pode ver, estamos apenas oito minutos e quanto terminamos até agora. Então você pode realmente trabalhar com ele muito mais facilmente. Então, controlando o botão. E finalmente, porque fizemos isso antes da imagem um e imagem para que eles possam acessá-lo facilmente dentro desta pasta também. E vamos rapidamente em frente e terminar com tudo o resto. Então aqui você pode selecionar um plano de fundo, então controlar e alterar a localização. Então, estes são os detalhes do pedido como então clique em selecionar exportação pasta e você pode localizar essas imagens. Então abram suas pastas, então a cadeira principal. Então, para uma lâmpada um controle E PNG exportação, precisamos exportar para este fundo também. Controle e assim e finalmente precisamos exportar este quadro. Então, como podemos fazer isso? Você pode localizar o quadro, Então aqui está, bem aqui, e você pode exportá-lo e simplesmente bater controle E s B e G exportação. E eles vão colocá-lo como nós fizemos agora. Mas no código ao lado um do outro, e eles têm esses ícones no painel de ativos texto que não exportamos. Você também pode exportar o texto se quiser. Mas eu descobri que não é necessário porque é uma perda de tempo e eles vão usar o texto no casaco de qualquer maneira. Mais tarde. Para esta tela, vamos entrar nos pagamentos de mudança de controle E P e G localizados onde ele está bem aqui. Selecione a pasta e exporte. Então cometi um pequeno erro. Vamos localizar o pagamento e exportou toda a tela, o que você pode fazer se quiser. E eu vou mostrar-lhe no final como você pode fazer isso, também. Mas por enquanto, queremos selecionar o Craker, quer selecionar pessoas e quer, como o controle inferior E BMG pagamento exportação. E vamos rapidamente verificar se é como deveria ser. Então, se eu abrir este grande cartão, ele vai se abrir no meu visualizador de imagens bem aqui. E se eu arrastá-lo para a tela, você pode vê-lo. Salve-o como um PNG com ah, fundo transparente e uma sombra. Vamos seguir em frente para começar os locais. Controlar e alterar locais de armazenamento de arquivos de entrega Selecione a pasta Exportar exporta indo para exportar toda a tela. Então armazene locais com acreditar que muito rápido e o que queremos daqui é o mapa. Então controle e exportação PNG. E, finalmente, o que queremos é este fundo, pois está tão localizado bem aqui. Então direções como assim controlar e como sendo G porque eles podem querer usá-lo também, bem como este cartão BeeGees e controle de exportação E e este fundo parar. Então controle e exportação PNG. E lá vai você. Nós criamos tudo, exceto para esta tela de menu e dentro dela. Então você pode apenas localizar BG controle de fundo E mudança. Encontre a pasta do menu aqui. Aqui está. Selecione a pasta hit export Porque nós só queremos que este plano de fundo seja exportado a partir daqui . Já explicou antes que temos o ícone do sexo preparado. Então é isso para os ativos exportadores, parte fora do discurso. E uma última coisa que eu quero mostrar a vocês é como você pode simplesmente selecionar todo o controle de hit deles . Mais uma vez. Você pode usar PNG, mas eu vou usar Jay Peak, alterar os arquivos de entrega de pasta e simplesmente entregá-los para ouvir hit exportação, porque desta forma vai ser mais fácil para seus clientes como lastro seus desenvolvedores para tomar um olhe para as telas como elas são. E você também pode pular dentro de cada pasta e extrair esse design para essa pasta específica. Agora, se você tem mais de um tamanho, então este é para o iPhone 10 e 10 s. Mas se você tem, por exemplo, para tênis Max ou para qualquer outro dispositivo para incluir no futuro, então você pode criar uma pasta. Então deixe-me saltar rapidamente. Certifique-se de que assim dentro desta pasta de locais de loja, por exemplo, você pode ter esses recursos em pastas diferentes, cada pasta possa ter subpastas, modo que os locais de armazenamento terão subpastas para iPhone 10 e tênis, em seguida, outra pasta para iPhone. Tênis no tênis, Max e assim por diante e assim por diante para que você possa ter sua organização Não gosto disso. Então, mais uma vez, eles têm os ativos, que contém todos os ícones. Eles têm 10 pastas diferentes para 10 telas diferentes, e eles têm os recursos dentro, e finalmente eles têm telas Jay Peak bem aqui. Então, se eles clicarem duas vezes em qualquer um deles. Eles podem simplesmente abri-los e simplesmente olhar para eles como eles estão bem aqui. Então é isso para a parte de ativos exportadores. E no último vídeo da Siri. Quero mostrar-lhe como condensa um pacote, tudo isso, e entregá-lo a um cliente, então te vejo lá. 37. Entregação para clientes: Então, quando você terminar tudo, você recebeu seu feedback. Fizeste as tuas alterações. Você empacotou tudo como deveria. Tudo está na ordem correta. Chegou a hora, Tofino, finalizar este projeto e enviá-lo para o cliente. Finalmente. Então, como você pode fazer isso? Basta minimizar isso. Vou fechar esta pasta. Aqui estão eles, nossos arquivos de entrega. Então dentro você deve ter todas as pastas que acabamos de criar no vídeo anterior. E você também deve ter seus ovos de adobe contaminados lá dentro. O que você também deve ter é algum tipo de arquivo de texto fora. Portanto, ou é apenas um arquivo baseado em texto básico no qual você compartilhará o link com seu cliente. Então você compartilhará o link, por exemplo, para o único protótipo. Se você quiser toe, acredite neles, acesso a ele por um pouco mais de tempo para que seu desenvolvedor tenha tempo para criar tudo corretamente. Ou se você não quiser fazer isso porque você só tem um link e tem uma versão gratuita do Adobe X'd. Você não precisa fazer isso porque eles já viram e confirmaram tudo o que você pode enviar-lhes vídeo caminhada através. Se você quiser. Mas se eles tiverem o Adobe X'd arquivado e simplesmente clicar em pré-visualizar e, em seguida, visualizar esse protótipo em si. Então, cabe a você como você quer estruturar isso. Também dentro do arquivo de texto, você deve deixar os links nas fontes. Então nós usamos o sentido aberto frente e você deve deixá-lo. Você deve deixar um link lá dentro. Muito entendi. Então, se você obteve do Google Phone, você deve enviar o link para eles. Se é donal-lo de formulários adobe, você deve enviar-lhes esse link. Além disso, qualquer imagem que você usou para ter usado um monte de imagens dentro deste projeto, então você deve enviar-lhes links para essas imagens apenas para que você possa liberar seu pacote de reboque espaço tudo e enviar tudo por e-mail, porque esse é o maneira mais fácil. Se for muito grande para o e-mail, você pode usar o Dropbox. Você pode usar o Google drive toe, carregá-lo lá, e eu sempre recomendo que você empacote-os dentro do arquivo zip. Então dentro do Windows eu posso simplesmente clicar com o botão direito do mouse WinZip e adicionar aos arquivos de entrega. Quando eu clicar direito lá vai começar a empacotar os arquivos. Ele vai começar a preparar os arquivos e vai para o que é mais importante fora em todo o tamanho desta pasta, e vai ser facilmente compartilhável para mim. Então, se eu arrastar isso rapidamente para baixo, original era 308 megabytes. Agora é 294 Isso não soa muito, mas confie em mim quando você tem duas ou três ou 500 telas e você as tem em várias resoluções diferentes. Isso pode facilmente destruir até um gigabytes de tamanho, especialmente se você estiver enviando imagens ou algumas ilustrações para o nosso cliente. E eles podem realmente acumular e aumentar o tamanho do arquivo drasticamente. Então eu sempre recomendo que você pacote de arquivos dentro do arquivo zip e clique em OK, e se eu arrastá-lo aqui, é assim que parece. Então você não manda esse cliente Valter. Você envia este arquivo para reclinado e eles condenaram descompactá-lo e usar todos os ativos dentro seu cliente e seu desenvolvedor. Então é isso para esta parte do curso. Muito obrigado por tomar seu tempo, seu dinheiro e seu recurso é e investido dentro do discurso. Agradeço muito, e espero que tenha aprendido muito com o discurso. E no próximo vídeo, vamos rapidamente saltar ou algumas conclusões, uma visão geral de tudo o que fizemos nesta partitura até agora, e mais uma vez, muito obrigado. 38. Links e recursos: e, finalmente, eu quero cobrir links e recurso é então aqui é um arquivo pdf. Basta abri-lo, e uma vez que ele é carregado em sua tela, aqui está. Você pode ver como tudo parece, e aqui você pode baixar todo o recurso é que foram mencionados no curso. Então, por exemplo, aqui está o fundo aberto de ciência. Você pode boneca Oh, que seja do Google telefones ou do Adobe Fonts. Como eu mencionei no curso, Basta clicar aqui mesmo. Ele irá mostrar-lhe este pop-up talek clique permitir para que você possa acessá-lo em seu navegador de Internet . Qualquer navegador que você estiver usando. Imagens gratuitas que você tem intocado porque todas as imagens são usadas são de um splash. Mas eu também forneci o site de ações, que é o site basicamente para imagens gratuitas. Ícones gratuitos simulação livre, Então tudo o que você precisa de graça está dentro deste site de ações. E finalmente, se você quiser, você pode acessar minhas outras aulas e cursos em compartilhamento de habilidades ou em você sabe, eu. Eu tenho mais sobre eles em compartilhamento de habilidades porque fora da estrutura lados, mas no futuro eu vou adicionar mais sobre eles em você, para mim também. Então, obrigado. Mais uma vez, espero que gostem desta aula. E eu realmente espero que você vai desfrutar desses recursos é e que você vai aplicar o conhecimento que você ganhou nesta classe em seu trabalho futuro. Cuide-se. 39. Conclusão: Parabéns. Você chegou ao fim desta classe. Espero que tenha gostado tanto quanto eu. Eu realmente espero que você fique muito violento com isso. E tão realmente importantes dicas que irão ajudá-lo em sua carreira de design e em seus projetos futuros . Então este é o nosso projeto final. É assim que o arquivo que você vai receber se parece. Então vamos rapidamente percorrer isso e nos lembrar o que cobrimos neste curso. Então começamos com o resumo de design e, obviamente, você já viu isso e recebeu esses modelos. Você pode preenchê-lo para seus projetos futuros. Nós também cobrimos quadros de arame imprimíveis, que você pode imprimir. Eu mostrei como você pode classificá-los fora do pé, obter poucos, ou para obter mais telas para seus projetos futuros e seus futuros desenhos de arame impressão . E você viu como alguns pequenos detalhes podem realmente melhorar sua velocidade e melhorar seu processo. Em seguida, nós cobrimos arame quadro e explicar-lhe como você pode encomendar alguns elementos simples reais, como caixas e retângulos, e realmente criar algo que irá ajudar a impulsionar o seu processo de design para a frente quando você chegar a a fase de concepção. E falando em estágio de design, no qual incluímos as diferentes imagens, mostrei a diferença entre os pinos P e J de G. Como você pode incluir algumas sombras diferentes, como você pode incluir cores no último minuto. Então esse tipo de processos e esse tipo de coisas vão acontecer quando você começar a projetar seus próprios projetos e em seus projetos futuros, especialmente com clientes maiores, porque eles mudam de idéia o tempo todo. E, por exemplo, eles não gostam de cores desses cartões de crédito e contas do PayPal. Isso não importa. Você pode facilmente alterá-los. E o que é realmente importante é que você viu como usar seu painel de ativos bem aqui dentro de você o Adobe X'd. Você pode realmente cortar sua camisa de trabalho e aplicar essas cores e esses estilos em diferentes elementos em nossos portos. E finalmente, no final, chegamos a um estágio de prototipagem, e eu mostrei a vocês como você pode usar algumas transições simples e animações simples até algumas realmente complexas e bonitas. E eu lhe dei algumas dicas e truques sobre como você pode melhorar isso ainda mais adiante com seu próprio projeto e finalmente recuperei como você pode compartilhar seu trabalho com o cliente Heiken receber feedback sobre ele, como você pode compartilhá-lo com eles nos estágios finais, bem como como você pode compartilhar esse trabalho com os desenvolvedores e como você pode falar com eles sobre tipos de arquivos perfeitos que eles precisam para que você possa cortar seu trabalho e você pode terminar o trabalho o mais rápido possível enquanto fornecendo a mais alta qualidade possível conforme necessário. Então, realmente, é isso. Muito obrigada. Mais uma vez por fazer essa aula, eu realmente espero que você aprenda algo novo. Eu realmente espero que você pegue algumas dicas e truques aqui e ali. E eu realmente espero que você aplique pelo menos um pouco no seu trabalho futuro. Por isso, obrigado mais uma vez e verei vocês no futuro curso. Cuide-se 40. 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 41. Junte-se no meu grupo gratuito no 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.