Pergunta: Como posso criar botões dinamicamente?

Resposta

botões dinâmicos

É possível criar botões dimensionados dinamicamente usando o Scene7 Image Serving. Abaixo estão alguns modelos que fornecem uma base para o desenvolvimento de botões de interface com dimensionamento automático usando IS. Os exemplos usam a fonte padrão distribuída com o IS. A arte derivada deve ser ampla o suficiente para acomodar o rótulo de texto mais longo esperado. Uma implementação real provavelmente usaria arte de alta resolução, uma fonte diferente e vários comandos RTF e IS para ajustar a aparência e a posição do rótulo de texto.

O exemplo abaixo tem um plano de fundo de cor sólida. O texto deve estar na camada 0 para que o tamanho do botão seja guiado pela sequência de texto. A arte do botão deve ser transparente no centro para tornar visível o rótulo e o preenchimento:

Link:http://sample.scene7.com/is/image?fmt=gif&layer=0&text=$text$&extend=10,1,10,1&bgColor=$color$&layer=1&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&$text=button%20with%20solid%20color%20fill&$color=aaffaa

Observação:

http://sample.scene7.com/is/image?fmt=gif&layer=0&text=$text$&extend=10,1,10,1&bgColor=$color$&layer=1&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&$text=button%20with%20solid%20color%20fill&$color=aaffaa

Este exemplo tem a arte do botão fornecendo o preenchimento. Você precisa renderizar o texto duas vezes; uma vez na camada 0 para fornecer o tamanho total e, em seguida, novamente acima da arte. Neste caso, a arte seria opaca:

Link:http://sample.scene7.com/is/image?fmt=gif&text=$text$&extend=10,1,10,1&layer=1&src=TechSupport/b-comp&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-comp&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&layer=3&text=$text$&$text=button%20with%20image%20fill

Observação:

http://sample.scene7.com/is/image?fmt=gif&text=$text$&extend=10,1,10,1&layer=1&src=TechSupport/b-fill&op_colorize=$color$,off&layer=2&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=3&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&layer=4&text=$text$&$text=colorized%20gradient&$color=6666ff

Aqui está um exemplo usado por um dos nossos clientes. A principal diferença e maior complexidade se deve ao fato de que essa chamada gera botões PNG transparentes. Isso requer chamadas aninhadas na camada 1 e na camada 2. O modo de desenvolvedor no SPS é necessário para criar o modelo.

http://sample.scene7.com/is/image/TechSupport/button_small_default?$txt=Put+your+text+here

Modelo button_small_default

Observação:

&$txt=Details%20here&layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=is{TechSupport?layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=TechSupport/background_button&originN=-0.5,0&posN=-0.5,0}&clipPath=M0,0L20,0L20,20L0,20Z&layer=2&src=is{TechSupport?layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=TechSupport/background_button&originN=0.5,0&posN=0.5,0}&clipPath=M20,0L800,0L800,20L20,20Z&layer=4&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,crisp&extend=25,3,25,1&originN=0,0&effect=-1&pos=1,1&color=0xEDD2A8&op_blur=1&op_grow=1&fmt=png-alpha

Pergunta: Eu criei a camada de texto no meu arquivo PSD com alguma rotação, mas quando importo isso para o SPS, o modelo gerado não tem essa transformação aplicada. Há algo que preciso fazer de forma diferente? OU Você suporta transformações de camada ao importar arquivos PSD para modelos básicos?

Resposta

Infelizmente, neste momento, não suportamos a importação de transformações de camada de arquivos PSD para o modelo básico gerado.

Pergunta: O que é um traçado de recorte?

Resposta

Um traçado de recorte é um caminho de vetor fechado, ou forma, usado para recortar uma imagem 2D no software de edição de imagens. Qualquer coisa dentro do traçado será incluída após o traçado de recorte ser aplicado; qualquer coisa fora do traçado será omitida do resultado.

É possível usar traçados de recorte de imagem para definir áreas transparentes nas imagens inseridas em aplicativos de layout de página. Além disso, os usuários do OS X podem incorporar imagens do Photoshop em vários arquivos de processador de texto.

É possível usar apenas parte de uma imagem do Photoshop ao imprimi-la ou inseri-la em outro aplicativo. Por exemplo, você pode usar um objeto em primeiro plano e excluir o plano de fundo. O traçado de recorte de imagem permite isolar o objeto do primeiro plano e tornar transparente o restante da imagem quando ela é impressa ou inserida em outro aplicativo.

Observação: Traçados usam vetores como base e, portanto, possuem arestas sólidas. Não é possível preservar a suavidade de uma aresta difusa, como em uma sombra, ao criar um traçado de recorte de imagem.

Veja http://help.adobe.com/pt_BR/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7715a.html#WSfd1234e1c4b69f30ea53e41001031ab64-7711a para maiores informações.

Pergunta: Determine se um traçado é um traçado de recorte no Photoshop CS6?

Resposta

Se uma imagem contiver um traçado de recorte, o traçado de recorte será exibido no painel “Caminhos” do Photoshop, com o nome exibido em negrito.

