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 ele