quinta-feira, 9 de setembro de 2010

Programas Gratuitos para Edição de Imagens

Encontramos no Blog Vista Experience, essa lista de programas grátis para fazer e editar imagens, por achar que seria bem úteis para os blogueiros resolvemos publica-la aqui. Esperamos que algum desses programas sejam úteis na hora de crirar banners, templates e outras coisas para colocar nos blogs.
GIMP: O GNU Image Manipulation Program é um poderoso e gratuito software que pode lidar com todas as tarefas básicas de edição de imagens e muito mais. O fato de ser um programa de código aberto e disponível para plataformas Unix, Mac e Windows o torna extremamente flexível.

Paint.NET: Este é provavelmente o mais poderoso software editor de imagens gratuito do mercado. Ele pode executar tarefas simples como correção de olhos vermelhos, redimensionamento, recorte e também suporta camadas. O programa possui o código aberto e uma grande coleção de plug-ins disponível em sua comunidade online.

Autostitch: Esta é a ferramenta perfeita para criação de imagens panorâmicas a partir de uma série de fotos. Ele trabalha automaticamente e não requer intervenção do usuário. A versão demo é totalmente funcional e gratuita.

Microsoft Reserach Group Shot: Se você precisa tirar uma foto de um grande grupo de pessoas, as chances são de que não importa quantas fotos você tire, não terá uma que deixará todos satisfeitos. Aqui é onde entra o Microsoft Group Shot. Com este software você pode selecionar suas partes favoritas em cada foto da série e o programa irá fundir todas ela sem uma imagem composta.

TKexe Kalender: Já é o ano novo e talvez você precise de um calendário de papel. Para criar uma edição pessoal e única, experimente usar este software gratuito e fácil.

Opanda PhotoFilter: Filtros podem tornar uma foto muito interessante e especial. Mas é cansativo carregar por aí filtros para sua câmera ou lidar com as configurações da câmera ou software para obter os resultados desejados. Muito mais fácil é usar o Opanda PhotoFilter para fazer o pós-processamento de suas imagens. O programa vem equipado com mais de 100 diferentes configurações simulando os filtros da Kodak, Cokin e Hoya.

Foto Mosaik: Crie um mosaico a partir de centenas ou milhares de fotos. Veja o exemplo abaixo. A imagem do mosaico é a águia exibida no canto superior esquerdo, o resto da imagem é um zoom em diversas miniaturas indicado pela moldura vermelha.

Win Morph: Transforme e distorça imagens de forma profissional e com alta qualidade. Este programa dá a você toda a liberdade que você precisa e em um programa gratuito. Ele trabalha como um aplicativo independente ou como plug-in para vários editores de vídeo.

Free Digital Camera Enhancer: Esta é uma ferramenta para os toques finais em suas fotos digitais. Reduza o ruído causado por pouca luz, corrija os tons, adicione saturação e suavize a pele. Naturalmente, isto irá trabalhar melhor em imagens ruins

JPEG Lossless Rotator: Com a maioria dos programas, o simples ato de rotacionar sua foto JPEG na orientação correta e salvá-la causa perda de qualidade. O JPEG Lossless Rotator faz este trabalho sem recodificar sua foto. Ele executa uma transformação especial sem perdas, deixando a qualidade da sua foto intocada.


Veja alguns sites que criam imagens diretamente pela internet, sem baixar nada.


Botão adicionar Gadget no Blogger (Add to Blogger)

Aprenda como colocar um botão add to blogger (adicionar ao blogger) no seu site ou blog, esse botão já envia diretamente o código do gadget para o blogger, sem precisar copiar códigos. Isso pode ajudar na divulgação do seu blog e também a conseguir mais visitas. Quando seus visitantes clicarem no botão envia o código diretamente para o blog da pessoa ou se ele tiver mais de um blog aparece uma pagina para selecionar em qual de seus blogs ela adicionará esse gadget, tudo isso automaticamente sem mexer em uma linha de código.

Veja como isso funciona, entre na pagina designer, adicionar gadget, html/javascript e cole o código abaixo, apenas fazendo as alterações nas áreas destacadas:

