Design de IU no Photoshop — comece uma carreira de design de IU

1. Sobre o que é esse curso?: Olá e bem-vindo ao meu curso sobre Photoshop e design de interface do usuário. Desde os últimos oito anos, tenho trabalhado como designer de interface do usuário e enfrentei muitos problemas. Então eu pensei que eu deveria criar algo que pode trazer iniciantes e novatos para esta carreira de design de interface do usuário. Então eu criei este curso sobre design de interface do usuário no Photoshop. Ele ensinará desde o básico até todas as extensões, truques, dicas, atalhos e todas as ferramentas que os designers de interface do usuário usam em sua rotina diária. Vamos ver o que há dentro deste curso. Começaremos nosso curso configurando as preferências do Photoshop para melhor desempenho e velocidade. Especificamente, vamos configurar o Photoshop para design de interface do usuário. Em seguida, vamos dominar as notas e guias e como prepará-los instantaneamente com o uso de poucas extensões e plug-ins. Em seguida, você dominará estilos de camada do Photoshop como Sombras, Afectos de traçado, inserção e efeito pressionado. Então vamos cobrir todos esses estilos de camada profundamente para que você entenda como criar os efeitos de luz e sombra e todas essas coisas. Depois, há uma seção incrível solicitações de estudantes sobre elementos de design do painel. Nós vamos projetar todos esses gráficos de linha impressionantes olhando, gráficos escuros, gráficos de barras. Nós também estamos indo para criar um realmente impressionante olhando desenhos de cabeçalho ou áreas de cabeçalho herói. Isso realmente importa quando você está projetando seu site. Esta é a primeira impressão em qualquer visitante do site. Você também vai aprender sobre o design do aplicativo iOS. Nós estamos indo para projetar uma tela do iOS 6 app. Nós também vamos criar este formulário pop-up de login, que você saiba como projetar os campos de entrada e tudo mais. Então temos uma ótima seção sobre wireframes, como criar wireframes, quais são as ferramentas necessárias para criar wireframes? Eu vou te dar o desafio final para projetar um site baseado neste wireframe. Agora vou mostrar a vocês em um instante o que meus alunos criaram e projetaram até agora, vocês saibam qual é o progresso que este curso está fazendo. Aqui está o trabalho da minha aluna, Betty. Ela projetou esse tema da Shopify e ele está realmente ótimo. Então ela criou isto depois de ver o meu curso. Você pode ver por aqui, muito bom tema, muito elegante, muito elegante. Então temos este. Isto é baseado na maquete que dei aos meus alunos. Isto foi desenhado pela minha aluna Antonella Spagnoli. Você pode ver aqui diferentes seções, nossos serviços. Este é outro trabalho dos meus alunos. Então você pode ver aqui, este é outro de Saqib Ameen, meu aluno. Você pode ver como ele colocou para fora tudo realmente agradável. É baseado no último wireframe que lhes dei para o desafio. Você pode ver aqui, aqui estão os poucos cabeçalhos criados pelos meus alunos. Você pode ver aqui de uma forma que é hora de colaborar e fazer ideias. Então este de Darryl Haynesworth. Em seguida, aqui estão algumas telas de aplicativos iOS. As ideias que tive dos meus alunos, este é um trabalho do aluno, Darryl Haynesworth. Então isto é do Neil. Este é também outro exercício que ele fez. Estas são as grandes coisas que os meus alunos estão a fazer. Se você quiser participar como um estudante, você é mais do que bem-vindo. Este curso é igualmente bom para iniciantes, bem como para especialistas. Mesmo que você esteja projetando dos últimos oito anos ou seis anos, você realmente vai gostar das dicas e truques que eu compartilhei neste curso. Você vai adorar as extensões e scripts populares que compartilhei neste curso. Então não perca este curso. Confira o currículo e vamos ver você nesse curso. 2. Vamos configurar o Photoshop CC2017 para design de UI: Primeiro, precisamos configurar nossas Preferências do Photoshop para melhor desempenho e responsabilidade e bom fluxo de trabalho. Vamos configurar Preferências do Photoshop indo para este menu Editar e, em seguida, indo para Preferências e Geral. Você também pode usar a tecla de atalho Control K ou Command K. Agora, a primeira coisa que você verá é este. Não temos muito o que pular aqui ou configurar aqui. Se você quiser, você pode clicar neste ou desmarcar este: Mostrar espaço de trabalho “Iniciar” quando nenhum documento estiver aberto ou mostra “Arquivos recentes”. Isto é o que ele vai mostrar a este. Sempre que você iniciar seu Photoshop, você verá algo assim. Estes são basicamente arquivos recentes por aqui. Agora, movendo-se para a interface. Interface, nós vamos selecionar esse tema de cor, o que você gosta, se você gosta deste, este mais escuro, depende de você. Agora, a principal coisa que vamos configurar aqui é que esta tela cheia e para pranchetas, não precisamos de nenhuma linha ou sombra. Então eu apenas defini para nenhum, ambos. Então, neste tamanho de fonte de interface do usuário, precisamos do tamanho de fonte grande aqui. Não mexa com outras coisas por aqui. Tudo o resto é apenas padrão e deixá-lo assim. Neste painel do espaço de trabalho, vamos definir algumas coisas, como documentos abertos como guias. Eu vi nas versões mais recentes do Photoshop como 2017 ou 2015, que este está desmarcado. Ao instalar o Photoshop, você verá suas guias abertas em diferentes janelas. Certifique-se de verificar este em Guias Grandes. Essas duas opções estão marcadas. Agora, neste Painel de Ferramentas, não temos muito para selecionar. Se você quiser desmarcar, você deve desmarcar este zoom animado. Isso só vai colocar alguma pressão na sua placa gráfica. Ignore este HistoryLog. Nós não precisamos dele. Manipulação de arquivos Agora, na manipulação de arquivos, precisamos ter certeza de que nossos arquivos estão sendo salvos em segundo plano e ele está configurado para salvar após cada cinco minutos. Então defina para cinco minutos. Em seguida, nesta maximizar a compatibilidade de arquivos PSD e PSB, escolha “Sempre”. Nos arquivos recentes, certifique-se de que não são mais de 10 arquivos ou cinco arquivos, porque se você aumentar esse número, ele colocará mais uso de RAM e tornará o Photoshop mais lento. Agora, nestas configurações de Exportação, exportação é basicamente quando você precisa exportar rapidamente seus arquivos PNG ou seus gráficos, configurá-lo para PNG e certifique-se de que a transparência está definida aqui. Normalmente não recomendo converter para sRGB, então deixe. Agora, nesse desempenho, você precisa definir seu uso de RAM para quase 70%. Eu tenho quase 16 GB de RAM, então eu defini como 9-10 GB para este Photoshop. Em seguida, a partir deste histórico e cache, eles adicionaram recentemente este design da web e da interface do usuário. Você precisa selecionar este, deixar isso como está, e a partir desta área, Configurações do processador gráfico, você precisa usar este Usar processador gráfico. Eu realmente recomendo que nas versões mais recentes do Photoshop, você deve ter alguma boa placa gráfica instalada como NVIDIA GeForce, Eu tenho este NVIDIA GeForce GT 710, e tem dois GB de RAM. Então você precisa verificar este aqui. Ele vai melhorar o seu desempenho photoshops muito. Agora, movendo-se para este Scratch Disks, então este é basicamente o lugar onde photoshops salva seus arquivos temporários. Certifique-se de que não é uma das unidades do sistema. Selecione qualquer outra unidade e, em seguida, desmarque a unidade do sistema como o meu sistema está na unidade C, então eu vou selecionar E ou G ou H, ou qualquer outra pessoa. Agora, chegando a esta área de Unidades, aqui, precisamos definir que nossas réguas estão em pixels porque estaremos projetando tudo em pixels. tipo deve ser pixels ou pontos, ambos são bons o suficiente. Agora, na configuração de grades e guias, primeira coisa é que suas guias e grades devem ser coloridas separadamente, como guias de tela são em cor ciano, pranchetas são azul claro. prancheta inativa também é azul claro e as guias inteligentes são basicamente de cor verde. Também suas fatias são de cor magenta. Agora, chegando em direção à grade, sua grade deve estar sempre em números pares, e deve ser divisível por números pares. Então eu defini para 64 pixels e quatro subdivisões. É basicamente, esta é a minha grande caixa de uma grade e será dividida em quatro caixas menores. Foi assim que montei a minha rede. Você pode configurá-lo para 32 pixels ou 16 pixels, o que quiser. Agora aqui estão nossas extensões e plug-ins seções. Certifique-se de que você habilitou esta opção Ativar Gerador, Ativar Conexão Remota. Escolha um nome de serviço ou defina sua senha aqui, e deixe esta assim e use alguma senha aqui. Agora, você deve ter verificado esses painéis de extensão de carga e permitir que as extensões se conectem à Internet. Às vezes, muitos alunos me perguntam que minhas extensões não estão carregando e não estão aparecendo. Você precisa desmarcar e marcar isso uma ou duas vezes e reiniciar o Photoshop. Acho que isto vai funcionar. Portanto, certifique-se de ativar gerador e essas duas opções estão marcadas. Agora, na seção Tipo das preferências, vamos procurar essas duas configurações. Um deles é o número de fontes presentes a serem exibidas. Certifica-te de que são cinco ou sete. Eu tenho apenas aumentar o número para sete porque eu não quero pesquisar as fontes novamente e novamente, que eu usei recentemente. Então este Show Font Names English, certifique-se de que este está marcado. Ativar alternâncias de glifo de camada de tipo, certifique-se de que este está marcado. Basicamente, você precisa verificar tudo isso. Estas são todas as configurações e preferências para Photoshop mais recente versão CC 2017, e eu acho que estes funcionarão para versões mais antigas também, e não há muita diferença, mas eu acho que eles adicionaram mais algumas coisas nas versões mais recentes. Então vamos passar para a próxima lição. 3. Como configurar atalhos de teclado personalizados no Photoshop: Hoje, vamos configurar atalhos personalizados do Photoshop. Agora, o que os atalhos personalizados fazem é que, como designer de interface do usuário que usa determinados fluxos de trabalho e determinados elementos ou ferramentas do Photoshop de vez em quando, e não precisamos de outros. O que vamos fazer é definir atalhos personalizados para as coisas que precisamos fazer rapidamente enquanto estamos projetando para aplicativos web ou móveis. Agora vamos para uma edição. Para definir essas preferências, vamos para Editar e, em seguida, atalhos de teclado. Aqui temos o menu de atalho do teclado. Há poucas coisas que precisamos montar aqui. Agora, primeiro nós vamos para esta edição e nós vamos para baixo para a pesquisa. Este é um recurso muito novo no Photoshop CC 2017. Por padrão, não há nenhuma tecla de atalho para ele. O que vamos fazer é pressionar o Controle F ou o Comando F, e vamos pressionar Enter. Isto vai adicionar uma tecla de atalho aqui. Esta é a nossa primeira tecla de atalho. Agora, a segunda etapa é que vamos configurar algumas teclas de atalho personalizadas neste painel Camada. Nós vamos expandir este, e você precisa encontrar esta Camada Renomear. Depois de ter encontrado isso, agora F1 é normalmente para a ajuda do Photoshop, mas normalmente não usamos a tecla de função 1, então eu a defini como F1 como uma Camada de Renomeação. Eu posso renomear rapidamente minha camada, apenas pressionando F1, e isso me levou, renomear minha camada. Esta é uma tecla de atalho e a segunda está na seção onde temos objetos inteligentes. Vá para este Convert to Smart Object e eu defini como Alt F5. Você pode usar qualquer um que você gosta, opção F5 ou o que quiser. Mas certifique-se de lembrar estes tudo o que você sabe que eles são fáceis de lembrar. Se você configurar estes e você esquecê-los, então vai ser uma dor de cabeça. Agora, no menu Camadas, você precisa encontrar isso, Alinhar Camadas à Seleção. Precisamos definir dois atalhos para esses centros verticais e centros horizontais. Você pode configurá-lo o que quiser, mas eu defini para Alt Control V ou Opção Command V, para vertical, apenas para lembrar que é centros verticais. Em seguida, para Alt Control H para centros horizontais. Estas são algumas configurações que precisamos neste painel Camada, Teclas de atalho Camadas. Agora precisamos ir para esta Janela. Expanda este painel Janela e precisamos definir a tecla de atalho para este Tile tudo Verticamente Alt Control F10. Nós realmente precisamos muito disso. Estas são todas as teclas de atalho que vamos configurar no nosso Photoshop. Há mais algumas opções que podem vir a calhar e eu preciso explicá-las agora. Agora você pode ver aqui dois botões como você pode ver aqui. Isto é para salvar todas essas teclas de atalho em um conjunto. Se você quiser salvar as teclas de atalho em um novo conjunto, você deseja criar um novo conjunto, conjunto separado de atalhos. Você pode definir, Guarde isso aqui. Se você quiser resumir todas as teclas de atalho, se você clicar aqui, ele irá gerar um arquivo HTML. Se você tentar salvá-lo aqui na área de trabalho, assim. Você pode ver que ele pode gerar todas as teclas de atalho arquivo HTML. Você pode verificar esses arquivos HTML e aprender todos os atalhos que você definiu. Esta é apenas outra maneira de aprender esses atalhos. Existem mais algumas coisas como Atalhos para: Menus de Aplicativos. Você pode ir até aqui, definir os menus do painel também. Você pode ver aqui Cor, pincéis, todas as ferramentas que você precisa acessar aqui. Se você quiser definir teclas de atalho para eles, você pode definir aqui. Além disso, você pode definir as teclas de atalho para Ferramentas. Então Tools estão aqui. No lado esquerdo, você pode ver Lasso Tool, Polygon Lasso, eles têm L, e então temos W, W, C, C, C, C. Estas são todas as teclas de atalho que você pode configurar no Photoshop. Vamos passar para a próxima lição. 4. Como instalar scripts no Photoshop: Agora, nesta lição, vou falar sobre como estender recursos do Photoshop ou como adicionar novas funções ao Photoshop, que atualmente não estão presentes no Photoshop. Há duas maneiras de fazer isso. Um deles é que você pode instalar scripts personalizados feitos por diferentes profissionais e programadores. A segunda é que podemos instalar o Photoshop Extensions criado por programadores. Eles também usam os mesmos scripts, mas eles podem ser acessados através de painéis. Nesta lição, vamos instalar Scripts Personalizados do Photoshop usando meu PC. Se você estiver em um Mac, precisará ver a próxima lição para encontrar o caminho e onde você instalará os Scripts do Photoshop em um Mac. Então vamos começar. Primeiro, o que vamos fazer é mostrar-lhes o site, um script aqui. Então este é um script expandindo objetos inteligentes por esse cara Kamile. O que ele faz, na verdade expande os Objetos Inteligentes criados pelo Photoshop, que no Photoshop não é possível reverter para a pasta normal ou um grupo ou camadas depois de criar Objetos Inteligentes. Se você não sabe sobre Objetos Inteligentes, não se incomode. Haverá uma palestra à frente nas próximas seções sobre Objetos Inteligentes. No momento, você precisa saber que esse recurso não está presente no Photoshop. O que vamos fazer, vamos baixar este script aqui. Scripts são basicamente no formato JSX JS. Você pode ver no final do formato JSX ou JS. Estes são basicamente arquivos JavaScript e nós vamos baixá-lo. Salve o arquivo. Agora, baixamos o script personalizado Expandir objetos inteligentes. Nós vamos copiá-lo e vamos instalá-lo dentro da pasta Instalação do Photoshop. Vou fechar o Photoshop agora mesmo. Certifique-se de fechar o Photoshop ao instalá-lo, pois ele não será exibido. Você precisa reiniciar o Photoshop para atualizar a pasta Scripts. Vou fechá-la. Vou clicar com o botão direito do mouse e ir para Propriedades e Abrir Localização do Arquivo. Então, basicamente, o que estamos fazendo é que vamos para a pasta Presets Photoshop na instalação do Photoshop. Você pode ver aqui, existem diferentes pastas, plugins, recursos predefinidos. Precisamos encontrar essa pasta presets. Clique duas vezes e vamos encontrar pasta Scripts dentro dele, Scripts. Aqui está. Você pode ver uma vez que eu tenha aberto a pasta de script, há um monte de scripts, mas esses scripts são os scripts padrão que vieram junto com a instalação do Photoshop. Esses são todos scripts e scripts automatizados de gerenciamento de tarefas que são fornecidos com o Photoshop. Vou criar uma nova pasta aqui, Meus scripts, algo assim, e vou colá-la aqui. Agora vamos reiniciar nosso Photoshop novamente para ver como temos esse script atualizado aqui. Agora vá para o arquivo e vá para scripts e você pode ver aqui nós temos um novo script aqui, KAM Expandir SmartObjects. Vamos testá-lo. Vamos criar um novo documento de qualquer tamanho. Criei um documento muito pequeno. Por enquanto, apenas um exemplo, vou criar algumas camadas aqui. Ok, então segundo, vamos torná-lo um pouco menor do que este. Tenho duas camadas. Vou criar um objeto inteligente a partir desses dois. Agora este é um objeto inteligente e não há nenhuma maneira que eu possa recuperar minhas duas camadas. Eu vou selecionar essa camada e eu vou para Arquivo, Scripts, e eu vou para KAM Expandir SmartObjects usando este script. Uma vez que eu clique nisso, ele vai executar algumas ações e você pode ver aqui, aqui está a pasta e ele me deu ambas as camadas de volta. Então esta é uma maneira de estender recursos do Photoshop que não estão presentes no Photoshop, você pode adicionar novas funções, novas funcionalidades, há muitos scripts escritos por programadores ou usuários do Photoshop. Há mais uma coisa que você pode fazer com esses scripts, você pode definir teclas de atalho personalizadas do Photoshop para isso. Vamos para Editar, Atalhos de Teclado e Arquivo. Então precisamos ir ao Scripts. Onde estão os roteiros? Nós temos os scripts e você pode ver que este é o nosso Expandir Objeto Inteligente. Eu vou dar-lhe uma chave de Control Shift E. Então ele vai me dar que ele já está atribuído camada mesclagem, então algo como isso, Alt Control, Alt F4, Alt opção de comando F4 no seu Mac. Mas agora estou mostrando como configurar atalhos de teclado. Da próxima vez que vamos usá-lo, vamos apenas pressionar Alt Control F4 para expandir nosso Objeto Inteligente. Isto é tudo sobre Scripts Personalizados, como instalá-los e como definir teclas de atalho para eles. Vamos passar para a próxima lição. 5. Como instalar scripts do Photoshop no MAC: Nesta lição, vou mostrar-lhe como ir para a pasta Predefinição e instalar scripts usando o Mac OS. Vá para Ir e vamos para Aplicativos e clique duas vezes neste ícone do Photoshop. Você pode ver que existem diferentes pastas como Plug-ins, Predefinição. Agora estamos interessados nesta pasta Presets. Clique duas vezes nele e você pode ver que você tem um monte de pastas. Agora, se você quiser ir para instalar alguns scripts, você pode clicar em s e você pode ir para os scripts. Você pode colar seus scripts aqui e é assim que instalamos scripts no Mac OS. Agora, há muitos arquivos de predefinições do Photoshop, como ações. Temos ações diferentes. Você pode instalar ações aqui. Se você pode encontrá-los on-line, então você pode ter gradiente diferente aqui, instalar gradientes diferentes. Então temos clientes diferentes. Você pode ter clientes aqui. Em diferentes lições, mostrei coisas diferentes para instalar. Isso é basicamente como você vai encontrar a pasta Preset do Photoshop para instalar diferentes tipos de coisas, como estilos, uvas, padrões e formas, formas personalizadas, às vezes ícones, eles vêm com formas personalizadas, arquivo csh do Photoshop. Você pode copiar o arquivo csh aqui e usar essas formas personalizadas no fluxo de trabalho do Photoshop. Este é o problema que muitos estudantes estavam tendo. Você também pode ver amostras de cores aqui. Se você tem suas amostras de cores personalizadas e você salvou, ele estaria aqui. Se você quiser trazer alguma amostra personalizada aqui, você pode copiá-la e colá-la aqui. É assim que instalamos diferentes predefinições no Photoshop usando o Mac OS. Se você tiver alguma dúvida, por favor me avise. Eu serei capaz de criar mais desses vídeos para usuários do Mac OS. Vamos avançar e seguir em frente para as próximas lições. 6. Extensões no Photoshop para designers para UI: Hoje, vou lhe dar o maior segredo do Photoshop e design de interface do usuário, que são extensões do Photoshop. Agora, muitos designers de interface do usuário não dependem totalmente apenas dos recursos do Photoshop, mas estendem seus recursos do Photoshop usando extensões e script do Photoshop. Hoje, vamos falar sobre extensões do Photoshop. Agora, existem muitas centenas de extensões do Photoshop, mas vou mostrar algumas delas que realmente ajudam no design da interface do usuário e realmente aceleram nosso fluxo de trabalho e não podemos viver sem elas. Há poucos que são muito bons em extensões gratuitas do Photoshop. Então temos extensões premium. Eu comprei muito como talvez cerca de 10 diferentes extensões premium do Photoshop e vou mostrar-lhe ambos. Cabe a você se você vai comprá-lo ou não. Vamos primeiro ver alguns da troca gratuita do Photoshop. O primeiro que eu vou mostrar a vocês é esta extensão do Photoshop, que é basicamente gerador de usuários aleatórios que é baseado neste mecanismo de site randomuser.me. Por agora, na versão mais recente do Photoshop, CC 2017, não está funcionando. Eu postei o autor deste plug-in, o problema de que ele não está funcionando, eu não sei quando eles vão atualizá-lo. Mas este é o problema com extensões livres, então elas não são basicamente gerenciadas muito bem. Agora, sua alternativa é este UberFaces, e eu também tenho este. É apenas $5. É basicamente premium e também é baseado no site gerador de usuários aleatórios ou motor, mas tem mais algumas capacidades. Você pode ler sobre isso aqui, uberplugins.cc. O que ele realmente faz é que eu vou mostrar a vocês o poder desses plug-ins e extensões na próxima lição. Vou mostrar-lhe alguns dos plug-ins que estou usando e como eles podem ser úteis no design da interface do usuário. Então temos este Font Awesome PS que pode facilmente trazer qualquer ícone para o Photoshop. Então você pode ver aqui que você precisa baixá-lo a partir daqui. Está disponível para Mac e Windows, ambos. Agora, mais alguns. Isso se chama Griddify. Este é outro painel do Photoshop e é uma extensão muito legal. Ele pode realmente desenhar diferentes guias e grades rapidamente e muito rapidamente. Então este é um deles, este também é gratuito. Então temos o Oven. Isso é basicamente para exportar ativos do Photoshop em tamanhos diferentes. Este também é um deles que eu às vezes uso, mesmo que a versão mais recente do Photoshop tenha seu próprio mecanismo de exportação, então não precisamos tanto, mas você pode olhar para ele. Então temos essa tinta para gerar especificações diferentes quando entregamos nossos arquivos de web design ou nossos arquivos de design de aplicativo móvel para os desenvolvedores. Eles precisam saber os tamanhos, então a altura e a largura, qual elemento é qual tem o tamanho ou que tamanho esse elemento tem. Então este é basicamente o plug-in. Isso vai ajudar, e isso é basicamente plug-in gratuito. Outro que uso é esse Markly. É muito maravilhoso, realmente fácil de usar, e um monte de empresas como Microsoft, Disneyland, eles estão usando isso. Eu também estou usando, eu sou um deles. É basicamente um plugin premium e é $50 agora. Então estes são também para gerar especificações para desenvolvimento web e entregá-lo aos desenvolvedores. Então este também é grátis, Fontea. Ele gerencia todas as fontes do Google e pode ter um monte de recursos. Ainda não o usei, mas acho que pode tentar. Ele tem todos os formulários do Google nele e pode facilmente gerenciar e você pode aplicar diferentes fontes no texto facilmente. Então este, Craft , tem muitas, você pode dizer diferentes funcionalidades. É um plugin com quatro ou cinco subseções diferentes e é realmente ótimo, mas ele só funciona no Mac. Então isso é um pouco inconveniente. Funciona para o Mac. Se você tem Photoshop e Mac, então você está com sorte, você pode usá-lo. Então temos outro que é também para criar guias. Este é um plugin premium. Eu realmente amo se você pode comprá-lo por US $10, eu acho que você deve comprá-lo. Este é um dos melhores que já vi para usar guias e criar grades. Então este é ColorKit e é basicamente você gerenciar cores no Photoshop vinculadas a diferentes camadas nos elementos de design do Photoshop. Por exemplo, se você quiser alterar a cor de dois ou três elementos ao mesmo tempo, você pode fazê-lo com isso. Então você pode conferir. Vou dar os links para todos esses plugins, então não se preocupe com isso. Então estamos nos movendo para outro grande site que tem um monte de plugins premium. Comprei muito deles. Então um é CSS Hat 2, eu realmente recomendo isso. Se você é um desenvolvedor front-end, você é um codificador, você pode codificar em HTML, você realmente precisa disso. Então eu também tenho este PNG Express. Então eu já tenho este Guia e este Mockup de Perspectiva. Muitos deles eu não estou usando agora. Social Kit Pro também é um deles. Ele pode criar gráficos sociais como avatares do Facebook e diferentes tamanhos e modelos de mídia social facilmente dentro do Photoshop em apenas alguns cliques. Então este é o ColorKit, eu já tenho este Fontea. Padrões sutis. Ele pode obter um monte de padrões excelentes, sutis, padrões muito leves no Photoshop com apenas um clique. Então estes são muitos plugins diferentes. Você pode todos experimentá-los se você é um desenvolvedor iOS ou você projetar para iOS e Apple muito, você precisa deste plugin. Então temos UberFaces, UberColumn, UberFrames. Há toneladas de plugins diferentes do Photoshop. Você pode experimentá-los e você pode comprá-los se quiser, então há um último recurso que eu quero compartilhar com você é este pspanels.com. Ele tem um monte de plugins a cada dia, ele é atualizado. Se você quiser se manter atualizado, você pode enviar um e-mail, inscrever-se aqui. Não é o meu site. Então ele mostra muitos plugins e painéis do Photoshop diferentes, até mesmo alguns deles trabalharam com o Adobe Illustrator. Poucos deles são livres, como você pode ver aqui. Então estes são realmente ótimos, você pode experimentá-los. Vou compartilhar os links com todos esses plugins e extensões nas fontes desta palestra. Então, verifique-os. Agora, na próxima palestra, eu vou mostrar a vocês o poder de todos esses plugins em ação. Então vamos passar para a próxima lição. 7. Poder das extensões no Photoshop: Agora deixe-me mostrar-lhe alguns dos superpoderes desses plugins do Photoshop. Agora, este é um arquivo de amostra. Esta palestra é apenas para demonstração de que estes plugins podem ser usados desta forma. Então eu vou mostrar a vocês alguns dos usos dos plugins que eu tenho. Eu expandi este painel aqui. Tenho Kit de Cores, FontAwesome, Tinta, PNG Express, QuickGuide, Griddify, GuideGuide, Padrões Sutis, UberFaces e Visualização de Dispositivos. Vamos começar com este Kit de Cores. O que ele faz, basicamente salva as cores desses elementos em grupos, assim, você pode ver aqui. Se eu quiser mudar a cor deste como este, e eu escolher alguma outra cor, você pode ver que ele vai atualizar ambos os botões ou aqueles ovais ao mesmo tempo. Você pode ver aqui, isso é muito útil. Eu posso atualizar o esquema de cores de vários elementos ao mesmo tempo com muita velocidade e até mesmo eu posso mudar todo o esquema de cores de todo o site ou web design ou um documento inteiro. Este é o poder deste Kit de Cores. Tem este projeto de amostra. Você cria um projeto e no projeto você vincula diferentes camadas com isso. Se eu vincular essa camada com isso, você pode ver que ela muda a cor dessa camada. Se eu mudar a cor para uma cor escura como essa, você pode ver todos esses três, esses dois ovais e isso mudou. Isso é muito útil, muito poderoso, mas é um plugin premium. Você pode comprá-lo. Então temos Fontawesome. O que ele faz, ele pode trazer todos os ícones diferentes para isso. Eu posso dizer flecha. Você pode ver aqui que existem diferentes tipos de setas. Agora é a flecha e é uma forma. Você pode expandi-lo assim. Então você pode expandi-lo, você pode mudar sua cor assim. Você pode ver que isso é muito poderoso, muito fácil, e é muito bom para os desenvolvedores também. Em seguida, vindo para este Ink, Ink e este Markly. Tenho aquele Markly aqui. Vamos abri-lo. Esse Markly. Estes dois são basicamente para desenvolver nossas especificações de design. O que isso significa? Se eu vou selecionar este retângulo e eu vou mostrar suas medidas, você pode ver em apenas um momento. Agora tem 97 pixels de altura e 802 pixels de largura. Meus desenvolvedores, eles precisam saber como eles estão indo para produzir este elemento de design em HTML. Em web design, desenvolvimento web, eles precisam de tamanhos exatos. Isto é o que lhes vai dar. Então deixe-me mostrar-lhe como ele vai dar os detalhes deste. Vou clicar neste ícone aqui, botão. Você pode ver que ele mostra nome, super poder, opacidade um, e o nome da fonte, Museosans-300, estilo é 300. Estes são todos os detalhes dos valores CSS, como cores RGBA, e um monte de coisas que os desenvolvedores precisam dos designers. Agora vou apagar esta pasta aqui. Então deixe-me mostrar-lhe o poder do outro plugin, que é basicamente este Markly e é um plugin premium, então eu vou importar o documento nele. Agora o documento foi importado neste plugin Markly, e você pode ver aqui, se eu apenas clicar aqui, você pode ver que ele está me mostrando os tamanhos neste. Vamos apagar isto. Vou apagar todas as coisas por aqui. Vamos excluir as informações em torno de todas essas camadas rapidamente. Agora, por que este é premium e o outro não é, porque você pode apenas clicar duas vezes sobre isso e você pode exibir todas as coisas aqui. Apenas clicando assim. É muito rápido e muito fácil. Você pode ver aqui eu posso apenas continuar clicando e eu posso mostrar tudo por aqui, como é posição, x, posição y e um monte de outras informações. É muito fácil, muito rápido. Mesmo se você clicar duas vezes nisso, você pode ver aqui que ele está mostrando todas as informações da fonte apenas clicando duas vezes em qualquer elemento. Esta é uma maneira muito legal, muito rápida de gerar especificações de desenvolvedores. Em seguida, chegando a este PNG Express, ele adiciona diferentes tags a esses botões e esses diferentes elementos ou grupos, e precisamos deles para exportar para PNG Express. No momento, o Photoshop tem uma exportação muito boa como sobreposição e tem uma ferramenta muito boa. Ele pode exportar para vários formatos de diferentes tamanhos. Não precisamos muito desse PNG Express. Então este aqui, QuickGuide e Griddify. Agora o que o QuickGuide vai fazer é que ele vai rapidamente gerar guias em torno desta camada. Você pode ver aqui, estes são todos os guias que foram gerados em torno deste quadrado em apenas um clique. Então, se eu quiser algo assim, talvez no meio e assim, eu posso clicar nesses dois e gerar os guias no meio disso. Então, se eu quiser colocar algo no meio, eu sei que este é o meio deste círculo. Ele também pode bloquear esta camada rapidamente e ocultar esta camada, ocultar as guias. Bloqueie as guias, esconda o guia e mostre as guias aqui. Agora, vamos usar Griddify. Griddify, podemos dividir todo o documento em diferentes seções usando guias e grades. É muito bom na concepção de uma grade em torno do nosso design. Vou selecionar isto. Eu fiz a seleção, e eu vou dividi-la em quatro seções, verticalmente assim, e também horizontalmente, horizontalmente e verticalmente. Então eu dividi este assim. Se eu colocar o espaçamento zero e embrulhá-lo, você pode ver aqui que ele está me dando em torno disso. Está embrulhando isso com guias diferentes como aquele. Você pode ver aqui, eu preparei todo um sistema de grade aqui. Isto é muito fixe. Então temos este GuideGuide. O que este GuideGuide vai fazer é que ele pode gerar qualquer sistema de grade em apenas alguns segundos. Eu vou gerar oito colunas sistema de grade aqui, e ele vai gerá-lo em apenas segundos como esse. Você pode ver aqui, estes são os estofos. Você vai aprender mais sobre como usar esta grade nos exercícios e lições posteriores. Então não se preocupe com isso. Estou apenas mostrando o uso desses plugins e como eles podem ajudar e acelerar nosso fluxo de trabalho. Agora vou limpar os guias aqui. Agora há mais um, isto é chamado de padrões sutis. Eu mostrei como isso pode trazer muitos padrões ótimos no Photoshop com apenas um clique. Vou anexar um padrão sutil com este fundo. Então vamos começar com esses padrões sutis. Tenho papéis, escribas, parede, coisas diferentes por aqui. Eu vou verificar este e você pode vê-lo aplicado isso como uma sobreposição padrão aqui. Posso ter um efeito de papel aqui com este fundo. Vou deletar agora mesmo. Então esta é outra maneira. Então temos esse UberFaces. Isto é muito fixe. Vou te mostrar como isso vai te surpreender. Um, dois, três, vai. Você pode ver que gerou quatro avatares nesses quatro eclipses em apenas um clique. Então economizou uns 30 ou 40 segundos ou talvez dois minutos fora do seu trabalho. Vamos voltar e é assim que usamos este plugin. Você pode gerar mulheres, homens, e você pode apenas clicar nisso e ele está indo a máscara em todas essas formas. Então este Device Preview, Eu não posso mostrá-lo agora, mas é basicamente para conectar e gerenciar sua área de design Photoshop em seu aplicativo iPhone. Então, como você vai fazer é que você vai usar essas conexões remotas aqui. Você pode ver aqui nestas preferências. Este nome de serviço e esta senha e este endereço IP. Estas são as três coisas que você vai usar. Mostrei como conectar isso no meu segundo curso, Typography for UI Designers, que é um pouco avançado. Nesta lição, eu acho que eu não vou mostrar a vocês, mas você pode facilmente obtê-lo. Se quiseres seguir o meu outro curso, és mais do que bem-vindo. Esses são todos os superpoderes dessas extensões de design de interface do usuário do Photoshop. Eu acho que você realmente gostou desta lição. Então vamos passar para a próxima lição. 8. Como instalar extensões no Photoshop: Agora, vou mostrar as maneiras de instalar diferentes extensões do Photoshop. Existem dois ou três tipos diferentes de extensões do Photoshop e seus arquivos basicamente que você precisa instalar estão em formatos diferentes. Então eu vou mostrar a vocês diferentes formatos. Além disso, Se você tem versão Photoshop que é como 2014 CC ou abaixo 2014, então você precisa induzir Photoshop Adobe Extension Manager que você precisa baixar a partir do site da Adobe. Se você tiver a versão mais recente do Photoshop, CC 2017 ou CC 2015 ou 15.5, precisará usar um software chamado ZXPInstaller. Eu vou mostrar a você percorrer todas as coisas e diferentes problemas que você pode enfrentar durante o estilo desses plug-ins ou extensões. Deixe-me mostrar primeiro o Adobe Extension Manager. É assim que parece. Se você estiver indo para instalar qualquer coisa, você precisa instalar a extensão, clique aqui, e você precisa encontrar o arquivo com a extensão. Você pode ver aqui, ZXP. Ele só vai abrir arquivos ZXP e vai funcionar com Photoshop version CC 2014 ou abaixo. Para CC 2015 e acima, você não precisa deste software. Você pode até desinstalá-lo se não precisar dele. Agora, deixe-me mostrar diferentes formatos de arquivo que você verá durante a instalação das extensões do Photoshop. O primeiro tipo que vou mostrar é este, ZXP. O ícone será parecido com este. Esta é a extensão PNG Express.zXP. Você pode ver aqui no caminho da pasta, é para CC 2014. Agora, se você tem CC 2015 ou o mais recente, então você vai ver algo mais próximo a isso. Este é o ColorKit 1.5. Agora, o que você está indo para ver é que você está indo para ver algo como isso, arquivo installer.jsx. Agora, o que você vai fazer é a maioria dos plug-ins como eu vou mostrar mais um, guideguide.ps. Então, isso novamente tem installer.jsx. Normalmente, o que você faz é arrastar e soltar o arquivo do instalador neste Photoshop e ele vai executar e instalar o plug-in do Photoshop e você precisa reiniciar o Photoshop novamente, e é isso. Agora, eu já tenho instalação guiada. Se eu clicar aqui, você pode ver que ele me deu algum erro. Agora, o segundo método é que, se não funcionar, então você precisa ir para “Arquivo”, e ir para “Scripts”, e depois “Procurar”, e então você precisa encontrar esse arquivo de script, arquivo instalador, e você precisa executá-lo a partir daqui. Você pode ver aqui, ele executa arquivos JSX, JS, JSXBIN. O que você vai fazer é executar esse mesmo arquivo no menu Arquivo do Photoshop. Vá para este “Arquivo”, “Scripts” e “Procurar” através desse arquivo de script de instaladores, selecione esse arquivo de script do instalador e carregue-o. Ele vai instalar essa extensão no Photoshop. Agora, vou mostrar o terceiro método de instalação manual das extensões do Photoshop. Às vezes, se seus arquivos de script ou qualquer coisa, eles bagunçam ou você precisa instalar extensões do Photoshop manualmente, então você precisa fazer isso com esse método. Na maioria das vezes, você precisa ler o manual de instruções da empresa de plug-in se eles tiverem algo parecido com isso. Então você pode ver aqui para Mac OS, eles disseram que copiar pasta MarklyPS para aplicativos e para Photoshop CC 2015 plugins e gerador. Para CC 2017, eles deram o mesmo caminho aqui, você pode ver com ele. Uma pasta que você vai obter para este caminho. Há basicamente dois caminhos por aqui: um, este, e o segundo é este. Suporte a aplicativos de biblioteca, Adobe, CEP e Extensões. Às vezes, se você não encontrar essa pasta CEP, precisará criá-la você mesmo. Estes são dois caminhos para o Mac OS. A maioria dos plugins, você instala manualmente, ou você precisa copiar isso para esta pasta, aqueles ou este. Estas são as duas partes que você precisa ter em mente. Vou compartilhar o link para este guia de instalação para que você possa ver a si mesmo. Em seguida, para o Windows, você também tem esses dois caminhos. Você pode ver aqui, Windows 32, se você tem 32 bits, e se você tem o Windows de 64 bits, então você precisa ir para este caminho, Plug-ins e Generator. Depois, há um outro caminho que é este C, Arquivos de Programas, X86, Arquivos Comuns, Adobe, CEP e Extensões. Vou compartilhar este documento, então você precisa conhecer esses dois caminhos para instalar esses plug-ins e todas as extensões que você precisa instalar no Photoshop. Se você tiver alguma dúvida ou não tiver sua extensão do Photoshop instalada, se precisar da minha ajuda, você pode me perguntar a qualquer momento. Se você tem sistema operacional Mac, há mais duas palestras à frente onde eu vou mostrar-lhe como instalar usando ZXPInstaller. Você precisa ver as próximas palestras para outro método que é basicamente ZXPInstaller. Ele pode instalar arquivos ZXP até mesmo nas versões mais recentes como 2015 e 2017, que geralmente não suportam arquivos ZXPInstaller. Isso é tudo sobre a instalação de extensões do Photoshop. Vamos passar para a próxima lição. 9. Como instalar extensões usando o using Photoshop CC2017: Olá a todos. Eu vi alguns alunos com problemas instalar suas extensões do Photoshop CC 2015, que são basicamente extensões ZXP. Então eu pensei em fazer outra palestra para ajudá-los porque eu acho que outros alunos podem estar tendo o mesmo problema. Aqui está a solução. Número 1. Primeiro de tudo, você tem que baixar este ZXPInstaller para Windows ou se você está no OS X baixar esta versão. Vá para este zxpinstaller.com e baixe este instalador. O problema basicamente é a versão mais recente do Photoshop, que é CC 2015, eu já descrevi que esta versão não suporta extensão ZXP. Se você deseja instalar extensões ZXP no Photoshop CC 2015, siga estas três etapas. Número 1, baixe este ZXPInstaller de zxpinstaller.com, então vou mostrar-lhe as extensões que você vai instalar com a ajuda deste. Baixe este e, em seguida, instale-o e você terá algo assim, ZXPInstaller. Vai abrir esta janela. Instale este e você terá esta janela e você pode simplesmente arrastar seu arquivo ZXP aqui e ele será instalado. Você pode clicar aqui para selecionar o arquivo, seja na área de trabalho ou onde quer que esteja. Vou para minha pasta de extensões e agora vou arrastar esse arquivo Griddify beta 3 ZXP aqui e está instalando minha extensão. Certifique-se de encerrar o Photoshop antes de instalar isso pois ele pode ter alguns problemas. Desligue o Photoshop antes de instalar qualquer extensão. Além disso, esta extensão que é basicamente guia rápido, você pode ver aqui. quickguide.zxp, vou extraí-lo. É um arquivo zip, clique duas vezes. Eu também vou arrastar este aqui. Todas as suas extensões que estão terminando com este arquivo.zxp, você tem que instalá-los usando este Adobe ZXPInstaller. Não é basicamente da empresa Adobe, é feito com a ajuda dessas duas empresas, Creative DO e GuideGuide. Eles criaram esta pequena ferramenta para instalar a instalação do ZXP na versão mais recente do Photoshop, CC 2015. Para instalar todas as extensões ZXP, você pode usar esta pequena ferramenta e eu incluirei seu link em um arquivo PDF. Alguns alunos que também estão reclamando sobre links de arquivos PDF. Basicamente, porque eu estou fornecendo links, porque esses softwares ou esses plug-ins, eles continuam se atualizando. Sempre que você precisar usar a versão mais atualizada, você tem que ir para o URL porque minha versão pode não ser atualizada. Se eu enviá-lo para o Dropbox ou algo assim, então você pode ter problemas para instalá-lo porque ele pode não ser a versão mais recente. Se você realmente deseja instalar a versão mais recente como este ZXPInstaller, ele foi atualizado. Deixa-me mostrar-te o último que tive. O último era algo assim. Você pode ver que o ícone era diferente. Agora, eles atualizaram este quinto número, o último que baixei foi em julho. Além disso, o tamanho é diferente. É 45.298 KB e este 45.464 KB. Eles realmente atualizaram este. Isto faz sentido. Se eu estiver lhe dando o link para que você baixe a versão mais recente. Eu não tenho que me preocupar que meus alunos estão recebendo as versões antigas de qualquer extensão ou ferramenta. Isso é tudo sobre como usar o ZXPInstaller para instalar extensões do Photoshop. Agora, eu vou executar o Photoshop. Certifique-se de que, ao instalar esta extensão, o Photoshop não está no modo de trabalho, você precisa desligá-lo. Deixe-me dar um tempo para carregar. Primeiro, baixe esta extensão e, em seguida, instale-a. Estes são poucos passos. Clique neste e o instalador continuará a instalar esta pequena ferramenta. Uma vez instalado, então você pode ir em frente e instalar todas essas três extensões muito boas do Photoshop. Este é o Font Awesome. Basicamente, Creative DO são os que criaram este ZXPInstaller. É uma ferramenta muito útil. Baixe o ZXPInstaller e instale isso para incrível extensão Photoshop, Guia Rápido e Griddify. Vou atualizar ou criar um novo vídeo sobre como usar o Griddify na minha seção de dicas profissionais, que está em breve. Então fique atento. Espero que você tenha gostado desta palestra e você será capaz instalar extensões do Photoshop ZXP depois de assistir a este vídeo. Obrigado e vejo você na próxima palestra. 10. Como instalar as extensões no Photoshop no MAC: Muitos dos meus alunos têm me perguntado como instalar a extensão no Photoshop ao usar o Mac OS. Então este vídeo é especificamente a pedido dos alunos. Vou mostrar-lhe a pasta, como você está indo para localizar essa pasta, onde extensão será instalada, se você estiver indo para instalá-los manualmente. Há duas maneiras de instalá-los manualmente ou você pode usar este ZXPInstaller. Este é um instalador de extensão da Adobe de código aberto. Você precisa baixar esta versão do OS X. Eu já baixei, você pode vê-lo aqui. Vamos instalar isto. Enquanto isso, vou mostrar onde será a pasta da nossa pasta principal de instalação da extensão do Photoshop. Vamos à frente para aquela pasta. Agora, primeiro vamos para o nosso computador, depois o nosso drive principal, este é o meu drive. Vá para esta unidade principal e, em seguida, vá para esta biblioteca, em seguida, este Application Support, e, em seguida, Adobe e a pasta é este, CEP, Se você clicar duas vezes nele, você pode ver aqui a pasta de extensões. Agora, sempre que você tentar instalar qualquer extensão manualmente, você vai copiar seu conteúdo aqui, nesta pasta Extensões. Então, vamos voltar e repetir mais uma vez, Biblioteca, Suporte a aplicativos, Adobe e CEP. Então temos essas extensões. Este é o caminho onde todas as extensões residem, mesmo que você as instale automaticamente, elas ainda estarão aqui. Vamos encontrar e baixar extensão Griddify para Mac. Você pode ver que eles mostraram que baixar e instalar ZXPInstaller. Vamos baixar esse Griddify. Vamos baixar esta extensão Griddify, aqui temos. Então vamos executar nosso aplicativo ZXPInstaller e vamos arrastar este arquivo ZXP para isso. Vamos ver, ele vai instalá-lo. Enquanto isso, vamos fechar o aplicativo Photoshop. Vamos sair dele. Saia do Photoshop CC. Vou introduzir a minha palavra-passe. Agora ele me mostrou que sua extensão foi instalada com sucesso. Não sei por que muitos usuários e meus alunos têm problemas para instalar isso. Agora vamos executar o nosso Photoshop. Então eu vou colá-lo aqui e vamos executar este Photoshop CC. Se eu abrir um novo arquivo, vamos ver. Vamos abrir um novo arquivo, qualquer arquivo agora. Agora estou fora deste cartão 3D porque é Windows VMware. Então eu vou mostrar a vocês as extensões aqui nós temos clique em Griddify, e você pode ver que ele vai carregar por aqui. Agora temos o Griddify aqui, vamos tentar. Controle A, vou selecionar tudo. Comando A, isso é interessante. Comando A, e dividiremos isso em cinco divisões verticalmente. Então dividir, Temos nosso Griddify funcionando perfeitamente. Então eu não sei por que muitos alunos estão tendo problemas para instalá-lo. Deixe-me mostrar-lhe onde está agora. Se você não conseguir instalá-lo com o ZXPInstaller, você pode ir para este arquivo. Copie esta pasta, Griddify, copie-a, e nós vamos colá-la o método manual, que é que nós vamos para esta pasta novamente, extensões e você pode ver aqui já temos Griddify porque instalado perfeitamente. Mas se você é incapaz de instalá-lo de alguma forma e você está muito frustrado basta colar sua pasta Griddify aqui e reiniciar o Photoshop e tudo ficará bem novamente. É assim que instalamos extensões no Photoshop e é assim que localizamos a pasta de extensão do Photoshop em um Mac OS. Espero que você tenha gostado deste exercício, porque eu estava tendo um monte de usuários de Mac pedidos que eles são incapazes de encontrar este local de redefinições Mac e pasta de extensão Macs, então fique atento e deixe-me saber se você tiver algum problema. 11. Configurar painéis e espaço de trabalho para design de Ude: Hoje vamos configurar painéis do Photoshop. Nós só precisamos das ferramentas que realmente precisamos durante nosso processo de design de interface do usuário. Só precisamos de camadas, cores e poucos plugins. As coisas extras vamos removê-los de nossos painéis do Photoshop e da interface do Photoshop. Vamos começar. Vamos abrir qualquer arquivo. Desviem esta área, criem qualquer arquivo. Agora, quando você executar o Photoshop pela primeira vez, você verá algo assim, que é basicamente essencial aqui. Então seus painéis, todas as configurações do painel são salvas aqui. Neste momento, estamos no essencial. Se você mudar para 3D, as ferramentas serão deslocadas para a configuração 3D e, em seguida, gráficos e web, assim, e movimento, pintura e fotografia, assim por diante e assim por diante. Agora, primeiro vamos começar com estes gráficos e web. O que vamos fazer é criar um novo espaço de trabalho aqui assim. Vou chamá-lo de nova interface do usuário. Também vamos usar esses atalhos de teclado e tudo mais. Salvar. Agora o que vamos fazer é precisamos de nossas amostras aqui, então vamos mover isso acima disso no topo, assim. Então camadas e amostras. Não precisamos de cores, então vamos fechá-la, clicar com o botão direito e fechar assim. Amostras e aqui estas são as duas coisas mais importantes. Agora nesta área, precisamos de alguns painéis ou plugins carregados aqui. Vamos para janela e extensões e vamos carregar nossa extensão GuideGuide. Vou mostrar todos esses plugins nas próximas lições, então não se preocupe com isso. Então vamos usar este guia rápido. Seja qual for o plug-in que você está indo para usar, principalmente vamos usar guias relacionados plugins e este plugin fonte impressionante, este é um livre. Este Guia Rápido também é gratuito. Este GuideGuide é pago um. Agora só precisamos Griddify, GuideGuide e Font Awesome. Vamos clicar neste “Griddify”. Agora precisamos de tudo isso. Então vamos carregar mais algumas coisas como estilos de personagem ou personagens assim. Nós também vamos movê-lo assim dentro desta área. Vou reconectá-lo assim. Temos esse personagem aqui, então também precisamos do painel de informações aqui. Nós também vamos movê-lo para o topo, painel de informações assim. Então também precisamos desses estilos de parágrafo e parágrafo, se você quiser, então vamos mover este parágrafo com isso. Talvez movê-lo para dentro deste. Estilos de parágrafo e caractere são duas guias relacionadas entre si. Em seguida, também precisamos talvez painel Propriedades, por isso vamos usá-lo novamente e novamente, painel Propriedades talvez movê-lo acima deste plugins, talvez mover este plug-in na parte inferior, assim Propriedades e painéis Info. Então podemos usar esses estilos, então vamos trazê-los aqui, assim com amostras. Estilos são basicamente estilos de camada como sombras, sua cor é, gradientes, etc Nós podemos salvar nossos estilos de botão aqui e vamos usá-los novamente e novamente também com as cores. Eu também vou usar esta camada Comps aqui. Eu vou fechar Bibliotecas e eu acho que estas são a maioria das ferramentas que vamos usar, parágrafo, configurações de parágrafo e configurações de caracteres. Há mais alguma coisa que precisamos aqui? Às vezes podemos precisar dessas ações, então talvez possamos carregá-las aqui. Mova essas ações para baixo deste painel Informações assim. É assim que vamos configurar nossa interface do Photoshop. Agora temos amostras, estilos e depois camadas e mais uma coisa que vamos adicionar aqui é Caminhos, então vamos procurar Caminhos. Assim e vamos combiná-los com camadas. Quase estamos todos prontos. Precisamos de mais algumas coisas como governantes aqui. Você pode ver por aqui. Se você for ver e então Rulers, Controle R. Precisamos de governantes aqui porque vamos arrastar e soltar algumas diretrizes assim. Isto é só daqui e colocar os nossos elementos aqui. Você pode ver aqui agora ele está posicionado em alguns pixels aqui, você pode ver quando eu movê-lo, ele mostra 33 pixels, 52, 67, algo assim. Podemos colocar nossos objetos de acordo com essas diretrizes assim. Precisamos da nossa configuração de régua. Também precisamos ver que esta ferramenta Snap está marcada, Ajustar às Guias, Camadas, não comentar sobre Fatias e Grades. Além disso, vamos para este Show e certifique-se de que estes Guias, Guia de Canvas, Guias inteligentes e grade de pixels, todos estes estão verificados. Isso é tudo o que precisaremos em nosso processo de design de interface do usuário. Talvez possamos precisar de mais alguns plug-ins que você pode encontrar nas próximas lições. Você pode ir em frente e instalá-los. É isso. Salvamos nossos painéis neste novo espaço de trabalho do painel de interface do usuário. Neste momento, temos amostras, estilos, Camadas, Camadas e alguns plug-ins, propriedades e estilos de caracteres, e poucas coisas de parágrafo carregadas aqui. Se você quiser fazer alguma pergunta, me pergunte, se você não é capaz de movê-los ou algo assim, talvez você precise praticá-lo. Você pode ver aqui como ele se separou de seu painel. Isso é tudo sobre painéis, configuração de painéis do Photoshop. Agora estamos usando um e o segundo é basicamente minimizado. Se quiser expandi-lo, pode expandi-lo aqui assim. Gosto dele minimizado porque temos mais espaço de trabalho aqui. Se quiser expandi-lo assim, pode expandi-lo aqui. Você pode ver todos os meus plugins e tudo está carregado aqui e você pode ir em frente e acessar os outros abaixo assim. Mas eu gosto daqui assim porque eu não preciso acessar vários painéis desta área ao mesmo tempo. Isso é tudo sobre painéis, vamos passar para a próxima lição. 12. O que é a calibração de cores?: Hoje, vamos falar sobre a calibração de cores. Isto é, basicamente, para calibrar as cores do monitor ou LCD ou LED para cores padrão. Quando você compra qualquer dispositivo, seja um LED ou qualquer monitor, as cores não são padronizadas. Eles podem mostrar uma tonalidade de cor vermelha ou verde ou azul. Além disso, eles podem não mostrar todos os brancos e negros com precisão. Depois, há esta calibração de cores. Existem dois tipos de calibração. Um deles está usando algum hardware, que é assim. Estes são poucos dispositivos para calibrar suas cores. Este é ColorMunki Display e ColorMunki Smile. Então temos esta, outra empresa, que é Spyder5Pro. Estes são diferentes dispositivos de calibração de cores. O que eles fazem é, você os conecta ao monitor assim e instala o software deles. Eles testam as cores, o brilho, o contraste e a gama de sua tela e ajustam de acordo. Isto é, basicamente, baseado em hardware, hardware e software baseado. Agora, chegando à solução fácil, temos este site que é chamado lagom.nl/lcd-test. Ele mostra uma grande variedade de teste de calibração de cores. Qual é a calibração de cores, vamos ajustar nossos tons brancos, pretos e nossas cores para o modo padronizado. Precisamos verificar se nossos brancos, cinza e pretos, e até mesmo nossas outras cores estão mostrando com precisão. Há muitos testes diferentes, mas, normalmente, o que eu uso é usar esse contraste. Você pode ver aqui que existem diferentes bandas de cores, até 32. Você deve ser capaz de ver todos eles separadamente. Cada cor deve ser separada da outra cor. Eles não devem se misturar. Este é um teste. Você pode alinhá-los no meio da tela e vê-los diretamente, não olhar de cima ou de baixo porque algumas telas não têm um ângulo de visualização muito bom. Aqui está uma descrição que você pode irradiar junto se você quiser, então nós temos esta calibração gama. Eu não entendo muito disso, mas o que você precisa fazer é sentar alguns passos de sua tela e você vai apertar seus olhos, e você pode ver por aqui essas barras cinza e preto dentro de todas essas cores. Você precisa verificar com essas barras estão basicamente se misturando. Quando você aperta seus olhos, eles se misturam em algum momento, como 1.8, 1.9, 2.0 ou 2.2, algo assim. A definição de padrões é 2.2 e 1.8, entre todos estes, eu acho, é preciso. Sente-se, alguns passos, aperte os olhos e veja onde essas linhas vão se misturar. Um outro teste que usei, este, níveis pretos. Você deve verificar os níveis de preto. Como você vai verificá-los é, há diferentes tons de preto aqui, 1, 2, 3, 4. Este é breu preto, então ele está se misturando com o fundo. Existem diferentes pretos a cinzentos. Depois há este branco que é a cor mais nítida por aqui. Você deve ser capaz de ver todos eles separadamente. Se você ver toda a cor preta aqui, até três ou quatro, então há algum problema com seus negros. Você deve ir para verificar as configurações do seu contraste. Se você ver mais caixas pretas aqui, então você deve verificar seu nível de brilho e, talvez, contraste também. Em seguida, vem o teste para a saturação branca. Estes são diferentes tons de cinza para branco. Você deve ser capaz de ver todos eles. Se você se sentar a alguns passos da tela, você deve ser capaz de ver todos eles. Este é um outro teste. Então temos faixas de gradiente. Você deve ser capaz de ver este branco para preto, e você pode ver algumas bandas no meio. Um monitor de cor muito bom ou tela muito boa não deve mostrar nenhuma faixa no meio como este. Estas são linhas diferentes entre a vinda. Estas são chamadas bandas. Eles devem ser suaves. Eles não devem mostrar bandas como esta. Eles deram exemplos de tela ruim e tela boa. Outros, eu não sei, e eu não uso muito. Este é importante, ângulo de visão. A tela que estou usando agora não suporta ângulos de visualização muito bons. Este é um LED Samsung 23 polegadas, por isso é como 2-3 anos de idade. Agora, o que você vai fazer é, você vai ver esta imagem de um pouco de cima e um pouco abaixo. Em seguida, do lado esquerdo da tela e do lado direito, e você vê as cores vão mudar muito. Mesmo com este roxo, ele pode parecer azul ou avermelhado nele quando você olhar de algum outro ângulo. Além disso, este, isso mostra algum tempo rosado e algum tempo cor vermelha. Isso é muito importante porque, se você projetar algo no Photoshop ou em qualquer outro software, e se você for olhar de algum outro lado ou se seu cliente estiver olhando do lado esquerdo ou direito, ele pode não ver as cores certas. Na próxima lição, vamos ver diferentes tipos de painéis de LED, que são bons para designers. Além disso, vamos usar nossa ferramenta de calibração de sistema para Windows, ou até mesmo Macs, para calibrar sua tela usando apenas seus olhos e esse software, que é integrado em qualquer sistema operacional. Então, apenas uma recapitulação do que abordamos nesta lição, que há duas maneiras de padronizar suas cores com seu monitor. Você pode ver a imagem aqui, antes e depois. O que usamos é usar nossos olhos. Um método é a nossa ferramenta de calibração de olhos e cor dada no sistema operacional para alterar as cores. Padronize as cores. A segunda opção é usar esses diferentes dispositivos, como esta solução ColorMunki lá, dois ou três. Eles podem calibrar sua tela automaticamente. Eu vou comprar este ColorMunki Sorriso muito em breve. É quase $90 da Amazon, eu acho, $89 ou $90. Nunca usei nenhum destes antes. Vamos ver o que eles vão fazer. Agora, isso é tudo sobre calibração de cores e este site Lagom. Na próxima lição, vamos ver como o sistema operacional vai ajudá-lo. Os recursos internos do sistema operacional ajudam você a definir sua calibração de cores para padronizar o modo. Vamos passar para a próxima lição. 13. Melhores de vigas (LED) para designers: Nesta lição, eu vou falar sobre alguns dos painéis de LED ou monitores que você realmente precisa para um design de interface do usuário ou quaisquer designers. Se comprarmos qualquer LED, normalmente é painel TN. Portanto, existem basicamente três tipos de painéis. Quando você compra qualquer LED ou monitor para você, você deve procurar esses recursos. Existem painéis TN que eram basicamente tecnologia antiga, três ou quatro anos de idade. Ele representa nemático retorcido. Eles são um pouco baratos. Depois, há painéis IPS, comutação In-Plane. Esta tecnologia mostra e exibe cores melhores do que os painéis TN. Como IPS e PLS, você deve ir para estes. PLS é uma tecnologia introduzida pela Samsung. Então, principalmente, quando você vê qualquer tela Samsung como esta, pode haver PLS escrito, é quase como IPS. Então, qualquer coisa que seja IPS ou PLS, você deve comprá-lo, em vez de comprar painéis TN. Se você está apenas começando em sua carreira, então você deve ficar com painéis TN. Mas se você quiser cores muito precisas, então você deve ir para telas IPS ou PLS. Um fator muito importante, que é este ângulo de visão. Portanto, certifique-se sempre de que a tela que você está comprando tem ângulo de visão máximo como 178 graus. Principalmente essas telas IPS e telas PLS, eles oferecem uma grande variedade de ângulo de visão. Então, mesmo se você visualizar da esquerda para a direita, e superior e inferior, cores e tudo deve ser o mesmo. Ok. Para os caras que usam Macs, eu acho que as telas do Mac são construídas com a tecnologia IPS, então não se preocupe com isso. Mas eu vi até mesmo usuários de Mac que estão usando LG ou Dell ou telas de outras empresas ou monitores muito largos. Então isso é tudo sobre monitores ou IPS e PLS telas. Dito isso, vamos passar para a próxima lição. 14. Calibração à base de cores no sistema: Nesta lição, vou falar sobre como calibrar sua tela usando Mac OS ou Windows, usando suas próprias ferramentas de calibração do sistema operacional. Primeiro, comece com OS X ou Mac. O que eu vou fazer é, eu não tenho Mac agora, eu estou gravando no Windows. Como você vai calibrar sua tela, você vai usar as Preferências do Sistema. Se você acessar Preferências do Sistema e clicar em “Exibições”, poderá ver a cor no lado direito, então clique nele e poderá ver um botão de calibração ali. Ao percorrer esse processo de calibração, você poderá ver diferentes no final desta ferramenta de calibração quando tiver calibrado seu perfil de cor. Então, no final, ele mostrará os perfis de cores antigos. Se você quiser mudar para qualquer um antigo, você pode mudar para qualquer antigo, então não se preocupe com isso. Além disso, há um modo Expert. Se você é um especialista, você pode verificar isso e ver mais opções nele. Isto é tudo sobre calibrar o seu ecrã. Deixe-me ver se consigo encontrar alguma imagem no Google. Mas acho que normalmente é algo assim. Se você não selecionar o modo Especialista, poderá ver esse ponto branco de destino. Normalmente escolhi este nativo. É assim que você faz a calibração no OS X Yosemite ou em qualquer outro sistema operacional OS X. Usando o Windows, o que vamos fazer é digitar na pesquisa do Windows aqui, calibrar a cor e você pode ver isso apenas calibrar a exibição colorida. Este é um assistente e, se clicar em Seguinte, poderá ver diferentes opções para calibrar o ecrã. Se você clicar em Avançar, você pode ver este Gamma muito baixo, Gamma bom, Gamma muito alto. O que você vai fazer é você vai ajustar sua gama para que você não veja nenhum ponto no meio, como este pontos brancos ou pretos. Eu vou clicar em “Avançar” e agora ele está definido para quase exatamente o que eu preciso, então eu vou pular para o final. Então temos ajustes de brilho e cor. Certifique-se de que talvez seja necessário ajustar as cores, o brilho e o contraste a partir do menu de visualização. Se tiver a Samsung ou qualquer outro ecrã, poderá ter botões e botões diferentes no ecrã. Você precisa usá-los para definir seu brilho e contraste, porque isso está basicamente relacionado à sua tela e hardware. Vou pular a próxima. É assim que você vai definir seu contraste que sua camisa deve ser visível, essas rugas devem ser visíveis em sua camisa e também esses dois fundo preto e acinzentado aqui. Então a outra coisa é que você vai remover as manchas da sua cor acinzentada. Se você clicar em Avançar, poderá ver manchas de vermelho ou verde, ou talvez azul em alguns monitores, então o que você vai fazer é mover o controle deslizante para trás e mover o verde um pouco para trás. Deixe-me ver se preciso remover o azul. Não, azul está bem. Verde e vermelho, não havia manchas de verde e vermelho na minha tela, então eu vou clicar em próximo. Você pode verificar a calibração anterior e a nova calibração. Este é o anterior, este é o atual. Vou mudar para este anterior. Se terminar, poderá ver este assistente iniciar o ClearType. Ele vai mostrar-lhe textos diferentes e ver qual deles está olhando melhor para você. Este parece bom e este parece bom. Então este parece bom. Este parece melhor. Conclua este assistente e a calibração está definida. Agora, há mais uma maneira de controlar esta gama e outras cores, que está indo para o seu software de placa gráfica. Eu tenho informações. Se você for exibido, isso pode não ser o mesmo para cada placa gráfica, mas você pode acessar as configurações e o painel. Você pode ver aqui brilho, contraste e gama. Se eu tentar modelar com esta gama, você pode ver as cores estão mudando na minha tela e você também pode alterar esse brilho e contraste. Você pode aplicá-lo. Também são imagens de amostra diferentes que são dadas aqui. Se eu tentar mudar o brilho assim, você pode ver aqui. Agora vou cancelá-lo. Eu não quero alterar as configurações da minha tela porque eu levei um monte de vezes para torná-lo mais perto das cores precisas. Porque às vezes os meus filhos, eles simplesmente pressionam qualquer botão na minha tela Samsung e todas as cores desapareceram. Basicamente, vou cancelar. Você também pode alterar diferentes configurações de contraste, brilho e gama aqui. Esta é outra maneira. Vou cancelar agora mesmo. Isto é tudo sobre como você calibra sua tela usando o sistema operacional OS X ou Windows. O que eles vão mostrar a você, eles vão mostrar a você e andar através de um mago e apenas manter as cores que parece melhor para seus olhos. No final, se você quiser testar as configurações, você sempre pode vir a este site e testar suas configurações novamente. Você pode ver aqui agora eu não posso ver este 254 quase. Se eu for um pouco mais longe da minha tela, eu poderia ver este aqui. Certifique-se sempre de que a calibração de cores é feita com precisão. Algo sobre telas, eu vou mostrar-lhe na próxima lição que tela você precisa para design gráfico ou web design ou design de interface do usuário. Vamos seguir em frente. 15. Como a interface do Photoshop: Deixe-me apresentar a interface do Photoshop e como ele funciona, como diferentes opções e ferramentas estão sendo acessadas no Photoshop. Então vamos começar. Eu abri um arquivo de amostra aqui. Eu tenho uma camada e uma camada de texto e uma camada de forma, então a primeira coisa em primeiro lugar, este no lado esquerdo, nós temos esta barra de ferramentas, então nós temos diferentes ferramentas como a ferramenta Mover e um monte de ferramentas. Se você selecionar qualquer ferramenta, você pode ver as opções no topo relacionadas a essa ferramenta, então esta é basicamente a barra de opções, então se clicarmos em qualquer uma delas, se mudarmos para qualquer outra ferramenta, você pode ver estes opções estão basicamente mudando. Estas são mais opções relacionadas a esta ferramenta. Se você manter o mouse ou passar o mouse sobre esta ferramenta, você pode ver o nome dessa ferramenta, ferramenta Cortar. Além disso, você pode expandi-lo aqui assim e redirecioná-lo assim. É do seu próprio gosto. Você pode personalizar esta barra de ferramentas a partir daqui. Continue pressionando o mouse sobre isso e você pode editá-lo aqui e você pode arrastá-lo assim. É assim que você pode alterar toda a barra de ferramentas. Esta é a sua barra de ferramentas atual, esta é basicamente barra de ferramentas extra, se você quiser remover algo, você pode remover aqui. Além disso, você pode salvar e carregar predefinições de diferentes barras de ferramentas. Então, para mais opções, você pode ver aqui há navegações detalhadas por aqui, menus. Você pode ver estes são relacionados à imagem, manipulação de imagem, em seguida, camada, Ferramentas de texto relacionadas a seleções, existem diferentes filtros. Então temos 3D, não vamos usá-lo, mas isso é apenas para informação. Então temos vista e configuração diferente como nossas grades, guias, governantes. Eles estão todos neste painel de visão, então nós temos janelas ou painéis, extensões, tudo nesta janela aqui. Então certifique-se de vê-los apenas uma vez. Não tente se lembrar deles, você sabe que essas coisas estão aqui como essas extensões espaço de trabalho aqui. Esta é a nossa navegação detalhada. Esta é a nossa barra de opções para essas ferramentas, então selecionamos qualquer ferramenta e as opções vêm aqui. Então, para mais opções, às vezes você precisa ir para esta barra de ferramentas aqui. Isto é basicamente painel, então barra de painel. Se eu selecionar algo disso, deixe-me desenhar um pouco de forma agora para mostrar como funciona. Então, se eu arrastar alguma forma para aqui, você pode ver que este painel de propriedades de forma ao vivo foi aberto. Tem muitas opções relacionadas a isso. Há opções aqui no topo, mas há opções aqui também. Além disso, você pode ver largura, altura, x e y coordenadas e localização deste objeto de acordo com este documento. De qualquer forma, existem poucas ferramentas. Você preenche painéis pop que você pode acessar aqui relacionados a qualquer objeto ou gráfico que você projetar aqui. Se eu tentar selecionar este, você pode ver aqui, Eu selecionei uma camada de texto e eu posso ir para esta barra de painel e eu posso selecionar Personagem, Parágrafo e algumas outras coisas aqui. Se você não vir isso carregado aqui, você precisa carregá-lo a partir daqui, Janela, e você pode carregá-lo a partir daqui como Camada, Composições de Camada. Parágrafo, estilos de parágrafo. Então é assim que você carrega esses painéis, mas eles serão ativados assim que você tiver esse tipo de camada ou objeto selecionado. Basicamente nós as chamamos de camadas aqui, então esta é a camada um, camada dois, camada três. Então, poucas opções, você pode pegá-los a partir daqui então a terceira maneira é que você pode clicar com o botão direito em qualquer uma desta camada e você pode acessar mais opções e mais operações que você pode fazer nessas camadas. Então é assim que você acessa diferentes áreas do Photoshop. Há um novo recurso que acabou de ser adicionado, que é a barra de ferramentas de pesquisa. Você pode ver aqui, se eu ir para Pesquisar e tentar procurar algo como cortar, você pode ver que ele me mostra ferramenta Cortar e outras coisas relacionadas ao corte como Cortar, Revelar tudo. Se eu selecionar isso, ele selecionará minha ferramenta Cortar. Isso é muito útil, eu defini a tecla de atalho para ele, Command F ou Control F. Por padrão, esta tecla de atalho não está lá, então, se você quiser experimentá-lo, você precisa atribuir o atalho de teclado a partir daqui e isso é tudo sobre esta interface do Photoshop e como ele funciona, onde você vai acessar diferentes opções e ferramentas e coisas e mais opções relacionadas a qualquer camada ou texto que você desenhar ou projetar. Então vamos passar para a próxima lição. 16. Novo documento: Nesta lição, vou falar sobre a configuração do novo documento do Photoshop e como usaremos predefinições diferentes para aplicativos móveis e web design. Então, vamos começar. Vá para “Arquivo e Novo”, e você verá esta janela Novo documento e você pode ver, isso foi alterado muito nesta versão mais recente do Photoshop CC 2017. Você pode ver os detalhes de qualquer predefinição está no lado direito e as predefinições que você vai selecionar a partir daqui. Então, se eu selecionar este, você pode ver que ele tem 1440 pixels de largura e 880 é sua altura. Você pode mudar os centímetros ou tudo. Mas para web design e design de aplicativos móveis, vamos usar pixels. Agora você pode ver que há resolução. Para resolução digital para aplicativos móveis e web design, estamos indo principalmente para 72 pixels por polegada. modo de cor será RGB, fundo branco de oito bits e nas opções avançadas, você pode ver aqui, perfil de cor, configurá-lo para Não Gerenciar Cor e pixels quadrados. Estas serão as configurações de documentos para quase todos os documentos. Agora, se você ver na parte superior, você pode ver que existem diferentes opções de documento novo, como salvo, que vai me mostrar algumas das minhas predefinições salvas que eu salvei. Então ele vai mudar para esta fotografia. Se você é um fotógrafo, você pode usá-los. Estes são todos em polegadas e 300 PPI, que é para impressão e fotografia. Depois, há também pegada. Novamente, você pode ver essas outras configurações. Se você clicar nele, ele vai ser em milímetros. Estes são documentos impressos, arte e ilustração, e web e mobile. Se você quiser, você pode ver aqui, você pode acessar mais predefinições clicando nisso, clicando neste sinal de mais aqui. Você pode ver aqui, iPhone 6 Plus, iPad Pro, Microsoft Surface Pro 3, iPhone 5. Existem muitos modelos diferentes. Você pode ver que há um novo recurso na parte inferior. Você pode ver que estes são modelos gratuitos do Adobe Stock. Se você quiser clicar nele, você pode ver que ele irá mostrar-lhe alguns do tamanho, 32 MB e ele vai baixá-lo a partir do Adobe Stock. Certifique-se de que você está conectado à Internet e se inscreveu nesta conta do seu Photoshop. É assim que você usa modelos diferentes. Estes são para cinema e vídeo. Na maioria das vezes para web, eu não uso esses tamanhos de modelos ou web media, web minimum, web large. Normalmente, o que eu uso é que eu uso este, que eu tenho guardado aqui, que é 1280 pixel de largura bootstrap. Agora, como você pode salvar uma predefinição? Você pode nomear qualquer predefinição aqui como Salvar novo. Certifique-se de mudar a altura como eu vou mudar a largura para 1200 e altura para talvez 2000 pixels. A orientação será assim. Não quero um retrato. Ele sempre estará na orientação retrato se você quiser selecionar quadros de arte, é um novo recurso nas versões mais recentes do Photoshop. Você pode verificar aqui. Outras opções que você precisa mostrar o mesmo, que eu estou usando aqui, você precisa usá-los. Você pode selecionar esta opção aqui e salvar a predefinição. Uma vez que ele é salvo, ele vai pedir o nome. Vou chamá-lo de 1200 pixels de largura. Vamos salvar esta predefinição e você pode ver aqui ele salvou esta predefinição. Estes são os meus modelos baixados. Estas são as minhas predefinições salvas. Então, se eu tentar criá-lo, você pode ver que ele vai me dar um novo documento com uma opção de quadro de arte que você pode ver aqui. Agora, o que são quadros de arte? Vamos aprender sobre eles na próxima lição. Vamos passar para a próxima lição. 17. O que são artboard?: Agora, nesta lição, vamos falar sobre pranchetas do Photoshop. Então vamos começar. Vamos abrir um novo arquivo, e certifique-se de que nessas opções, você precisa verificar esta prancheta se quiser. Sem pranchetas, você pode ir sem elas. Então verifique prancheta e eu vou criar agora. Então você pode ver que isso é realmente 1.200 pixels de largura e 2.000 pixels de altura, e isso é basicamente a minha prancheta 1. Vou renomeá-lo clicando duas vezes neste painel de camada. Você pode ver que eu vou renomeá-lo para WebDesign. Este é o WebDesign. Em seguida, podemos adicionar outra prancheta. Você pode ver aqui há uma ferramenta de prancheta, se você clicar aqui, e você pode ver que temos a ferramenta de prancheta V, e você pode ver que existem diferentes opções aqui, como você pode alterar a prancheta selecionada para qualquer tamanho de prancheta que você gosta. Então, se eu quiser mudar para seis, você pode ver que ele pode ir para seis ou pode voltar para 1.200 pixels de largura. Além disso, você pode criar uma nova prancheta. Clicando aqui, para que eu possa criar uma nova prancheta, e eu posso selecionar qualquer um disso, e apenas arrastá-lo para cá. Clique aqui uma vez, e você pode ver que criou uma nova prancheta, que é iPhone 5 modelo. Então, é basicamente iPhone 5 dimensões. Agora, se você quiser criar mais pranchetas, você pode criar mais pranchetas. É muito útil, como você está projetando um site ou talvez um aplicativo móvel, e ele tem 10 telas ou 12 telas. Você pode adicionar mais telas clicando aqui, assim, e você pode ter várias telas e ver tudo na Web em uma tela. Então é assim que você usa pranchetas. Agora, há mais algumas opções. Você pode ver aqui, você pode alinhá-los. Você pode selecionar diferentes pranchetas e alinhá-las, se quiser. Talvez, você possa alinhar suas bordas superiores, se você os tiver movido erroneamente. Para movê-los, você precisa ir para esta Ferramenta Mover, e você precisa desativar esta Seleção Automática se você selecioná-la, e você pode mover qualquer uma das pranchetas que você selecionou, como eu selecionei esta. Eu posso me mover assim, e se eu quiser movê-lo para baixo, eu posso movê-lo mais perto, assim. Então é assim que você se move em torno de suas pranchetas. Então você também pode excluí-los. Você pode clicar com o botão direito e excluir prancheta. Você pode duplicá-los aqui, se você tiver criado um tema e precisar duplicar toda a prancheta com todas as camadas. Então, cada prancheta que você pode ver aqui, é basicamente um grupo e pode ter um monte de camadas, camadas de texto, todo o seu design sentado sobre ele. Então é assim que você usa pranchetas diferentes e é assim que você as exclui. Pressionei minha tecla Delete no teclado para excluir qualquer prancheta que selecionei. Qualquer prancheta, você pode selecioná-la aqui. Verifique se a Ferramenta de prancheta está selecionada e destacada. Assim, você pode ver que existem mais algumas opções como Aninhamento automático de camadas, Tamanho automático de tela. Houve alguns problemas nas versões anteriores em que tamanho da tela e o tamanho da prancheta estavam incompatíveis. Então eles criaram isso. Agora, se você quiser girar sua tela móvel como você precisa de modo paisagem, você pode selecionar qualquer prancheta como iPhone, o último que eu selecionei e você pode girá-lo em torno desse modo. Então é assim que você gira a visão do seu celular. Então este é o retrato, esta é a paisagem. Agora, deixe-me demonstrar a magia dessas pranchetas. Se eu tiver, por exemplo, um botão aqui, assim, este é um todo embutido e eu quero copiá-lo para outro, então eu vou apenas Alt e arrastar até aqui. Você pode ver no lado direito, ele é copiado para outra prancheta. mesmo é o que posso fazer aqui. Então, esta camada ou este botão foi copiado para todas essas outras pranchetas. Da mesma forma que você pode copiar grupos ou arrastar seu design para aqui ou para aqui. Agora, você pode ver se você tem uma versão antiga do seu tamanho de Canvas, então você pode ver se você vai para este tamanho de Canvas, ele vai mostrar a você que Canvas de toda a área que você está cobrindo, que é basicamente 3.408 pixels. Então, se eu tentar fazer uma seleção aqui assim, eu acho que vai ser 3.176. Então, será aproximadamente igual ao tamanho de toda a tela. Agora, o cálculo do Canvas é diferente. Então, se você está calculando tudo no Canvas, então você não deve usar saídas, e se você quiser excluir, você pode simplesmente excluir a prancheta aqui. Então eu vou apagar apenas prancheta, e você vai deixar com o conteúdo aqui. É assim que, se você quiser usar o apenas o Canvas, você pode fazer algo assim. Vou apagar todas as pranchetas e você pode ver que temos nossa tela de volta. Então esta é a nossa tela principal. Então, se eu tentar redimensioná-lo agora, eu posso redimensioná-lo. Então este é um dos problemas, um dos medos dos meus alunos, então eu vou limpar isso. Se você não quiser usar pranchetas, quando tentar criar um novo arquivo, não as selecione, não marque essa caixa. Então você vai ter este documento antigo configurado, que é, eu realmente sinto falta disso e eu realmente amo isso. Então, isso é tudo sobre pranchetas e como você vai usar várias pranchetas para criar seus aplicativos móveis ou web design, ou diferentes exibições, ou diferentes versões do seu design. Vamos passar para a próxima lição. 18. Como as camadas funcionam no Photoshop: Nesta lição, eu vou falar sobre camadas e basicamente o conceito de camadas e um pouco sobre este painel de camadas. Deixe-me primeiro elaborar algumas camadas. Eu vou pegar essa ferramenta de forma, e eu vou desenhar algum eclipse aqui. Q 1, 2, 3 e 4. Agora tenho quatro eclipse. Deixe-me mudar suas cores para que você possa entender qual deles está mudando ou alterando suas cores. Agora tenho quatro eclipse. Agora, como você pode ver que no painel de camadas, o preto está na parte inferior mais. Nesta representação está também na parte inferior. Eles estão basicamente em uma ordem de pilha. baixo, depois este cinzento no topo, e depois azul, e este laranja está no topo. Basicamente, usamos esta ordem de pilha para criar diferentes objetos e diferentes itens gráficos e desenhos diferentes. Às vezes, mesclamos ou misturamos essas duas camadas, camadas cima em baixo. Às vezes os subtraímos, às vezes os adicionamos. Deixe-me ir a este painel de camadas. Estas são diferentes opções de mistura. Isto é normal. Se eu mudar para este escurecido, você pode ver que ele está basicamente misturando com a camada abaixo dele. A camada abaixo é basicamente azul. Temos diferentes opções por aqui, como multiplicar. Ele está se multiplicando com as camadas abaixo, queima de cor e todas essas opções diferentes. Basicamente é adicionar ou subtrair cores ou multiplicá-los, ou cores de ligação, e estas são multiplicação diferente ou você pode dizer opções de mistura. Agora estas são basicamente opções de mesclagem. Normalmente usamos multiplicar, queimar cor, talvez tela ou sobreposição a maior parte do tempo. Não usamos outros. Talvez cor algum dia. Mas vou usá-los intensamente no meu próximo curso. Para este curso, apenas a introdução de que é opções de mesclagem é suficiente. Agora, chegando a essa opacidade, opacidade é basicamente a transparência de qualquer camada, então se eu torná-la, a primeira transparente, você pode ver que ela é semitransparente agora. Isto é basicamente transparência. Agora chegando a este preenchimento, preenchimento é basicamente a cor preenchida neste eclipse ou camada. Para entender melhor, vou aplicar algum efeito de acidente vascular cerebral a ele, para você possa ver o que está acontecendo. Agora, você pode ver que esta opção de preenchimento é aplicada apenas à cor ou preenchimento dentro deste eclipse. Ele não está recebendo ou fazendo qualquer efeito para o efeito de borda ou acidente vascular cerebral em torno dele. Se eu mudar a opacidade, ele irá reduzir tudo, incluindo quaisquer estilos de camada ou estilos aplicados a esta camada em particular. Você pode ver a diferença entre opacidade, ele faz todo o objeto transparente incluindo seus todos os estilos. Mas o preenchimento só faz com que o conteúdo interno seja transparente. Esta é a diferença entre preenchimento e opacidade. Agora chegando a essas opções de bloqueio. Isso é basicamente para bloquear o movimento, então agora não podemos mudar a posição desta camada. Ele permanecerá estático aqui. Agora, o benefício de bloquear esta posição é que podemos aplicar diferentes estilos de camada ou diferentes opções e diferentes outros elementos a este eclipse, mas não podemos movê-lo. Agora, se mudarmos para esta ferramenta de bloqueio, se fecharmos isto, então você não pode fazer nada com ela. Você não pode nem aplicar estilos de camada. Você pode ver que todos os estilos de camada foram desativados. Esta é a diferença entre este ícone de cadeado e este ícone de posição de bloqueio. Agora, há mais algumas opções aqui. Você pode ver se eu tento ligar isso. Isto é basicamente a filtragem dessas camadas, então talvez se nós temos como 100 camadas e nós só precisamos encontrar o, deixe-me criar uma camada de texto, eu sou algum texto aqui, e então eu vou criar algum objeto inteligente. Lembre-se que o objeto inteligente era de cor laranja assim. Vou criar um pequeno objeto. Eu vi, para onde foi. O objeto inteligente está aqui, este aqui. Agora eu tenho uma camada de texto, algumas camadas de eclipse ou forma, e então eu tenho uma camada inteligente ou objeto inteligente. Agora, se eu quiser pesquisar rapidamente os objetos inteligentes, eu vou clicar neste e você pode ver que ele está me mostrando o objeto inteligente. Ou se seu documento tiver cinco ou seis objetos inteligentes, eles serão listados aqui. Basicamente, este é um filtro rápido para localizar suas camadas. Se eu clicar nesta ferramenta de forma, ela me mostrará as camadas de forma. Se eu clicar em ambos, ele me mostrará camadas de forma mais os objetos inteligentes. Isso é basicamente para filtrar suas camadas. Este é um texto e eu posso ver todas as minhas camadas de texto e então eu tenho essas outras opções. Normalmente usamos estes três. Isso é tudo sobre o painel de camadas e como todas essas camadas funcionam umas com as outras e como sua ordem de pilha ocorre e como nós as usamos para exibir ou podem criar objetos e afetos diferentes. Se eu apagar uma parte deste, vou deixar-nos tentar primeiro. Agora você pode ver, eu posso ver através das outras camadas deste aqui porque ele tem um buraco dentro dele. É assim que esta camada funciona. Espero que você tenha aprendido alguns passos básicos de como esta camada e painéis de camada basicamente funcionam e espero vê-lo na minha próxima palestra. 19. Painel de texto no in: Nesta lição, eu vou mostrar como vamos usar nossa ferramenta de texto para projetar nosso design de interface do usuário, e como vamos usar diferentes opções de conjuntos de parágrafos e caracteres. Vamos começar e ir para este símbolo de ícone T neste painel de ferramentas ou você pode pressionar T para a tecla de atalho. Eu vou clicar e arrastar até aqui para desenhar um parágrafo encadernado e eu vou colar algum texto Loren Ipsum aqui. Agora, eu vou aumentar seu tamanho de fonte para que você possa vê-lo um pouco melhor. Agora, algumas das opções deste painel de texto estão aqui. Nós selecionamos esta face fonte que era Open Sans. Posso mudar para qualquer outra fonte, se quiser, como esta. Então isso é basicamente suas configurações. Por exemplo, peso da fonte, temos negrito e negrito itálico agora nele. Então este é o tamanho da fonte. Vamos usá-lo em pixels. Isto é basicamente a opção de renderização de fonte. Vamos usar normalmente afiado, nítido e suave. Ou talvez LCD do Windows. Se você estiver no painel de LED, você pode ver isso. Mesmo em um Mac, você pode ver o Mac LED aqui ou algo assim. Agora, essas são basicamente opções de alinhamento; alinhamento central, alinhamento à direita ou alinhamento à esquerda. Estas são configurações de parágrafo. Esta é basicamente a cor do texto. Se eu quiser mudar para algo assim, posso mudá-lo daqui. Isso é basicamente quebra de texto, mas podemos não usá-lo em nosso processo de design de interface do usuário. Agora, clicar nisso abrirá mais opções neste painel corretor. É por isso que em nossa palestra anterior, incluí essa configuração de personagem e parágrafo aqui. Agora, chegando a este painel de caracteres, este é basicamente o tamanho da fonte, e esta é basicamente a altura da linha entre essas duas linhas. Se eu tentar aumentá-lo, você pode ver as linhas de texto verticalmente, elas se expandem. Então este é basicamente o espaço entre duas letras. Você pode ver que as letras estão ficando mais espaço aqui e tendo mais espaço nelas, assim. Normalmente, usamos a maior parte do tempo algo, talvez 25. Agora, então, nós temos essas outras opções diferentes aqui para fonte e tipografia como negrito, itálico, e então todas as maiúsculas, e subscript, sobrescrito; essas são opções diferentes. Podemos não usá-los a maior parte do tempo aqui, mas talvez eles possam vir a calhar algum dia. Agora, vou explicar algo sobre essas configurações de parágrafo. Agora, nas configurações de parágrafo, temos essas mais opções de alinhamento de texto. Isso é justificado para configurações justificadas e essas são três configurações normais: linha esquerda, linha do meio e alinhar à direita. Estes três são opções de recuo. Se quisermos recuar nosso parágrafo da esquerda, como 50 pixels, podemos estar usando isso. Você pode ver que este parágrafo move 50 pixels da esquerda. Se eu só quero o primeiro recuo de linha, então eu posso usar este aqui. Agora, você pode ver que a primeira linha está começando a partir de 100 pixels da esquerda. Agora, estes são basicamente preenchimento superior e inferior do nosso parágrafo. Se eu inserir 500 aqui, você pode ver meu parágrafo movido para baixo. Estas são todas para as configurações de parágrafo, mas na maioria das vezes, podemos não estar usando essas opções de recuo ou essas opções de espaçamento porque vamos mover parágrafos diferentes com nosso teclado, como shift e usando nossas teclas de atalho. Isso é tudo sobre configurações de parágrafo e parágrafo. Vamos passar para a próxima palestra. 20. Ferramenta de forma no Photohsop: Nesta lição, usaremos nossa ferramenta de formas para criar novas formas e combinar formas diferentes e subtrair algumas formas. Eu vou estar focando apenas nas coisas que vamos estar fazendo principalmente em design de interface do usuário. Vamos começar. Clique neste ícone de forma, ícone de ferramenta ou você pode pressionar U do seu teclado. Clique e arraste para criar. Você pode ver que esta largura e altura está chegando, largura este 537 e algo assim, eu estou usando este aqui. Assim que eu desenhar este, você pode ver propriedades de forma ao vivo aparecer. Aqui está a nossa largura e esta é a altura. Se eu quiser definir a altura em 330 pixels, você pode bloquear a altura se quiser apertar esta caixa em proporção assim. Em seguida, temos a sua posição do eixo x, quão longe está do lado esquerdo e quão longe está do topo, que é eixo y. Esta é sua cor de fundo e esta é sua cor de contorno ou traçado. Você pode ver aqui, se eu aumentar isso, você pode ver como ele é delineado. Não, nós não vamos usar isso então eu não vou discutir essas poucas configurações do esboço, vamos usá-lo em com nossos menos vezes. Mais uma coisa, o que é muito importante é este raio de fronteira. Você pode clicar ou arrastar para aqui se quiser configurá-lo para algum raio da borda, ou você pode digitar sua própria escolha de valor aqui. Além disso, se você clicar neste ícone de cadeado, poderá definir valores personalizados para cada canto. Se eu apenas arrastá-lo para aqui assim, ele vai criar este tipo de forma, e esses tipos de formas são possíveis no design CSS e novas especificações CSS3. Uma coisa é esta, vamos estar usando a maior parte do tempo essas formas retangulares para nossos botões e um monte de outras coisas. Agora vamos criar uma nova forma combinando duas formas. Às vezes você viu esse tipo de caixa de diálogo de informações ou aparecer. Vou usar outra forma personalizada da nossa barra de ferramentas de formas. Aqui eu vou carregar todas as formas aqui, substituí-las, e remover mais uma configuração, miniatura grande. Vou configurá-lo para uma miniatura grande. Agora vamos descobrir onde está esse retângulo. Podemos usar este ou talvez este, ou este. Vou desenhar um retângulo aqui. Não é basicamente um retângulo. Agora você pode ver que eu fiz um balão pop up ou ponta de ferramenta estilo de caixa. Agora, se você se concentrar em seu painel de camada, esta forma é separada desta. Se eu quiser mudar suas cores, o outro vai ficar como está. Agora, como eu posso combinar esses dois, é muito simples. Você pode selecionar ambos pressionando controle e clique, e então você pode pressionar controle e E. É um atalho para combinar duas formas, eles agora estão mesclados. Você pode ver que eles estão basicamente mesclados agora. Se eu quiser mudar sua cor, eu posso alterá-la e controlar T Se eu quiser dimensioná-la, eles vão escalar proporcionalmente. É assim que você cria formas em seu design de interface do usuário. Às vezes tínhamos que criar formas como esta. Agora, se você quiser subtrair uma forma dela, principalmente não precisamos usá-la a maior parte do tempo, mas ainda assim é algo que você pode aprender. Você pode ver agora, como eu selecionei este subtrair da forma frontal, meu cursor é alterado para este sinal negativo ou negativo. Agora, se eu desenhar um círculo aqui, eu estou pressionando Shift com ele, você pode ver que ele apenas subtraiu esta forma. Mais uma coisa, se eu precisar movê-lo, eu não posso movê-lo com esta ferramenta de movimento. Você pode ver que eu posso mover a forma, mas se eu quiser mover este círculo circular dentro da minha forma, que eu acabei de subtrair, eu preciso pressionar esta ferramenta de seleção de caminho ou ferramenta de seleção direta. Se eu clicar sobre isso, você pode ver agora esta forma oval dentro desta outra forma é destacada. Se eu quiser selecionar todos os seus lados ou toda a forma, eu vou clicar neste cursor preto aqui “Ferramenta de Seleção de Caminho”. Agora posso movê-lo, agora está no meio. Se eu quiser mudar seu tamanho ou forma, posso reduzi-lo ou aumentá-lo. Então eu vou novamente selecionar a ferramenta de movimento, e é isso. Criamos uma forma com a combinação de duas formas e, em seguida, subtraímos esta área a partir desta forma combinada. É isso, e eu acho que é isso para a nossa ferramenta de forma. Espero que tenha aprendido algo e gostado. Vamos passar para a próxima palestra. 21. Noções básicas da ferramenta de caneta: Nesta lição, vou mostrar rapidamente como vamos usar nossa ferramenta de caneta em nosso design de interface do usuário. Não vamos criar ícones aqui. Vamos fazer isso rápido e fácil. Você pode ter visto algo assim. Deixe-me apenas criar para explicar. Esta é a minha área de herói do meu site. Como isso. Vou mudar sua cor, cor de fundo, para que você possa visualizá-la corretamente. Além disso, vou expandir seu tamanho um pouco mais. Você pode ter visto uma variação dessa forma. Na maioria das vezes alguns poucos designers, eles não usam essa forma totalmente quadrada. Vamos adicionar alguma variedade aqui, selecionar sua ferramenta de caneta e clicar nesta linha desta ferramenta retangular aqui assim. Clique aqui e clique aqui. Basicamente, o que estamos fazendo, estamos adicionando mais alguns pontos de ancoragem para alterar nossa forma. Agora vá para esta Ferramenta de Seleção Direta. Selecione-o e, em seguida, selecione o meio e mova-o usando seta e tecla shift, shift, seta, shift, seta, seta, shift, seta. Estou pressionando Shift e clicando na seta. Esta forma foi criada. Se você quiser que as setas sejam um pouco não curvas e um pouco pontudas, você pode ir para esta ferramenta de ponto de conversão e clicar uma vez aqui. Você pode ver que temos a forma básica de uma área de cabeçalho herói cabeça seta. Você pode ter visto mostrando seta ou conteúdo ao lado aqui, setas apontando para baixo aqui. Este é um uso. Alterei essa forma usando minha ferramenta de caneta e mudei para criar algum valor mais estético. Há também outras coisas que podemos usar aqui. Você pode ver que essa era a nossa forma básica. Se você selecionar esta Ferramenta Seleção Direta, você pode selecionar aqui e mover sua forma assim. Você pode ver que criamos uma variedade diferente de formas por aqui. Para começar com o nosso este cabeçalho como área de cabeçalho ou área de herói. Estes são diferentes usos da ferramenta caneta e nós os usamos em combinação com nossa ferramenta de forma. Tenha isso em mente e espero que tenha gostado desta palestra. Vamos passar para a próxima lição. 22. Mais como usar a ferramenta de caneta: Hoje, um dos meus alunos pediu-me para criar uma palestra mais detalhada sobre as ferramentas da Caneta. Hoje vamos explorar mais sobre a ferramenta Caneta e, no final, vamos criar algo como esta forma de olho. Você pode ver na tela. Eu acho que vou mostrar-lhe algumas das técnicas como criar curvas e como criar formas diferentes usando sua ferramenta Caneta. Vamos começar. Primeiro vamos selecionar nossa ferramenta Caneta pressione “P” no teclado, para que sua ferramenta Caneta seja selecionada. Você pode ver na parte superior que você tem duas opções; Forma e Caminho. Se você selecionar a Forma, sempre que você tentar criar um caminho em um modo de forma, você pode ver que ele vai ser uma forma completa como esta e forma fechada. O que eu estou fazendo é que eu estou apenas clicando, e então eu estou clicando de volta no primeiro ponto onde eu comecei e ele vai ser fechado forma. Esta é uma forma fechada. Se você quiser algo como este, forma fechada, você está indo para selecionar esta primeira opção Forma. Se você quiser apenas um caminho, então você não deve selecionar esta Forma. Se você só quer algumas linhas ou talvez algumas flechas, nós não precisamos dela. Eu vou pressionar a ferramenta Caneta e o caminho e eu vou desenhar um caminho aqui como este. Clique e arraste na direção em que você deseja que o caminho vá em seguida. Nessa direção, significa que vou nessa direção. Você pode ver como ele calcula minha curva de acordo com a minha direção. Deste lado não lhe dei nenhuma direcção, por isso será muito afiada. Não é arredondado. Se você quiser que ele seja arredondado, vá para esta ferramenta Converter ponto, clique aqui e arraste para fora. Você verá duas alças em ambos os lados e você pode arrastá-las assim. Se você quiser que ele seja alinhado, você deve pressionar a tecla Shift, assim. Eu criei este caminho curvo. Não vejo nenhum caminho depois de clicar em outro lugar. O que eu vou fazer é habilitar meus caminhos aqui assim e vocês podem ver, está dentro desta camada? Sim. Está dentro desta camada. Vamos apagar este. Eu tenho esse caminho. Vamos criar um novo porque ele se fundiu com o meu último caminho. Vou criar um novo aqui. Apenas um caminho rápido como este. Só uma onda. Se eu quiser um caminho traçado como este, primeiro vou criar uma nova camada, em seguida, pressione A, clique com o botão direito do mouse e você pode ver que você tem Preencher caminho e traçado caminho. Clique no “Caminho do traçado” e se você quiser simular a pressão, direi mais tarde o que isso significa. Na verdade, ele simula como a pressão do pincel funciona. Se clicarmos nele, você pode ver aqui. É uma pincelada com menos pressão no início e no final. Ele realmente mostra você como um pincel. Se você não quiser um traçado de pincel, clique aqui, primeiro selecione esta camada e clique com o botão direito do mouse e Caminho de traçado, e você pode desativar isso. Você pode ver que eu tenho uma linha consistente ou você pode dizer caminho. Não está me mostrando nenhum ângulo ou você pode dizer que eu não tenho uma pressão aplicada, então é apenas uma linha consistente. É assim que se cria uma onda. O ponto principal aqui é que quando você está usando a ferramenta Caneta, este é o primeiro clique. Quando você estiver indo para fazer o segundo clique, você precisa dizer ao Photoshop onde deseja ir. Você quer ir nessa direção ou nessa direção. Se eu clicar aqui, você pode ver como ele calcula que eu vou nessa direção. Se eu disser que vou nessa direção, então ele vai calcular assim. Você pode ver que isso é um pouco para cima e isso é um pouco mais inclinado. Neste ponto, se eu não disser que vamos por aqui ou por aqui, será muito íngreme. Se você quer uma curva muito íngreme como esta, apenas um ângulo, ângulo de 90 graus ou 80 graus, você não deve dizer ao Photoshop que você vai nessa direção. Não dê instruções e será íngreme. É assim que construímos formas. Um é curvo, o outro não é curvo. É assim que criamos formas e caminhos. Vamos criar esse iPath. Acho que é mais do que suficiente. Deixe-me explicar mais uma aqui. Mais um exemplo. Eu vou criar mais um exemplo aqui, como este aqui, assim aqui, e assim. Você pode ver que eu não tenho curvas aqui. Se eu quiser as curvas, eu devo ir para esta ferramenta Converter ponto e clicar aqui e arrastar. Ele terá alças aqui e pode criar curvas. Agora, o que eu vou fazer é se você pode clicar em “A” e você pode clicar nesta Ferramenta de Seleção Direta. Você pode selecionar qualquer um desses pontos de ancoragem e ele tem duas alças. Se você tentar arrastar uma alça como esta, você pode fazê-lo de forma independente. Selecionamos apenas este e podemos ter o que quisermos. Além disso, você pode ajustar este ângulo aqui, assim. Além disso, você pode mover isso para cima ou para baixo. Você pode ver este ponto de ancoragem. Estou usando as teclas Shift e Setas para movê-lo para cima e para baixo. Você também pode arrastá-lo para cima e para baixo onde quiser. É assim que você controla esses pontos de ancoragem e essas são suas alças. Se você quer o identificador, você pode controlá-los assim, pode ser assim. É assim que você controla essas formas e caminhos da ferramenta de caneta. Esta é a ferramenta de seleção de caminho. Se você selecionar neste, ele irá selecionar todos os pontos de ancoragem neste caminho. Você pode movê-lo talvez assim, ou aqui ou aqui. Além disso, você seleciona este e clica com o botão direito do mouse e você verá estes fazer seleção. Se você selecionar neste, ele irá selecionar a forma inteira em vez de apenas a linha. Certifique-se de que quando você estiver selecionando, tentando ter alguma pincelada nesta camada, você deve ter uma camada neste quadro de arte. Crie uma nova camada primeiro, depois clique com o botão direito nela, e você verá um subcaminho de traçado ou o que quer que seja. Vai acariciá-lo. Agora, se quisermos criar algo assim, só precisamos de forma de olho aqui assim. Vou criar um novo documento aqui, e vamos criar esta forma de olho. É um exercício muito fácil. Vou clicar aqui. Em seguida, vou clicar aqui, arrastar. Vamos nessa direção. Pressione Shift se quiser alinhá-lo assim, então eu vou clicar aqui, depois aqui, assim e depois aqui. Você pode ver que este topo e o inferior não estão alinhados. O que eu vou fazer é eu vou selecionar esta ferramenta de seleção, e eu vou selecionar esta e movê-la assim com minhas teclas de seta, e talvez eu precise de um pouco de olho menor, ele é muito aberto ou talvez olho grande. Preciso de algo assim. Talvez eu precise convertê-lo para as formas. Vou pressionar Shape. Não sei o que aconteceu. Talvez devêssemos tentar de novo, porque tínhamos selecionado. Há outra maneira se você quiser preencher esta camada, você pode selecionar A e pressionar Ok e fazer a seleção assim, e você pode pressionar G, Shift G para cor do chão. Posso selecionar esta cor, talvez esta. É o que está acontecendo aqui, eu inverti a seleção. O que vou fazer é invertê-lo. Apenas selecionar este olho está bem. Pressionei Control Shift I para inverter a seleção e estou clicando aqui. Minha seção de olhos está completa. Vou dar-lhe um pouco de estilo de camada. Não a sombra, vou dar-lhe uma sombra interior. Cinqüenta por cento multiplicam a distância que você quer, e então algo assim. Então vamos criar alguns eclipses no meio assim. Mude a cor para o que quiser, talvez este, e então você pode controlar G e duplicar esta camada. Vamos duplicá-lo assim. Vamos criar mais dois assim. Acho que isso é mais do que suficiente. Se você quiser mais camadas, você pode criá-las quantas quiser, assim. Talvez você possa ter alguma outra cor dentro do olho. É assim que você cria formas, como você diz ao Photoshop que em que direção você está indo. Você pode selecionar alças personalizadas e áreas personalizadas mesmo se quiser começar com uma forma. Se desenhares o eclipse aqui, podes ver que desenhei um eclipse. Se você pressionar A, poderá ver todos os pontos de ancoragem. Se quiser apagar alguém, se quiser mudar alguém, como eu quero arrastá-lo até aqui assim. Eu vou clicar em “Sim”, e se você mover assim, pressione Shift A para ir para a próxima ferramenta, eu vou gostar disso. Você pode ver que é o início do ícone. Ou você pode ver, o ícone que criamos de um perfil de usuário, é o chefe do perfil de usuário. Se você quiser mais como este, você pode ir em frente e pressionar A e podemos torná-lo um pouco mais assim, em vez de apenas um cabeçalho de forma oval [inaudível] 100 no topo. Então, podemos desenhar outra forma daqui. Precisamos de uma forma, então vou clicar aqui assim. Não estou a utilizar nenhuma grelha, por isso está a acontecer. Não tenho nenhum cálculo de como vai ser. Normalmente, quando você cria alguns ícones, você liga sua grade assim. É o controle e o sinal de citação no seu quadro. Aspas simples e aspas duplas são apenas a próxima chave do ponto e vírgula. Você liga sua grade, e quando você desenha, você desenha de acordo com sua grade. Vou apagar toda esta forma, e vamos desenhar de acordo com esta grelha. Vamos começar a partir daqui. Eu vou para este ponto assim, e eu vou para aqui. Então isso vai ser 1, 2, 3, 4, 5, 6, 7, eu acho. 1, 2, 3, 4, 5, 6, 7. Acho que talvez precisemos ir até aqui assim, e no mesmo lugar aqui, assim, e voltar para cá. Agora você pode ver que é da mesma forma, mas tem mais precisão. Preciso fechar esta forma assim. Você pode ver, eu posso ir em frente e mudar a cor da cabeça assim, e torná-la acima desta forma. Você pode ver como eu criei esses dois ícones. Se você quiser movê-lo acima um pouco mais assim ou assim. Isso é tudo sobre como usar sua ferramenta de caneta para criar ícones. Eu criei dois ícones. Um é este olho, e o outro é este perfil, ou eu chamo-lhe o tipo extraterrestre. Não sei o que é. Vamos para a próxima lição. 23. Aligningment no Photoshop: Nesta lição, vou falar sobre alinhamentos e como vamos usá-los em nosso processo de design de interface do usuário. Vamos começar. Eu já povoei minha tela com três formas. Deixe-me mostrar-lhe como vamos alinhá-los e como usar a ferramenta de alinhamento. Agora, em primeiro lugar, às vezes temos que alinhá-los horizontalmente e às vezes verticalmente, ou às vezes usamos grupos para alinhar todos esses objetos. Para que a ferramenta de alinhamento funcione, precisamos basicamente de pelo menos dois objetos ou duas camadas. Às vezes só temos uma camada, então deixe-me mostrar-lhe como alinhá-la. Se eu quiser alinhá-lo no meio de nossa tela, eu vou selecionar esta camada aqui, o painel de camadas e então eu vou pressionar Control+A. Você pode ver que minha tela inteira está selecionada. Agora tenho dois objetos. Uma é a minha tela e outra é esta camada. Agora vou alinhá-los usando minha tecla de atalho, que usei em nossa última palestra, que eram atalhos personalizados. Vamos alinhá-lo horizontalmente primeiro, Control, Alt e H. Agora você pode ver que ele está posicionado horizontalmente na seleção, esta seleção de tela. Agora eu vou alinhá-lo verticalmente, então eu vou pressionar Alt, Control e V. Agora você pode ver que ele está alinhado verticalmente dentro desta tela e horizontalmente também, então ele está no meio perfeito. Agora, se eu tiver dois objetos como este. Agora, se eu quiser alinhar os dois, eu vou selecionar os dois e então eu vou pressionar, então eu preciso estar na ferramenta de movimento. Pressione V ou mova a ferramenta daqui. Agora você pode ver essas opções de alinhamento na parte superior, elas estão habilitadas. Você pode alinhá-los horizontalmente assim e verticalmente assim. Eles são posicionados em relação um ao outro. Eu já disse que precisamos de dois objetos para alinhá-los. Eles estão se posicionando em relação um ao outro. Se eu quiser alinhá-los com relação à tela, eu tenho que selecionar a tela também. Agora só estou explicando como essa ferramenta funciona. Deixa-me mostrar-te. Agora eu vou selecionar ambos e se eu pressionar este align top, eles vão se alinhar na posição superior. Alinhar fundo fará o mesmo. Agora, mais uma coisa. Isso é alinhar à esquerda e alinhar à direita. Alinhar à direita. Agora, chegando a essas outras opções de alinhamento que estão escondidas agora, eles precisam basicamente de três objetos. Se eu clicar em todos eles assim, primeiro eu preciso alinhá-los assim. Eles devem estar em uma linha. Por exemplo, eles são assim. Agora, se eu quiser que todos esses objetos ou camadas tenham o mesmo espaço entre eles, eu vou pressionar isso distribuir centros horizontais e você pode ver agora eles estão alinhados perfeitamente e eles têm os mesmos espaços entre eles. E se eu quiser alinhá-los no meio, da mesma forma em relação à tela? Vou primeiro criar um grupo de todas estas três camadas. Deixe-me chamá-lo de grupo de camadas. Vou selecionar esta camada de fundo. Eu posso pressionar Alt, Control, e H e depois V. Agora você pode ver, todos eles eles estão alinhados em relação à tela no centro perfeito. Estas são algumas das técnicas que normalmente usamos em nosso design de interface do usuário, como selecionar a tela, ou selecionar esta camada de fundo para alinhar todas elas. Às vezes temos diretrizes aqui, por exemplo, como esta e eu quero alinhar isso no meio desses guias. O que eu vou fazer é selecionar esta camada e então eu vou pressionar M ou Retangular Marquee Tool e eu vou arrastar para aqui e então eu vou alinhá-lo horizontalmente. Agora você pode ver, e esta é a maior parte do tempo que os usamos em nossas grades quando temos grades de alinhamento diferentes. Certifique-se de que você conhece todos esses truques para alinhar com esta seleção, para alinhar de acordo com esta tela. Dois métodos, em seguida, alinham todos esses três objetos em relação um ao outro. Estes são três alinhamentos que normalmente fazemos. Tenha em mente todos esses três alinhamentos e vamos usá-los de vez em quando nas próximas aulas e talvez no meu próximo curso. Eu acho que tudo isso é sobre alinhar camadas e distribuí-las. Espero que tenha aprendido algo novo. Vamos passar para a próxima palestra. 24. Seleções no Photohsop: Nesta lição, vamos ver como as seleções participam do nosso processo de design de interface do usuário. Vamos começar. A primeira coisa que você pode querer fazer aqui é, às vezes, precisamos selecionar toda a nossa tela ou selecionar seleção em torno de toda a área de desenho. Para isso, eu vou pressionar Control A. Assim que eu pressionar Control A, a seleção em torno de toda essa nossa área de tela. Este é o primeiro cenário. Às vezes, precisamos fazer uma seleção em torno de alguma camada ou em torno de alguma forma. Para isso, deixe-me apenas desselecioná-lo, pressione M, e clique uma vez na tela, e sua seleção desaparecerá. Agora, para selecionar esta forma, selecione-a primeiro a partir deste painel de camada e, em seguida, Controle, e clique nesta miniatura de camada. Assim que você clicar nesta miniatura de camada, você pode ver uma seleção em torno desta camada. Esta é outra maneira onde precisamos de uma seleção em torno de alguma camada ou alguma forma. Agora, se eu quiser adicionar outra seleção ou adicionar mais algumas idéias nesta seleção, eu posso subir aqui na área superior onde eu tenho que selecionar esta opção Adicionar à Seleção. Então eu posso arrastar até aqui e selecionar qualquer coisa dentro da seção. Você pode ver agora que a seleção aumentou. Se eu quiser mover a seleção, eu posso ir para esta primeira opção primeiro e então eu posso movê-la. Agora, você pode ver que eu mudei essa seleção. Em outra camada, eu criei uma nova camada, e eu posso preenchê-la com alguma outra cor como esta. Vou selecionar outra cor. Agora, você pode ver que eu usei essa seleção e criei uma nova camada, e a preenchi com outra cor. É assim que adicionamos a seleções ou criamos seleções complexas como essa. Agora, se eu quiser subtrair uma seleção ou área de uma seleção, deixe-me mostrar-lhe como fazer isso. Primeiro, você precisa fazer uma seleção como esta. Agora, eu quero apenas 70 por cento área superior desta forma. Vou pressionar Subtrair da Forma aqui, selecionar essa, e você pode arrastar a área onde você não quer que ela seja selecionada, e solte. Você pode ver que é assim que fazemos ou subtraímos da seleção. Esta é outra maneira. Deixe-me mostrar-lhe esta última opção, que é o cruzamento. Deixe-me mostrar-lhe o que ele vai fazer. Ele irá basicamente cruzar ambas as seleções e deixar a área que era comum entre elas. É assim que esta intersecção funciona. Na maioria das vezes, não precisamos dessa interação. Interação, só usamos essa seleção adicionar ou subtrair. Há também algumas teclas de atalho que você pode usar para adicionar ou subtrair alguma seleção desta. Eu tenho essa seleção. Se eu quiser adicionar, eu posso pressionar e segurar Shift no teclado, e continuar adicionando nessa seleção assim. Agora, se eu quiser subtrair, posso pressionar a tecla Alt ou Option no teclado e você pode remover áreas de sua seleção. Shift para adicionar seleção e Alt ou Option tecla para excluir uma seleção ou remover partes da seleção. Às vezes também precisamos de algumas seleções irregulares, então usamos essa ferramenta Laço. Se você selecionar esta ferramenta polígono ou Laço, você pode ver como isso funciona basicamente. É assim. Basta clicar e combinar os pontos inicial e final, e ele faz uma seleção. Se eu quiser excluir, por exemplo, o canto inferior direito dessa forma, primeiro vou clicar com o botão direito do mouse e rasterizar essa camada. Como é uma camada de forma, ela não pode ser subtraída assim com seleção. Então eu vou selecionar minha ferramenta Laço polígono. Vou remover esta área e pressionar “Delete”. Certifique-se de que você selecionou a camada correta, caso contrário, ela não funcionará. Eu removi esta parte desta camada ou desta forma. Você pode ver como ele está olhando agora. Estas são maneiras diferentes nas quais usamos seleções e as usamos para subtrair, adicionar ou fazer seleções diferentes como essa. Às vezes precisamos de seleção para desenhar diretrizes. Se eu fizer uma seleção como esta e eu puder arrastar uma diretriz daqui, ela se encaixará automaticamente para sua borda. Vou deixar assim, assim e assim. Esta é outra maneira pela qual nossas seleções são muito úteis no design da interface do usuário. Eu acho que isso é tudo sobre seleções e seu uso em design de interface do usuário. Acho que quase discuti todos os cenários em que precisamos dessas seleções. Vamos passar para a próxima palestra. 25. Atalhos comuns no Photoshop: Nesta lição vou compartilhar com vocês alguns dos atalhos do Photoshop que usaremos muito tempo. Eu já preenchi minha tela basicamente, como esta é uma camada de texto e estas são ferramentas de forma. Um atalho comum é esta ferramenta V, que é a ferramenta mover. Você pode ver por aqui. Sempre que eu quiser mover um pouco da camada, eu vou pressionar este V. A camada que vai estar se movendo será a que eu selecionei a partir deste painel de camadas. Certifique-se de que você selecionou a camada correta aqui. Para selecionar a camada que você pode Control Clique sobre ela, ou você pode configurar esta seleção automática. Se você tiver esta configuração de seleção automática, você pode simplesmente clicar na camada e ela será selecionada assim. Você pode ver no painel de camadas assim que eu selecionar qualquer outra camada, ele simplesmente se move para aquela. Você pode usar ambas as opções. Você pode usar a seleção automática ou você pode desmarcá-la e usar a seleção Control Plus, o que é mais preciso na minha opinião. Agora, um é que queremos mover estes. Em segundo lugar, se eu quiser duplicar ou replicar uma das camadas, então eu vou replicar esta camada e eu vou pressionar Control J no meu teclado. Você pode ver que ele é convertido e replicado em outra camada retangular do mesmo tamanho. A segunda é que, se eu quiser agrupar todos estes que estaremos usando um monte de elementos de agrupamento de tempo. Assuma o controle e clique em todos estes, para que estes sejam selecionados. Pressione Control G para agrupá-los. Agora eles estão em um grupo e se eu tentar movê-los, eles estarão se movendo juntos. segundo problema é que, se você tiver auto select, selecione-o aqui e redefina para a camada. Em seguida, se o seu grupo estiver selecionado e você clicar aqui para movê-lo, você poderá ver qual é o problema. Você está basicamente selecionando automaticamente esta camada dentro deste grupo. Este é outro problema. Se algo acontecer como este, você tem que se certificar de que você selecionou grupo a partir daqui. Então você pode se mover assim. Às vezes, é melhor marcar esta seleção automática. Da mesma forma que duplicamos ou replicamos nossas camadas, também podemos replicar um grupo. Você pode ver agora o grupo está realçado. Eu posso pressionar Control G, que é o mesmo comando que replicar uma camada. Replicei o grupo. Há dois grupos. Este é um dos atalhos muito comuns que usaremos muito tempo. Agora, se eu quiser fazer uma seleção em torno de qualquer elemento ou qualquer camada. Para isso acontecer, vamos pressionar Control no meu teclado e se eu passar o mouse sobre qualquer uma das camadas, ele está girando para este cursor formigas marchando. Se eu clicar nele, você pode ver que esta ferramenta Eclipse foi selecionada, esta forma foi selecionada. Agora, se eu quiser mover a seleção ao redor, eu tenho que pressionar a tecla M no teclado ou este é basicamente o atalho para a ferramenta de seleção retangular. Se você tiver selecionado a ferramenta de seleção, certifique-se de que você tem esta primeira opção, a segunda e a terceira opções estão combinando e subtraindo a seleção. Primeira opção selecionada e você pode movê-lo assim. Às vezes, talvez precisemos desenhar diretrizes em torno disso assim. Preciso desta seleção para desenhar algumas diretrizes. Então eu vou desmarcá-la clicando uma vez assim. Estes são alguns atalhos, em seguida, alguns dos atalhos que estão relacionados ao alinhamento de algumas das camadas, que são muito necessárias. Temos que usá-los muito. Deixe-me mover algumas camadas e mudar a forma. Agora você pode ver que eu acabei de reduzi-lo. O que eu realmente pressionei foi, pressionei Control T para dimensioná-lo, que é uma tecla de atalho para dimensionar ou girar objetos. Pressionei o Control T e agarrei uma das alças e apertei assim. Se quiser dimensioná-los proporcionalmente, selecione Shift no teclado. Se eu selecionar uma dessas alças, você pode ver que estou pressionando Shift para que ela esteja se movendo em proporção. Está a escalar proporcionalmente. Se você selecionar Alt e Shift e, em seguida, dimensioná-lo ou dimensioná-lo para cima ou para baixo, você pode ver o efeito. Ele mudou a escala de um lado para um local central. Agora ele está escalando de toda a forma, de todos os lados igualmente. Isso é pressionar Alt e Shift no teclado e, em seguida, arrastá-lo assim. Estes são os atalhos para dimensionamento. Se você quiser habilitar mais atalhos ou precisar fazer algo mais, o botão direito do mouse nele enquanto essas alças estiverem ativas. Você pode usar esses flip horizontal, flip vertical, girar 180, ou inclinar, distorcer, e algo como essas mais opções. Mas na maioria das vezes podemos não usá-los. Agora eu tenho duas camadas como essa e eu quero alinhá-las do topo, eu vou selecionar as duas. Esta camada, e esta camada, você pode selecioná-los a partir daqui pressionando Control. Vou usar este top para alinhá-los. Basicamente, não usamos essa linha superior a maior parte do tempo, mas usamos as teclas de atalho, se você se lembra, eu configuei no meu tutorial de atalhos personalizados, que é um pouco mais cedo nesta série de lições. Agora, ambos desselecionados, vou selecionar um deles e vou movê-lo. Agora, se eu selecionar ambos e eu quero que eles estejam no centro ou alinhados horizontalmente, eu vou pressionar “Control”, “Alt” e “H”. Agora você pode ver que ambos estão alinhados no centro desta tela ou quadro de arte. Agora, se eu quiser mover um deles, eu vou selecionar a camada a partir daqui, e eu posso movê-la ao redor. Se você quiser que eles se movam em uma linha, você pode pressionar “Shift” e você pode ver agora que ele está mantendo seu lugar. Ele não está se movendo em uma posição aleatória. Pressione “Shift” enquanto arrasta para cima ou para baixo, para que ele mantenha sua localização atual ou, se estiver no meio, ele permanecerá no meio da tela. Esta é uma opção. Agora você pode ver se eu quero que eles estejam nos centros verticais, eu vou agrupá-los. Agora você pode ver que eu não tenho nenhuma camada de fundo aqui. Todos esses alinhamentos funcionam com dois objetos. Devo ter outro objeto. O que eu vou fazer é pressionar “Control A” para selecionar toda a tela, e agora vou alinhar esse grupo. Você pode ver assim que eu selecionei isso, as opções de alinhamento superior estão habilitadas. Vou pressionar “Control”, “Alt” e “V”. Agora você pode ver que eles estão alinhados verticalmente. Vou escondê-los, que você possa vê-los claramente. Ambos estão alinhados verticalmente no meio deste quadro de arte. Agora vou desselecioná-lo pressionando M e clicando uma vez aqui. Estes são os atalhos comuns que vamos usar a maior parte do tempo. Agora alguns dos atalhos que você pode aprendê-los a partir daqui, você pode apenas clicar nele aqui e você pode ver Lasso Tool. Isso também é usado para seleção. Você pode ver que vamos usar alguns destes como esta ferramenta Caneta, ferramenta Texto, e então esta Ferramenta de Seleção de Caminho, que é uma tecla de atalho, estas Ferramentas de Forma que nós vamos usá-los muito, ferramenta Rectangular para Você. Estes são todos os atalhos. V para esta Ferramenta Mover, voltando a este cursor. Estes são os atalhos que usaremos muito tempo. Agora, mais um atalho. Nós o configuramos em nossa lição personalizada de atalho do Photoshop. Agora vamos usá-lo. Por exemplo, se eu quiser converter essas duas camadas em um objeto inteligente. Vou discutir o objeto inteligente mais tarde, então não se confunda ou se preocupe com isso. São basicamente cores um pouco opostas e estão vibrando. Agora eles estão prontos para ir. Agora estas são as duas camadas que eu vou fazer um objeto inteligente com as duas. Vou selecionar os dois. Vou pressionar “Alt F5" para objeto inteligente. Era a nossa tecla de atalho. Agora você pode ver que seu ícone foi alterado aqui, este ícone de miniatura. Você pode aumentar o tamanho da miniatura a partir daqui, indo para Opções do painel e você pode aumentar o tamanho assim. Agora você pode ver que eu aumentei o tamanho, mas quando projetamos designs de interface do usuário, temos muitas camadas, talvez mais de 100 camadas. Não usamos miniaturas muito maiores. Podemos usar este ou talvez este. Agora, algumas das opções extras que você pode obtê-los a partir daqui, clicando com o botão direito em qualquer uma das camadas como estas; Exportação Rápida como PNG, Exportar como, Converter para Objeto Inteligente. Mas eu prefiro usar alguns dos atalhos de teclado que são muito úteis e nós os usamos muito. Mais um restante que nós configuramos em nossos atalhos personalizados, que era Tile All Vertically. Agora, como vamos usá-lo? Devemos ter um ou dois arquivos abertos para o Photoshop. Vou abrir um novo arquivo, um novo quadro de arte aqui. Basicamente, agora estou trabalhando em dois quadros de arte. Se eu mudar daqui para aqui, não consigo ver o que eu tinha neste. Agora, para vê-los claramente ou arrastar um objeto de uma tela para outra, vou usar Alt, Control e F10, e você pode ver como o Photoshop os colocou em mosaico verticalmente. Agora, se eu clicar neste quadro de arte, você pode ver esta camada ou este objeto inteligente foi selecionado. Se eu quiser arrastá-lo até aqui, eu posso arrastá-lo e colá-lo. Agora você pode ver que foi copiado no próximo quadro de arte. Mas o problema é que ele perdeu sua localização atual, e este quadro de arte está onde ele estava. Esse local era um pouco acima. Agora, se eu quiser manter o mesmo local, eu vou pressionar “Shift” enquanto arrastá-lo. Pressione “Shift” enquanto o arrasta e solte-o. Agora você pode ver que ele atingiu sua posição atual. Agora é assim que trabalhamos em várias telas, e se eu quiser arrastar algumas imagens ou algo de uma tela ou um quadro de arte para outra. Agora eu acho que eu quase terminei essas teclas de atalho. Mais um, pressione Control plus para ampliar e pressione Control menos para reduzir o zoom. Por exemplo, ampliei meu design e quero arrastá-lo um pouco para a direita ou para a esquerda. Se eu tentar arrastar com o cursor do mouse, ele vai mover esta camada ou objeto inteligente rodada. Eu não quero isso, eu quero chegar aqui, deixar esta área visível. Eu vou pressionar barra de espaço e continuar pressionando e então eu vou arrastá-lo assim. Agora podem ver que me mudei para o canto superior esquerdo do meu quadro de arte. Às vezes, é assim que nos movemos quando ampliamos nosso design. Isso também é muito comum ampliar, diminuir zoom e, em seguida, mover sua tela. Agora eu acho que a maioria desses atalhos já foram discutidos. Acho que estamos prontos para passar para a próxima palestra. 26. Como usar máscaras de camadas no Photoshop: Nesta lição, eu vou falar sobre a Máscara de Camada. A máscara de camada é outra técnica para ocultar partes diferentes de seus elementos de design de interface do usuário, ou às vezes áreas de herói ou imagens usadas em áreas de herói de sites. Vamos começar a aprender, está bem? Eu já abri uma imagem aqui no Photoshop. Agora vou clicar duas vezes na “Camada de Fundo” para torná-la Camada Simples. Eu vou clicar neste pequeno ícone aqui é “Adicionar”, se você passar o mouse sobre ele ele vai ler como Adicionar máscara de camada. O que ele faz é que, assim que você ativar esta máscara de camada, certifique-se de ter clicado nela. Então este está ativo, não este. Você pode ver que há barras laterais retangulares em cima. Então deve estar ativo aqui assim. Então você pode pegar sua ferramenta Pincel ou qualquer outra ferramenta e você pode começar a pintar aqui. Você pode ver que minha cor primária está definida como “Preto” e minha cor de fundo cor de primeiro plano é “Preto” e cor de fundo é “Branco”. Agora estou pintando com preto. Qualquer área que eu vou pintar com preto, basicamente, apenas tenha em mente que o preto vai esconder tudo. Então a escuridão esconde tudo e o branco mostra tudo. Vou ajustar o tamanho do meu pincel um pouco mais. Estou pressionando “Teclas de suporte” no teclado. É um atalho para aumentar e diminuir o tamanho da ferramenta de pincel. Ok, agora, mais uma coisa você tem que ver que esta opacidade está definida para “70 por cento”. Então, se você quer se esconder totalmente, então você tem que configurá-lo para um “100 por cento”. Então, sempre que eu escovei aqui, ele vai esconder tudo. Agora mais uma coisa, se eu quiser ver que ponta de pincel estou usando, eu tenho que clicar aqui. Você pode ver que não é um pincel duro, é um pincel macio com cantos emplumados. Então nós vamos “Selecionar” qualquer um deste difícil. Então você pode ver agora a diferença. Ok, vamos acabar com toda esta área aqui, cadeira também. Ok, eu não vou entrar em detalhes de obter uma imagem totalmente pronta para sua área de herói ou edição de imagens e limpar seus fundos. Mas esta é a técnica básica. Você pode ampliar e ver diferentes áreas e aumentar ou diminuir o tamanho do pincel para obter mais precisão como esta. Mais uma coisa é que ao usar máscara de camada é não destrutivo. Por exemplo, se eu simplesmente clicar acidentalmente aqui e remover esta área e querê-la de volta, então eu vou apenas mudar essas cores e eu vou pintá-la com branco. Então você pode ver agora minha cadeira está de volta. Posso limpar uma imagem como esta. Você pode pressionar “X” para mudar as cores. Você pode ver aqui enquanto eu estou pressionando “X”, eles estão trocando um com o outro. Então eu vou clicar novamente na “Cor Preta” e selecioná-la e pintá-la assim. Esta é uma técnica muito básica para limpar imagens assim. Isso é chamado basicamente máscara de camada. Você pode ver sua imagem desativando máscara de camada e você pode ver a imagem inteira como esta e você pode habilitá-la de volta. Isso realmente nos ajuda algumas vezes quando temos que limpar imagens ou esconder algumas partes das imagens. Nós também podemos fazer algo assim como eu vou selecionar esta área, por exemplo, este até aqui. Eu posso selecionar minha “Ferramenta de Balde de Pintura” e eu apenas clicar aqui e esconder tudo. Então, basicamente, deixei cair a cor preta aqui. Então, às vezes, podemos precisar fazer algo assim para esconder a área retangular ou subtrair alguma área de alguma imagem ou algo assim. Então usamos técnica rápida. Não pegamos nossa ferramenta de pincel e continuamos pintando e pintando. Fazemos uma seleção, pegamos nossa ferramenta de balde de pintura e soltamos a cor preta aqui. Então eu acho que isso é tudo sobre máscara de camada e espero vê-lo na próxima palestra. 27. Como usar a máscara de corte: Nesta lição, vou falar sobre a Máscara de Recorte. Vamos ver o que é a máscara de recorte e como a usamos em nosso processo de carga de trabalho de design de interface do usuário. Então, basicamente, a Máscara de recorte funciona como uma Máscara de camada. Portanto, seu objetivo é basicamente esconder algumas partes da camada ou uma imagem. Deixe-me mostrar-lhe como funciona por um exemplo. Eu tomei esta ferramenta Eclipse, pressione “U”, e eu desenhei este eclipse pressionando Shift para mantê-lo em proporção. Eu vou para a linha central assim. Agora, eu vou trazer algumas imagens grátis só para a demonstração. Por exemplo, essa imagem, eu vou apenas arrastá-la para o Photoshop assim. Basicamente, é um objeto inteligente agora, então eu vou redimensioná-lo, pressione “Enter”. Agora, esta imagem está no topo do eclipse, o eclipse está por trás desta camada. Então, o que basicamente Clipping Mask faz, ele irá conter esta imagem neste eclipse. Como vamos fazer isso? Pressione “Alt” no teclado e mova o cursor aqui entre essas duas camadas. Então a parte inferior é basicamente o recipiente e a parte superior é basicamente a parte que queremos mostrar. Então, entre o recipiente e a camada base, vamos segurar “Alt” e clicar uma vez. Agora você pode ver que ele está mostrando apenas a parte dessa imagem, que está basicamente dentro deste eclipse. Então eu posso facilmente mover, arrastar e mover isso, e é assim que nós criamos diferentes imagens de avatar e diferentes imagens de perfil em nossos sites em nosso design de interface do usuário. Então, basicamente ferramenta Eclipse, podemos usar qualquer forma aqui. Podemos usar esta ferramenta nesta técnica de Máscara de recorte de muitas maneiras. Espero que tenha gostado da minha lição e aprendido algo novo. Vamos passar para a próxima palestra. 28. Exercício de Challange → Máscara de: Olá a todos e bem-vindos ao meu novo desafio. É basicamente um desafio de prática para máscara de recorte. Eu só usei máscara de recorte neste exemplo, então tente criar o mesmo efeito com máscara de recorte. Deixe-me lhe dar algumas dicas. Esta é basicamente uma imagem dentro de uma máscara de recorte, e essa cor preta que você pode ver, é outra forma por trás dela. Agora esta é fonte Open Sans e este é um botão e esta área também é cortada. Tente produzir algo assim com máscara de recorte, e eu vou postar a solução na próxima palestra. Vejo-te em breve. 29. Como usar objetos inteligentes no Photoshop: Nesta palestra, vou mostrar-lhe o uso de objetos inteligentes e como vamos usá-lo em nosso design de interface do usuário, e quais os benefícios que ele pode nos fornecer com design de interface do usuário. Deixe-me começar com a criação do botão de símbolo primeiro. Se eu fizer um botão como este, deixe-me mudar sua cor para azul para que seja facilmente visível. Agora, vou pressionar Shift. Agora, este é um botão simples. Vou selecionar os dois para alinhar. Agora, uma maneira de agrupá-lo, vamos pressionar Control G para agrupá-lo e movê-lo. Nós também pode duplicá-lo pressionando a tecla Alt e movê-lo ao redor. Temos dois grupos duplicados, e eles são basicamente os mesmos. E se eu quiser que ambos mudem simultaneamente? Se eu tiver três ou quatro botões e eu quiser mudar sua cor, eu tenho que ir para cada camada e mudar sua cor novamente e novamente. Para evitar isso em nosso design de interface do usuário, onde podemos ter simplesmente um controlador primário ou um botão primário que será duplicado em toda a nossa interface de interface de usuário, para facilitar, podemos converter este grupo, clique com o botão direito do mouse sobre aqui no painel Camadas e Converter em Objeto Inteligente ou use Alt F5, que era nossa tecla de atalho personalizada. Basicamente, agora, ele foi transformado em um objeto inteligente. Agora, como vamos usá-lo em nosso design de interface do usuário? Primeiro, vamos duplicar três ou quatro vezes. Você tem a idéia quando eu mudo alguma coisa. Se eu quiser alterar todos esses quatro botões, que estão no meu, por exemplo, web design ou aplicativo web em locais diferentes, clicarei em qualquer pessoa, selecionarei alguém, clique duas vezes neste Painel de Camada e Agora você pode ver que eu tenho as duas camadas aqui. Agora, se eu quiser mudar alguma coisa, por exemplo, eu mudo sua cor para talvez amarelo ou laranja, ou azul escuro, cor azul maçante, eu vou pressionar “OK”, e eu vou fechá-lo e salvá-lo, “Sim”. Agora, todos os objetos inteligentes copiados ou duplicados têm a mesma cor do botão. Esta é uma maneira de gerenciar nossos botões onde temos quatro ou cinco, ou talvez diferentes mesmos níveis de botões. Se os botões são os mesmos, podemos usar este objeto inteligente para gerenciá-los facilmente. Um outro exemplo ou uso desses objetos inteligentes é, por exemplo, temos caixa de conteúdo como este e temos texto escrito nele, por exemplo, “Eu sou uma caixa de conteúdo”, algo assim. Deixe-me acrescentar algo mais a ele, como isto. Agora, você pode ver que está se tornando uma caixa de conteúdo. Eu vou agrupá-los e eu vou criar um objeto inteligente pressionando Alt e cinco. Agora, é um objeto inteligente. Agora, se eu duplicar, talvez três vezes assim, deixe-me apagar todos os outros para não ficarmos confusos. Agora, eu duplicei em três caixas de conteúdo diferentes. Você pode ter visto esse padrão em muitos sites onde temos três caixas de destaque ou três recursos do nosso produto ou algo assim. Na maioria das vezes, eles têm apenas um elemento como ícone mudando em todos eles e o padrão é quase o mesmo. As cores e os tamanhos da fonte, tudo é igual. Apenas para ilustrar o exemplo: se eu quiser alterar o conteúdo deste ou cor deste, eu vou selecionar isso e apenas mudar sua cor para amarelo, ou talvez cinza, ou cinza claro. Vou pressionar “OK”, e “Sim”, salve. Lá vamos nós. Este é outro uso de objetos inteligentes. Normalmente, ele não é usado talvez por causa do problema que não podemos ter conteúdo diferente nos objetos inteligentes. Eu aconselho você que não use texto ou outro conteúdo, que vai ser alterado nos objetos inteligentes. Se você precisar criar um objeto inteligente, basta manter as camadas e estilos de fundo e excluir o texto para que o conteúdo possa ser alterado em todos eles. Agora, eles estão prontos para ir. Eu acho que você entende a idéia de que não usar qualquer elemento ou camada que vai ser diferente em outros objetos. Um uso é este. Outra coisa é que você também pode criar uma cópia deste objeto pressionando o botão direito do mouse e “Novo objeto inteligente via Copy”. Quando você cria um novo objeto inteligente via cópia, eles não são anexados um ao outro. Eles são é irrelativo. Se mudar de cor aqui, como esta, só será mudada neste. Todos os três, eles estão ligados, mas este é diferente porque foi criado por este Novo Objeto Inteligente via Copiar. Criamos outra cópia e era um novo objeto inteligente, então eles não estão vinculados. Isso é tudo sobre objetos inteligentes e como os usamos em nosso design de interface do usuário. Nunca, nunca coloque seu conteúdo que é editável, ou mudar, ou vai ser alterado em todos os outros objetos inteligentes. Basta manter os fundos e cores de fundo e estilos ou sombras neste objetos inteligentes. Eles são úteis e você pode usá-los em seus projetos de design de interface do usuário. Isso é tudo sobre objetos inteligentes. Espero que tenha aprendido algo novo. Vamos passar para a próxima palestra. 30. Objetos inteligentes com link no Photoshop: Nesta lição, vou falar sobre Objetos Inteligentes Vinculados e onde eles são úteis. Normalmente, quando usamos Objetos Inteligentes Vinculados, eles são basicamente para os aplicativos ou sites onde temos que projetar quatro ou cinco páginas diferentes do mesmo aplicativo ou mesmo site. O que nós vamos basicamente usá-los para é, por exemplo, eu tenho este site e eu estou projetando a página principal dele. Por exemplo, eu apenas crio um cabeçalho rapidamente aqui. Eu tenho esse arquivo de cabeçalho e eu tenho links diferentes aqui sobre nós. Deixe-me matar esta camada. Agora, eu vou usar minha ferramenta de texto, pressione Shift para que ela não siga essa camada ao redor. É independente desta camada. Clique uma vez e aqui temos, sobre nós, em seguida, entre em contato conosco, e, em seguida, produtos. É apenas um site fictício, então não se preocupe com layout ou qualquer outra coisa. É apenas para lhe dar o conceito de como vamos usar Objetos Inteligentes Vinculados em nossos projetos. Estes são três links. Deixe-me colocar um logotipo fictício aqui. Este é o nosso logótipo. Agora, primeiro o que vamos fazer é que vamos salvar esse cabeçalho, todos esses links, e esse fundo em um Objeto Inteligente. Primeiro, você precisa convertê-lo em um Objeto Inteligente e, em seguida, você precisa convertê-lo em Objetos Inteligentes Vinculados. Você verá a opção converter para vinculado. Quando você clicar nele, ele lhe dará uma opção para salvar este arquivo. Basicamente, o que estamos fazendo é que estamos salvando essa parte do nosso design em outro arquivo para que possamos incorporá-lo em todos os arquivos que estamos projetando. Se fizermos mudanças em um deles, ele será mudado em todos eles. Deixe-me mostrar-lhe apenas por um exemplo. Eu o salvei com o nome Ellipse 1. Agora vou salvar esse arquivo do Photoshop. Por exemplo, vou salvá-lo na área de trabalho agora. Minha área de trabalho é muito bagunçada, mas você tem que suportar comigo. Damos o nome de “mainpage”. Mainpage está bem. Agora, dê-me um título aqui para sabermos que é a página principal. Mainpage aqui. Vamos pintá-lo de preto. Então, página principal ou página de maing, não importa. Agora, eu vou abrir um novo arquivo das mesmas dimensões e eu vou colocar ligado aqui. Quero colocar o mesmo cabeçalho aqui. Agora este é o arquivo que eu salvei Ellipse 1, que era basicamente o cabeçalho. Agora você pode ver que foi colocado aqui. Eu posso movê-lo para cima porque estava no topo, e eu vou pressionar “Enter”. Agora, você pode ver que ele foi importado aqui. Se eu vou salvar isso como nossa página de produtos, ok, agora isso é basicamente página de produtos. Deixe-me corrigir esse r. Agora, esta é a nossa página de produtos, e estas são algumas imagens de produtos. Esta página é um pouco feia, mas eu acho que está tudo bem para conseguir o que vai fazer agora. Agora vou salvá-lo como nossa página de produtos. Durante o meu projeto, pensei que eu deveria ter mudado esta cor para talvez verde. O meu logótipo foi alterado. Vou guardá-lo, aperte “OK”. Agora você pode ver que ele já foi alterado automaticamente no outro arquivo. Mas e se eu estiver usando apenas ou eu tiver aberto apenas um arquivo? Estou trabalhando na página principal e o outro arquivo está, agora, não abrindo o Photoshop. Eu clico nisso, e mudo a cor de fundo para azul ou talvez amarelo, ou talvez cinza, ou talvez cinza escuro, um pouco de cinza. Vou mudar a cor da elipse para esta, talvez esta. Agora vou salvá-lo e clicar em “Sim”. Você pode ver que foi alterado neste arquivo que já foi aberto, é o arquivo mainpage.psd. Se eu fechá-la e abrir minha página de produtos, deixe-me abrir minha página de produtos. Agora você pode ver aqui temos o design antigo, ele não foi atualizado. Mas você pode ver um ícone amarelo aqui no seu Ellipse Link Smart Object. botão direito do mouse nele, não na miniatura, mas na camada e você pode ver as opções: Atualizar Conteúdo Modificado ou Atualizar Todo o Conteúdo Modificado. Clique nele e você está pronto para ir. Agora, esta é uma característica muito legal do Photoshop. Você pode usá-lo em seu design de cabeçalho ou em seu design de rodapé de seus sites porque eles normalmente permanecem os mesmos em todas as páginas. Ou mesmo se você estiver projetando um aplicativo, você tem quase os mesmos fundos de cabeçalho ou rodapé, ou algumas das camadas de todos eles. Isso é basicamente o uso de Objetos Inteligentes Vinculados. Vamos passar para a próxima palestra. 31. Como usar comps de camadas no Photoshop: Hoje, vamos aprender sobre composições de camada. Neste curso, esqueci-me de incluir esta lição. Então, vamos aprender o que as composições de camada são e como vamos usá-las no design de interface do usuário. Vamos começar. O que comps camada é, basicamente, eles são diferentes composições de camada e podemos mudar de uma para outra. Se você não vir nenhuma janela Composições de Camada, vá para Janela e clique em Composições de Camada aqui. Isto é basicamente o painel de janela Layer Comps aqui. Agora, o que vamos fazer é criar um único botão com estados diferentes. Como quando você passa o mouse sobre um botão em um site, ele muda sua cor. Então, cada botão, quando você projetar quaisquer dados de interface do usuário em diferentes estados, como botão desabilitado , e pairar, e botão pressionado, vamos criar três estados. Um é simples botão, em seguida, passar o mouse e, em seguida, desativar. Eu usei um retângulo arredondado. Use esta cor, qualquer cor que você quiser. Então, vamos usar apenas algum texto sobre ele, Button Normal. Assim, e então, vamos alinhá-los. Vamos alinhá-los assim. Só mexa no meio. Você os agrupa para que eles sejam fáceis de alinhar, assim. Agora, este é o nosso Button Normal, btn-normal. Em seguida, duplicar este grupo, Controle G. Então, temos estado de pairar. Agora, no estado de foco, selecione esta camada e nós vamos mudar seu brilho um pouco acima, 100 por cento, assim. Você pode ver aqui é o normal, aqui está o botão de pairar. Então, vamos usar o botão desativado. Alguns usam os pontos e vírgula assim. Passar o estado do botão assim, e o estado normal do botão assim. Agora, vamos usar comps de camada. Acho que esqueci de estilizar este botão desativado. Nós vamos usar esta cor cinza para o botão desativado, e eu acho que tudo está parecendo bem. Isso está desativado e isso está pairando e isso é normal. Apenas, eu acho que devemos fazer o botão normal um pouco mais escuro porque ele não está olhando muito diferente do nosso estado hover. Agora, temos três botões. Agora, vamos criar uma composição de camada como esta. Podemos incluir visibilidade, posição e aparência, três propriedades de camadas. Se eu mudar a posição, ele irá mostrá-la em outra composição de camada. Neste momento, acho que a visibilidade e a aparência são mais do que suficientes. Vamos usar este estado normal. Então, vamos criar outro com o estado de pairar. Então nós estamos indo para, hover state tem algo como isso, então nós vamos atualizá-lo assim. Este é o nosso estado de flutuação. Então, vamos usar um deficiente e este vai ser estado desativado. Então isso é desativado, isso é pairar, e isso é normal. Você pode ver sempre que eu mudar de uma composição de camada para outra, ele muda ou esconde as outras duas camadas. Então eu não preciso escondê-los daqui, um ao outro. É assim que usaremos composições de camada no design da interface do usuário. Podemos ter um menu suspenso como esse. Se alguém clicar em nosso menu assim e, em seguida, mostramos o menu suspenso. Isso é normal, e então, isso é suspenso, algo assim. Agora, se você quiser exportar suas composições de camada para arquivos diferentes, você também pode ir para este arquivo e exportar. Em seguida, você pode clicar nesta Camada Comps to Files. Agora, você pode selecionar o destino para onde deseja exportá-los. Posso exportá-los na área de trabalho e pressionar “OK”. Então, eu vou nomeá-lo botões e tipo de arquivo será PSD, e pressione “Executar”. Todos os três estados foram convertidos para arquivos PSD. Você pode ver aqui Botão 000 normal, Botão 0001 estado hover, e Botão 0002 estado desativado. Então, se eu abrir isso, você pode ver que ele tem apenas o estado desativado. Mais uma coisa é que o Photoshop salva todas as outras camadas com ele também. Então, certifique-se de que isso não é o que você quer. Eu acho que eles são desnecessários, mas ainda assim, eu não sei qual é a lógica por trás disso. Então é assim que essas composições de camada funcionam e como você exporta diferentes composições de camada para diferentes arquivos PSD. Isto é tudo sobre composições de camada hoje e espero que tenham gostado desta palestra. Vamos passar para a próxima lição. 32. Como dominar os efeitos de camada de sombra: Nesta lição, vou mostrar-lhe como usar os efeitos da camada Sombra Solta e como criar botões com ele. Então eu vou criar um retângulo arredondado com raio de canto de quatro pixels. Eu vou desenhar um grande para que você possa facilmente ver os efeitos. Vou selecionar esta cor verde. Agora, eu selecionei esta camada. Eu vou para Camada, e depois Efeitos de Camada, ou você pode clicar nesta camada e então você pode ver o ícone fx aqui, clicar nele e clicar em “Sombra Solta”. Agora você pode ver que eu coloquei minha sombra assim. É uma sombra muito sutil. Basicamente, este é o modo de mesclagem da sua sombra. Não usamos nada além do normal. É melhor porque temos que converter nossas camadas para CSS. Então temos Global Light, que é basicamente a Photoshop Global Light, onde a luz está chegando no topo 90 graus. Então, se eu mudá-lo aqui e eu tiver outra camada, todas as sombras serão ajustadas a esta luz global. Portanto, se você quiser criar um botão personalizado, desative esse botão e você pode mover a sombra para onde quiser. Eu vou destacar a sombra para que você possa ver como ela está se movendo. Agora, se eu mudar a distância da sombra, você pode ver o quão longe ela está indo do topo desta camada porque a luz está aqui. Então, se eu mudar a direção da luz, a sombra também mudará. Além disso, isso é espalhado, que é basicamente o quanto ele vai se espalhar. Então nosso tamanho é 25 e spread é 100%. Então é uma sombra opaca. Portanto, normalmente não usamos essa opção de spread. Nós ajustamos apenas a distância, tamanho e o ângulo. Mais importante ainda, esta opacidade para criar diferentes efeitos de sombra. Então eu vou mudar o tamanho. Então você pode ver agora que está um pouco mais borrada. Eu vou movê-lo para cima e opacidade um pouco mais, e eu vou mudar o ângulo para 85. Agora, você pode ver como somente esse efeito de sombra cria muita profundidade em seus botões e diferentes elementos de design gráfico. Agora, mais uma coisa no Photoshop CC 2015, você pode aplicar mais sombras como eu apliquei outra agora. Vou torná-lo um pouco mais escuro. Vou mudar o ângulo para 90. Algo como isto. Agora você pode ver que eu tenho várias sombras e eles estão criando um efeito muito distinto, e a luz está vindo do topo. Tudo isso é sobre sombras e acho que aprendeu algo novo. Vamos passar para a próxima palestra. 33. Como usar o efeito de camada de sombra: Olá pessoal. Nesta lição, vou lhe dizer algo sobre sombras internas. Vamos ver como essas sombras internas funcionam com nossos botões em diferentes elementos de interface do usuário. Agora, vou começar a partir da última palestra. Vou aplicar um novo efeito que é a sombra interior. Agora, basicamente é sombra interna, mas nós a usamos de maneiras diferentes. Agora você pode ver aqui temos o modo de mesclagem definido para tela, mas você pode usar normal se você quiser. Você pode alterar a opacidade. Você pode ver que eu selecionei a cor branca. Então, ele está basicamente vindo para dentro do ângulo 145. Vou mudar o ângulo para 90, que é principalmente o que usamos em nosso design de interface do usuário, quase 99,99 por cento. Então deixe-me reduzir a opacidade e o tamanho para 2 pixels. Agora você pode ver que tem um efeito um pouco nervoso, é um pouco elevado aqui. Então é assim que usamos nossa sombra interior. Eu tenho que reduzir o tamanho para zero também, porque o tamanho é basicamente o borrão, você pode ver o borrão em nossa sombra interna. Então eu estou basicamente usando 1 pixel ou menos do que isso, e eu estou usando cor branca. Foi assim que apliquei a minha sombra interior. Todas as outras coisas são basicamente as mesmas que te falei na minha palestra anterior, que é sombra de gota. Então o ângulo de opacidade e tudo o resto é o mesmo. As diferenças que sombra interna vai vir de dentro da forma. Não vai cair da forma. Tudo isso é sobre sombra interior. Vamos passar para a próxima palestra. 34. Como usar o efeito de camada de camde: Olá a todos. Agora vou discutir agora sobre o efeito da camada de traçado. Em nosso design de interface do usuário, geralmente usamos sombras internas, sombras e efeitos de traçado em combinação para criar diferentes botões e diferentes elementos de interface do usuário de efeitos. Agora vamos adicionar outro efeito que é basicamente acidente vascular cerebral. Então acidente vascular cerebral tem na verdade três tipos diferentes, fora e dentro e, em seguida, temos no centro. Normalmente usamos fora e algum tempo dentro. Então você pode usar o efeito que quiser. Você pode selecionar uma cor que seja um pouco mais clara ou mais escura do que a cor original do botão. Então agora eu vou selecionar uma cor um pouco mais escura aqui. Eu reduzi o brilho da cor basicamente. Primeiro era como 65 por cento, e agora eu reduzi para quase 60 por cento. Se você reduzi-lo para 55 por cento, será uma representação muito mais clara do efeito de traçado. Então, se eu aumentar o tamanho, você pode ver que o tamanho está aumentando dentro do botão. Estes são diferentes modos de mistura e nós não vamos usar a maioria deles. Então nós podemos estar usando essa opacidade, mas eu acho que você não deve mexer com esse modo de mistura e opacidade. Agora, algumas pessoas usam esse gradiente sobre este efeito de traço. Eu não recomendo porque acho que não podemos representar esse efeito de gradiente em nossa codificação CSS ou HTML. Então, será muito difícil para os codificadores desenvolver puramente CSS ou botão codificado como esse. Então evite usar gradientes basta usar cor e configurá-lo para dois ou quatro pixels e eu acho que vai ser muito bom efeito se eu mover sombra interna um pouco mais para dentro, assim. Agora você pode ver como está se saindo. Isso é tudo sobre o golpe de efeitos, agora vou passar para a próxima palestra. 35. Reusando estilos de camadas: Vamos falar sobre a reutilização de estilos de camada. Então eu apliquei alguns estilos de camada para esta caixa. Então, se eu quiser reutilizá-los ou aplicar a qualquer outra camada ou em qualquer outro projeto, eu ainda poderia precisar produzir esse efeito de sombra uma e outra vez. Preciso salvar esse estilo de camada. Então, como posso fazer isso? Vá para este painel de camada, selecione a camada Eu apliquei os estilos de camada. Clique duas vezes sobre esses efeitos. Agora, vocês podem ver que há um botão aqui, “New Style”. Então, se você clicar nele, eu posso nomeá-lo como Soft Shadow, e eu posso apenas clicar nele “OK”, e ele é adicionado aos meus estilos. Então, como eu posso acessá-lo, eu deveria ir para o Styles. No último, se você passar o mouse sobre ele, você pode ver que esta é a única sombra suave que eu acabei de salvar. Então, se eu quiser aplicá-lo a qualquer outra camada, eu vou apenas desenhar qualquer outra camada apenas para mostrar como aplicá-la a esta. Eu vou clicar sobre isso e você pode ver como esta sombra suave foi aplicada a esta camada. Então isso é muito importante se você quiser salvar seus estilos que você vai usar uma e outra vez como essas sombras e sombras internas. Então use isso. Uma dica, tenha em mente que sempre use preto e branco em seus estilos de cores para salvar. Então, eles podem ser aplicados a qualquer camada. Se você usar cores como azul, cinza ou laranja ou algo assim, você não pode aplicar a nenhuma camada. Agora, você aprendeu a reutilizar os estilos de camada, vamos passar para a próxima palestra. 36. O que são gradientes de gradiente?: Primeiro vamos falar sobre alguns gradientes. Então, quais são os nossos gradientes? Gradientes são simplesmente a mistura de duas cores ou talvez mais de duas cores. Então aqui eu abri um site só para explicar o conceito. Agora temos cor azul no lado esquerdo e outra cor cinza escura no lado direito. Então deixe-me misturá-los. Agora este é o gradiente. Eu criei um gradiente usando essas duas cores. Isto é basicamente gradiente parar onde quanto uso da cor do lado esquerdo ou direito. Então, se eu arrastá-lo até aqui, você pode ver que a cor acinzentada direita é dominante e ficando dominante. Se eu tentar arrastá-lo até aqui, então a cor mais clara esquerda do azul é um pouco dominante. Então você pode experimentar este site. Incluirei o link nos recursos. Então, basicamente, você pode experimentar diferentes esquemas de cores como estes. Uma cor afiada e uma maçante, estou misturando agora. Não misture duas cores opostas ou duas cores muito diferentes. Como se eu tivesse misturado estes verdes uns com os outros. Você pode ir de azul para cinza, e até mesmo como este maçante, e um é cor laranja. Você pode ver que é uma combinação muito estranha. Então, se eu misturar como as duas cores, eles vão fazer uma combinação muito boa como esta. Então eu vi esse uso em muitos sites. Então, vamos discutir na próxima lição, onde muitos designers de interface do usuário e profissionais da web e designers de interface usam essa mistura ou gradientes em seus designs. 37. Uso de gradientes no design de Ude: Agora, vejamos alguns dos exemplos de uso de gradientes em web design e projetos de páginas de aprendizagem. Então este é basicamente o site Stripe e você pode ver que eles misturaram essas duas cores laranja e roxo e parece incrível. Então este é um uso e deixe-me mostrar-lhe mais alguns exemplos. Agora, aqui temos este botão “Comece de graça”. Agora, o designer usou esse gradiente desta cor azul nítida para uma cor azul um pouco mais escura. Então, parece muito único. Eu tenho mais alguns exemplos como este, site QuickBooks Online. Então, se você clicar sobre este geral, este “Try It Free”, há também um uso de gradiente aqui nestes botões. Em seguida, este botão também tem gradiente. Mesmo este botão branco tem gradiente de branco para cinza. Então é assim que os designers usam gradientes e ficam muito bonitos em designs e atraem os olhos dos usuários. Então aqui temos outro uso muito único de gradientes. Você pode ver neste site Sprout Video, eles têm usado gradientes de uma forma muito criativa e ele realmente entra no design. Então este é um uso nos botões. Então você pode ver nesta área de conteúdo, eles usaram este gradiente a partir desta direção, deste ângulo. Então nós temos uma cor afiada aqui e um pouco de cor maçante aqui. Esta é a mesma técnica que te disse na lição anterior. Que se você quiser misturar duas cores, não vá em muita variedade de cores, basta misturar as cores que já estão mais próximas umas das outras. Neste site, eles usaram dois verdes. Um é um pouco verde amarelado, e outro é um pouco verde maçante. Então você pode ver o quão dramático e bonito efeito pode criar. Então, para começar, basta ter em mente que não misturam muitas cores ou ficam selvagens com seus gradientes. Basta ter em mente dica simples que você precisa usar apenas as cores que estão correlacionadas e muito próximas umas das outras. Vimos alguns exemplos como este. Agora, qual é o truque aqui? Eles usaram duas cores muito afiadas, laranja muito afiado aqui e roxo muito afiado aqui. Então não é completamente laranja, é basicamente laranja avermelhada. Então eles estão mais próximos um do outro. Mas para começar, eu acho que você pode usar essas técnicas como esta. Eles usaram as duas cores azuis aqui, e nestes, eles usaram ambos os tons de laranja e, em seguida, laranja mais escuro, laranja afiada e laranja mais escura, azul púrpura afiado e, em seguida, azul púrpura claro, azul roxo maçante. Então isso é basicamente apenas uma dica inicial. Portanto, tenha isso em mente, e na próxima lição, vamos criar, aprofundar os métodos de criação de gradientes no Photoshop. Então vamos passar para a próxima lição. 38. Três maneiras de criar gradientes no Photoshop: No Photoshop, há muitas maneiras de criar gradientes. Mas no design da interface do usuário, usaremos apenas os métodos que podemos facilmente controlar e manipular. Vamos ver quantas maneiras existem. Eu vou discutir o primeiro método que está selecionando esta “ferramenta Gradiente”, eu não vou entrar nas opções do gradiente agora, então certifique-se que você selecionou algum gradiente a partir daqui. Eu tenho apenas uma camada de fundo aqui, eu abri apenas um novo documento. Basta arrastá-lo da esquerda para a direita ou em qualquer direção, e ele irá criar um gradiente. Vou pressionar “Controle Z”. Se eu arrastar dessa direção assim, você pode ver que o gradiente está vindo nessa direção. Isto é basicamente controlar o ângulo de gradiente. Este foi o primeiro método para criar gradientes, que estava usando esta ferramenta Gradiente a partir deste menu da barra de ferramentas. Então este é difícil de controlar, não vamos usá-lo para gradientes em nosso design de interface do usuário, então vamos falar sobre outros dois métodos. Deixe-me apenas criar algumas camadas aqui, e sob a ferramenta Retângulo eu vou criar uma camada, retângulo arredondado aqui, mudar a cor para este azul. Ok, agora, o segundo método que é mais popular e nós vamos usá-lo muito, é usar este estilo de camada. Então vá para Estilos de Camada e, em seguida, vamos usar este efeito de Sobreposição de Gradiente. Você pode ver assim que eu selecionei isso, eu já selecionei um gradiente aqui, você pode alterá-lo se quiser. É assim que aplicamos gradientes de Estilo de Camada e qual é o benefício? Por que vamos mudar para este método ou outro? O problema é esse efeito de controle. Então podemos facilmente controlá-lo, desligá-lo aqui, e ligá-lo aqui. Podemos clicar duas vezes e alterá-lo facilmente para qualquer outro gradiente. Esta é basicamente a facilidade de controle. No design da interface do usuário, se tivermos estilos de camada ou qualquer coisa que seja fácil de controlar, então vá com eles. Este é outro método. Agora, o terceiro método é criar uma camada de gradiente de ajuste, modo que para isso vamos para este ícone aqui no painel de camadas, pequeno ícone. Você pode ver “Criar nova camada de ajuste de campo” clique nele, e então nós vamos selecionar este gradiente a partir daqui, e você pode ver o gradiente que está selecionado agora é deste transparente para branco. Deixe-me selecionar qualquer outro como este. Agora você pode ver este preenchimento gradiente, apenas preencheu toda a tela com esta cor. Agora, em nosso design de interface principalmente não precisamos dessas coisas, então vamos cortar esse gradiente nesta forma padrão R. Para isso, vamos clicar em “Adicionar” e clicar entre essas duas camadas, e agora você pode ver esse preenchimento gradiente foi aplicado. Agora o preenchimento gradiente é aplicado a esta camada, então esta é outra maneira que podemos facilmente clicar aqui, clicar duas vezes neste ícone “Estilo de gradiente” aqui, e podemos facilmente alterá-lo a partir disso. Eles são muito fáceis de controlar, então é por isso que podemos estar usando esta técnica de preenchimento de gradiente e esta sobreposição de efeito de gradiente. Basta ter em mente que esses dois métodos serão usados uma e outra vez. Mas eu só pensei que você deveria conhecer todos os métodos de criação de gradientes no Photoshop. Isso é tudo sobre a criação de gradientes no Photoshop. Na próxima palestra, vamos olhar para as opções e as diferentes opções do Editor de gradiente e este estilo de camada de sobreposição de gradiente. Mantenha-se em contacto e vamos para a próxima palestra. 39. Como usar o editor de gradiente no Photoshop: Nesta palestra, vamos discutir este Editor de Gradiente. Se você quiser alterar as cores e criar um novo gradiente, você pode clicar duas vezes sobre ele, e você pode ver aqui temos janela Gradient Overlay. Temos algumas predefinições azuis aqui, mas agora vamos criar um novo gradiente personalizado aqui. Agora deixem-me discutir algumas das opções apresentadas aqui. Vamos usar a maior parte do tempo gradiente sólido e suavidade estará no 100 por cento, então não mexa com essas configurações. Agora, estas são basicamente paradas de cor. Você pode ver que esta cor está no local é zero por cento, que está no canto superior esquerdo e o lado mais esquerdo. Se eu arrastá-lo até aqui, você pode ver que sua localização está mudando. As duas opções inferiores são basicamente a localização, onde as cores serão localizadas. Isso pode mudar a direção do nosso gradiente. Estes dois são paradas, se eu clicar nele, você pode ver o local está definido para 100 por cento para esta cor. Se eu tentar movê-lo aqui, este é o mesmo efeito que eu mencionei na minha primeira palestra de gradientes, onde eu estava mudando o intervalo de gradientes. Se eu movê-lo para cá, você pode ver que a cor azul é afiada. A cor azul é muito menos dominante do que esta é dominante. Vou reverter de volta. Você pode ver uma seta de forma retangular muito pequena aqui. Isto é basicamente especificando onde está a extensão desta cor. Se eu tentar movê-lo para cá, você pode ver a extensão da cor azul escuro está diminuindo e você pode ver a mudança desta cor está aumentando para o gradiente. Você também pode alterar o local do span. Você pode configurá-lo para 50 por cento agora. Você pode mudá-lo para 70% ou algo assim. Este ícone está basicamente mostrando a extensão, quanto essa cor será e por quanto tempo essa cor ficará no gradiente. Estas são todas as coisas que eu tenho discutido aqui, se você quiser adicionar mais cores, você pode clicar sobre isso e clicar uma vez aqui. Você pode ver que eu adicionei a mesma cor aqui. Posso mudar sua cor assim, talvez uma cor roxa acinzentada ou talvez uma cor mais clara como essa. Só para explicar os gradientes, podemos adicionar quantas cores quisermos aqui. Você pode ver que esta cor tem a extensão assim. Se eu tentar arrastá-lo até aqui e você pode ver agora como esta cor está basicamente se adicionando a este gradiente. Agora, se nós dominamos o lado inferior desta barra de gradiente, vamos falar sobre a barra superior. Agora temos alguns ícones de tipo de paradas aqui como este e este. Você pode adicionar isso aqui também. O que é basicamente o topo, essas barras estão fazendo aqui. Estes são basicamente a opacidade, quão opaco seu gradiente será. Se às vezes precisarmos produzir um gradiente que seja transparente de um lado e opaco de um lado. Se eu quiser tornar esta cor branca transparente, eu vou reduzir sua opacidade para zero por cento. Agora você pode ver essas marcas de seleção estão aparecendo, que são basicamente a transparência. Estas barras superiores basicamente controlam a transparência das cores abaixo. Se eu quiser mudar a opacidade deste, posso usá-lo para 50%. Você pode ver as cores e a transparência mudou. Além disso, você pode ver os ícones aqui, eles mudaram também. Cinzento claro significa seu opaco, 50 por cento ou 40 por cento opaco não totalmente opaco. É um pouco transparente. Branco significa que é totalmente transparente, preto significa que é totalmente opaco. Estas são todas as opções aqui. Agora, para salvar seu gradiente, se eu quiser salvá-lo, eu posso nomeá-lo aqui transparente para azul, e eu posso clicar neste Novo aqui, e você pode ver que eu salvei este gradiente aqui. É assim que criamos gradientes, mas para começar, não vou usar muitas cores. Vou apagar esta cor e vamos usar um pouco mais de cor azul escuro aqui e definir a opacidade para 100 por cento. Remova esta parada de transparência, Excluir. Agora podemos talvez mudar sua saturação um pouco, torná-la uma cor azul mais nítida. Eu vou mudar a sua extensão também e, em seguida, eu vou criar esta cor para o botão azul. Agora crie-o assim, Salvar, Novo. Se você quiser salvar todo este conjunto de gradientes, você pode clicar neste botão Salvar, e você pode usar este gradiente salvá-lo. Você pode ver que eu nomeá-lo como talvez gradientes de interface plana, algo assim. Se você criar muitos gradientes e quiser apenas salvá-los, você pode salvá-los assim. Se você quiser carregá-los mais tarde, você pode carregá-los a partir daqui, então isso significa que você não perde seus gradientes. Isso é tudo sobre o Gradient Editor e a criação de novos gradientes e como usá-los. Se você tiver alguma dúvida ou alguma coisa em sua mente, me pergunte na discussão. Eu pensei que esta parte gradiente é muito, muito importante no design da interface do usuário porque ele tem um grande uso em botões, fundos, até mesmo a área do herói. Isso é tudo sobre gradientes. Vou fazer upload dos próximos exercícios de uso de gradientes e alguns desafios. Fique ligado e te vejo na próxima palestra. 40. Como usar o estilo de camada de sobreposição de gradiente: Vou primeiro discutir essas opções de efeito de sobreposição de gradiente. Clique duas vezes aqui neste efeito e esta janela de estilo de camada aparecerá. Primeiro de tudo, temos este modo de mistura que está definido para normal agora. Basicamente, o que está fazendo é que só nós podemos ver os gradientes, mas não podemos ver a cor de fundo desta camada. Eu defino a cor de fundo da forma para este escuro onde você pode vê-lo na miniatura que não é mostrado agora. Se eu tentar misturá-lo como multiplicá-lo com o fundo, você pode ver agora as cores azuis são multiplicados ou adicionados a esse fundo acinzentado. Neste modo de mistura de sobreposição de gradiente, podemos não estar usando todos eles, estaremos usando apenas isso talvez escurecer ou essa multiplicação, gravação de cor e talvez tela, e talvez sobreposição. Estes são basicamente apenas poucos efeitos que usaremos na maior parte do tempo. Não se preocupe com todos eles, apenas tente mudar para qualquer pessoa que você gosta ou continue mudando até obter o melhor efeito. Não se preocupe em aprender todos esses efeitos de mistura, estes são basicamente apenas mistura de cores. Como as cores do gradiente serão misturadas com a cor do plano de fundo. Eles vão queimar assim? Você pode mudar a opacidade aqui, você pode ver. Deixe-me mudar para a luz normal agora. Para Web design e CSS, eu não recomendo usar esse modo de mesclagem, então basta mantê-lo normal. Esta é outra dica. Agora, para esta opacidade, você pode alterá-la se quiser, mas certifique-se de que está tudo definido como 100. Não precisamos da cor de fundo desta camada. Agora, eu só vou discutir as opções aqui. Vou discutir o editor de gradiente depois. Se eu clicar duas vezes aqui, você pode ver que o editor de gradiente está aberto. Agora vou discutir apenas essas opções desta sobreposição de gradiente de estilo de camada. Agora, esta é basicamente a direção, eu vou reverter a direção. Se temos este gradiente de, você pode ver azul escuro para uma cor azul nítida, você pode revertê-lo assim se você quiser inverter a direção. Então isso é sempre marcado então não bagunçar isso com a opção alinhar com a camada, é basicamente assim que o alinhamento deste gradiente vai ser. Ele vai se alinhar com a camada. Agora, estes são basicamente estilos, como o gradiente funcionará. Será que vai ser no modo linear de, você pode ver em uma linha de cima para baixo. Neste momento, temos este ângulo de 90. momento, esse gradiente está trabalhando nessa direção em um modo linear em alinhamento. Se mudarmos para o modo radial, você pode ver como isso mudou e agora ele está no modo radial como este em um modo circular. Podemos não estar usando esses ângulos e isso refletido ou talvez diamante, mas acho que usaremos principalmente linear e radial. Apenas tenha em mente que não mexa com todos eles. Nós estaremos usando apenas linear e radial porque em CSS e Web design, podemos não ser capazes de produzir esses efeitos eu acho. Estes são mais fáceis de produzir efeitos lineares e radiais. Podemos ser capazes de gerar este, mas cabe a você se quiser usá-lo. O próximo é o ângulo. Se eu mudar o ângulo, você pode ver como os gradientes vão mudar. É apenas a direção do gradiente vem da esquerda para a direita ou o ângulo que eu especificar. Basta ter em mente, este é apenas o ângulo. Então a escala é basicamente a largura e você pode ver o quão estreitas as cores serão. Você pode ver como eu estou mudando para menos na seção de escala e gradientes estão ficando mais estreitos. Se eu for para mais de 100 por cento, você pode ver que os gradientes estão ficando mais espessos e eles têm mais abrangência de cores. A extensão está aumentando. Estas são todas as opções sobre estilos de camada de sobreposição de gradiente. Na próxima palestra, discutiremos este editor de gradientes. Vamos passar para a próxima palestra. 41. O que são padrões e como usamos no design na web Design?: Nesta lição, vamos ver como os padrões são usados basicamente na interface do usuário e web design. Então vamos começar com o que são padrões. Então os padrões são basicamente planos de fundo repetidos. Você pode ver aqui, estas são imagens simples que são repetidas uma e outra vez. Este é um site, subtlepatterns.com. Você pode visitar este site e ver um monte de padrões, você pode baixá-los também. Então estes são alguns dos padrões muito bons. Podemos usá-los em nosso design de interface do usuário e web design. Vamos ver alguns dos exemplos on-line para ver como os padrões estão sendo usados pelos web designers. Então deixem-me mostrar-lhes alguns exemplos. Já vimos este site, sproutvideo.com. Mas se você olhar para a parte esquerda e direita aqui, você pode ver que há alguns polígonos estilo padrão aplicado aqui no fundo. Então temos, se nos mudarmos para este mercado criativo, eles mostraram este pacote, mas em segundo plano, você pode ver que eles estão usando um padrão para a temporada de outono ou seja lá o que for isso. Então temos, deixe-me mostrar-lhe mais um exemplo. Você pode olhar para ele. É apenas um padrão sem costura de uma madeira. Portanto, não é uma imagem muito grande. É apenas uma imagem pequena, pode ser 100 por 100 pixels de largura e 100 pixels de altura. Então eles aplicaram-no para criar este fundo de madeira. Assim, você pode ver como esses padrões realmente contam em seu design web e design de interface do usuário. O problema é, sempre usá-los sabiamente, não use um padrão de arquivo muito grande como 500 por 500 pixels ou talvez às vezes eu tenha visto pessoas usando 1.000 pixels por 1.000 pixels imagens para seus padrões. Portanto, não é aconselhável. Sempre use padrões que são perfeitos e têm tamanho de arquivo muito pequeno. Então é isso sobre os padrões. Na próxima lição, veremos como baixar e instalar novos padrões no Photoshop para serem usados no design da interface do usuário. Então vamos passar para a próxima palestra. 42. 2 métodos de aplicação de padrões: Nesta lição, vou discutir como podemos aplicar padrões no Photoshop. Na verdade, há duas maneiras de aplicar padrões do Photoshop. Vamos discuti-los um por um. Eu já desenhei este retângulo aqui. primeiro método é aplicar estilos de camada. Vá para Camada, Estilos de Camada e Sobreposição de Padrão. Assim que você ver esta janela, você verá que existem padrões já aplicados ao seu design. Primeiro de tudo, você precisa ver algumas das opções. Você já conhece essas opções de mesclagem e controle de opacidade. Vamos discutir esta biblioteca de padrões. Estas são as bibliotecas agora carregadas aqui. Tenho muitos padrões personalizados carregados aqui. Então, se eu tentar aplicá-los assim, eles são aplicados na minha cor de fundo, seja lá o que for assim. Agora, o problema é, se eu quiser mostrar minha cor de fundo e o padrão deve ser sobreposto nele. Você pode fazer isso controlando este controle de opacidade. Mova isto. Você pode ver agora nosso padrão não é opaco ou transparente. Então, se você quiser efeito muito sutil, você pode usar o controle de opacidade para usá-lo. Se você quiser apenas usar este e mudar para algum outro efeito como multiplicar, você pode ver como isso realmente afeta a cor de fundo. É apenas somar em segundo plano. Estas são diferentes opções que você pode usar aqui, você pode usar multiplicar normal ou até mesmo queimadura colorida, algo assim. Mesmo às vezes nós apenas escolhemos cor ou matiz. Principalmente usamos normal, multiplicar ou talvez sobrepor. Estes são os três efeitos que usamos na maior parte do tempo. Portanto, tenha em mente que você usa esse efeito com essas opções de mistura, sobreposição, normal, multiplicar. Isso é sobre estilos de camada. Agora vamos discutir o segundo método. É muito fácil de controlar, você pode simplesmente desligar e ligar assim. Agora, chegando ao próximo método, vamos excluir esse efeito aqui. Agora, o segundo método é aplicar padrões usando suas camadas de ajuste. Há as camadas de ajuste, elas estão apenas no canto inferior do painel Camadas. Clique neste ícone e vá para este padrão. Clique nele, e você pode ver como essa caixa de diálogo de preenchimento padrão apareceu. Aqui temos muito menos opções como opacidade e outras coisas. Não podemos controlá-los aqui. Nós vamos apenas selecionar qualquer um dos padrões, como talvez este aqui, bolinhas. Vou pressionar “Ok”. Agora o padrão é, sempre que você usa uma camada de ajuste, ela é aplicada a toda a tela. Portanto, basta ter em mente que você precisa cortá-la se quiser que o efeito seja em uma área específica. Já tínhamos esse retângulo aqui no lado direito em nosso painel Camadas. Então nós vamos cortar este padrão dentro desta camada assim, e é isso. Se você quiser controlar sua opacidade, você pode controlá-la a partir daqui, a opacidade do painel Camadas assim. Se você quiser usar um modo de mesclagem, você pode usar esses modos de mesclagem de camadas aqui, assim. Agora temos alcance total. Podemos facilmente expandir esta camada e você pode ver que o padrão está se expandindo com ela. Essas são basicamente as duas maneiras de aplicar padrões no Photoshop. Só uma recapitulação. O primeiro é usar Estilos de Camada na Sobreposição de Camada e Padrão. A segunda é que você vai usar uma camada de ajuste. Portanto, ambos os métodos são bons de usar. Você pode usar qualquer um deles. Isso é sobre como aplicar padrões no Photoshop usando dois métodos diferentes. Então vamos passar para a próxima palestra. 43. Como criar padrões de um arquivo de imagem: Vamos discutir como podemos criar padrões a partir de imagens ou como podemos usar padrões ou baixá-los da Internet e usá-los no Photoshop. Então vamos começar este tutorial. Primeiro de tudo, vou mostrar-lhe este site subtlepatterns.com. É muito popular. Eles têm um plugin que é plugin premium, você precisa comprá-lo. Então agora o que vamos fazer é primeiro vamos baixar um padrão daqui, e vamos ver como vamos criar um padrão a partir de um arquivo de imagem. Então baixe esse padrão aqui. Ok, Pink_rice, está baixado, e deixe-me pegar o arquivo. Aqui está o arquivo, vou extraí-lo. Então vamos ver o que tem dentro. Temos um arquivo de imagem PNG dentro disso. Vamos arrastá-lo para o nosso Photoshop, assim. Agora você pode ver que é apenas um arquivo PNG. Vamos criar nosso padrão no Photoshop a partir deste arquivo PNG. Então, vamos pressionar Control A para selecionar toda a tela, vá para Editar e definir padrão. Então eu vou renomeá-lo para pink_rice, pressione Ok, e é isso. Nosso padrão foi criado. Vamos aplicá-lo em alguma coisa. Eu vou usar a ferramenta Eclipse como lá. Agora eu vou aplicá-lo com o nosso método Estilo de Camada, ok, onde ele está? Sobreposição de Padrão. Agora, vá para esta biblioteca de padrões, vá para o final e você verá o mais recente ou o último que você criou no final desta responsabilidade padrão. Assim, sempre que você criar um padrão a partir de um arquivo de imagem, ele estará na parte inferior e no último. Então clique aqui e você pode ver que eu já apliquei, mas vamos usar o modo normal. Então você pode ver como isso está funcionando. Agora nós aplicamos nosso padrão aqui e é isso. Esta é a maneira, como criar seu padrão a partir de um arquivo de imagem. Então vamos passar para a próxima palestra onde veremos como instalar novos padrões com arquivos.pat para Photoshop. 44. Como instalar e usar arquivos .pat: Agora, vamos discutir a segunda maneira de usar padrões no Photoshop e instalá-los. Nós vamos usar o arquivo.pat nele nesta palestra. Então, basically.pat arquivo é a coleção de diferentes padrões para o Photoshop. Agora, vamos usar este premiumpixels.com/freebies, que é um padrão, padrões muito bons. Basta baixá-los daqui. Estou clicando no botão “Download” e vamos fazer o download deles. Estes serão apenas arquivos padrão e nós vamos instalá-los primeiro. Então, vamos passar para a pasta de instalação do Photoshop primeiro. Nós já baixamos. Vamos passar para a pasta de instalação do Photoshop. Eu abri um monte de arquivos aqui. Agora, clique com o botão direito do mouse no Photoshop e vá para Propriedades e Abrir Localização do Arquivo, e vamos usar essa pasta Predefinições. Vá para esta pasta Presets e aqui você vai me encontrar para encontrar a pasta Padrões como essa. Para usuários de Mac, acho que o caminho é do aplicativo e do Adobe Photoshop e Presets. Vou postar o caminho real nos comentários ou na discussão, ou talvez em alguma outra palestra, mas agora isso é para PC. Você pode Google que o que é o caminho da pasta de instalação do Photoshop no Mac. Agora, clique nesta pasta Padrões e você verá todos os padrões aqui. Estes são os padrões pré-fabricados ou padrão do Photoshop. Agora, se eu quiser instalar um padrão aqui, eu só preciso copiar e colar o arquivo padrão aqui. Isso não é uma coisa muito difícil, então vamos fazer isso. Vamos usar os mesmos padrões sutis aqui, eu vou extraí-los, então vamos usar este arquivo de padrões. Copie e nós vamos colá-lo em nossa pasta Patterns aqui, Continuar. Agora, para que isso aconteça, você precisa desligar os do Photoshop e fechá-lo e executá-lo novamente. Agora, deixe começar um pouco. Leva algum tempo para ser carregado na minha RAM. Então vai levar algum tempo. Vamos lá. Sim, vou usar o arquivo de padrões recém-instalado. Então vamos desenhar algo aqui assim, e vamos aplicar um padrão aqui, Sobreposição de Padrão. Agora já estamos vendo nossa antiga biblioteca de padrões, então para acessar a nova, clique sobre isso, e clique em qualquer um dos padrões que estavam aqui. Este é o padrão que acabamos de instalar, clique nele. Ele dirá: “Substituir padrão atual por um padrão de padrões.” Portanto, se você quiser substituir toda a sua biblioteca, clique em OK ou clique em Acrescentar. Então, se você clicar em Acrescentar, ele será adicionado no último, assim. Você pode ver por aqui. Para maior clareza, vamos substituir os padrões para que não tenhamos mais nada. Não sei o que está acontecendo, talvez tenha sido padrões sutis. Você pode clicar em qualquer um dos padrões aqui. Estes eram os padrões, eu estava clicando no nome do arquivo errado, então basta clicar neles. Você pode ver que estes são padrões diferentes, padrões sutis muito agradáveis, assim como textura de papel. Então eu vou expandi-lo para que você possa ver a textura facilmente. Este é basicamente o método que usamos para baixar e instalar arquivos de padrão.Pat Photoshop. Eles são muito fáceis de instalar se você quiser usar o mesmo padrão para Internet ou talvez, desculpe, para desenvolvimento ou desenvolvimento de sites, você pode usar esses padrões aqui. Estes são para uso em desenvolvimento web porque o arquivo PNG, você pode repeti-los facilmente, e para o Photoshop você pode facilmente aplicar isso no Photoshop. Isso é sobre a aplicação e o uso de arquivos de padrão do Photoshop. Vamos passar para a próxima palestra. 45. Como a luz e sombra funciona no design de Ude: Olá a todos. Nesta palestra, eu vou mostrar a vocês basicamente o segredo por trás ou o conceito por trás de todos os projetos de interface do usuário. Você pode criar qualquer tipo de elemento de interface do usuário com esse conceito, ou pelo menos 80 por cento deles. Então, o que é esse conceito? É o conceito de luz e sombra. Agora, eu vi quase todos os projetos de interface onde a luz está sempre caindo deste ângulo que é de 90 graus. Suponha primeiro apenas por um segundo, que a luz está vindo do topo, assim. Quando a luz está no topo, a sombra deve estar na parte inferior. A luz está aqui e a sombra está aqui. Se movermos a luz para outro lugar, assim. Deixe-me mostrar-lhe um exemplo. Este. Agora você pode ver que a luz está no lado esquerdo e a sombra está no lado direito. Então a sombra se move com a luz enquanto movemos a luz. Este é o conceito básico. Agora, quando algo é elevado no design da interface do usuário ou tem algum efeito castor ou algo assim. Eles têm luz no topo e você pode ver luz, ele vai cair sobre esta área. Basicamente, o que nós designers fazemos, criamos luz aqui e um pouco de escuridão aqui, e depois sombra aqui e voilá. Nosso botão elevado está aqui. Design de material do Google, há muitos usos deste conceito, as sombras. Chegando a este melhor efeito, agora o que está acontecendo aqui? Se pressionarmos um botão ou pressionarmos algo, a sombra estará no lado interno. Então sempre tenha em mente que precisamos de sombras aqui para fazê-la pressionada e mais uma coisa, há um pequeno detalhe, você só não precisa perder isso. Deixe-me ampliar para você, agora, se olhar de perto aqui, temos sombras aqui e se algo for pressionado, a luz cairá sobre esta área. Porque esta área é pressionada para dentro, então ele vai pular toda a luz. A luz cairá daqui e aqui em baixo. Se eu clicar nesta camada, você pode ver que eu usei uma sombra muito leve. Se eu aumentar seu tamanho, você pode ver aqui agora. Você pode ver a sombra aqui, é uma sombra branca, que é basicamente um brilho branco, mas vou chamá-la de sombra agora. Deixe-me mudar a cor de fundo para você ver claramente. Agora você pode ver claramente. Há uma sombra branca aqui ou brilha aqui. Esta é basicamente esta luz caindo aqui nesta área para fazê-la brilhar. Estas são as duas coisas básicas que precisamos em tudo o que precisamos mostrar como um objeto pressionado ou pressionado dentro. Deixe-me mostrar-lhe outro exemplo, aqui eu usei o mesmo conceito em uma tipografia ou você pode ver em um texto, você pode ver como ele é pressionado aqui. Este é o efeito pressionado, foi muito popular, os designers de UI ainda o usam em todos os botões. Quase todos estes têm estes dois bastões, um é elevado e um é pressionado. Basta ter em mente, conceito muito básico, que o design da interface do usuário, todos os elementos da interface do usuário eles giram em torno deste efeito de luz e sombra. 46. Exemplos de uso de luz e sombra: Nesta lição, vou mostrar-lhe alguns dos exemplos de driblers que estão usando luz e sombra o melhor. Este é um exemplo que você pode ver aqui. Este botão é elevado e eles usaram luz aqui e sombra aqui, então eles têm sombra aqui e um pouco de luz aqui. Isto é para o efeito pressionado e isso é para o efeito elevado. Agora, mesmo neste efeito de elevação, eles usaram o efeito pressionado para esta marca de verificação. Ainda assim, isso é novamente pressionado e depois pressionado dentro do pressionado. Então, este é um efeito muito único, mas parece muito bom. Agora, mais um exemplo. Este é também outro exemplo. Isto é apenas pela luz e escuridão eles usaram duas UIs muito grandes e eles usaram a luz e a sombra no nível pressionado. Você pode ver luz aqui e sombra aqui. Então você pode ver também luz por aqui, sombra por aqui. Então, no efeito pressionado, você pode ver a luz aqui na parte inferior. Você pode ver que a cor deste botão varia dos dois últimos. Portanto, a cor deste botão é mais escura do que os botões esquerdo e direito. Chegando agora a outro exemplo. Agora isso é chamado basicamente os temas escuros da interface do usuário, eu não gosto muito deles. Você pode ver aqui o mesmo efeito de luz e sombra. Agora, a luz está aqui. Você pode ver uma luz muito maçante aqui. Então temos sombra, que é um pouco difusa sombra aqui. Então temos este botão pressionado e adivinhe, o botão pressionado é mais escuro. Esse é o conceito principal. Então você pode ver que esses botões têm um tom um pouco mais claro de cinza e este botão tem um tom mais escuro de cinza. Então aqui temos cinza mais escuro e cinza mais claro. Este é novamente o conceito de luz e sombra. Nas próximas palestras, vou discutir como escolher cores de tipografia e algumas outras dicas para iniciantes. Então fique ligado e te vejo na próxima palestra. 47. Esquemas de cores para iniciantes: Vamos falar sobre esquemas de cores. Esquemas de cores são parte muito essencial do design da interface do usuário, se você está projetando um site ou um aplicativo ou qualquer outra coisa. Então, como vamos projetar esses esquemas de cores ou como criá-los para iniciantes, vou explicá-lo de uma maneira simples. Então, em primeiro lugar, a regra do polegar. Nunca use mais de duas cores além desses tons de cinza. Então, use no máximo duas cores para iniciantes. Caso contrário, será difícil controlar ou manipular essas cores. Basta manter duas cores e usar tantos tons de preto ou cinza aqui. Você pode ver no primeiro esquema de cores, eu usei apenas duas cores planas, verde e laranja. Então eu usei dois tons de cinza. No segundo, eu usei novamente duas cores principais para o meu esquema de cores. Então todos os três são basicamente os tons de cinza. Isso é basicamente muito popular. Os tons de cinza estão se tornando muito populares. A maioria das UIs, eles são dominantes com esses tons de cinza. Para obter a maior parte da atenção do usuário para sua interface do usuário e se você tiver que projetar diferentes partes, você precisa usar essas duas cores principais. Essas cores serão usadas principalmente para texto. Eu vi isso principalmente na maioria das UIs, mesmo em Dribbble eles usam a maioria dos tons de cinza para textos. Não use a cor preta de tom, isso arruinará seu design de interface do usuário. Portanto, basta ter em mente, obter alguns tons de cinza e obter duas cores e começar a projetar sua interface do usuário. 48. Como usar a Saturação e brilho para esquemas de cores: Há um outro método para obter as cores, que é de seus logotipos. Se você já tem logotipo, você pode ver este esquema de cores, eu peguei deste logotipo aqui e como eu fiz isso, eu apenas clique na camada e amostra a cor daqui. O seletor de cores, experimente daqui e então eu experimento esta cor daqui. Como eu gerei esta cor vermelha, é método muito fácil. Basta clicar em qualquer cor que você precisa, como esta e basta mover este controle deslizante de matiz para o topo, como eu tenho a esta cor vermelha. Isso está permanecendo na mesma saturação e brilho e a tonalidade é diferente. Este é um método muito fácil. Às vezes eu costumava aplicá-lo assim. Você pode ver essas três cores ir muito bem juntos porque eles compartilham o mesmo brilho e saturação de cor. Este é um método muito fácil. Eu uso isso a maior parte do tempo. Se você quiser experimentar, você pode tentar. Foi assim que consegui esta terceira cor. Eu não recomendo usar muitas cores, mas às vezes no design do painel, você precisa de muitas cores, talvez mais de cinco cores. É assim que se obtém mais cores. 49. Ferramentas online para criar esquemas de cores: Agora, deixe-me mostrar rapidamente quantas ferramentas ou quais ferramentas são usadas para geração de esquemas de cores no design da interface do usuário. A primeira ferramenta é o 0to255.com. É uma ferramenta muito útil. Ele gera diferentes tons de qualquer cor. Por exemplo, se eu escolher essa cor cinza e copiar seu valor hexadecimal, eu preciso colar seu valor hexadecimal nesta Cor de escolha, colar aqui e pressionar esta Cor de escolha, e você pode ver que gerou todos os diferentes tons deste cor, do branco ao preto. É uma ferramenta muito útil para gerar diferentes tonalidades rapidamente. Você pode usá-los daqui. Se você quiser escolher qualquer outra cor, você pode escolher outra cor, e colocá-la aqui, e gerar seus tons também. Esta é uma ferramenta. Então, se você quiser usar cores planas, você pode ir para esses dois sites, Flatuipicker.com e FlatuiColor. Neste site, escolha este valor hexadecimal aqui, talvez este, e basta clicar em qualquer uma das cores. Este é um site muito bom, mas temos cores muito limitadas. Neste site, temos um monte de cores, como rosa. Se você clicar em rosa, você verá diferentes tons de rosa como nossas cores de design de interface plana. Tem muitas variedades. Se você for para cinza, você pode ver que há muitos tons de cinza. É uma ferramenta muito boa. Agora, se você quiser navegar esquemas de cores já feitos, vá para este site, color.adobe.com, e comece a partir daqui. Se você pode procurar de azul e laranja, eu posso ir para cores específicas como essa. Isso é muito útil quando eu sei que eu preciso escolher entre essas duas cores. Você pode obter todos os diferentes tons e esquema de cores para essas duas cores. Esta é uma ferramenta muito básica que eu uso. Uma ferramenta semelhante a esta Adobe Color é este coolors.co, e ir para este navegador, e começar a navegar neles. Mas o problema aqui é a busca. Aqui, temos uma opção de pesquisa muito boa, e eu acho que você deve manter esta ferramenta Adobe Color CC. É muito bom. Em seguida, a terceira parte, se você quiser gerar rapidamente esquemas de cores por conta própria, então vá para este paletton.com ou use este Adobe CC Color Create, clique nele e escolha alguma cor base aqui. Se eu selecionar essa cor como minha cor base, essa cor verde, clique duas vezes nela, copie seu valor hexadecimal e colá-lo aqui no gerador de esquema de cores da Adobe. Você pode ver como ele gerou esquema de cores. Vá para esta barra de opções de regra de cor e clique em Analogous, você pode ver que está criando diferentes esquemas de cores. Eu não quero entrar em diferentes aspectos técnicos, mas você pode obter quantas cores quiser daqui; tríade monocromática, complementar. Se você gostar de qualquer cor, basta copiar seu valor hexadecimal e usá-lo no Photoshop. Vá para isso, clique aqui, cole o esquema de cores assim, e vá para as amostras, clique na nova amostra, e é assim que eu vou adicionar uma cor verde afiada às minhas amostras. Você pode ver agora ele é adicionado à última cor. Primeiro, coloque sua cor aqui e depois adicione a partir daqui. É assim que você cria esquemas de cores e os coloca no Photoshop. Outra boa ferramenta para criar esquema de cores é este, Paletton, e funciona da mesma forma que a ferramenta Photoshop Creation, esquema de cores Adobe. Você precisa colar sua cor base aqui. É uma caixa estranha. Só me permite selecionar qualquer cor aqui. Tenho que pressionar o backspace. Se eu selecionar esta cor, esta vermelha, copie seu código e colá-lo aqui, e pressione “OK”. Você pode ver que gerou diferentes tons por aqui. Isto é tetrad. Então temos poucos outros; três cores, duas cores. Você pode selecionar diferentes esquemas de cores a partir daqui. Estas são poucas ferramentas que eu uso muito tempo. Às vezes eu continuo coletando diferentes esquemas de cores e uso cores de diferentes esquemas de cores que se reúnem bem. Mas para iniciantes e iniciantes, não recomendo esse método. Use poucas cores, e obtenha bons tons de cinza deste site, e comece a projetar algumas boas UIs. 50. Como selecionar fontes e tipografia: Nesta palestra, vamos falar sobre o emparelhamento de fontes e como escolher topografia e fontes para o design de seu aplicativo web ou móvel. emparelhamento de fontes ou encontrar a topografia perfeita é basicamente uma habilidade muito difícil de aprender. Leva anos para dominar a habilidade. Para começar, ou mesmo para mim, uso esses sites para emparelhar pontos. Deixe-me mostrar-lhe alguns dos sites e recursos online que uso. O primeiro é este typegenius.com. Se você quiser escolher qualquer fonte, você pode selecionar a partir daqui. Você pode digitar muitas fontes como, se eu selecionar este Open Sans, Eu seleciono este e, em seguida, clique em “Ver Correspondências”. Você pode ver aqui alguns jogos com o Open Sans, Futura PT Condensado. Este é o link. Esta é uma fonte Typekit. Então temos esse Open Sans e Minion Pro. Este também é um tipo de letra Typekit. Então temos este Open Sans and Museo. Museo é uma fonte muito grande, e pode ser comprado, ou até mesmo você pode usá-lo no Typekit. Então temos este Open Sans e Source Sans Pro. Estas são as duas fontes do Google. Este é um site, então devemos passar para este Font Pair. Também é muito bom site, e podemos encontrar um monte de combinações de fontes a partir daqui. Você pode ver assim, fontes Sans-Serif e Serif. Você pode ver aqui temos Cabine para título e Old Standard TT para corpo de texto. Você pode ver que há um monte de emparelhamento diferente. Você pode ver que estas são fontes do Google Lato e Merriweather e Montseratt e Cardo. Aqui você pode ver Cursive e Serif. Fontes cursivas são basicamente assim, algumas das fontes pouco elegantes como estas, e Serif é basicamente a fonte com um pouco de final ou linhas no final de cada letra. Estes são basicamente fontes Serif e Sans-Serif significa sem terminar. Se formos a este Sans-Serif você pode ver que há fontes simples como estas. Estas são fontes Sans-Serif. Você pode usar essas guias para emparelhar as fontes. Então podemos ir para este typ.io/libraries/google, e você pode ver aqui um monte de grandes combinações e inspiração para o Google. combinação de fontes para emparelhamento. Você pode ver aqui que é usado, Raleway. Então, no próximo exemplo, é Proxima Nova e Libre Baskerville e o que for. É uma fonte do Google e é uma fonte muito popular do Typekit. Então temos algumas outras combinações como esta. Você pode vê-los e obter inspiração e até mesmo você pode usar essas combinações em seus projetos. Em seguida, passando para a próxima ferramenta. É uma ferramenta muito útil, Web Font Blender. Agora, o que seu propósito é que você pode selecionar qualquer um desses títulos, linhas ou qualquer coisa, e você pode escolher a fonte para ele. Como se eu pudesse usar o Lato aqui. Vou usar o Lato 900 para este. Então eu vou usar Lato regular, talvez para este e 300, e eu vou usar Open Sans para esta área. Abra Sans normal. Agora você pode ver que esta é uma ferramenta muito boa. Ele também pode dar-lhe um código para esta mistura, ou opções que você configurou, e também os tamanhos em ems e outras coisas, que é puramente para o lado da programação. Agora, vocês podem ver aqui nós combinamos Lato e Open Sans, e eles estão muito bonitos juntos. Esta é a combinação que você pode usar, um título, depois subtítulo, e depois o parágrafo. Principalmente, você precisa apenas de três estilos na maioria das vezes. Mesmo você pode combinar apenas dois destes como, cabeçalho e o texto do parágrafo. Agora, esta é também uma ferramenta muito útil que é typewonder.com. O que ele faz é que você dê o URL de qualquer site, como eu vou dar meu próprio site, learnuxid.com, e clique em “Ir”. Em seguida, você pode selecionar qualquer fonte que você deseja aplicar neste site, site Live. Quero que o meu site esteja neste Arvo. Vou usá-la. Ele vai mostrar a visualização do meu site usando esta fonte. Olhe para ele. Olhe e veja, aqui está ele e não está parecendo muito bom. Posso mudar a fonte, se quiser, como esta. Existem muitas outras fontes se você for abaixo desta linha. Eu vou escolher este Vollkorn, e eu vou usá-lo. Vamos ver o que ele faz. Acho que já se aplicou. Temos mais alguns artigos, e algumas ferramentas de ajuda e combinações diferentes que muitos designers já fizeram, para que você possa encontrá-los. Incluirei os links nos recursos para todas essas ferramentas e artigos que mostrei. Estas são poucas combinações do Google. Se você passar o mouse sobre eles, poderá ver o link para esse estilo de fonte. Isto é basicamente Raleway. Se você olhar para o canto inferior esquerdo da minha tela, você pode ver que o link está chegando. Isso também é duas fontes, que é basicamente Playfair mais exibir fonte Google. Esta é também outra fonte do Google, Quando. Esta é outra terceira forma. Esta é a Signika. É muito difícil combinar três fontes diferentes, mesmo para pessoas que estão usando, e tentando emparelhar tipográfico mesmo de anos. Eu diria que vamos ficar com dois. Se você pode encontrar uma combinação muito boa, que é adequada para o seu projeto, você pode encontrá-los a partir daqui, e você pode usá-los. Você pode ver aqui que temos outro Sans Source Pro. Esta é toda a fonte única Sans Source Pro, e com uma grande família. Estas são todas as ferramentas de ajuda que você pode obter online. Há 100daysoffonts.com e também está mostrando um monte de grandes experimentos de tipografia. A maioria deles são fontes do Google. Você pode ver Lora e Roboto, e eles estão ficando muito bem juntos. Estas são combinações de mestres de topografia muito profissionais. Eu acho que é uma habilidade muito, muito única e muito difícil de aprender habilidade. Leva anos para dominar essa habilidade de combinação de tipografia. Então temos outro artigo que eu gosto muito. Este é o Ultimate Guide Font Peering de canva.com. Incluirei todos esses links, nos recursos. Você pode baixar o PDF e ver esses artigos, e essas ferramentas. Você pode ver aqui, ele tem alguma introdução à topografia como Cap-Height, X-Height, Terminal, Linha de base. Em seguida, eles têm diferentes tipos de classes de tipografia como Script Serif, Sans Serif, Sab Serif, Alinhamento, Hierarquia. Então ele tinha um monte de diferentes grandes combinações. Você pode ver até mesmo ele está mostrando os tamanhos aqui, como este, 57 PT maiúsculo, 27 PT Itálico. Você pode usar todas essas combinações diferentes e continuar lendo este artigo. Este é um artigo muito ótimo para iniciantes. Isso é sobre o emparelhamento de fontes. Espero ver vocês ficando melhores em projetar e aplicar essas habilidades tipográficas em seus projetos. 51. Como usar gras no design de web: Vamos falar sobre grades e como projetamos de acordo com grades. Grades são basicamente diferentes colunas de largura específica e eles têm um pouco de espaço entre eles. Você pode ver neste exemplo que eu estou mostrando aqui, este é um web design, aprendizagem, design que eu fiz para alguma empresa. Você pode ver como eu coloquei tudo para fora. Deixe-me mostrar-lhe como usá-los e os conceitos básicos do sistema de grade. Normalmente em web design ou quando você está projetando um aplicativo móvel, você realmente precisa saber sistema de grade. Ele ajuda você a alinhar e colocar sua página muito bem e ajuda no design muito. Vamos ver como vamos projetar de acordo com as grades e como criá-las. primeiro passo é, o que são grades e quais são os espaços em tudo? Estas são colunas, estou a mostrá-las em cinzento. São 12 colunas. Grades têm colunas diferentes; 12, 16, 24. mais populares são 12 e 16. Os espaços entre cada coluna, a partir daqui, observam estes dois nos dois cantos. Estas são basicamente calhas. Chamamos-lhes calhas. Estes são espaços. Podemos ter alguma separação entre partes de conteúdo e layout. Deixe-me mostrar-lhe um exemplo onde eu usei isso. Se você se concentrar nesta área, você pode ver que este vídeo e esses marcadores, eles estão separados por esta sarjeta. Você pode ver aqui que eu deixei esta sarjeta. Esta parte está ocupando uma, duas, três, quatro, cinco, seis colunas. Esta parte também está tomando seis colunas. Quando um desenvolvedor tenta transformar seu design em algumas coisas de codificação, é muito fácil para eles seguir esta coluna ou sistema no processo de desenvolvimento e codificação. Eles usarão seis colunas para este e seis colunas para este. As grades mais populares que você poderia ter conhecido como Bootstrap and Foundation, tudo isso. Este é o básico dos sistemas de rede. Se você olhar para aqui, este logotipo deste design de página web, ele está contido em uma, duas, três colunas, mas ele também está tocando esta quarta coluna e está dentro da calha da quarta coluna. Levará quatro colunas basicamente. Não podemos dizer que se trata apenas de levar três colunas. Se algum elemento de design está ocupando qualquer porção de calha, ele irá incluir a próxima coluna nele. Isto é basicamente, se você olhar para este número de telefone, você pode ver que ele está tomando duas colunas, mas ele está realmente tomando três colunas. Como este ícone está na sarjeta da próxima coluna, os codificadores irão codificá-lo como se fossem ocupar três colunas para este número de telefone. É assim que usamos grades. Agora, esses guias no final, eles são menores. São basicamente margens. Eles são normalmente usados na programação. Ao projetar, não vamos nos preocupar com margens, mas não vamos conseguir nada nessas margens. Estaremos tocando apenas o lado esquerdo e direito das colunas ou entre elas. Agora, se eu esconder isso, você pode ver o design real. Deixe-me esconder os guias. Esse era o projeto real. Agora você pode ver que ele pode realmente olhar bem com a ajuda de guias. Se eu ligá-los, você pode ver esta parte. Eu usei uma, duas, três, quatro, cinco, seis, sete, oito colunas para esta área, e uma, duas, três, quatro colunas para esta área. Aqui eu usei esta coluna para obter mais espaço aqui. Isto é um truque. Não se limite se você vê coluna aqui, coluna de grade e não tente sempre usá-lo. Você pode deixá-lo aqui para mais espaço. Você pode ver que há muito espaço entre essa área de conteúdo e essa área de conteúdo. Este é o básico do sistema de grade. Estas são calhas entre elas. Eles são, eu acho que 30 pixels. Você pode ver no título aqui, margem de 15 pixels e calha é de 30 pixels. Isso é tudo sobre grades e como usá-las. Quais são os conceitos básicos de grades que temos colunas, calhas e margens na grade em ambos os lados, lados direito e esquerdo. Vamos passar para a próxima palestra onde mostrarei como criar essas grades no Photoshop e usar algumas extensões. Vamos passar para a próxima palestra. 52. Como criar grades no Photoshop: Na última palestra, aprendemos sobre grades e como projetar usando grades, como colocar diferentes coisas usando diferentes tamanhos de coluna. Nesta lição, vou mostrar-lhe como criar diferentes tipos e grades diferentes usando o Photoshop, deixe-me primeiro usar o sistema de grade padrão do Photoshop. Agora, o que vamos usar é que vamos usar um documento personalizado tamanho 1280, que é comum em web design, e altura é 1000, 72, não gerencie cores este documento, pressione “Ok”. Agora aqui temos o nosso quadro de arte. Agora, vamos usar o sistema de guia padrão do Photoshop para criar a grade. Novo layout de guia, e nós vamos usar 12 colunas com as calhas de 20 pixels, margens se realmente precisarmos delas, você pode usar margens aqui ou você pode deixá-las de fora. Então eu vou usar zero margem superior, zero margem inferior, e esquerda 10 e direita 10, pressione “Ok”, agora seu sistema de grade está pronto. Se você quiser realmente melhorá-lo, você pode adicionar diferentes retângulos aqui assim e copiá-los e duplicá-los na tecla alt porque isso pode realmente ajudar o seu design. No final, você vai limpar esses guias, guias azuis. O que vai permanecer no final serão estas linhas verdes, estas colunas. Copie-os assim, vou selecionar todos eles e mesclá-los em um sistema de grade, e aqui temos nosso sistema de grade, agora você pode limpar seus guias, “Limpar Guias”. É assim que projetamos uma grade, é 12 colunas e com 20 pixel calha e 10 pixel margem. Então, agora, se tentarmos projetar algo, estaremos projetando como logotipo vai estar aqui. Deixe-me apenas mudar a cor, e para o nosso exemplo, navegação será por aqui assim. Então é assim que nós layout coisas, eu estou usando duas colunas para este logotipo e 10 colunas para esta navegação, e o mesmo vale para outros elementos de sua página web. Esta é uma maneira de criar grades, então temos este plugin GuideGuide, primeiro foi livre agora eu tenho isso por apenas US $5, e eu realmente gosto, é um muito bom. Você pode salvar as grades, grades diferentes, e você pode criá-las, e você pode salvar seus conjuntos. Então esta é a extensão do plugin GuideGuide, e eu vou usar apenas este 12 colunas, estes são o número de colunas que você pode ver, eles têm diferentes campos, margens, superior, inferior, margens diferentes, em seguida, colunas, linhas. Eu não vou entrar em detalhes do sistema de grade, Vou entrar em detalhes no meu próximo curso, que está em web design muito avançado e diferentes técnicas de web design. Nesse curso, vou falar mais profundamente sobre grades e vertical e coluna são ambas grades. Então agora nós vamos ficar com 12 colunas, e como nós não vamos usar essa largura, nós não sabemos a largura, então nós apenas usamos 12 colunas. Vamos fazer 16 colunas desta vez. Eu vou pegar o espaço de 15 pixels aqui, e eu vou pressionar “Adicionar Guias”. Agora, nós temos 16 sistema de grade de colunas com estas lacunas de 15 pixels, e eu acho que podemos salvá-lo, “Grade de Salvar”. Nós vamos salvá-lo 16 coluna, 15 pixel calha, “Grade Salvar”. Você pode ver aqui no meu guia Salvo você pode ver 16 coluna, 15 pixel calha, então esta é uma ferramenta muito útil que você pode criar e salvar um monte de diferentes sistemas de grade. Agora, você pode ver que eu salvei um monte de guias diferentes que eu criei, então você pode criar qualquer tipo de guia e salvá-lo aqui. Existem alguns outros usos deste plugin que são borda esquerda, ponto médio, borda direita, guias claras, você pode facilmente limpar as guias com este botão aqui. Deixe-me mostrar-lhe as outras coisas que podemos fazer com este plugin, deixe-me apenas selecionar este retângulo e obter a seleção em torno dele, então podemos facilmente ter guias: ponto médio, esquerda, direita, topo, ponto médio, fundo, então este é outro uso deste plugin, e é um plugin muito bom, GuideGuide. Estas são duas maneiras pelas quais você pode criar guias e grades no Photoshop usando o Photoshop padrão, novo guia e o novo sistema de layout de guia, e você também pode usar este plugin GuideGuide. Isso foi tudo sobre como criar guias e grades no Photoshop, e vamos passar para algumas novas palestras incríveis. 53. Desafio de botão de sombras: Olá a todos. Este é o meu primeiro desafio para todos os meus alunos. Basicamente você precisa criar um botão semelhante a este e eu vou te dar algumas dicas, que é basicamente eu usei duas sombras e um golpe. Então, um efeito de traço e duas sombras. Agora, que o desafio comece. 54. Solução de design de botão de sombras: Esta é a solução para o desafio. Eu vou fazer este botão novamente na sua frente para que você possa aprender como eu usei sombras duplas, e este efeito de traço, e como eu fiz este botão. Vamos começar. Primeiro vamos usar uma ferramenta de forma retângulo arredondado. Podemos usar o raio para algo como oito talvez, e apenas desenhar um retângulo aqui, isso é suficiente. Agora, vou escolher um pouco de cor acinzentada ou algo mais próximo do cinza-azulado, como este. Agora, nossa camada base está completa. Eu cortei algo aqui, então isso é basicamente um retângulo. Obter um retângulo aqui, e nós vamos criar retângulo como este, e nós vamos mudar sua cor para algo. Estes são basicamente matiz, saturação e brilho. Eu normalmente uso estes para obter diferentes tons de cores, então eu vou reduzir o brilho que é a parte de luz da nossa cor, ou talvez nós podemos ir de, sim, assim. Agora, eu vou usar máscara de recorte, alt e clique entre essas duas camadas. Agora temos a nossa máscara de recorte assim. Este botão estava em alguma outra cor, eu estou criando isso em um pouco obsidiana e médica. Você deve ter visto essa cor em medicina e empresas médicas. Agora, basicamente nossa base está completa, agora vou adicionar alguns estilos. Este era o nosso contentor, para a base de contentores podemos nomeá-lo. Você pode clicar aqui no pequeno ícone Fx e adicionar soltar, começando sombras. Esta primeira sombra é basicamente opacidade é 20 por cento. Se eu tentar aumentar a opacidade você pode ver que nossa sombra está ficando mais escura. Então teremos algo assim, 24 ou talvez 20 está bem. Então a distância é de 21 pixels. Se eu reduzir a distância, você pode ver que temos sombras no topo desta camada que nós realmente não queremos. Queremos apenas a sombra no fundo. Vou aumentar essa distância até o momento em que eu tenho sensação de que está com boa aparência, 15 será bom. Agora, vou adicionar outra sombra, clique aqui. Basicamente, o que eu fiz aqui foi adicionar outra sombra que estava um pouco mais perto da camada, e um pouco mais opaca do que transparente. Vou aumentar um pouco a opacidade. Podemos aumentar a distância também. Se eu esconder esta camada, você pode ver o que acontece com a nossa sombra. Agora ele se foi, e agora está ligado. Este é basicamente o efeito que estamos procurando. Estamos basicamente adicionando duas sombras aqui. Um é um pouco mais escuro e mais perto da camada, um é um pouco mais leve e tem um bom espaço em torno da camada de forma, por isso é basicamente uma sombra larga. Você pode ver que o tamanho é 25 e a distância é 15%. É assim que adicionamos essas sombras, e vamos reduzir sua opacidade para 25, reduzir a distância um pouco mais. Agora está um pouco mole. Talvez cinco porque estamos recebendo sombra no topo, e vamos reduzir isso. Vamos fazer com que seja 10. Agora parece quase o mesmo. Você também pode mudar esta cor aqui para a sombra. Podemos ter um cinza claro, você pode ver que ele muda seu efeito. Se você não quer sombra muito dura, você pode usar alguma outra cor como essa. Basicamente, trata-se de controlar esta opacidade, esta distância e tamanho. Se usarmos esse spread, você pode ver que ele está basicamente fazendo essa sombra um pouco sólida, então nós realmente não queremos. Não vamos usar o spread agora. Pressione “Ok” e agora ficamos com apenas uma coisa que é basicamente o derrame. Vou clicar sobre esses efeitos e vou adicionar um acidente vascular cerebral. Eu vou escolher a cor do traço desta cor, ou eu posso obter uma cor um pouco mais escura reduzindo o brilho para 85 por cento, talvez 90 por cento é bom o suficiente. 90 por cento está bom. Agora eu criei esse efeito de sombra suave, agora vamos adicionar texto aqui. Basicamente, o que eu fiz é que eu usei este plugin incrível fonte para obter este ícone aqui. Podemos usar qualquer ícone como talvez este ícone de ambulância faça o truque. Agora você pode ver assim que eu adicionei isso entre essas duas camadas, nossa máscara de recorte sumiu, então é por isso que isso está acontecendo. Vou arrastar este ícone para cima, vou criar a máscara de recorte novamente. Eu vou para “Control D” para transformar, e eu vou pressionar “Shift” e “Alt” para aumentar o tamanho, eu estou segurando a tecla Shift e Alt. Acho que isso é bom o suficiente. Vou movê-lo para o centro. Agora também podemos escolher um pouco de uma cor maçante porque está ficando muito afiada aos nossos olhos, 50 por cento assim. Eu só escolho esta cor e reduzo o brilho para 50% ou talvez mais, podemos ir para 30 por cento assim ou talvez 25 por cento. Acho que 30 por cento foi bom o suficiente. Agora a parte do ícone está feita, vou agora adicionar algum texto aqui. Estou usando esse estilo de fonte normal e sem abrir, e estou usando esse tamanho de fonte de 36 pixels. Você pode pressionar “Shift” para que seja apenas dentro desta caixa. Pressione “Shift” e clique, e nós vamos chamar uma ambulância, ambulância é bom. Basicamente o nosso texto é um pouco mais longo para que possamos aumentar o tamanho deste recipiente base, “Control D” e eu vou apenas arrastar este canto para aqui assim. Vou clicar neste, “Chame uma ambulância.” Agora aqui nosso problema básico é o alinhamento. Vamos usar algumas guias para alinhar estas. Vou clicar em “Controle e dois-pontos” para trazer meus guias, vou excluir isso. Vou clicar neste, “Controle” clique. Não estou usando a seleção automática, então estou controlando clicar em qualquer camada para selecioná-las. Eu vou controlar clique sobre isso, e eu vou arrastar a camada assim. Agora, vamos basicamente colocar algumas guias para basicamente alinhar nosso ícone e nosso texto no meio deste botão. Eu coloquei um aqui, e um que eu preciso aqui, assim. Vamos usar o nosso plug-in aqui que foi QuickGuide, e eu vou criar os guias ao redor deste botão rapidamente. Agora é basicamente chegar à sombra também, então vamos desligar esses efeitos e criar estes. Agora, estes são bons. Estou ligando esses efeitos. Temos estas duas porções aqui, vou pressionar “M” ou basicamente esta ferramenta para festas. Vou selecionar esta ferramenta de seleção retangular, e vamos fazer uma seleção entre isso. Temos uma seleção e, em seguida, vamos clicar neste Chame uma ambulância. Agora temos dois objetos basicamente para alinhar. Vamos alinhar isto Chame uma ambulância de acordo com esta seleção. Vou pressionar “V” e clicar neste ícone do meio, agora está alinhado, também este. Nós vamos criar outra seleção aqui, e nós vamos selecionar este ícone fa-ambulância e vamos alinhá-lo no meio. Acho que está quase no meio, vou ver. Não, não está no meio. Acho que temos uma diretriz que não é precisa, que é esta, eu acho. Agora estamos prontos para ir. Eu posso selecionar assim e pressionar “V” e alinhar no meio. Às vezes, mesmo que você o alinhe de acordo com sua matemática, ele não parece centralizado para seus olhos ou olhos humanos. Para torná-lo visualmente centrado, você pode ajustá-lo como, eu acho que eu tenho que movê-lo um pixel ou talvez dois pixels aqui porque esta forma é basicamente diferente. Agora eu acho que ele parece no meio, quase no meio, e nós completamos este exercício de sombra suave. Espero que tenham aprendido algo novo daqui. Vamos passar para a próxima palestra. 55. Desafio de botão 3D: Ok pessoal, aqui vai outro desafio para vocês. É também um botão, mas é um botão 3D. Tente criar algo semelhante a isso. Vou te dar algumas dicas aqui. Este é sombra e você pode ver uma sombra muito leve e sutil por aqui. Eu usei duas sombras. Há também uma camada muito fina de traçado dentro do traçado e esta é apenas uma linha que você pode usar a partir daqui, Line Tool. Apenas uma linha com a cor, que é um pouco mais escura que este fundo. Estas são todas as dicas e espero que você possa criar algo semelhante a isso. Vou postar uma solução em breve em outro vídeo. Então você pode facilmente criar esse tipo de padrões. Espero que tenham gostado deste desafio e deixe-me ver o que vocês podem alcançar e me mostrar seus links e discussão e eu acho que é isso sobre este desafio. 56. Efeito prensado no Photoshop: Olá a todos. Hoje vamos criar este efeito pressionado. É muito importante em todos os projetos de interface do usuário mostrar que há estados pressionados de botões, e é usado em muitos lugares. Você sempre deve dominar essa técnica. Vamos criar isso rapidamente. Abra um novo arquivo. Vou abrir este, Alt, apagar para preencher a tela com a cor do primeiro plano. Vamos usar esta ferramenta de retângulo arredondado para desenhar um retângulo arredondado assim. Eu vou criar um pouco maior para que você possa vê-lo facilmente. Eu criei este. Vamos mudar a cor de fundo. Estou usando um campo de cor sólida para o fundo. Mude para algo como este. Agora criamos este retângulo arredondado. Vamos criar alguns guias em torno dele assim. Agora, desenhe outro retângulo arredondado do meio para esta seção. Isto vai ser pressionado. Nas propriedades, desmarque este, e nós vamos remover a esquerda para o redondo para este. Estamos prontos para ir. Vamos mudar este botão para algo assim, talvez um visual azul mais nítido fique bem. Agora, nossa estrutura base está pronta. Vamos criar alguns efeitos em torno dele e colocar alguns estilos de camada sobre ele. Vamos primeiro colocar um texto sobre ele. O texto deve ser alguma coisa. Vou mostrar outra técnica. Eu vou, selecionando o texto em negrito e mudando seu tamanho simultaneamente assim. Esta é outra técnica, muitos designers não sabem disso. Vamos alinhá-los novamente com nossos guias assim. Controle Alt H, há algo estranho. Agora, aqui esta, desculpe. Selecione isso e vamos alinhar novamente no meio. É isso. Agora vamos mudar isso pressionado para a cor branca apenas para ter certeza de que parece bom. Remova as guias, oculte as guias. Primeiro vamos aplicar estilos a esta camada interna. Esta é a camada dentro, vamos aplicar estilos de camada em uma sombra. Agora, na sombra interna, certifique-se de que você selecionou multiplicar e cor é preto. Não use outra cor. Você também pode usar sombra mais escura para este azul, mas eu acho que o preto é melhor. Então use esta opacidade. Se você quer um efeito mais escuro, você pode ir daqui assim. Talvez devêssemos definir para 50%. Distância, cabe a você, você pode escolher qualquer distância, mas não vá muito longe porque ele vai mudar o seu efeito. Às vezes, não parecerá pressionado. Mantenha-o curto como cinco ou três pixels é mais do que suficiente. O tamanho desfocado deve ser um pouco maior deste tamanho. Faça nove ou dez ou algo assim mais perto deste. Não precisamos de outras coisas, luz deve ser do ângulo de 90 graus. Pressione “OK”, e isso é quase a metade do nosso efeito pressionado. Agora, vamos criar outra coisa. Agora, quando a luz cair daqui , deve ter algum brilho nesta área. Para criar isso, vamos selecionar esta camada, a outra que era o recipiente na verdade, e vamos aplicar alguns estilos sobre ela. Primeiro vamos aplicar acidente vascular cerebral. Tenha em mente que o curso deve ser mais escuro do que esse plano de fundo. Vou selecionar esse plano de fundo, e vou reduzir o brilho para 65 por cento. Agora nosso derrame está feito. Agora vamos para a sombra. Agora não precisamos dessa luz global porque vamos usá-la para o outro lado. Noventa graus, sim, vamos usá-lo no topo, e vamos usar a cor branca, e remover essa multiplicação, vamos usá-la normal. Agora você pode ver como ele está recebendo o brilho aqui nesta área. Então vamos reduzi-lo porque está ficando um brilho muito grande. Um para este e dois para este. Acho que isso é bom o suficiente. Um para a distância e dois para o tamanho desfocado. Isto é basicamente como vamos criar esta luz pressionada aqui. Este material parecia realmente pressionado. Agora estamos quase terminando com esse efeito. Deixe-me mostrar-lhe ampliando, você pode ver como isso está funcionando. Nós estamos mostrando uma linha de traço muito fina em torno dele e então nós estamos mostrando brilho aqui, e em uma sombra aqui. Se você quiser reduzir a sombra interna, você pode reduzi-la para três pixels. Vou diminuir o zoom. Você pode ver como esse efeito pressionado funciona. Isto é tudo sobre a criação desses efeitos pressionados e botões pressionados e estados pressionados para diferentes objetos. Ele tem um monte de UI uso. Vejo você na próxima palestra. 57. Design de cabeçalho moderno parte 1: Hoje vamos projetar esses cabeçalhos de aparência moderna. Vamos começar. Vou abrir um novo arquivo, ou você pode abrir um novo quadro de arte. Vou definir a largura e a altura para o máximo, 1920, e definir a altura para algo como 700 pixels. Aqui está o nosso quadro de arte. Agora vou usar um arquivo gratuito, que baixei deste site, unsplash.com. Você também pode baixar um monte de imagens gratuitas a partir daqui. Agora, deixe-me mostrar as imagens que eu já baixei. A imagem é esta, 6H. Agora vou arrastá-lo para dentro da minha tela, assim. Agora, para conter esta imagem eu preciso de alguns contêineres, então vamos usar algum contêiner aqui. Vamos desenhar o nosso recipiente com esta ferramenta de retângulo. Clique um único clique neste quadro de arte aqui, digite a largura 1920 e altura 700. Vamos usar o recipiente de tamanho normal, assim. Aperte “V” e mova este contentor para aqui assim. Nomeie o contêiner no painel Camadas. Agora mova esta imagem acima deste contêiner porque nós vamos cortá-la dentro deste contêiner. Deixe-me mudar sua cor para que fique visível. Agora selecione as camadas acima, que é basicamente a camada de imagem e tente redimensioná-la assim. É isso. Agora vamos cortar esta imagem para que possamos movê-la dentro deste contêiner. Clique na tecla “Alt” ou “Option” se estiver a utilizar um Mac. Se você estiver em um PC, clique em “Alt” e pressione entre eles, clique uma vez. Agora esta está cortada. Posso movê-lo por aqui assim. Se realmente precisarmos ajustá-lo, podemos movê-lo assim, para cima ou para baixo. Agora, o segundo passo é que vamos usar nossa sobreposição de gradiente para criar alguma área escura ou branca para que nosso texto seja exibido facilmente e seja legível em nosso cabeçalho moderno. Vamos fazer isso. Clique no recipiente e clique no ícone fx. Vamos usar sobreposição de gradiente. Tenha em mente, vamos multiplicar o gradiente. Então, ele irá adicionar algumas de suas cores no fundo anterior, que já está aqui. Agora defina o modo de mesclagem para multiplicar. Chegando ao gradiente, clique nele. Agora, o que eu estou usando é basicamente uma cor cinza ou cinza escuro perto de preto, e eu estou usando sua opacidade para 100 por cento. Por outro lado, estou usando cor branca e opacidade é zero. Basicamente é um gradiente preto para transparente. Isso é o que eu realmente precisava para te mostrar. Agora o que isso basicamente fazendo é, ele vai criar algumas áreas aqui para facilmente escrever o texto aqui. Agora, estas são as configurações. Mantenha o ângulo para 90 e estilo para linear. É isso. Nós vamos aplicar este estilo de camada, que é sobreposição de gradiente. Agora, essa sobreposição de gradiente é muito popular. Muitos designers usam isso na maior parte do tempo. Esta é uma técnica muito útil quando você tem que criar algumas partes ou o cabeçalho onde você deseja escrever o texto. Às vezes, o texto pode não estar visível ou não pode ser visível ou legível devido à cor do plano de fundo. Então, usamos sobreposições de gradiente para realizar essa tarefa. Vamos escolher a tipografia. Estou usando fonte negrito Montserrat e Source Sans Pro para este exercício. Agora vamos selecionar Mons digite aqui. M-O-N, vamos ver onde está. Aqui está, Montserrat ousado. Agora vou arrastar até aqui. Esse é outro problema. Pressione “Shift” e clique aqui para sairmos desse problema do Photoshop e digitando dentro dos limites da camada. Vamos para o caminho do sucesso. Não é possível ver o texto porque a camada está atrás da imagem. Vamos movê-lo para cima da imagem e mudar sua cor para um preto mais escuro, um pouco assim. Deixe-me ver os textos que eu realmente usei no meu arquivo de exercícios, que foi voar no caminho do sucesso. Era voar na estrada do sucesso. Por favor, perdoe minha memória, eu sou uma pessoa muito curta memoried. Esqueci-me de muitas coisas. Voe no caminho do sucesso. Agora vamos fazer isso regular e vamos usar o alinhamento do meio. Agora, mova-o para o centro da imagem. Controle A e Controle Alt e H para horizontal, esta era a nossa tecla de atalho personalizada, então tenha isso em mente. Agora vamos definir alguns dos tamanhos. Esta é uma camada fictícia. Clicar duas vezes e ver qual é o tamanho que nos vai ajudar aqui. Acho que 48 pixels é mais do que suficiente. Se precisarmos mudar a altura da linha, podemos mudá-la aqui assim. Acho que 78 está perfeito. Agora crie uma caixa delimitadora em torno dele como temos em nosso arquivo de exercícios, crie algo assim. Só um retângulo aqui. Agora vamos aplicar alguns estilos, que é basicamente traço para este retângulo. Basta deixar o traço para algo como cinco ou talvez oito pixels. Posição deve estar fora, não dentro, porque se definir o lado de fora ele mostra um retângulo um pouco arredondado. Nós não precisamos agora retângulo arredondado, precisamos de um retângulo perfeito com bordas. Agora nós preparamos isso. Agora vamos para este preenchimento e reduzi-lo a zero. Agora temos o nosso retângulo transparente com bordas aqui. 58. Design de cabeçalho moderno parte: É isso, e agora vamos usar mais uma cor básica. Você pode ver o nosso botão principal de chamada à ação. Deixe-me desenhar um botão aqui assim. Vamos definir sua cor para amarelo. Vamos deixar este amarelo um pouco mais claro na cor, movendo-se para esta área aqui. Um pouco parecido com isso. Isso é sobre isso. Agora, vamos adicionar alguma sombra a esse padrão, Sombra, e usar essas configurações. Multiplicar, 35% de opacidade, distância três e tamanho sete por cento. Nosso desfoque de sombra é espalhado para sete pixels ao redor da parte inferior e a distância é de três pixels. Se você quiser reduzi-lo, você pode reduzi-lo como cinco ou algo assim. Agora que a sombra está feita, vamos digitar algo nela. Seja bem sucedido agora. Vamos reduzir esse tamanho de fonte. Vamos reduzi-lo usando nossa fonte aqui, que é mais fácil e mais rápido eu acho que usar a tecla de atalho. Eu defini seu tamanho para 24 pixels, e estamos prontos para ir agora. Talvez possamos torná-lo mais escuro, breu. Agora, selecione essas duas camadas e Controle G, agrupe e crie um botão. Nomeamos todas as camadas. Renomeie para fronteira, algo assim. É isso para esta parte. Agora vou passar para a próxima parte que foi por aqui e aqui. Isto é basicamente, nós vamos usar a cor branca aqui. Talvez branco completo ou algo assim em uma cor branco-acinzentada. Eu vou usar a fonte que é Source Sans Pro Regular, eu acho, talvez Light. Junte-se ao sucesso de 14.532 outros idiotas como você. É uma boa linha para se juntar à comunidade. Agora, uma coisa que perdemos no início, que é basicamente obter nossas margens, espaço em torno do nosso design. Vou desenhar isso rapidamente. Para isso, clique em “Controlar”. Clique no contêiner e clique aqui, “QuickGuide”, clique no meio, para criar guias em torno dele. Então vamos usar Griddify e ir para Espaçamento. Vou usar 60 pixels em torno do meu design assim. Vou mudar a direção para cima e para baixo assim. Isto é basicamente para colocar o seu design em linha. Agora vou mover o meu texto de acordo com estes. Você pode ver como eu usei este Griddify e estes dois plug-ins para o meu design, Control J e copiar os mesmos textos aqui e movê-lo para cá, assim. Agora vamos adicionar uma foto aqui que era alguém assim, ler a última história do sucesso de John. Vamos primeiro reformular. Vamos ler a história de sucesso do John na nossa plataforma. Agora isso parece bom. Para a imagem, vamos usar um site que é chamado UI Faces. Acho que há o nome, uifaces.com. Acesse este site e use uma imagem a partir daqui. Vamos usar este aqui. Já usei este. Você pode usar qualquer outro. Você pode voltar e arrastar esta imagem para o Photoshop assim. Vamos movê-lo para cá. Agora, para conter esta imagem, também precisamos de um recipiente Eclipse Tool ou Eclipse. Arraste-o assim e vamos manter isto dentro deste eclipse. Nada mais. Só precisamos ajustar nosso eclipse um pouco maior. Ajuste esta imagem. Mais uma gorjeta. Criar algum objeto inteligente a partir desta imagem assim. Eu pressionei Control Alt F5 para converter esta imagem em um objeto inteligente. Vamos torná-lo um pouco mais curto ou menor. Não mais curto, talvez essa pessoa possa ficar com raiva, para ficar mais curto. Talvez assim, eu estou pressionando Shift e Alt com isso, assim. Agora vamos alinhá-lo no meio, então agrupá-los e criar um grupo de imagens. Vou alinhá-lo no meio assim. Vamos esconder as camadas de Controle de Cólon. Agora, aqui temos o problema de que nossa imagem tem menos espaço nessas áreas. Vamos chegar a esse ponto. Reduza isso um pouco. Mova o botão um pouco para cima, assim. Além disso, reduza o traçado para cinco pixels e a cor para um pouco mais escura em vez de cinza azulado. Reduza essa altura do botão, o que está parecendo um pouco estranho para mim. Faça 85 assim. Além disso, vamos ver se as bordas precisam ser arredondadas assim. Sim, arredondamento de quatro pixels em suas propriedades. Defina isto para o botão. Acho que é mais o que projetamos. Se você realmente precisa ver como o nosso design está olhando, você pode ver que eu deixei espaços iguais ou similares em torno do meu design, que é chamado de margens. Isso é 60 pixels, 60 pixels, 60 pixels e 60 pixels. Vamos mover esta borda e o botão um pouco dentro da nossa área de 60 pixels assim. Acho que ainda parece um pouco mais amplo para mim. Vamos torná-lo mais curto e mover o botão um pouco para cima assim. Na próxima lição, faremos a próxima variação deste design moderno. Vejo-te na próxima palestra. 59. Variação de design de cabeçalho moderno: Agora vamos criar uma variação deste cabeçalho com botão arredondado aqui. Vamos começar removendo esta fronteira primeiro. Nós vamos deletá-lo. Então pressione “Excluir” no seu teclado, selecionando esta camada e selecione esta, e nós vamos torná-lo botão arredondado. Use um menu como 30 pixels aqui. Agora, talvez mais de 30, arraste-o assim. Cinquenta pixels será suficiente. Ele está definido para 42,5 e é arredondado agora. Agora primeiro trabalhe neste botão. Vamos aplicar alguns estilos como este, sombra interior. Podemos realizar o olhar botão 3D com sombra interna e sombra. Vou usar a sombra interior agora. Desmarque esta luz global. Mova a luz para o fundo menos 90 e tamanho para zero. Você pode ver que já está moldando em 3D botão, modo que a distância de cinco assim. Agora vamos usar um pouco de cor, talvez na sombra laranja, talvez aqui, um pouco mais escura. Acho que isso é bom. Mova para 40 por cento. Agora você pode ver como eu usei sombra interna para criar um botão de aparência 3D. Esta é uma técnica muito útil, tenha em mente. Agora vou alinhar o texto dentro do meio. Agora, se você ver que eu alinhei o texto no meio horizontal e verticalmente, mas o problema são os nossos efeitos 3D. Vamos mover o texto acima, assim, e talvez mudar a cor para um pouco acinzentado, assim. Talvez possamos aumentar o tamanho do botão, pressionar “Shift” e adicionar assim. Está parecendo melhor agora. Também podemos alterar o espaçamento entre as letras para zero, torná-lo um pouco menos largo. Este é basicamente o espaçamento entre as letras. Você pode ver se eu arrastá-lo até aqui e arrastá-lo de volta para zero. É isso. Agora vamos mover esta camada de texto. Vamos ligar os nossos guias novamente. Mova este texto malvado para aqui no topo, assim, ou talvez um pouco mais baixo do que este. Vamos mudar essa liderança ou basicamente a altura da linha. Parece bom, 62 pode ser bom o suficiente. Não, 66 foi melhor. Agora eu vou adicionar uma linha de texto aqui que, nós ajudamos as pessoas a moldar seus portadores. Vamos remover isso por enquanto e criar uma camada de parágrafo de texto arrastando-a assim. Isso seria mais fácil de controlar. Nós moldamos o destino das pessoas alterando seu DNA e outras coisas relacionadas. Agora mude seu tamanho para 18. Não, 18 é um pouco mais pequeno, 24 vai ficar bem, eu acho. Agora temos que mudar sua cor para um pouco menor cinza, então parece um pouco mais envolvente e um pouco menos importante. Nós também podemos usar texto branco aqui, eu acho que não. Não podemos usar texto branco. Está horrível. Primeiro, vamos mudar a altura da linha. Precisamos de algo semelhante a isso, 32 pixels está bom. Mova-o um pouco mais no meio, assim. Altere sua fonte para Source Sans Pro Regular, assim, e mudamos sua carreira para cima. É uma introdução de duas linhas fora do seu site. Agora você pode gerenciar cores daqui, assim, ou talvez daqui, ou aqui. Você pode ver como eu estou usando a imagem para obter alguns tons de cor para usar no meu design. Eles ficam muito bonitos se você usar algo desse fundo. Este é outro truque, talvez esta cor esteja boa aparência. Vamos centrá-lo dentro da nossa tela. Pressione “Control A”, “Control, Alt, H”, e pronto. Pressione “Control D.” Agora vejo alguns problemas no meu espaçamento. Vamos movê-lo um pouco para cima, 52 e fazer tudo ousado. Pressionei “Control, Alt, Z” para recuar. Preciso que seja assim. Agora reduza-o para 62, e mova-o um pouco para baixo. Remova suas fronteiras, e nós quase cumprimos nossa tarefa. Basta mover o botão um pouco para baixo. Também mova isso um pouco para baixo assim. Vamos ver quantos pixels estamos longe deste topo, quase 1, 2, 3, 4, 5. Eles são bons o suficiente, 1, 2, 3, 4 e 5. Nós temos quase espaço, e se realmente precisamos mover isso um pouco para baixo, devemos mover tudo para baixo assim. Mova este texto um pouco para baixo assim. Acho que está bem assim. Agora criamos nosso segundo cabeçalho moderno, e discutimos algumas novas técnicas como obter cor de sua imagem de fundo e usar a sombra interna para criar este botão 3D, eu acho. Acho que você pode ter gostado muito desta palestra. Muitos estudantes estavam esperando por este. Vou fazer muito no futuro. Vamos passar para as próximas palestras. 60. Efeitos de sobreposição de cores para a área de heróis: Nesta lição, vamos criar este cabeçalho moderno de aparência incrível. Outro, mas isso vai ser com outra técnica que é basicamente sobreposição de cor. Vamos usar camada de ajuste de sobreposição de cor para criar este efeito incrível. Vamos começar a criar este cabeçalho. Abra um novo arquivo. Eu vou usar esta prancheta Web Mais comum usado. Vou usar o tamanho de 700 para isso. Aperte “Ok”. Agora temos o quadro de arte. Agora vamos criar outra camada, o tamanho da nossa prancheta para o nosso recipiente para a imagem e o fundo do cabeçalho. Nós criamos este. Vamos fazer do tamanho da nossa tela assim. Agora eu usei este site chamado picjumbo.com para as imagens gratuitas. Você pode usá-lo e baixar qualquer imagem gratuita a partir daqui para usar neste exercício. Já baixei um deles, que é este. Então eu vou arrastá-lo até aqui no meu Photoshop, assim. Vou expandi-lo um pouco para gostar disso. Eu vou arrastá-lo para baixo e nós vamos prendê-lo dentro do nosso recipiente. Vamos ver, nomeá-lo recipiente e fazer sua cor para branco. O que vamos fazer é sobrepor outra cor neste fundo para criar este efeito. Então, vamos usar sobreposição de cores neste recipiente. Você pode usá-lo daqui. Vá para essas camadas de ajuste e selecione Cor sólida. Aperte “Ok”. Vamos usar algum efeito como talvez Multiplicar, Normal e mudar a opacidade para 90 por cento. A escolha é sua. Você pode usar qualquer um, qualquer opacidade aqui. Clique em qualquer cor escura como essa. É assim que criamos esse efeito. Podemos baixar mais. Oitenta por cento é bom o suficiente. Também podemos mudar a cor daqui para um pouco mais escuro, tom azul. Agora o nosso passado está feito. Agora podemos ir em frente e obter um arquivo de logotipo aqui e algumas outras coisas. Eu usei duas fontes tipografia. Um é Trabalho Sans Regular, há também Google Font, outro é Montserrat Bold. Vamos escrever o nosso título aqui. Vamos escrever o título aqui. Deixe-me ver o que escrevi sobre o design original, Aprender a criar protótipos de papel. Deixe-me reformular, aprender a criar, e, em seguida, eu vou duplicá-lo, protótipos de papel. Nos protótipos de papel, uso Montserrat Bold. Vamos fazer com que seja tamanho 64 e talvez 48. Quarenta e oito é bom o suficiente e vamos apenas atualizar este tamanho para 32 e 48. Vou alinhá-los uns com os outros, selecionando os dois, movendo-os. Mais uma coisa eu preciso para obter algumas margens do lado esquerdo e direito. Então eu vou usar Griddify 130 pixels em ambos os lados assim. Agora Controle D para desmarcar, e eu vou alinhar estes com esta linha. Vou copiar o mesmo texto aqui, que usei na imagem original. Agora eu vou selecionar novamente o texto e eu vou arrastá-lo assim e colá-lo aqui. Então este é Montserrat Regular, fonte de 16 pixels, apenas para ter em mente, e este é 32 ou você pode aumentá-lo para 36 também assim. Não era normal, mas fonte de luz. Criámos o nosso texto. Vamos criar nosso botão de chamada à ação aqui. Então vamos usar um botão fantasma ou apenas um botão branco aqui, só para ter um bom foco nesta área. Então vamos usar o nosso, novamente, trabalho sem regular 20 pixel e vamos começar a aprender. Basta mudar sua cor para uma cor afiada como esta laranja. Vou usá-lo, alinhá-lo, selecionar as duas camadas, alinhá-lo com Alt Control H e Alt Control V, apenas movê-lo um pouco para baixo, um passo para baixo. Selecione ambas as camadas e alinhe-a com esta linha de margem esquerda. Além disso, parece um pouco menos espaço aqui. Basta deixar o fundo e expandir esta largura assim. Agora nosso botão está pronto. Vamos arrastar algum logotipo aqui. Vou usar o meu Alt Control F10. Então agora eu estou usando todas as três telas. Vamos apenas fechá-lo. Vou arrastar o meu logótipo deste ficheiro para aqui. Nosso logotipo está aqui. Vamos torná-lo um pouco mais curto. Isto é bom o suficiente. Vamos movê-lo para cá. Vou usar efeito de sobreposição de cores aqui. Você pode ir para efeitos e sobreposição de cores e você pode usar alguma cor acinzentada aqui, porque nós não queremos mais para torná-lo proeminente. Então use a cor cinza aqui. Nosso logotipo está pronto. Precisamos de um botão de login no lado direito. Então basta usar um login de texto ou podemos usar essas duas camadas. Podemos agrupá-los em btn e, em seguida, Control J, copiá-lo, e, em seguida, movê-lo para cá assim. Mas vamos mudar o estilo. Isto vai ser branco e o fundo vai ter um traço de branco, um pixel e vamos reduzir o preenchimento para zero. Agora, se fizemos o nosso botão de login, mas precisamos torná-lo curto. Você nomeia para fazer login. Login, login, login. Agora, há um pequeno problema. Nosso botão de login também tem quase a mesma altura e largura. Então vamos reduzi-lo porque não queremos muita atenção aqui assim e também se pudermos reduzir o tamanho da fonte para 18 pixels, isso é bom o suficiente. Agora, vamos renomeá-lo para Login btn para o botão de login, movê-lo com esta linha, nossa linha de margem. Vamos alinhar este botão de login com este logotipo. Selecione ambos e a linha central assim. Acho que já estão no centro. Agora nós quase criamos todo o nosso cabeçalho. Há mais uma coisa que você pode acrescentar aqui. Você pode desenhar outro retângulo assim aqui. Você pode ter visto isso em muitos sites. Mude sua cor para quase preto e mude sua opacidade para 70 por cento ou o que quiser, como 50 por cento. Para mim é 50 por cento. Então você pode ver que esta técnica é usada muito tempo em um monte de sites. Assim, também podemos reduzir seu tamanho e mover o botão de login e nosso logotipo um pouco para cima assim. Agora parece mais equilibrado. Agora, esta é a maneira como criamos efeitos de cabeçalho de sobreposição de cores. Então, se tentarmos escondê-lo, podemos usar qualquer preenchimento de cor aqui, como se eu fosse usar esta laranja ou esta cor ou esta ou esta, ou talvez esta, ou podemos usar uma cor mais escura como essa, cor acinzentada mais escura. Você pode ter visto esse efeito em muitos sites, uma sobreposição de cor acinzentada muito maçante. Então, esta é uma técnica muito popular. Você pode usá-lo com qualquer cor. Você pode selecionar qualquer cor a partir daqui, e ficará muito agradável. Então, é isso sobre o uso de sobreposições de cores e preenchimento de sobreposição de cores para criar designs de cabeçalho incríveis. Se você tiver alguma dúvida ou qualquer outro pedido, basta iniciar uma discussão. Acho que estou criando muitas palestras nos dias de hoje, então fique atento e mantenha-me atualizado. 61. Exercício de de máscara: Desde os últimos dias, eu estou vendo este anúncio Bluehost no Facebook, então eu pensei que eu deveria compartilhar esse efeito com você. Quando comecei a projetar por muitos anos, eu não sabia como esse efeito é possível. Eles têm gradiente vindo de um lado e está fazendo sua imagem de fundo um pouco opaca e em alguns lugares, é gradualmente opaca e transparente ao mesmo tempo. Deixe-me mostrar-lhe nesta lição como vamos projetar isso. Nesta lição, nós estamos realmente indo para projetar este design. É um pouco diferente, mas acho que é melhor do que eles. Vamos começar e vê-lo dentro deste exercício, se você tiver alguma pergunta, me pergunte a qualquer hora. Vamos começar. Primeiro vamos abrir um novo arquivo. Clique em “Novo” e o tamanho que vamos usar é 1280 por 650. Pressione “Ok”, e este é o nosso tamanho de tela, e então nós vamos colocar algumas grades sobre ele. Vá para View, New Guide Layout e vamos usar 12 colunas, tamanho da calha será de 20 pixels e as margens serão 20, 20, 20 e 20. Pressione “Ok”, para que nossa tela esteja pronta. A próxima coisa que vou fazer é mostrar-vos alguns dos recursos que usei. Vamos para esta janela. Estas são as fontes que estou usando adicionadas pelo TipoType. É uma das minhas fontes favoritas, você pode obtê-lo gratuitamente, basta pressionar “Zero” nele e Adicionar ao carrinho, e comprar estes, apenas grátis. Depois, há uma fonte, este Arquivo, fonte livre. Esta é também uma fonte que eu usei. Estas são duas fontes que usei, ambas são gratuitas. A terceira é a imagem que usei, que é esta. Eu não me lembro onde eu encontrei, mas se você quiser, eu acho que era grátis e local de trabalho 1245776. Se você tentar pesquisar online com o mesmo nome aqui, acho que você pode encontrá-lo. Você pode usar qualquer imagem que quiser, deixe-me mostrar-lhe um site. Vá para esta foto, picjumbo.com e procure aqui, local de trabalho e você verá um monte de grandes imagens como estas. Este, você pode usar este também. Também este, ou talvez este. Acho que este também é perfeito. Use qualquer imagem daqui, estas são todas imagens gratuitas. A primeira coisa que vamos fazer é arrastar nossa imagem de fundo, esta para o Photoshop e deixá-la assim. Então vamos dimensioná-lo de acordo, assim. Agora temos nossa imagem de fundo. Agora chegando ao efeito dessa opacidade de gradiente e máscara de gradiente. Vamos aplicar esta máscara aqui, Adicionar máscara de camada. Agora selecione esta “Máscara” no lado direito, e vamos pegar essa ferramenta de gradiente. Pressione “G”, ferramenta de balde de pintura ou ferramenta de gradiente. Certifique-se de que o gradiente está definido como preto para branco. Agora o que vai acontecer? Aquele preto vai acabar, então você pode ver aqui. O que está acontecendo aqui é que este gradiente é de preto a branco, então a máscara preto-a-branco está basicamente tornando algumas das partes da nossa imagem transparentes. Basicamente, este fundo branco é mostrado na parte de trás. Se quiser outro fundo, preencha a cor que quiser, como vou mostrar agora. Agora meu fundo é um pouco de cor ciana, está preenchido com isso. Se você quiser uma cor preta, você pode clicar em uma cor preta como essa. Azul, preto, qualquer cor que você gosta, você pode colocar aqui. Agora vou usar este branco. Além disso, continue arrastando essa linha do seu gradiente. Você pode ver se eu tentar movê-lo por muito tempo, ele também vai tornar transparente parte desta parte. Se você quiser muito texto ou muita legibilidade de texto, você pode aplicar esse efeito. Agora, a primeira coisa é que vamos usar a fonte “R”, esta aqui, Arquivo Regular, e eu vou escolher essa cor, eu acho que era essa cor, 31414D. Verifique se o tamanho da fonte é 72. Vou escrever aqui, “Empower”. Na próxima linha eu vou usar, “Your Startup Now”. Não se preocupe, vamos mudar a fonte depois. Estas são as palavras. É melhor se você movê-los na camada separada, então eu vou remover este “Empower” nele, e também vou remover o texto inferior desta área. Agora temos duas camadas diferentes com este texto e este. O próximo será esta cor vermelha. Aqui é CA4930. É uma cor plana. Basicamente estes dois são, eu acho, cores planas, e um deles é a cor da minha marca também, executar UXID. Ele é usado em My Run UXID Logo. Agora vamos usar Aileron, vou selecionar agora esse “Regular”. Deixe-me ver, eu acho, seu começo, y não era capital. Agora para isso eu vou usar tamanho 48 e eu vou usar luz. Assim, e para isso eu vou usar semi-negrito, itálico, e eu também vou usar 48, assim. Acho que aqui também tínhamos 48 semi-negrito. Vamos torná-lo mais branco aqui porque tivemos mais branco no último exercício. É assim que conseguimos esse efeito. Você pode ver que eu continuo experimentando também. A direção deste gradiente também funciona se você quiser algo em linear mais deslocamento como esse, isso será linear em toda a imagem. Se você quer algo direcional como este, nesta direção você pode usar algo assim. No anúncio que eu mostrei a você, Bluehost ter usado esta direção da parte superior esquerda para a parte inferior direita. Agora vamos usar um botão aqui como este. Eu acho que este tamanho é bom, e nós vamos usar apenas dois pixels em torno raio aqui no painel de propriedades desta forma. Mude-o, e vamos usar o branco, e vamos adicionar algumas sombras aqui. Sombra solta 1. Esta é uma nova técnica. Você pode chamá-los de sombras brilhantes e eles são muito populares nos dias de hoje. Um deles é uma sombra preta com efeito multiplicado, muito baixa opacidade, então você pode torná-lo 20 ou talvez 16, algo assim, muito baixa opacidade. Então temos distância de 10, também o tamanho é 18. Este é o tamanho do spread. Então temos sombra, que é esta cor vermelha, ou você pode escolher esta cor daqui. Ele também tem uma opacidade muito baixa, normal, não está se multiplicando e distância é 10 e 20. Quase 10 a 20 pixels de A. Agora selecionamos isso. Então vamos usar um retângulo aqui e colocá-lo aqui assim. Vamos colorir vermelho da mesma cor deste texto, e vamos cortá-la, máscara de recorte, é assim que usamos máscara de recorte e eles são usados muito tempo no design da experiência do usuário e design da interface do usuário e projetando tudo isso coisas. Agora eu vou usar aqui pressione “Shift”, então nós somos fáceis de clicar aqui. Vou usar “Junte-se ao UXID. LearnuXid.” Vou usar o tamanho 24 e vou usar Aileron. Vou usar a luz. Você pode usar qualquer fonte que quiser, mas eu estou usando luz regular. Vamos usar regularmente, e há mais um truque. Vou mudar para a fonte Arial só por agora. “ Arial”, e agora vamos usar a tecla Alt ou Option e pressionar “26". Então “R 26" e isso vai mostrar uma flecha. Eu amo essa flecha, é muito fácil obter esse efeito. Certifique-se de escolher uma fonte que suporte esse valor. Estes são basicamente valores ASCII, valores A-S-C-I-I. São flechas. Você também pode fazê-las em HTML. Se você quiser torná-lo um pouco mais espaçoso, tente alterar esse valor de rastreamento neste painel de caracteres. Talvez 25 ou 30 assim, por isso é mais aberto. Vamos ver como está o nosso design. Está ótimo. Agora, chegando a essa grade, estou usando basicamente essas quatro colunas: 1, 2, 3, 4. Vamos alinhar no centro todos estes nesta coluna. O que está acontecendo aqui? Vamos desmarcá-la, Controle D ou Comando D. Vamos mover todos juntos, talvez um pouco para cá. Nosso botão e tudo está no lugar. Vamos adicionar alguma navegação aqui, e para isso vamos usar a ferramenta de linha. Vou usar a ferramenta de linha. Verifique se o peso da ferramenta de linha é de dois ou três pixels porque um pixel é muito fino, portanto, pode não estar visível. Então faça dois pixels assim. Eu vou colorir isso da mesma cor aqui e então nós vamos duplicá-los assim, 1 e 2. Se você quer algo assim, é bom. Basta movê-lo nesta coluna. Estou falando dessa coluna, então isso é basicamente uma coluna, isso é dispersão. Se você quiser, você pode alinhá-lo assim, mas eu vi alguns dos desenhos onde eles têm algo assim e então eles têm algo assim. Vamos mudar apenas a largura. Vá para esta largura e vamos usar 32 pixels aqui, e vamos alinhar todos estes para a esquerda, assim. Foi assim que concluímos este projeto. Vou compartilhar meu arquivo de recurso PST para este design. Se você tem alguma dúvida ou não entendeu nenhum atalho, ou qualquer coisa durante esta aula, me faça perguntas. Espero que tenham gostado desta lição. Vamos passar para a próxima lição. 62. Como criar guias no in: Agora, nesta lição, vamos criar algo semelhante a isso. Estas são basicamente abas. Então navegação com guias, você já viu isso em muitos sites. Um dos meus alunos, ele pediu esta palestra que eu preciso para criar alguns elementos de design de interface do usuário, como guias ou suspensos. Isto é o que vamos criar nesta lição. Há outra versão para esta, que é a versão box. Você pode ver por aqui. Isto é basicamente versão caixa ou versão preenchida e este é basicamente outro é versão nua. Estas são duas versões que vamos projetar nesta lição. Você pode ver aqui que há sombras sutis nessas duas áreas. Também há sombras sutis por trás dessas três imagens. Vamos começar e ver o que podemos fazer na próxima lição. 63. Como criar guias tema 1: Alguns dias atrás, um dos meus alunos me perguntou que ele precisava criar esse tipo de guias. Então, nesta lição, vamos criar a versão nua mais rápida. Vamos começar. Vou abrir um novo arquivo, um novo documento e vou usar esse meio, 1440 por 900, criar. Vamos primeiro criar a linha vermelha. Nós vamos pegar esta ferramenta retangular e vamos clicar uma vez nesta tela. Você pode ver que ele aparece sobre como criar este retângulo. Vamos dar-lhe uma largura de 1065 e a altura de 2 pixels. Como isso. É uma linha muito fina. Vamos criar outra camada aqui. Então camada um, e eu vou para camada e criar uma camada de fundo para que eu possa facilmente alinhar tudo de acordo com essa arte. Opção de comando H. Agora está no meio. Agora vamos criar nossos botões. Então primeiro mudar esta cor para este vermelho, ca4930 é a cor que estou usando aqui. Agora vamos pegar esta ferramenta de retângulo arredondado e vamos clicar mais uma vez e a largura será 165 e a altura deste botão será 55. Devíamos usar o raio para ser quatro, acho que quatro, quatro, quatro e quatro. Pressione Ok. Então temos este botão aqui. Agora você pode ver que os dois cantos arredondados inferiores não devem ser arredondados porque eles vão anexar a esta linha. Então vamos remover isso e usar zero, zero na parte inferior. Como isso. Agora você pode ver que temos um botão de abas aqui. Vamos colocar um pouco de texto nele. Vamos usar Open Sans ou você pode usar Clear Sans. Estas são fontes gratuitas do Google. Agora tamanho do texto eu vou usar 20 pontos ou 20 pixels e Shift e clique aqui. Vamos usar filmes aqui. Agora cor branca, e nós vamos alinhá-los um com o outro assim. Agora vamos adicionar sombras a este. Então, vamos para estilos de camada, primeiro agarrar esta camada e ir para estilos de camada e soltar sombra. Agora a sombra que vamos usar deve estar no lado direito e no lado esquerdo, então não precisamos que a sombra esteja na parte inferior. Primeiro vamos usar um pouco de cor acinzentada aqui. Escolha qualquer cor acinzentada ao longo deste lado. Então vamos usar opacidade muito baixa como 30 por cento, e a distância deve ser 9 e este valor de pixel será 12. Temos uma sombra, mas precisamos que ela esteja do lado direito, então vamos mudar o ângulo para a esquerda, então 180. Se a luz vem daqui, a sombra estará deste lado. Este é o conceito que estudamos na palestra anterior. Então é assim que criamos uma sombra. Vamos clicar neste botão mais e vamos adicionar outra sombra. Desta vez, a sombra estará do outro lado, que será zero. Certifique-se de desmarcar esta luz global porque ela vai bagunçar suas luzes aqui. Vamos usar duas luzes. Um vai estar no zero e o outro vai ser, certifique-se que este está desmarcado, 180. Então temos uma sombra sutil em ambos os lados. Então isso está feito. Agora vamos criar outras guias. Talvez possamos duplicar este Controle G e ativo, nomeá-lo guia ativo. Este é o nosso separador. Nomeá-los corretamente, guia ativa e nós estamos indo para Controle J ou Command J para criar outra camada. Vamos movê-lo para este lado. Certifique-se de que esta camada está na parte inferior desta porque ela não vai estar ativa. É estado passivo ou inativo. Então, o estado inativo é este. Agora vamos movê-lo um pouco para trás disso. Agora vamos mudar sua cor para branco, assim e segunda coisa vamos remover todas as sombras dele. Vamos usar um pouco do derrame. Então vamos usar dois pixels traçados sobre ele e sua cor deve ser um pouco acinzentado, assim. Deve estar dentro, ajuste o curso para dentro. Pressione Ok. Vamos movê-lo para este estado. Precisamos que o separador esteja no topo. É por isso que ele vai escondê-lo para trás. Outra coisa que precisamos fazer aqui é reduzir seu tamanho. Eu vou reduzir sua altura para 50 pixels, cinco pixels abaixo disso e vamos movê-lo um pouco para baixo, assim. Está bem assim. Agora está quase perfeito. A segunda coisa é que precisamos movê-lo um pouco para longe daqui, assim. Você pode movê-lo assim ou assim, é com você. Você pode separá-lo ou pode mantê-lo atrás desta aba ativa. Agora vamos duplicar esses filmes. Então precisamos mudar a cor deste texto. Vai ser um pouco escuro acinzentado assim. Vamos chamá-lo de Dramas, e precisamos movê-lo um pouco para baixo assim. Talvez eu precise de uma batata frita aqui. Então, Dramas. Estas são poucas configurações, as opções de renderização do meu monitor têm alguns problemas, então meu texto não é realmente nítido. Então esta é uma opção. Então vamos mover este, duplicar este, e vamos movê-lo para cá. Então vai ser anime. Agora temos uma aba ativa e duas guias passivas ou abas inativas. Você pode ver como essa sombra sutil está caindo nessas guias. Há muitas variações que você pode fazer, como você pode remover a sombra e você pode usar um pouco de cor cinza claro para colorir estes. Você pode ter visto esse estilo no Google, então você pode fazer algo assim, como aquilo. Pegue a cor daqui. Eles estão parecendo muito legal, muito legal. As sombras parecem muito sutis e você pode ver aqui em ambos os lados. Há mais um efeito que podemos adicionar a isso, que é sobreposição de gradiente e eu vou usar uma sobreposição de gradiente aqui neste botão. O que vamos fazer é usar um gradiente muito maçante, então é basicamente preto para branco gradiente transparente. Deve ser branco de um lado. Você pode usar algo assim, e também você pode usar multiplicar ou outros efeitos como este, e você pode revertê-lo ou algo assim. Vamos usá-lo assim, então mude o ângulo de luz para 90 graus, e você pode ver aqui como isso está afetando nosso design. Você pode ver que talvez possamos mudá-lo para alguma cor acinzentada e podemos mover o controle deslizante para trás um pouco apenas para obter apenas um efeitos sutis. Você pode ver como é a diferença, este é realmente bom efeito. Você pode apenas criar uma sobreposição de gradiente muito sutil neste e é assim que fazemos. Agora vamos preencher esta área, é com você. Caso contrário, eu não deveria ter incluído isso neste exercício. Você pode fazer isso sozinho. Mas se você quiser que eu mostre algumas áreas aqui, o que vamos fazer é criar alguns guias em torno disso. Vamos embrulhar este separador. O que eu fiz foi criar 50 pixels de espaço daqui em ambos os lados, e eu vou colocar meu conteúdo dentro. Agora vamos criar outro retângulo 285 largura e altura será 350. Nós vamos usar um canto mais arredondado aqui, pressione “Ok”, e nós temos essa camada realmente agradável aqui e você pode ver que podemos colocar qualquer imagem nele. Agora vamos adicionar um pouco de sombra primeiro. Shadow vai ser o primeiro. Podemos usar uma sombra de 90 graus, e deve ser muito sutil, como 9, 12, parece bom. Pressione “Ok” e certifique-se de que é alguma cor de cinza. Vou pintá-lo de cinza aqui assim. Agora, mova-o para fora desta área. Nós vamos replicar isso com outro, Control+G, e será o nosso ativo aqui, imagem ativa ou miniatura. Vamos colorir um pouco mais escuro assim. Sua sombra também será destacada ou mais intensa como 60 por cento. Também vou movê-lo um pouco mais largo, talvez 70 por cento é bom. Também podemos aumentar a distância um pouco para baixo. É assim que vamos usar esse estado ativo. Além disso, vamos adicionar um pouco de derrame em torno dele. Portanto, três pixels ou dois pixels traçados dentro desta forma. O tamanho de todas as três formas são semelhantes. Pressione “Ok”, e vamos duplicar este novamente no final aqui, assim e enfiá-lo com o lado direito. Agora, eu vou pegar todos os três e eu vou espaçá-los horizontalmente. Muito bom, com ótima aparência. Agora você pode adicionar qualquer imagem aqui, eu vou fazer isso muito rapidamente. Vou arrastar e soltar imagens e vou cortá-las dentro destas caixas. Estes são basicamente contêineres, vamos usar nossa opção ou tecla Alt para cortar toda a imagem dentro deste. Terminamos com essas sombras, agora vamos adicionar algum texto aqui. Vou usar um título com o Open Sans ousado. Vou selecionar Open Sans negrito e o tamanho será de 48 pixels. Vamos adicionar algum texto aqui, como filmes ou filmes ativos. Eu vou usar um pouco de cor mais escura aqui assim, alinhá-lo com esta linha aqui, assim. Além disso, você pode adicionar alguns títulos em torno dessas imagens apenas para garantir que estes são títulos de boa aparência, e eu vou adicionar alguns títulos aqui, como janela quebrada. Vou usar 20 ou 24 pixels, 20 pontos aqui e ter certeza que a fonte é semibold itálico, assim. Alinhe-os todos com estes. Eu vou fazer isso muito rápido. Não se preocupe, eu acho que você já sabe como fazer isso, alinhá-lo com essas formas na parte inferior, então recipientes. Eu vou pegar este recipiente e eu vou pegar a camada de texto e eu vou alinhá-lo no cabeçalho assim. Basicamente, estou alinhando todas as mensagens com isto, isto e isto. Agora eu alinhei todos os textos, você pode ver aqui está olhando muito legal, muito agradável, muito aberto, muito aberto projetado, muito bom uso do espaço em branco. Este é o fim desta lição. Nós criamos muito agradável, muito sutil barra de abas, e esta é a informação dentro desta barra de abas. Certifique-se de que você usa alguns estados ativos e passivos, como você pode ver aqui temos botão muito inativo. Eles não devem se misturar. Botões ativos devem ser claramente visíveis e o usuário deve saber que esta cor está combinando com este, que eu estou dentro de uma janela ativa. Isto termina esta palestra. Na próxima lição, vamos criar outra versão deste que é preenchida uma, vamos usar uma caixa aqui. Vamos passar para a próxima lição. 64. Como criar guias tema 2: Agora, nesta lição, vamos criar esta versão de caixa dessas guias. Haverá poucas diferenças como você pode ver uma linha muito fina aqui, também você pode ver que há um efeito elevado aqui, efeito 3D, e também você pode ver alguns ícones adicionados aqui. A única coisa é que revertemos o esquema de cores, agora o fundo é muito brilhante com a correspondência com essas guias e eu acho que isso realmente mostra claramente que este está ativo. Vamos começar e vamos começar a partir da versão anterior de onde saímos, então eu adicionei alguns títulos de filmes aqui só para torná-lo mais dramático e bonito. Agora, poucas coisas que vamos fazer, número um que vamos remover alguns dos efeitos como vocês podem ver aqui, esta borda branca parece muito estranha nesta situação, então vamos removê-la assim. Além disso, nós vamos remover as sombras, cair sombras, de ambos, então eu vou remover as sombras. Você pode ver agora este claramente parece que ele está elevado e é basicamente selecionado, então há uma sombra em torno dele. Então vamos remover essa linha aqui, então esconda essa linha e as mais algumas coisas que vamos fazer, número um, para essas guias inativas, agora vamos adicionar traço de cinza, você pode ver aqui, cinza acidente vascular cerebral e vamos fazer a sua cor branca, por isso está misturando com o fundo. Então, a mesma cor do plano de fundo, você pode ver aqui e nós adicionamos um traço de, eu acho , dois pixels, vamos ver quantos pixels, sim, dois pixels dentro de 100% e é uma cor cinza cb, cb, cb. Quase conseguimos o que queremos. Agora, a coisa é que nós vamos criar um retângulo aqui e vai ser assim, talvez assim. Agora temos este retângulo arredondado e ele vai estar no topo. Não no topo, acho que deveria estar na frente deles. Agora vamos mudar sua cor para este, então nós mudamos a cor, então esta estava ativa, vamos remover a sobreposição de gradiente que colocamos no último exercício, então gradiente, não precisamos de gradiente e também se você quiser, você também pode remover essas sombras, então ele realmente parece um pouco plana e muito agradável por aqui. Agora vamos mudar as cores desses textos, então eu vou selecionar todo o texto. Há um truque que eu vou mostrar a vocês em apenas alguns segundos, vá para o painel Character e selecione a cor aqui, então mova-o para branco e ta-da, temos todas as cores de texto em branco agora. Então, em vez de mudar cada cor uma por uma, nós apenas mudamos a cor em um lugar e tudo é mudado. Além disso, precisamos torná-lo um pouco maior e mover esse conteúdo. Este é o nosso título e este é o nosso conteúdo aqui, então este é o nosso conteúdo de filmes, então nomeie-o Conteúdo de Filmes, assim. Agora mova alguns pixels para baixo, talvez 10, 20 assim. Agora vamos adicionar alguns ícones aqui, mas antes disso vamos precisar de uma linha aqui, linha separadora, então mostra que temos um separador aqui e temos algo como título e algo assim. Acabei de desenhar uma linha como essa, fazer as mesmas cores e, em seguida, vamos reduzir o brilho para torná-lo um pouco mais escuro, 75 assim e reduzir o seu controle de tamanho T ou comando T e vamos usar dois pixels assim e certifique-se que é o mesmo tamanho que o seu fundo, então ele era 1.115 e vai ser do mesmo tamanho que esta barra aqui, então ele vai ser 1.115. Certifique-se de que seus tamanhos são os mesmos, você precisa combiná-los assim, basta ajustar o espaçamento. Vou selecionar este separador, agora está com bom aspecto. Você pode ver que o espaço acima deste título e abaixo deste título é o mesmo, então eu estou tentando centralizar essa área. Agora que estamos quase terminando com isso, há mais uma mudança sutil como este dramas, suas cores devem ser um pouco mais maçantes assim, cinza. Não torná-lo muito maçante para que ele não pareça um inativo, então fazê-lo um pouco como este para que ele mostre que você pode clicar aqui. Não deve transmitir a mensagem de que não é possível clicar aqui. Isto é bom. Agora há mais algumas coisas que podemos adicionar, podemos adicionar ícones aqui agora. Truque muito simples como eu fiz esses ícones, apenas um cálculo simples, 12 por 12 pixels largura e altura retângulo, mas eu acho que é um quadrado, não é retângulo eo que eu fiz é apenas movê-lo para o topo. Eu dupliquei isso assim e então nós vamos duplicar esses e movê-los para o fundo assim. Um ícone está pronto, vou selecionar tudo, controle ou comando E para criar uma forma, então agora é um ícone único. Vamos movê-lo para cá. Agora o segundo ícone vai ser o mesmo, só precisamos de um tamanho menor retângulos no lado esquerdo, então ele vai ser seis pixels por seis pixels quadrados como este e então ficamos com seis e 26 era total, então ficamos com 20 pixels e 20 pixels. Desculpe, não era 20 por 20 , deveria ser 20 por 6 assim. Agora vamos movê-lo para cá e obter alguma distância como esta. Você pode ajustar a distância mais tarde. Agora vamos mesclar essas camadas e vamos duplicá-las uma, duas, então temos dois ícones criados em apenas alguns minutos e isso é apenas agrupá-las como ícones. Agora vamos alinhá-los com essa margem aqui, linha de margem ou diretriz aqui, então é assim que alinhamos isso. Nós completamos ambas as guias e eles estão olhando grande. Uma é a aba nua e esta é a aba com estado muito ativo e misturando o conteúdo e a aba da mesma cor. Isto é tudo para este exercício. Espero que tenham gostado deste exercício. Agora, vamos passar para a próxima lição. 65. Como reunir recursos para design para aplicativos para IOS: Agora, nesta lição da série, vamos criar este aplicativo incrível para iPhone. Este é um negócio diário para a nossa comida e especialmente para os alimentos. Em primeiro lugar, nesta lição, vou mostrar a vocês quais são os diferentes recursos que usei, as imagens, esses garfos e cores, tudo o resto. Deixa-me mostrar-te. Para as imagens que subscrevi a esta gente muito simpática que são Morte ao Stock Photos, e eles me entregam fotos muito impressionantes e imagens de alta qualidade gratuitamente quase todas as semanas. Então isso é muito bom. Se você pode se inscrever para eles, você vai ter um monte de criar imagens aqui. Deixe-me mostrar-lhe alguns deles aqui. Este é um deles, eles são séries. Então eu tenho um monte de imagens desses caras. Você também pode usar alguns outros sites gratuitos como, Eu acho que aqui eu tenho alguns dos links. Splash é muito popular, este em splash, você pode pesquisar online, picjumbo, Pixabay. Então você pode usar qualquer site que você gosta, e então a fonte que eu estou usando, eu estou usando essa fonte Martina Regular, que é eu acho livre, fontzone.net. Você pode procurar on-line por Martina Regular, baixar esta fonte e instalá-la. Então eu estou usando este Google Font Lato que é muito popular. Outra fonte do Google que é Maven Pro, que eu tenho usado neste botão se eu definir o texto aqui, Maven Pro regular. Então isso é apenas para o botão. Então eu estou usando essa fonte estilo marcador que é basicamente Martina, e Lato está em todos os outros lugares. Então este é Lato, Frango Biryani, e neste preço. Então, no geral, eles parecem muito bem e agradáveis juntos. Estes são todos os recursos. Então, vamos começar. As cores que estou usando são basicamente essas duas cores, que é esta cor roxa e cor verde. Então este é 211637 roxo. Isso é basicamente verde, que é 22a372. Acho que basicamente escolho estas cores a partir desta imagem. Então deixe-me mostrar como eu escolho essas cores. Há uma máscara de gradiente sobre eles. Esta é basicamente a imagem. Eu escolhi as cores da imagem como, por exemplo, este verde. Está mais perto deste verde. Vamos reduzir a saturação para 70%. Por isso, está quase mais perto deste. Você também pode tentar provar outras cores daqui, como esta ou esta. Então, basicamente, eu escolhi daqui. Este 030f66. Então, é basicamente assim que você faz uma amostra de cor da sua imagem. Então a cor roxa que eu escolhi daqui. É por isso que eles estão indo muito bem junto com este design geral. Agora, vamos começar. Aqui tenho a imagem que era esta. 66. Vamos começar o design de aplicativos para IOS: Vamos criar um novo arquivo e escolher iPhone 6 ou iPhone 5. Primeiro, você precisa selecionar Design de aplicativo móvel aqui e depois ir para o submenu, que é iPhone 5, 6 ou iPhone 6 Plus. Vamos escolher este iPhone 6 agora. “ Não colorir Gerenciar este documento”, certifique-se de que esta opção está selecionada e pressione “Ok”. Agora, este é o nosso quadro de arte. Vamos criar isso como uma camada de fundo. Eu selecionei este, e camada de fundo, Eu criei uma camada de fundo. Vamos criar uma cor de fundo, que será esta. Um pouco acinzentado, cor f4f4f4. É assim que eu uso basicamente, fundos. Agora, vamos importar nosso arquivo aqui, que era este. Vamos arrastá-lo até aqui no Photoshop, assim. Está quase perfeitamente encaixado aqui. Agora, isso é basicamente a tela do iPhone 6, então temos muito espaço sob ele. Se quisermos, podemos aumentar o tamanho desta imagem, se realmente precisarmos. Podemos selecionar Control T e tentar aumentar o tamanho assim. Arraste-o um pouco para baixo. Vamos aumentar o tamanho novamente. Estou pressionando e pressionando as teclas Shift e Alt enquanto aumenta o tamanho disso. Basicamente, está ficando lá fora. Acho que foram os insectos do Photoshop. Assim que comecei a redimensioná-lo, eles estavam tentando ajustar o tamanho em torno dele. Vamos criar alguma sobreposição sobre esta imagem. Basicamente, neste design, você pode ver aqui, se eu clicar aqui, eu criei isso e sobreposição roxo-ish para que possamos ver o texto facilmente. Primeiro de tudo, vamos criar uma sobreposição de gradiente sobre isso para que possamos ver o texto aqui muito facilmente. Isto é basicamente o que eu fiz aqui. Primeiro de tudo, o que vamos fazer é, vamos selecionar esta área e vamos criar outra camada. Este, e nós vamos pressionar G e preenchê-lo com esta cor roxa. G e pressione assim. Agora, o que vamos fazer é criar uma máscara nesta imagem e vamos usar a sobreposição de gradiente. Você sabe que o branco vai mostrar tudo e preto vai esconder tudo. Quando tentamos usar sobreposição de gradiente sobre esta imagem, você pode ver a imagem por trás dela será mostrada porque agora, o branco está removendo toda essa cor roxa aqui. Continue fazendo assim até ter um toque agradável como aquele, talvez assim. Isto parece um pouco agradável. Se você realmente quiser ajustá-lo, você pode selecionar esta camada, Control T, e você pode transformar e ajustar de acordo com seu gosto. Agora, este é o truque como eu fiz este efeito de cor de sobreposição. Eu usei efeito gradiente e mascaramento para este. O resto da palestra, faremos na próxima lição. Vamos passar para a próxima lição. 67. Como adicionar itens de menu ao aplicativo de IOS: Vamos adicionar mais algumas imagens aqui. Este é basicamente o nosso fundo, então controle G e agrupá-los em segundo plano. Agora vamos adicionar imagens aqui. Para isso eu vou usar um retângulo arredondado para conter essa imagem, assim, talvez um pouco quadrado. Vamos criar uma imagem quadrada de 200 pixels por 200 pixels, e um raio de quatro pixels, assim. Podemos nos certificar de que temos um espaço de 1, 2 e 1, 2, 3, 4, 24 pixels de distância desta área superior. Vamos tirar imagens de alimentos. Estas são todas as imagens gratuitas que coletei. Podemos usar qualquer um como este. Ainda está bom. Este está com bom aspecto. Vamos pressionar Enter. Vou prendê-lo dentro desta pequena caixa. Vamos arrastá-lo um pouco, escalá-lo um pouco para que fique um pouco mais agradável. Vamos nos concentrar neste como este. Agora, Controle G e duplique este grupo. Vamos chamá-lo de cópia de polegares pequenos. Vou arrastá-lo até aqui assim. Desculpe, eu pressionei basicamente arte com ele e ele criou um monte de cópias. Só precisamos de quatro. Talvez eu acho que este é extra. Vamos mover este aqui também assim, e o primeiro aqui assim. Vamos mover estes 100 pixels para dentro disto. Sabemos que de ambos os lados eles são igualmente espaçados, 1, 2, 3 ,4, 5, 6, 7, 8, 9,10. Isso é um pouco demais, então vamos passar para esta altura. Vou colocá-los no espaço assim. Foi assim que criei esta parte de seleção de miniaturas de imagem. Vamos criar um guia no meio disso para sabermos onde está o centro desta imagem. Vou usar um guia rápido assim. Agora sabemos onde fica o centro, então vou alinhá-lo rapidamente assim. Sim, está quase no centro. Vamos selecionar o primeiro e o último, e todos eles e vamos espaçá-los novamente. Agora está alinhado corretamente. Sim, o alinhamento é uma chave para o sucesso em seu design. Seu tudo e cada imagem devem ser alinhados corretamente. O visualizador de imagens, em seguida, imagens como esta. Estamos quase terminando com esta área. Agora vamos agrupar tudo isso em miniaturas como esta. Podemos ter um bom espaço aqui. Este também não parece muito ruim, mas a diferença entre essas imagens aqui está parecendo um pouco mais espaçosa. Espaço aqui. Deixe-me ver qual era a altura aqui 1, 2, 3, 4, 5, 6, 7, 8, 9,10, 11, 12. Agora está a 32 pixels de distância. Vamos alinhar o topo dessas imagens. Está parecendo bem agora. Vamos passar para a próxima palestra onde eu vou adicionar o texto nesta imagem ou neste quadro de arte. Vamos passar para a próxima lição. 68. Como adicionar texto à tela de aplicativos para IOS: Vamos adicionar algum texto a este design nesta lição. Vamos selecionar este e primeiro vou salvá-lo porque ainda não o salvei. Vamos salvá-lo na área de trabalho agora mesmo. Agora primeiro vamos selecionar essa fonte Martina, regular, e eu vou usar o tamanho de 52 pontos ou 52 pixels e a cor será branca. Clique aqui em algum lugar e era sanduíche café. Agora, eu vou dizer para enviar café aqui e vamos movê-lo um pouco para baixo assim. Vamos movê-lo na parte superior e ajustar a sobreposição de fundo porque eu não consigo lê-lo. Este está bem melhor. Vamos passar para este painel coletor e remover este sublinhado. Então eu vou selecionar nossa outra fonte que era Lato, regular. Este é mau. Vamos duplicar e selecionar a fonte Lato. Eu tinha selecionado a fonte para que ele mudasse para outra fonte. Às vezes isso acontece comigo. Agora vamos usar 28 ou talvez 32 para a localização deste café. Para isso, vou usar Lahore. Como isso. Vamos movê-los um pouco. Assim parece melhor agora. Acho que vamos fazer 20, 1, 2, 3, 4 ou 24 pixels e este vai ser um e dois. Vinte pixels de distância, isso parece bom. Vamos torná-lo um pouco menor, eu mudei isso para 30 pixels, agora esta parte onde tivemos negócio especial para hoje. Mais uma vez, precisamos selecionar essa fonte. Clique aqui uma vez, você clica nesta fonte, selecione como esta, e então selecione este texto e você pode ver este tamanho e tudo já está selecionado. Clique aqui e o texto foi um acordo especial para hoje. Clique duas vezes em ir aqui e oferta especial para hoje. Agora eu vou selecionar a cor desta fonte para esta cor roxa, que foi a nossa cor base para este design. Vamos movê-lo e 1, 2, 3, 4, 5 e 6, 60 pixels de distância disso. A próxima linha, que é frango biryani eo preço. Vamos acrescentar que a fonte é Lato. Vou primeiro selecionar esta camada e, em seguida, pressionar “D” e Lato é selecionado. Eu vou escrever frango biryani e o preço foi $2,99 apenas. Este é o texto. Você não pode ver as mensagens porque eu estou fazendo uma magia negra de vodu. O texto branco. Vamos torná-lo cinza para esta cor, eu acho. Agora, vamos movê-lo para o meio. Vamos lidar com esses alinhamentos. Neutron, mas se você quiser alinhá-lo rapidamente controle A, Controle Alt H e já está horizontalmente no meio. Agora, para este frango biryani, eu acho que é um pouco fraco. O que eu vou fazer é selecionar esta cor roxa e eu vou me mover nesta área aqui assim. Este era um pouco boa cor. É um pouco acinzentado e um pouco púrpura. 63, isso é às vezes eu faço, então eu combinar essas duas cores para obter a cor cinza assim e então eu vou selecionar isso, e eu vou selecionar esta cor verde aqui. Vamos aumentar o tamanho da fonte para esta cor verde. Vamos fazer 36, assim, e parecer perfeito até agora. 69. Como adicionar botões ao design de aplicativos para IOS: Então temos um número de telefone, que é o meu número de telefone. Vamos escrever aqui. Primeiro, vamos selecionar retângulo arredondado, e raio deve ser 10 ou talvez 12, eu acho que 12 vai ficar bem. Vamos criar um botão aqui como este, e as cores devem ser roxo, e arredondamento deve ser 20 pixels. Isto parece bom. Agora, para o ícone desse telefone, eu vou usar minha extensão Font Awesome PS aqui, então vamos adicionar um telefone ícone. Este parece perfeito, um pouco aqui. Então vamos colorir branco, torná-lo um pouco maior. Isto é basicamente 42 pixels é bom o suficiente. Aqui, vamos movê-lo 1, 2 e 330 pixels para longe da esquerda. Então vou escrever o meu número de telefone aqui. Você também pode torná-lo um pouco verde. Se você quiser tornar uma cor mais nítida, você pode aumentar a saturação aqui. Vou aumentar para quase 86, assim. Agora eu vou usar vamos chamá-lo de telefone padrão. Aqui eu vou adicionar o meu número de telefone aqui, que será na lateral. Vamos mudar de cor para branco. Mais perto do branco, que é basicamente uma cor ligeiramente acinzentada. Vamos movê-lo 1-330 pixels da direita e 40 pixels. Agora o que basicamente eu vou fazer é separar estes dois por um e 220 pixels e agrupar este número de telefone e alinhá-lo no meio deste botão assim. Agora o que eu fiz foi, eu agrupei esse conteúdo interno e então eu o movi no meio disso. Agora eu acho que nós também podemos colorir esta tela ou talvez um pouco acinzentado. Acho que destacá-lo demais não é bom o suficiente. Eu uso essa palavra bastante bem. Agora o que vamos fazer, vamos usar um botão muito grande agora aqui, e que era basicamente o botão. Vamos criar um retângulo aqui. Este grande e colorir este. Se você gosta da aparência plana, você pode usar este botão assim. Mas se você gosta de um pouco elevado olhar, você pode usar sombra interna. O que vamos fazer é selecionar essa cor, então vamos reduzir o brilho para obter um pouco de cor mais escura aqui assim. Você já pode ver a elevação aqui. Vou usar a elevação de 16 pixels aqui e o tamanho de zero pixels. Ângulo é menos 90. Então, basicamente, é sombra interna desta direção de baixo para cima. Clique em “Ok”. Se você realmente quiser, você também pode adicionar um pouco de sobreposição de gradiente neste botão. Se você realmente quiser. Estou usando este branco transparente para preto. Você pode selecionar assim e você também pode multiplicá-lo assim. Agora, eu vou usar um pouco de cor cinza aqui porque ele estava muito afiado, um pouco mais escuro. Acho que está bom sem essa sobreposição de gradiente. Vamos remover essa sobreposição de gradiente. Eu vou usar novamente este Font Awesome PS para obter algum calendário aqui. O promotor é bom para um calendário, então eu vou selecionar este. Este é o ícone do calendário. Temos de tirar isto deste número de telefone. Onde está esse calendário? Vamos aumentar o tamanho e movê-lo para cá. Cor branca. Então vamos usar nossa última fonte, que era Maven Pro. Foi Maven Pro, não Maven. Vou usar este Maven Pro Regular e vou usá-lo aqui e reservar agora. O que eu fiz foi, eu usei este painel de caracteres para espaçar. Então é 36 pontos, então 36 pixels basicamente. Você pode definir o rastreamento aqui. Eu usei isso para aumentar o tamanho de 225 pixels. Vamos mover isto para cá assim. Selecione este calendário, vou reduzir seu tamanho. É basicamente 55 por 59 pixels. Vamos movê-lo para 50, assim, e movê-lo para o meio deste livro de área agora. Vamos também sublinhar este texto, reserve agora. Então as pessoas sabem que isso é basicamente um botão. Mesmo que você queira removê-lo, você pode removê-lo assim. Então não se preocupe com isso. Eu posso aumentar também o tamanho deste, e nós também devemos aumentar o tamanho para 40, eu acho, porque ele deve parecer um pouco maior do que esta área. Vamos fazer este número de telefone um pouco menor. Vamos torná-lo 30 pixels e também reduzir. Eu acho que 32 pixels parece bom o suficiente e também reduzir esse tamanho de telefone deste ícone para 36 pixels. Chegue mais perto deste e dois, e também torná-lo um pouco mais curto assim. Vou usar minha tecla de atalho para alinhá-la corretamente. Então eu vou agrupar tudo isso em padrão de telefone e alinhá-lo no meio desta área de aplicativo, que é o nosso quadro de arte. Acho que está quase perfeito. Vamos obter um pouco de espaçamento com precisão. Este é o botão do nosso telefone. Vamos ver o quanto é mais longe deste 1, 2, 3, 4, 5. Cinco é bom o suficiente. Aqui temos frango biryani. Ofertas especiais. Vamos fazer isso no meio disso, um pouco para baixo assim. Está parecendo perfeito, e eu acho que alinhar isso com este calendário. Está quase alinhado, mas eu me sinto um pouco. Um e dois, 1, 2, 3, 4. Vinte e quatro pixels aqui. Vamos agrupá-lo, conteúdo do livro agora botão. Este é o nosso histórico agora. Vamos agrupá-los em botão, livro agora botão. Vamos alinhar esse conteúdo com isso no meio, assim. Vamos alinhar tudo no meio desta tela. Nosso sanduíche de ofertas especiais do Paquistão, e vamos alinhá-lo no meio. Está tudo no meio. Penso que podemos aumentar o tamanho deste texto, porque ele está quase a aproximar-se deste acordo especial. Eu aumentei o tamanho para 64 pontos, Martina regular. Eu acho que isso faz o fim desta série de lições. O que vou fazer é só um último efeito. Vou aumentar o tamanho deste sinal $. Vamos fazer 40 pixels ou talvez 38, um pouco maior do que o outro texto. É perfeito e vou salvá-lo agora. A tela do aplicativo para iPhone 6 está completa. Na próxima lição, criaremos o marcador para a tela, então vamos passar para a próxima lição. 70. Como usar modelos de aplicativos para mostrar seus designs: Agora vamos criar uma bela maquete deste design. O que vamos fazer é pressionar “Control A” e “Control C” para copiar ou “Control Shift C” se você quiser copiar tudo, e eu estou usando este iPhone 6 maquetes da Pixeden. Se quiser, pode ver aqui. Maquetas de iPhone 6 Pixeden. Estes são basicamente maquetes de Pixeden para iPhone 6, e eu estou usando-os. O que eu vou fazer é quando eu abrir este arquivo, havia basicamente mais três iPhones, então eu selecionei este, branco. Esta é basicamente a vista frontal. Você precisa apenas clicar duas vezes aqui e você precisa colar seu design aqui. Deixa-me só esconder esta. “ Controle V” aqui e barra de status, estou usando basicamente esse efeito de sobreposição de cores. Eu adicionei esta Sobreposição de Cores sobre isso. Se eu tentar escondê-lo, você pode ver que já é branco. Mas se você quiser qualquer outra cor, como se eu quiser cor roxa neste bar, eu posso usá-lo ou mesmo se eu quiser esta cor verde, eu posso usá-lo. Posso usar qualquer cor aqui. Isto é mais fácil de controlar desta forma. Estou usando branco agora. Agora, você só precisa “Control S” salvar, e você pode ver aqui que temos nossa maquete. Ele está olhando muito bom, e então houve duas outras maquetes que foram vista deste trimestre. É um pouco aparte da vista. Eu selecionei este preto e este é o lugar onde nosso design está olhando muito limpo nesta vista lateral. Escolhi este preto e escondi os outros dois, que eram estes dois. Vamos apenas selecionar este clique duas vezes, clique em “Ok”, “Controle B”. Mova a barra de status acima desta camada. Acho que já é de cor branca. Se você quiser, você pode usar Estilos de Camada e aplicar Sobreposição de Cor sobre ele, que é branco. Isto é basicamente, podemos facilmente controlar a cor. “ Controle S”, salve, e você pode ver aqui, é assim que usamos essas maquetes. Estes realmente ajudam nossos clientes e outras pessoas a mostrar caso seu design e é uma boa prática para mostrar, sempre mostrar seus projetos assim. Esta é a versão final onde eu queria mostrar a vocês como usar essas maquetes. Vamos adicionar aqui também. Mova esta barra de status para cima. Ou vamos deixar aqui. Veja como isso vai parecer. Vou fechar estes ficheiros PSP. É assim que o nosso design parece, e aqui eu acho que nós também precisamos de barra de status. Por que é preto, precisamos de uma barra branca aqui. Vamos torná-lo branco Color Overlay branco e é isso. Agora, ele está bonito, e isso termina a final deste design do iPhone. Eu vou estar criando mais aplicativo iPhone para o Android eu acho. Fique atento e cuide-se, e vejo você em breve em outras palestras. 71. Trick simples para remover fundos de branco: Olá, todo mundo. Nós vamos fazer algumas coisas de edição de imagem nesta seção. A primeira palestra é sobre a remoção do fundo branco com um truque simples. Este é o resultado final que eu tenho. Muitos de vocês, quando estão projetando no Photoshop, podem ter algumas imagens. Eles têm um fundo branco como este. Há um truque muito simples para remover este fundo, e eu vou te contar o segredo. Agora, vamos começar. O que vamos fazer é remover rapidamente este fundo branco com opções de mesclagem. Vou clicar em Novo, 1440 por 900 Transparente, OK. Alt Excluir para preencher a camada. Vou pegar essa ferramenta Retângulo e desenhar um retângulo aqui assim. Vamos mudar sua cor para azul muito maçante como este. Este truque só funciona com fundos de cor muito clara. Se você tentar usar um fundo mais escuro, então vamos ver a próxima palestra sobre isso, vamos remover este fundo branco. Vamos arrastar minha imagem até aqui, eu baixei do Dreamstime. Era imagem quando a usei para um cliente meu. Vamos movê-lo por aqui. Vamos tornar este retângulo de fundo um pouco maior porque tem menos espaço em torno dele. Mova para baixo, e vamos alinhá-lo no meio, eu vou Alt Control H. O que eu vou fazer é agora eu vou remover rapidamente o fundo branco, então vamos passar para esta camada. No painel Camadas, verifique se você selecionou essa camada de imagem e vá para Opções de mesclagem e escolha Escurecer. Este é um truque de magia muito puro. Você pode ver este fundo branco simplesmente desapareceu, e você também pode usar esta cor mais escura, ambos funciona muito bem na remoção de fundos brancos em cores mais claras. Se eu tentar mudar a cor de algo assim, fundo claro, ele vai funcionar muito bem. Este é um truque muito legal. Você pode facilmente remover fundos como este e você pode mesclar fundos brancos em qualquer fundo branco ou muito claro. Se você estiver projetando, tente descobrir imagens que têm fundos brancos. Eles são muito fáceis de ajustar e muito fáceis de remover. Este é o truque que eu queria compartilhar com vocês. Vamos passar para a próxima lição, onde removeremos o fundo branco rapidamente com outro método. Então fique ligado e me faça perguntas. Vamos passar para a próxima lição. 72. Como remover objetos de imagem da cura de manchas: Olá a todos. Nesta lição vamos fazer mais alguns trabalhos do Photoshop com algumas imagens. Nesta lição, o que vou fazer é limpar esta imagem. Você pode ver a imagem abaixo, é a imagem de um dos meus clientes. Você pode ver os fios ao redor aqui, aqui, um aqui, e então há um galho de árvore aqui. Então o que vamos fazer nesta lição, este é o primeiro passo, vamos remover todos esses detalhes, e na próxima lição vamos dar algum efeito dramático como essas nuvens e alguns ajustes de cor. Eu não sou um mestre em ajustes de cor, mas eu vou dar-lhe alguns pedaços de um guia para que você possa facilmente manipular algumas de suas imagens porque quando você está projetando UIs, há um monte de vezes em que você tem que editar imagens. Primeiro, vou começar com esta imagem, então vamos passar para Consolidar Tudo para Tabs. Esta é a nossa imagem final, esta é a imagem com que vamos trabalhar. Agora o que vamos fazer é usar esta ferramenta Pincel de cura de pontos. A tecla de atalho é J. Se você não vir a Ferramenta Pincel de Recuperação de Pontos aqui, você pode ir a essa barra de três pontos e editar sua barra de ferramentas. Este é o novo recurso da versão mais recente do Photoshop. Tente clicar nesta edição e arraste as ferramentas que você deseja para cá. Então é assim que esta barra de ferramentas personalizada funciona. Vou selecionar a Ferramenta Pincel de Recuperação de Pontos. Assim que eu gosto disso, você pode ver que temos um pincel aqui, este é o tamanho do pincel, dureza, certifique-se que é 100%. Não queremos uma escova muito macia. Então temos o modo Normal, que seja assim. Agora, o principal é esse tipo. Você deve selecionar o Content-Reaware. Não selecione esta correspondência de proximidade ou Criar textura. Selecione este Content-Reaware e comece a escovar os objetos que você deseja remover. Primeiro, o que vamos fazer é duplicar essa camada para não perdermos nossa imagem principal. Vou escovar isso assim. Como este. Se você quer muita perfeição, você deve ampliar. Então é assim que trabalhamos aqui. Como este. Um fio foi removido magicamente e apenas escová-lo assim. Eu também vou escovar este galho de árvore, e por último nós vamos escovar esses dois fios aqui assim. Você pode ver que todos os fios desapareceram. Há mais uma coisa que você pode ver aqui, é uma luz ou um sprinkler? Algum tipo de coisa assim. Aumente o tamanho do pincel pressionando as teclas de suporte no teclado e pressione apenas uma vez. Neste clique uma vez, e você pode ver todas as coisas extras que queríamos remover aqui nós os removemos. Mesmo que você queira ir mais longe, você pode remover este pequeno prédio aqui, mas eu acho que está nos dando alguns problemas, então vamos fazer nosso pincel menor. Você pode ver que eu removi este prédio aqui também. É assim que funciona esta ferramenta Pincel de cura de pontos com reconhecimento de conteúdo. Na próxima palestra, vamos ajustar algumas das cores e brilho e vibração desta imagem. Então vamos passar para a próxima palestra. 73. Como fazer as cores em imagens: Nesta lição, vamos converter esta imagem para mais perto desta, um pouco de nuvens dramáticas, cores diferentes, e um pouco mais de ajustes aqui. Então vamos começar. O que vamos fazer é usar nossas curvas aqui. Então essas curvas basicamente vão comprimir ou descompactar seus tons de sua imagem. Então o que vamos fazer é usar um ponto aqui, basta clicar sobre esta linha, um ponto aqui e um ponto aqui. Agora o que eu vou fazer é eu vou arrastar este ponto um pouco para cima, este um pouco para baixo, assim, assim. Também este. Vamos mover este um pouco mais perto deste, assim. Mova o topo um pouco para a esquerda, e você pode ver que conseguimos quase o mesmo efeito que queríamos nessas nuvens. Agora o que vou fazer é converter esta imagem duplicada. Vamos duplicá-lo e eu vou convertê-lo em preto e branco, ir para Ajustes e Desaturar. Vou dessaturar isso e vou usar luz suave linear como esta. Você também pode diminuir a opacidade da luz suave para 50%. Mesmo sem curvas, esta luz suave funciona muito bem. Você pode ver a diferença aqui. Você pode fazê-lo com qualquer imagem, basta duplicá-lo e dessaturá-lo com este ajuste e mover essas opções de mistura para luz suave e usar a opacidade para controlar a luz suave. Este é o efeito que podemos facilmente obter em qualquer imagem. Se você quiser mudar tons diferentes, você pode usar essas Curvas, e no topo disso, nós também podemos usar essas Vibração. Isto é basicamente as cores. Você pode ver às vezes nós dizemos que eu preciso de algum pop nesta imagem, as cores devem ser destacadas, então se você mover este controle deslizante para o valor máximo certo, você pode ver as cores estão realmente estalando. Então o que eu faço é normalmente diminuir essa saturação para 5 menos 5. saturação também é a intensidade da cor e a vibração também está relacionada a isso. É assim que mudo a imagem aqui. Agora você pode ver alguma sombra azulada no céu. Isso é muito simples, basta clicar nesta camada de fundo, e eu usei alguma camada de ajuste, que é basicamente podemos usar cor sólida, algum tipo de cor azul aqui assim, e nós estamos indo para reduzir sua opacidade para 20% e mantê-lo assim, assim. Você pode ver o efeito deste preenchimento de cor azul. Se eu quiser mudá-lo, posso mudá-lo aqui assim. Agora ele está dando um pouco de efeito azulado em toda a imagem. Então este é Color Fill, mesmo se eu remover as curvas, você ainda pode ver este Color Fill e até mesmo este efeito de luz suave com esta camada dessaturada, nós temos um efeito muito bom aqui. Se eu ativar essas curvas, ok agora, se você quiser reduzir a opacidade, você também pode reduzir a opacidade deste canal de curvas, ou camada de curvas. Então eu vou reduzi-lo para 40% e Vibrance, eu vou selecionar esta Vibração e também vou reduzi-la para 80 por cento. Ok, agora este é o efeito final para esta palestra, então só para recapitular, o que fizemos foi duplicar essa mesma imagem para outra camada e usamos essa imagem, ajustes e dessaturação. Comando é Control Shift e U, e opção de comando U para max. Então eu usei isso, e então apenas esqueço tudo isso, e então eu selecionei essa camada superior preto e branco e usei essa opção de mistura de luz suave e reduzi a opacidade para 50%. Então eu usei camada de ajuste a partir daqui, que é de cor sólida. Você também pode usar gradiente se quiser duas cores nesta imagem, cores diferentes de cima para baixo. Agora eu usei este preenchimento de cor, certifique-se de que eu estou cortando isso com esta camada, então Alt, clique entre essas duas camadas para cortá-los, e este azul só é aplicado a esta camada, e então eu usei algumas das Curvas. Eu ajustei essas curvas, apenas jogaram em torno delas para que eu possa obter o efeito desejado. Então, com a Vibração, usei o Vibrance para fazer as imagens mais aparecerem ou o que você disse. Agora este é o fim. Eu lhe disse duas ou três técnicas para alterar suas imagens. Você pode usá-los em imagens de retrato, seu rosto ou qualquer imagem que você tenha. Eu acho que isso abrange os conceitos básicos de edição de imagem para todos os designers de interface do usuário, e se eu vir acima com qualquer outra coisa, eu vou criar novas palestras, então fique atento e tome cuidado e passe para a próxima palestra. 74. Como remover fundo com ferramenta de laser magnético: Hoje, vamos remover o fundo desse cara. Na verdade, o passado que ele tinha era algo assim e nós o removemos em muito pouco tempo. Estas técnicas envolvem basicamente o uso da ferramenta Lasso, que é esta ferramenta Lasso magnético, ferramenta Photoshop. Vamos começar e remover o fundo desse cara e usar qualquer outro fundo que gostamos. Esta seleção basicamente, nós também temos parte de cabelo e algumas outras áreas como esta, isso, isso, então nós vamos usar esta ferramenta Lasso para remover tudo isso. Vamos começar. Vou importar a imagem que tenho. Esta é uma imagem livre. Não me lembro de onde tirei essa imagem, mas certamente vou procurá-la e já está aberta. Vou começar de novo. Vou apagar estas camadas. Esta é basicamente a imagem que tínhamos. Agora, primeiro, eu vou fazer é duplicar esta camada e, em seguida, vamos selecionar esta ferramenta Laço, ferramenta Laço magnético a partir de ferramentas de ferramentas do Photoshop. Assim que você selecionar esta ferramenta Laço, e você pode ver que existem diferentes opções aqui, então isso é opções de alimentação. Alimentador significa que ele vai borrar os cantos um pouco, então eu acho que nós não precisamos dele agora, então mantê-lo em zero. Certifique-se de que a suavização de alias está marcada. Esta largura é basicamente a largura da ferramenta de seleção, portanto, se a largura for muito menor, você pode adivinhar que é basicamente a precisão desta ferramenta Laço magnético. Basicamente, está cortando o contraste do chão nu e desse cara aqui. Você pode ver como ele está funcionando assim. Estou usando uma seleção muito áspera só para ter certeza de que você sabe como isso vai funcionar. Vamos remover esta seleção. Largura é basicamente a precisão que você deseja na seleção. Se você quiser uma seleção muito precisa, então você pode reduzi-la e, em seguida, o contraste. É o contraste entre este chão nu e o braço desse cara, você pode ver aqui. Também aqui temos muito contraste, mas aqui temos muito menos contraste. Essas cores são quase semelhantes, então eu vou reduzir o contraste para cinco ou 10%, cinco por cento. Frequência é basicamente quantos pontos este Photoshop vai colocar para a sua ferramenta Laço magnético. Como você pode ver aqui, nós temos 10 ou 15 pontos, então frequência, se você quiser definir alto, você pode definir alto. Se o seu objeto é muito nervoso e tem um monte de [inaudível] de bordas, então eu acho que a freqüência deve ser definida como alta. Fora isso, acho que todas as configurações são boas o suficiente. Agora, isto é para pressão da caneta. Nós não estamos usando tablet ou qualquer outro dispositivo, então eu estou usando meu pequeno mouse, então nós não vamos usar isso apenas para simular. Agora, vamos usar esta ferramenta Laço magnético para realmente fazer a seleção. Vou clicar aqui e deixar o Photoshop fazer o truque. Sempre que eu sinto que há algo que eu preciso para fazer preciso, eu posso adicionar manualmente outro ponto de ancoragem clicando aqui assim, por isso é mais preciso assim. Aqui temos a mão desse cara, depois a orelha e você pode ver como eu estou clicando e como eu estou usando este ponto de ancoragem manual para meu próprio uso ou vantagem. Não se preocupe com as áreas que estão saindo desta seleção. Vamos ajustá-lo com outra técnica que é Refinar Borda. Nossa seleção está quase pronta. Agora temos a seleção. Quando chegarmos ao primeiro ponto, ele vai mostrar esta forma oval. Basta clicar nele e você pode ver a seleção é feita. Agora, a segunda parte, precisamos subtrair essas áreas da seleção, então vamos selecionar essa subtraição da seleção e vamos selecionar essas áreas aqui, que não precisamos em nossa seleção. Como isso. Também este. Se você tiver algum erro e quiser voltar, basta pressionar o backspace duas ou três vezes e é assim que ele volta. Agora, a seleção é feita também, então nós temos essas seleções internas nesta mão. Eu acho que precisamos aumentar um pouco o contraste e também essa largura porque tem muito contraste sobre essas áreas. Estou aumentando o contraste. Você pode ampliar se quiser. Você pode pressionar Control plus e ampliar. Se você quiser mais zoom, você pode fazer assim. Se você quiser mover sua imagem enquanto você selecionou esta ferramenta Laço, você pode pressionar a barra de espaço e você pode se mover assim e soltar a barra de espaço. Você pode ver de perto como essas seleções estão funcionando magicamente. Estas são algumas das nossas últimas seleções e depois vamos deixar isto. Há mais uma pequena seleção aqui. É melhor ampliar se você tiver áreas muito pequenas que você precisa selecionar. Agora, eu vou diminuir o zoom e nós vamos usar este refinamento e você pode ver aqui, pressione isso. Agora, existem modos diferentes. Formigas correspondentes. Ok, sobreposição. Eu gosto mais porque eu posso vê-lo em um fundo vermelho e eu posso ver onde estão as bordas e coisas que eu quero tornar precisas. Algumas pessoas gostam de algo assim, algo como em branco, mas eu gosto deste. É assim que você vê ou apresenta enquanto você está usando a técnica deste refinador. Agora, o que você vai fazer, no próximo passo você vai selecionar o Raio Inteligente e você pode ver aqui, eu tenho algo com um estilo pincel mais sinal aqui. Se você quiser reduzir seu tamanho, você pode pressionar esses colchetes no teclado dessa maneira. Torná-lo um pouco menor para obter resultados mais precisos. O que eu vou fazer, eu vou dar ao Photoshop meu esboço ou borda desta imagem que eu estou editando, então eu vou apenas pressionar e arrastar e pintar na borda desta imagem assim e nós vamos apenas dar Photoshop a borda desta imagem. Não se preocupe, podemos consertá-lo depois com nossas técnicas de mascaramento. Você já pode ver que isso tornou nossa imagem muito melhor. Agora, essas áreas, precisamos consertá-las também, uma e depois esta, duas. Aqui, temos um pequeno problema. Acabou com o nosso problema. Nós vamos lidar com este pequeno ponto branco com outra técnica, então não se preocupe com isso agora. Então, agora, temos um pequeno problema com este cabelo. Vamos fazer a nossa seleção um pouco dentro deste cabelo. Agora, este branco atrás deste cabelo aqui foi removido. Agora, chegando a essas opções. Estamos feitos com este raio inteligente de detecção de borda, então o próximo passo é como ajustar a borda. Podemos suavizar se quisermos, se parecer muito distorcido. Não vamos usá-la. Feather, se eu ligar esta pena, você pode ver que há um campo embaçado ao redor desta seleção. Às vezes, não temos uma seleção muito precisa, e queremos uma pena para que possamos ajustá-la facilmente. Neste momento, não vamos usar a pena. Talvez dois pixels seja bom o suficiente. Agora, se você tentar aumentar o contraste, você pode ver que este contraste de borda está basicamente melhorando. Você pode ver aqui, a mão e tudo mais, então vamos chegar a cinco pixels. Acho que não precisamos de muito contraste, talvez 10. Shift edge significa que se eu mostrar o raio, este é o raio que desenhamos para nosso raio inteligente para dar ao Photoshop as bordas desta foto. Agora, se eu tentar mudar a borda, ele vai realmente mudar a borda deste raio inteligente que desenhamos aqui. Então, se eu tentar mudar para fora, você pode ver que ele está selecionando pixels externos. Então, talvez, nós podemos selecionar algo assim mais cinco porque nossa mão estava realmente se movendo dentro disso. Agora, a última saída. Então o que vamos fazer é usar uma nova camada com máscara de camada para produzir esta seleção. Então, basicamente, o que estamos fazendo era refinar nossa seleção. Agora, vamos pressionar “Ok”, e aqui, temos nossa nova imagem com essa seleção e essa máscara. Agora, eu vou criar uma nova camada e preenchê-la com qualquer cor que eu quiser, como esta escura. Você pode ver, ainda temos alguns problemas aqui. É basicamente o problema com nosso último mascaramento onde mudamos a borda para fora do cabelo dele. Agora, nós temos essas máscaras de camada, então vá para esta máscara de camada e selecione a cor preta x. Você pode ver aqui, nós temos preto. Pressione o “B”, pincel. Aperte o branco. Basicamente, precisamos selecionar o branco como a cor de primeiro plano e queremos que isso mostre sua mão porque está escondido no original como este. Aqui, também temos algum problema aqui. A mão, precisamos que seja visível. Se você quiser fazer o pincel menor, você pode pressionar as teclas de que eu falei, as teclas de colchete. Agora, também podemos selecionar este pincel. Inverta a seleção. Se você quiser ocultar algo, selecione preto como este. Você pode ver que estou usando preto agora. Podemos tirar o cabelo se quiser, então não se preocupe com o penteado desse cara. Remover alguns cabelos não prejudicará essa pessoa wow. Estamos quase terminando. Precisamos remover esta área turva externa, isto aqui, e alguns aqui. O que eu estou usando é que eu estou apenas usando uma ferramenta de pincel para refinar esta máscara um pouco mais, e eu acho que estamos quase terminando com isso. Vamos selecionar outra cor para este plano de fundo. Vamos selecionar amarelo porque este cara estava um pouco no fundo da sombra amarelada, então isso está funcionando muito bem. Então este é o resultado final que obtivemos com esta imagem, e espero que você tenha entendido o funcionamento desta ferramenta de laço magnético. É assim que normalmente removo o fundo da maioria das imagens. Você também pode usar esta ferramenta de caneta, mas eu acho que é muito demorado para selecionar tudo manualmente e cada curva e tudo aqui como este. Então, a maioria dos caras experientes ou os caras que fazem muito edição de imagens e retoque de imagem, eles são muito especialistas com essa ferramenta de caneta, e eu acho que eles normalmente usam isso. É muito preciso. Mas para a parte do cabelo, eu acho que esta ferramenta de laço magnético e refinar borda funciona muito bem. Isto é tudo sobre a palestra de hoje. Se você não entende nada, me faça perguntas, e eu acho, vamos passar para algumas novas palestras. 75. Como usar a ferramenta a Selecionar e máscara para limpar o plano de fundo: Hoje, vamos explorar um novo recurso do Photoshop CC 2015.5, que é esse Select and Mask. Ele tem um monte de novos recursos. Eu acho que eles basicamente converteram este Refine Edge nesta nova ferramenta. Por isso, hoje vamos discutir esta. Agora, o fundo que vamos remover é este fundo desta criança. Você pode ver aqui este fundo. Você pode ver que esta criança tem um monte de cabelo e é difícil extrair todos os detalhes no cabelo facilmente. Vamos começar. Agora vou excluir essa seleção anterior. Primeiro de tudo, o que vamos fazer é ir a essa ferramenta Laço, então eu vi que ela funciona muito bem com essa ferramenta normal de Laço. O que vamos fazer é continuar pressionando a tecla esquerda do mouse e continuar arrastando assim. Vou pegar uma seleção e ter certeza que a seleção não é muito larga do cabelo. Você pode ver que eu estou deixando um pouco de cabelo lá fora assim. Mantenha sua seleção dentro. Não leve muita área externa para isso. Esta é uma seleção muito áspera. Você pode ver aqui, pressione Shift para fazer uma linha reta. Vou combiná-lo com este. Mais uma coisa, se sua imagem for muito grande, há um truque que você deve continuar pressionando a tecla Laço e pressionar a barra de espaço e mover a imagem para cima ou para baixo. Enquanto isso, continue pressionando a tecla do mouse. Se você soltar a tecla do mouse, ela irá fechar o caminho. Enquanto você estiver nesta ferramenta Laço, não solte a tecla do mouse, o que quer que você faça. Agora vamos pressionar este Select and Mask. Aqui temos, existem diferentes modos de visualização. Você pode ver aqui há uma nova que se chama Pele de Cebola. Ele basicamente mostra o fundo com alguma transparência se você pode ver. Isso é o que temos agora, você pode ver aqui. Além disso, outras opções são quase as mesmas que o Refinar Edge. Você pode ver aqui Shift, Edge, Contraste Feeder, Suave. Certifique-se de clicar nestas cores contaminadas profundas. Certifique-se de que está marcado e saída deve ser sempre nova camada com máscara de camada. Agora, eu não gosto desta pele de cebola. Eu normalmente gosto deste fundo vermelho para que eu possa facilmente ver o que eu tenho nesta seleção. Aqui estão algumas ferramentas. Você pode ver aqui, o topo é basicamente ferramenta Seleção Rápida, é o mesmo que usamos anteriormente. Então temos esse “Refine Edge”. É o mesmo pincel Refine Edge que usamos antes. Então esta é a ferramenta Pincel. Então o que ele faz é que você pode ver se eu clicar aqui, ele está basicamente mudando minha máscara de camada. Eu já mascarei esta área, mas se eu quiser mostrar alguma área, eu sempre posso usar isso. Como isso. Você pode ver aqui, aqui temos algo sobrando e eu vou usar esta ferramenta Pincel para pegar as roupas de volta assim. Se você quiser remover alguma parte, você está indo para pressionar Alt ou Option tecla e ele vai remover essa parte de sua seleção. Você pode ver aqui, se eu quiser remover esta e também esta área, e também esta área, Eu estou pressionando agora, tecla Alt Option junto com esta ferramenta Pincel. Você pode ver aqui, aqui está o tamanho e a dureza do pincel, sempre certifique-se de que é 100% duro. A segunda coisa é que agora vamos para esta ferramenta Refinar borda pincel. Além disso, temos a ferramenta Lasso aqui. Esta é basicamente a ferramenta Seleção Rápida e Laço. Essas são as mesmas ferramentas que o Photoshop já possui, mas elas estão incluídas nesta visualização Selecionar e Máscara. Não temos que mudar de volta. Esta é a nossa ferramenta Mão e esta é a ferramenta de zoom Lupa. Você pode usar o Control ou o Command plus para ampliar e reduzir o zoom. Comando mais e menos ou Controle mais menos. Agora vamos para esta ferramenta Pincel Refinar Borda, que é a nossa principal ferramenta. Vou aumentar o tamanho do pincel assim. Agora vou escovar as bordas desta criança. Agora, certifique-se de que você pode ver como eu estou escovando agora. O sinal de mais está quase no limite desse garoto. Aqui estou eu escovando dentro do cabelo. Você pode ver como ele está removendo magicamente todo o cabelo e todo o fundo por trás desses cabelos finos. Acho que estou quase realmente amando essa nova ferramenta e nova técnica. Você pode ver magicamente, ele removeu a parte mais difícil que é o cabelo, eo fundo por trás desses cabelos. Ele removeu todos eles em apenas um instante. Agora, se você quiser aumentar o contraste, você pode aumentar aqui assim. Também você pode ver aqui, agora, eu vou mudar para a ferramenta de pincel. Vou escovar aqui. Vou ampliar um pouco. Eu posso ver um pouco de fundo vermelho neste casaco, então eu vou escovar aqui assim. Também nesta área. Vou escovar aqui, só para consertar duas coisas aqui. Se você ver algo mais vazando ou tendo algum problema, você pode escovar sobre isso também. Você pode ver aqui, eu estou escovando agora mesmo nas bordas. Acho que estão quase consertados. Agora você pode ver como é tão fácil com esta nova ferramenta Selecionar e Máscara para substituir o plano de fundo ou limpar o plano de fundo. Certifique-se de que você sabe o que todas essas ferramentas também, esta é a Seleção Rápida, esta é a ferramenta Laço. Estas são basicamente ferramentas para seleções e esta é Refinar Edge. Você sempre vai movê-lo ao longo de suas bordas de sua imagem. Esta é basicamente a ferramenta de pincel para ocultar e mostrar suas áreas mascaradas, áreas mascaradas ou aqui agora. Deixe-me enviar para a nova camada com a máscara de camada e pressione “Ok”. Agora você pode ver aqui é um fundo muito claro e limpo. Eu tenho todos facilmente removido o cabelo e o fundo, separá-los facilmente. Aqui estão mais alguns usos. Você pode ver aqui, eu extraí essa garota do fundo. Deixa-me mostrar-te. Este era o verdadeiro pano de fundo. Eu uso a mesma técnica e extraí. Você pode ver aqui, eu também produzi esta sombra falsa aqui. Você pode ver também esta menina, a imagem real é esta aqui. O que eu fiz foi remover o fundo e adicionei a paisagem urbana ao fundo. Agora, esta ferramenta é muito legal. Você pode facilmente controlar e remover as áreas facilmente. Uma coisa é que se sua área de imagem estiver muito desfocada, como você pode ver aqui, ela tem alguns problemas aqui. Certifique-se de que sua imagem é um pouco nítida e você pode ver por aqui, tudo é nítido, não há nada desfocado muito. Ele pode facilmente removê-lo. Agora, se você quer aprender esta técnica de sombra falsa, é muito simples. Acabei de adicionar uma sombra, sombra com camada aqui. Eu adicionei esta sombra, você pode ver aqui, distância 20,111 tamanho e multiplicar 13. Basicamente vai adicionar uma sombra, uma sombra de gota. Eu vou esconder este aqui para que você possa ver como é. Como isso. Vamos mover a distância e a propagação um pouco mais. Agora o que eu vou fazer é enquanto esta camada é selecionada, eu vou para Camada, e eu vou para Estilos de Camada. Eu vou para esta Create Layer. Basicamente foi criar camada a partir de estilos de camada, mas eu não sei por que eles renomearam Create Layer. Você pode ver aqui que aperta “Ok”. Você pode ver que esta sombra está separada da minha camada. É assim que se separa a sombra. Agora eu estou indo para Command+D ou Control+D minha sombra cair. Vou clicar com o botão direito do mouse e distorcê-lo. Vou movê-lo assim. Agora a minha sombra está aqui. Se você quiser distorcê-lo ainda mais, você pode distorcê-lo à sua vontade. Você pode mover as pernas mais perto do assunto, da garota, e também dessa área assim. Você pode ver que esta é uma sombra falsa muito perfeita. Era apenas uma técnica muito útil. Achei que deveria compartilhar com vocês. Isto é tudo sobre o uso desta nova ferramenta Selecionar e Máscara. É realmente adorável e é muito rápido para remover fundos muito difíceis e separar imagens pesadas ou muito difíceis de seu fundo. Se tiver alguma dúvida, me avise. Vamos passar para a próxima lição. 76. O que são are: Hoje vamos falar sobre wireframes, o que nossos wireframes e qual o papel que eles desempenham no design da interface do usuário. Cada design de interface do usuário começa com um wireframe. O que é wireframe? Wireframe é basicamente o plano do seu design digital. Se você tiver um aplicativo ou uma página da Web ou alguma página de aprendizado, primeiro você precisa criar um wireframe, então o primeiro passo é um wireframe. Wireframe pode ser criado pelo seu cliente. Basta dar-lhes caneta e papel e deixá-los esboçar as suas ideias nesse papel. Além disso, você pode usar o Photoshop para projetar wireframes. Você também pode usar muitas outras ferramentas. Vou mostrar-lhe dentro de alguns minutos. Primeiro deixe-me mostrar-lhe alguns dos exemplos de wireframes. Você pode ver que este é o wireframe de um jogo e foi um jogo de apostas. Eu projetei usando o Photoshop. Você pode ver que é assim que parece. Ele tem um monte de telas, mas esta é uma das telas. Este é outro wireframe e eu o projetei com outro software, que é chamado XOR BR. É muito caro. De qualquer forma, eu projetei, eu acho que há alguns anos atrás. Este é um outro exemplo de um site de carrinho de compras. Este é outro exemplo de um wireframe de aplicativo móvel. É dado a mim por um cliente. É assim que parece. Esta é uma das telas. Então este é outro que também me foi dado por um cliente. Eu acho que ele também foi projetado no Photoshop. Tudo está em cinza. Na maioria das vezes esses wireframes são escala de cinza, eles só têm preto, cinza e branco. O designer tem total autoridade no final e todo o poder criativo que ele pode usar qualquer cor aqui. Se eu tentar especificar qualquer cor no wireframe, então o designer pode pensar que essas são as cores primárias e ele deve usá-lo em seus projetos. Este é um dos grampos que recebi do cliente. Este é outro wireframe que eu projetei para o meu próprio site. Você pode ver aqui, estas são as poucas seções. Eu acho que você viu meu site. É um pouco diferente agora, mas é o primeiro wireframe que eu fiz para o meu site, ele é projetado em outro software chamado Balsamiq Mockups. Isto é tudo sobre wireframes. As coisas que você precisa ter em mente são não usar muitas cores, apenas enfatizar, que é como este é o botão. Eu usei verde aqui. Além disso, você pode comentar no lado, como eu comentei em, deixe-me mostrar-lhe. Esta é a única armação que fiz para um cliente. Você pode ver aqui eu comentei por que eu estou usando essa técnica ou por que este elemento de interface do usuário está aqui. Você pode ver aqui também estas seções, todas as seções, eles têm comentários como este. Você também pode usar comentários mesmo no Photoshop e desenhar uma caixa aqui com fundo vermelho ou fundo amarelo e colocar um pouco de marmelo ali. Isto é tudo sobre wireframes. Na próxima lição, vamos rever algumas das ferramentas que usamos para wireframes. Quais são as ferramentas online e quais são os outros softwares e aplicativos. Vamos passar para a próxima lição. 77. Ferramentas de uso para criar wireframes: Agora, vamos falar sobre algumas das ferramentas que usamos para wireframing. Você já sabe o que são wireframes. Vamos para a página onde tenho todos os links. Esta é uma das ferramentas que eu usei, Axure RP e é um pouco de uma ferramenta muito avançada. Ele também cria protótipos. protótipos são wireframes de trabalho onde você clica nos links e eles vão para a próxima página. Ele também pode exportar seus protótipos em HTML, então isso é bom para grandes projetos como e-commerce um projeto, ou algo muito grande. Então você pode usar este aqui. É um pouco caro. Acho que talvez 3, 400, não me lembro. Eu acho que é 495 por usuário e equipe tem 895. Eu acho que é bom para grandes empresas de software ou empresas. Eu queria mostrar que você sabe que este é um deles Axure RP 8. Então temos outra ferramenta que é muito famosa entre diferentes designers de interface do usuário. Eu realmente adorei este, Balsamiq Mockups. É muito fácil. Seus wireframes são muito escassos, então não tem cantos muito específicos ou algo assim. Deixe-me mostrar-lhe alguns dos exemplos. Onde estão os exemplos? Este é um. Você pode ver como este site foi definido e este maquete foi construído. Eu realmente gostei deste software, Balsamiq Mockups. Acho que custa cerca de 90 dólares. Eu acho que é um pouco no intervalo. Mas se você já tem o Photoshop, esta é a melhor opção. Você pode usar o Photoshop para criar seus wireframes, e esse é o próximo tópico que vou abordar. Se você tem o Photoshop, você pode baixar um monte de kits de mock-up gratuitos. Então digite aqui, “kits de maquete grátis”, e você ficará surpreso ao encontrar muitos kits de wireframing. Você pode ver que este é um deles Mockups Material e 15 telas de comércio eletrônico. Embora eles são para telas móveis, Eu acho que você pode usar esses componentes em suas páginas web também. Isto é muito bom. Você pode ver aqui que há esses outros componentes. Você também pode usá-los em seu design de página da Web. Este é um deles, é no Photoshop, Sketch, e tudo mais. Um outro kit wireframe que eu realmente amo é por este cara Rafal Tomal, Eu acho que você precisa se inscrever em seu site para baixar este, mas é um wireframe muito bom para sites. Tais caixas, um monte de grandes elementos; cabeçalho, subtítulo, parágrafos, listas. Tem um monte de coisas. Você pode ver aqui que você tem acesso gratuito. Você precisa se inscrever para baixá-lo. Outro kit wireframe é por este Pixeden, gratuito por site. Vou incluir o link, então não se preocupe. Você pode ver que tem um monte de elementos, controles de vídeo, dicas de ferramentas, ícones, calendários e um monte de elementos de interface do usuário. A ferramenta online que eu realmente gosto é este Moqups. Eu vou compartilhar esta maquete com vocês na próxima lição porque será o seu desafio final de web design para que você saiba quais habilidades você adquiriu neste curso. Se você é um designer de interface do usuário, um web designer, você vai obter um wireframe de seu cliente ou seu cliente que eu preciso deste design de site. Se é uma empresa muito boa, eles fizeram alguma pesquisa de experiência do usuário. O produto final de cada pesquisa de experiência do usuário será este wireframe. Desafio definitivo de web design. Eu uso esta ferramenta Moqups, moqups.com. Crie uma conta gratuita aqui. Você pode ver que você tem um monte de stencils aqui como este, botão, links, caixas de seleção, link único, rótulo, nós, e avatares, grades, ícones. Este é o que usei aqui. Você pode ver este ícone. Se eu clicar aqui, você pode ver. Se eu clicar uma vez, ele o seleciona e se eu clicar duas vezes, ele me mostra as opções. Esta é uma ferramenta muito boa. Você pode ver algumas das opções aqui, como avançar, trazer para a frente, para trás. Isto é opções de camadas. Então temos essas opções de alinhamento. Você pode selecionar dois elementos e alinhá-los. Este é um dos elementos que usei daqui. Você pode mudar as cores de preenchimento aqui se quiser, talvez assim. Esta é uma ferramenta muito boa. Primeiro passo em todos os projetos de interface do usuário em cada projeto de web design, em cada projeto de aplicativo móvel, você precisa primeiro descobrir o que você está indo para projetar, então o primeiro passo é o seu wireframe. Esta é uma armação que desenhei para vocês. Eu vou compartilhar o link com você, e eu deveria dizer essa palavra desafio na próxima lição, ou devo dizer agora mesmo? Ok. Aqui está o desafio final para você. Você tem que projetar um site muito bom usando este wireframe. Vou lhe dar algumas dicas de como você vai abordar este projeto. Número 1 é, primeiro escolha um esquema de cores. Use qualquer logotipo ou apenas coloque alguns textos aqui como logotipo. Tenha em mente que uma cor que você vai usar para links e esses botões. Talvez você precise mudar algumas cores aqui, como os tamanhos de texto diferentes. Tenha em mente que se tivermos esta seção, esta é a primeira seção, o espaço entre duas seções como esta e esta deve ser bom, e deve ser igual. Se você tiver a seção 1, seção 2, seção 3, esta é a seção 3, o espaço entre todas essas seções deve ser o mesmo. Assim, a margem superior e as margens inferiores devem ser as mesmas. Outra coisa é, sempre que você recebe uma maquete de um cliente. Wireframe ou mock-up basicamente é um lo-fi mock-up. Chamamos-lhe maquete de baixa fidelidade. Maqueta de baixa fidelidade é quando você recebe um wireframe de seu cliente como este, o que você vai fazer primeiro passo é que você deve ter o conteúdo. Se eles não têm o conteúdo, vai ser um pouco de dor. A segunda coisa é que nem sempre segue tudo o que vê na maquete. Você é um designer, você pode pensar de outras maneiras como você pode precisar mover isso para cá. Até a maquete diz que deveria estar aqui. Você pode usá-los aqui ou talvez no lado direito e, em seguida, mover esta chamada para cá. Além disso, você pode mudar estes se você quiser o vídeo à direita, você pode usá-lo. Ou mesmo se você quiser o vídeo no centro, você pode colocá-lo. Este wireframe não é basicamente a melhor diretriz de design para você, isso é apenas mostrando que esses elementos devem estar presentes nesta seção. Estes devem estar aqui. Estes serviços devem ser assim, e precisamos de um botão abaixo deles. Nossos projetos recentes terão essas três categorias. Se clicarmos aqui ou clicarmos neste, ele vai passar para o próximo e o terceiro. Vamos mudar a cor do texto. Só vai ser cinza e isso vai ser branco. É o mesmo padrão que usei nesta barra de navegação superior. Isto é basicamente uma barra de abas. Então mudar cria novas guias aqui ou reorganiza essas imagens. Além disso, certifique-se de que se você estiver usando algumas imagens em seu perfil ou seu portfólio ou este design, mencionou seu nome e títulos aqui para que o usuário possa saber do que se trata. Agora, na parte inferior, você pode ver que você está livre para movê-los ou usar qualquer estilo que você gosta. É assim que usamos wireframes em diferentes situações. Se você tinha um site muito grande ou você precisa de um protótipo interativo, você pode usar este. Além disso, você pode usar stencils de wireframe de página web, eu mostrei a vocês. Este é o software Balsamiq Mockups. Se você projetar um monte de maquetes ou wireframes, você deve comprar este. Fora isso, acho que você é bom com essas opções gratuitas. Você não pode exportar isso. Além disso, você pode ver nessas configurações, temos grade 960. Eu mostrei a grade. Se você é um codificador ou designer, você pode projetar seu wireframe usando uma grade mesmo desde o início. Você pode alternar para esta ou nenhuma grade. Além disso, você pode ver a largura é 960, você pode aumentar sua altura também. Este é o título do projeto. Continue explorando. É assim que você desfaz e refaz as coisas. Estes são todos os elementos, estênceis que você pode usar. Você também pode importar imagens aqui e arrastá-las para cá. Essas outras páginas, se você quiser várias páginas do mesmo site, talvez página de aprendizagem, entre em contato conosco página, página de blog. Você pode adicionar uma nova página aqui assim e continuar projetando aqui. Você também pode agrupar elementos aqui se quiser. Este é um grupo de controle G ou bloquear sua posição. Continue explorando esta ferramenta. Eu acho que você vai adorar essa coisa de grampear. É sempre o primeiro passo em todos os designs de interface do usuário. Tenha em mente que este é o desafio; Eu quero que você crie este site para mim para que eu possa julgar o que você aprendeu no meu curso. Compartilhe comigo um link postado nas perguntas ou mensagem significa separadamente. Vou tentar dar-lhe dicas sobre como melhorar se você me mostrar o design, caso contrário, eu não sei como você pode melhorar. Sempre mostre seu trabalho para seus instrutores ou professores ou seus colegas designers que você acha que isso está ótimo? Ou preciso melhorar alguma coisa? Vamos começar. Tente projetar este wireframe. Preciso de um site muito bom. Você está aberto para usar quaisquer imagens gratuitas ou ícones de qualquer fonte, qualquer fonte livre. Vamos ver o que você pode inventar. Vamos passar para a próxima lição. 78. Exercise →Redesenho de dribbble parte 1: Hoje, eu tenho uma pergunta muito interessante de um de meus alunos, e o que ele perguntou foi como criar essas partes brilhantes nesses botões e como colocar essas luzes brilhantes aqui. Existem muitas técnicas para fazer isso. Basicamente é um drible curto. Deixe-me mostrar-lhe o que ele compartilhou comigo. Na verdade, ele compartilhou esse documento comigo. Este é o design do nosso driblador, e é um muito bom pressionado e botões elevados estados. Desde ontem à noite, eu estava tentando criar e replicar esse efeito, e eu criei esses dois arquivos que você pode ver aqui. Esta é a versão leve e esta é a versão escura. Vou compartilhar os dois PSTs com vocês, então não se esqueçam de baixar. Agora, nesta série, eu vou criar apenas esta versão escura. Isso vai ser um desafio para você. Você precisa criar algo assim. Então eu vou criar justiça escura. Vamos começar. Agora, durante esta palestra, meu objetivo final não é criar esse efeito incrível, mas fazer você entender como o designer alcança esse efeito e como ele usou efeitos diferentes para obter todos esses estados incríveis melhores e elevados. Agora primeiro, vou abrir um arquivo com o 1440 por 900 pixels. Agora, o primeiro passo será a sua cor sólida. Precisamos de uma cor de fundo, que vai ser o nosso 3-2, 3-2, 3-2, que é basicamente brilho é 20%, e zero saturação, zero matiz. É uma cor cinza escuro. Então vamos criar um retângulo arredondado. Selecione um retângulo arredondado, clique uma vez aqui, e vamos criá-lo com 620 pixels de largura e 100 pixels de altura, e raio pode ser oito, 10 ou cinco, depende de você. Então eu vou configurá-lo agora, assim. Agora a cor para este vai ser 18, algo assim. Ou talvez 16. Cabe a você. Acho que 18 é bom. Sempre que você tenta replicar algo, você precisa observar com muito cuidado o que está dentro deste design. Vamos ampliar e vamos dissecar esse projeto. Primeiro, você pode ver que há uma camada externa, você pode ver que este é um recipiente que está parecendo o melhor efeito aqui. Agora o que temos aqui é um gradiente escuro a branco aqui no fundo. Você pode ver aqui neste, então há mais uma camada no topo. Você pode ver aqui, esta é basicamente a camada dentro deste recipiente de fundo. Então, há basicamente dois contêineres, e em cima desses dois contêineres, estes são os três botões. Então, basicamente, temos cinco camadas uma em cima da outra. Agora, deixe-me criar outro. Nós vamos criar outro dentro disso, e desta vez, ele vai ter 604 pixels de largura e vai ter 84 pixels de altura. Certifique-se de que você pode usar oito pixels ou qualquer outra coisa. Isto vai estar dentro disso e a sua cor vai ser um pouco mais escura. Então eu vou pressionar 14 bem aqui, e nós vamos alinhar esses dois dentro um do outro. Agora, para obter o melhor efeito, esta camada externa, o fundo externo VG, eu vou nomeá-lo, e ele vai ser VG interno para fundo interno. Agora, no fundo externo, vamos usar sobreposição de gradiente. Este é o gradiente que eu vou usar, e é basicamente da cor escura, preta, que vai ser esta cor preta para este branco. É em sentido inverso e certifique-se de que está em multiplicar, ou você pode configurá-lo para normal, eu acho. O que estamos fazendo é, estamos criando esse efeito de curva de preto a branco usando isso. Então talvez possamos ajustá-lo mais assim. Então você pode ver aqui nós temos áreas brancas e aqui nós temos áreas escuras. Criamos nossas duas camadas de base. Agora vamos criar nossos botões. Então clique novamente, e precisamos que nosso botão tenha 200 pixels de largura com uma altura de 80 pixels. Agora este é o nosso botão principal. Este é o nosso botão, btn, e vamos movê-lo aqui em cima. É só alinhar isso assim. Você pode ver como eu criei todas essas três camadas. Este tem basicamente dois pixels de largura de cada lado. Estes são os botões. Não estamos usando nenhum efeito de traço para cobrir isso. Esta é a nossa camada base que está cobrindo esses botões para criar esse efeito arredondado ao redor desses botões. Agora vamos obter alguma elevação e mais alguns efeitos para este botão. Agora, o truque é que podemos conseguir isso com muitos fatos. Podemos usar esse bisel interno, e podemos usar 100 por cento de profundidade ou talvez menos do que isso, talvez 20 por cento, e podemos reduzir o tamanho, e talvez isso, assim. Podemos reduzir esse tamanho aqui, e também podemos aumentar esse tamanho. Há uma técnica que envolve esta gravura bivalente. O mesmo que podemos conseguir com esta sobreposição de gradiente. Agora, na sobreposição de gradiente, eu vou usar isso, que é o nosso modo de mesclagem. Normal e opacidade é 15%. Agora, o que estou fazendo aqui é que estamos usando três paradas de cores. Então você pode ver como esse efeito curvo foi por aqui, que são essas duas cores. Então, sempre que você clicar em algumas cores, você pode ver que esta é basicamente a parada que controla a largura que isso vai abranger. Torná-lo perto da outra cor e você vai ver esta colisão em seus botões ou o que você está projetando. Se você ficar longe daqui, é visível cada vez menos. É assim que criamos esse efeito elevado ou botão de pressão usando gradientes. Esta é uma parte muito complicada. Se você pode aprender, eu acho que vai lhe dar um monte de benefícios. Vou reduzir esse efeito para 23 ou 20 por cento. Como isso. Agora você pode ver como esse efeito foi. Você pode usar bisel e gravura. Você pode reduzi-lo, talvez assim. Eu usei 40 graus aqui e você pode reduzir a profundidade para 15 ou talvez algo assim, ou você pode usar essa sobreposição de gradiente. Há muitas maneiras de criar esses efeitos. Agora, com sobreposição de gradiente, eu vou dar alguma sombra interna porque vocês podem ver aqui que não temos nenhuma luz elevada aqui. Esta é a nossa sombra interior e eu vou usar a cor esbranquiçada aqui para sombra interior. Deve estar no topo, então a distância será dois ou um. Vamos reduzir este tamanho. Não vamos multiplicá-lo, então vamos usar o normal. Vamos reduzir a opacidade para obter o efeito assim. Este é um efeito muito mínimo. Você pode aumentar o tamanho se quiser. Cabe a você o que você está gostando é. Você também pode reduzir o tamanho e a suavidade. Podemos mudar a suavidade como esta. Talvez três seja bom. Você pode ver que temos um botão elevado aqui. Talvez possamos adicionar um pouco de sombra com ele. Podemos adicionar alguma sombra, 90 graus, multiplicar distância deve ser dois e tamanho deve ser quatro, cinco, ou talvez oito é bom. Vamos ver como esta sombra está vindo daqui. Vamos aumentar a distância e também isso. Vou usar 20 aqui. Parece bom. Temos alguma sombra. Se você quiser adicionar várias sombras, cabe a você. Você pode adicionar várias sombras aqui. Talvez possamos adicionar alguma sombra cinza claro e expandi-la ou mais. Talvez assim. Podemos configurá-lo para multiplicar, para ter várias sombras e vai parecer mais legal e mais melhor. Temos este botão. Podemos usar a cor aqui, talvez assim. Sobreposição de gradiente, talvez possamos usar multiplicar. Isso está ficando ótimo, parece bom e talvez possamos aumentar o efeito multiplicador aqui. Vamos adicionar algum texto aqui. Vamos adicionar um texto, um. Vou usar um. Vamos colorir branco ou talvez branco acinzentado assim. Talvez movendo-o para o meio assim. Agora temos quase completado o efeito elevado normal. Agora vamos para o efeito onde precisamos de um brilho aqui. Há muitas maneiras de criar esse brilho, mas vou criar um método não destrutivo. Duplicar este botão, botão Camada. Duplicar, Controle J. O que vou fazer é remover todos os efeitos. Então vamos remover o campo, então não precisamos de sua cor. Não precisamos da cor do meio. Vamos misturar duas cores, dois métodos, ou dois estilos de camada. O de cima, o botão de cima, vou dar um golpe. Eu vou nos dar traço de cor desta cor acinzentada CACA, dois pixels de largura. Temos este efeito. Basicamente o nosso botão Base e no topo temos apenas o traço com um botão vazio. É basicamente um botão vazio com apenas um golpe. Agora o próximo passo é clicar com o botão direito do mouse e vamos convertê-lo Objeto Inteligente via Objeto Inteligente porque precisamos remover algumas partes dele. Depois de converter para este Objeto Inteligente, vamos usar nossa ferramenta de mascaramento. Crie uma máscara sobre esta camada e obtenha esta ferramenta Pincel. Pressione “B” no teclado e “Clique com o botão direito do mouse” e verifique se você tem essa dica, essa dica desfocada. Não use escova dura. Defina a opacidade para 50 ou 60 por cento e comece a remover essas áreas. Vamos remover esta área. Você pode ver como vamos criar esse efeito. Basicamente, vamos escovar algumas das porções assim. Por esta luz aqui, escove nesta direção. Dê alguns traços do pincel assim. Golpes suaves muito leves. Agora, você pode ver que temos esta luz aqui. Uma luz muito agradável. Você sempre pode voltar ou você pode pintar com cor branca se você quiser obter mais luz aqui assim. Esta é uma maneira muito legal, muito fácil e não destrutiva de criar essa luz. Agora criamos a luz. Você pode ajustá-lo com teclas de seta se quiser que ele esteja na parte inferior, talvez um pouco abaixo, ou no topo, depende de você. Vou mudá-lo para cá e vou usar um pouco menos de opacidade, como 50 por cento ou talvez 75 por cento. Esta luz está olhando bom e este é muito bom efeito que temos aqui, e se você quiser adicionar um pouco mais de sombra ou mais profundidade nele, podemos usar este bisel e efeito de cor de relevo. Talvez possamos usar multiplicar aqui, aumentar essa escuridão aqui e, talvez reduzir essa área branca ou opacidade. Ele está olhando grande, muito bom botão elevado. Este botão e o terceiro, são os mesmos. Vou colocá-los em uma camada. Este é o nosso grupo de camadas, esta é basicamente a nossa luz, e este é um botão. Eu vou para o Controle J e vou movê-lo para cá no final. Completamos dois botões. Um é o primeiro botão e este último é três. Na próxima lição, vamos criar este botão pressionado. O botão Inserir que é pressionado e seus efeitos brilhantes. Caso contrário, esta palestra será muito longa. Vamos passar para a próxima lição. 79. Exercise →Redesenho de dribbble parte: Agora vamos criar o efeito brilhante e o melhor botão nesta lição. Vamos começar. O que vamos fazer é copiar este mesmo botão e vamos movê-lo entre estes botões. Está nesses botões e o que vamos fazer é primeiro, vamos remover esse brilho, aqui no topo. Não precisamos desse brilho. Então o próximo passo será o nosso gradiente. Precisamos inverter o gradiente, então ele é basicamente pressionado. Nós também vamos mudar este gradiente um pouco porque ele está olhando muito nítido no topo. Talvez possamos movê-lo assim ou talvez assim. Deve ser mais escuro porque é pressionado. Então vamos remover esta sombra interior e vamos convertê-la alguma sombra interior escura como essa. Como este. Ou você também pode removê-lo totalmente, ou talvez movamos a distância para zero e usamos isso para quatro, e vamos aumentar o tamanho para 100. Basicamente estamos dando alguma sombra escura ao redor dele, ao redor deste botão. Acho que temos alguns problemas espaciais, então vamos corrigi-los primeiro. É o nosso segundo botão. Vamos mover o terceiro botão um pouco para cá, talvez mais um píxeis. Então este também, vamos movê-lo para cá, assim. Vamos ajustar o fundo e as coisas depois de algum tempo. Neste momento estamos mais preocupados com este botão pressionado aqui. Talvez possamos remover esse efeito de bisel, e também vamos movê-lo. Vamos mudar o texto para dois. Agora você pode ver que já está parecendo um pouco pressionado. Agora deve haver uma coisa que precisamos mudar e vamos adicionar mais uma sombra interior. Esta sombra interior, onde você dá um pouco mais de profundidade. Vamos ter alguma distância aqui, seu tamanho deve ser zero. Estamos criando duas sombras internas. Vamos mudar a cor para um pouco mais escura, talvez assim. Assim, e vamos torná-lo um pouco mais suave. Agora estamos bem. Agora, no fundo, precisamos de uma sombra. Vai ser remover todas as sombras, e precisamos de uma sombra branca aqui. Isso é basicamente pressionado, então sua luz deve ser refletida aqui. Será mais escuro do topo, esta área superior, e será mais leve desta área. Vamos adicionar uma sombra que será um pouco esbranquiçada, e vamos reduzir o seu tamanho. Nós vamos mudar seu modo de mesclagem para sobrepor. Você pode ver um pouco de sombra aqui. Vamos reduzir o tamanho para 12, e a distância deve ser de oito pixels, eu acho que é bom. Podemos aumentar o efeito movendo este controle deslizante para cima e para baixo. Cabe ao seu gosto, qualquer luz que você quiser aqui. Acho que gosto de estar a 75 por cento, é bom. Talvez eu precise mudar a sombra interior um pouco mais. Agora está parecendo um pouco aborrecido para mim. Talvez eu precise de mais sombra interior, que vai ser assim. Vou dar mais sombra escura aqui, e talvez eu possa aumentar o tamanho. Vamos movê-lo um pouco para cima assim. Ele está olhando muito bom efeito pressionado. Se você quiser, você também pode reduzir esta área escura superior por aqui. Estes são bons ajustes, você pode fazê-los a noite toda. Eu vou criar rapidamente este botão agora para você. Vamos mudar a cor para este azul, e então vamos dar-lhe efeito Brilho Externo. Efeito de brilho externo, certifique-se de que a cor que você usa é muito nítida. Você pode ver aqui saturação é 100%, brilho é 100%. Certifique-se de que estes dois são 100% e use qualquer cor que você gosta. Ele vai realmente brilhar e ajustar esses valores. Isto é basicamente espalhado. Acho que dois ou três por cento de propagação é bom. Então temos o tamanho, tamanho de 10 pixels. Outer Glow é assim. É assim que vamos usar, também certifique-se de que é um pouco opaco e um pouco transparente. Será no meio. É assim que vamos dar esse efeito de brilho. Agora vindo para os outros efeitos de brilho, aqui e aqui. São técnicas muito antigas, mas vou mostrar-lhe aqui. Há muitas maneiras de criar esses efeitos brilhantes. Vamos selecionar esta área aqui, e podemos usar pincel. Esta é a técnica mais antiga, escova leve. Agora, o que vamos fazer é selecionar nossa ferramenta de pincel, e aumentar um pouco seu tamanho. Selecione a cor que gostamos de escovar, como esta. Certifique-se de que é uma cor um pouco afiada. Segure seu pincel novamente, e nós vamos usar pincel assim. Você pode ver aqui que está nos dando uma luz brilhante e nós vamos usar sobreposição, ou talvez possamos usar clarear assim. Agora, o que vamos fazer é remover o resto da luz. Só precisamos que esteja aqui nesta área. Nós estamos indo para Control clique ou Command clique neste botão, e precisamos remover tudo deste botão. Segure a borracha, ou talvez selecione este pincel leve e pressione “Excluir”. O que está acontecendo? Talvez eu precise usar borracha aqui. Oops. Agora tenho a minha borracha. Vamos remover isto assim e pressionar M e fizemos este trabalho aqui. Agora vamos selecionar esta área e controlar o turno I ou o comando shift i para inverter a seleção, e então novamente vamos pegar nossa ferramenta de borracha e vamos apagar essa luz extra aqui. Pressione M ou controle ou comando D para desmarcar. Você pode ver aqui que temos uma luz muito afiada. Se você quiser reduzir a luz, você pode usar a opacidade ou talvez novamente, você pode usar este mascaramento e nós podemos novamente escovar as áreas que não precisamos aqui. Isto é tudo o jogo de esconder e remover os nossos pertences aqui. Você pode ver como podemos fazer isso facilmente assim, talvez possamos reduzir o efeito aqui assim, e podemos multiplicá-lo controlar JS para aumentar o efeito. Se você quiser reduzir o efeito você pode usar algo assim. A mesma técnica vai ser usada no fundo aqui, ou a segunda técnica que vou mostrar é esta. Vamos usar uma barra arredondada aqui, talvez alguns pixels de largura. Controle D certifique-se que ele está na altura que vai ser 2-4 pixels não torná-lo muito grande, assim. Temos esta barra de linha aqui e vamos usar uma técnica muito agradável que vai ser borrão, borrão gaussiano. Antes disso, vamos converter isso para um objeto inteligente como aquele, então eu vou usar o borrão assim. Você pode ver que há muitas técnicas para criar o mesmo efeito, então talvez eu possa usar outro borrão que é o desfoque de movimento. Quero que seja nessa direção, para que eu possa usar algo assim. Você pode ver como esse efeito vai ser legal. É como a luz emitida a partir deste fundo deste botão. Você pode ajustar a luz onde quer que ela esteja, e você pode usar a opacidade como 50 por cento ou 20 por cento ou 30 por cento ou talvez eu ache que 450 por cento foi bom caso contrário, ele está parecendo muito maçante. Você pode usar efeito de sobreposição ou talvez você possa usar queima de cor é até você ou talvez normal. Eu acho que o normal está bom e eu preciso aumentar o efeito para 75 por cento assim, ele está com bom aspecto. Se você quiser reduzir o tamanho, você também pode transformar isso e usar a altura e reduzir a altura para três pixels. Você pode ver agora é um pouco magro e mais elegante. Da mesma forma, vamos dar o brilho nesses dois lados, então se você olhar para isso aqui você pode ver há luzes aqui nesta área e nesta área. É da mesma forma que vamos usar isto. Talvez possamos usar novamente o mesmo retângulo ou talvez possamos duplicar isso, controlar T e podemos girá-lo assim, reduzir seu tamanho assim e ampliar, usar as alças aqui, reduzir seu tamanho para algo Talvez mais assim. Agora, precisamos mudar a direção do borrão de movimento, então ele vai ser nessa direção. Deve ser 90 assim, então talvez precisemos reduzir o tamanho mais ou talvez possamos reduzir o tamanho do borrão de movimento assim. Agora você pode movê-lo para cá. Você pode ver como o slide está ótimo. Se você quiser esconder as porções, você pode cortar isso dentro dela ou você pode usar novamente o mascaramento e escová-lo assim. Vou escovar isso agora mesmo. Você pode ver como esse efeito está ótimo e legal e muito nerd. Estou duplicando e colocando do lado esquerdo. Acho que o nosso melhor efeito está quase pronto. Talvez possamos escurecê-lo um pouco mais desta área e também desta área. É assim que você cria diferentes efeitos de luz ou efeitos crescentes ao redor dos botões ou nas bordas dos botões, ou você pode criar luzes brilhantes com pincéis e ocultar as partes desses pincéis. Mascaramento é a nossa técnica chave e temos usado principalmente os objetos inteligentes. Você precisa saber que como eu criei tudo isso, usamos gradientes, então usamos bisel e gravação, usamos essas luzes. Criei essas luzes com três técnicas. Um era pincel, um era com efeito de traçado de camadas, e outro era apenas usando uma camada de objeto inteligente com, então um efeito era esse desfoque de movimento. Estou a esquecer-me de muitas coisas. É assim que criamos esse efeito legal. Agora, seu desafio é que você vai me dar algo assim. Agora, a dica é que sempre que você tenta criar ou replicar algo, você precisa ampliar e ver todos os pixels e pequenos detalhes aqui como você pode ver aqui, há uma borda de preto, uma linha sobre aqui então temos esta sombra interior e no topo temos brilho. O mesmo é aqui, a mesma coisa fez aqui. A única diferença é que eles têm sombras suaves aqui e as cores são um pouco mais brilhantes e leves. Este é o fim desta incrível lição para criar este efeito drible. Eu vou criar um monte de novas palestras em breve, então fique ligado e se você tiver alguma dúvida me pergunte. Vamos passar para a próxima lição. 80. Como converter PSD em dicas de programação: Muitos de vocês podem estar se perguntando como converter qualquer camada ou como copiar suas propriedades CSS se você deseja convertê-lo em algum HTML ou algum elemento de página da web. Deixe-me mostrar-lhe um truque muito simples. É apenas um Photoshop e comando de cópia CSS padrão que eu apliquei a traçado de pixel para esta camada, este retângulo arredondado e, em seguida, algumas sombras. Então, basta clicar com o botão direito do mouse nesta camada e clicar neste Copiar CSS. Eu fiz um arquivo de amostra aqui, então vamos testá-lo. Vamos colar isso como uma aula de teste. Então teste. Se você não é de um fundo de programação, não se preocupe, apenas eu vou mostrar-lhe que como vamos usar esses valores CSS. Basicamente, estes são os valores CSS. Na maioria das vezes podemos não precisar desta posição absoluta coisa de cima esquerda aqui, também este índice z. Vou comentar isso. Vamos abrir nosso arquivo em um navegador e ver, ok, onde estão nossos estilos? Está bem. O problema era essa configuração de exibição. Eu comecei a exibir bloco. Aqui está o nosso quarteirão. Vamos ver como vai parecer quando eu vou usar absoluto. Ele está se movendo devido a esta página HTML e com relação a esta página HTML. É assim que vamos converter nossos arquivos CSS e PST para CSS. Então, copie isto aqui assim. Agora vou copiar esta mensagem aqui. Vou clicar com o botão direito Copiar CSS e vou colar os estilos para o meu estilo cabeçalho 2, h2. Não se preocupe se você não é um codificador, se seu programador ou desenvolvedores querem HTML, basta dar-lhes este código e isso será bom o suficiente para eles. Então não se preocupe se você não sabe muito sobre a codificação. Certifique-se de remover estes índices z e este posicionamento absoluto a partir daqui. Posição absoluta esquerda e superior, sempre removê-los porque não precisamos deles. É assim que vou te mostrar. Este é o nosso texto, “Olá, eu sou algum texto aqui.” Mesma fonte, mesma cor, tudo. Basicamente, o que realmente precisamos do nosso CSS é esse tamanho de fonte, família de fontes, cor, altura da linha e a largura e altura, não precisamos de tamanhos de fonte, então vamos removê-lo. O que é isto? Está bem. Esta é uma maneira e segunda maneira é este plugin que é chamado CSS Hat. Eu comprei. É um plug-in premium. Ele converte seus estilos para CSS Less e Sass e Stylus. Concreto está tendo problemas em mostrar minha sombra aqui. Você pode ver se eu mudar para esta camada, ele não está mostrando nenhuma sombra. Mas para a parte CSS que está mostrando muito bom como borda dois pixels, sólido e cor, cor de fundo em valores hexadecimais. Podemos definir suas opções aqui. Este é um plug-in muito bom e se você é um desenvolvedor, eu acho que é um deve ter plug-in. Agora há mais uma ferramenta que é muito recente e é este Avocode. Eu só estou usando sua versão de teste e eu acho que é muito bom aplicativo. Mas o problema é que é um pouco caro para o meu gosto. Você pode ver aqui se eu selecionar esta atualização aqui. Agora ele tem integração online com esses aplicativos de desktop. Se você carregar qualquer arquivo daqui como Open Design e carregar seu arquivo PST aqui, ele mostrará os tamanhos. Você pode selecionar ferramentas aqui como medida e clicar em qualquer camada. Ele mostrará o tamanho desta caixa. Agora ele está mostrando que é um arquivo de texto e estas são as configurações. Também está mostrando as distâncias de todos os cantos. É muito incrível. Junto com isso, ele está mostrando todo o código no lado direito, algumas opções de exportação. Então eu tenho a fonte que estou usando, que é Oblik Negrito aqui e se eu for para este painel Camadas, eu posso ver todas as camadas usadas como estas. Isto é muito bom. Eu estou gostando, mas eu realmente compraria se eles tivessem algum plano como eu poderia comprá-lo por um ano. Eles têm isso por um mês, como um mês de uso como Garage, você tem projetos ilimitados empresa de negócios. Se você está trabalhando em uma equipe muito grande ou em uma equipe, eu acho que esta é uma opção muito boa. Você pode ir em frente e comprar este Avocode e eu acho que é realmente bom na conversão de seus arquivos PST para CSS. Mas, por enquanto, vou manter esse comando padrão Copiar CSS do Photoshop. Esta é a dica que eu realmente queria mostrar a vocês hoje. Um dos meus alunos fez a pergunta para converter algo em CSS e esta é a resposta. Este é um vídeo de solicitação. Fique ligado e eu vou atualizá-lo muito em breve. Vamos passar para algumas novas palestras. 81. Como exportar imagens para dicas de design na web: Vamos falar sobre como salvar imagens para um design da Web e da interface do usuário. Então, quando você tenta exportar ou salvar sua imagem para Web design, ou você pode ter muitos problemas, como você pode ver cores diferentes na exportação. Há uma solução muito simples em torno disso. Então deixe-me mostrar-lhe o processo e as coisas que você precisa ter em mente ao exportar suas imagens para Web design e design de interface do usuário. Isto é uma imagem. Se você quiser exportá-lo, primeiro lugar, você vai usar este Comando de Exportação. Não use Salvar como ou Salvar como um arquivo JPEG. Vamos usar Exportar e Salvar para Web Legacy. Clique sobre isso e o atalho é Alt Control Shift e S. Agora neste painel, certifique-se de que você tem PNG selecionado ou mesmo JPEG selecionado. Ambos são bons. Você pode reduzir a qualidade do arquivo JPEG para obter o tamanho desejado. Você pode ver tamanho muito pequeno arquivo JPEG chegando aqui. É 151,5 kilobytes. Então, se você quiser uma imagem muito pequena, você pode reduzi-la como 70%. Agora é 124.8 KB. Enquanto você está projetando sites, você está muito preocupado com os tamanhos de imagens para acelerar o seu site e reduzir o tempo de carregamento. Agora, é assim que salvamos uma imagem JPEG. Você também pode clicar neste progressivo. O que ele vai fazer é carregar sua imagem em diferentes sessões. Como primeiro, será uma imagem desfocada, então começará a aparecer lentamente e lentamente se você quiser esta opção. Certifique-se de que este Optimize é clicado. O muito, muito importante é este converter para sRGB. Certifique-se sempre de que isso não está marcado. Na maioria das vezes Ele vai criar um monte de problemas de perfil de cor. Portanto, verifique se ele está desmarcado e a visualização está definida para monitorar a cor. Você também pode usar este RGB padrão da Internet. Sem gerenciamento de cores. Vou definir este e depois apertar “Salvar”. Se você quiser mudar o tamanho da imagem, você pode mudá-la aqui, como eu queria 1024. Então a altura será esta, e a largura será esta. Esse bloqueio significa que eles são nivelados um em relação ao outro. Então, aumentará e diminuirá em proporção. Na maioria das vezes não precisamos desmarcar isso. Então, por exemplo, se eu tentar usar altura 900 e você pode ver que está distorcido. É assim que usamos este painel. Na maioria das vezes para Web, Eu recomendo este PNG 8 ou PNG 24, imagem transparente. Principalmente usamos PNG 24. Então, se você tem um nível muito baixo de cores, não é uma imagem muito colorida, então você pode ir para este arquivo PNG 8. Você pode ver a prévia aqui. Vamos tornar isso novamente proporcional. Agora você pode ver aqui nós temos uma tabela de cores. Ele está mostrando 256 cores e eu acho que eles são suficientes para mostrar minha imagem e tudo com precisão. Então eu estou usando isso, certifique-se de que esta transparência. Se a sua imagem tiver alguma transparência, verifique esta. Às vezes, o formato PNG 8 pode não exibir transparência muito agradável. Então você precisa mudar para PNG 24. É a melhor opção para mostrar transparência. Então, se formos para o arquivo PNG 8, não se preocupe com essas configurações, apenas certifique-se de que este é perpétuo e isso está definido para difusão. A difusão obtém melhores resultados. Você pode reduzir as cores se quiser reduzir o tamanho do arquivo. Você pode ver aqui é 31 K. Se eu tentar reduzir as cores para 64 o tamanho do arquivo é 24 K, mas você pode ver minha imagem é um pouco distorcida. Deixe-me ampliar. Clique aqui. Você pode ver que eu tenho um rosto pixelado aqui. Então, se eu mudar para 128 e, em seguida, de volta para 256, ele está mostrando muito bom. Então, estas são diferentes configurações aqui. Você também pode salvar suas predefinições aqui. Se você selecionou algumas opções, você pode salvar as configurações e nomeá-las como design da interface do usuário, PNG 8, design da interface do usuário, PNG 24 algo assim. Então, isso é tudo sobre salvar suas imagens e certificar-se que suas cores são as mesmas que você projetou. A outra coisa é certificar-se de que a sua cor está definida para este RGB 8. Na sua exibição, a configuração da prova está definida para monitorar o RGB e as cores da prova estão desmarcadas. Então isso é outra coisa que você precisa ter em mente. Então, se você tiver sua cor de prova definida como, por exemplo , CMYK, isso pode causar muitos problemas ao tentar exportá-lo. Além disso, não deve estar no início da Internet e padrão RGB ou sRGB. Certifique-se de que é Monitor RGB, cores de prova está desmarcada e, em seguida, você sempre usar esta opção Exportar Salvar para Web. Você também pode usar esta Exportação Rápida, mas certifique-se de que suas preferências de exportação estão definidas para onde você desmarcou. Aqui temos exportação. Certifique-se de que está definido como transparência PNG e Converter para sRGB está desmarcado. Então essas são as coisas que eu realmente precisava dizer a vocês e a maioria dos desenvolvedores Web e Web designers, quando eles tendem a exportar suas imagens e fatias, eles precisam ter em mente todas essas coisas. Este foi um vídeo de solicitação e um dos meus alunos estava tendo problemas neste assunto. Vou enviar muitas dicas e truques novos. Então fique ligado e vamos passar para um design incrível. 82. Dicas de como usar de grds no Photoshop: Vou mostrar-lhe um truque muito simples sobre como usar suas grades ao projetar, então esta é uma dica, deixe-me mostrar-lhe. Se você tem uma grade como esta, como eu mostrei em minhas palestras anteriores. Enquanto você está projetando, às vezes você precisa escondê-lo e mostrá-lo novamente se você tê-lo em total opacidade como este. Então isso parece muito ruim quando você está projetando. O que eu faço é colorir ou sobrepor cores, como este tom cinza escuro, e eu reduzo a opacidade para 10 por cento assim. Então eu tento trancá-lo aqui. Você pode ver esse pequeno bloqueio no painel Camadas. Eu tranco para não movê-lo acidentalmente. Enquanto você está projetando, você pode facilmente mostrar suas grades e alinhar as coisas melhor e fazê-lo muito bem. A outra coisa que faço é mover esta grelha para o topo. Então mova tudo acima de todas as suas camadas e mantenha-o lá e mantenha-o em uma opacidade muito baixa como 5% ou 10% e continue projetando. Então este é um truque muito limpo e simples. Então fique atento para mais truques. Eu vou compartilhá-los muito. Vamos passar para algumas novas palestras incríveis. 83. Match de fontes → novos recursos no Photoshop CC2017: Há outro novo recurso no Photoshop CC 2015.5, e que é basicamente a fonte de correspondência. Onde você vai encontrá-lo? Aqui no tipo, você pode ver Match Font. É uma característica muito nova e muito legal. Você pode facilmente combinar fontes. Esta é uma foto Dribbble de outra pessoa designer de UI. É trabalho fora de outra pessoa, então eu não sei quem é responsável por este tipo de trabalho de qualquer maneira. Agora o que vou fazer é abrir uma foto de Dribbble aleatória do Dribbble. Eu vou combinar fontes se eu puder ver que eu tenho as mesmas fontes como esta. Primeiro, eu vou fazer é eu vou selecionar alguma parte, ter certeza que é muito pequeno, não usar muito ou muito largo. Talvez você possa ir para essas quatro letras, e ir para digitar e combinar fontes. Agora, ele vai procurar por algumas fontes. Além disso, ele está indo para sincronizar fontes do Typekit. Se você se inscreveu no Typekit, ele vai obter algumas fontes de lá. Ele encontrou 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 fontes, que são quase semelhantes. Agora o melhor telefone que eu gosto aqui é este Tw Cen MT Regular. Se eu clicar sobre ele e pressionar “OK”, agora ele está selecionado. Agora eu vou para a minha ferramenta Tipo. Se eu tentar digitar aqui, as mesmas palavras, pagamento, você pode ver o quão perto ele tem correspondido a minha fonte. Acho que são idênticos. Este designer usou a mesma fonte que estou usando agora, é Tw Cen MT. É basicamente fonte geométrica. Você pode encontrar mais sobre fontes no meu outro curso tipográfico. Esta é outra característica que é muito legal. Você pode combinar facilmente tipos, rostos e fontes. Você pode descobrir se você já instalou qualquer fonte que esteja mais próxima ou próxima da fonte usada nesta qualquer imagem. Então, ao invés de ir a sites, qual fonte ou qualquer coisa para encontrar a fonte usada, você pode usar esta ferramenta Photoshop e adicionar muito agradável, você pode usá-lo e encontrar as fontes mais próximas que você deseja usar. Esse é um novo recurso do Photoshop CC 2015.5. Se tiver alguma dúvida, me avise. Poucos de meus alunos solicitaram esses novos recursos no Photoshop na versão mais recente, então estou criando essa palestra e uma outra. Vamos passar para a próxima lição.