Confira 10 tutoriais avançados de Photoshop

Este artigo está com Nenhum comentário: seja o primeiro!

SEO agora é praticamente obrigatório

Este artigo está com 4 comentários
Mais de 110 bilhões de buscas são feitas mensalmente e pelo menos 80% dos internautas encontram o que precisam nas primeiras páginas do Google. Agora pergunto: como está sendo feita a otimização do seu site?


Definindo o que é otimização

Também conhecida como SEO – Search Engine Optimization, é um conjunto de técnicas que tem como objetivo melhorar o posicionamento de um site nos buscadores (Google, Ask, Bing, Yahoo, afins).

Através de um trabalho de “longo prazo”, o profissional de SEO consegue aumentar a encontrabilidade e o posicionamento de um site nas primeiras páginas do Google (o principal site de busca) para diversos termos relacionados com o serviço, produto ou diferencias da empresa. O site será encontrado por termos relevantes e por internautas potenciais, pessoas que realmente tem a intenção de compra.

Como está sendo feita a otimização do seu site?

Atualmente o trabalho de SEO está na boca de todos, desde os clientes, internautas, profissionais de marketing digital e principalmente das agências, que se intitulam “Agências SEO” e destacam o serviço como sendo o cargo chefe da empresa.

Por ter o melhor custo benefício, ser a principal fonte de tráfego e trazer resultados durante anos sem precisar qualquer investimento adicional, a otimização de um site sem dúvida deve ser destacada e apresentada como um dos principais serviços oferecidos por uma agência digital.

Será que eles realmente estão otimizando seu site?

É comum ver agências destacando, oferecendo e vendendo essa técnica. Mas, infelizmente, está se tornando ainda mais comum ver empresas que cobram pelo serviço, mas não o fazem, ou melhor, dizem ter realizado. Por incrível que pareça esta é a nova realidade. Se você “balançar” uma árvore caem diversas empresas supostamente “especializadas em SEO”.

Dicas básicas para analisar sua otimização

A SEO é composta por um conjunto de padrões, que vão desde uma programação limpa, semântica, conteúdo, relevância, afins. Embora o assunto seja muito complexo para detalhar em apenas um artigo, vou mostrar uma maneira simples que serve como parâmetro na hora da otimização: o estudo de palavras-chave, o título e a descrição da página.

Antes de começar qualquer job, o profissional de SEO precisa ter em mente o público-alvo, analisar os concorrentes e definir as palavras-chave a serem trabalhadas por meio de um estudo feito utilizando ferramentas profissionais, como por exemplo, a “ferramenta de palavras-chave” do Google Adwords.
Após ter feito isso, vamos definir os títulos e descrições de suas páginas utilizando os principais termos de buscas relacionados à sua empresa, levando em consideração o estudo de palavras e o comportamento do seu público-alvo (como e o que eles pesquisariam no Google).

Uma dica para saber se o seu site foi otimizado levando em consideração esses requisitos é acessar o código fonte. Basta entrar em uma página do seu site, clicar com o botão direito do mouse e escolher a opção “exibir código fonte da página“. Encontre o “Title” e a “Description” e analise se os termos/palavras que eles usaram realmente são relacionados com seu produto/serviço, se são palavras muito amplas ou bem segmentadas para o seu público.

Por incrível que pareça algumas empresas não definem nem o title e description, mesmo não tendo feito um estudo minucioso das palavras-chave e comportamento do público-alvo, o preenchimento desses requisitos é essencial para que um site seja melhor posicionado nos buscadores.
Fonte: Webinsider

Cartões de visitas criativos para inspiração

Este artigo está com Nenhum comentário: seja o primeiro!
Criar um cartão de visitas atrativo não é tarefa das mais fáceis. A combinação de cores, formas, fontes e elementos que resultam em uma peça gráfica que chame a atenção daquele que a recebe pode muitas vezes ser simples – outras nem tanto. Ainda há a inclusão de dobras, cortes, relevo… O número de possibilidades é enorme.


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Artigo original: Creatives

Curso de Corel Draw online