<center><form action="http://beta.blogger.com/add-widget" method="post">
<input value="Dicas para Blogs" name="widget.title" type="hidden"/>
<textarea style="display: none;" name="widget.content">
Código html do gadget
</textarea>
<input value="http://www.dicasparablogs.com.br/p/dicas-no-seu-siteblog.html" name="infoUrl" type="hidden"/>
<input value="http://acessoriosparablogs.com.br/dicas/icone.png" name="logoUrl" type="hidden"/>
<input src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image"/>
</form></center>


O que precisamos modificar no código:

Título do gadget, altere onde está dicas para blogs:
<input value="Dicas para Blogs" name="widget.title" type="hidden"/>

Código html do gadget, neste local você deve colocar o código do seu banner ou qualquer outra coisa que desejar

Nas duas linhas seguintes você deve colocar o endereço de sua pagina para mais informações sobre o gadget (veja na imagem acima) e uma imagem que aparecerá ao lado do link mais informações(use uma imagem quadrada)

<input value="http://www.dicasparablogs.com.br/p/dicas-no-seu-siteblog.html" name="infoUrl" type="hidden"/>
<input value="http://acessoriosparablogs.com.br/dicas/icone.png"
Veja na imagem no canto inferior direito o logotipo do nosso blog ao lado do link saiba mais.

E finalmente o botão que aparecerá no seu blog é na linha:
<input src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image"/>




Você pode testar o funcionamento deste código clicando no botão add blogger que está logo acima e adicionar uma lista de nossas postagens ao seu blog.

O Blogger oferece 3 botões diferentes, veja abaixo os exemplos e o endereço das imagens:
adicionar gadget blogger
http://www.blogger.com/img/add/add2blogger_lg.gif

add blogger
http://www.blogger.com/img/add/add2blogger_sm_b.gif

gadget bloggerhttp://www.blogger.com/img/add/add2blogger_sm_w.gif

Esse tem o fundo transparente para se adaptar melhor a cor de fundo do seu blog. Claro que nada impede que você use crie outra imagem para usar como botão só precisa hospedar a imagem e colocar o endereço dela no local indicado. Encontramos o código para esse botão nas paginas de ajuda do Blogger, infelizmente o texto original está em inglês, mas se quiserem olhar veja a ajuda do blogger.

Como deixar Coluna ao lado do Título

Nós mexemos tanto com códigos CSS que algumas coisas nos passam despercebidas, e por incrível que possa parecer são justamente as coisas mais simples que não conseguimos ver.
Um exemplo disso é usar valor negativo na margem superior de uma das colunas para fazê-la aparecer mais no alto da pagina do que a outra coluna e as postagens, podendo até ficar como se a coluna se iniciasse ao lado do titulo do blog, mas claro que se fizer isso tem que arrumar o titulo do blog ou a imagem que usa no lugar do titulo para não sobrepor a coluna na imagem. Isso dá um efeito muito legal. Veja na imagem como as colunas estão mais para cima que as postagens.


O código para fazer isso é simples basta colocar junto com o código da coluna margin-top:-320px; então o código da coluna (sidebar) ficará mais ou menos assim:

#sidebar-wrapper {margin-left:20px;margin-top:-320px;
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Claro que a largura (250) e float (right) serão diferentes no seu blog, mas o importante para deixar uma coluna mais para cima que as outras é o trecho margin-top:-320px; depois é só ajustar os valores para o seu blog. Isso pode ser feito em qualquer coluna ou nas postagens. A imagem que usei como exemplo é de um blog que ajudei a modificar há pouco tempo


Personalizando os marcadores do blog.

Os marcadores do blog por ser uma espécie de guia ou menu principal merecem uma formatação diferente para seus links, então vamos modificar o estilo dos marcadores do blog. Isso é semelhante a colocar barra de rolagem nos marcadores que já falamos anteriormente, alias você pode fazer as duas coisas ao mesmo tempo. Agora vamos mostrar como colocar uma imagem ou ícone ao lado dos marcadores, que na verdade é uma imagem de fundo, e formatar seu estilo, mudar o tipo de letra, cor e tamanho.

Entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog, clique ctrl+F e digite o titulo que usa nos marcadores é o jeito mais fácil de achar, neste blog chama guia rápido.



