Fazendo Sites - O guia para o profissional web

Menu dinâmico com XML + XSL e Javascript

Reinaldo Nascimento — Mon, 09 Feb 2009 08:00:16 +0000

Esse fim de semana tive que fazer uma navegação dinâmica em uma página html que precisa rodar dentro de um CD-Rom. Partindo desse princípio, defini que usaria Javascript e XML para a parte de chamada aos dados e XSL para formatar os resultados.

Até aí tudo bem, mas como se trata de um script dinâmico para rodar em meio local, ou seja, fora do ambiente de servidor, o desafio foi mais interessante.

Preparei alguns scripts para mostrar como cheguei ao resultado que eu queria.

Estrutura do arquivo XML

 version="1.0" encoding="utf-8" ?>
>
 
 id="1" title="Link Superior" url_top="#">
 seq="1" url="http://www.terra.com.br">Sublink 1>
 seq="2" url="http://www.globo.com">Sublink 2>
 seq="3" url="http://www.uol.com.br">Sublink 3>
>
 
 id="2" title="Link Superior 2" url_top="#">
 seq="4" url="http://www.ig.com.br">Sublink 4>
 seq="5" url="http://www.google.com.br">Sublink 5>
 seq="6" url="http://www.altavista.com.br">Sublink 6>
>
 
 id="3" title="Link Superior 3" url_top="qualquer_pagina.php">
 seq="7" url="http://www.microsoft.com">Sublink 7>
 seq="8" url="http://www.apple.com">Sublink 8>
 seq="9" url="http://www.uai.com.br">Sublink 9>
>
 
>

Salve o arquivo com o nome “menu.xml”.

Agora vou mostrar a estrutura do arquivo XSL

 version="1.0" encoding="iso-8859-1"?>
 version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:asp="http://www.microsoft.com">
 method="html" indent="yes" encoding="iso-8859-1"/>

 elements="*">>
 

 match="MENU/*">
 

 name="NodeName">
 select="name(current())"/>
>
 

> href="{@url_top}"> select="@title"/>>
>

 select="node()">
 

 name="ChildNodeName">
 select="./child::node()"/>
>
 

> href="{@url}"> select="$ChildNodeName"/>>>
 
>
>
>
 
>
>

Salve o arquivo com o nome “menu.xsl”.

Finalmente o Javascript que possibilita a “mágica”

function xslMenu( vXml, vXsl, vEl )
{
if ( document.implementation &amp;& document.implementation.createDocument ){
// *** Mozilla
var xsltProcessor = new XSLTProcessor();
 
// *** carrega o arquivo XSL
var myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", vXsl, false);
myXMLHTTPRequest.send(null);
 
// *** importa o xsl como Stylesheet
xslStylesheet = myXMLHTTPRequest.responseXML;
xsltProcessor.importStylesheet(xslStylesheet);
 
// *** carrega o arquivo XML
myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", vXml, false);
myXMLHTTPRequest.send(null);
var xmlSource = myXMLHTTPRequest.responseXML;
 
// *** Formata o XML com o método transform e imprime o
// *** resultado em vEl (elemento onde será carregado o resultado)
var resultDocument = xsltProcessor.transformToFragment(xmlSource, document);
document.getElementById(""+ vEl +"").appendChild(resultDocument);
 
} else if (window.ActiveXObject){
// *** IE
// *** carrega o XML
xml = new ActiveXObject("MSXML2.DOMDocument");
xml.async = false
xml.load(vXml)
// *** carrega o XSL
xsl = new ActiveXObject("MSXML2.DOMDocument");
xsl.async = false
xsl.load(vXsl)
// *** Transforma
document.getElementById(""+ vEl +"").innerHTML=xml.transformNode(xsl);
} else {
// *** Navegador sem suporte
alert("O navegador não é suportado");
}
}

Agora salve o arquivo com o nome “script.js”.

Crie agora um arquivo html chamado, por exemplo, index.html com a seguinte estrutura:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fazendo Sites - Criando um menu dinâmico com XML + XSL e Javascript</title>
<script type="text/javascript" src="script.js"></script>
 
<script type="text/javascript">

</script>
 
</head>
 
<body>
<div id="base">
    <ul id="menu">
    
    </ul>
</div>
 
</body>
</html>

O resultado será o seguinte:

A base para o menu está ai. Foi criada uma estrutura de

, que possibilitará inúmeras formatações, efeitos e aplicações.

Em suma, os códigos acima são auto explicativos e os comentários lhe ajudarão a entender o funcionamento.

