Como fazer um Style (Parte 1)

Olá queridas!!

Olha fiquei feliz com o tutorial da capa, fiquei muito feliz em saber que ajudei vocês, e bem me desculpem pelos erros daquela merda, é que eu tinha que sair e tal dai não deu tempo de corrigir! Enfim, como eu disse mais para frente eu vou estar ensinando a fazer umas capas mais detalhadas, mas por enquanto vamos passar para outro tema, mas antes eu queria muito agradecer as meninas que estão realmente acompanhando o blog e me incentivando e tal, e passar o link da one que eu disse que ia passar e nem passei, sorry!

One-Shot You And I: http://socialspirit.com.br/fanfics/historia/fanfiction-avenged-sevenfold-you-and-me-1654571

Bom, agora sim vamos começar!! E o Tutorial de hoje é sobre o assunto mais pedido da galera, que é fazer um css ou Style, não importa! Sim os famosos styles que é um quebra cabeça para todo mundo, pode parecer, mas quando se pega a manha não esquece mais! Só que como um css é uma coisa demorada e detalhada de primeira levaria um dia todo para eu ficar aqui explicando, então eu vou dividir o tutorial de fazer um css em duas partes, postando essa hoje, e a outra assim que der então fiquem de olho.

Não, esse não é o que iremos fazer, é só um exemplo, por que eu vou fazer um inédito com vocês e que se der mais tarde eu o posto no SS. Esse aqui eu fiz ontem a noite Hoje o que eu vou fazer é da cantora Kerli, muitos não conhece, mas depois eu vou passar algumas informações sobre ela!

O designe do css é quase como as da capa de fanfic, por isso vou fazer no Pixlr também por que eu acho bem mais fácil. Vou fazer um bem já outro nível vamos dizer assim. Nessa primeira etapa faremos só o designe das imagens que é o CimaLogo, o FundoDegrade, o fundoBase e a transparencia. Não vou ficar explicando muito como se mexe no pixlr de novo por que é o mesmo principio da capa, borracha, latinha de tinta etc.

E antes mas de começar, tem uma coisa muito importante, toda foto que vocês pegarem na net para usar no css, qualquer que for vocês tem que guardar o link da pagina tirada, pro que precisa dar créditos na hora de postar. E mais uma coisa, eu vou estar passando as medidas exata das imagens ou seja que é pedida no site, se mudar algo eles deletam okay, mas mesmo assim antes de postar é bom dar uma lida nas regras de postagens, okay? Então vamos começar a trabalhar!!

Apresenta: Como fazer seu próprio Style!!

Primeiramente o que você deve fazer pé uma pasta separada no seu pc, renomeie aqui como css, que vai ser onde você vai trabalhar nos eu css e ficar mais fácil de achar as coisas. E depois é só você ir na Net e salvar as fotos do personagem que você quiser, uma duas quantas quiser, e que sejam fotos de alta qualidade por favor, eu no meu caso vou usar três fotos fotos da Kerli:

1-

2-

3-

E bem, caso você queira colocar algum enfeite no cimaLogo que é essa imagem grande de cima, eu sugiro que você abra uma aba no google imagens e digite "enfeites png" vai aparecer muitas coisinhas bonitinhas e fáceis de colocar, dai vai de seu cretério se vai colocar ou não, eu escolhi:

1-

Bom, agora vamos para a montagens, vamos abrir o pixlr novamente, e abrir em criar uma nova imagem, com largura SEMPRE 1000 por altura de SEMPRE 350 e clique em "transparencia"

Pixrl: https://pixlr.com/editor/

1-

Agora você vai abrir uma imagem de cada vez ali, eu por exemplo vou usar o fundo das três imagens como referencia, mas se você não quiser, quiser outra cor, você faz o que eu ensinar a  mexer com as cores ali em baixo escolhe a cor desejada e colore o retângulo, depois você vai abrir a foto em "camada" e depois "abrir imagem como camada" e ela vai aparecer assim:

1-

Ai você vai lá na setinha preta da barra de ferramenta e vai mover ela para onde você quer, e ai se você ai coloriu o fundo de outra cor, é só fazer o mesmo processo da capa, posicionar a imagem onde deseja, pegar a borracha e apagar o fundo da imagem usada deixando só a personagem, e depois fazer isso com as outras imagens escolhida, no mesmo processo de abrir imagem, posicionar onde tu quer e apagar as beiradas, no meu caso como eu não colori vou mostrar como vai ficar:

1-

2-

3-

Agora que o fundo está montado, é hora de colocar o enfeite que tu escolheu, vou começar para o lacinho, para ficar como se estivesse unindo as imagens, olhe, abra do mesmo jeito que se abre uma imagem:

1-

Bom, agora o cimaLogo está quase pronto, precisamos agora só escrever o que você deseja, ou no meu caso o nome da cantora, e depois vamos assinar!!

Parara escrever é muito simples, observe ai no painel de ferramentas bem no final a letra" A" clique nela, e depois clique com o mouse no lugar que você deseja escrever e vai aparecer um quadro:

1-

Bom eu enumerei ali o que você deve fazer primeiro para ficar mais fácil, primeiro você vai clicar nesse quadrado branco onde tem um "texto" em cima e vai digitar o que você quer. Depois você vai clicar em fonte que vai aparecer um monte de opção para letras diferente, depois você vai clicar onde ta escrito tamanho e vai aparecer uma barrinha onde você define o tamanho que você vai querer, depois você vai clicar nesse quadrinho negro de cor e vai aparecer aquela tabela de cor, você vai escolher a cor que quer e aperta okay, para a tabela de cores, depois voltando a esse quadrinho você vai clicar onde foi escrito e arrastar para onde você quer que as letras fiquem, e depois aperte okay.

1-

E bom, como pede nas regras de postagem do site, eles não aceitam css que não esteja assinado, então você vai fazer o mesmo processo de escrita para assinar, seu nome, assinatura, o que for, algo que te identifique, coloque não muito grande para não atrapalhar:

1-

Bom, e está pronto o cimaLogo, ficou bem simples né, mas é que de novo eu estou meio sem tempo! Mas sem problema, vamos lá agora é só salvar, clique no "x" da imagem e vai aparecer um quadro onde pergunta se deseja salvar antes de fechar, clique em sim e vai aparecer outro quadro, nesse quadro vamos renomear a foto, onde está um quadrinho escrito "nome:" você vai digitar cimaLogo exatamente do modo que eu escrevi aqui okay, e depois aperte okay e está salvo.

1-

cimaLogo

Agora, vamos fazer o fundoBase, que é esse fundo grandão que aparece atrás das letras no style, que muitas vezes tem imagens e tal, mas dessa vez eu vou fazer sem imagem, é só o básico. Boltando ao pixrl, você vai criar uma nova imagem novamente, mas desta vez com 1000 de largura SEMPRE e 1000 de altura SEMPRE clique em transparencia e okay.

1-

Agora você vai ai no quadrinho preto na barra de ferramenta clica nele vai aparecer a tabela de cores, você vai escolher a que você deseja, apertar okay, ir na latinha de tinta depois na imagem e clica lá para colorir a imagem:

1-

Caso você achar que vai ficar muito feinhinho e tal, você pode colocar um enfeite png nele como fizemos no cimaLogo, que tal:

1-

Usei:

2-

Agora o fundoBase está pronto, vamos salvar ele no mesmo processo, clica no "x da imagem, depois em "sim" depois no outro quadro maior faremos como fizemos no cimaLogo, no "nome" colocaremos fundoBase exatamente como eu escrevi aqui, e depois okay, e salva ele na pasta no pc:

1-

Agora iremos fazer o fundoDegrade, que não tem muita utilidade, mas que é obrigatório, ele nem aparece, mas enfim, de volta ao pixrl, você vai novamente criar uma imagem, agora com a largura SEMPRE de 1460 e altura SEMPRE de 643 também com transparencia:

1-

Eu recomendo que ele seja sempre na cor preta, ele nem aparece, por que ele fica debaixo do cimaLogo, mas você pode colorir da cor que quiser também, ai você vai fazer a mesma cor, abrir a tabela de tintas escolher a que deseja e aperta okay, vai na latinha e pinte a imagem:

1-

Bom agora você vai salvar da mesma forma, mas é bom eu repetir para ficar mais fácil de vocês guardarem, clica no "x" da imagem, depois em sim, e depois no ultimo quadro você vai renomear a imagem como fundoDegrade exatamente do jeito que eu escrevi e depois aperta em okay e está salvo.

1-

Agora eu ou ensinar uma coisa, que eu demorei para aprender e que deixa os css muito foda, que é a transparencia, essa é um pouco mais complicada de se fazer, então preste bem atenção. Ainda no pixlr, vocês vão criar uma nova imagem que eu recomendo que você clique onde está escrito "predefinições" onde vai aparecer várias medidas, você vai clicar na  1024 por 768, depois em transparencia e okay:

1-

Agora vocês vão na barrinha de cores, e colorir essa imagem de branco.

1-

