TUTORIAL: Fazendo Styles Para o Social Spirit (Parte 1)

Hey, minha gente, gente minha! Tudo legal? Lembram de mim? #oshe

Well, well. Hoje eu trago para vocês uma coisa digna de FIREWORKKKKK, tá parei U_U

Mas sério, eu sei, titia Angel sabe que vocês todos estavam roendo as unhas por esse tutorial. Não vale a pena dizer que não. Ah, e titia o c@&#. Sacou? KKKKKK

Então, parando de viadices. Vamos ao que interessa, não é? Eu aprendi recentemente a fazer Styles (hoje, na verdade ~risus~) e, bem, eu achei a coisa mais FÁCIL de sempre. Então vamos nessa, né?

O tutorial via ser dividido em 4 partes.

A primeira parte (essa, ó), será o design do topo. A segunda, o design do corpo do seu style, a terceira serão os códigos e a quarta vai ser a gente upando o style e vai ser simples pra carayzinho.

Vamos nessa então? Ah, antes de qualquer coisa quero que fiquem muito atentos em tudo o que eu disser porque senão vai dar erro. Acreditem.

(Cliquem nas imagens para ver em tamanho original)

Primeiro Passo:

Okay, okay, okay. Quem sabe editar, NÃO pode pular essa parte. Psé, psé. Quem não sabe, não pule também. É importante.

Então, a gente vai abrir nosso photoshop, ou photoscape, o que você preferir.

No caso, eu estou usando o photoshop CC ou CS7, mas é tudo igual.

Vamos abrir um documento 1000x350. Se você ver, nas regras dos Styles do SocialSpirit tem lá que a largura tem exatamente que ser 1000 e altura não pode exceder 350. Então, vamos respeitar isso.

No caso, eu estou usando 350px de altura, mas você usará o que quiser desde que guarde esse valor porque vai precisar dele depois.

Então, o que está esperando? Crie o documento!

(Para criar o documento você deve ir em Ficheiro > Novo ou CTRL + N e colocar as dimensões certas. Obs: certifique-se que tudo está em pixeis)

Segundo Passo:

Okay, beleza. Você vai abrir suas imagens, posicionar elas como desejar, apagar as bordas, fazer as manipulações, beleza, beleza, beleza, beleza.

Para quem não está muito familiarizado com o Photoshop, ou que seja, a gente vai abrir a imagem no navegador. Eu sugiro que você pegue ela de alguma galeria HQ, por exemplo o HQDiesel, ou o HQPictures.

Depois de você ter aberto a imagem no navegador, você vai clicar direito sobre ela e ir em copiar. Você vai abrir seu photoshop de novo e clicar CTRL+V. A imagem vai aparecer lá, belezura. Aí você vai na ferramenta de Letreiro Retangular (a do quadradinho pontilhado lá em cima, se não achar pressione M).

Depois de ter essa ferramenta selecionada você vai clicar direito sobre a imagem, no seu documento, e ir em Transformação Livre. Beleza, agora lá na barra de cima você vai clicar na correntinha, entre as dimensões da imagem; isso serve pra imagem não perder as dimensões e não ficar bugada. Legal?

Você vai deixar a imagem onde você quiser, como você quiser, do tamanho que você quiser.

E vai fazer o mesmo com as outras até estar do seu agrado, apagando as bordas e tal. Pode botar brushes, molduras, enfeites, o que desejar.

Bem desse jeito:

Terceiro Passo:

Bom, eu acho que o topo de nosso style está ficando lindão, mas ainda precisa de aquele charme, sabe? Então, texturas, citações, colorizações, tudo isso. Essa é a hora.

Para adicionar texturas, você insere elas no seu documento (Ficheiro > Inserir) redimensiona como mostrei antes e pode apagar excessos, modificar as opções de opacidade e sobreposição.

Depois acrescente as suas quotes (citações) se desejar. Se for de série, você pode botar aquela citação diva que disseram na série, ou no filme, se for de artista bote uma parte de uma música, ou algo que eles tenham dito. É com você. Se não quiser, nem sequer bote.

Deixe umas cores bonitonas na citação (um "style" - não um style de SocialSpirit, um style do photoshop, aquelas corzinhas que tem no canto inferior direito de meu ps), e por fim, bote aquela colorização bonitona.

Pra botar a colorização você deve abrir ela (Ficheiro > Abrir) e depois arrastar o grupo da colorização para o seu design. Não vou aprofundar muito esse tema, mas vocês podem encontrar muitos tutoriais sobre isso aqui no PP, então, beleza.