Até a próxima.

Linhas da tabela com cores alternadas

Reinaldo Nascimento — Fri, 06 Feb 2009 02:01:33 +0000

Essa é uma rotina muito simples, eu reconheço. Mas quem é que volta e meia não se depara com a necessidade de fazer tabelas com cores alternadas ou então alternar algum elemento entre dois estados ou qualquer coisa do tipo?

Pois é, para quem precisar, está aí uma forma bem simples de fazer cores alternadas em tabelas.


 
	// Dados a serem colocados na tabela
	$dados = array(
				   array('O gato de botas', 50, '11,90'),
				   array('Rapunzel', 50, '12,90'),
				   array('O três porquinhos', 50, '15,90'),
				   array('A bela e a fera', 50, '10,00'),
				   array('Chapeuzinho Vermelho', 50, '18,90'),
				   array('Hary Potter', 50, '23,00'),
				   array('A lenda de Peter Pan', 50, '9,60'),
				   array('A nova onda do Imperador', 50, '17,75')
				   );
	$cor1 = 'cor1'; // Nome da classe da cor 1
	$cor2 = 'cor2'; // Nome da classe da cor 2
 
	// Início da tabela
	$tabela = '';
 
	for($i=0; $i<count($dados); $i++){// O pulo do gato :)($i%2==0) ? $cor=$cor1:$cor=$cor2;
 
		// alimenta a tabela com os dados$tabela.='.$cor.'">';
	}
 
	 // finaliza o html da tabela$tabela.='
			       
				       Título
					   Quantidade
					   Preço
				        
	
		
		            
		    '. $dados[$i][0] .' '. $dados[$i][1] .' R$ '. $dados[$i][2] .'
	  
';
 
?>

Título	Quantidade	Preço
'. $dados[$i][0] .'	'. $dados[$i][1] .'	R$ '. $dados[$i][2] .'

Salve o arquivo como, por exemplo, tabela.php.

O próximo passo é imprimir o resultado na tela. Isso é simples, claro que você pode incluir o código acima em uma função e chamar o resultado em template, mas aqui, vamos apenas imprimir o resultado em uma página html simples.

Crie um arquivo html no modelo abaixo:

 include('tabela.php'); ?>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabela com cores alternadas</title>
 
 
 
<style type="text/css">

</style>
</head>
 
<body>
 
	
 
</body>
</html>

O resultado:

É isso aí, até a próxima!

Será o fim do photoshop?

Danival A. Souza — Thu, 05 Feb 2009 14:08:39 +0000

Podemos dizer que o ano de 2008 foi o ano das aplicações online. Diversos aplicativos conforme conhecemos, migrou de desktop para usar o navegador. Editores de texto e planilhas foram os mais evidentes. Também tivemos uma série de softwares de edição de photos online, sendo estes os que eu mais duvidei que pudessem realmente fazer frente aos softwares desktop que temos por aí.

O principal motivo pelo descredito é que você teria que enviar as imagens para o servidor, editar, e então fazer o download delas. Isto torna tudo muito pesado e trabalhoso.

Hoje, lendo o blog do Pixlr, descobri que, em 2 de dezembro de 2008, já havia solução para isto. Aqueles que usassem o plugin do flash 10, não precisariam mais fazer upload <-> Download das imagens. Editaria elas ali, no pc mesmo!

Resolvi testar. Entrei no editor através do link: http://www.pixlr.com/editor/
Carregou rapidamente. Apesar de ser uma aplicação online, carregou tão rapido (senão mais rapido) do que o photoshop carregaria nesta máquina. Abri a imagem, e foi instantanea. Fiz algumas modificações básicas, e então salvei.

O programa é excelente, e nos menus você ainda pode trocar o idioma para português. Obviamente não é tão completo quanto o photoshop, mas é um excelente custo benefício, afinal seu custo é zero. No blog, tem alguns tutoriais.

Além deste, existem outros aplicativos online de edição de imagem, veja uma lista:

Splashup

Phoenix

pixer.us

FotoFlexer

SUMO Paint

10 aplicações web úteis para designers

Danival A. Souza — Wed, 04 Feb 2009 01:26:04 +0000

Existem diversas ferramentas online, gratuítas, que podem ajudar ao trabalho de um designer e webdesigner no seu dia a dia.

Fizemos uma seleção com dez destas ferramentas. Veja abaixo:

kuler Create

Kuler é uma aplicação web da adobe, que ajuda você a criar e compartilhar esquema de cores.

