Como fazer temas do Tumblr com um design PSD

O Tumblr combina uma ênfase na criatividade visual com uma duração de postagem que fica entre a brevidade do Twitter e a duração aberta de uma entrada de blog tradicional. Quando você usa um tema personalizado do Tumblr que amplia a aparência de sua identidade online e offline, um tumblelog se encaixa em uma estratégia que inclui outras mídias online e sociais. Web designers frequentemente começam a desenvolver temas personalizados no Adobe Photoshop, usando o formato de arquivo PSD em camadas do programa como seu espaço de trabalho visual.

Estabelecendo Dimensões

Os guias de régua e recursos de camadas do Adobe Photoshop simplificam a tarefa de criar a base de um tema do Tumblr, completo com uma grade de layout que define as dimensões das áreas de conteúdo. Se você configurar grupos de camadas para cada aspecto de seu design, incluindo sua área de conteúdo principal e barra lateral, poderá colocar todas as guias para cada elemento em uma única camada dentro de cada grupo. Essa organização permite que você torne seus guias visíveis seletivamente, em vez de simplesmente mostrar e ocultar todos eles com um atalho de teclado ou item de menu do Photoshop, e mantém os elementos de guia relacionados juntos. Nomeie seus grupos e camadas para identificar a função de cada parte do seu design. Os momentos em que você investe em tarefas de nomenclatura incrementais compensam pelo tempo que você não precisa gastar ativando e desativando camadas para determinar o que elas contêm. Para encontrar as dimensões de qualquer elemento de layout rapidamente, pressione “F8 ″ para abrir o painel Informações e, em seguida,“ Ctrl-clique ”na miniatura do painel Camadas para carregar uma seleção com base nos pixels dessa camada.

Seleção de cores

Quer você use o seletor de cores testado pelo tempo para selecionar matizes para o seu tema, carregue opções de uma biblioteca de cores para combinar uma peça impressa ou logotipo, ou conte com a ferramenta Conta-gotas para amostras de tons de outro arquivo ou gráfico, o Adobe Photoshop oferece uma variedade de maneiras de selecionar as cores do tema. Ao preencher uma camada com uma cor sólida para simular a cor de fundo de um tema do Tumblr ou outros elementos do seu design, você pode copiar a fórmula da cor como texto da leitura hexadecimal do Seletor de cores e colar a identificação da cor no nome da camada para referência rápida. Os seis caracteres alfanuméricos em uma cor hexadecimal aparecem no código do Tumblr, bem como em designs da Web para blogs e outros formatos online.

Criação de gráficos

O cabeçalho que identifica um tumblelog pode usar um gráfico de bitmap como gráfico temático. Você pode criar esse elemento crítico usando uma combinação de texto e elementos baseados em pixels ou vetores dentro de seu arquivo PSD. Se o gráfico inclui elementos personalizáveis ​​que você compõe no Photoshop, deixe-os como um tipo ao vivo no seu arquivo de tema baseado em PSD e rasterize-os apenas em cópias do arquivo que você fornece a outras pessoas que não têm uma licença para os arquivos de fonte necessários em seu tema. Ao usar ferramentas vetoriais para desenhar no Photoshop, incluindo as ferramentas Caneta e forma, desenhe usando regras de guia que se alinham com a resolução subjacente do seu arquivo de modelo. Essa técnica ajuda a manter sua arte o mais nítida possível ao salvar ou exportar versões rasterizadas dela.

Próximos passos

Se você sabe como codificar HTML e CSS e entende as variáveis ​​especializadas que o Tumblr usa em sua estrutura de código, pode traduzir as dimensões, especificações de cores e gráficos que você constrói em um PSD em um tema personalizado do Tumblr. Se a codificação da Web estiver fora de seu conjunto de qualificações, você pode fornecer seu PSD a um programador para produzir o tema para você. Junto com um tratamento visual, um tema do Tumblr deve incluir variáveis ​​e blocos. As variáveis ​​aceitam valores dinâmicos para criar elementos visuais padrão do Tumblr. Os blocos formam pedaços de código que combinam variáveis ​​com HTML. Os blocos criam postagens e os permalinks que os alcançam, links que se movem entre pedaços de materiais organizados cronologicamente e elementos que acomodam as pessoas que gostam ou seguem um tumblelog individual.

Versão informação

As informações neste artigo se aplicam ao Adobe Photoshop CC e Adobe Photoshop CS6. Pode ser ligeiramente ou significativamente diferente de outras versões ou produtos.