Updates +
Devido ao hiatus, não estamos moderando nem respondendo nenhum comentário, porém o blog continua aberto para visualização. Obrigada pela visita ♡

19 de agosto de 2013

Como fazer style para Anime Spirit

Beautiful | via Tumblr

[UPDATE 03.04.14: Por favor, visitem o novo tutorial AQUI ]

[UPTADE: O host do blogger bugou TODAS as imagens do post, mil perdões pelo transtorno, eu vou refazer esse tutorial o mais brevemente possível. -Kim]

  Hi strawberrys. Eu estava a um tempo querendo fazer eu mesma um style pra minha conta no AS, então decidi procurar algum bom tutorial de como se faz isso, mas eu não achei. Em nenhum lugar, sério '-' Então quando eu finalmente achei, a garota só explicou como fazer o banner e não como mexer no css pra arrumar tudo que queria e KilL.mE.pLS. Enfim, eu aprendi a fazer isso sozinha e como uma heroína montada no meu unicórnio purpurinado resolvi que o mundo precisa de mim -ou talvez nem tanto lol- Ok, chega de falar besteira -q let's go go go o////
  Antes de continuar devo desculpas, explicações, reverências e um cookie de baunilha pra cada um :c me desculpem mas vocês sabem como é. Aliás eu preciso da opinião de vocês pra uma coisa; uma amiga minha escreve fanfics, e como não sou de terminar nada do que começo cogitei a possibilidade de atender ao pedido dela, que é o seguinte: Ela quer postar as fanfics dela aqui no meu blog, porque também ela não sabe mexer direito no blogger, h u e. Eu quero que vocês me digam se é uma boa idéia, se ela é confiável eu não tenho dúvidas até porque eu conheço ela na real life, mas queria que vocês me dissessem se não estranhariam muito alguém postando aqui (._.'')
  Enrolei demais já, enfim, esse vai ser um mega post cheio de prints e vou explicar tudo por partes em tópicos pra ficar mais fácil. Se alguém não entender qualquer coisa que seja pode comentar perguntando :3

  1. Só pra esclarecer eu não sei tudo. Só vou ensinar o que eu de fato tenho certeza que sei
  2. Anime Spirit é uma rede social, onde se postam imagens, vídeos, tem fórums e principalmente postam fanfics. Era pra supostamente ser otaku/k-popper/j-popper, mas como sempre claro que não demorou muito pra se tornar uma comunidade de fandoms misturadas e tal, é um asian fanfictions meio fail em português mas não deixa de ser legal u.u

  Okay vamos começar :3 Antes de tudo, vá em personalizar, clique em adicionar novo CSS, aceite os termos e em seguida faça o download do modelo.

[clique nas imagens para ampliar ^^]



  Imagens:

  • Extraia os arquivos do RAR do qual você fez o download (se você não tem WinRar pode baixar aqui)

  Abra a pasta img e edite como quiser a imagem cimaLogo. Ela pode conter quantos pxs de altura você quiser, porém a largura deve ser obrigatoriamente 1000px, exatamente como no modelo. Eu particularmente gosto de manter a altura dos meus banners no geral em 240px. Essa é a imagem que vai ficar em cima do seu perfil, como mostra a imagem.


  Faça isso sucessivamente com todas as imagens da pasta, exceto a fundoSombra, que até agora realmente não sei pra que diábos serve lol.
  A imagem fundoBase, é a que fica como o primeiro fundo do perfil, como mostra na imagem.


(Esse espaço cinza claro entre o quadrado vermelho, o de fundo da parte amarelinha que segue como um complemento para o banner é a fundoBanner. Na imagem original além do espaço que é branco, há umas barrinhas nas laterais que são cinzas, elas atrapalham a próxima imagem por isso recorte elas da imagem e deixe o espaço em branco -ou da cor/figura que você escolher- com 1000px)

  O fundoDegrade é praticamente uma imagem inútil, você pode jogar na lixeira se quiser lol Nesse passo você escolhe uma imagem de background normal, (eu forneci um pac com alguns dos meus backgrounds que eu baixei ao longo do tempo -créditos em um bloco de notas dentro do pac- você pode fazer o download aqui)

  CSS:

  Essa parte não é nem um pouco complicada porque o css de modelo foi feito por um brasileiro \o/ por isso a maior parte das coisas estão todas indicadas de modo que talvez eu nem precisasse colocar aqui nesse tutorial, mas de qualquer forma pra que isso não gere nenhuma dúvida é melhor eu colocar tudinho né =^^=.

  Abra na pasta do arquivo que você fez o download o arquivo Modelo.css e coloque nos locais indicados a url de cada imagem. Um jeito fácil de você pegar a url da imagem é fazer um post de rascunho no blogger e clicar na imagem -com o tamanho selecionado em "tamanho original"- com o lado direito do mouse e clicar em "copiar URL da imagem". Em seguida, bem, você já sabe o que fazer lol coloque as urls nos locais indicados e corra para o próximo passo u_u

