15 tutoriais para editar o seu layout

Oi, gente! Hoje eu resolvi fazer algumas indicações diferentes, voltadas especialmente a quem tem um blog. Eu editei o layout do Coisinhas inteiro vendo esses tutoriais e, modéstia a parte, ficou muito bom. 😝 Vamos lá:

BASES PARA O LAYOUT

Tema base para editar seu layout - Butlariz

Foi esse o tema que usei, inclusive já falei dele aqui nesse post. A Lariz fez algo que eu sempre desejei: uma base sem nada (responsiva!) pra gente editar do nosso jeito. Tem coisa melhor?

Como criar um layout base no blogger - Marinspira

A Mari começou uma série de posts onde ela vai ensinar a editar seu layout. Nesse primeiro ela explica como deixar aqueles temas do blogger mais "limpos". Vale a pena conferir!

Layout base responsivo free - Di Veneta
A Francine tá começando uma série de posts, assim como a Mari, pra ajudar quem tá começando a mexer com as edições no layout. Visitem!

FONTES DO BLOG

Fontes personalizadas (Google Fonts) - Follow Your Dreams

Um dos melhores tutoriais, na minha opinião. A gente pode colocar a fonte que quiser no blog! *--*

Fontes personalizadas (Cufón) - Follow Your Dreams

Uma forma alternativa de colocar fontes personalizadas no blog.

IMAGENS/LEGENDAS

Personalizando a legenda das imagens no blogger - Butlariz

Não sei se vocês repararam, mas as legendas do blog estão muito fofas. Foi esse o tutorial que usei pra fazer. *-*

ÁREA DO POST

Caixinha dos quotes personalizada - Cherry Bomb

A gente usa a caixinha ensinada nesse tutorial. Ela é um amor, e super fácil de personalizar!

Postagens relacionadas - Follow Your Dreams

Outro tutorial que todo mundo procura! E é a coisa mais fofa!

OUTROS 

Slide de posts recentes - Butlariz

Também estamos usando aqui no blog (no finalzinho de tudo!), e é algo que muita gente gosta de colocar no blog.

Menu fixo - Butlariz

Pra ter um menu fixo é só seguir esse tutorial. Bem simples e dá certo. *-*

Botão voltar ao topo - Follow Your Dreams

Coisa mais útil impossível! E além da utilidade, a gente pode personalizar do jeito que preferirmos (vejam o nosso balãozinho, que amor 💗)

Paginação numerada - Follow your dreams

Também estamos usando aqui no Coisinhas. Ótimo tutorial. *-*

Comentários personalizados - Cherry Bomb

Post realmente útil. E adivinhem? Também usamos aqui no blog! 😛

Botões de compartilhamento nas redes sociais - Elaine Gaspareto

Esse tutorial eu ainda não usei, mas já segui vários do blog da Elaine e sempre deram certo. *-*

Título dos gadgets personalizado com imagem - Renata Massa

Sempre quis saber como as pessoas faziam isso, e nesse tutorial super simples a Renata explica e ainda disponibiliza algumas imagens.

Bem, é isso. Eu não coloquei muita coisa aqui, mas todos esses blogs que citei tem mais tutoriais ótimos de coisas mais específicas. Vale a pena conferir!

Tutorial: colagem para wishlist

Oi, gente! A Gabbe, do blog Talo de Maçã (vejam que fofo!!!), me perguntou como fiz a colagem da lista de desejos da loja Uatt?, e pensei que essa provavelmente não é uma dúvida só dela, mas de muita gente. Então, resolvi fazer um tutorial pra vocês *-*
Enfim, ele é todo no Photoshop (o meu é o CS6), mas imagino que não seja tão diferente de outras versões.
Vamos lá:

PASSO 1

Vá em file > open e abra a imagem que desejar (para você tirar o fundo, é necessário que a imagem tenha o fundo "liso", de uma única cor). Mas geralmente essas imagens de lojas - no caso da wishlist - vem com o fundo branco. Isso ajuda muito. *-*

PASSO 2

Dê dois cliques no cadeado (que a seta indica na foto), para desbloquear a camada. Se abrir uma caixinha escrito "new layer", dê OK. 

PASSO 3

