Formas, camadas e edição

Conceitos aplicados ao jardim na janela e critérios para adaptar.

Use este material para consultar as decisões do exemplo. Os SVGs editáveis estão no kit da trilha; as imagens de etapas ajudam a comparar o efeito de cada mudança.

Construir um objeto com formas simples

Comece pelo vaso: corpo trapezoidal, elipse superior e faixa escura da borda. No exemplo, o corpo vai de x=407 a 645 no topo, y=762, e estreita até perto de x=430 e 622 em y=929. Uma curva suave fecha a base. Essas medidas são coordenadas do desenho, não dimensões de um vaso real.

No Inkscape, desenhe retângulos e elipses com as ferramentas próprias. Para uma forma livre, use a ferramenta Bézier: cliques criam segmentos retos; arrastar ao criar um nó define alças de curva. Feche o caminho voltando ao primeiro nó. Ajuste o preenchimento para terracota e deixe o contorno sem pintura quando quiser uma borda definida só pela cor.

Em outro editor, procure as mesmas funções: criar forma, transformar, preencher e editar pontos. Não converta toda forma em caminho sem necessidade: um retângulo ainda paramétrico mantém controles úteis de canto. Converta quando precisar editar a geometria além dessas opções.

Desenhar folhas com poucos nós e alças úteis

Uma folha pode ser descrita por dois segmentos curvos: um da base à ponta e outro da ponta à base. No diagrama, os quadrados são extremos dos segmentos; os círculos são pontos de controle. A curva passa pelos extremos, mas normalmente não passa pelos controles.

No Inkscape, selecione o caminho com a ferramenta de nós. Mova o nó para mudar um ponto estrutural da silhueta; mova uma alça para alterar a direção e a extensão da curva próxima. Uma ponta pode ter um canto intencional enquanto a lateral permanece suave. Mais nós não tornam automaticamente uma folha mais natural: podem criar ondulações difíceis de controlar.

Use o diagrama para comparar a mesma forma com contorno e com preenchimento. Depois altere apenas uma alça no SVG de prática. Observe onde a silhueta muda e se a ponta continua legível. Se uma transição deveria ser suave, confira o alinhamento das alças dos segmentos que se encontram; se deveria ser um canto, preserve essa quebra.

Por que duas alças podem substituir muitos pontos

Uma curva Bézier cúbica combina quatro pontos: início P0, controle P1, controle P2 e fim P3. Os controles determinam como a curva sai do primeiro extremo e chega ao segundo. Eles não são pontos que a linha precisa atravessar. Essa distinção explica por que arrastar uma alça longe do contorno ainda modifica a folha.

O primeiro segmento do diagrama vai de P0=(180,420) a P3=(410,200), com controles P1=(130,280) e P2=(285,165). Como as coordenadas da tela crescem para baixo, um Y menor sobe no desenho. O controle inicial à esquerda/acima faz a curva sair da base naquela direção; o controle final acima/esquerda faz a curva chegar à ponta vindo de cima/esquerda. O segundo segmento volta à base por outro lado. São duas curvas e dois nós de encontro, com alças independentes em cada encontro.

Um cálculo que explica o efeito da alça

Para uma posição t entre 0 e 1, a curva é B(t)=(1−t)³P0 + 3(1−t)²tP1 + 3(1−t)t²P2 + t³P3. Você não precisa programar essa expressão para desenhar. Ela mostra que o ponto visto é uma combinação dos quatro controles, com pesos que mudam ao longo do segmento.

Em t=0,5, os pesos são 1/8, 3/8, 3/8 e 1/8. Aplicados aos números do diagrama, dão B=(229,375;244,375). A média simples entre os extremos seria (295;310), outro lugar. A barriga da folha aparece porque os controles puxam a trajetória para fora da linha reta. Se apenas P1 sobe 20 unidades, o ponto em t=0,5 sobe 7,5 unidades: 20 × 3/8. A influência não é uma translação uniforme de toda a folha.

Comparação para editar com intenção

