Como hospedar imagens no Picasa

Eu sempre falo do Picasa Web – o serviço de armazenamento de imagens do Google – em meus posts, mas só recentemente é que me dei conta de que não existe um tutorial em nossos arquivos ensinando, passo-a-passo, como utilizá-lo. #fail

Temos à nossa disposição, diversos sites que aceitam hospedar imagens, tais como Flickr, ImageShack e Photbucket - Hospedagem gratuita de arquivos para download.

O diferencial, para nós blogueiros, do Picasa Web em relação aos demais, é que o serviço já está integrado com a nossa conta do Google e do Blogger.

Todas as imagens que usamos em nossos templates, ficam armazenadas lá. A principal função do Picasa, para blogs do Blogger, é hospedar a imagem e fornecer a url (ou link) que utilizaremos em banners, backgrounds, ícones, gadgets e etc.

Como usar o Picasa Web

Faça o login com sua conta do Google. Lá você já vai encontrar alguns álbuns que foram criados, automaticamente, pelo Blogger. Clique no botão fazer upload.

A seguir, selecione um dos álbuns disponíveis (1) ou crie um novo álbum (2)

Na próxima página, clique no botão arquivo (1) e procure pelas imagens em seu computador (2). Após selecionar todas, clique no botão iniciar upload.

Você vai ser direcionado para o ábum onde a imagem foi armazenada. Escolha uma das imagens, clique sobre ela e, com o botão direito do mouse, copie o endereço.

Acesse os posts abaixo para aprender um pouco mais sobre imagens em blogs:

• Como colocar um link em uma imagem
• Como criar banner simples com o Photoshop
• Como criar banner animado com o Photoshop CS4

Atualizações (14/07/2010)

O leitor Igor Souza lembrou de algo muito importante: as imagens hospedadas no Picasa não desaparecem, ao contrário do que acontece em outros serviços.

O nosso amigo @RicardoFraga, informou ontem no Google Discovery que agora o Picasa Web está integrado ao Picnik, um serviço de edição de imagens, muito eficiente por sinal - Recurso de edição de imagens do Picnik chega ao Picasa Web

Modelos de Blockquotes (citação em bloco)

Em linguagem web, blockquote ( ou simplesmente quote) é um recurso em HTML, utilizado para destacar parte de um texto ou para citar, dar referência a algo ou alguém. Em português, usa-se a denominação citação ou bloco de texto.

O blockquote não é usado somente em páginas da internet, sendo muito comum em livros, revistas, jornais e em toda forma de tipografia.

Segundo definição da Wikipedia:

Um bloco de citação (também conhecido como uma citação longa ou extrato) é uma citação de um documento escrito, que é definido fora do texto principal como um ponto distinto (ou bloco) (…) Bloco de citações são geralmente distinguidos visualmente utilizando o recuo , um diferente tipo de letra ou tamanho menor.

Como vocês podem notar, eu acabei de usar o blockquote para citar o texto acima.

Para usar blockquote no editor de textos do Blogger, passe o mouse sobre a área que será destacada e clique no ícone Citação (figura 1). Para usar no Windows Live Writer, procure por citação em bloco (figura 2)

Para mudar o modelo de blockquote dos templates do Blogger ( e eu acho que isso serve também para Wordpress), precisamos usar alguns códigos em CSS.

Antes de mais nada, entre no editar HTML do Blogger e procure por algo assim:

blockquote {
width:90%;
font:$quoteFont;
line-height:1.6em;
color:#333;

}

Todo o trecho deverá ser substituído por outro modelo de sua preferência.

Modelos de blockquote

Fonte: Css Tricks - Better Blockquotes

blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote {
display: block;
background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: bottom right;
}

blockquote {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(URL DA IMAGEM);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

Aqui estão as duas imagens utilizadas nos modelos acima. Salve-as em seu computador e faça o upload no Picasa Web ou no serviço de hospedagem que preferir. Depois é só copiar a url e colocar nos locais indicados (em vermelho)

Fonte: Css NewBie- Six Ways to Style Blockquotes

blockquote {
background: #f5f5f5;
border-left: 0.8em solid #ccc;
border-right: 0.8em solid #ccc;
font: italic 120% Georgia, "Times New Roman", Times, serif;
padding: 0.75em;
}

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }

blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }
blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 220%;
font-weight: bold; }
blockquote p:first-line {
font-variant: small-caps; }

Fonte: Usuário Compulsivo

.post blockquote {
margin: 1em 20px;
border: 1px solid #c0c0c0;
background: #f5f5f5;
padding: 7px;
}

E este é o atual modelo usado aqui no Dicas Blogger:

blockquote {
width:90%;
font:arial;
line-height:1.4em;
color:#333;
border-left:2px solid silver;
border-right:2px solid silver;
background:#EEE;
margin:10px;
padding:0 10px;
}

Fazendo uma busca no Google, vocês vão encontrar ainda mais modelos.

Como mudar o background nos templates do Blogger

Os templates criados para Blogger (Blogspot), costumam vir com a opção de alterarmos apenas a cor do plano de fundo (background), mas existe também a possibilidade de, no lugar de uma cor sólida, colocarmos uma imagem de fundo. Nos novos modelos padronizados, isso já pode ser feito diretamente do painel do Blogger.

• Designer do modelo – tutorial em vídeo
• Como criar um template para Blogger / Blogspot
• Novas funcionalidades de layout no Blogger

Mas a maioria de nós ainda prefere personalizar seu próprio template, correto? Então, o que devemos fazer para colocarmos um plano de fundo diferente no Blogger?

Antes de mais nada é preciso entendermos o conceito de background e de patterns.

Segundo o DicWeb, background é:

[Ing.] (Fundo). 1. Área sobre o qual são apresentados textos e imagens em uma página Web. 2. Atributo utilizado em linguagem HTML, para definir o fundo de uma página. Definido, em geral, por um arquivo de extensão, gif ou jpg., é inserido entre as tags .

Já as patterns, segundo o blog Photo Filtre Studio, são:

Patterns são texturas que substituem as cores normais, as Patterns podem ser utilizadas em fundos, mask e fontes.

Ou seja, background é aquela área que fica ao fundo de uma página web (mas não só) e as patterns são uma das formas utilizadas para o plano de fundo.

Existem milhares de sites que disponibilizam background e patterns gratuitamente. Basta fazermos uma pesquisa no Google com as duas palavras, que já temos diversão para o ano todo. No blog Specky Boy encontrei uma resenha mostrando os 10 melhores sites com patterns gratuitas. Vale à pena conferir.

Top 10 Free Resources for Background Patterns and Textures for Web Designers

Muito bem. Agora vamos aprender como mudar o plano de fundo do Blogger usando uma imagem como background. Entre em design e procure pela aba editar html. Usando o Crtl+F do teclado, encontre algo parecido com isto:

body {
text-align:center;
color$textColor;
background: $backgroundColor;

Substitua a linha do background por:

background:#fff url (URL DA IMAGEM) repeat;

Onde URL DA IMAGEM é o endereço da imagem que será usada como plano de fundo e #fff é uma cor para o caso da imagem parar de funcionar. Veja tabela de cores.

Vamos para um exemplo prático. Vou utilizar uma pattern do site Background Labs, no template DB 3.0. A imagem escolhida será a Stripes Background 44. Podemos baixar a imagem, hospedar no Picasa e copiar a url. No site em questão, é permitido usarmos a url deles, contanto que sejam dados os créditos. Clique com o botão direito do mouse sobre a imagem ou sobre a url e copie o link.

Volte ao html do Blogger e cole o link no local indicado (em azul)

body {
text-align:center;
color$textColor;
background:#fff url(http://www.backgroundlabs.com/backgrounds/358.gif)repeat;

Clique em visualizar para fazer os devidos testes no template e se estiver bom, salve. Veja, na imagem abaixo, como ficou o template DB 3.0 com a pattern.

Para trocar o background dos novos modelos do Blogger, acesse este post:

Como trocar a imagem de seu background no Designer de modelo – Crazyseawolf Blog

Existem outras formas de se configurar o plano de fundo, alterando o final do código:

background-repeat: no-repeat; - imagem aparece uma vez

background-repeat: repeat-x; - imagem repete horizontalmente(lado a lado)

background-repeat: repeat-y; - imagem repete verticalmente(uma embaixo da outra)

Solte sua criatividade e deixe sair o webdesigner que existe dentro de você ;)

Imagem para o cabeçalho do Blogger com Photoshop

Continuando a série sobre o Adobe Photoshop, hoje vou explicar como criar uma imagem para o cabeçalho do Blogger/Blogspot.

Como o Dicas Blogger não é um blog sobre o Photoshop, estou tentando escolher temas que sejam do interesse de todos os blogueiros.

Pra saber o tamanho da imagem a ser usada em seu blog, vá em design> elementos de página> gadget cabeçalho. Clique em editar. No final do gadget, irá aparecer a largura máxima permitida (figura 1). Quanto à altura, a escolha é livre.

Vamos usar como exemplo o Template Magazine, cuja largura máxima é de 970 px.

Para ampliar as imagens deste tutorial, clique sobre as elas.

No Photoshop, clique em arquivo>novo. Escolha o tamanho de 970 (largura) por 150 (altura), com fundo transparente (figura 2). O resultado está na figura 3.

Agora vamos escolher uma ícone para incrementar nosso cabeçalho. Não sabe onde encontrar? Então acesse - 15 sites para busca de ícones web.

Clique em abrir e procure dentro do computador por um ícone de sua preferência. Para este tutorial, eu vou escolher um do Blogger (óhhhhh).

Agora temos duas abas abertas no Photoshop: uma com o fundo transparente e a outra com o ícone. Dependendo do tamanho do ícone, será necessário ajustar a sua altura à da futura imagem do cabeçalho. Em nosso exemplo, o cabeçalho vai ter 150px de altura, então o ícone deve ter menos do que isso.

Para ajustar o tamanho da imagem, clique em imagem>tamanho da imagem (figura 4) e altere para o valor desejado (figura 5)

Agora dê um Crtl+A e um Crtl+C no ícone. Abra a aba onde está a outra imagem e cole o ícone aí. Para uma melhor visualização, use o zoom. (figura 6). Agora selecione a ferramenta de texto e escreva o nome do seu blog (figura 7)

Para alterar as cores, passe o mouse sobre o texto e selecione a cor (figura 8). Siga o mesmo procedimento para alterar o tipo da fonte (figura 9)

Para movimentar o texto e o ícone, use a ferramenta mover (figura 10). Com a ferramenta mover ativada, clique com o botão direito do mouse sobre a parte a ser movimentada (figura 11) e deslize a imagem com a seta do mouse.

A imagem do cabeçalho está pronta (figura 12). Agora é só salvá-la (figura 13) no formato .png e fazer o upload para o seu blog.

Este foi um tutorial super básico. Recomendo que vocês explorem os maravilhosos recursos do Photoshop. Caso queiram utilizar novas fontes, acessem:

Instalando novas fontes no Photoshop

Como criar banner simples com o Photoshop

Já que vocês gostaram tanto do post anterior, resolvi fazer uma pequena série de tutoriais sobre o Adobe Photoshop. Antes de mais nada, quero dizer que não sou nenhuma expert no assunto, mas me viro bem com ele :)

Em 2008, eu fiz uma vídeo-aula ensinando a criar o banner estático no Photoshop, mas, sinceramente, eu não tenho muita paciência para assistir tutoriais em vídeo – prefiro em texto e imagens. Pensando nos impacientes como eu, resolvi fazer um tutorial semelhante, porém escrito e já com o Photoshop CS4.

A ABRAWEB – Associação Brasileira de Web Designers e Desenvolvedores – padronizou os tamanhos e tipos de banner para uso na web e vocês podem escolher entre os vários modelos disponíveis - Padrões de Banner Abraweb.

Vou utilizar o modelo que é mais usado em blogs – 120 x 60px - mas eu penso que cada um pode criar um banner do tamanho que for melhor para o seu blog.

Para ampliar as imagens utilizadas neste post, basta clicar sobre elas.

Abra o Photoshop, clique em arquivo e em novo. Escolha o tamanho 120 x 60px, com fundo transparente (figura 1). Como o tamanho do banner é muito pequeno, iremos aumentá-lo para termos melhor visualização.

