• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

23 de janeiro de 2014

[Pedido] Layout com auxílio do Photoscape

~fazer o que? Sou super fã do capitão Jack Sparrow~
Hooý chocolates cobertos com sangue de zumbi tudo bem? Espero que esteja, comigo está tudo ótimo, já que estou revendo os episódios de The Walking Dead que eu havia visto, mas fala sério, TWD vale a pena ver de novo. Ontem estava ensaiando umas músicas do Oficina G3 e Rosa de Saron no teclado, haha' brevemente estarei tocando-as na igreja ~emoção~ haha'. Ganhei um pedal sustain do meu pai da marca KORG, a mesma marca que o Jean Carllos usa <3
(ouvindo TobyMac aqui)

 Agora, indo ao assunto da postagem, a Jakee do blog Diário de Uma Adolescente Apaixonada por Livros me fez um pedido por nossa page do facebook para que eu postasse como fazer um layout usando o photoscape como auxílio, então vamos lá?!

Como já ensinei o básico no tutorial indicado acima, hoje iremos ser mais rápidos, preparei uma base para começarmos, daí vocês a colocam no blog e podem personalizar, irá lhes poupar trabalho e tempo.
Agora que você já instalou o modelo acima, seu blog deve estar assim:
Agora iremos começar a personalizar. Primeiro tiraremos a navbar e a atribuição.
Para retirar a navbar, vá em: Layout > Navbar > Marque a opção: "Desativado"

Para retirar a atribuição, vá em: Modelo > Editar HTML > Procure por: Attribution, fazendo isso, siga a imagem abaixo:
Agora vá em: Layout > Atribuição > E como destravamos ele, agora ele possui a opção excluir, portanto, clique em "Excluir"

Agora vamos personalizar os gadgets.
- Lembrando que indo em: Personalizar > Avançado > Você poderá personalizar o título dos gadgets, o título da postagem, o título do blog, a letra da postagem, etc, pois não modifiquei nessa parte para facilitar.

Agora para personalizar os gadgets, vá em: Modelo > Editar HTML > Localizando esse trecho:
clique na setinha preta para abrir, lembrando que nesse novo modelo do blog, tudo que você quiser fazer em seu HTML é necessário abrir o seu skin, ok?!

Agora procure por: .sidebar .widget {
Você irá achar isso:
Achando-o, é aí aonde você irá personalizar os gadgets, como podem ver, ao lado de cada trecho está especificado para que serve, vamos as sombras? Irei dar alguns modelos de sombras para que vocês possam utilizar.

Modelo 1, créditos (www):
Adicione o código abaixo antes de }:

box-shadow: 1px 4px 19px 2px #f3b9f5;

Modelo 2:
Adicione o código abaixo antes de }:
box-shadow:inset 0 0 10px #9c9c9c; 

Com esses modelos já é possível criar bastante, vocês podem modificar a cor, alterar esses números antes do px, modifiquem como quiser ;)

