Modelos de exportação de storyboard SVG

O Painel de storyboard do Krita tem uma variedade de opções para exportar seus storyboards para formatos de arquivo PDF ou SVG.

As mais simples são as opções de layout procedural, como os modos “linhas”, “colunas” e “grade”. Usando esses modos, o Krita pode gerar um layout de página relativamente básico com apenas algumas configurações. Seja para uma visualização rápida e fácil ou em momentos de emergência, esses modos mostram bem o que você precisa ver.

No entanto, para o mais alto nível de controle e a melhor estética, a opção de layout que recomendamos é aquela que utiliza um arquivo de modelo SVG. Este arquivo de modelo, escrito à mão ou criado em um programa editor de SVG como o Inkscape, oferece controle total sobre onde e como os elementos do storyboard serão posicionados na página final exportada, com suporte total para camadas de fundo e sobreposição.

Usando um modelo SVG, você pode exportar storyboards que atendam às necessidades de qualquer projeto em que esteja trabalhando ou até mesmo que se ajustem às especificações exatas de um formato de papel de storyboard existente!

Modelo de exportação de storyboard SVG padrão do Krita

Para sua conveniência, o Krita vem com seu próprio modelo de storyboard SVG padrão, que você (claro) pode usar livremente em qualquer projeto, modificar conforme suas necessidades e estudar ao criar seus próprios arquivos de modelo SVG. (E, sem querer me gabar, mas eu diria que o visual também é bem legal!)

Então, se você está simplesmente procurando uma maneira incrível de exportar e apresentar os storyboards que você criou no Krita, pode parar de ler agora e usar o arquivo de modelo SVG que vem com os recursos padrão do Krita.

Se você ainda quiser ou precisar criar seu próprio arquivo de modelo de exportação de storyboard SVG, continue lendo!

Edição de vetor com o Inkscape

Embora seja perfeitamente possível escrever um desses arquivos de modelo SVG à mão (se você for um masoquista), a maneira que eu recomendo é usar um editor SVG como o Inkscape. Assim como o Krita, o Inkscape é um programa gratuito e de código aberto que você pode usar para criar arte vetorial, criar logotipos e muito mais. No nosso caso, vamos usá-lo para criar um arquivo de modelo que o Krita possa entender e trabalhar. O Inkscape é muito bom, então experimente! https://inkscape.org/

Este não será um tutorial completo do Inkscape nem nada (francamente, eu não conseguiria fazer um se quisesse), mas espero que esta página forneça os detalhes essenciais necessários para criar um modelo de exportação de storyboard funcional.

Modelo de exportação de storyboard padrão do Krita carregado no Inkscape. Caixas rotuladas são usadas para controlar o layout dos elementos. (Cores bonitas são opcionais.)

Criando seu próprio modelo de exportação de storyboard SVG

Configuração:

Depois de abrir o Inkscape, a primeira coisa que precisamos fazer é selecionar o Tamanho da página e a Unidade de exibição de nossa preferência. Ambas as configurações podem ser encontradas no menu “Arquivo > Propriedades do documento…” dentro do Inkscape. Decidi usar papel A4 e unidades em mm, mas qualquer uma que você preferir também deve funcionar.

Em seguida, precisamos criar algumas camadas específicas (background, layout e overlay) que o Krita reconhecerá e usará para desenhar nossa página corretamente. As camadas “background” e “overlay” são relativamente simples: tudo o que pertence à camada “background” será desenhado abaixo dos elementos do storyboard (imagens, comentários e outros metadados), e tudo o que pertence à camada “overlay” será desenhado sobre os elementos do storyboard. Se você deve usar essas camadas em seu próprio modelo de exportação de storyboard depende de suas necessidades e de como você cria sua folha de storyboard. Por fim, a camada “layout” é onde colocaremos os vários retângulos que usaremos para informar ao Krita exatamente onde queremos que nossos elementos do storyboard apareçam. Abordaremos esse processo em detalhes mais tarde, mas primeiro precisamos configurar as camadas corretamente.

No momento em que este artigo foi escrito, o Inkscape tornou um pouco mais complicado alterar o ID das nossas camadas. Primeiro, precisamos abrir o painel Objeto > Objetos… do Inkscape, onde podemos ver todas as nossas camadas, grupos e outros objetos SVG. Clique em + e crie uma camada chamada “background”, depois novamente com o nome “layout” e, por fim, outra chamada “overlay”.