Deixe seu banner bem bonitão, viu? Assim:

Quarto Passo:

Se você ler as regras dos styles do SocialSpirit, você verá que é obrigatório ter seus créditos no topo de seu style. Então, para quê desobedecer uma regra que está lá para ser cumprida, sendo que é apenas para seu bem? Afinal, você não quer que lhe plagiem, pois não? Então força nisso.

Bote uns créditos algures no seu banner e achate a imagem (Clique direito sobre uma das camadas e vá em Achatar Imagem).

Pronto, agora, NÃO SALVE JÁ. Vamos deixar o seu banner lá mofando um pouquinho, okay?

Veja como ficou o meu banner no final:

De novo, não esqueça: Não salve nem feche seu photoshop, deixe lá seu banner, okay?

Quinto Passo:

Okay, agora vai começar a treta séria. Até agora foi só mimimi, banners, coisas que qualquer designer de banners, ou qualquer edição em si, consegue fazer. Mas agora a porra ficou séria.

Você abrir seu navegador e ir no Social Spirit. Vai em Adicionar > Adicionar Style.

Vão aparecer os termos de utilização dos styles e você deve ler eles todinhos, okay, não vamos ser rebeldes! (pelo menos não nessa situação, porque você pode acabar com seu style eliminado =/).

Depois, aceite os termos.

Vai abrir uma páginazinha que serve para enviar o nosso style, mas a gente ainda não vai enviar ele não, moçada!

Você vê esse avisozinho na direita, em amarelo? Pronto, você vai baixar o código do style que está nesse avisozinho.

Depois de ter baixado ele, você vai extrair usando o WinRar ou algo do tipo. Extraia para seu Ambiente De Trabalho ou para onde você preferir e mude o nome para "Meu Style", "Style", etc, etc.

Pronto, agora... Dentro da pasta você vai encontrar duas pastas (Font e Img), três documentos (Estrutura, Leia Me e Modelo) e uma ligação (Perfil).

A gente não vai tocar na pasta de Font, nem no documento de Estrutura. O Leia Me é só umas indicações não importantes.

O que interessa para a gente, para já, é o Modelo, o Perfil e a pasta Img.

Sexto Passo:

Pronto, agora... Lembra daquele banner que você deixou mofando? Você vai salvar ele EM JPG na pasta Img com o nome "cimaLogo". Tem que ser exatamente em JPG, na pasta Img e com esse exato nome. Não tente inventar, okay?

Já há uma imagem lá com o nome "cimaLogo", mas você vai substituir ela, okay?

Agora, você vai voltar a pasta inicial e abrir a hiperligação "perfil", que é uma ligação que serve para você ver como o andamento de seu style está indo, é apenas uma interface de pré-visualização offline, okay? Seu style ainda não está online, nem o caray a quatro. Isso serve apenas para você ver como está indo.

Então, voltando. Abra o perfil e veja como está ficando.

Agora, não saia correndo já! É provável que seu banner esteja cortado, mas não vamos dar a louca, okay? A gente vai arrumar isso futuramente.

De qualquer jeito, é assim que seu perfil deverá aparecer:

De novo, não dê a louca. Arrumaremos isso já, já.

Sétimo Passo:

Muito bem, a hora da verdade. Abra o documento do modelo que deverá ser abrir num documento de bloco de notas.

Procure por:

/* ####################################################################### */

/* Estilos da parte de Cima do Site                                        */

#cima #logo {

        height: 120px;

background: url(img/cimaLogo.jpg);

Depois vá onde diz "height: 120px" e modifique o 120 pelo valor da altura que você escolher. No meu caso, fica desse jeito:

/* ####################################################################### */

/* Estilos da parte de Cima do Site                                        */

#cima #logo {

        height: 350px;

background: url(img/cimaLogo.jpg);

Viram? Simplezinho.

Agora, salve o bloco de notas e vá novamente no perfil. Deverá ficar desse jeito:

Viram? Ficou bonitinho desse jeito? Eu espero que sim.

Na próxima parte começa a treta a sério, e ela vai sair em breve, juro de dedinho.

Agora, eu quero que vocês deixem prints de como está ficando o style de vocês aí em baixo, o que acham? Alguma dúvida deixem aí em baixo também! 

Espero que esteja ajudando vocês, de verdade ;) E se quiserem ver mais styles feitos por mim vão em ao meu perfil do Social Spirit.

Por hoje é tudo.

Xx,