Categoria "HTML e Tutoriais"
09 de abr de 2015

Menu de Categorias Personalizado no Blogger

Estava olhando as sugestões que vocês deixam aqui na aba “dê o seu pitaco” ali na sidebar e achei interessante a sugestão de como fazer um menu de categorias para o blogger! (Aliás, fique à vontade para dar mais pitacos). Antes de tudo, vou explicar como funcionam as categorias para que ninguém fique perdido(a) no meio do tutorial.

O que são as categorias e como adiciono?

Categoria é a forma de separar suas postagens por temas. Por exemplo, você quer criar uma “pastinha” para colocar todos os posts em que você fala de maquiagem, então você criará uma categoria para este tema. No blogger, isso funciona através de marcadores. Você escolhe um marcador que identifica o tema da sua pastinha e o adiciona em todas as postagens que possuírem o tema escolhido. Marcador é uma palavra-chave ou tag, como eu normalmente chamo, que identifica o tema/categoria do seu post. Você irá colocar a mesma palavra-chave em todos os posts que você quer que pertençam a tal categoria.

Ainda na dúvida?

Por exemplo, eu quero uma categoria sobre filmes com a palavra chave “cinema”, então todos os posts que eu falar sobre este assunto, eu irei colocar a palavra cinema nos marcadores. Não entendeu? Dá uma olhada no Guia Básico do Blogger, lá tem explicado como adicionar um marcador.

Design

Normalmente nas imagens das categorias nós usamos ícones, que são imagens com desenhos que representam nossas categorias. Resolvi fazer uma mistureba personalizada de algumas coisinhas legais que encontrei enquanto pesquisava ícones na internet. Mas são só exemplos simples, ok? Usei como apoio algumas fontes e imagens e fiz as imagens para menu abaixo:

Icon categoria: Maternidade, Bebês, Pet Icon categoria: Maquiagem, Batom Icon categoria: Cabelos Icon categoria: Fotografia Icon categoria: Casamento Icon categoria: Culinária Icon categoria: Culinária, Bebês Icon categoria: Favoritos Icon categoria: Feminino, Cabelos Icon categoria: Cinema Icon categoria: Finanças Icon categoria: Maquiagem Icon categoria: HTML, Tutoriais Icon categoria: Viagem

Baixe todos os ícones em 4 cores

Fiz mais como um exemplo, mas vocês podem encontrar vários pacotes grátis pesquisando no google. ;)

Codificação

Para entender o código do menu você precisa saber duas coisas. A primeira é o link que identifica a categoria, no caso do blogger, é o seguinte:

Tutorial: Menu de categorias

E a segunda é o link que identifica a sua imagem. No item acima “Design” eu ofereci o download de alguns exemplos de imagens para o seu menu, porém, para usá-los você terá que hospedá-las em algum servidor. Há várias opções para fazer isso, tanto dentro do servidor do seu próprio blog, quanto fora. Vou ensinar como hospedar pelo Imgur que vai servir pra qualquer lugar em que você queira usar.

Hospedando imagens

Agora que sua imagem está hospedada, você precisa do link dela. Uma dica: Caso você vá hospedar em algum outro lugar, não se esqueça que o final do link deve ser “.png” ou “.jpg” para que funcione.

Link da imagem hospedada

Agora, basta criar o menu. Complete o código abaixo de acordo com o que eu expliquei acima e repita-o, para cada categoria a ser criada.

<a href="http://nomedoseublog.blogspot.com/search/label/NomeDaCategoria"><img src="Link da imagem hospedada" alt="Nome da Sua Categoria (aparece ao passar o mouse)">

Vamos ver um exemplo rápido? Se você pegar o código abaixo (vamos fingir que o nome do meu blog é “blogdaluana”), o seu menu ficará como no exemplo:

<a href="http://blogdaluana.blogspot.com/search/label/Fotografia"><img src="http://i.imgur.com/UQH1k5T.png" alt="Fotografia">
<a href="http://blogdaluana.blogspot.com/search/label/Culinária"><img src="http://i.imgur.com/HlnqJvW.png" alt="Culinária">
<a href="http://blogdaluana.blogspot.com/search/label/Cabelos"><img src="http://i.imgur.com/s3zqLAU.png" alt="Cabelos">
<a href="http://blogdaluana.blogspot.com/search/label/Cinema"><img src="http://i.imgur.com/d2fCQQF.png" alt="Cinema">

Passe o mouse e observe que as imagens estão linkadas. Não há efeitos pois eu tentei fazer o menu o mais simples possível, mas há como personalizar ainda mais se você tiver vontade.

Menu:
Fotografia Culinária Cabelos Cinema


Onde coloco o menu?

No Blogger, basta ir na aba “Layout” do seu painel e adicionar um Gadget, veja os prints abaixo:
Adicionando Gadget
Na janela que aparecerá faça como no print abaixo:

Código: Menu de Categorias

Pronto! Agora é só postar. Lembrando que este tutorial é para Blogger, mas os ícones e código podem ser usados em outros servidores, o que irá mudar é a forma de adicionar isto no blog e o link das categorias. Qualquer dúvida, deixe um comentário! ;)

29 de mar de 2015

Photoshop: Guia básico das Actions

Oi, bloggers! Como vocês estão? Então, hoje eu vou ensinar como se faz para baixar, usar e criar suas próprias actions no Photoshop! Sabem aquelas actions com efeitos lindos que vemos disponíveis para baixar na internet? Então, vou mostrar como se faz para aplica-las nas nossas próprias imagens :)

Como baixar actions e colocá-las no Photoshop