Este artigo está com 1 commentário
Você gostaria de saber fazer no computador desenhos artísticos e publicitários?
Quer criar estampas para camisetas, logotipos, capas de revistas, livros, CDs e DVDs?
Precisa desenvolver cartazes, folders, flyers e banners?
E que tal criar botões, ícones e animações gráficas para aplicar em páginas da Internet?
Você sabia que tudo isso se faz com um programa chamado Corel Draw, que revolucionou o setor desde que foi lançado pela Corel Corporation?
Profissionais bem qualificados no uso do Corel Draw são raros no mercado e normalmente muito bem remunerados.
O Curso de Corel Draw é feito de forma passo-a-passo para que mesmo os iniciantes possam aprender a usar esta poderosa ferramenta.
De bônus, totalmente grátis, ao final do curso você aprende a fazer uma home-page com o Corel Draw.
O curso é inteiramente online, com muitos exemplos e acompanhamento de tutores para tirar dúvidas.

Os principais tópicos do Curso de Corel Draw são:
  • Introdução
  • Tela de Apresentação
  • Desenhando figuras simples
  • Linhas curvas
  • Figuras geométricas
  • Configurando Páginas
  • Desenhando e tranformando
  • Usando a ferramenta forma
  • Preenchimentos e Contornos
  • Comandos interativos
  • Efeitos sobre o objeto
  • Girando e Inclinando
  • Espelhando objetos
  • Duplicar e Clonar
  • Ordenando Objetos
  • Alinhando e distribuindo
  • Editando Texto
  • Correção Ortográfica
  • Texto artístico
  • Texto com figuras
  • Texto 3D
  • Efeitos especiais
  • Efeito contorno
  • Efeito envelope
  • Efeito extrusão
  • Efeito lente
  • Efeito misturar
  • Efeito Powerclip
  • Adicionar perspectivas
  • Combinação de efeitos
  • Figuras e Símbolos
  • Efeitos sobre imagens de Bitmap
  • Efeitos 3D
  • Diversos outros efeitos
Bônus: Utilize o Corel Draw para criar um site na internet
  • Utilizando Corel Draw para Internet
  • Criando uma Home-Page


Depoimentos de quem já concluiu este curso



"O curso me ajudou a entender a utilização de muitas ferramentas do Corel Draw. Achei muito interessante o fato de poder armazenar o material do curso no computador, pois agora posso consultá-lo sempre que precisar para tirar dúvidas."
Fernando Odilon Lopes Santos - Vitória da Conquista/BA

 

Adicionando sombra projetada no Illustrator CS5

Este artigo está com Nenhum comentário: seja o primeiro!


Olá. Temos aqui um tutorial bem simples do Adobe Illustrator CS5! Criando uma sombra projetada em um objeto ou texto.

é muito simples:

  1. Selecione um objeto ou grupo (ou direcione uma camada no painel Camadas).
  2. Escolha Efeito > Estilizar > Sombra.
  3. Defina opções para a sombra projetada e clique em OK.
     
    Modo Especifica um modo de mistura para a sombra projetada.
    Opacidade Especifica a porcentagem de opacidade desejada para a sombra projetada.
     
    Deslocamento X e Deslocamento Y Especifica a distância desejada para o deslocamento entre a sombra projetada e o objeto. 
     
    Desfoque Especifica a distância a partir da borda da sombra na qual o desfoque deve ocorrer. O Illustrator cria um objeto rasterizado transparente para simular o desfoque.
     
    Cor Especifica uma cor para a sombra.
     
    Escurecimento Especifica a porcentagem de preto a ser adicionada para a sombra projetada. Em um documento CMYK, um valor de 100%, usado com um objeto selecionado contendo uma cor de traçado ou preenchimento diferente de preto, cria uma sombra preta multicolor. Um valor de 100% usado com um objeto selecionado contendo apenas um preenchimento ou traçado preto cria uma sombra 100% preta. Um valor de 0% cria uma sombra projetada da cor do objeto selecionado. 
    Até a próxima! 

    Siga-me no Twitter: @junim_ramos



Dicas na utilização da Pen Toll do Illustrator

Este artigo está com Nenhum comentário: seja o primeiro!


Se você usa o Adobe Illustrator, então é quase certo que você usa a ferramenta Pen na criação de seus caminhos.  Este guia abrangente visa introduzir ou lembrá-lo de recursos, atalhos e métodos para trabalhar com o que é provavelmente a ferramenta mais essencial da Adobe.


Ferramenta Pen (p): Clique em pontos da àrea de trabalho para criar segmentos de reta, clique e arraste para criar caminhos com Curva de Bézier.