A próxima parte é importante! Você deve ter 3 camadas agora, mas como usamos o atributo ID do objeto SVG, precisamos trabalhar um pouco mais para garantir que o Krita reconheça nossas camadas. Se você selecionar sua camada e abrir o painel Objeto > Propriedades do objeto… ​​do Inkscape, verá que tudo fica acinzentado e não podemos alterar o parâmetro “ID”! Veja como contornar isso: primeiro, precisamos converter nossas camadas em grupos clicando no ícone na coluna T no painel Objetos… do Inkscape. Assim que todas as três camadas estiverem agrupadas, podemos abrir o painel Propriedades do Objeto… ​​e editar o parâmetro “ID”. O ID de cada camada deve ser “background”, “layout” e “overlay”, respectivamente.

Aviso

Outra coisa estranha é que, atualmente, o Inkscape exige que você pressione Enter ou clique no botão Definir depois de alterar o ID, então certifique-se de pressionar Enter ou clicar em definir!

Depois de garantir que cada um dos seus grupos recebeu o ID apropriado, a última coisa que você precisa fazer é converter seus grupos novamente em camadas, da mesma forma que fizemos antes, clicando no ícone na coluna T.

Dica

Ok, isso foi um pouco mais complicado do que queríamos, mas a partir daqui é só ladeira abaixo! Se você tiver problemas ao criar seu modelo, provavelmente a culpa será de alguma parte dessa última etapa, então vale a pena conferir se cada uma das suas camadas tem o ID correto. (Aliás, o ID também pode ser editado manualmente usando um editor de texto, mas isso provavelmente está fora do escopo deste tutorial.)

Ufa… Ok. Então agora as coisas serão [um pouco] mais divertidas…

Visuais do plano de fundo e da sobreposição:

Neste ponto, você tem a opção de adicionar os elementos de design visual que desejar às camadas “background” e “overlay”. Se você tiver um pedaço de papel de storyboard que queira usar, recomendo colocá-lo na camada “background” e, se quiser sobrepor alguns painéis ou texto, recomendo adicioná-los à camada “overlay”. Lembre-se: tudo na camada “background” será renderizado sob os elementos do storyboard, e tudo na camada “overlay” será renderizado por cima.

Nota

A partir do Inkscape 1.1, novos objetos são adicionados automaticamente à camada selecionada ou à qual você adicionou algo pela última vez. Assim, acho mais fácil trabalhar em uma camada de cada vez.

Aviso

Além disso, a partir do Inkscape 1.1, percebi que o texto frequentemente é transformado de maneiras estranhas, fazendo com que apareça corretamente no Inkscape, mas no lugar completamente errado no Krita e em outros programas! Não sei por que isso acontece nem como consertar, mas sei como contornar isso. Se você usa elementos de texto e tem problemas com eles não aparecendo onde deveriam, recomendo convertê-los em caminhos com a função Caminho > Objeto para caminho.

Básico sobre o Layout:

Quando nossa página estiver do jeito que queremos, estamos prontos para preencher a camada “layout”.

O Krita usará os retângulos que você inserir nesta camada para determinar onde colocar os diversos elementos do storyboard, incluindo imagens, comentários e metadados. Por exemplo, o Krita encontrará todos os retângulos que possuem rótulos que começam com a palavra “image” (image0, image1, image2, etc.) e os substituirá pelas imagens do seu storyboard. Legal, né?

Dica

Por razões de organização, gosto de codificar cada retângulo por tipo (por exemplo, deixando todas as imagens vermelhas e os comentários verdes), mas como nada nesta camada é desenhado, isso não faz diferença visual. Os retângulos nesta camada são usados ​​estritamente para posicionamento e serão substituídos pelo conteúdo dos seus storyboards!

Não importa como você chega ao resultado final, mas acho que uma boa maneira de fazer isso rapidamente é primeiro colocar retângulos para os vários elementos de um único storyboard, selecionar todos e criar cópias para quantos quadros você quiser que caibam na sua página. Para o modelo padrão de exportação de storyboard do Krita, decidimos que seria interessante ter 5 storyboards com 2 trilhas de comentários por página. A escolha de como você deseja organizar as páginas do storyboard é sua.

Então vamos criar o layout de um storyboard…

Aviso

Não se esqueça de salvar!

Criando seu layout (Parte 1):

A primeira coisa com a qual eu começaria é o retângulo image. Com a camada “layout” selecionada no Inkscape, arraste um retângulo para onde você deseja que a primeira imagem do storyboard seja colocada. Para informar ao Krita que queremos substituir este retângulo pela primeira imagem do storyboard desta página, basta renomeá-lo para algo como “image0” ou “image1” (o número não importa tanto quanto a ordem).

Dica

Depois de renomear seu retângulo, você pode abrir o painel Propriedades do objeto… ​​do Inkscape para ver que o atributo “label” foi alterado. Este atributo “label” é o que o Krita procura ao posicionar elementos, por isso é muito importante! Se algo estiver aparecendo no lugar errado, você provavelmente se esqueceu de alterar o rótulo (…ou clicar no botão “definir”).

