Como trabalhar com imagens em projetos de design de UI

1. Introdução do curso: Ei designer e meu nome é Alex e bem-vindo a esta aula Skillshare sobre como trabalhar com imagens em seus projetos de design de interface do usuário. Eu sou fundador da web donut, onde eu criei ou 500 produtos de design. Também sou professor e até agora criei mais de 20 cursos e meio, mais de 40000 alunos matriculados nesses cursos. Nesta classe, vamos falar sobre quais são algumas das melhores maneiras de você, como designer de interface do usuário, usar imagens em seu projeto. Vamos falar sobre por que as imagens são importantes e o que você deve prestar atenção quando você está escolhendo quais imagens você deve usar em seus projetos. Também vamos discutir quais são algumas maneiras de encontrar imagens como designer de interface do usuário e como você pode integrá-las em seus projetos. Vamos discutir como algumas imagens podem ser tiradas por fotógrafo externo e como o cliente pode entregar essas imagens para você. E então vamos comparar descobertas adicionais, como imagens gratuitas e premium. Quais são as diferenças entre eles e quais são algumas diferenças no licenciamento daqueles gratuitos em imagens premium. Também vamos discutir a importância dos conjuntos de imagens, como escolher conjuntos de imagens e como trabalhar com eles. E então vamos discutir como é fácil para você encontrar imagens em diferentes nichos. Por que diferentes nichos são importantes para encontrar suas imagens para seus projetos de design de interface do usuário e como você pode prosseguir para encontrar essas imagens e integrá-las em seus projetos de design. Então vamos falar sobre otimização de imagem tanto no Mac quanto no Windows, por que isso é importante e como você pode prosseguir com essas otimizações de imagem. Como eles vão ajudá-lo em seu trabalho e como eles vão ajudá-lo a trabalhar com desenvolvedores e como eles vão melhorar sua velocidade de trabalho com desenvolvedores e especialmente trabalhar nessas ferramentas de design como o Adobe XD . Finalmente, vamos discutir a estrutura de nomenclatura, por que é importante e como você pode optar por trabalhar com estruturas de nomenclatura que funcionam para você e seus desenvolvedores. Seu projeto de classe para esta classe é escolher imagens de diferentes nichos. Vou deixar que você escolha as imagens que você quer. Essas imagens podem ser gratuitas ou premium. Tudo depende de você. E apenas para colocar essas imagens combinadas em um documento, e você pode escolher uma equipe e explicar isso mais detalhadamente no vídeo do projeto da classe Skillshare. E eu realmente gostaria que você salvasse isso como um JPEG e enviá-lo para o projeto da classe para mim e outros alunos para ver. E estou muito entusiasmada para ver o que vocês conseguem inventar. Estou muito animado para compartilhar essas dicas e truques com você. E estou ansioso para te ver na aula. 2. Por que imagens: Sabe o que dizem, aquela foto diz mil palavras. Bem, é a mesma história nas pinturas como no design, especialmente no design gráfico, mas a mesma coisa pode ser dita em web design e AB design. Portanto, escolher as imagens certas pode realmente determinar o ritmo que os espectadores estão olhando para o seu projeto, seja um projeto de aplicativo ou nosso projeto de design de site. Ele também pode determinar o tom em que você está falando com seus visitantes. Então isso pode ser sério ou divertido, brincalhão. Ele também pode determinar o ritmo em que seus espectadores podem olhar para o seu projeto. Então o que isso significa é, vamos usar imagens menores, vamos usar imagens maiores. Você vai usar imagens em tela cheia para imagens de largura e muito mais? Eles também vão determinar o quão brincalhão ou sério ou site é. E também vai determinar as cores que você vai usá-lo seu design, porque o tom de suas imagens vai realmente determinar isso. Porque se você estiver usando, por exemplo, imagens realmente escuras, então você vai usar algumas cores, que vai contrastar muito melhor com essas imagens escuras. Ou se você estiver usando imagens muito claras e arejadas, Dan, você vai contrastar isso usando algo muito mais escuro. Por exemplo, um preto escuro ou cinza escuro ou verde escuro ou algo assim. Portanto, as imagens são realmente o fator chave na criação de seus designs e escolher as imagens certas para seus projetos vai fazer ou quebrar seu design. 3. Três tipos de imagens do projeto: Quando se trata de imagens de projeto, existem realmente três tipos principais. Número um são imagens de estacas pelo fotógrafo. Então estas são imagens que o seu cliente já tem alguma levou para nosso fotógrafo premium que tirou essas imagens em cenários e criou realmente toda a história para o seu cliente, e depois entregou essas imagens para o seu cliente. E então seu cliente vai entregar essas imagens para você e você, por sua vez, vai usá-las em seus projetos. Dois são imagens grátis. Então essas são as imagens que você vai encontrar normalmente em sites como Unsplash ou Pixabay. E essas imagens aqui realmente uma enorme falha e essa variedade. Então o que isso significa é que você pode encontrar uma grande imagem de um grande fotógrafo. E é basicamente isso. Assim, você não pode encontrar outra imagem, por exemplo, modelo em uma pose diferente ou um pôr do sol de um ponto de vista diferente, ou uma rua da cidade de um ponto de vista diferente também. Então você não pode encontrá-los. E geralmente essas imagens não são de grande qualidade. Normalmente, há algo como 1920 por 1080, então full HD ou pelo menos 2k de tamanho. E finalmente, número 3, nossos conjuntos premium. Agora estes são os sites que você pode encontrar online. Normalmente, eu gosto de usar elementos Envato e seu próprio site 2020, que significa que eles têm mais de 50 milhões de imagens para escolher. E o que isso significa é que esses fotógrafos premium estão criando cenas. Então imagine, por exemplo, visto no escritório e então eles estão montando essa cena. Eles estão montando aquele escritório. Eles estão pagando pelos modelos. E eles estão tirando centenas de imagens diferentes de todos os ângulos diferentes de com diferentes modelos fazendo coisas diferentes. E o principal benefício dessas imagens é que elas são todas tiradas em um ambiente controlado por um único fotógrafo sob uma única fonte de iluminação com os mesmos modelos, com a mesma equipe na mesma sala. Então você teve a idéia. Essas imagens podem ser facilmente usadas em seus projetos. E, por exemplo, se você tiver que fazer uma pequena alteração com, por exemplo, brilho, você pode fazê-lo em algo como o Adobe Lightroom. E então você pode pegar todas essas imagens que você baixar o projeto de quatro anos, você pode fazer um único tweet, por exemplo, para o brilho ou para a obesidade, ou para a vinheta ou o que quer que você esteja fazendo com essa primeira imagem. E você quer aplicar essa mesma alteração a todas as suas imagens. Por exemplo, você baixou o conjunto de 50 imagens diferentes. Então você pode simplesmente aplicar essa primeira alteração para a primeira imagem e, em seguida, aplicá-la através de um monte de suas outras imagens da mesma coleção. Você pode simplesmente sincronizar essas alterações. E, por exemplo, o Adobe Lightroom aplicará essas alterações. Você não precisa usar o Lightroom. Eu realmente gosto de usá-lo porque eu sou um usuário da Adobe. Uso o Adobe XD, uso o Adobe Photoshop, uso o Premier e, claro, uso o Lightroom para todas as minhas imagens. E eu realmente gostei dessa função, mas não é apenas no Lightroom. Você pode encontrá-lo em outras ferramentas e software como estão lá. Apenas certifique-se de procurar por ele, mas isso vai poupar um monte de tempo. Então, se você estiver usando imagens de clientes, talvez você tenha que ajustar algumas coisas aqui e ali. Porque normalmente esses fotógrafos estão tirando imagens fantásticas, mas talvez se você estiver criando um design de site para o nosso tom um pouco mais escuro , digamos, então você vai aplicar algumas dessas mudanças adicionalmente a essas imagens. Normalmente, os fotógrafos gostam de deixar essas imagens bem cruas. Portanto, os designers vão, por sua vez, fazer essas mudanças. Assim, por exemplo, Saturação, Brilho, contraste e coisas como dívida com essas imagens. Mais uma vez, se você estiver usando imagens gratuitas, mortes ótimas, especialmente para clientes de baixo orçamento, porque eles realmente não se importam com a aparência do seu blog. Mas se você está trabalhando com clientes que têm orçamentos razoáveis, então você pode facilmente integrar esses conjuntos premium de imagens em seu trabalho a partir de sites como Envato Elements, por exemplo. E eu realmente recomendaria porque você pode encontrar milhões dessas imagens diferentes. E, por sua vez, eles vão fazer o seu trabalho parecer muito mais profissional, muito mais polido do que se você estiver apenas usando essas três imagens. 4. Como escolher imagens de nicho: Existem muitas maneiras diferentes para você escolher imagens de nicho, mas eu vou apenas dar-lhe algumas dicas e técnicas sobre como eu faço isso e como eu fiz isso nos últimos quase 20 anos. Então, dependendo do nicho onde você está trabalhando, há um certo tom. Então, por exemplo, se você está criando um site para ternos masculinos, por exemplo, há uma boa chance de que, que é um site premium olhando. E eles estão tentando retratar um tom de profissionalismo, de um design limpo, de certo estilo de vida que esses ternos vão retratar. Então, obviamente, você não vai usar algo como amarelo brilhante ou um brilhante portas vermelhas e deleite que você certamente vai usar. Esta cor cinza claro é cores cinza escuro, possivelmente um toque de azul, talvez até mesmo dourado poucos lugares se você estiver trabalhando contra a cor preta. Então, ele vai permitir que você se destaque, obviamente cores brancas. Então, quando você estiver escolhendo suas imagens, certifique-se de ter essas coisas em mente porque você não vai escolher seus modelos contra este fundo amarelo e contra o fundo, que vai arruinar a aparência do seu terno. Obviamente, você vai se ajustar ao tom. Então o que isso significa é que você vai procurar modelos que estão nessas posições em, por exemplo, fundos brancos devidamente expostos, porque vai ser muito mais fácil para você integrar essas imagens em seu trabalho. Também modelos contra o fundo preto porque você pode usar algo como uma obesidade tela e, em seguida, você pode reduzir esse fundo preto contra o seu design. Portanto, você pode facilmente extrair seu modelo do seu plano de fundo e facilmente adaptado ao seu design. Portanto, este é obviamente apenas um dos exemplos. Certifique-se de definir o tom e ver qual é o tom do seu nicho. Portanto, você vai procurar imagens que estão naquele nicho e naquela cidade, o que é realmente importante porque seus visitantes vão alinhar muito mais facilmente se eles vêem coisas que eles entendem, em vez do coisas que não fazem. Então, por exemplo, vamos voltar ao exemplo do traje. Imagine que você é esse cavalheiro procurando um terno para o seu casamento, por exemplo, ou para o casamento de seu amigo ou algo assim. E você está procurando por realmente alta classe, algo realmente sofisticado, algo muito caro, porque você quer aparecer naquele dia e você quer ficar bem. Então você visita este site, que é tudo cores gritando e tudo, eu não sei, vermelho, verde, azul. Não te dá essa sensação. Não lhe dá essa limpeza ou o site que está vendendo esses ternos caros. Então algo não vai parecer certo. Algo que vai parecer certo? Talvez à primeira vista você não pense muito nisso. Mas à medida que você começa a navegar, você obviamente vai notar que algo não é bom aqui. Não vai te dar essa confiança para comprar esse terno, porque não está te dando aquela vibração que você normalmente espera do site do terno. Então você vai para o site da concorrência, que tem todas essas coisas sobre as quais falamos para este exemplo em particular, você vai se sentir muito mais em casa lá. Você vai se sentir muito mais confortável com sua decisão de compra e você vai se sentir muito mais em casa, por assim dizer, porque suas expectativas são atendidas por este site em vez deste site anterior com todos aqueles gritando cores. Então é por isso que é realmente importante quando você está escolhendo imagens, certifique-se de escolher imagens de nicho, que seu público vai se relacionar facilmente. Portanto, seu site em troca será muito mais relacionado com seus usuários e aplicativos móveis, bem como para esse assunto, porque seus usuários vão reconhecer essas pistas, essas imagens, essas cores, esses estilos, porque eles estão acostumados com eles. Portanto, não tente experimentar muito e ir descontroladamente com suas imagens. Certifique-se de manter o que você sabe e certifique-se de manter o que funciona, que é a coisa mais importante. Afinal, certifique-se de que seus usuários se sintam confortáveis quando visitam seu site ou um aplicativo móvel. Porque em troca, isso trará mais conversões. 5. Premium do VS gratuito: Neste vídeo, eu vou mostrar algumas diferenças principais quando você está procurando por imagens você mesmo. Então, estes são os exemplos quando seu cliente não tem imagens. Então você tem que procurar imagens para esse projeto em particular. E vou mostrar algumas diferenças importantes entre imagens grátis e premium e o que você deve procurar quando estiver navegando por imagens. Então aqui temos nosso site chamado Unsplash.com, que geralmente é o que esses designers estão usando hoje em dia. E há também pixabay.com e muitos desses outros sites. Mas normalmente Unsplash e Pixabay são os sites que normalmente vão procurar. Então, se escrevermos um terno, por exemplo, como eu mostrei em exemplos anteriores, e como falamos no vídeo anterior, eu vou apenas mostrar e comparar diferenças entre o site gratuito e premium. Então, como eu disse, nós temos um terno aqui e eu vou copiar este texto e eu vou chegar a este site que está em elementos vitais, que é um site premium. E eu vou simplesmente colá-lo aqui. Procure as fotos, mas você pode pesquisar todas essas coisas diferentes. Então estoque de vídeo, modelos de vídeo, música, efeitos sonoros, modelos gráficos como placas de impressão e interface do usuário, UX crianças, apresentação gráfica, dopants, fotos, fontes e respostas modelos web, 3D e muito, muito mais. Então nos adaptamos de terno. E há também este site chamado largura 2020, 50 milhões de imagens adicionais. Sim, são 50 milhões de imagens adicionais. E todas essas imagens são realmente de alta qualidade carregadas por todos esses fotógrafos independentes. Então, se formos para esse site que é 2020 ações e digite o terno aqui mesmo. Então temos exatamente a mesma consulta de pesquisa em todos esses sites. E o que temos aqui em Unsplash é que quando pairamos, temos essa corrida de caçadores. Temos outro fotógrafo, não somos nenhum fotógrafo, outro fotógrafo. Então, todos estes são fotógrafos diferentes. Então vamos com, vejamos, este é Benjamin Roscoe, assim como este tipo. Vamos visitar o perfil deles. Como você pode ver, eles estão tirando imagens ou linhas de céu, bares, rios, detalhes. Aqui temos algumas imagens dessa pessoa em um terno. Mas é basicamente isso. Você pode ver que temos apenas três ou quatro imagens diferentes. E mais uma vez, essas imagens de bar todo o caminho para baixo. Mais uma vez, se eu clicar nesta imagem, por exemplo, o que eu tenho aqui é que eu posso clicar, Leia mais para ver todos esses detalhes diferentes. E eu posso digitar a informação e podemos ver que a câmera é Sony, ISO 400. E estas são as dimensões. Portanto, estes são realmente muito bons nesta fase. E você pode ver quantos downloads e visualizações essa imagem tinha. Mas se voltarmos e clicarmos nesta imagem, por exemplo, vá para a informação. Você pode ver que são cinco mil mas mais uma vez, temos o mesmo problema. Então, quando eu clicar neste perfil, por exemplo, você pode ver que nós temos essas muitas imagens diferentes, mas há apenas uma imagem de um terno. Então vamos imaginar que você deseja usar essa cor específica do terno, por exemplo, e você quer usá-lo neste ambiente. Então vamos dizer que dentro de casa contra estas escadas e coisas assim. Então você pode imaginar que seu modelo vai ser fotografado dentro de casa. Por exemplo, digamos que dentro do shopping center, fazendo uma viagem de compras ou domingo jaz morto. Então você tem que encontrar imagens dessa natureza. Bem, esta é apenas uma imagem e você está basicamente preso. Você não tem outras opções. Então, se voltarmos e darmos uma olhada em todas essas outras imagens de um terno. Como você pode ver, não há muito mais. Talvez exista esta, mas tem uma árvore de Natal dentro dela. Então não vai funcionar em todas as suas ocasiões. E como você pode ver, não há muita opção aqui para o seu projeto particular. Então podemos ir a alguns desses sites e podemos encontrar algo que vai funcionar para nós. Digamos que este é o centro comercial e esta é a loja dentro do centro comercial. Então vamos abrir isso dentro de uma nova guia. Vamos notar rapidamente que isso é oito K de tamanho, por exemplo. E você pode ler mais essa informação. Você pode aprender mais sobre isso. E podemos ver que são quatro, requer oficina de designer de alfaiataria. Mas se eu rolar aqui, você pode ver que é tudo da mesma série. Então você pode ver esse mesmo modelo, mesmo tipo de fundo, mesma iluminação, mesmo fotógrafo. Então você pode ver sobre imagens é um fotógrafo. Então, todos eles, e o que é ótimo sobre isso é que se eu clicar Ver Mais e abrir em uma nova guia, você pode ver quantas dessas imagens diferentes temos. Então você pode claramente criar uma história de todas essas imagens. Assim, você pode começar em sua página, por exemplo, dando boas-vindas ao usuário na sua loja , explicando a eles a qualidade de seus ternos e como eles são feitos, quanto tempo leva para cada pessoa para ver um botão específico, por exemplo, e coisas assim. Então você pode realmente ampliar os detalhes com essas imagens porque elas são de 8 K de qualidade e são realmente enormes. Você pode então dizer a eles sobre como a montagem vai funcionar quando eles tentaram se adequar, como isso faz com que eles se sintam. Quando foram os materiais para o terno são adquiridos e muito mais. Então você pode fazer isso com essas imagens premium. Você pode realmente contar uma história em vez de apenas mostrar uma imagem singular. O que isso vai fazer é fazer seu site pareça muito mais profissional, muito mais polido. Porque, mais uma vez, você pode mergulhar seu espectador nessa experiência porque você tem todas essas imagens diferentes do mesmo conjunto. Então vamos dar uma olhada neles mais uma vez. Você pode ver que eles estão bebendo café. Temos instalação bem aqui. Temos testes do material. Temos instalação bem aqui. Temos, por exemplo, acordo aqui que temos alguns materiais diferentes. Temos como o ti vai caber. Então você pode ver claramente apenas a partir de um exemplo para este terno, quantas dessas imagens diferentes nós temos. Então você pode imaginar ampliando esses detalhes e o quanto você pode realmente fazer com todas essas imagens diferentes em vez de apenas uma única imagem. Finalmente, podemos fazer o mesmo aqui. Então, se eu digitar terno e abrir, você tem essas coleções diferentes e dentro dessas coleções. Então, se eu abri-los, você pode encontrar fotógrafos diferentes. Então, por exemplo, eu realmente gosto desse terno. Talvez eu possa ir e procurar por ele, ou talvez eu possa até dar uma olhada neste aqui. Então estas são as coleções. Você pode abrir essas coleções a partir desses diferentes fotógrafos e, em seguida, você pode explorar imagens adicionais. Então aqui temos esta imagem e este modelo. Então, se eu clicar aqui e abrir suas coleções, temos essas fotos diferentes, temos lóbulos diferentes, temos todas essas coisas diferentes aqui. Para que possamos explorar e ver todas as imagens deste fotógrafo. Você pode ver claramente que temos um monte dessas imagens diferentes. Mas mais uma vez, se você não gosta de 2020 e todas essas imagens diferentes, você sempre pode voltar para os elementos Envato porque estes dois são parte da mesma coleção. Então, quando você receber esta assinatura da Envato Elements, que é uma assinatura anual, isso será incluído. Então, se você não consegue encontrar uma imagem aqui, então talvez você possa tentar em 2020. Você pode ver que diz Envato. Então essas são apenas algumas comparações diferentes entre imagens gratuitas e pagas. Apenas certifique-se de entender que você não pode fazer alto trabalho profissional polido com imagens gratuitas por causa dessas limitações que eu acabei de mencionar, você tem que usar ativos profissionais como imagens de, para exemplo, Envato Elements. Você não precisa usar elementos Envato. Eles são um monte de sites diferentes lá fora. Mas como eu mostrei a você o que está incluído dentro de sua assinatura, eu realmente gosto deles e eu os uso todos os dias para meus projetos. Isso no retorno vai fazer seus projetos parecerem muito mais polidos, muito mais profissionais. E se você está tentando vender seu projetado para seu cliente, por exemplo, se você está tentando apresentá-los, estão projetando um DEA, uma mudança de design, redesign completo, ou domingo estão mortos. Fazer isso com essas imagens profissionais e polidas vai ser muito mais simples do que apenas batendo algumas imagens diferentes de diferentes fotógrafos com diferentes exposições, com diferentes modelos em uma página e, em seguida, tentando vendê-los mortos. 6. Otimização de imagens: Mais uma parte importante quando você está criando projetos usando essas imagens, especialmente essas imagens enormes, é a otimização de imagens. O que isso significa é que o software de sua escolha vai reduzir o tamanho da imagem, que por sua vez vai fazer upload muito mais rápido para o servidor, por exemplo. De modo que, por sua vez, vai carregar o seu site muito mais rápido e dando-lhe um melhor ranking do Google, o que significa melhor SEO. Então, basicamente, esta otimização de SEO é extremamente importante, especialmente em projetos de design de um site, em projetos de design móvel, É realmente importante, bem, especialmente se você está puxando do mesmo banco de dados. Assim, otimizar suas imagens vai dar aos seus usuários experiência muito melhor sem perder qualquer qualidade dessas imagens originais. Então, se eu te levar de volta mais uma vez aqui para Envato Elements. E então você pode ver, por exemplo, essa imagem que estávamos olhando anteriormente. Então, como você pode ver, quase 8 K de tamanho. Então, quando eu clicar no download, ele vai puxar para cima todos esses diferentes projetos de classe. Então, por exemplo, eu vou chamá-lo de projeto de imagem, ou nosso projeto de imagem, por exemplo. E eu posso simplesmente criar este projeto. Agora o que isso significa em Envato Elements é que eu posso adicionar todos esses diferentes elementos a este projeto em particular. Então você pode imaginar que eu vou usar todas essas imagens diferentes. Eu vou usar ícones diferentes, talvez até mesmo um tema WordPress. Talvez eu precise de música dos meus vídeos. Então todos os itens diferentes que você baixou do Envato Elements você pode simplesmente colocar neste projeto que nós criamos. Agora, o que isso significa é que vai ser muito mais simples para seus clientes licenciar todos esses itens no caso de tal coisa ser necessária. Assim, por exemplo, você pode usar uma assinatura para número ilimitado de clientes em cada cliente pode ter seus próprios projetos, que significa que o licenciamento pode ser tão simples quanto simplesmente copiar uma licença e, em seguida, enviá-los para seus clientes e perigo e vão conter esta licença e eles vão mantê-la. Portanto, não há necessidade de atualizar essas licenças todos os anos. Basicamente, uma vez que você paga por ele, uma vez que você baixá-lo, é isso. Assim, você pode facilmente licenciar todos esses diferentes elementos, incluindo imagens no Envato Elements para seus projetos. Então, se voltarmos para aqui, eu posso simplesmente clicar em nosso projeto de imagem para criar esse projeto. Então eu posso simplesmente adicionar e baixar. E vai começar a baixar aqui mesmo. Agora você pode ver que esta imagem é bastante enorme. Na verdade, tem quase 18 megabytes de tamanho. Então, uma vez baixado, agora é hora de otimizar nossas imagens. Agora, a otimização de imagem não é nada de novo. É feito por desenvolvedores há décadas e por designers por algumas décadas também. Basicamente, o que é, é que ele vai simplesmente reduzir o número de pixels dentro da sua imagem. Ele vai conter o tamanho da sua imagem vai conter nitidez, vai conter qualidade. Mas, por sua vez, ele vai lhe dar um tamanho de arquivo muito menor porque todas essas câmeras diferentes estão simplesmente adicionando o tamanho do arquivo, especialmente dependendo da lente que você está usando e do modelo de câmera que você está usando. Por isso, para não te aborrecer com demasiados detalhes, vou mostrar-te isso na prática. Então, como estou no Windows, estou usando algo chamado motim. E se você estiver em um Mac, você pode usar algo chamado imagem ideal de um viveu um arquivo PDF. E você pode simplesmente clicar no link para baixar o que você precisa anual desejar. E existem muitas ferramentas diferentes para ambos os sistemas operacionais, tanto Windows quanto Mac. Cabe a você decidir qual quer escolher. Eu escolho, certo? E eu uso isso há anos e funcionou bem para mim. Então, se eu te levar de volta, você pode simplesmente ver como é o motim. E aí está. É realmente uma ferramenta básica e realmente quer que você pode facilmente aprender a usar e basicamente o que ele faz. Ele, ele tem essas duas janelas e se eu arrastar e soltar minha imagem dentro, então esta é a imagem que nós escolhemos. Você pode ver que você pode abrir imagem, você pode importar imagens em lote, o que mais uma vez é realmente importante, especialmente se você estiver trabalhando com essas coleções. Então, para não perder tempo. Basta imaginar que você tem, por exemplo, 50 imagens diferentes que você baixá-lo. E essa é a grande onda. Por exemplo, de Envato Elements. Você pode nem usar todas essas imagens, mas é ótimo porque elas estão lá. Você pode simplesmente selecioná-los todos, baixá-los todos, colocá-los na mesma coleção, e agora otimizá-los todos usando, certo, por exemplo. Então aqui vou simplesmente usar uma imagem. E o que eu vou fazer é clicar e arrastá-lo até aqui. Então, uma vez que carregar, ele vai me induzir isso. Portanto, este arquivo contém uma imagem de alta resolução. Rad pode lidar com essas imagens, mas o processamento pode ser bastante lento nesta situação. Querem redimensioná-lo para nós. Recomenda-se que a imagem original não seja modificada. Então, observe o que ia acontecer quando eu clicar em Sim. Vai dar-nos este tamanho original. Então, ele vai escalar seu novo tamanho, 100 por 100. Então mantenha a proporção. Isso está em porcentagem porque você pode ver aqui e você pode baixá-lo em pixels específicos. Mas eu recomendo que você mantenha essa porcentagem igual. Então n vai simplesmente pensar onde ele para baixo basicamente para 100%. O que isso significa é que quando eu clicar em OK, você pode ver a imagem inicial bem aqui. Portanto, 17,5 megabytes de tamanho e a nova imagem tem 3,4 megabytes de tamanho. Agora vai carregar muito mais devagar. Então, quando eu clicar aqui e passar o mouse, você pode ver 17,5 megabytes. E esta é a imagem bem aqui. Mas quando eu otimizá-lo, vai ser 3,4. Então, quando eu apertar Salvar bem aqui, eu quero substituí-lo. Quero digitar “sim”. As extremidades vão basicamente substituir esta imagem. Então, quando eu clicar agora e passar o mouse 17,5 megabytes, então deixe-me atualizá-lo. E você pode ver que são 3,4 megawatts. Então basicamente começamos com 17,5 megabytes. Estamos agora a 3,4 megabytes. E o que é mais importante de tudo, se eu pairar bem aqui, você pode ver 79, 52 com 53, 04. E se o levarmos de volta para aqui, você pode ver que estas não são exatamente as mesmas dimensões que eram com a imagem original. Ele apenas reduz o tamanho da imagem sobre tudo. Então, o que isso significa para você basicamente vai dar aos seus desenvolvedores muito mais espaço de jogo porque você reduz esses tamanhos de arquivos, você pode ir ainda mais longe. Por exemplo, estou usando o Adobe XD diariamente para projetar todos os meus projetos. Então você pode imaginar que eu vou colocar essa imagem AK em algo que é, por exemplo, digamos 1920 por 1080. E então eu vou exportá-la do exílio nessa resolução em particular. Então 1920 por 1080, que vai reduzir ainda mais o espaço necessário. N vai reduzir ainda mais o tamanho desta imagem. Então você pode dizer, por que não usá-lo assim imediatamente? Bem, porque você está puxando todas essas imagens enormes para o seu software de escolha. No meu caso, o Adobe XD vai ficar muito lento porque estes são arquivos enormes como você viu. Então apenas esta imagem em particular é de 17,5 megabytes. A maioria dos meus arquivos tem cerca de 20 megabytes. Então você pode imaginar todo o arquivo de design é de 20 megabytes, e esta apenas uma única imagem é 17,5 megabytes. Portanto, basta ter essas coisas em mente ao criar, especialmente para a Web, porque você está tentando tornar o Google Optimize este site. E você está tentando fazer com que tantas pessoas encontrem este site quanto possível. Portanto, é muito importante para você otimizar essas imagens. E quando você está trabalhando com projeto de design móvel, é importante também porque, em seguida, o sistema operacional e o próprio aplicativo, ele não vai puxar todas essas imagens enormes do banco de dados vai apenas puxar uma imagem singular que é bastante pequeno em tamanho. E ainda vai conter essa enorme dívida de qualidade originalmente se tivesse sido fotógrafo, tirado essa imagem. 7. Estrutura de noming: Da mesma forma que com a otimização de suas imagens, é realmente importante nomear sua imagem é corretamente porque dessa forma eles vão ser exibidos corretamente em seu site ou em seu aplicativo móvel. Vai ser muito mais simples para seus desenvolvedores encontrar essas imagens, incluí-las no código. E vai ser muito mais simples para o código extrair essas imagens de bases de dados. Então deixe-me mostrar o que quero dizer na imagem que acabamos de baixar. Então, se olharmos para esta imagem, eu fui em frente e baixei novamente no mesmo projeto. Assim, você pode ver o nome até o ano, traço PA para VMs, C4 ou qualquer outra coisa. E esta é a redução da imagem. Então, como você pode ver mais uma vez, 17,5 megabytes, tamanho original e você pode ver o título aqui. E se eu ficar com a sua direita aqui, você pode ver que temos um nome assim. Então, o que podemos fazer com esta imagem porque ela vai ser levada para o nosso software de escolha. No meu caso, Adobe XD. No seu caso, pode ser Sketch figma Photoshop Illustrator realmente não importa. Então o que você pode fazer com esta imagem é você pode clicar com o botão direito sobre ela e renomeá-la dessa forma. Dessa forma, quando você arrastá-lo e soltá-lo em seu software de escolha, ele vai se lembrar desse nome e, em seguida, quando você exportá-lo, ele vai exportá-lo assim. A outra coisa que você pode fazer é ir para algo como o Lightroom, por exemplo, e você pode adicionar metadados dessa imagem em particular, que lhe dará muito mais detalhes sobre quando essa imagem é, foi filmada com qual câmera com qual lente, com qual exposição e assim por diante. Então isso pode ser necessário de você se você estiver trabalhando em algum tipo de projeto de design gráfico, por exemplo, para editoriais e coisas como papai, especialmente se essa imagem for impressa em telas enormes. Então, alguns clientes de alta qualidade vão precisar de todas essas informações para ele, você. Então, certifique-se de entender que não importa em que tipo de projeto você está trabalhando, existem alguns requisitos de você, mas para a maioria desses projetos web e projetos de design de aplicativos, simplesmente renomear seu arquivo vai ser bom o suficiente. Então, se eu levá-los de volta mais uma vez aqui à nossa imagem, o que você pode fazer é imaginar que esta imagem, por exemplo, vai ser localizada na sua seção de heróis. O que você pode fazer é clicar com o botão direito Renomear e simplesmente chamá-lo de herói, IMG. Ou se você for um desenvolvedor quiser adicionar traços, adicione herói, traço, IMG ou sublinhado como este. Então aqui sublinhar IMG. Então, isso realmente depende de desenvolvedor para desenvolvedor. Então, quando você está iniciando seu projeto, se você tiver acesso às informações de contato de seus desenvolvedores, talvez simplesmente pergunte isso a eles ou simplesmente pergunte aos seus clientes para que eles possam perguntar ao seu desenvolvedor. Então, isso, por sua vez, será muito mais rápido para você quando você começar a criar para que você possa renomear todas essas imagens e ativos, por exemplo, como ícones em ilustrações antes de começar a trabalhar, depois quando começar a trabalhar. E então você tem que renomear todos esses arquivos uma vez que você realmente incluí-los em seu software de escolha. Eu sei que no Adobe XD é realmente uma grande dor quando você inclui imagens como com este nome serra até a seta, 58 para qualquer coisa. E então, quando você tenta exportá-los para sua área de trabalho e deseja enviá-los para nossos desenvolvedores, então você tem que renomear manualmente todos eles em sua pasta de exportação, por exemplo. E especialmente se você compartilhá-los com algo como mudas, por exemplo, com seus desenvolvedores, então você tem que renomeá-los em Zeplin. Então, é realmente uma confusão. Se você pode renomear todas as suas imagens ou pelo menos algumas de suas imagens na frente, porque dessa forma vai ser muito mais simples para você projetar e também certifique-se de perguntar aos seus desenvolvedores que tipo de abreviatura devido dia como. Além disso, se você, por exemplo, estiver usando essa imagem de herói e imagine então se eu te levar aqui, talvez isso seja sobre nós. Este vai ser o produto 1, este vai ser o blog seção um. Isto vai ser um testemunho ou o que quer que seja. Certifique-se de renomear todas as suas imagens corretamente. Então, por exemplo, se você é um depoimento tem quatro imagens, então pergunte ao seu desenvolvedor sobre a abreviatura. Então, por exemplo, traço testemunho um, testemunho, traço dois, traço três, traço quatro e qualquer coisa ou sublinhado ou sem traços, sublinhados e assim por diante. Então, apenas um testemunho para todos eles juntos. Certifique-se de perguntar-lhes, eles gostam de tampas, Caps Lock ativado. Mas a maioria dos desenvolvedores não. A maioria dos desenvolvedores, pelo menos, que eu sei, gostam de usar imagens com letras pequenas e números para que eles não gostam que eles sejam caps olhar, por exemplo. Então essas são apenas algumas dicas e técnicas que eu gosto de compartilhar com vocês porque eu acho que vai melhorar o seu tempo com esses projetos massivamente, e vai melhorar a qualidade de sua entrega aos seus clientes massivamente. 8. Seu projeto do curso: Seu projeto de classe para esta classe é criar algum tipo de combinação de imagem para que você possa usar imagens gratuitas ou premium. Tudo depende de você. O que eu só quero que você faça é usar seu software favorito de escolha. Então você pode usar Photoshop, Illustrator, XD, sketch, Figma, qualquer software que você está usando, talvez até Canva, se isso é sua coisa e você é como usar Canva. Mas basicamente o que eu quero que você faça é criar um projeto próprio, usando suas próprias imagens para que elas possam ser tanto imagens livres de sites como Unsplash ou Pixabay, imagens premium de sites como Envato Elements e como eu mostrei-lhe, basicamente o que eu quero que você faça é criar imagens que se relacionem entre si. Então isso pode ser em cores ou em classe ou em estilo, ou em formato básico ou qualquer outra coisa que você quiser. Então, como por exemplo, eu mostrei a vocês com o exemplo de TI, talvez você possa usar algo com esses ternos. Talvez você possa combinar cores dos ternos juntos só para colocar algum tipo de humor para esse seu projeto em particular. Você pode usar imagens de carro e você pode usar um estilo de carro particular. Então, por exemplo, se você quer um luxo, então você vai usar limusine. E geralmente essas limusines são de cor preta. Mas ainda mais longe disso, esse carro está na estrada, esse carro está estacionado, por exemplo, em algum lugar rápido como Mônaco, por exemplo? Ou alguém está saindo do carro como uma celebridade. Então, apenas certifique-se de prestar atenção a esses tanques. Escolha o nicho que você quiser, qualquer formato que você quiser. Mas o que eu quero que você faça é juntar todas essas imagens. Não tem que ser muitos. Você pode usar 56 imagens, algo que eu fiz bobagem para colocá-las em um único documento. Você pode usar o tamanho A4 ou letra se você for dos EUA. Basta colocá-los juntos, salvá-lo como um JPEG e enviá-los para seus projetos de classe Old Lu gostaria de ver o que vocês podem inventar. E estou realmente interessado em ver como você otimiza essas imagens para seus projetos e como você cria essas aparências para seus próprios projetos pessoais? Porque, mais uma vez, estou realmente interessado em ver o que vocês podem inventar e posso esperar para vê-los na sua turma, projetos. 9. Outro: Então lá vamos nós. Chegamos ao fim da aula. Eu realmente espero que você tenha gostado desta aula e eu realmente espero que você esteja indo para escolher algumas coisas aqui e ali sobre a otimização de suas imagens, sobre a escolha de suas imagens, colocando-as nessas diferentes categorias, nestes coleções diferentes e como você está indo para seguir em frente com seus projetos são realmente encorajá-lo a verificar o arquivo leia-me porque eu vou colocar algumas coisas nesse PDF. Você pode simplesmente clicar nos links. Ele irá levá-lo para qualquer link que você deseja ir. E eu realmente espero que você use pelo menos essas ferramentas de otimização de imagem porque eu realmente acredito que eles vão transformar seu trabalho. E não vão basicamente melhorar sua relação entre você e seus desenvolvedores porque eles vão gostar muito mais de você. Porque você otimiza todas essas imagens e economizou um monte de tempo que eles perderiam. Caso contrário, espero sinceramente que vá tomar nota. E da próxima vez que você começar a selecionar essas imagens, coloque-as em conjuntos e certifique-se de que eles estão usando o mesmo tom, usando as mesmas cores, eles estão usando o mesmo modelo, a mesma iluminação. Porque só isso vai trazer muito mais profissionalismo para o seu design e vai fazer com que ele se destaque e seus clientes vão simplesmente te amar por isso. Então, obrigado mais uma vez por assistir esta aula e eu realmente espero ver seu trabalho dentro do projeto da classe e até a próxima vez, tome cuidado.