pixlr

pixlr é um excelente editor de imagens online, com uma aparência semelhante a do photoshop, recursos como layers, filtros e várias ferramentas. Ainda pode selecionar o idioma, para português do Brasil.

Wellstyled’s Color Scheme Generator

Wellstyled’s Color Scheme Generator é uma ferramenta web simples, para ajudar designers a comceber esquemas de cores. Tem uma interface muito intuitiva, e você terá acesso a url do esquema de cores selecionado.

FontStruct

FontStruct é uma ferramenta web para criar, editar e compartilhar fontes. Visite a galeria e veja várias fontes criadas por outros usuários, as quais você poderá utilizar.

Typetester

Typetester permite você testar e comparar tipografias. Isto tem uma variedade de fontes que incluem fontes web-safe, como Arial e verdana. Mas você também pode usar suas fontes pessoais.

TypeNavigator

TypeNavigator é uma ferramenta web desenvolvida para ajudar a identificar fontes, que você viu mas não sabe o nome.

Dummy Text Generator

O site Dummy Text Generator permite a você gerar texto aleatório. Acho que podemos dizer que é um gerador avançadado de “Lorem ipsum para web designers”.

BGPatterns

BGPatterns é um site que permite gerar patterns, para background de sites. A ferramenta é muito simples de usar, e consegue assim mesmo ser muito poderosa, permitindo a edição completa de todos os recursos ao gerar o pattern, tais como cor, tamanho, ângulo de inclinação, etc.

favicon.cc

Favicon.cc é uma ferramenta para desenhar favicons. Permite que você crie diretamente do zero, ou se preferir pode fazer o upload de uma imagem, para que seja transformada em favicon.

templatr

templatr é uma aplicação web para criar templates (layouts) de web sites. Aparentemente, cria templates para o wordpress. É uma ferramenta muito simples de utilizar, e pode ser útil para desenvolver a parte estrutural de um layout.

Compactando o seu CSS com PHP

Danival A. Souza — Sun, 18 Jan 2009 03:03:59 +0000

Compactar o arquivo CSS é uma das técnicas utilizadas para acelerar o processo de carregamento de um website. Algumas destas técnicas estão sendo amplamente utilizadas. Hoje, iremos descrever três maneiras diferente de compactar os arquivos CSS e enviar ao navegador do usuário, utilizando para isto o PHP.

O método de Paul Stamatiou

Este método já é utilizado por alguns desenvolvedores web a mais de um ano. Para fazer funcionar, você precisa primeiro renomear o seu arquivo NOME.css para NOME.css.php. (onde NOME é o nome do seu arquivo).

Então faça a modificação no HTML, utilizando o novo nome.

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Após alterar o arquivo HTML, renomeie o css conforme informado, e então abra o arquivo para edição. Insira a seguinte linha de código no ínicio do arquivo:

 if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Então, adicione a próxima linha no final do arquivo. Salve, e feche o arquivo.

 if(extension_loaded('zlib')){ob_end_flush();}?>

Fim. Este método é bastante útil e eficiente.
Fonte: http://paulstamatiou.com/2007/03/18/how-to-optimize-your-css-even-more

O método Perishable Press

Este método é bem semelhante ao método descrito por Paul Stamatiou. Basicamente, você também precisa renomear seu arquivo .css para .css.php (ou .php somente), alterar a chamada a este arquivo no html para o novo nome, e então adicionar o seguinte bloco de código no início do seu arquivo CSS:


   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Em seguida salve o arquivo e feche-o. Com este método, você não precisa alterar o final do arquivo. Basicamente, esta é a grande diferença sobre o método anterior apresentado.

Fonte: http://perishablepress.com/press/2006/10/23/compressed-css-compression/

O método Reinhold Weber

Este método foi escrito pelo desenvolvedor Alemão Reinhold Weber. Particulamente, prefiro este método aos outros. Explicaremos por que mais abaixo. Por hora, vamos ao método.

Primeiramente, crie um arquivo .php, e insira o código abaixo (e coloque todos os seus CSS de include no código):


  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');
  ob_end_flush();
?>

Por que eu prefiro este método? Simples, com este método não é necessário renomear o arquivo .css para .php. Além do mais, este método comprime todos os arquivos CSS utilizados no site de uma única vez, e envia para o computador do usuário através de uma única requisição, o que acelera muito o processo para sites que tem multiplos css (como o exemplo acima).

fonte: http://reinholdweber.com/?p=37

Adicione publicidade no seu rss feed

