O curso intensivo completo de design de UX - como esboçar UI/UX

1. Introdução: Se você quer se tornar um designer U R ux, você está no lugar perfeito. Este curso completo irá ensinar-lhe todos os itens essenciais com, bem organizado, um fácil de seguir tutoriais. Oi, meu nome é uma erupção cutânea e eu sou um designer de UX. Juntos, você e eu vamos aprender como se tornar um designer de interface de usuário usando o esboço de software O curso Thes foi projetado para pessoas completamente novas em seu design de UX ou digamos design em geral. No início, vamos aprender sobre o básico do design e você elementos, e então vamos aprender sobre mapa de esboço e todos os seus segredos escondidos juntos. Então você aprenderá a criar um quadro de fio simples. A partir daí, você aprenderá como configurar seu guia Stein e como aplicar suas cores apropriadamente ao seu design. Você também vai aprender sobre todos os princípios fora aplicativo móvel e Web design, em seguida, revelar um redesenhado o Instagram em como o nosso primeiro projeto a partir do zero, e então vamos projetar um financiamento alguns juntos, e eu gostaria de compartilhar com você todas as técnicas e segredos necessários para projetar uma aplicação de classe mundial. Além disso, você aprenderá sobre micro simples e avançado em direções. Também falaremos sobre marcações e como você pode criar seu próprio portfólio on-line sem escrever uma única linha de código. Além disso, você aprenderá sobre três modelos D e criação de cenas de realidade aumentada. E por último, mas não menos importante, você aprenderá a iniciar seu próprio negócio e obter seu primeiro cliente como designer de UX. Assim, durante as pontuações, vamos projetar para completar aplicativos móveis e um site para desenvolver suas habilidades de design e dominar todas as ferramentas necessárias. Além disso, você terá acesso a duas marcas New York come no valor de mais de US $3000 você pode usá-los em seus projetos comerciais. Espero que você esteja pronto para aprender novas habilidades e se tornar um designer de interface de usuário. Vejo-te na aula. 2. Introdução à UI/UX: Oi, todo mundo. Bem-vindo ao primeiro capítulo deste curso Nesta seção, vamos falar sobre as diferenças entre você, I e UX design e a estrutura do curso que você pode entender como o curso é organizado para que você segui-lo corretamente. E por último, mas não menos importante, vamos falar sobre as ferramentas e requisitos que você precisa saber para prosseguir o curso. Então, sem mais delongas, vamos começar. Primeiro de tudo, vou falar sobre as diferenças entre você I e UX design. Embora ambos os elementos sejam cruciais para um produto e trabalhem em conjunto, suas funções são totalmente diferentes. Seu ex design é um campo mais técnico e analítico. No entanto você eu desenho refere-se ao design gráfico com responsabilidades mais complexas. Então, deixem-me dar-vos um exemplo. Se você considerar um produto como um carro, o chassi é o código, que lhe dá uma estrutura clara. As outras partes, como portas, filtro completo, etc., representam o design UX, que permite que o carro funcione corretamente. Por outro lado, as ideias nove representam a aparência do carro. São sensores, etc. Em outras palavras, você X, que significa experiência do usuário, é sobre como um produto deve funcionar. E você I, que significa interface de usuário, é sobre como um produto deve olhar. Então você, como designer de produtos, deve saber como esses dois termos funcionam juntos e como distinguir entre eles. Por exemplo, você deve saber quais são as responsabilidades de um designer de UX. E por outro lado, quais são as responsabilidades de um designer da UI? Como você pode ver nas fotos, temos duas telas diferentes. A esquerda nos mostra como o produto deve funcionar. Por exemplo, suponha que você tenha uma tela com dois botões e campos de texto. Ok, o U X nos mostra como esses botões devem interagir com o usuário, e a imagem certa é tudo sobre interface de usuário, e nos mostra como o produto deve ser visto. Por exemplo, aqui temos um botão e um quadrado. O seu designer de olhos decide quão grande este botão deve ser ou qual cor é adequada para esse quadrado. Estas são as suas responsabilidades de designer. Muito bem, muito obrigado por assistirem este vídeo. E eu vou te ver no próximo vídeo 3. Estrutura do curso: Oi, todo mundo. Neste vídeo, vamos falar sobre a estrutura do curso. Na verdade, você pode dividir o curso em duas seções principais. A parte teórica e a parte prática. A parte teórica cria 10% de todo o curso, e a parte prática forma 90% do conteúdo do curso. Então, em vez de nos concentrarmos em teorias, vamos nos concentrar em praticar as habilidades que você aprende trabalhando e diferentes tipos de projetos . Na parte teórica, você aprenderá sobre conceitos básicos de design, seus elementos, ideias de negócios na Centra. E na parte prática, vamos projetar diferentes páginas de aterrissagem de aplicativos móveis. E também vamos falar sobre prototipagem de arame, design de logotipo de modelagem de três D e muito mais. Então, se você é um iniciante completo, eu recomendo assistir a parte teórica primeiro e depois prosseguir com o curso. Por outro lado, você pode pular a parte teórica e pular para a criação de um projeto. Muito bem, pessoal, muito obrigado por assistirem este vídeo. E vejo-te no próximo vídeo. 4. Ferramentas exigidas: Olá a todos, neste vídeo, vamos falar sobre as ferramentas necessárias para completar este curso. Neste curso, vamos usar diferentes ferramentas de design gráfico para projetar interfaces de usuário de classe mundial juntos. O principal sofrimento que vamos usar é chamado de esboço, que só está disponível para Mac OS. Portanto, se você não tiver um dispositivo Mac OS, talvez você não consiga aprender as partes práticas. As outras ferramentas que você vai aprender sobre o nosso estúdio de invasão e adobe para a loja. Nós também vamos falar sobre sites úteis, como drible ser mãos, etc. Se você não tem nenhum dos sofrimentos acima mencionados, certifique-se de instalá-los antes de iniciar o curso. 5. Introdução aos conceitos de design: Oi, todo mundo. Bem-vindos de volta a outra seção do curso. Neste capítulo, vamos falar sobre layouts, iconografia, tipografia, cores, composição e muito mais. Se você quer se tornar um profissional e grande, você é ux designer. Você precisa começar com o básico de design. Então, agora que você sabe a importância de saber o básico do design, vamos começar este capítulo. 6. Layout: Oi, todo mundo. Neste vídeo, vamos falar sobre layouts em design. Quando se trata de você é design UX. A maneira como mostramos as informações em uma soneca ou site é tão importante. Na verdade, não há uma maneira certa específica de criar sua própria composição, para que você possa facilmente criar um layout com base em sua própria necessidade, desde que seja consistente e compreensível para os usuários. Como você pode ver nas fotos à direita, ambas as telas são bem projetadas. Embora o espaçamento seja diferente, a composição é absolutamente clara e consistente. Você precisa prestar muita atenção à consistência. Enquanto você está projetando uma interface de usuário, não importa o tipo de plataformas que você está projetando para as mesmas regras, aplique a todas elas. Tudo bem. Agora vamos verificar essas fotos como ele pode ver na imagem da esquerda que os sentidos são bastante consistentes. Por exemplo, se você olhar para a distância entre a imagem do perfil e a parte superior da tela, você pode perceber que o valor é 50 pixels e também o D, uma vez que entre a mesma imagem do perfil e o campo de texto logo abaixo disso é novamente. 50 pixels. Como você pode ver, o layout deste design é bastante claro. E a razão disso é por causa da consistência do espaçamento. Nas próximas palestras, falaremos também sobre espaçamento e a importância disso no design. Agora, se você olhar para a imagem certa, você pode perceber que o design também é claro. Nesse layout, No entanto, a única diferença é as cores e o espaçamento. Mas como você deve ter notado, o espaçamento é novamente consistente. Tudo bem. Muito obrigado por assistir este vídeo. Vejo-te no próximo vídeo. 7. Hierarquia visual: Olá, todos neste vídeo, vamos falar sobre hierarquia visual. Hierarquia visual é sobre como olhamos para os projetos. Isso soa? Eram. Então vamos colocar de outra maneira. Nós, como designers, devemos nos colocar em sapatos de usuários, a fim de perceber como eles vêem nossos projetos. O conteúdo em qualquer layout de página digital seguirá uma hierarquia específica. Por exemplo, menus vão para a parte superior inferior esquerda ou direita da tela, ou uma combinação desses cabeçalhos aparece acima das fitas corporais. Em outras palavras, hierarquia é uma maneira simples de se manter organizada da maioria para o menos importante. Lembre-se de que os usuários definiram a hierarquia de qualquer aplicativo ou site. O item que primeiro chama a atenção do usuário está no topo da hierarquia. As especificações visuais que o designer pode utilizar para influenciar os usuários, compreensão da informação, nosso tamanho, quanto maior o elemento, mais atenção ele atrairá. Então, se você está familiarizado com o HTML e qual processo de desenvolvimento, você pode saber que temos seis tipos de cabeçalhos de H um a H seis. H um é o maior cabeçalho, e H procura é o menor em. Então, quando quisermos chamar tanta atenção. Usaremos cada um deles. Por exemplo, suponha que queremos chamar a atenção do usuário para uma seção específica ou item específico, então, nesse caso, vamos usar o cabeçalho maior. Ou, por outro lado, às vezes não queremos ter tanta atenção a uma seção ou conteúdo específico. Nesse caso, podemos usar o cabeçalho menor para que o tamanho é tão importante. O próximo item é colarinho. As cores brilhantes são mais visíveis do que as silenciadas. Se você não tem informações suficientes sobre cores, você não precisa se preocupar com isso, porque nas próximas lições, cobriremos todas as informações necessárias sobre como escolher a cor certa em seu design. O próximo item é o alinhamento. Um elemento com um alinhamento diferente dos outros atrairá mais atenção. Então, o que isso significa? Suponha que você tenha um layout fora, Digamos, quatro vídeos diferentes ou quatro fotos diferentes. Se você alinhar um Onley desses vídeos ou fotos de forma diferente, ele chamará mais atenção para ele. Na verdade, nesse caso, nesse caso, o usuário pode perceber que algo é diferente. O próximo item é o contraste. Cores fortemente contrastantes chamarão a atenção facilmente. O contraste é um tópico muito, muito importante em você que eu desenho, e vamos falar sobre contraste nas próximas lições. Profundamente. O próximo item é a proximidade Elementos, que são colocados estreitamente juntos, parecem mais relacionados. E isso é verdade. Se você olhar para as fotos do lado direito, você pode ver que temos duas telas diferentes. Vamos focar na tela esquerda. Como você pode ver, temos duas seções diferentes, novas promoções e novas histórias. Você consegue perceber que os elementos em ambas as seções são colocados estreitamente juntos para que os usuários possam entender facilmente que eles estão relacionados juntos? O próximo item é a repetição. Estilos de repetição podem indicar que o conteúdo está relacionado. Então, o que isso significa? Vamos ver as fotos à direita. Você pode ver que temos quatro quadrados em três círculos, para que o usuário possa facilmente reconhecer a relação entre esses elementos. E o próximo item é o espaço em branco, que é outro termo importante no design ux. Mais espaço entre os elementos chamará mais atenção para eles, então vejamos as imagens à direita. Mas desta vez precisamos distinguir entre a tela esquerda e a tela direita Como você pode ver na tela esquerda, temos espaço suficiente. Ou digamos, espaço em branco suficiente entre nossos elementos e nossas seções para que os usuários possam facilmente esposa através da interface do usuário. No entanto, na tela direita, você pode ver que todos os elementos estão muito, muito próximos. E não há espaço em branco suficiente entre todos os elementos nesse tipo de layout. Muito bem, muito obrigado por assistirem este vídeo. Espero que tenha gostado. E vejo-te no próximo vídeo. 8. Noise visual: Oi, todo mundo. Neste vídeo, você vai estar falando sobre ruído visual no design. ruído visual, como você pode adivinhar em seu título, é tudo sobre uma tela ou parte de um produto digital, que tem tanta informação e muitos elementos nele. Quando você está projetando um APP ou um site, você precisa prestar muita atenção aos detalhes, porque no final do dia, queremos projetar uma tela que seja fácil de usar e fácil de percorrer. Portanto, certifique-se de eliminar todos os elementos desnecessários ou informações da sua tela. Se você não tiver certeza se seu design tem ruído de vídeo ou não, é recomendável solicitar feedback dos usuários. Se você olhar para as fotos no lado direito, você pode ver que temos duas telas diferentes na tela esquerda. Não há ruído visual, e é ótimo em termos de você que eu desenho. Por outro lado, na tela direita, há muito ruído visual. Como você pode ver, há tantos textos na parte superior, e, em seguida, alguns itens, que podem ser vídeos ou fotos do que novamente alguns vídeos. E depois disso, algumas histórias e você pode reconhecer que não há espaço em branco suficiente entre esses elementos. Muito obrigado por assistir este vídeo. Vejo-te no próximo vídeo. 9. Iconografia: alto nesses vídeos, vamos estar falando sobre iconografia no design. iconografia é uma linguagem visual usada para demonstrar aspectos, conteúdos ou funcionalidades. Arkan são feitos para ser elementos visuais simples e claros que são reconhecíveis imediatamente . Você não precisa redesenhar ícones bem conhecidos, como ícone home, ícone de pesquisa, etc ou, digamos, não reinventar a roda. Você pode obter acesso a quase todos os tipos de ícones em sites de graça ou anúncios custos razoáveis . Mas e se você precisar dele para projetar alguns ícones especificamente para o seu projeto? Bem, nesse caso, você deve projetar ícones, que estão em harmonia com seu design e outros ícones. Tenha em mente que os ícones precisam ser entendidos facilmente pelos usuários, então certifique-se de mostrar consistência em seu design. 10. tipografia: alto nesses vídeos, vamos falar sobre tipografia. O que é tipografia? tipografia transforma a linguagem em um elemento visual decorado. Tipografia é uma das partes mais importantes de você é design UX, por isso vale a pena o seu tempo para aprender mais sobre ele. Quando você está projetando um aplicativo ou um site, limite o número de fontes e tamanhos que você usa para manter seu design simples. Comece B dois fundos no máximo, um para os cabeçalhos e outro para os corpos. Você pode usar fundos gratuitos ou pagos em seus projetos, mas eu recomendo o uso de fundos gratuitos. Se você quiser usar fundos pagos, verifique cuidadosamente a licença. Você deve informar seus clientes que eles precisam pagar extra pelo uso de fundos pagos. Agora, se você olhar para o lado direito da tela, você pode ver que eu classifico a base de tipografia para você. Vamos verificar isso. Passo a passo. Bem no topo. Temos propriedades. Cada linha de texto em qualquer programa tem uma linha base. Como você pode ver, ele é indicado aqui com a linha azul, e também tem o espaçamento entre letras que você pode modificá-lo em seu design fora do curso. Há mais propriedades relacionadas à tipografia, no entanto, para prosseguir os escores T, basta conhecer essas duas propriedades. Agora vamos nos concentrar na comparação de espaçamento de letras à esquerda, você pode ver que temos o espaçamento padrão. Mas à direita, modifiquei o espaçamento dessas letras. Dependendo do tipo de projeto em que você está trabalhando, você pode modificar o espaçamento entre letras como desejar. Agora vamos falar sobre o peso de cada fundo. A maioria dos fundos tem pelo menos três pesos diferentes, mas alguns deles têm mais. Por exemplo, o fundo pode ter seis maneiras diferentes. Como você pode ver em sua tela, temos aqui de luz do dedo do pé, negrito e por último, mas não menos importante, desclassificação fora de fontes. Como você pode ver, temos duas classificações diferentes para fundos. O serif, que é o esquerdo na foto, e o Saref Areia, que é o direito. A foto. Então, qual é a diferença? Com certeza, você pode distinguir entre eles, mas deixe-me explicar para você, a fim de memorizar a regra fora serif e sans serif. Na verdade, os fundos da Sarah têm algum tipo de linha plana no topo deles e também o fundo deles. Ou você pode dizer que eles têm pés. Por outro lado, os fonds sensoriais não têm esse tipo de linhas. Areias em inglês e francês significa sem sans serif significa sem serif. Você, como designer, é responsável por escolher a melhor onda de fundos e também as melhores classificações dependendo do tipo de projeto em que você está trabalhando. Muito obrigado por assistir este vídeo. Vejo-te no próximo vídeo. 11. Contrates das cores: Olá, todo mundo. Neste vídeo, vamos falar sobre contraste de cores, que é um tópico muito importante quando se trata de você que eu desenhei. Aplicando cores de forma eficaz é uma habilidade que todos os que trabalham, composições visuais devem ter para que você, como um designer em saber como usar cores em seus projetos. Quando se trata de aplicar cores, legibilidade e legibilidade são os principais fatores. Pesquisadores mostraram que cores vibrantes permitem contraste suficiente, ajudando a aumentar a legibilidade e legibilidade. Por favor, leve em consideração que muito contraste de cor nos faz dificuldade em ler. Eu recomendo vivamente que os designers criem um nível de contraste de carne e, para destacar elementos, eles podem usar cores de alto contraste. Você também pode usar sites para fornecer uma proporção ao comparar duas cores para ver se há contraste suficiente ou não. Se você olhar para os exemplos abaixo da direita, temos seis cores diferentes. Como você pode ver, os 4 primeiros são aceitáveis e têm contraste suficiente, mas os outros não são legíveis. Então, quando estamos projetando uma interface de usuário, precisamos prestar muita atenção aos chamadores, porque às vezes você como designer, eu quero ser o mais criativo possível. No entanto, a criatividade deve vir após legibilidade e legibilidade 12. Palete de cores: Oi, Ron. Nesta lição, vamos falar sobre paleta de cores. Criar um esquema de cores para o produto pode parecer uma tarefa difícil, especialmente se você é um iniciante. No entanto, na realidade, não é tão complicado quanto muitos designers pensam. Qual é o esquema de cores que você é? Esquema de cores é uma mistura de cores usadas em sua interface de usuário. Quase todos os esquemas de cores contêm os grupos de cores em queda. Cores primárias, cores secundárias, cores de acento, neutros, cores semânticas. Quais são as cores primárias e secundárias? As cores primárias e secundárias são as cores base de sua interface de usuário. As cores, que são usadas com mais freqüência em seu design você, são chamadas de cores primárias. A maioria dos designers geralmente escolhe cores da marca como cores primárias. Na verdade, recomenda-se não ter mais de três cores primárias. Opcionalmente. Você pode usar chamadores secundários para distinguir seus produtos e torná-lo mais interessante. I projeta tudo bem, mas como escolher cores corretamente Quando você está trabalhando com cores, você não deve criar uma combinação de cores aleatórias porque o resultado não seria o que você espera. Para entender como trabalhar com cores. Primeiro, você precisa saber o que a cor irá facilitar e como ela funciona. Aqui estão combinações de cores importantes que você precisa saber de cortesia, que são duas cores que estão em lados opostos fora da cor com, e a próxima é monocromática, que são três tons, tons e adolescentes uma cor baseada. E o último é análogo, que são três cores que estão lado a lado na roda de cores. Se você olhar para o lado direito da imagem, você pode ver que nós temos uma cor vontade aqui. Como pode ver, temos monocromático. Por exemplo, se você olhar para o vermelho, temos três tons diferentes ou, digamos dezenas de uma cor baseada, e também temos complementares. Por exemplo, aqui temos roxo e amarelo, que estão em lados opostos fora da cor com, então a combinação dessas cores é grande 13. Espaçamento: Oi, todo mundo. Bem-vindos de volta a outra lição deste curso neste vídeo, vamos falar sobre espaçamento no design. A consistência desempenha um papel fundamental em você. Eu desenho. Então, quando você está projetando, você precisa medir tudo e mantê-lo consistente. Como designer, espaçamento depende de você. Mas uma vez que ele disse isso, você precisa usar os mesmos padrões de espaçamento em seus projetos. Por exemplo, se você disse que o espaçamento entre o cabeçalho e o corpo leva a oito pixels, você deve sempre usar o mesmo espaçamento em todo o projeto. Como você pode ver a imagem, todo o espaçamento foi medido com precisão e torna o design claro. Por exemplo, se você olhar para a imagem, você pode ver que temos 50 células de pico do topo para o título de novas imagens e, em seguida, oito pixels de novas imagens para o subtítulo superior e continua. Portanto, para manter seu design claro, certifique-se de usar padrões de espaçamento consistentes em todo o projeto. 14. Composição: Oi, todo mundo. Neste vídeo, vamos falar sobre composição em design. Qual é a proporção dourada? A proporção dourada é uma proporção matemática entre os elementos de diferentes tamanhos, que se pensa ser a proporção mais esteticamente agradável para os olhos humanos. A proporção dourada é igual a 1 a 1,618 e é geralmente ilustrada com concha em forma de suas pilhas. Este número foi usado na criação de proporções para arquitetura, pinturas , fotografia , design, etc. Mas como usar a proporção dourada em seu design? Se você tiver uma tela com o com off 1200 pixels, você precisa dividi-lo por 1.618 e o resultado será 741.6. E agora podemos dizer 1200 músicas de escolha menos 741 é igual a 459. Então, temos duas seções com o com até 741 pixels e 459 pixels. Como você pode ver no lado direito da triagem aqui, temos uma captura de tela fora do site médio . Você pode ver como ele foi projetado com base na proporção de ouro para que ele possa chamar a atenção do usuário para o lugar certo na hora certa? 15. Guia de design: neste vídeo, vamos falar sobre o Guia de design. O que é um guia de design? Um guia de design é um sistema que pode ajudá-lo a manter seu design consistente. Ele também pode acelerar seu processo de design. Os exemplos que você está observando são apenas alguns componentes que podem ser usados no guia de design . Há muitas coisas que podem ser incluídas em seus guias de design, como elementos, topografia, iconografia, dimensionamento e espaçamento. Almofada de cores. É etcetera, então ter um cara de design torna sua vida muito, muito mais fácil. 16. Fontes consistentes: Olá a todos, a todos, nesta lição, vamos falar de fundos em design. Como designer, você sempre trabalha com fontes diferentes, então você precisa saber como usá-las corretamente. Como foi mencionado na seção de tipografia, recomenda-se trabalhar com dois fundos diferentes no máximo para manter seus olhos simples. Seja o melhor dinheiro para você, eu projetei o número um São Francisco. É melhor para sites modernos e mais por lapso número dois Open sense. É melhor para sites e recaída móvel. Concerto número três. É melhor para sites mínimos e número APS móvel quatro Proxima Nova. É ótimo para sites centrados em conteúdo moderno e APS móveis e por último, mas não menos importante, roboto. É melhor para sites modernos e mapas móveis também. 17. Cores consistentes: Pessoal, Pessoal, neste vídeo, vamos falar de cores. Aplicar cores aos elementos dos seus olhos é uma das partes mais cruciais do processo de design U. Y. Você se lembra do que estava desempenhando um papel fundamental em seu olho projetar sua consistência certa, então você precisa manter suas cores consistentes também. Por exemplo, se você aplicar Blue dois títulos em uma página, você precisa aplicar a mesma cor dois títulos em outras páginas ou, se aplicarmos, ler para comprar botão. Você deve usar a mesma cor para qualquer outra parte inferior de compra em outras páginas. É por isso que precisamos de um guia de design e do estilo certo. Se você olhar para a imagem à direita, você pode ver que usamos uma cor preta específica para títulos, e usamos uma cor específica para nossos fundos, etc. Por isso, é tão importante manter suas cores consistentes 18. Ícones consistentes: Olá, todo mundo. Neste vídeo, vamos falar de ícones no design. Você pode pensar que trabalhar com ícones é uma parte fácil do projeto U. I. No entanto, se você não prestar atenção aos detalhes, você não se apropriará. Resultado seus alguns pontos importantes que você precisa para cuidar. Número um. Teste a escalabilidade. Verifique se os ícones ainda podem ser reconhecidos em tamanhos pequenos, como 15 por 15 pixels. Número dois devidamente dimensionado lá. O tamanho do alvo recomendado para objetos de tela sensível ao toque é de 7 a 10 milímetros. Lembre-se também de adicionar preenchimento entre ícones para evitar toques corretos. Número três Consistência interna. Use o mesmo esquema de cores para todos os ícones e também os mesmos atributos de estilo, como o tamanho das bordas. Número quatro. Alinhamento perfeito. Sempre tente ter um alinhamento perfeito em um golpe. Ah, grafite. Mas às vezes porque você tem ícones com tamanhos diferentes, você precisa equilibrá-los sozinho. Se você olhar para a imagem à sua direita, você pode ver que temos dois grupos diferentes fora ícones no grupo esquerdo. Você pode ver que temos iconografia consistente porque usamos apenas ícones de contorno. Mas, por outro lado, temos iconografia inconsistente porque usamos ícones de contorno e sólidos ao mesmo tempo,o tempo, que não é verdadeiro comandado. 19. Elementos de interface de usuário consistentes: Oi, todo mundo. Neste vídeo, vamos falar sobre consistência dos seus elementos. Uma das coisas que você sempre trabalha Quinta, enquanto você está projetando uma interface de usuário é au elemento. Quais são os elementos da UE? Fundos, cartões, campos de texto, campos de texto, controles deslizantes, diálogos, gráficos, passos, tabelas, tabelas, controles de seleção, menus, lanche bares, etc. Como ele concedendo a imagem. Eu escolhi apenas alguns deles para você porque certamente eu não poderia colocá-los todos aqui. No entanto, você vai aprender sobre quase todos eles no capítulo U Elements. 20. Recursos de fonte: Ei, todos neste vídeo que vamos falar sobre o recurso de fonte às vezes escolhem os fundos certos para o seu projeto pode ser complicado e demorado. Então, nesta parte, você vai saber sobre o melhor recurso on-line é obter seus fundos facilmente. O primeiro site é chamado Google Fonts, que é tão famoso e você pode encontrar fundos gratuitos lá. O segundo site é chamado meus telefones e você confinou fontes livres e pagos, ter e por último, mas não menos importante, você pode verificar o site Adibi Fundos que você pode encontrar Foncier pago. Se você estiver tendo problemas para reparar fundos, você também pode usar o tipo off ou par divertido. 21. Recursos de cores: Olá a todos, todos, nesta lição, vamos falar de colarinho. O recurso é agora. É hora de procurar nossas cores para usá-las em nossos projetos. A maior parte do tempo. Encontrar boas cores é um difícil tem para você, I designers, especialmente se você é um iniciante. Aqui estão alguns recurso absolutamente útil é para encontrar cores. colar número um assombra a cor número dois da Adobe, que é tão útil a propósito Número três que não sei como pronunciar, mas acho que são coolers ou colares. Número quatro Web Grady INS, que é outro bom site para encontrar Grady INTs. Se você está procurando por eles, certifique-se de gastar tempo suficiente para encontrar a melhor paleta de cores possível para seus projetos. 22. Recursos de ícones: Ei, pessoal, neste vídeo que vamos falar sobre o recurso ícone é para o seu projeto de design. Como mencionado anteriormente, iconografia é uma parte essencial do processo de design U. I, e é tão importante saber onde você pode encontrar ícones envolventes e um padrão. Aqui estão alguns recursos úteis é para encontrar ícones número um ícone plano, mas você pode encontrar ícone pago ou livre, senhor. Número dois, eu posso encontrá-la, que é outro bom site para encontrar ícones e por último, mas não menos importante, nuclear, que é um aplicativo, e reúne todos os ícones para você em um só lugar. Lembre-se de que você deve usar os ícones, que são fáceis de reconhecer pelos usuários. Então, tome o seu tempo e confira todos os ícones disponíveis que você pode querer usar em seu projeto. 23. Introdução ao esboço: Olá, todos neste vídeo, vamos falar sobre sketch O que é pegar? Esboçado? O Professional Vector Editor, que é projetado para aqueles que querem transformar suas idéias em produtos incríveis. Como mencionei antes, esboços não são adequados para gráficos raster. É um editor vetorial, que é desenvolvido para o design US UX, e é muito bom para este propósito. Se você quiser experimentá-lo, você pode obter uma tentativa, alérgica dele e, em seguida, comprar de licença de um ano por paróquias e obter você vai obter todas as atualizações até o final de sua assinatura. Então, se você é um fã de Adobe para a loja, eu preciso dizer-lhe que não é um bom programa de software para você é UX design. No entanto, é útil para editar suas imagens, a fim de usá-las em seus projetos. 24. Requisitos de esboço: Oi, todo mundo. Neste vídeo, vamos falar sobre requisitos de esboços. Se você quiser usar o Cage como seu dedo do pé projetado, você precisa acessar pelo menos um dos dispositivos Mac OS. Não precisa ser a versão mais recente ou melhor, mas precisa ser capaz de ter Macron's High Sierra ou um novo Michaela's. Se pretender certificar-se de que consegue atualizar as macros periodicamente, é recomendável manter o Mac OS atualizado para atrasar esta versão. Se você tem certeza sobre o seu sistema operacional ou não, eu recomendo que você deve fazer a avaliação de 30 dias piorar antes de comprar qualquer licença. Assim, você pode ter 100% de certeza de que tudo funciona perfeitamente. Se você estiver trabalhando com documentos mais complexos envolvendo várias páginas e centenas de quadros de arte , um Mac poderoso melhorará definitivamente o desempenho 25. Esboço ambiental: Oi, Ron. Nesses vídeos, vamos falar sobre ambientes de desenho. Esboços. Interface é projetado minimamente para a direita na parte superior. Você pode encontrar a barra de ferramentas que contém todas as ferramentas e ações importantes subscrever o espectro de submissão que permite modificar as propriedades da camada selecionada. A lista de camadas é a dor no lado esquerdo e lista todos os poros e camadas artísticas em seu documento. Por último, mas não menos importante, a tela está no meio, onde você verá em seus projetos. Então, como você pode ver, podemos dividir uma interface de esboço em quatro seções principais. Barra de ferramentas que contém todas as ferramentas essenciais que você precisa. Listas de camadas, pelo menos todas as camadas e o inspetor do nosso painel que permite personalizar as propriedades de suas camadas e, por último, tela que mostra todas as suas obras em um só lugar. 26. Noções básicas de camada: Olá, todo mundo. Neste vídeo, vamos falar sobre as noções básicas da camada que mais tarde contém todas as camadas na página atual. Nós, como designers, trabalhamos com camadas o tempo todo, e é tão importante saber como elas funcionam. Como você pode ver, você pode inserir quantas páginas quiser com a ajuda do botão de adição na parte superior . Sempre que você adiciona algo ao seu quadro de arte, ele aparece na forma de uma camada na lista de camadas, não importa o que seja. Por exemplo, o título nesta lista de camadas é uma camada de texto, e você pode reconhecê-la a partir de seu ícone exclusivo para ocultar uma camada sobre a qual você pode passar o mouse . Essa é uma camada específica, e então eu não posso aparecer imediatamente. Ao clicar nisso, você pode ocultar a camada e sábio versa para renomear uma camada. Devemos riacho em seu nome, e você pode mudá-lo facilmente. Uma das coisas mais importantes sobre as camadas é a forma como as organizamos. Eu enviei tantos designers que não se importam em organizar bem suas camadas, e não é bom em tudo. Eis por que, quando você está colaborando com uma equipe de designers. A maneira como você gerencia suas camadas importa muito, porque se for inteiramente outros membros da equipe não podem entender a hierarquia do seu projeto . E para modificar qualquer coisa, eles têm que gastar um tempo considerável. Portanto, certifique-se de nomear suas camadas assim que elas forem criadas e mantê-las tão organizadas quanto possível. O outro ponto importante é a ordem de colocar camadas nas camadas cedo de modo que a camada no topo com aparecem acima das outras camadas em sua placa bunda. 27. Barra de ferramentas: Oi, todo mundo. Neste vídeo, vamos falar mais sobre ferramenta. A barra de ferramentas no esboço contém todas as ferramentas que você precisa para criar seu design incrível . Quando você instala esboço em seu computador, há uma barra de ferramentas padrão, mas a boa notícia é que você pode facilmente personalizá-lo como você deseja personalizar a barra de ferramentas Você pode clicar com o botão direito sobre ele e escolher personalizar barra de ferramentas a partir das opções. . Então vamos dar uma olhada na guerra de ferramentas e ver quais são nossas ferramentas padrão à sua esquerda . Você pode ver o menu pop-up de inserção, que permite desenhar uma nova camada. Os dados aplicarão imagem aleatória para formatar jogadores ou conteúdo de texto para camadas de texto. Cria símbolo permite que você converta o tempo selecionado ou grupo em um símbolo. Vamos falar sobre os símbolos em futuras lições. Os botões de zoom permitem que você veja mais ou menos fora do documento, dependendo do nível de zoom. Os botões de grupo e de grupo permitem que você organize suas listas de camadas, que é tão útil que os próximos cinco Martin, que são controles de edição, permitem que você modifique e manipule sua forma selecionada. Uma máscara e uma escala também se tornam ativas quando a forma é selecionada, e essas pedras permitirão que você recorte camadas em formas e as redimensione respectivamente. O fundo achatado é para aplicar transformações e achatar uma forma em uma única camada e redefinir sua origem. Os próximos ícones de configuração são as operações booleanas, que são usadas para combinar formas. Falaremos sobre eles nas próximas lições. Então temos menu de visualização, que permite que você mostre e oculte ajudas visuais que podem ser usados trabalhos selvagens e projetos complexos . Por exemplo, ele pode mostrar grãos, layouts, réguas, etc. O botão de visualização é para o Previ em sua placa de arco em uma nova janela em Dispositivos IOS ou Web. O ícone da nuvem é para compartilhar seu design com seus amigos, clientes ou colegas por meio da nuvem de esboços. Por último, mas não menos importante, o fundo de exportação que é você exportar seus ativos. Alternativamente, você pode usar cartões curtos para escolher o dedo direito, e isso pode realmente ajudá-lo a acelerar seu processo de design. Você pode encontrar uma lista dos atalhos mais importantes no final deste módulo. 28. Formas: Oi, todo mundo. Nestes vídeos, vamos falar de formas. As formas são o tipo mais comum de camadas em seu design. Há uma grande diversidade de formas padrão fornecidas com esboço, como estrelas, retângulos, oles deitado etc. Para adicionar uma nova vergonha ao seu quadro de arte, escolha uma ferramenta de forma no menu pop-up de inserção e, em seguida, crie a forma, clique e arraste em qualquer lugar da tela para inserir sua forma enquanto você está arrastando para inserir o esboço de forma, demonstrará o tamanho a forma inserida se tornará. Você também pode encontrar mais detalhes sobre suas formas no inspetor, e você pode alterar as variáveis conforme cada um. Algumas formas têm opções extras, como a capacidade de adicionar mais sinais a um polígono ao redor dos cantos. 29. Como editar formas: Oi, todos no vídeo, e vamos falar sobre edição de formas. Às vezes você precisa adicionar. Ele molda de uma maneira que você quer, e é uma coisa muito simples de fazer. Sketch permite que você edite alterações de forma fácil e conveniente. Primeiro de tudo, que sapatos retângulo a partir do menu público inserir. Em segundo lugar, precisamos desenhá-lo na tela, e depois disso podemos clicar duas vezes sobre ele ou pressionar a tecla Enter para começar a editar. Uma vez que estamos em Edit Moon, veremos um ponto de círculo em cada um dos cantos. Agora vamos clicar e arrastar em qualquer um desses pontos para mudar sua posição, e vamos ver como a forma muda. Também podemos adicionar pontos adicionais para moldar passando o mouse sobre o caminho entre dois pontos e clicando para inserir. Para excluir um ponto, clique em. O selecionado impressionou a tecla de espaço traseiro no teclado. O caminho entre os pontos pode aparecer como linhas de força ou cuidados. Depende do tipo de ponto que os está conectando. Se você clicar duas vezes e nomear em um retângulo, o tipo de ponto mudará imediatamente para criar um cuidado de caminho fazendo isso. Você verá duas alças em cada lado do ponto que controlam o caractere fora do caminho. Estes são chamados de pontos de controle de mão, a fim de entender como eles funcionam. Pense neles como se estivessem puxando o caminho em direção a si mesmos. Há um bom atalho para mudar o tipo de ponto e em seus números escalonantes entre 1 4 em seu teclado. 30. operações booleanas: Oi, todo mundo. Neste vídeo, vamos falar de operações booleanas. Às vezes você procura por uma forma que não existe em um esboço. Nesse caso, você precisa criar sua própria forma. Embora você possa criar uma forma usando o dedo do vetor, é muito mais fácil criar uma forma combinando formas básicas juntas. Por exemplo, pense em uma nuvem que está em torno do retângulo combinado com um círculo. Você não falou sobre isso antes? Existem inúmeras formas que podemos dividir em formas básicas. Agora o que? Veja como funcionam as operações booleanas? Temos quatro operações booleanas diferentes. Sindicato número um. O resultado é um vetor que é a soma de ambos os vetores. Número de áreas a subtrair. O resultado é um vetor onde a área fora da forma superior é removida do abaixo dele, Número três se cruzam. O resultado é um vetor que consiste nas partes onde as barbas originais se sobrepõem e, por último mas não menos importante, diferença. É o inverso de uma operação Intersect 31. Texto: Oi, todo mundo. Neste vídeo, nós vamos estar falando sobre o texto que você pode adicionar takes escolhendo o têxtil no menu de inserção na barra de ferramentas ou pressione T. Então o ponteiro vai mudar para o texto em ícone de ferramenta, e finalmente, você pode clicar em qualquer lugar na tela para inserir sua camada de texto. Nesse ponto, como você pode ver aqui, uma nova camada de texto será inserida com o tipo de algo já selecionado, pronto para ser substituído. Se você quiser criar uma caixa de texto, você pode clicar e beber, e então você terá um livro de tamanho fixo. Então, neste caso, quando o texto começa a mentir para caber dentro da caixa, ele irá criar uma nova linha. Ao contrário do texto normal, o que aumenta a sua com dois pés o conteúdo. Quando você seleciona os tanques e clica no item do menu de texto, o esboço limitou uma série de opções disponíveis. Você pode mudar o tempo face Tallis olhos negrito ou em sua linha, sua camada fiscal e muito mais. Para modificações mais complexas. Você também pode usar a linha de base Karen Ligature na Central 32. Inspector de texto: Oi, todo mundo. Neste vídeo, vamos falar sobre o Inspetor Tributário um dos primeiros anos. Selecione o texto. Você notará que o inspetor mudou para mostrar todas as propriedades que se aplicam ao texto além do que foi mencionado anteriormente também pode modificar a maioria deles, incluindo tipo de letra, alinhamento do tamanho da fonte, etc, Seção direita Inspetor. No entanto, se você quiser usar marcadores, você deve usar o menu de tanques na parte superior. Uma das coisas mais importantes que você deve prestar atenção ao trabalhar com tanques é o valor da linha que basicamente ajusta o coração da linha. Se você não tem certeza de quanto deve ser a altura da sua linha, não se preocupe. Há uma boa fórmula que você pode usar para obter uma altura de linha apropriada. A fórmula é divertida. Tamanho multiplicar por 1,5. Por exemplo, se o tamanho da fonte for 20 pontos, então o valor da linha deve ser 30 porque 20 multiplicar por 1.5 É ik em 2 30 33. Estilo de texto: Oi, todo mundo. Neste vídeo, vamos estar falando de têxtil quando você está trabalhando em um projeto complexo que contém um monte de camadas de impostos, muitas dessas camadas contêm as mesmas propriedades takes. Assim, um esboço permite que você crie um têxtil e se aplique a essas camadas de tanques. Você pode se perguntar, qual é o ponto de usar os estilos de tanques? Bem, deixe-me explicar para você com um exemplo. Suponha que você tenha trabalhado em um site por um mês e você tenha usado um financiamento específico do seu projeto. Então você receberia um telefonema de seus clientes, e ele ou ela pediria que você trocasse os fundos de todos amigos, graças a outra coisa. Então, neste caso, se você tiver usado um têxtil para o seu corpo de texto, você poderia atualizá-lo uma vez, e as alterações aplicariam todo o projeto. Isso não é bonito? Legal? Isso é incrível. Então, a fim de criar um novo têxtil, podemos facilmente clicar no texto que lê Nenhum espectro indígena têxtil e escolher criar novo têxtil a partir dos muitos. E sempre que vamos usar esse tempo de texto, podemos ir para a seção de aparência no inspetor e mudar o dedo do pé sem têxtil. Nosso lado de camadas de texto 34. Imagens e Bitmaps: Olá, todo mundo. Estes vídeos. Vamos falar de imagens e mapas de batidas como esboços. Um editor vetorial. Você pode estar se perguntando como você pode editar suas imagens sem saltar entre diferentes ferramentas de design. Bem, não há nada com que se preocupar porque o esboço permite que você use os recursos mais comuns de edição de mapa de batida para tornar sua vida ainda mais fácil para começar a editar sua imagem, você precisa selecioná-la clicando duas vezes sobre ela. O inspetor mostrará as ferramentas de seleção. Primeiro de tudo, você precisa selecionar uma área no campus e, em seguida, aumentar a ferramenta desejada. Aqui temos duas músicas diferentes Seleção, que seleciona uma área retangular na imagem e varinha mágica. Com esta ferramenta, você pode clicar e beber em qualquer lugar da imagem para selecionar uma área. Uma vez que você tenha selecionado uma área de sua imagem, você pode ou cartões ou copiar a seleção e usá-lo para uma nova camada de mapa de batida ou usar uma das opções no inspetor, por exemplo, aqui temos inverter corte e sentir, mas usando inverter a área que não foi selecionada será selecionada agora e quer Ursa ou usando recorte. Ele culta, a camada de dedo Onley incluem a área selecionada e usando sensação permite que você sinta a área de seleção com cores, e depois disso precisamos clicar em terminar a edição, e isso é tudo. 35. Estilização: preenchimento: Todos neste vídeo que vamos falar sentem que uma das dores mais importantes doesboço é o inspetor. Todos neste vídeo que vamos falar sentem que uma das dores mais importantes do Aqui. Você pode encontrar uma variedade de opções e ferramentas que lhe permitirão aplicar efeitos como sombras alterar a cor de uma camada etc. Nessas partes, vamos aprender como usar as sensações em seu design para usar. Sente-se deve riacho no botão adicionar. No título da seção Campo, você pode aplicar uma variedade de campos diferentes camadas de dedo do pé, incluindo Grady Ins de cor sólida, uma sensação de imagem. Além disso, você pode adicionar quantos campos quiser à sua camada, que serão empilhados um sobre o outro de baixo para cima. As opções de rivalidade da esquerda direita são sólida sensação linear, Grady int radial, Grady int, Grady int angular int e, por último, campo de imagem. Nas próximas lições, vamos mergulhar em cada um deles especificamente 36. Estilização: Borders: Olá, Ruin. Neste vídeo, vamos falar de fronteiras. Todas as camadas no esboço podem conter quantas bordas quiser, exceto vizinhos de texto. Você pode modificar suas cores de espessura, etcetera, exatamente como se sente. Para adicionar uma borda à sua camada, você deve clicar no botão adicionar no título da seção de borda. Não só você pode personalizar sua aparência, como cores, espessura, etc, mas também você pode escolher como eles devem ser posicionados. A posição da borda pode ser modificada em formas fechadas, sendo colocada no centro interno ou fora do contorno das formas. Além disso, existem algumas opções de borda que você pode usar, como extremidades e junções, que permitem que você controle como a borda deve terminar e como ela deve unir os pontos de junção. Você também pode usar pontas de seta, mas usando as opções de início e fim e traço noves para usar as opções de traço e espaço. 37. Estilização: sombras: Oi, todo mundo. Neste vídeo, vamos falar de sombras. Hoje em dia, você pode ver sombras em quase todos os tipos de design. No entanto, saber como usar sombras apropriadamente é tão importante. Existem dois tipos de sombras na sombra de esboço e na sombra interna. Eles se comportam da mesma maneira. A única diferença é que a sombra se espalhará fora do barbear que se aplica a, No entanto, em sua sombra vai lançar dentro da forma. Você pode ajustar sombras como desejar, alterando seu valor ex e por que e modificando também a Blair e a quantidade de spread. Sem mencionar que você pode mudar a cor das sombras. Faça o que quiser. Gostaria de lhe dar algumas dicas sobre como usar sombras. Em primeiro lugar, mantenham a capacidade de suas sombras o mais baixo possível, porque caso contrário não parece certo, e parece tão exagerado. Em segundo lugar, não use sombras escuras para colorir objetos. Tente usar o colarinho de objetos como o colarinho de sombra e diminua sua capacidade. Porque no mundo real, por exemplo, uma maçã vermelha não tem sombra escura. Tem uma leve sombra vermelha. Você aprende a usar sombras corretamente em futuras lições 38. Estilização: blurs: Olá, pessoal, neste vídeo, vamos falar da Blair em geral, há quatro tipos de efeitos Blair que você pode aplicar duas camadas em um esboço. Podemos escolher entre eles clicando na seção de título no Inspetor e escolhendo a partir do menu pop-up número um montador de gás. É um tipo comum de Blair que vai exatamente Blair em todas as direções. Borrão de movimento número dois. Ele blares uma camada Onley em uma direção, e dá ao usuário a ilusão de movimento número três zoom Blur. Ele fica claro a partir de um ponto específico para fora, e por último, borrão de fundo. Ele destaca qualquer conteúdo que aparece atrás de uma camada. Ao contrário de outros tipos de Migron de Blair, Blair exige que você modifique a capacidade de seus campos para que o defeito seja visto. 39. Estilização: gradientes: Olá, todos neste vídeo, vamos falar sobre as notas. Ian's Great estalagens são tão populares hoje em dia porque ajuda os designers a atrair a atenção dos usuários . Como mencionei na seção de campo, você pode usar três tipos diferentes de radiância, rádio linear e grau angular. Do Ian. No entanto, o Grady Int mais comum é o linear Grady int, e você pode encontrar esses tipos de radiante em quase 90% dos projetos de uma forma ou de outra. Uma coisa importante sobre o brilho que você precisa saber é que você não pode combinar nenhuma cor aleatória para fazer um Grady INT. Por exemplo, você pode usar cores análogas da cor vontade, a fim de criar um bom radiante. Alternativamente, você pode se inspirar pela natureza. Por exemplo, é possível obter suas cores da foto de uma paisagem. Para fazer isso, você pode usar ferramentas on-line para acelerar o processo. Vou te dar algumas dicas sobre usar o brilho número um. Não use o Grady ins em seu número de design para verificar novamente o contraste do seu conteúdo porque às vezes você está usando um grande e bonito Grady int. No entanto, não há contraste suficiente entre seu conteúdo e elementos, então certifique-se de verificar novamente seus elementos e também suas cores de conteúdo para ver se o seu legível ou não. 40. Estilizar: estilo de camada compartilhada: Oi, todo mundo. Neste vídeo, vamos estar falando sobre camadas compartilhadas lado. Você pode criar um aplicar uma camada lateral toe qualquer camada, assim como os tempos de texto. Ele pode ajudá-lo a salvar um conjunto de elementos estilísticos, que podem reutilizá-los em qualquer uma de suas camadas no projeto em que você está trabalhando, assim como tamanho do texto, tamanho camadas permitem que você mantenha a aparência de suas camadas, tanto consistente e atualizado. Se você fizer alterações em sua aparência para criar um lado da camada, clique no texto que não lê nenhum estilo de camada no Inspetor e escolha. Crie a pedra da camada de muitos. Então você precisa escolher um nome específico, e isso é tudo. Você também pode adicionar um site de camada recente de estilo de camada e também desanexar das atualizações de estilo de camada de atualização do lado da camada nas camadas usando as mesmas camadas. sinal próximo recente remove as alterações feitas no lado da camada e, finalmente, separado das camadas. Sign mantém as alterações feitas na camada de morte, mas remove as camadas picadas atributos da camada 41. MÁSCARA: Oi, todo mundo. Neste vídeo, vamos falar sobre mascarar máscaras em um esboço, que você selecione e mostre partes de outras camadas. Por exemplo, você pode mascarar uma camada de imagem para circular, e se você der à imagem uma forma de círculo, há muitas maneiras de usar máscaras em um esboço. No entanto, o mais conveniente é selecionar seus jogadores de forma e clicar no botão de máscara na barra de ferramentas. Lembre-se que a ordem de colocar suas camadas é tão importante vento trabalhando com máscaras. Por exemplo, se você selecionar três jogadores de forma clicando no botão de máscara, as duas camadas acima da última serão cortadas para a terceira camada. Outra maneira de usar máscaras é dar-lhe um Grady int, que é chamado All From Ask para fazer isso. Podemos ir para o menu de camada, mascarar um modo de máscara e, em seguida, a partir de perguntar do Manu 42. Símbolos: Oi, todo mundo. Nestes vídeos, vamos falar de símbolos. Símbolos é um ótimo com um esboço que permite que você reutilize elementos facilmente em nossas portas e páginas ou até mesmo vários documentos. Podemos dividir símbolos em duas partes. Um mestre, que leva a aparência de um quadro de arte e uma instância, que é uma representação achatada fora do mestre. Na verdade, uma ocorrência de símbolo é uma única camada que espelha o conteúdo de seu mestre. Você pode reconhecê-lo com a ajuda de um ícone roxo. Está afundando flechas. Podemos criar um símbolo simplesmente selecionando um objeto e clicando no botão criar símbolo na barra de ferramentas. Em seguida, você será solicitado a escolher um nome para o seu símbolo e no final pressione ok, Você pode encontrar seus símbolos na página de símbolos, e você pode personalizar cada instância com substituições. Você pode encontrar a seção de sobregravação no Inspetor 43. A tela: Oi, todo mundo. Nesses vídeos, vamos falar sobre esboços de tela. A tela é infinita em tamanho. É basicamente onde suas guerras braço será lugar e você pode facilmente navegar ao redor usando a vontade de rolagem em seu mouse ou um track pad, você pode rolar em qualquer direção. Além disso, você pode segurar uma barra de espaço e clicar e beber a tela para mover ao redor. Se não houver nenhum objeto selecionado, você também pode usar as teclas de seta para deslocar a tela de desenho. Há momentos em que você deseja ampliar e diminuir o zoom para ver mais detalhes ou todo o campus, respectivamente. Para fazer isso, você pode usar o item de zoom na barra de ferramentas opcionalmente. Você pode segurar a tecla de comando e usar sua vontade de rolagem em suas bocas. O nível máximo de zoom é 256,000% e o mínimo é 1% 44. Plug-ins: Olá, todos. Nesses vídeos, vamos falar sobre plugins. As plantações são uma parte importante de qualquer ferramenta de design. Você pode estender a funcionalidade de esboços instalando plugins. Todos os plugins foram desenvolvidos por desenvolvedores de terceiros e podem ser baixados gratuitamente ou paróquias do desenvolvedor. Você pode encontrar os plugins mais recentes na página Extensões do site de esboço. Uma vez que você está conectando está instalado, você pode acessá-lo enquanto estiver no menu plug INS na barra de menus. Às vezes, após uma atualização, os plugins podem se tornar incompatíveis com o esboço. Nesse caso, seu esboço me falha e você pode corrigi-lo desativando plugins. Para fazer isso, podemos manter pressionada a tecla shift durante o tempo de lançamento para desativar todos os plugins que você instalou. Se você escolher gerenciar plugings no menu Plug Ins, você pode acessar o painel de preferências Plug-ins onde você pode gerenciar seus plugins. 45. Como exportar: Oi, todo mundo. Nesses vídeos, vamos falar sobre exportação. Quando você terminar seu processo de design, provavelmente você vai querer exportar partes de sua criação ou até mesmo todas elas em um esboço. Podemos facilmente exportar seu design em nenhum momento para ver todos os seus achados exportáveis pode clicar no botão de exportação na guerra de ferramentas e, em seguida, marcar o que você deseja exportar para marcar qualquer grupo de camadas ou arte para exportável no esboço, certifique-se de que é selecionado e clique na parte inferior tornar exportável na parte inferior do inspetor. Após essa exibição aparecerá e você poderá modificar e definir as configurações de exportação, e essas economias serão aplicadas quando a camada for exportada. Se você clicar no botão adicionar, uma vez contra dinheiro irá adicionar outra escala à sua exportação. Se você tiver mais de uma escala de exportação definida, então você precisa de pelo menos um prefixo ou sufixo depender do início ou do fim, respectivamente, dos arquivos exportados. Nome para distingui-los. Normalmente, os objetos exportados como uma escala de dois X terão a serra fixa em dois ovos, pois isso atende às convenções de nomenclatura exigidas pela Apple ao projetar para os sistemas operacionais. Se você está projetando para Android, no entanto, para ovos é representado pelo prefixo Ex borda DP I. Podemos escolher o seu designer encontrar formato clicando no formato. A exportação de botões não se limita a arquivos. Você também pode exportar parte do seu design como código. Você pode facilmente copiar os atributos CSS e o código SVG selecionando qualquer número de elementos na tela e, em seguida, mantenha pressionada a tecla control e clique e escolha Copiar atributos CSS ou copiar revestimento SVG. É uma característica incrível para Web designers. 46. Introdução a elementos de UI: Oi, todo mundo. Bem-vindo de volta a outra seção do curso nesta seção. Nós vamos estar falando sobre você elementos que são tão importantes quando você está projetando uma interface de usuário. Nos próximos anos de vídeos, vamos falar sobre contas de impostos, fundos, controles deslizantes, cartões, cartões, diálogos ou até mesmo steppers e gráficos. Então, se você está confuso sobre todos esses elementos, eu sugiro que você assista esta seção. Então vejo você na próxima série de vídeos. 47. Campos de texto: Ei, todo mundo vai voltar para outro vídeo desta seção. Neste vídeo, nós vamos estar falando de campos de texto, Como você deve saber, leva sente-se você elementos que permitem aos usuários entrar em ataques em um u I. Eles geralmente aparecem em diálogos e formas. Quase todos os adaptadores móveis e também sites usam pelo menos um tipo de campos de texto, por exemplo. Você pode usá-los para inserir datas, nomes , hora, etc. Como designer U I, você precisa saber qual é a anatomia de um campo de texto como descrito na imagem. Você pode encontrar diferentes tipos de imposto sente em diferentes plataformas, por isso é recomendável saber sobre o padrão que seus elementos que um sistema operacional específico usa. Se você olhar para a imagem à direita, você pode ver que temos a anatomia fora de um campo de texto. Como pode ver, temos rótulo. Temos o texto de entrada. Temos o ícone à direita, que é opcional. Como pode ver, é o número três. Além disso, temos indicador de ativação. Às vezes você pode usar ícone de entrada de voz ou até mesmo um ícone suspenso, e no final você pode ver que nós projetamos diferentes Estados fora campo de ataques. Por exemplo, se o usuário inserir a senha incorretamente, a cor dos campos de texto pode mudar para outra coisa, por exemplo, vermelho. 48. Botões: Ei, todo mundo neste vídeo, vamos falar sobre fundo em fundo de design permitir que os usuários tomem ações. Então, um de nossos usuários precisa fazer alguma coisa. Bottoms vindo para jogar. Eu acho que agora você entende como é importante saber sobre design de fundo. Quando você estiver projetando um botão, certifique-se de prestar atenção aos pontos de queda. Os estados número um projetam todos os estados fora da parte inferior, como ativo , inativo , tocado, pairar, etc. hierarquia número dois sabe sobre a hierarquia de seus botões, por exemplo, se é alta ênfase, ênfase média ou ênfase legal. Número três posicionamentos vários tipos de botões podem ser utilizados para representar vários níveis de ênfase . Número quatro leva botões de texto de botão são normalmente usados para ações menos pronunciadas, por exemplo, em diálogos e cartões e, por último, mas não menos importante, botões de contraste devem ter contraste suficiente para enfatizar a importância funcionalidade. Então, se você olhar para a imagem à direita, você pode ver que nós temos diferentes estados fora do fundo. Por exemplo, temos ativo. Como você pode ver, tem uma cor afiada e a capacidade é de 100%. Por outro lado, temos inativo para mostrar que este botão está desativado por enquanto, que é cinza aqui, e também temos tocado. Então, quando o usuário toca nesse botão, ele muda para essa cor específica. Como você pode ver, temos que é azul claro, e no final, como um conceber tem para diferentes botões, temos botão de texto. Além disso, temos esboçado botão e, em seguida, conter botão e também botão de alternância, e você precisa usá-los com cuidado quando você está projetando uma interface de usuário. Porque é tão importante não a expectativa dos usuários e também em termos de experiência do usuário , é melhor usar o tipo correto de fundo em seu design. 49. Sliders: Ei, todos neste vídeo, vamos falar sobre controles deslizantes em design. Os controles deslizantes permitem que os usuários façam seleções a partir de um intervalo de valores. Eles são ideais para ajustar configurações como brilho, volume, etc. Os controles deslizantes podem ter ícones em ambos os lados da barra. Quando você estiver projetando uma cidra, certifique-se de prestar atenção às seguintes coisas. Os estados número um projetam todos os estados fora do Steiger, como habilitar desabilitar, tocar , passar o mouse , etc, assim como botões. Número dois. Ajustar controles deslizantes só deve ser usado para escolher seleções de um intervalo de valores. Rápidez número quatro. Os controles deslizantes devem reagir imediatamente, portanto, as mudanças devem ser instantâneas. E por último, mas não menos importante, os Sliders de acessibilidade devem fornecer toda a gama de opções disponíveis para o usuário para selecionar. Se você olhar para a imagem no lado direito, você pode ver que temos dois controles deslizantes diferentes. O 1º 1 é controle deslizante contínuo, e como você pode ver no tipo de Snyder, você pode modificá-lo continuamente e sem qualquer interrupção. Por outro lado, no segundo tipo de controles deslizantes, que é controle deslizante discreto, você não pode modificá-lo sem qualquer interrupção. Existem alguns pontos fixos que o usuário pode escolher 50. Dicas de ferramentas: Ei, pessoal, neste vídeo, vamos estar falando sobre dicas de ferramentas em design Peeps ferramenta são para exibir texto informativo quando os usuários passam o mouse sobre, focam ou tocam em um elemento. Quando você estiver projetando uma dica de ferramenta, certifique-se de prestar atenção às coisas que caem. Concisão número um Dicas de ferramenta Deve Onley exibir um breve texto? Não adicione uma imagem ou informações detalhadas. Número duas dicas de ferramenta de emparelhamento são sempre emparelhadas nas proximidades, o elemento com o qual estão associados ID e, por último, mas não menos importante, dicas de ferramenta transitórias aparecem ao passar o mouse, foco ou toque e desaparecem após uma curta duração. Eles recomendaram facilidade de tempo 1,5 segundos. Como você pode ver no lado direito, temos uma dica de ferramenta, que mostra texto informativo. Temos um atalho para negrito, e também temos informações adicionais aqui, seguro para confirmar botão, então certifique-se de usá-los corretamente. 51. Controles de seleção: Olá, pessoal, neste vídeo, vamos falar de controlos de selecção. Os controles de seleção permitem que os usuários selecionem facilmente entre diferentes opções. É útil para declarar preferências como configurações. Ao projetar um controle de seleção, certifique-se de prestar atenção aos pontos a seguir. Familiaridade número um. Controles de seleção foram usados em você. Eu projeto por um longo tempo e deve ser utilizado como esperado. Os controles de seleção de eficiência número dois permitem que os usuários comparem facilmente duas ou mais opções. E por último, mas não menos importante, controles de seleção digitalizáveis devem ser exibidos de uma forma que os usuários possam reconhecê-los rapidamente. Os itens selecionados devem ser visualmente distinguíveis de um item selecionado. Como você pode ver no lado direito da tela, temos três controles de seleção diferentes. A 1ª 1 é discursos. É útil para direcionar uma única opção ativada ou desativada, e é tão popular. O próximo mês são botões de rádio. Eles são úteis para selecionar uma única opção de um mínimo, e a última é verificar peças, e é útil para selecionar itens nascidos ou múltiplos de um mínimo, então certifique-se de usá-los da maneira certa. 52. chips: Pessoal, Pessoal, neste vídeo, vamos falar de batatas fritas. chips permitem que os usuários façam seleções, acionem ações. Insira informações, etc. Ao contrário dos botões, que devem ser uma contração consistente, chips devem aparecer dinamicamente como um grupo de vários elementos interativos. Quando você estiver projetando um chip, certifique-se de prestar atenção às seguintes coisas Número um estados. Assim como fundos e controles deslizantes. Você precisa projetar todos os estados de seus chips, como em capaz desativar tocado, pairar etcetera. chips de relevância número dois devem ter uma relação útil com o conteúdo ou tarefa que representam. E os últimos chips de compacidade são elementos compactos que representam informações distintas . Se você olhar para a imagem no lado direito, você pode ver que temos chips diferentes. Alguns deles têm ícones ou até mesmo uma imagem. Por outro lado, alguns deles só têm um texto, então certifique-se de usá-los em seu design de urina com cuidado. 53. Cartões: Ei, pessoal, esse vídeo, vamos falar sobre cartões em carros de design de interface de usuário são contêineres que exibem conteúdo e ações em um único assunto. Eles devem ser fáceis de digitalizar, e elementos como imagens ou textos devem ser colocados sobre eles de uma forma que certamente indica a hierarquia. Quando você estiver projetando cartões, certifique-se de prestar atenção às seguintes coisas. Número um indivíduo. Um cartão não pode ser dividido em várias cartas. Você não deve casar um cartão com outro número para a independência. Um cartão não precisa confiar em seus elementos circundantes. Pode ficar sozinho e por último, mas não menos importante, componentes. Um cartão pode opcionalmente ter mídia alcance, como imagens ou vídeos, ícones de Tex Barton e unhas de filme. Hoje em dia, maioria dos designers usa cartões lá. Você eu desenho, então se você quiser usá-los também, certifique-se de usá-los com cuidado 54. Diálogos: Oi, todo mundo. Neste vídeo, vamos falar de diálogos. diálogos informam os usuários sobre informações críticas ou até mesmo tarefas. Eles também pedem aos usuários que tomem uma decisão ou escolham entre diferentes opções. Por exemplo, diálogos podem ser usados para pedir permissão ou até mesmo escolher entre uma variedade de variáveis diferentes em um Snyder e muito mais Quando você está projetando diálogos, certifique-se de prestar atenção às seguintes coisas. Hierarquia número um, um diálogo tem a hierarquia mais alta, e ele nega o uso do APP até que o usuário tanques uma ação de dialeto número dois visibilidade morrer diferente deve ser facilmente reconhecível. Então eu recomendo adicionar uma sobreposição escura para a vista e colocar o diálogo no topo fora Isso é o número três. diálogo simples deve transmitir a mensagem de uma forma compreensível e clara. E por fim, eu recomendo usar botões lado a lado em um diálogo, como você pode ver na imagem 55. Listas: Pessoal, Pessoal, neste vídeo vamos falar de listas. Menos são um grupo contínuo de imagens ou textos. Eles são compostos de itens, incluindo reações primárias e segundas, que são representados por ícones em textos. Ao criar listas, certifique-se de prestar atenção aos seguintes pontos. A consistência número um deve apresentar ícones, impostos e ações em um formato consistente. A polícia de ação número dois mostra o conteúdo de uma forma que facilita reconhecer um item específico na coleção e agir sobre ele. E por último, mas não menos importante, digitalizável pelo menos deve ser classificado de forma lógica que facilitem a digitalização do conteúdo. Como você pode ver no lado direito da tela, temos diferentes tipos de listas. Por exemplo, aqui temos seus contatos. Como você pode ver, ele é composto de imagens e impostos, e também tem um ícone 56. Tabelas: Ei, todos neste vídeo, vamos falar de mesas. Tabelas são contêineres que mostram aos usuários registros diferentes, como produtos , preços , datas de status, etc por dia. A tabela contém à frente uma linha na parte superior, pelo menos nomes Colin, seguido de regras para mais tarde. Eles geralmente são de rolagem de ervas e fácil de assustar. Então, se você precisar preencher alguns dados, que são doble dolorido e seguir o mesmo padrão, você pode usar tabelas quando estiver projetando tabelas. Certifique-se de prestar atenção às seguintes coisas. As linhas expansíveis número um na tabela podem ser expansíveis para permitir que o usuário avalie informações adicionais sem perder seu contexto. Número dois paginação funciona apresentando um conjunto de números, entrevista com a capacidade de navegar para outro conjunto e, por último, corrigir cabeçalhos. Corrigir o cabeçalho da linha enquanto um usuário percorre uma tabela ajuda o usuário a saber sobre o nome da coluna 57. Navegação: Pessoal, Pessoal, neste vídeo, vamos falar sobre navegação. Navegação é o ato de se mover entre telas de uma soneca para concluir tarefas. Por exemplo, você pode navegar da página de exploração de uma soneca para a página de perfil. Existem diferentes tipos de navegação. Lateral número um. Refere-se à movimentação entre telas no mesmo nível de hierarquia. O principal componente de navegação abside deve fornecer acesso a todos os destinos no nível superior de sua hierarquia. Número para encaminhar. Refere-se a mover-se entre telas em níveis consecutivos na hierarquia e por último, mas não menos importante, inverter. Refere-se a retroceder através de telas, hierarquicamente dentro de uma soneca ou karna logicamente dentro de um aplicativo ou através de APS diferentes . 58. Menus: Oi, todo mundo. Nesses vídeos, vamos estar falando sobre menus no design da interface do usuário. Um menu exibe pelo menos opções em uma superfície provisória. Ele aparece quando os usuários interagem com uma ação de botão ou outros tipos de controles. menus permitem que os usuários façam uma seleção a partir de várias opções em controles de seleção semelhantes. Menus são menos extraordinários e ocupam menos espaço. Quando você estiver projetando menus, certifique-se de prestar atenção aos seguintes pontos. Número um escaneável. Muitas opções devem ser fáceis de assustar. Número dois menus rápidos deve ser fácil de abrir, fechar e interagir, e por último, mas não menos importante, menus de posicionamento aparecem na frente de todos os outros seus elementos. 59. Gráficos: Olá, pessoal, neste vídeo, vamos falar de gráficos. Gráficos ajudam os usuários a comparar valores individualizados afastado Quando se trata de comparar muitos valores, é muito mais fácil olhar para gráficos números de área direita e concordou. Quando você estiver projetando gráficos, certifique-se de prestar atenção às seguintes coisas. Número um. Visibilidade. Visibilidade de um gráfico. É tão importante porque às vezes você tem um gráfico com detalhes muito pequenos. Consistência número dois. Coloque seus gráficos em um cartão para manter seu design limpo e consistente. Por último, margens. Certifique-se de que há espaço em branco suficiente entre seus gráficos e outros elementos posteriormente . Nessas pontuações, você aprenderá como criar gráficos e como usá-los em seus projetos. 60. Steppers: Oi, todo mundo. Nesses vídeos, vamos falar de steppers. Os sippers mostram o progresso através de uma sequência de passos lógicos e numerados. Às vezes você pode usá-los para navegação. As ceias podem exibir uma mensagem de feedback temporária após a etapa ser salva. O uso de steppers pode ajudar os usuários a evitar perder seu foco quando eles precisam sentir formulários ou tomar alguma ação. Quando você estiver projetando steppers, certifique-se de prestar atenção às seguintes coisas. As seções número um não incorporam steppers em outros steppers ou você tem vários steppers em uma página. Número dois tipos. Geralmente, existem dois tipos de etapas. Etapas editoriais e etapas não comestíveis. Temos steppers horizontais em steppers verticais e, por último, feedback. Opcionalmente, você pode projetar feedback transitório para mostrar aos usuários a progressão. Você só deve usar feedback sempre que houver uma visualização longa latente entre as etapas. 61. Snackbar: Oi, todo mundo. Nesses vídeos, vamos falar de lanchonetes. As barras de lanches fornecem feedback conciso sobre uma operação através de uma mensagem na parte inferior da tela. Eles devem conter uma única linha de texto diretamente relacionada à operação realizada. Eles podem conter uma garrafa também. Ao projetar barras empilhadas, certifique-se de prestar atenção aos seguintes pontos. Número um. Deve ser breve. Snack bar só deve exibir informações breves sobre uma operação e não informações detalhadas . Número dois lanches transitórios automaticamente tempo fora da tela para que eles devem desaparecer rapidamente e por último, mas não menos importante, hierarquia. Se a ação for importante o suficiente para pregar o uso do APP, você pode usar diálogos em vez de lanchonetes nas lanchonetes. Use apenas um botão se for necessário e não mais. Como você pode ver no lado direito da tela, temos dois exemplos diferentes. O primeiro grupo de lanchonetes são projetados perfeitamente porque não tem mais de um botão e os Connors que foram usados ou grandes. No entanto, por outro lado, o segundo grupo fora de nossas lanchonetes tem dois botões, o que não é ideal para lanchonetes, e também usou um ícone. Além do texto 62. O que é o wireframing?: Olá, todos neste vídeo, vamos falar com ele através de enquadramento. O enquadramento violento é uma maneira de projetar um APP ou serviços de site na estrutura ou nível. Um quadro de arame é geralmente usado para layout de conteúdo e funcionalidades. Em uma página, que leva em conta as necessidades e experiências do usuário, podemos considerar o enquadramento de um esqueleto gráfico semelhante ao modelo de um carro. O quadro viral determina os detalhes de todo o projeto na fase inicial como adescrição do projeto,A descrição do projeto, maioria dos iniciantes acha que o enquadramento de fio e prototipagem são de alguma forma os mesmos. No entanto, não são. Um quadro de arame é um design de baixa fidelidade, portanto não ilustra a aparência final fora da interface do usuário. Por outro lado, um protótipo é um design de alta fidelidade, e sua prototipagem dinâmica e interativa parece quase com o produto final. 63. Flow de usuário: Oi, todo mundo. Nesses vídeos, vamos falar sobre o fluxo de usuários. O fluxo de usuário é um caminho percorrido pelo usuário protótipo em um aplicativo ou site. Para concluir uma tarefa. O fluxo do usuário os direciona de seu ponto de entrada por meio de fases definidas para um resultado bem-sucedido e ação final, como enviar uma mensagem ou comprar um item. Deixe-me dar-lhe um exemplo de um fluxo de usuário muito simplificado para um aplicativo de comércio e. O usuário inicia a partir da home page a partir da home page. O usuário clica em uma página de categoria. Em seguida, na página da categoria, o usuário clica em um produto e, em seguida, na página do produto, o usuário adiciona um item ao cartão e, em seguida, do carrinho de compras para usar seus cheques. E depois disso, a partir da página de check-out, o usuário completa o pagamento e, no final, o usuário pode obter o seu cabelo ou recebido. Então é assim que um fluxo de usuário se parece, e é muito importante para cada projeto ter pelo menos um fluxo de usuário simplificador 64. Protótipos interativos: Oi, todo mundo. Nesses vídeos, vamos falar sobre protótipo interativo. Atualmente, prototipagem está desempenhando um papel cada vez mais vital no processo de design. Então você, como um jovem designer de UX, precisa saber como fazer um protótipo de alta fidelidade do seu projeto de forma que ele possa transmitir claramente a mensagem do seu design e também a interação exata que você deseja alcançar. Não só a prototipagem pode ajudá-lo como designer a mostrar seu trabalho, mas também pode ajudar os desenvolvedores a saber como seus projetos devem ser convertidos em código. Aqui estão algumas ferramentas úteis que você pode usar para esboços interativos de prototipagem. Ele pode ser usado para prototipagem interativa simples. Estúdio InVision Ele pode ser usado para o princípio de prototipagem interativa moderna e complicada . Ele pode ser usado para moderno e detalhe, interativo, prototipagem e muito mais. Por exemplo, você pode usar proto pie também para prototipagem avançada 65. Ferramentas de wireframe: Olá, todos neste vídeo, vou falar sobre ferramentas de arame. Agora que você sabe a importância do enquadramento de arame em seu design de UX, é hora de falar sobre as ferramentas, que são absolutamente úteis para preparar seu quadro de arame. Embora alguns designers prefiram usar software autônomo para enquadramento de fios, existem designers que preferem usar ferramentas baseadas na Web para enquadramento de fios. Não importa o jeito que você gosta de escolher, certifique-se de manter o enquadramento do fio consistente. Aqui estão algumas ferramentas úteis que você pode usar para enquadrar fio Número um Mike Flow. Você pode usar mike flow dot com, e oferece uma variedade de serviços gratuitos e pagos. Número dois. Você pode usar os pés, Mãe Calma, e também oferece serviços gratuitos e pagos. Esboço número três. É um aplicativo pago e por último, mas não menos importante, Adobe X'd, que é gratuito, e você pode insultá-lo tanto no Mac OS quanto no Windows 66. O que é um estilo de cores?: Oi. Bem-vindo de volta a outra seção das partituras neste vídeo. Vamos falar da cor Stein. Qual é o estilo da cor? Na verdade, cada marca tem um conjunto de cores que eles aderem. Então, por exemplo, quando você pensa em Tweeter, eu tenho certeza que você pensa azul. Então, na seção, vamos criar nosso próprio estilo de cor ou, digamos, digamos, nosso próprio guia de estilo para nos ajudar durante nosso processo de design. Então, vejo-te no próximo vídeo. 67. Cores primário, Semantic e Acento: Oi, todo mundo. Neste vídeo, vamos começar a criar nosso primeiro guia de estilo com um guia de estilo. É tão importante quando você está projetando uma interface porque isso vai economizar muito tempo e torna sua vida mais fácil. Então, sem mais delongas, vamos começar. Primeiro, vou colocar um novo porto de arte aqui para que você possa inserir o quadro de artes. Ou, alternativamente, você pode pressionar um botão no teclado. Então eu vou escolher Responsive Web e este material HD perfeito. Primeiro de tudo, vou renomear duas coleiras. E então vamos adicionar texto aqui e cores certas. E se você ficar velho, você pode ver os sentidos D entre essas idades e o texto. Então vamos fazer 100 a partir de cima e 120 a partir da esquerda. Ótimo, vou ampliar um pouco. Agora vamos inserir em torno dele aqui, e eu vou arrastar e soltar perfeito, e eu vou escolher a cor com o código para 135 F três Perfeito. E agora vamos aumentar o raio do canto para obter cantos suaves. Incrível! Agora podemos alinhar com o estofamento. Gays. Oito pixels perfeito. Então agora vamos inserir outra rodada aqui e arrastar e soltar. E vamos fazer com que 180 por 180 células de pico. Como você pode ver em um esboço, você tem duas opções. Cantos redondos ou cantos suaves. Eu prefiro usar cantos suaves porque ele vai te dar um muito, muito bom cantos suaves como o que você vê em nossos EUA tudo bem, vinte anos. Ótima. Agora vou injetar essa caixa, e agora vamos escolher nossa coleira. Isso é certo para 13 cinco F três. Ótima. Se você não tem certeza de quais cores você gostaria de escolher em seu projeto, não se preocupe. Você sempre pode voltar e modificar todos os componentes das guias de estilo. Então agora vamos movê-lo um pouco. Certo, 100 é ótimo. E agora vamos duplicar com o Comando D e colocá-lo aqui com 30 células de pico de preenchimento. Ótimo! E desta vez vamos escolher a cor. Sete. Bond procura oito F seis perfeitos e mais uma vez, vamos duplicar. Mas é bem ali e escolha a próxima cor. Um 09 a f nove. Ótimo e, novamente, isso é duplicado. Eu sei que é meio chato, mas acredite ou não, vai economizar muito tempo e tornar seu processo de design muito mais rápido. E o último. Vamos os sapatos ver se cc f c grande. Certo, essas são nossas cores primárias, então deixe-me arrastá-las um pouco para baixo. Agora vou escrever o carro principal. Tudo bem, e agora vamos capitalizar todas essas letras. Em vez de escrever com letras maiúsculas, podemos facilmente ir até lá e clicar naquele botão de configuração ali. Aqui temos tomadas opções e você pode escolher maiúsculas Perfeito. Vamos torná-lo menor. 24 pixels é grande e a distância 40 pixels. Estas serão as cores primárias que ele usou principalmente no nosso projeto. Então, agora vamos criar nosso guia de início antes de tudo, mas selecione a primeira cor. No lado direito, você pode ver uma seção, que é chamada de aparência, e aqui está escrito nenhum estilo de camada. Então, se eu clicar nisso, você pode ver que há uma opção. Criar novo estilo de camada. Então, vamos clicar nisso. E aqui está certo. Cores cortam a barra primária roxo 100% e entrar ótimo, então vamos fazer a mesma coisa para todos esses. Então vamos lá. Criar cores, stash primário barra roxo, 75% e novamente, cores cortar barra primária por pílula, 50% e o último. Cores barra primária barra roxo 25%. Ótima. Então agora criamos nossas cores primárias compartilhadas Siles, o que é ótimo, tudo bem. Antes de continuar esse processo, vou criar uma camada. Vamos nos alinhar e eu vou trocar o colarinho. Algo como isto. Isso é ótimo. E o espaçamento 16 de cima e 40 de baixo. Incrível. Então, agora, a fim de organizar nossas camadas, vamos agrupá-las para que você possa usar o comando G e, em seguida, renomeá-lo para o título Grande. E também, vamos escolher as cores, Primária pílula par e aqui também título. Certo, então a segunda coisa que precisamos fazer é criar nossas cores de sotaque. Então o que eu vou fazer é segurar esses dois grupos e duplicá-los e arrastá-los até aqui. 70 Big vende ótimo. Então agora vamos mudar o título para cores de destaque. Muito bem, agora, vamos escolher o primeiro quadrado ali e mudar a cor, também. B e 52 f dois. E se eu clicar ali, você pode ver que temos algumas opções. Se eu clicar em atualizar camadas tempo, isso vai atualizar a estrela de camada anterior que acabamos de criar. Não é o que precisamos. Precisamos criar uma nova camada doente e vamos chamá-lo de cores. Smash Accent Slash. Está roxo de novo. Vendeu sua faculdade roxo um e o 2º 1 Vamos mudá-lo para D. B. Um cinco se bem, ótimo e vamos criar um novo estilo de camada. Então eu vou mudá-lo para cores, acento barra roxo para e o próximo e o f F dois. Incrível. Então vamos criar outras cores de estilo de camada. Sotaque, roxo três e o último. Vamos sapatos se três e oito se seis. Vamos alterá-lo um pouco agora é ótimo e criar novas cores de estilo de camada. Meu sotaque. Cuidado. Quatro. Incrível. Então a próxima coisa que precisamos fazer é criar nossas cores semânticas, então vamos fazer arte para um pouco maior. Você pode clicar sobre isso e, em seguida, mudar a altura para 2000. E agora vamos mudar o nome do grupo aqui para acentuar cores e também o título Dash acent título. Ótima. Então vamos segurá-los e duplicá-los e bebê-los. Certo? Então isso mudou o imposto, também. Connors semânticos. Tudo bem agora nós só precisamos de três cores aqui nem para torná-lo simples para você. Isso são sapatos. Se cf cinco ver grande, vamos criar novas cores de estilo de camada. Semântica laranja um e o próximo f f e 29 d novamente criando seu estilo laranja semântico para no último f f f f oito e sete. Criar um novo estilo de camada laranja semântica. Três. Perfeito. Agora vamos segurá-los e duplicá-los. Certo? 30 Pixel é ótimo. Isso é usado o 1º 1 e mudá-lo para 0084 f quatro. Vamos chamá-lo de azul. O 2º 166 é cinco F em oito Blue, também. E o último d cinco e nove f A e isso é azul da faculdade três. Tudo bem. Você pode adicionar o quanto quiser, mas eu acho que, por causa deste curso, é suficiente por enquanto. Muito obrigado por assistir este vídeo no próximo vídeo. Nós vamos adicionar o Grady na orientação de cor de estrela e também as cores cinza que ele usou principalmente em fundos. Vejo vocês no próximo vídeo. 68. Cores e gradientes cinza: Oi, todo mundo. Bem-vindo de volta a outro vídeo desta seção neste vídeo. Vamos criar nossas cores de fundo cinza, o que é tão importante, porque na maioria das vezes vamos usá-las muito em nosso projeto. Então vamos em frente e fazer nossa arte para um pouco maior. Então eu vou mudar a alta para 3000. E então, como todos sabem, precisamos manter esses grupos e duplicá-los. Lá vamos nós. Isso mudou seu título para cores de fundo cinza. Perfeito. Então agora vamos eleger a primeira cor e mudá-la para 28 37 para B Perfeito. E agora vamos criar um novo estilo de camada e cores. Eu vou dizer cinza BG barra um também, e vamos selecionar o 2º 1 e mudá-lo para 87 98. Um de grande. Isso é criar um novo estilo de camada. Sei que é repetitivo, mas acredites ou não, vai tornar a nossa vida muito mais fácil. Portanto, vale a pena o nosso tempo para criar o nosso lado de cores. Ou, digamos, nosso guia de estilo, geralmente para fazer o processo fora, estão projetando mais rapidamente. Agora vamos eleger o próximo e vamos mudá-lo para si sete d zero o A e então eu vou em frente e criar um novo estilo de camada cores, cinza e três. Preciso de mais um. Vamos duplicar o último com o Comando D e segurá-lo e movê-lo um pouco perfeito. E isso mudou a cor para Yvonne E 6 e B. Vamos criar outro arquivo de camadas. E aqui, digamos que é incrível. Então agora você pode estar pensando, é por isso que devemos fazer isso? Deixe-me dar um exemplo para entender o quão poderoso é um guia de estilo quando se trata de design de interface de usuário. Digamos que temos por aqui, está bem? E suponha que você queira preenchê-lo com nossa cor primária. Então, quando você tem compartilhado dentro, você não precisa memorizar o código de cor em vez disso, Se você ir em frente para a seção de aparência e clique aqui, você pode ver todas as cores e estilo de camada que criamos para o nosso projeto. Como você pode ver, precisamos mudar este estilo de camada o nome disso porque ele não é consistente, então o esboço não poderia categorizá-lo como cores. Ótimo. Então, primeiro de tudo, deixe-me mudá-lo. Vamos organizar os anos e depois aqui. Cinza. Incrível. Então, vamos em frente e escolher nossa cor primária. AARP 0 100%. Lá vamos nós. Você percebeu como chás fáceis para trabalhar com guias de estilo? Vai poupar tanto tempo e você está projetando uma interface. A outra vantagem de usar o guia de estilo em seu projeto é que você sempre pode modificar todos os componentes do seu guia de estilo facilmente, e as alterações serão aplicadas a todo o seu projeto. Isso é incrível. Suponha que você projete um projeto com essas cores primárias que temos lá, e depois de dois meses, seu cliente quer mudá-lo para outra coisa. Se você não usou o estilo de camada compartilhada em seu projeto, você precisava alterá-lo um por um, e você não pode nem imaginar quanto tempo leva. Então, em vez disso, você pode facilmente ir ao seu guia de estilo e selecionar a cor específica que deseja alterar e alterá-la facilmente. Por exemplo, vamos tentar algo aqui. Eu vou mudá-lo para esta cor, e então você precisa atualizá-lo para Sim. O que acontece se eu verificar a nossa praça ali? Você pode ver que a cor mudou. Isso é incrível. Tudo bem. Espero que você entenda como senhoras poderosas e vale a pena o seu tempo para criar seu próprio guia de estilo . Tudo bem, agora vou em frente e criar nossas cores radiantes. Então vamos duplicar isso, e precisamos lembrar de renomear nossos grupos. Muito bem, vamos mudar o título para estudiosos. Incrível. Agora eu vou ir em frente e selecionar esses dois e removê-los porque eu só quero criar para Grady ins para o nosso guia de estilo. Então vamos sentir seção e clique e cor. E aqui, como você sabe, temos algumas opções. O 1º 1 é para escolher uma única cor, e o 2º 1 é para Grady INTs, então você pode facilmente clicar neste círculo e escolher esta cor e, em seguida, clicar no 2º 1 e escolher a segunda cor primária, e você pode mudar a direção desses belos molhos. Perfeito. Então, novamente, vamos criar um novo estilo de camada desta vez cores radiantes. E isso mudou a 2ª 1 aqui, também. Este e é divertido demais. Crie novas cores de estilo de camada. Grady Int para perfeito. Tudo bem agora, vamos em frente e mudar o nome de nossos grupos porque é muito importante manter sempre nossas camadas e grupos organizados. Então, o que temos aqui? Cores semânticas. Isso está mudando muito semântico. E esses dois também devem ser alterados para cores semânticas no 2º 1 azul e, em seguida, título da tese para Cinza. E aqui também cinza BG Collars e o último Grady Ins vital. E aqui, Grady Int perfeito. Então, criamos com sucesso a parte de cores do nosso guia de estilo. E é o suficiente por enquanto. No próximo vídeo, vamos criar as fronteiras e sombras para o nosso projeto. Então, muito obrigado por assistir este vídeo. Vejo-te no próximo vídeo. 69. Borders e sombras: Ei, pessoal, bem-vindos de volta a outro vídeo desta seção. Neste vídeo vamos criar estilos de camada compartilhados para nossas bordas e também para nossas sombras. Então vamos começar. Então, primeiro de tudo, vamos escolher atos e cores e duplicá-los porque vamos precisar deles aqui. E eu vou mudar o título. Duas cores de borda. Incrível. Agora vamos selecionar o 1º 1 Mas desta vez não precisamos de sentimentos. Precisamos de fronteiras. Então vamos Chek sente e verificar as fronteiras. O com ou espessura é aquele que é ótimo e que mudar a cor para a nossa primeira cor de acento . Ótimo. E as posições estarão dentro como padrão. E vamos mudar o 2º 1 e marcar esta caixa. Verifique Fronteiras. Lá vamos nós. A mesma coisa para o 3º 1 Não precisamos do último porque é muito leve. Então esses três são suficientes Agora, como você sabe, precisamos ir em frente e criar um novo estilo de camada. Então vamos escrever barra de borda um e para o 2º 1 barra de borda dois e o último barra de borda três. Ótimo. Então vamos mudar o nome do grupo aqui para cores de borda e também este grupo para bordas grandes. E então eu vou em frente e selecionar as grandes cores de fundo e duplicá-las. Vamos movê-lo para baixo perfeito. E isso mudou o título para sombras. Ótimo. Precisamos de quatro sombras diferentes, mas todas com a mesma cor. Então vamos selecionar todos eles e trocamos um colar, também. Certo? Você vai saber o porquê em um segundo, e então isso é nas sombras. Lá vamos nós. Esse zoom um pouco. Tudo bem. Primeiro de tudo, vamos selecionar todos eles e mudar tudo longe de 50 para 20. Ótimo. Então eu vou selecionar o 1º 1 e modificar essas opções de sombras. Então, primeiro, vou mudar os ovos 21 e os Emirados Árabes Unidos para cinco, e isso aumentou um pouco a Blair Mount. Vamos definir para 10 porque vai ser a nossa pequena sombra e por que eu acho que vai ser seis grandes e o 2º 1 novamente. Um. E vamos mudar a Blair 20. Por que ali? Vamos aumentar a quantidade de X um pouco 25 e o próximo que disse que os ovos também para e aumentar a quantidade Blair 2 20 por que vai ser 19? No entanto, eu acho que é melhor mudar o X 22 e desta vez eu vou diminuir a quantidade de fogo todo para 10. Ótimo no último. Vamos diminuir a oferta. Montante a 10 e, em seguida, disse o X 21 o Y 25 eo Blair para um adolescente. Ótimo. Agora é hora de criar nosso estilo de camada compartilhada. Então vamos selecionar o 1º 1 e ir em frente e criar nova camada Stein. Aqui, digamos que as sombras cortam outra vez. Sombras copiadas para salvar nosso tempo. Esmagar para e sombras Strache três e o último Sombras cortar para grande. Como você pode ver, temos sentimentos aqui, a fim de entender como essas sombras se parecem. Mas não precisamos deles, porque quando queremos adicionar sombras às nossas camadas ou componentes, não precisamos senti-lo também. Então vamos elegê-los e, em seguida, verificar este campo, latidos grande e clique em vários estilos de camada aqui e optou lados da camada. Incrível. É disso que precisamos. Pode parecer estranho, mas funciona perfeitamente. Tudo bem agora, vamos em frente e organizar nossas camadas aqui. Isso é mudar duas sombras e também esta. Então eu vou em frente e agrupar essas camadas com o título deles. E então eu vou em frente e agrupar as cores ou sombras com o título deles. Então vamos agrupá-los em sombras de carne. O 2º 1 fronteiras Grady ins, colares BG cinza, algumas cores anti, cores acento e as últimas cores primárias. Incrível. Tudo bem. Finalmente, terminamos de criar nosso estilo de cor. E no próximo vídeo, vamos criar o tamanho da camada de entrada. Muito obrigado por assistir este vídeo. Espero que tenha gostado. E vejo-te no próximo vídeo. 70. Inputs: Ei, pessoal, bem-vindos de volta a outro vídeo da seção deste vídeo. Vamos falar sobre entradas e queremos criar estilo de camada compartilhada para nossas importações. O que eu quero dizer com entradas? Quase todos os tipos de design de produtos, como sites, aplicativos móveis, etc., precisam de algum tipo de insumos. Por exemplo, quando você deseja projetar um registro para ou uma página de login, você precisa desses campos de texto e criamos camadas compartilhadas lado para importações, a fim de torná-lo consistente e fazer o processo de projetar muito, muito mais rápido. Então, sem mais delongas, vamos começar. Primeiro, vou em frente e aumentar o tamanho da peça artística para 3000 e 500. Ótima. E então eu vou selecionar grandes cores de fundo e duplicado Traga para baixo aqui e vamos mudar o título. Duas entradas. Ótima. Agora vou desmarcar esses campos e usar bordas e vamos escolher a cor primária para o 1º 1 E agora vamos em frente e criar novas camadas. Entradas de tempo barra um. Então vamos em frente e disse como o 2º 1 e escolher novamente a cor primária. No entanto, desta vez eu vou diminuir o todo o meu monte para 10% novamente. Isso é usado bordas e escolha a cor primária. Agora vamos criar novas entradas de estilo de camada. Slash Vamos escrever aviso. Então, quando algo está errado, por exemplo, se o endereço de e-mail está errado ou outra coisa, usamos esse tipo de entradas. E a 3ª 1 de novo, vou sentir. Bata a cor branca e a borda com a cor primária. E agora vamos em frente e criar novas entradas de estilo de camada barra três e a última. Vamos Chek sente e é nas fronteiras. Desta vez eu vou usar esta cor cinza e criar novas entradas de estilo de camada para incrível. Então agora suponha que vamos criar um campo de texto para um registro, podemos ir e inserir em torno dele aqui assim, e então apenas aumentar o raio dos cantos pequenos cantos. 220 Perfeito. Vamos em frente e usar nossas entradas. Por exemplo, Ano. Vamos ter o 1º 1, não é incrível? Ou suponha que queremos mudá-lo para um estado de alerta? Podemos ir em frente com facilidade. Aviso de entradas. Lá vamos nós. Isso é ótimo. Tudo bem. Muito obrigado por assistir este vídeo. Vejo-te no próximo vídeo 71. Introdução ao estilo da tipografia: alto nesses vídeos, vamos falar sobre o tempo do texto, assim como o que fizemos com nossas cores que agora vamos fazer com nossa tipografia. Então, nesta seção, vamos criar nosso próprio têxtil. E precisamos definir tamanhos diferentes, pesos diferentes e também cores diferentes para o nosso estilo de tipografia, a fim de usá-lo em nosso projeto. Então eu o veria no próximo vídeo. 72. Guia de tipografia 1: Ei, pessoal, bem-vindos de volta a outra seção do curso neste vídeo. Vamos falar sobre estilos de tipografia e queremos criar nossa diretriz de tipografia . Então, a primeira coisa que vai. Eu vou continuar e duplicar o mesmo quadro de arte com o comando D. Lá vamos nós. Vamos mudar seu nome para tipografia. Ótima. E agora vou remover esses grupos porque não precisamos deles. E também este perfeito e mudou o título para levar Parker. Medos curvam-se. E aqui eu vou mudá-lo para H1. Perfeito. E isso é torná-lo menor. Acho que 18 seria ótimo. E agora vou fazer esta linha um pouco mais longa. Retenção de turno. Perfeito. Então o que vamos fazer é criar três estilos de cabeçalho diferentes e também três estilos corpo diferentes. Então, o que eu quero dizer com três lados diferentes? Então vamos criar um ano de texto e um texto de exemplo certo, e eu vou mudar a cor para este. Ótima. E depois vou certificar-me de que é uma linha à esquerda. E também vou mudar o tamanho para 34 pixels de sepultura. Então 20 desta linha é ótimo. E vamos mudar a linha Hi para 50. E também, eu vou mudar o com 2 230 também. Então a próxima coisa a fazer é duplicar esses textos e colocá-lo bem ali. E desta vez vou certificar-me de que está alinhado ao centro. E novamente, eu vou duplicar e colocá-lo bem ali. E isso está alinhando à direita. Então agora o que vamos fazer é selecionar todos eles e escolher distribuir camadas horizontalmente, distribuir de forma desigual. Ótima. Então vamos mudar o texto do grupo para Hum. Este vai ser o nosso cabeçalho um, e eu vou selecionar esses três textos e agrupá-los perfeitamente. Vamos duplicar. 50 é ótimo e isso mudou um cabeçalho de dois anos. E então eu vou selecionar todos esses impostos e mudar o tamanho do telefone para 26 e também a linha oi para 44. Incrível! E aqui temos dois anos e isso é duplicado novamente, mas mudou um cabeçalho dois h três e também selecionar todos esses textos e mudar o tamanho para 16 pixels e a linha oi para 30. Incrível. E mais uma vez eu vou duplicá-lo e colocá-lo bem ali. Mude cabeçalho dedo H quatro e que selecionar todos esses textos e torná-los 12 pixels e também a altura da linha de 17. Ótima. Agora vamos mudar o nome do grupo, com 3 anos e 4 anos. Ótima. Tudo bem agora vamos em frente e criar nossa parte, Starnes. Mas para esta seção não vamos fazer por todos eles. Eu vou fazer isso sozinho, e eu vou dar-lhe o arquivo final, a fim de usá-lo em seu projeto. Então agora vamos em frente e selecionar o primeiro texto e criar novo têxtil. Isso é certo. H uma barra esquerda e o segundo 1 h uma barra centro e o último h uma barra direita. Incrível. Então isso é o suficiente para este vídeo. E no próximo vídeo, criaremos nosso corpo, Tex. E também terminaremos nossas diretrizes de tipografia. Então vejo-te isso 73. Guia de tipografia parte 2: Olá, todo mundo. Espero que esteja indo bem nesse vídeo. Vamos criar o nosso corpo de texto e terminar o nosso guia de início de tipografia. Então, sem mais delongas, vamos começar. Primeiro, vou duplicar um destes. Isso é colocá-lo aqui, e isso é mudar o cabeçalho para o corpo um. E vamos selecionar todos esses textos e alterar o tamanho do telefone para 14 pixels. Ótima. Agora precisamos mudar as estrelas compartilhadas. Então vamos criar novos têxteis aqui. Vamos mudá-lo para o corpo um corte à esquerda, o 2º 1 por D, um centro de barra e o último por um barra, certo? Incrível. Então agora vamos duplicá-los. Mas antes disso, deixe-me mudar o nome do grupo para corpo um nerd para manter nossas camadas e grupos organizados e depois duplicá-los. Então aqui eu vou mudá-lo para o corpo, também. E isso é selecionar todos esses tanques e mudar o tamanho da fonte para 13. E mais uma vez, deixe-me mudar o nome do grupo para corpo, também, e esta arma para corpo três. Ótima. Então vamos eleger todos os textos e mudar o tamanho da fonte para 11 pixels, então eu não vou fazer a mesma coisa e criar novos têxteis. Farei isso sozinho, a fim de poupar seu tempo. E você pode baixar o guia de estilo final no recurso é seção desta palestra. Muito obrigado por assistir este vídeo. Vejo-te no próximo vídeo. 74. Projeto 1 - Instagram Redesign: Ei, pessoal, bem-vindos de volta a outra seção do discurso nessa seção, vamos redesenhar o Instagram. Estou tão animado que finalmente vamos começar nosso primeiro projeto. Então deixe-me explicar a vocês o processo de design, aplicação de peças fora, primeira coisa que as tarifas. Nós vamos projetar um registro para ou digamos, página de inscrição. Como podem ver, temos têxteis diferentes aqui. Nós também projetamos duas versões diferentes fora do Assinar uma página e, em seguida, aqui temos uma página que o usuário precisa para se sentir pessoal mais tarde, a fim de completar o perfil. Então temos o formulário preenchido, e aqui temos a página de arrastar. E então vamos começar a projetar nossa página pés ou digamos, home page. Como você pode ver aqui, vamos projetar posts e também histórias e todos esses elementos juntos. E então vamos em frente e começar a projetar fora do nosso perfil, como você pode ver aqui e depois disso, vamos projetar a página da câmera fora deste aplicativo. Como você pode ver, temos duas páginas diferentes para câmera. Aqui está a página padrão, e a próxima é para quando modificamos as configurações e, em seguida, vamos em frente e design são explorar página com diferentes categorias. E aqui temos explorar página com barra de pesquisa e, em seguida, temos mensagens e depois que vamos em frente e projetar mensagem aqui, como, o que é aplicativo, como você pode ver e depois disso, vamos projetar nosso configurações. E também temos uma página de atletismo que é tão importante, e eu vou ensinar-lhe como projetar tal página e como usar outros vocês I crianças nerd para obter o melhor resultado possível. E por último, mas não menos importante, vamos projetar três diferentes páginas de embarque juntos, como você pode ver aqui. E eu vou mostrar a vocês como obter essas belas ilustrações e também os princípios importantes de projetar em embarques. Então, no total, vamos projetar 21 páginas diferentes de um aplicativo, o que é incrível. Estou tão animado para começar este projeto juntos, e na próxima série de vídeos, vamos projetar todas as páginas uma por uma. Para iniciar este projeto, por favor baixe o arquivo que eu já preparei para você, e está incluído todos os ícones e imagens e todas as coisas que você precisa ter na narrativa. Termine este projeto. Você pode encontrar este arquivo no recurso é seção fora desta palestra chegar. Muito obrigado por assistir este vídeo. E vejo-te no próximo vídeo. 75. Página de registro (tela para registro): Oi, todo mundo. Bem-vindo de volta a outro vídeo desta seção. Neste vídeo. Vamos começar a criar a nossa primeira página, que é a nossa página de inscrição. Então, a primeira coisa que vai. Como você sabe, precisamos criar nosso quadro de arte. Então vamos em frente e inserir em nosso dispositivo Apple porta diz que eu vou escolher iPhone excesso Grande. Isso tem a sua inscrição antes de iniciar a seção, Certifique-se de instalar o requer fundos e também o necessário que você gosta. É do site da Apple. Então, os fundos que você vai usar o nosso chamado SF Pro texto que você pode encontrar no site da Apple . Se você verificar desenvolvedor que apple dot com barra fundos, você pode baixá-los gratuitamente aqui como tem pro, e então você pode instalá-lo. E o outro telefone que vamos usar chama-se Monsour que você pode baixá-lo do site do Google Fonts. A outra coisa que você precisa fazer é ter a maçã padrão que você gosta comer e você pode baixá-lo veio de seu site. Então vamos procurar por você. Eu teto maçã. Lá vamos nós, Applebee's e Resource é, e aqui você pode encontrar recurso muito útil é, como você pode ver, você pode obter o padrão A em nós. Você gosta de comer. Também para Mac OS, assista-nos e TV nos tudo bem. E aqui você pode clicar em adicionar toda a sua biblioteca de esboços e ele será adicionado à sua biblioteca . A primeira coisa que precisamos é acrescentar que o estado tem muito bem ali. Então vamos inserir Apple são usu I Mars status Bar iPhone E aqui vamos usar luz. Perfeito. E a segunda coisa é adicionar o indicador home na parte inferior da nossa tela para Vamos toe apple arias você. I barras home indicador iPhone e vamos usar retratado e também luz. Então vamos colocá-lo bem ali e alinhá-lo. Perfeito. Agora estamos prontos para iniciar nosso processo de design. Então, primeiro de tudo, eu vou criar um círculo ali. Então vamos inseri-lo, ok. E então eu vou sentir que é o Grady int. Então isso é desmarcar essas bordas e, em seguida, cor radiante. Ok, vamos selecionar o primeiro 1 O código vai ser sete f três c b um ok. E o outro se oito C nove e zero para e também eu vou adicionar outra cor bem ali e vamos fazer e f zero c e 20 certo? Como você pode ver, estas são as cores da marca Instagram. Vou mudar a direção por estes indicadores. Vamos fazer assim e quase 45 graus perfeitos. Então vamos movê-lo um pouco para cima com e duplicado porque eu vou criar uma linha. Acho que vai ser bom. Então vamos desmarcar esses campos e verificar essas bordas, e a cor vai ser esta. Então vamos movê-lo para cima e um pouco para a esquerda. Perfeito. Certo, vamos eleger os dois anos e agrupá-los e certificar-nos de que está sob a nossa barra de status . Ok, eu acho que é melhor mudar a barra de status para o modo escuro porque eu acho que é melhor ter branco sobre este fundo para que possamos selecionar isso e fácil de ir para símbolos. Clique nisso, e aqui você pode usar escuro. É fácil, certo Então o que eu preciso é colocar o logotipo do Instagram bem ali e também o texto do Instagram sob isso. Então vamos em frente e trazer essas multas dos ativos que você baixou da palestra anterior. Recurso é o logotipo que é selecionar esses dois. Arraste-os perfeitamente. Então vamos mudar a localização do logotipo Instagram 200 em. Torná-lo maior. Acho que 62 por 62 seria ótimo. Então vamos mudar isso. E este aqui. Vamos escalá-lo para baixo e mudar o com 2 160 e colocá-lo bem ali. Dean é o logotipo do chão. Ok, como você pode ver, não há contraste suficiente entre essas cores. Então eu vou selecionar os dois e Kelly pode sentir e eu vou escolher White. Agora isso parece incrível. Agora vamos nos certificar de que eles estão alinhados ao centro e isso os agrupa. Vou mudar o nome para logótipo. E novamente, vamos alinhá-los perfeitamente. A próxima coisa que você precisa fazer é adicionar nosso sinal de título. Então vamos escrever, inscrever-se. No entanto, eu vou mudar os fonds para como se pro texto e também para esperar muito velho. Incrível. É Jake, o estofamento, 39. Vou fazer 30 a distância entre o título e os círculos. Vamos fazer 50 dois. Não se preocupe. Podemos modificar todos esses espaçamento mais tarde. Tudo bem. Agora vamos mudar o tamanho da fonte para 24. Isso é ótimo. E então eu vou criar outro texto. Vamos escrever o registro e o peso do normal e alterar o tamanho da fonte para 18. E também, eu vou mudar a cor dois branco. Então, vamos colocá-lo bem ali e verificar o estofamento. Então, como podem ver , são 27. Vou movê-lo para conseguir 30. Perfeito. A próxima coisa que precisamos fazer é criar nossos campos de texto. Certo, então do que precisamos? Precisamos de um endereço de e-mail, toma campo e também um campo de texto de senha. Ok, vamos simplificar as coisas. Então vamos em frente e criar outro texto e endereço de e-mail direito. E vamos mudar a cor para nove b nove b nove b nove. Ok. Podemos obter esse ruído cinza, e também eu vou torná-lo menor e diminuí-lo para 14 pixels. Tudo bem, a próxima coisa que precisamos fazer é criar nossa linha de sensação de texto, então vamos em frente e inserir uma linha. Lá vamos nós ter certeza de que o estofamento está certo, então temos 35,5 anos. Precisamos fazer 30. Precisamos ampliá-lo muito bem. E vamos mudar a cor para preto, mas não em branco absoluto, porque não é uma boa maneira de usar um preto puro contra um fundo branco. Então vamos usar este aqui, e eu vou ir em frente e copiar esses códigos de cores e usá-lo para o nosso sinal de título também. Ótimo, isso está se movendo para baixo, e eu vou duplicar este endereço de e-mail e aqui o que precisamos é de um endereço simples, emitir, que não deveria ser riel necessariamente. Então vamos escrever design em uma única mídia que co. E você pode mudar para o que quiser. E novamente, isso mudou a cor para o mesmo preto que usamos. No entanto, devemos aumentar a dimensão deste fundo porque precisamos de prestar atenção para usar a sua experiência e a hierarquia visual fora da nossa concepção. Então vamos fazer 16. E também vamos mudar o peso dois médio perfeito. Então agora vamos verificar o espaçamento entre esses elementos. Temos 9,5, o que não é bom. Vamos mudar para seis. Vou mudar a partir daqui, para ser preciso. Incrível. E aqui temos nove. Então vamos fazer 13. Ótimo. Então eu vou agrupá-los e eles mudaram o nome do Grupo 2 e endereço de correio e duplicados. E isso é mudar para senha. Ótimo. E também, vou mudar o título para senha. E aqui eu vou usar alguns círculos pretos, a fim de mostrar que nesta página, a senha deve ser segura. Ok, então, para criar esses círculos pretos, eu posso segurar Ault um oito. Isso é ótimo. No entanto, para estas linhas, eu vou mudá-lo para algum tipo fora laranja ou amarelo. Então vamos usar f seis b 90 A. E a razão pela qual nós vamos mudar essas linhas de cor é porque nós vamos mostrar que quão seguro são últimos quatro dias. Alterando a cor dessa linha específica. Por exemplo, se a senha for muito curta ou muito simples, a cor das linhas será lida, e isso é o que chamamos de usar sua experiência. Tudo bem, então o que mais precisamos? Precisamos adicionar algum tipo de ícone grosso para mostrar que nosso endereço de e-mail está bom e não há nada crescendo com isso. Então vamos para o nosso Eu não posso pasta como Cones, e aqui temos um monte de DST feito e é arrastar e soltar sobre Dir Perfect. A cor é o que vai ser porque eu já projetei essas telas. Então o código é para 135 F três. E vamos agitar o espaçamento. É 14. Vamos torná-lo 16 e também 15 da direita. Ótimo. O outro ícone que precisamos é um ícone de olho porque vamos deixar o usuário ocultar a senha e também mostrar a senha. Então vamos encontrar o ícone I. É bem ali. Ok, isso é colocá-lo aqui. Perfeito. E novamente, 13 e 15 da direita. Ótimo. Antes de prosseguir para o próximo nível, deixe-me organizar nossas camadas aqui. Então eu vou abrir este endereço de e-mail de grupo, e eu vou mover estes grupo feito para este endereço de e-mail e também para a senha. Vamos mover o I para aquele grupo. Tudo bem? A última coisa que precisamos para o nosso sinal de página é digamos um botão seguinte, a fim de levar o usuário para a próxima página. Então vamos em frente e projetar que eu não posso juntos. Vamos clicar em inserir Forma em torno dele e mantenha pressionado o botão Shift. Ótimo. Vamos fazer você 72 por 72 pixels e alterar o raio do canto para suavizar cantos e também a quantidade para 25. E depois vamos. Verifique esta borda e preencha-a com a nossa cor primária, que é algum tipo de roxo como este ícone feito ali. Então o Cody é para 135 F três. Ótimo. Eu também quero adicionar uma sombra. Acho que vai fazer com que pareça agradável. Então vamos mudar a sombra de preto para a mesma cor. Lembre-se de que quando você quiser criar algum tipo de sombras, as sombras não devem ser necessariamente pretas ou cinza. Se você prestar atenção a um objeto no mundo real, você pode ver que a cor das sombras é herdada desse objeto. Então nós usamos a cor da rota, que é a mesma cor do nosso objeto, e então nós vamos diminuir a opacidade para 30% grande e vamos mudar o Y 28 e também o Blair para 11. Você pode ver como sutilezas. Então precisamos de mais um. Acho que precisamos de uma seta para mostrar que vamos levar o usuário para a próxima tela. Então vamos em frente e trazer essa flecha. Aqui temos o nosso direito, Vamos segurar a seta e também o nosso retângulo, a fim de alinhá-los. Tudo bem, ótimo. E agora é hora de agrupar que mudou o nome de um grupo também para o próximo Barton. E por último, mas não menos importante, precisamos mais uma vez alinhar para toda a nossa página perfeita e verificar o seu espaçamento. É 62. Deixe-me fazer 60. Isso é incrível, tudo bem, agora que projetamos nossa página de inscrição com sucesso, você também pode visualizar isso no seu telefone. Mas como isso é possível? É simples. Você pode instalar o aplicativo escapado no telefone e certificar-se de que o telefone está conectado à mesma rede sem fio que o computador está, e então você pode ver algo assim. Pânico orishas iPhone. Se você clicar e você pode visualizar a página que você acabou de projetar diretamente no seu telefone, isso é muito legal. Então, agora que nós projetamos com sucesso nosso sinal de página. Precisamos criar outra versão fora disso, e nessa página você vai incluir mais duas coisas. Você vai adicionar registro com APS sociais, como Facebook ou Google Plus. Então vamos duplicar o nosso quadro de arte com o Comando E. E e eu vou mudar o nome para inscrever a Dash Social Media. Ótimo. Então, primeiro de tudo, eu vou segurar esses dois sinais de imposto e movê-los um pouco para cima, talvez 20 pixels e também o espartano. E então eu vou adicionar um texto e escrever ou me inscrever. E vamos mudar a cor, também, este cinza. E também vou torná-lo menor. Vamos fazer com que seja 14. Eu acho que isso é ótimo. E alinhá-lo ao centro, movê-lo um pouco para cima. Então, as outras coisas que precisamos são dois botões, um para o Facebook e outro para o Google. Além disso, então vamos inserir em torno dele. Vamos fazer 151 por 54 e mudar o raio do canto para 15. E eu vou agitar essas fronteiras e escolher branco. Você pode ver qualquer coisa agora, eu sei, mas vamos resolver esse problema adicionando algumas sombras. Então agora vamos diminuir o tudo 4 para 10 grandes. E isso colocou os ovos em nove. E também por quê? Para sete na Blair para 24? Isso é muito bom. Como você pode ver, temos uma pequena ordem de sombra agradável, a fim de tornar nosso fundo reconhecível. Ou agora eu vou duplicá-lo e colocá-lo bem ali e 13 entre. Faz é ótimo. Agora precisamos adicionar o logotipo do Facebook e também o logotipo do Google Plus. Então vamos ao I cones. E aqui temos Facebook local e também Google plus Local. Isso é arrastar e soltá-los sobre sua grande Eu vou colocar Google Plus bem ali e também Facebook. Eles são Então agora vamos adicionar uma linha de texto, então direita Facebook e 14 é ótimo. Vamos mudar o colarinho para este. Coloque aqui. Isso é alinhá-lo. Agora vou verificar a distância entre o logotipo do Facebook e as apostas. É 12. Vamos fazer oito e, em seguida, agrupá-los e selecionar este grupo, ser estes retângulo e mais uma vez alinhá-los impressionante. E vamos fazer a mesma coisa para o Google Plus, então é isso mesmo. Vá, vá mais e mude a cor para este. Vá, Go Plus e uma distância. Vai ser oito e alinhá-lo. E então isso é agrupá-los e selecionar este retângulo e alinhá-los horizontalmente e verticalmente. Agora, vamos mudar o nome do grupo para Facebook. Ok, para colocá-lo aqui. E também este para o Google. Além disso E agora vamos eleger ambos fora deles e novamente agrupá-los, a fim de alinhá-lo com outros elementos facilmente sobre. Isso é certo. APS sociais. Tudo bem, temos 34 pixels no fundo, então vou torná-lo um pouco mais alto. Acho que 45 é ótimo. E também para se inscrever com texto. Vamos fazer 10 para 1. E para este, acho que 30 pixels seria ótimo. Sim. Tudo bem, pessoal, parabéns. Você criou com sucesso suas telas justas, e como você pode ver, o resultado é incrível. Espero que gostem deste vídeo. Vejo-te no próximo vídeo. 76. Página de dados pessoais: Ei, pessoal, bem-vindos de volta a outro vídeo desta seção. Neste vídeo, vamos criar nossa página pessoal posterior e também a página pessoal concluída mais tarde . Então, sem mais delongas, vamos começar. Primeiro de tudo, eu vou duplicar um desses quadros de arte porque nós vamos precisar dessa barra de status e também do indicador doméstico. Então vamos em frente e remover o resto do nosso projeto. Vou selecionar “Eu os amo”. Perfeito. E então precisamos mudar a barra de status do escuro para a luz porque o plano de fundo desta página vai ser branco. Então deixe-me mudar a nossa parte. Nome muito pessoal. Dado Grande. Então, o que precisamos para esta página? Bem no topo. Vou colocar um círculo. Então deixe-me inseri-lo, a fim de permitir que o usuário para fazer upload de sua imagem de perfil em Vamos torná-lo 120 por 120 e alinhando com o centro e vamos em Czech Borders porque nós não precisamos disso . E vou senti-lo com a nossa cor primária. Ok, então porque nós vamos usar esta cor como nossa cor primária muito em todo o nosso projeto . Vou criar um estilo de camada compartilhada, a fim de tornar sua vida muito mais fácil. Então vamos em frente e escrever cores. Primária. Cuidado, Incrível. E depois disso precisamos de um ícone. Eu acho que é bom colocar um ícone de câmera, então vamos abrir o arquivo, tudo bem, e vamos abrir os ícones. Temos de procurar a câmara, por isso vou arrastar e largar ali e pô-la bem no centro daquele círculo. E se você dissesse, como ambos, podemos alinhá-los ressentida e verticalmente. Perfeito. Vamos agrupá-los e mudar o grupo. Nome para a imagem do perfil. Ótima. E vamos agitar o espaçamento. É 41. Vamos torná-lo 50 perfeito. E o que mais precisamos? Precisamos de uma seta para a esquerda, a fim de criar algum tipo de navegação entre nossas páginas para que o usuário possa voltar para a primeira página e ver. Então vamos abrir a multa. E aqui temos seta esquerda e o estofamento é 25. Vamos fazer 30 e também o estofamento superior é 25. Vamos fazer oito. Ótima. Certo, agora é hora de criar nossos campos de texto. Mas para tornar nosso processo de design muito mais rápido, vou copiar e colar um dos campos de texto que já criamos. Então vamos copiar e colá-lo com o comando C e comando ser ótimo. E vamos mudar o nome do grupo para usar seu nome. E aqui vou eu em frente e mudar o título para usar o nome deles também. E aqui, em vez do endereço de e-mail. Isso mesmo, você é o nome de usuário. Muito bem, vamos copiar e colar o código do colar e usá-lo para estas tomadas também. No entanto, precisamos mudar o caminho para regular e também precisamos mudar essas linhas de cor para o mesmo cinza, e não precisamos deles feito aqui. No entanto, em vez de remover isso, podemos esconder isso porque na próxima página vamos precisar que eu possa, então é uma boa prática escondê-lo daqui. Tudo bem, vamos em frente e duplicar este campo de texto e colocar o seu direito sobre o terror e mudar o título para o primeiro nome e aqui o seu nome e eu vou mudar o nome do grupo para o primeiro nome e novamente duplicado. Vamos mudar o título para sobrenome. Também aqui. Seu sobrenome. Tudo bem, então vamos em frente e mudar o nome do grupo também para sobrenome. E agora vou mostrar-vos uma coisa, a fim de definir o espaçamento entre estes três takes sente que vocês podem selecionar todos eles. E como você pode ver, temos um indicador aqui, a fim de alterar o espaçamento uniformemente, rápida e facilmente. Então eu vou ajustá-lo para 24. Ótima. E vamos agrupá-los a todos. E aqui está certo. Campos de texto e alinhamento ao centro em. Mova-o um pouco para cima e o preenchimento dá 127. Então vamos fazer 120. Ótima. E a próxima coisa que precisamos fazer é adicionar um dedo do pé de sombra, nosso suporte de imagem de perfil para torná-lo bonito. Então, vamos selecionar esse círculo. Então, a fim de usar as mesmas sombras, como o que criamos para esses botões, você pode criar um novo estilo de camada compartilhada. Então, vamos selecionar esse botão. E em primeiro lugar, vou desmarcar estes campos. Anglicana Nenhum estilo de camada aqui. Isso é certo. Sombras roxas. Se eu escolher o círculo e as sombras Quicken aqui, posso verificar os campos. Se eu escolher o círculo e as sombras Quicken aqui, Você pode ver que temos as mesmas sombras que criamos suas incríveis. A próxima coisa que precisamos fazer é criar um botão completo e colocá-lo diretamente na parte inferior da nossa tela. Então vamos em frente e inserir em torno dele e torná-lo 200 por 71 e também fazer o raio de canto para suavizar cantos e alterar a quantidade para 25 portadores de tese não verificados e novamente cor Roxo Primário e também sombras Perfeito. Então vamos escrever completo aqui e fazer o seu 18. E mudou o colarinho para branco. E também, eu acho que é bom adicionar o mesmo botão de teca bem ali. Então vamos café que e colá-lo aqui e Scalea também 22 por 16 pixels e mudou a cor muito branco e, em seguida, selecione ambas as camadas e alinhá-los verticalmente. E também o espaçamento entre esses deve ser de 16 pixels. E agora eu posso agrupá-los e mais uma coisa importante, porque nessas telas o formulário ainda não está concluído. Ok, então eles usam a lata deles, o Nuts usou este botão, então precisamos mostrar ao usuário de uma forma que nosso traseiro está desativado. E para ativar isso, o usuário precisa sentir essa forma completamente. Então você pode fazê-lo de uma forma ou de outra, por exemplo, pode mudar a cor do fundo para algo mais leve foram para algo cinza para mostrá-lo, isto é, para mostrar que ele está desativado. No entanto, neste projeto, eu acho que é melhor diminuir a opacidade de nossos textos e este ícone para 50% para mostrar que e depois disso, que selecionar ambas as camadas que este retângulo e também nosso leva um ícone e alinhá-los verticalmente e horizontalmente. Perfeito. Nós também pode agrupá-los e alterar o nome do grupo para completar botão. E se eu me manter velho, eu posso ver o estofamento seus 74. Vamos fazer 60. Ótimo! Tudo bem. Nossa página pessoal posterior está pronta para usar. No entanto, precisamos criar mais uma página, e que é a pessoa mais tarde concluída página. Então vamos em frente e duplicar esta página e mudar seu nome para dados pessoais. Conclua e não precisamos mais deste ícone. Vamos remover isso. Vou manter o comando e selecionar o círculo, e vou adicionar uma foto ao nosso círculo. Então, como posso fazer isso? Você pode trazer sua própria foto ou obter sua própria foto em qualquer site que você quiser e certifique-se de verificar o crédito dessa foto que você vai usar. Ou você pode facilmente ir em frente e usar o banco de dados de esboços. Você pode clicar nos dados de T e aqui esboçar dados e clicar em rostos. Ótima. Você tem uma foto muito bonita. Então eu vou mudar seu nome de usuário para John subjacente Smith e também o primeiro nome para John e também o sobrenome para Smith. Você pode escrever o que quiser e também eu vou segurar o comando e mudar e selecionar todos esses textos e mudar a cor para nossa cor primária aqui e depois disso novamente, eu vou manter o comando e chefe e selecionar essas linhas e mudar o chamador para Este preto. Então vamos usar o “eu a largar”. E aqui usamos o mesmo preto. Lá vamos nós. E por último, mas não menos importante, precisamos adicionar o ícone de teca ali, a fim de mostrar que os campos de texto estão preenchidos corretamente. Você se lembra do botão de verificação que escondemos quando estávamos projetando nossa página anterior? Certo. Precisamos deles aqui. E eu posso abrir esses grupos e posso apresentá-los facilmente. A última coisa que precisamos fazer é aumentar a capacidade dos nossos técnicos aqui. Porque agora o estado é diferente. Todos os campos de texto são campo completamente. E agora o usuário pode usar este botão interno para completar seu perfil ou cabelo. Muito bem, pessoal, criamos com sucesso o nosso pessoal mais tarde. E também dados pessoais completados telas, o que é incrível. Espero que tenha gostado. E eu vou te ver no próximo vídeo. 77. Página de login: Ei, pessoal, bem-vindos de volta a outro vídeo desta seção neste vídeo. Vamos projetar nossa página de gosto em três versões diferentes. Então, sem mais delongas, vamos começar. Primeiro de tudo, eu vou ir em frente e copiar a página de inscrição e isso é colá-lo bem ali e mudou o nome dessas artes para dois arrastando traço digitando porque no espaço vamos apresentar nosso teclado e queremos apresentar o caso em que o usuário está digitando algo. Então vamos duplicar novamente e mudá-lo para gostar. E mais uma vez, mudando para transportar passaporte nesta página, vamos mudar seu ícone de olho e mostrar nossa senha. E também nesta página, vamos apenas mudar o título de inscrição para entrar bem e o botão de gostar para se inscrever . Mas antes de fazer isso, vamos nos certificar de que ele esteja alinhado à direita. Certo, porque precisamos do mesmo espaçamento e enchimento ali. Então agora podemos mudar também. Cadastre-se. Ótimo. Como você pode ver, o estofamento é roubar 30. Então vamos voltar a esta página. O que devemos fazer agora? Precisamos remover o espartano porque vamos apresentar nosso teclado aqui, então não precisamos disso. E vamos inserir a Apple são usu. Deixei os teclados, iPhone e aqui temos duas versões diferentes daquele teclado. O 1º 1 é escuro, o 2º 1 é leve, e isso é o que precisamos. E também aqui podemos escolher entre diferentes versões desse teclado de luz. Precisamos de ordem alfabética ou emerge ou números? Precisamos de alfabética. Então vamos usar isso e inseri-lo diretamente na parte inferior, e podemos remover o indicador inicial anterior. E também precisamos alterar esse cadastro para fazer login e esses registros para se cadastrar. Ótimo. A última coisa que precisamos fazer é mudar a localização do nosso imposto sente e também este título . Então vamos selecionar os dois e movê-los para cima. E também vamos eleger o título da peça também. Ok, o acolchoamento de cima deve ser 12 aqui. Vamos fazer 24. Ok, porque eu vou ir em frente e adicionar a correção automática à nossa página. Então vamos inserir maçã em nós. Você eu os vejo teclado, iPhone, luz e aqui. Temos outra barra de correção diferente. Vou escolher o primeiro e o quê? Está bem ali. Tudo bem. A última coisa que você precisa fazer é adicionar um marcador de texto de entrada para mostrar que o usuário está digitando. Então vamos em frente e inserir uma linha aqui. Isso é turno antigo e arrastar e soltar, e eu vou fazer o com 1,5. E também isso mudou para começar um fim aqui para 75 e 75. Ótimo. Então agora eu posso facilmente escolher thes conta-gotas e Kitty Candy Scholar Perfeito. Então vamos alinhá-los. Isso é ótimo. A segunda página está pronta e a última página que mudou o título para fazer login também e aqui, registrando para se inscrever. E então precisamos mudar esse ícone de olho. Então vamos em frente e abrir. Nossos ícones são arquivados aqui. Precisamos procurar por mim escondido. Como você pode ver. Nós o temos aqui. Vamos tentar cair. Lá vamos nós e colocamos bem ali. Incrível. Isso é sacudir o patty ing é ótimo e eu vou mover esse grupo para o grupo de senhas, e agora precisamos mostrar a senha para o usuário. Então vamos mudar de preto, senhor mata duas senhas riel, por exemplo. Poderia ser você. Eu comi por sete você. Como podem ver, temos seis círculos aqui e seis personagens aqui. Ótimo. Tudo bem. Muito obrigado por assistir este vídeo. Eles criaram com sucesso três versões diferentes da nossa página de carga. Espero que tenha gostado. E verei você no próximo vídeo. 78. Página de alimentação: Oi, todo mundo. Bem-vindo de volta a outro vídeo desta seção neste vídeo. Vamos projetar nossa página inicial. Então, sem mais delongas, vamos começar com a adição de um quadro de arte Grande. E isso tem tudo em casa. E eu vou ir em frente e copiar e colar essa barra de status da tela anterior para aqui . E vamos mudá-lo do escuro para a luz. Ótimo. De agora em diante, precisamos adicionar uma parte de toque. De agora em diante, Nossas páginas bem na parte inferior da nossa tela que pode facilmente inseridos são suas chaves a partir daqui Barras toque o nosso regular. Você tem muitas opções. No entanto, vou te ensinar como você pode fazer isso, mas você mesmo. A primeira coisa que precisamos é inserir em torno dele e, em seguida, vamos fazer a altura 129 e mudar o raio do canto para 24 e também cantos suaves. Depois disso, vou tremer as fronteiras porque não precisamos disso. E também vamos torná-lo branco. Como você pode ver, não há contraste entre nosso toque nosso e a página, então precisamos adicionar algumas sombras, e isso mudou sua passagem iti para 18% e também vamos fazer o Blair sete incrível. Você pode ver uma ordem de sombra que é suficiente para fazer o tipo de contraste que precisamos? Então agora vamos movê-lo um pouco para cima e adicionar um indicador home que é copiar e colá-lo aqui . Lá vamos nós. E se eu clicar duas vezes sobre isso, você pode ver que esses círculos aparecerão. Se eu segurar chefe e três condomínios, por exemplo, este e aquele, eu posso mudar o raio da esquina 20 ótimo. E então eu posso diminuir a altura. Nossa torneira é incrível. Agora é hora de adicionar nossos ícones aqui. O primeiro que eu chegar que precisamos é de um ícone de casa, então vamos em frente e trazê-lo aqui. Temos casa ativa, a ativa. Então, por enquanto, precisamos de casa ativa porque é a nossa página inicial. Vamos colocá-lo aqui. A próxima coisa que precisamos, facilitar o ícone de busca, e aqui temos procurado o ativo que é colocá-lo lá, e mais duas coisas uma é como Lá vamos nós e o perfil das artérias. Ótimo. Tudo bem. A próxima coisa que precisamos é criar outro botão, que é o nosso botão at quando o usuário quer postar algo. Então, vamos inserir em torno dele e diminuir o raio do canto. Vamos fazer com que 38 por 38 também o raio da esquina para 14 e eu vou em frente e nas Fronteiras Checa porque nós não precisamos disso. E precisamos escolher a cor primária para esse quadrado. A próxima coisa que precisamos é adicionar algumas sombras para que possamos facilmente escolher sombras aqui e isso é ótimo. E, finalmente, precisamos de um ícone de mais bem no centro desse quadrado, e temos em nossa multa mais que é colocá-lo aqui. E vamos mudar a cor para Branco, e eu vou fazer com que 20 por 20 grandes almas e vamos elegê-lo e alinhá-las verticalmente e horizontalmente. E agora é hora de agrupá-los. E isso é a faculdade, não é? Inferior ótimo. Então temos todos os ícones e botões que precisamos. Agora é hora de organizá-los. Vou mudar a altura novamente para 87. Acho que isso é apropriado. E agora vamos eleger todos esses ícones e Quicken, distribuir uniformemente e, em seguida, agrupá-los. E novamente, vamos selecionar o retângulo e também nossos ícones e mais uma vez alinhá-los ao centro. Tudo bem, agora eu vou mudar o preenchimento desses ícones de casa, então nós precisamos possuí-los novamente. Caso contrário, não podemos abalar o espaçamento. É 51. Eu vou fazer 25 ótimo. E também a partir do ícone de pesquisa para estes botão inicial. Eu vou fazer 42 e estes pro disparando, também 25 para a direita grande e 42 para estes, como botão em, digamos, ícone do coração, que parece ótimo. Você pode estar se perguntando por que eles não são colocados uniformemente. É porque às vezes, a fim de manter o equilíbrio fora de nossos ícones, precisamos tentar o ritmo da diferença para equilibrar o manualmente. Então eu acho que é o melhor espaçamento possível para aqui estão agora que nós criamos nossa guia são nós podemos criar um símbolo, nem para usá-los facilmente. Então vamos selecionar todos esses elementos e também este indicador home e o retângulo e clique em criar símbolo. E aqui podemos escrever barra Tab. Incrível. Então, de agora em diante, sempre que precisarmos da barra de parada, podemos facilmente inserir humanos escuros. E aqui está o nosso sapateiro. Isso é incrível. Agora é hora de criar nossos posts para fazer isso. Vamos arrastar e soltar por aqui. Lá vamos nós. Eu usei um atalho para fazer isso e oitenta o botão você no seu teclado. E então vamos fazer 341 por 341. E também vamos mudar o raio do canto para 36 desmarque essas bordas. Ótimo. Você pode ver que temos 17 pixels da direita e 17 células grandes da esquerda, e tudo bem. Então agora é hora de adicionar nossa foto aqui. Como podemos fazer isso? Podemos usar fotos aleatórias, ou podemos ir com pontos de splash e obter a foto que queremos. Então eu já fiz algumas pesquisas e encontrei algumas grandes imagens para o nosso projeto. No entanto, você pode usar se quiser. Então agora vamos em frente e abrir os arquivos de fotos. Lá vão as imagens e o número um vai ser a nossa primeira imagem. Lá vamos nós. Vamos colocá-lo aqui e agora precisamos selecionar a foto e também o retângulo que acabamos de criar ambos e clique em desmascarar Perfeito. E agora vamos mudar o nome do grupo para postar um, e provavelmente é ótimo adicionar algumas sombras. Então vamos usar o eu deixá-la cair e selecionar uma das cores desta foto. Acho que esse azul seria ótimo. No entanto, precisamos diminuir a opacidade para 15. E também vamos mudar o X 24 e do porquê, para 11 e o Blair para 29. Perfeito. Como você pode ver, nós não temos nenhum imposto aqui, então vamos criar um Isso é certo. Hora da praia. É bastante relevante. Não mudei para a direita média, vamos colocá-lo aqui. E isso é duplicado porque precisamos de legendas também. E aqui podemos escrever um dia tão incrível e ensolarado em Vamos torná-lo 16 e também regular. Tudo bem agora nós precisamos escrever nossa hashtag então vamos direito hashtag hash tag praia Sunny no verão High Stag. E então vamos aumentar a linha alta para 24 Muito impressionante. Agora é hora de checar nossas almofadas, então vamos selecionar a hora da praia, que é o nosso título, e você pode ver que são 25. Vamos fazer com que 24 a parte inferior preenchê-lo. Seis. Vamos fazer oito, enquanto alguns. E também aqui temos 27. Isso é fazer 24 que é como o nosso acolchoamento esquerdo. Então, você pode ver que não há contraste suficiente aqui e nossos impostos? Não tão legível? Então eu vou te ensinar treek, a fim de resolver esse problema que é inserir uma forma. Você é, por exemplo, um retângulo e arrastá-lo e soltá-lo e em Fronteiras Checa porque nós não precisamos disso e colocá-lo logo acima de nossa imagem. Ótimo. E, em seguida, clique sobre estas cores e usar Grady Int e clique no círculo e diminuiu o todo pensamento para zero e, em seguida, clique no outro círculo e usou o conta-gotas para escolher este azul. E também, se eu clicar sobre estes ganho circular pode ver que é branco. Posso torná-lo preto ou o mesmo branco. Acho que preto é melhor. Você pode ver o quão incrível é fácil? Então, o que mais precisamos? Precisamos de um ícone de coração, nem para mostrar o número de curtidas que este post recebeu e também o número de comentários. Então vamos em frente e abrir nossos arquivos Ícones Goto e aqui nós temos como lá vamos nós Vamos colocá-lo ali e uma escala para baixo para 14 almas pico e também mudar seu colarinho para branco . Estes são os ícones SF pro, e você pode obter o software no site Apple Developer gratuitamente. E eu também posso mudar a coisa aqui para médio para luz. Ótimo. Então eu preciso de texto que está certo, 1.2 k e mudar a cor do texto para Branco e alinhá-los verticalmente e também disse que o espaçamento entre os dois quatro. Ótimo. Então vamos agrupá-los e também mudar o nome do grupo para curtidas. E então precisamos adicionar os comentários ali mesmo. Então vamos em frente e trazer o comentário. O ícone de comentário É aqui que ele é colocá-lo lá e copiar e colar o texto e alterá-lo para 220. Gagne disse. O espaçamento para quatro e agora vamos agrupá-los e mudou seu nome para comentar e o preenchimento para a esquerda seria oito. Isso é agrupar estes dois direito como e comentar e verificar o preenchimento direito seu 25 Vamos torná-lo 24 deslocamento segurar e selecionar título tese para alinhar a verticalmente. Tudo é ótimo, mas eu acho que é melhor mudar o peso desses ícones para pensar que é incrível, tudo bem. A próxima coisa que precisamos fazer é criar as informações do proprietário bem ali. Então precisamos adicionar um círculo para a imagem pro fight. É 38 por 38. Eu acho que está tudo bem e isso é nas Fronteiras Checa. E novamente precisamos usar o banco de dados de horários, a fim de adicionar um rosto ao nosso círculo. Você também pode atualizar os dados se você não estiver satisfeito com a dívida. Eu acho que é ótimo. E depois uma mensagem. Isso é certo. Tudo bem. Subjacente duro disse isso. Ela é o meu I D em. Vamos fazer comer 16 pixels e o preenchimento para a esquerda pode ser oito e também mudou. Aguarde do tema regular. Ótimo. Então vamos em frente e agrupá-los e escrever proprietário do post. Vamos sacudir o pad ing's. É 12 de baixo e disse da esquerda, vamos fazer 16 da esquerda e oito de baixo. Isso é bonito para nós. A última coisa que precisamos para completar a criação do nosso post é adicionar e mais abotoado logo ali temos é em nossos ícones Lá vamos nós. É 18 por 19 pixels. Isso está tudo bem. Isso definiu o preenchimento direito para 16 também. E o estofamento inferior para 17. Isso é muito incrível. E agora podemos agrupar todos esses elementos e colega post um. Fantástico. Então agora é hora de criar nosso segundo post. Mas antes de fazer isso juntos, vou pedir para pausar o vídeo e ir em frente e projetá-lo para você mesmo. Você pode escolher qualquer foto que você quiser e qualquer conteúdo que você quiser. Vá em frente e faça. Tudo bem. Bem-vindo de volta. Você projetou seu post? Espero que tenha feito isso. Então agora é hora de fazer vocês juntos. Acho que nos esquecemos de agrupar esses elementos também. Então vamos em frente e colocá-los aqui e chamá-lo de “post um”. Vamos movê-lo um pouco para cima e eu vou duplicá-lo. Ótimo. Isso é alto. Uma tese por um segundo. Agora precisamos mudar. A foto percebeu o imposto e também a imagem do perfil e esse nome de usuário. Então, como você pode fazer isso? Você pode trazer sua própria foto ou você também pode usar alguns plugins para fazer isso. Por exemplo, eu tenho aqui alguns geradores de conteúdo. Como você pode ver, eu posso procurar qualquer pé que eu quiser, ou aqui tão bem quanto você pode ver, há diferentes grupos que você pode escolher. No entanto, para essas pontuações, preparei outra foto que você pode ter acesso a partir de imagens. Lá vamos nós. Isso é dragão. Largue isso e eu vou segurar a tecla Command e clicar na nossa foto e remover isso. E em vez disso, vamos colocar essas fotos bem acima da máscara. Incrível. Então, para essas fotos, eu vou mudar a cor de gradação daquele azul para algo assim. Isso é muito bom. E isso mudou o título para foto Shoot e também o subtítulo para o último dia fora desses projeto Awesome. E também vamos mudar as Hashtags para fotografia Warrick e modelagem. Ótimo. Você viu como os anos oitenta são para criar novos conteúdos? Agora vamos mudar o nome de usuário aqui para qualquer coisa que você quiser. Você pode adicionar seu uso, seu nome ou qualquer outra coisa, então vamos escrever seu nome de usuário e mudar a foto novamente. Atualize os dados. Isso é incrível. E a última coisa que precisamos fazer é mudar as sombras então vamos selecionar nossa máscara e mudar a sombra para cinza e 15. Isso é também agora você pode apresentar um post anterior e colocar o segundo post aqui abaixo da nossa barra de toque . Vamos colocá-lo para baixo. Também disposta. Aqui, chega. Muito obrigado por assistir o estúdio. Espero que tenha gostado no próximo vídeo. Nós vamos projetar as histórias e colocá-las bem acima de nossas postagens. Então vejo você então. 79. Histórias: Oi, todo mundo. Bem-vindos de volta a outro vídeo fora deste curso nesta lição. Vamos projetar nossas histórias e colocá-las ali. Então, sem mais delongas, vamos começar. Primeiro de tudo, vou criar alguns círculos. Então, vamos segurar o turno. Lá vamos nós. E vamos fazê-los 68 por 68 e depois sacudir as fronteiras. Vamos sacudir o estofamento. É 17. Isso é ótimo. E agora vamos duplicar e colocá-lo bem ali. E se eu segurar o chefe e tudo e tentar duplicá-lo arrastando-o, e eu colocá-lo aqui com um preenchimento de pixels. A partir de agora, se eu usar o comando D, ele será colocado automaticamente no local certo. Isso é fantástico. Agora vamos escolher todos eles, e vamos adicionar algumas fotos a eles. Então, como podemos fazer isso? Você está certo. Você pode ir e usar os horários, banco de dados, esboçar faces de dados que, uh, isso é ótimo. Se você não estiver satisfeito com essas fotos, podemos atualizar os dados tanto quanto você quiser. Veja como chás fáceis. Tudo bem, a próxima coisa que precisamos fazer é mudar a foto deste círculo porque a primeira foto vai ser a foto do dono da conta. Então vamos em frente. Este é o nosso dono e copiar e colar essa foto que está em Chek Shadows e Scary até 68 e colocá-lo em vez disso. Circa. Isso é ótimo. Então, o que mais precisamos fazer? Precisamos adicionar bordas a essas fotos. Então vamos agitar bordas e mudar o com 22 E aqui eu vou usar Grady INTs, e a primeira cor vai bater este, e o 2º 1 vai ser este, e isso mudou a direção. Ótima. Mas, na minha opinião, é melhor diminuir o dedo do pé da onda 1,5. É muito melhor, e a última coisa que precisamos fazer é adicionar um botão de adição ali. Então vamos em frente e inserir círculo e vamos torná-lo 14 por 14 pixels e em Agitar as bordas em, Vamos definir a cor para diss preto e então eu vou me mover, comer bem acima de outros círculos e colocá-lo aqui. Então a última coisa que precisamos é adicionar um ícone de adição a ele. Lá vamos nós, e isso está diminuindo para seis e colocá-lo bem ali e mudar sua cor. Dois. Branco e vamos sacudir as almofadas. 44 e quatro. Isso é ótimo. Isso é o grupo deles ótimo. Tudo bem. Agora vamos agrupar todas essas fotos e escrever histórias, e vamos definir o título superior para oito. Ok? E eu vou seguir em frente e criar uma linha a fim de separar essas duas seções. E vai ser 17 em 17 da direita? Incrível. E também vamos definir a cor para E 99 qualquer noite. Ok, vamos fazer 131 e 131. Ok. E verifique o estofamento. São 11. Vamos fazer 17 de cima e também 17 de baixo. Ótima. E a última coisa que precisamos fazer é verificar o espaçamento entre esses dois postes. Então, como você pode ver aqui, temos 32 escolhas. Almas. Vamos fazer 24. Isso é incrível. Muito bem, pessoal, espero que tenham gostado deste vídeo. Vejo-te no próximo vídeo. 80. Página de perfil: todos voltarão a outro vídeo deste curso neste vídeo. Vamos desenhar o nosso perfil juntos. Então, sem mais delongas, vamos começar. Nós duplicamos estes quadros de arte e vamos mudar seu nome para “pro fine”. E então precisamos remover esses elementos porque não precisamos deles. Ótima. Tudo, menos o nosso sapateiro. Primeiro, porque é o nosso quadro de arte de perfil. Precisamos desativar este botão inicial para que sua aparência seja mudada para outra coisa . Se você olhar para os ícones que você tem aqui, nós temos casa o ativo. Isso é dragão. Largue isso. Como você pode ver, é um esboço. Não posso gostar dos outros. Então, como podemos mudar isso? Porque está ligado, exceto símbolo da Apple. Podemos facilmente clicar duas vezes sobre isso. É como um texto e copiá-lo e novamente, clique duas vezes sobre este e ritmo. É tão fácil, certo? Ótima. A próxima coisa que precisamos fazer é criar nossa imagem de perfil bem ali. Então vamos em frente e inserir um círculo e segurar o turno. Lá vamos nós. Isso está em Fronteiras Checa e altere-o para 90 pixels por 90 pixels. Perfeito. A margem esquerda deve ser 29 e o preenchimento superior deve ser 90. Ótima. Então vamos adicionar uma foto ao nosso skate de dados círculo. Shada enfrenta e é refrescá-lo. Ganho estão certos. Isso é bom. Então precisamos de uma seta para a esquerda, a fim de ser colocado bem ali para nossos fins de navegação . Então vamos trazê-lo também. Nós o temos aqui. Copie e cole. Também podemos criar símbolos para facilitar a sua vida. Tudo bem, agora, vamos criar um texto para os nossos usuários Nome e direita Emma famoso e mudou o telefone para texto SF Pro e também entre dois médio grande e mudar a cor para 40 árvore 40 e 43 Grande e também decide 22 estão certos. Temos 22 células da esquerda. Isso é o suficiente. Vamos duplicar. E aqui eu vou escrever a especialidade dela, que é, por exemplo, fazer uma festa se maquiar artista. Tudo bem, vamos diminuir o tamanho da fonte para 14 pontos e, em seguida, da média para a luz. E também a mudança de cor para nove C nove c e nove c. perfeito. Certo, isso mudou um espaçamento. É 26 para o topo. Isso é o suficiente. E então o que precisamos é criar dois botões diferentes, um para permitir que o usuário siga esse usuário específico e o outro para enviar uma mensagem direta. Então vamos em frente e inserir em torno dele. Vamos fazer com que 116 por 32 nas Fronteiras Checa e o raio de canto para 16 está certo, e então vamos mudar a cor para 4135 F três. Ótimo, vamos à direita, siga e mude para negrito e torná-lo branco. Ótima. Isso os alinhou perfeitamente, e eu vou agrupá-los. Vamos chamá-lo, Siga Martin e, em seguida, que é duplicado e mudou seu nome para Botão Mensagem e remover esses textos e também alterar seu tamanho para 40 por 32. Vou colocá-lo bem aqui com um preenchimento de oito pixels está certo. Agora vamos mudar sua cor para dois D B três e e cinco. Incrível. Para completar a criação deste botão, precisamos de mais uma coisa, que é um ícone. Então vamos em frente e trazê-lo aqui. Temos uma mensagem. Lá vamos nós, isso é alinhado eles incrível. A outra coisa que vou fazer é agrupar estes dois textos para usar. Há o nome certo, e o espaçamento aqui é 13 células picaretas. Vamos fazer 14 e isso é agrupar todos esses elementos, a fim de alinhá-los com a nossa foto. Então, vamos clicar em Alinhar verticalmente. Ótima. Agora eu vou encaixar esses elementos com essas fotos baixas e mudar seu nome para usuários. Informação. Tudo bem. Agora precisamos adicionar outro botão, que é um botão de menu de hambúrguer. Então, vamos trazê-lo aqui. Temos menu, precisamos colocar seus direitos ali, eo preenchimento é 29 que é ótimo, que selecionar são seta para a esquerda, a fim de alinhá-los impressionante. E então precisamos de três impostos diferentes, a fim de mostrar o número de postagens e também o número de seguidores e seguintes. Então vamos escrever fotos e mudá-lo para normal. E também é colarinho para o mesmo cinza aqui. Tudo bem, e vamos fazer 13 pontos, e então eu vou duplicá-lo e colocá-lo bem acima do nosso texto anterior, e isso mesmo, 45 mudar seu tamanho para 14 pontos. Em seguida, selecione os dois e alinhe-os ao centro. Ótima. Vamos agrupar as fotos e depois vou duplicar, o que é aqui e aqui. Vamos escrever seguidores mais uma vez. Isso é mudar para um K e selecionar ambos fora deles e alinhá-los ao centro e mudar seu nome para seguidores. E o último, que está seguindo. E aqui, isso mesmo. 80 e alinhou-os muito bem. Vou chamar isso de seguir também. Incrível! Tudo bem. O que eu vou fazer é definir a luta esquerda para 42 também para os filhos que eles estão acolhendo direito para 42 também. Tudo bem, e então que selecionar todos os três e Quicken distribuir camadas horizontalmente. Agrupe-os. São nossas estatísticas, então vamos o status da faculdade estão certos sobre isso. Agitar o espaçamento deles. São 24, acho ótimo, certo? A próxima coisa que precisamos fazer é criar nossos posts. Então, ao contrário do Instagram que tem Onley fotos quadradas impostas, você vai criar post com diferentes alturas. Isso é fantástico. Vai ser como o Pinterest, então vamos inserir em torno dele aqui e mudar seu raio para cantos suaves, e eu vou mudar seu tamanho para 152 por 144. Ótima. Vamos para as Fronteiras Tchecas. Vou mudar a sua com dois 152. Ótima. Agora vamos duplicá-lo e colocá-lo bem ali e mudar o seu alto, também. 218. Ótima. E isso é duplicado mais uma vez e colocá-lo aqui. E vamos duplicá-lo pela última vez e colocá-lo bem ali. E isso mudou o máximo para 214. Isso é ótimo. Então, agora, em vez de arrastar e soltar nossas fotos aqui e depois mascará-las, eu vou mostrar outra maneira que você pode fazer isso que selecione este primeiro retângulo e ir para sentir e a última opção. Você pode senti-lo com qualquer imagem. Então vamos escolhê-lo de nossos arquivos estão certos. Vou escolher o número três. Lá vamos nós. Pareceu-me certo? E o próximo também. Eu vou escolher o número quatro e o próximo vai nos salvar muito. Nove. O próximo será o número cinco. E para o último, os sapatos número dois que usamos aqui. Isso é incrível. Tudo bem. Tudo está ótimo. Muito obrigado por assistir este vídeo. Espero que tenha gostado. E vejo-te no próximo vídeo. 81. Página da câmera: Ei, pessoal, bem-vindos de volta a outro vídeo desta seção. Neste vídeo, vamos projetar nossas páginas de câmera. Estou tão animada. Então, sem mais delongas, vamos começar. Primeiro, vou inserir outra placa de arte no iPhone acesso. Vamos colocá-lo aqui, e eu vou ritmo Akopian thes barra de status. E também precisamos de indicador em casa. Então vamos inseri-lo barras indicador casa na luz do telefone retratado. Vamos colocá-lo aqui e alinhá-lo. Ótimo. Então, o que precisamos aqui? Primeiro de tudo, vamos em frente e mudar nossos quadros de arte. Nome para a câmera. Fora do curso. Precisamos de uma foto aqui em nosso plano de fundo, então vamos inserir um retângulo e um dragão. Solte-o para alimentar nossa página e colocá-lo sob outros elementos. Ótimo. Não posso verificar fronteiras. Não precisamos disso. Então vamos nos sentir padrão, e aqui eu vou escolher esta foto número seis. Ótimo. Eu acho que é melhor mudar a cor da nossa barra de status de claro para escuro. Como pode ver, diz escuro. Significa que é adequado para fundo escuro. Mas, na verdade, esta é a adoração da luz. Então precisamos de um botão do obturador ali. Então vamos em frente e inserir um círculo e arrastar e soltar aqui. Vamos fazer 60 por 60 e eu vou entrar campos e mudar as bordas Caller toe branco . Em seguida, certifique-se de que ele está no centro opção bem aqui e também mudou com 22.7. Ótimo. Como podem ver, o espaçamento é 27. Vou fazer 40. Lá vamos nós. Eu acho que é bom para Poots, um ícone de configuração bem ali e também uma imagem bem ali, a fim de escolher outra foto da Galeria. Então deixe-me ir em frente e trazer nossas configurações. Posso ouvir que se transformou para comprar 24 pixels. Vamos alinhar esses elementos juntos uma camada de linha para baixo, impressionante e também o preenchimento para a esquerda. Vamos fazer 24 pixels e então eu vou inserir outro círculo aqui, e isso está mudando para 44 por 44 pixels e nos dados anglicanos de fronteiras checas. Porque precisamos de outro rosto. Isso é incrível. Podemos refrescar isso também. Ótimo. Então eu vou adicionar algumas sombras que definem o X 25 o y 22 e uma Blair para adolescente. Isso é incrível, então que selecionar todos esses elementos e permitindo-lhes para o fundo. Certo, vamos verificar o estofamento. 17. Vamos torná-lo 24 túmulo e também alinhar nosso botão do obturador para o centro. Isso é fantástico. O que mais precisamos? Você está certo. Precisamos da seta para a esquerda para tornar o usuário capaz de navegar através do nosso projeto. Então vamos mudar sua cor para Branco. Ótimo. Então agora eu vou ir em frente e duplicar essas aves de arte, a fim de projetar a página que o usuário está modificando a configuração. Então vamos mudar seu nome para as configurações da câmera. E então eu vou remover esses três elementos porque nós não precisamos deles que Mizzou quer dizer e eu vou inserir em torno dele. Dragão. Deixe-o aqui e será 338 por 45 e nas Fronteiras Tchecas. Vamos definir a cor para preto e diminuir a capacidade para 18. Ótimo para isso. Vou usar a opção da Blair. Então, vamos clicar aqui e escolher o jogador de fundo Perfeito, e eu vou aumentar a quantidade jogador de fundo para 41. Isso é ótimo. Então vamos verificar o pad ing Vamos alinhá-lo ao centro e seu preenchimento inferior é 28. Vamos fazer 33 tudo bem, e agora é hora de adicionar nossos ícones. Então precisamos adicionar cinco ícones diferentes aqui. Flash, brilho, contraste, corte e cronômetro. Lá vamos nós. Isso é selecionar todos eles e colocá-los aqui. Vou alinhá-los verticalmente. Lá vamos nós. E então vamos distribuí-los em até mesmo o certo. Então vamos mudar o acolchoamento esquerdo também. 30 grande e também o acolchoamento direito para 30 também. E para estes ícone de corte, vamos mudá-lo para 42 para a direita e 44 para a esquerda. Vamos eleger estes ícones de contrastes e este tango naufragado e alinhar ao centro, e serão 42. Lá vamos nós, e também para thes ícone de corte para a esquerda. Vamos fazer 38. Tudo bem agora vamos selecionar todos eles e clicar em distribuir camadas, e então temos esses indicadores que podemos alterar o espaçamento uniformemente. Então agora vamos fazer 36 grandes almas e agrupá-las e selecionar esses retângulos e alinhando ao centro. Isso é ótimo, certo. Concluímos nossas configurações da câmera e também nossa página da câmera. Espero que tenha gostado no próximo vídeo. Vamos criar nossa página de exploração, então nos vemos em seguida. 82. Explore a página: Ei, pessoal, bem-vindos de volta a outro vídeo desta seção neste vídeo. Vamos projetar nossa página de exploração. Então, sem mais delongas, vamos começar. Primeiro, vou continuar e duplicar esta página de perfil. Lá vamos nós, isso é a faculdade. Explorar. Ótima. E eu vou remover quase todos os elementos aqui exceto nossa barra de status e também nossa torneira são ótimos. Agora precisamos alterar a barra de pesquisa são agora, a fim de alterar a pesquisa. Longe, precisamos separá-lo do símbolo. Então, vamos clicar com o botão direito aqui, separado do símbolo. E aqui vamos clicar duas vezes sobre isso. Lá vamos nós e eu vou mudá-lo de tema para normal Awesome. A próxima coisa que precisamos fazer é adicionar um texto aqui nos lugares do Let's Right. Vamos criar três seções diferentes, lugares populares e populares. Então vamos mudar a fonte. Dois meses, Sarah. Ótimo e mude o caminho para ousado. E também vou aumentar seu tamanho para 30 pontos perfeitos. E vamos mudar sua cor para dese cinza Awesome e seu preenchimento esquerdo vai ser 30. Então é agora é ótimo e, em seguida, precisamos inserir em torno disso aqui. Vamos mudar seu tamanho para 130 por 130. É um raio de canto para 17. E eu vou desmarcar fronteiras agora. Nós não precisamos de cantos suaves, então vamos mantê-lo em torno de cantos e ele parar de adicionar vai ser 16 e 30 para a esquerda. Ótimo, então isso é duplicar esses textos e colocá-lo aqui e mudar seu tamanho para 18. E aqui, vamos escrever folhas de ma e vamos colocá-lo aqui com um preenchimento de 16 pixels. E vamos duplicá-lo mais uma vez e colocá-lo aqui e mudar seu tamanho para 16 e de negrito para regular. E também precisamos mudar sua cor para ver o CD do CD. Lá vamos nós. E aqui, vamos escrever o número fora do posto. Por exemplo, 35 mensagens incríveis e a adição superior começa a escolher células. Vamos fazer três. Isso é incrível. E vou agrupar estes três elementos à nossa volta, e ouvir estes dois textos. Vai ser nossa primeira categoria, então vamos deixar o shopping universitário ótimo. E então eu vou clicar duas vezes sobre isso e vamos para sentir o padrão e escolher uma foto de nossas fotos imagens. E aqui, vamos clicar no número sete. Ótima. Também podemos adicionar algumas sombras aqui para torná-lo melhor. Então vamos em frente e escolher esta cor azul agradável e diminuir o seu tudo para 20%. E então disse o X 2 16 y 28 e Blair para 33. Isso é incrível. E então eu vou ir em frente e duplicá-lo e colocá-lo bem ali, e o preenchimento esquerdo vai ser 16 picaretas almas. E mais uma vez, vamos duplicar perfeitamente. E então vamos mudar essa foto primeiro para o número oito. Ótima. E aqui vamos à direita, França e mudou o número de posts para 13 posts, por exemplo, e o próximo também. Imagem Escolha a imagem número nove. E isso mudou o título para Nova York e o número de postagens para 45. Fantástico, mas também precisamos mudar o colarinho das sombras aqui, então vamos em frente e escolher este e diminuir o Alfa para 20 para este. O mesmo é ótimo, e agora vamos eleger todos eles. Selecione também este título em lugares universitários. Então eu vou continuar e duplicá-lo e colocá-lo bem ali. Nós tínhamos 40 grandes células de margem grande, e isso mudou seu título para tendências. E então eu vou em frente e novamente mudar sua foto para o número 10 Tese Blue Laranja. Então é isso mesmo. Laranja azul. Isso é interessante. E mude o número de postagens, também. 120 e também as sombras para esta pluma mudar o todo pé 20 e o próximo o mesmo processo. Sei que é repetitivo, mas a prática é perfeita. Esse é o número de sapatos 11 e mudou o título para Boardwalk Awesome e mudou um número de posts para 17, por exemplo. Sempre tente usar imagens riel em conteúdo real. Você sabe que é realmente importante, e o último, vamos fazê-lo. É um número 12 e mudou seu nome para Praia e o número de postos para 90 Grande. E não se esqueça de mudar o nome do grupo para tendências e vamos continuar duplicando mais uma vez. E vamos mudá-lo muito popular e colocá-lo sob nossa barra de toque e mudar seu título para popular on. Certifique-se de que o estofamento ele vai ser 40. Ótima. Tudo bem, não se preocupe. Precisamos movê-los. O estofamento de cima vai ser 67. Isso é ótimo. Não vou mudar o conteúdo da última categoria, que é popular. Se você quiser. Você pode fazer isso por si mesmo. Eu não vou tomar o seu tempo, e a última coisa que precisamos aqui é um ícone de busca bem ali. Então vamos em frente e trazer que temos busca Grande, vamos colocá-lo aqui eo preenchimento direito vai ser 30 bem, eo preenchimento inferior vai ser 14. Isso é fantástico. A última coisa que precisamos fazer é mudar essa cor do ícone para o mesmo cinza aqui. Perfeito. Tudo bem agora é explorar. A página está pronta, no entanto. Precisamos de outra página para demonstrar como deve ser o pagamento sempre que o usuário está tentando pesquisar algo. Então vamos chamar este quadro de arte, explorar, pesquisar incrível, e isso removeu o ícone de pesquisa. Então, sempre que o usuário clicar no botão do ali, ele vai ser escondido, e em vez disso vamos apresentar um campo de imposto que ele ou ela pode digitar. Então o que eu vou fazer é ir lá e copiar e colar um dos nossos takes field porque precisamos ser consistentes. Lá vamos nós, Vamos mudar sua cor, nossa cor primária grande. E o estofamento inferior vai ser 30, então aqui precisamos de ataque. Então vamos escrever, viajar e torná-lo regular. E também vamos diminuir o tamanho para 16 pontos e mudar a cor também. A mesma cor primária e o preenchimento esquerdo será 16. Então vamos dar uma olhada. Isso é ótimo. E o estofamento inferior vai ser oito. Perfeito. A outra coisa. Precisamos destes ataques marcador de entrada. Então vamos copiar e colar. Vou colocá-lo bem ali. No entanto, eu vou mudar sua cor para amarelo para esta página. Então o código é F seis B nove e zero. Um grande. A última coisa que precisamos é de uma garrafa para colocar ali. Então vamos trazê-lo aqui de nossos ícones. Lá vamos nós. Vai ser da mesma cor. Você pode mudá-lo se quiser. No entanto, é a mesma cor que estavam usando para este projeto. Vai ser 12 da direita e 6 de baixo. E então vamos em frente e agrupar esses elementos na barra de pesquisa da faculdade. Tudo bem, agora, precisamos mudar algo aqui porque estamos procurando a viagem de guerra. Precisamos remover algumas dessas categorias. Ok, então a primeira coisa que eu vou remover é a seção popular, e então eu vou remover essa categoria laranja azul e mover essas categorias para a esquerda. Ótima. E então vamos selecionar essas duas seções e movê-los para baixo. Vai ser 56 para o fundo. Ótima. E também mova a barra de pesquisa para baixo. E vai ser 32. O fundo. Isso é incrível, não é? Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. E eu vou te ver no próximo vídeo. 83. Página de mensagens: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos projetar nossa página de mensagem. Então, sem mais delongas, vamos começar. Primeiro de tudo, vou continuar e duplicar essa página de exploração aqui. Ótimo em Isso mudou seu nome para mensagens. Ótima. E depois disso eu vou remover quase todos esses elementos e também essas categorias. No entanto, eu vou manter o título de paz, e isso é mudar duas mensagens. Ótima. E depois disso, eu vou, e depois disso eu vou criar três cartões diferentes para nossas mensagens. Então, primeiro de tudo, vamos inserir em torno dele aqui, tudo bem, e vamos mudar seu tamanho para 315 por 85. E também vamos mudar o raio do canto para suavizar cantos e é igual a 20. Fantástico. E então precisamos desmarcar Borders, e isso mudou seu colarinho para branco. E depois disso eu vou adicionar algumas sombras e vamos diminuir o seu tudo muito 12 direita e mudar seu X 2 19 E que definir por que, para 9 e Blair para 38. Ótimo, então precisamos de uma foto aqui, então vamos em frente e inserir o círculo e seu tamanho vai ser 26 por 26 almas grandes e em fronteiras sacudidas. E vamos usar os dados aqui. Ótimo e é esquerda e superior acolchoado vai ser 16. Incrível. E então precisamos de um texto para escrever o nome desse usuário. Isso mesmo, David Smith, e eu vou mudar o caminho para Regular e também seu tamanho para 14 pontos. E vamos mudar a cor também para D, B, D, B e d ser fantástico. Então vamos alinhar esses dois. Tudo bem no espaço entre eles vai ser oito pixels. A última coisa que precisamos é de outra tecnologia. Então isso é duplicado. E aqui eu vou escrever uma nova mensagem de David, e isso é mudar sua cor. O mesmo cinza que temos aqui. E eu vou mudar seu tamanho para 16 pontos e ele parar de adicionar vai ser oito pixels e a luta esquerda e também preenchimento inferior vai ser 16 pixels. Ótima. Agora é hora de agrupar esses elementos e colegas mensagem querem. Tudo bem, então aqui vou eu em frente e duplicá-lo. No entanto, em vez de fazer isso, você também pode criar um símbolo para fazer o processo fora, projetando essas mensagens muito mais rápido. Então vamos em frente e criar um símbolo. E aqui vou eu escrever cartões barra mensagem. Tudo bem, então a partir de agora, se eu for documentar, posso ver carros aqui e colocá-los aqui. Tudo bem. Ótima. Então, agora que temos um símbolo, podemos facilmente mudar tudo aqui. Então agora vamos em frente e mudar sua foto que selecionar isso e clique em dados Atualizar dados para Master. Vamos refrescá-lo mais uma vez. Ótima. E então vamos escolher esse texto. E aqui vou eu mudá-lo para tristeza. Williams, consegues ver? Como é que está? Facilidade? E então isso é usado as apostas e mudá-lo para, por exemplo, Saara postou. Eu sabia que estávamos fantásticos. Então vamos em frente e duplicá-lo e colocá-lo aqui. E mais uma vez, isso mudou esta foto muito bem. E também este nome para Emma Jones. E também vou mudar esse texto para Emma Life seu post. Tudo bem. Isso é fantástico. Espere, se eu quiser adicionar algo aos nossos símbolos? Por exemplo, E se você quiser adicionar um tempo aqui para que o usuário saiba a hora exata em que esta notificação ou mensagem foi recebida? Ou também, é adicionar pequena seta aqui. Então, para fazer isso, porque o que você vê moldes, é tão fácil. Ok, então vamos clicar duas vezes sobre isso. Vai nos levar até a raiz. Ou digamos que o arquivo mestre, eu vou ampliar. Seja qual for a mudança que fizer aqui, se aplicará a todos os carros que acabamos de criar. Então vamos criar ataques à direita uma hora atrás. Vou mudar a cor do mesmo grau de luz que temos. E também vamos mudar seu tamanho para 12 pontos e é direito eo preenchimento inferior vai ser 16 pixels perfeito. E também, eu vou adicionar uma pequena seta aqui, então vamos trazê-la de nossos ícones. Como você pode ver, nós temos uma pequena flecha, então vamos trazê-la para lá. Incrível. E eu vou mudar sua cor para nossa cor primária para que você possa clicar duas vezes sobre isso e escolher nossa cor primária. Fantástico. E está certo. Estofamento vai ser 16 como Ball e seu estofamento inferior vai ser seis. Perfeito. Agora, se voltarmos ao incenso, podem ver que se aplica a todos eles. No entanto, também temos de mudar estes tempos. Então vamos em frente e mudá-lo para duas horas atrás e no próximo 1 a 1 dia atrás. Deixe-me ir ao mestre mais uma vez para ter certeza de que alinhamos esse tempo corretamente . Como pode ver, é a linha à esquerda. Como se ele precisa ser alinhado à direita. Certo, agora está ótimo. E então vamos selecionar todas essas três mensagens e verificar o espaçamento entre elas. É 21. Vamos fazer com que seja 16. Incrível! E também parar de se esconder é 38. Vamos fazer 40. Incrível! Você pode ver o quão poderoso este recurso de símbolo é? Vai economizar muito tempo do que você está projetando uma interface de usuário. Tudo bem. Muito obrigado por assistir este vídeo. Espero que tenha gostado. E eu vou te ver no próximo vídeo. 84. Página de Chat: Todo mundo. Espero que esteja indo bem neste vídeo. Estaremos projetando nossa página de bate-papo. Então, verdade, esta é uma página que quando um usuário clica em uma dessas notificações ou carros vai mostrar o nosso direito sem mais delongas, Vamos começar. Primeiro de tudo, eu vou continuar e duplicar o quadro de arte e vamos colocá-lo aqui, a fim de manter nossa taxa organizada do campus, e eu vou chamá-lo de bate-papo, e então precisamos remover quase tudo. Então, vamos remover esses cartões. E também, surpreendentemente, precisamos remover as torneiras. No entanto, precisamos de um indicador doméstico. Então vamos em frente e copie e cole a partir daqui. Incrível. A primeira coisa que precisamos é de uma barra de navegação. Você pode facilmente ir para inserir maçã no seu. Você I barras de navegação furo iPhone compacto, e aqui você tem duas versões diferentes, porque é o Arya 13. Você gosta de comer. No entanto, em vez de escolher estes padrão e colocá-lo aqui, vou mostrar-lhe como você pode criar sua própria barra de navegação personalizável. Então vamos em frente e inserir um retângulo aqui. Tudo bem, e vamos mudar seu tamanho para 375. Ok e amarre a 88. É o padrão, e eu vou pegar essas bordas e vamos mudar sua cor para branco. Por mais que você possa imaginar, precisamos adicionar algumas sombras em “Vamos mudar”. É tudo muito 15 ótimo. E também é Blair para 41. Ótima. A próxima coisa que precisamos é de um título aqui. Então, nesta página vai ser o nome do usuário. Então é isso mesmo, David Smith. E eu vou mudar sua cor também, este cinza. E também vamos ampliá-lo. Isso mudou seu tamanho para 17 pontos. E também vou mudar de normal. Muito ousado. Fantástico. Então vou entrar no centro vertical e horizontalmente. E o que mais eu preciso? Preciso de uma foto ali e também deixei o Arrow aqui. Então vamos adicioná-los. Eu tenho a seta para a esquerda aqui, então vamos copiar e colar. Vou colocá-lo bem ali. E então isso disse, ele é deixado acolchoado para 24 e seu preenchimento inferior para 20. Muito bem, também temos de colocar estes títulos para baixo e alinhá-lo com a nossa seta verticalmente. Ótima. E vamos selecionar todos esses elementos e colocá-los sob nossa barra de status. Fantástico. E a última coisa que precisamos é da imagem do perfil aqui. Preciso da foto do David Smith. Eu não posso usar os dados porque ele vai me dar uma imagem aleatória, e eu tenho que atualizá-lo até que eu obtê-lo. Então é melhor ir em frente e aqui eu vou clicar duas vezes sobre isso e eu vou escolher esta foto, café e voltar para estas páginas de bate-papo e vamos colá-lo aqui. Lá vamos nós. Seu tamanho é ótimo e está certo. Estofamento vai ser 24 seu preenchimento inferior vai ser 20. Tudo está pronto agora. Podemos criar um símbolo fora da nossa barra de navegação, a fim de usá-los muito mais rapidamente. Então vamos selecionar todos esses elementos, incluindo a barra de status e agrupá-los, e isso é criar símbolo aqui. Isso mesmo, Barra de Navegação perfeita. Então a próxima coisa que precisamos é mudar nossa cor de fundo, então eu vou ir em frente e inserir um retângulo de dois pés nossa página e nas fronteiras checas, e isso mudou seu colar para F cinco se cinco e F cinco. Ótimo como você pode ver, temos um cinza claro, o que é incrível. E agora é hora de criar nossas mensagens. Então o que eu vou fazer é inserir em torno dele e dragão soltá-lo aqui. E isso está fazendo 290x52 nas Fronteiras Tchecas. E também vamos aumentar o raio do canto para 15. Incrível. No entanto, eu vou para Double Creek e este tango naufragado e escolher o canto. E então eu vou mudar seu raio 20 você pode ver como vai ser. E também vamos mudar sua cor do dedo do pé branco, e é hora de adicionar algumas sombras para comer. Vamos mudar. É tudo de 4 a 10. É X 2 para o escritor também . E o Blair para 10 muito bom. Agora vou em frente e criar uma tomada. Isso é certo. Oi, John. Como você está fazendo? Vou fazer o seu regular e também mudar o seu tamanho para 14 pontos. Ótima. E é mórbido aqui, e eu vou alinhar você para o centro verticalmente e seu acolchoamento esquerdo vai ser 17 almas pico perfeito 17 de cima esquerda e baixo. E então eu vou adicionar um tempo aqui. Então vamos escrever 12 Colin quatro. Vou colocá-lo aqui. Isso mudou seu tamanho para 10. E também é cor para DB db. Andy seja ótimo. Isso é alinhá-lo verticalmente e seu preenchimento direito vai ser 16. Isso é incrível. Agora vamos agrupá-los e aqui são deixados preenchendo seus 19. Vamos fazer com que seja 24. Agora está melhor. E a próxima coisa que precisamos fazer é criar outra mensagem, que vem de João em vez de David. Então, aqui, vamos mudar seu nome de grupo para a primeira mensagem. E então isso é criar outro em torno dele aqui, e eu vou fazer você 290 por 70. Ótimo no mesmo raio de canto, e isso é clicar duas vezes sobre isso e desta vez, escolha este ponto de canto direito e diminua seu raio para zero em Fronteiras Checa. E depois vou senti-lo. Nós tínhamos um Grady int, Então vamos clicar no círculo e escolher 50 64 F nove e o outro que é usado 54 3 F e E oito. Ótima. Vou em frente e mudar a direção que vai ser assim ou podemos mudá-lo aqui. Agora está melhor. Perfeito. Então vamos em frente e copie e cole. Esses tanques precisam derrubá-lo e mudar sua cor para a direita, obviamente. E aqui, vamos à direita. Oi, David. Eu sou ótimo. Como você está? Está tudo bem? Incrível. E então eu vou movê-lo para cá e tentar torná-lo menor e alinhá-lo para a esquerda. Eu acho que é melhor definir o com 2 232 Grande. E isso é uma linha para o centro de onde faz cócegas e é deixado. Estofamento vai ser 17. Lembre-se de ser consistente em seu design. Vamos copiar e colar desta vez, tudo bem. 17 de baixo e 17 de direita, no entanto, e eu vou em frente e mudar sua cor para branco e diminuir sua capacidade para 50%. Isso é fantástico. Então vamos em frente e agrupá-los, e aqui temos a segunda mensagem, e então vamos duplicá-la, e dependendo do topo vai ser oito Grande. No entanto, desta vez que é clicar duas vezes sobre este retângulo e clique círculo undie e diminuiu o raio do canto para zero e também escolher o círculo e aumentá-lo para 15. Isso é muito legal, certo? Então eu vou mudar o imposto para que você conclua seu projeto. Tudo bem? E lembre-se de mudar esses tempos porque não faz sentido ter o mesmo tempo para todas as mensagens. Então vamos fazer 14 e este também. Tudo bem. E aqui temos a nossa terceira mensagem. E agora temos uma resposta do David. Então vamos em frente e duplicar esta mensagem e colocá-la aqui. Mas antes disso, que seleciona mensagens e verifique o preenchimento. Vai ser 24 também para este 124 E agora vou clicar duas vezes neste retângulo e mudar o seu máximo para 70. Incrível! E vamos alinhar estas tomadas à esquerda e mudá-lo para Obrigado. Eu estou bem. E sim, eu tenho. Então você está livre esta noite? Ótima. E desta vez vai ser o ano 17 a partir de baixo e torná-lo 17 a partir da esquerda. Também para este também. Ótima. Agora precisamos de outra mensagem do John que seja duplicada. Esqueci de mudar o nome do grupo. Então, primeiro de tudo, vamos mudar para a quarta mensagem chegar. E agora vamos mudar esses impostos, também. Isso é ótimo. Sim, estou livre depois das nove horas. E vamos diminuir o com 2 224 É melhor. Quase me esqueci. Vamos fazer 12 25. E para este, isso faz com que seja 12 35 ótimo. E esta vai ser a nossa quinta mensagem. Então vamos à direita, quinta mensagem. E então isso é duplicar nossa mensagem anterior e colocá-lo bem ali. O planejamento superior da nossa mensagem anterior será 24. Então é certo e também para este incrível. E isso mudou suas tomadas para Bem, eu queria em branco você para, você sabe, e também precisamos diminuir sua com 2 232 e isso mudou. É hora de 1245 incrível. E então isso mudou seu nome de grupo para seis mensagens, e a última mensagem vai ser esta. Então vamos duplicá-lo e colocá-lo aqui com uma margem de 24 pixels. E então está certo. Muito obrigado pelo convite. Adoraria te ver e depois me trocar. Está na hora de 1255. Ótimo e que eu mudar o nome do grupo para sétima mensagem estão certos. Tem sido tanto que eu sei. No entanto, é realmente necessário prestar atenção aos detalhes, e você está projetando uma interface de usuário. Então precisamos de um recipiente, a fim de permitir que o usuário digite dor. Vamos em frente e fazê-lo. Isso é inserir um retângulo. Mas está bem ali debaixo do nosso indicador doméstico, e o seu tamanho vai ser 375 por 71. Está tudo bem, vamos na Czech Borders e preenchê-lo com cor branca. Acho que é uma boa ideia ter algum tipo de fronteiras. No entanto, vou diminuir seus 20% demais. E também é com 20 pontos para, e então precisamos mudá-lo de dentro para fora. Lá vamos nós, e então isso é em algumas sombras. Eu vou diminuir sua oferta para 8% e isso disse, é por que zero bem e o borrão para quatro que é muito bom. Então aqui precisamos de um imposto. Isso é certo. Escreva algo aqui e ponto, ponto, ponto, ponto e eu vou mudar sua cor, também. B seis, b seis e b procura. E também é divertido tamanho para 14 pontos. Vamos mudar. É divertido para o texto pro SF. Agora é melhor, tudo bem, e é parar de bater vai ser 17 e 44 para a esquerda, então precisamos de mais duas coisas aqui. Um é um ícone de mais aqui, a fim de anexar algo. Por exemplo, uma foto ou um vídeo. Então vamos em frente e trazê-lo do nosso arquivo de ícones. Lá vamos nós. preenchimento da esquerda vai ser 15 ótimo, e o outro é um ícone de emoji para adicionar alguns emoji. Então vamos trazê-lo. Também aqui temos Emordi como em Vamos colocá-lo aqui 20 para a direita e 17 para o topo Muito bom, e eu vou em frente e agrupá-los. Vamos à direita, à direita, contentor de mensagens. Ótimo! Então eu vou agrupar todas essas mensagens e isso é certo e trazê-los para baixo assim porque nós precisamos adicionar a última coisa, que é a data de saída desta conversa. Então vamos em frente e inserir em torno dele e torná-lo 77 por 20 e também nas fronteiras checas e mudar sua cor para branco. Vou alinhá-lo ao centro. Então precisamos de uma mensagem que esteja certa. Segunda-feira, 18 Março e eu vou mudar seu tamanho para 11 pontos e sua cor, também. 83 93. Isso é um lago ambos os jogadores e alinhá-los verticalmente e horizontalmente e também agrupá-los aqui. Eu vou escrever data e parar de adicionar, vai ser 16. Incrível. Então, nós projetamos com sucesso nossa página de bate-papo juntos, tudo bem aí. Quase não, No entanto, precisamos de outro quadro de arte, então vamos duplicá-lo. Precisamos apresentar um teclado aqui, então vamos conversar, digitando, digitando, e eu vou em frente e remover a última mensagem e vamos remover este indicador e está emoji ligado. Vamos colocá-lo bem ali e vamos mover o resto das mensagens um pouco para cima, algo assim. E então temos um teclado aqui para que possamos ir em frente e trazê-lo aqui, colá-lo e colocar nosso contêiner de mensagem certo logo acima dele. Eu vou mudar sua altura para 50 tudo bem, e também precisamos mudar essas tomadas também. Este. Muito obrigado pelo convite. Então vamos em frente e alinhá-lo às coisas esquerda e direita muito para o convite e em seguida, mudar sua cor para esta diversão. E vamos trazer o marcador de entrada de texto como Whoa precisávamos aqui, tudo bem, tudo está ótimo. A última coisa que precisamos fazer é adicionar o botão de mensagem de areia ali. Então vamos em frente e trazer seu ícone de nossos ícones. Temos um ícone de envio aqui. Vamos trazê-lo aqui. É esposa, então você não pode ver isso. Vamos em frente e criar um círculo. E em Jake Borders, isso é torná-lo 24 por 24 e escolher a cor primária para isso. Então eu vou colocá-lo bem abaixo do nosso ícone de areia. Aqui vamos nós. Vamos alinhá-los verticalmente e horizontalmente e eu vou agrupá-los e chamar seu e inferior e sua margem vai ser 13 para a esquerda. 13 o fundo e furando para o topo. Tudo bem, tudo está feito. Criamos duas páginas diferentes juntas. Espero que tenha gostado, e vou te ver no próximo vídeo 85. Página de configurações: Ei, pessoal, bem-vindos de volta a outro vídeo deste curso neste vídeo. Vamos projetar nossa página de configurações. Então, sem mais delongas, vamos começar. Primeiro de tudo, eu vou continuar e duplicar essas digitação de bate-papo, e isso mudou seu nome para configurações. E então eu vou em frente e remover quase todos os elementos aqui. Tudo bem, precisamos desse indicador doméstico, no entanto, então eu vou mudar nossa barra de navegação neste espaço. Não precisamos desta imagem de perfil. Então, como posso remover isso? Eu posso facilmente clicar com o botão direito aqui e desanexá-lo do símbolo e, em seguida, escolher a foto do perfil e remover isso. E depois disso, vou alinhar essas tomadas ao centro e mudá-las para configurações. Ótimo. Então, nesta página, vamos criar duas seções diferentes. Na verdade, vou criar dois cartões diferentes e incluir nossa opção de configurações. Tudo bem, a primeira seção será notificações. Então vamos escrever notificações, e eu vou mudar seu destino um regular e mudar seu tamanho para 16 pontos. E também é cor. Dois c oito, c oito e veja oito. Isso é ótimo. Vamos colocá-lo aqui, tudo bem. Anexar que precisamos é criar um retângulo. Oh, então vamos adicionar isso aqui. E eu vou mudar seu tamanho para 329 por 139. E isso é mudar seu raio de canto para 17 tudo bem, e em Fronteiras Checa e alimentá-lo de cor branca. Então precisamos adicionar algumas sombras. Então vamos mudar. É meu para 14 e ar dividido para 43. E também vamos diminuir essa oferta para 8%. Ótimo. Nossa primeira opção será promoções. Eu vou mudar sua cor também, este cinza. Então precisamos de um controlador de busca. Então vamos criar um. Em vez de trazê-lo de algum lugar, vou em frente e mostrar-lhe como você pode criar seus próprios switches. Então, a primeira coisa que precisamos disto aqui, e é fronteiras descontroladas e torná-lo 40 por 17. Tudo bem, e isso mudou o colarinho, também. Oito um 84 f f grande e vamos criar um círculo também, e vai ser 25 por 25 pixels e em Fronteiras Checa, e eu vou usar o mesmo Grady Int que usamos em nosso quadro de arte anterior. Então vamos em frente e criar um Grady int e escolher este como a nossa primeira cor e este fundo como o nosso segundo. Então isso mudou a direção incrível. E depois disso, vamos alinhá-los verticalmente e mover este círculo para a esquerda. Isso é muito bom, e a última coisa que precisamos é adicionar algumas sombras ao círculo. Então vamos adicionar sombras. Isso mudou o Y 23 e Blair dedão 8. Vamos diminuir seus 4 a 18%. Isso é muito bom. E então eu vou ir em frente e agrupá-los e vamos chamá-lo de switch dash on e vamos criar um símbolo aqui. Activar barra. E agora vamos duplicá-lo e separá-lo de Símbolo e selecionar seu arredondado e mudar sua cor para e seis, e seis e e seis. E agora vamos eleger este grupo OK e certo. Clique e transformar, fugir apresentável e, em seguida, clique no círculo e mudar sua cor para branco. Tudo bem. Depois disso, eu vou mudar seu nome para desligar e vamos criar outro símbolo interruptor barra off perfeito. Então, não precisamos disso agora. Então, sempre que você quiser alternar, ele pode ir em frente aqui e mudá-lo facilmente, certo? Então vamos remover isso. E vou alinhar estes comutadores com o nosso texto, particularmente. E o estofamento à direita vai ser 13. E o estofamento para a esquerda também vai ser 13 aqui. Incrível. Então vamos em frente e agrupá-los em promoções certas. Então nós estamos criando pelo menos em um cartão, tudo bem, A adição superior, vai ser 16. Então vamos duplicar. Tínhamos uma vala de margem de 16 pixels, e eu vou alinhar este texto promocional à esquerda e mudá-lo para novos itens. E vamos fazer isso fácil, certo? E eu vou mudar esses nomes de grupo para novos itens também, e mais uma vez duplicado e mudou o nome para mensagens e torná-lo em perfeito, então que selecionar todos esses elementos e agrupá-los e notificações universitárias incrível. E depois disso, vamos selecionar esta notificação e este grupo e duplicá-los porque precisamos criar outra seção que é geral, e colocá-los com um 40 picaretas. Margem antiga, grande, que está alinhado este título à esquerda e mudá-lo para geral. Lá vamos nós. E primeiro, vou escolher esse retângulo e mudar seu alto para 303 e a primeira opção. Vamos mudar para a linguagem. No entanto, Aqui não precisamos de discurso. Certo, precisamos de uma flecha como a que usamos aqui em nossas cartas. Então, vamos clicar duas vezes sobre isso. E Select Arrow copiado e colado aqui. Vamos colocá-lo bem ali com 13 pixels de margem para a direita, e também eu preciso de outro texto. Então isso é duplicado. E vamos mudá-lo para Inglês, e eu vou mudar o colarinho dele, também. C oito, C oito e ver oito. Perfeito. Tudo bem, vamos colocar aqui. É certo. O preenchimento vai ser um pixels. Vamos selecionar essas duas camadas e alinhá-las verticalmente. E também vamos selecionar nosso idioma e alinhá-los. Vamos mudar a linha alta para 20 e também para Tese, leva para 20 bem e mais uma vez alinhado eles. Agora está ótimo. Vou colocar esta camada de seta para a esquerda para esta promoção mais completa. Mas lembre-se, vamos mudar o nome do grupo para idioma, e vamos colocar este Inglês leva para a linguagem bem, e parar de adicionar, vai ser 16. Perfeito. Então isso muda o item para foto noite mais, e eu vou mantê-lo fora e o próximo a usar disse que você seria. E vamos continuar e mudar o nome desses grupos. Vamos fazer isso ou o modo Hoje à noite e o próximo que você vê celular. Ótimo. Então vamos em frente e duplicar o último item e alterá-lo para ou afins. Vou continuar com ele também. E vamos mudar o nome do grupo para Photo Lark. E para o próximo item, eu vou escolher a tese um e duplicá-la porque precisamos dessa pequena seta e vamos mudá-la para passar código e enfrentar I D. E remover esses ingleses, eu acho que aqui nós precisamos mover esses Inglês um pouco acima. Agora está melhor. E vamos mudar o nome do grupo para passar código e identificação facial e precisamos de mais duas coisas duplicadas. Tudo bem, vamos mudar esses impostos para acordo de usuário e aqui também. Acordo de usuário e por último, mas não menos importante, vai ser privacidade. E agora vamos mudar esse nome de grupo também para privacidade. E, em seguida, vamos selecionar todas essas opções e verificar seu espaçamento. Vai ser 16 e também 16 do topo e 16 do fundo. Certo, então para mudar a altura, precisamos calcular algo. Aqui temos 35, então vamos arrastar e soltar aqui. Agora é 21. Deve ser 16. Então precisamos diminuí-la em cinco pixels. Então vamos fazer 284. E agora está certo. Então precisamos mudar o nome do grupo para geral e tudo está ligado. Muito bem, pessoal, espero que gostem deste vídeo e que eu receba o próximo vídeo. 86. Gráficos: Oi, todo mundo. Bem-vindo de volta a outro vídeo desta seção. Neste vídeo, vamos projetar nossa página de atletismo. Então, sem mais delongas, vamos começar. Primeiro de tudo, vamos em frente e duplicar as configurações não são placa. Lá vamos nós. E isso mudou seu nome para um atletismo perfeito. E então eu vou em frente e remover esses cartões e também tufões e trocar o título desta placa de navegação por um atletismo. Incrível. Então eu vou remover este retângulo aqui porque nós vamos ter algum tipo de círculo bem atrás dessas informações. Então vamos em frente e inserir um círculo. Lá vamos nós e eu vou em Fronteiras Checa e mudar sua cor para Grady Int. E é escolher o primeiro 1 e mudá-lo para 50 64 F nove e o outro para 54 3 f e e 8. Ótimo! E agora vamos mudar a direção da cor. Eu acho que é ótimo, e eu vou movê-lo para baixo bem embaixo da nossa barra de navegação, então ele vai estar aqui e vamos movê-lo um pouco para cima. Então vamos mudar o seu com 2 630 e é alto para 540 Grande. E eu vou colocá-lo assim um pouco para cima. Agora está ótimo. Então vamos em frente e mudar a cor da informação. A primeira coisa que você precisa mudar é nossa barra de status. Então vamos escolher isso e mudá-lo de luz para escuro e, em seguida, que seleciona título e também mudar para branco e por último, mas não menos importante, esta seta esquerda para branco também. Ótima. O que mais precisamos? Precisamos de algumas cartas. Por exemplo. Vou colocar um carrinho grande aqui, a fim de mostrar o número de seguidores e também um gráfico de barras e, em seguida, quatro cartas pequenas logo abaixo disso. Então vamos em frente e inserir em torno dele, e isso mudou seu tamanho para 315 e 317. Tudo bem, e então vamos mudar o raio mentiu para cantos suaves e ajustá-lo para 24. E então eu vou em frente e na Czech Borders e mudar sua cor para branco. Ótima. Isso é uma linha para o centro, e como você pode ver, nós temos um preenchimento de 30 pixels da esquerda e da direita, e é parar de adicionar, vai ser 115 para a borda destes não são placa grande. E então precisamos adicionar alguma sombra. Então vamos em frente e adicionar algumas sombras e eu vou mudar estes todos 4 para 8 e mudar x 2 16 Por quê? Para oito e também Blair para 33. Perfeito. E esse é o Renay, certo? E precisamos duplicar porque precisamos de mais quatro carros. No entanto, preciso reduzi-lo para 150. Ótima. Isso é o que se lê aqui uma margem de 16 pixels, tudo bem. E vamos mudar o raio do canto para 24 também. Incrível. Em seguida, duplicado e colocá-lo bem ali e selects para e duplicá-los e colocá-los aqui mesmo. Perfeito. E eu vou renomeá-los para carta para cartão três, cartão quatro e cartão cinco no primeiro 1 para cartão um. Ótima. Então aqui vou adicionar ataques. E isso é certo. 2566. Vai ser o número de seguidores que mudou seu fundo por dois meses, Sarat, e mudá-lo do normal. Muito ousado. Lá vamos nós. E também vou mudar o tamanho para 28 pontos e mudar a cor para Dis Gray Perfect e a linha oi para 35. Ótima. O combate à esquerda deve ser de 24 pixels e o título superior vai ser 35. Então vamos duplicá-lo e colocá-lo aqui e mudá-lo para numerar fora de seus seguidores, em seguida, alterá-lo de negrito para regular e também seu tamanho para 12 pontos grande e sua cor para ser zero b, e e e G quatro. Ótimo e é acolchoado esquerdo vai ser 24 sua linha alta. Vai ser 21. Ótima. Então vamos definir o cabeçalho superior para quatro pixels. Incrível. E então o que precisamos é de um ícone. Precisamos de um ícone de configuração aqui, e podemos usar a mesma configuração. Eu posso ser usado para a nossa página de cantor. Então vamos em frente e copie e cole aqui. Incrível! E então precisamos mudar sua cor para este. Então eu vou ir em frente e copiar e colar o código e selecionar estas formas e colá-lo aqui . Ótima. Vamos colocá-lo bem ali e selecionar todas essas formas. Vou adicionar bordas porque essas formas eram para o tema. Então eu vou usar a mesma cor e mudar a borda com 20 pontos. Tudo bem. Ótima. E agora é hora de mudar o tamanho de 24 pixels para 18. Isso é ótimo. E o acolchoamento direito é 24. Deixe-me alinhar esta configuração com o nosso número aqui verticalmente. Perfeito. Agora eu vou ir em frente e criar um gráfico de barras aqui você pode ser criado por si mesmo ou você pode usar gratuitamente. Vocês, crianças, para este propósito. Você também pode comprar alguns que você gosta. É se você quiser para o seu projeto. No entanto, nestas partituras vou ensinar-te como podes criar o teu próprio gráfico de barras. Então vamos em frente e inserir em torno dele. Lá vamos nós. Vamos bordas desmarcadas e diretamente Kan Dat e escolher dois pontos e mudar o raio 20 Grande. Agora eu vou ir em frente e mudar o seu com e esconder para oito e 55 respectivamente. Ótima. E então isso mudou um colar para duplo E 700. Ótima. Agora vamos duplicar e colocá-lo aqui com uma margem de quatro pixels. Ótimo! E desta vez vou mudar o seu máximo para 81. Então deixe-me mudar o seu grande. E então eu vou mudar sua cor para duplo F seis C e 40. Incrível. E vamos em frente e agrupá-los e colega Colin um. Precisamos de um encontro aqui. Então vamos escrever sete barra 12 e mudou seus fonds para SF pro display e seu tamanho para oito pontos. Ótimo e deixe-me mudar o estofamento superior para quatro e novamente, isso é agrupá-los e chamá-los de coluna um. Perfeito. Agora podemos duplicá-lo com preenchimento de 20 pixels. Ótima. E vamos usar ambas as barras e aumentar suas alturas assim muito bem. E também precisamos mudar o dia aqui. De 7 para 8, ele vai estar chamando e mais uma vez duplicado e selecionar ambas as barras e diminuir suas alturas. Algo assim, eles não devem ser precisos por enquanto. No entanto, se você estiver trabalhando com riel mais tarde, certifique-se de que sua precisa, em seguida, que mudou o dia para nove e que é chamá-lo chamar três em mais uma vez duplicá-los e selecionar barras e aumentar suas alturas para algo assim. Eu vou selecionar thes barra especificamente um aumento novamente e mudar o dia para 10 e vai ser Chamá-lo para e novamente, vamos duplicá-lo e selecionar essas barras e diminuir suas alturas. Incrível. E vamos mudar o dia para 11 e vai ser a nossa coluna. Cinco. E precisamos de mais dois. Lá vamos nós. Isso é sapatos aquelas barras e diminuir o tamanho no disco um especificamente e mudar o dia para 12 e me renomear duas Coluna 6 e a última vai ser ainda mais curta. Então vamos selecioná-los assim. E também o dia para 13. Perfeito. E vamos mudar seu nome para chamá-lo de sete. Tudo bem agora, eu vou em frente e agrupar todos os Collins e tabela de barras direita. Ótima. E agora vamos eleger nosso cartão. Um, que é este e em linha para o centro. Ótima. E o estofamento inferior vai ser 23. Isso é ótimo. Você pode ver como é incrível? Precisamos de mais uma coisa aqui. Precisamos de algum tipo de bolha aqui para mostrar informações detalhadas, como uma porcentagem de aumento ou diminuição. Então vamos em frente e criar um. Vou inserir em torno dele novamente chegou. Vamos diminuir o raio do canto 26 e mudar o com 2 70 Grande. Vou injetar grandes bordas, e preciso de um retângulo aqui para criar pequenas flechas. Então vamos inserir um retângulo. Segure o turno perfeito em Fronteiras Checa. Clique duas vezes sobre isso e seleciona canto superior e aumenta o raio para dois. Perfeito. E então eu vou girá-lo para a esquerda em 90 graus e dimensioná-lo para baixo para oito pixels. Ótima. E então vamos ao contrário de seu tamanho e aumentar o com 2 10 Isso é muito bom. E agora vamos eleger ambas as formas. Ótimo alinhado verticalmente. Como você pode ver, é 19 e aqui 18, mas precisamos mudar o tamanho deste retângulo. Precisamos aumentar sua altura em um grande, e agora é 19 e 19, então ele foi posicionado bem no centro, e então isso é um como ambos e mudar sua cor do dedo do pé branco. E eu vou usar o sindicato, a fim de torná-los uma forma combinada. Ótimo E por último, vamos adicionar algumas sombras. Então vamos diminuir tudo para 10. E é por isso que para quatro e Blair para 10 estão certos. Isso é muito bom. Precisamos de um ano fiscal também. Então vamos escrever menos cinco por cento. E eu vou mudar o tamanho da fonte para 12 e alinhá-lo ao centro vertical e horizontalmente. Ótima. E agora vamos agrupá-los e chamá-lo de Bobbo Perfeito. E então eu vou posicioná-lo aqui e reduzi-lo para 50 por 31 pixels. Então vamos colocá-lo aqui. Ótima. Então, sempre que o usuário clica em um desses Barnes esta bolha de madeira muito boa. E agora vamos agrupar todos esses elementos. Então vamos eleger descarga e também esta bolha e, em seguida, este cartão e é números grande e agrupá-los e cartão de declaração Collett. Incrível. Acho que é uma boa ideia aumentar o tamanho do texto aqui na nossa bolha. Então vamos em frente e alinhá-lo ao centro e também aumentá-lo para 10. Agora é visível, suponho. Muito bom. Tudo bem, agora é hora de ir em frente e projetar nosso próximo gráfico. Então aqui eu preciso de outro número como este. Então vamos em frente e copie e cole aqui, e eu vou diminuir para 15. Perfeito, e é acolchoado esquerdo vai ser 17 e seu preenchimento superior deve ser 15. Ótima. Então agora vamos mudar para 10,2 mil e então eu preciso de outro imposto como este. Então vamos copiar e colar aqui, e eu vou aumentar seu tamanho para 14 e mudá-lo para como deveria ser regular. E vamos mudar a linha Hi para 10. Perfeito. E é deixado. A luta vai ser 17 grande, e precisamos mudar a altura da linha das apostas também para 19. Agora podemos ver que temos um top de quatro pixels, adicionando, Então vamos fazer três. Isso é muito bom. Desta vez. Eu vou em frente e criar algum tipo fora de linha, então eu vou usar Victor Tool e aqui vai ser meu ponto de partida. Então eu vou clicar aqui e arrastá-lo de alguma forma assim, e isso é clique aqui novamente e aqui e aqui. Perfeito. Agora vamos em frente e aumentar a borda com 1,5, e eu vou mudar seus fins para este. Você vê a diferença. Vai fazer a sua rodada, o que é muito bom. E depois disso, vamos mudar a cor da mesma laranja. Se tivermos aqui, certifique-se de ser consistente em seu design. Vou descer e precisamos de outro caminho. Então vamos criar um o mesmo ponto de partida aqui e que é terminá-lo, como este perfeito novamente mudou a borda com 1.5, e está terminando para este, e você pode mudar sua cor para dois c D nove e C cinco. Incrível. E precisamos de mais um caminho. Então vamos criá-lo o mesmo ponto de partida aqui e aqui. Ótima. Isso é mudar sua borda com 1,5, bem como sua cor para o mesmo amarelo que usamos para o nosso gráfico de barras. Muito bom, então que selecionar todos eles e agrupá-los, e eu vou chamar isso de acusação mentirosa. Ótima. No entanto, eu vou mudar sua com 2 116 ela falsificou e, em seguida, que selecionar o nosso cartão e alinhá-los horizontalmente. Como podem ver, temos 17 da esquerda e 17 da direita, e precisamos ter 16 do fundo perfeito. E agora vamos agrupar esses elementos. Isso tem como perfeito e para o nosso próximo cartão, precisamos de todos esses elementos. Então vamos em frente e copiar e colar esses tanques. Ótima. E vamos mudar os primeiros tanques para 1,2 K e o próximo para comentar. Vai ser o número dos nossos comentários. E então eu vou criar outro caminho em um começou a partir daqui e terminou aqui algo como isso. Perfeito e mudou a borda com 1,5 também. E este final para o meio e novamente eu vou usar este amarelo Perfeito para estas cargas. Vou usar alguns círculos. Vamos criar alguns fora deles em Fronteiras Checa e ajustado para se 80 a 6 A e F nove Grande, que escala para baixo para três pixels. Incrível. Vou duplicar e colocá-los aleatoriamente aqui, aqui, aqui, bem ali. E alguns deles aqui. E isso é agrupar esses elementos agora com nossos cartões e também esses textos, e vai ser nosso grupo de comentários. Perfeito. Em seguida, certifique-se sobre o alinhamento. Então precisamos agrupar esses elementos novamente e é chamado de acusação mentirosa também. E como podem ver, temos 17 da esquerda, 17 da direita, e precisamos ter 16 do fundo. Incrível. Muito bem, para a nossa próxima carta, vamos em frente e de novo. Copie e cole esses elementos aqui. Vai ser 17 para a esquerda e 15 para o topo. Vou em frente e mudar o topo, adicionando o imposto o tempo que deve ser. 15. Também este. Agora é ótimo, então isso mudou este número para 255 e mudar esses impostos, também. Novo seguidor. E novamente, vamos criar outro caminho e começar a partir daqui ano. Nós não temos nenhum cuidado neste tipo de carga de linha e terminá-lo aqui. Perfeito. Vamos mudar a borda com 1,5 e mudar o final para o meio e também mudar a cor da borda para este laranja muito bom. E agora vamos selecionar o nosso caminho e mudar o seu com 2 116 Grande. Vamos alinhá-lo para o centro perfeito. E agora vamos ter 26 de baixo e vamos agrupá-los e chamá-lo de novo seguidor Awesome. E para o último cartão que selecionar esses elementos e copiá-lo e colá-lo. E vamos mudar este número para 190 e isto leva duas mensagens. Ele vai mostrar o número de mensagens que o usuário recebeu. E aqui precisamos de outro gráfico de barras. Então eu vou ir em frente e cortá-lo colar uma dessas colunas ano depois, vamos reduzi-las. 29 pixels e eu vou selecionar o amarelo e colocá-lo aqui com uma escolha auto título . E então eu vou clicar com o botão direito sobre essa transformação, virar vertical. Ótima. E eu vou colocá-lo bem onde lá, assim. Ok, vamos agrupá-los e duplicados com um preenchimento de seis pixels. Ótima. Agora vamos diminuir a altura da paz Bar laranja para 26. E também este amarelo, 2 16 e mais uma vez duplicado e diminuiu este laranja 20 e o amarelo para 12. E novamente, precisamos diminuí-lo para 14 e este um dedo oito e novamente, este deixa ser oito e o amarelo 1 para 4. E de agora em diante, precisamos reverter o lugar fora destes laranja e este amarelo. Ok, então vamos duplicá-lo e clique direito, transformar, fugir apresentável e mudou a cor deste laranja, um para amarelo e este amarelo para laranja perfeito e novamente duplicá-los e aumentar o seu tamanho. Por exemplo, este laranja 1 a 18. E este amarelo 12 22 o último, o laranja para 22 o amarelo para 31. Muito bom. Então aqui está o nosso gráfico de barras. Então vamos mudar o nome. E como podem ver, o nosso acolchoamento direito é 19. Então precisamos fazer 17. Como podemos fazer isso? Podemos facilmente aumentar o com por dois. No entanto, precisamos escalá-lo. Ok, então aqui, vamos escrever 116 e selecionar este cartão e alinhá-los horizontalmente. Lá vamos nós. E 26 para o fundo. Consegue ver como são incríveis? Agora? Vou fazer algumas mudanças para fazê-las parecer melhor. Eu acho que é melhor mover este gráfico de linhas um pouco para cima. Vai ser 20 para o fundo. E também este que é movê-lo para cima novamente. 22. O fundo. Agora está ótimo. Então vamos agrupar esses elementos também e chamá-lo de mensagens. Perfeito. Tem sido demais. Eu sei, No entanto, é necessário saber como criar esse tipo de elementos por si mesmo. Por outro lado, pode usar o recurso livre está na Internet, ou você pode comprar um, mas é essencial saber como criá-lo por si mesmo. Tudo bem. Espero que goste deste vídeo, e vou ver-te no próximo vídeo. 87. Onboarding: Oi, todo mundo. Bem-vindo de volta a outro vídeo desta seção neste vídeo. Vamos desenhar as páginas de embarque. O que está a embarcar? Na verdade, no embarque é a primeira impressão do seu aplicativo. Ele funciona como um visual no boxe fora do aplicativo que você está projetando, por isso é essencial prestar atenção suficiente a ele. Nós não compartilhamos. Eu faço. Bem, vamos começar. Primeiro de tudo, eu vou continuar e duplicar o quadro de arte e isso mudou seu nome para, hum, embarque um. Ótimo. E vamos quase remover todos esses elementos porque não precisamos deles. Isso é apenas manter o indicador de casa. E depois vou mudar o colarinho dos fundos. Como pode ver, temos um retângulo aqui que mudou para 41 35 F três. Ótimo. O que mais precisamos? Vamos colocar uma ilustração aqui e também ataques sob isso e um sub mais apertado bem ali. E no final, precisamos colocar duas coisas um indicador de página e também um botão seguinte ali. Então você pode usar suas próprias ilustrações ou você poderia usar ilustrações gratuitas Há um site muito bom que é chamado em Draw That CO deixe-me mostrar-lhe que você pode encontrar tantas ilustrações para seus projetos. E a boa notícia é que todos eles são de graça. Então, se você abrir a droga que CO e você vai para a seção de ilustração, você pode ver tantas ilustrações aqui em quase todas as categorias que você pode pensar. Ok, No entanto, você também pode pesquisar aqui, digamos aplicativo. Lá vamos nós. Você pode ver quantas belas ilustrações existem. Por exemplo, este que você vai usar em nosso projeto e muito mais. Você também pode alterar o colar principal dessas ilustrações. Por exemplo, vamos mudá-lo para amarelo. Ótimo, e você pode facilmente para baixo com eles com o formato SPG e também PNG. Então não vamos baixá-lo agora porque eu já coloquei no ativo mais completo e você pode ter acesso a eles facilmente. Então vamos em frente e trazê-los aqui. Lá vamos nós ilustrações e aqui temos pago Run página dois e página três. Então vamos arrastar e soltar o 1º 1 Lá vamos nós. Seu tamanho será de 250 por 192. Vamos colocá-lo bem ali e o estofamento superior vai ser 130 muito bom. Então precisamos que os tanques coloquem sua direita sob nossa ilustração. Então vamos à direita. Pegue e compartilhe suas memórias e eu vou mudar a diversão deles para Monserrat. É e também mudar o caminho para grandes nomes e também o tamanho do fundo para 24 pontos. Fantástico. E vamos mudar o com 2 307 e também alinhá-lo ao centro. Perfeito. Ele parar de adicionar, vai ser 68 grande e vamos duplicá-lo. E eu vou mudar o caminho para Regular e também o tamanho da fonte para 19. E isso mudou a cor para ser seis b um f f grande. E aqui, vamos escrever. Instagram é um serviço de rede social de compartilhamento de fotos e vídeos. Muito bom. Isso mudou um com para 300. Tudo bem, e agora vamos em frente e mudar o fundo para SF Pro Display 8 e também a linha alta para 28. A próxima coisa que precisamos é de um indicador de página, então vamos em frente e criar um o que precisamos. Em primeiro lugar, ele está por perto. Deixe-me em Fronteiras Checa e eu vou mudar o seu com 2 22 e seu alto para cinco grande. E vamos mudar a cor para Branco. E então isso é duplicado e colocá-lo bem ali. E vamos fazer um círculo, que é cinco por cinco. Ótimo, temos preenchimento de quatro pixels. Precisamos de outro porque temos três páginas. Fantástico. Então vamos agrupá-los e chamá-lo indicador ótimo. E vou alinhá-lo ao centro. E vamos selecionar esses dois círculos e mudar sua cor para a mesma cor que temos aqui . Perfeito estão certos. E agora vamos verificar o espaçamento. É o Tom. Estofamento vai ser 127 ótimo, e a última coisa que precisamos é de um ex Martin. Então vamos em frente e trazer o nosso fundo aqui da nossa página de registro porque nós não vamos criá-lo mais uma vez. E vamos andar aqui. A única coisa que precisamos fazer é desmarcar sombras porque não precisamos delas. E também vamos mudar a cor para branco e vamos mudar a cor da nossa seta para 41 35 F três muito bom. E agora vamos reduzi-lo para 40 por 40. Ótimo. E o estofamento inferior vai ser para os três bem aqui. Incrível. É muito bom. Então agora é hora de ir em frente e criar nosso próximo fatal que duplica nosso quadro de arte e mudou seu nome para algum embarque para. Então eu vou remover essas ilustrações e trazer a próxima página dois. Ótimo em. Vamos mudar sua posição para 63 e 145 muito bom. E depois vou mudar o texto. Então vamos à direita. Compartilhe suas histórias com o mundo Fantástico e também aqui. Vamos alterá-lo para compartilhar suas fotos, vídeos e histórias com o mundo em um instante. Tudo bem, a próxima coisa que você precisa fazer é mudar o lugar fora desses indicadores, então vamos em frente e mudar o lugar fora do primeiro retângulo sem primeiro círculo incrível e ter certeza de que eles estão alinhados ao centro Muito bom. E mais uma vez, vamos duplicar este quadro de arte e mudar seu nome para premiar três. Vai ser a nossa última página. Ótimo que removeu essas ilustrações e trazendo o último perfeito. E é X vai ser 77 o porquê. Vamos fazer o seu 143 perfeito e ataques que eu vou escrever, é notificado em qualquer lugar e a qualquer momento e os próximos x dois. Você será imediatamente notificado sobre novas publicações e histórias. Incrível. E vamos em frente e mudar o lugar de nossos indicadores. Lá vamos muito bem e certifique-se de que eles estão alinhados ao centro. Tudo bem, estamos quase terminando. No entanto, temos de fazer a última coisa, que está a mudar. Estes Barton juntos começaram botão porque é a nossa última página. Então vamos eleger nosso fundo aqui. E ao contrário do tamanho e mudou o com 2 111 Grande manchete para o centro, e eu vou remover essas seta e criar um texto e direito começar. Ótimo. Vamos mudar o tamanho do telefone para 14 pontos e também sua cor para 41 35 F três Grande, e vamos alinhá-lo ao centro tanto vertical quanto horizontalmente. Como você pode ver, um rumo maduro não é igual ao nosso preenchimento esquerdo. Por isso, temos de aumentar a ajuda do nosso tango comunitário em um. Vamos fazer 112 e agora tudo está feito. Então vamos agrupá-los e começar logo. Perfeito está certo, pessoal. Seja finalmente terminado nosso primeiro projeto juntos e espero que você realmente tenha gostado. Foi uma viagem de linha. No entanto, tenho certeza de que vale a pena. Eu espero que você goste deste vídeo e eu vou vê-lo no próximo vídeo. 88. Tipos de logotipo: Olá, todos nesta seção, nós vamos estar projetando nosso logotipo. E também neste vídeo, vamos falar sobre sete vezes diferentes fora do design do logotipo. Então, sem mais delongas, vamos começar. O primeiro tipo local é chamado de Monograma ou você poderia dizer marcas de letra. Aqui temos logotipos diferentes como exemplos, como HBO, que significa Home Box Office. Como você pode ver aqui, nós temos letras Onley, então elas são meio que soletradas e representam sua empresa. O segundo tipo é chamado Ward Marks ou, digamos, horários locais eles são realmente semelhantes a uma marca de letra. No entanto, prêmio Mark concentra-se apenas em um nome de empresa, como Google, Canham ou Jeep. O próximo tipo local é chamado de marcas locais abstratas como Pepsi, Nike ou BP. Como você pode ver aqui, verdade, uma marca abstrata é um tipo de logotipo pictórico, eo próximo tipo local é chamado marcas pictóricas ou símbolos logotipos como logotipo da Apple para Eater e outras marcas famosas. Na verdade, uma marca pictórica é simplesmente um ícone que representa as características da empresa. O próximo tipo local, esses logotipos mascotes mascotes são logotipos que envolvem um personagem ilustrado de acordo com 99 desenhos dot com. Se você quiser obter mais informações sobre os horários locais e como você deve usá-los, você pode verificar lá fora. Ótimo artigo no site. O próximo tipo local é marcas de combinação, e esta é a hora local que eu vou ensinar como você pode criar neste tipo de logotipo. Você pode encontrar uma letra combinada com uma ilustração ou uma forma específica. E por último, mas não menos importante, o logotipo emblema do logotipo consiste em fonte dentro do símbolo ou um ícone como o logotipo Starbucks . Muito bem, muito obrigado por assistir este vídeo na próxima série de vídeos. Eles vão criar quatro logotipos diferentes juntos, então certifique-se de baixar o projeto inicial porque eu já preparei as cores para você . A fim de economizar seu tempo, você pode baixar a multa da seção Recurso é fora da próxima palestra 89. Crie o primeiro logotipo: Oi, todo mundo. Bem-vindo de volta a outro vídeo desta seção. Neste vídeo, nós vamos estar projetando nosso primeiro logotipo juntos, de fato, aquele logotipo que eu vou criar para o leste para um aplicativo de finanças, que é chamado de dinheiro. Isso é interessante, certo? Então, não temos muito. Vamos começar. A primeira coisa sobressai. Vou mencionar que não vamos criar um logotipo complexo, porque nesse caso precisamos de um curso completo para cobrir esse tópico. No entanto, eu vou mostrar a vocês o poder do esboço e combinação de formas básicas juntos. Então, primeiro de tudo, vamos em frente e inserir em torno dele aqui. Isso é tão mau Grande que aumentou a sua com tudo certo, Perfeito. E eu vou para as Fronteiras Czech. Deixe-me aumentar o com mais grande e, em seguida, vamos duplicá-lo e qual é bem ali . Perfeito. E o espaço vai ser de US $20 selectees, duas camadas e clique na diferença. O que eu vou fazer é agitar estes caixa de seleção e deixar bordas haste grande e aumentar a fronteira com 2 10 Grande! E eu vou usar esse Grady int aqui para o nosso primeiro logotipo. Cada ir e este muito bom e deixe-me aumentar o com. E então se eu for lá e clicar neste ícone, você pode ver que escolhemos a diferença. Vou mudar para sindicato. É muito melhor, e isso é mudar seu tamanho. Para ver como vai parecer, está certo. E vamos aumentar o com muito bom. Você pode ver o M que acabamos de criar aqui? Isso é muito incrível. Isso é ótimo. A próxima coisa que vou fazer é mudar a direção dos nossos molhos. Acho que vai ser melhor perfeito. E então vamos escanear nossa forma combinada para 65 pixels por 64 Eu vou ampliar a média e precisamos de um texto porque vamos criar uma marca de combinação. Então deixe-me diminuir o tamanho da fonte para 30 e dinheiro certo. Então eu vou mudar o fundo para como um profissional, arredondado, ótimo e também é muito leve, anterior, anterior, incrível e de opções Tex. Vou capitalizar meu texto aqui assim, e também vamos aumentar a quantidade de caracteres, que é o espaço em branco que temos entre nossos personagens. Isso é aumentar ele para Fine. Isso é incrível. E então eu vou adicionar uma sensação porque eu vou ter uma nota. Ian é na verdade o mesmo Grady int que usamos para o nosso logotipo. Perfeito. Lá vamos nós. Isso é muito legal, não é? Certo, a próxima coisa que precisamos fazer é o alinhamento, certo? Porque aumentamos o valor do nosso personagem aqui. Não podemos alinhá-los corretamente. Está bem? Como podem ver, temos este espaço branco aqui. Então, qual é a solução? pode fazer nada fora do curso que você pode. Na verdade, se você selecionar este texto e ir em frente e clicar com o botão direito sobre esta camada, você pode ter a opção de contornos do conversor. E se você pudesse pegar esse esboço vai converter nossos tanques em um contorno, o que é ótimo. Claro que, a partir de agora, não podemos alterá-lo ou modificá-lo, e não precisamos disso. Ok, então agora podemos selecionar nossa forma e também nosso texto e acelerar o alinhamento horizontalmente. Ótima. E o título de topo vai ser 16. Fantástico. Deixe-me agrupar isso e chamar de cor do dinheiro. Ok, porque nós vamos criar uma versão diferente deste logotipo mais tarde. Tudo bem, deixe-me colocar aqui. Perfeito. Então agora vamos criar outra versão do logotipo que cor cinza escuro chegar. Então eu vou duplicar o seu importado aqui. Incrível. Deixe-me selecionar nossa forma e mudar o grau Ian para uma cor sólida e escolher três ee três ee e três e grande. E também vamos escolher o nosso texto. Ou aqui temos o nosso contorno e mudamos o campo para uma cor sólida e escolhemos o mesmo cinza escuro que usamos para a nossa forma combinada. Isso é fantástico. Você não gosta disso? Você pode ver como é simples projetar um logotipo criativo? Nós apenas combinamos formas simples. Ou agora vou reduzi-los. Perfeito. É 96 por 83. Ótima. Então, criamos com sucesso nosso primeiro local juntos no próximo vídeo. Vamos criar outro logotipo que é tão simples de criar. Então eu vou te ver no próximo vídeo 90. Crie nosso segundo logotipo: Ei, pessoal, bem-vindos de volta a outro vídeo desta seção. Espero que esteja indo bem nesse vídeo. Vamos projetar nosso segundo logotipo juntos, que é uma lua. Então, sem mais delongas, vamos começar. Como você pode imaginar, precisamos de outra forma. Então vamos em frente. Uma inserção, um círculo. Lá vamos nós. E eu vou para as Fronteiras Czech. Perfeito. Isso mudou os campos para o início, cinza, e eu vou duplicá-lo. Ótima. Deixe-me mudar para algo mais leve que você possa ver. E então eu vou mover esses círculos assim e selecionar os dois ursos e clicar em Subtrair Awesome. Você pode ver como rapidamente ser criado nossa lua? Isso é muito legal. A próxima coisa que vou fazer é adicionar uma sombra interior para comer. Então vamos em frente e clique na sombra interna e mudar sua cor para esta vida cinza, incrível. E diminuir a Blair para zero e mudar a posição Y para dois e a exposição para um. Isso é muito legal. E o que mais precisamos? Sua direita. Precisamos do texto. Então aqui, vamos escrever Moon e novamente eu vou ir em frente e capitalizar isso e colocá-lo aqui então que reduziu nossas formas combinadas para 60 por 68 colocá-lo bem ali. E agora vamos mudar a cor do nosso texto para o mesmo cinza escuro que temos aqui. E depois disso, vou converter nosso texto em um esboço. Então, vamos clicar com o botão direito ali, converter contornos incríveis e selecionar nossas formas combinadas ou nossa lua. Vamos alinhá-los ao centro, e ele vai ter um preenchimento de 16 pixels. Bastante incrível. Vamos agrupá-los e mover para a direita. Tudo bem para ir devagar. Eu só queria criar uma versão porque vai ser repetitiva. Então, se você quiser, você pode ir em frente e usar sua própria criatividade e escolher cores incríveis para isso. Mas por enquanto, eu vou colocar um fim neste vídeo, e no próximo vídeo, nós vamos projetar outro logotipo simples juntos. Então vejo-te isso 91. Crie nosso terceiro logotipo: Oi, Ron. Bem-vindo de volta a outro vídeo desta seção neste vídeo. Vamos projetar nosso terceiro logotipo juntos. Este logotipo é chamado espantado. OK, então eu vou criar uma carta, é claro, com formas. Então, o que você acha? Preciso do seu direito. Preciso de um triângulo. Então vamos inserir um. Incrível. Eu vou ser tão má. Então eu vou para as Fronteiras Checa e clique duas vezes no nosso triângulo. E vamos selecionar todos esses pontos e aumentar o raio assim. Bastante incrível. E isso é diferente do tamanho, porque eu vou aumentar a altura para 148. Ótima. E novamente, eu vou clicar duas vezes sobre estes forma e manter a tecla shift pressionada. E aqui você pode ver um ponto aparece. Você pode ver isso? Vou clicar aqui e uma tecla Shift de aço, arrastá-la e soltá-la assim. Incrível. E já que este ponto é selecionado, vou aumentar o raio para 40. Ótima. Então você provavelmente pode ver a forma “A “aqui, mas precisamos de mais uma coisa. Ok, deixe-me inserir em torno dele. Tudo bem? E vou senti-lo com branco. Vamos colocá-lo aqui e diminuir sua altura. 40 e é alinhá-lo para o centro muito bom. Agora é hora de mudar a cor do nosso triângulo. OK, então vamos em frente e clique e cor radiante, e nós vamos usar o Grady int. Eu vou escolher essas cores, e isso mudou a direção muito bem. Então vamos agrupar essas formas, certo? Surpreendido. E o que mais precisamos? Precisamos de um fundo. Surpreendido. E então isso é capitalizá-lo assim como outros logotipos. E eu vou usar uma única cor para estes, que é este amarelo Grande. Então vamos reduzir nossa forma para 110 pixels. E depois disso precisamos converter nosso texto sobre energia do esboço, alinhar nossa forma para o centro. Ótima. E aqui o carinho vai ser oito. Porque, como podem ver, temos este espaço branco aqui. Acho que agora podemos agrupá-los. E aqui podemos escrever, espantados e finalmente patinados para 100 por 121 e colocá-lo bem ali. Precisamos apenas desta versão colorida. Isso é muito bom. Tudo bem. Espero que gostem deste vídeo. Vamos terminar este vídeo agora mesmo. E no próximo vídeo, vamos projetar nosso último local juntos. Então vejo-te isso 92. Crie nosso logotipo pela Forth: Ei, pessoal, bem-vindos de volta a outro vídeo deste curso neste vídeo. Vamos desenhar o nosso último logótipo, que se chama Rabbit. É interessante, não é? Então o que eu vou fazer é criar uma forma simples, que é como um coelho. Ok, não exatamente, no entanto, ele vai transmitir a mensagem, e eu vou usar essas duas cores para isso. Então vamos criar isso juntos. Primeiro de tudo, que é inserir em torno dele. Ótima. Como você pode ver, eu escolhi pequenos cantos aqui. Vamos aumentar um pouco o raio. Agora é perfeito 49 aqui temos 132 por 130 para escolher músicas, depois em Czech Borders. E isso é escolher este Liping como a pele do rosto de nossos coelhos. Então precisamos criar os anos. Certo, então vamos inserir um círculo como este. Vou fazer zoom nas fronteiras checas, perfeito e duplicado. Coma e coloque bem ali. Vamos diminuir o espaço para menos 30 e uma vez que ambos fora eles são selecionados, pode se cruzar. Incrível, consegue ver? Acabou de criar o primeiro ano? Isso é muito bom. E deixe-me aumentar o tamanho para 38 pixels, e então eu preciso girá-lo em 15 graus. Se você segurar a tecla shift, você pode obter estes 15 graus facilmente perfeito. E deixe-me duplicar e colocá-lo bem ali e mais uma vez girado aqui para positivo 15 ou direita. E o espaçamento vai ser zero assim. E então vamos definir a cor para o rosa escuro. Ok, isso é muito legal. Vou agrupá-los e selecionar estas formas também e alinhá-los muito bem. A próxima coisa que eu vou criar aliviar seus olhos. Ok, então eu preciso de um aceno em torno disso. Deixe-me arrastar e soltar aqui, diminuir o raio, também. 15 em Fronteiras Checa e escolha o mesmo rosa escuro aqui e diminua seu tamanho para 18 pixels 18 pixels. E coloque-o bem ali com um cabeçalho superior de 30 pixels. Vamos duplicar. Isso é como os dois fora deles. Agrupe-os e selecione nosso rosto e alinhe-os ao centro. Incrível. O espaço em branco entre eles é de 24 pixels. Ela é ótima, e não precisamos de nenhum outro detalhe aqui. No entanto, a última coisa que vou criar é algum tipo de sombras para nunca fazer este logotipo de dois D. Olha, três D. Ok, então eu preciso de um círculo como este que está nas Fronteiras Checa. Então vamos adicionar um Grady nele ou escrever a primeira cor vai ser estes rosa escuro muito bom. E isso é usar a segunda cor e novamente, o mesmo ping escuro. No entanto, desta vez precisamos diminuir o tudo demasiado zero. Incrível. Então eu vou girá-lo assim em Vamos eleger nosso rosto. Tanto o nosso círculo como a nossa forma de rosto são selecionados A máscara anglicana muito bom. Agora eu posso personalizar a posição do círculo, então eu vou colocá-lo aqui e deixe-me diminuir a capacidade para 40%. Isso é muito legal. Você pode ver o quão incrível e bonito é fácil? A última coisa que precisamos fazer é adicionar um texto. Então vamos bem, coelho. No entanto, desta vez eu vou mudar a fonte. Dois meses. Sarit, lá vamos nós. E mais uma vez isso é capitalizá-lo perfeito e mudar sua cor para este rosa escuro e nós precisamos agrupar são elementos seu e forma de coelho universitário, e ele assustou para 74 pixels por 121 e colocá-lo aqui. Então eu vou em frente e converter esses textos em um esboço sobre depois do papai. Vamos selecionar nossa forma e alinhá-los ao centro. E o título de topo vai ser 16. Bastante bom. Vamos chamar esse grupo de Rabbit. Eu vou dimensioná-lo para baixo para 96 pixels e colocá-lo bem ali. Tudo bem, pessoal. Criamos nosso logotipo final juntos. No total, criamos quatro logotipos diferentes e espero que tenham percebido o quão poderosa é a combinação de formas. Espero que gostem deste vídeo. Você pode baixar o projeto final a partir do recurso é seção desta palestra. Vejo-te no próximo vídeo. 93. Introdução ao Adobe Photoshop: Olá, todos. Bem-vindo de volta a outra seção deste curso nesta seção. Vamos falar da Adobe para a loja. Embora eu mencionei antes, que é Adobe para a loja não é um bom software para design de interface de usuário. É bom estar familiarizado ler no ambiente antes da loja e também os conceitos básicos da loja de fotos para preparar nossas imagens às vezes ou até mesmo editar nossas multas. Então, no próximo vídeo, vamos começar nossa lição com os ambientes da Adobe para o show. Vejo você então. 94. Meio do Adobe Photoshop: Olá, pessoal, neste vídeo, vamos falar sobre o ambiente fora da loja Adobe. Então, sem justa, eu sei. Vamos abrir o nosso “eu não “antes que a loja esteja certa. Como você pode ver, estou usando a Adobe para a versão de loja. Veja um seis. Não importa qual versão você está usando agora, porque vamos nos concentrar no básico em Lee. E posso garantir que quase os elementos Onley são os mesmos em todas as versões. Mas seria ótimo usar uma versão dos EUA também. Então aqui outro antes da loja, podemos dividir este ambiente em diferentes seções. Por exemplo, à sua esquerda, você pode ver que há o painel de ferramentas. Ok? E aqui há todas as ferramentas que precisamos para editar nossas imagens ou até mesmo criar algum design gráfico. E à sua direita, você pode ver que há mais painéis. Por exemplo, aqui temos o painel de camadas, que é um dos painéis mais importantes em adultos antes da loja. E também temos cores de ajuste, etc. OK, mas o painel mais importante aqui é o painel de ferramentas. Ok. Muito bem, pessoal, muito obrigado por assistirem este vídeo. E no próximo vídeo, vamos falar sobre o básico de adultos antes da loja e como você pode usar essas ferramentas. Vejo vocês no próximo vídeo. 95. Noções básicas do Adobe Photoshop: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos falar sobre o básico da Adobe para o show. Certo, como mencionei no vídeo anterior, vamos usar painéis diferentes. Outro antes das lojas, como ferramentas, camadas de painel, cores , ajuste, etc. Mas a primeira coisa poupa. Precisamos de uma tela ou digamos, uma página para começar nosso projeto. Para fazer isso, você pode ir ao arquivo Anchalee, pode? Ou você pode pressionar o comando no final em Maxie Hemes ou Control e N no Windows. E aqui, como você pode ver, há uma janela que você pode escolher a dimensão de suas palavras artísticas. Por exemplo, aqui podemos definir o com 2 1920 certifique-se de que ele está definido para células de pico e o alto para 10 80 . E como você pode ver células de pico e eu vou mudar a resolução para 72 porque é suficiente para fins de computador e um modo Connor, precisamos configurá-lo para RGB porque vamos apresentar este projeto no computador ou em telas. Ok, então, vendo por que K é usado para fins de impressão. Ok. E eu posso ir em frente e clicar em. OK, e lá vamos nós. Seu quadro de arte está pronto. Eu não defini um nome específico para isso, mas certifique-se de definir seu nome de desejo. E agora vamos falar sobre o painel de ferramentas. Como você pode ver aqui, temos diferentes ferramentas e seções diferentes. Este é chamado Move Toe, e é para mover objetos ou elementos em sua tela ou em suas placas de arte. E a próxima é a ferramenta de seleção. Ok. Por exemplo, deixe-me criar uma nova camada aqui. Se você quiser criar uma nova camada, você pode facilmente ir para a seção de camada e clicar neste ícone de camada. Como podem ver, acabamos de criar uma nova camada. E então eu vou usar a ferramenta de seleção, a fim de selecionar uma área específica como esta, e eu posso senti-la com qualquer cor que eu quiser. Então, se eu quiser mudar a cor, eu posso clicar nesta seção e eu posso escolher estes gripes e deixe-me escolher o pincel para preenchê-lo . E agora com este dedo do pé de movimento, eu posso facilmente mover isso em torno de tudo certo, a próxima ferramenta é chamada de seleção para ok. E cada ferramenta aqui contém algumas ferramentas ocultas. Ok, Como você pode ver, há uma pequena seta na parte inferior, canto direito de todas as ferramentas específicas, e você pode ver que há algumas ferramentas escondidas aqui que ele pode escolher. A próxima ferramenta é chamada de laço magnético. Ok. E é para selecionar também. Você pode facilmente selecionar uma área específica, ok? E você pode separar sua seção de desejos dessa imagem específica para a seleção. Você pode pressionar o comando e D ou controlar o nas janelas e aqui também, você tem diferentes últimos ferramentas assim. E esta é a varinha mágica. Ok, é para seleção que os habitantes esboçam também, que possa selecionar uma área específica magicamente. E a próxima sela é a colheita. É para cortar seus poros de arte ou sua imagem. E o próximo é o conta-gotas. Assim, você pode escolher uma cor específica de uma foto ou um elemento. Ok. E essas ferramentas são para retocar. Ok. Como você pode ver, eles têm pincel de cura, ferramenta de escova de cura, Pashtu, etc. E depois temos pincéis. Por exemplo, eu posso escolher a cor vermelha aqui Como você pode ver, eu posso pintar livremente aqui. E se eu clicar com o botão direito, posso mudar o tamanho disso e também a dureza do meu pincel. Ok, a próxima ferramenta chama-se Carimbo Clone para ele. Então, retoque também não trabalhamos muito com isso. E então temos história, pincel, ferramenta e uma navalha que você pode apagar sua pintura ou até mesmo uma área específica de uma imagem. Então temos Grady int como este e Blair para para estourar uma imagem ou parte específica de uma imagem. E esta é a ferramenta Dodge, e é para editar o brilho de uma área específica de uma imagem. Então temos o panto, que é uma ferramenta muito importante em uma porta antes da loja e com ferramenta pan. Você pode selecionar uma área específica com precisão. Ok, e então se eu clicar com o botão direito aqui, eu posso limpar pode fazer a seleção, o raio do alimentador vai ser zero, e isso é clicar em OK, lá vamos nós. Então, agora, se eu escolher a ferramenta de pincel, eu posso senti-lo com cor vermelha como esta, e a próxima é ferramenta de texto para digitar e criar algum texto. Você tem opções diferentes. Aqui você tem um tipo apresentável, tempo vertical para tipo horizontal, máscara e ferramenta de máscara de tipo verity con. Na maioria das vezes usamos horizontal Tipo dois e sua ferramenta de seleção de caminho. Não vamos usar muito isso. E, em seguida, ferramenta de retângulo arredondado é para criar formas diferentes. Por exemplo, eu posso criar em torno do objeto assim. Então eu posso fazer uma seleção com clique seco, e agora eu posso sentir com qualquer cor que eu quiser. Como este. A próxima opção é a ferramenta manual, e é para panorâmica. Você também pode apresentá-lo retendo espaço no teclado e, em seguida, temos o zoom para ok para zoom média e zoom out. Tudo bem, pessoal. Agora vamos nos concentrar na seção da camada para ver o que temos lá. Ok? Como podem ver, acabamos de criar uma nova camada. E como eu mencionei antes, toda vez que você quiser uma nova camada, você pode facilmente clicar neste ícone, e ele cria uma nova camada para você. Você pode alterar o nome das camadas clicando duas vezes em seu nome, e você pode alterá-lo para se você quer que está mudando para você, Eu perfeito. E agora eu vou criar outra forma aqui com as ferramentas de seleção. Lá vamos nós, e eu posso andar por aí. Se você quiser ocultar uma camada, você pode clicar neste ícone como no esboço. E lembre-se de que a ordem de colocar suas camadas é tão importante em outros antes da loja . Ok, então aqui o u está acima deste retângulo arredondado. Então, se eu movê-lo para cima deste retângulo, você pode ver a diferença. Então eu vou mudar a cor para torná-la mais clara assim. Você também pode alterar a opacidade aqui de 0 para 100% e a outra coisa importante em oh , antes que a loja é a janela de tempo camadas. Então, vamos clicar duas vezes sobre esta sua camada. E como você pode ver, uma janela aparece, que é chamada de lado de camadas. E aqui você tem diferentes opções para modelar sua camada, por exemplo. Aqui temos opções de mistura padrão, por exemplo, quem pode alterar a opacidade e o modo sem graça. Aqui você tem essas opções certo nestes swing Ir, bem como você pode ver, você tem muitas opções aqui você tem traçado, por exemplo, eu posso mudar a cor para vermelho e aumentar o tamanho que você tem. Sombra interna. Você tem cor de brilho interno sobre o lago, radiante e muito mais. Certo, você também tem sombra aqui. Como este. Muito bem, pessoal, muito obrigado por assistirem estes vídeos. Espero que tenha gostado. E no próximo vídeo, vamos falar sobre o uso da Adobe ainda mais comprar para você no design de UX. Então, vejo você então. 96. Adobe Photoshop para UI:UX Design: Oi, todo mundo. Bem-vindo de volta a outro vídeo de discurso neste vídeo. Vamos falar sobre o uso da Adobe para a loja para você no design ux. Você, como um jovem designer de UX, pode precisar editar suas imagens para usá-las em seu projeto corretamente. Ok, então há algumas modificações que você não pode fazer no esboço, e é uma boa idéia processá-las em uma porta antes do show. Ok, então neste vídeo, eu vou te ensinar como você pode usar uma porta antes da loja para editar suas imagens. Certo, então, sem mais delongas, vamos abrir nosso Ídolo antes da loja. Tudo bem? Como você pode ver, eu baixei uma imagem deste sapato de cinzas unspool que vêm para mostrar como você pode separar qualquer objeto de seu banco em torno de adobe para a loja. Ok, então suponha que você está projetando um aplicativo de compras e nós precisamos ter alguns sapatos em nossas listas de compras, OK, então neste caso, é melhor separar este sapato do seu fundo e, em seguida, salvar seu como um PNG cinco e , em seguida, importado em seu esboço. Ok? então há maneiras diferentes de fazer isso. Você pode usar diferentes ferramentas de seleção. Por exemplo, você pode usar a varinha mágica assim. Funciona em alguns exemplos, mas antes de tudo, deixe-me mostrar-lhe uma coisa. Como você pode ver, esta camada é chamada de rodada de banco, ok? E não podemos fazer nada quando está trancada. Então, energia assim, você pode clicar duas vezes. E a Caçadora, por exemplo, define um nome. Não importa o que seja. Você pode configurá-lo para sapato, e agora ele está desbloqueado para que você possa fazer alterações, e eu vou clicar e apagar assim. Como pode ver, não temos nenhum saco por aqui. No entanto, você precisa se certificar de que o plano de fundo foi completamente removido. Por exemplo, aqui, como você pode ver, você tem algum espaço em branco, então precisamos mais uma vez selecionar este espaço em branco e clicar em excluir assim. Agora, a fim de mostrar a vocês qual é a diferença aqui, eu vou criar uma nova camada. E vamos chamá-lo de BG como nossa rodada de banco, e eu vou movê-lo para baixo bem abaixo da nossa camada de sapato e vamos pressionar o comando A ou controle e janelas. E então isso é escolher uma cor diferente. Por exemplo, este e pressione a opção excluir. Lá vamos nós. Como você pode ver, poderíamos facilmente mudar a cor dos fundos. Ok, então eu também posso remover o fundo e salvá-lo como um arquivo PNG e importá-lo no esboço e usá-lo para que você possa ter mais possibilidades de trabalhar com esta imagem. Mas há algumas imagens que você não pode usar a varinha mágica facilmente para separar seu objeto específico do fundo. Está bem, deixa-me desfazer estes processos. Nesse caso, você pode usar outras ferramentas. Está bem. Por exemplo, você pode usar o laço magnético como este, e você pode selecionar seu objeto facilmente e perfeitamente. Você também pode usar a ferramenta caneta, que é a melhor opção possível porque você pode obter uma eleição precisa fora do seu objeto. No entanto , leva mais tempo. E aqui, depois de selecionar dois pontos diferentes, você precisa manter a tecla de opção e pressionar este ponto como este e selecionar um novo ponto e serra. Está bem, está bem. Agora vou mostrar outro exemplo de uso da Adobe para modificar suas imagens. Às vezes, você pode precisar mudar a cor do seu produto. Ok, então primeiro de tudo, deixe-me selecionar o banco ao redor e removê-lo assim, e suponha que eu vou mudar a cor deste sapato. Ok? É um pouco difícil porque é muito escuro. No entanto, vou experimentá-lo. Primeiro. Vamos criar uma nova camada. Então eu vou selecionar a filmagem inteira. Como podemos fazer isso? Podemos segurar a tecla de comando e clipe cuecas Square aqui e como você pode vê-lo já selecionado . Em seguida, verifique se você selecionou a nova camada e altere a cor diferente. Por exemplo, cor azul. Em seguida, escolha a ferramenta de pincel. Certo, assim, vamos pintar tudo assim. Agora parece estranho, mas em um minuto você pode ver como essa técnica é incrível. Então, como podem ver aqui, temos duas camadas diferentes. Ok, aqui temos o molde sem graça e temos opções diferentes. Se você selecionar cor, poderá ver que são objetos. A cor foi mudada perfeitamente. Está bem. E é fantástico porque às vezes você como um designer U I, eu preciso ter versões diferentes de um produto específico, mas ele não está disponível na Internet para que você possa criar o seu próprio. Agora suponha que você deseja mudar sua cor para outra coisa e você quer ver como centenas de opções em vez de escolher cada cor uma por uma. Tenho uma boa solução para você. Se você for para ajustes, você pode ver que temos opções diferentes. Está bem. No entanto, se você puder, podemos matizar a saturação. Você pode mudar a tonalidade facilmente e, como você pode ver, a cor desligada, nosso sapato está mudando instantaneamente. É incrível, não é? E para salvar seus arquivos, você pode simplesmente pressionar o comando shift e s. E então aqui você pode definir o nome, por exemplo sapato. Então você pode escolher o formato específico que você precisa aqui. Temos muitos formatos. No entanto, quando você quiser usar esta imagem sem fundo, você precisa escolher PNG. Está bem. Obrigado. Você pode salvar. Está bem. E está feito. Agora podemos importar arquivo PNG tese em seu projeto de esboço. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. E vejo-te no próximo vídeo. 97. Projeto 2 - aplicativo para finance: Olá a todos, todos, bem-vindos de volta a outra seção das pontuações nesta seção. Nós vamos projetar um aplicativo financeiro moderno do zero juntos. Então aqui está o que vamos projetar. Precisamos projetar 24 telas diferentes juntos. Como você pode ver, começamos com tela de lançamento, em seguida, bem projetado uma página de boas-vindas e também página de assinatura. Como você pode ver aqui, a página de inscrição também E depois Dante irá projetar a página de Verificação OTP. Como podem ver aqui, temos três páginas diferentes para isso. A primeira página é esquecer o número. A segunda página é quando o usuário está entrando no OTP, e a terceira página é quando a parte inferior está ativa. E depois disso, vamos projetar o perfil e também a forma preenchida do nosso perfil aqui como uma presunção. E então nós criaríamos nossa página inicial com esses gráficos ali. E depois disso, temos nosso menu de hambúrgueres aqui com cinco seções de menu diferentes. E então vamos para a nossa página de cartões e vamos projetar dois carros diferentes aqui o principal e o segundo todos aqui. E também vamos projetar algumas transações como estas, como você pode ver. E, em seguida, aqui temos a página de transações bem projetado para diferentes telas para a nossa transação. Como você pode ver, aqui temos um carro que o usuário pode pesquisar e encontrar a transação específica. E quando esses cartões caírem, teremos essa tela, que nos mostra os detalhes de nossas despesas. E então aqui temos a tela de transferência irá criar esses números pat juntos e todos esses elementos. E depois disso, temos a página de confirmação, como você pode ver e, em seguida, a página de notificação. Também aqui temos pelo menos de notificações com fotos diferentes com nomes diferentes. Aqui. O usuário pode pesquisar entre essas notificações, e também temos o perfil aqui com essas sentências fiscais e cores bonitas. E por último, mas não menos importante, você projetará três páginas de embarque diferentes para o nosso laboratório. Como pode ver, é muito bom. Estou tão animado para começar a projetar este projeto juntos. Para iniciar este projeto, você precisa baixar os ativos que eu já preparei para você, e você pode obtê-lo a partir do recurso é seção da palestra Ativos. Muito obrigado por assistir este vídeo. Recebo a próxima série de vídeos 98. Tela de lançamento: Oi, todo mundo. Bem-vindo de volta a outro vídeo de discurso neste vídeo. Vamos iniciar o processo de design do nosso aplicativo financeiro juntos. A primeira página que vamos projetar é a tela de lançamento. Está bem. Então, sem para eu fazer, vamos começar com a adição de uma placa de arte para o seu precisamos de um iPhone X s grande. O que vou fazer é tão simples. Eu vou colocar o logotipo do dinheiro que nós projetamos na seção local juntos porque o nome deste aplicativo vai ser dinheiro. Isso é interessante. Então vamos em frente e trazê-lo aqui. Quando abrires a bunda, está tudo bem. Você pode encontrar três diferentes Fuller aqui ícones, ilustrações e logotipo. Então aqui, eu vou abrir o logotipo e nós temos este o logotipo colorido. Ótima. É 96 por 77. Isso é fantástico. Deixe-me alinhá-lo ao centro tanto ressentido quanto verticalmente. E eu vou mudar o nome da nossa arte para tela de lançamento. Perfeito. Tudo bem, terminamos. Acabamos de criar nossa tela de lançamento. Lembra-se? Quando estiver projetando a tela de lançamento, não coloque tantos elementos nela, certo? Precisa ser simples, claro e atraente. Aqui temos um logotipo muito atraente e colorido, e também é simples porque o APP vai mostrar esta página por apenas 1 a 2 segundos para o usuário. Ok, então não temos muito tempo para colocar tanta informação. Apenas um logotipo simples seria ótimo, estão bem no próximo vídeo que estamos indo para projetar estão assinando página, então eu vou ver isso. 99. Página de login: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos desenhar a página de autógrafos juntos depois de uma tela de lançamento. Precisamos da página de boas-vindas aqui, ok, para permitir que os usuários escolham entre assinar e assinar fundos. No entanto, primeiro lugar, vou projetar a página de assinatura, e depois disso voltaremos à nossa página de boas-vindas. Então vamos duplicar essas telas grandes, e eu vou remover nosso logotipo porque nós não precisamos disso. E isso mudou seu nome para assinar. Depois, à direita no topo. Vou colocar nosso logotipo e também direito. Bem-vinda de volta. Ok. No entanto, primeiro de tudo, eu vou criar alguns círculos simples, a fim de fazer alguns grandes e belos elementos para colocar bem ali. Ok, então vamos em frente e inserir um xarope doente como este, e eu vou fazer 352 por 352. Isso é na Czech Borders, e então eu vou encaixá-lo com um cinza. Não foi perfeito. O primeiro colar vai ser 50 a 64 f nove, e a segunda cor é um azul claro, que é três um f nove e e f impressionante. Então deixe-me mudar a direção do nosso Grady int. Faça assim agora eu vou duplicar e colocar o segundo círculo logo abaixo do nosso primeiro círculo. Deixe-me movê-lo para a direita, a fim de fazê-lo com o dobro. E então isso mudou a nota para dois. F 56 e F oito estão certos e a segunda cor para ver procura 30 e f oito. Ok, então eu vou mudar a direção da nossa nota. Ian está aqui assim, e depois vou selecionar essa cor e diminuir a oferta para zero. Incrível. Deixe-me movê-lo um pouco assim, e eu vou mudar a direção um pouco assim. Perfeito. Então precisamos de outro. Então vamos duplicar e colocá-lo logo abaixo do nosso segundo círculo ou à direita. E precisamos mudar o Grady int mais uma vez para ver sete dois F e F oito e a outra cor vai ser a mesma muito boa. Preciso mudar a direção do nosso Grady int para algo assim e vamos movê-lo um pouco e esses dois também. Precisamos mudar suas férias para obter os melhores resultados possíveis. Então pode levar algum tempo. Deixe-me mover o terceiro círculo um pouco para cima. Além disso, este ano, vamos eleger o primeiro círculo e mudar sua posição para menos 74. E é por isso, para menos 84. É ótimo no 2º 1 para menos 43 menos 56 e o último para Tudo agora eu vou girá-lo em menos 45 graus. Então vamos ouvir direito menos 45. E então vamos mudar seu X dois menos 85 ele vai para menos 179. Você deve estar se perguntando como eu poderia conseguir esses números estranhos. Na verdade, leva tempo para obter a melhor localização possível. Então, para poupar seu tempo, mudo suas férias tantas vezes para conseguir esses números. Então você, para se tornar um grande designer, precisa ter paciência para obter os melhores resultados. Então foi assim que consegui esses números, certo? E então eu vou em frente e trazer nosso logotipo branco aqui. Como você pode ver, eu exportei um PDF encontrar aqui. Vamos trazê-lo Terror. Lá vamos nós. É uma versão pontual do nosso logotipo ou direito. É esquerda. Patting vai ser 52 e é parar de ir vai ser 64. Então precisamos de uma mensagem aqui. Isso é certo. Bem-vinda de volta. Gostaríamos de Monserrat. O peso vai ser regular, e também o tamanho da fonte vai ser 28 pontos. Perfeito. E agora vamos diminuir o com para 136. Incrível! E vamos alinhá-lo com o nosso logotipo Perfeito, e seu preenchimento superior vai ser 16 células pick como este. Então podemos agrupá-los. E aqui, não podemos fazer o logotipo? Incrível para o espaço. não precisamos de nenhuma barra de status No entanto,não precisamos de nenhuma barra de status. Precisamos do indicador doméstico, então vamos em frente e inserir sua maçã. I emitir barras home indicador iPhones e aqui luz retrato, Vamos colocá-lo aqui, a linha ou ressenti-lo cedo e alinhá-lo para o fundo muito bom. A próxima coisa que precisamos é de um título, então eu vou em frente e adicionar o título de assinatura aqui assinando. Vamos torná-lo cinza escuro com o código três um três a e três a e eu vou torná-lo negrito e vai ser os mesmos 28 pontos. Bastante incrível. Agora o acolchoamento esquerdo vai ser 30. Ótimo. Vou agrupar os nossos círculos. Isso mesmo, as formas são muito boas. E a nossa melhor palmadinha para o título de autografação vai ser 16 assim. Então precisamos tributar parece o instagram disso. Nós redesenhamos. Se desejar, você pode ir em frente e copiá-lo e colá-lo aqui, a fim de economizar seu tempo. Ou você pode usar esse projeto como uma biblioteca para usar os mesmos elementos que usamos. No entanto, eu vou criá-lo para baixo porque ele não precisa de muito brilho. Então, o que eu preciso é de um título que seja o endereço de e-mail certo e mudar o fundo para texto pro SF e seguida, diminuiu o tamanho da fonte para 14 pontos e também mudar a cor do imposto nove B nove e B nove, paranove B nove e B nove,e vai ser normal Incrível. Coloque-o aqui com o preenchimento esquerdo de 30 pixels e então eu vou duplicá-lo. E aqui vamos escrever o endereço de e-mail. Isso é certo. Design. Essa é uma mídia única que muda a cor para o mesmo cinza escuro que usamos para o título de assinatura. Incrível. E, finalmente, precisamos criar nossas tomadas. Não é assim que eu vou inserir uma linha aqui como esta. Vai ser 345 e aqui temos 315 e linha para o centro. Então aqui temos 30 para a direita. 32. A esquerda. Isso é exatamente o que precisamos. E então vamos mudar a cor para 27 43 f de. Este é o nosso colar principal para este projeto. O cabeçalho superior da nossa Symantec será de 16 pixels, como temos aqui. E também o preenchimento inferior vai ser oito. Então vamos fazer oito incríveis. E então isso é o grupo certo? Endereço de e-mail e duplicado porque precisamos da senha leva a sensação bem com um preenchimento de 24 pixels, e eu vou mudar esses título para passar e este cimento para alguns círculos pretos, segurando a tecla opção e pressionando oito Número perfeito. Agora deixe-me mudar o nome do nosso grupo aqui para senha. Então, o que mais precisamos? Sua direita. Precisamos de ícones diferentes aqui. Precisamos de um ícone de teca e também um ícone de olho para estes passado para campo de imposto. Então vamos abrir nossos ícones, Fuller. Aqui temos a teca, e aqui temos o eu muito bom que colocamos aqui. E este aqui, eu vou colocar o ícone de ticks Teoh nossa pasta de endereço de e-mail e então vamos alinhá-lo. Vai ser 16 para baixo e 16 para a direita. E para estes eu tanto tempo, deixe-me colocá-lo no passado primeiro Fuller 16 para o fundo e 16 para a direita. Muito bom. E a cor deste ícone de carrapato vai ser CB três e f nove. É a nossa cor secundária, certo? Então agora vamos em um ambos os impostos sente e agrupá-los e eu vou nomeá-lo. Toma sentimentos. O que mais precisamos aqui? Vou adicionar um link de senha esquecido. Então vamos escrever para Deus senha um ponto de interrogação e mudar sua cor para ser 47 e F c, que é a nossa cor primária, como usamos para este texto sente linhas impressionantes. fundo vai ser um profissional seguro, arredondado e também leve, e seu tamanho vai ser 16 pontos. Vamos sacudir o estofamento. Deve ser 30 para a esquerda e 24 para o topo assim. Tudo bem, a única coisa que precisamos fazer é adicionar um botão de assinatura aqui. Então agora precisamos inserir em torno dele. Deixe-me mudar o com 2 315 e alta para 72, em seguida, em Jake Borders e mudou o raio. Tempo para cantos pequenos e aumentando para 28 como este, vou entrar no centro. Bastante incrível. Então precisamos adicionar um ótimo nisso. Então vamos usar as cores. O 1º 1 vai ser 49 60 e f nove, e o 2º 1 vai ser 14 33 e f f grande. Deixe-me mudar a direção do nosso Grady int aqui e também aqui assim. Incrível. Então vamos adicionar algumas sombras. Vou escolher o mesmo azul aqui e diminuir o seu tudo por 20 e mudei o Y 28 e o Borrão para 15. Isso é muito bom. Então precisamos adicionar uma mensagem que ela está assinando. Deixe-me mudar a cor e mudar o fundo para Mont Sarah. E então eu vou mudar o tamanho da fonte para 20 pontos, e também vai ser irregular. Isso pode alinhá-lo ao centro verticalmente muito bom. Como você pode ver, temos 24 pixels para o topo e 24 pixels para o fundo, e também precisamos ter 24 seleções à esquerda. O que mais precisamos? Sua direita. Precisamos de uma seta para a direita para colocar a direita ali. Então vamos trazê-lo aqui, seta para a direita arrastar e soltar. Mas é bem ali, e então isso é alinhá-lo verticalmente. Ótimo. Temos 24 pixels para o topo e 24 pixels para a parte inferior e também para a direita. Na verdade, é ótimo agora, no entanto, no entanto, vou adicionar alguns detalhes ao nosso fundo, a fim de torná-lo único e incrível. Então o que eu vou fazer é adicionar ordem direita círculo e vamos em Fronteiras Checa e torná-lo 144 por 144 pixels. Ótimo. E depois isso. Selecione o círculo segurando a tecla de comando e clicando nela. E aqui em nossa camada, pelo menos podemos clicar com o botão direito do mouse em, Clique na cópia Stein. Ok, então vamos usar o círculo e novamente, clique direito e cole I. Isso é ótimo. Depois disso, eu vou girar 90 graus como este e colocá-lo direito estavam lá. Então vamos eleger nosso retângulo e chutar uma máscara. Bastante incrível. Isso pode movê-lo um pouco. Eu vou mudar a direção desses Grady ins como este Incrível, e deixe-me duplicar e colocá-lo bem ali. E mais uma vez, isso é escolher o primeiro círculo e copiar o estilo porque você vai usar o mesmo grau que Ian está aqui e colá-lo para o nosso segundo xarope doente. E eu vou mudar a direção assim e vamos colocar esta camada abaixo do nosso círculo roxo Muito impressionante. Vou movê-lo um pouco, e também este. Eu acho que é ótimo. Você pode ver o quão bonito é fácil? Nós só adicionamos formas simples. Poderíamos fazer parecer muito, muito melhor do que agrupar todos os nossos elementos e chamá-lo de “signing bottom”. É preenchimento inferior vai ser 64 como este em Isso é tudo o que ele criou com sucesso estão assinando página está certo. Espero que gostem deste vídeo. No próximo vídeo, continuaremos criando nossas páginas de assinatura e também a página de boas-vindas. Então, vejo você então. 100. Inscreva-se na página parte 2: Oi, todo mundo. Bem-vindo de volta a outro vídeo fora desta seção nestes vídeo que estamos indo para projetar são página de boas-vindas as outras páginas de assinatura e também o nosso assinar uma página assim sem, para eu fazer vamos começar. Primeiro, vou mover estas obras de arte para o lado direito e vamos duplicar e deixar-me trazê-la aqui. Incrível. E depois vou mudar o nome dele para dar as boas vindas ao Grande. Vamos remover esses elementos porque não precisamos deles. Perfeito. E então eu vou selecionar nosso grupo Shapes. E vamos assustar Lee para 970 muito bem, e então eu vou girá-lo em 28 graus. Isso é incrível. A última coisa que precisamos fazer é mudar sua posição. Vamos definir os ovos para menos 595 e um y tu menos 581. Isso é ótimo. Então, o que mais precisamos? Precisamos de outro botão aqui para assinar uma página e deixe-me movê-la um pouco para cima e eu vou duplicá-lo e colocá-lo bem ali. Vai ter um preenchimento de 16 picos L bastante incrível e eu vou mudar as pastas. Nome para se inscrever, botão. Oops. Precisamos mudar essas pastas. E da Emma? Bem, eu escrevi o fundo do sinal. Preciso mudar para assinar. Ótima. E para estes botões, vou verificar campos e também sombras. E vamos verificar as fronteiras. Lembre-se, quando você está colocando dois botões diferentes como estes assinatura e sinal de botões que temos aqui, você deve usar dois tipos diferentes de botões. Por exemplo, aqui, vamos ter um botão de contorno para assinar um botão, tudo bem. E vamos remover esses círculos porque não precisamos deles. E eu vou mudar a cor do nosso dedo do pé, nossa cor primária, que é 27 43 F d. Deixe-me copiar esses códigos hexadecimais porque eu preciso disso, e eu vou mudar esses técnicos para se inscrever. Deixe-me mudar sua cor para nossa cor primária também. E também, vou mudar a cor da nossa flecha para a mesma cor primária. Fantástico. E vamos como ambos os fundos e movê-los para cima porque precisamos ter um acolchoamento de fundo 64. Como o que tínhamos aqui. É 64. Perfeito. Esta vai ser a nossa página de boas-vindas. Certo, precisamos de mais uma página de assinatura aqui, então deixe-me duplicar. E desta vez eu vou revelar essa senha. Ok, então eu vou mudar os quadros de arte. Nome para a senha de assinatura. Ótima. E vamos mudar essa senha para algo como você, eu para qualquer 20. E também precisamos mudar esses ícones. Então vamos trazer o nosso novo Eu posso ouvir minhas latas e precisamos procurar por eu escondido. Lá vamos nós. Vou colocá-lo ali e vamos remover o ícone anterior e o assento. Esta tela também está pronta. Agora vamos projetar dois sinais diferentes de páginas. Ok, então deixe-me duplicar esta página de assinatura, certo? E eu vou mudar seu nome para me inscrever. Incrível. E vamos mudar o título dele para se inscrever também. E também este botão você precisa alterá-lo para se inscrever e lembre-se de alterar o nome Fullers aqui para se inscrever botão. Bastante bom. Esta página também está pronta, e a última página vai ser outro sinal de página. No entanto, desta vez você vai mudar o estado deste campo fiscal. Ok, isso mudou o nome dos portos de arte para se inscrever. E-mail de remo traço. Tudo bem, deixe-me ampliar. Então, aqui. Vou modificar este endereço de e-mail para algo assim. Ok? Definitivamente. É o endereço errado. E o que vamos fazer é mudar a cor do endereço de e-mail do título e também a linha dos campos de texto para a cor vermelha. Certo, então vamos eleger nosso título. E eu vou mudar você para f d 27 27. Ótima. E também selecionar o texto sente nove e mudar o estudioso de fronteira para F D 27 27. A última coisa de que precisamos é de um texto informativo aqui. Ok, então deixe-me adicionar as tomadas aqui e direita, o endereço de e-mail está incompleto. Incrível. Vou mudar o seu caminho para a luz e também o seu tamanho para um 13. Bastante bom. Isso pode alinhá-lo à esquerda, e eu vou colocá-lo dentro do nosso endereço de correio, Fuller, que está aqui, e então podemos nos alinhar perfeitamente. Vai ter um preenchimento de pixel top. Incrível. E vamos eleger esses campos de texto em. Também esqueceu passado para texto e movê-lo para baixo. Você terá 24 picaretas. L top adicionando, assim Agora tudo está certo. Se desejar, você pode ir em frente e projetar diferentes estados fora de qualquer sensação fiscal. No entanto, para o bem deste curso, vamos apenas projetar dois estados diferentes, certo? E precisamos de mais uma tela aqui, que é o estado de digitação. Ok, então deixe-me duplicar isso assinar uma página. Ótima. E eu vou mudar o nome dos nossos portos para me inscrever digitando. Então o que precisamos é de um teclado. Então vamos em frente e inserir uma maçã I usu. Eu sistema teclados iPhone, e eu vou usar luz. E aqui, alfabético, vou colocar bem ali. Muito legal. Então agora vamos eleger esses elementos são sinal de título e também nossos campos de texto e movê-los para cima assim. Nosso melhor esconderijo é 299. Eu vou fazer 300 assim, e nós também precisamos adicionar um marcador de entrada de texto. Ok, então o que precisamos é apenas adicionar uma linha como esta. Vou mudá-lo para 19 e também sua borda com 1,5 e sua cor para o mesmo roxo aqui. E deixe-me movê-lo para baixo assim, e eu vou colocá-lo dentro do nosso passado para têxteis. O Fuller. Lá vamos nós. Como este. Muito bom. Vou mudar alguma coisa aqui. Vamos eleger estes têxteis e movê-los para cima até termos um topo de 24 pixels adicionando. Ótima. E agora vamos eleger ambos os campos de texto e nosso título e movê-los para baixo até termos um top 311 escondido como este. Eu acho que é ótimo. Nós também podemos pré-visualizar Comer isso. Tudo está certo para projetar com sucesso nossas páginas de assinatura e inscrição e também nossa página de boas-vindas. Então, no próximo vídeo, vamos projetar nossas páginas de verificação OTP. Mal posso esperar para te ver lá. Então vejo-te isso 101. Verificação de OTP: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos projetar nossas páginas de verificação OTP juntas. Então, sem mais delongas, vamos começar. Primeiro, Spurs, precisamos de uma nova obra de arte. Então deixe-me duplicar essa página de boas-vindas aqui, e eu vou colocá-la exatamente onde eles estão para manter nossas câmeras organizadas assim. E precisamos remover essas formas e também este logotipo e também nosso botão de inscrição. Vou inserir o status bem no topo. Lá vamos nós, e eu vou alinhá-lo para o topo e deixe-me colocar esta música no botão aqui. Precisamos mudá-lo mais tarde. Então, para que serve a verificação OTP? OTP significa senha única. Ok, então precisamos obter o número de usuários, e então devemos enviar um código de acesso, por exemplo, uma senha de quatro dígitos, e então o APP precisa confirmá-lo. Então vamos projetar três páginas diferentes para isso. As primeiras coisas vão. Deixe-me ir em frente e me trocar. Estes são os nomes de portas para OTP. Ótima. E então eu vou colocar uma ilustração bem ali. Então vamos abrir a pasta de ilustrações do nosso arquivo de ativos. Lá vamos nós. Aqui temos OTP. Perfeito. Eu baixei esta ilustração do site Andhra. Como eu mencionei antes, você pode obtê-lo de graça. Então vamos alinhar horizontalmente e parar. Lutar vai ser você 100 assim e eu vou ir em frente e copiar e colar este título aqui porque precisamos dos mesmos fundos na mesma cor e uma linha para o centro e também aqui. Em seguida, a mudança, o tamanho da fonte para 24 pontos e verificação OTP direita Muito bom. Ele vai ter um preenchimento de 60 pixels como este e deixe-me duplicá-lo e mudar. É divertido dimensionado para 16 pontos e também de touro para regular e a linha alta para 24. Então vamos à direita. Enviaremos ao mesmo tempo a senha para este número de celular. Tudo bem? E então eu vou diminuir o com 2 310 e uma linha para o centro perfeito. E vai ter um pico de 24 melhores lutas como esta. Então precisamos ter um campo de texto aqui e também um título. Então vamos acabar com seu número mais bile, e eu vou mudar o fundo para o texto SF Pro e também seu tamanho para 14 pontos e a cor para um cinza claro. Isso é certo. B nove b nove e sendo nove muito bom alinhando com o centro e precisamos do campo fiscal aqui. Então eu vou escolher o mesmo campo leva que nós criamos para a nossa página de assinatura. Deixe-me selecionar isso e copiá-lo e colá-lo aqui. E então eu vou fazer você 233 e ele está alinhando para o centro e movê-lo para baixo. Também precisamos de um número aqui, então vamos duplicá-lo. E aqui você pode escrever qualquer número. Então vamos à direita. Mais 49. +111222333 Ok, E vamos torná-lo ousado e mudou um colar o mesmo cinza escuro aqui. E precisamos também aumentar o tamanho do fundo para 18 pontos por linha para o centro. Ele vai ter 24 pixels top lutando, então torná-lo 24 muito incrível. E vamos selecionar todos esses elementos. Agrupe-os direito, mais número de bile. E agora é hora de criar nosso novo fundo aqui. Ok, eu vou fazer algumas mudanças para torná-lo único. Primeiro em primeiro lugar, eu vou remover esses ícones e selecionar esses textos e nosso rec tango e alinhando para o centro Perfeito. Então vamos à direita. Obter OTP muito bom. Mais uma vez, alinhe-o. E por último, mas não menos importante, vamos mudar a posição dessas formas. Ok, eu vou selecionar este azul e colocá-lo exatamente onde está se movendo para baixo. Vou girá-lo assim. Perfeito. E vamos selecionar o 2º 1 e colocá-lo aqui e vamos girá-lo também para a direita para obter algo assim. Isso é incrível, não é? E eu vou mudar o nome Fullers para obter OTP. Barton, deixe-me mover este azul um pouco para a esquerda e este roxo cada pouco para baixo e para a esquerda. Agora está ótimo. Agora é hora de verificar o estofamento fora do ponto em. Ele precisa ter um preenchimento inferior de 64 pixels, então vamos fazer 64. E agora tudo está feito. Certo, agora é hora de criar nossa segunda página aqui, então deixe-me duplicar aqui e chamarei de verificação OTP. Então isso mudou esses impostos também. Digite a areia OTP também. Este número. Ok, isso mesmo. Plus 49 +111 222 e 333 Em seguida, selecione este número e torná-lo em negrito. Perfeito. E precisamos remover esses elementos que entram no meu título de madeira e também este número. No entanto, temos de manter esta linha. Então vamos selecioná-lo e torná-lo para os oito como este e criar texto. Por exemplo. Vamos escrever sete e mudar o fundo para SF pro text e aumentar o tamanho para 24 pontos. Incrível que selecionam os dois elementos e os alinham. Vai ter um pico de venda sobre impactar assim. Vamos agrupá-los e aqui precisamos escrever campo de texto. Então isso é duplicado três vezes. Vamos adicionar um preenchimento de 24 pixels entre eles. Ok, como este perfeito. Eu vou agrupá-los, alinhá-lo ao centro e à direita ou TP sente texto. Então isso mudou esses números. Eu vou mudar o 2º 123 e também vamos remover esses dois porque nós vamos desativar Thies para imposto se sente bem como o usuário está digitando. Então eu vou mudar essas cores da borda para ser nove B nove e B nove Muito impressionante, e eu vou movê-lo para cima. Vamos ter 58 Peak, vender estofamento e vamos ter um imposto aqui. Vamos à direita, Não recebeu o OTP reenviar OTP. Tudo bem, eu vou mudar o tamanho da fonte para 14 pontos e também uma linha para o centro e, em seguida selecionar a primeira parte desta frase e mudar a cor para ser nove benigna, benigna e selecionar a segunda parte, que é reenviar OTP e mudá-lo para a nossa cor primária, que é 27 43 F d. Isso é fantástico. Então vamos movê-lo para cima. Vai ter um top de quarenta pixels, adicionando, assim e por último, mas não menos importante, vamos mudar os espartanos. Isso é mudar dois. Muito bem. No entanto, Como você pode ver, o usuário não completou os tanques, sente OK, então este botão vai ser desativado. Como podemos fazer isso? Nós vamos selecionar nossa máscara aqui em que é duplicado, em seguida, filmes direto para o topo como este, nós precisamos mudar o int Grady para sentir e vamos torná-lo branco e diminuir a capacidade para 40% muito impressionante. E também, vamos eleger nosso local onde encontrar tanques e diminuir a opacidade para 50% muito grande, certo? Você pode ver a diferença aqui? Muito bem, estas páginas também estão prontas. Precisamos de mais uma página. Então vamos duplicar e eu vou completar esses sentimentos de impostos. Então deixe-me duplicar este número. Coloque bem ali e alinhe para o centro. E eu vou colocá-lo em sua própria pasta. Vamos mudar para zero Incrível. E também mais uma vez duplicado. Coloque-o aqui, alinhe-o e vamos colocá-lo no seu próprio mais completo também e mudá-lo para dois. Agora precisamos mudar a cor de nossas linhas. Ok para a mesma cor primária como esta. E por último, mas não menos importante, emitiu água ativadora. O que precisamos fazer é remover essa camada adicional como esta e também aumentar a capacidade do nosso texto para 100%. Isso é fantástico. E deixe-me mudar o nome de nossas portas para OTP Verify. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que você tenha gostado e eu vou vê-lo no próximo vídeo 102. Perfil: Oi, todo mundo. Espero que esteja indo bem nesse vídeo. Vamos projetar duas telas diferentes. A primeira tela é o nosso perfil, e a 2ª 1 é a nossa página de perfil concluída. Então não ouvimos dizer. Vamos começar. Primeiro de tudo, precisamos duplicar este quadro de arte, e eu vou mudar o nome dele para o perfil. Incrível. Então precisamos remover quase todos os elementos aqui porque não precisamos deles. No entanto, eu vou manter este botão bem aqui. Então eu vou em frente e inserir tango ereto como nosso fundo assim. Perfeito. Então isso é nas Fronteiras Czech, e eu vou sentir isso. Tínhamos um ótimo não. A primeira cor vai ser 49 60 e f nove, e a segunda cor vai ser 1937 f e impressionante. E deixe-me mudar a direção um pouco. Vou fazer assim. Perfeito. Então vamos fazer a nossa barra de status e também o nosso indicador doméstico branco. Então eu vou mudá-lo para este aqui e também aqui. Perfeito. O que mais precisamos? Primeiro, precisamos de uma seta para a esquerda para nossos propósitos de navegação. Então vamos trazê-lo aqui a partir de nossos ícones de arquivos de ativos. E aqui nós deixamos Arrow Dragon Drop. Estou tentando pedir. Como miso significa que vai ter um acolchoamento de 30 pixels esquerda e também um 68 top adicionando, como este Perfeito. Então precisamos de um espaço reservado de imagem aqui. Ok, então vamos inserir em torno dele turno inteiro e clicar e arrastar. Incrível. Vai ser 100 por 100 pixels e mudar o raio Tempo para fumar cantos e também mudou a quantidade para 36, em seguida, em Fronteiras Checa e torná-lo branco. Perfeito. Agora é hora de alinhá-lo ao centro para é totalmente então eu vou duplicá-lo e colocar nossa nova camada bem abaixo da nossa primeira camada assim. E eu vou mudar você para azul porque nós precisamos mudar a cor para azul também. E a cor vai ser 40 c e f. Dois. Incrível. Então vamos girá-lo. E aqui, vamos escrever 38 graus muito bem. Agora vamos eleger a Caçadora o azul e mudar seu tamanho para 104 e alinhando para o centro assim e uma vez contra eleger nosso retângulo branco e duplicado e colocar este retângulo abaixo são azul um e mudar sua cor para ser cinco para duplo F e oito e então vamos girá-lo em 30 graus, e eu vou mudar seu tamanho para 106 grandes células por 106. Então vamos alinhá-los ao centro. Tanto vertical como horizontalmente estão certos. E agora vamos eleger este azul e eu vou girá-lo um pouco para a direita assim . 57 graus seria bom. Então, o que mais precisamos? Precisamos de um ícone de câmera bem ali, então vamos trazê-lo aqui. Aqui temos câmera. Vou arrastá-lo e soltá-lo aqui e é o lugar. Está bem ali, e vou alinhá-lo ao centro, tanto recentemente como verticalmente. Perfeito. Então vamos agrupá-los e eu vou nomeá-lo. Imagem do perfil. Incrível! E ele parar de adicionar, vai ser 84 para a borda da nossa tela assim. Muito bom. Então é hora de adicionar nossos selos fiscais aqui. OK, precisamos adicionar nome de usuário, primeiro nome, sobrenome e data de nascimento leva campo então vamos usar os tanques sente que criamos para nossa página de registro. Vou usar este aqui. Você pode copiar e colar o que quiser. Vamos colocá-lo aqui. Perfeito. Tudo bem, agora deixe-me movê-lo para cima assim, e eu vou mudar o primeiro título para nome de usuário e isso graças também ao seu nome de usuário . Perfeito. As linhas vão ser brancas, então deixe-me fazê-las brancas. Perfeito. Você não precisa deste ícone, obviamente. E deixe-me esconder este ícone de carrapato. Vou mudar o segundo título dos campos de texto para o primeiro nome. E aqui está o seu nome. Então precisamos duplicar esses campos de impostos. E aqui vou escrever o sobrenome. E aqui precisamos escrever seu sobrenome. E o último vai ser a data de folga do nascimento. Então é isso mesmo. Data de folga do nascimento. E aqui vou eu escrever seu aniversário. E aqui vou eu escrever D D. Que é o dia Mm. O que são mães e por quê? Por quê, por quê? Qual é o ano perfeito? Então vamos selecionar tanques antigos. Você pode segurar a tecla de comando e deslocamento e escolhê-los e mudou sua cor para um T E. zero duplo f. fantástico. Vou mudar o nome do Fuller aqui. O 1º 1 será o nome de usuário. O 2º 1 vai ser o primeiro sobrenome e aniversário. Incrível. O título de topo vai ser 44. Lá vamos nós. E a última coisa que precisamos fazer é mudar as manchas. Então, as tarifas da primeira coisa. Vou escolher um retângulo e torná-lo branco. E aqui, certo, completo. E vamos mudar a cor para um cinza claro como C oito c oitavo e ver oito. E não precisamos desses círculos. Isso é removê-los estão certos. O que mais precisamos? Sua direita. Precisamos de um ícone de teca aqui, então vamos trazê-lo aqui. Vou copiar e colar. Então vamos mudar sua posição. Ele vai ter um preenchimento de oito pixels para a esquerda, e eu vou torná-lo maior. Então vamos mudar o com 2 22 perfeito e alinhá-lo verticalmente, então precisamos obter 28 para o top 28 para o fundo e oito canções de pico para as noites esquerda. Hora de mudar a cor aqui. Isso mesmo, C oito c oito e ver oito. Muito bom. Então precisamos agrupar ícone do Ártico com o nosso texto e escolher o nosso retângulo e alinhar, comer ou é totalmente fantástico. Agora vamos em frente e duplicar. Estes não são um nome que perfilou, completou. Incrível. Em seguida, vamos remover o ícone da câmera e selecionar o nosso perfil imagem holer lugar, dados anglicanos, esboçar faces de dados. Vamos atualizar os dados para obter o melhor possível. Eu acho que é ótimo. E então eu vou selecionar a forma azul e roxa que criamos e movê-los para fora desses mais cheios assim e colocá-los direito sobre o nosso retângulo de corrida bancária. E vamos matá-los para 438 assim, e eu vou colocá-los aqui. Se eu clicar duas vezes sobre este azul e pairar minha boca sobre o caminho, eu posso ver que um ponto aparece clicando aqui. Posso movê-lo assim. Eu posso mudar o raio também, então vamos colocá-lo aqui. Vou mudá-lo para obter a melhor forma possível. Perfeito. Agora é hora de mudar nossa forma roxa. É clicar duas vezes sobre isso e clicar aqui. Clique neste caminho para inserir um ponto e movê-lo um pouco assim e mudou um raio. Bastante incrível. E finalmente, vamos movê-lo aqui, girado um pouco em Vamos escalá-lo para 445. Isso é fantástico. Então precisamos adicionar nossos dados aqui. Então vamos usar o nome de usuário na direita Emma em sua linha, Ashley, e torná-lo branco e lembre-se de apresentar um ícone de tick aqui. Certo, então vamos mudar o nome para Emma. Faça-o branco também. E aqui, o sobrenome para realmente perfeito eo aniversário 20-12 traço 1990. Torná-lo branco também, e isso é duplicar estes ícone tick. Nem tê-lo em cada campo fiscal. Vou colocá-lo no seu próprio completo e aqui também. Nós tínhamos 16 pixels sobre impacto, e isso é um para a nossa data de nascimento. Uma resposta bonita. Agora é hora de ativar nosso podre. Então vamos eleger esse texto e mudar a cor para 47 FC. Ela é a nossa cor primária. E para a vara icona lento para ser 47 f c. Tudo bem. Estamos quase terminando. No entanto, vou adicionar algumas sombras à nossa foto. Então vamos selecionar esse retângulo e as sombras e diminuir o na fazenda para 20 e o vinho para 8 e Blair para 22. Bastante incrível. E lembre-se de alterar o nome dessas pastas. Aqui temos recebe botão OTP porque duplicamos a palavra R. Então isso está mudando para completar Botton e aqui também. Fantástico. Tudo bem, pessoal, isso é tudo para estes vídeos. Espero que você tenha gostado e eu recebo um no próximo vídeo. 103. Página inicial: Oi, todo mundo. Bem-vindo de volta a outro vídeo das seções deste vídeo. Vamos projetar nossa página inicial juntos. Então, sem mais delongas, vamos começar. Primeiro, vou inserir um novo quadro de arte. Lá nós dourados seremos movidos para cá. Então precisamos da barra de status. Vou copiar e colar. Vou deixar isso como uma provocação. É branco porque vamos adicionar um fundo ali. Então eu vou inserir em torno dele assim, e eu vou mudar sua alta para 278 e seu raio para suavizar cantos e, em seguida, aumentar o raio para 66. Perfeito. Depois disso, eu vou clicar duas vezes sobre que primeiro Vamos em Fronteiras Czech e, em seguida, seleciona os pontos superiores perfeitos e diminuir o raio para zero. Então teremos uma forma como esta. Então eu vou adicionar uma nota nele. Teremos os mesmos Grady INTs que usamos aqui em nossa página de perfil. Então deixe-me escolher Theis Retangle no perfil, página concluída e clique com o botão direito. E isso é estilo de cópia e clique no ângulo indireto no quadro de arte clique direito colar. Eu sou muito bom, então eu vou em frente e mudar os quadros de arte. Efeito de nome para página inicial. Então, o que mais precisamos? Precisamos de uma imagem de perfil ali. Hambúrguer, muitos direitos de ícone no topo. Uma mensagem aqui. Vamos inserir um cartão aqui e colocar nossa carga sobre isso e bem no fundo. Precisamos de uma torneira. Então vamos em frente e design são torneira estão juntos. Do que precisamos? Precisamos inserir o tango do Eric assim, e eu vou mudar o máximo para 92 nas Fronteiras Tchecas, depois alinhá-lo de forma ressentida e alinhando ao fundo. Perfeito. E depois disso, vou mudar sua cor para querer, não algumas sombras. Vou diminuir a quantia dos cinco para 10% e a Blair para 20. Isso é ótimo. Agora precisamos de um indicador doméstico aqui, então vou em frente e trazê-lo aqui. Vamos mudar para a luz. Isso é ótimo para esse tipo. Precisamos ter três seções diferentes ou, digamos, três ícones diferentes. O primeiro ícone será uma carteira. Ok, que é para home page. Então, vamos trazê-lo aqui. Ícones. E aqui temos batido para Fuller e três ícones diferentes sobre suas carteiras, perfil e edificação. Então vamos trazê-los todos assim. Vou colocar a carteira aqui. O perfil aqui e uma notificação escrevem no centro. Incrível, em seguida, que Selecione todos eles e alinhá-los verticalmente. E o ícone direito da carteira dos anos 40 vai ser 90. E também para estes ícone de notificação vai ser 90 também. Então vamos mover esses ícones de perfil para a esquerda assim, em seguida, agrupá-los e movê-los para cima. E vamos ter um preenchimento superior de 24 pixels e alinhá-los ao centro assim. Perfeito. Então, para mostrar que este ícone ou esta página está ativado, você vai mudar a cor desses ícones para a nossa cor primária como esta. Ok, então porque essa página vai ser nossas carteiras ou home page, precisamos manter isso como está. No entanto, vou acrescentar algo a ele. Eu fui inserir um pequeno círculo nas fronteiras checas e torná-lo cinco por cinco e mudar sua cor para o nosso primário como este. Muito bom e vai ter um top top top top de oito. Perfeito. Vamos eleger um ícone de carteira e também o nosso círculo e uma linha para o centro. Incrível. Então o que eu vou fazer é criar alguns símbolos para que possamos ativar ou desativar são ícones. Fácil. Ok, então deixe-me agrupar este ícone da carteira com este círculo e eu vou escrever, eu quero. Em seguida, crie símbolo. Isso é certo. Haps barra carteira barra ativo. Ok, então vamos copiar o código de cor deste cinza escuro e ir para Símbolos Página, e eu vou duplicar este símbolo assim. Então vamos remover o círculo e mudar a cor da nossa carteira, também. São cinzentos escuros. E por último, mas não menos importante, precisamos mudar o nome aqui de ativo para o perfeito ativo, e vamos fazer a mesma coisa para os outros dois ícones. Então vamos voltar para nossos poros. Perfeito. E aqui se eu disse como esta carteira, Eu posso facilmente alternar entre ativo e ativo aqui. Vês? Como é que ele é fantástico são agora vamos como a nossa notificação que eu posso e clique em criar símbolo e aqui eu vou escrever toques barra notificação cortar o ativo. Então vamos aos símbolos. Lá vamos nós. E então eu vou aumentar a altura aqui para obter a mesma altura que o ícone da nossa carteira. Perfeito. E está duplicado e eu vou copiar e colar e Sirico. Vamos alinhá-lo ao centro, e é hora de mudar a cor da nossa forma. Lá vamos nós. E agora vamos mudar os quadros de arte. Nome muito ativo. Perfeito. E aqui podemos alternar facilmente entre o grande ativo e ativo e o último. Vamos criar outro símbolo. Guias de perfil de barra barra barra o ativo. Vamos para símbolos Página. Lá vamos nós e, em seguida, aumentar a altura perfeita. E agora eu vou duplicar e copiar e colar esse círculo aqui e alinhar no centro e mudar a cor dessa forma. E isso é o mínimo. Lembre-se de mudar o nome deste símbolo aqui. Precisamos estar ativos, só isso. Vamos verificar isso. Dois funciona perfeitamente. Tudo bem, então podemos agrupar todos esses elementos e guia direita são, e também podemos criar um nerd símbolo para usar isso em nossas próximas placas de arte facilmente aqui podemos escrever Tab são perfeitos. A próxima coisa que precisamos fazer é mover o retângulo direto para o fundo assim. E então precisamos trazer nosso ícone de menu de hambúrguer aqui. Temos menu de hambúrguer arrastar e soltar. Incrível. Vamos colocá-lo aqui. Vai ter um acolchoamento de 30 pizzas e 68 píxeis como este. E depois disso, precisamos colocar nossa imagem de perfil bem ali. Então vamos em frente e copiá-lo e colá-lo de nossa página de perfil como esta em uma escala para baixo para 50 x 50 pixels quando eu colocá-lo bem ali. Miso significa Agora é hora de inserir um círculo um pequeno círculo aqui e torná-lo 10 por 10 pixels . Mude a cor da borda do dedo do pé branco e mude o campo para 20 c nove 68 para obter este belo verde. E é o indicador de status para mostrar se o usuário está online ou não. Ok, então ele vai ter um preenchimento de 42 pixels superior e um 38 pixels esquerda tapting. Então podemos agrupá-los, e aqui, imagem de perfil direita. Como você pode ver, temos um acolchoamento direito de 30 pixels, e precisamos ter um top 68 grande venda, adicionando perfeito. A próxima coisa que precisamos é de um texto. Então vamos inserir um e escrever Bom dia, acabar com ela Emma e uma vírgula que está alinhando à esquerda e torná-lo branco. E eu vou mudar o tamanho da fonte para 24 pontos também. Como este. A próxima coisa que precisamos é de um cartão. Então vamos inserir em torno dele aqui assim, e eu vou fazê-lo 315 por 316. Eu já calculei porque precisamos colocar uma carga sobre isso, que nós torná-lo branco nas Fronteiras Checa e adicionar sombras. Mude seu vinho para nove e Blair para 49 diminuiu o em por 2 10% como este e, em seguida, alinhe-o ressentido. Como você pode ver, nós temos 30 pixels de preenchimento esquerdo e 30 pixels de preenchimento direito que nós movê-lo para cima e então eu vou diminuir o raio para 40 para obter um belo retângulo. E é parar. Adicionar à borda da tela vai ser 199. Ok, então vamos fazer 199. E o preenchimento entre este texto e este retângulo vai ser 16 pixels como este. Então aqui neste cartão, precisamos adicionar um texto e corrigir o seu saldo total e mudou a cor 23 um três a e três A. E mudou o tamanho do telefone para 16 pontos como este e vai ter um 32 picos vender top adição e também um 32 picos. L esquerda preenchimento como este duplicado e torná-lo negrito e também alterar o tamanho da fonte para 30 pontos. Então eu vou escrever $8500. Isso mudou a cor para dois D 99 duplo f muito bom. E a altura da linha vai ser 37 o título superior. São oito pixels como este. Uma incrível. Além disso, precisamos colocar um gráfico bem neste espaço em branco e um ícone bem no topo aqui . Certo, então vamos trazer mais um ícone. Lá vamos nós. Quando eu colocá-lo aqui, deixe-me pegar as almofadas. Vai ter 32 picaretas, ajuda a adicionar à direita e eu vou alinhá-lo, Pete, este texto para obter um cabeçalho de 32 pixels também. Agora é hora de criar nosso gráfico. Ok, nós também podemos usar gráficos pré feitos para o nosso projeto. No entanto, vou mostrar-lhe como criar um gráfico sozinho. Vou criar um gráfico de barras que tem um valor negativo também. Então vamos inserir em torno dele assim. E eu estou indo em Fronteiras Checa e mudou um com 29 e um alto para 122 que miso significa duplo Clique neste tango naufrágio e escolher esses pontos inferiores e diminuir o raio 20 Perfeito. Então precisamos mudar a cor para o 99 duplo F. É a mesma cor que usamos para o nosso texto de balanço. Ok, então eu vou duplicá-lo, movê-lo aqui, movê-lo aqui, clique com o botão direito, transformar para a vertical e torná-lo mais curto e colocá-lo aqui. Agora, o que mudou? Um colar para cinco F três e duplo f perfeito, e vai ter um preenchimento de quatro pixels como este. Então vamos agrupá-los. Isso é Collett Colin um duplicado e colocá-lo alimentar um preenchimento de 16 pixels mais uma vez duplicado. Vou ter cinco colunas por enquanto, assim. Em seguida, selecione essas colunas altas e diminua sua altura. Perfeito. E também este Diminua-o e este também para alguns. Ótima. E agora eu vou selecionar essas colunas azul claro e novamente virar verticalmente e colocá-lo aqui. Ok, isso é diminuir sua altura. E eu vou duplicar duas vezes assim. E agora precisamos dormir. Eles começam coluna azul, teoricamente diminuiu a altura e colocá-lo na seção negativa, Em seguida, aumentar a altura da nossa vida da barra para 70 células escolher. E eu vou removê-lo, a fim de economizar algum tempo e duplicar a última coluna e aumentar a altura desta barra azul escuro e aumentar esta também. Vou selecionar este pobre e diminuir a sua altura também. Agora é hora de agrupar todas as colunas, e eu vou chamá-lo de gráfico de barras. Perfeito. Em seguida, selecione um tango naufragado, alinhe-o ao centro horizontalmente e seu preenchimento inferior será 32 como este. Você pode ver o quão incrível é fácil? E agora é hora de agrupar nossos elementos e chamar esse cartão de saldo de grupo de incrível. E a última coisa que precisamos é de outro cartão. Ou, digamos que algum tipo de fundo para navegar usuário da carteira, página dois, página de contas bancárias. Ok, então o que eu vou fazer é duplicar o retângulo Theis e movê-lo para baixo e mudar a alta para 146 assim e mudar a cor para nossa cor primária, que é para ser 47 f e C incrível. E vai ter um top de 24 pixels adicionando e deixe-me inserir os tanques aqui. Vou escrever, verificar suas contas bancárias. Vou mudá-lo para normal e também o tamanho da fonte para 20 pontos e um colar para branco . E por último, mas não menos importante, vou diminuir o com 2 150. Isso é muito incrível. Agora vou alinhá-lo verticalmente, e vai ter 32 picos. L esquerda preenchimento como este enquanto deve ser adicionado a estes cartão ou digamos botão. Eu vou ir em frente e copiar e colar estas formas aqui assim e selecionar este Rick tango e clique em desmascarar. Então vamos eleger o roxo e eu vou fazer 198 pixels e colocá-lo direito. Ordem e o azul também para 198 pixels e colocá-lo aqui muito bom. E então precisamos de uma pequena flecha para colocar aqui. Ok? Então, vamos trazê-lo aqui. Flecha pequena. Lá vamos nós. E eu vou alinhá-lo ao centro verticalmente, e ele vai ter um preenchimento direito de 32 pixels também. Então vamos mudar o nome do grupo para cartão de contas bancárias. Incrível. E nós terminamos. Tudo está ótimo. Então é pré-visualizado. Como você pode ver, este projetou com sucesso uma página inicial incrível juntos. Espero que tenha gostado, e te vejo no próximo vídeo. 104. Cardápio: Olá, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos projetar a tela do menu. Ok, então quando o usuário clica no menu de hambúrguer, ícone e menu vem do lado esquerdo da tela aqui. Ok, então primeiro de tudo, deixe-me ir em frente e inserir um quadro de arte, e eu vou mudar seu nome para menu. Então o que precisamos é exportar esta página inicial. Então, vamos clicar nisso. No entanto, lembre-se de ocultar esta barra de status e também este indicador de casa. Eu vou te dizer o porquê em um minuto. Ok, então eu vou selecionar este indicador home, e aqui eu posso configurá-lo como non is right. Em seguida, selecione o nosso não são placa tornar exportável. E aqui, como você pode ver, nós não temos nenhum fundo, então eu vou verificar a cor do banco, incluindo exportação, e é branco por padrão. Então eu vou mudar o tamanho 23x e seu tambor de dragão. Pete aqui. Perfeito. Eu vou dimensioná-lo para baixo e mudar o com 2 375 que é o com fora da nossa tela. E agora deixe-me trazer nossa barra de status e indicador de casa de volta. Incrível. Então, por que a página de exportação da página inicial? Mas vê o que está acontecendo aqui? Quando o usuário clica neste botão de menu, esta página vai se mover para o lado direito assim e ouvir um menu seria exibido. Então deixe-me ir para a direita, e então eu vou inserir em torno dele ano que é clicar duas vezes sobre isso e escolher dois pontos. O canto superior esquerdo e o canto inferior esquerdo. O raio 20 bastante impressionante e mudou o com 2 281 E o raio Aqui, como podemos ver, temos 40 para estes dois pontos. Eu vou fazer 20 e nas Fronteiras Checa e torná-lo branco. Perfeito. Então eu vou mover nossa imagem para a direita. Agora está ótimo. No entanto, é muito brilhante. OK, então é uma boa idéia colocar uma camada de sobreposição, a fim de tornar sua camada mais escura. Então deixe-me inserir um retângulo aqui como este nas fronteiras checas. Torná-lo preto e diminuir a capacidade para 30%. Lá vamos nós. Isso é incrível. O que mais precisamos? Precisamos do indicador home, então deixe-me trazê-lo aqui agora você pode ver por que eu removi o indicador home e o status longe quando eu estava exportando que nossa porta, porque nesse caso teria dois indicadores diferentes, e não faz sentido. OK, então é necessário prestar atenção aos detalhes quando você quer se tornar um designer profissional de yuan UX. Certo, precisamos de uma imagem profissional bem ali, depois o nome do nosso usuário, o nome do usuário e ouvir algumas seções do menu. Então vamos trazer nossa imagem de perfil daqui. Copie e cole. Quando um protetor, o tamanho vai ser o mesmo. E vamos ter 30 picaretas. LF preenchimento em um cabeçalho superior de 68 pixels, então eu vou escrever um ano de nome. Vamos, Emma realmente torná-lo negrito, e eu vou diminuir o tamanho da fonte para 18 e mudar a cor. 23 um três a e três a. perfeito. Vai ter um preenchimento de oito pixels e eu vou duplicá-lo. Coloque aqui, e isso é direto para Emma. Sublinhe Ashley. Torná-lo regular e diminuir o tamanho da fonte para 14 pontos muito bom. Então eu vou movê-lo para cima e colocá-lo assim, ele vai ter 22 picaretas em cima indo para a borda superior do nosso nome. Texto. Certo, assim. Em seguida, agrupá-los e alinhá-los com a nossa foto perfeita. Agrupe-os novamente e alterou o nome para usuários. Informação. Fantástico. Agora é hora de criar nossas seções de menu. A primeira coisa que vou fazer é inserir em torno dele aqui, e vai ser 281 por 60 pixels e mudar o raio para 14 como este em Jake Borders, clique duas vezes sobre isso. Escolha estes pontos superior esquerdo e inferior dos cantos e diminuir o raio 20 Então vamos mudar a cor dois F dois, F quatro e F oito. Então nós temos um colar azul claro, como você pode ver aqui, uma cor azul muito vida. E então precisamos de uma mensagem. Então a primeira seção será pagamentos. Lá vamos nós. Vamos fazer 18 pontos e mudar sua cor para nossa cor primária, que é para ser 47 f c. Tudo bem, o que mais precisamos? Sua direita. Precisamos de um ícone. Então, vamos trazê-lo aqui. Aqui na nossa pasta de ícones temos um menu, Fuller. Então vamos trazer os pagamentos certos e colocá-lo aqui. Vou alinhar nossos tanques com nosso ícone verticalmente. Ótima. E vai ter um preenchimento de oito pixels. Perfeito. A última coisa que precisamos é de uma pequena flecha. Ok, então vamos trazê-lo de agora em diante, colá-lo mudar a cor para o nosso primário. Ela é esta aqui. Vou colocá-lo bem ali. Isso é uma linha verticalmente, até mesmo o nosso pega um ícone, e ele vai ter um acolchoamento direito de 30 pixels como este. Então não podemos agrupar esses elementos e pagamentos de colegas. E depois disso, vamos clicar duas vezes aqui agrupar esses elementos também e aqui, pagamentos corretos, e então eu vou copiar e colar aqui e movê-lo para baixo. Deixe-me mudar para transações, e terá 50 picos no topo. Adicionar aos nossos pagamentos leva aqui, então vamos conferir. É 48. Vou movê-lo para baixo agora. É 50. Então precisamos mudar o ícone aqui. Então vamos remover isso. Então vamos arrastar e soltar o ícone de transações. Ela é um pdf. - Tudo bem. Aqui. Vou colocá-lo bem ali e vamos eleger esses ícones de pagamento e alinhá-los horizontalmente. Incrível. Isso mudou o nome desses grupos para transações e agrupá-los mais uma vez com este ícone transações. Incrível! E mais uma vez, precisamos duplicá-lo e colocá-lo com o preenchimento de 50 pixels como este. Vamos mudar os tanques para as minhas cartas e remover este ícone e trazer para as minhas cartas. Icon, coloque aqui. Vai ter um preenchimento de oito semanas e eu vou colocar esta pasta dentro das transacções Copy Fuller e mudar a cópia das transacções para os meus carros. Incrível. Mais uma vez, vamos duplicar perfeitamente e mudar o texto para promoções. Vou trazer o ícone das promoções. Lá vamos nós. Isso é colocá-lo aqui. Isso é alinhá-lo e ele vai ter em um pico vendedor enchimento direito. E isso mudou o nome para promoções. E por último, mas não menos importante, vamos duplicá-lo para nossa seção de poupança. Isso está mudando para economia e remova esses ícones e traga o ícone de economia quando eu alinhá-lo . Também que colocamos este ícone de salvamento para a pasta de cópia de promoção e eu vou mudar o nome da cópia promoções para Poupança. Então eu vou selecionar todos esses ícones retendo o comando e deslocar e alinhar todos eles para o centro ou é a entidade Ok? Então agora podemos ter certeza de que todos os ícones estão alinhados perfeitamente. Agora, vamos verificar o preenchimento esquerdo. Aqui. É 50. Eu vou fazer 32. E agora vamos eleger todas as seções e movê-las para a esquerda. Torná-lo 30 para escolher células, e então precisamos mover essas pequenas setas para a direita para obter um 32 picaretas são preenchimento direito agora. É fantástico. Precisamos de mais uma coisa. Precisamos de um botão de saída bem na parte inferior. Então deixe-me ir em frente e trazer nosso botão de inscrição. Aqui. Copie isso. Cole. Aqui. Vou usar o mesmo esboço. Botão removido estas flechas, torná-lo menor. Vai ser 221 pixels e mudou os tanques para sair. E precisamos trazer a perna para fora. Eu posso ouvir que vai ter um acolchoamento direito de 24 pixels. Agrupe-os e chame-o. Botão Sair, e ele vai ter um preenchimento de 56 pixels como este. Tudo bem, pessoal, nós projetamos com sucesso nossa página do menu também, e eu espero que vocês gostem no próximo vídeo. Vamos projetar a página de carros juntos, então nos vemos em seguida 105. Cartões de crédito: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos desenhar a página dos cartões juntos. Então, sem mais, eu faço. Vamos começar. A primeira coisa sobressai. Vou continuar e duplicar esta página inicial. Deixe-me movê-lo. Aqui estão certos. E depois vou mudar a arte. Diga duas cartas. Perfeito. E precisamos quase remover todos os elementos. Está bem. Exceto este retângulo, que é o nosso cabeçalho. Vamos em frente e remover todos esses elementos. E também esta imagem de perfil e este ícone de menu. Então precisamos de uma seta para a esquerda para nossos propósitos de navegação. Então vamos em frente e copie e passos da nossa página de perfil. Lá vamos nós. E também, precisamos de um indicador doméstico, então vou copiá-lo e colá-lo daqui. Perfeito. Em primeiro lugar, precisamos de um texto. Está bem. Aqui. E eu vou escrever. Você pode verificar seus cartões aqui, e então eu vou torná-lo ousado. E finalmente, eu vou mudar o com 2 274 assim. É batendo à esquerda vai ser 30 células de escolha e ele parar de adicionar à borda da tela . vai ser 125 como uma provocação. Então vamos colocar dois cartões de crédito diferentes aqui, o primeiro 1 que é o nosso cartão principal criado. E o 2º 1 que é a alternativa. Ok, e depois disso, bem no fundo, vamos ter transações recentes. Então agora vamos em frente e criar nossos cartões. Para fazer isso, precisamos inserir em torno dele assim. Então vamos torná-lo 209 por 305 e mudar o tipo de raio para suavizar cantos e também aumentar o raio para 40 Perfeito em Fronteiras Checa. Vou enchê-lo de branco. No entanto, nestas partes, vou ensinar-lhe uma técnica muito boa, a fim de criar um brilho muito interessante ou, digamos, digamos corrida bancária para os nossos cartões. Então o que eu vou fazer é clicar sobre estes botão mais, a fim de adicionar outra sensação. E desta vez vou mudá-lo para o rádio Radiant. Ok, então isso é usar a primeira cor e mudar para 40 d três f e dois, e eu vou copiar e colar para a segunda cor. E nós vamos ter a mesma cor aqui. No entanto, eu vou diminuir a queda de tudo para zero perfeito. E então eu vou movê-lo aqui assim, e eu vou mudar o efeito de direção. Então vamos adicionar outros campos novamente Radial Grady int e escolher a primeira cor. E eu vou mudar você para e 100 duplo F e a mesma cor para o 2º 1 e novamente diminuiu o off para zero. E eu vou colocá-lo aqui. Mudaram a direção assim. Vou girá-lo assim. Perfeito. E então precisamos de outro Grady int. Então vamos fazer outro radiante radial aqui e mudar a cor para ser 47 FC e usá-lo para a outra cor também. E diminua todos os 4 para 0. Perfeito. E eu vou posicionar comer aqui no canto inferior direito. Tudo bem. E agora vou mudar os nossos Grady INTs para obter o melhor resultado possível. Então vamos filmar este rosa ou vamos dizer roxo quando eu movê-lo para cá, e então eu vou escolher este azul. O primeiro Grady int, como temos aqui estão certos e o último como este. Isso é perfeito. Vamos usar esses roxos de novo. Vou movê-lo para a direita, a fim de obter esta cor clara aqui. Isso é muito incrível. Então você pode ver como facilmente você pode criar fundo para tornar seu cartão único? Alternativamente, você pode criar seu plano de fundo com cores sólidas, e depois disso você pode colocar uma nova camada e verificar a opção Blair de fundo. No entanto, com o uso desta técnica, você pode facilmente fantasiar qualquer fundo aqui. Perfeito. Então eu vou mover este cartão ilegal com cima, e ele vai ter um top de 16 pixels adicionando como este e um batendo de 30 pixels esquerda, o que mais nós precisamos? Precisamos de um saldo aqui, então vamos escrever $4500. Perfeito. Vou movê-lo para cá. Vai ter um preenchimento superior de 38 pixels e 24 pixels restantes rebatidas duplicadas. E aqui eu vou escrever empresa, que significa que este cartão está relacionado com fins de trabalho e torná-lo 18 pontos. E também vamos mudar a linha de esconder para 22. Você deve estar se perguntando, pode ter mudado uma altura de linha. Certo, porque só temos uma linha aqui. Então, qual é o problema quando queremos sentar o estofamento entre o nosso imposto aqui, a altura da linha importa muito. Certo, suponha que seja aqui. Eu tenho um oito peças no topo do título Se minha linha altura Waas 29 aqui eu teria quatro picaretas Celta estofamento, e seria assim. Então a altura da linha importa muito, mas eles colocaram aqui com um top de três pixels, adicionando e eu vou inserir outro texto ali e vamos mudá-lo para regular e também o tamanho para 14 pontos e as apostas vão para representam a nossa data de validade. Ok, então aqui temos o mês e o ano muito bom. Temos 24 pixels para a esquerda ou para a direita, e agora eu vou duplicá-lo, nem para criar nosso número de carros para o 1º 12 dígitos deste número de cartão, eu vou usar uma estrela como esta. E os últimos quatro números vão ser 22 04 Eu vou mover essas datas de validade para cima e ele vai ter um preenchimento de 13 pixels inferior. E este também precisa ter um preenchimento inferior de 40 pixels deixe-me segurar shift e selecionar nossa data de validade também, e movê-los para cima. Perfeito. A única coisa que precisamos aqui é o logotipo MasterCard ou doninha. Carla, vá como quiser. Certo, mas para este projeto, vou usar o MasterCard. Então vamos trazer o logotipo aqui. Lá vamos nós. Aqui temos logo e logotipo MasterCard. Deixe-me arrastar e soltar aqui. Perfeito. Vai ter 22 pixels,preenchimento direito, preenchimento direito, e também um tapinha esquerdo de 12 pixels. OK, e o preenchimento inferior vai ser 32. E estes dois estão perfeitamente alinhados. Bastante incrível. Acho que é melhor mover estes Grady roxo daqui a pouco. Faça-o assim. Agora cria um contraste melhor. Alimente o nosso conteúdo. Ok, então vamos selecionar nossos elementos e agrupados na faculdade MasterCard. E a última coisa que precisamos aqui é adicionar algumas sombras. Então vamos eleger um retângulo. E aqui eu vou adicionar algumas sombras, e eu vou mudar a cor para 59 88 f 8. Incrível e mudar o tudo para 20%. E também o Blair para 49 o Y 2 90 Parece ótimo direito. Temos uma pequena sombra atrás dele. Tudo bem. Como mencionei antes, precisamos de outro cartão aqui, que é a nossa alternativa. Então deixe-me duplicar este cartão, colocá-lo aqui, e então eu vou reduzi-lo e definir o com 2 176 Perfeito. E vai ter 24 picos no topo, adicionando 24 pixels de preenchimento à esquerda e 24 células de seleções, preenchimento inferior. Certo, assim. E eu vou mudar o nome para carro principal para. E esta noite vamos ter um cartão branco. Ok, então vamos desmarcar essas notas Ian, em seguida, selecionar nossos elementos aqui muito bem e mudar a cor. 23 um três A e três A. E também, precisamos mudar essas cores sombra ano uma mudança para 29 29 29 torná-lo 10% assim. Lembre-se de alterar alguns destes conteúdos, a fim de transmitir a mensagem de que estes dois carros são completamente diferentes. Isso é para 1000 desta empresa para casa. E também esta data de validade. Vamos mudar o ano para 20 para qualquer um e um mês para três ou quatro e também, esses quatro dígitos 2 90 50 Tudo bem, nós criamos com sucesso nossos carros juntos. Agora precisamos projetar a seção de transações recentes. OK, então as primeiras coisas vão. Precisamos de um mal apertado que é certo, transações recentes e, em seguida, torná-lo negrito e mudar o tamanho para 22 pontos. Perfeito. E vai ter uma parte superior de 50 pixels e 30 picos de hambúrguer esquerdo. Então o que vamos criar aqui é pelo menos de transações, devemos colocar três transações diferentes aqui. Por exemplo, o 1º 1 pode ser para compras e o próximo para medicina e o último para esportes. Então o que eu vou ter aqui é um ícone para representar um tipo específico de transação. Então deixe-me inserir o círculo e mudá-lo para 48 por 48 como este em tremer bordas e mudar o colar para dobrar se C. F e 87 perfeito. E aqui precisamos inserir um ícone. Então vamos trazer o ícone de compras aqui temos meus cones e transações, e aqui temos quatro ícones diferentes. Precisamos das compras para o 1º 1 ou à direita, deixa-me entrar no centro. Bastante incrível. Você pode ver que cor são usados para estes bancos de compras? Eu posso supor que temos uma cor preta aqui e queremos escolher uma ótima cor. Ok, minha sugestão. Facilidade. Primeiro, escolha a mesma cor que temos para nossa rodada de banco e, em seguida, mova esses seletor de cores para encontrar uma versão de cabelo escuro da cor específica da morte. Esta é a melhor maneira de criar contraste adequado. Certo, então foi assim que escolhi essa cor específica. Então precisamos de um título aqui. Isso é certo. Compras e torná-lo 18 pontos e também regular. E a linha alta para 22. Bastante bom. E deixe-me duplicar porque precisamos ter tempo aqui e também um encontro. E vamos escrever 15. Março 2019 vírgula 8:20 p.m. E eu vou fazer 12 pontos e troquei um colar também. B f b f e B f k e a altura da linha também para 15. Bastante incrível. Então estes agradecimentos vai ter um top de quatro pixels adicionando, como este que selecionar as compras leva bem agrupá-los. E aqui temos mensagens. Escolha o círculo e alinhe-os verticalmente. Bastante bom. Ok, eu vou selecionar esse círculo e também nosso ícone e agrupá-los. Aqui temos o meu Khan e colocamos este ícone Fuller dentro da nossa pasta de compras. Então, o que mais precisamos para uma transação? Você está certo. Precisamos da quantia aqui. E também, eu vou colocar uma pequena flecha bem ali. Então deixe-me copiar e colar essas compras de texto. Vamos colocá-lo aqui e mudá-lo para menos $120 mudar o tamanho da fonte para 16 pontos. E também a linha oi para 19. Bastante bom. Isso pode alinhá-lo verticalmente. E então precisamos de uma pequena flecha aqui, então vamos trazê-la aqui. Também podemos criar um símbolo nem usar isso facilmente, colá-lo e mudar a cor para C sete C sete e C sete como este. E eu vou colocá-lo bem ali com 16 picos. LF estofamento como este e com uma célula de 30 pick, direita, Patty, no entanto, lembre-se de alinhar o texto para escrever, ok, porque caso contrário, quando mudamos isso quantidade, o alinhamento vai ser errado. Ok? E então eu vou colocar essas duas camadas dentro da nossa pasta de compras também. Perfeito. Como podem ver, temos 30 picos sobrando e Ryan estofamento, que é o que queremos. Então vamos duplicar esta camada e colocá-lo com o preenchimento de 16 pixels como este e mudar a cor do círculo para mais fácil 09 F F F. Isso é removido este ícone e trazer o medicamento que eu posso ouvir que está alinhando ao centro vertical e horizontalmente. Bastante incrível. Então é hora de mudar o nome Fullers para medicina como este e também este título eo tempo para 13 Março 2019 e aqui Vamos mudar o tempo para 12:10 a.m. eo montante para 89 Eu vou ter algum troco aqui. Então 89,50 porque alinhamos à direita. O com automático, eles aumentaram do lado esquerdo. Certo, então precisamos duplicar mais uma vez. E aqui eu vou mudar o nome Fullers para esporte e a cor dos cereais para um azul claro . Vamos escrever 87 F zero f r. direito removido este ícone e trazendo o ícone esporte de nossas transações. Fuller, deixe-me colocar em ícones Fuller e alinhando. Ambos ressentiam Lee e verticalmente. Então eu vou mudar o título para esporte e o tempo para 10 de março e o tempo para 6 50 PM E aqui vamos mudar o valor para 99,90 e pronto. Tudo parece linha. Deixe-me agrupar essas transações e nomeá-lo transações. E está tudo certo, pessoal. Finalmente criamos espaço para cartas juntos. Espero que você goste deste vídeo e eu vou vê-lo no próximo vídeo. 106. Transações: Oi, todo mundo. Espero que esteja indo bem nesse vídeo. Vamos projetar nossa página de transações. Então, primeiro de tudo, vamos duplicar este quadro de arte, e eu vou remover quase todos os elementos aqui. Vamos manter estas flechas para a esquerda porque precisamos disso. E eu vou remover esses tanques e também essas transações. Ok? Não precisamos deles agora. Então eu vou mudar este retângulo um pouco. Vamos mudar a alta para 245 e o raio de 66 para 62. Ok, então eu vou mudar esses dois números, então nós temos uma forma como esta. Agora eu vou duplicá-lo e colocar esta camada logo abaixo do nosso primeiro filme retângulo para baixo aproximadamente três pixels porque você pode ver aqui os vinhos três. E então vamos mudar a cor para um sólido e cidade para 87 F zero e dobrar à esquerda para obter um bom azul claro. Tudo bem, então eu vou definir o Y 25 Eu acho que é melhor. Sim, parece ótimo. E aqui, o que precisamos? Precisamos de uma barra de navegação. Podemos inserir facilmente da nossa maçã em nós. Você gosta de comer aqui. Barra de navegação. Está bem. No entanto, vou mostrar-lhe como criar um. Então vamos escrever transações e mudar o fundo para a partir de texto pro. E então vamos torná-lo ousado e também branco. Por último, vamos mudar o tamanho da fonte para 17 pontos. Vou entrar no centro horizontalmente. Esse miso significa que eu vou colocá-lo com um top de 50 pixels, adicionando à borda da nossa tela assim. E então eu vou mover essas flechas para a esquerda Scalea para 19 picaretas. Tem perfeitas. E então eu vou mudar de cena para normal assim. Em seguida, selecione nossa seta para a esquerda e também este texto Alinhe-os verticalmente. Então precisamos chegar com o pixel divino. Pare de adicionar e um batedor de 24 pixels esquerda. Certo, então vou agrupar esses elementos com nossa barra de status. E aqui, vamos escrever Barra de navegação. Perfeito. Então, o que mais precisamos aqui? Primeiro, deixe-me mudar. Estes são derrames nome para transações. Então, aqui precisamos montar as despesas. Ok, então eu vou adicionar um tanque e pagar suas despesas totais assim. Então deixe-me mudar o fundo para Monserrat-lo e o tamanho da fonte para 22 pontos e também a cor para este azul claro. Como temos aqui, vou selecionar nossos tanques e este cabeçalho, nosso retângulo alinhando ao centro horizontalmente. E vai ter um preenchimento inferior de 82 pixels. Então deixe-me fazer 82. Perfeito. Em seguida, duplicado aqui. Vamos à direita. 1000 e $63.30 Eu vou mudá-lo muito ousado. E também o fundo assina para 28 pontos. A razão pela qual escolhi este número é por causa das nossas transações. Certo, então mais tarde, quando criarmos nossas ações de turnos e calcularmos, teremos o número da tese. Tudo bem, agora, deixe-me uma linha para o centro ou é inteiramente, e vai ter 16 escolhas. L top adicionando, assim. Lembre-se de definir a linha oi para 34. Caso contrário, nosso alinhamento seria diferente. Tudo bem, então está tudo bem aqui. O próximo passo é criar nosso cartão que o usuário pode deslizar para cima ou deslizar para baixo. Ok, para obter mais detalhes. Então o que eu vou fazer é selecionar pedaço retângulo duplicado. Eu vou movê-lo para cá, então isso é mudar para cartão direito gatinho con dat transformar 50 partícula e, em seguida, definir o máximo para 541. Bastante incrível. Vou movê-lo para cima. Vai criar um top de 21 pixels, somando a idade da nossa forma azul claro. Ok, e então eu vou escolher esse cartão. E aqui, vamos mudar a direção do nosso Grady int assim e também aqui. Isso seria ótimo. Tudo bem, a próxima coisa que precisamos mudar é este indicador doméstico desta luz para a escuridão. Perfeito. Agora é bom. E então precisamos criar um indicador aqui para este cartão, a fim de mostrar ao usuário como eles podem abrir e fechar o cartão. Então vamos em frente e inserir em torno dele aqui assim nas Fronteiras Checa e mudar o máximo para quatro. E com dois 47 então eu vou mudar o colar para branco e alinhando para o centro, ou é inteiramente e ele vai ter um top 16 pixels, adicionando perfeito. Então aqui, bem no topo. Precisamos de uma pesquisa para, então não precisamos usar a parte de pesquisa padrão que precisamos para criar nossa própria barra de pesquisa. Então vamos em frente e inserir em torno dele aqui assim. Vou mudar o com 2 315 e alto para 53. Perfeito nas fronteiras checas. Alinhando para o centro e eu vou mudar o raio para suavizar cantos e mudar a quantidade para 16 como este. E por último, vamos trocar o colarinho. 2051 99 E Então temos este azul escuro agradável aqui, a fim de obter uma boa taxa de contraste. E então precisamos adicionar um texto aqui. Então vamos escrever, pesquisar e mudar os fundos para SF em torno de identificação assim, e eu vou fazer isso normal. E também o tamanho divertido vai ser 14 pontos e mudar o personagem aqui um pouco. Vamos definir para zero pontos na estrada para agora. É melhor. E por último, precisamos mudar sua cor. Vai ser três B 54 FB Perfeito. É alinhá-lo verticalmente. Então, o que? Também precisamos aqui? Você está certo. Precisamos de um ícone de busca, então vamos trazê-lo aqui. Lá vamos nós ícones E aqui temos uma busca muito boa. Tem a mesma cor que nossos tanques de busca que podem alinhá-lo verticalmente. E então precisamos de um 16 picaretas no acolchoamento superior, esquerdo e inferior. Ok, então deixe-me fazer 16. Perfeito. E o tapinha esquerdo do tanque de surto vai ser oito picaretas como este, e então podemos agrupá-los e chamá-lo de barra de busca como esta. O preenchimento superior da nossa barra de pesquisa vai ser 44. Muito agradável. Então, o que mais precisamos aqui? Você está certo. Precisamos das transações. Então aqui criamos três transações diferentes. Deixe-me copiá-los e colá-los aqui assim. Vai ter um preenchimento superior de 24 pixels. Perfeito. Então, o que deve ser mudado aqui? Obviamente, as cores dos nossos tanques devem ser mudadas. Então vamos selecioná-los. E eu vou fazê-los branco e disse como estes textos, bem na nossa data e hora e torná-los 80 e zero duplo F para obter este azul claro agradável. E nós vamos copiar e colar esse código de cor para usar para essas pequenas setas também . Eles pagam assento. Perfeito. Então, o que devemos fazer aqui? Precisamos duplicar algumas dessas transações e criar uma nova. Ok, então eu vou duplicar essas compras assim. E como você se lembra, eles têm um preenchimento de 16 pixels entre eles e aqui. Vamos mudar a data para competir por março e um tempo para 7 20 como este e também o valor para fazer parecer rial para US $155. Então, mais uma vez, vamos duplicar. E agora precisamos criar outro tipo de transação. Certo, que é viagem. Então eu vou seguir em frente e tão mau e escolher o círculo e mudar a cor, também. Duplo F 87 87 que removeu este ícone e trazendo nosso ícone de viagem aqui transações. E aqui temos viagens. Perfeito. Vou escolher o círculo e permiti-los verticalmente e horizontalmente. E, obviamente, você precisa mudar esses títulos para viajar e um dia para três e um tempo para 5 50 o montante vai ser $399. Faz sentido, certo? Lembre-se de mudar o Zane mais completo. Vamos mudar para viajar. E por último, mas não menos importante, precisamos de mais uma transação aqui. Então eu prefiro usar esporte. Vamos duplicar. Podes escolher o que quiseres, está bem? E vamos mudar o dia para 10 de fevereiro. E o tempo vai ser, por exemplo, por exemplo, 5 20 e o valor é o mesmo. Ok, então ele gosta que seja um serviço de assinatura. Ok, então temos a mesma quantidade a cada mês, e eu vou em frente e selecionar esses elementos a fim de agrupá-los juntos. E isso tem comer carro de transação. Bastante incrível. Você pode estar se perguntando por que não criamos um símbolo para essas transações. E depois disso, poderíamos mudá-los facilmente. Você está absolutamente certo. Mas para o bem deste curso, vou mostrar-lhe tudo em detalhes para que você pratique no lançamento. Certo, porque é assim que você se tornaria um grande designer. Mas lembre-se, se você quiser criar taças parecem, você deve criar quatro símbolos diferentes. Ok? Você precisa ter um símbolo específico para cada tipo de transação porque temos transações diferentes . Ícone e, em seguida, você pode facilmente mudar. Os montantes estão certos. A única coisa que acho que precisamos mudar é o tamanho da seta para a esquerda. Aqui Então deixe-me é um duplo clique sobre isso. E porque é um símbolo de ativo do aplicativo símbolo SF, que é desenvolvido pela Apple, Eu posso facilmente mudar seu tamanho como uma fonte. Ok, então deixe-me mudar para 20 e então eu vou alinhá-lo mais uma vez com o nosso texto aqui e agora . Acho que parece ótimo. Estão certos. Ele projetou com sucesso nossa tela de transações juntos. Espero que tenha gostado. No próximo vídeo, vamos projetar outra transação. A tela, que tem todos esses elementos com uma diferença nessa tela. Precisamos fechar o cartão e movê-lo para baixo. E em disse que precisamos criar alguns detalhes sobre nossas despesas. Estou tão animado para começar a desenhar essa página juntos. Então vejo-te isso 107. Transação - detalhes: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos projetar outra página de transação para mostrar como o usuário pode interagir com este cartão. E o que acontece se o usuário decidir mover esses cartões para baixo? Ok, então nós não tentamos, vamos começar. Nós duplicamos estes quadros de arte, e eu vou mudar seu nome para transações detalhes traço como este que eu vou ir em frente e mover este carro para baixo, disse, selecione que parece que nós esquecemos de agrupar essas viagens ícone aqui. Então deixe-me incluí-lo aqui. Vou colocá-lo em viagem para o LIRR como este. Então eu vou definir o y 2 693 Perfeito. Então, o que precisamos colocar aqui? Precisamos adicionar um título ali, depois quatro carros pequenos diferentes para mostrar o valor total de cada transação. E então precisamos de outro cartão grande. Como o que temos aqui assim, e precisamos fazê-lo para a seção de reembolso do cartão de crédito. Ok, então vamos em frente e inserir nosso texto aqui e aqui. Vou escrever as suas despesas perfeitas. Então eu vou mudar o fundo para Mancera ele e também seu tamanho para 22 pontos. Vai ser ousado e a altura da linha deve ser 27 a cor vai ser a nossa grelha escura O queijo. Três um três um três um três A Como este. Deixe-me colocá-lo aqui ele parar de adicionar vai ser 32 2 A borda inferior da nossa forma azul claro como este e seu preenchimento esquerdo vai ser 30 pixels. Certo, então precisamos criar nossos cartões. Então vamos inserir em torno dele. Perfeito. E eu vou fazer 153 por 103 assim. Altere o raio para cantos de fumaça e aumente a quantidade de raio para 25 nas fronteiras checas . E aqui vou eu escolher um Grady int. A primeira cor vai ser ver 16 a e seis A. Na segunda cor deve ser duplo F 87 87 assim. Então eu vou mudar a direção do nosso radiante algo como isso que parece bom e ele parar de bater vai ser 16 pixels então deixe-me torná-lo 16. Tudo bem, então o que mais precisamos aqui? Precisamos de uma mensagem. Ok. que indica o tipo de transação que está certo. Viajar. E eu vou torná-lo regular e mudar o seu tamanho para 18 pontos e um colar para um 731 31 Muito impressionante. Então deixe-me alinhá-lo. Vai ter um preenchimento de 16 pixels e uma cobertura de 24 pixels. Então eu vou duplicá-lo, e aqui eu vou alinhá-lo para a esquerda. E isso é certo. 399 dólares. Deixe-me fazer isso ousado. E eu vou mudar o tamanho da fonte para 24 pontos e uma linha alta para 29. Certifique-se de alinhar essas apostas no lado esquerdo também. E não é. Estofamento vai ser quatro pixels como este. Tudo bem? E depois vou adicionar mais detalhes a este cartão. Então o que eu vou fazer é inserir um círculo aqui como este em Fronteiras Checa, e eu vou torná-lo 112 por 112 pixels e, em seguida, adicionar um grande nele e a primeira cor vai ser dupla F 91 na segunda cor que definiu para branco e diminuir oferta a zero. Então eu vou mudar a direção como esta chave de comando inteira e mudar e selecionar retângulo tese, máscara anglicana. E depois de definir a posição fora do círculo, vou mudar a nota Ian mais uma vez. Então deixe-me alinhá-lo. Vai ter um preenchimento inferior de seis pixels em um preenchimento direito de 54 pixels. Então vamos mudar o Grady int este que dissemos para preto e escolher esta cor. Certo, então diminua o horrível assim. E eu vou mudar a direção um pouco para conseguir algo assim. Isso parece fantástico. Agora é hora de agrupar são elementos juntos, que os agrupar e eu vou chamá-lo de viagem. Então isso é duplicado e colocá-lo aqui com um nove pixels esquerda tapando. Em seguida, mude o nome Fullers para compras e o empate caiu para compras também. E o valor vai ser $375 por último, precisamos mudar nossas cores. Então, primeira coisa escada. Vamos mudar o Grady int aqui e a primeira cor vai ser ver um 95 e 47 a segunda cor vai ser dupla F C F e 87 como este. E também, vamos mudar esses círculos. Grady em dois F, seis C cinco e sete A. Eu vou copiar esta cor e ritmo para a segunda cor aqui e, em seguida, diminuir a oferta. E por último, vamos mudar nossa cor do texto para um 27 43 0 muito impressionante. E então isso é duplicado mais uma vez porque precisamos obter quatro cartas diferentes como esta mudar seu nome para esporte e também o título para esportes e o valor para 199,80. , Então vamos mudar a cor dos nossos tanques para 29 86 93. E depois disso, vamos mudar o nosso grande em três Duplo A para B e um e o segundo chamador para 87 F zero duplo F perfeito, e agora é hora de mudar a cor do nosso círculo. Aqui, vamos configurá-lo para 73 D C e e ser incrível, e isso é copiado e colado para a segunda cor. Como este e diminuir o terrível para zero muito impressionante e o último cartão. Deixe-me duplicar. Mude seu nome para medicamento e mudou o título para medicamento também. E a quantidade vai ser $89,890,50 então que mudar as cores para 91 37 B C e ingrediente para oito, um 46 e um B ea segunda cor para mais fácil ou nove e f NF como este. E é hora de mudar a cor do nosso círculo aqui. Dois D, Duplo oito F f f e deixe-me copiar e colá-lo para a nossa segunda cor e aumentou a oferta para zero. Isso parece fantástico. Tudo bem. Agora é hora de criar nosso cartão de reembolso de carro criado aqui, então vamos em frente e copiar e colar este cartão. Ou digamos, homem botão, colá-lo aqui. Então vamos clicar duas vezes e escolher o retângulo da tese, e eu vou torná-lo 315 por 105 assim e mudar o raio para 25. E a razão pela qual mudamos para 25 é porque usado 25 nossos carros acima, então precisamos ser consistentes. Então vamos usar essas formas e movê-las assim. E vou alinhar esta pequena seta verticalmente aqui. Além disso, este texto muito impressionante e, em seguida, mudou seu texto para reembolso de cartão de crédito Muito bom. Então isso mudou o nome do grupo para reembolso de cartão de crédito como este e movê-lo para baixo para obter um top de 16 pixels, adicionando E agora tudo está feito. Você pode ver como é incrível? Se você quiser, você pode ir em frente e adicionar algumas sombras a esses cartões. No entanto, eu prefiro mantê-lo simples porque, como você pode ver, eles têm tantos elementos nesta página. E se adicionarmos algumas sombras aqui, vai parecer pesado. Ok, então eu vou manter as coisas simples. Espero que você goste deste vídeo e eu vou vê-lo no próximo vídeo. 108. Transferência: Oi, todo mundo. Bem-vindo de volta a outro rádio fora deste curso neste vídeo, nós vamos projetar nossa página de transferência juntos. Então, sem justiça, eu sei. Vamos começar com a duplicação da tela. Perfeito. E vou chamar-lhe transferência. Tudo bem, então vamos remover quase todos os elementos desta página. Vamos remover estes tanques. Além disso, esta diversão em todos os nossos cartões Muito bom. Então isso mudou a cor do indicador de casa para esta versão leve. Muito agradável. Então, o que precisamos mudar aqui? Você está bem aqui. Precisamos mudar nossa barra de navegação. Isso mudou o título para transferência. No entanto, primeiro precisamos alinhar você ao centro e, em seguida, mudar para transferir assim. Então eu vou selecionar nossas formas aqui, ambos fora deles. Agrupe-os bem. E vamos definir o y tu menos 141. Bastante incrível. Esta é a nossa barra de navegação. Agora, então, nesta página, precisamos colocar alguns elementos aqui precisamos escrever entrar em um monte do que a quantidade real. E depois disso, um separador e o receptor ou beneficiário e bem na parte inferior. Vamos ter uma chave Pat. Ok, então vamos em frente e inserir o texto na direita e o valor dela, e eu vou mudar o fundo para Monsour. E vamos mudar o caminho para Regular e é divertido tamanho para 18. E então eu vou mudar a cor para 27 43 f d e a linha alta para 22. Realmente incrível. Vou alinhá-lo ressentido. Deixe-me duplicar. E aqui precisamos de um cifrão. Espaço zero. OK, mas para quê? É o lugar onde o usuário pode inserir o valor real que deseja transferir. Ok, então deixe-me ser ousado, e eu vou fazer 36 pontos como este Não mude a cor fora. Zero aqui para ser procura B f f f f f como este para mostrar que ele está inativo agora. Então, quando o usuário inserir uma quantidade aqui, ele vai ter a cor escura. Ok. No entanto, quando for zero, vai ficar assim. Então deixe-me alinhá-lo ao centro e sua altura de linha vai ser 44 muito impressionante. Então isso definiu o topo lutando para 16 células de pico como este. E aqui, como mencionei antes, precisamos de um separador. Então vamos criar uma linha de uma semana. Eu vou fazer 224 e mudar a cor para o E e um e f como este. Alinhando-se ao centro, deixe-me dizer. Pare de adicionar a 16 assim. Bastante incrível. Então precisamos de outra mensagem. Então eu vou continuar e duplicar o texto e isso é certo. Dois. Muito bom de novo. Vai ter um top de 16 pixels, adicionando mais uma vez duplicado. E aqui precisamos escrever o nome do nosso beneficiário. Certo, então vamos, Grace Edison, e eu vou mudar a cor. 23 um três A e três A e o tamanho da fonte para 16 como este. Então, o que mais precisamos aqui? Não acha que é bom ter a foto do nosso usuário? Ou digamos que o nosso beneficiário aqui, então eu vou seguir em frente e inserir em torno dele, e vai ser 34 por 34 picos. Células. Deixe-me mudar o tipo de raio para cantos suaves, e aqui eu vou ajustá-lo para 12 em Fronteiras Checa. E vamos usar o banco de dados de esboços para adicionar uma foto para comer assim. É legal. Também podemos adicionar algumas sombras. Vamos fazer o Y zero e o jogador sete, e precisamos diminuir o off obviamente para 20% muito bom. E depois disso, vamos verificar o alinhamento. Este imposto vai ter um preenchimento de oito pixels restantes como este, e eu vou alinhá-los verticalmente, agrupá-los e mais uma vez permiti-los para o centro, ou é inteiramente, e nosso grupo vai ter um top de 16 pixels dirigindo tão bem como este. Isso é incrível, não é? Então, o que mais precisamos aqui? Precisamos de um teclado. Certo, então vamos criar um. Primeiro de tudo, somente quando um grupo, todos esses elementos juntos e isso é certo detalhe da transação, movê-los para cima assim. Então, o que precisamos para o nosso número, Pat? Aqui? Precisamos ter total de retângulos diferentes e ter números de 1 a 9, incluindo zero na parte inferior. Então vamos inserir isso aqui. Eu vou fazer seu 89 por 70 e seu raio vai ser 17 em Fronteiras Checa e mudar a cor para F cinco, F seis e F A assim. Então eu vou escrever um e deixe-me mudar o fundo para o texto pro e o tamanho divertido também. 24 pontos como este, e eu vou torná-lo médio. Finalmente, a cor do nosso primário aqui. Então vamos alinhá-los verticalmente e horizontalmente e agrupá-los. Vamos dar um nome a ele. Em seguida, duplique-o e coloque-o com os 10 pixels restantes. Preenchimento mais uma vez duplicado. E eu vou mudar o nome deles para este Fuller 22 e este 123 e novamente, precisamos duplicá-los. E mais uma vez, e precisamos da última fila. Certo, então vamos mudar o nome do grupo. Primeiro de tudo, este último botão vai ser o nosso botão de areia. Certo, então agora precisamos mudar esse texto. Então vamos mudar também. E novamente alinhá-los e assim por diante. E aqui temos ponto e zero. Ok, e finalmente, aqui, precisamos ter nosso botão de envio, então precisamos de uma seta para a direita aqui, então vamos trazê-lo daqui. Vou copiar é uma mensagem, está bem? E colá-lo aqui e você precisa mudar o fundo para s um pro em torno dele porque é um sf parecer arco e não funciona com os outros fundos. Torná-lo 28 pontos e também voar muito impressionante. Então isso é alinhá-lo e também mudar a cor para vento. E precisamos adicionar um Grady neste botão, que é o mesmo Grady int que temos aqui. Ok, então eu vou selecionar este cabeçalho clique com o botão direito sobre o estilo de cópia. E aqui vou eu, certo. Clique e cole são muito bons estão agora é hora de agrupar nossos botões, alinhados com o centro. Como podem ver, temos 44 pixels à esquerda. 44 escolhe células para a direita, e precisamos de 74 células de pico para o fundo. OK, e agora vamos mover nossos detalhes de transação para baixo para obter um 58 escolhas. Lutando de baixo assim. Muito bem, agora vamos mudar o nome do grupo aqui também. panorâmica numérica e também o nome do grupo aqui para a barra de navegação como esta estão certos. Tudo está feito. Espero que gostem deste vídeo. E no próximo vídeo vamos projetar nossa página de confirmação juntos. Então te vejo lá. 109. Confirmação: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos desenhar a página de confirmação juntos. Então, sem mais delongas, vamos começar com a duplicação do quadro de arte de transferência, e eu vou renomear-me para confirmação. Tudo bem, então vamos remover esse número, almofada e também alguns desses elementos. Por exemplo, não precisamos dessa quantidade e do separador, então vamos removê-los. E aqui podemos mudar este título para transação ou confirmação. Então eu vou escrever uma transação como esta, então deixe-me agrupar esses elementos, certo? Clique aqui no grupo Muito impressionante. E aqui, isso mesmo. Você enviou com sucesso $99 para Grace Addison estão certos e, em seguida, diminuir o com 2 248 ea linha alta para 27 como este. Vou alinhá-lo ao centro e filmar muito incrível. No entanto, eu vou dizer como este nome e torná-lo ousado, a fim de chamar a atenção do usuário sobre. Vamos ver, o que mais precisamos aqui? Primeiras respostas. Deixe-me remover esses nomes. E eu vou assustar esta foto para 78 assim. E eu vou adicionar alguns detalhes a ele. Ok, então deixe-me trazer o ícone de status aqui. Eu vou escolher este verde, copiá-lo e colá-lo aqui em ampliá-lo para 18 por 18 pixels. Bastante incrível. E por último, vou mudar a cor para laranja, e isso mostra que o usuário não está disponível agora. Então vamos escrever F 7 A e 700 assim. Vai ter 60 picos de preenchimento esquerdo e um cabeçalho superior de 60 pixels. Agrupe-os e, mais uma vez, alinhando-se ao centro. Então precisamos de um ícone de carrapato como Don Icon aqui. Então vamos trazê-lo dos ícones dela. O Icahn. E aqui temos feito parece ótimo. Isso está alinhando com o centro. Parar. A luta vai ser 217 células de pico para a idade da nossa tela assim, e seu preenchimento inferior vai ser 16 zonas de escolha. Então deixe-me mover as apostas para baixo e o topo lutando contra a nossa imagem vai ser 40 como este. Ele nega. Então precisamos de mais duas coisas. Precisamos colocar dois botões aqui. O botão superior será o botão executar novamente, que permite que o usuário execute a mesma transação mais uma vez. E o botão inferior é o nosso botão de confirmação. Está bem? que dá ao usuário a confirmação dessa transação. Então vamos em frente e copiar e colar este botão de verificação. - Não. Então eu quero esse botão de inscrição. E em primeiro lugar, vamos mudar o nome Fullers também. Execute novamente e agora mude os tanques para executar novamente. Bastante bom. Mova-o para cima. Vamos remover esta seta do nosso segundo botão e eu vou alinhar. Isso leva para o centro e alterá-lo para confirmação mais uma vez uma linha para o centro. E aqui vou eu mudar as pastas. Nome para confirmação Como este está certo. O preenchimento inferior deste botão de confirmação vai ser 37 ele parou. Estofamento vai ser 16 pixels como este estão certos. Caras. Espero que gostem deste vídeo. Nós projetamos com sucesso nossa página de confirmação juntos e eu gostaria de vê-lo no próximo vídeo. Então vejo-te depois 110. Página de notificação: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos projetar nossa página de notificação juntos. Então, sem mais delongas, vamos começar com a duplicação. Estes não são placa, e eu vou mudar o nome para notificação Muito bom. Então vamos remover quase todos os elementos aqui. Ok? No entanto, precisamos da barra de status como temos aqui. Deixe-me trazê-lo aqui, e eu vou mudar você para luz. Bastante bom. Então, o que precisamos aqui nesta página? Precisamos colocar uma barra de busca bem no topo. OK, então vamos em frente e trazer a busca por um tem recriado sendo página de transação que eu vou copiar e colar aqui. Bastante incrível. Então isso é mudar sua cor para f cinco f procura e f A como este e nós não precisamos mudar mais nada. Parar de lutar vai ser 68 pixels para a borda da nossa tela assim. Então aqui, precisamos de um título. Ok, então eu vou trazer o título da tese aqui. Vamos copiar e colá-lo e deixe-me uma linha para a esquerda e alterá-lo para você pode verificar suas notificações aqui. Bastante incrível. e isso diminuiu. Isso com 2 274 Muito bom. Bem, ele parar de adicionar vai ser 32 pixels e bater à esquerda vai ser 30 grandes células. Certo, o que mais precisamos aqui? Precisamos criar nossas identificações, obviamente. Então precisamos de uma imagem para nossa notificação e também em nome e uma mensagem. Ok, então o que eu vou fazer é copiar e colar esta foto da nossa página inicial assim e deixe-me ter reduzido para 40 por 42 escolhas. Elfos nega. Vou ampliar o tamanho desse ícone de status. Ok, isso aumentou para 11 alinhá-lo ao fundo e escrever três negações. E aqui precisamos de um título. Então vamos escrever um nome. Ok? E que Lane, precisamos mudar a foto mais tarde. Vamos, Floyd Farmer. E eu vou mudar você muito regularmente e diminuir o tamanho da fonte para 14 pontos como este. E a linha oi para 18. Bonito nega que eles colocaram aqui, duplicá-lo, e aqui nós precisamos escrever nossa mensagem. Então vamos direito Floyd apenas enviar US $20 como este e eu vou mudar o tamanho para 16 pontos e também a cor para a nossa cor primária. Você pode usar esta cor pré nega que o cabeçalho superior vai ser três picaretas, células ou direita. E o preenchimento esquerdo vai ser oito pixels como este. Em seguida, agrupá-los e alinhá-lo com a nossa foto verticalmente suplicando olhos. O que mais precisamos para nossa notificação? Precisamos de uma pequena flecha para pôr aqui. Certo, então vamos trazer isso daqui. Estão certos. Vou alinhá-lo com nossas fotos e tanques verticalmente, e vai ter um acolchoamento direito de 30 pixels. Bastante bom. Agora vamos agrupar todos esses elementos. E aqui, vamos escrever uma notificação. Incrível. E lembre-se de alterar esta foto, atualizar os dados que você precisa para obter uma foto masculina. OK, isso é muito bom. Então, a fim de tornar este processo muito rápido cuidado, eu vou criar um símbolo. E aqui está certo. Notificação. Ok, então vamos para Símbolos Página. Lá vamos nós. Então, no momento podemos mudar a foto e também esses dois títulos, mas precisamos ser capazes de mudar o ícone de status também. Então precisamos criar outro símbolo aqui. Vamos criar um símbolo. E aqui, vamos escrever barra de status Disponível. Incrível. Então aqui temos outro símbolo que é duplicado. Precisamos criar três status diferentes. Ok, então vamos mudar o nome aqui. Muito ocupado, e vou mudar a cor para laranja. Então vamos escrever F sete um sete. Duplo zero. Bastante incrível. E é duplicado mais uma vez, que é o nosso último status, e mudar a cor para ce e ce muito impressionante. E também alterou o nome para offline. Bonita nega. Agora vamos voltar à nossa página um ano. E como você pode ver aqui, nós podemos mudar esses tanques e também o status. Certo, isso é incrível. Então, o que mais precisamos aqui? Precisamos de um separador. Ok, mas antes de tudo, vamos duplicar a notificação, e vai ter 32 picos. Todos os estofos de cima. Ok, mais uma vez duplicado muito bem. Precisamos também da torneira são. Então vamos inserir uma adulteração aqui do nosso documento porque criamos um toque ou símbolo. Eu vou colocá-lo aqui, e eu preciso para o fundo e lembre-se de fazer este guia o ok ativo, e tornar a certificação ativa assim. Então vamos colocar nosso separador aqui. Então precisamos inserir uma linha como esta, e vai ser 315 e mudar a cor para D duplo E um e f. Vai ter 16 picaretas no cabeçalho superior e um preenchimento inferior de 16 pixels. Então eu vou duplicar muito bem. Vamos agrupar essas linhas. E aqui vou me renomear para separadores muito bem, tudo bem. E agora é hora de mudar nossos dados. OK, então vamos eleger o não é educação, e eu vou mudar o nome para outra coisa. Então vamos bem, Jane. Bastante bom. E também aqui vou escrever. Jane mandou você aqui. Estamos nos encontrando só porque ela enviou o usuário, por exemplo, um dia atrás. OK, então vamos à direita. A Jane mandou-te 99 dólares e vou copiar-te muito bem. E é uma foto como esta e atualizá-la. Está tudo bem. Vamos mudar o 3º 1 que vou escrever no ah Maxwell, e isso é colar que leva aqui e mudar o nome para em tudo. E o valor de US $500 que precisamos para mudar a foto assim. Mas agora vamos mudar o status de disponível para ser fácil. Ok, Se você quiser fazer este cabelo rápido processo OK, você pode usar o plugue chamado Craft. Como pode ver, tenho aqui. Ele pode gerar alguns dados para você de forma fácil e rápida. Por exemplo, aqui posso gerar nomes, manchetes, artigos, até datas, moedas , países , cidades, etc. OK, mas por enquanto, vamos fazer isso manualmente, um por um. Então agora vamos mudar o próximo. Vamos mudar o nome para Herman Frasier. Como este. E aqui, presidente também. E a quantia? Isso é certo. $25. Lembre-se de mudar a foto. Isso é ótimo. E as mudanças de status para o nosso vôo muito incrível. E o próximo aqui, vamos mudar o nome para William Weight. E aqui William mandou $10. Deixe-me mudar a foto. Tudo bem. Está tudo bem. Está bem. Precisamos de mais dois. Então vamos mudar o nome. - Não. Parece calmo e aqui para Elsie também. Senão ele mandou $12. O status está ocupado e precisamos mudar a foto para algo assim . E o último. Vamos mudar o nome para Harriet Coleman. Bastante incrível. E ataques para transportar seu enviar-lhe $25 o status vai ser off-line. E também, a foto vai ser esta. Isso é muito bom. E é isso. E acredite em mim, se você trabalhar isso conectando, leva menos tempo para fazer todo esse processo. Então deixe-me mostrar-lhe como esta praga em mandados. Suponha que aqui temos uma mensagem, certo? E vai ser um nome. Nomes de silício, e posso escolher entre homens, mulheres ou ambos. Então vamos escrever feminino. Lá vamos nós. Ou posso escolher países, cidades, até datas. Isso é fantástico, certo? Então, usar este plugging economiza muito tempo. Tudo bem? Agora deixe-me agrupá-los. Não precisamos desta última notificação que criamos, então vou removê-la. E agora vamos agrupá-los. Aqui estão nossas notificações, e podemos agrupá-la novamente com nossos separadores. E isso é tudo. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Nós projetamos com sucesso nossa próxima página de férias juntos, e no próximo vídeo, vamos projetar nossa página de perfil. Então eu vou vê-lo no próximo vídeo 111. Página de perfil: Olá, todo mundo. Espero que esteja indo bem nesse vídeo. Vamos desenhar a nossa página de perfil. Então, sem mais delongas, vamos começar a duplicar este quadro de arte, está bem? E eu vou renomear-me para o perfil muito bom, e nós precisamos remover quase todos os elementos, exceto este título muito incrível. E vamos fazer isso tocar no ativo e tornar este ativo. Isso é ótimo. E precisamos mudar o título para o perfil e torná-lo maior porque é o nosso título grande ou, digamos, digamos Cabeçalho Grande. Eu vou fazer 41 pontos e é nove altura vai ser 50 e vai ter um preenchimento superior de 90 pixels e um 30 pixels esquerda como este. Então precisamos ir em frente e copiar e colar essas formas da nossa empresa de perfil que o ritmo aqui, movê-los para o final da nossa lista de camadas assim, muito incrível. E aqui eu vou girá-los um pouco como este em Vamos como este roxo. Mova para cima e escreveu, Se é um pouco para a esquerda, isso é fantástico. Precisamos da imagem de perfil do usuário, o nome, o status e ouvir algumas tomadas sente como nome de usuário, primeiro nome, sobrenome, data de nascimento e na parte inferior. Precisamos ter o mesmo botão de venda. Ok, então vamos começar a trazer esses elementos. Primeiro, precisamos da imagem do perfil, então vou trazê-la aqui. Vamos assustar 60 zonas de escolha como esta. Vai ter 30 pizzas remanescentes e 33 picos vendem o topo como este. Então precisamos de um nome. Então vamos à direita, Emma, na verdade, e mudar o tamanho da fonte para 20 pontos e a linha alta para 24. E, finalmente, precisamos mudar a cor para três D 56 f a como este. E vamos mudar o fundo para um texto profissional, e eu vou torná-lo médio fantástico, depois duplicado. E aqui, vamos à direita. O status que está online, torná-lo leve na fonte Tamanho vai ser 16 pontos e a altura da linha deve ser 19. Vai ter um cabeçalho de pixel como este. Agrupe-os e alinhe-os verticalmente com a nossa imagem de perfil. E vamos ter um preenchimento de 16 pixels à esquerda. Bastante incrível. Mais uma vez, agrupe-os aqui. Precisamos escrever informações dos usuários como esta. Então vamos em frente. E daqui eu vou copiar e colar todos esses campos de tanques ano. E agora vamos eleger todos esses títulos, que são nome de usuário, primeiro nome, sobrenome e data de nascimento. E precisamos mudar a cor 23 um três A e três A e também selecionar a entrada ok e mudar a cor para este como este. E precisamos remover esses ícones de teca. E por último, mas não menos importante, vamos mudar a cor dos nossos separadores. Precisamos mudá-los para D E e um e f como este. Esqueci-me de selecionar este. Então vamos mudar isso também. O e e um e f estão certos. O melhor tapinha do nosso imposto vai ser 40 Eus pico. E então, como eu mencionei antes, precisamos de um botão de saída. Então vamos em frente e copiar e colar o botão de inscrição que criamos para o nosso menu. Eu vou movê-lo para baixo incrível. E vamos mudar o tamanho também. 315 por 72 assim. Alinhando-se ao centro. E aqui precisamos mover este ícone para o lado direito para obter um 24 pixel direito tapting como este. Fantástico. E, finalmente, isso está se movendo para baixo para obter uma célula de pico 30. Mas eu estou dando tapinhas, e isso é tudo. Tudo bem, pessoal. Ele também criou nossa página de perfil juntos. Espero que gostem deste vídeo. E vejo-te no próximo vídeo, que é o nosso último vídeo. E é sobre páginas de embarque. Está bem, então vejo-te. 112. Onboarding: Olá, todos. Bem-vindo ao último vídeo desta seção. Neste vídeo, vamos projetar as páginas de embarque juntas. Então nós, doutor, eu sei. Vamos começar. Primeiro de tudo, vou em frente e inserções e quadro de arte aqui. Bastante incrível. Então vamos mudar seu nome para o próprio Juan de embarque. E eu vou duplicá-lo duas vezes porque precisamos projetar três páginas diferentes e é renomeado para eles como em Embarque para um em embarque três, respectivamente. Perfeito. Então, o que precisamos aqui? Bem no topo. Vou colocar um logotipo. Ok, a cor do logotipo. Então vamos trazê-lo da nossa tela do almoço. Este copiado, colado aqui. E eu vou remover esses tanques que eu não preciso disso. Vamos movê-lo para cima e ele parar de se esconder vai ser 84. Isso é ótimo. Deixe-me copiar e colar em todos os quadros de arte como este, então aqui. Precisamos colocar nossa ilustração. Certo, então vamos trazer nossa ilustração aqui. Lá vamos nós. Aqui temos bicicletas de segurança. Economizando e negociando. A primeira ilustração será salvar, então eu vou arrastar e soltar aqui, deixe-me alinhá-lo ao centro e ele vai ter um 170 top escondido como este. Então aqui precisamos colocar nossos tanques e aqui no fundo, precisamos colocar nosso fundo. Então vamos inserir o texto aqui e à direita, economizar seu dinheiro. Convenientemente assim. Vou torná-la maior. Vamos fazer 24 pontos e também mudar o fundo para Monserrat ele. E vai ser ousado e a linha oi para 36 muito incrível. E a última coisa que precisamos fazer é diminuir o com dois 307 como este e vai ter um enchimento de 30 pizza sobrando. Bastante incrível e 116 picos. L top adicionando, Ok assim. Então vamos duplicá-lo porque precisamos escrever uma descrição aqui e agora eu vou usar um fundo auto protege e vamos torná-lo 19 pontos e também regular, e eu vou mudar a cor para sete c dois um duplo F como este lindo. Então isso mudou com 2.300 trocam esses tanques para obter 5% em dinheiro. Banco para cada transação e gastá-lo facilmente. Bastante incrível. E agora vamos mudar a linha alta para 28 como este, e parar o cabeçalho vai ser 22 pixels. Incrível. Então aqui precisamos de um botão e também do indicador de página. Então vamos em frente e copiar e colar este botão de sinal e eu vou mudar o tamanho para 153. Então vamos diminuir o com, assim. Muito bom. Vou trazer nossos técnicos de volta para dentro do Spartan, e ele vai ter um batendo de 24 pixels como este. Vamos mudar para a próxima. Fantástico. Vou renomear esta pasta para a próxima, e ela vai ter um preenchimento direito de 30 pixels e um 38 pixels não afetando assim. Então, o que mais precisamos aqui? Precisamos de um indicador de página. Então vamos fazer um. Precisamos de um círculo aqui e eu vou para as Fronteiras Checa. Façam cinco por cinco em Mizzou. Quer dizer duplicado, e vai ter um tapinha de quatro pixels esquerda. E agora eu vou inserir em torno dele aqui como este em Fronteiras Checa definir o máximo para cinco. E com 2 22 como este, ele vai ter um preenchimento de quatro pixels Agrupá-los, e isso mudou a cor fora do primeiro indicador para um 46 e duplo F e selecionar esses dois círculos e mudar sua cor para ser cinco b f f f f incrível. Então eu vou renomear este mais completo dois indicadores e vamos criar um símbolo aqui. Vou escrever indicadores, cortar a página um, depois ir para Símbolos Página e duplicar duas vezes assim e renomeá-los para Página 2 e Página 3 porque mais tarde, podemos alterá-los facilmente. Agora, na página dois, precisamos mudar o lugar dos nossos indicadores. Então, vamos colocar o indicador grande aqui no meio, um ano para a esquerda e para o último. É colocado este grande ano, e os outros dois, vamos movê-los para a esquerda assim. Perfeito. Tudo bem, vai ter 30 picos de pancadas esquerdas. Você pode alinhá-lo com o nosso fundo verticalmente. Fantástico. A única coisa que vou acrescentar aqui é um círculo. Então vamos inserir um círculo e torná-lo 470 por 470. E em Czech Borders, eu vou mudar a cor para ter cinco f procura e F A como este filme para direita para o fundo da nossa lista de camadas e mudou a Exposição Tu menos 125 e o branco para 423 assim e parece fantástico. Espero que também goste. Então, para outras páginas, precisamos desse conteúdo também. Em vez de apenas copiar e colá-los, eu prefiro remover estes são placas, pagar e duplicá-los. Vai ser muito mais fácil mais uma vez que renomeou estes quadros de arte para Tom embarcar e o seu embarcar três como este. Então, em primeiro lugar, aqui, vamos mudar a ilustração. Então vamos trazer a caixa de segurança aqui. Incrível. Alinhando-se ao centro e mudar a guerra em 170 para obter um 170 picos no topo, acrescentando, E aqui precisamos mudar o título para garantir seu dinheiro de graça e obter recompensas. Incrível. Então vamos alterar a descrição aqui para obter o aplicativo de pagamento mais seguro de todos os tempos e aproveitá-lo . Então precisamos mudar o indicador de duas páginas como esta e a última página. Vamos remover esta ilustração e trazer a ilustração de negociação aqui. Vou alinhá-lo ao centro e mudar o vinho para 170. Incrível. E aqui, vamos mudar o título para desfrutar de comissões livres de negociação de ações. E aqui, vamos escrever. Online Investing nunca foi tão fácil do que é agora, Previ. Incrível. E agora vamos mudar o indicador para a página três. E precisamos mudar nosso botão aqui para começar. Incrível. Alinhando para o centro e remova nossa seta para a direita assim e renomeie esta pasta para obter um começou muito bom. E isso é tudo. Nós projetamos nossas próprias páginas de embarque com sucesso juntos. E este é o último vídeo desta seção. Muito bem, pessoal, espero que gostem desta série de vídeos. Foi tão interessante criar este projeto juntos, e eu espero que você realmente tenha gostado. Se você quiser obter acesso ao projeto final, você pode baixá-lo a partir do recurso é seção da última palestra nesta seção. Então, mais uma vez, espero que tenha gostado. E vejo-te no próximo vídeo. Então vejo você então. 113. Projeto 3 - Landing: Oi, todo mundo. Bem-vindo a outra seção deste curso nesta seção. Vamos criar uma página inicial para a nossa aplicação de dinheiro. Então, como você pode ver, vamos projetar e página de destino moderna, bonita e interessante juntos. Então, aqui usou as capturas de tela fora do aplicativo que projetamos na seção anterior. E também, como você pode ver, temos menus no topo. Temos um apelo à ação. Então temos as principais características. Como você pode ver, aqui temos seis características principais diferentes. Vamos projetar cada coisa aqui e, em seguida, temos um recurso e recurso para e também temos a seção de clientes e aqui temos a chamada à ação novamente pela última vez e a comida dela. Então, no final desta seção, você entenderá como você pode criar uma página de destino incrível e também criativa. Então, para começar a projetar essas páginas de destino juntos, certifique-se de baixar os ativos encontrar a partir do recurso é seção da palestra de ativos. Então eu vou te ver no próximo vídeo 114. Layouts e Grids: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Nós vamos criar nossos layouts ou vamos IR concordar, a fim de começar a projetar nossa página de destino. Então a primeira coisa que eu preciso que você faça é abrir o aplicativo de dinheiro que nós projetamos anteriormente e aqui em páginas, eu vou adicionar outra página. Vamos escrever a página de destino. Perfeito. Então aqui, precisamos de uma obra de arte. Ok, então vamos em frente e inserir um quadro de arte. Lá vamos nós. Aqui, você pode escolher Web Responsive. Ok. E como podem ver, temos opções diferentes. Temos a inversão móvel, tablet e desktop. Ok, nós vamos projetar a versão desktop. No entanto, cada um tem disco para cima, que é 10 24 por 10. 24 ou desktop HD, que é 14. 40 por 10. 24. Está abaixo do tamanho padrão. No entanto, vamos mudar sua com 2 1920 e empatar para 10. 80. Ok, vamos aumentar a altura mais tarde como nosso projeto vai para níveis mais altos. Ok, então lembre-se, quando ele cria um novo quadro de arte, esta é uma obra de arte personalizada. Então, para que você possa Previte apropriadamente unidade Quicken personalizado aqui e criar um tamanho constante. Você pode escrever, por exemplo, desktop HD como thes, ou você pode chamá-lo de página de destino assim. Então, quando criamos uma placa de mercado constante, podemos facilmente visualizar de uma maneira apropriada. E quando aumentarmos o máximo mais tarde, podemos rolar para baixo e rolar para cima facilmente. Está bem, Perfeito. A próxima coisa que precisamos fazer é configurar nossos layouts e cumprimentos. Então, o que são layouts e cumprimentos? Saudações, basicamente, nossos caras estão bem? Então, para projetar uma página da Web responsiva, é altamente recomendável usar ótimos sistemas. Você pode usar diferentes sistemas de grade. No entanto, para esses projetos, eu vou usar um sistema de grupo de 12 colunas. Então, como podemos criar nossa ganância? É tão fácil. Podemos ir em frente e clicar na vista. E aqui, como você pode ver, temos duas opções mostram layouts de exibição de cumprimentos. Ok, então eu vou matar você, posso mostrar um layout como este, e então vamos clicar em configurações de layout perfeito. Aqui temos diferentes opções que podemos modificar. O total com é definido como 1920 pixels. Agora, no entanto, não comemos o nosso com para ser esse vento. Certo, então vamos escrever 1600 assim. E a propósito, não é um aleatório com ele é um padrão também pode usar 960 para isso. Então eu vou definir o deslocamento para 160 o número de colunas, como você pode vê-lo disse para 12. Certo, e é isso que queremos aquela sarjeta lá fora. Então acrescenta, tirou-a para fora das nossas colunas. E aqui temos duas opções diferentes. Peguei-a com e coluna com. Então a calha é este espaço em branco entre as nossas colunas e a nossa coluna, obviamente, é esta área mais escura. Então vamos definir a coluna com duas, 117 células pic. E como você pode ver, a calha com automaticamente alterada para 16 pixels, isso é exatamente o que queremos. Também podemos checar Rose, no entanto, não precisamos disso. Então vamos mantê-la desmarcada. E aqui você pode escolher as cores para que eu possa escolher o escuro ou luzes. Cabe a você. Você pode mudá-lo como quiser. Pode mudar para o que quiser. Vou mantê-lo assim. É perfeito. Certifique-se de matar o Lincoln Center. OK, perfeito. Criamos com sucesso nossas diretrizes ou, digamos, nossas saudações para este projeto. Então, no próximo vídeo, vamos começar a projetar nossa seção de heróis juntos. Então, vejo você então. 115. Seção de Herói 1: Oi, todo mundo. Bem-vindo de volta a outro vídeo da seção No vídeo anterior, configuramos nossos layouts, como você pode ver aqui com o com off 1200 pixels. E neste vídeo, vamos começar a desenhar nossa página de destino. Estou tão entusiasmado que começou. Então, o que? May mansão alguma coisa. Cada site tem uma seção de heróis. OK, o que é uma seção de heróis? Deixe-me abrir o site do aplicativo de desenho para mostrar um exemplo. Lá vamos nós. Este é o esboço. Eu sou site e esta seção é chamada seção herói. Certo, então o que precisamos aqui? Oh, seção. Como você pode ver, precisamos de um logotipo na parte superior e também alguns menus. E então um título e um título stop. E, finalmente, precisamos de contrações. Ok. E você pode ver que temos alguns botões, tente gratuitamente e veja os preços. Estes são chamados de chamada à ação. E depois disso temos outra seção. Pode ser características-chave fora do aplicativo ou do site ou mesmo do produto. Ok, lá vamos nós. Estas são as principais características e aqui temos algumas outras características e, em seguida, a seção do cliente , Outra seção da canela do contrato E no final, temos o rodapé. Ok, então neste vídeo, vamos nos concentrar em criar nossa seção de heróis. Vamos começar. Como eu mencionei antes, precisamos de um logotipo para colocar aqui. Ok, então vamos em frente e abrir nosso arquivo de ativos. Lá vamos nós. E aqui, preparei para vocês algumas pastas. Temos telas, que é a captura de tela do nosso aplicativo Praia redesenhado. Exportou cinco quadros de arte para cá. Como você pode ver, temos carros, página inicial, página inicial transação de menu e detalhes de transações. E então temos ícones, ilustrações, logotipos e ataques. Bem aqui. Então agora precisamos abrir os logotipos e aqui temos dinheiro. Perfeito. Deixa-me arrastar e largar ali. Na verdade, criei outra versão do nosso logotipo assim. A única coisa que mudei era a posição do nosso texto. Ok, então eu criei uma versão horizontal do nosso logotipo assim. Agora vou fazer zoom médio, e precisamos usar nossa ganância para alinhar nossos elementos. Ok, então o que eu vou fazer é mover esses elementos assim até que ele toque nossa coluna. Perfeito. E seu estofamento superior vai ser 50 como este. Perfeito. O que mais precisamos aqui? Precisamos de menus que sejam ataques de anúncios. E eu vou escolher em telefones Sarah perfeito. E isso mudou o tamanho do telefone para 17. E vai ser irregular e o personagem, vamos e o personagem vai ser zero efeito. E então vamos mudar a cor. Vou mudá-lo para três a. três a e três a. A mesma cor escura que usamos para projetar a aplicação virgem fora deste produto. Ok? E finalmente, vamos definir a linha alta para 24 porque estamos usando um sistema de oito pixels são números devem ser divisíveis por oito. Muito bom. Vou fazer zoom malvado. E aqui, vamos à direita. Os produtos estão certos. Que o humor aqui duplicado e certo, Desenvolvedores perfeito. Mais uma vez, duplicado no preço certo novamente, eu vou duplicá-lo. E aqui está certo. Apoio. Deixe-me movê-los para o lado esquerdo. E precisamos de mais duas coisas aqui que o duplicem. E aqui precisamos gostar. E a última opção será o nosso botão de inscrição. Ok, então o que eu vou fazer é chamar Juan. Ok. E aqui eu vou zoom significa e escolher este fica ou tp botão copiado. E aqui na página de destino, vou pagar o estado perfeito. E agora vou duplicar mais uma vez porque preciso do mesmo fundo. E agora vamos clicar duas vezes no 1º 1 e remover essas formas muito boas. Se você quiser esconder esses layouts, você pode facilmente manter o controle e eu E por quê, senhor? Vender. Perfeito. E agora vou selecionar o meu fundo aqui. E isso mudou o deles com dois, 178 por 72. Vou alinhar os tanques ao centro. Bastante incrível. E mudou o tamanho do telefone para 17. Mais uma vez, alinhá-lo muito bem. E lembre-se de mudar o Leão High para 24. E como você pode ver, temos 24 pixels para o topo e 24 pixels para a parte inferior. E aqui vou eu renomear este mais completo para se inscrever. E também, vamos mudar esse texto para se inscrever muito bem. E vamos movê-lo para cá, e eu vou apresentar as nossas saudações. Tudo bem, então onde exatamente devemos reposicionar nossos elementos para este projeto? Decidi usar a segunda coluna do lado esquerdo e a segunda coluna do lado direito também. Então este botão precisa estar aqui assim, e seu esconderijo superior vai ser 40 pixels. Perfeito. Então eu vou em frente e selecionar muitos humanos, movê-los para o lado do laboratório. E agora vamos alinhá-los. Primeiro, vou alinhar os tanques de carga. Vai ter 64 picos de estofamento direito como este. Bastante incrível. Isso é uma linha. É verticalmente também, então é um suporte semelhante, e vai ter 72 picos. Muito bem, estofamento e assim por diante. Então, esses preços 72 picos células, bem como, desenvolvedores e produtos. Bastante incrível. Então vamos selecionar todos esses textos e alinhados verticalmente agrupá-los. E aqui, vamos escrever o menu perfeito. E como você pode ver, tem um top de 64 pixels, acrescentando, isso é fantástico. E mais uma vez, eu vou alinhar todos os nossos elementos aqui, então nós precisamos escolher nosso logotipo, nosso menu em nossa parte inferior, e alinhá-los verticalmente. Bastante incrível. Então a única coisa que mudou foi a posição do nosso logotipo. Como você pode ver, é parar de esconder suas células 56 p agora. Fantástico. Então eu vou mover o local para o lado esquerdo e aqui nós precisamos adicionar alguns elementos que são tanques. Então vamos adicionar um texto e eu vou mudar seu tamanho para 65 assim. E também mudou o fundo para como tem texto pro, e eu vou mudar o caminho para a cena e a linha oi para 80. Perfeito. E a última coisa que precisamos mudar é a cor que eu vou configurá-lo para um 46 em duplo F como este, e então isso está mudando para garantir o seu dinheiro de graça e obter re mandados bastante impressionante. Deixe-me diminuir o com 2 667 e eu vou alinhá-lo ao lado esquerdo, e eu acho que é melhor mudar os Fonds. Vou mudá-lo para SF pro display, então vamos procurá-lo. Isso é um profissional exibindo perfeito. Agora está melhor. E então eu vou ampliar e alinhar perfeitamente com nossas leituras. Como você pode ver, ele está alinhado perfeitamente e é parar de adicionar vai ser 367 pixels como este, então eu vou duplicá-lo. Lembre-se, como eu mencionei antes, você tem uma multa de imposto aqui, então se você abri-lo, você pode obter todos esses tanques. Esse é o seu uso neste projeto, e você pode copiá-los e colá-los facilmente e rapidamente. Só um lembrete. Precisamos da segunda linha. Copie-o e aqui cole. E então vamos mudar o tamanho do telefone para 17 pontos e a linha alta para 24 pixels muito bom. E então eu vou mudar o peso do tema para a luz. Deixe-me mudar o com 472 assim. Podemos mudar o alinhamento de auto hide para corrigir o tamanho, então eu vou mudar o alto para 48 assim e seu cabeçalho superior vai ser 16 pixels perfeito. E então é hora de colocar nossa chamada em ação aqui, que é nosso botão de registro. Então o que eu vou fazer é renomear esta pasta juntos começou, e também estas tomadas juntos começou bem e deixe-me mudar a ciência do telefone de 17 pontos e a linha alta para 24 muito bom eu vou selecionar nosso retângulo, e eu gostaria de mudar o com 2 251 assim e vamos alinhar nossos elementos mais uma vez ao centro, vertical e horizontalmente. É muito bom, e ele parar de ir vai ser para os pixels como este. É ótimo, não é? Até agora, adicionamos o título do logotipo do menu legenda e um botão de contração à nossa seção de heróis . No próximo vídeo, vamos adicionar e marcar até o seu, a fim de torná-lo interessante e fantástico. Espero que tenham gostado do CDO e estou a receber o próximo vídeo. 116. Seção de Herói 2 - Mockups: Olá, todo mundo. Espero que esteja indo bem. Como mencionei anteriormente neste vídeo, vamos projetar nossa marcação para colocá-la bem ali. Certo, o que é uma marcação? Deixe-me mostrar-lhe um exemplo. Se você pesquisar iPhone Mark copping Google, você pode ver que você terá diferentes opções e exemplos diferentes. Por exemplo, este aqui, é muito bom. Como você pode ver, é um espaço reservado para a energia de suas capturas de tela. Apresente o seu design. Também temos o iPhone 11. Há tantos recursos gratuitos e pagos está lá fora que você pode usar. No entanto, você vai criar nossa própria marca porque vai ser tão simples e único. Então vamos voltar ao nosso esboço e aqui eu vou inserir em torno dele perfeito. E então vamos em frente e mudar o seu com 2 260 por 563 como este bordas desmarcadas e mudar o tipo de raio para cantos suaves e é quantidade de 41 muito impressionante. Então eu vou adicionar algumas sombras. Então vamos diminuir o tudo 5 para 10% e um Y 2 43 Eu também quero mudar o x 21 E finalmente o Blair para 56. Bastante incrível. Então o que eu vou fazer é colocar nossas capturas de tela do aplicativo que nós projetamos sobre esses tango rec. Então, como podemos fazer isso? Na verdade, há uma cinta diferente. A primeira maneira é apenas arrastar e soltar a captura de tela e, em seguida, escolher este retângulo na máscara. É, no entanto, há outra maneira que eu recomendo que você use isso e que ele está usando sensação padrão na seção de sensação. Então, se você abrir campos, você pode ver aqui nós temos sensação padrão e eu posso escolher uma imagem. Então aqui, vamos abrir telas e eu vou escolher home page como esta. E lá vamos nós. Foi fácil, certo? Na minha opinião, é a melhor maneira de fazer isso. E também, é a maneira mais precisa, tudo bem, então eu vou continuar e duplicá-lo assim. Vou colocá-lo com um tapinha de 60 pixels perfeito. E vamos mudar a foto dois cartões muito bom mais uma vez duplicado e mudar a foto para detalhes de transações, e precisamos de mais dois, então eu vou duplicá-lo mais uma vez e mudou a foto para transação e o último um que está mudando muitos muito bem. Em seguida, vamos eleger estes dois that da tela do meio e movê-los um pouco para cima como este. E também vamos selecionar esses dois e movê-los para cima assim. E, finalmente, precisamos escolher todos eles, agrupá-los e chamá-lo de marcação impressionante! Então isso é girado 30 graus para o lado esquerdo. Então vamos dizer que menos 30 graus, e eu vou movê-lo para baixo para obter o melhor lugar possível. Eu vou apresentar minhas saudações aqui e vamos movê-lo um pouco quando um zoológico significa e esta tela vai tocar esta coluna, Ok, eu acho que agora é ótimo. No entanto, você pode estar se perguntando o que vai acontecer para o resto dessas marcações. Na verdade, eles não vão ser cortados porque precisamos aumentar a altura aqui, então eu vou multiplicar por dois. É uma boa maneira de calcular tamanhos aqui, então eu vou multiplicar por dois e vamos chegar a qualquer um 60 pixels perfeito. Então, agora, se você clicar em pré-visualização, você pode facilmente rolar para baixo assim e aqui vamos colocar nossos principais recursos. Isso é fantástico, não é? Tudo bem. Uma coisa que precisamos lembrar é mudar nossa cor de fundo. Ok, então se você selecionar este quadro de arte, você terá a opção de cor de fundo. Vou em frente e marcar esta caixa e marcar incluindo exportação como esta no sofá. Dois F cinco F seis e F A para obter este azul muito claro e agradável. OK, agora parece fantástico. Muito bem, pessoal, espero que gostem deste vídeo. Verei você no próximo vídeo para criar nossos principais recursos. Então, vejo você então. 117. Seção de recursos principais: Oi, todo mundo. Espero que esteja indo bem neste vídeo. Vamos projetar nossos principais recursos. Ok. Na verdade, precisamos projetar seis recursos principais diferentes para esta página de destino, que são seguros e seguros. Fácil poupança. 5% dinheiro de volta, amigável, baseado em nuvem e suporte 24 7. Ok, então, se você notou, eu já preparei para você seis ícones diferentes e ele pode encontrá-los em arquivos de ativos. Então agora podemos ir em frente e inserir isso aqui assim. Vou conseguir 80 por 80. Perfeito. E mudou um raio. Tempo para suavizar cantos e a quantidade de 25. Bastante incrível. Deixe-me fazer zoom significa, então eu vou em frente e em Fronteiras Checa, e vamos mudar a cor. Vou torná-lo laranja ou estão seguros e seguros. Recurso. Então vamos escrever F cinco um seis e 23 assim. Bastante incrível. E agora é hora de abrir nossos ativos. Tudo bem. E aqui podemos ir em frente e abrir os ícones, Fuller. E como podem ver, temos ícones diferentes. Ok? Eu vou em frente e Dragon deixou cair um ícone seguro como este perfeito. E quando um filme para baixo, que é uma linha que tanto verticalmente e horizontalmente e finalmente agrupá-los e eu vou escrever seguro muito impressionante. Então precisamos enviar SMS. Ok, então a primeira coisa poupa. Eu vou ir em frente e mudar a diversão para SF Pro exibindo assim. Vamos mudar o tamanho do telefone para 22 pontos. Perfeito. A altura da linha é 26. É bom e fazer a linha alta 24 muito bom. E por último, precisamos mudar a cor. 23 um três a e três um k. e aqui eu vou escrever seguro e seguro muito bem. Isso está alinhando ao centro, e o preenchimento entre eles será de 16 pixels. Mas isso é incrível. Certifique-se de que o texto é uma linha para o centro. Mais uma vez, vamos agrupá-los e chamá-lo de seguro e seguro. Bastante incrível. Então precisamos duplicá-lo, estamos certos. E antes de tudo, vamos mudar a cor. Então, se eu for em frente, posso escolher outro Connor facilmente. Se você não tem certeza do que Connor são ótimos para combinar juntos, é melhor apenas mover esta escolha de cor aqui ou digamos controle deslizante como estes. E como você pode ver, você pode escolher o melhor Connors possível dessa maneira. Certifique-se de não alterar a posição do seletor de cores assim. , não é uma maneira ideal No entanto, não é uma maneira ideal. É uma opção. Por exemplo, esses dois são ótimos, mas para essas páginas de destino, eu já preparei as cores, então eu vou em frente e defini-la para 23 5 c e F cinco. Bastante incrível. Vamos remover esse ícone e trazer o ícone da caixa de dinheiro assim. Vou alinhá-lo ao centro vertical e horizontalmente. No entanto, você nem sempre deve confiar neste tipo de alinhamento, porque às vezes você tem que equilibrar e alinhar um manualmente, a fim de obter os melhores resultados possíveis. Então, como você pode ver , não está no centro. Então vamos escolher isso e movê-lo para cima por dois pixels e eu vou mover essa pasta e colocá-lo dentro do mais seguro como este. Como você pode ver, é hop adicionando Devaughn Oriental e seu impacto no ponto é de 24 pixels. Agora, no entanto, como você pode ver, você pode reconhecer que é uma linha para o centro. Ok, então deixe-me mudar os tanques muito fácil salvando assim e mais uma vez alinhado com o centro Muito bom. E aqui precisamos mudar o nome Fullers muito fácil de salvar também. Isso é incrível mais uma vez duplicado. E aqui eu vou mudar a cor para ser 32 3 F e 5 Awesome. Isso removeu este ícone e trouxe o ícone de dinheiro de volta aqui. Então temos carros de crédito. Vai ser o nosso ícone de dinheiro de volta. É uma linha para o centro, e precisamos equilibrá-la manualmente. Parece ótimo. E então eu vou em frente e mover esta pasta e colocá-lo dentro deste seguro, mais completo e mudar o imposto para 5% dinheiro de volta como esta linha para o centro e, em seguida, renomear esta pasta. Isso mesmo, Banco de Dinheiro. Muito bom. Precisamos de mais três características principais. Ok, então vamos em frente e duplicá-los assim. E agora precisamos mudar a cor desse retângulo. Ou, digamos Square Teoh tem 5 23 e 23 muito bom que é removido este ícone e trazer o ícone como aqui. Lá vamos nós. Vou alinhá-lo ao centro vertical e horizontalmente. E vamos mudar esses tanques para fácil utilização. Muito bom. Lembre-se de mover esta pasta e colocá-lo dentro do Fuller seguro aqui e renomear seu Fuller para amigável. Fantástico. E no próximo também, vou mudar a esquina para 23 d c e F. Ok. E então eu vou remover esse ícone e trazer o ícone da nuvem aqui porque é sobre Cloud based. Vou equilibrar manualmente assim. E isso mudou o nome para Cloud baseado muito bem. Finalmente, vou mover esta pasta e colocá-lo dentro de um completo seguro e renomear a pasta principal para Cloud. Baseado no último, mas não menos importante, precisamos mudar a cor do quadrado também. Então eu vou mudar para F 5 23 e 9 D assim. Remova esses cartões de crédito e trazendo o suporte. Eu posso ouvir uma linha para o centro tanto verticalmente como horizontalmente e mudar esses texto para suporte 24 7. Então eu vou ir em frente e mover o suporte mais completo dentro do fuller seguro e renomeado a queda principal ou para apoiar Fantastic estão certos. A próxima coisa que precisamos fazer é alinhá-los. Então eu vou seguir em frente e escolher seu seguro e amigável como este, e eu vou definir o preenchimento entre eles para 107 picaretas células como esta. A mesma coisa acontece com esses dois também. 107 e leste para muito bom. Então vamos escolher seguro e seguro. Agrupe-os e vamos renomear-me para um grupo. Fácil economia com nuvem, baseado em Lee dois e 5% Banco B 24 7 Suporte e chamá-lo de três. Selecione-os anglicanos. Distribua ressentidamente assim, e vamos definir o tapinha entre eles para 200 pixels. Bastante incrível. Mais uma vez, agrupe-os. E aqui, vamos escrever seção de recursos muito incrível, e eu vou entrar no centro horizontalmente movendo-se para baixo assim. Acho que vou definir o vinho para 1445. É uma posição melhor, e isso é pré-visto. Lá vamos nós. Eles parecem incríveis. No entanto, eu acho que é uma boa idéia adicionar alguns detalhes aqui porque nós temos algum espaço vazio bem no topo e também aqui no canto inferior direito. Então, o que? Eu vou fazer vai pagar John. E se você se lembrar, no perfil concluído quadro de arte, criamos duas formas, então eu vou escolhê-los, copiá-los e ouvir página de destino, colá-los, em seguida, selecione o Um azul. Mova-o aqui e o roxo. Aqui. Vou selecionar o azul e girar aquecedores para o lado esquerdo assim. Vamos movê-lo aqui e o roxo novamente, girado para a direita e movê-lo aqui assim. Então eu vou apresentar meu ano de layouts segurando o controle L. E vamos mover esses azuis para o lado esquerdo assim. Perfeito e o roxo também. Para o lado direito, isso é incrível. Como você pode ver, nossos principais recursos não estão alinhados com nossos layouts. Certo, perfeitamente, então não é um problema. Você deve apenas se concentrar nisso, que tudo deve ser alinhado com o seu layout. Os layouts e a ganância estão aqui apenas para ajudar você a manter tudo organizado, ok, e às vezes acontece que você cruzá-los. No entanto, é perfeitamente normal, muito bom. Mais uma vez, é Previte. No entanto. Primeiro, vamos mudar o máximo para 3000 como este e criar agora. É fantástico, não é? Estão certos, pessoal, vamos pôr um fim a este vídeo. Espero que tenha gostado. E no próximo vídeo, vamos projetar nosso primeiro recurso aqui. Então, vendo o próximo vídeo. 118. Característica 1: Oi, todo mundo. Bem-vindo de volta a outro vídeo fora das pontuações neste vídeo, vamos projetar nosso recurso de tarifas aqui. Ok, então primeiro inserções, deixe-me apresentar nossos layouts aqui muito bem. E então eu vou fazer zoom significa, vamos adicionar um texto aqui. O fundo é dito para sf pro exibição, que é o que queremos. E eu vou mudar o caminho para médio e o tamanho para 15 pontos. Bastante incrível na linha. Oi para 24. Eu vou escrever, sempre melhorando assim e é capitalizado em tomadas opções que é fantástico. E a cor será de cinco a duplo F e oito assim, alinhando ao lado esquerdo e duplicado. E agora vamos definir os sinais do fundo para 24 pontos. A altura da linha vai ser a mesma, e o peso também vai ser médio. Vamos mudar o texto para continuarmos melhorando nossos serviços assim e vamos mudar a cor para um 46 double f fantástico, e ele vai ter um preenchimento superior de 16 pixels como este e mais uma vez duplicado. No entanto, desta vez, vamos mudar a ciência do telefone para 16 pontos e a linha oi para 32. Não vai ser capitalizado. Vou configurá-lo de volta para a opção anterior. E isso mudou a cor para um quatro B zero e duplo s assim. Você se lembra disso? Eu mencionei sobre o arquivo de texto que eu preparei para você. Então agora vamos abri-la. Lá vamos nós. E como você pode ver aqui, você tem todos os tanques. Então, para poupar seu tempo, vou copiá-lo e colá-lo. Lá vamos nós. Finalmente, isso mudou com 517 assim. Bastante incrível. É stop heading vai ser 32 pixels como este. Selecione todos eles e movendo-se para o lado esquerdo e alinhando para a borda esquerda da nossa segunda coluna assim. A única coisa que precisamos aqui é de um fundo. Precisamos criar um botão para aprender mais aqui. Então o que eu vou fazer é rolar para cima, OK? E copiar e colar isso começar. Botão. Lá vamos nós. Vou ser tão má. Primeiro de tudo, vamos remover essas duas formas. Não precisamos deles e alteramos o texto para saber mais. No entanto, eu vou mudar o com 2 200 aliando os takes para o centro. Fantástico. Lembre-se de renomear nosso Fuller Saiba mais. E como você pode ver, ele está alinhado perfeitamente e é parar de adicionar, vai ser 32 picos células também. Assim? Isso parece ótimo. Então vamos selecionar todos eles, agrupá-los e chamá-lo de recurso um. O que mais precisamos aqui? Você está certo. Precisamos de uma ilustração. Então vamos trazê-lo aqui da nossa pasta de ilustrações. Temos três ilustrações diferentes. Eu vou arrastar e soltar o 1º 1 Na verdade, eu tenho esta ilustração do site Andhra como eu mencionei antes. Você pode conferir. É uma grande fonte de ilustrações. Muito bom em Mizzou? Vou movê-lo para o lado direito. Como você pode ver, está alinhado perfeitamente com a nossa segunda coluna, e eu vou fazer o porquê 22. E para qualquer um assim muito bom. Vamos mover essas tomadas para baixo também e alinhá-lo com a nossa ilustração. Isso é fantástico. Agora é hora de visualizar nossa página de destino. Lá vamos nós. Isso é ótimo, não é? Muito bem, pessoal, muito obrigado por assistirem ao vídeo. Espero que tenha gostado. No próximo vídeo, vamos trabalhar em nosso segundo longa-metragem. Então vejo você então. 119. Característica 2: Olá, Ron. Espero que esteja indo bem nesse vídeo. Vamos projetar nosso segundo recurso. Então, sem que eu faça, Vamos começar. Vou rolar um pouco para baixo. E vamos selecionar nosso mundo da arte porque precisamos aumentar o tamanho da altura para, digamos, 1000 como este É o suficiente, eu suponho. Tudo bem. Então, para o segundo recurso, precisamos de outra ilustração para colocar à direita no lado esquerdo. Você está certo. Precisamos colocá-lo no lado oposto. Está bem. A fim de manter o saldo fora da nossa página de destino. Então agora vamos eleger nosso primeiro recurso duplicado. Vou movê-lo para baixo e colocá-lo aqui assim. Certifique-se de que é uma mentira perfeitamente, muito bom. Vou em frente e mudar esses conteúdos. Então eu vou abrir o arquivo de texto. E aqui eu vou copiar e colar 24 7 suporte Isso é colá-lo aqui. Perfeito. E para o subtítulo, vamos copiar e colar a frase Experiência Ajuda quando você precisa muito bom. E aqui temos a descrição competir e colá-lo aqui. E isso é tudo. Lembre-se de alterar o nome Fullers para o recurso dois. Então precisamos colocar uma ilustração bem na frente do nosso texto. Está bem. No entanto, antes de fazer isso, isso é inserir um círculo aqui e eu vou fazê-lo 11 06 por 11. 06 em Fronteiras Checa Muito bom. E precisamos usar um Grady incrível e interessante para isso. Então vamos para a página um. E como você se lembra, criamos uma ótima nota. Ian está aqui. Então eu vou ir em frente e selecionar este azul clique com o botão direito sobre isso e copiar estilo muito bom. E eu vou pagar sentar aqui. Incrível. Isso mudou um pouco a direção do nosso radiante. Parece fantástico. Então vamos duplicá-lo mais uma vez e em Chek Fields e verificar Fronteiras. E eu vou ajustá-lo para 0,9 e nós vamos usar a mesma cor aqui. Então vamos usar a primeira cor e escolher isso soprou. O código é 48 um três F cinco e a segunda cor novamente aqui e diminuir o em para 20 Muito impressionante. Agora vamos movê-lo para o lado direito assim. No entanto, acho que é melhor mudar a cor para algo mais escuro. Então vamos definir para três C 54 f um muito bom. Vou mudar a direção um pouco agora. Parece fantástico, e está se movendo para o lado esquerdo e movê-lo para cima mais uma vez duplicado com para o lado direito e movê-lo para cima assim. Agora é hora de adicionar nossa ilustração à nossa página de destino. Então vamos trazer nossa segunda ilustração muito boa. Na verdade, recebi essa ilustração do site dos humanos. É um recurso muito grande fora de ilustrações, por isso certifique-se de verificar este site para fora. Pode baixar essas ilustrações gratuitamente. Bastante bom. Então o que eu vou fazer é colocar essas ilustrações aqui. Vou alinhar, alimentar a nossa segunda coluna do lado esquerdo, como podem ver, e vamos escolher os círculos agrupá-los. Vou chamá-lo de “Círculo um filme para o lado esquerdo “assim. Agora está ótimo. E o topo lutando contra estes impostos vai ser 430 picaretas dono como este. Lá vamos nós. Vamos em frente e visualizá-lo. Isso parece incrível. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. No próximo vídeo, vamos projetar a seção de clientes juntos, então veja que 120. Seção de clientes: Olá, todo mundo. Bem-vindo de volta a outro vídeo da seção neste vídeo. Vamos projetar a seção de clientes juntos para que não façamos o favor de fazer. Vamos começar com o aumento da nossa altura aqui para 5000 como este. Bastante bom. Então eu vou apresentar meus layouts aqui e precisamos de uma mensagem. Como você pode ver, a fonte é dito para SF Pro Display eo tamanho divertido vai ser 24 pontos ea altura da linha vai ser 29. E finalmente, vamos mudar a cor. 23 um três um e três a. bastante impressionante. Então eu vou escrever, visitar alguns de nossos clientes assim, uma linha para o centro e vai ter um 610 escolhas. Altere o preenchimento, como você pode ver, então aqui precisamos colocar nossos logotipos. Então vamos em frente e arrastar e soltar nossos logotipos aqui. Logotipos, clientes. Temos cinco logotipos diferentes, então vou arrastá-los e deixá-los aqui muito bem assim. A segunda reserva Munn. E então eu vou colocar a Shopify e depois dessa folga e em vez do carrinho, como você pode ver a altura, ter esses logotipos ajustados para 30. Ok, e eu vou selecionar todos eles. Você pode distribuir Presente Lee e distribuir de forma desigual assim. Então agora precisamos definir um estofamento de 60 picos Ella entre eles assim. Incrível. Bastante bom. Perfeito. Agora vamos agrupá-los e eu vou escrever não, vai uma linha para o centro e vamos shakthi alinhamento. Como você pode ver, precisamos mudar o preenchimento entre eles com urgência, alinhando perfeitamente com nossas colunas. Então vamos selecionar todos eles, movê-los para o lado direito até que tenhamos um bom alinhamento aqui. Bastante bom. E isso é como o último logotipo e filme do lado esquerdo. Incrível novamente. Vamos selecionar todos eles. Francamente, pode distribuir de forma desigual estão certos muito bons. Então vamos eleger nossos logotipos Fuller e vamos definir 72 picos. Vender top escondendo por isso. Fantástico! E isso é tudo. Então, vamos pré-visualizado Muito impressionante. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. E no próximo vídeo vamos projetar outra seção de chamada à ação aqui. Então vejo-te. Que 121. Call to Action: Olá. Todo mundo vai voltar para outro vídeo fora das partituras neste vídeo. Vamos criar outro apelo à ação aqui. Na verdade, quase todos os sites têm uma ação de condomínio logo antes do rodapé. Então vamos criar um aqui para estas partes. Primeiro de tudo, vou aumentar a altura de 26 mil assim. Então vamos continuar e duplicar o nosso círculo. Vou virar horizontalmente assim. Bastante bom. Está bem, vou pô-la aqui. Temos 1234 e cinco colunas. Isso é ótimo. E vai ter 72 picos para vender o topo. Então o que vamos fazer é mudar o Grady int aqui para outra coisa. Então vamos escolher a primeira cor, o leve azul, e ajustá-lo para um F três c e F E. E o segundo 1 para ser cinco para duplo F em oito como este. Então vamos mudar a direção do nosso Grady int Pretty impressionante. E, finalmente, precisamos trazer nossa ilustração aqui. É outra ilustração do site dos humanos, e vou colocá-la aqui assim. Tudo bem, então o que precisamos aqui. Precisamos de Tex. Ok, então vamos criar o primeiro 1 que vou escrever. O que você está esperando? Um ponto de interrogação? Então vamos fazer 30 pontos e são nove. Altura vai ser 24 e a cor para ser cinco para dobrar F um oito. No entanto, esta é a hora, eu vou mudar o personagem aqui. Então vamos mudá-lo para 1.5, a fim de obter mais espaço entre nossos personagens e duplicá-lo , e ele vai ter um 32 picaretas Eldar preenchimento e mudar você para se inscrever hoje e desfrutar de seu dinheiro de volta 5%. Então eu vou mudar a cor para um 46 e duplo F como este Muito incrível. E aqui precisamos de botões como nosso chamado à ação. Então vamos em frente e copiar e colar este botão começar, e eu vou mudar essas tomadas, também. Experimente de graça. E desta vez eu vou torná-lo capitalizado assim, e ele parar de adicionar vai ser 64 pixels e nós precisamos de outro botão. Vamos colocá-lo aqui. No entanto, lembre-se de renomear o Fuller Eu vou fazê-lo tentar de graça e para o Espartano. Vou remover estas duas formas, e vou mudar a cor para um branco sólido como este. Em que mudou a cor do texto para um e três b e f e assim. Isso está mudando para entrar em contato conosco. Bastante incrível. E, finalmente, precisamos mudar a cor da nossa sombra. Vamos fazer três C três C e três c k. E depois disso eu vou diminuir o tudo longe para 10% eo resto deve ser intocado muito bom. Finalmente, precisamos renomear a pasta para entrar em contato conosco. Agora vamos eleger esses textos e esses dois botões agrupá-los. Vamos escrever chamada à ação, movê-los um pouco para cima até você obter um 555 escolhas estão batendo assim e, em seguida, isso é pré-visualizado. Lá vamos nós. Isso parece incrível. Muito bem, pessoal, muito obrigado por assistirem o vídeo no próximo vídeo, que é o último. Vamos criar um rodapé até o final do nosso quadro de arte. Então eu vou te ver. Que 122. Rodapé: Oi, todo mundo. Espero que esteja indo bem neste vídeo. Vamos projetar a última parte desta página de destino, que se chama Rodapé. Cada site tem um rodapé, e ele precisa ter certeza, porque precisamos colocar alguns Ling importantes ou alguma informação importante sobre o idioma ou localização fora do usuário. E por último, mas não menos importante, precisamos escrever sobre o direito comp, então sem mais eu faço. Vamos começar com a inserção de uma linha, que vai ser nosso separador aqui, então eu vou criar uma única linha. Como você pode ver, seu comprimento é 1920 escolher músicas muito bom. Vou mudar o seu com 20.5 e depois a cor para um azul claro. Então eu vou configurá-lo para nove b um nove e eu vou ser bastante incrível e vamos alinhá-lo então eu vou remover esses pontos aqui. Então vamos definir o cabeçalho superior para 100 músicas como esta. E o que precisamos aqui? Nós vamos criar três colunas fora de menus ou digamos links e aqui vamos colocar dois tanques diferentes que estão em seguida, os dois ícones diferentes, a fim de indicar a localização do usuário e o idioma fora que página de destino. E, finalmente, ano, vamos escrever a nossa comp direito, então, sem mais, eu faço. Vamos começar com a criação da nossa primeira coluna. Então aqui eu vou escrever produto. Incrível. O fundo vai ser Monsour, então é perfeito. No entanto, eu vou mudar o tamanho da fonte para 16 pontos, e eu vou torná-lo negrito. E vamos mudar a linha alta para 24. Isso é ótimo. Finalmente, precisamos mudar a cor, então vou usar um azul claro. Vamos definir para nove b a nove. Onda vai ser muito bom. Vou pô-lo aqui. Isso é comer duplicado e é parar de se esconder vai ser 16. Escolher canções como esta fazer o seu alinhamento regular para a esquerda, ambos fora deles. Então eu vou mudá-lo para duplicatas de pagamentos, e ele vai ter um top de oito pixels se escondendo. Vamos mudar você para faturamento mais uma vez, duplicado, e aqui vamos ter empréstimos e a última diversão que ele vai ser cartões de crédito como este. Selecione todos eles agrupados e chamá-lo de produto. E então isso é duplicado. E eu vou mudar as pastas Nome para empresa, Tudo bem, e agora vamos em frente e mudar esses produtos para empresa muito bem. E os pagamentos vão ser cerca de. E o próximo vai ser uma empresa incrível. E os empréstimos vão ser clientes no último, aquela cidade para empregos, tudo bem, tudo bem, e precisamos de mais um em comum. Então vamos duplicá-lo, e eu vou renomear a pasta para Resource Is. E aqui a empresa deve ser alterada para Recurso é bem e sobre deve ser suporte. Enterprise deve ser contato e os clientes. Vamos mudar para políticas, e o último vai ser mapa lateral. Tudo bem, agora, vamos em frente e selecionar todas essas três colunas. E como você pode ver, o recurso é Coluna está em nossa segunda coluna do lado direito, muito bom, e eles vão ter um 100 picaretas acima, adicionando, como ele pode ver e aqui vamos criar a localização no idioma fora da página de destino. Então vamos em frente e escrever um nome de cidade, por exemplo, eu vou escolher São Francisco assim, e isso é mudar a cor para um 46 na dupla esquerda. O tamanho da fonte será o mesmo. Deve ser 16 pontos, no entanto, Vamos mudar a linha. Oi para 30 estão certos, e agora é hora de trazer o ícone. Então aqui nos ícones, temos outra pasta, que é chamada Rodapé, e temos dois ícones diferentes, anos de idade. Vamos arrastá-los e soltá-los aqui. Temos linguagem e bússola, , então vamos movê-los para baixo assim. O 1º 1, que é uma bússola, vai ser para a nossa localização, e vai ter um preenchimento de 16 pixels como este. Agrupe-os e chame de vocação. E eu vou copiar e colar esse texto muito bem aqui. Vamos escrever Inglês Estados Unidos muito impressionante. Vai ter um preenchimento de 16 pixels como a nossa localização e agrupá-los. Deixe-me renomear para linguagem como esta, e como você pode ver, ele tem um preenchimento de 16 pixels superior, o que ele é perfeito. E por último, mas não menos importante, precisamos adicionar nossos direitos autorais aqui, então eu vou mudar a cor também. Nove b a nove e duplo B e vamos mudar a linha alta para 24. E eu vou adicionar um símbolo de direitos autorais segurando a tecla de opção e clicando em G assim. E isso mesmo, dinheiro até vírgula 2019 e todos os direitos reservados. É um texto padrão e está alinhando para o lado esquerdo e vai ter 60 picos e top se escondendo como este são caras certos. Agora, a única coisa que precisamos fazer é diminuir nossa altura, ok, porque vamos ter um preenchimento inferior de 100 pixels também. Então, como podem ver aqui, temos 250 células de pico. Precisamos de 100 píxeis. Então vamos em frente e escolher nosso quadro de arte. E aqui vou eu escrever menos 150. Lá vamos nós. Tudo está configurado perfeitamente, estão certos. E lembre-se de alinhar esses dois também eles vão ter um top de 100 pixels escondido como este. Então precisamos mudar o alinhamento fora do nosso texto de direitos autorais aqui tem um alinhamento perfeito. Lá vamos nós. Agora tudo está ótimo. Então, pela última vez, vamos visualizar nossa página de destino juntos. Previ. Incrível. Tudo parece bem. Aqui está o nosso rodapé. Muito bem, pessoal, espero que tenham gostado deste vídeo. E também a seção se você quiser obter o projeto final pode baixá-lo a partir do recurso é seção fora da última palestra que é chamado Projeto Final. Mais uma vez, espero que tenha gostado. E vejo-te no próximo vídeo. 123. Introdução à modelagem 3D: Olá a todos, todos, e bem-vindos de volta a outra seção deste curso nesta seção. Vamos falar sobre três modelos D. Você pode estar se perguntando como a modelagem três d vai ajudá-lo em sua carreira como designer Yuan UX. Então deixe-me explicar isso para você em um termo simples. Para você como designer yuan UX é bom saber um pouco sobre três modelagem D porque às vezes você quer projetar uma página de destino criativa ou, digamos, um grito para um aplicativo que precisa de algumas formas simples ou até mesmo alguns três D contextos. Então, na seção, vou te ensinar como você pode usar essas técnicas, a fim de criar um eu incrível para o seu design. Então você pode estar familiarizado com o tradicional software de modelagem de três D, como Cinema quatro D três D Max etc. No entanto, trabalhar com esses softwares tradicionais pode ser bastante exigente para os iniciantes. Então, em vez de trabalhar com esses Softwares, vou mostrar-lhes outro ótimo ambiente. Existe uma aplicação Web, que é chamada de Victory. É um aplicativo Web incrível e novo que pode ajudá-lo a criar incríveis três D stomp de uma maneira rápida e fácil. Então, em vez de trabalhar com ferramentas complexas, vou ensinar como usar a vitória para obter os melhores resultados possíveis. Então, se você for para a vitória ponto com, como você pode ver, esta é a página inicial. Lá vamos nós. Podemos ver esses recursos. E a boa notícia é que, quando você terminar esta seção, você pode facilmente criar esse tipo de coisa. E você pode colocar o casaco em seu site ou você pode até mesmo visualizá-lo como um modelo de realidade aumentada . Ok, então a primeira coisa que precisamos fazer é criar uma conta. Há dois tipos de conta. A primeira vez é grátis. Então, se você for para preços, você pode ver que temos dois tipos grátis e premium para este curso. Você pode usar a conta gratuita porque vamos nos concentrar apenas nos conceitos básicos, portanto, certifique-se de criar sua conta. E no próximo vídeo, vamos começar nosso primeiro projeto de modelagem em D juntos. Então vejo-te. 124. Formas 3D: Oi, todo mundo. Quando voltarmos a outro vídeo desses cursos nesses vídeos, vamos começar a trabalhar com reitoria. Então, sem mais delongas, vamos começar. Primeiro de tudo, vamos em frente e clicar e começar a criar. Então aqui você pode criar um novo projeto. Ou, em vez disso, você pode usar alguns projetos pré-fabricados. Então eu vou em frente e clicar neste projeto à nossa direita. Como você pode ver aqui, temos um ambiente de três D com três dimensões. Lá vamos nós. Até agora, estávamos trabalhando em um ambiente dentário. No entanto, agora vamos mergulhar em um ambiente de três D Isso é tão interessante. Então, primeiro de tudo, deixe-me explicar alguns conceitos básicos. Se você quiser se mover por essas telas, tudo bem, você pode facilmente manter o espaço no teclado e se mover. Se você vai ampliar ou diminuir o zoom, você pode rolar assim e também pode girar ao redor. Clicar com o botão esquerdo do mouse. Reitoria é uma aplicação bastante complexa, então não vamos cobrir todas as ferramentas. No entanto, vou ensinar-lhe os requisitos para que você saiba como você pode usar este ótimo aplicativo. Bem no topo. Temos alguns momentos. Como você pode ver, temos o modo de edição de objeto, biblioteca e comentários no objeto. Também temos opções diferentes. Aqui temos primitivos, como você concebe, têm bicicletas, medo, tubo de cilindro, etc. Você pode facilmente clicar e bancos aqui e lá vamos nós. Você tem seus beliches, então vamos diminuir o zoom. Bastante incrível. E à sua direita, você pode modificar algumas variáveis, como posição, rotação, rotação, tamanho do escaneamento e até mesmo material como este. Muito incrível, não é? Segmentos de nome também, então eu vou fazer 10 por agora. Como podem ver aqui temos um aparelho. São algumas flechas, alguns cubos e algumas artes. Este aparelho permite girar a escala e mover o objeto. Ok? Então, se você quiser mover seu objeto, você pode usar essas setas como esta em qualquer direção que você quiser. Se quiser assustar seu objeto, podemos usar esses cubos. Como você concebe. Temos dois cubos diferentes. O cubo externo permite que você dimensione seu objeto em uma direção como esta. E o cubo interno permite que você dimensione seu objeto proporcionalmente. Se você quiser girar seu objeto, você pode usar esses arcos. Fantástico. Então agora vou remover este objeto. A outra coisa que você pode usar é texto. Ok, então sempre que você clicar nesses três tanques D, você pode ver que a vitória cria automaticamente um novo ano fiscal para você. E se você quiser trocar esses tanques, isso pode facilmente ir para uma seção de impostos três D. E vamos mudar isso para você. Eu ux design muito incrível, e eu posso me mover. É fácil aqui. Posso mudar a profundidade perfeita. E também posso mudar o material. Ou, digamos que a cor neste caso é bastante incrível, e você também pode mudar os fundos. Então vamos procurar por meses aretz lá atrás. Você também pode alterar o peso, o ritmo dos caracteres e o espaçamento entre linhas. Quando você está trabalhando com um objeto de três D, você precisa renderizar seu OK. Então, aqui no topo pode ver a razão maior alternância. E se você passar o mouse sobre isso, você pode ver que existem três opções diferentes, baixa qualidade, qualidade média e alta qualidade. Então eu vou com qualidade média. Lá vamos nós. Ele foi renderizado perfeitamente, é claro, Existem algumas marcas d'água na versão gratuita. Se você quiser removê-los, você pode usar a licença premium fora da vitória. Então agora vamos parar de renderizar nosso texto. Tudo bem, pessoal, isso é tudo para estes vídeos. Muito obrigado por assistir este vídeo. Espero que tenha gostado. E no próximo vídeo, falaremos sobre a câmera e a iluminação. Então vejo você então. 125. Câmera e iluminação: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vamos continuar a trabalhar no nosso projecto anterior. Como você pode ver, nós temos estes três d tex. No entanto, agora é hora de adicionar uma câmera à nossa tela ou à nossa visualização. Ok, vamos colocar isso nessa câmera muito incrível. E agora, se você olhar ao redor, você pode ver que a câmera está fixa e de frente para o nosso imposto na visão específica que dissemos. Ok, então se você clicar nesta camada de visão de câmera pelo menos lá vamos nós. Você terá sua visão de câmera de designer. Uma câmera nos ajuda a manter uma visão específica sempre que quisermos renderizar nosso projeto. OK, então agora vamos renderizar nossos tanques mais uma vez. E como você pode ver, não parece realista, ok? Porque não temos grandes sombras e iluminação cinza, então vamos consertar. O que vamos fazer é escolher um plano sombrio bastante incrível. Vou movê-lo para baixo, e como podem ver agora temos um plano sombra. Ok, verdade, sempre que você coloca um objeto ou qualquer coisa, foi um muito coloca um objeto ou vamos dizer um três tanques D em cima de um plano sombra. Ele criará automaticamente uma sombra para isso. Então, por exemplo, aqui em Mizzou Mean, como podem ver, nossos tanques não estão perfeitamente acima do nosso plano sombra. Então, primeiro de tudo, vamos eleger nossos três tanques D e pressionar um muito bom. E então eu vou movê-lo para cima assim. Certifique-se de que está acima do seu plano sombra. Ok, como você pode ver, não é assim. Vou subir de novo. Agora está muito bom. Ok, então se você renderizar seus objetos agora, você pode ver que nós temos uma grande sombra. Você pode ver isso? Na verdade, você também pode adicionar algumas luzes, por exemplo. Aqui, eu vou para uma luz retangular como esta. Vou movê-lo um pouco e vamos renderizar são vistos mais uma vez. Está muito brilhante agora é melhor. Fantástico. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. Vejo-te no próximo vídeo. 126. Materiais e texturas: Olá, todo mundo. Bem-vindo de volta a outro vídeo off thes seção neste vídeo. Vamos falar sobre texturas e materiais quando você estiver projetando um objeto de três D certeza você precisa de uma parte fiscal ou material. Como eu mencionei antes, você tem uma biblioteca bem no topo. Então vamos em frente e clicar nisso. E aqui você tem opções diferentes. Aqui temos coleções. Temos uma coleção de formas diferentes, como pode ver aqui, podemos usar essas formas como esta ou esta. E também temos outras opções, como ativos. Você tem muito fora de três ativos D e então nós temos materiais. Ok, então suponha que queremos mudar o material do nosso texto aqui. Ok, então aqui podemos escolher um desses materiais. Eu vou para este aqui para que você possa arrastar e soltá-lo em seu texto três d assim. Isso é muito legal, não é? É. Rende-o mais uma vez e você pode ver a diferença. Você pode ver o quão incrível Getty você pode facilmente mudar o material como você deseja. Então vamos mudar para outra coisa. Por exemplo, este Então você pode escolher o seu texto e clicar sobre isso. Perfeito. Ou é melhor criar outra forma. Aqui. Vamos criar um bloco aqui. Vou reduzi-lo. Vamos movê-lo. Você é perfeita. E então eu vou mudar seu material para outra coisa. Ok. Por exemplo, este é muito legal, não é? Você consegue reconhecer quantas possibilidades existem para você criar objetos incríveis lá ? Isso é fantástico. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. E vejo-te no próximo vídeo. 127. Como criar uma cena 3D: Olá, todo mundo. E bem-vindos de volta a outro vídeo desta seção. Neste vídeo, vamos começar a desenhar nosso 1º 3 D visto juntos. Então, o que é um três D? Visto como você pode imaginar, uma cena de três d é uma cena que consiste em diferentes três objetos D. Ok, então, por exemplo, aqui temos uma cena porque temos pelo menos dois elementos aqui. No entanto, vamos criar uma cena mais interessante juntos. Então, primeiro de tudo, vamos remover esses dois objetos muito bem. Vou manter o Shadow Plane certo, e não preciso mais da câmera. Então vamos remover isso. E depois disso, vou criar um texto. Então, vamos clicar em três texto D ali muito bom. E então eu vou mudar para você. Eu gosto disso e vamos definir essa cor, também. B 7 42 e duplo F como este bastante impressionante. E então eu vou duplicá-lo e vamos mudar sua posição. E vamos mudar para você. X como este. E depois disso eu vou mudar a cor para 36 46 em dobro. Se isso é muito incrível, esse Mizzou quer dizer e então eu vou girá-lo em 90 graus assim. Bastante incrível. E deixe-me movê-lo. Toe wars, o u eu texto assim, e mais uma vez, eu vou girá-lo assim. Parece que o U X está deitado em cima de você está bem, tudo bem. E então eu vou diminuir o tamanho de UX K por este cubo como este em. Vamos movê-lo para o lado esquerdo. Bastante incrível. E vamos mover isso para você. Levo um pouco para cima porque precisamos pegar aquela sombra. Se você se lembra, quando você está usando um plano de sombra, precisamos colocar objetos acima dele, a fim de obter uma sombra. Tudo bem, Fantástico. Então são os sapatos que você x aqui e filma para o lado esquerdo assim. Isso é fantástico. No entanto, eu vou fazer você x um pouco menor. Acho que agora é melhor. Bastante bom. E a próxima coisa que vou fazer é adicionar uma parede atrás disto. Ok, então vamos para a biblioteca e depois vamos para formas em ziguezague pela vitória. E aqui temos um canto errado. Então, vamos clicar sobre isso bem incrível. Vou diminuir o zoom porque precisamos ampliar esta parede. Então, aqui, certifique-se de que a parede está selecionada e usou este cubo para ampliá-lo. E esta Cuba também. Bastante incrível. Então o que eu vou fazer é mudar sua cor. Então vamos mudar sua cor para algo assim. Isso é muito bom. Vou fazer zoom e depois vou para a biblioteca. E desta vez vou abrir ambientes como este. E aqui temos diferentes tipos de ambientes. Então, por exemplo, podemos tentar este. Você pode arrastar e soltá-lo assim e vamos renderizar são vistos para ver como ele parece. Isso é ótimo. No entanto, vou mudá-lo para outra coisa como esta. Lembre-se que o ambiente que você escolher vai ter falsificado os reflexos e também sombras. OK, então certifique-se de escolher o melhor ambiente possível. Vamos tentar este também. Eu acho que é ótimo. Então isso é adicionar alguns três ativos D à nossa cena. Então vamos para a Seção de Ativos e aqui procurar livros e eu vou escolher este bem legal. Vamos ampliá-lo fantasticamente. E eu vou procurar outra coisa, por exemplo, uma xícara de bebida como esta. Vamos fazer um filme menor para o lado direito. Fantástico. E também podemos adicionar um donut. Então vamos procurar por “Não, não.” Podemos acrescentar, por exemplo, essa diversão. É um donut local. Vou torná-lo menor e colocá-lo ao lado da nossa xícara de bebida. Está bem, está bem. Como você pode ver, eles têm uma luz retangular. No entanto, eu vou adicionar outra luz são vistas. Então vamos procurar a luz direcional muito boa. Vou diminuir o zoom. Vamos movê-lo para o lado direito. Rodou um pouco. Acho que agora é melhor. Também podemos adicionar objetos diferentes são vistos, a fim de torná-lo mais profissional e também mais complexo. No entanto, para o bem deste curso, vou mantê-lo simples. Ou Ryan. Vamos renderizar são vistos para ver como ele parece. É muito bom, não é? Você também pode ir em frente e adicionar alguns objetos de coleções. Por exemplo, podemos ir em frente e abrir formas orgânicas, e aqui temos objetos diferentes como este que diminuem. Ou você poderia usar outros objetos, por exemplo, em torno de formas como este. Depende de você e do projeto em que você está trabalhando. Portanto, certifique-se de escolher grandes objetos, a fim de criar a melhor combinação possível. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. E no próximo vídeo, falaremos sobre renderização e exportação. Então, vejo você então. 128. Renderização e exportação: Olá, Ron. E bem-vindos de volta a outro vídeo desta seção neste vídeo. Vamos convencê-lo, tornando você visto como eu mencionei antes. Sempre que você estiver trabalhando em um projeto três d, você precisa renderizá-lo no final. Tudo bem, agora vou mostrar como você pode modificar as configurações de renderização e também como você pode usar a opção de visualizador e também como você pode exportar. Você está bem. Então, antes de fazer isso, vou fazer alguns ajustes no nosso plano sombra. Vamos selecionar nosso plano sombra, e eu vou mudar sua cor para algo assim. Vou escolher o seletor de cores. Tudo bem, agora vamos renderizar são vistos. É ótimo, não é? Tudo bem, para renderizar sua cena, você tem opções diferentes. Primeiro de tudo, vamos em frente e abrir o menu de renderização logo na parte superior. A primeira seção é como thes toggle. Ok, então você pode modificar a qualidade. Você pode definir muito baixo, médio ou alto, e ele pode matar. Você pode iniciar um amigo ou pré-visualizar assim. Você pode adicionar alguns efeitos através dele. Podemos mudar a situação. O contraste com o filtro de cor e também o equilíbrio de cores, etc. E por último, mas não menos importante, você pode exportar. Você é visto como uma imagem. No entanto, você precisa atualizar sua licença para obter essa funcionalidade, e então você pode clicar em baixo com a imagem. A próxima característica importante da vitória é o espectador. Ok, então quando você vai para a seção do visualizador, você tem diferentes opções aqui que você pode modificar como texturas cozimento. E estes são sobre luzes. E aqui você pode escolher a visão da câmera central, e isso significa que a visualização da câmera será centralizada no objeto selecionado atualmente. Ok, então se você selecionar seu olho, a visão da câmera será centrada neste objeto e a realidade aumentada está ligada, que é ótimo porque podemos obter uma realidade aumentada vista também. Então geramos nossa corte aqui e agora podemos clicar e gerar. Leva algum tempo, e está bem feito. E aqui você pode pegar o casaco. Como pode ver, você pode copiar e colar o código de quadro I. Você é uma vergonha e código, ou se você não está desenvolvendo seu site ou o aplicativo pode facilmente dar-lhe para o seu desenvolvedor e ele ou ela poderia usar isso perfeitamente. No entanto, se você quiser exibir para seus clientes com antecedência, você pode alterar o formato de um quadro de vergonha Ally para link, e você pode copiar este link para sua área de transferência e enviá-lo para seus clientes ou seu amigo. Então, primeiro de tudo, vamos verificar aqui. Lá vamos nós. Vai ficar assim. Não é ótimo? Podemos manter o comando e tão malvados. Isso é fantástico, não é? E se você abrir essa cena em seu telefone, podemos usar teatro, opção de realidade comentada em ordem como significou esta cena em seu ambiente, isso é muito incrível, então certifique-se de conferir. Você pode usar dispositivos Android e RUS para fazer isso, e isso é fantástico. A próxima opção é exportar, e aqui você pode exportar seu arquivo com qualquer formato que desejar. O B g d a ust Z, que é o formato de realidade aumentada para Rus etc. No entanto, para usar esse tipo de funcionalidade, você precisa obter uma licença estendida para isso. Tudo bem, pessoal, isso é tudo por esta seção. Espero que você goste deste vídeo e eu vou vê-lo no próximo vídeo 129. Ferramentas de protótipo: Oi, pessoal, bem-vindos de volta a outra seção fora. Ele marca nesta seção. Vamos falar sobre prototipagem, mas primeiro as coisas. Vou apresentar-lhe algumas das melhores ferramentas para prototipagem de seus projetos. Na verdade, você pode fazer um protótipo, estão usando esboço. No entanto, se você quiser fazer um protótipo extravagante e complexo, Eu recomendo que você use outros sites e aplicativos bem, se as melhores ferramentas de prototipagem Número um protótipo I, que é o meu aplicativo favorito como Bem, porque é tão fácil de trabalhar. E há uma versão de teste, e você pode experimentá-lo antes de comprar qualquer licença número dois Zeppelin número três Framer X e, em seguida, visualizar Studio Sketch e Morrow nesta seção. Nós vamos trabalhar com alguns fora deles, a fim de torná-lo familiarizado com o processo protótipos em cada aplicativo. Então, no próximo vídeo, vamos começar a prototipar um dos nossos projetos anteriores no esboço. Então vejo você que 130. Protótipo no esboço: Olá, todo mundo. Espero que esteja indo bem nesse vídeo. Vamos falar sobre prototipagem no esboço. Como eu mencionei antes, você não pode criar um esboço de prototipagem complexo. No entanto, às vezes você não precisa de um protótipo complexo. Então, nesse caso, você pode facilmente usar catch para prototipar seu projeto. Então, como você pode ver, eu vou protótipo nosso aplicativo financeiro que nós já projetamos. Deixe-me fazer zoom. E aqui temos uma página de boas-vindas, se você se lembra, e temos dois botões diferentes. Então, basicamente, quando o usuário clica no botão de assinatura, este sinal na página vai deslizar do lado direito, ok. E sempre que o usuário clica no botão de inscrição, a página de inscrição vai deslizar para dentro. Então o que vamos fazer é clicar no botão Entrar, como ele admite, selecionado agora. Em seguida, clique em Link na parte superior e Kelly Candies Art board como este. Como você pode ver, uma seta aparece imediatamente. E aqui você pode ver duas opções diferentes, os alvos e a animação. Ok, o alvo é a nossa tela de destino, que é neste caso são tela de assinatura e animação, por exemplo, aqui nós não temos arte para a animação. Então, se eu clicar na visualização e clicar e assinar, você pode ver que não há animação. No entanto, eu vou escolher deslizar do lado direito e mais uma vez pré-visto assinatura. Lá vamos nós. É incrível, não é? Então, precisamos criar outro link para o nosso botão de inscrição que museu para fora e clique na tela de inscrição. Bastante incrível. Mais uma vez visualize-o. Isso é fantástico. Então você pode ver como é fácil fazer protótipos no esboço? Mas você não pode esperar tantas funcionalidades neste tipo de prototipagem. Vamos em frente. E aqui eu vou adicionar um link para este botão completo e clique nesta página inicial muito incrível e pré-visualizado. Fantástico! Vou mudar o tipo de animação de baixo para cima assim. Isso é muito bom. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que você tenha gostado, e agora você pode começar a prototipar seu projeto facilmente no esboço. No entanto, lembre-se de que vamos trabalhar com prototipagem mais complexa nos seguintes vídeos. Então vejo-te depois 131. Protótipo no InVision Studio: Oi, todo mundo. Bem-vindos de volta a outro vídeo do curso. Nesta aula, você vai aprender a criar protótipos no InVision studio, uma das melhores aplicações na indústria de design. Primeiro de tudo, você pode baixar e instalar o estúdio envision no Mac OS e no Windows gratuitamente. Em segundo lugar, você precisa importar seu arquivo de esboço para o estúdio do envision. Para fazer isso, podemos facilmente clicar no estudo aberto seu botão de arquivo de esboço. Alternativamente, você pode escolher importação de arquivo e selecionar seu esboço. Tudo bem. Tudo bem, então agora precisamos importar nosso ano de descoberta de esboço. Então vamos em frente e importá-lo aqui. Lá vamos nós. Seu é nosso financiamento e projeto. Então aqui, eu vou mostrar a vocês algumas técnicas que você pode usar para prototipagem ou projeto. Lembre-se de que no vídeo anterior, começamos a prototipar esta página de boas-vindas e essas páginas de assinatura e inscrição no esboço. No entanto, foi tão simples, mas podemos fazer com que pareça melhor e mais profissional. Então o que eu vou fazer é selecionar esta página de boas-vindas. E como você pode ver, temos algumas formas comuns na página de boas-vindas e na página de assinatura. Ok, por exemplo, aqui temos o logotipo e esses círculos, e essas são as coisas comuns que temos aqui. Lembra-se? Isso é quando sua prototipagem no estúdio do envision você precisa ter certeza de que o nome da sua camada é o mesmo em ambas as telas. Por exemplo, aqui eu vou criar uma animação que quando o usuário clica neste botão de assinatura, os círculos se tornarão menores e serão colocados nesta posição e nesses elementos. Por exemplo, assinatura e estes impostos vão desaparecer. E aqui, nesta página de boas-vindas, esses dois botões vão desaparecer. Ok, então aqui, lembre-se de verificar o nome do seu Fuller. Por exemplo. Aqui temos formas e na tela de login, também são formas que é perfeito. Agora vamos escolher o botão de login e clique neste ícone para adicionar uma interação. E aqui você tem uma seta flutuante, e eu vou selecionar este sinal em nosso cordão. Entrevista com a loja imediatamente. Aqui temos algumas opções. Trigger, por exemplo, você quer que ele seja clique inteiro clique, clique duplo ou até mesmo toque buraco toque toque toque toque, touchdown, etc. Mas agora vamos escolher Click, e o destino será a nossa página de login. E aqui temos tempo de transição, predefinições ou movimento. Vou mudar para movimento. Aqui temos duas opções diferentes que podemos modificar a duração e o atraso. Vou definir o atraso para zero e a duração para 0,6 segundos e clicar em Salvar. Tudo bem, então agora é pré-visualizar o protótipo para ver o que está acontecendo aqui. Lá vamos nós. É a nossa página de boas-vindas e vou clicar em Sign Me. Isso é incrível, não é? Você viu o quão bonito essa animação waas? Com apenas dois cliques, poderíamos alcançar esse tipo de prototipagem, então vamos olhar para a página de boas-vindas novamente para conferir mais uma vez. Lá vamos nós. Isso é muito incrível. Espero que também goste. Agora é hora de adicionar um link para o nosso botão de inscrição, então vamos em frente e fazer Mt. Clique neste anúncio no botão de reação e escolha Inscrever-se quadro de arte novamente, movimento, e você não precisa mudar nada aqui. Clique e salve. Mais uma vez. Vamos pré-visualizar Fantástico. Isso é muito bom, não é? Se você olhar para o lado direito. Você pode ver aqui que na seção de interação você tem a opção de edição da linha do tempo. Então, vamos clicar nisso. E aqui você tem uma linha do tempo que você pode ver suas interações e sua animação em menor velocidade. Você pode ver como bonito e pequeno anos cinquenta isso é? Bastante incrível. Na verdade, há tantas coisas que você pode fazer no estúdio de invasão. No entanto, não podemos cobrir todos os recursos e todas as funcionalidades. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. E vejo-te no próximo vídeo. 132. Protótipo no InVision Studio parte 2: Olá, todo mundo. Bem-vindo de volta a outro vídeo deste curso neste vídeo. Vou te ensinar outra ótima técnica para prototipagem de seu projeto no estúdio InVision . Então, sem, para eu fazer, vamos começar no vídeo anterior. Como você se lembra, começamos nosso projeto com prototipagem. Esta página de boas-vindas. E adicionamos duas asas diferentes a estes dois botões. OK, agora vou mostrar-vos outra técnica, a fim de usá-la em seus projetos. Então vamos em frente. E como podem ver aqui, temos duas transações diferentes. Página, o primeiro 1 é chamado de Transações, eo segundo é chamado de transações Detalhe. Então o que vamos fazer é prototipar o cartão de transação. Ok, então sempre que o usuário arrastá-lo para baixo, vai ser assim em detalhes de transações. E, claro, sempre que o usuário o mover para cima, vai ser como o quadro de arte do. Como eu mencionei antes, quando vamos protótipo de um componente específico em duas placas de arte diferentes, precisamos ter certeza de que seu nome é o mesmo que você pode ver. Aqui temos cartão de transação e nestes quadros de arte, temos cartão de transação também. Certo, até agora, é perfeito. No entanto, o único problema que temos é que nessas transações são pobres. Não temos estes elementos. Nós não temos esses títulos e esses cartões. Então, se você começar a prototipar, esses dois são poros como eles são agora. Quando o usuário arrastá-lo para baixo, esses elementos vão desaparecer. Certo, não é o que queremos, então vamos tentar para mostrar e te dar uma visão clara. Primeiro de tudo, vou selecionar este cartão de transação e clicar em cuecas e interação ou, digamos, adicionar um link. Em seguida, clique sobre estes quadros de arte e aqui no gatilho, Eu vou escolher bebeu para baixo como este nós podemos salvar, e é pré-visualizações estão certos. Agora vamos experimentá-lo. Como você pode ver esses elementos desaparecendo imediatamente, e isso não é o que queremos. Então, a melhor maneira de corrigir esse problema é simplesmente ir em frente e selecionar esses elementos. Todos eles copiam e colam na tela dessas transações. Então vamos colá-los aqui, e eu vou mover essas pastas para baixo e colocá-las bem abaixo do nosso cartão de transações assim Então agora é verificar novamente. E como você pode ver, funciona perfeitamente. No entanto, você precisa se certificar de criar outro link para deslizar para cima. OK, então vamos em frente e dizer, como essas transações detalhe quadro arte. E aqui eu vou selecionar o cartão de transação Anglican at Interaction Button e desta vez que selecionar nossas transações não valem a pena. E agora eu vou selecionar arrastar para cima e salvar. Isso foi pré-visualizado mais uma vez. E como você pode ver, funciona perfeitamente. Vou mencionar outra coisa aqui. Como você pode ver, temos muitos diferentes nossos portos aqui, então precisamos encontrar uma maneira de especificar quais são porta é o nosso ponto de partida. Então, para fazer isso, você pode facilmente ir em frente e clicar sobre estes ícone home bem ali. E desta forma, InVision Studio sabe que nosso ponto de partida ou digamos que nossa tela inicial são essas transações. Ok, você pode mudar quando quiser. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. Vejo-te no próximo vídeo. 133. Esboça um aplicativo: Oi, todo mundo. E bem-vindos de volta a outro vídeo deste curso neste vídeo, vamos falar de marcações. Criar marcações é uma tarefa importante para você como designer de UX, porque não importa quão incrível e quão criativo seus projetos são, se você não poderia apresentá-lo de uma maneira ótima, ele não pode impressionar os outros e até mesmo seus clientes ou seu chefe. Então neste vídeo, eu vou mostrar a vocês como você pode criar e marcar no esboço. Como você pode ver aqui, temos nosso aplicativo financeiro que projetamos juntos. E eu vou mostrar a vocês como você pode criar uma simulação para esse projeto. Hoje em dia. Há tantos recursos há lá fora que você pode usar de graça ou pago, e eu vou mostrar-lhe como você pode ter acesso a eles. Deixe-me abrir o site do Google e aqui eu vou olhar para iPhone X s marca e esboço . Ok, aqui você tem muitas fontes. Por exemplo, aqui temos acesso iPhone e acesso iPhone Max recurso é, e nestes sites, fontes ketchup, você pode descobrir tantos grande recurso é E como você pode ver, esses modelos ou esta simulação foi projetado por esta pessoa ou esta conta, Eu não tenho certeza que você pode verificar sua conta para fora no Dribble Teacher ou seu site. Primeiro de tudo, vou mostrar-lhe como você pode usá-lo. Isso está acontecendo, recurso antigo é, e então eu vou abri-lo no esboço estão certos. Fantástico. Como você pode ver, temos excesso de iPhone em excesso. O Max. Eu vou ir em frente e copiou a placa de arte iPhone excesso riel. Vamos copiá-lo e colar. Está no nosso projeto aqui. E se você abrir a pasta de corpo, você pode ver que há uma tela cheia aqui e uma camada de tela. Então, a fim de colocar sua tela dentro deste telefone, você pode facilmente exportar sua placa de arte para incenso. Vamos escolher este, e aqui eu vou exportá-lo, estão certos, estão certos, e agora você pode selecionar esta camada de tela, e aqui na sensação de imagem pode escolher sua imagem ou, digamos, nossa tela e Está feito. Isso foi muito rápido e incrível, não foi? É fantástico. Você também pode modificar este modelo ou este iPhone como você deseja, e há outros. O recurso também está. Então deixa-me mostrar-te. Há um site muito bom para encontrar marcações, e é chamado de gráficos? Lá vamos nós. E aqui você pode olhar para simulações dispositivo sob abundância de recursos gratuitos e pagos está aqui que você pode usar. Você também pode ir para simulações livres e ferramentas para encontrar recurso livre está aqui. Lá vamos nós. Temos livre iPhone X são marcação, por exemplo, ou este também. Você pode baixá-lo gratuitamente e usá-lo como você deseja está certo, pessoal, muito obrigado por assistir este vídeo. Espero que tenha gostado. E vejo-te no próximo vídeo. Então vejo você que 134. Como usar o aplicativo How usar o esbo?: Olá, todo mundo. E bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre o aplicativo espelho de esboço para Android e nossos EUA. Na verdade, sempre que terminar seu processo de design, você pode visualizar facilmente suas telas. Ou digamos que você é nossos poros em seu telefone instantaneamente, e isso é incrível. Então, para fazer isso primeiro, você precisa instalar o aplicativo espelho de esboço no seu telefone e, em seguida, você precisa se conectar ao mesmo WiFi que o seu computador é. E depois disso, quando você abrir seu aplicativo de esboço Muir, você pode clicar e esta notificação logo ali e você pode clicar. Conecte o nome do telefone, e isso é tudo. Em seguida, você pode visualizar facilmente suas telas em seu telefone instantaneamente e qualquer coisa que você mudar em seus quadros de arte. Ele será alterado instantaneamente e imediatamente no seu telefone, que é um recurso incrível. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. Eu vou te ver no próximo vídeo 135. Como criar seu próprio portfólio online?: Oi, todo mundo. Nesses vídeos, vamos falar sobre o portfólio online. Você como um você é designer de UX, absolutamente precisa de um portfólio on-line para mostrar suas habilidades e habilidades de design. É extremamente essencial ter um portfólio excepcional para que você consiga um bom emprego, seja como designer em tempo integral ou freelancer. Então, como você pode criar seu próprio portfólio on-line sem escrever uma única linha de código? Para fazer isso, você pode usar sites como Dribble ou Be Hands, que são projetados para designers, e quase todos os empregadores precisam verificar seu perfil em um. Fora desses sites, Be Hands é uma plataforma online para mostrar e descobrir trabalhos criativos. É propriedade da Adobe e pode criar um ótimo portfólio usando o seu gratuitamente. Alternativamente, você pode usar rebelde para mostrar seu trabalho artístico, e ele automaticamente cria um portfólio on-line para você. Você também pode personalizar seu portfólio como desejar, mas você precisa manter algo em sua mente. Para usar serviços rebeldes gratuitamente, você precisa ser convidado por outros designers. Caso contrário, você pode paróquias. A assinatura premium 136. Como usar o Dribbble? ?: Oi, todo mundo. Nesses vídeos, vamos falar sobre como você pode usar baboseira para usar serviços direcionados. Primeiro, você precisa ter uma conta. Depois de criar sua conta, você pode procurar outros designers, arte para se inspirar. Ou você pode fazer upload de sua própria arte criativa a cada mês. Você pode fazer upload de até 48 tiros, e seus tiros devem atender às diretrizes dos ossos DRI. Você pode carregar imagens de alta resolução que PNG J pic e GIF formato e também GIFs animados para o seu perfil. Além disso, se você é um membro profissional, você também pode carregar vídeos. Depois de aplaudir seu trabalho artístico, você pode definir um título para ele. Você também pode adicionar tanques relativos para permitir que outros usuários encontrem sua arte mais fácil. Por último, mas não menos importante, você deve escrever uma breve descrição para a sua foto, e então você pode publicá-la imediatamente ou no futuro. 137. Como usar o Behance?: Oi, todo mundo. Neste vídeo, vamos falar sobre como você pode usar as mãos como usar drible. Para usar os serviços Behan, você precisa ter uma conta primeiro. Em seguida, você pode navegar e conferir outras obras de arte de designers ou criar seu próprio projeto. A principal diferença entre DRI Bell e B mãos é a proporção de seus tiros ou projetos em drible. Você não pode carregar fotos verticais como uma página de destino completamente. No entanto, ao ser mãos, você pode carregar imagens com qualquer proporção. Para mostrar sua arte, eu recomendo usar tanto ser mãos e rebelde ao mesmo tempo e tentar usar suas características únicas para apresentar seu design perfeitamente. Behan's também permite que você carregue suas imagens e vídeos de alta qualidade em um único projeto, o que é um ótimo recurso para apresentar um produto interativo em nenhum momento. 138. Como obter seu primeiro cliente?: Oi, todo mundo. E bem-vindo de volta a outra seção deste curso neste vídeo. Vamos falar sobre ideias de negócios e como você pode obter seu primeiro cliente e começar seu próprio negócio. Como designer de unidades, você pode estar se perguntando como você pode obter seu primeiro cliente. Bem, espero que haja muitas maneiras de começar. A primeira etapa de encontrar clientes é ter um portfólio forte. Se você ainda não assistiu a seção de portfólio, sugiro que você assista a seção de portfólio deste curso. Depois de criar seu portfólio, você precisa se perguntar que tipo de saltos você gosta de ter. Você quer trabalhar como designer em tempo integral ou quer trabalhar como freelancer? Se você quer trabalhar como um tempo integral, você é um designer. Você precisa preparar seu currículo e se inscrever para a empresa que você deseja trabalhar. Por outro lado, se você quiser trabalhar como freelancer, você pode se registrar em alguns sites freelancing e encontrar seu primeiro cliente é muito. Há tantos sites lá fora que você pode trabalhar com, Por exemplo, freelancer dot com fiver até trabalho 99 projetos. Três Bell, etc. Portanto, certifique-se de verificá-los e descobrir qual é a opção mais adequada para você. 139. Como começar seu próprio negócio?: Olá, todos. Espero que esteja indo bem nesse vídeo. Vamos falar sobre como você pode começar seu próprio negócio. Começar um negócio é difícil, então você precisa determinar o nível de sua motivação antes de entrar nesse processo. Quando você está pensando em começar um negócio, você deve saber que leva muito tempo, energia e pacientes para alcançar seus objetivos. Se você está ciente de todos esses aspectos, você está pronto para dar o próximo passo. Em primeiro lugar, você deve avaliar seu nível de habilidades e descobrir que tipo de serviços você gosta de oferecer . Então você precisa descobrir quem são seus potenciais clientes. Além disso, você deve trabalhar em seus preços e analisar seus números. Em segundo lugar, você precisa registrar sua própria empresa. este respeito, recomendo obter alguns conselhos de um advogado e certificando-se de que você entende todos os requisitos legais associados ao registro de uma empresa. Depois de registrar sua empresa, você precisa começar a criar sua própria marca, projetar um logotipo para sua empresa e escolher seus colares de marca. Por último, mas não menos importante, você deve definitivamente projetar seu próprio site porque é a parte mais crucial do seu negócio. Agora que você tem seu site pronto, é hora de pensar sobre sua estratégia de marketing. Se você não pudesse oferecer seus serviços e habilidades para as pessoas certas, seu negócio não seria bem sucedido, importa o quão profissional e útil suas habilidades são, então certifique-se de que você tem um ótimo plano de marketing e executá-lo com precisão. 140. Como dimensionar seu negócio?: Oi, todo mundo. Espero que esteja indo bem nesse vídeo. Nós vamos falar sobre como você pode escalar seu negócio. Agora que você está dirigindo seu próprio negócio, você pode estar se perguntando como você pode dimensionar seu negócio ou, em outras palavras, como você pode aumentar drasticamente a receita de seu negócio. Quando se trata de negócios on-line. A maioria dos empresários geralmente se concentra em uma região geográfica por causa da simplicidade. É uma ótima ideia para começar sua jornada. No entanto, não é suficiente para desenvolver um negócio lucrativo. Então, como você pode imaginar, a melhor solução é expandir suas opções globais e obter clientes de todo o mundo. O próximo passo é tentar automatizar seus processos manuais, o que pode evitar desperdiçar seu tempo porque não importa quantos clientes você tem, há apenas 24 horas por dia. Podemos utilizar o site de buffer para gerenciar suas mídias sociais automaticamente, e também há uma abundância de outras ferramentas para lembrar seus clientes sobre, sua fatura diz em nenhum momento. Portanto, você não precisa gastar tanto tempo nessas tarefas que podem ser delegadas e feitas automaticamente. Em vez disso, você deve se concentrar no seu conteúdo e no resultado de cada projeto 141. Communicating com seu cliente: Oi, todo mundo. Nestes vídeos, vamos falar sobre comunicar clientes de vídeo. A comunicação eficiente com os clientes desempenha um papel fundamental em qualquer tipo de negócio. E para os designers, não há exceções. A maneira como você interage com seus clientes é muito importante. Se você quer ser um empreendedor de sucesso, como você deve lidar com a situação se algo der errado? Bem, em qualquer tipo de negócio, há alturas em que algo dá errado e é normal. No entanto, a maneira como você enfrenta essas dificuldades, é muito importante. Suponha que você defina um prazo para entregar o projeto final ao cliente e, no meio do processo de design, você entenda que pode demorar mais tempo. Bem, neste caso, unidade, informe seu cliente sobre isso o mais rápido possível e tente encontrar uma boa solução que funcione para ambos. 142. Contrato: Oi, todo mundo. Neste vídeo, vamos falar de contratos como qualquer outro negócio. Você deve ter um local de contratação adequado para iniciar um projeto, não importa quão grande ou quão pequeno esse projeto é. Ter um contrato mantém tudo claro e protege ambas as partes escreve o que deve ser incluído no acordo. A coisa mais importante que você precisa adicionar ao contrato é a declaração de seus serviços de forma clara. E às vezes também, é ainda melhor mencionar o que você não vai fazer para os clientes. Certifique-se de mencionar o prazo para entrega do projeto e também sobre o cronograma de pagamento . Lembre-se que o contrato não deve ser apenas sobre as coisas que podem dar errado. É melhor se concentrar no que deve ser feito corretamente. Em geral, é uma boa idéia obter aconselhamento jurídico de um advogado com antecedência 143. Onde encontrar inspiração do curso mundial?: Oi, pessoal Neste vídeo, vamos falar sobre inspiração e recurso está sendo inspirado por outros designers é absolutamente bom e importante. No entanto, você precisa ter certeza de que você não copia seus trabalhos. Se você está interessado em seus projetos e você mentiria para usar partes deles em seu projeto, você precisa pedir permissão primeiro. Como você deve se lembrar, falamos sobre ser mãos e driblar nas seções anteriores dos resultados. Estes dois sites são os lugares mais populares para encontrar inspiração artística. Há tantos sites e páginas do Instagram que você pode se referir como uma fonte de inspiração. Você também pode mostrar aos seus clientes o que você tem como inspiração para saber quais são suas expectativas. 144. Recursos de imagem: Olá, todo mundo. Neste vídeo, vamos falar de fontes de imagens. Temos Designers trabalhar muito com imagens. Pode ser qualquer tipo de imagens na forma de perfis, produtos, etc. Portanto, ter recursos eficientes é absolutamente essencial para obter as imagens mais apropriadas para nossos projetos. Há tantos sites que oferecem uma variedade de imagens, Alguns deles são pagos e alguns deles são gratuitos. No entanto, se você está procurando imagens livres de royalties para usar em seus projetos sem qualquer dúvida sobre sua licença, eu sugiro que você use cinzas unspool que vêm. É um dos melhores sites para encontrar praticamente qualquer tipo de imagens em diferentes categorias. Lembre-se de que você deve se certificar sobre o licenciamento de imagens que deseja usar, caso contrário você pode estar em apuros. 145. Qual é o próximo passo?: mais alto arruinado neste vídeo, vamos estar falando sobre o próximo passo como um designer Yuan UX. Agora que você aprendeu muito sobre design de interface de usuário, é hora de dar o próximo passo. Agora você está pronto para começar a projetar incrível mais enquanto APS e sites. Como designer, você deve sempre ser criativo, Então tente desafiar-se a si mesmo todos os dias para descobrir segredos escondidos de design jovem UX . Você provavelmente deve ter ouvido que a prática faz perfeito, mas lembre-se que seu design nem sempre deve ser perfeito. A única coisa que importa é a sua progressão e melhorias. Então eu acho que é uma boa idéia mudar essa frase famosa para a prática progredir. E com isso dito, você deve se tornar uma pessoa melhor renunciar a cada dia. Por último, mas não menos importante, eu deveria agradecer por assistir a estes tutorial. Foi uma longa viagem para nós dois, e espero que tenham gostado. Desejo-lhe boa sorte, e mal posso esperar para ver suas palavras de arte