Você pode baixar suas actions em qualquer site que as disponibilize. O que eu mais uso é o Deviantart, mas você pode googlar e encontrar várias internet à fora. Você faz o download da action que você escolher e salva em alguma pasta do seu computador. Depois, abra seu Photoshop e segue as instruções das imagens abaixo:

01

Abra a Janela de ações como demonstrado na acima imagem (atalho: alt+F9)
02

No canto superior direito tem quatro linhas que formam um quadradinho, clique nelas e depois em Carregar Ações. Agora vá até a pasta onde você salvou a action que baixou, selecione e clique em carregar. Faça esse mesmo processo sempre que quiser adicionar uma nova action :)

Como usar as actions

Agora que você já sabe como baixar e colocar as actions no Photoshop, vamos aprender a usá-las, é bem simples. Abra a imagem que você deseja aplicar a action. A que eu escolhi foi essa:
marcelaebaby

Pronto, agora você vai repetir a primeira etapa do tutorial que ensinei ali em cima (ou você pode ir direto pelo atalho alt+F9) e abrir a caixinha de actions. Nessa caixinha tem todas as suas actions (se você carregou ou se criou alguma, caso o contrário, só aparecerá alguma action padrão que já vem no Photoshop).

03

Nessa caixinha, você vai procurar pela action que você vai usar. Eu usei a Glow Actions by Linspace. Agora, dê apenas um clique na action que você vai usar para selecioná-la. Depois, clique na setinha que tem do lado esquerdo (que está circulado de vermelho no print acima).
04

O que você acabou de clicar é basicamente uma pastinha que contém as actions dentro, pode ser uma ou mais, por isso, quando você clica, aparecem mais actions como no print acima onde apareceram Action 1 e Action 2. Cada uma dessas actions possuem efeitos diferentes, porém, pertencem à mesma coleção e autor. Você deve escolher uma dessas actions e, novamente, dar apenas um clique sobre a que você quer.

05

Agora você vai executar seleção, é só clicar no play como
demonstrado no print. Quando a action for executada totalmente, o efeito estará aplicado à sua imagem; Veja abaixo como ficou o resultado da minha:

result

Como criar suas próprias actions

Agora que já sabemos como baixar e usar actions, vamos aprender a criar nossas próprias actions. Saber criar actions é algo muito útil e que pode poupar muito o nosso tempo, principalmente pra nós blogueiras. Por exemplo, se você quer ilustrar um post com várias fotos e quer editá-las da mesma forma, as actions podem fazer esses efeitos várias vezes com um só clique. Imagina ter que ficar repetindo dez efeitos por foto em trocentas fotos? Cansativo, né?

06

Ainda com a caixinha da actions aberta (alt+F9), no rodapé da caixinha tem – ao lado do play – uma pastinha. Clique nela, nomeie-a e clique em OK. É nesta pastinha onde ficarão suas actions.

07

Agora nós vamos criar a action em si. Ao lado da pastinha que acabamos de criar, tem uma folhinha dobrada, clique nela e coloque um nome para a sua action. CUIDADO! Ao clicar em gravar, a sua gravação já começará a ser feita, ou seja, toda ação que você fizer no photoshop será gravada na action. Desde um simples ctrl+z, até um duplicação de camada e inserção de efeitos aleatórios. Quando estiver preparada para começar a aplicar os efeitos na sua imagem, é só clicar em gravar (você saberá que está gravando quando a bolinha ao lado do play estiver vermelha).

08

Depois que adicionar todos os efeitos desejados, você deve interromper a execução/gravação; para isso, clique no stop (o quadradinho ao lado da bolinha vermelha que indica gravação). O meu resultado foi esse:

result2

Como salvar suas actions

Para finalizar, vou ensiná-los como salvar as actions que criamos em alguma pasta do computador.
09

Para salvar o conjunto de actions que acabamos de criar é só você clicar apenas uma vez sobre o conjunto que você quer salvar, aí você clica no quadradinho que tem no canto superior direito da caixinha de actions (aquele mesmo que clicamos no início do tutorial, que tem quatro linhas e uma setinha, sabe?) e finaliza clicando em Salvar Ações. Ao clicar abrirá uma pasta do seu computador e aí você salva a action onde desejar :) Fácil, fácil, né?


Prontinho, agora você já sabe como fazer o uso das actions que são bem úteis para nós. Só para deixar claro, action não serve apenas para inserir efeitos nas imagens, vocês podem fazer actions para cortar, redimensionar, selecionar, copiar e colar, mudar a ordem das camadas. WHATEVER. A vantagem é exatamente essa: poupar o trabalho que teríamos ao fazer essas mesmas ações manualmente.

Outro ponto importante é: não espere que todos os efeitos que você baixar na internet vá ficar exatamente igual na sua foto. Para o efeito ficar igual, a qualidade, iluminação e outros fatores também devem ser iguais (ou parecidos), do contrário o efeito que você imaginava que ficaria lindo, pode deixar sua foto pior, hahaha! Geralmente as pessoas que disponibilizam actions, colocam também uma imagem com o antes e o depois, você pode ter uma ideia se a sua ficará com o mesmo efeito comparando com o antes.

Espero que vocês tenham gostado do tutorial, se tiverem alguma dúvida, deixem nos comentários!

Beijos! ;)

Postado por Marcela Magossi

Apesar da carinha de 15, tem 20 anos, cursa Sistemas de Informação na Unicamp e pretende ser Presidente do Brasil. Expõe todos os seus sonhos no seu blog, Lances para sonhar, e compartilha aqui tudo o que ela aprende sobre html e design gráfico durante suas madrugadas regadas por café, chocolate e Coca-Cola.
Página 7 de 9123456789