Design de aplicativos móveis do zero com o Sketch 3 - Parte 3 (Design de interface avançada)

1. Bem-vindo à parte 3: Tudo bem. Bem-vindo de volta. Esta é a terceira parte deste curso de design de aplicativo móvel. Portanto, certifique-se de ter participado da parte um e da parte dois antes de iniciar este nesta seção. Parte três. Trabalhamos na identidade visual e no design personalizado do nosso aplicativo que nos permitirá aprofundar as melhores práticas de design de funcionalidades avançadas de esboços. Não consigo desenhar em muitas outras coisas. Se você não sabe que desafia para o curso em parte um ou em parte para se certificar de que você sabe . É o seu toque de projeto na classe. E agora vou deixar-te com a Adrianne outra vez. Então divirtam-se, rapazes. 2. Inspiração e tendências: Bem-vindos à segunda parte do curso. Não que ele já tenha corrido com design padrão. É hora de começar a pensar sobre sua identidade visual. O que ele vai parecer sentir como o que cores e telefones estavam indo para usar. Este é um conceito visual do aplicativo. Uma grande parte desse processo é encontrar inspiração. A inspiração não é um presente dos deuses que vem até você do nada. A melhor maneira de se inspirar é olhar para outros trabalhos. E se você acha que isso é roubar outras pessoas, eu D. Bem, é meio que o ponto. Como oradores que disseram bons artistas copiam grandes artistas roubar. E se, porque eles dizem que eu acho que estamos prontos para ir, há muitas maneiras de coletar informações na Internet. Um bom e fácil é ter um conselho e interesse onde você está sendo referenciado referências que você gosta. Também recomendamos que você tire capturas de tela de ver que você gosta quando estiver navegando no aplicativo em seu telefone. Criar sua própria coleção é um ditado contínuo. Mantenha sempre os olhos abertos. Há muitos lugares onde você pode encontrar inspiração na Internet. Vamos dar uma olhada em alguns dos melhores Dribble Dribble é o show até site. Para os designers, um monte de designers gráficos designer de aplicativo móvel incrível Illustrators são muito ativos nesta plataforma e fazer upload de seu trabalho em ir todos os dias. Você pode tanto para os tiros populares, Vou procurar temas específicos. Há um grande colar ferramentas que mostram a cor principal usada na foto. Se você encontrar um designer cujo, onde você gosta, você pode explorar suas fotos e até mesmo segui-los se eles estão criando uma conta, qualquer pessoa criar uma conta, mas você deve ser convidado para ser capaz de empurrar. Você quer desenhos. Você também pode verificar ser, portanto, dot net, que também é um grande design sites vitrine. Desde que estamos trabalhando em aplicativo móvel, há alguns sites que exibem capturas de tela fora mais por como vocês caras e fluxos padrões, P t T R e s ponto com. Você pode geralmente bro screenshots por tarefas ou você I padrões. Então, digamos que estamos trabalhando no perfil em nosso aplicativo. Podemos dar uma olhada em como outros APS exibir perfis de usuário. O site menos gostaria de compartilhar com você é pequenos grandes detalhes que vêm. É um sangue que reúne inteligente, criminoso detalhado, sites diferentes, APS e usá-lo flui. Nem sempre é sobre design, mas é realmente impressionante ver até onde os designers podem ir. Eu também recomendo que você se inscrever no lado Bardet Io Sidebar foi criado pelo tal concordar, se um muito legal no tempo para designer. É uma lista dos cinco melhores links de design do dia enviados para você todas as manhãs por e-mail. Mantém você atualizado com novos produtos, novos artigos e todo o tipo de coisas relacionadas ao design. Então, vamos compartilhar com vocês o que notamos das tendências de hoje. Inapt sinal no U Exide Nós vemos mais e mais gestos. Gestos são interação que você faz com os dedos deve apenas esperar sendo cartões, por exemplo, No lado dos EUA, design plano agora é obrigatório, mas você também verá muitos APs para tentar ser tela cheia com o conteúdo. Snapchat, por exemplo, tem um UX realmente estranho, mas uma vez que você está dentro do conteúdo, é sempre pleno andamento. Então você totalmente para ele, colocando um pouco desfocando seu fundo. Um dos grandes recursos do esboço está agora em alternativa a um layout de sprint doutrina em segundo plano. Finalmente, você verá cada vez mais ícones de contorno em vez de pictogramas em negrito. Um grande exemplo disso é urbano ser mais recente rebranding total. Agora que sabemos onde encontrar inspiração, vamos aprender como dominar o esboço para ser capaz de lidar. Ele enche que você gosta e até mesmo criar suas próprias idéias. Isto vai ser na próxima lição. 3. Coleta de cores e cores: Bem-vindo de volta a este vídeo, vamos falar sobre cores. Um bom design deve funcionar sem cores. Esta é a razão pela qual usamos os concursos do IRS em nossa primeira versão. No entanto, a cor é um dos primeiros elementos do design que será percebido pelo usuário e, portanto, desempenha um papel importante na percepção estética do seu design. Mas antes de tratarmos nossas cores em paletas de cores, quero mostrar como funciona o seletor de cores. No esboço, abra um novo arquivo e desenhe um quadrado. Agora clique no botão do campo e dê a cor que você gosta. Enquanto você move o seletor de cores na cédula, você verá os números abaixo se movendo. Esses são os perímetros que definiram a cor. O velho diz a mesma coisa, mas de maneiras diferentes. É como dizer a mesma palavra em línguas diferentes. Esboço sobre o U três. Hex é um código único de seis dígitos e letras que definem sua cor. RGB é uma maneira de compor a cor, equilibrando o são que significa G vermelho para um verde e ser para o valor azul pode ser entre zero e 235. Então, se você Oportunidade, Faisal, Fred e zero de verde e azul. Você se levanta, lê. Se você tivesse 235 de azul, você fica roxo e assim por diante. Se você clicar no botão RGB, você transformará RGB em HSB. H significa quem? O Quem é uma cor em sua forma pura. Quando nos referimos a cores como vermelho, azul, amarelo laranja, onde você geralmente fala sobre quem é quem foi alugar de 0 a 3 60 você pode ver onde eles estão aqui na escala de cores s representam para saturação. Refere-se à pureza do intervalo de valores de saturação da OMS de 0 200 que corresponde à porcentagem de saturação da cor. Quanto mais cor estiver saturada, mais perto será do puro quem menos está saturado, mais perto está do branco. Finalmente ser representa o brilho. É basicamente como gosta ou escuro que é como brilho saturação intervalo de valor de 0 200%. Você pode às vezes também ter que lidar com cores que são definidas por C. M. Y que. Este perfil de cor é dedicado ao design de impressão. Se uma marca dá você parecer uma referência para a sua marca ou uma amostra pontão ir para a cor que tinha que ser que vêm para convertido no idioma que você quer. A última sensação que você pode editar é o A que significa Alfa. É a opacidade. O valor pode ser entre zero e 100% Então, se criarmos outro quadrado na frente das horas e alterar a capacidade será capaz de ver o 1º 1 através do novo. Observe que a alteração de capacidade não modifica o valor do seu ex ou RGB. É uma informação adicional. Então, se você quiser dar informações claras para, o desenvolvedor de design, equipe deve dar-lhes o hexadecimal ou seu RGB e a transparência se não é 100% o objetivo deste ouvir era fazer você entender como o seletor de cores funciona. Tentei torná-lo o mais simples possível, mas se achar técnico, não se preocupe. Este impede que você o use e de entender o que se segue sobre como para estudiosos. Seu dever de casa para esta lição é jogar este jogo a meio da facção. Eles criam jogos incríveis e engraçados. Basta clicar neste link na próxima lição verá como escolher. A cor estará usando aplicativo indie 4. Boas práticas: paletas de cores: Ei, agora que sabemos como o seletor de cores funciona no esboço, deixe passar a cor vontade. Usar nosso aplicativo nesta lição criará um esquema de cores. O brilho do colar é basicamente a escolha das cores que serão usadas em nossos projetos. Estes são três exemplos de esquemas de cores. Veremos duas maneiras de chegar à cena da faculdade. O primeiro é escolher uma cor de base e completar a vergonha com tons desta cor e tons de cinza. É o mais fácil e muitas vezes o mais eficiente. Só algumas anotações aqui para definir o termo que usei. Se a cor for mais clara escondendo branco, o resultado é chamado de tenda. Se o preto for adicionado, a versão mais escura é chamada de sombra e, se o cinza for adicionado, o resultado é um tom diferente. Uma segunda estrutura que você pode usar para criar uma coalizão Reacher pode ser primeiro, selecionar um chamador base, selecionar um chamador base, depois selecionar a cor secundária usando princípios de harmonia e, finalmente, acredita-se que vergonha e apenas tons intensos e tons. Vamos falar sobre esse método no próximo vídeo. Em ambos os casos, o primeiro passo é muito grande. A cor principal. Geralmente é a cor da sua marca. Se você ainda não tem uma marca ou galeria em mente, não há nenhuma fórmula ou ferramenta mágica que a escolha para você. Mas não se incomode muito com isso. Basta dar uma olhada em outros abs Brooks que projetam em drible e escolher uma cor que você gosta. Se você estiver realmente preso, abra no arquivo de esboço chamado Cores nesta pasta de lição e escolha uma dessas cores que selecionamos para você. Vamos usar o primeiro meio para criar uma vergonha simples e eficaz para o aplicativo. Abra seu arquivo principal. Todos os que estão nesta pasta de lições. Faremos isso em uma nova página no mesmo arquivo. Clique neste pequeno ícone ao lado da Página um e, em seguida, clique no sinal positivo. Nosso arquivo agora tem duas páginas criando nosso quadro e nomeie-o cores. Crie um quadrado e dê a ele a cor selecionada. Para nós, será o código hexadecimal. 125688 Esta é a nossa cor principal. A cor da marca Instagram. Agora duplicar o quadrado quatro vezes e colocar este cinco quadrado ao lado do outro vai manter o mesmo que, mas jogando com a saturação e brilho terá cinco tons diferentes. Vamos começar com um pouco de azul, que vai usar para elementos ativos em você, eu disse. A saturação em 87 e o brilho em 53, em seguida, um cinza claro para elementos inativos. Situação em três acertos. 67 que uma saturação cinza mais escura em zero e brilho em 33. E, finalmente, uma situação preta ou cinza muito escura. Um 12 e brilho em 10 como vamos usar este colar muitas vezes. Uma boa prática é adicioná-los. Para usar o painel do relógio. Selecione uma cor, abra a guia de cor do campo e clique em mais para cada switch. Assim, você terá toda a cor ao seu alcance. É isso. Faz o mesmo para o seu projeto. Crie seu próprio esquema de cores e adicione-os à sua guia de cores. Você será muito mais produto dessa maneira. O próximo vídeo é opcional. Ele lida com a cor como princípio maney e adicionando cores diferentes à vergonha. Fique à vontade para ficar com ele e volte quando quiser. Se você quer projetar a Europa o mais rápido possível, mas se você quiser adicionar outras cores para o seu obsceno e não sabe como escolhê-los. Então vá e assista ao próximo vídeo. Vamos explicar como e mostrar-lhe como usar uma ferramenta muito útil. 5. Harmonia de cores (opcional): oi novamente No vídeo prefácio, mostramos como criar um rasheem de carvão simples e eficiente. Se você está feliz com isso, você pode ir para o próximo vídeo Se você quer mais do que apenas uma cor em sua equipe e quer saber um pouco mais sobre harmonia de cores, eu não assisti o resto deste vídeo. Nós também começamos a partir de uma cor base, mas desta vez vai usar o princípio da harmonia para escolher cores secundárias. A roda de cor é partícula é útil na criação de um tipo feito de cor de geladeira. Parece que a cor tradicional parece padrões são uma combinação de cores com base em sua relação entre si. As máquinas tradicionais podem ajudá-lo a criar rapidamente harmonias e paletes interessantes . cor monocromática parece ser composta de tons diferentes, tons intensos. Quem está em um específico quem? Estes são o esquema de cores mais simples para criar como o antigo tirado do mesmo aro cor monocromática parece tendem a ser unificado e harmonioso. Isso os torna bastante eficazes no estabelecimento de humor geral. A desvantagem é que eles podem se tornar monótonos devido à falta de diversidade de cores complementares de quem . Parece que são baseados na cor oposta uma à outra. na roda de cores, por exemplo, vermelho e verde ou azul e laranja. Esquemas de cores complementares são difíceis de usar em grandes doses, mas funcionam bem quando você quer algo para se destacar. A cor do elogio é melhor usar mais do que a cor do acento. Não há contração laranja na página. humilhante para comprar um azul será bastante eficaz. Por exemplo, como jogado complementar é envergonhado. Major é aquele que, mais dois outros igualmente espaço de seu complemento. Este esquema de cores tem o mesmo contraste visual forte que um brilho de cor complementar, mas tem menos tensão. Colisões análogas são baseadas em ajustes de cor. Um ao outro está na roda de cores. Esquemas de cores análogos são freqüentemente encontrados na natureza. Eles são bastante harmoniosos e agradáveis aos olhos. No entanto, eles não fornecem muitos contrastes. Escolha uma cor para dominar a cor do meio, uma segunda para suportar a cor principal e a cor 30 para acentos. Você pode, é claro, eu apenas stints, tons e tons disse. Aí está a chave entre as cores, que falaremos sobre isso na segunda árvore. A cor do sótão parece usar cores que são uniformemente espaçadas em torno da roda de cores. Eles oferecem contraste e harmonia. Ele era uma das cores é cor dominante e os outros dois para acentos. Duas cores complementares trágicas ou duplas. Ela usa quatro cores dispostas em dois pares complementares. A cor rica parece fora de sua abundância de possibilidades para variações, mas pode ser um pouco difícil de equilibrar. Então, mas a melhor maneira de usar uma vergonha como esta é usar uma cor como uma cor primária e a outra apenas como acentos. Tudo bem, vamos agora tentar pegar um desses olhares tradicionais e ver como podemos brincar com ele e, embora para fazer isso, vai trabalhar com cor adobe. Vá para colorir aquela adobe que vem. O aplicativo é feito fora de uma roda de cores que você pode fazer maior ou menor clicando sobre ele. Cinco cores a. Exibido aqui. Analistas na roda cinco é um bom número para começar a trabalhar em seu brilho colarinho, mas você pode acabar com mais de cinco cores. Mais abaixo da estrada, você pode selecionar parece tradicional análogo, monocromático e assim por diante e mover a cor ao redor, mantendo a geometria da máquina. E você também pode usar brilho personalizado onde você pode fazer o que quiser, você pode escolher qual modelo de cor você deseja usar. Vamos usar o HSB porque sabemos que vai. Agora vamos ver se podemos trabalhar em Lagos Shihm. Nossa cor base é esta no meio. Tem uma seta branca aqui e aqui, e podemos alterá-la clicando aqui, por exemplo, por exemplo, ou movendo-a ao redor na roda na cor. Podemos ajustar a saturação e o brilho para brincar com durações, tons e tons e adicionar contraste aos nossos paladares. Não se esqueça de ir buscar algumas inspirações na Web. Dribble tem um ótimo recurso que mostra a cor usada no design, e se clicarmos na cor, você verá outros designs que usam essa cor. Isso é ótimo se você quiser ver quais cores o designer está usando com essa cor base . Se você quiser ir com ele para escolher para você, escolher duas cores no material paleta ponto com e deixar a magia acontecer. Você também pode se divertir jogando com coolers ponto Co. É uma ferramenta adjetiva para gerar cinco moletom visto apenas tocando em sua barra de espaço. A melhor maneira de ficar melhor nisso é praticar, tentar explorar o que aprendemos e criar um esquema de cores que você gosta apenas por causa disso. Não tem que ser para nenhum projeto específico. Apenas aproveite brincar, divirta-se. 6. Tipografia: Olá novamente e este vídeo terá sobre tipografia. Isso não é algo em que você deve gastar muito tempo. momento, o processo de lidar com textos e escolher tipos de letra ou fontes é realmente iterado, já que é muito difícil escolher um telefone sem dizê-lo no contexto. E a melhor coisa a fazer é geralmente começar com Helvetica e, em seguida, experimentar quando seus projetos são um pouco mais avançados. O que é importante entender que a tipografia é tanto verbal e visual, Isso significa que a forma como o texto parece influencia o leitor a ler ou não e influencia o caminho vai ler o conteúdo, o tipo, o tamanho. A posição dos técnicos pode, portanto, auto ou prejudicar o seu conteúdo. É por isso que é importante ter uma compreensão geral de como essas coisas funcionam. As primeiras coisas primeiro. Tipos de letra. letra geralmente são o que as pessoas se referem quando você fala sobre fundos, e por favor, nunca faça tipos de letra como eu fiz neste título. O tipo de letra é um design para um conjunto de caracteres têm uma isca e tempos New Roman são dois letra diferentes. Por exemplo, também veremos em um minuto que eles pertencem a duas famílias diferentes de tipos. Então, se isto é um tipo de letra, o que é um fundo? Bem, tudo bem usar o fundo como um novo tipo de cara do Senado, mas só para você saber, eu telefonei é um tamanho específico, peso e estilo de um tipo de letra. Existem três famílias de tipos principais. Serif San, Serif e roteiro. Vamos começar com o xerife. Um serif é uma pequena linha anexada ao final de um traço na letra ou símbolo, uma fonte com serif como tempos, New Roman pertence à família estéreo. letra sérios também usam uma combinação de pecado e pensam traços. letra Serif parecem um pouco conservadores, mas são fáceis de ler para peças mais longas. Agora vamos falar de algo sério em francês. A palavra “filhos” significa “sem”. É por isso que os tipos de letra resultam. Serif são chamados sans serif, ao contrário de tipos serif, Sunseri. Se você tem em traços, eles parecem mais mãe são ótimos para manchetes e botão. Eles também geralmente são fáceis de ler. Ao contrário da certa família de tipos de letra chamada script, os fundos de script imitam e escrevem o logotipo frequentemente útil ou intitulado, que não são usados para o corpo do texto. Existem dezenas de subcategorias que você não precisa saber sobre elas para produzir um ótimo design. Mas se você estiver interessado, confira este site. O link não é a descrição. Então, como combinar tipos de letra? Por que é sempre mais fácil trabalhar com apenas um tipo de letra misturando duas fontes diferentes às vezes pode dar resultados bonitos. Se quiser tentar, evito usar dois telefones da mesma família. A principal razão pela qual você gostaria de usar outro tipo de letra é adicionar algum contraste. Portanto, usa o segundo tipo de letra que não é muito semelhante do 1º 1 e alterar o tamanho, peso ou cor. Isto é o que estou a fazer nesta luz. Por exemplo, para o meu aplicativo, eu recomendo fortemente que você use apenas um tipo de rosto em toda a APP. Ao fazer isso, você vai se certificar de manter a consistência e evitar parecer desleixado. Vamos voltar para verificar para dar uma olhada no editor de mosaico de texto. O alinhamento para é algo que você deve ter visto antes na palavra ou em qualquer editor de texto Wits se referiu à inteligência dos livros didáticos. Dizia Oto. Por padrão, isso significa que a caixa será expandida para se ajustar ao texto. Se você disse isso para corrigir, o juízo da caixa é fixo e o texto se expande abaixo antes de concluir este vídeo, uma palavra sobre espaçamento. Refere-se ao espaço entre os caracteres, a linha de texto e os parágrafos. Uma boa prática é ter um espaçamento de letras 1,2 a 1,5 vezes o tamanho do telefone para o corpo texto, usar uma quantidade menor fora que é, baseando-se em um título que no corpo um ponto Y sabe que ponto para que é isso para esta lição . No próximo, vou mostrar-lhe uma ótima ferramenta em salgueiros para trabalhar de forma mais eficiente com pilhas em seu design. 7. Boas prática: estilos de texto: Bem-vindo de volta nesta lição irá melhorar a nossa produtividade sentando diferentes têxteis para que seja capaz de dar-lhe um texto. Bloqueie as propriedades certas em um clique. Vamos voltar ao arquivo da gaiola. Abra a pasta desta lição para ter certeza de que você está atualizado. Bem, pare com o nome do perfil de usuário. Selecione o texto no painel direito. Você vê que é um Helvetica Neue médio 16 em azul, acima das propriedades do texto. Você não deveria ver nenhum têxtil. Clique nele e maior estilo deck. Nomeie Nome de usuário. Agora selecione o bloco de texto comum que você vê à direita que ele está em Helvetica Neue Regular em 16 e cão cinza. Clique em nenhum têxtil e crie um novo. Diga o nome. Comentário. Finalmente, faça a mesma coisa para o texto que mostra há quanto tempo a foto foi postada. Um tempo de imagem, e é isso. Para te mostrar como podemos usá-lo. Vamos criar uma versão estendida do feed da casa, selecionar o motor de popa da casa e pode ser basted. Pegue a alça na parte inferior e puxe-a para baixo. Arrastar a barra de banheira na parte inferior. Insira o livro didático e coloque o nome fora de um usuário. Digamos que Claudia Schiffer, então a seleção toma bloqueio. Clique no painel têxtil e defina-o como perfil de usuário e lança mágica. O grande ditado que era sua característica é que se você fez o têxtil, todos os elementos que o usa serão atualizados instantaneamente. Se você mudar a cor sobre o tamanho do telefone, por exemplo, um bom hábito é criar um inventário de seus diferentes têxteis, então vamos fazê-lo. Vamos fazer isso na segunda página do nosso arquivo, então vá para a página dois, crie um painel de botões e dê um nome de têxteis. Em seguida, digite o nome do seu têxtil diferente em blocos leva separados, comentário perfil de usuário direito. Outro para o tempo, disse-lhes com o apropriado leva dietas, agora você vai ter todo o seu têxtil em um só lugar. O desenvolvedor vai realmente apreciar. Quanto às fontes, você não deveria ter toneladas de têxteis. E lembre-se de manter seu rochoso entre eles. Jogar com estudiosos, telefones e tamanho dois metros leva importância. O maior exemplo de tipografia em iraquiano de conteúdo é o meio que entra em diferentes artigos de Bro e vê como os textos estão relacionados entre si entre aspas brancas, parágrafos densos e legenda discreta. Está perto da perfeição nesta lição. Nós Então, como definir têxteis? Não é obrigatório, pois você pode ser baseado em cada bloco de texto, mas ele realmente vai ajudá-lo a trabalhar de forma eficiente. Nenhum de vocês tem cores e texto. Vamos através dos nossos próprios ícones. 8. Como desenhar ícones: nesta seção irá aprofundar as possibilidades de desenho de esboço redesenhando os cones da barra de abas I. Projetar esses ícones nos fará passar por muita funcionalidade, então mantenha o foco e tudo ficará bem. Primeiro, vamos para a página Guia de estilo do arquivo Horror. Este é o lugar onde vamos colocar cada elemento usando nossos projetos. Já colocamos cores e texto. Vamos adicionar agora são ícones. No próximo vídeo, veremos como transformar esse ícone em símbolos para que cada vez que você os modificou, eles também sejam modificados na sua página de design. Começaremos com o da Aegis. O ícone da câmera Instagrams ícone da câmera é um pouco abstrato, mas não faz parte de sua identidade. É um círculo dentro de um quadrado, dirigiu quadrado fora 31 pixels disse a cor para algo que você pode ver. Digamos que laranja, disse o registro de cores. Quatro. Agora pressione oh para desenhar um círculo, desenhe um círculo de 22 pixels de largura. Não se esqueça de segurar o turno. Por que crescer lesma um quadrado eo círculo clique uma vez em, alinhar horizontalmente e uma vez em alinhar verticalmente quando eu tenho certeza de que são dois elementos estão alinhados pelo centro que vamos fazer a nossa primeira operação booleana. Operações booleanas são usadas para combinar formas em conjunto. mais usados são adições e subtrações, mas estamos quase usados. Imo Selecione o seu círculo e o quadrado. Agora clique no botão de assinatura. Isso extrairá o círculo do quadrado. Agora você tem um quadrado com o buraco no meio e na lista de camadas. Os dois objetos surgiram em um agora, desenhando um círculo de 15 pixels de largura. Coloque-o no centro da sua praça e aqui está. Temos o ícone da câmera. Vamos colocar tudo o que ou para o momento, selecionado para formas e clique em Grupo. Isso criará uma pasta em The Loyalist para renomear uma pasta. Você pode mais fácil clicar duas vezes em seu nome ou selecionado e pressionar. Vamos chamar a pasta Icahn e esta câmera do tribunal. Agora está ótimo. Outro ícone. Vamos com a atividade e notificação. Eichel. Este ícone é uma combinação de uma bolha de conversa e coração. Vamos começar com o coração, dirigimos um nove por nove círculo clique e arraste enquanto pressionamos para competir um círculo. Um site colocado um segundo círculo ao lado do 1º 1 Eles devem se sobrepor por dois pixels. Selecione os dois círculos e mescle-os em uma forma clicando no ícone de união. Agora os dois círculos são elogiados a uma forma, mas se eu clicar duas vezes sobre a forma para ele, ele esboçar com apenas um baixo me para editar um fora da forma, a fim de que ele fez. A nova forma como um todo terá que inundar nela. Selecione os dois círculos Convento e Quicken Flatten. Agora, se eu dobrar rápido no esboço de forma vai considerar a forma como um elemento que eu vou ser capaz de editar. Agora ele o transformou em um coração adorável. Selecione o ponto na parte inferior do círculo esquerdo e dilatado pressionando delete no teclado . Faça a mesma coisa para o ponto na parte inferior do círculo direito. Selecione os dois pontos no meio e excluídos. Você vai descobrir que na verdade havia dois deles. Agora selecione o ponto no meio em sua posição Y no lado direito tipo mais 10. Isso fará com que nosso ponto caia 10 pixels. Agora vamos brincar com curvas ocupadas. Garotas ocupadas. Eu costumava desenhar um formas arredondadas que não são padrões geométricos. Eles são muito difíceis de dominar, mas você vai se acostumar com isso em curvas movimentadas. Cada ponto é definido por uma ou duas alças. Mover essas alças modificará toda a sua forma. Vamos fazer uma pequena pausa do nosso coração e desenhar um quadrado para ver como a carreira desta peculiaridade desenhou e clicar duas vezes sobre ela. Para fazer com que os pontos de desenho apareçam, clique em um dos pontos no painel direito. Você pode ver que a esquina da rua está selecionada lá. Três outros tipos de cantos. Merode. Você tem duas alças simétricas, desconectadas. Duas alças podem ser movidas de forma independente. Um S simétrico. É uma mistura entre os dois anteriores para lidar com forrado obsoleto, mas pode ser movido independentemente ao longo do acesso. Agora vamos fazer o quadrado e voltar para o coração. O fundo do nosso coração será uma dica tão bem dita para lidar direto. Significa que não há alça agora. Daremos a nossa casa uma forma melhor. Selecione o ponto à esquerda, as duas linhas que aparecem na alça que define a forma das curvas, a curva superior acima definida só modificará a forma abaixo. Então, selecione um simétrico no painel direito. Agora arrastou o ponto do comércio alças abaixo. Até que seu coração pareça cheio de amor leva à mesma coisa para o lado direito. Clique no ponto do que um simétrico e dreno arrastou a alça abaixo como o outro. Não é um coração maravilhoso cheio de amor? Você pode criar a sua forma como acabamos de fazer usando o mouse, mas você também pode usar as coordenadas para lidar no ponto. Se você quer ser mais preciso agora, vamos cuidar das portas de bolha tão frias de 29 pixels de largura. Clique no armário para desbloqueá-lo e disse que o ódio um 28 para comprimir um pouco. Agora, clique em inserir forma e triângulo. Clique e arraste através do triângulo, disse que o ódio na inteligência às nove. Gire os triângulos para o ponto de ponta para o canto inferior direito selecionado para formas e mesclá-los em um com função de união. Clique em achatar para transformá-lo em uma nova forma. Agora coloque o coração no meio da bolha. Selecione o coração e a bolha e clique em Subtrair. É isso. Rápido sobre a forma na lista de camadas e nomeá-lo atividade sublinhado Ícone. Agora vamos fazer o perfil. Ícone Toque em. O ícone do perfil é feito de dois retângulos modificados. Desenhe o primeiro retângulo de 25 pixels de largura e 11 pixels de altura duplo rápido na forma para editá-lo . Quando você sobre a borda do retângulo, você verá uma caneta com um pouco mais. Isso permitirá que você adicione pontos em sua forma. Queremos outro ponto no meio da fronteira superior. Para fazer isso, mantenha o comentário pressionado enquanto passa o mouse sobre o segmento e clique em. Isso colocará seu ponto exatamente no meio. Agora selecione estes novos pontos e usou o IRA em seu filho Boyd para colocá-lo algumas picaretas sílabas. Certifique-se de que as alças do seu ponto estão definidas como refeição e droga um ou usado a seta no teclado da alça até que eles atinjam a extremidade do retângulo. Agora vamos fazer a cara. Vamos começar por desenhar um retângulo, disse que a inteligência em 11 e eles odeiam em 14 disse que a esquina Rogers no máximo. Agora clique no botão Transformar, selecione um do canto inferior e arraste-o ou usou a seta no teclado para movê-lo um pouco em direção ao centro. Reproduz toda a forma do rosto acima do peito, Alinhe-os e agrupá-los. Nomeie este ícone de pasta. Perfil de sublinhado. Como um exercício, você terá que desenhar a casa e procurar o ícone por si mesmo aberto arquivo de existência Nesta pasta de lição, você encontrará os ícones bloqueados em segundo plano. Uma boa idéia será começar com um quadrado para o ícone home em um círculo para o ícone de pesquisa . Mas você pode ser mais criativo quando terminar. Competiu com ícones no arquivo principal ao lado dos outros ícones. Se você quiser pular esta etapa, pegue os ícones que já desenhamos para você na existência. Arquivo do caso. Agora que temos, todos esses ícones os transformarão em símbolos na próxima lição. 9. Boas práticas: símbolos: oi novamente nesta seção irá usar um recurso de símbolo assim que você usar um elemento muitas vezes em seu aplicativo, recomendamos que você transformá-lo em um símbolo. Se você fizer isso, você só precisa editar seu elemento uma vez, e cada instância do elemento em seu arquivo será atualizada. Nós também encorajamos isso para os gerentes. Símbolo em outra página, abra o arquivo principal e vá para a página dois. Se você fez seis bem, você deve ter todos os ícones retirados em pontes. Lição. Se você não abrir esta gaiola, arquivos nesta pasta lição e começar a partir daí. No Instagram, a barra de abas não é um fundo de cachorro, e todos os ícones são brancos, exceto a guia da câmera cujo plano de fundo é sempre azul. Vamos começar com a câmera cresceu com 75 pixels de largura e 50 pixels de altura, Retângulo disse que a cor para Instagram Azul Coloque o ícone da câmera no meio. Alinhá-lo horizontalmente foi dis botão e verticalmente com aquele. Agora vamos cuidar dos outros ícones será definido para status para cada cones de olho ativo e inativo, e inativo, vamos começar com o ativo criar em nossa placa e nomeá-lo ativo desenhou um retângulo preto de 75 pixels de largura e 50 pixels de altura duplicado lado a lado quatro vezes. Agora coloque os ícones em ITRI emaranhados e alinhá-los tanto um limões verticalmente e horizontalmente. Perfeito. Vamos agora criar o status inativo. Duplicar toda a bordo e nomeá-lo inativo. Defina todo o fundo preto em cinza escuro com código hexadecimal para cinco 272 A. A fim de diferenciar instantaneamente um toque entre ativo e inativo, colocará alguma transparência nos ícones. Quando estão inativos. Selecione todos os ícones diretamente em Delay uma lista do quadro ímpar inativo e disse que a transparência em 60%. Agora vamos começar a brincar com símbolos. Selecione o retângulo e o ícone inicial no ativo estão entediados. Clique em criar símbolo. Isso transformará suas camadas de azul para um grupo roxo claro na sua lista de reprodução. Isso significa que esta pasta é um símbolo, então cuidado quando você fez isso sempre instância, será atualizado. Se por algumas razões específicas que você deseja desanexar e limitar de ser símbolo direito, clique ou controle, clique em seu nome e clique fez toque do símbolo. Nomeie sua guia de símbolos na discoteca em quem sublinhou fazer a mesma coisa para o ícone de pesquisa e nomeá-lo guia sublinhado pesquisa sublinhado na guia atividade sublinhado atividade sublinhado em e na guia de perfil guia Perfil em Vamos fazer a mesma coisa para os inativos a bordo. Nomeie cada piso ícone Esta guia regra sublinhou o nome do ícone e a pontuação desligada. Finalmente feito o ícone da câmera no símbolo de sintonia e nomeá-lo guia sublinhado câmera não em todos ou monta já bem criado banheira são para torná-lo realmente claro, realmente grande, e você está entediado. Crie um novo a bordo e renomeie a barra de banheira. Poderíamos copiar o símbolo da cannabis, mas todos os símbolos também estão agora na biblioteca de símbolos. Clique em inserir símbolos e selecione um símbolo de casa. Ou desligado fazer a mesma coisa e reproduz uma pesquisa ao lado dele reproduz uma câmera do que a atividade. E, finalmente, a guia de perfil Selecione símbolos Olo e agrupá-los chamado Barra de guia de navegação em grupo. Pode ser que todo o grupo seja comum. Veja, e vamos voltar para a página um. Clique na tela inicial a bordo baseado em um grupo com Come invejar colocá-lo na posição certa no popa e nas listas Delay. Livrar-se da pasta de navegação anterior como trabalho na guia inicial em Lee. O ícone da página inicial deve ser definido como ativo. Verifique se os outros estão nos detonando. Copie este grupo e coloque-o no quadro explorado. Mude para casa assim e a busca em assim. Isso é legal, certo? Para terminar esta lição. Basta continuar destacando a guia direita nas telas da direita. É isso. Nosso APS que é realmente parecido com o autêntico, e nós sabemos como fazê-lo agora. A melhor maneira de usar símbolo na próxima lição descobrirá o dióxido de captura que contém canta incríveis e até mesmo algumas palavras. Estou falando de plugins 10. Poupe tempo com plugins: Nós vamos voltar. Já passamos por um monte de recursos que são construídos no esboço. Vamos agora dar uma olhada no que foi construído sobre ele. Plug-ins plugins são informados que não foram criados pela equipe de esboço, mas pela comunidade incrível arounds pegar algum dia. Os recursos compensadores e ausentes ajudam você a ser mais produtivo, organizado ou simplesmente divertido. Para dizer a verdade, eu não distanciei todos os plugins que foram criados para esboço, mas entre a comunidade há um cara inteligente e os outros que criaram um plug em quatro plugins. É uma caixa de ferramentas de desenho frio. É um ótimo aplicativo que reúne todos os plugins, torná-los fáceis de instalar e mantê-los atualizados, já que pias devem se arrepender deve obter e vamos começar instalando esboço dois dólares ir para esboçar para buck que vêm e baixar o esboço caixa de ferramentas. Melhor agora, abra o sim, instalará alguns plugins. Como você pode ver, há muitos plugins disponíveis. Sinta-se livre para maná-los e ler descrições. Se você não entende o que todos fazem, não se preocupe, nós também não. Vamos começar instalando três plugins. Procure por um gerador de conteúdo nomeado. Clique na instalação. Este nos permitirá sentir várias formas. Foi executá-los imagens em um clique. Bastante incrível. Também procure por especificações técnicas. Este irá gerar um bloco de texto que exibe todas as propriedades, muitas vezes objetos como o colarinho lateral, peso do traçado, etc. Você está desenvolvendo, realmente aprecio, Finalmente entregue plug em chamado E. I Aiken Isar e instalá-lo bem, você este mais tarde no curso. Agora vamos brincar com este plug in. Vamos voltar ao esboço. Uma boa maneira de experimentar o gerador de conteúdo. É duplicado a tela de exploração. Agora selecione imagens mais antigas. Lembra-se de todo o tempo que passamos na importação de fotos naquelas praças? Bem, clique em plugins e fotos do gerador de conteúdo e clique em Natureza e Urbano e Boom em um tiro. Nós datamos toda a série com novas fotos. Agora vamos ver outro exemplo. Copie o para cima e dill. Tudo o que está nele fará uma lista de pessoas desenhar um círculo e colocar uma difamação de texto à direita selecionado para elementos e duplicá-los abaixo. Como você vai fazer para uma lista. Vamos fazer cinco filas agora. Cinco fotos seletivas. Placeholders clique no plug em Clinton gerador persona fotos e selecione boom feminino novamente 11 que aconteceu. Agora selecione os cinco rótulos de texto, plugins, geradores de conteúdo, não busque nomes e selecione fêmea. Temos agora nomes aleatórios de usuários femininos. Isso não é muito legal? Bem, você vai? Os outros plugins nas próximas lições? Mas se você está se sentindo como um aventureiro, volte para a caixa de ferramentas de esboço e instale outros plugins nas próximas lições irá criar o guia de estilo e também praticar um pouco. 11. Styleguide e prática: Bem-vindo de volta nesta lição, vamos ver como cumprimentar um guia de estilo. O guia estrela reúne em um só lugar todas as informações de design do seu aplicativo. Um estoque. Eu deveria incluir cores, telefones, camas, margens e todos os elementos com seus terraços diferença. Deve parecer algo assim. É um documento que você deve sempre manter atualizado e compartilhar com sua equipe. Você também pode imprimi-lo e pendurá-lo em algum lugar no escritório que já começamos. Fui alvo na página dois do nosso documento. Então continuaremos lá. Vamos começar importando os últimos ícones personalizados vai precisar abrir o arquivo chamado I cones Ações Instagram nesta pasta lição Nós desenhamos para você. Mas se você quiser desafiar suas habilidades, sinta-se livre para desenhá-las por si só. Podem ser os motores de popa e pagá-los na praia. Dois de seu arquivo principal Agora temos a ponta dos nossos dedos, todos os elementos que precisamos para projetar uma versão atualizada do APP. Começaremos pelo fluxo de trabalho da câmera. Voltar para a Página 1 vai transformar isto nisto. E começou com o primeiro clique verde sobre o nome Abu e disse que a cor de fundo no código hexadecimal cinza escuro 333333 Para trazer uma experiência mais imersiva para o nosso usuário irá esconder a barra de status e todos os elementos na barra de navegação também trará para novo recursos para o nosso usuário. A capacidade de gravar vídeos ea capacidade de escolher fotos diretamente de sua biblioteca para que irá criar três novas abas na parte inferior do popa em vez de ícones. Irá usar níveis de texto, como esta tela será para a tela de fotos. Virado o título para camada de texto dro foto e Biblioteca de Direitos na capital poderia ser o bloco de texto de lado e colocou-os h duas bordas. Faça a mesma coisa com o terceiro bloco de texto foto direita no segundo bloco X e vídeo em determinado. Agora selecione os blocos Street X e arrastou a alça direita do grupo até sua posição na borda dos motores de popa. Agora temos certeza de que nossos três blocos de texto têm o mesmo tamanho definido texto centrado na foto Tabas, então vamos transformá-los no azul claro fora do nosso esquema de cores. Agora vamos atualizar a segunda tela começar sentando o fundo do cotovelo. Faça o mesmo cão cinza. Esconda a barra de status, mas mantenha a parte de trás e a próxima. Como fazem parte da nossa navegação. Exclua os fielders. Relógios manter o texto, mas disse que suas cores para branco. Vamos criar algo muito mais chique indo seu guia de estilo para escolher as ferramentas de edição, copiá-las e baseá-las abaixo. A imagem agora desenhada em 130 pixels de altura retângulo disse que a cor para preto e colocá-lo na parte inferior da tela. Colocando construtor leva camada na lista de camadas. Selecione a imagem principal e duplicado redimensioná-lo para que ele se torne um 70 por 70. Pixel Square disse que a cor vermelha usada para quatro agrada alguns eles vão acima do primeiro nome do filtro no retângulo preto para aplacar o mesmo prego sobre os diferentes nomes. Embora para diferenciar os diferentes filtros irá alterar a imagem nas diferentes fêmeas. Selecione tudo o resto. Vamos adicionar um segundo clique de cor sobre o ícone mais na seção de campo disse que a nova cor para um 50 pessoa branco transparente. Agora selecione apenas a segunda miniatura rápida aqui e selecione a luz suave selecionar desertos e masculino e selecione a saturação para o 4º 1 Selecione a queima de cor e assim por diante na última tela irá apenas melhorar a seleção da rede social. Volte para o seu guia de estilo ou o elemento ícones nesta pasta de lição pode ser todo o grupo de ícones sociais e substituir o que desenhamos profusamente. Como é o fim da nossa câmera Flo, vamos desenhar um botão maior para compartilhar a imagem, esconder o próximo na barra naff e desenhou um retângulo de 55 pixels de altura disse que a cor para o nosso Lou ativo e direitos compartilhar no dissidente. É isso. Como um exercício para esta lição, você terá que substituir todos os elementos que foram importados neste gravata nas telas certas . Dessa forma, você terá que lidar com quase todas as telas do aplicativo. Então vá para ele na próxima lição, vai ver teve que exportar elementos. E também usamos um novo para escrever especificações e ter uma conversa amigável com os desenvolvedores . 12. Exportação e espécies: Ei, estamos quase terminando. Na primeira parte do curso, vimos como exportar para fora para que possamos compartilhar as diferentes telas do aplicativo que projetamos . Desde então, criamos elementos personalizados, então veremos agora como exportá-los. Vamos começar com a parte fácil. Abra o arquivo do Instagram ou o que está nesta pasta Lições. Se você quer ter certeza de que você está atualizado bens de debates, nós estendemos nosso guia de estilo? Selecione um elemento. O ícone da página inicial, por exemplo, Não incluir o retângulo do cão no fundo. O desenvolvedor precisará dele. Agora clique em Tornar exportável. O elemento não está pronto para ser exportado. Quando você exporta elementos, você deve sempre escolher o formato PNG. É um formato muito versátil, e é o único que mantém a transparência. Agora vamos ver algo um pouco mais complicado. Resolução IOS APS pode ser executado em vários tamanhos de tela. Olhe uma dívida. Este documento mostra qual é o tamanho de todos os tamanhos reais do iPhone. Dimensões estão em pontos e em pixels faria uma nota lateral aqui para explicar a diferença entre resoluções e pontos e pixels. Um pixel é a menor unidade de medida em uma tela. Pixels são pequenos quadrados que fazem parte da tela, e se você olhar de perto para a tela, você poderá vê-los e as lacunas entre eles. Ponto é uma medida independente da Revolução. O ponto pode ser feito de um ou vários pixels em tela não retina. Cada ponto é feito de um pixel. No caso de exibição retina, cada ponto como um ódio de dois pixels Inuits de dois pixels, modo que ele feito de pixel porta. Portanto, há o mesmo número fora do ponto na retina e em uma tela não retina sob o mesmo tamanho, mas não o mesmo número de pixels. Mas quando projetamos, temos que levar isso em consideração em nosso computador. As dimensões estão em pixels do mesmo tamanho, não fora do tamanho da variável. Então, um levantando um ponto será quatro vezes maior que uma freira, Regina Point. É por isso que, se você projetar um dinheiro com a inteligência fora de 40 pixels e a altura de 30 pixels para o iPhone três, ele precisará escalar os ventos em 80 pixels e o máximo para 60 pixels. Se você queria aparecer como grande no iPhone quatro ou cinco e em 120 por 90 para os dispositivos mais recentes . Isso é um x dois x e três X é A coisa legal que você pode notar é que, mesmo que haja tamanhos diferentes, todo o iPhone X do iPhone para ter a mesma proporção e iPhone 41 ser usado muito mais tempo, então não vai se preocupar com eles por enquanto, Projetando em um X, como temos feito com todos nós, para dimensionar facilmente nossos elementos para cima de uma resolução diferente quando os exportamos, é um bom hábito manter se um dia você se juntar a uma grande empresa que faz ABS, há chances de que todos os abs estão projetando um X. Agora clique no mais ao lado do botão de exportação. Isso criará outra versão do mesmo meu cone. Em outra resolução para o iPhone seis plus, você precisa definir o tamanho em três x. Veja como o sufixo é atualizado automaticamente. Se você está projetando para telefones Android, você encontrará toda a convenção de nomenclatura nesta página. Infelizmente, você tem que definir isso para cada elemento, já que kitsch não oferece as configurações quando você seleciona outro ícone, mas não leva muito tempo para fazer. E não temos tantos ícones personalizados. Nós realmente recomendamos que vocês dois sabiam como exportar elementos por conta própria, mas o novo aplicativo para fora recentemente, e é bastante impressionante É chamado Zeppelin que eu devo. Tem como objetivo facilitar a discussão entre desenvolvedores e designers, e faz isso muito bem. O Zeppelin gera um guia de estilo sem forro e o mantém atualizado para que todos trabalhem na mesma base. Se você trabalha em apenas um projeto, é gratuito. Então, vamos baixar este aplicativo rapidamente no botão de começar e criar uma conta. Agora baixe o APP, coloque-o em sua pasta de aplicativos aberta. Sim, e clique em Create First Project Select IOS e clique em Create. Agora vamos voltar ao nosso arquivo de fuga. Selecione o Home Art Board, clique em Plug in Zeppelin e exporte popa de popa. Como você vê o atalho é vir em E filhotes de tirolesa e clique nas importações para o seu primeiro guindaste . Zeppelin perguntará em que dimensões você faz. Nosso sinal. Selecione um X como ele agora está se tornando um novo padrão. Sua tela é importante, e ele veio com um monte de informações em sua bagagem é, Vamos dar uma olhada. Começaremos criando esta biblioteca do Oeste. Basta clicar neste ícone para outra Swatch. Você é o desenvolvedor pode clicar em qualquer elemento para ver dimensões, e margens podem ir para o ativo. Toque para exportar elemento em cada resolução de uma só vez. E se você quiser adicionar uma nota, basta clicar onde pressionando. Comente onde quiser na tela, por exemplo, para o botão de opções. Uma vez parado, posso compartilhar ou repor uma foto. Todas essas anotações são a sua voz no arquivo. Isso evita mal-entendidos entre você e os outros membros de sua equipe como irmãos. Uma ótima ferramenta de colaboração. Nós realmente encorajamos você a convidar seus companheiros de equipe, voltar para o painel e clicar em convidar como nosso up realmente melhorou na primeira parte do curso. Também é hora de atualizar nosso ícone de APP com algo mais alinhado com essas tendências, e é isso que faremos na próxima lição. 13. Prática de App Icon v2 e design gráfico: Ei, agora que nosso aplicativo está bonito, vamos atualizar nosso ícone também. Instagram foi lançado inicialmente em 2010. Naquela época o trem era eu tinha cinco anos e mais velho que Murphy, hum, efeitos. Todo mundo tinha que olhar brilhante e brilhante e para cima ícones era suposto ser um pouco como eles eram feitos de menos. Lembre-se, essa é a razão pela qual o Instagram terminou com este ícone. Desde então, tornou-se uma parte real da identidade do Instagram, então eu ficaria realmente surpreso se o redesenho é Mas nós nunca sabemos. Vamos fingir que estamos amarrando o Instagram hoje e vamos tomar um pouco mais como o passado parece hoje vai transformar isso em isso. Abriu a luta com a primeira versão do nosso aplicativo. Você pode encontrá-lo nesta lição Folder irá criar um ícone plano agradável e um pouco mais complexo para o nosso aplicativo. Duplicar o Cabul à direita, mudar o nome do a bordo para cima pés ícone, também. Livre-se de ambas as camadas de texto, mas também altere a cor do plano de fundo. Para sair da Cote D B C 682 no círculo cratera de alta degradação do tamanho do círculo médio na verificação de grade. Deve ter um diâmetro de 544 pixels. Centrá-lo bem tendeu a cor para E. Oito d C. C. C. Sete. Agora vamos ouvir outro círculo com diâmetro de 424 pixels século também e muda de cor para 413 F 51 Criar 1/3 e círculo ainda menor para apresentar lente da lente. Precisa de um truque. Dê-lhe o diâmetro de 98 pixels mudará seu colar para branco semi transparente com uma capacidade de 30%. Agora vamos agrupar os três círculos e renomear a lente do grupo. Coloque este novo grupo abaixo da pasta de ganância e ajuste a posição do círculo menor. Coloque-o aqui, certifique-se de que ele toque a borda do círculo interno. Isso é outro efeito simples para fazê-lo. O ícone, um pouco mais agradável dirigiu um quadrado do tamanho do círculo maior, então 544 por 844 centralizá-lo e mudar sua cor para branco com uma capacidade de 10%. Coloque o mentiroso lá dentro. O grupo de lentes entrou em um modo de vítima clicando duas vezes na forma ou pressionando. Digite onde a forma está selecionada. Selecione o canto inferior direito e pressione Return para excluí-lo. Agora temos um triângulo reto. Finalmente, selecione o maior círculo nas listas de leigos, clique com o botão direito e usa máscara. Certo, vamos cuidar do cinturão marrom. Agora. Crie um retângulo com a inteligência como maior o lado do ícone. Então 1024 pixels e lhe dará a altura da busca de seu lado. Então, 1034 dividido por três, e vamos arredondá-lo. Mude a cor para marrom. 935 b. Três b. Coloque-o no topo e certifique-se de que está atrás da lente. Em seguida, são as quatro cores que vamos desenhar. Retângulo tinha uma largura de 60 pixels. Aliant era a linha à esquerda na grelha. Duplicar ou um formigamento quatro vezes e colocá-los ao lado do outro. Mude suas cores para os seguintes códigos X F f 003 C F f d. Cinco duplo Ooh duplo o e 190 um para um grupo O. E. A. E. A. Estes quatro retângulo com o marrom e chamou as cores do grupo finalmente usaram o retângulo marrom como uma máscara. Certifique-se de que o grupo dele é Bill of the Lens Group no painel esquerdo. Agora podemos passar para o visor. Quadrado bruto era de 180 pixels. Dê um colar, registre 14 e use a mesma cor que seu círculo interno da lente. Em seguida, coloque o grupo de cores e, em seguida, não alinhe verticalmente com o retângulo marrom. Agora verifique a margem na parte superior e mova-a para a direita até ter a mesma margem no topo. E a menos que crie um círculo com um diâmetro de um vermelho, 50 pixels mudaram o campo para branco com uma capacidade de 30%. Coloque-o no grupo de cores e centralize-o com quadrado. Nós apenas quarto mudar o nome do grupo para o topo e agrupar as quatro cores em um grupo. Você vai cores frias desenhou outro círculo com um diâmetro de 40 pixels, disse que a cor é 30% Transparência branco e colocá-lo mais ou menos lá. Coloque-o no grupo banheira e grupo três formas. Nós apenas arruinamos um grupo chamado visor finalmente vai adicionar uma sombra para a lente. Comece criando um retângulo com um lado de largura de diâmetro da lente, que é 544 pixels girado segure deslocamento para rotação em questão para incrementos de 15 graus e alinhá-lo com a lente assim, você vai? O gradiente seleciona o campo de gradiente e mudará uma revisão do gradiente, colocando este ponto de colarinho aqui e este do lado oposto muda a cor dos dois primeiros. Capacidade negra. 10% e nós tivemos a capacidade inferior dois brancos. 0%. Finalmente realmente em Mentiroso para sombra e colocá-lo abaixo da cabeça do grupo menos Zoom para fora. Ok, nada mal. Como você pode ver, você pode criar quase qualquer coisa usando formas simples e básicas. Transfira para mim e combine-os se quiser experimentar coisas diferentes e compará-las. Basta duplicar o motor de popa com o ícone e experimentar. Por exemplo, Vamos ver o que seria parecido se fôssemos m vangloriar-se. Duplicar o Abu com o ícone. Nós apenas redesenhamos no novo, tudo a bordo de fundo difícil. Eu não podia colocar camadas duplicadas em um grupo e renomeá-lo M Bus Hide. O grupo estudioso gin do fundo original, adicionando uma sensação de preto semi transparente foi uma necessidade de 10% e esconder o grupo do MBA e redimensionar a borda do ícone. Então é parecido com isso. Coloque a sombra no grupo das brasas Easy, certo? Certo, então vamos renomear esse quadro estranho. Agora que temos um I. Cohn , vamos exportá-la primeiro, vamos duplicar o nosso ícone. Coloque-o à esquerda e livre-se da borda que eu poderia. Por que estamos fazendo isso? Porque você tem que carregar ícones de nossas praças, não em torno dela quadrados. A Apple aplicará a máscara com os cantos arredondados para você. Agora vamos criar um novo arquivo com todos os tamanhos de ícones. Vai precisar. Porque são ambos do arquivo anterior para o seu novo arquivo em Vamos usar um pouco de plug no Magic. Você se lembra do plugue em um tipo de Naser? Não deixamos isso mais cedo neste curso. Vai ser usado de verdade para agora. Eu lhe disse antes que a Apple solicita uma quantidade incrível de tamanhos de ícones. Bem, selecione o seu cartão clique no plug em A eu posso, também. E aqui estão eles, formatos mais antigos. Agora você só tem que clicar no botão de exportação e você tem todos os seus ícones. É isso. Agora temos uma Nikon que até mesmo a equipe de design por trás do Instagram pode ser. O acordo está cancelado. Ok, agora é a sua vez de experimentar, Recriar as três versões e também tentou trabalhar em uma ou duas ideias próprias. Pode ser pequenos ajustes, tamanhos de limão ou cores ou design inteiro. Quem gosta de ver o que você vem com no próximo vídeo criaria capturas de tela da APP Store tão elegantes quanto o nosso ícone. 14. Capturas de tela da App Store v2: Ei, estamos quase terminando. Agora que terminamos o design do nosso aplicativo, vamos mostrá-lo ao mundo corretamente. Antes de baixar seu aplicativo, um usuário em potencial terá que lidar com diferentes elementos de marketing. O nome do seu AB, a legenda, o I Cone dois comentários potenciais descrição e as capturas de tela. Inicialmente, eles foram criados apenas para exibir algumas capturas de tela do aplicativo, então você teria uma idéia de como o up se parece. Mas com tantas lacunas na história, as pessoas começaram a usar a tela como ferramentas de marketing poderosas. Tornou-se um lugar para explicar quando você se, você pode exibir grande legenda foi um monte de impacto show como usar o aplicativo para quão grande seu designer é usando efeitos extravagantes e assim por diante. Deixamos cair alguns exemplos nesta pasta de lições, mas para criar uma mensagem impactante, você precisa se colocar em seus sapatos de usuário. E o bom ponto é que já fizemos isso com nossas histórias de usuários. Em vez de apenas mostrar, Screenshots da APP irá incorporar a tela arrepiante dispositivo e colocar uma legenda acima dele para dizer o que a APP é para algo assim temos alguns anos suas histórias para contar o que serão os cinco princípios . E há cinco guias. Lembre-se, nesta pasta de lições, você encontrará as telas de cada etapa. Poderíamos projetar a captura de tela absoluta do zero, mas mais uma vez, comunidade de esboços nos apoiou em Manto. Criado um arquivo realmente grande que ajuda você a criar captura de tela legal em poucos minutos. Graças a ele, abra o arquivo gerador de captura de tela da loja APP nesta pasta de lição no topo Há um tutorial sobre como usar este arquivo, mas vamos passar por isso juntos. Neste arquivo. Tudo está ligado entre si, então você tem que trabalhar cuidadosamente em outro e para fazê-lo funcionar. Primeiro, importe cada uma de sua tela na primeira linha de placas deve. Vamos começar com a câmera. Quanto a nós, é a característica central do Instagram. Clique na guia de cor do campo e substitua a imagem pela captura de tela da câmera. Dê uma olhada em baixo. Capturas de tela foram abatidas. Faça a mesma coisa para a tela inicial tiro a pesquisa, a atividade e, finalmente, para perfil. Eu fiz o fundo para cima e disse que a cor de preenchimento para o instagram azul olhar abaixo. Está começando a parecer bom. Agora vamos editar as legendas abertas. O arquivo de histórias do usuário nesta pasta de lições. As histórias de usuários são os pilares do nosso aplicativo. Eles também dizem exatamente com a abstinência, para ser mais impactante, vamos começar cada legenda com o verbo. O 1º 1 será tirado, compartilhe belas fotos, depois veja suas fotos e momentos de amigos. Vamos adaptar-nos. Eu quero ver a foto de outras pessoas em descobrir a imagem de outras pessoas e vai se transformar. Eu quero saber sobre a atividade das pessoas no AB para ver a atividade das pessoas. A legenda do perfil será acessada. O que as pessoas veem de você. Copiar baseado cada legenda nos três blocos de texto X, a fim de fazê-lo funcionar no iPhone seis mais pequenas tampas, agora desativado para soltar sombra que olhar um pouco antiquado. É isso. Se você preferir usar outra cor do iPhone, podemos facilmente escolher entre prata, ouro e preto no menu de símbolos. Agora que tudo está definido, clique em Exportar Ícone e criar uma pasta para exportar todas as suas capturas de tela eficientes direita estão cima agora pode brilhar na loja APP. No próximo vídeo, vamos ver como podemos fazê-lo brilhar em toda a Web 15. Mostra de produtos: Ei, nosso aplicativo agora é lindo. Vamos ver como podemos mostrá-lo ao mundo em outro. Para fazer isso, vamos colocar nosso aplicativo em fotos reais para dar algum contexto e obter imagens legais. Você pode ter o núcleo direto de suas próprias imagens, mas há algumas ferramentas legais para fazer isso de forma eficiente. Vá para Deng que vêm com três extremidades neste site. Você pode integrar suas telas em diferentes contextos. Há também lugar hit que net, mas suas imagens são um pouco chato com essencialmente pessoas de terno. Então vamos encontrar alguma coisa amigável hipster. Este vai ficar bem. Rápido nisso. Puxe uma captura de tela do seu aplicativo. Se você não tem um, há se você quiser nesta pasta de aula e aqui está. Você pode salvar a imagem em sua área de trabalho e começar a construir seus kits de imprensa. Também. Agora você pode precisar de um site. Não vamos gastar muito tempo nisso, pois não é o propósito do discurso. Mas se há uma coisa que você deve lembrar é que o único objetivo de um site soneca é fazer as pessoas baixarem o aplicativo. Há um monte de ferramentas para fazer sites lindos, mas você vai encontrar modelos legais em surpreendentemente, por exemplo, em com gripe. Finalmente, vamos dizer algumas palavras sobre um começou que fazer uma mão produto muito bom trabalho que vêm um protetor que você pode descobrir todos os dias nos novos abs e principais produtos selecionados pela grande comunidade. Quanto aos designers, há uma grande coleção para reunir as melhores ferramentas para usar. Reconhece alguns que já usamos neste endereço como frontrunner. É uma ótima maneira de chegar a Dale. O mundo que você existe pode ser o primeiro lugar para relaxar e ver as reações das pessoas. Por exemplo, os envios são restritos por usuários selecionados, mas temos permissão para publicar. Portanto, sinta-se à vontade para entrar em contato conosco quando seu aplicativo estiver pronto e disponível e ficará feliz em ajudá-lo . Obrigado. Então, seguindo este curso no próximo vídeo, vamos fazer um verão, mas tudo o que passamos e também uma pequena surpresa 16. CONCLUSÃO: Ei, é isso. Parabéns. Você fez isso. Você passou por todas as lições do discurso que esperamos que tenha gostado. Seu projeto final é criar um personalizado projetado para três telas masculinas de seu fluxo de recursos chave para usar o modelo de gráfico de tela da loja de aplicativos para mostrar as telas. Também queremos que você crie uma aversão V dois ao seu ícone APP usando as técnicas mais avançadas que você aprendeu. Não hesite em experimentar coisas novas para liberar sua criatividade. Então faça upload de suas capturas de tela absolutas sobre essas belas vistas icona. Estavam impacientes para ver como seu trabalho duro valeu a pena. Então é isso, pessoal, muito obrigado por seguir este curso realmente apreciaria se você pudesse nos dar uma revisão dizendo o quanto você gosta disso. O filme é muito importante para nós em realmente útil para os alunos para fazer esse show. Então, por favor, diga ao mundo o que você acha que os pequenos presentes que você vai encontrar nesta pasta lição de encontrar com o aplicativo instagram inteiramente design um em. Reconstruímos todas as telas e ícones, e temos certeza que é bem perto do fogo que a equipe do Instagram está trabalhando em um em Menlo Park, Califórnia. Sinta-se livre para os irmãos e compartilhe este arquivo tanto quanto você quiser. Esperamos que agora continue a praticar sozinho. Hum, para trabalhar no seu projeto. Estamos aqui por você. Se você quiser compartilhar coisas conosco, realmente, vamos mantê-lo informado com atualizações sobre coisas legais que encontramos. Portanto, não se esqueça de verificar as aulas e sua caixa de entrada de vez em quando. Obrigado novamente e divirta-se.