Antes: Como Criar um Modelo de Fotografia?
No editor de modelos (Template Editor) existem três métodos distintos para definir o fundo de um modelo e não devem ser confundidos. (1) Cor de Contexto da tela: é o plano de fundo que fica no nível mais baixo da tela, que não pode ser eliminado nem movido; pode ser apenas cor sólida ou gradiente, não permite imagem e é único. (2) Camada Color (Cor): é um bloco real preenchido com cor sólida ou gradiente, que pode ser movido, redimensionado e eliminado. (3) Camada Image (Imagem): é uma camada real que apresenta um ficheiro de imagem; transforma-se em fundo definindo o Ajustar como 'Capa', aumentando-a até cobrir a tela e descendo-a para o nível mais baixo com 'Mover para baixo'. O Método 1 é o plano de fundo; os Métodos 2 e 3 são camadas. O seletor de cor (sólido/gradiente) é igual tanto para o Método 1 como para o Método 2.
- Deve existir um modelo criado ou um modelo existente aberto em edição (o editor de modelos / a tela do Template Editor deve estar visível no ecrã)
- Do lado esquerdo deve estar visível o painel Camadas (com o item Tela no topo), do lado direito o painel Propriedades e, em cima, o botão Adicionar camada
- Para a camada de imagem, deve estar pronto o ficheiro de imagem (jpg/png) a utilizar no dispositivo
Passo a passo
Passo 1 · Conheça os painéis do editor
Editor de Modelos (Template Editor canvas)
Abra o editor de modelos. Reveja a estrutura do ecrã: à esquerda está o painel Camadas (com o item Tela no topo), à direita o painel Propriedades e, na barra superior, o botão roxo Adicionar camada e os botões de anular/refazer. Todas as operações de fundo são feitas através destes dois painéis.
🔎 Elementos no ecrã: Esquerda: painel Camadas + item Tela; Direita: painel Propriedades; Topo: botão Adicionar camada; barra de ferramentas flutuante inferior (ferramentas/zoom).
Passo 2 · Método 1 — Abra as propriedades da tela (plano de fundo não eliminável)
Editor de Modelos — painel Propriedades (Tela selecionada)
Clique no item Tela, no topo do painel Camadas à esquerda (ou clique numa zona vazia da tela para remover a seleção de todas as camadas). O painel Propriedades à direita passa a mostrar o título Tela; aí ficam visíveis as definições de Tamanho, Contexto e Impressão.
🔎 Elementos no ecrã: item Tela no painel Camadas; título Tela no painel direito, grupo Contexto.
Passo 3 · Método 1 — Abra o seletor de cor do fundo
Editor de Modelos — painel Propriedades (Tela selecionada)
No grupo Contexto do painel direito, clique na caixa de cor (a pequena amostra/swatch quadrada) ao lado da etiqueta Cor. Abre-se um seletor de cor. Este plano de fundo cobre toda a tela, atrás de todas as camadas; não é uma camada separada e não pode ser eliminado nem movido.
🔎 Elementos no ecrã: grupo Contexto, etiqueta Cor, caixa de cor clicável (color-result-swatch); ColorSettingPicker que se abre.
Passo 4 · Método 1 — Escolha uma cor sólida para o plano de fundo
Editor de Modelos — seletor de cor (Contexto)
No seletor de cor que se abre, certifique-se de que o separador Sólido no topo está selecionado. Escolha uma cor na roda de cores ou introduza #RRGGBB na caixa hex. A cor escolhida torna-se imediatamente o plano de fundo da tela. Se quiser um gradiente, avance para o passo seguinte.
🔎 Elementos no ecrã: separadores Sólido / Gradiente no seletor de cor; no modo Sólido, a roda de cores + a caixa de introdução hex.
Passo 5 · Definição de gradiente (comum ao Contexto e à camada de Cor)
Editor de Modelos — seletor de cor (modo Gradiente)
No seletor de cor, mude para o separador Gradiente. Escolha o tipo Linear ou Radial. Ajuste os dois pontos de cor assinalados com '1' e '2' (com a roda de cores ou com hex). Se o tipo for Linear, escolha a direção no menu Ângulo (8 opções: ↑ 0°, ↗ 45°, → 90°, ↘ 135°, ↓ 180°, ↙ 225°, ← 270°, ↖ 315°). A barra de pré-visualização na parte inferior mostra o resultado em tempo real. Este seletor é exatamente igual tanto para o 'Contexto' do Método 1 como para a camada Color do Método 2.
🔎 Elementos no ecrã: separador Gradiente; subseparadores Linear / Radial; pontos de cor '1' e '2'; menu 'Ângulo' apenas no Linear; barra de pré-visualização do gradiente na parte inferior.
Passo 6 · Método 2 — Adicione uma camada Color (Cor)
Editor de Modelos — menu Adicionar camada
Clique no botão Adicionar camada na barra superior; no menu que se abre, selecione o item Color (Cor). É adicionado à tela um bloco de cor de 200×200, preenchido com cinzento sólido (#CCCCCC). Trata-se de uma camada real que pode ser movida, redimensionada, rodada e eliminada — não é um plano de fundo.
🔎 Elementos no ecrã: botão Adicionar camada em cima; item Color no menu de tipos de camada que se abre (o nome no menu aparece em inglês).
Passo 7 · Método 2 — Defina o preenchimento da camada de cor
Editor de Modelos — painel Propriedades (camada de Cor selecionada)
Com a camada de cor selecionada, localize o grupo Cor no painel Propriedades à direita; clique na caixa de cor ao lado da etiqueta Preenchimento. Abre-se o mesmo seletor de cor do Método 1 — pode escolher cor sólida ou gradiente (como no passo 5).
🔎 Elementos no ecrã: grupo Cor no painel direito, etiqueta Preenchimento e caixa de cor; ColorSettingPicker que se abre (sólido/gradiente).
Passo 8 · Método 2 — Posicione o bloco de cor (utilize-o como plano de fundo, se quiser)
Editor de Modelos — Tela + painel Propriedades
Mova a camada de cor arrastando-a, redimensione-a com as pegas dos cantos ou introduza os valores X/Y/W/H no grupo Posição e tamanho e o valor de Opacidade. Se quiser usar o bloco de cor como um verdadeiro fundo, aumente-o até cobrir a tela e desça-o para o nível mais baixo com Mover para baixo (a diferença em relação ao Método 1: este bloco pode ser movido e eliminado).
🔎 Elementos no ecrã: moldura de seleção + pegas dos cantos; grupo Posição e tamanho (X/Y/W/H), Opacidade; botão Mover para baixo no painel Camadas.
Passo 9 · Método 3 — Adicione uma camada Image (Imagem)
Editor de Modelos — menu Adicionar camada
Clique no botão Adicionar camada em cima; no menu, selecione o item Image (Imagem). É adicionada uma camada de imagem vazia (Ajustar predefinido = Esticar/fill). Também esta é uma camada real que pode ser movida, redimensionada e eliminada.
🔎 Elementos no ecrã: item Image no menu Adicionar camada (o nome no menu aparece em inglês).
Passo 10 · Método 3 — Selecione o ficheiro de imagem
Editor de Modelos — painel Propriedades (camada de Imagem selecionada)
Com a camada de imagem selecionada, utilize o seletor de ficheiros no grupo Imagem do painel Propriedades à direita; no seletor de ficheiros nativo que se abre, escolha a imagem que pretende utilizar. A imagem passa a estar visível dentro da camada.
🔎 Elementos no ecrã: grupo Imagem no painel direito; componente FilePicker (seleção de ficheiros).
Passo 11 · Método 3 — Faça a imagem cobrir a tela (Ajustar → Capa)
Editor de Modelos — painel Propriedades (camada de Imagem selecionada)
No grupo Imagem, defina o menu Ajustar como Capa (Cover) — assim a imagem preenche a caixa da camada sem deixar espaços. De seguida, aumente a camada de imagem, com as pegas dos cantos ou com os valores W/H de Posição e tamanho, até cobrir toda a tela. No menu Alinhamento, ajuste a posição da imagem dentro da caixa. (Se quiser, pode aplicar arredondamento dos cantos com Raio e chroma key/green-screen com Remover fundo.)
🔎 Elementos no ecrã: grupo Imagem: menu Ajustar (Conter / Capa / Esticar), menu Alinhamento, Raio, Remover fundo + Cor do chroma key; pegas dos cantos da moldura de seleção.
Passo 12 · Método 3 — Envie a imagem para o nível mais baixo (Mover para baixo)
Editor de Modelos — painel Camadas (Ações)
Com a camada de imagem selecionada, na secção 'Ações' do painel Camadas à esquerda, prima repetidamente o botão Mover para baixo (ou ⌘[) até a imagem descer para o fundo de todas as camadas. Assim a imagem passa a ser o fundo; os espaços de fotografia, o texto e as restantes camadas ficam à frente dela. (Não existe um 'enviar para trás' num só passo; cada clique desce uma posição.)
🔎 Elementos no ecrã: grupo 'Ações' que aparece no painel Camadas quando há apenas uma camada selecionada: botões de ícone Duplicar, Mover para cima, Mover para baixo, Excluir (atalho ⌘[ / ⌘]).
A essência dos três métodos: Método 1 (Contexto da tela) = plano de fundo único, não eliminável/não movível, apenas cor/gradiente. Método 2 (camada Color) = bloco de cor/gradiente que pode ser movido/eliminado. Método 3 (camada Image) = imagem; para a transformar em fundo, Capa + aumentar + Mover para baixo.
O mesmo seletor de cor é utilizado tanto no plano de fundo Contexto como na camada Color; a definição sólido/gradiente é exatamente igual em ambos.
No gradiente editam-se apenas 2 pontos de cor ('1' e '2'). O Ângulo (direção) existe apenas no gradiente Linear; no Radial não há ângulo.
As alterações de cor/hex são aplicadas com um atraso de ~0,5 s (debounce) — se não mudar de imediato, aguarde um instante.
Para tornar uma imagem num fundo completo, defina obrigatoriamente o Ajustar como Capa e aumente a camada até ao tamanho da tela; se deixar apenas Conter, a imagem fica pequena ao centro.
Os nomes dos itens no menu Adicionar camada aparecem em inglês (Color, Image, Text ...); no entanto, os títulos no painel Propriedades à direita estão traduzidos (Cor, Imagem).
Se aumentar o bloco de cor (Método 2) até cobrir a tela e o descer para o nível mais baixo, comporta-se como um plano de fundo, mas, ao contrário do Método 1, pode ser movido e eliminado.
Procurar uma opção de imagem no grupo Contexto da tela: o plano de fundo é apenas cor ou gradiente; para uma imagem tem de adicionar obrigatoriamente uma camada Image (Imagem) (Método 3).
Adicionar a camada de imagem e esquecer-se de a enviar para o nível mais baixo com Mover para baixo: a imagem tapa os espaços de fotografia e o texto.
Deixar o menu Ajustar em Conter (Contain) e queixar-se de que a imagem não preenche a tela: para o fundo é necessário Capa (Cover) e a camada deve ser aumentada até ao tamanho da tela.
Pensar que a camada Color (Cor) é um plano de fundo permanente: é um bloco que pode ser movido/eliminado. Para um plano de fundo permanente e não eliminável, utilize o Método 1 ('Contexto' da tela).
Procurar uma 3.ª cor no gradiente: no seletor só é possível editar dois pontos ('1' e '2').
Procurar o Ângulo no gradiente Radial: o ângulo só aparece no gradiente Linear.
Tópicos relacionados
sablon-olusturma sablon-duzenleme