Agora vamos personalizar o background. Vá em: Modelo > Editar HTML clique na seta preta para abrir: e procure por:  body {

Você encontrará isso:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
Agora apague todo o trecho acima e cole:
body, html {
 height: 300px;
 margin: 0;
 padding: 0;  }
body {
 font: $(body.font);
color: $(body.text.color);
background: url("URL do 1º background") repeat; }
html {
 background: url("URL do 2º background") repeat; }

créditos (www)

Agora para fazer a imagem, use um programa de print e corte o seu blog mais ou menos assim:
Obs: O print deve ser tirado do seu blog, pois os blogs variam de tamanho.
Agora faça o background por cima de sua imagem, no photoscape.
Agora, já no photoscape, selecione a ferramenta "cortar", como na imagem abaixo:
agora, clique em "cortar", ela ficará assim:
Usando a aba "objeto", você pode criar a vontade, eu por exemplo, selecionei o "quadrado" e fiz um quadrado por cima da imagem deixando um pequeno espaço embaixo. 
Olhem como ficou:

Agora iremos colocá-lo no HTML. Vá em: Modelo > Editar HTML > e procure por body {
Achando, abra uma outra aba e crie uma postagem nova, vá em "Inserir imagem" e selecione sua imagem.
Logo em seguida, clique com o botão direito do mouse e selecione a opção "Copiar a URL da imagem".

Agora, volte ao HTML, substitua a parte "URL do 1º background" pela URL copiada por você. Ficará assim:

Na parte onde está escrito "180px" é aonde você modificará para que seu primeiro background fique mais para baixo ou mais para cima, dependerá do seu blog, portanto você deverá modificar até que fique no tamanho apropriado para você.

Agora use o mesmo procedimento para substituir o segundo background ou pegue um na internet, já que tem alguns blogs que possuem backgrounds para a utilização, inclusive aqui temos também: www

Agora vamos ao banner. Já que no photoscape não é possível fazer imagem transparente, sugiro que usem a mesma cor do background feito por vocês para que haja uma camuflagem, disfarçando assim seu cabeçalho.

Vá ao Photoscape e selecione a aba "objeto":

Clique nesse conta gotas ao lado da cor roxa, clique na imagem com ele, pronto, ele sugou a cor, agora é só utilizar essa cor para o fundo da imagem, lembrando que para cobrir toda a imagem, utilize o "quadradinho".

Eu irei usar como base para meu banner, a mesma imagem que usei no primeiro background, cortando um pouco para que ele não fique ultrapassando a área desejada. Observem o tamanho que ele fica:
Com ele fino, é mais fácil para que fique ajustado ao tamanho que queremos.

Depois de feito o seu banner, vá em: Layout > Configurar cabeçalho > Editar > Clique em "Selecionar arquivo" e espere carregar > Clique em "Salvar".

Percebam que ficou uma confusão total:
Mas para resolver isso é moleza, vá em: Modelo > Personalizar > Avançado > Título do blog.
Personalize do tamanho da imagem, pois se você alterar o valor para "0px" ele ficará desajustado.

Agora iremos personalizar a área dos comentários. Essa é bem fácil, você pode pegar alguns modelos encontrados na internet, etc.
(Aqui temos: www / www)
e siga o tutorial a risca.

Agora iremos retirar o fundo.
Vá em: Modelo > Editar HTML > e procure por: Comments Background
Achando, substitua os dois "#cccccc" e salve, caso não dê certo, procure para ver se ele possui esse trecho: 
"transparent url(//blogblog.com/1kt/travel/bg_black_50.png)" caso possua, apague a parte que está em negrito, agora salve novamente e veja que não possui mais background cinza em sua área de comentários.

Visualize o resultado

Pronto, agora, os demais detalhes vocês podem adicionar, essa foi a forma básica de se fazer um layout com o axílio do photoscape, espero ter lhes ajudado. Bjoon

12 comentários:

  1. Omg the walking Dead = Divo *uu*
    Bem legal esse tuto vai ajudar muita gente e.e
    Megan me ensina uma coisa ? tipo pra fazer essas letrinhas coloridas precisa criar uma classe com as cores e depois e nome da classe entre as tags ne? aprendi na internet , mas a personalzação nao funciona :c o que eu faço?


    Geekegirlie.blogspot.com|| Official

    ResponderExcluir
    Respostas
    1. Haha' TWD é super :D

      Espero que ajude mesmo, ela irá te responder em seu blog

      Excluir
  2. Adorei o tutorial, vai ser super útil para muita gente :3

    Visite o blog | Etc For Me ♥

    ResponderExcluir
  3. Ótimas dicas flor! ^^ Tem gente que quase morre, mas nem é tão complicado assim no Photoscape né rsrsrs

    Beijos e fique com Deus! *:
    http://phora-do-ar.blogspot.com.br/

    --- AVISO ---
    Meu blog não está atualizando na lista de leituras, há algum problema no feed e não consegui resolvê-lo ainda \; se você sabe ou conhece alguém que possa me ajudar a resolver, avise no blog porfavor ! to chateada com isso, pois posto e as publicações não aparecem para meus seguidores ;s

    ResponderExcluir
    Respostas
    1. haha' obg, né vou visitar lá, realmente esse negócio dos feeds não sei

      Excluir
  4. aaaaaaaa querida! *------* se você não se importar e tiver interesse em divulgar, pode pegar fotos minhas das peças pro seu post sobre a Griffe POW! ^^ Sério, seria o maior prazer! e mt, mttt obg pelos elogios hihihi fico feliz quando alguém curte meu estilo ><

    ResponderExcluir
  5. Oi, Hannam,eu uso o Photoscape para editar as imagens que coloco no meu blog mas fazer lay eu não sei,quem sabe com este tutu eu consiga.
    A amiga cima está com problemas nos feends,sugestão flor vc tem que atualizar os feends ou excluir e queimar de novo:fica a dica,bjs

    ResponderExcluir
  6. Amei! Ficou muito fofo *-* Pena que não tenho Photoscape :\, mas ficou bemmm legal ;D

    ResponderExcluir
  7. Jack, não tem como não ser fã dele ashuashu

    Pelo jeito vc é fanática por Oficina G3 hehe

    Ótima postagem, mas eu tenho mt dificuldade em usar Photoscape rsrs me apeguei no Photoshop e quando uso o scape acho mt difícil kkk

    Bom, se tem vagas para afiliados, aceita se afiliar ao UDesigns?

    www.unconditionallydesigns.blogspot.com

    ResponderExcluir
  8. Esse tutorial irá ajudar quem não tem Photoshop, tudo tão explicadinho >3<

    www.b-urning.blogspot.com.br

    ResponderExcluir
  9. Adorei o tutorial ... Afinal meu blog é todo montado nele ! , Perfeito !

    www.candyedream.blogspot.com

    beijos!

    ResponderExcluir