Pergunta: Que formatos de arquivo Scene7 suportam traçados de recorte?

Resposta

Os formatos de arquivo Scene7 que suportam traçados de recorte incluem:

PSD

EPS (raster)

TIFF

JPG

Pergunta: Como os traçados de recorte podem ser usados para criar uma imagem transparente no Scene7?

Resposta

Uma das opções de edição de imagem no SPS, nas opções de trabalho de upload, é criar uma máscara a partir de um traçado de recorte. Esta página de ajuda tem uma breve descrição desta opção:

http://help.adobe.com/pt_BR/scene7/using/WS1C6180F2-3FB5-4222-BB0F-08C53AB21188.html

Quando esta opção é selecionada e a imagem carregada contém um traçado que é apresentado como o traçado de recorte (os arquivos podem ter apenas um traçado de recorte), a máscara é associada ao ID do Recurso do arquivo carregado. Especificamente, um MaskPath que faz referência a uma imagem de máscara de escala de cinza de 8 bits está vinculado ao ativo. O canal alfa da área fora do traçado de recorte na imagem da máscara será completamente transparente e o canal alfa será completamente opaco para a área dentro do traçado de recorte. Mais informações sobre o MaskPath podem ser encontradas na documentação do Image View:

http://microsite.omniture.com/t2/help/pt_BR/s7/is_ir_api/index.html#is_api-image_catalog-MaskPath

O catalog::MaskPath sobrescreve o canal alfa na imagem principal (catalog::Path), se presente, e se o canal alpha é desassociado (isto é, não pré-multiplicado). Se a imagem alfa for pré-multiplicada, catalog::MaskPath será ignorado e o canal alfa da imagem principal será sempre usado.

O resultado é que a região fora do traçado de recorte será transparente quando referida pelo ID do Recurso do Servidor de Imagem. É possível ignorar a máscara usando maskuse=off na URL de veiculação de imagem, o que efetivamente remove a transparência criada pelo traçado de recorte. Veja a documentação do Image Serving para mais informações sobre o maskUse.

http://microsite.omniture.com/t2/help/pt_BR/s7/is_ir_api/index.html#is_api-http_ref-maskUse

Aqui está um exemplo mostrando a transparência que é criada a partir da máscara:

http://testvipd9.scene7.com/is/image/TechSupport/grill1?wid=400&bgcolor=200,100,100

E como você pode ignorar a máscara e, portanto, perder a transparência:

http://testvipd9.scene7.com/is/image/TechSupport/grill1?wid=400&bgcolor=200,100,100&maskUse=off

Observação:

Glossário de termos

canal alfa não associado

Imagens RGB com transparência alfa podem ser armazenadas de duas maneiras diferentes. Uma maneira é armazenar valores RGB e valores alfa brutos como canais separados e independentes; isso é chamado de "alfa não associado". PNG padronizado ou alfa "não associado" ("não pré-multiplicado") para que imagens com máscaras de transparência separadas possam ser armazenadas sem perdas. A maioria dos programas de processamento de imagens armazena imagens com alfa não associado, para poder manipular RGB e alfa de maneira independente, e não perder dados RGB ao zerar o alfa.

canal alfa pré-multiplicado

Outra maneira é armazenar valores RGB não brutos, mas pré-multiplicados pelo valor alfa correspondente, que é então chamado de "alpha associado".
Se um canal alfa for usado em uma imagem, é comum também multiplicar a cor pelo valor alfa. Isso geralmente é chamado de alfa pré-multiplicado. "Alpha pré-multiplicado", armazena os valores de pixel pré-multiplicados pela fração alfa. A informação alfa de um pixel não é apenas armazenada no próprio canal alfa, mas já é "multiplicada" no canal vermelho, verde e azul. O software de renderização prefere alfa associado, porque com valores RGB já multiplicados por alfa, menos trabalho ainda precisa ser feito em tempo real quando se faz a mesclagem alfa. O TIFF suporta os dois tipos de alfa, mas é freqüentemente rotulado incorretamente.

Pergunta: O que são caminhos?

Resposta

Caminhos são desenhos baseados em vetores que podem ser esticados e terem sua forma alterada sem perder detalhes. No Photoshop, você pode usar um caminho como uma máscara de vetor para uma camada. Máscaras de vetor, como caminhos, podem ser redimensionadas sem perda de detalhes. Você pode denotar um caminho para ser um traçado de recorte e usá-lo para definir áreas transparentes em imagens. Isso permite que você isole a área de primeiro plano e torne o resto transparente.

Com o Scene7, você tem a opção de criar uma máscara de vetor ao fazer upload no SPS com base no traçado de recorte. Além disso, todas as informações de caminho, incluindo traçados de recorte, podem, opcionalmente, ser retornadas como parte de qualquer resposta de imagem gerada dinamicamente. Também é possível usar informações de caminho para definir dinamicamente áreas transparentes de uma camada ou imagem.

Em uma versão futura do Scene7, também pode ser possível cortar dinamicamente uma camada ou imagem com base em um caminho.

Pergunta: Uma máscara pode ser criada com base em um nome de caminho específico?

