🎨 Página artística elegante
🎨 Página artística elegante
Prévia
Descrição
Transforme o conteúdo em uma página web artística no estilo desenhado à mão. Ilustrações delicadas com linhas e combinações de cores trazem calor e bom gosto às suas informações.
Recomendado por
nene@YouMind
Por que recomendamos esta habilidade
Transforma seu conteúdo em uma página web artística desenhada à mão, unindo design moderno e estética clássica. Gera ilustrações personalizadas e utiliza cores e fontes refinadas para criar uma página com arte e personalidade de marca, destacando seu produto.
Instruções
Crie uma página web com base no conteúdo fornecido pelo usuário. Os requisitos de estilo da página web são os seguintes:
### I. Posicionamento do Estilo Visual - **Estilo Artístico Desenhado à Mão**: Adotando um estilo de arte linear, combinando design digital moderno com a estética tradicional do desenho à mão. - **Esquema de Cores**: Utilizando cores neutras (branco-sujo/cinza claro) como base, combinadas com texto principal em cinza escuro, e usando vermelho-alaranjado (cor de destaque) como cor focal visual. - **Tom da Marca**: Refinado, artístico e acolhedor, direcionado a um grupo de usuários exigentes. ### II. Princípios da Estrutura do Layout **Seção Principal (Design da Primeira Tela)** - Layout de colunas da esquerda para a direita (proporção áurea 60:40) - Lado esquerdo: - Título grande (Fonte de exibição, 72-96px), fonte escura, forte impacto visual - Dados principais destacados em cor de destaque (ex.: "15 Cidades, 4749 locais") - Texto de subtítulo conciso e impactante, declarando a proposta de valor principal - Amplo espaço em branco, criando uma sensação de alta qualidade - Lado direito: - Ilustrações personalizadas desenhadas à mão, ocupando 50% do espaço visual - Estilo de ilustração consistente: desenho de linha + detalhes em cores locais - Conteúdo da ilustração profundamente integrado à história da marca - **Design da Barra de Navegação** - Navegação superior minimalista, posicionamento fixo - Logotipo + 2-3 itens do menu principal - Grupo de ícones do lado direito (pesquisa/favoritos/menu) - Fundo transparente ou branco puro com sombras sutis - **Área do Cartão de Conteúdo** - Layout de grade de cartões (3-4 colunas, responsivo) - Cada cartão inclui: - Título (Título 3, 32-40px) - Descrição (2-3 linhas, 16-18px, altura da linha 1,6) - Ilustração complementar desenhada à mão (consistente com o estilo visual principal) - Fundo claro (#F5F3F0), cantos arredondados (8-12px) - Estado ao passar o mouse: Levemente levantado + sombra mais profunda - ### III. Especificações do Sistema de Ilustração **Diretrizes para Criação de Ilustrações** 1. 2. **Processamento de Linhas**: - Use linhas irregulares desenhadas à mão de 1-2px para simular uma textura de pintura realista - Mantenha linhas suaves com um toque de artificialidade, evitando um aspecto mecânico excessivo. 3. **Uso de cores:** - 80% de linhas cinzas + 20% de preenchimento na cor da marca - Laranja-avermelhado usado apenas para enfatizar elementos (pessoas, janelas, edifícios principais) - O fundo usa um degradê bege (#FDFBF7 → #F5F1EB) - 5. **Composição da cena:** - Cenas urbanas: mesclando edifícios icônicos com cenas do cotidiano - Perspectiva aérea ou isométrica - Adição de pequenas figuras para aprimorar a narrativa e a intimidade - 7. **Densidade de detalhes:** - Detalhes ricos em primeiro plano, plano médio moderadamente simplificado e fundo delineado - Manter a hierarquia visual, guiando o olhar para as informações principais - 9. ### IV. Sistema de fontes - **Fonte de exibição (título):** Fonte serifada, robusta e imponente (ex.: Freight Display, Tiempos) - **Fonte do corpo do texto:** Fonte sem serifa, altamente legível (ex.: Inter, Manrope) - **Proporção do tamanho da fonte**: Usa uma escala modular (1,25 ou 1,333) - - **Níveis de peso da fonte**: Leve (300) / Regular (400) / Médio (500) / Negrito (700) - ### V. Detalhes de interação - - **Microanimações**: Os cards flutuam de 4 a 8 pixels ao passar o mouse, tempo de transição de 300 a 400 ms - - **Status de carregamento**: Usa uma tela de esqueleto para manter o tom da marca - - **Pontos de interrupção responsivos**: - - Desktop: 1440px+ - - Tablet: 768-1439px - - Celular: 375-767px - - ### VI. Requisitos de Design Cada design deve incluir: 1. Hierarquia visual clara (obtida através de tamanho/cor/espaço em branco) 2. Pelo menos uma ilustração personalizada (profundamente relacionada ao conteúdo, gerada usando o Nano Banana Pro) 3. 2. 2 a 3 destaques em cores contrastantes (não excedendo 120px) 4. Espaço amplo (espaçamento entre seções ≥ 120px) 5. Caminho de ação do usuário claro 6. --- **Filosofia de Design**: Use uma linguagem visual artística para transmitir a singularidade e o aconchego da marca. Cada pixel serve para contar uma história, não apenas para exibir funcionalidades. O design deve fazer com que os usuários sintam: "Isto é para pessoas que apreciam a vida", em vez de um produto frio e comercial.
Todas as ilustrações da página web foram geradas pelo nano banana pro.
Habilidades relacionadas
Ver tudo
Página webPágina Fashion Creative Design
Sistema de design web no estilo de pôsteres de moda editorial: tela de papel creme quente (#fffef7), títulos grandes com peso 300 (64–84px), fotografias com sangria total, sem sombras, cartões com cantos retos e botões com raio de pílula de 1440px. Ideal para necessidades como "estilo fashion design", "layout de revista", "estilo pôster", "página de livro de arte", "portfólio de estúdio", "página de galeria", etc. Pode transformar qualquer conteúdo em uma página no estilo editorial de alta moda.
Ilustração semirrealista
Você também já se viu diante destes desafios na hora de se expressar visualmente? Sua marca precisa transmitir uma sensação de “sofisticação”, mas as ilustrações totalmente planas parecem sem graça, sem calor e sem textura? Você quer usar um estilo realista para mostrar os detalhes de um produto, mas teme que a imagem fique complexa demais e roube a atenção do conteúdo? Como representar conceitos abstratos, narrativas emocionais ou ideias complexas? Por mais que você tente, parece que “falta alguma coisa”: ou fica literal demais, ou difícil de compreender? Você vasculha bancos de imagens, mas não encontra uma ilustração que seja moderna e elegante, ao mesmo tempo que traduza com precisão a ideia central? O que buscamos é uma linguagem visual “na medida certa” — com design, sem perder a realidade; simples e marcante, mas também delicada e interessante de observar. Agora, basta inserir um texto para gerar uma ilustração semiplana e semirrealista, dando à sua marca, ao seu conteúdo ou ao seu conceito um apelo visual único. O que é? Uma ferramenta inteligente de geração que transforma textos em ilustrações modernas, semiplanas e semirrealistas. Ela combina com equilíbrio os contornos simples da ilustração plana com a iluminação suave e a sensação de volume do estilo realista, encontrando o ponto de equilíbrio mais elegante entre o “simples demais” e o “complexo demais”. Como usar? Em três passos simples Insira seu texto — seja uma história de marca, um monólogo emocional, uma descrição de produto ou um conceito filosófico abstrato, a ferramenta captura com precisão a ideia central; (opcional) Ajuste suas preferências de composição ou de cores — você pode definir a direção visual ou deixar que a ferramenta crie livremente; Gere — uma ilustração com composição cuidadosa, cores sofisticadas e textura delicada aparece na hora. Você não precisa saber desenhar: basta dizer “o que comunicar”, e a ferramenta cuida de “como desenhar”. O que torna sua linguagem visual única? Contornos, mas não planos — preserva as linhas limpas e modernas da ilustração plana, mas usa sombras suaves e uma sensação sutil de volume para dar presença aos objetos e evitar que pareçam sem graça; Realista, mas não fotorrealista — dispensa a complexidade dos detalhes em nível fotográfico e mantém apenas o calor proporcionado pela luz e pelos materiais, criando imagens críveis e abertas à imaginação; Limpa, mas não vazia — usa sempre um fundo branco puro, concentrando todo o foco visual no tema principal e garantindo uma imagem limpa, contida e sempre centrada na mensagem que você deseja transmitir. Cada obra encontra um equilíbrio sutil entre “design” e força narrativa. Em quais situações ela pode ser usada? Visualização de histórias de marca — ilustrações modernas personalizadas para a identidade da sua marca, transmitindo símbolos visuais contidos e sofisticados; Imagens para conteúdos aprofundados — faça com que artigos, relatórios ou colunas deixem de ser monótonos, criando uma sintonia entre imagem e texto; Descrição de produtos / apresentação de conceitos — transforme funções complexas ou ideias abstratas em uma linguagem visual direta e elegante; Quadros decorativos / design de capas — imagens limpas e sofisticadas, naturalmente adequadas para livros, álbuns ou decoração de ambientes. Você recebe mais do que uma imagem Você receberá uma ilustração limpa, sem qualquer interferência de texto, acompanhada de uma análise do estilo visual — uma breve explicação sobre a escolha da composição, da iluminação e das cores para dialogar com seu texto. Isso ajuda a compreender melhor a lógica de design por trás da imagem e também facilita a apresentação da ideia à sua equipe.
Paisagem em aquarela japonesa
Com um clique, transforme fotos de paisagens e cenas urbanas em ilustrações artísticas em aquarela, desenhadas à mão e com estilo de galeria japonesa, acompanhadas de amplos espaços em branco e uma delicada composição tipográfica manuscrita. ✨ Destaques Estética de galeria com espaços em branco: o tema aparece pequeno e centralizado, cercado por amplas áreas vazias em papel de algodão bege-claro, com a qualidade visual de artigos de papelaria modernos e impressões artísticas. Textura autêntica de aquarela feita à mão: reproduz naturalmente aguadas, camadas de cores translúcidas e bordas soltas de desenho manual, evitando contornos rígidos e aparência digital. Síntese inteligente da cena: preserva os principais pontos de referência, os contornos arquitetônicos e a luz característica da imagem original, simplificando naturalmente fundos complexos e objetos desnecessários. Tipografia manuscrita poética: na parte inferior, adiciona automaticamente uma frase curta e poética, acompanhada do ano, em lettering manuscrito em tons de cinza-escuro ou azul-marinho, criando uma atmosfera cotidiana serena e contida. 📸 Ideal para Recriar memórias de viagem: transforme ruas, lojinhas, montanhas e paisagens litorâneas da viagem em cartões-postais retrô. Criação de produtos autorais: papéis de parede para celular, pôsteres de papelaria, cartões-postais físicos e impressões decorativas. Imagens para redes sociais: crie capas visuais contidas, sofisticadas e consistentes para plataformas como Xiaohongshu e WeChat Moments. 🚀 Como usar Envie qualquer foto de paisagem, arquitetura ou cena urbana com uma composição bem definida para gerar automaticamente uma impressão artística em aquarela minimalista no mesmo estilo.
Informações
- Versão
- v1
- Última atualização
- Créditos por execução
- Conforme o uso
- Modelos
- Automático