FANDOM


Esta página possui recomendações sobre como criar um ótimo fundo para o layout fluido do Fandom. A imagem do fundo pode ser carregada no Designer de temas

Informações

Aqui estão alguns detalhes sobre o layout fluido, e a maneira que um site se comporta em telas diferentes:

  • Em telas menores, como iPads e suas telas de 1024 pixels de largura, o layout fluido vai automaticamente fazer o fundo ser coberto pela área de conteúdo. Não estará visível neste caso. 
  • Em telas maiores, o fundo vai estar visível se a área de conteúdo tiver pelo menos 1030 pixels de largura. 
  • Quando a área de conteúdo estiver entre 1300px e 1600px de largura, vai aparecer até 170px do fundo de cada lado.
  • A área de conteúdo para de expandir quando atinge o limite máximo de 1600 pixels. Se a tela for larga o suficiente para expandir o tamanho da tela com mais de 1920px, o fundo vai ficar mais visível. 

Como é possível a mesma imagem ser vista em todos esses tamanhos diferentes quando você só carregou um arquivo? A imagem é dividida ao meio, e o espaço central (coberto pela área de conteúdo), fica preenchido com uma color sólida escolhida no Designer de temas. Você também verá uma cor sólida além da borda da imagem de fundo, no fundo e dos lados, em telas muito grandes.

Aqui estão alguns exemplos do fundo da Central da Comunidade em vários tamanhos:

Na foto de "1600 pixels de largura", a área de conteúdo está estendida para o máximo de 1600 pixels. O fundo será automaticamente dividido ao meio e ajustado para que sempre seja mostrado dos lados da área de conteúdo.

  • Note: Se você não quiser que o seu fundo seja dividido , você pode carregar uma imagem que tenha mais que 2000 pixels de largura, e assim a opção "sem divisão" aparecerá no Designer de temas. Dessa maneira, o fundo permanecerá inteiro, sem fazer diferença o tamanho da área de conteúdo.

Criar um fundo que possa se adaptar aos tamanhos diferentes pode parecer difícil, mas não se assuste. Nós temos dicas para te ajudar.

Criando um fundo

Para criar o melhor fundo possível, é mais fácil usar um programa que permite que você edite imagens, como Photoshop, GIMP ou Paint.

Aqui está um "molde" de fundo que usa o design da Central da Comunidade como referência.

BackgroundDiagram.png

Cinco coisas para se notar sobre essa imagem:

  • Skin do fundo: Os balões coloridos que constituem a parte criativa da imagem de fundo conhecida como Skin.
  • Mistura: O fundo e o lado da skin estão misturados (usando a ferramenta "blend" ou "gradiente no seu programa de edição de fotos) para que a cor do fundo.
  • Margens: As áreas em vermelho do lado de cada lado da página de conteúdo. Esses retângulos vermelhos indicam qual parte da skin ficará visível na maior parte do tempo.
  • Área de conteúdo: O retângulo semi-transparente no meio do modelo é onde o conteúdo da página da comunidade vai ficar. Por padrão, o fundo não ficará visível atrás dessa área, mas a transparência pode ser adicionada no Designer de temas.
  • Linha de divisão: A linha amarela no meio da captura de tela é onde a skin vai ser dividida ao meio e separada para se ajustar ao tamanho da área de conteúdo. A cor que preenche esse espaço vazio pode ser definida no Designer de temas.

Talvez seja útil que você esse use de molde para fazer o seu próprio fundo! Você pode baixar esse molde como arquivo PSD, que pode ser usado tanto no Photoshop quanto no GIMP. Baixe através desse link:

File:Background_template.psd

Conselhos para o Designer de temas

  • A imagem que você carregar no Designer de temas não pode ser mais pesada que 300kb. Você pode diminuir a resolução da sua foto quando for salvar, para atingir esse tamanho.
  • Quanto maior for o gradiente de cor na skin, melhor será a transição para a cor do fundo.
  • Não exagere na transparência na área de conteúdo. Quanto mais transparente, mais difícil será para ler o seu conteúdo.
  • Quando for criar uma skin, sempre considere várias possibilidades de resolução. Quando mais você adaptar sua skin para as resoluções de várias telas, mais feliz sua comunidade ficará.
  • Tente sempre usar o Designer de temas para carregar a sua imagem de fundo. Imagens adicionadas por CSS podem ser afetadas inadvertidamente pelas atualizações do sistema do Fandom e também podem aumentar o tempo que a página leva para carregar.

Veja também

Mais ajuda e feedback

Interferência de bloqueador de anúncios detectada!


A Wikia é um site grátis que ganha dinheiro com publicidade. Nós temos uma experiência modificada para leitores usando bloqueadores de anúncios

A Wikia não é acessível se você fez outras modificações. Remova o bloqueador de anúncios personalizado para que a página carregue como esperado.

Também no FANDOM

Wiki aleatória