A Inteligência Artificial (IA) está revolucionando a maneira como criamos conteúdo e, neste post, vamos demonstrar como utilizar duas IAs poderosas, o Midjourney e o ChatGPT, para desenvolver a página inicial de um site de relógios de luxo. Acompanhe o passo a passo e veja como essas ferramentas podem agilizar o processo criativo e gerar resultados surpreendentes.
O primeiro passo é definir o conceito da nossa página. Para isso, utilizamos o ChatGPT, um modelo de linguagem avançado, para gerar um esboço do site. Solicitamos ao ChatGPT que descrevesse o esboço de um site de relógios, incluindo um título H1, um slogan e um botão de chamada para ação. A IA nos forneceu algumas opções, e selecionamos a que melhor se adequava à nossa visão: título "Relógios Luxuosos de Alta Qualidade", slogan "Experimente a perfeição do tempo com nossos relógios luxuosos" e o botão "Confira Nossa Coleção".
Com o esboço em mãos, partimos para a criação da imagem com o Midjourney, uma IA especializada em gerar imagens a partir de descrições textuais. Dentro do ambiente do Discord, onde o Midjourney opera, inserimos o comando "/imagine" seguido da descrição "beautiful watch website landing page 8k". O Midjourney gerou quatro opções de imagens, e escolhemos a que mais se alinhava à nossa proposta, com espaço para o texto à esquerda. Para refinar ainda mais a imagem, adicionamos a palavra "landing" à descrição, resultando em novas opções ainda mais próximas do ideal.
Após selecionar a imagem final, fizemos o download em alta resolução para utilizá-la como base para a nossa página.
A imagem gerada pelo Midjourney, embora visualmente impressionante, apresentava textos distorcidos e ilegíveis, um desafio comum em IAs de geração de imagens. Para solucionar isso, importamos a imagem para o Photoshop. Criamos um novo documento com 1920x1080 pixels e um demarcador central de 1440 pixels de largura para simular a área visível do site em um monitor padrão, garantindo um respiro nas laterais. Ajustamos a imagem gerada pela IA para preencher o espaço demarcado, utilizando a ferramenta "Content-Aware Fill" para completar as áreas em branco que surgiram devido ao redimensionamento. Em seguida, utilizamos a ferramenta carimbo para limpar os textos ilegíveis gerados pela IA, preparando a imagem para receber os textos corretos.
Com a imagem de fundo pronta, importamos para o Figma para adicionar os elementos textuais e o botão de chamada para ação. Utilizamos uma grade de 12 colunas para organizar o layout. Escolhemos a fonte Playfair Display para o título principal "RELÓGIOS LUXUOSOS DE ALTA QUALIDADE", em letras maiúsculas, e a fonte Roboto para o slogan "Experimente a perfeição do tempo com nossos relógios luxuosos" e o texto do botão "Confira Nossa Coleção". O botão recebeu uma cor dourada e um ícone de seta para direcionar o clique. Adicionamos também um menu com as opções "Sobre", "Loja", "Contato" e "Login" na cor dourada, alinhados à direita. Para finalizar, inserimos um retângulo com uma máscara sobre a imagem para destacar a logo, também na cor dourada, e os itens do menu. Com todos os elementos em seus devidos lugares, finalizamos a primeira sessão da nossa landing page, combinando o poder criativo da IA com o refinamento das ferramentas de design.
