Crie um tema Tumblr inspirado em floresta no Photoshop
O Tumblr é uma plataforma de microblog que permite aos usuários publicar facilmente trechos de informações na Web, como uma foto ou um conjunto de fotos, um vídeo, uma citação ou apenas um parágrafo.
É frequentemente usado como um diário online devido à sua facilidade de uso em comparação com outras plataformas de blogs como o WordPress.
Muitos temas do Tumblr estão disponíveis, tanto gratuitos como premium, mas você já se perguntou como desenharia os seus?
Neste tutorial, você aprenderá como criar um tema Tumblr inspirado em floresta, utilizando texturas de madeira, padrões sutis e técnicas modernas - uma mistura agradável de elementos naturais e modernos.
O que vamos projetar
O tema que vamos desenhar no Photoshop consiste em quatro áreas: barra lateral de madeira, área de conteúdo principal, barra lateral direita e cabeçalho.
Passo 1
O primeiro passo, como deve ser com todas as coisas que você projeta, é o estágio de esboço. Usando minha mesa digitalizadora Wacom Bamboo e uma tela em branco no Photoshop, desenhei o seguinte desenho, com alguns elementos maiores, apenas para colocar minhas idéias no papel (digital).
Passo 2
Com a ideia resumida, crie um novo documento no Photoshop. (Lembre-se, isso não é definitivo. É algo que você pode consultar se você ficar preso no design. Pessoalmente, eu costumo experimentar e mudar muito do que planejei inicialmente.) Eu usei o seguinte configurações no Photoshop:
etapa 3
A próxima etapa é colocar alguns guias na tela. Isso ajudará a manter a estrutura do tema organizada enquanto você a projeta. Eu quero que a barra lateral esquerda seja de 200 pixels, a área de conteúdo principal de 600 pixels e a lateral direita de 160 pixels, o que nos dá uma largura de 960 pixels.
Se você usou as mesmas configurações, pode posicionar seus guias em 200, 800 e 960 pixels horizontalmente. Este design será alinhado à esquerda, de modo que a barra lateral de madeira fique sempre contra o lado esquerdo da janela de visualização do usuário.
Eu também coloquei guias de 200 pixels abaixo do topo da tela e 200 pixels acima da parte inferior da tela. É assim que meu documento se parece atualmente:
Passo 4
Vamos agora adicionar algum padrão ao nosso background. Vá para Arquivo → Novo e crie um novo documento com 8 × 8 pixels. Desenhe algumas linhas verticais com uma largura de 2 pixels. Sua tela deve ser agora 2 pixels em preto, 2 pixels em branco, 2 pixels em preto, 2 pixels em branco. Vá para Editar → Definir Padrão. Salve seu padrão como "Linhas verticais 2px".
Em seu documento original, vá para Layer → New Fill Layer → Pattern. Selecione o padrão que você acabou de criar e clique em OK. Largue a opacidade da camada até parecer algo assim:
Mesclar o padrão com sua camada de plano de fundo, automaticamente rasterizing no processo. Vá para Filter → Noise → Add Noise. Altere o valor para 5% e clique em OK. Isso adicionará uma textura sutil ao plano de fundo:
Crie uma nova camada e preencha com branco. Posicione-o abaixo da camada de fundo original. Diminua a opacidade do seu padrão de camada texturizada para cerca de 40% e, em seguida, mescle-o com a camada de plano de fundo indo até Camada → Mesclar camadas.
Passo 5
Selecione a ferramenta Retângulo e desenhe uma forma com 200 pixels de largura.
Nós vamos cortar a parte inferior da nossa forma usando a ferramenta Polygonal Lasso, fazendo com que pareça uma fita. Crie uma seleção sobre sua forma, rasterize a camada de forma e pressione a tecla Delete para remover a área selecionada.
Coloque a forma na área da barra lateral esquerda que marcamos usando nossos guias.
Crie uma seleção da parte superior da forma e vá para Edit → Free Transform. Estique a forma para que ela se sobreponha à linha superior da tela.
Passo 6
Selecione a ferramenta Elipse Shape e, mantendo a tecla Shift pressionada, desenhe um círculo preenchido com branco. Posicione-o na parte superior da barra lateral e renomeie a camada para "Retrato".
Clique com o botão direito do mouse na nova camada de forma e selecione a opção "Rasterizar camada" para transformá-la de um objeto inteligente em pixels. Mantenha pressionada a tecla Comando e clique na imagem de visualização da camada no painel Camadas. Isso fará uma seleção do seu círculo.
Localize uma foto sua (ou seja qual for o seu site) e copie-a. Volte para o Photoshop e, com a seleção do círculo ainda ativa, vá para Editar → Colar em. Isto irá colar o objeto na sua seleção de círculo.
Feito isso, você criou automaticamente uma máscara de camada na imagem (ou seja, em uma nova camada, não na camada de círculo existente). Vá para Edit → Free Transform para redimensionar e / ou girar a imagem. Permanecerá um círculo; apenas certifique-se de não torná-lo muito pequeno. Feito isso, exclua a camada chamada "Retrato" e renomeie sua nova camada.
Passo 7
Selecione a ferramenta Tipo e crie uma caixa de texto na área do cabeçalho. Eu dei ao meu tema um nome completamente aleatório: "Kabooom". Eu usei uma fonte chamada Reklame Script. Você pode baixar uma demonstração da fonte ou comprá-la por $ 30 a partir de MyFonts .
Clique com o botão direito do mouse na sua camada de texto e selecione "Opções de mesclagem". Aplique uma sobreposição de cores ao texto. Eu usei um cinza claro que é um pouco mais escuro que o fundo, com o código hexadecimal # D6D6D6.
Aplique uma sombra interna ao tipo, usando uma opacidade de 10%, uma distância de 2 pixels e um tamanho de 1 pixel. Deixe tudo em 0. Isso fará com que o tipo pareça estar gravado em segundo plano.
Para completar o efeito gravado, adicionaremos um sombreamento ao tipo, usando a cor branca com um modo de mesclagem normal. Dê à sombra uma distância de 2 pixels e um tamanho de 1 pixel. Essas configurações farão a sombra aparecer como um destaque na parte inferior do tipo, adicionando mais profundidade ao tipo e reforçando a sombra interna.
Passo 8
Selecione novamente a ferramenta Tipo e crie uma caixa de texto que preencha a largura da barra lateral direita, que marcamos com guias. Coloque uma variedade de categorias sob o cabeçalho da categoria, como visto abaixo:
Selecione o cabeçalho da categoria e altere o tipo de letra para um de sua escolha. Eu usei o Minion Pro. Experimente com sub-fontes (negrito, itálico, etc.) e tamanhos de pontos.
Mude a fonte para as categorias ("Notícias", "Dias fora", "Fotografia", etc.) Eu usei o Myriad Pro. Abaixe o tamanho do ponto do tipo e ajuste o entrelinhamento (ou seja, o espaço entre as linhas de texto), de modo que a linha superior fique mais baixa do que onde está por padrão.
Copie o primeiro cabeçalho e os links e cole-os abaixo na mesma caixa de texto. Altere o cabeçalho e as categorias. Eu usei os títulos "Meus projetos" e "Meus amigos". Use o que for relevante para o seu site, é claro.
Passo 9
Agora vamos tornar o texto na barra lateral direita um pouco mais atraente. Selecione o texto para as subcategorias (ou seja, não os títulos) e altere a cor de preto para cinza escuro. Eu usei # 333333. Clique OK.
Clique com o botão direito do mouse na camada de texto e selecione “Opções de mesclagem”. Aplique um sombreamento branco com um modo de mesclagem normal. Altere o ângulo para 120 ° e a distância e tamanho para 1 pixel. Deixe tudo mais definido para 0 pixels. Isso adicionará um destaque à parte inferior do texto, assim como fizemos com o cabeçalho.
Passo 10
Selecione a ferramenta Linha e, mantendo a tecla Shift pressionada, desenhe uma linha abaixo do título “Categorias”.
Clique com o botão direito do mouse na camada de linha e selecione “Opções de mesclagem”. Aplique um sombreamento branco com um modo de mesclagem normal. Defina o ângulo para 90 ° e a distância para 1 pixel. Defina tudo para 0 pixels.
Duplique a camada de linha e posicione-a abaixo de cada um dos títulos.
Passo 11
Se você tem o mesmo número de títulos que eu, então você deve ter três camadas de linha. Selecione todos eles e duplique-os. Com as três camadas de linha ainda selecionadas, desloque-as para baixo 10 pixels mantendo pressionada a tecla Shift e pressionando a tecla Down uma vez. Reduza a opacidade de suas camadas de linha mais recentes para 25% para acabar com algo parecido com isto:
Passo 12
Pegue a ferramenta Forma do retângulo e desenhe um retângulo semelhante ao que está abaixo. Faça o retângulo com exatamente 570 pixels de largura. Isso permitirá um intervalo de 10 pixels entre a barra lateral esquerda e a borda do novo retângulo e uma lacuna de 20 pixels entre a barra lateral direita e a borda do novo retângulo, como visto na captura de tela anotada abaixo:
Etapa 13
Selecione novamente a ferramenta Forma do retângulo e crie um retângulo cinza muito menor, como o abaixo. Posicione-o no canto superior direito do retângulo grande, desloque-se do retângulo grande em 10 pixels. Posicione a forma a 30 pixels da parte superior do retângulo.
Passo 14
Duplique a camada de texto na barra lateral direita e, usando a tecla Shift e a combinação de teclas Cursor, desloque a camada de texto duplicada sobre a área de conteúdo principal. Faça o mesmo com as duas camadas de linha para o título “Categorias”.
Selecione a ferramenta Tipo e clique na sua camada de tipo duplicado. Remova todo o texto na caixa e altere o cabeçalho para algo mais adequado. Eu usei apenas um texto fictício aqui: "Isso aqui é chamado de título."
Etapa 15
Vá para Arquivo → Colocar e localize uma fotografia para colocar no documento como um marcador de posição. Usar imagens reais aqui é sempre melhor porque elas fazem o mock-up parecer mais real e atraente. Eu usei um foto da minha irmã .
Vá para Edit → Free Transform para reduzir o tamanho da foto e posicioná-la no lugar certo. Faça um total de 20 pixels mais curtos em largura e altura para que caiba bem no retângulo preto, da seguinte forma:
Passo 16
Abra as opções de mesclagem para o grande retângulo preto. Aplique uma sobreposição de cor branca e uma sombra com uma opacidade de 10% e um tamanho de 3 pixels.
17º passo
Selecione a ferramenta Forma do retângulo mais uma vez e desenhe uma forma longa abaixo da forma de fundo da foto branca. Certifique-se de que é a mesma largura. Preencha com um cinza claro.
Abra as opções de mesclagem para o novo retângulo cinza e aplique uma sombra projetada. Defina a cor para branco, com um modo de mesclagem normal, a opacidade para 100% e a distância para 1 pixel. Deixe tudo mais definido para 0 pixels.
Além disso, aplique uma sombra interna, usando a cor preta, com uma opacidade de 10%. Altere o tamanho para 13 pixels e deixe tudo definido como 0 pixels. Esses dois estilos de camada farão com que a nova forma pareça estar gravada em segundo plano, como nossa tipografia de título:
Passo 18
Passando para a barra lateral, baixe algumas texturas de madeira repetidas. Estou usando um conjunto de GraphicRiver isso inclui três texturas de madeira diferentes: claro, médio e escuro.
Depois de instalar os padrões no Photoshop (abrindo cada imagem e definindo-a como um padrão), selecione a barra lateral no documento do Photoshop. Vá para Layer → New Fill Layer → Pattern. Selecione uma de suas texturas de madeira (selecionei a versão média) e clique em OK. Ao selecionar a barra lateral primeiro, o padrão deve preencher apenas essa área.
Clique com o botão direito do mouse na camada de padrão e selecione "Opções de mesclagem". Aplique uma sobreposição de gradiente, indo de preto para transparente para preto:
Altere a opacidade da sobreposição de gradiente para 10% e dê um ângulo de 0 °. Isso adicionará uma sombra sutil à barra lateral, fazendo com que ela pareça um pouco mais realista e menos plana.
Além disso, aplique uma sombra projetada na barra lateral. Diminua a opacidade para 30% e mude o ângulo para 180 °. Altere a distância para 1 pixel e o tamanho para 5 pixels, deixando todo o restante definido como 0 pixels. Isso adicionará uma sombra pequena e sutil à barra lateral.
19º passo
Abra as “Opções de mesclagem” para o retrato do círculo que criamos perto do começo deste tutorial. Aplique uma sombra branca usando as configurações abaixo:
Além disso, aplique uma sombra interna usando as configurações abaixo. Isso fará com que o retrato do círculo pareça ter sido colocado na árvore, em vez de apenas ficar sobre ele.
Passo 20
Duplique a camada de título no conteúdo principal. Reposicione-o na barra lateral e altere o texto para "Sobre mim". Além disso, reposicione e redimensione as duas linhas abaixo do cabeçalho.
Abra as “Opções de mesclagem” para sua nova camada de texto e altere as configurações de sombra para elas:
Adicione um texto à seção "Sobre mim", usando a mesma fonte e tamanho que usamos no texto da barra lateral direita. Abra as “Opções de mesclagem” para este novo texto e clique na guia “Brilho externo” para aplicar um brilho externo; altere a opacidade para 30%, a cor para branco e o tamanho para 18 pixels.
Isso fará com que o nosso texto seja mais legível contra o fundo de madeira.
Brinque com o tamanho da fonte para facilitar a digitalização do texto.
21º passo
Depois de algumas experiências, decidi que toda a barra lateral parecia muito melhor na mais escura das três texturas mencionadas acima. Eu mudei o padrão da barra lateral e as cores do texto. Use as técnicas que você já aprendeu para fazer isso.
Aqui está o que meu design parece até agora:
Passo 22
Por mais que você tenha planejado, você deve fazer alterações durante o processo de design. Ao olhar para o design como um todo (em vez de fragmentado), concluí que 10 pixels entre as barras laterais e a área de conteúdo principal estavam longe o suficiente.
Usando a combinação de teclas Shift e Cursor, desloque seu conteúdo, fazendo as duas lacunas de 40 pixels em vez de 10. Isso tornará o design mais utilizável e atraente.
Passo 23
Eu também decidi mudar o estilo do cabeçalho do tema.
Altere a cor (usando uma sobreposição de cores na janela "Opções de mesclagem") para uma selecionada no retrato circular. Eu escolhi um verde-azul escuro.
Também removi a sombra interna e alterei as configurações de sombra, fazendo com que parecesse que o cabeçalho estava acima do plano de fundo, em vez de ser colocado nele.
Passo 24
Indo para o banner de conteúdo principal (ou seja, o retângulo que criamos anteriormente, localizado no canto superior direito da área de imagem do nosso conteúdo principal), selecione o retângulo clicando na visualização em miniatura da camada enquanto pressiona a tecla Comando.
Vá para Layer → New Fill Layer → Pattern, e selecione a mesma textura que você usou para a barra lateral.
Clique com o botão direito do mouse na camada de preenchimento de padrão e selecione a opção "Rasterizar camada". Usando as ferramentas Dodge e Burn, adicione destaques à esquerda e superior da forma e sombras à direita e inferior da forma.
Isso adicionará profundidade e dará uma leve sensação tridimensional à forma. A ferramenta Burn irá escurecer a imagem, enquanto a ferramenta Dodge irá iluminá-la.
Selecione a ferramenta Polygonal Lasso. Selecione uma forma semelhante à abaixo e preencha-a com um marrom escuro, selecionado de sua textura.
Usando a ferramenta Rectangular Marquee, selecione as áreas na nova forma que você não precisa e pressione a tecla Delete para removê-las. Você deve acabar com algo semelhante a isto:
Passo 25
Agarre o nosso próprio conjunto exclusivo de ícones chamado de "Reflexão". Vamos usar vários desses ícones em nosso design.
Insira os ícones que você precisa no documento indo até Arquivo → Inserir. Escolhi os ícones de câmera, heart, reload, edit e clock, que servirão como meus ícones photo, like, reblog, notes e time no tema.
Passo 26
Selecione o ícone da câmera e redimensione-o. Posicione-o na barra de tipos de postagem que acabamos de criar. Aplique um sombreamento interno e suspenso a ele, usando configurações semelhantes àquelas que usamos ao longo deste tutorial.
Adicione alguma tipografia à barra de tipos de postagem. Eu usei o mesmo Reklame Script que usamos no título e as mesmas opções de mistura que usamos para os títulos da barra lateral esquerda.
Passo 27
Selecione as outras quatro camadas de ícones. Clique com o botão direito do mouse e selecione “Rasterizar camadas” para transformá-las de objetos inteligentes em objetos de pixel.
Use a ferramenta Rectangular Marquee para selecionar todos os reflexos do ícone.
Pressione a tecla Delete em cada uma das camadas do ícone para remover seu reflexo.
Etapa 28
Selecione novamente todas as quatro camadas de ícones. Vá para Edit → Free Transform e, enquanto segura a tecla Shift para manter os ícones na mesma proporção, reduza seu tamanho e posicione-os na barra abaixo da área de conteúdo principal que criamos anteriormente.
Espace os ícones uniformemente usando as teclas do cursor.
29º passo
Clique com o botão direito do mouse na camada do ícone do coração e selecione “Opções de mesclagem” no menu. Altere a cor para cinza claro usando uma sobreposição de cores e aplique uma sombra interna usando as seguintes configurações:
Agora aplique uma sombra, usando estas configurações:
Depois que as configurações forem aplicadas à camada do ícone do coração, clique com o botão direito do mouse e selecione "Copiar estilos de camada". Selecione novamente todos os quatro ícones, clique com o botão direito do mouse e selecione "Colar estilos de camada". Todos os ícones nessa barra agora mesmo efeito.
Etapa 30
Selecione a ferramenta Tipo e crie uma pequena caixa de texto ao lado do ícone do coração. Digite “Like this post.” Aplique uma sombra interna e um drop shadow usando configurações similares àquelas que usamos ao longo deste tutorial.
Repita a etapa anterior para os ícones restantes, usando as seguintes frases: "Reblog this post", "1052 notes" e "Posted on 19/03/2011." Certifique-se de copiar e colar o mesmo estilo de camada em cada camada de texto.
Você também pode reposicionar alguns dos ícones com o novo texto, certificando-se de que a lacuna entre o texto e os ícones seja consistente; por causa dos diferentes comprimentos de texto, isso pode ter mudado.
Etapa 31
Duplique todas as camadas na área de conteúdo principal e posicione-as abaixo do original. Altere o título, a imagem e o tipo de retângulo. Como mencionado, quanto mais realista for o modelo, melhor.
Passo 32
Duplique o cabeçalho e o texto na barra lateral e insira alguns ícones. Eu usei os excelentes ícones de mídia social conhecidos como Buddycons , outro conjunto exclusivo para Webdesigner Depot.
O produto final
Depois de mais alguns retoques (eu removi o corte irregular de fita na parte inferior da barra lateral), estou tudo pronto! Aqui está nosso projeto final, pronto para ser codificado ou enviado para um desenvolvedor para fazê-lo.
Este tutorial foi criado exclusivamente para Webdesigner Depot por Callum Chapman , um designer de interface de usuário freelance que negocia com o nome Criativo do Circlebox . Callum também está trabalhando em um galeria de inspiração projeto chamado Vinspires.
Gostaria de ver outro tutorial sobre como dividir e codificar este projeto em um tema Tumblr totalmente funcional?