Para estreitar a folha, aproxime as alças da linha que liga os extremos; para alargar um lado, afaste os controles daquele segmento. Para alongar a folha inteira, transforme o objeto ou mova a ponta, depois reavalie a curvatura. Essas operações respondem a perguntas diferentes. Acrescentar um nó cria mais controle local, útil numa mudança real de direção, mas também mais relações para administrar.

Num encontro suave, as alças de entrada e saída precisam manter direções compatíveis; comprimentos diferentes ainda podem alterar a curvatura. Num canto, elas podem apontar em direções diferentes. A ponta da folha do diagrama é um canto intencional. Tornar todos os nós suaves pode apagar o caráter da forma, assim como converter tudo em canto pode produzir quebras indesejadas.

Use a visualização de contorno para investigar a geometria e a forma preenchida para julgar a silhueta. São evidências complementares: uma curva matematicamente suave pode ser uma folha sem personalidade, e uma ponta com canto pode ser exatamente o resultado desejado. O limite é visual e editorial, não uma competição para usar o menor número possível de nós.

Separar preenchimento, contorno e transparência

Preenchimento ocupa a área da forma; contorno acompanha seu caminho. As folhas usam preenchimento verde sem contorno; as nervuras são caminhos abertos, sem preenchimento, com contorno claro de 3 unidades. A alça do regador é uma elipse sem preenchimento com contorno grosso.

No painel Fill and Stroke, confira as abas separadas antes de mudar a cor. Um caminho aberto com preenchimento pode mostrar uma região fechada implicitamente que você não pretendia desenhar. Para uma linha, use preenchimento “nenhum” e escolha largura e extremidade do contorno. Para uma massa de cor, feche o caminho e escolha o preenchimento.

Ao reduzir a imagem à metade, a nervura de 3 unidades fica próxima de 1,5 pixel. Se sumir, aumentar toda a ilustração no editor não resolve a saída pequena; aumente a espessura proporcional, simplifique ou aceite retirar esse detalhe. Contorno e preenchimento precisam funcionar no tamanho de uso.

Usar ordem, grupos e camadas para controlar a cena

Objetos desenhados depois aparecem sobre os anteriores. No jardim, a janela fica atrás da planta; os caules aparecem atrás das folhas; o vaso esconde a parte inferior do caule. Essa ordem explica profundidade mesmo sem perspectiva realista.

Uma camada organiza uma etapa ou região ampla; um grupo mantém objetos relacionados juntos. O SVG final tem camadas nomeadas: Background, Window, Table, Cast shadow, Stems, Leaves, Pot, Watering can e Light and details. Abra o painel Layers and Objects do Inkscape para localizar, ocultar ou bloquear partes. Bloquear o fundo evita selecioná-lo ao tentar mover uma folha.

Agrupar não funde a geometria. Entre no grupo para editar uma peça e saia para transformar o conjunto. Unir caminhos é outra operação e pode retirar independência das formas. Se você quiser mover planta e vaso juntos, agrupe também caules e detalhes associados; confira sombras e nervuras, que não acompanham uma folha apenas porque parecem estar sobre ela.

Conter detalhes com recorte ou máscara

O sol e a paisagem ultrapassam o arco da janela em suas formas originais. Um recorte usa o contorno da janela para mostrar apenas a região interna. A sombra do vaso também fica contida num recorte do corpo. Isso permite ajustar paisagem ou sombra sem redesenhar sua borda em cada versão.

No Inkscape, coloque uma cópia da forma de recorte acima do conteúdo, selecione ambos e use Object → Clip → Set. Guarde outra cópia se precisar do contorno visível da janela. O recorte controla o limite; uma máscara também pode controlar transparência gradual. Não trate os dois como sinônimos.

No Krita, uma máscara de transparência em uma camada de pintura usa branco para mostrar, preto para ocultar e cinza para visibilidade parcial. Pinte de branco para recuperar uma região ocultada. Em qualquer editor, verifique se você está editando o conteúdo ou a máscara; pintar na camada errada é uma causa comum de “a cor não aparece”.