Add Anchor point Tool (+): Clique em um segmento de caminho para adicionar pontos de ancoragem.


Delete Anchor point Tool (-): Clique no ponto de âncora para remover o caminho.


Convert Anchor point Tool (Shift+C): Clique no ponto de ancoragem e arraste para criar alças Bézier. clique em um ponto de ancoragem com alças para removê-lo.

 

MintShare – Pure CSS & HTML Based Social Share Widget

Este artigo está com 1 commentário


Existem centenas de plugins de social bookmarking (widget para compartilhar em redes sociais) espalhados pela internet. Então surge a pergunta: "Porque mais um?".

Mas vou mostrar para vocês um widget muito legal que encontrei no site BloggerMint, um blog, em inglês, muito interessante sobre web design e desenvolvimento. Dando uma olhada em seus tutoriais, encontrei esse plugin que é muito fácil de implementar tanto no Blogger, Wordpress  ou mesmo em um site pessoal HTML.

Desenvolvido com base em CSS e HTML sem usar qualquer Javascripts, estes botões são realmente rápidos em seu carregamento e pequeno em tamanho.
Efeitos de CSS3 como border-radius e box-shadow foram usados na criação desse widget e também os ícones das redes sociais...




Como instalar

Para o Blogger

1. Entrar no Blogger> Design> Editar HTML.Marque a opção "Expandir modelos de widgets" no canto superior direito do editor.

2. Clique no link "CSS" abaixo para obter o código CSS do botão que você deseja usar. Copie o código CSS e cole pouco antes da tag </ b: skin>  de fechamento no seu Template Blogger.

Segue o código CSS do widget:

/* ================================================================ 
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare 
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides 
credit to its author.
=================================================================== */

#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvS-xN4QTtt5tDjIwCN01_d9Z82RWGVfGIQLb8I5IQdyZEq-r0Zw0ZqlgKsKm34CQkNtfN-dalLrskbneH76YLlXQMhZ35HB4HrFX1idQFBwagwt6-d4lcO1TWtV-dGjt8ZYnjC36viZ_M/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4inZ6f3Sr7KrHxFeI3bE6fPPdcbNZ9lVtb-Tk34Q650iX5ixoKIplqaIfaC_jPp0kfKOhuiQ3nm8Qr1-Ixb57ngnA-ToyrJTZ3TZM7vPT75t0uGpVNf50l4pF-e3CEn2ybfilzYm9zbso/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_mini a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}


#mintshare_mini .flyout {
    background: none repeat scroll 0 0 #AAAAAA;
    height: 113px;
    left: 40px;
    position: relative;
    top: -4px;
    width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}

#mintshare_mini .flyout ul {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvS-xN4QTtt5tDjIwCN01_d9Z82RWGVfGIQLb8I5IQdyZEq-r0Zw0ZqlgKsKm34CQkNtfN-dalLrskbneH76YLlXQMhZ35HB4HrFX1idQFBwagwt6-d4lcO1TWtV-dGjt8ZYnjC36viZ_M/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute; 
left:-1000px; 
top:-27px; 
width:365px; 
height:30px; 
border:1px solid #888; 
border-left:0; 
padding-right:10px;
z-index: 500;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}

#mintshare_mini:hover .flyout ul{
left:50px;
}

#mintshare_mini .flyout ul li {
float: left;
}

#mintshare_mini .flyout ul li a{

}

#mintshare_mini .flyout ul a img {

}

#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}


#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}

#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}


/* For IE6 */

#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_mini .get_mintshare {
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

Existem vários modelos desse plugin, aqui vou mostrar o MintShare Mini:


3. Copie o código HTML do botão que você deseja usar clicando em um dos links HTML abaixo.





<! - Mini MintShare ->
<div id='mintshare_mini'>
<a class='sharetext'> <b> Share This </ b ><!--[ if gte IE 7 ]><!--></ um ><!--<![ endif] ->

<!--[ If lte IE 6]> <table> <tr> <td> <[endif] ->
<div class='flyout'>
<ul class='icons'>
<li class="drop-li"> <a expr: href = "" http://www.facebook.com/sharer.php?u = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://twitter.com/share?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://www.stumbleupon.com/refer.php?url = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://digg.com/submit?phase=2&url = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://reddit.com/submit?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://myweb2.search.yahoo.com/myresults/bookmarklet?t = "+ data: post.url +" & title = "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://delicious.com/post?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>

