Usando o Lolly

Um guia prático para de fato usar o app - abrir uma ferramenta, trabalhar na tela, exportar, salvar e compartilhar. Tudo aqui roda no seu dispositivo: sem conta, sem upload, sem necessidade de internet depois do primeiro carregamento.

Novo por aqui? O Guia rápido coloca você para criar em minutos, e Lolly para Operadores explica como instalar/implantar o app; esta página é sobre como usá-lo depois que já está aberto.

Abrindo uma ferramenta

A tela inicial é a galeria - todas as ferramentas, agrupadas por categoria. Clique em um cartão para abrir a ferramenta; se você já trabalhou nela antes, um botão Continuar retoma sua sessão mais recente. Use a caixa de busca para filtrar por nome - ou a Busca na barra ao pé das seis telas de listagem (a galeria, Utilitários, Projetos, o Catálogo, o Painel e o Perfil), que alcança seu trabalho salvo, o catálogo e suas configurações além das ferramentas. Dentro de uma ferramenta, a barra dá lugar aos controles da própria ferramenta.

A galeria de ferramentas - cada ferramenta como um cartão, agrupadas por categoriasigned by Lollyvector SVGVerifique você mesmoGet the signed file281 paths~38k nodes443 groups6 images2.269 KBA galeria de ferramentas - cada ferramenta como um cartão, agrupadas por categoriasigned by Lollyvector SVGVerifique você mesmoGet the signed file281 paths~38k nodes443 groups6 images2.265 KBTry it in the app

Cada ferramenta é uma visualização dividida: controles de um lado, uma pré-visualização ao vivo (a tela) do outro. Altere qualquer controle e a pré-visualização é atualizada instantaneamente.

A visão dividida de uma ferramenta - a pilha de controles à esquerda, e o gráfico de barras agrupadas ao vivo que ela desenha à direitasigned by Lollyvector SVGVerifique você mesmoGet the signed file23 paths372 nodes11 groups21 KBA visão dividida de uma ferramenta - a pilha de controles à esquerda, e o gráfico de barras agrupadas ao vivo que ela desenha à direitasigned by Lollyvector SVGVerifique você mesmoGet the signed file23 paths372 nodes11 groups21 KB

Algumas ferramentas (como o Design) abrem, em vez disso, como uma tela livre - uma superfície sem interface, de manipulação direta, onde você arrasta, redimensiona, gira e encaixa caixas de texto, formas e imagens, e clica duas vezes para editar o texto no local. Ela exporta pelo mesmo caminho de renderização de qualquer outra ferramenta, então a tela é o arquivo. Veja A tela livre abaixo.

Duas maneiras de moldar a própria grade e deixá-la do jeito que você quer:

O fim da grade de Ferramentas com as ferramentas ocultas reveladas: o cartão esmaecido do Gerador de QR Code e, ao lado dele, o bloco cinza que o trouxe de volta à vista, agora escrito Ocultar ferramentas ocultassigned by Lollyvector SVGVerifique você mesmoGet the signed file251 paths~29k nodes440 groups658 KBO fim da grade de Ferramentas com as ferramentas ocultas reveladas: o cartão esmaecido do Gerador de QR Code e, ao lado dele, o bloco cinza que o trouxe de volta à vista, agora escrito Ocultar ferramentas ocultassigned by Lollyvector SVGVerifique você mesmoGet the signed file247 paths~29k nodes439 groups1 image729 KB

Ask Lolly