Danival A. Souza — Fri, 16 Jan 2009 02:45:07 +0000

O problema. Ganhar dinheiro através de publicidade nos feed RSS dos blogs tem se tornado uma prática comum, e muitos blogueiros tem feito isto para aumentar os seus ganhos com publicidade. FeedBuder pode inserir publicidade do AdSense dentro dos itens do seu feed, mas você precisa ter pelo menos 500 inscritos para poder usar o recurso, e você só poderá utilizar a publicidade do adsense. Não poderá usar nenhum outro sistema de publicidade, caso utilize este recurso.

A solução. É possível inserir outro tipo de anúncio no seu RSS feed. Você pode, por exemplo, usar um link para um theme grátis do wordpress somente para os leitores do seu RSS.

Siga estes simples passos para fazer esta modificação:

1. Abra para alteração o arquivo functions.php do seu theme. Se o theme que você está utilizando não tem o arquivo functions.php, simplesmente crie um.
2. Cole o seguinte código dentro do arquivo functions.php:


function insertAds($content) {
    $content = $content.'
Você visitou nosso site hoje?
';
    return $content;
}
add_filter('the_excerpt_rss', 'insertAds');
add_filter('the_content_rss', 'insertAds');
?>

Salve o arquivo. Agora o seu feed rss irá exibir os anúncios publicitários.

Explicação: Eu tenho visto muitas modificações para fazer isto na web, mas todas elas requer que você altere o (core) núcleo do seu wordress para que possa funcionar. Claro, alterar o núcleo do wordpress é uma péssima idéia, pois você terá que reaplicar esta modificação toda vez que atualizar o seu blog. Nos fizemos diferente. Com esta modificação apenas no arquivo do theme, usamos a função do wordpress add_filter() para inserir conteúdo diretamente no RSS feed sem a necessidade de alterar nenhum dos arquivos do core do sistema.

Fonte: http://www.wprecipes.com/how-to-insert-ads-on-your-rss-feed

Wordpress: Evitando posts duplicados na página inicial

Danival A. Souza — Wed, 14 Jan 2009 21:10:54 +0000

O problema. Com a popularidade recente dos modelos estilo magazine do wordpress, existem muitos usuários que utilizam mais de um loop na página inicial de seus blogs para exibir seus posts. Baseado nisto, surge a necessidade de criar alguma rotina, que evite a duplicação de posts no segundo loop, para eliminar a possibilidade de artigos duplicados na página inicial do site.

A solução. Abaixo uma simples solução para o problema, usando o recurso de arrays do PHP.

1. Vamos começar criando um simples array no php, e gravar todos os IDs dos posts do primeiro loop dentro dele.

Loop n°1
 

$ids = array();
while (have_posts()) : the_post();
the_title();
?>


 
 $ids[]= $post->ID;
endwhile; ?>

2. Agora, o segundo loop: vamos usar a função do php in_array() para verificar se o ID de um post está dentro do nosso array. Se o ID NÃO estiver no array, então ele não foi exibido no primeiro loop, e nós podemos então exibir o seu post.

Loop n°2

query_posts("showposts=50");
while (have_posts()) : the_post();
if (!in_array($post->ID, $ids)) {
  the_title();?>
  

 }
endwhile; ?>

Explicação: Quando o primeiro loop é executado, todos os IDs dos posts exibidos nele irão ficar dentro da variável aray que nós criamos. Quando o segundo loop é executado, nós então verificamos se o ID do registro atual não está no array. Caso o ID não esteja no array, significa que ele não foi exibido no loop anterior, então neste caso, podemos exibir o post.

Wordpress: Exibir adsense somente para visitantes do google

Danival A. Souza — Tue, 13 Jan 2009 03:45:38 +0000

O problema. É um fato que os visitantes regulares dos sites não clicam em anúncios publicitários. As pessoas que clicam nos anúncios são, 90% das vezes, visitantes que vieram de sites de busca.

Outro problema é o google “smart pricing” (sistema de preços inteligentes). Este sistema quer dizer que você ganha por clique, proporcional ao seu CTR (click-through rate). Calma, iremos explicar:

O CTR é a taxa que mede a proporção entre a visualização de um anúncio, e quantas vezes ele foi clicado. Com o sistema smart pricing, um anúncio que você poderia ganhar R$1 ,00, você poderá ganhar este valor dividio entre 2 e 10. Ou seja, entre R$0,10 e R$0,50.