Agora prestem bem atenção, vocês vão olhar ai do lado onde tem 3 quadrados, vocês vão olhar para o segundo com o nome camada, onde vocês vão ver um pequeno desenho da nossa imagem e em baixo alguns desenhinhos, vocês vão clicar no primeiro desenhinho bem pequeno ai:

1-

Quando vocês clicarem no desenho 1- que eu indiquei ai na foto vai aparecer umas coisas nesse quadrinho que mostra no desenho 2-, ai vocês vão ver onde tá  esse "opacidade" tem tinha uma setinha vocês vão puxar ela para trás até onde ali que ficou 100 ficar 20, vocês vão ver que a foto vai mudar e vai ficar assim:

1- 

Agora você vai salvar essa imagem, vai clicar no "x" da imagem aperta em sim, e depois nesse ultimo quadro antes de salvar ATENÇÃO, você vai renomear a foto como transparencia assim como eu escrevi sem acentuação nem nada, e antes de salvar mais uma coisa ainda nesse quadro, reparem que em baixo do nome tem um outro quadro que é para escolher o formato que você que salvar a imagem, cliquem nele e salvem no formato "PNG" e depois é só apertar okay:

1-

Pronto, não dá para eu postar aqui, para mostrar como ficou por que obviamente está transparente, mas em fim, todas as imagens necessárias para o css estão prontas, agora na pasta que você está salvando vamos deixar apenas o cimaLogo, o fundoBase, o fundoDegrade e a trsnaparencia para não confundirmos nada Assim você já pode fechar o pixlr:

1-

Pronto agora para encerrar a primeira parte de como fazer um Style, vamos voltar lá na sua conta do social, vamos dizer que lá eles dão o material para você poder montar o css, a parte ma difícil do html, o modelo, para você ir modificando até ele ficar do jeito que você quer. Vamos ir na pagina de styles no SS, depois você vai abrir um style qualquer de alguém ai já postado e vai olhar no seu lado direito em cima um botão escrito "enviar um style" ai você clica nele que vai aparecer os termos de regras, você tem que ler isso tudo, depois clique em okay, no botão verde quando você finalmente entender tudo como funciona, ai vai aparecer a tela de envio, como ou mais ou menos como se envia uma fanfic:

1-

2-

3-

Olhem na ultima imagem o que eu contornei de preto, vocês vão ler isso e clicar onde está marcando "clicando aqui", ai vocês vão baixar o modelo, é super confiável por que é do próprio site, não tem vírus nem nada disso, só que ele vem compactado, mas pra quem não sabe como é isso eu vou ensinar descompactar também. segue as imagens:

1-

Vocês vão baixar esse pacote na mesma pasta que estão salvando as fotos para a montagem do css. Clicando aonde eu marquei vai aparecer uma imagem pedindo para você salvar e tal, você clica em salvar e salva na mesma pasta que eu falei, no caso de quem usa o chorme ele já salva direto assim que clica lá, eu crio que vai para a pasta de downloads do seu computador, se estiver lá ele vai vir em forma de uns livrinhos escrito "modelo.v2.2":

1-

Para descompactar ele é muito fácil, você vai clicar nele de leve só para selecionar, depois vai clicar no mouse com o botão direito ai vai aparecer as opções você vai escolher a que está escrito "extrair aqui", e ele vai aparecer um outro quadrinho carregando, em seguida várias pastas vão aparecer na pasta que você está salvando seu css:

1-

Bom gente é isso ai, está terminada a primeira parte de como fazer um Style, a outra parte é bem mais complicada e leva bem mais tempo, pois isso vou fazer outro dia, por que agora eu tenho qua sair e depos estudar, então eu peço que deixem os css de vocês exatamente como eu deixei aqui, que ainda essa semana a gente vai terminar ele okay, bom espero que estejam gostando e enetendendo direitinho, caso de duvida vocÊs sabem onde me achar.

Uma dica importante que eu dou aqui, é tipo você não precisa ficar baixando o modole do site tada vez que você for fazer um style é só guardar esse e extrair toda vez que você for fazer!
Bom por hoje é isso espero que vocÊs estegem mesmo interessados e que apareçam aqui novamente para terminar o css!!  E novamente me perdoeem os erros, é por que eu nunca tenho tempo :s

Contato: 

 Facebook: https://www.facebook.com/byah.aparecida.5?ref=tn_tnmn

socialspirit: http://socialspirit.com.br/bsullivan

email: biagates9@gmail.com

 E bem aqui o css do Halestorm que eu mostrei como exemplo no começo do post;

css: http://socialspirit.com.br/personalizar/style/halestorm-lzzy-hale-1754110

Bom por agora é só isso, continuação...

Loading...

bjs no core <3