Clique em imagem e tamanho da imagem (figura 2). Aumente para 600 x 300 px

Agora vamos colocar uma cor de fundo. No Photoshop podemos usar uma cor sólida ou um degradê (figura 3). Vamos escolher degradê pra ficar mais emocionante. Escolha as cores que farão parte do plano de fundo, clicando no local indicado pela seta 1 da figura 4. Escolha as 2 cores separadamente.

Selecione a ferramenta degradê (figura 3) e passe a seta do mouse dentro da imagem e de uma ponta a outra ( figura 5) Repita até encontrar a cor ideal (figura 6)

Selecione a ferramenta caixa de texto ( figura 7) para escrever dentro do banner. Escolha o tipo e o tamanho da fonte (figura 8) e as cores (figura 4)

Escreva o que desejar e, se quiser incrementar, passe o mouse sobre o texto todo, clique em camadas, estilo de camadas e opções de masclagem (figura 9).

Faça vários testes, pois é bem divertido. No nosso banner de exemplo, eu usei apenas a sombra projetada ( figura 8), mas existem várias opções de mesclagem.

Agora vamos voltar em imagem, tamanho da imagem e reverter o tamanho para 120 x 60px. O banner está pronto! Salve no formato .png e caso queira colocar em seu blog para divulgação, acesse - Caixinhas para divulgar os banners do seu blog

Como criar banner animado com o Photoshop CS4

Há muito tempo atrás, fiz uma vídeo-aula ensinando como criar banner animado usando o software Fireworks. Hoje “cismei” que queria aprender a fazer o mesmo, mas usando o magnífico Adobe Photoshop. E não é que deu certo?

Primeiramente, é preciso criar uma sequência de imagens estáticas que farão parte dos quadros do banner animado - Video-Aula:Criando Banner no Photoshop.

Como o tutorial ia ficar muito grande, resolvi colocar a maior parte das imagens em tamanho reduzido. Para ampliá-las, basta clicar em cada uma delas.

Como exemplo, vou usar 4 imagens que criei previamente. Vamos considerar a primeira imagem como o primeiro quadro do futuro banner animado. Copie (Crtl+A/Crt+C) a segunda imagem e cole (Crtl+C) em cima da primeira, formando assim uma nova camada. Repita esse procedimento com as demais imagens.

Clique em janela e procure por camadas. Você vai ver todas as camadas que acabou de criar. Agora clique em janela e depois em animação.

Na figura 1 vemos as quatro camadas, numeradas de 0 a 3 e, logo abaixo, temos a janela de animações. Vamos desmarcar as camadas 1, 2 e 3 clicando, no ícone correspondente, que parece um pequeno olho ( seta 1).

Clique agora onde está a seta 2 para abrir um novo quadro. Desmarque a camada 0 e marque a camada 1. Repita o procedimento para as demais camadas (figuras 2 e 3)

Agora, vamos escolher por quantos segundos será exibido cada quadro. Clique logo abaixo do quadro, onde está escrito 0 seg (figura 4) e escolha o tempo (sugestão 2,0 seg). A seguir, visualize a animação, clicando no local indicado na figura 5.

Se tudo estiver Ok, selecione todos os quadros, clique em arquivo e salvar para web e dispositivos (figura 6). Faça as configurações conforme mostra a figura 7 e, ainda na mesma janela, clique no botão visualizar (veja a seta)

A animação irá aparecer no navegador. Clique com o botão direito do mouse e salve.

Eis o resultado do banner animado, que foi utilizado para este tutorial:

Para colocar o banner em seu blog do Blogger, faça o upload para o Picasa (figura 8), por exemplo. Você deve escolher um álbum, clicar em arquivo (1), procurar o banner que foi salvo no seu computador (2), clicar em abrir (3) e depois em iniciar upload. Ao término, o banner animado irá aparecer no seu álbum do Picasa. Clique sobre ele para ampliar e copie o endereço/url da imagem (figura 9).

Abra o gadget html/javascript e cole o seguinte código, com as modificações

<a href="endereço do site"><img src="endereço da imagem" /></a>

Depois é só salvar e pronto – o banner animado estará visível no blog ;)