Tutorial: Criando um Style para seu perfil do Animespirit | Social Spirit (Parte 2)

   

   
       Parte 1 aqui

       Olá galerinha geek! Tudo certo?

       Bom, continuando com a parte 2 do tutorial sobre como criar um Style. Êeeeeee!!!

       Pra começar, faça o download do modelo.css que o site disponibiliza. Vá em Conta > Personalizar > +Enviar um Style > Aceitar os Termos de Uso. Na página que se abrirá, ao lado direito, haverá um bloco amarelo onde estará disponível o link para download.

       Após terminar seu download, crie uma pasta no seu computador com o nome Meu Style e extraia o conteúdo do arquivo.

Desktop de One Piece <3

        Obs: Os arquivos estrutura e modelo aparecerão para vocês como bloco de notas. No meu computador aparece como arquivos do Dreamweaver por ter o programa instalado. Não fará diferença nenhuma na criação do seu Style.

       Primeiramente, vamos editar os arquivos da pasta img. É aqui que entrarão seus dons em edição de imagem.

       Vamos começar pelo cimaLogo. A largura da imagem deve ser exatamente 1000px. Se você exceder ou usar um valor menor, sua imagem poderá ficar cortada. A altura não poderá exceder 300px, por normas do site. Eu estou usando o tamanho máximo no meu cimaLogo. Lembre-se desse valor, iremos usá-lo mais tarde.

       Após terminar de editar, salve seu cimaLogo na pasta img, em JPEG, substituindo a imagem já existente. Vejam como ficou a minha edição:

        Agora vamos ver como ficou o seu cimaLogo na página. Abra o arquivo "perfil" na pasta Meu Style. Esse é um arquivo salvo que te permite visualizar como sua página está ficando. Não é necessário estar conectado para visualizar.

       Opa, espera! Tem algo errado. A minha imagem não está aparecendo inteira!

       Calma, não entre em pânico! Lembra quando eu disse para guardar o valor que você usou na altura? Vamos usar agora!

       Abra o bloco de notas modelo. Aperte CTRL+F e procure por #logo. Em height, substitua 120px pela altura do seu cimaLogo - No meu caso, substituí por 300px.

       Aperte CTRL+S para salvar e atualize a página perfil. Seu cimaLogo está aparecendo por completo? Então estamos progredindo!

       Vamos agora editar o fundoBase. Já fiz um tutorial ensinando um modo pra fazer, que você pode conferir seguindo este link. O que eu vou ensinar agora é um pouco mais complicado, sinta-se à vontade para escolher qual dos métodos prefere usar.

       Abra o arquivo fundoBase no seu programa de edição. Aperte CTRL+SHIFT+N para criar uma nova Camada. Com a ferramenta Letreiro Retangular selecione a parte branca da imagem e preencha a seleção com a cor desejada.

Usei a cor azul pra vocês verem a diferença, vou fazer meu fundo branco :)

       Aperte CTRL+D para desfazer a seleção. Crie uma nova camada e faça um retângulo preto usando a ferramenta Letreiro Retangular, dessa forma:

       Clique em Filtro > Desfoque > Desfoque Gaussiano e digite o valor 5,5 na caixa Raio.

       Na Camada Plano de Fundo, clique no cadeado para desbloqueá-la. Em seguida, aperte CTRL+A e Delete para apagar o fundo. Certifique-se de que a Camada 0 (Plano de Fundo antes de desbloqueá-la) esteja selecionada.

       Posicione a Camada 2 em um dos cantos da imagem. Duplique-a e faça a mesma coisa do outro lado. Em seguida, arraste a Camada 1 para cima, de modo que fiquei por cima de todas as outras camadas.

       Salve a imagem em JPEG substituindo a fundoBase da pasta img. Salve uma cópia em PNG na mesma pasta com o nome fundoBasePNG. Pronto, a parte mais difícil já foi... Pelo menos da parte 2 do Tutorial.

       Volte ao bloco de notas modelo. Precisamos editar algo lá para que a imagem do fundoBase se repita. Aperte CTRL+F e procure por #base.

       Na linha background, substitua o no-repeat por repeat-y. Esse comando faz com que sua imagem se repita para baixo.

       Salve suas edições usando CTRL+S e atualize a página perfil. Perceba que as bordas ficaram brancas, mas isso por que a imagem foi salva em JPEG. É por isso que salvamos uma cópia em PNG. Quando formos upar o Style para o site, usaremos a imagem cópia. Não se preocupe, ensinarei como na Parte 3 do Tutorial :)

Não se preocupe com essas bordas, elas não estarão no seu trabalho final ;)

       Role a página e veja se o fundoBase está repetindo. Tudo certo? Então vamos para a próxima parte!

       Abra o arquivo fundoDegrade no seu programa de edição de imagens. Como o nome já diz, este será o fundo em degradê de seu Style. Vamos facilitar nosso trabalho mudando o tamanho da imagem. Vá em Imagem > Tamanho da Imagem. Desmarque a opção Restringir proporções e mude a Largura para 200px.

       

       Com a Ferramenta Degradê, escolha duas cores de sua preferência. Anote o código da segunda cor que escolheu, pois iremos usá-la mais tarde. Segurando o SHIFT, clique e arraste o mouse de cima para baixo.

       Ajuste novamente a largura da imagem para 2, não se esquecendo de desmarcar a opção Restringir proporções. Salve a imagem substituindo a fundoDegrade da pasta img. Atualiza a página perfil e veja como está ficando seu perfil.

       Você vai perceber que ainda há uma parte verde no fundo. Vamos arrumar isso! Abra o bloco de notas modelo. Procure por #208020. Substitua esse código pelo código da cor que você tinha guardado antes, a que você usou para o seu fundo degradê. 

     
       Salve as alterações do bloco de notas e atualize a página perfil. Role a página e confira se está tudo certo. Funcionou? Beleza!

       Como está ficando seu perfil? Aposto que está ficando bonito! A partir daqui, vamos trabalhar com os códigos do Style, então esteja preparado para para o próximo post! Encerro a Parte 2 do Tutorial aqui.

       Dúvidas? Comente aqui em baixo.

Até mais!

Parte 3