Depois que a camada estiver desbloqueada, clique na ferramenta indicada na foto. Aqui, vou explicar uma coisinha: a varinha mágica, ou "Magic Wand Tool" é muito mais prática. Porém, em algumas imagens, como a da caneca que estou usando como exemplo, a varinha não funciona corretamente: a imagem se "confunde" com o fundo, e você não consegue remover apenas ele. Enfim, por isso, peguei outra imagem - em que é possível deixar transparente com a varinha - e vou explicar as duas.

 ...

O primeiro exemplo é o mais trabalhoso: usando o "Quick Selection Tool". Você irá selecioná-lo e clicar em algum ponto do fundo da imagem. Se quiser, vá "arrastando" o mouse e selecionando áreas maiores. Então, aperte delete.

Porém, pode acontecer de a ferramenta selecionar o que não deve, como a alça da caneca, na imagem. Então, é só ir lá em cima, selecionar a ferramenta que remove a seleção (indicada na foto)  e tirar as partes necessárias. Sempre que a seleção estiver onde desejar, aperte delete. Lembre-se: a camada deve estar desbloqueada!

 

Minha dica é: tente sempre primeiro com a varinha e, se não der certo, aperte ctrl+z (que desfaz alguma ação). Então, faça do modo que expliquei acima.
Agora, vamos ao modo mais simples: a varinha!

Com um clique no fundo, ele é todo selecionado. Aí é simples: delete!

  

PASSO 4

Vá em file > new e crie uma nova imagem, de preferência, com o fundo transparente. Isso você seleciona em "background contents". O tamanho fica a seu critério.

PASSO 5

Volte na aba da imagem que você quer usar e aperte ctrl+a (que seleciona a imagem toda - observe o pontilhado nas fotos). Depois, ctrl+c (para copiar a imagem).

PASSO 6

Na imagem que você criou, aperte ctrl+v (para colar a imagem do produto). Depois, aperte ctrl+t (para redimensionar e girar a imagem). Ah, uma dica: quando for redimensioná-la, aperte a tecla shift junto. Isso não deixa a foto perder a qualidade e nem a proporção. 

Para girar, coloque o cursor em alguma ponta, que aparecerá uma seta curvada. E aí, deixe a criatividade fluir! Espalhe as imagens como preferir.

PASSO 7

Para colocar um fundo, vá em file > open e abra o fundo que quiser. Aperte ctrl+a, depois ctrl+c. Dê ctrl+v na foto onde os produtos estão espalhados.

O fundo vai ficar em cima de tudo. Então, arraste a camada para baixo da anterior. Se quiser, arrume a opacidade, efeitos... E assim vai.

DICAS

1. Salve a imagem no formato .png, a qualidade é bem melhor.

2. Mesmo que você fique com 20 camadas, isso é essencial! Quanto mais "dividido" seu trabalho estiver, mais fácil será de corrigir um possível erro.

3. Se perceber que o trabalho está bom, embora faltem alguns ajustes, salve. Pode ser até em .png, mas o melhor, mesmo é em .psd (o formato editável do Photoshop). Se, por algum motivo, você apagar sua colagem, por exemplo, a maior parte vai estar lá, salva.

4. O ctrl+z é o meu maior aliado! Use sem medo! hahah Ou então, quando você chegar no "limite" dele (sim, você não pode desfazer 100 ações), aperte alt+ctrl+z. Essa função retrocede etapas.
*Atualização: A Mayara, do blog Naive Heart, me disse ali nos comentários que é possível estender o "limite" de ctrl+z indo em: Edit > Preferences > Performance (coloque o History States no máximo). Em todo caso, a dica do alt+ctrl+z ainda funciona. *-*

5. Ah, e coloquei que é para wishlist por causa da pergunta da Gabbe, mas serve pra tudo! 

Nossa, esse post ficou grande!  hahah

Enfim, pode parecer complicado, mas quando você põe em prática, tudo fica mais simples. Explore!

Beijos e até sexta ;*

Tutorial: Padrão em chevron no Photoshop