Para aumentar o seu CTR e ganhar proporcionalmente mais com o adsense, indicamos exibir os anúncios publicitários do adsense somente para visitantes que vierem através de sites de busca.

A solução:

1. Abra o arquivo functions.php do seu theme.
2. Cole o seguinte código dentro dele:

function scratch99_fromasearchengine(){
  $ref = $_SERVER['HTTP_REFERER'];
  $SE = array('/search?', 'images.google.', 'web.info.com', 'search.', 'del.icio.us/search', 'soso.com', '/search/', '.yahoo.');
  foreach ($SE as $source) {
    if (strpos($ref,$source)!==false) return true;
  }
  return false;
}

3. Em seguida, cole o código abaixo em qualquer lugar dentro do seu template, onde você deseja que a publicidade do adsense seja exibida. Ela irá então ser exibida somente para visitantes que vierem de sites de busca:

if (function_exists('scratch99_fromasearchengine')) {
  if (scratch99_fromasearchengine()) {
    INSERT YOUR CODE HERE
  }
}

Explicação: Esta modificação inicia com a criação de uma função chamada scratch99_fromasearchengine(). Esta função contém uma variável do tipo array, chamada $SE, onde você pode especificar os sistemas de busca. Você pode facilmente incluir novos sistemas de busca, adicionando novos elementos ao array.

Então, a função scratch99_fromasearchengine() irá retornar verdadeiro somente se o visitante vier de um site de busca que está incluído dentro da array $SE.

Com um pouco mais de implementação e criativadade, você pode exibir anúncios do adsense para quem vier dos sites de busca, e então exibir uma publicidade própria ou até mesmo conteúdo, aos usuários que acessam o seu site diretamente.

Workshop Incremente Suas Logomarcas

Reinaldo Nascimento — Sun, 11 Jan 2009 11:00:27 +0000

Oi pessoas, esse post tem o objetivo de mostrar algumas técnicas usadas no artigo “Incremente suas logomarcas” e abrir um leque de opções para você poder fazer pequenos efeitos porém muito úteis no dia-a-dia do web designer.

Vamos lá, espero que vocês gostem do artigo.

1º - Ambiente 3D

Um ambiente bem feito é um grande passo para o sucesso de uma apresentação, seja de uma logomarca, de um produto ou seja lá o que se queira apresentar.

No caso da logo do artigo supracitado, fizemos um ambiente bem simples mas com aparência tridimensional.

Exemplo 1

Este exemplo usa a mesma técnica apresentada no post “Incremente suas logomarcas“.

1 - Um fundo degradê de vermelhos (R: 255, G: 0, B: 0) para (R: 155, G: 0, B: 0)

2 - Alteração da curva (Cntrl + M) na parte inferior

O resto da imagem foi apenas aplicação de sombras, brilhos e caustics que nós iremos ver em futuros artigos aqui no FazendoSites.com.br.

A seta, mais ou menos 3D, também é uma técnica que veremos logo, logo por aqui.

Exemplo 2

Esse também é muito simples, não é?

O objetivo não fazer nada complicado e sim mostrar que o ambiente é tão importante quanto o objeto em foco. E não precisa de muita coisa para fazer um ambiente interessante e agradável.

Um exercício para nós: Usemos a imaginação e todo o conhecimento que temos (independente do tamanho desse conhecimento ) e vamos usar a imagem ao lado para tentar criar o máximo de opções e variações possíveis ou desejáveis.

Se vocês quiserem, enviem suas criações para reymaster@gmail.com com o assunto [FAZENDO SITES - AMBIENTE 3D].

Será um prazer postar aqui no blog suas criações.

2º - Formas com simulação 3D

Essa técnica é bem interessante, útil e pode ser usada em várias ocasiões, não só na estilização de logomarcas como também em botões e marcadores.

Na imagem acima, usei exatamente a mesma técnica em todas as formas

1 - Uma forma com degradê

2 - Inner Shadow ajustado como fizemos no post “Incremente suas logomarcas”

3 - Uma forma complementar na cor branca com trasparência, no caso dos círculos pode ser usado degradê do branco para transparente e no caso de outas formas pode variar.

4 - Para completar, um reflexo cai bem.

Talvez você tenha achado que eu iria mostrar centenas de configurações e técnicas arrojadas, fórmulas mágicas e filtros avançadíssimos para se obter resultados profissionais. Nada disso, o que tenho observado a cada dia é que a simplicidade é o segredo de um design profissional de sucesso.

Tente, construa, desconstrua e veja como obter efeitos maravilhosos é mais fácil e simples do que se imagina.

