6.5.13

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

   

   
       Parte 1 aqui

       Oi oi pessoal!

       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!

32 comentários:

  1. que programa vc esta usando? É o photoshop certo? obg

    ResponderExcluir
    Respostas
    1. Isso mesmo. Photosho CS6. :) Obrigada pela visita!

      Excluir
    2. dá para fazer isso usando o Cinema 4D?

      Excluir
    3. Acredito que não. Não conheço o programa, mas pelo que pesquisei, o Cinema 4D é usado para criar animações em 3D. No caso do CSS, nós precisamos apenas de programas que façam edições de imagens, como o Photoshop e o Photofiltre Studio, mas não custa nada tentar. Se você conseguir criar algo usando o Cinema 4D, eu ia adorar ver como ficou. :)

      Obrigada pela visita! :D

      Excluir
    4. eu usei o photoshop online (por mim ser pobre e n poder baixar no pc -qq) e deu certo (apesar de certa dificuldade de raciocínio com as palavras do tutorial ~ n ligue, sou lerda mesm) '--'

      Excluir
    5. Que bom que deu certo! Ficou alguma dúvida? Eu posso te explicar de novo. :)

      Excluir
  2. no meu não aparece para add CSS tipo, só aparece para enviar um evento, uma fanfic, uma imagem, mas não aparece para add CSS. o que eu faço?

    ResponderExcluir
    Respostas
    1. Você deve ter ido em "Adicionar Conteúdo". Pra Adicionar um style, você precisa ir primeiro em Conta > Personalizar. Aí o site vai te direcionar para a área de Styles. No sub-menu do site (onde tem as opções Recentes, Destaques, Aulas, Categorias e Histórico) terá um botão azul escrito "+Enviar um Style". Clique nele, leia os termos e clique em "Aceito os Termos" Daí por diante é só seguir o turorial. :)

      Obrigada pela visita ^-^

      Excluir
  3. como fazer com outro programa?

    ResponderExcluir
    Respostas
    1. Pra fazer o fundoBase em outros programas não tem segredo. Todas as funções que eu usei você pode encontrar no Photofiltre Studio X, por exemplo.

      Mas se o problema é o programa, você pode usar o Photoshop Portátil. Ele tem tantas funções quanto o original, pesa menos e você não precisa instalá-lo, e pode seguir o tutorial tranquilamente. Aqui você pode achar o download dele: http://migre.me/gqItj

      Vai tranquila, o tumblr é de confiança. :)

      Obrigada pela visita :)

      Excluir
  4. Meu cimaLogo nao vai :( Poorqe?

    ResponderExcluir
    Respostas
    1. Olá, senhor anônimo! :)

      Você salvou o cimaLogo que você editou na pasta img? É importante que você salve nessa mesma pasta, de preferência substituindo o arquivo que já existia antes. Se você fez isso e mesmo assim não funcionou, provavelmente você apagou acidentalmente alguma parte do seu arquivo 'modelo'. Se quiser, eu dou uma olhada para você, é só mandar o arquivo no meu e-mail: halemandatto@ymail.com

      bjos :*

      Excluir
  5. haha! Olha eu aqui mais de um ano depois que você fez esse post... Mas ok, é que comecei a usar o Spirit esses dias!!

    Tutorial fantástico!!

    Parabéns pelo trabalho!! Escrita simples - de fácil compreensão - e explicação completa! Fica tudo bem claro, parecendo que você está conversando 'cara-a-cara' comigo. hahaha

    E mais do que 'parabéns', muito obrigada pelo trabalho!!

    Ah, sim... E por ter passado taanto tempo desde que você fez esse tutorial, corre o risco de não dar certo no final? É que os ''passos'' seguintes me parecem tão complexos que... o.o Nossa! haha Dá medo até de ler... kkkkkk

    ResponderExcluir
    Respostas
    1. Olá, senhor anônimo!! Obrigada por visitar meu humilde cantinho e por todos esses elogios, realmente me deixou muito contente! :)

      Sobre ter o risco de não dar certo, eu acredito que não, a não ser que o pessoal do Social Spirit mude alguma coisa no HTML da página. Mas caso eles mudem algo, eu atualizo o tutorial, aí não vai ter perigo de nada dar errado ;)

      Os passos seguintes são um pouco mais difíceis mesmo, mas não se preocupe que com o tempo você pega o jeito! :D E se tiver alguma dúvida, é só me procurar que eu ajudarei no que puder. ^-^

      Até mais! :*

      Excluir
  6. Oii, qual programa vc usou pra editar o fundoBase?

    ResponderExcluir
    Respostas
    1. Photoshop CS6, mas dá para você fazer com versões mais antigas do Photoshop ou com o Photo Filtre Studio X :)

      Excluir
  7. Eu nao consiguo desisto, mais, a sua explicaçao foi a melhor :)

    ResponderExcluir
    Respostas
    1. Poxa, por que não consegue? Não desiste, não! Não quer que eu te ajude? :)

      Excluir
  8. Eu não consigo fazer o fundoBase o que eu faço?

    ResponderExcluir
    Respostas
    1. Ao invés de fazer com sombra, você pode criar uma imagem de 1000px de largura e colocar uma borda de 1px cada lado dela. Esse método deixará seu Style mais simples, mas também fica bonito :D

      Excluir
  9. Oi, eu fiz o meu style e achei lindo. Porém, quando eu posto ele e aperto em " aplicar esse style " o banner não aparece no meu perfil. O que eu faço?

    ResponderExcluir
    Respostas
    1. Olá!

      Você provavelmente apagou alguma parte de seus códigos sem querer. Se faltar qualquer coisa, até mesmo as aspas (nesse caso, principalmente elas) o seu css não funciona. Dê uma revisada na parte do #cima #logo.

      Boa sorte!

      Excluir
  10. Meu cimaLogo está branco mesmo depois de modificar a altura nas notas. Por quê acontece?

    ResponderExcluir
    Respostas
    1. você deve ter apagado alguma coisa quando editou seu arquivo modelo.css. Baixe novamente o arquivo do site e reveja todo o código para ver se está faltando algo.

      Até mais!

      Excluir
  11. Como faço para alterar a largura permitida no site. Você ensinou a altura e deu certo, mas quando fui ver a foto saiu em sequência, terminando um pouco antes e começando de nv, entende? Ficou estranho, dá pra consertar?

    ResponderExcluir
    Respostas
    1. O site não permite alterações na largura. O que você pode fazer é alterar o tamanho da imagem que você vai usar. Tente e depois me fale se deu certo ;)

      Excluir
  12. Este comentário foi removido pelo autor.

    ResponderExcluir
  13. Oiee
    Bom, só estou aqui para te agradecer, eu acredito que foi este o primeiro post seu que eu vi, eu estava começando a aprender a fazer styles e o seu foi o melhor dos tutorias que achei, no começo os códigos são sempre muito complicados, mas agora pra mim é uma coisa mais normal digamos rsrs eu não me considero "boa" em style, acho apenas razoável,mas da para notar a diferença entre meus primeiros style como esse (https://socialspirit.com.br/personalizar/style/block-b-nillili-mambo-2819757) e os últimos como esse (https://socialspirit.com.br/personalizar/style/one-ok-rock-1-oclock-4977038) , você me ajudou desde o códigos até me tocar em como editar as imagens..então... só muito obrigada

    ResponderExcluir
  14. Desculpe encomodar, mas eu gostaria de saber se funciona no PhotoScape.

    ResponderExcluir
  15. por que minha imagem não aparece no cimalogo? as medidas estão certas!! "1000/300px" por que não aparece?

    ResponderExcluir
    Respostas
    1. acho que vou desistir!! é muito dificil fazer isso!!! eles podiam criar algo mais facil!!

      Excluir

Related Posts Plugin for WordPress, Blogger...