Como configurar o macOS para web design.

1. Boas-vindas ao curso: Nesta aula, vou mostrar como configurar seu Mac para web design. Vamos começar. Ei, todo mundo. Bem-vinda. Meu nome é Adi Purdila, e eu sou um web designer e desenvolvedor. Agora, se você está apenas começando no web design, esta classe mostrará todas as ferramentas que você precisa para ser rápido e eficiente. Se você é um designer mais experiente, então você pode encontrar alguns aplicativos que são realmente muito úteis, mas você não tinha idéia sobre. Nesta aula, vou mostrar os aplicativos que uso quase diariamente. Eles fizeram uma diferença significativa para mim e acredito que será o mesmo para você. Vou mostrar-lhe o software de design que eu uso e também algumas alternativas, bem como prós curtos e contras para cada um. Você verá alguns aplicativos incríveis para escolher cores, criar paletas de cores e também verificar o contraste entre as cores para que você possa ter certeza de que seus projetos estão acessíveis. Também mostrarei como organizar, marcar e visualizar suas fontes muito mais facilmente; isso é muito útil para os designers porque é uma grande economia de tempo. Você também aprenderá a gerenciar e organizar seus ícones que você sempre possa encontrar rapidamente os que você precisa. Nas duas últimas lições, vou mostrar-lhe como medir qualquer distância ou dimensão na tela e também como tirar grandes capturas de tela e compartilhá-las com sua equipe ou clientes. Agora, esta classe é dirigida principalmente a usuários de Mac, mas eu acho que você ainda deve assistir mesmo se você estiver usando o Windows porque você pode encontrar algumas razões convincentes para mudar para o macOS para web design. lição número 2 é dedicada a você, ao usuário do Windows, e é aí que eu revisto meu raciocínio para escolher o macOS em vez do Windows para esse tipo de trabalho. Se você é um usuário de Mac, você pode ir direto para a lição número 3, onde eu vou mostrar que software de design eu uso para criar todos os meus projetos hoje em dia. Você está pronto? Vamos começar. 2. Uma palavra rápida para usuários do Windows: Bem-vindos à primeira lição desta aula. Antes de entrar no conteúdo principal, eu queria endereçar este vídeo rápido a todos os usuários do Windows que estão nos assistindo. Como você provavelmente já percebeu, esta aula é sobre a configuração do macOS para web design. Isso não significa que eu não goste do Windows ou que eu não goste de você, isso não é verdade. Eu cresci com Windows e PCs e tenho dois PCs em casa executando Windows e Linux e, no geral, adoro isso. No entanto, acredito que para esse tipo de trabalho, para o web design, o macOS é melhor do que o Windows. Isso não significa que você não pode usar o Windows para isso, você pode absolutamente. Você pode projetar qualquer interface, qualquer interface que desejar em ambas as plataformas. Mas eu acho que você vai ter um tempo mais fácil e agradável fazendo isso no macOS. Isso é tudo o que há para ele. Na verdade, tenho boas razões para acreditar nisso. A principal razão é a infinidade de aplicativos que você pode baixar e usar, maioria dos quais são gratuitos. Todos esses aplicativos são incrivelmente úteis e a maioria deles são únicos, que significa que eles não têm um homólogo do Windows, ou se eles têm, geralmente não é tão bom. Com os apps do macOS que estou usando, tudo funciona como esperado e isso é algo que eu valorizo muito. Outra grande razão para usar o macOS é o aplicativo Sketch, que é apenas Mac. Este ainda é o aplicativo de design digital favorito para um monte de pessoas, e eu ainda me encontro alcançando para ele de vez em quando, mesmo que eu sou principalmente um usuário Figma hoje em dia. Falarei mais sobre Sketch na próxima lição. Eu também amo a confiabilidade dos computadores macOS e Mac em geral. Eu acho que as pessoas devem prestar mais atenção a isso porque é muito importante que você tenha um equipamento em que você possa confiar, especialmente se for para o seu negócio. Raramente recebo falhas no macOS. Como eu estava dizendo anteriormente, tudo funciona como esperado do ponto de vista de hardware e software. Falando em hardware, eu acho que a Apple tem atualmente os melhores monitores de consumo no mercado. Aqui, eu estou falando sobre suas famosas telas Retina. Atualmente, tenho dois Macs com telas Retina, e este é um deles. Deixa-me dizer-te uma coisa. Assim que você começar a trabalhar em uma tela Retina, você nunca mais vai querer usar outra tela novamente, eu prometo. Isto é especialmente verdadeiro para o design. Esses monitores são muito brilhantes, e eles também são de alta resolução, então o texto e tudo o resto neles realmente são incrivelmente nítidos. Agora, se você está pensando em mudar para o macOS, não há tempo melhor do que o presente. Vou gravar esta aula em janeiro de 2021. alguns meses, a Apple acaba de anunciar seu novo chip M1 e três computadores que o usam. Um deles é um Mac Mini com preço de cerca de US $700. Considerando a relação preço/desempenho, isso é realmente uma pechincha e isso é o que eu recomendaria que você obtenha se você quiser começar a usar a plataforma Mac. Agora, se você é um usuário do Windows e não quer alternar, vamos falar sobre isso. Postar um comentário na área de discussão e talvez eu possa ajudá-lo de alguma forma. Talvez eu possa recomendar uma ferramenta para o Windows que vai tornar a sua vida um pouco mais fácil. Se houver interesses suficientes, vou até considerar fazer uma classe separada sobre como configurar o Windows para Web Design. Com isso dito, vamos entrar na carne e batatas desta classe. O primeiro passo que você precisará dar é instalar seu software de design. Esse é o aplicativo que você vai usar para criar seus designs. Mas qual deles você deve pegar? Porque há algumas opções dignas. Bem, vamos descobrir isso na próxima lição. 3. Software de design: Bem-vindos de volta à aula. Esta lição é sobre software de design e vamos dar uma olhada em algumas opções disponíveis. Vou rapidamente passar pelos prós e contras para cada um. Vou te dizer o que evitar. E também o que eu recomendo. Parece bom. Vamos lá. Vou começar dizendo o que deve evitar, está bem? Quando se trata de design de interface do usuário ou design de interface, você deve ficar longe do Adobe Photoshop e do Adobe Illustrator. E há mais alguns lá fora, mas estes são os principais. E não me entenda mal. Photoshop e Illustrator. Aplicativos fantásticos para o que eles foram projetados para fazer, não para este tipo de trabalho. Então, para criar ou projetar sites e aplicativos móveis e outras coisas, eles não são muito bons em fazer isso. Sei que muitas pessoas começaram a criar sites no Photoshop. Uns dois anos atrás. Eu incluído. Mas fizemos isso porque não havia nenhuma alternativa real lá fora. Ok. Mas hoje, vamos lá. Há tantos aplicativos que você pode escolher. E eu vou mostrar a vocês três só nesta lição. Eu acho que tecnicamente, é claro, você pode projetar qualquer interface que você quiser tanto no Photoshop quanto no Illustrator, mas você vai ter dificuldade em fazer isso. Então é por isso que eu recomendo que você vá embora. Ou você usa o Photoshop Illustrator para o que eles foram originalmente projetados, que é edição de imagens e criação de ilustrações. Porque queremos trabalhar de forma eficiente. Queremos usar ferramentas que foram especificamente projetadas para este tipo de trabalho para design de interface do usuário. E vamos começar com o esboço. Agora esboço é bem incrível. Esta é realmente a ferramenta que eu comecei a usar ou logo depois que eu troquei do Photoshop. Acho que naquela época era a versão 3 do esboço. Agora é o esboço versão cinco alguma coisa. Bem, esboçar a versão 50 alguma coisa porque eles meio que multiplicam o número da versão um tempo atrás. Mas normalmente seria uma versão cinco esboço era como esta versão super leve para Photoshop onde eu poderia projetar um site ou uma interface muito mais fácil, ele ajudou um monte de controles que são projetados especificamente para isso. Obviamente, este aplicativo evoluiu com o tempo em, ficou melhor e melhor. Ele agora tem um monte de recursos que você pode usar para agilizar seu fluxo de trabalho em termos da interface do usuário, Isso é bastante direto. Você tem uma barra de ferramentas superior que você também pode personalizar para manter o seu mais importante. Ferramentas. Aqui você tem uma seção para mudar para as diferentes páginas. Esta é uma camada de painéis para que eu possa criar qualquer forma que eu quiser. Vai aparecer bem aqui. E no lado direito você tem um painel inspetor que lhe dará acesso às várias propriedades dos objetos que você selecionou nesta tela. Quando se trata de prós e contras, Eu acho que o maior deles é que esboça um aplicativo nativo Mac. Por isso, é muito rápido que funciona incrivelmente bem no macOS. E ainda tem suporte para macOS, Big Sur, que é o mais recente sistema operacional da Apple no momento da gravação neste computador, estou usando Catalina, que é a versão anterior. Então, parece a interface padrão do esboço. Mas em Big Sur, ele realmente tem uma interface ligeiramente atualizada e, na minha opinião, parece brilhante. Eu também amo o fato de que ele tem um modo escuro. E eu posso facilmente alternar entre o modo escuro e o modo de luz a partir da aparência aqui. E isso é o que parece no modo lite. E este é realmente o único aplicativo que suporta um modo escuro de todos os aplicativos que eu vou mostrar a vocês hoje. Sketch também tem uma enorme comunidade por trás disso. Você tem um monte de sites com vários recursos feitos para esboço. Muitos plugins desenvolvidos por membros da comunidade. E basicamente tem tudo o que você precisa. Em um aplicativo de design. Com o esboço, você pode criar qualquer coisa, desde ícones a aplicativos projetados para design de sites. E é realmente um kit de ferramentas muito completo. Agora, quando se trata dos contras, acho que o maior é o fato de que não é de graça. Sketch tem atualmente um preço de US $99. Então, se você quiser usá-lo, você tem que pagar isso adiantado. E então, se você quiser continuar recebendo a versão atualizada do aplicativo, você teria que gastar mais $79 por ano. Então, basicamente, você paga 99 dólares no primeiro ano. Você tem as atualizações incluídas no aplicativo. Mas depois que esse ano passou, se você quiser as versões atualizadas, você teria que continuar renovando basicamente sua assinatura por US $79 por ano. Então esse é o golpe, número um. coluna número dois é que há o fato de que este é apenas Mac. Obviamente não há problema para esta classe, porque se trata de configurar o macOS para web design. Mas se mais adiante, talvez você esteja pensando em mudar para o Windows ou acessar seus arquivos de design de outro sistema operacional. Usar o Sketch não é para você, pois isso só é executado no macOS. E se você estiver interessado, você pode obter o aplicativo em sketch.com. Agora, a próxima ferramenta na lista é o Adobe XD. Este é mais um aplicativo poderoso e um que é realmente incrivelmente popular em termos de interface. É muito parecido com o esboço. Você tem uma barra de ferramentas aqui no lado esquerdo. Você também pode ver o painel de camadas aqui e o painel inspetor bem aqui no lado direito. E quando se trata de Adobe XD, há muitos profissionais. Em primeiro lugar, é absolutamente grátis. Há também uma versão paga, mas se você está apenas começando ou você não precisa como todas as ferramentas de colaboração. Esta é uma ferramenta gratuita. Outra vantagem é que ele funciona tanto no Mac OS quanto no Windows. Então, se você tem talvez dois computadores, um no escritório, outro em sua casa, você pode começar a trabalhar em um projeto no escritório e você pode terminá-lo em casa em outro sistema operacional, sem problema algum. você também pode optar por salvar seus documentos na Nuvem para que eles estejam acessíveis de qualquer lugar. O Adobe X D também tem uma enorme comunidade por trás disso, com muitos ativos disponíveis para download, como kits de interface do usuário e outras coisas. Muitos plugins estão disponíveis. E, assim como o esboço, ele tem tudo o que você precisaria de um AP de design, além de alguns recursos exclusivos, como a grade de repetição. Então, por exemplo, se eu tiver um retângulo aqui, eu posso criar uma grade clicando em um botão simples e arrastando assim, e ele vai em várias direções e eu posso facilmente ajustar o espaçamento entre os itens da grade. Então este é um recurso que eu não vi em nenhum outro lugar. Ele também tem um painel de ativos muito legal que permite salvar cores, estilos de caracteres e componentes para reutilizar seus projetos. Ou, por exemplo, eu posso selecionar este elemento x D sabe que existem duas cores aplicadas a ele e ler para um preenchimento, concordar para uma borda. E cria automaticamente essas duas cores para mim. Novamente, se eu tiver um elemento de texto, eu posso salvar esses estilos de caracteres muito facilmente. Por isso, permitam-me que vos dê um exemplo rapidamente. Eu posso clicar neste botão e ele vai salvar como helvetica novo irregular 20 pixels. Obtém a informação daqui. E mais abaixo da linha, posso clicar com o botão direito do mouse nisso, posso editar aquilo. E eu posso mudar essas propriedades e quaisquer textos em um que tem este estilo de personagem para aplicar a ele também será atualizado, o que é bastante incrível. E, claro, como diz o nome, é um produto da Adobe. Então sabemos que é um produto de qualidade que é realmente atualizado com muita frequência. O que eu realmente gosto no XD é o fato de que ele é muito rápido e tem uma interface de usuário muito limpa. Também fato divertido, você pode importar esboços e arquivos do Photoshop no Adobe XD. Então, se você talvez esteja mudando de um desses aplicativos para suas necessidades de web design. Em seguida, você pode importar todos os seus arquivos antigos para o XD. Nenhum problema. Agora, quando se trata dos contras de usar o Adobe XD, para ser honesto, eu não consigo pensar em nenhum. Eu acho que este é um aplicativo muito, muito bom para qualquer um que está tentando entrar. Web design. Pode ser o fato de que ele não tem um nó escuro, embora isso seja bastante subjetivo, nem todo mundo gosta de um modo escuro. Ou talvez o fato de que sua interface não é tão personalizável quanto a interface do usuário do esboço, por exemplo. Talvez possamos considerar isso como um golpe. Eu não sei. Na minha opinião. Eu não vejo nenhum contras real ou qualquer carro que valha a pena mencionar para o Adobe XD. Agora, se você quiser obter o Adobe XD, você pode obtê-lo no aplicativo Creative Cloud. Se você tiver isso. Ou, se não fizer isso, você pode simplesmente ir para Adobe.com barra de produtos XD. E aqui você pode apenas clicar no botão Iniciar gratuitamente e você pode baixá-lo a partir daí. Agora, para Sigma, bem, este é o que eu uso diariamente. E eu realmente, realmente amo este aplicativo em termos de interface de usuário. Nada de especial, na verdade. É muito semelhante a todos os outros aplicativos de design lá fora. Temos uma barra de ferramentas aqui na parte superior, camadas e ativos à esquerda, inspetor à direita, e a tela e o meio. Agora, o que eu realmente amo em descobrir é o fato de que ele é de graça. Funciona em Windows, Mac OS e Linux. E também funciona no navegador. Então aqui estou eu no Safari. E eu tenho um arquivo FISMA aberto. Mas eu também tenho o aplicativo de desktop instalado e qualquer alteração que você fizer em seus arquivos é salva automaticamente na nuvem. Assim, por exemplo, eu posso desenhar um retângulo no meu aplicativo de desktop. E quando eu mudar para o aplicativo web ou aquele baseado no navegador, você verá que essa alteração aparece aqui instantaneamente. E eu amo o fato de que todos os meus arquivos estão on-line e eles são acessíveis de qualquer lugar que eu quiser. Agora, assim como os outros dois, sigma tem tudo o que você precisa em uma API de design pode criar qualquer interface com ele. Mas você também pode projetar ícones, vetores, ilustrações, mesmo que seja muito, muito poderoso. Agora, além das coisas usuais que você encontraria em tal software, sigma também tem algumas características únicas, por exemplo, layout automático. Assim, por exemplo, posso adicionar layout automático a um objeto específico. E então eu posso. Comece a mover esse objeto em volta, assim. Assim. Posso selecionar meu quadro principal, posso escolher uma orientação diferente. Posso mudar o espaçamento entre os itens. E também posso mudar o preenchimento do recipiente principal. E também algo que eu não vi em nenhum outro aplicativo. E esta é, na verdade, uma das minhas características favoritas em sigma é cores de seleção. Então, se você selecionar um grupo de elementos e esses elementos tiverem cores diferentes aplicadas a eles, você encontrará todos eles em um único grupo no inspetor. E você pode ver o código hexadecimal. Você pode alterá-los muito facilmente sem realmente selecionar esse item. Apenas a partir desta interface. Você também pode alterar a opacidade dessa cor e também pode criar um estilo de cor para ela. E se você não tiver certeza de quais elementos usaram essa cor, você tem um pequeno botão aqui que permite selecionar o elemento com essa cor. Uma característica fantástica. Eu uso isso o tempo todo. E eu gostaria que algum outro software de design implementasse algo assim. Sigma é muito rápido. Tem uma interface muito limpa. E eu mencionei que é grátis. Sim, é grátis. Ele também tem um plano pago, mas isso é para equipes. Então, se você quiser criar mais equipes, você pagaria extra por elas. Mas se não o fizeres, então é totalmente grátis. E qualquer pessoa em qualquer plataforma, em qualquer navegador pode usar sigma, o que é fantástico em termos de contras. O único que eu encontrei até agora é que às vezes ele se desliga ao importar SVGs. Mas fora isso, não tenho nada de mal a dizer sobre fingir a minha mão. Na verdade, esta é a minha recomendação pessoal para um software de design, independentemente do seu nível de habilidade. Então, se você está apenas começando, eu recomendo usar Fatma. Se talvez você seja um veterano, recomendo que mude para Sigma. Estou confiante de que este é um bom produto. Certo, agora, esses três aplicativos são o que poderíamos chamar de mainstream, significando. Todo mundo sabe sobre eles. Eles são os mais completos em termos de recursos. E todos eles têm comunidades realmente grandes por trás deles. Com isso dito, há mais um aplicativo que você pode estar interessado em e que é chamado Studio. Isto é feito por uma empresa japonesa chamada Studio Inc., com sede em Tóquio. Este aplicativo é muito diferente do que você está acostumado porque você pode criar qualquer tipo de design de interface. Mas a experiência é a de um construtor visual. Os elementos geralmente são empilhados, então mudar um afetará os outros. Você pode adicionar margens e preenchimentos a elementos e é quase como trabalhar em uma página ativa. O legal do Studio é que ele pode criar uma versão codificada desse design, que você pode então carregar para o seu próprio servidor. Com ele. Você pode basicamente projetar e codificar todo o seu site sem realmente escrever uma única linha de código você mesmo. Uma desvantagem pode ser o fato de que estúdio só funciona no navegador Chrome por enquanto, e ele não tem todos os sinos e assobios desses outros, como eu chamo de aplicativos de design mainstream. Eu não vou entrar em muitos detalhes sobre este aplicativo. Mas se você estiver interessado em ver uma aula sobre o Studio, deixe-me saber na guia de discussão, eu adoraria dar-lhe uma visão mais aprofundada sobre este aplicativo. Tudo bem, então agora é hora de ficar ocupado. Sua tarefa agora é descobrir qual software de design você deseja usar. Se você já tem um preferido. Isso é ótimo. Podemos seguir em frente. Se não, vá em frente e baixe um desses e instale-o em seu sistema, brinque com ele, veja se você gosta. Não importa qual deles. O que importa é que você gosta e se sente confortável trabalhando com ele. Se você não sabe qual comprar, então vá com minha recomendação e escolha Sigma. Crie uma conta gratuita e você está pronto para ir. Você nem precisa baixar nada que você possa começar no navegador, ou simplesmente baixar todos eles e brincar até encontrar o que você gosta. Agora, vamos passar para a próxima categoria de ferramentas que é o gerenciamento de quatro cores. E na próxima lição eu vou mostrar a vocês três aplicativos muito úteis. Então, vemo-nos lá. 4. Gerenciamento de cores: Ei, bem-vindo de volta à aula. Esta lição é sobre gerenciamento de cores, e eu vou mostrar os aplicativos que são usados para escolher cores de qualquer lugar na tela para verificar o contraste de cores e também para criar paletas de cores. Agora, eu estou realmente animado com isso porque a cor é um dos aspectos fundamentais do design, e ter ferramentas que me capacitam a fazer isso é simplesmente fantástico. Vamos começar olhando para um aplicativo chamado ColorSnapper. Você pode obter o aplicativo em colorsnapper.com. Isto é apenas um Mac. Você pode experimentá-lo gratuitamente e você também pode comprá-lo por cerca de €12. Eu não sei o que é isso em dólares, provavelmente em torno de US $15 ou algo assim. Agora, este é um aplicativo que fica bem em sua barra de menu no macOS, e você pode atribuir uma tecla de atalho para ele, meu é Command Opção C, e com ele, você obtém este grande seletor de cores que você pode fazer menor ou maior usando a roda de rolagem do mouse. É como uma lupa. Você pode ir a qualquer lugar na tela e você pode provar qualquer cor. Vê como muda o valor hexadecimal lá? Uma vez que você encontrar a cor que você deseja obter, basta clicar, e que será automaticamente salvo no histórico do aplicativo aqui, e também na sua área de transferência para que você possa saltar rapidamente para um aplicativo e você pode aplicar essa cor aqui mesmo. É tão fácil, e como eu disse, funciona em qualquer lugar na tela. Agora, você também pode alterar o formato da cor que você está escolhendo, então você se você for para Cores e Formatos, agora ele está definido como CSS Hex, mas você pode obter um Hex Genérico sem o sinal de hash na frente ou talvez você queira um formato RGB com valores vermelho, verde, azul ou RGBA com um canal alfa, HSL e alguns outros formatos. Na verdade, a lista aqui é bem grande. A janela Cores e Formatos também é acessível através de um atalho de teclado, minha é Shift Command C, e você também pode ver um histórico da cor que você escolheu aqui. Você pode rolar isso usando a roda de rolagem do mouse. Se você tiver uma cor que deseja salvá-la como favorita, basta clicar nesse pequeno ícone, e agora você pode clicar nisso e alternar entre o modo histórico e o modo de favoritos. Isso é muito útil. Agora, se você quiser alterar uma cor que você escolheu, você pode ir para Cores e Formatos, você pode selecionar a cor que deseja alterar, por exemplo, esta, e você pode clicar neste pequeno ícone aqui que diz Editar Cor. Isso vai abrir este editor onde você pode mudar a Opacidade, mudar a saturação, ou realmente a luminosidade da cor, ou pode mudar completamente a tonalidade da cor. Você também tem algumas opções adicionais aqui, você pode escolher entre a roda de cores ou um controle deslizante RGB em tons de cinza, HSB. Você também pode escolher entre algumas cores predefinidas no sistema, ou você pode escolher entre esse espectro. Em termos de preferências para o aplicativo, isso é bastante simples, você pode decidir sobre os atalhos de teclado que você deseja para escolher a cor, e também mostrar cores e formatos. Há também um modo de precisão, que eu não mostrei a você. Se você abrir o seletor de cores e pressionar a tecla Control, isso permitirá que você se mova com muito mais precisão. Isto é sem o modo de precisão ativado, isto é com o modo de precisão ativado. Você pode realmente ampliar lá e escolher a cor exata que você deseja. Você também pode modificar sua aparência como o nível de ampliação do loop, a área de captura, você pode escolher usando um tema escuro ou não, e você também pode modificar alguns dos formatos que você pode usar para salvar a cor, como usar maiúsculas ao escolher o Hex ou o CSS Hex, e assim por diante e assim por diante. Se você está procurando por um bom seletor de cores, esta é na verdade minha recomendação. Temos outro que vou falar daqui a pouco, que se chama Sip. Isso também é um ótimo seletor de cores, mas é um pouco complicado para escolher cores. Em vez disso, ColorSnapper é um aplicativo que eu tenho usado por um longo tempo e eu posso recomendá-lo para você de todo o coração. O próximo aplicativo que eu quero mostrar é chamado de Contraste, e isso é usado para verificar o contraste entre duas cores e certificar-se de que elas estão acessíveis, e para determinar que elas estão usando as taxas de contraste de cores WCAG. Agora, como é que isto funciona? Bem, digamos que você queira criar um botão, e você está dando a ele uma, digamos uma cor de preenchimento, algo assim, e então você seleciona o texto e dá a ele uma cor de texto. Vamos dizer algo assim. Agora, se você vai verificar o contraste entre a cor do texto e a cor de fundo, neste caso particular, você vai descobrir que ele não está acessível, então as pessoas com visão prejudicada terão dificuldades lendo este texto. Para fazer isso, Contraste é um aplicativo que, novamente, fica em sua barra de menu, e você simplesmente clica em que pequena ferramenta conta-gotas, selecione uma cor, clique sobre isso e selecione a outra cor. Isso determina a taxa de contraste entre as duas cores, no meu caso é 2,04, e é uma falha. Agora, se eu for aumentar o brilho desta cor, e eu tentar novamente Você verá que agora eu tenho uma taxa de contraste muito maior, 9.26, e isso é um sucesso em termos de acessibilidade. Pessoas com visão prejudicada poderão ler este texto. É realmente tão simples de um aplicativo. Em qualquer ponto, você pode trocar cores clicando neste botão, e você também pode ver uma visualização ao vivo dessas cores diretamente no aplicativo, o que é uma ótima adição. Em termos de preferências, não há muito para escolher aqui. É um aplicativo muito simples, mas você pode definir certas chaves globais para escolher as cores e outras coisas. Mas eu não configurou nenhum deles porque não é uma operação que eu faço com muita frequência; e clicar no ícone da barra de menus e apenas amostrar as cores como esta é realmente muito simples. Então eu costumo fazer isso. Você pode obter o aplicativo em usecontrast.com, e você pode ler mais sobre isso. Eles também explicam o que é WCAG, como você pode ver, é o conteúdo da web e as diretrizes de acessibilidade. Para baixá-lo, basta ir para a Mac App Store onde você verá que tem um preço de US $6 e 99, que eu acho que é um preço muito justo para este aplicativo sendo que é tão útil. O aplicativo final que eu quero mostrar a você quatro gerenciamento de cores é chamado Sip, e é apelidado como um melhor seletor de cores para o seu Mac. Agora isso é de muitas maneiras muito semelhante ao primeiro seletor de cores que mostrei a vocês, ColorSnapper. Mas, ao mesmo tempo, é muito mais complexo. Com Sip, você pode basicamente fazer a mesma coisa, obter o nosso seletor de cores na tela, você pode usar a roda do mouse para fazer isso maior ou menor, e você pode provar qualquer cor. Agora, logo de cara, podemos ver uma diferença. As cores aqui são realmente nomeadas. Veja lá, roxo elétrico, e se formos para o azul, é chamado de lápis azul. Vamos subir aqui, céu profundo, azul. Eu acho que é legal porque dá esses nomes. Você também pode ver o código Hex e uma visualização dessa cor bem ali. Novamente, uma vez que você clica em uma cor específica, ele automaticamente copia sua área de transferência e também em seu histórico de cores aqui. Uma vez que a cor é copiada, você pode, naturalmente, ir para o seu software de design e você pode colá-lo lá. Você também pode clicar em uma cor específica para copiá-la para a área de transferência. Você pode copiar isso e ele pode selecionar isso e você pode mudar a cor assim. Ele também pode clicar neste pequeno botão para editar essa cor e, novamente, você tem acesso a um controle deslizante para a tonalidade, um para a opacidade. Você também tem este seletor bem aqui ao lado. Você também pode inserir os valores RGBA manualmente. Quando terminar, pressione o sinal de Ok, e essa nova cor será automaticamente copiada para a área de transferência. Você também tem acesso a formatos de cores. Agora ele está definido como CSS Hex, mas aqui estão todos os formatos que você pode escolher. Agora, se você prestou atenção antes, eu disse que este aplicativo, Sip, é muito mais do que apenas um seletor de cores. Podemos ver isso imediatamente porque podemos criar paletas de cores. Na verdade, essa é a maneira que eu uso para criar paletas de cores quando estou trabalhando em um Mac. Criar uma paleta é muito simples, basta clicar neste pequeno ícone de menu e selecionar Nova Paleta, e então você pode começar a amostrar várias cores. Talvez eu vá provar uma cor do meu documento do macOS bem aqui, talvez outra daqui. Em seguida, com essas cores, eu posso simplesmente clicar e arrastar para a minha paleta de cores. É assim tão fácil, e eu posso, claro, tornar esta janela um pouco maior para que eu possa ver todas as minhas paletas. Agora, Sip também tem um verificador de contraste embutido. Você pode clicar neste botão, ir para Verificar contraste, e você pode fazer uma amostra de duas cores. Ele vai lhe dar o contraste exato, muito semelhante ao aplicativo de contraste que eu mostrei anteriormente. Se você escolher duas cores que lhe dão uma falha, você também pode clicar em “Corrigir”, e isso vai modificar as cores de tal forma que eles lhe dão um bom contraste. Eu realmente não me encontro usando esse recurso, mas se você quiser, ele está lá. Agora, um dos recursos que eu realmente gosto no Sip é este dock de cores, que lhe dá o histórico de cores e algumas das paletas de cores que você criou. Isso pode ser movido em ambos os lados da tela, dependendo de onde você deseja. Ele funciona praticamente o mesmo que o aplicativo da barra de menus, exceto que é um pouco mais fácil de ver quais cores você pode escolher. Talvez eu esteja procurando uma cor azul. Eu sei imediatamente que, ei, eu posso encontrá-lo aqui ou eu posso encontrá-lo aqui. Estou procurando um rosa claro? Bem, eu posso encontrá-lo aqui e eu posso clicar nessa cor para copiá-lo para a minha área de transferência, e então eu posso colá-lo no meu aplicativo de design muito rápido. Esse é o Sip. Você pode obtê-lo em sipapp.io Não é gratuito, infelizmente, ele custa cerca de 10 Euros por dispositivo. No entanto, também está incluído no Setapp. Setapp é um serviço de assinatura para o seu Mac que lhe dá acesso a um monte de apps. Basicamente você paga uma taxa fixa mensal ou anual, e você tem acesso gratuito a um monte de aplicativos, e um dos quais é Sip. Na verdade, é assim que eu o uso na minha assinatura do Setapp. Lá você tem, três aplicativos fantásticos que você pode usar para trabalhar mais facilmente com cores. Agora é a sua vez de escolher o que você acha que seria mais útil se você quiser, claro, ou se você precisar dele. Todos os aplicativos que estou mostrando nesta classe são aplicativos que eu uso. Isso não significa que você precisa usá-los também. Mas acho que eles podem te ajudar, e você deveria experimentá-los. Agora, outro aspecto importante do design é a tipografia. Como designers, passamos por dezenas de fontes até encontrarmos a certa para o nosso projeto. Mas como podemos gerenciar todas essas fontes que estão instaladas em nosso sistema? Como podemos visualizar e escolher facilmente a fase de tipo certa para o nosso design? Bem, eu quero mostrar a vocês dois aplicativos que vão nos ajudar a fazer isso muito facilmente. Isso está chegando na próxima lição. Te vejo lá. 5. Gestão de fontes: Ei, bem-vindo de volta à aula. Esta lição é sobre gerenciamento de fontes. Vou mostrar-lhe o aplicativo que eu uso para gerenciar todas as fontes instaladas no meu sistema. Agora, o macOS já tem um aplicativo para isso, chamado Font Book. Você pode usá-lo para ver quais fontes você instalou, ver como eles se parecem e também criar coleções. Mas podemos fazer melhor do que isso. Encontrei uma alternativa melhor chamada tipo de letra. Embora seja muito semelhante ao aplicativo padrão que eu mostrei anteriormente, ele tem alguns recursos extras que o tornam realmente útil. Vamos verificar isso. É assim que o aplicativo se parece. À esquerda temos esta barra lateral que nos permite filtrar as fontes que são exibidas no lado direito. Para cada fonte, podemos ver uma pré-visualização. By the way, este texto é totalmente personalizável. Podemos ver o nome da fonte aqui, e também este ponto azul nos permite saber que essa fonte está ativada. Se por algum motivo eu quiser desativar uma fonte, eu posso simplesmente clicar aqui e desativar essa fonte. Atualmente, esta é uma fonte do sistema que não pode ser desativada. Mas se eu estiver instalando algumas fontes eu mesmo, então eu posso usar esse recurso para ativar ou desativar. qualquer momento, eu posso abrir uma fonte em uma janela maior clicando nela, e ela vai me mostrar uma visualização maior de todos os personagens. Eu também posso ver algumas informações sobre essa fonte em particular. Além disso, posso optar por aumentar o tamanho dessas caixas de visualização ou diminuí-las assim. A partir daqui, posso escolher ocultar essa barra lateral, e daqui, posso ativar e desativar a coleta rápida. Com a coleta rápida, posso simplesmente clicar com o botão direito do mouse em uma fonte e selecionar Coleta rápida. Digamos que você está trabalhando em um projeto, você está navegando na sua lista de fontes, você diz, este funciona muito bem, então eu vou coletá-lo rapidamente. Talvez este funcione muito bem e eu vou coletar isso também, e talvez este também. Depois de fazer tudo isso, você pode simplesmente clicar sobre isso e ele vai lhe dar essa coleção de fontes. Agora você está basicamente restringindo apenas as fontes que você selecionou. Isso ajudará você a tomar sua decisão muito mais rápido. Agora, no lado esquerdo, temos alguns critérios para filtrar essas fontes. Se eu estou procurando Monospaced, eu posso clicar que e ele vai me mostrar todas as fontes que correspondem a esse critério, ou talvez eu quero alguns Script ou Sans, Ornamental e coisas assim. qualquer momento, você pode clicar neste pequeno botão e você pode criar uma nova tag, ou você pode importar fontes. Digamos que eu quero criar uma nova tag que é chamado WordPress tema. Digamos que eu estou trabalhando em um tema WordPress e eu quero selecionar certas fontes que funcionariam bem para o meu tema WordPress. Vamos ver, talvez eu vou escolher este para que eu possa clicar com o botão direito do mouse tags e eu posso selecionar WordPress tema. O que mais? Pode ser este. Agora, se eu escolher WordPress tema, ele me mostra quais fontes eu marquei com essa tag. Isso é muito útil para organizar sua biblioteca de fontes porque podemos usar essas tags para marcar as fontes para diferentes usos. Digamos que você marque certas fontes com sans-serif, ou outras com, digamos, muito legíveis ou algo assim, os critérios ou as tags ou as categorias que você usa depende inteiramente de você, mas você pode usar o para categorizar suas fontes, e isso vai tornar muito mais fácil para você encontrá-las mais tarde. Agora, com o tipo de letra, com este aplicativo, você também tem acesso ao Google Fonts. Basicamente, se você abrir as Preferências e ir para.Library, você pode importar fontes do Google aqui mesmo. Isso fará o download de toda a biblioteca de fontes do Google, então você não precisa ir manualmente para o site do Google Fonts e baixar determinadas fontes de lá. Você pode fazê-lo diretamente do aplicativo. Você também pode importar o Adobe Fonts. Se você tiver fontes da Adobe que deseja importar para o aplicativo, essa é a maneira de fazer isso. Outra grande característica do tipo de letra é a comparação de glifos. Digamos que você tenha essas duas fontes. Você pode clicar com o botão direito do mouse em qualquer um e selecionar comparar. Isso se sobrepõe na visualização de outra fonte, e você pode ver as diferenças entre cada glifo. Você também pode fazer isso muito maior, para que você possa ver como Avenir Heavy se compara com Apple SD Gothic Neo Light neste caso. Este é um recurso muito útil. Agora, você pode obter o aplicativo, tipo de letra, em typefaceapp.com. Isso não é gratuito, mas você pode obter um teste gratuito. Custa 2,199 euros na Mac App Store, ou se você estiver usando Setapp, esse é o serviço de assinatura que eu lhe falei, que está incluído, então você realmente não tem pagar nada, exceto a assinatura para Setapp que se bem me lembro, é de cerca de US $10 ou €10 por mês. Realmente não é grande coisa. Além disso, o aplicativo tem um modo escuro, bem como, para que você possa desativar o Modo Escuro ou o Modo Noturno como é chamado aqui usando este atalho de teclado ou indo para Ver, Modo Noturno. Muito legal. Se por algum motivo você não gosta deste aplicativo, eu tenho outra sugestão para você. É um aplicativo chamado RightFont, e é muito mais complexo do que o tipo de letra, mas também é muito mais caro. Deixe-me mostrar-lhe rapidamente do que se trata e então você pode decidir por si mesmo se algum destes será útil para você. Você pode obter o aplicativo em rightfontapp.com. É também um Mac App. Preços sábios, custa US $49 para uma única licença, mas você também recebe uma avaliação gratuita. O aplicativo de muitas maneiras é semelhante ao tipo de letra. Você tem a lista de todas as fontes instaladas em seu sistema aqui. Você pode alterar o tamanho anterior, você pode alterar o texto de visualização aqui. Você também pode ver isso como uma lista, um cartão ou uma grade. Você também pode agrupar fontes por família, que é algo que eu não vi no outro App, e você também pode escolher entre quatro temas disponíveis. Como eu estava dizendo, isso é um pouco mais complexo. Aqui você tem acesso às fontes do sistema em uma categoria separada, e você também tem acesso a algumas fontes de ícones. Há realmente um monte deles que incluem algumas fontes ícones muito populares como Font Awesome e Ironicons, Fundação, Enypo. Você pode usar isso para realmente visualizar esses ícones e usá-los em seus projetos. Você também tem acesso ao Google Fonts. Você pode sincronizar com o Google Fonts, para que você não precise fazer o download manualmente. Você também tem acesso ao Adobe Fonts que estão atualmente instalados em seu sistema. Você também pode sincronizar com SkyFonts, que é outro serviço para gerenciar fontes. Este é um serviço online. Em seguida, você pode optar por criar várias listas como todas as fontes ativadas ou desativadas e assim por diante e assim por diante. Mas como eu estava dizendo, esta é uma alternativa. Minha recomendação seria usar o tipo de letra porque esse é o que eu uso. Eu acho que é simples o suficiente, mas ao mesmo tempo, ele me permite gerenciar minhas fontes muito melhor. Se algum desses aplicativos despertou seu interesse, então vá em frente e baixe o que você acha que seria mais útil ou o que você mais gosta. Eles não são os únicos gerentes de fontes lá fora. Se você fizer uma pesquisa no Google, tenho certeza que encontrará muito mais. Estes são os que eu mostrei porque estes são os que eu trabalhei com, especialmente o tipo de letra. Eu sei, sei que é bom, e posso recomendá-lo a você. Até agora, cobrimos ferramentas para software de design, gerenciamento de cores e gerenciamento de fontes. Mas o que mais os designers usam regularmente? Ícones. Eu me lembro quando eu precisava de um ícone, eu ficava online toda vez e eu baixava de lá, ou eu peneirava um monte de pastas no meu computador tentando encontrar o caminho certo. Felizmente, hoje em dia as coisas são muito mais simples, graças a certos aplicativos de gerenciamento de ícones que eu quero mostrar para você. Vou fazer isso na próxima lição. Te vejo lá. 6. Gestão de ícones: Bem-vindos de volta à aula. Esta lição é sobre Gerenciamento de Ícones e deixe-me dizer-lhe isso; ter um aplicativo que pode armazenar todos os seus ícones e categorizá-los é fantástico, fantástico, incrível. Antes de começar a usar um aplicativo, eu ficava online, procurava um ícone, baixava-o e usava-o, ou procurava nas minhas pastas [inaudíveis] no meu computador até encontrar a correta. Mas não mais, graças a um aplicativo chamado Iconset. Agora posso encontrar qualquer ícone em segundos e arrastá-lo para o meu aplicativo de design. Deixa-me mostrar-te como. Este é o aplicativo que eu quero mostrar a vocês. No lado esquerdo você pode ver os conjuntos de ícones que estão disponíveis. Aqui, você pode ver a lista de ícones desse conjunto e aqui você basicamente tem um painel inspetor e isso vai lhe dizer o nome do ícone, algumas tags e alguns detalhes. Em qualquer ponto, você pode, por exemplo, copiar esse ícone como um ícone ou como um SVG na verdade. Você pode copiar o código SVG ou você tem algumas opções adicionais aqui. Se você apenas copiá-lo, você pode simplesmente colá-lo, ou você pode simplesmente clicar e arrastar e ele vai criar uma cópia desse ícone em seu software de design. Este é um vetor, então você pode torná-lo tão grande ou tão pequeno e vai preservar sua qualidade. Agora você pode adicionar facilmente um conjunto de ícones. Você pode clicando neste botão e selecionando “New Set” e isso vai permitir que você dê um nome e procure os ícones. Isso só funciona em arquivos SVG, então você precisa baixar esses ícones primeiro para o seu computador e depois importá-los para o Iconset, e eles estarão disponíveis aqui para que você nem sempre tenha que ir online e encontrar o ícone da direita. Você também pode procurar ícones, então, se você estiver procurando por uma seta, você pode digitá-la, ela vai mostrar todos os ícones que correspondem aos critérios de pesquisa. Essa pesquisa também se baseia no que você selecionou aqui na barra lateral. Agora, a qualquer momento, você pode exportar um conjunto de ícones usando esta opção aqui. Isso vai salvá-lo em seu computador como um arquivo de conjunto de pontos, que você pode compartilhar com outras pessoas que têm o Iconset ativado e eles podem importar esse conjunto para seu próprio aplicativo. Mas o recurso que eu mais gosto é o fato de que eu posso sincronizar toda a minha biblioteca de ícones. Aqui, isso é chamado de biblioteca conjunto de ícones. Atualmente é local porque este computador não é meu driver diário, então eu não o uso para trabalhar. Mas se eu quisesse, eu salvaria essa biblioteca em um local compartilhado, em um local compartilhado como o Dropbox, por exemplo. Então, se eu instalar o aplicativo em outro computador, eu posso simplesmente abrir esta biblioteca e todos os meus ícones serão sincronizados entre dispositivos. Muito legal. Em termos de preferências, você também tem um modo escuro que você pode ativar. Você pode optar por ocultar ou mostrar o nome do ícone e também uma grade de ícones. Agora, a razão pela qual eu gosto tanto deste aplicativo é que ele é gratuito e funciona tanto no macOS quanto no Windows. Você pode obtê-lo em iconset.io e aqui é onde você pode baixar as versões Mac e Windows, e como eu estava dizendo, é totalmente gratuito. No meu caso, isso é muito útil porque no trabalho eu tenho um computador Mac, em casa eu tenho um PC, então se eu estou trabalhando em casa e eu preciso acessar minha biblioteca de ícones, eu posso baixar a versão do Windows e porque a biblioteca está sincronizada, todos os meus ícones estão disponíveis e eu posso usar qualquer um deles a qualquer momento que eu quiser. Também tenho algumas alternativas que quero mostrar para o caso de você não gostar do Iconset. Mas eu tenho que dizer que eu não sei como eles são bons porque eu não trabalhei com eles, exceto um deles que eu testei brevemente. A partir dos comentários que leio online, eles parecem estar fazendo um ótimo trabalho, mas você vai ter que baixá-los e testá-los você mesmo para determinar se isso é verdade ou não. Vamos dar uma olhada nas quatro alternativas. O primeiro é chamado IconJar, e você pode encontrá-lo em geticonjar.com. Isto é apenas para Mac e não é gratuito. Este é realmente um 20 ou €30 por ano ou €60 por vida. Como você pode ver nesta visualização aqui, é muito semelhante ao Iconset. Talvez tenha mais alguns sinos e assobios aqui e ali, mas eu não acho que para mim pessoalmente pelo menos não valia a pena ultrapassar o Iconset. O outro é chamado de aplicativo Nucleo. Em nucleoapp.com. Este é um organizador de ícones e uma biblioteca de ícones com mais de 30.000 ícones. Você basicamente baixar o aplicativo e você também tem acesso à biblioteca Nucleo, mas você também pode adicionar seus próprios ícones. Isso funciona em Mac e Windows, e também tem um aplicativo gratuito. O terceiro é chamado de Projeto Substantivo. Você pode procurar ícones aqui, e há também um app para Mac que você pode baixar. Isso também tem alguns suplementos da Adobe para Illustrator, Photoshop e InDesign. Finalmente, há Iconscout que faz algo semelhante. Agora é a sua vez de organizar seus ícones. Por quê? Porque vai tornar a sua vida mais fácil e vai poupar muito tempo e isso é sempre uma coisa boa. Eu recomendo que você use Iconset porque esse é o que eu uso e eu sei que é bom, além disso é gratuito, ele funciona em ambas as plataformas, mas sinta-se livre para usar o que você acha que funciona melhor para você. Com sorte, as quatro alternativas que mostrei vão te colocar no caminho certo. Agora pergunta: o que você deve sempre fazer como designer? Medida, você raramente vai encontrar um designer que vai, vamos fazer que 23 pixels. Não, o Designerson sempre mede as coisas. Pessoalmente, se eu fizer dois botões e um deles for como um pixel mais alto, isso me deixa louco, eu não aguento. A medição é muito importante porque precisamos ser consistentes em termos de espaçamento e dimensionamento. Na próxima lição, eu quero mostrar um aplicativo que eu uso quase diariamente, ou pelo menos quando eu estou projetando para medir qualquer coisa que eu quero na tela. Isso está chegando a seguir. 7. Medição: Ei, bem-vindo de volta à aula. Esta lição é sobre medir. Vou mostrar-lhe um aplicativo que eu uso muito para medir qualquer distância ou dimensão em qualquer lugar na tela. Você também pode usar este aplicativo para criar guias verticais ou horizontais e também tirar capturas de tela de suas medidas. Agora, a maioria dos softwares de design que você usa tem algum sistema de medição embutido, mas geralmente, ele só funciona dentro desse software de design. Se você quiser medir algo de, digamos, uma imagem ou um site, ou você teria que importar essa imagem ou tirar uma captura de desse site importado para o seu software de design e fazer suas medições. Bem, o que eu estou prestes a mostrar agora funciona em um nível de sistema, que significa que você pode medir em qualquer lugar na tela, independentemente de qual aplicativo está ativo no momento. Eu realmente gosto dessa ferramenta, então deixe-me mostrar o que ela pode fazer. O aplicativo em questão é chamado PixelSnap e você pode obtê-lo em getpixelsnap.com. Como é que funciona? Deixe-me mostrar-lhe um exemplo rápido. Este vive aqui na barra de menus, e você pode definir um atalho de teclado para ativá-lo. O meu é Shift Command F. Quando pressiono “Shift Command F”, recebo estas linhas vermelhas frias na minha tela. Digamos que eu queira encontrar as dimensões deste botão Comprar. Você notará que assim que eu me mover dentro do botão, as bordas dessas linhas se encaixarão nas bordas do botão e logo ao lado dele, ele me dá as dimensões, 122 por 52. Posso entrar aqui e vai dizer que é 211 por 48. Eu também posso medir a distância entre esses botões. Então o que estou procurando, é claro, o menor. Como você pode ver, é muito, muito útil. Agora, enquanto mede esta distância, você pode segurar H para manter essa distância na tela. Como você pode ver, mesmo que eu largue H, essa distância ainda está lá. Eu posso até mover o cursor para dentro e eu posso pressionar “H” aqui, ou eu posso pressionar “V”, ele vai me dar a minha distância vertical onde neste caso dimensão. Quão legal é isso? Eu também posso obter uma medição precisa de um objeto arrastando um retângulo em torno deles e que irá encaixar automaticamente nas bordas. Aqui ele me diz, “Ei, isso é 95 por 35.” Você viu que quando eu pairava sobre essa medida, ele me dá um ícone de câmera e se eu pressioná-lo, isso me dá uma captura de tela que eu posso copiar ou salvar como um arquivo. Posso até editar essa captura de tela, o que é muito legal. Agora, enquanto essa ferramenta estiver ativa, posso pressionar “Shift V” ou “Shift H” para adicionar uma guia ajustável. Você pode ver que o azul é agora um guia, e eu posso usar o cursor do mouse para encaixar esse guia em qualquer elemento na tela. Digamos que eu vou encaixar um lá e Shift V novamente para encaixar outro aqui, e isso me dá uma medida aqui, 122 entre esses dois guias. Então, daqui para a borda da tela, eu tenho 534 e 783 para esta porção bem aqui. Eu também posso manter pressionada a tecla Shift H para adicionar uma guia horizontal, que eu posso encaixar exatamente da mesma maneira. Agora, a qualquer momento, eu posso clicar com o botão direito do mouse para acessar algumas opções contextuais, então eu posso adicionar as guias aqui, eu posso manter as distâncias como eu mostrei anteriormente. Eu também posso abrir a ferramenta de captura de tela, ou eu posso entrar no modo de fundo. O modo de fundo, basicamente, mantém essas medidas na tela enquanto eu posso continuar trabalhando. Se eu quiser sair disso, eu posso simplesmente apertar “Command Shift F” novamente e depois “Escape” e eu saí disso. Outra opção legal; quando a ferramenta está ativa, eu posso manter pressionada Shift, e isso vai me dar um modo mira. Sem as dimensões, eu posso simplesmente usar isso para verificar visualmente o alinhamento de certas opções assim. Então, se eu tomar algumas medidas, por exemplo, eu vou fazer H aqui e depois um V, e talvez eu vou salvar esta distância bem aqui. Eu posso pressionar “Command S” e isso vai tirar uma captura de tela, e ele vai salvá-lo no arquivo. Essa captura de tela contém, e você pode ver uma visualização bem aqui, contém minhas medidas e minhas distâncias, muito incrível. Eu recomendo esta ferramenta. É super útil independentemente de onde você está trabalhando. Se você tem Figma aberto, talvez você esteja mergulhando em um design e você quer encontrar a distância entre dois objetos sem selecionar os itens individualmente e medir dentro desse aplicativo, você pode simplesmente abrir a ferramenta de medição e você pode encontrar a distância entre os objetos muito facilmente, ou você pode simplesmente clicar e arrastar e encontrar as dimensões. Isso às vezes pode ser mal-humorado porque aqui, por exemplo, eu também cortei uma parte dessa linha, mas vamos experimentá-lo neste logotipo. Você vê que faz um trabalho muito melhor. Ao fazer isso, você tem que garantir que o fundo em torno do elemento é aproximadamente da mesma cor e não tem nenhum outro elemento em torno dele. A propósito, se você está curioso sobre este design, esta é uma página de destino que eu projetei para minha primeira aula de Skillshare. Se você abrir meu perfil aqui no Skillshare, você vai encontrar a classe que vai orientá-lo na criação desta página inteira em Figma. Agora, como eu estava dizendo, você pode obter o aplicativo em getpixelsnap.com. Isto é para Mac, e infelizmente, não é gratuito. São 39 dólares por um computador. Se você já estiver usando o aplicativo CleanHot X, que é feito pela mesma empresa, você recebe um desconto. Mas também este PixelSnap, este aplicativo está disponível no Setapp. Eu mencionei Setapp muito neste curso, e eu vou explicar novamente o que é. Setapp é um aplicativo baseado em assinatura que lhe dá acesso a um monte de software, muitos aplicativos por um preço fixo mensal ou anual, e PixelSnap está incluído em sua assinatura. Isso é PixelSnap, um aplicativo fantástico para medir qualquer coisa que você quer em sua tela. É um pouco no lado caro, mas se você estiver usando Setapp, então você pode muito bem apenas instalá-lo porque ele vai ajudá-lo muito ao projetar ou mesmo ao escrever código porque ele vai permitir que você tome essas medidas críticas muito rápido e traduzi-los em código CSS. Agora, para nossa ferramenta final, vamos dar uma olhada em uma que cria capturas de tela ou que tira screenshots. Eu acho que para o web design, isso também é muito importante porque ele pode ajudá-lo a se comunicar melhor com potenciais clientes ou seus companheiros de equipe tirando ótimas capturas de tela. Ou pode ajudá-lo, permitindo que você faça capturas de tela rápidas das coisas que você gosta. Vamos conferir esse aplicativo com mais detalhes na próxima lição. Te vejo lá. 8. Capturas de tela: Ei! Bem-vindos à turma. Esta lição é sobre captura de tela. Vou mostrar-lhe o aplicativo que uso o tempo todo para tirar capturas de tela, anotar e compartilhá-las. Isso realmente substitui a ferramenta de captura de tela padrão no macOS, e mesmo que ele possa fazer todas as mesmas coisas, ele tem alguns recursos extras que você pode achar muito atraentes. Deixe-me mostrar-lhe o aplicativo chamado CleanHot X. Você pode encontrar o aplicativo em Cleanhot.com. É apenas para Mac. Não é de graça. Custa 29 dólares. É feito pela mesma empresa que criou o PixelSnap, o aplicativo que eu mostrei na lição anterior. Claro, você obtém um desconto se você tiver esse aplicativo também, ou se você tiver o Setapp, você pode baixá-lo gratuitamente porque ele está incluído em sua assinatura. Mas com o CleanHot, ele pode basicamente definir um atalho de teclado para ativar. No meu caso, é Comando-Shift-4. Eu disse que isso substitui a ferramenta de captura de tela padrão do macOS. Isso lhe dá uma mira com as coordenadas x e y do seu cursor na tela, e você pode simplesmente clicar e arrastar qualquer área na tela e fazer uma captura de tela. Isso se abre aqui, e você pode copiá-lo para sua área de transferência. Você pode salvá-lo como um arquivo ou pode abrir a ferramenta Anotar. Aqui você pode adicionar, por exemplo, setas, círculos. Você pode desenhar livremente escolhendo a ferramenta Desenhar. Você pode fazer algo assim. Você pode escolher várias cores. Depois de terminar, você pode salvá-lo como um arquivo ou clicar em “Concluído”, e isso agora é atualizado. Você pode copiá-lo ou salvar, como antes. Você também pode clicar neste pequeno botão que diz fixá-lo na tela, e você pode movê-lo para qualquer lugar. Ele vai ficar em cima de todos os outros aplicativos, e você pode até mesmo mudar seu tamanho. Se você está trabalhando em algo que você precisa para capturar parte da tela e tê-lo lá para referência, para uso posterior, você pode fazer isso muito, muito facilmente. Agora, com o CleanHot, você tem algumas opções. Você pode abrir o aplicativo clicando no ícone da barra de menus, e ele também pode capturar tela cheia. Você pode capturar uma única janela. Você pode clicar nisso, e isso fará uma captura de tela de toda a sua janela. Você também pode capturar ou fazer a captura de rolagem. Se você quiser capturar o conteúdo de uma área durante a rolagem, você pode fazer isso muito facilmente. Digamos que eu queira capturar esta área aqui. Posso clicar em “Iniciar Captura” e, em seguida, posso rolar. Fui um pouco rápido demais lá. Vamos tentar de novo. Eu posso rolar. Como você pode ver no lado direito, ele captura o conteúdo da página. Uma vez que eu terminar, basta clicar em “Concluído”, e agora que salvou a página inteira, que é muito legal. Com o CleanShots, você também pode fazer um temporizador, e ele vai acionar a captura de tela após um determinado período de tempo. Ele também pode gravar a tela, e você também tem uma opção muito útil de ocultar os ícones da área de trabalho. Talvez você queira capturar toda a área de trabalho, mas você não quer que as pessoas vejam seus ícones, você pode clicar nessa opção e eles desaparecerão. Agora, o recurso que eu acho que mais gosto é o CleanHot Cloud. Deixem-me dar-vos um exemplo. Digamos que eu queira capturar esta parte aqui. Eu posso clicar neste botão que diz upload para CleanHot Cloud, e isso é upload. Copia o link para a minha área de transferência. Agora eu posso abrir esse link, e aqui está minha captura de tela. Esta é uma maneira muito fácil de compartilhar uma captura de tela. Talvez você esteja enviando um e-mail para alguém e, em vez de anexar essa captura de tela ao e-mail, você pode simplesmente enviar um link para ele. É assim que você pode tirar melhores capturas de tela no macOS. Como eu estava dizendo, este é um aplicativo de substituição para a ferramenta de captura de tela padrão no macOS, e enquanto ele é um pouco no lado caro, ele também está incluído no Setapps. Então, se você tem isso, então você pode muito bem ainda, porque é muito, muito útil. Esta era a última ferramenta que eu queria te mostrar. Então, para encerrar esta aula, por favor, junte-se a mim na próxima lição para o projeto e conclusão da turma. Te vejo lá. 9. O projeto do curso e conclusão: Parabéns por terminar esta aula. Espero que tenha correspondido às suas expectativas e que tenha aprendido algo útil. Se não foi ou você não fez, por favor me avise nos comentários. Deixe-me saber como eu posso melhorar porque sua opinião é muito importante para mim. Além disso, se você quiser que eu aborde um tópico específico em uma das aulas de Skillshare, por favor, não hesite em me informar. Escreva um comentário na área de discussão me dizendo o que você gostaria de ver de mim em futuras aulas. Eu tenho muitas idéias para novas aulas, mas o que você quer aprender também é muito importante, então novamente, por favor me avise. Agora, por favor, dedique um momento e anote as principais conclusões desta aula. Agora, por causa do tópico desta classe, o projeto de classe é um pouco diferente. Para isso, eu gostaria que você descrevesse seu kit de ferramentas web design. Ou seja, quais são os aplicativos que você usa para o web design e como você os usa. Faça isso com suas próprias palavras, não há modelo para preencher. Você pode apenas escrever uma lista ou nos dar uma pequena história para que possamos entender o contexto um pouco melhor, e eu acho que isso servirá de inspiração e ajudará todas as outras pessoas que estão assistindo a essa aula. Porque, quem sabe, podemos encontrar um aplicativo que não ouvimos falar, e isso é super útil. Deixe-nos saber como esses aplicativos o ajudam. Além disso, se você tiver quaisquer outras perguntas ou comentários, por favor, publique-os na área de discussão, guia, como quiser chamá-lo. Eu adoraria ouvir de você. Dito isso, muito obrigado por assistir esta aula. Espero vê-lo novamente no próximo. Cuide-se.