Guia de imagens
Atualizado
Atualizado
Este guia traz orientações essenciais sobre como criar imagens adequadas para os componentes do LUCA SUPER TEMA no seu projeto. Seguir esses padrões garante uma melhor adaptação das imagens, proporcionando um design mais harmonioso e otimizado para diferentes dispositivos.
Para a maioria dos componentes, utilizamos três proporções universais de imagens:
Quadrado (1:1)
📏 Tamanho recomendado: 600px de largura x 600px de altura
Vertical (3:4)
📏 Tamanho recomendado: 600px de largura x 1075px de altura
Horizontal (4:3)
📏 Tamanho recomendado: 600px de largura x 335px de altura
Quadrado (1:1)
Lista de Categorias
Galeria Vertical
Vertical (3:4)
Carrossel de Produto com Capa
Horizontal (4:3)
1x Vertical
4x Horizontal
4x Quadrado (somente no mobile)
Os banners possuem duas áreas importantes:
📌 Área Total: O tamanho máximo que a imagem pode ocupar na tela.
📌 Área de Segurança: A zona onde devem estar as informações essenciais, garantindo que elas sejam sempre visíveis em diferentes telas e resoluções.
📏 Área total: 1920px de largura x 384px de altura (pode variar conforme a largura da loja).
📌 Área de segurança: 1280px de largura x 384px de altura.
📏 Área total: 744px de largura x 384px de altura (pode variar conforme a largura da loja).
📌 Área de segurança: 320px de largura x 384px de altura.
Cabeçalho Curto
Segue a mesma lógica do Banner Curto, mas com uma altura maior.
📏 Área total: 1920px de largura x 568px de altura (pode variar conforme a largura da loja).
📌 Área de segurança: 1280px de largura x 568px de altura.
📏 Área total: 744px de largura x 568px de altura (pode variar conforme a largura da loja).
📌 Área de segurança: 320px de largura x 568px de altura.
Banner Principal
O Banner Heróico se adapta automaticamente à altura do navegador do usuário, proporcionando uma experiência imersiva.
📏 Área total: 1920px de largura x 1080px de altura (pode variar conforme a largura da loja).
📌 Área de segurança: 1280px de largura x 1080px de altura.
📏 Área total: 744px de largura x 1133px de altura (pode variar conforme a largura da loja).
📌 Área de segurança: 320px de largura x 1133px de altura.
Galeria Heróica Interativa
Banner Heróico
Cabeçalho Heróico
Galeria Moderna Heróica
✅ Sempre priorize a área de segurança para garantir que textos e elementos importantes não fiquem cortados.
✅ Utilize imagens de alta qualidade e otimizadas para web, evitando arquivos muito pesados que possam comprometer o carregamento da loja.
✅ Evite margens excessivas na imagem, pois o corte pode variar dependendo do layout e dispositivo.
✅ Considere o alinhamento do conteúdo dentro das imagens para garantir um visual harmônico em diferentes telas.
Se tiver dúvidas ou sugestões, estamos à disposição no Discord ou por e-mail. Estamos aqui para ajudar!