Antes de tudo quero dizer que ontem fizemos NOVE MESES de Coisinhas!!! <3 Estamos muito felizes, mesmo, com todas as conquistas que tivemos até aqui. Inclusive, queremos agradecer vocês, por tudo, mas principalmente porque comemoramos nosso mêsversário com 15 mil visualizações!!! É felicidade que não cabe, haha.
Mas, agora começando o post...
Oi gente! Hoje eu resolvi ensinar a fazer um tutorial suuuuper básico e fácil, como presente nosso para vocês. Sei que existem maneiras mais inteligentes e difíceis de fazer chevron, até mesmo mais profissionais, mas como sou muito iniciante em PS e sei que muita gente é, quis trazer essa maneira mais simples. Fica legal para suas edições, para usar em blogs. Nada muito profissa, como já disse, mas dá pra brincar.

O Chevron é esse padrão de triângulos muito fofo, que pode ser usado em tudo, até mesmo em decoração. Quando quis aprender, precisei seguir um tutorial em inglês porque não achei nenhum que fosse fácil em português. Espero que consiga ajudar vocês.

Vamos ao que interessa...

Gente, é a primeira vez que ensino algo nessa vida, então qualquer coisa que vocês não entenderem, me avisem, que eu tento arrumar da melhor forma que conseguir.

Primeiro de tudo, é bom especificar que fiz esse padrão no photoshop cs6 portátil. Não sei se há alguma alteração de um para outro.

Então, vamos lá.

Passo 1 - Abra o photoshop e crie um novo documento. Você vai deixar ele com o fundo branco e colocar a altura e a largura em 300 pixels (px), como na imagem. Clique em OK.

Abra a imagem em branco com 300x300px

Passo 2 - Na barrinha lateral de ferramentas do photoshop, clique em Custom Shape Tool (U), ou, no teclado, clique na letra U.

Passo 3 - Depois, clique na caixinha de formas (onde tá escrito Shape) e procure pela setinha de lado (como na imagem).

Clique U e depois escolha a setinha para a direita

Passo 4 - Agora você vai abrir essa seta. Ela vai ser o chevron. Antes, escolha a cor que deseja. Você vai no cantinho superior do documento que abriu e vai expandir a seta que selecionou. Dessa forma, vai levar até o outro lado, embaixo. Dá pra entender? haha A imagem abaixo mostra, mais ou menos. Tente seguir a setinha vermelha.

Siga de um canto a outro para abrir a seta

Ele vai ficar de ladinho, então você vai precisar girá-lo. Clique Ctrl + T no seu teclado e gire até a posição certa, que no caso, é para cima. Como quando a gente desenha grama na pré-escola (dessa forma ^). Selecione qualquer outra ferramenta e clique em Apply.

Gire a seta até ela ficar assim (^) e clique em apply

Passo 5 - Ajeite da forma que achar melhor, para que cada pontinha encoste em uma extremidade do documento. Depois disso, clique em Edit (lá em cima da página) e vá até Define Pattern. Clique nele.

Editar e Definir Padrão, para criar seu padrão

Passo 6 - Dê um nome a ele e clique em OK.

Aplicando seu padrão...

Passo 7 - Abra o novo documento, aquele em que você quer aplicar o fundinho de chevron, já no tamanho que deseja. Deixe ele desbloqueado e clique duas vezes sobre a camada.

Passo 8 - Com a caixinha da camada aberta, clique em Pattern Overlay.

Passo 9 - Selecione o padrão que acabou de salvar, que provavelmente vai estar no fim de tudo.

Passo 10 - Ele é variável no tamanho, então, para isso você vai ter que mexer na barrinha de escala. Vá em Scale e mova-a até onde desejar. Ou então, escreva um número na caixinha ao lado da barra e veja qual o melhor tamanho pra você.

Então clique em OK

Passo 11 - Edite como quiser, e tá pronto para usar. Pasa uso na web, salve sempre em PNG. A qualidade fica melhor.

Agora é só usar e abusar.

Repito que não é o melhor tutorial do mundo, eu nem sou tão boa no photoshop quanto deveria, mas quis trazer algo diferente pra vocês. Espero mesmo que gostem e, qualquer dica que tiverem, me mandem que eu adoro. Se curtirem tutoriais, avisem que posso trazer mais pra vocês.

Beijos, obrigada novamente e até sexta.