Na linha <ul> acrescente guia rápido, é o nome que vamos usar para esse estilo, mas poderia ser qualquer outro, então fica assim: <ul class=’guiarapido’>. Depois vá até o inicio do código do blog e crie o estilo CSS guia rápido, coloque isso junto com os outros estilos (body, main, sidebar...) do seu blog.

.guiarapido a{background-image:url(http://img207.imageshack.us/img207/5918/marcador.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;padding-top: 2px;
padding-bottom: 2px;}


.guiarapido a:hover{font-style: italic;background-image:url(http://img18.imageshack.us/img18/7765/marcadorover.gif);background-repeat: no-repeat;
background-position: left center}

Os endereços são as imagens que ficaram ao lado dos marcadores, você precisará de duas assim uma somente aparece quando colocamos o mouse sobre um marcador. Para fixar a imagem do lado esquerdo e sem repetir usamos essas linhas:
background-repeat: no-repeat;
background-position: left center;

A parte final: padding-left: 25px;padding-top: 2px; padding-bottom: 2px; são as margens, o valor 25 é a distancia da margem esquerda (deve ser um pouco maior que a largura da imagem) e os valores 2px são em cima e embaixo, também é necessário ajustar conforme o tamanho de imagem que você usar.

Se quiser modificar o tipo, cor ou tamanho da letra basta colocar isso aqui nas duas partes do codigo:

font-family: "Comic Sans MS";
font-size: 14pt;
color: #0000FF;

E formatar como quiser seus marcadores, escolhendo o jeito que combine melhor com seu blog, dissemos para colocar nas duas partes do código (.guiarapido a / .guiarapido a:hover) porque assim poderá escolher cores diferentes, sugerimos não mudar o tamanho nem o tipo de letra pois isso faz ocupar espaços diferentes e o menu dos marcadores ficará “pulando” quando passar o mouse sobre ele, quero dizer subindo e descendo um pouco.

Dica Como fazer e colocar botões no blog

Para fazer botões no seu site ou blog o jeito mais fácil é usar um estilo CSS para colocar essa imagem do botão como fundo de um texto(seus links). Calma parece um pouco complicado, mas são poucas linhas de códigos e depois colocar ou modificar os botões será uma tarefa muito simples e rápida.
Antes de começar precisamos achar ou criar 2 imagens para usar como botões, elas precisam ser do mesmo tamanho porque usaremos uma quando o blog aparece e a outra quando colocamos o mouse sobre o link. Veja aqui alguns programas grátis para editar imagens, eles são bons para fazer os botões e outras imagens que precise no seu blog. Depois disso você precisa hospedar as imagens em algum lugar sugerimos o ImageShack.

Agora vamos começar colocar os novos botões no seu blog, primeiro vamos colocar o estilo CSS, entre na pagina editar html, procure por body{...tem varias coisas aqui....}, antes da palavra body coloque o código abaixo:

.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}

Assim fica bem fácil localizar esse código dos botões quando quiser fazer alterações nele, sua pagina editar html ficará assim:

/* Primary layout */
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
body {background-color: $mainBgColor;

Então clique para salvar, agora vamos colocar os links onde usaremos esses botões, entre na pagina layout, clique em adicionar gadget, html/javascript e cole esse código:


Apenas faça as alterações colocando o nome e endereço dos sites que quiser, pode colocar quantos sites desejar não existe limite. Agora é só salvar e visualizar seu blog esses links já aparecerão com os botões que você fez.
Já parece tudo pronto, mas faltou explicar como alterar esses botões, o código que publicamos foi apenas um exemplo, os valores que estão no código são referentes ao tamanho do botão que usamos, então quando usar suas imagens faça os ajustes necessários.

text-indent: 5px; margem esquerda do texto
width: 210px; largura do botão
height: 30px; altura do botão
line-height: 30px; altura da linha(deve ser igual à altura do botão)

Sobre a largura do botão ainda temos que verificar se o texto de nossos links não serão grandes demais para o botão pois se o texto ocupar duas linhas a imagem do botão se repetirá e certamente o efeito visual disso é péssimo para o layout, neste caso você deve reduzir o texto do link ou refazer o botão mais largo.

Outro detalhe é o porquê usamos uma cor de fundo se já fizemos o botão com uma imagem, a resposta para isso é simples: é melhor prevenir do que remediar quer dizer em caso da imagem não carregar por qualquer motivo aparecerá uma cor de fundo mesmo assim que sugerimos usar uma cor parecida com a cor do botão. A utilidade disso é, por exemplo, se o fundo do seu blog for preto e usar um botão branco, com texto preto, se o botão não aparece por algum motivo o texto do link pode ficar invisível devido à cor de fundo do blog, então colocando uma cor de fundo no botão temos a certeza que pelo menos essa cor sempre aparecerá junto com o link.

Retirar mensagem Mostrando postagens com marcador

Sempre que alguém clica num marcador ou faz uma pesquisa, uma mensagem aparece no topo da página do seu blog indicando que marcador está ativo. Visualmente não é agradável e ocupa um espaço desnecessário. Descobri como remover esse alerta de forma bem simples.


Essa mensagem é feia, desnecessária e só ocupa espaço.
Mensagem Ferramentas Blog
Existem duas formas de retirar isso, dá pra aplicar as duas juntas pra ter certeza de que irá funcionar. Existem alguns modelos de template que não aceitam alguns códigos, então veja qual é melhor para você.
Retirar isso é bem simples:
Antes de fazer qualquer modificação no código-fonte de seu blog, crie uma cópia Backup do modelo.
  • Primeiro modo.
1. Vá ao painel do blogger e escolha “Layout” e a opção “Editar HTML”.

2. Procure pela linha de código:
]]></b:skin>
3. E, acima dessa linha, cole o seguinte:
.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
display: none;
}
4. Salve o modelo e teste para ver se funciona e se não tem erros.
  • Segundo modo.