Até a próxima.

Incremente suas logomarcas

Reinaldo Nascimento — Fri, 09 Jan 2009 00:35:20 +0000

Podemos observar, principalmente na web, que muitas empresas tem usado efeitos 3D em na apresentação de suas logomarcas dando um toque tecnológico bem interessante, limpo e sem muita frescura.

Neste tutorial eu utilizei o Adobe Photoshop CS3, mas se você estiver utilizando outra versão, creio que não vai ter dificuldade para acompanhar.

Vamos lá, acompanhe o passo-a-passo:

Passo 1 - Crie um novo arquivo

Neste caso, um arquivo com 590 x 270 pixels.

Vamos reproduzir a logomarca da empresa Claro e usar efeitos bem interessantes e profissionais. No resultado final, qualquer semelhança não é mera coincidência.

Passo 2 - Crie um Degradê Radial na camada

2.1 - Defina a cor do primeiro plano como #ff0000 (R: 255, G: 0, B: 0)

2.2 - Defina a cor do segundo plano como #9b0000 (R: 155, G: 0, B: 0)

2.3 - Selecione a ferramenta Gradient Tool , escolha na barra superior a opção Radial .

2.4 - Arraste o cursor pela área do arquivo a partir do topo à esquerda até a parte inferior à direita:

Agora você deve estar vendo algo parecido com a imagem abaixo:

Passo 3 - Criar a base para a logomarca

Selecione a ferramenta Retangular Marquee e selecione uma área de 590px de largura por 97px de altura na parte inferior do arquivo para simularmos a base para a logomarca.

Agora escureça um pouco essa área clicando em Image->Adjustments->Curves (ou Cntrl + M).

Passo 4 - Criando a Logomarca

Agora que já preparamos a área para a logomarca, vamos iniciar a criação da própria:

Selecione a ferramenta Elliptical Marquee (M) e crie um círculo perfeito segurando a tecla Shift.

Agora crie um nova camada (Cntrl + Shift + N) e preencha o círculo com o mesmo degradê que usamos na base.

Depois de preenchido, pressione Cntrl + D para retirar a seleção do círculo e clique em no ícone fx, localizado na parte inferior da paleta Layers (Camadas) e selecione a opção Inner Shadow

Na tela de configuração do Inner Shadow (Sombra Interna), coloque os seguintes parâmetros:

Angle: -89
Distance: 6
Choke: 9
Size: 16

Agora selecione novamente a ferramenta Elliptical Marquee (M) e crie um novo círculo menor dentro do círculo maior como mostra a imagem a seguir.

Crie uma nova camada (Cntrl + Shift + N) e preecha o interior do círculo menor de cima para baixo com um degradê da cor branca para transparente como mostra a figura acima tendo o resultado abaixo:

Tecle Cntrl + T para transformar a seleção e achate um pouco o círculo agora preenchido com o degradê.

O resultado agora será o seguinte:

Para dar um “tchan” interessante nesse ponto da logomarca, faça o seguinte:

1 - Crie outro círculo interno com a ferramenta Elliptical Marquee (M) ;

2 - Crie uma nova camada (Cntrl + Shift + N) e preencha novamente com aquele degradê de branco para transparente que usamos anteriormente;

3 - Tecle Cntrl + T para transformar a seleção e achate um pouco como da última vez;

4 - Acesse o menu Filter->Blur->Gaussian Blur e coloque como mostra a imagem abaixo:

5 - Altere a transparência da camada para 60% e você terá o seguinte resultado:

Estamos quase lá! Vamos passar para o 5º e último passo.

Passo 5 - Finalizando a Logomarca colocando o texto

Agora vamos fazer o último passo do nosso tutorial. Vamos escrever o texto da logomarca.

Selecione a ferramenta Horizontal Type (T) e selecione a fonte Arial Black, tamanho 44 e cor branca (eu utilizei Arial Black com itálico, se eu tivesse criado essa logo, teria usado. )

Faça de forma a ficar assim:

Agora vamos fazes os retângulos que completam a logo.

Faça um retângulo fino logo após a letra “O” com mais ou menos uns 28 x 6 px, crie uma nova camada (Cntrl + Shift + N) e preencha com a cor branca, duplique os retangulos (Cntrl + J) duas vezes e posicione um a 45 e outro a 90º no topo da letra “O”.

Pronto!

Agora pra arrematar você pode usar várias outras técnicas para melhorar o brilho, realçar as cores e etc..

Eu fiz apenas o seguinte:

Até a próxima!