# Fundos aesthetic: como criar os teus [Canonical HTML page](https://gradiently.design/pt-pt/guide/aesthetic-backgrounds) Os fundos que se descarregam são partilhados por toda a gente que encontrou a mesma página. Criar os teus demora uma tarde e o resultado combina com o teu telemóvel, o teu computador e as tuas publicações. ## The short version - Um fundo aesthetic é, normalmente, um campo de cor suave e de baixo contraste, com luz delicada e um pouco de textura, e não uma imagem carregada. - A maior parte dos visuais aesthetic nasce de uma paleta estreita: três a cinco cores próximas em luminosidade, com um tom ligeiramente mais profundo para dar profundidade. - Um toque de grão faz os gradientes suaves parecerem película ou papel e esconde as riscas que os gradientes lisos podem mostrar. - Cria um visual e exporta-o para cada formato que usas, como um fundo de telemóvel de 1080 por 1920, um de computador de 1920 por 1080 e uma publicação de 1080 por 1350. - Mantém a zona mais calma do fundo onde vão ficar o relógio, os ícones ou as palavras. Um **fundo aesthetic** é, na prática, um campo de cor suave com luz delicada e um pouco de textura: uma névoa de pêssego, uma manhã de salva, um crepúsculo de lavanda, um castanho escuro de película. Para criares o teu, escolhe três a cinco cores próximas em luminosidade, mistura-as suavemente com uma só fonte de luz delicada, acrescenta um toque de grão e exporta o mesmo visual para cada ecrã e formato que usas. O resultado parece calmo, pessoal e coerente, que é quase tudo o que as pessoas querem dizer com aesthetic. Este guia dá-te paletas prontas com códigos, o método para criares as tuas e um conjunto de tamanhos para que o telemóvel, o computador e as publicações combinem. Para a lógica das cores por trás disto, vê os [gradientes pastel](https://gradiently.design/pt-pt/guide/pastel-gradients) e as [noções básicas de teoria da cor](https://gradiently.design/pt-pt/guide/color-theory-basics). ## O que faz um fundo parecer aesthetic Se olhares com atenção para os fundos que as pessoas guardam e partilham, os mesmos traços repetem-se. Nenhum tem a ver com uma cor em concreto: têm a ver com contenção. - **Baixo contraste.** As cores ficam próximas em luminosidade, por isso nada salta à vista. - **Transições suaves.** As misturas são longas e graduais, sem arestas vivas. - **Uma fonte de luz.** Uma zona é ligeiramente mais clara, como a luz de uma janela, o que dá profundidade ao campo. - **Textura.** O grão fino ou o relevo do papel fazem-no parecer físico e não digital. - **Espaço.** Não há nada para olhar, e é exatamente isso que o torna bom atrás de ícones, palavras e fotografias. - Névoa de pêssego: `linear-gradient(160deg, #fde2d4 0%, #f9c6c9 50%, #e8c5e5 100%)` - Manhã de salva: `linear-gradient(180deg, #eef2e6 0%, #cfdcc4 55%, #a9bfa3 100%)` - Crepúsculo de lavanda: `linear-gradient(165deg, #e9e4ff 0%, #c9bdf2 50%, #9d8fd9 100%)` - Luz de manteiga: `radial-gradient(circle at 30% 20%, #fff6d6 0%, #fbe3a4 45%, #f2c78b 100%)` - Azul nuvem: `linear-gradient(180deg, #f3f7ff 0%, #d7e6fb 50%, #b9cfee 100%)` - Rosa de bailarina: `linear-gradient(180deg, #fff0f3 0%, #fbd3dc 55%, #f2aebf 100%)` - Dark academia: `linear-gradient(170deg, #4a3b33 0%, #2e241f 55%, #171210 100%)` - Filme da meia-noite: `radial-gradient(ellipse at 70% 20%, #3a3560 0%, #1c1a33 50%, #0d0c18 100%)` Oito fundos aesthetic como gradientes CSS únicos. Cada um mantém as cores próximas em luminosidade, e é isso que os torna calmos. Os visuais aesthetic claros e escuros seguem as mesmas regras ao contrário. Os claros mantêm todas as cores pálidas e deixam um tom ligeiramente mais profundo juntar-se num dos bordos. Os escuros mantêm tudo profundo e deixam uma única mancha mais quente ou mais brilhante fazer de luz, como um candeeiro numa sala escura. Os fundos escuros precisam ainda mais de grão, porque as bandas se veem sobretudo nas sombras; os [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) aprofundam o tema. ## Como criar o teu próprio fundo aesthetic 1. **Escolhe uma palavra de ambiente** Uma ou duas palavras: *domingo lento*, *manhã à beira-mar*, *biblioteca antiga*. Os ambientes levam a paletas com mais fiabilidade do que os nomes das cores. 2. **Reúne três a cinco cores** Recolhe-as de uma fotografia com esse ambiente, ou constrói-as à mão. Mantém-nas próximas em luminosidade, com um tom ligeiramente mais profundo. [Tirar uma paleta de uma fotografia](https://gradiently.design/pt-pt/guide/color-palette-from-image) mostra como. 3. **Escolhe a direção da luz** Decide de onde vem a luz, normalmente do topo ou de um canto superior. Põe aí a cor mais clara e deixa as restantes afastarem-se dela. 4. **Mistura com suavidade** Usa transições longas com as paragens bem espaçadas, ou algumas manchas radiais sobrepostas para um campo mais suave, como uma nuvem. Evita paragens bruscas. 5. **Acrescenta grão** Um pouco de ruído sobre a imagem toda. O suficiente para se sentir, não tanto que se veja à distância de um braço. Os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) explicam porque funciona. 6. **Exporta para cada formato** Desenha o visual em cada tamanho de que precisas, em vez de recortares uma só imagem, para que a luz fique no sítio certo. - Linho: #fbe9dd - Leite de alperce: #f4d3c2 - Argila rosa: #e9bfb4 - Malva empoeirado: #d7b8c9 - Profundidade: sombra de ameixa: #a88ca6 Uma paleta trabalhada para um ambiente de *domingo lento*: quatro tons quentes e próximos e uma ameixa mais profunda que acrescenta profundidade nos bordos. > **Porque é que os fundos suaves fazem bandas** Os gradientes suaves com cores próximas são exatamente onde os ecrãs mostram riscas, sobretudo em tons escuros e em imagens comprimidas. O grão esconde-as. Se vires bandas, lê [bandas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding). ## Fundos aesthetic para telemóvel, computador e publicações O objetivo de criares os teus é que tudo possa combinar. Cria um visual e exporta-o para cada sítio onde vive. Os telemóveis são os mais altos: muitos ecrãs modernos são mais altos do que 9:16, por isso exporta um fundo de telemóvel com altura extra, ou confirma o tamanho exato do teu ecrã, como se explica em [tamanho do papel de parede do telemóvel](https://gradiently.design/pt-pt/guide/phone-wallpaper-size). - Fundo de telemóvel 1080×1920: 1080 × 1920 - Computador 1920×1080: 1920 × 1080 - Publicação 1080×1350: 1080 × 1350 - Quadrado 1080×1080: 1080 × 1080 Um só aesthetic, quatro exportações. Coloca a luz em cada formato em vez de recortares uma única imagem. Cada formato tem as suas zonas carregadas. No ecrã de bloqueio de um telemóvel, o relógio fica perto do topo e as notificações a meio. Num computador, os ícones costumam alinhar-se num bordo. Numa publicação, as palavras precisam de uma zona calma. Move a fonte de luz para que a parte mais calma do campo fique por baixo desses elementos. Uma publicação vertical com um título curto sobre um fundo de gradiente suave e quente Uma publicação no estilo aesthetic: as palavras ficam na zona calma de cima. Um story vertical com uma frase curta sobre o mesmo gradiente suave da publicação O mesmo visual como story, desenhado para o formato mais alto em vez de recortado. ## Como evitar que pareça genérico Os gradientes pastel suaves são populares, o que quer dizer que as predefinições estão por todo o lado. Algumas pequenas escolhas tornam o teu reconhecivelmente teu. ### Genérico - Uma predefinição de duas cores de um gerador - Perfeitamente liso, sem textura - Iluminado por igual de canto a canto - Um visual diferente para telemóvel, computador e publicações ### Teu - Quatro ou cinco cores do teu próprio ambiente - Grão fino, como película ou papel - Uma fonte de luz clara - Um só visual desenhado para cada formato Se preferires partir de algo já trabalhado, o Mercado da Gradiently tem milhares de Marks, fundos de gradiente vivos com cor, material, luz, grão e movimento, que podes pesquisar por palavras de cor como "pêssego suave" ou "verde-azulado profundo" e com os quais podes criar designs gratuitamente. O Studio pode depois dispor o mesmo visual para o teu telemóvel, o teu computador e as tuas publicações. ## FAQ ### O que faz um fundo ser aesthetic? Normalmente uma paleta suave e de baixo contraste, transições delicadas, uma única fonte de luz e um pouco de textura, como grão. É a contenção, e não uma cor em particular, que dá o visual. ### Como faço um wallpaper aesthetic para o meu telemóvel? Escolhe três a cinco cores próximas, mistura-as com suavidade com a luz perto do topo, acrescenta grão fino e exporta num tamanho alto, com altura extra para telemóveis mais altos do que 9:16. ### Que cores são aesthetic? Quaisquer cores podem ser, se ficarem próximas em luminosidade e saturação. As famílias populares incluem pêssego e rosa, salva e creme, lavanda e azul-acinzentado, e castanhos profundos para ambientes mais escuros. ### Porque é que o meu fundo suave tem riscas? Os gradientes lisos entre cores próximas mostram bandas em muitos ecrãs, sobretudo depois da compressão. Acrescentar grão fino e exportar em alta qualidade costuma escondê-las.