Quando você prefere perguntar em vez de procurar, o Ask Lolly (#/ask) recebe uma pergunta digitada e devolve a seção correspondente desta documentação na íntegra - as palavras dos próprios guias, não um resumo nem uma geração - com a página de origem citada e um link Abrir na documentação ao lado. Abaixo da resposta ficam os lugares do app que a mesma pergunta encontra: uma ferramenta, uma configuração, um projeto salvo, cada um como um botão que simplesmente leva até lá.

A transcrição é memória de sessão: faça uma pergunta de acompanhamento e a conversa vai se acumulando conforme você avança; recarregue a página e ela começa do zero. Os resultados de busca trazem uma linha *Ask Lolly: sua consulta*** no fim - abaixo dos resultados concretos que os outros grupos encontraram - que passa a pergunta adiante, então você pode começar na barra e terminar aqui.

A tela (pré-visualização)

A pré-visualização sempre mostra exatamente o que será exportado.

Desktop

O HUD de zoom no canto da tela - menos, a porcentagem ao vivo, mais, Fit, depois os interruptores de tema e somsigned by Lollyvector SVGVerifique você mesmoGet the signed file5 paths199 nodes11 groups7 KBO HUD de zoom no canto da tela - menos, a porcentagem ao vivo, mais, Fit, depois os interruptores de tema e somsigned by Lollyvector SVGVerifique você mesmoGet the signed file5 paths186 nodes11 groups7 KB

Toque

Clique para ir direto a um controle: clique em qualquer elemento do design e o campo correspondente na barra lateral recebe foco e é rolado até ficar visível - no caso de um grupo de linhas repetidas, ele abre exatamente a linha que você clicou, então editar o que você vê está a um toque de distância.

Uma mudança de dimensão sempre encaixa a visualização de volta a um ajuste limpo.

A tela livre (Design)

Ferramentas de tela livre adicionam uma superfície de trabalho ao redor da prancheta, como a mesa de composição de um designer:

O canvas livre do Design - a prancheta com a área de trabalho ao redorsigned by LollyPNGVerifique você mesmoGet the signed filepixels, not shapes543 KBO canvas livre do Design - a prancheta com a área de trabalho ao redorsigned by LollyPNGVerifique você mesmoGet the signed filepixels, not shapes490 KB

Espelhe uma seleção. Clique com o botão direito em qualquer caixa e escolha Espelhar horizontalmente ou Espelhar verticalmente para espelhá-la no lugar, ou pressione Shift+H / Shift+V no teclado - Shift, porque um V isolado é a ferramenta Ponteiro. Cada caixa selecionada se espelha em seu próprio eixo em um único passo de desfazer, e o espelhamento é uma transformação real, então ele permanece no SVG, PDF e PNG exportados, não só no canvas.

Desenhando suas próprias formas (a caneta)

Caixas, círculos e molduras arredondadas cobrem a maioria dos layouts. Quando você precisa de uma forma que não está nessa lista, desenhe-a: o botão Caneta da barra (ou a tecla P) coloca você no modo de desenho. Três teclas únicas alternam entre os modos - V de volta ao Ponteiro, P para a Caneta, N para a ferramenta de nós (Editar pontos) - e o Ponteiro é sempre a saída de onde quer que você esteja.

A barra de ferramentas da tela livre: uma alça de arraste, o menu do Lolly, depois Ponteiro, Adicionar uma caixa, Caneta, Editar pontos, Linha, Linha do tempo, Pranchetas e Organizar automaticamentesigned by Lollyvector SVGVerifique você mesmoGet the signed file36 paths206 nodes31 groups22 KBA barra de ferramentas da tela livre: uma alça de arraste, o menu do Lolly, depois Ponteiro, Adicionar uma caixa, Caneta, Editar pontos, Linha, Linha do tempo, Pranchetas e Organizar automaticamentesigned by Lollyvector SVGVerifique você mesmoGet the signed file36 paths206 nodes31 groups22 KB

O resultado é uma caixa comum na tela. Mova, redimensione, gire, agrupe, alinhe, reordene a pilha, dê a ela um preenchimento, um gradiente, uma sombra ou uma opacidade - um caminho se comporta como qualquer outra caixa, e nenhum desses controles o trata de forma diferente.

Ele já chega pintado, também. O primeiro caminho que você desenha assume o preenchimento e o traço que sua marca dá a um caminho, e depois disso cada novo caminho assume o que você usou por último - defina um preenchimento uma vez e siga desenhando, em vez de recolorir cada forma. (Em uma ferramenta cuja marca não diz nada sobre caminhos, um caminho desenhado recebe o traço na cor em que você o viu sendo desenhado, então ele nunca fica invisível.)

Editando os pontos de novo. Clique duas vezes na forma (ou use Editar pontos na barra do objeto) e os pontos voltam. Arraste um ponto para movê-lo, arraste uma alça para mudar a direção dela, clique em qualquer lugar da curva para inserir um ponto, faça uma seleção elástica em um grupo de pontos e pressione Delete para remover os selecionados. Um caminho sempre mantém pelo menos dois pontos, então você não consegue apagá-lo por acidente.

Tipo de spline decide que tipo de curva passa pelos seus pontos, e é a escolha que vale a pena entender:

TipoO que faz
Suave (automático)O padrão. Calcula sozinho o comprimento das alças, então clicar-clicar-clicar já dá uma curva realmente suave, sem precisar mexer em alça nenhuma. Se você definir uma alça, ela fixa a direção e a curva continua dona do comprimento.
Alças BézierA caneta clássica. As alças são os pontos de controle, e inserir um ponto nunca move a curva.
Pelos pontosPassa exatamente por cada ponto que você posicionou, sem alças.
B-splineFlui perto dos pontos em vez de passar por eles, para uma forma mais macia.
Linhas retasUma polilinha.

Trocar um caminho existente para um tipo que calcula as próprias alças pede confirmação antes, porque os comprimentos de alça que você definiu não podem ser recuperados - trocar para Alças Bézier é sempre sem perdas. Durante o desenho não há aviso: a troca vale direto no rascunho, e as alças que você já tivesse puxado vão junto. Nos tipos que são donos das próprias alças, inserir um ponto remodela a curva levemente; em Alças Bézier, não.

Cada ponto também carrega uma regra de continuidade, indicada pelo seu formato na tela - quadrado para Canto (as alças se movem independentemente), redondo para Suave (as alças ficam alinhadas), redondo com um anel para Simétrico (alinhadas e do mesmo comprimento). Defina-a para quaisquer pontos selecionados e a curva se reajusta na hora.

Dois caminhos de caneta renderizados direto de um link: uma curva em S traçada e uma mancha fechada preenchidasigned by Lollyvector SVGVerifique você mesmoGet the signed file5 paths38 nodes7 groups5 KBDois caminhos de caneta renderizados direto de um link: uma curva em S traçada e uma mancha fechada preenchidasigned by Lollyvector SVGVerifique você mesmoGet the signed file5 paths38 nodes7 groups5 KB

Um caminho desenhado viaja no link como tudo o mais, então uma forma que você desenha reabre a partir de um link compartilhado e renderiza de forma idêntica pela CLI. Nada nele depende do editor.

Combinando formas (operações de caminho)

Selecione duas ou mais formas, clique com o botão direito na tela (toque com dois dedos no touch) e o menu oferece as operações que você espera de um app de desenho:

Mais três funcionam em uma única forma: Contornar traço… transforma um traço em uma forma preenchida com o mesmo contorno (útil quando você quer preservar uma espessura exatamente como foi desenhada), Deslocar caminho… faz a silhueta crescer para fora ou, com um número negativo, encolher para dentro, e Simplificar reconstrói um caminho com menos segmentos mantendo a mesma forma.

Uma lua crescente e um anel com um furo de verdade, ambos produzidos por Subtrairsigned by Lollyvector SVGVerifique você mesmoGet the signed file5 paths47 nodes7 groups5 KBUma lua crescente e um anel com um furo de verdade, ambos produzidos por Subtrairsigned by Lollyvector SVGVerifique você mesmoGet the signed file5 paths47 nodes7 groups5 KB

O resultado é um novo caminho que você pode continuar editando com a caneta. Furos são furos de verdade - um controle Regra de preenchimento no painel de traço decide se contornos sobrepostos preenchem (não zero) ou perfuram (par-ímpar).

Duas coisas que essas operações deliberadamente não fazem. Elas recusam em vez de destruir: peça a interseção de duas formas que não se sobrepõem e você é avisado de que não há nada a manter, e nada muda. E caixas de texto e de imagem não têm contorno com que trabalhar, então são deixadas de lado em vez de aproximadas pelo seu quadro. Um resultado combinado é armazenado como curvas Bézier simples, que é o que um app de desenho também faz - o tipo de spline original não sobrevive à operação.

Linha do tempo (Sequence Studio)

The timeline with the music clip selected: its strip runs along the bottom with Speed, Fades, Volume, Pan, EQ, Pitch, Normalize volume and the Effect slotsigned by Lollyvector SVGVerifique você mesmoGet the signed file104 paths~7.2k nodes157 groups2 images97 KBThe timeline with the music clip selected: its strip runs along the bottom with Speed, Fades, Volume, Pan, EQ, Pitch, Normalize volume and the Effect slotsigned by Lollyvector SVGVerifique você mesmoGet the signed file104 paths~7.2k nodes157 groups2 images97 KB

O Sequence Studio acrescenta tempo à tela livre. Cada caixa pode começar em um momento, durar um tempo e animar na entrada e na saída, e uma linha do tempo acoplada abaixo da prancheta é onde você as organiza. Abra-o e já há uma sequência tocando - um cartão de título, um clipe, um cartão final, um lower-third e uma trilha musical - de modo que o modelo fica visível antes de você mudar qualquer coisa.

Linha do tempo do Sequence Studio: o transporte, a régua, uma trilha de sobreposição, a linha de sequência magnética com seus clipes e chips de emenda e a faixa Always onsigned by Lollyvector SVGVerifique você mesmoGet the signed file73 paths~5.4k nodes115 groups80 KBLinha do tempo do Sequence Studio: o transporte, a régua, uma trilha de sobreposição, a linha de sequência magnética com seus clipes e chips de emenda e a faixa Always onsigned by Lollyvector SVGVerifique você mesmoGet the signed file73 paths~5.4k nodes115 groups80 KB

Há dois tipos de linha, e a diferença é a ideia toda:

O palco de edição: a prancheta à frente e ao centro, o trilho de ferramentas à esquerda e o HUD de zoom no cantosigned by Lollyvector SVGVerifique você mesmoGet the signed file19 paths852 nodes30 groups20 KBO palco de edição: a prancheta à frente e ao centro, o trilho de ferramentas à esquerda e o HUD de zoom no cantosigned by Lollyvector SVGVerifique você mesmoGet the signed file19 paths839 nodes30 groups20 KB

Abrir a linha do tempo dá o teclado a ela, então Espaço e as setas dirigem o cursor de reprodução em vez da página - e, como ela abre sozinha em uma composição que já tem tempo, isso vale desde o momento em que o Sequence Studio carrega.

O editor de sequência aprofunda as quatro coisas que decidem se editar no tempo é previsível: qual clipe um clique na tela edita, os fantasmas em papel-cebola dos clipes vizinhos, o escopo da divisão e o Juntar que desfaz um corte, e o aparar (incluindo o conjunto de atalhos de teclado). Pressione ? com a linha do tempo em foco para ver a folha de atalhos.

Editando. Arraste o meio de um clipe para movê-lo ou reordená-lo, arraste a poucos pixels de qualquer uma das pontas para apará-lo e pressione Dividir no cursor de reprodução (ou S) para cortar um clipe em dois. A divisão precisa de um clipe com uma Duração real e do cursor de reprodução um pouco para dentro dele, então um clipe em aberto (a trilha musical, por exemplo) não pode ser dividido. Encaixar nas bordas vem ativado por padrão e encaixa nas bordas dos clipes, no cursor de reprodução e em segundos inteiros, com Alt para ignorar. Cada arraste é um único passo de desfazer, e a pré-visualização do arraste faz a mesma aritmética que a confirmação, então o que você vê ao arrastar é o que você obtém.

Selecione um clipe e o inspetor oferece as mesmas edições em números: Duração, Aparar entrada (a que altura da fonte ele começa), Velocidade como um conjunto de multiplicadores fixos de ×0,25 a ×4, Animar entrada / Animar saída com suas durações e Silenciar clipe. Um clipe na linha magnética não tem campo Início, de propósito - a linha é dona da ordem, então você arrasta para movê-lo.

Transições são presets, não quadros-chave: Esmaecer, Pop, Crescer, Subir, Cair, os quatro Deslizes, Zoom para dentro e para fora, Inclinar, Mergulho, Girar, Deriva ou Corte (sem animação). As distâncias escalam com o objeto, então o mesmo preset funciona igualmente bem em um cartão de tela cheia e em um selo pequeno. Entre dois clipes adjacentes na linha de sequência há um chip de emenda: clique nele e escolha Corte ou Crossfade, que se aplica na hora e fecha. Abra o mesmo chip de novo para mudar a Duração (ms) e pressione Concluído. Um crossfade é armazenado como uma saída em fade de um clipe e uma entrada em fade do próximo, e a exportação deriva a dissolução real desse par - é por isso que um crossfade parece dois fades na pré-visualização e uma passagem de verdade no arquivo.

Som. Adicione um clipe de Áudio e ele vive na linha do tempo como qualquer outro clipe: forma de onda, aparar, silenciar. (A trilha gerada que vem na sessão padrão é a única exceção - ela é sintetizada no momento da exportação, então sua barra fica lisa e silenciosa até você renderizar.) Pressione o microfone para gravar uma locução direto na linha do tempo, com contagem regressiva e medidor de nível, e a gravação é salva como um ativo seu no ponto em que você começou. Pressione a câmera ao lado dele para gravar um vídeo da mesma forma: a gravação é cortada para o tamanho de exportação da prancheta enquanto grava, então a pequena autovisualização mostra exatamente o que entra na sequência no cursor de reprodução, em quadro cheio - a maneira de reunir o clipe de um colega a partir de um link compartilhado. Música, diálogo e a trilha do próprio clipe chegam todos à mixagem exportada. (A Faixa de áudio do painel de exportação é outra coisa: uma única trilha colocada sob o clipe inteiro, com fade e ducking. As duas coexistem.)

Renderizando. Uma exportação com movimento é um composto determinístico, não uma gravação de tela - cada quadro é decodificado, desenhado e codificado em um tempo exato, então o arquivo não depende de a sua máquina dar conta, e não há um teto prático de quadros em MP4 ou WebM. A duração da própria linha do tempo define o tempo total, a menos que você digite um. Os Content Credentials são carimbados como em qualquer outra exportação. Uma exportação estática entrega o quadro no cursor de reprodução, ou uma folha de contato inteira a partir do campo Quadros ao lado do tamanho de saída - veja Exportação.

Alguns limites a ter em mente: uma sequência é limitada a uma hora, GIF e PNG animado guardam seus quadros em buffer, então ficam curtos, o áudio fica mudo em um clipe cuja velocidade não seja ×1 (ainda não há time-stretching) e Gravar ao vivo fica oculto aqui porque o compositor é o caminho melhor.

Além das predefinições: quadros-chave, profundidade e uma câmera. Uma transição anima um clipe conforme ele chega e sai. Para posicionar uma caixa dentro de um clipe - deslocá-la, esmaecê-la, desfocá-la, levantá-la da página e assentá-la de volta - adicione quadros-chave: selecione o clipe, pressione +Keyframe (o losango no conjunto de ferramentas da timeline, o losango na barra de objetos da tela ou K) e a posição do cursor de reprodução decide qual pose sua próxima edição grava. O mesmo sistema de quadros-chave dá a toda composição temporizada uma câmera que se aproxima, faz panorâmicas e ajusta o foco, transformando um único SVG plano em uma pilha de camadas entre as quais você pode voar. Animação é o guia completo.

A ferramenta Design tem a mesma linha do tempo, então você pode dar tempo a um layout sem trocar de ferramenta, e ela também exporta movimento.

Apresentando

The inspector's Document section: Voice, Blend with, Speed, Lead-in, Tail and Show captions when presentingsigned by Lollyvector SVGVerifique você mesmoGet the signed file29 paths~4.4k nodes56 groups2 images57 KBThe inspector's Document section: Voice, Blend with, Speed, Lead-in, Tail and Show captions when presentingsigned by Lollyvector SVGVerifique você mesmoGet the signed file29 paths~4.4k nodes56 groups2 images57 KB

Um documento do Design feito de pranchetas já é uma apresentação. Abra o menu do Lolly na barra de ferramentas e escolha Apresentar - a última linha - e cada prancheta vira um slide em tela cheia, na ordem em que as pranchetas estão na tela. A apresentação roda sobre uma cópia das pranchetas renderizadas, então o editor por baixo nunca é tocado e sair coloca você de volta exatamente onde estava.

A apresentação também é um link. ?present abre direto nela, s= nomeia o slide - uma posição, o id de uma prancheta ou id.step para uma etapa de revelação - e o endereço se atualiza conforme você avança, então o que você envia é o slide em que está. Para autores de ferramentas: esses parâmetros estão documentados na página Modo URL.

No celular

Em telas estreitas, o layout se reorganiza em uma única coluna:

Uma ferramenta em uma tela com largura de celular - os controles como uma folha no topo, a paleta gerada preenchendo a pré-visualização abaixo e a pílula de renderização flutuando na parte inferior centralsigned by Lollyvector SVGVerifique você mesmoGet the signed file61 paths~2.9k nodes128 groups2 images72 KBUma ferramenta em uma tela com largura de celular - os controles como uma folha no topo, a paleta gerada preenchendo a pré-visualização abaixo e a pílula de renderização flutuando na parte inferior centralsigned by Lollyvector SVGVerifique você mesmoGet the signed file61 paths~2.9k nodes128 groups2 images72 KB

Controles (inputs)

As ferramentas expõem apenas os inputs que devem variar - tudo o mais (cores, layout, tipografia, lógica) é fixado pelo autor da ferramenta, então tudo o que você cria segue as regras definidas pelo autor. Os inputs incluem texto, sliders, seletores de cor, menus suspensos, datas, seletores de imagem e grupos de linhas repetidas. Alguns são agrupados em seções recolhíveis.

A pilha de controles de uma ferramenta - um campo de texto, gatilhos de cor e um slider, e nada mais, porque o autor escolheu travar o restosigned by Lollyvector SVGVerifique você mesmoGet the signed file19 paths~2.1k nodes45 groups1 image31 KBA pilha de controles de uma ferramenta - um campo de texto, gatilhos de cor e um slider, e nada mais, porque o autor escolheu travar o restosigned by Lollyvector SVGVerifique você mesmoGet the signed file19 paths~2.1k nodes45 groups1 image31 KB

Redefinir: Descartar alterações retorna todos os inputs aos seus valores padrão.

Desfazer e refazer

Cmd/Ctrl-Z volta um passo e Cmd/Ctrl-Shift-Z (ou Cmd/Ctrl-Y) avança de novo. O mesmo par fica como botões Desfazer e Refazer na linha acima dos controles - na tela livre eles ficam na barra de ferramentas - e cada um fica esmaecido enquanto não há nada a recuperar. Cada passo diz o que foi: desfaça uma cor e uma pequena mensagem nomeia o input que acabou de ser restaurado, com um botão Refazer dentro dela para o caminho de volta.

Em uma colaboração ao vivo, o histórico continua sendo só seu. Uma alteração vinda do outro dispositivo nunca entra na sua pilha, então desfazer só pode reverter algo que você mesmo fez.

Seus dados e sua foto de perfil

O Perfil (canto superior direito da galeria) guarda seu nome, dados de contato e uma foto de perfil opcional. As ferramentas que pedem esses campos os preenchem automaticamente - defina-os uma vez e sua assinatura de e-mail, lockups e crachás se preenchem sozinhos. Você ainda pode substituir qualquer campo em cada sessão. Ative com Usar meus dados para criar para que seus dados sigam junto como autor no que você exporta.

Sua foto de perfil e seus dados ficam somente neste dispositivo. Um perfil pode ser mais do que só você - uma equipe ou um papel que você assume de vez em quando. Veja Perfis para o panorama completo, incluindo como manter mais de um.

Salvando e continuando

Clique em Salvar para armazenar os inputs atuais como uma sessão daquela ferramenta. Você pode manter várias sessões nomeadas por ferramenta; o botão Continuar de cada ferramenta reabre a mais recente, e o botão de histórico (canto superior direito, ao lado do seu perfil) lista todas as sessões salvas em todas as ferramentas. As sessões ficam no dispositivo. Para organizá-las, abra Projetos (abaixo).

A pílula de renderização em duas metades - uma seta para cima que abre o painel de exportação e um check que salva a sessão no lugarsigned by Lollyvector SVGVerifique você mesmoGet the signed file2 paths240 nodes10 groups7 KBA pílula de renderização em duas metades - uma seta para cima que abre o painel de exportação e um check que salva a sessão no lugarsigned by Lollyvector SVGVerifique você mesmoGet the signed file2 paths240 nodes10 groups7 KB

Projetos

Projetos - abra pela aba Projetos, ao lado de Ferramentas, ou por Perfil → Armazenamento → Organizar em Projetos - é o lar de tudo o que você salvou, e funciona como um gerenciador de arquivos:

Projetos - sessões salvas organizadas em pastas aninháveissigned by Lollyvector SVGVerifique você mesmoGet the signed file79 paths~7.7k nodes104 groups179 KBProjetos - sessões salvas organizadas em pastas aninháveissigned by Lollyvector SVGVerifique você mesmoGet the signed file79 paths~7.7k nodes104 groups180 KB

O popover Ver e ordenar aberto em Projetos, com uma linha de tema, uma escolha de Visualização entre Pré-visualização ou Lista, e Nome, Data de adição e Última modificação em Ordenarsigned by Lollyvector SVGVerifique você mesmoGet the signed file11 paths~1.3k nodes21 groups19 KBO popover Ver e ordenar aberto em Projetos, com uma linha de tema, uma escolha de Visualização entre Pré-visualização ou Lista, e Nome, Data de adição e Última modificação em Ordenarsigned by Lollyvector SVGVerifique você mesmoGet the signed file11 paths~1.3k nodes21 groups19 KB

O que a barra de seleção oferece varia um pouco por tela, já que nem toda ação faz sentido em todo lugar:

Uma armadilha de rótulo: Ver sessões só existe quando algo está selecionado. Clicar com o botão direito em um único cartão não selecionado oferece, em vez disso, N sessões salvas, que abre o diálogo de histórico daquela ferramenta em vez de navegar até Projetos.

Dois cartões de ferramentas marcados na galeria de ferramentas, com a barra de seleção flutuante exibindo 2 selected e oferecendo Available offline, View sessions, Favourite e Hidesigned by Lollyvector SVGVerifique você mesmoGet the signed file278 paths~46k nodes495 groups4 images1.183 KBDois cartões de ferramentas marcados na galeria de ferramentas, com a barra de seleção flutuante exibindo 2 selected e oferecendo Available offline, View sessions, Favourite e Hidesigned by Lollyvector SVGVerifique você mesmoGet the signed file280 paths~46k nodes500 groups5 images1.227 KB

Compartilhando seu trabalho

Um design sai de uma de duas formas: como link ou como arquivo. O diálogo de compartilhamento oferece as duas. Abra-o com Compartilhar nos controles de exportação; Compartilhar link em uma sessão salva em Projetos abre o mesmo diálogo para aquela sessão.

Cada input é capturado na URL da página, então um link é o design. No topo do diálogo fica o link pronto para copiar, com duas seções recolhidas abaixo dele.

Cole o link para um colega, salve nos favoritos ou faça o commit dele. (Detalhes completos: Modo URL.)

Algumas ferramentas fazem do link o produto inteiro. O Jump Page reúne seus links em uma única página para distribuir - um link de bio, uma palestra de conferência, uma vitrine de loja. Não há nada para hospedar e nenhuma conta por trás disso: a página é o link, então ela abre tão rápido quanto a URL viaja. No editor, você vê a página finalizada ao lado dos campos; um visitante que abre o link a recebe em largura total, um link por cena conforme rola a página.

O Jump Page no editor - o título, três cenas de link cada uma com seu próprio banho de cor e um rodapé Made with Lolly, dispostos como uma única página na telasigned by Lollyvector SVGVerifique você mesmoGet the signed file12 paths~2.4k nodes28 groups30 KBO Jump Page no editor - o título, três cenas de link cada uma com seu próprio banho de cor e um rodapé Made with Lolly, dispostos como uma única página na telasigned by Lollyvector SVGVerifique você mesmoGet the signed file12 paths~2.4k nodes28 groups30 KB

O diálogo diz o que um link não consegue carregar. Três coisas não cabem em uma URL: uma imagem ou arquivo que você adicionou deste dispositivo, um valor de texto muito longo ou uma lista muito grande. Cada uma é contabilizada enquanto o link é montado. Se alguma coisa precisou ficar de fora, o diálogo diz qual foi e aponta você para o arquivo abaixo, em vez de entregar um link que abre com a imagem faltando. Um link que é apenas longo recebe um aviso mais brando, com sua contagem de caracteres, já que a compactação ainda pode resolver o comprimento.

O arquivo .lolly

Baixar .lolly, no diálogo de compartilhamento da ferramenta em que você está trabalhando, grava o mesmo design como arquivo. Ele carrega a sessão salva junto com as imagens e os arquivos que você adicionou do seu dispositivo. A arte de catálogo que o design usa vai junto dentro dele também, então o arquivo abre completo em uma máquina que nunca viu a sua marca. Onde o seu dispositivo tem uma folha de compartilhamento, Enviar para… entrega esse arquivo direto a ela (AirDrop, um compartilhamento do Android) em vez de salvá-lo no disco.

Um .lolly é um zip comum. Renomeie para .zip e abra: suas próprias imagens ficam em assets/uploads/ e a arte de catálogo em assets/catalog/, cada uma com seu nome e extensão reais, o manifest.json lista todas elas e um README no topo diz o que é o arquivo.

Três coisas são você quem decide antes de ele sair:

Abrindo um. Solte um arquivo .lolly no aplicativo: os ativos vão para a sua biblioteca, a sessão vai para Projects e a ferramenta abre nela. Nada seu é sobrescrito: a sessão chega como um novo slot salvo, enquanto um ativo que já está neste dispositivo é identificado pelo checksum e reaproveitado em vez de duplicado. Cada parte é verificada contra os próprios checksums do arquivo na entrada, então uma cópia danificada durante a transferência é recusada em vez de meio-importada.

Se o arquivo carrega uma ferramenta que você não tem, o Lolly pergunta antes que essa ferramenta possa rodar: Confiar nesta ferramenta? nomeia a ferramenta e seu autor e diz claramente que abri-la roda o código dela no seu dispositivo, com Confiar e instalar como o caminho adiante. Recuse e o trabalho compartilhado continua salvo nos seus projetos, esperando ali pelo dia em que você adicionar a ferramenta. (Um tipo de ferramenta ainda não pode ser carregado assim - uma cujo código vem como módulo - e ela é recusada do mesmo jeito.)

Um link e um arquivo entregam, os dois, um instantâneo. Para trabalhar na mesma sessão ao mesmo tempo que outra pessoa - dois dispositivos, sem servidor, sem internet se vocês estiverem na mesma rede - veja Trabalhando juntos.

Câmera ao vivo (ferramentas reativas a movimento)

Todo Filtro de foto - Halftone, Scanline, Posterize, células de Voronoi, Tratamento de cor, Esticar pixels e Imperfeições - mostra um botão Ativar ao vivo onde há uma câmera disponível. Ative e o efeito acompanha sua webcam quadro a quadro, reagindo ao movimento; você pode gravar o resultado em GIF, WebM ou MP4. Os quadros são lidos e processados no seu dispositivo e nunca saem dele, e a câmera é liberada assim que você para ou sai da ferramenta. (Qualquer seletor de imagem também tem Tirar uma foto, para capturar um único quadro como imagem no dispositivo.)

Minhas imagens

Quando uma ferramenta permite adicionar uma imagem do seu dispositivo, ela é mantida exatamente como chegou - então um Content Credential nela continua sendo verificado - e salva na sua biblioteca pessoal Minhas imagens (em Perfil → Armazenamento). Só um arquivo realmente enorme pergunta se você quer mantê-lo ou redimensioná-lo. Reutilize-a em qualquer ferramenta. Para remover EXIF/GPS conforme as imagens entram, ative Remover metadados dos uploads no seu perfil. Não há limite: a biblioteca é totalmente local e limitada apenas pelo armazenamento do seu dispositivo - gerencie ou exclua imagens por lá.

O Catálogo - sua biblioteca de ativos

O Catálogo (#/c, ou o segmento Catálogo do seletor Projetos · Ferramentas · Utilitários · Catálogo no topo de toda tela de listagem) reúne tudo o que suas ferramentas podem usar - logos de marca, imagens, áudio e animações, agrupados por tipo - e é onde os seus próprios arquivos criativos também ficam. Sem servidor, sem console de administração, sem pull request: está tudo no seu dispositivo.

O Catálogo - ativos de marca, amostras e fontes, além dos seus próprios uploadssigned by Lollyvector SVGVerifique você mesmoGet the signed file456 paths~43k nodes707 groups1.022 KBO Catálogo - ativos de marca, amostras e fontes, além dos seus próprios uploadssigned by Lollyvector SVGVerifique você mesmoGet the signed file456 paths~43k nodes707 groups1.022 KB

Leve sua paleta e suas fontes para qualquer lugar

O painel de Amostras do Catálogo faz mais do que exibir - clique em uma cor para copiá-la, ou baixe toda a paleta da marca no formato que a sua outra ferramenta entende:

O painel de Amostras - os cinco botões de download da paleta no topo, e depois cada cor da marca como um chip copiávelsigned by Lollyvector SVGVerifique você mesmoGet the signed file196 paths~22k nodes282 groups302 KBO painel de Amostras - os cinco botões de download da paleta no topo, e depois cada cor da marca como um chip copiávelsigned by Lollyvector SVGVerifique você mesmoGet the signed file196 paths~22k nodes282 groups302 KB

O painel de Fontes lista as fontes da sua marca com um botão de download ao lado de cada uma, para instalar localmente ou entregar a uma gráfica. (A sala de Cores do Brand Studio oferece o mesmo download de paleta.)

Os ativos são metade do caminho aberto e faça-você-mesmo; a outra metade é criar suas próprias ferramentas - a tela livre (Design, descrita acima) permite construir uma visualmente, sem precisar de código.

Som e acessibilidade

O Lolly busca ser confortável de usar para todo mundo. A interface é navegável pelo teclado, os controles personalizados têm rótulos adequados para leitores de tela, e a pré-visualização ao vivo de cada ferramenta é exposta como uma única imagem rotulada, descrevendo o que está sendo criado.

Uma camada suave de sons assistivos confirma o que você faz - chegar à galeria, uma verificação válida ou inválida de Content Credentials, fechar um painel, trocar de filtro. Isso vem desativado por padrão: ative o Som em qualquer lugar onde o interruptor aparecer (no popover de opções de cada tela, ou no Perfil), e a escolha é lembrada.

Quatro configurações opcionais de conforto ficam em Perfil → Acessibilidade: Reduzir movimento (elimina as transições e os floreios do app), Ocultar pré-visualizações coloridas (cartões de galeria calmos, só com ícone e texto, e miniaturas de projeto mais discretas), Alto contraste (bordas, texto e anéis de foco mais fortes) e Texto grande (tipografia maior no app - rótulos, menus, texto de botão). As quatro acalmam o app ao redor do seu trabalho: elas nunca alcançam o interior da tela de uma ferramenta nem mudam um pixel do que você exporta, e cada uma fica desligada até você ligá-la. Detalhes completos em Seu perfil → Acessibilidade.

Ao lado do interruptor de Som fica o Modo Neurospicy - uma faixa de foco de fundo, calma e opcional, que toca discretamente enquanto você trabalha. Ao ativá-la, abre-se um pequeno dock de player no canto inferior que acompanha você por todo o app; a partir dele você pode buscar e escolher uma faixa, avançar e voltar, ajustar o volume, e minimizá-lo ou fechá-lo. A lista de faixas abrange algumas categorias - músicas procedurais do Lolly Sings, loops e batidas ambiente, seu próprio áudio enviado e algumas estações de rádio ao vivo da internet (estas precisam de conexão; todo o resto toca offline). Ele vem desativado por padrão e, assim como o Som, é lembrado entre sessões e dispositivos. Desativar o Som também silencia a faixa de foco.

Armazenamento e privacidade

Tudo é armazenado no banco de dados local do seu navegador (IndexedDB): seu perfil, sessões salvas, imagens enviadas e um cache do conteúdo do catálogo baixado. Perfil → Armazenamento mostra o uso e permite que você:

O cartão de armazenamento em uma tela com largura de celular: cada categoria de dados no dispositivo nomeada, com o botão Limpar todos os meus dados embaixosigned by Lollyvector SVGVerifique você mesmoGet the signed file14 paths~2.0k nodes39 groups28 KBO cartão de armazenamento em uma tela com largura de celular: cada categoria de dados no dispositivo nomeada, com o botão Limpar todos os meus dados embaixosigned by Lollyvector SVGVerifique você mesmoGet the signed file14 paths~2.0k nodes39 groups29 KB

Nenhum desses dados locais é transmitido para lugar nenhum - sem telemetria, sem renderização na nuvem. A lista completa do que o app busca ou envia em algum momento está na Política de Privacidade, e Superfície de Servidor inventaria os componentes de servidor opcionais.

Mudando para outro dispositivo

Como tudo fica no seu dispositivo, Perfil → Armazenamento → Mover para outro dispositivo permite levar tudo para uma segunda instalação - sem conta, sem nuvem:

O cache do catálogo não está incluído - ele se baixa novamente sozinho no novo dispositivo. O pacote é um zip simples (manifest.json + profile.json + sessions.json + assets.json + assets/blobs/… + prefs.json, com id de formato lolly-backup), então sobrevive intacto a e-mail, USB ou AirDrop, e é o mesmo formato lido por todos os shells. Cada parte tem um checksum, então um arquivo danificado no trajeto é detectado na importação em vez de ser restaurado pela metade. (Especificação completa do formato: Transferência de Dados.)

Importando um design (Figma, Penpot, Illustrator, InDesign)

Você pode trazer um design existente para o Lolly e continuar trabalhando nele: abra o Design, clique em Importar um design na barra de ferramentas da tela, e escolha um .fig ou SVG do Figma, um .penpot do Penpot, um .ai / .pdf do Illustrator ou um .idml do InDesign. As camadas viram caixas editáveis na tela livre - o texto continua reeditável, as imagens vão para Minhas imagens e a tipografia e as cores seguem os padrões globais da marca - depois o resultado é salvo, compartilhado e renderizado como qualquer outra sessão. O parse acontece inteiramente no seu dispositivo. Detalhes completos: Importar um design.

Exportando

Veja Exportação e Formatos para a história completa - escolher um formato, tamanho de saída e unidades de impressão, transparência, vídeo e copiar/compartilhar. Resumindo: escolha um formato, ajuste o tamanho se precisar e Baixar (ou Copiar para a área de transferência).

Modo Batch (Pro)

Para usuários avançados, o Batch (acessível pela galeria, restrito à feature flag Pro, que vem ativada por padrão) renderiza várias variações de uma vez - uma grade em que cada linha é um conjunto de inputs, exportados juntos. Ideal para localizar um cartão em uma dezena de idiomas ou gerar cada variante de tamanho em uma única passagem. Preencha as linhas digitando, colando direto de uma planilha ou importando um CSV (você também pode exportar um de volta), e defina formato, tamanho e nome do arquivo de saída por linha. Salve uma grade inteira como uma sessão de lote nomeada, que reabre pela galeria, e baixe cada linha como um único .zip.

A barra de ferramentas do lote - nome do zip, unidades, DPI e o formato que cada linha herda, com Sessions e Render à direitasigned by Lollyvector SVGVerifique você mesmoGet the signed file31 paths~1.9k nodes50 groups4 images34 KBA barra de ferramentas do lote - nome do zip, unidades, DPI e o formato que cada linha herda, com Sessions e Render à direitasigned by Lollyvector SVGVerifique você mesmoGet the signed file31 paths~1.9k nodes50 groups4 images34 KB

O Batch serve para gerar muitas variantes de um mesmo template de uma vez. Para renderizar novamente sessões que você já salvou, use Projetos → Renderizar pasta / Renderizar seleção (acima) - sem precisar do Pro.

Editando lado a lado (Multiedição)

Batch são muitas variantes de um design. Multi-edit é a outra metade do trabalho: vários designs salvos diferentes abertos ao mesmo tempo, para que uma alteração se aplique a todos eles. Marque entre duas e oito sessões salvas em Projects e escolha Edit together na barra de seleção; eles abrem como cartões ao vivo lado a lado em #/multi?s=<slot>,<slot>…. Cada cartão é uma renderização real dessa sessão, não uma miniatura armazenada, então o que você vê é o que será exportado.

Uma única barra lateral comanda o conjunto:

Clique em qualquer tela (ou pressione Enter sobre ela) e o cartão da barra lateral daquela sessão se abre e é rolado até ficar visível. Salvar tudo grava cada sessão de volta no seu próprio espaço. Baixar tudo salva primeiro e depois renderiza o conjunto inteiro pelo mesmo pipeline do Renderizar seleção de Projetos - um único zip, com a trava opcional por senha oferecida no caminho.

Dois limites honestos. O teto de duas a oito é real: cada cartão monta seu próprio runtime ao vivo, e esse é o número que continua responsivo - um link pedindo mais (ou pedindo uma sessão que não existe mais) avisa em vez de carregar pela metade. E o link nomeia os seus espaços salvos, então ele reabre esse conjunto neste dispositivo; não é um link de compartilhamento.

Quando a seleção é maior que oito, mistura ferramentas ou inclui imagens além de sessões, a saída de emergência é Editar como planilha, na mesma barra de seleção: ela abre a seleção inteira como linhas na grade de lote (#/pro?s=…), sem limite de tamanho e sem a regra de mesma ferramenta. As pastas ficam fora das duas - elas têm seu próprio caminho de abrir na grade. (A Busca é a única coisa que ainda não alcança aqui: a Multiedição é a única tela que a barra de busca não conhece.)

Offline e instalação

O Lolly é um PWA. Depois do primeiro carregamento, ele funciona offline - instale-o pela barra de endereços do seu navegador (ou Adicionar à tela de início no celular) para uma experiência em tela cheia, como a de um app. Ele se atualiza sozinho quando você volta a ficar online.

Sobre atualizações: se uma visualização falhar ao carregar logo depois de uma delas (um painel em branco, um "failed to fetch" no canto), recarregue a página uma vez - o aplicativo assume a nova versão de forma limpa e seu trabalho, sessões e marca ficam intactos. Ele armazena tudo no seu dispositivo, não na página.