[Social Spirit] Bordas com sombra no Fundo Base

Spoiler Alert!

Olá galerinha geek! Tudo bem?

À pedido da Louise Kayanuma, trago a vocês um tutorial de como deixar o fundoBase do Style com sombras. Antes de começar, é necessário um programa de edição. Eu vou usar o Photoshop Portátil, pois não estou no meu computador, mas vocês podem usar qualquer outra versão ou programa que preferir.

Bem, vamos lá!

Após baixar o arquivo modelo.v2.5 do Social Spirit e extraí-lo, abra a imagem fundoBase.jpg (na pasta img) no Photoshop. No menu Layers, clique duas vezes no cadeado da camada Background para desbloqueá-la. (Após fazer isso, o nome da camada Background muda automaticamente para Layer 0).

Selecione a ferramenta Varinha Mágica (W) e clique na parte branca da imagem que você abriu. Aperte CTRL+J para duplicar a camada. Clique no "olhinho" ao lado esquerdo da Layer 0 para ocultá-la.

Clique duas vezes sobre a camada Layer 1 para abrir a janela Layer Style (Estilos da Camada). Marque a opção Drop Shadow. Deixe um ângulo de 90º, Distance de 5px e Size de 7. Enfim, clique em OK.

Selecione a ferramenta Mover (V) e a camada Layer 1. Aperte CTRL+T para selecionar a imagem. Note que um quadrado se formou ao redor da imagem. Puxe os "quadradinhos" das linhas superior para cima e inferior para baixo, da mesma forma que está na imagem. A distância não importa, isso é só para garantir que sua sombra fique sem falhas. Dê dois cliques ou aperte Enter.

Salve em formato PNG - eu sempre salvo com o nome fundoBasePNG para não confundir depois. Agora você precisa upar essa imagem em um site de hospedagem. Eu uso o imgur.com. Ele nunca me deu dor de cabeça e é fácil de navegar.

Depois que você upar sua imagem, copie o Direct Link. É só abrir a imagem no site, ao seu lado terão várias opções de links para copiar e compartilhar.

Abra o arquivo modelo. Procure por #base { e substitua a URL existente pela que você copiou. Mude a opção no-repeat para repeat-y (isso fará a imagem se repetir para baixo). Procure agora por #body { e apague a URL dentro do parênteses. 

Salve as alterações. O resultado final será esse:

Prontinho! E aí, conseguiram entender? Caso tenham alguma dúvida, é só comentar aqui embaixo ou mandar um e-mail, ok?

Até mais!