[sim eu uso windows xp, JuDGe.mE lol]



  Em seguida a parte dos códigos, é uma coisa bem simples pra se arrumar. É o seguinte: as vezes as imagens são pequenas demais e é realmente muito irritante e tedioso ter que ficar fazendo imagens de 3000px de dimensão só pra cobrir todo aquele fundoBase, por isso o mais fácil a se fazer é mudar a parte do código em que a imagem não se repete, claro que sempre lembrando que a largura dessa imagem deve ser a mesma largura do banner, a menos que você queira algum tipo de efeito mas isso eu explico no final porque é simplesmente uma questão do seu gosto nessa parte ^^

  1- Em 'imagem fundoSombra', no começo do código, você coloca a url da imagem fundoSombra -avá? lol- aquela que eu disse que é meio inútil e nem sei pra que serve ainda .__. Na parte sublinhada 'repeat-Y' não mude nada, a menos que alguma coisa de errado, aí você pode deixar um comentário ^^

  2- Em imagem fundo degrade você coloca a url de algum background que você escolheu, e na parte sublinhada 'repeat-X' apague o '-X' deixando somente o 'repeat' juntamente com o 'left top' não apague isso.

  3- Em fundoBase coloque a url da sua imagem editada da fundoBase, e altere a parte 'no-repeat' por 'repeat-Y'


  4- Em 'img/cimaLogo' coloque a url do seu banner -que no modelo tinha esse nome-

  5- Em 'height: 120px' altere o '120' pela altura da sua imagem banner, cao contrário ela vai ficar cortada; por exemplo como eu disse lá em cima, eu tenho preferência por colocar as imagens em 1000x240. Então quando eu particularmente, altero essa parte, tenho de colocar no lugar de '120px' o '240px'

  Cores do modelo:

  Essa parte eu não entendi muito bem, porque eu mexi e remexi um monte naquilo mas não consegui mudar algumas das cores, bem pelo menos as originais combinavam com o meu style -q mas enfim, claro que vocês sabem que cores tem códigos e blá blá blá, eu realmente odeio aquelas tabelas prontas de cores porque nem sempre tem todos os tons que você quer/precisa, por isso o melhor a se fazer é você ir em 'Modelo' no seu blogger e em 'Personalizar' > Avançado > Escolher alguma coisa que esteja bem na sua cara pra você ver quando mudar de cor e ir testando os tons até achar algum que goste, um print aqui pra você entender melhor -e chega de fugir do assunto né dona? >_<' sorry-
  Perdi o fio da meada, enfim lol, pra mudar as cores basta pegar os códigos e colocar nos lugares certos, como:

.boxMenuDireito .tituloMenuDireito {
        color:#838B8B;
        font-size:13px;

  Isso seria a cor daquele menu na parte direita, em que ficam seus amigos/grupos/interesses etc...Você muda essa cor e salva, assim como todas as outras que você quiser, entendeu? O jeito mais fácil de se ter uma preview é fazer outro perfil exclusivamente pra fazer preview dos seus styles -até porque um dos requisitos obrigatórios é uma imagem de preview do seu style mesmo que ele seja privado-
  A partir de "/* Estilos da parte de Cima do Site" tudo tem o nome indicado e com certeza não vai ser tão difícil decifrar o que é o que e que cor é qual se você tentar um pouquinho -o que eu estou fazendo no momento xD-

  Eu realmente espero que tenha ajudado, e caso você tenha qualquer dúvida pode deixar um comentário que eu vou fazer o meu máximo pra conseguir te ajudar. Então é isso, me desculpem pela ausência e falta de posts ultimamente, eu não tenho tido tempo muito menos criatividade pra tal coisa, mas sempre que surgir alguma coisa interessante eu corro aqui pra postar pra vocês >u< Ja ne.

17 comentários:

  1. Anônimo8/22/2013

    Olá, eu tenho uma conta no AS, e sei fazer style, na verdade eu e uma amiga estamos dando aulas.queria discutir alguns pontos da sua aula.

    1º A altura deve ser até 350px se tiver maior que isso estará fora das regras. - significa que não tenha lido-as.

    2º Sua aula deixou muito a desejar, e acaba por eu não entender nada, e não é de grande ajuda.

    Mas não vou dizer que a sua iniciativa foi muito legal, está de parabéns e se estudar mais o modelo vai poder dar aulas mais explicadas.

    ResponderExcluir
    Respostas
    1. Anônimo8/26/2013

      ._.eu consegui fazer ._.

      Excluir
    2. é, eu esqueci sobre a altura mínima .__. é que o banner ficaria bem estranho com menos que isso e acreditei que sinceramente ninguém iria fazer um baner curtinho ^^ mas eu vou mudar isso, obrigada.

      Excluir
    3. Concordo com o anônimo de 22 de Agosto. Eu li o seu tutorial inteiro e não entendi como fazer o style!

      Excluir
  2. omg *o* consegui fazer \õ/
    http://animespirit.com.br/torivanguard
    obg *o*

    ResponderExcluir
    Respostas
    1. de nada \o/ ficou muito bom, parabéns 'u'

      Excluir
  3. Anônimo8/24/2013

    Minha imagem n aparece de jeito nenhum! Tem alguma ideia do que possa ser?

    ResponderExcluir
    Respostas
    1. puseste em cima do cimalogo que tinha?

      Excluir
    2. qual delas? >_> a do banner, pode ser o que o primeiro anony comentou, quem sabe você não tenha a altura de 35opx que é o mínimo, ou apagou alguma vírgulazinha porque tudo faz diferença sabe ^^ me desculpa a demora por responder, eu não tenho tido muito tempo, mas tenta fazer de novo

      Excluir
  4. No inicio após ir em personalizar não aparece "Adicionar > Css"
    Como faço? :S

    ResponderExcluir
    Respostas
    1. mil perdões pela demora '~' eles mudaram o site então consequentemente isso também mudou ^^ tem aquela barrinha azul escrito "Enviar style" no canto direito superior onde geralmente fica aquela barrinha azul de "Adicionar". Clica lá, aceita os termos e a página do print vai aparecer ^^

      Excluir
  5. Anônimo10/09/2013

    OMG! eu consegui, apesar que ficou bem pobre por só estar testando u.u
    http://animespirit.net.br/sutoroberi

    ResponderExcluir
  6. Anônimo10/17/2013

    como eu edito a imagem cimalogo ? não estou conseguindo.

    ResponderExcluir
    Respostas
    1. Eu faço geralmente assim: coloco a imagem cimalogo no paint e apago tudo, aí só uso o tamanho como referência pra colar as pngs e coisas do tipo, por exemplo, pra fazer a imagem de cimalogo dos prints do post, eu joguei a cimalogo original no paint e apaguei tudo, então aumentei a altura e colori o fundo de cinza, depois eu editei uma imagem que achei na internet e criei uma png pra colar em cima (aquela da konata e da miyuki na direita) e escrevi as "frases de efeito" da konata no anime. Ao invés de colorir você pode por um fundo, um backgroung, um pattern, aí depende do que você acha que fica melhor, como no novo style que eu uso no meu perfil (http://animespirit.net.br/personalizar/style/idolos-exo-byun-bacon-869067) só que claro, esse tipo de fundo no cima logo leva mais tempo, mais algumas edições, mas é coisa que com o tempo você consegue fazer. Você também pode deixar só uma png colada no início do perfil (igual a esse style http://animespirit.net.br/personalizar/style/livros-a-culpa-e-das-estrelas-a-culpa-e-das-estrelas-1027140) o que é fácil e fica legal na minha opinião c: Se você estiver com alguma outra dificuldade ou não ter entendido isso que eu escrevi aqui pode comentar (eu nunca fui muito boa explicando tim tim por tim tim então vai ser compreensível se você não entendeu bulhufas do que eu te disse -q).

      Excluir
  7. então as cores aparecem,mas as imagens não estão aparecendo
    tipo quando eu clico em perfil pra ver como fico ela fica certinha,mas quando posto no ss as imagens não aparece

    ResponderExcluir
    Respostas
    1. Respondendo à você e a Déborah

      Tipo, na página do seu style (socialspirit.com.br/personalizar/style/tal banda-nome-do-sytle-um número aleatório) as imagens não aparecem? Porque se for elas não aparecem ali mesmo ^^ Mas digamos, você postou um style e depois de um tempo foi usar, clicou em aplicar style e aí as imagens ficaram bugadas no perfil? Se for isso então você deve ter apagado algum dos ponto e vírgula do final (;). Por exemplo:

      background: url(http://urldaimagem.com.br/);

      Se você apagar qualquer coisinha, por mínima que seja, dessa linha a imagem já não aparece. Você poderia mandar um print da página com as imagens bugadas pra mim? E/ou então uma cópia do seu modelo pra eu dar uma olhada :3

      Excluir