Preservar a fonte e experimentar em cópias

Guarde o SVG editável como fonte e use nomes que expliquem versões: jardim-base.svg, jardim-paleta-fria.svg, jardim-final.svg. “Final-final2” não diz o que mudou. O kit separa massas, cores planas e acabamento para tornar a comparação explícita.

Antes de testar um recorte, união de caminhos ou mudança grande de proporção, salve uma cópia. Dentro do arquivo, bloqueie o que não está editando e nomeie os grupos pelo conteúdo. Não é necessário guardar uma camada para cada clique; organize pelo que você pode querer mover, recolorir ou ocultar junto.

Exportar PNG não substitui salvar a fonte. Se a mudança ficou boa, documente em uma frase a decisão que ela resolveu: “escureci folhas para separar do céu”. Esse registro ajuda a aprender e a retornar ao projeto; não é uma exigência de histórico dentro do sistema.

Levar os conceitos para pintura raster

Para pintar a mesma ideia no Krita, comece com um documento quadrado no tamanho de saída ou maior conforme a necessidade. Separe esboço, cores grandes e detalhes em camadas de pintura. Use pincel sólido para definir massas antes de texturizar. Uma máscara de transparência ajuda a esconder bordas sem apagar a pintura original.

Você também pode abrir o SVG em uma camada vetorial conforme os recursos do editor, mas confirme as formas e recortes. Se importar apenas o PNG como referência, ele chega como imagem achatada; não conserva a separação entre vaso e folhas. Pintar por cima pode ser uma escolha válida, desde que você saiba o que continua editável.

O conceito transferível é separar decisões: forma, cor, luz e detalhe. O gesto muda: uma alça ajusta a curva vetorial; um pincel modifica pixels. Mesa digitalizadora e pressão podem ajudar na pincelada, mas não são necessárias para entender composição nem para editar o exemplo vetorial com mouse.

Pedir ajuda à IA com uma decisão visual delimitada

Um pedido útil descreve intenção, partes preservadas e critério de conferência: “Sugira três paletas para uma cena calma de planta na janela; mantenha contraste entre folhas e céu; explique o papel de cada cor”. Isso produz alternativas que você consegue julgar, em vez de uma lista de adjetivos sem aplicação.

Para alterar SVG por código, trabalhe numa cópia e peça uma mudança pequena, como recolorir o vaso mantendo IDs, curvas e camadas. Reabra o arquivo, compare geometria e verifique se nenhuma imagem externa, fonte ou script foi acrescentado. O fato de o XML abrir não prova que a composição ficou boa.

Uma imagem gerada pode ajudar a explorar uma direção, mas não explica automaticamente como editá-la por camadas. Diferencie referência visual, raster final e fonte vetorial. Não envie trabalhos de clientes, rostos ou materiais restritos a um serviço sem entender autorização e condições de uso. Você pode usar o exemplo original desta trilha para praticar um pedido sem dados pessoais.

Diagnosticar seleção, recorte e cor no lugar certo

“Não consigo selecionar a folha”: confira camada bloqueada, objeto acima dela e se você está dentro do grupo correto. Use o painel de objetos para escolher pelo nome. “A folha virou um polígono estranho”: confira caminho selecionado, nós e alças antes de acrescentar pontos.

“Minha cor não aparece”: verifique preenchimento versus contorno, opacidade, camada oculta e se a edição aconteceu na máscara. “O detalhe desapareceu”: pode estar atrás de outro objeto ou fora do recorte. Libere o recorte numa cópia para investigar; não apague a forma de controle sem entender sua função.

“A exportação veio cortada”: confira se exportou Página, Desenho ou Seleção. “A borda parece serrilhada”: veja a resolução e o zoom da imagem raster; vetores também viram pixels quando exibidos. Mude uma variável por vez e compare com a fonte antes de reconstruir a cena inteira.

Referências

Fontes conferidas em 2026-09-26.

Abrir as checklists da trilha →