Resposta

Após o upload para o Scene7, somente o traçado de recorte pode ser usado para criar automaticamente uma máscara. No entanto, temos suporte para referenciar um caminho nomeado incluído na imagem solicitada, que irá mascarar toda a área da imagem que está fora da definição do traçado. Isso não requer a extração do traçado para uma máscara dentro do SPS, uma vez que o traçado pode ser usado por meio de solicitações padrão da Scene7 Image Serving.

Pergunta: É possível mascarar dinamicamente toda a área da imagem que está fora de uma definição de traçado?

Resposta

O Scene7 suporta a referência a um traçado nomeado incluído na imagem solicitada que irá mascarar toda a área da imagem que está fora da definição do traçado. Isso não requer a extração do traçado para uma máscara dentro do SPS, uma vez que o traçado pode ser usado com solicitações padrão da Scene7 Image Serving.

O comando image serving é chamado de clipPathE, e você pode encontrar documentação sobre este comando aqui:

http://microsite.omniture.com/t2/help/pt_BR/s7/is_ir_api/index.html#is_api-http_ref-clipPath

Aqui estão alguns exemplos mostrando o uso do clipPathE:

Nenhum caminho chamado, sem transparência:

http://s7d4.scene7.com/is/image/ajhco/kidchair_clippingpath?wid=400&bgcolor=200,100,100

Caminho chamado, mostra transparência:

http://s7d4.scene7.com/is/image/ajhco/kidchair_clippingpath?wid=400&bgcolor=200,100,100&clipPathE=Path%201

Outra imagem com caminhos diferentes definidos:

http://s7d9.scene7.com/is/image/TechSupport/grilltest?wid=400&bgcolor=200,100,100&clipPathE=Path%201 http://s7d9.scene7.com/is/image/TechSupport/grilltest?wid=400&bgcolor=200,100,100&clipPathE=work%20brown

Pergunta: É possível recortar uma imagem dinamicamente com base em um caminho ou traçado de recorte?

Resposta

Essa funcionalidade foi adicionada em nossa versão da primavera de 2014.

Existem abordagens alternativas: A API do IPS oferece getPhotoshopPath e getPhotoshopPathNames. O servidor de imagens pode recortar e mascarar com base no nome do caminho.

Pergunta: O que é o modo de desenvolvedor?

Resposta

O modo de desenvolvedor é usado quando você deseja criar um modelo sem usar as ferramentas de design da interface do usuário. Um modelo entrará no modo de desenvolvedor se devmode=true estiver no modelo ou se o analisador não puder analisar o modelo.

Pergunta: Como uso o comando de solicitação de modelo?

Resposta

A documentação de veiculação de imagens fornece algumas informações sobre o comando de solicitação de modelo:

http://microsite.omniture.com/t2/help/pt_BR/s7/is_ir_api/index.html#is_api-http_ref-template

Da documentação:
Quando template= está presente, o objeto especificado no caminho da solicitação não será aplicado como a origem da camada 0, mas pode ser referenciado como src= ou mask= em qualquer lugar no modelo usando a variável de caminho predefinida $object$ como src=value. catalog::Modifier do objeto especificado no caminho da solicitação só é aplicado em conexão com a substituição de $object$ dentro do modelo, enquanto catalog::PostModifier é sempre aplicado.

Aqui está um exemplo:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?$jbpreset$

http://testvipd4.scene7.com/is/image/ajhco/depot?$jbpreset$

URL original:

http://testvipd4.scene7.com/is/image/ajhco?layer=0&size=360,270&src=ajhco/redjacket&layer=1&src=ajhco/ni_360_270_redborder&wid=360

adicione uma nova camada 0, para corrigir o problema de a linha fina não aparecer corretamente. A camada 0 é reduzida para 270x270 porque a imagem é quadrada e a camada 1 é cortada para 270x270:

http://testvipd4.scene7.com/is/image/ajhco?layer=0&size=360,270&layer=1&size=360,270&src=ajhco/redjacket&layer=2&src=ajhco/ni_360_270_redborder&wid=360

Use o recurso de modelo para permitir que o modelo seja usado em uma predefinição:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?template=jbsimpletemplate&wid=360

igual a:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?$jbpreset$ http://testvipd4.scene7.com/is/image/ajhco/depot?$jbpreset$

Aqui está o modelo (jbsimpletemplate):

devmode=true&layer=0&size=360,270&layer=1&src=$object$&size=360,270&layer=2&src=ajhco/ni_360_270_redborder&size=360,270

E a predefinição (jbpreset):

wid=360&fmt=jpeg&qlt=85,1&op_sharpen=0&resMode=sharp2&op_usm=1,1,6,0&iccEmbed=0&template=jbsimpletemplate

Pergunta: Por que o SPS não cria um modelo para meu PSD de camada única?

Resposta

Por design, somente os PSDs de várias camadas podem ser convertidos em um modelo. Um modelo de único posterior não tem nenhuma vantagem como modelo e não faz mais nada que duplique o número de recursos da empresa para a imagem e o modelo.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online