Testando se um BG repetirá a telha corretamente no Photoshop?

9

Trabalho frequentemente para criar texturas de fundo no Photoshop para serem usadas na web. Infelizmente, geralmente tenho que adivinhar, ou apenas usar brindes de outros sites.

Gostaria de criar minhas próprias texturas no Photoshop e verificar se elas estão lado a lado corretamente antes de exportar a imagem. Existe uma maneira de fazer isso rapidamente? Lembro-me de um método usando deslocamento, mas não estou familiarizado com as ferramentas.

Abaixo estão alguns exemplos de blocos de plano de fundo para que você possa ver do que estou falando:

tile1

tile2

adobe-photoshop website-design background tiles Ilhas do Destino
fonte

Respostas:

17
  • crie sua imagem. Por exemplo, digamos que seja 200px quadrado
  • vá para FILTROS> OUTROS> DESLOCAMENTO e digite os números xey que têm metade do tamanho da sua imagem (neste caso, 100 px)
  • isso mudará sua imagem para muitos pixels e colocará os pixels que foram movidos da tela para o outro lado. Agora você verá uma costura no meio da sua imagem, onde o padrão não se repete completamente.
  • retocar esta costura para torná-la uma mistura suave usando as ferramentas que você gosta (a ferramenta clone é uma opção comum).
  • salve sua nova imagem.

Para imagens mais complexas, talvez seja necessário fazer um deslocamento final de, por exemplo, 1/4 das dimensões do pixel para retocar as bordas que você perdeu na primeira vez que caiu perto da borda da tela.

DA01
fonte
Obrigado, isso é perfeito! Exatamente o que eu estava procurando
Destino Islands
5

O DA01 responde como fazê-lo, mas sua pergunta é como testá-lo. A resposta para essa pergunta é:

  1. Selecione sua camada de padrão
  2. Editar> Definir Padrão
  3. Criar nova camada
  4. Selecionar tudo
  5. Editar> Preenchimento> Padrão> Escolha seu padrão
  6. Bata bem e veja se parece bom
Ryan
fonte
2
ugh. Eu entendi totalmente a pergunta! Boa dica. Outra opção é simplesmente criar um arquivo HTML de teste com um fundo repetitivo. Em seguida, continue salvando o arquivo e recarregando o navegador.
DA01 18/04
11
Sim, eu sabia como fazê-lo em HTML / CSS, mas não sabia que o Photoshop poderia testar também. Obrigado pelo conselho!
Ilhas de destino
2

Tradicionalmente, salvei a imagem como jpg ou png e depois uso o html básico para testar a disposição.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

Abra isso em um navegador e você poderá ver a lista e simplesmente salvar novamente "image.jpg" e atualizar a página da web para verificar as revisões.

Scott
fonte
1

Também há outra maneira de fazer isso, mas o limite é que todos os outros padrões devem ter o mesmo tamanho que você verá.

Passos:

  • Faça uma caixa de 200 por 200 pixels.
  • Converta-o em um objeto inteligente.
  • Duplique e alinhe-o para que haja 3 caixas horizontalmente. Verifique se não há sobreposição ou espaços no meio.
  • Duplique as três caixas selecionadas em 3 colunas verticais.
  • Se ainda não estiver ativado, ative janelas flutuantes em Preferências.
  • Clique duas vezes e abra o objeto inteligente.
  • Alinhe as duas janelas para que você possa ver os dois arquivos.
  • Preencha o objeto inteligente com o padrão desejado e veja-o em ação em outra janela simultaneamente.
Muhammad Umer
fonte
1

Existe uma ótima ferramenta (freeware para uso pessoal) chamada AMP Tile Viewer que permite verificar rapidamente se uma imagem é inclinável e como ficará em azulejo. Eu uso o tempo todo e funciona muito bem. Não é necessário fazer padrões no Photoshop, você nunca usará ou precisará excluir posteriormente.

TaranQ
fonte
1

Eu escrevi uma extensão do Chrome chamada Tile View que permite clicar com o botão direito do mouse em uma imagem e ver como ela é lado a lado.

tknomad
fonte
Há também esta ferramenta baseada na web eu descobri recentemente: tile.toyls.com
Thomas Guyot-Sionnest
0

O modo como faço é salvar o bloco como jpg e defini-lo como bloco na área de trabalho. Muito rápido e fácil.

jill
fonte