<span class="get_mintshare"> <http://www.bloggermint.com/2011/01/mintshare-social-bookmarking a href = "
-Compartilhamento de botão widget / "> Get MintShare! </ A> </ span>

</ Ul>
</ Div>
</ Div>
<! - End Mini MintShare ->

4. Agora, procure <data:post.body/> usando CTRL + F. Cole o código HTML imediatamente após a tag <data:post.body/> e clique em "Salvar".

Para outros modelos desse widget, visite o site oficial aqui.

Muito legal não é??
Eu usarei esse widget em meu próximo blog!! Aguardem...

Abraços

@junim_ramos

Sexy Lightbox e Color Box - Dois clones do Lightbox clássico

Este artigo está com 1 commentário
 

Vamos falar nesse post sobre dois plugins de jQuery para utilização de exibição de imagens e galerias.
 São eles o Sexy lightbox e o Bolor Box. Eu utilizo na maioria das vezes em meus projetos o Color Box pois é praticamente uma cópia identica do Lightbox clássico...Vamos às apresentações:

Sexy Lightbox

Esse plugin é uma versão mais leve e mais 'sexy', -como o próprio nome diz- do Lightbox clássico. 
Podemos considerar sua simples instalação uma grande vantagem para nós Webdesigners. Além disso esse plugin jQuery é compatível com HTML, isso significa que podemos exibir elementos, páginas, vídeos, etc... enfim, tudo que quisermos!!

Veja como são exibidos os elementos com Sexy Lightbox:





Imagens grandes são ajustadas automaticamente para a janela. Lightbox Sexy  requer Mootools 1.2.3 ou  jQuery 1.3.2, e é compatível com todos os navegadores modernos (e Internet Explorer!...)

Gostou?  
Demo: http://www.coders.me/ejemplos/sexy-lightbox-2/
Licença : MIT License

Color Box 

Agora vamos falar do Color Box que também se parece muito com o Lightbox.
Ele suporta imagens, galerias, agrupamento de imagens, ajax, conteúdo e também iFrames.
Podemos controlar sua aparência via CSS modificando a janela de exibição.
Imagens de fundo Preloads, e pode carregar imagens programadas em um grupo de fotos. 
Liberado sob a licença MIT.


Testado em: Firefox 3 +, Safari 3 +, Opera 9 +, Chrome, Internet Explorer 6, 7, 8.  
Legal não é?

Demo: http://colorpowered.com/colorbox/core/example1/index.html
Download: http://colorpowered.com/colorbox/colorbox.zip

Bom pessoal, mais uma dica do Blogão do Design, espero que gostem e aproveitem!!
Abraços

@junim_ramos 

Documentação Visual jQuery

Este artigo está com Nenhum comentário: seja o primeiro!


Para voce desenvolvedor jQuery que ainda não conhece a documentação Visual jQuery, vale a pena conferir! Você pode salvar a página em seu computador e acessar também localmente, vendo inclusive os exemplos funcionando!

Acesse http://visualjquery.com/ e bons estudos!! Um Webdesigner hoje precisa saber jQuery para se destacar no mercado!!

É isso aí pessoal #ficadica

Abraços

@junim_ramos

Aplicativo do Google+ para iPhone já está com a Apple, afirma funcionária do Google

Este artigo está com Nenhum comentário: seja o primeiro!
Antes mesmo da liberação dos convites para o Google+ para algumas pessoas, o aplicativo para Android já estava disponível na Android Market, não demorou muito até que os usuários de iPhone reivindicassem por um app específico para eles também.

Na manhã de hoje (4), a funcionária do Google, Érica Joy (responsável pela área do Google TV), fez a seguinte declaração no Google+:
For my iPhone using friends: the Google+ iPhone app has been submitted to the App store (no not today, sometime prior to today) and is awaiting approval.

O que isso quer dizer? Que o app Google+ para iPhone logo logo estará disponível para os usuários fazerem o download na AppStore.

Não foi revelado nada em relação ao aplicativo, como valores (caso tenha) e funcionalidades, mas se seguir a mesma linha do app para Android, aviso aos iPhone Users que valerá muito a pena o download.
Assinar: Postagens (Atom)