Como Criar um Site Animado de R$ 3.000 em 10 Minutos com Claude Desing
Como Criar um Site Animado de R$ 3.000 em 10 Minutos com Claude Desing
Highlights do conteudo
- Então simplesmente é só para você entender que dá para fazer uma página perfeita, profissional, com poucos comandos, utilizando inteligência artificial, mas espera que tem mais coisa ainda.
- Olha só, para você que deseja participar do meu treinamento, onde eu ensino a como criar size como esse daqui, onde simplesmente esse aqui é o meu size que já faltura mais de 100.000.
- Então, simplesmente eu vou te mostrar os bastidores de como criar o seu size com inteligência artificial, sem precisar programar e viver de Então é isso aí, link na descrição.
- Cloud design você pode fazer também pelo Google ED Studio, mas eu gosto mais do Cloud Design porque ele tá por enquanto mais atrativo nessa questão de criar um bom layout.
- Não esquece de deixar seu like e compartilhar esse vídeo com a pessoa que você simplesmente quer ajudar a criar uma página profissional e animada como essa daqui, tá bom?
Olha só. Olha só as animações.
Ficou muito legal, tá bom? Vamos ver como ficou a parte de celular para mobile.
Entendendo o conceito
Olha só como ficou. Muito legal, né?
Bem profissional. Então vem comigo que o vídeo tá muito legal. Vamos lá.
Vamos aqui direto ao ponto. Primeira coisa que a gente vai ter que fazer é pesquisar aqui referências para nos ajudar a criar um bom design. E eu vou utilizar aqui o Pinterest, tá?
Aplicacoes reais
Uma plataforma gratuita que você pode simplesmente digitar aí, fazer o login e já sai pesquisando. Eu vou digitar aqui, ó, landing page, porque assim eu vou ter boas referências de design para que a Ia não fique simplesmente inventando coisa aleatória, tá? E aqui, ó, você pode ver que tem vários vários designs.
E a partir do momento que você clica em um, ele aparece outros semelhantes que vai te ajudar a ter uma real noção. Olha só que legal.
Então tem muita coisa legal aqui para se fazer. A minha ideia é pegar esse daqui, simplesmente essa página aqui, e transformar como se fosse o do Neymar.
O futuro do tema
Então eu vou pegar esse aqui como referência, vou pedir para fazer umas modificações aqui para mim e vai dar tudo certo. Então vamos lá. O que que eu vou fazer aqui?
Eu vou tirar o print dessa imagem. Olha só.
Vou colar aqui no chat GPT. Então o que que eu tô aqui pedindo para ela? Para ela gerar a mesma imagem, mostrando as mesmas referências.
O que especialistas dizem
Quero que ela remova aqui os textos e os outros elementos, mas eu personagem e o plano de fundo. Mas eu também quero que ela altere o rosto para o jogador de futebol pro Neymar.
Eu não sei se ela vai fazer isso aqui também logo de primeiro, mas caso ela não consiga fazer, a gente vai simplesmente tentar novamente na próxima imagem, tá? Então o que que a gente vai fazer aqui? Uma pequena modificação.
A gente vai clicar aqui em na imagem aqui, ó. Cria uma imagem e a gente vai mudar aqui a questão da proporção, tá?
A gente vai colocar 16 por9, tá? Então vou clicar aqui para enviar e vamos ver o que que vai acontecer aqui agora.
Acabou de finalizar e só uma observação aqui, ela fez um excelente trabalho com a primeira imagem. Olha só, fez as alterações aqui e ficou muito bom o trabalho. Então vou já salvar essa imagem aqui, tá?
Vou baixar ela aqui no meu computador. Salvar. Para deixar o trabalho mais lapidado, o que que eu vou fazer?
Vou simplesmente criar um arquivo onde eu vou dimensionar ele melhor. Então vou aqui no Photoshop. Você pode utilizar até o Photoshop online, o canvas para fazer isso.
OK? Eu vou utilizar o Photoshop que eu tenho mais familiaridade com ele. Então vou clicar um novo arquivo e a gente precisa dessas dimensões aqui, ó, 1440 por 900 de altura, tá?
Colocar aqui o fundo transparente. OK.
Vou criar. Vou simplesmente pegar a nossa imagem que a gente acabou de baixar pela inteligência artificial do Neymar.
Vou abrir aqui, ó. Vou colocar lá aqui. Eu vou jogar ela aqui pro lado no arquivo que eu acabei de de dimensionar, né?
E aqui a gente vai dimensionar ele aqui, ó. Próximo passo é a gente preencher essa lacuna aqui, tá? E você pode preencher de diversas formas.
Aqui no Photoshop, se não me engano, tem uma opção aqui onde eu consigo fazer isso meio que de forma automática. Deixa eu ver se eu consigo aqui preenchimento generativo.
Ó, deixa fundo da imagem. Deixa eu ver se eu consigo dessa forma. Perfeito.
Agora a gente vai simplesmente exportar aqui, ó. Exportar como colocar aqui JPEG.
Vou exportar ela, colocar aqui na área de trabalho. O próximo passo é a gente animar essa imagem, tá?
Então o que que a gente vai fazer? A gente vai acessar esse site aqui, ó, Clingi, colocar aqui em português e aqui a gente vai animar. Então vou experimentar agora.
A gente vai ser direcionado aqui pro site da animação. É uma inteligência artificial focada para isso, nessa questão de animação de imagem, criação de vídeo, tudo com inteligência artificial.
E aqui a gente precisa de um framezinho dessa imagem que a gente acabou de criar para fazer essa animação, tá? Que a gente vai fazer aqui agora?
Vamos clicar nessa opção aqui, ó, gerador de vídeo. Aí a gente vai pegar nossa imagem lá, tá?
Fazer aqui o login. Já volto.
Aqui é simplesmente quero aqui uma imagem. Fazer o que?
Upload. Vou clicar aqui agora para adicionar a imagem. Vou pegar aqui a imagem que eu simplesmente editei.
Vou abrir aqui e vamos ver aqui agora a mágica acontecendo, né? Aqui tem uma dica muito boa.
Aqui eu vou colocar só o quadro inicial, mas se tu quiser uma animação ainda melhor, tu pode colocar o quadro inicial e o quadro final aqui, entendeu? Então vai ficar uma animação mais fluída, mas por questão didática aqui e questão de tempo aqui do vídeo para não ficar grande, eu vou fazer só com a parte inicial. Vamos lá.
O que que você vai ter que fazer aqui agora? Eu vou simplesmente mudar essa versão aqui, ó, para 2.5, que ela vai consumir menos crédito. E eu vou deixar aqui, ó, em 720p e 5 segundos para consumir menos crédito, tá?
porque aí eu vou ter simplesmente conseguir gerar aqui de forma gratuita essa animação aqui. Mas se você quiser algo com mais qualidade, dá para você simplesmente faz essas atorações aqui. Mas não é necessário, tá bom?
Pode ficar tranquilo. Então eu vou consumir aqui 15 créditos para gerar esse vídeo aqui, tá bom?
Agora eu cliquei aqui para gerar e isso aqui vai demorar um pouco certo tempo. Então assim que terminar esse vídeo, eu já volto aqui. Enquanto gera aqui o vídeo, por favor, deixa seu like, se inscreve nesse canal, porque eu sempre trago conteúdos como esse aqui.
Olha só, para você que deseja participar do meu treinamento, onde eu ensino a como criar size como esse daqui, onde simplesmente esse aqui é o meu size que já faltura mais de 100.000. Olha só, é o size gobox. Olha só como é que funciona ele aqui por dentro, ó.
Então esse aqui foi construído com inteligência artificial e olha só, esse aqui é a plataforma aqui de faturamento. Então olha, ele já fatura aqui mais de 500.35 só com esse size aqui. E isso aqui é a mesma coisa que eu quero fazer, tá?
Lembrando que ele já faturou mais de 1 milhão, mas como aqui tá dividido entre eu e o meu sócio, então eu tô vendo aqui só a metade do faturamento, tá? até outra metade que o meu sócio tá vendo. Então, simplesmente eu vou te mostrar os bastidores de como criar o seu size com inteligência artificial, sem precisar programar e viver de Então é isso aí, link na descrição.
Ele acabou de finalizar aqui e o resultado ficou bem interessante. Olha só, colocar aqui para vocês ver.
Então, o que que a gente vai fazer? A gente vai clicar para baixar aqui, salvar. Feito isso, que que a de novo o print, ó.
tirar aqui o print dessa imagem, porque o meu intuito agora é tirar o personagem aqui do fundo, mas pegar todas as características da página de vendas aqui, no caso, né? Todos os textos, tudo certinho aqui.
Então, eu venho no chat GPT, coloquei aqui já o comando, ó. Vou só colocar o print aqui.
E eu pedi exatamente isso aqui, ó. Eu quero que você gere uma imagem exatamente igual a essa. Agora quero que você remova a imagem do personagem e o fundo ficar com o mesmo efeito atual.
Mantenha o resto das coisas como está. mandar ele para ela aqui.
Vou esperar ela aguardar gerar essa imagem para mim. Perfeito. Acabou de finalizar aqui.
Aqui você pode pedir para ela fazer o que você quiser para adicionar, para eliminar. E aqui para mim já tá OK.
Então vou simplesmente pedir aqui para ela baixar, tá? Essa imagem.
Vou baixar ela aqui. A gente vai abrir uma outra inteligência artificial que é o cloud design. Cloud design você pode fazer também pelo Google ED Studio, mas eu gosto mais do Cloud Design porque ele tá por enquanto mais atrativo nessa questão de criar um bom layout.
A questão de ex ele tá melhor, mas pode ser que isso aqui mude a questão de semanas. OK. Deu um errozinho aqui.
Deixa eu ver aqui. Clicar aqui para mim entrar no cloud. Vou clicar aqui agora, ó.
Design. Ele vai abrir essa tela aqui para mim, certo?
E aqui eu vou conversar. Eu vou criar um novo projeto. Que que eu vou fazer aqui?
Eu vou clicar aqui, ó, criar desse projeto de Neymar e vou criar. A partir de agora, a gente pode conversar com ela. Então, o que que eu vou fazer?
que a gente vai simplesmente adicionar aquele arquivo lá, né, que a gente acabou de editar, criar com inteligência artificial. Adicionar arquivo. Agora a gente vai colocar esse comando aqui, ó.
Gera uma sessão de destaque section, tá? Conforme a imagem da referência de compartilhado.
Copia exatamente igual. Então vou mandar esse daqui.
Vou dar o enter aqui para para ela criar. Bora aguardar agora o que que ela vai fazer, tá?
Agora eu vou simplesmente converter todas as informações que tá aqui pro Neymar, né, que tá a informação de um outro jogador. Eu simplesmente joguei aqui no chat PT e pedi para ele alterar por esses dados do Neymar. Então já vou subir a imagem aqui que ela gerou.
Vou adicionar aqui, ó. E foi exatamente, deixa eu ver essa daqui, ó.
Aí eu vou simplesmente pedir para ela alterar para o jogador Neymar. Então aqui eu pedi simplesmente para ela já alterar e traduzir tudo para português. Vou mandar aqui para ela.
Vou aguardar ela fazer essa alteração. Perfeito. Ela já alterou aqui.
Que que tá faltando aqui nos bastões aqui? Bastões nos escudos dos times.
Tá sem a logo, né? Então vou pedir para ela adicionar. Já baixei aqui pela internet.
Então vou adicionar aqui, ó. São três lugar do Barcelona, Liverpool.
Liverpool. Deixa eu ver se é essa daqui no caso.
Opa, Monster, Barcelona e Chels. Vou pedir pr ela simplesmente colocar aqui essas logos no lugar dos escudos aqui, tá?
Vou pedir para ela fazer isso aqui. Muito bem, feita a substituição aqui, deu tudo certo.
Olha só. E agora vamos pro próximo passo, tá?
Próximo passo é a gente acessar esse site aqui, ó, Cloud Narri. Que que acontece? Se a gente jogar o vídeo direto lá, muitas vezes não dá certo.
Então, o que que a gente vai fazer? Primeiro a gente vai publicar esse vídeo em uma ORL pública e a gente vai copiar esse link e vai jogar lá na inteligência artificial com prompt, tá?
Então com esse site você vai clicar aqui, ó, cloudem, vamos fazer toda a parte de login, tal, tudo certinho aqui. Então vou clicar aqui, ó, em para fazer login.
Assim que eu fizer login, eu já volto aqui para te mostrar como é que ficou, tá? Você pode fazer isso pelo Google ou pelo KitHub [música] também. Então vou clicar aqui e já volto.
Login tá feito aqui, ó. Tá acabando de carregar.
preencher aqui essas informações. Vou preencher aqui. Já volto para não atrapalhar aqui o vídeo.
Perfeito. O que que a gente vai fazer?
Vamos clicar aqui, ó, em vídeo e a gente vai fazer o do nosso vídeo aqui, tá? Clicamos aqui, ó, pro de vídeo.
Vamos subir aqui o vídeo que a gente fez lá com a inteligência artificial. Bem aquele aqui, ó.
Na verdade, não é esse. É esse aqui mesmo. Vou fazer aqui.
Vou abrir. Tá fazendo upload. A gente vai pegar o código dele aqui que ele gerou pra gente.
Deixa eu ver onde é que ele vai, onde é que ele parou aqui, né? Onde clicar nele aqui, ele vai gerar uma URL pra gente.
Clicar aqui em compartilhar. Deixa eu ver se esse aqui tá bem que é URL, ó. Eu vou copiar ela.
A gente vai lá paraa inteligência artificial do cloud design, tá? Vou colar aqui, ó.
O que que eu vou pedir para ela fazer aqui? Para ela simplesmente manter o vídeo em loop, olha só.
E também tirar o áudio. Também eu quero que ela remova a camada branca de trás, o background e também simplesmente que o vídeo fique para que o vídeo fique visível, tá?
Então vou simplesmente mandar esse aqui, ó, para ela fazer essa alteração aqui pra gente, tá? acabou de entregar aqui o resultado e olha só como ficou um trabalho muito, muito legal. E aqui a gente pode fazer várias alterações, tá?
Lembrando que esse vídeo aqui é apenas para forma educativa. Que que acontece? Por exemplo, aqui eu tô usando o personagem animar, mas você pode observar que no final o vídeo gerado pela inteligência artificial ficou um pouco de um pouco não tá 100% parecido com o Neymar, mas se fosse que fazer aqui de forma mais profissional eu ia pedir para ela fazer um trabalho melhor nessa parte, entendeu?
E talvez por ele estar utilizando ela de forma gratuita, ela simplesmente não utilizou a inteligência dela máxima para fazer esse vídeo aqui, tá? Então simplesmente é só para você entender que dá para fazer uma página perfeita, profissional, com poucos comandos, utilizando inteligência artificial, mas espera que tem mais coisa ainda. Bem, o próximo passo que eu vou pedir para ela aqui é simplesmente para melhorar as animações do site, deixar mais profissional ao carregar a página.
Também de quebra já pedi para ela deixar adaptado para mobile, para todo tipo de celular. Vou mandar aqui para ela fazer isso. A gente pode observar também que aqui no final ficou a logozinha da inteligência artificial, porque a gente tá utilizando ela de forma gratuita.
Tem várias formas para remover, mas nesse vídeo não vai dar tempo para fazer isso, mas tem como remover ela também, tá bom? Outra coisa que dá para fazer também é deixar o o vídeo mais leve, então antes de mandar aqui pra inteligência artificial, compactar ele, entendeu?
Para deixar a página mais rápida. Como não é o intuito esse vídeo aqui fazer isso, é simplesmente eu quero deixar essa informação para você. Outra coisa é otimizar a página de vendas.
Essa página no caso, né, não é uma página de vendas. qualquer página que você fazer, você tem que otimizar ela. Eu tenho um vídeo aqui que eu criei mostrando como fazer isso, mas aqui, como não é o intuito desse vídeo, eu também não vou fazer, mas eu quero deixar essas informações que são bastante importantes para você.
Bom, muita gente pode reclamar aí por que eu coloquei o Neymar nesse time, sendo que ele foi do Barcelona. Isso aqui é só uma questão educativa. Eu só peguei um design ali do Pinterest, peguei como referência e coloquei o Neymar nesse time aqui.
Mas só pra questão educativa, esse aqui poderia ser qualquer outro time na seleção brasileira, podia ser qualquer outro time, tá? É só para você entender como animar uma página, seja ela qual for, tá?
Acabou de finalizar aqui a animação. Olha só como ficou bem interessante, ó.
Bem suave, bem profissional. E para baixar essa página, para você utilizar em qualquer outro lugar, basta você pedir para ela, sei lá, compartil, gerar um arquivo HTML.
Gerem um arquivo, opa, HTML. E aqui tem vídeo eu mostrando como você vai baixar, isso no servidor para disponibilizar para todo mundo seu site na internet, tá?
Bem simples e fácil. Bom, já finalizou aqui.
Eu vou clicar em download, ó, pra gente baixar o nosso arquivo, colocar aqui em mesa. E aqui mesmo a gente pode abrir a pasta. Dá dois cliqu aqui pra gente ver como é que ficou a página de vendas.
E olha só como ela ficou profissional. Olha só que interessante. Muito legal, né?
Bora isso. Espero que você tenha gostado. Não esquece de deixar seu like e compartilhar esse vídeo com a pessoa que você simplesmente quer ajudar a criar uma página profissional e animada como essa daqui, tá bom?
Fica com Deus, um forte abraço e te vejo aonde? no próximo vídeo. Valeu.
Gostou do conteudo?
Compartilhe com amigos e continue acompanhando nosso blog para mais artigos como este.
Dê sua opnião deixe um comentário