1. Do mesmo modo, entre em “Layout” e depois em “Editar HTML”
2. Procure pela linha, logo no início do código-fonte, “<head>” e, abaixo dela cole:
<style type='text/css'>
.status-msg-wrap{
display:none;
}
.status-msg-body{
display:none;
}
.status-msg-border{
display:none;
}
.status-msg-bg{
display:none;
}
.status-msg-hidden{
display:none;
}
</style>
3. Salve o modelo e teste para ver se funciona e se não tem erros.

Dica Qual o melhor tema para criar um blog.

Qual o melhor tema para criar um blog, sobre o que devo escrever no meu blog, qual o melhor assunto para fazer um blog e outras perguntas deste tipo são muito comuns. Provavelmente a maioria está pensando em como fazer um blog para conseguir muitas visitas e ganhar dinheiro com blogs, mas as coisas não são tão simples assim.

Então pense na hora de criar um blog ou mais especificamente sobre qual será seu assunto principal, afinal você terá que escrever muitas vezes sobre aquele tema, quero dizer fazer uma ou dez postagens sobre algo que não tenha interesse é fácil, mas um blog para ter sucesso leva tempo, e você terá que passar meses na verdade anos fazendo postagens por isso deve escolher um assunto que goste ou pelo menos tenha algum interesse.

Blog de sucessoOutra coisa muito errada (para não dizer criminosa) é copiar conteúdo de outros blogs ou sites, isso é plagio, um crime previsto no código penal, e o próprio Google tem uma pagina para receber denuncias de plagio (usamos sempre e realmente funciona, os blogs que copiaram nosso conteúdo tiveram as postagens excluídas e às vezes o blog inteiro). Além disso, se o Google notar que seu blog é copia de outros sites remove você do índice, isso significa que não aparecerá mais nos resultados da pesquisa Google.

Mais um fator que complica muito o desenvolvimento de blogs é no caso de plagio você não saberá responder os possíveis comentários que suas postagens tiverem, afinal mal leu o artigo que publicou ou no caso de ser um assunto que não goste será muito difícil falar e pensar sobre esse tema todos os dias. Afinal ter um blog envolve muito mais que publicar textos.

Ganhar dinheiro na internet leva certo tempo e deve pensar bem nisso na hora de criar um blog se for escrever sobre um tema especifico para não cair nestes erros que citamos acima. Então pense um pouco sobre esses pontos que citamos antes de criar um blog que será um problema para você.