Agora fazemos o mesmo para os comentários. Como criador do modelo, cabe a você decidir quantas faixas de comentários deseja suportar e para que elas devem ser usadas e nomeadas. Como mencionei acima, optei por duas faixas de comentários no modelo padrão. Uma, chamada simplesmente de “comentário”, pode ser usada para o que você quiser, mas provavelmente para uma breve descrição da ação em cada cena, e deve corresponder ao nome padrão de uma faixa de comentários no Krita. A outra, chamada de “som”, deve ser usada como uma descrição do áudio durante cada corte, incluindo diálogos, efeitos sonoros e música de fundo. Tendo estudado alguns dos livros de storyboard que possuo de séries que adoro, decidi colocar “som” no lado esquerdo da imagem e “comentário” no lado direito.

Nota

Como queríamos oferecer suporte a qualquer número de faixas de comentários com qualquer nome, o usuário precisa garantir que os nomes das faixas de comentários no Krita Painel de storyboard correspondam aos rótulos dos retângulos no modelo de exportação de storyboard SVG que ele está usando. Por exemplo, se você estiver usando o arquivo de modelo de exportação de storyboard padrão do Krita, deverá nomear suas faixas de comentários como “comment” (o nome padrão, aliás) e “sound”, respectivamente. Da mesma forma, independentemente do nome que você escolher para os retângulos de comentários em seu modelo, seus usuários terão que seguir o mesmo esquema de nomenclatura dentro do Krita. Isso é importante!

Os últimos retângulos de layout que devemos adicionar antes de prosseguirmos são para metadados. Um retângulo chamado “shot” será substituído por um número exclusivo de tomada do storyboard, e um retângulo chamado “time” será substituído pela duração da tomada, expressa no formato “Segundos + Quadros”. É claro que, assim como as caixas “image” e “comment”, essas caixas “shot” e “time” serão duplicadas posteriormente para cada um dos storyboards que queremos em nossa página. A partir daí, só nos restam os retângulos “page-number” e “page-time”. Provavelmente, precisamos apenas de um deles por página, já que “page-time” representa a duração total de todas as tomadas naquela página e “page-number” é, bem… o número da página.

Criando seu layout (Parte 2):

OK! Neste ponto, devemos ter retângulos suficientes para uma única tomada de storyboard, incluindo uma caixa de “image”, provavelmente uma ou mais caixas de “comment”, uma caixa de “shot”, uma caixa de “time”, bem como as caixas específicas de “page-number” e “page-time”. Estamos quase terminando!

Tudo o que precisamos fazer agora é decidir quantos quadros queremos em nossa página, duplicar o layout inicial específico do quadro algumas vezes e, então, dar a cada um dos objetos seus nomes finais numerados.

Vá em frente e duplique suas caixas de “image”, comentário(s), “shot” e “time” até preencher sua página.

Dica

Os guias e os poderosos recursos de ajuste do Inkscape tornam a organização de todos os elementos do seu storyboard muito fácil!

Quando estiver pronto, só precisamos garantir que cada retângulo tenha um rótulo exclusivo que termine com um número. Como mencionei acima, esses rótulos e os números pendurados nas extremidades informarão ao Krita exatamente qual imagem, comentário, número da foto, etc., deve ser colocado e onde.

Começando com as caixas de “imagem”, vamos numerá-las de uma ponta à outra, como “image0”, “image1”, “image2” e assim por diante. Para o modelo padrão, criei 5 storyboards, e cada um tem uma caixa de “imagem” com numeração lógica de cima para baixo. Faça o mesmo com as caixas de “tomada” (“shot0”, “shot1”, etc.) e, em seguida, com as caixas de “tempo” (“time0”, “time1”, etc.).

Por fim, precisamos fazer os comentários usando o mesmo método. A grande diferença é que você decide quantas faixas de comentários deseja ter e como elas são chamadas. Lembre-se: o nome que você escolher deve corresponder aos nomes que o artista do storyboard usa para suas faixas no painel do storyboard do Krita! Usei o nome padrão “comment” (“comment0”, “comment1”, etc.), assim como “sound” (“sound0”, “sound1”, etc.).

Depois de todo esse processo, cada um dos retângulos na sua camada “layout” deve ter um nome único e lógico.

E pronto! Salve seu modelo de exportação de storyboard como um arquivo SVG, use-o para exportar alguns storyboards e delicie-se com suas lindas páginas de storyboard personalizadas.

Nota

Este é um sistema complicado, mas razoavelmente flexível. É claro que, como o Krita é um projeto de código aberto e conduzido pela comunidade, entre em contato com a equipe de desenvolvimento se tiver ideias (ou, melhor ainda, um patch!) sobre como podemos melhorar ou desenvolver este sistema.