Olá, pessoal

Se vocês leram o post anterior: Documentos Essenciais Para Freelancers Web: Parte 2 – E-mails, viram que mencionei a criação de um tutorial para o Gmail, mostrando como criar modelos, assinaturas de E-mail para ele, correto? Então, vamos lá.

Pré-Requisitos

• Possuir uma conta no Gmail

Objetivos

• Criar alguma assinatura/modelos de e-mail no Gmail

Conteúdo

1º Passo – Habilitar o ‘Labs’ do Gmail

Já faz algum tempo que, nas contas do Gmail, versões ‘beta’, ou não, de API’s (Aplicações de Interface) se encontram disponíveis nas Configurações do e-mail do Google, chamados de LABS.

Para início de conversa, devemos ativar dois API’s:

Fig. 01: Ativação dos API's no LABS do Gmail

Uma terá a função de gravar as respostas predeterminadas. A outra, nos dá a possibilidade de inserirmos imagens do nosso computador ou da própria web.

2º Passo – Criação da Assinatura

Com a habilitação das API’s, vamos agora criar um modelo de assinatura. Para isso, devemos “simular” a criação de uma nova mensagem de e-mail e, sem colocar assunto, destinatário e afins, vamos sim, inserir um texto e/ou imagem no corpo do e-mail, como na gravura abaixo:

Fig. 02: Assinatura padrão

Neste exemplo é exibida a minha assinatura profissional, o qual respondo todos os meus e-mails. Mas é preciso gravá-la para poder reutilizá-la em todos os e-mails. Para isso, na barra de ferramentas do e-mail, devemos clicar em Respostas predeterminadas > Salvar > Nova resposta predeterminada.

Fig. 03 - Assinaturas salvas

Observem que eu tenho 4 assinaturas e vou criar pelo menos mais 3. Tudo isso para economizar digitação e otimizar nosso tempo.

3º Passo – Manipulação das Assinaturas

E para inseri-las no corpo do e-mail, é só clicarmos em Respostas predeterminadas, escolha a assinatura e clicar sobre ela. Simples, direto e eficaz.

Para editar alguma assinatura, é só repetir o primeiro passo e depois salvar com o mesmo nome da atual.

E para excluir é o mesmo processo, bastando escolhermos a assinatura na seção de exclusão.

Bom, por hoje é só pessoal.

Até a próxima.

CarlosHPS Webdesigner

Olá, pessoal

Dando sequência à série de artigos Documentos Essenciais para Freelancers Web, mostrarei neste post o quão importante é termos vários modelos de e-mails no dia-a-dia de profissionais como a gente.

Mas antes disso, não esqueça de visualizar a matéria anterior:

1. Documentos Essenciais Para Freelancers Web: Parte 1 – Briefing

Visualizem a situação.

Você acaba de receber um pedido de orçamento do tipo:

Olá. Eu gostaria de fazer um site e preciso de um orçamento. Favor, se tiver interessado, entre em contato o mais breve possível.

Até aí, normal e tranquilo. Como você já leu minha matéria anterior Documentos Essenciais Para Freelancers Web: Parte 1 – Briefing basta responder o e-mail, anexar o briefing e pronto.

Obviamente, você caprichou no texto introdutório, de umas 3 a 5 linhas, explicando sobre o briefing, detalhando informações para que o orçamento do cliente seja bem claro e objetivo.

Contudo, a maré fica ruim e só 2 meses depois você recebe outro pedido de orçamento. Aí você se lembra que mandou um com um texto bacana, profissional e queria utilizá-lo novamente para “economizar” tempo.

Então, é aí que os problemas começam. Quem disse que lembramos para quem, ou qual dia ou até, qual email utilizamos para enviar o briefing de 2 meses atrás.

Eu sei, eu sei…

Ah, Carlos, basta fazermos uma busca interna na nossa caixa de emails enviados e pronto!

Tá, e se você excluiu e aí? Ou se você é que nem eu que recebe mais de 100 emails por dia? E a canseira e o tempo que se perde procurando este bendito e-mail?

É por isso que devemos ter salvos, vários modelos de e-mails com estas respostas para que otimizemos nosso tempos e padronizemos nosso trabalho, pessoal.

Veja alguns exemplos de modelos de respostas de e-mails que podemos usar de acordo com a situação:

Perceberam como podemos ganhar tempo com emails pré-prontos?

Bom, pessoal, no tutorial a seguir, mostrarei como criar e salvar alguns modelos de email utilizando o Gmail, ok?!

E na próxima matéria da série, falarei sobre Propostas e Contratos.

Até breve.

CarlosHPS Webdesigner

Visualizem a situação:

Você foi chamado às pressas para fazer a atualização de um banner institucional de site para um cliente e, por qualquer razão, mesmo que absurda, você deixa seu notebook no escritório, confiando no seu pendrive onde todas as ferramentas essenciais e necessárias para “salvar” o cliente, lá estão.

Mas por ironia do destino ou a real e dolorosa aplicação da Lei de Murphy, seu “pen” resolve não abrir. E agora?

Bom, eu lhe digo:

Seus problemas acabaram

Chegaram os úteis, práticos, versáteis, gratuitos e Excepcionais Editores Online de Imagem e Desenho.

Vejamos 5 deles abaixo:

1 – Pixlr

Esta ferramenta online de edição de imagens é simplesmente “felomenal”. Além de possuir recursos avançados como filtros e organização em camadas, podemos contar ainda com uma versão em português. É isso mesmo: por-tu-guês

2 – Splashup

Uma ferramenta extremamente profissional onde você pode editar várias imagens ao mesmo tempo além de capturar qualquer imagem do seu Flickr, Facebook, Picasa, PC, ou de qualquer endereço da web. Muito bom.

3 – Adobe Photoshop Online

É claro que não poderia deixar de existir uma versão do Photoshop online E é um sistema da própria Adobe. Com um simples cadastro você terá acesso gratuito à ferramenta.

4 – Raven Vector Editor

Precisou utilizar o Corel Draw ou o Illustrator mas não os possui? Bom, agora você pode contar com esta fantástica ferramenta online. O bacana é que no site oficial existem diversos tutoriais para você aprender a utilizá-la.

5 – Sumo Paint

Mais uma ferramenta bacana de edição e criação de vetores como cartões de visitas e logotipos.

Até a próxima.

CarlosHPS Webdesigner

Olá, pessoal

Estou abrindo uma nova série de artigos, cujo tema é:

Documentos Essenciais para Freelancers Web

Procurarei mostrar, esclarecer e disponibilizar alguns modelos de documentos que nunca devem faltar para um profissional “freela” da área de web.

A série está dividida em quatro partes:

1. Briefing - O que perguntar ao cliente para realizar uma boa proposta, um bom contrato de prestação de serviço
2. E-mails – Como criar e configurar e-mails padrão para determinado assunto utilizando o Gmail
3. Proposta e Contratos – Quando fazer ou não uma proposta ou contrato de prestação de serviços
4. Preços - Como calcular e quanto cobrar “justamente” pelos seus serviços

Vamos lá?

Briefing

Como alguns de vocês já devem ter visto, eu falei sobre este tema nos posts:

• Criando um site passo a passo: parte 2
• O que perguntar ao cliente?

E para não ficar repetitivo, recomendo que façam ou re-façam a leitura desses dois aritgos antes de prosseguir neste, ok?!

Bom, a intenção aqui é mostrar a importância de se ter um modelo de brifing pronto para enviar a um cliente em potencial, ou seja, alguém que está interessado em contratar seus serviços e solicita um orçamento. Mas o que “pega” nesta hora, principalmente para os iniciantes, é como e o que perguntar ao cliente para que possa fazer uma proposta que seja mais próxima possível da realidade e necessidade do cliente, juntamente com a capacidade do freelancer.

Sendo assim, um “modelinho” de briefing sempre ajuda nessas horas, não é verdade?! Até mesmo porque, em muitos casos, ele pode ser re-utilizado diversas versas para futuros pedidos de orçamento. Desta feita, um modelo sempre nos faz ganhar tempo.

No arquivo que estou disponibilizando a seguir, vocês verão que ele foi dividido em 7 partes:

	Quem é você? Que trata de perguntas referentes à identificação do cliente e/ou projeto (job).
	Tempo é dinheiro. Questionamentos referentes a prazos e orçamento disponível para o desenvolvimento do job.
	Você e sua empresa. Perguntas que servem para conhecer mais o cliente e/ou sua empresa.
	Seu site na internet. Nesta seção, o intuito é extrair informações do cliente referente ao seu site que já existe na internet para saber em que ele é bom e o que precisa ser melhorado.
	Ações para o seu negócio. Aqui retratamos quais os objetivos, quais as metas do site… conhecemos os concorreentes, etc.
	O público-alvo e a audiência do seu site. Questionamentos sobre qual o perfil dos usuários que acessam ou acessarão o site.
	Funcionalidades e detalhes do seu site. Aqui entra o nosso lado “nerd” de ser…rsrs perguntamos sobre aplicações e funcionalidades que devem ter no site, tecnologias, banco de dados e etc.

No link abaixo vocês encontrarão disponível para download, um modelo de briefing baseado nos tópicos acima. É apenas um modelo onde você pode se inspirar e fazer à sua maneira.

Este arquivo simula o preenchimento do Briefing pelo cliente. Os campos são editáveis, podendo salvar os dados após sua alteração e envia-lo por e-mail ou disponibilizá-lo pela web.

Agora, se você quiser este arquivo personalizado EXCLUSIVAMENTE para você, inserir seu logotipo, criar uma capa, seus dados ou da sua empresa, editar cabeçalho e rodapé, incluir ou extrair mais campos, tornando-a uma excelente apresentação para enviar ao cliente, veja as telas abaixo:

1 – Visualização Geral

Fig. 01: Exibição geral do briefing em PDF

2 – Balões Autoexplicativos de Orientação ao Preenchimento

Fig. 02: Balões Autoexplicativos de Orientação ao Preenchimento

3 – Criação e/ou Personalização de Menus Suspensos

Fig. 03: Criação e/ou Personalização de Menus Suspensos

4 – Configuração de Cabeçalho e Rodapé

Fig. 04: Configuração de Cabeçalho e Rodapé

5 – Inserção do Seu Logotipo

Fig. 05: Inserção do seu logotipo

6 – Inserção do Seu E-mail para Contato com o Cliente

Fig. 06: Inserção do seu email com link

7 – Barras de Rolagem Automáticas

Fig. 07: Criação de campos com barras de rolagem automáticas

8 – Campos em Branco e Prontos para Enviar ao Cliente

Fig. 08: Campos em Branco e Prontos para Enviar ao Cliente

9 – Integridade e Confiabilidade do Arquivo

Fig. 09: Integridade e confiabilidade do arquivo

10 – Mais de 20 Opções de Cores

Fig. 10: Opções de Cores

Gostou?

Então, adquira  agora:

Formas de Pagamento

Ainda com Dúvidas?

Poste-as no formulário abaixo.

Até a próxima.

CarlosHPS Webdesigner

Olá, pessoal

Inaugurando outra seção do blog, falarei aqui de diversas ferramentas úteis voltadas para o CSS (de preferência, gratuitas) que servirão de suporte tanto para programadores quanto para designers web.

E para começar, separei 5 destas ferramentas que não podem ficar de fora dos “favoritos” do nosso navegador, não é verdade

1 – CSS Type Set

Você que está iniciando no CSS ou esqueceu algum atributo, classe de texto da linguagem, esta é uma excelente ferramenta. Você digita o texto na caixa esquerda; abaixo você escolhe tipo de fonte, tamanho, cores, espaçamentos e, à direita, a formatação do CSS é visualizada instantaneamente.

2 – CSS Sprites Generator

Lembram do tutorial Como Criar um Topo de Site com Menu CSS: Parte 2, onde falei e mostrei esta técnica utilizando somente uma imagem? Uma das maiores dificuldades é saber identificar corretamente o posicionamento de cada item em uma única imagem. Com esta ferramenta, os problemas acabaram

Se exportarmos os ícones, um a um, e inserirmos nesta aplicação, ela, além de criar uma imagem única, ainda por cima cria o código css “background-position” para cada um, o que facilita surpreendentemente o processo. Sem falar que podemos baixar o arquivo final e visualizar o resultado. Este eu recomendo demais.

3 – Button Maker Online

Utilize esta ferramenta online para criar facilmente e visualmente os botões popularmente conhecidos como “XHTML” micro (80×15). Você também pode optar pelo maior botão 88×31 pixel. Confira!

4 – Ribbon Rules Generator

Vocês já viram que o novo CarlosHPS Blog tem como imagem de fundo, linhas baseadas no tom de roxo? Pois então, com a Web 2.o as “Ribbon Rules”, que são essas linhas, vieram para ficar. Esta ferramenta cria, baseado em um ou mais cores, a imagem e o código CSS que servirá para inserir esta técnica em seus projetos web.

5 – CSS Compressor

Use esse utilitário para comprimir o seu CSS, aumentar a velocidade de carregamento e economizar largura de banda também. Você pode escolher entre três níveis de compressão, dependendo de como você deseja que o CSS comprimido fique legível por conta do grau de compressão. O modo “Normal” deve funcionar bem na maioria dos casos, criando um bom equilíbrio entre os dois.

Até a próxima, pessoal.

CarlosHPS Webdesigner

Pessoal,

Neste tutorial veremos que, aplicando ferramentas simples do Fireworks, conseguimos criar um ícone bacana do RSS.

Pré-Requisitos

• Familiaridade com o Fireworks CS3 ou CS4.

Objetivos

• Criar um ícone RSS utilizando o Fireworks

1º  Passo – Criando a Base

Para começar, criaremos um arquivo com as dimensões 300 x 300 pixel e um retângulo de 250 x 250 pixel.

Em seguida, aplicaremos uma textura (linhas verticais) e um preenchimento gradiente radial como na imagem abaixo:

Fig. 01: Dimensionamento e textura do ícone

2º – Criando o Símbolo do RSS

Existem várias técnicas para criarmos o logo, o símbolo do RSS. Como meu intuito é usar algumas ferramentas

“escondidas” do Fireworks, vamos lá.

A ferramenta é a Doughnut, popularmente conhecida como “rosquinha”. Por que será? rsrs

Fig. 02: Ferramenta Doughnut

Ela cria um círculo vazado, ou seja, com um vão, um buraco no meio. mas aí você se pergunta como a gente fará para criar os 1/4 de arcos que representam o símbolo do RSS?

Vejamos a imagem sequencial a seguir:

Fig. 03: Criando o círculo

No nosso caso faremos dois círculos, um maior que o outro.

O detalhe é que faremos em um arquivo separado e depois inseriremos no arquivo do ícone, ok?!

Fig. 04: Criação dos círculos do logo RSS

Uma dica boa para centralizar tudo, Seleciona os círculos (CTRL + A) e preciona, CTRL + 2 para centralizar horizontalmente e CTRL + 5, verticalmente

Agora, vamos fazer os devidos “cortes” para deixarmos apenas 1/4 de círculo visível. Para isso utilizaremos as linhas-guias e retângulos.

Fig. 05: Primeiro corte

E, selecionando o retângulo e os círculos, vamos aplicar um corte, acessando o menu Modify > Combine Paths > Punsh, e o resultado será este:

Fig. 06: Resultado do 1º corte

IMPORTANTE!

O retângulo deve estar acima dos círculos senão o tipo de corte será diferente.

E o mesmo procedimento faremos com o restante, deixando apenas o que desejamos.

Fig. 07: Resultado do 2º corte

3º – Inserindo o Símbolo do RSS

Agora, para finalizar, basta copiarmos e colarmos o resultado dos cortes acima, deixarmos com a cor branca, colocarmos um círculo menor, o texto e aplicarmos uma leve sombra.

E eis o resultado final:

Resultado Final do Ícone RSS

Até a próxima, povos e povas

CarlosHPS Webdesigner

Copie, mas Indique:Termos de Uso – Copyright

Olá, pessoal

Não é verdade que um bem elaborado background (imagem de fundo) associado ao Twitter, causa uma excelente impressão, quando já demonstra, já passa qual o estilo da pessoa, o que ela faz e o que se pode esperar de seus twittes?

Então, neste tutorial, veremos, em primeira mão, como eu desenvolvi o background do meu Twitter.

Pré-Requisitos

• Familiaridade com o Fireworks CS3 ou CS4

Objetivos

• Criar um background personalizado para o Twitter

Conteúdo

1º  Passo – Aplicando a Dimensão Correta

Analisando bem a interface gráfica dos perfis do Twitter, onde os twittes são publicados, juntamente com a barra lateral, ocupam aproximadamente 763 px de largura. Para o background percebe-se as seguintes divisões e dimensões:

Fig. 01: Dimensões

Minha intenção é criar um background para resoluções de no mínimo 1280 x 1024px. Vale a pena lembrar que devemos criar uma imagem em 72 dpi e com, no máximo, 800 KB.

No meu caso aqui, minha intenção é divulgar quem eu sou e o que faço na lateral esquerda e na direita, inserir alguns ícones das tecnologias, linguagens, aplicativos de que domino ou utilizo no meu dia-a-dia de trabalho.

Então, criemos um arquivo nas dimensões 1280 x 1024 px, mas utilizaremos a área útil como sugerido acima.

2º Passo – Criando a Textura e o Efeito do Background

Aqui vai entrar o gosto de cada um. Eu tenho minhas preferências, principalmente pela cor verde.

Um dia desses uma amiga minha me questionou:

Carlos, por que você gosta tanto da cor verde?

Acredita que nem soube direito o porquê? Depois que aprendi sobre a influência que as cores têm sobre as pessoas e os ambientes, aí sim, descobri o lado bom do verde .O detalhe é que meu logotipo tem e teve verde desde o início e, para realçar, gosto de mesclar tons de escuro do verde, branco e um cinza ou preto. É o que faremos agora.

Vamos criar um retângulo com as mesmas dimensões do arquivo (1280 x 1024px), aplicar um preenchimento gradiente radial a começar do canto superior esquerdo até um pouco ao centro e inserir um textura como é mostrado na imagem a seguir:

Fig. 02: Preenchimento do background

Uma outra opção é aplicar texturas externas, que não são “nativas” do Fireworks, mas que podem ser incorporadas a ele. Abaixo vão algumas texturas:

Textura de rayas by ~photosoma

Vintage Valentine Paper by ~Aramisdream

927 by ~redesiuk

Escolhida a textura, vamos criar um novo retângulo com as mesmas dimensões do anterior e colocar sobre ele.

Em seguida, com este novo retângulo selecionado, aplicaremos a nova textura:

Fig. 03: Aplicando textura

E, na imagem abaixo, vemos o resultado com e sem a aplicação de mais um efeito: Blend Mode > Overlay, localizado na barra Properties.

Fig. 04: Aplicação do Blend Mode > Overlay

E, para finalizarmos, aplicaremos um fade neste retângulo pelo menu Commands > Creative > Auto Vector Mask, isso para o FW CS4, para o CS3, acesse o menu Commands > Creative > Fade Image:

Fig. 05: Aplicação de transparência com "Fade"

E o resultado até aqui é este:

Fig. 06: Resultado parcial

3º Passo – Inserindo Logotipo e Informações Gerais

Como nosso foco é divulgar um Webdesigner Freelancer, vamos colocar sua logo e um resumo do profissional e dos serviços que ele presta. E tudo isso vai ficar na lateral esquerda, como mostrado na imagem abaixo:

Fig. 07: Resultado parcial

4º Passo – Enviando o Background para o Twitter

Background criado, agora vamos inseri-lo ao Twitter. Obviamente, estando logado, acessemos Settings > Design > Change background image e selecionemos a nossa imagem que deve ter sido exportada num formato GIF, PNG ou JPG, lembrando que não poderá ultrapassar 800 KB.

Fig. 08: Escolha do background

Clicando depois em save changes, teremos:

Fig. 09: Resultado parcial

5º Passo – Ajustando as Cores do Twitter

E para finalizarmos, é preciso melhorar a combinação de cores do Twitter com o novo background, não acham?

Pois bem, vejamos como acertar nesta combinação, criando uma paleta de cores:

Fig. 10: Paleta de cores

E o resultado é:

Fig. 11: Resultado final

Até a próxima, pessoal.

CarlosHPS Webdesigner

Webtutoriais:C3AD5E22

Copie, mas Indique:Termos de Uso – Copyright

Como prometido, lá vai mais uma leva de bons ícones gratuitos para serem usados e abusados…rsrs no bom sentido, claro.

Confira os que já foram publicados:

Ícones da Semana #1

1 – Tema: Music Icon Pack / Autor: Sallee Design

Precisando de ícones temáticos musicais? Esses são muito bons. Vale a pena conferi-los.

2 – Tema: Little Icons Pack / Autor:  ncrow

São 5 ícones no formato PNG e dimensões 45×45 pixel. Simplesinhos, mas são bem elaborados.

3 – Tema: Juicy Fruit icon set / Autor:  Sallee Design

Olha o nosso colega Sallee arrebentando outra vez. Agora além da disponibilização dos ícones gratuitamente, o cara ainda disponibilizou o arquivo PSD pra galera ver como ele fez. Excelente!

4 – Tema: Antique icons / Autor:  paradis24434

São 33 ícones estilo antigo e com objetos de antiquário mesmo, nos formatos PNG e ICO. Muito bom gosto.

5 – Tema: Android Application Icons Set / Autor: bharathp666

15 ícones estilo futurista no formato PNG. Bem legais.

6 – Tema: Droped Box icons / Autor:  MDGraphs

Vejam um ícone diferente para quem deseja usá-la para identificar alguma coisa para download. Bem bolado.

7 – Tema: Mobile Icon Set / Autor:  Web Icon Set

10 ícones para aplicações e dispositivos móveis.

8 – Tema: Cute Blogging Icon Set / Autor:  Web Icon Set

Mais 10 ícones para blogs, estilo “cute-cute” rsrs. Muito bem desenvolvidos. Vale a pena baixar.

9 – Tema: Application Icon Set / Autor:  Web Icon Set

E como eu gostei dos ícones desse site, aí vai mais um conjunto de ícones voltados para aplcações em geral. São 10 em PNG e diversas dimensões.

10- Tema: Crumpled Paper Icons Natural Wonders / Autor:  Icons etc

Esse pessoal trabalhou. Vejam os ícones com textura de papel e estilo “natura”. Muito bons, viu.

Olá, pessoal

Inaugurando também a seção SUPER TUTORIAIS, colocarei aqui inúmeros artigos do “estrangeiro” onde os “feras do Photoshop” mostram muitas técnicas para manipulação de textos e imagens. Vale a pena conferir.

Relacionei alguns, de dezenas de tutorais para a criação de textos de excelente qualidade, utilizando o Photoshop. É de impressionar mesmo o quanto esta ferramenta, nas mãos de quem realmente a domina, pode fazer com simples textos.

Mas isso vai além…

O que veremos aqui é a combinação perfeita da aplicação da tipografia em sua essência que, nada mais é que uma técnica de organização e construção de textos aliada a um dos softwares de imagens mais popular do planeta: o Photoshop.

1 – Tema: Dramatic Text on Fire Effect in Photoshop

Na boa… vamos combinar: que efeito fantástico é esse gente! Um dos melhores do gênero que já vi. Altamente profissional e realista. Labaredas de fogo. Muito fera.

2 – Tema: Create a 3D Flowery Text Effect

Esta técnica englobou a aplicação de efeitos tridimensionais aos texto com a aplicação de brushes florais. Excelente!

3 – Tema: Realistic Golden Text in Pixelmator

Quem nunca desejou criar um texto com efeito dourado, de ouro? Pronto! Agora saberá como fazer.

4 – Tema: Water Text Effect

Um efeito muito bacana e, pelo que vi, muito simples de se fazer é o efeito de água sobre uma superfície.

5 – Tema: Super Easy Neon Style in Photoshop

Um dos efeitos mais legais que já vi e simples de fazer é o de neon. Vale à pena conferir.

Até a próxima.

CarlosHPS Webdesigner

Olá, pessoal

Na primeira parte deste tutorial, criamos a base do nosso topo, inserindo alguns efeitos simples, porém poderosos quanto ao resultado final. Em sequência, complementaremos o topo colocando o menu principal e dois ícones para o RSS e o Twitter e, em seguida, aplicaremos a técnica sprites com o css para dar “vida” a este menu e ícones, ok?!

Vamos lá, então.

Pré-Requisitos

• Familiaridade com o Fireworks CS3 ou CS4.
• Familiaridade quanto às linguagens [x]html e css.
• Facilidade quanto ao manuseio de algum editor de texto (bloco de notas) ou editor html (Dreamweaver, Notepad++, etc)
• Realizar o download da fonte e dos ícones abaixo:

Download da fonte: Asphyxiate

Download dos ícones RSS e Twitter

Objetivos

• Criar o menu css aplicando a técnica sprites.

PARTE 01 – Criação do Topo do Site

1º  Passo – Criando os Itens do Menu e Inserindo os Ícones

Pessoal, no arquivo-final disponibilizado na primeira parte, todo o conteúdo foi desenvolvido em uma pasta chamada layout. Como vamos trabalhar com outras ações, devemos criar um segunda chamada menu. Tudo isso é para mantermos organizado nosso trabalho e termos maior facilidade quanto à manipulação dos novos itens a serem criados.

Fig. 01: Organização das camadas

Com isso, poderemos criar os itens do menu como mostrado na imagem abaixo:

Fig. 02: Itens do menu

2º Passo – Exportando Itens do Menu

Terminado a inserção dos itens, agora deveremos transformá-los em apenas uma imagem para, em seguida, exportamos.

Para isso, devemos selecionar todos os itens e agrupá-los (CTRL+G). Em seguida, criaremos um novo arquivo (CTRL+N) e colaremos os itens copiados. Vale ressaltar que o fundo deste novo arquivo deve estar transparente.

Fig. 03: Criação da imagem master

Agora, para exportarmos com o fundo transparente, que poderá ser no formato GIF ou PNG, acessemos o menu File > Export Wizard… Vejamos as telas abaixo:

Fig. 04: Exportação no formato PNG com fundo transparente

Devemos dar um nome para o arquivo e, como sugestão, menu.png.

Pronto, pessoal…

Aplicando esta mesma técnica, vamos exportar também o topo, mas sem os itens do menu e ícones com o nome topo.png.

3º Passo – Preparando os Arquivos HTML e CSS Iniciais

Como sempre, vamos criar uma pasta onde armazenaremos os arquivos e imagens a serem utilizados para a montagem do topo e do menu.

Fig. 05: Organização dos arquivos

Nosso arquivo HTML inicial será este:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CarlosHPS Webdesigner | Como Criar um Topo de Site com Menu CSS: Parte 2</title>

<link href="menu-estilo.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body><div id="pagina">

<div id="topo">

<ul id="menu">

<li id="rss"><a href="#">RSS</a></li>

<li id="twitter"><a href="#">Twitter</a></li>

<li id="home"><a href="#">Home</a></li>

<li id="portfolio"><a href="#" >Portifólio</a></li>

<li id="contato"><a href="#">Contato</a></li>

</ul>

</div><!-- fim da div topo-->

</div>

</body>

</html>

E o css:

/*----------------------------------------------------------
Configurações Gerais
----------------------------------------------------------*/
*{
margin: 0; /*Zera todo o espaçamento EXTERNO entre as DIV's*/
padding: 0; /*Zera todo o espaçamento INTERNO das DIV's*/
}
/*----------------------------------------------------------
Configurações da div PAGINA que receberá a imagem de fundo
----------------------------------------------------------*/
#pagina{
background-image: url(imagens/topo.jpg); /*endereçamento da imagem*/
background-repeat: no-repeat; /*evita a repetição da imagem*/
background-position: top center; /*posicionamento da imagem: topo e centro*/
background-attachment: fixed; /*fixando a imagem de fundo*/
width: 960px; /*largura da div*/
height: 400px; /*altura da div*/
}
/*----------------------------------------------------------
Configurações da ID da lista TOPO que receberá os itens do menu
----------------------------------------------------------*/
#topo{
position: relative; /*posicionamento relativo da div*/
left: -35px; /*distanciamento da margem esquerda relativa a div*/
top: 256px; /*distanciamento do topo relativo a div*/
}

Com isso, teremos até aqui o seguinte resultado parecido com a imagem abaixo. Caso não esteja exatamente igual, não se preocupe, pois isso variará de acordo com o navegador e a sua versão.

Fig. 06: Rasultado parcial

4º Passo – Alinhando e Convertendo Listas em Menus

Vamos, agora, retirar os marcadores das listas, alinharmos cada lista em seu lugar e colocarmos uma na horizontal.

/*----------------------------------------------------------
Configurações dos itens do menu
----------------------------------------------------------*/
ul#menu{
width: 672px; /*largura do menu*/
height: 76px; /*altura do menu*/
margin: 0 auto; /*centraliza o conteúdo do menu*/
list-style: none; /*retira os marcadores dos itens do menu*/
text-align: center; /*centraliza o conteúdo do menu para IE 5+*/
}
ul#menu li{
display: inline; /*deixa todos os itens da lista na horizontal*/
}

E o resultado até aqui, será este:

Fig. 07: Resultado parcial - alinhamento das divs

5º Passo – Formatando os Links

Chamamos de Imagem Master a imagem que contém todas as ações dos menus. Lembram que a exportamos (Fig. 03) no início do tutorial?

Pois bem, trataremos os links apenas com duas ações: link (que é a configuração inicial do link) e hover (que é a configuração quando o mouse está sobre o link).

De acordo com a imagem abaixo, a primeira sequência de imagens se refere ao LINK e a sequência debaixo, ao HOVER e cada uma tem uma altura diferenciada devido ao tipo e formatação do link.

Fig. 08: Alturas do links

Com este detalhes, podemos criar as formatações iniciais para os links:

ul#menu li a{
height: 49px; /*altura de todos os links do menu*/
float: left; /*flutuação à esquerda*/
text-indent: -5000px; /*recuo para posicionar o texto dos links*/
}
ul#menu li a:hover{
height: 76px; /*altura do link quando o mouse estiver sobre o mesmo*/
}

6º Passo – Posicionando a Imagem Master

Agora que a “brincadeira” vai ficar legal

Links criados e menu formatado, agora vamos trabalhar o posicionamento da imagem master de maneira que ela fique exatamente localizada sob cada link. Para isso, precisamos trabalhar com uma certa precisão, a posição x e y de cada link representado pela imagem.

Não entendeu nada? rsrsrs Vamos à prática.

Fig. 09: Posicionamento dos links na imagem master

Percebamos que todas as áreas da imagem, traçando linhas-guias nas extremidades delas podemos ter, com exatidão, suas dimensões. Além do espaço entre elas. Mas o principal é traçarmos uma linha imaginária, como se fosse um eixo cartesiano (lembra disso?), vejamos abaixo:

Fig. 10: Posicionamento através dos eixos x e y

Com base na lógica acima, a configuração do nosso primeiro link, o RSS, ficará da seguinte forma:

ul#menu li#rss a{
width: 36px; /*largura do ícone RSS*/
background: url(imagens/menu.png) no-repeat 0px 0px; /*inserção da imagem que não se repetirá e se posicionará em x=0 e y=0*/
margin-right: 17px; /*distância entre o ícone RSS e o do Twitter*/
}
ul#menu li#rss a:hover{
background: url(imagens/menu.png) no-repeat 0px -70px; /*inserção da imagem que não se repetirá e se posicionará em x=0 e y=-70*/
}

Simples, não?

E com o ícone do Twitter, teremos:

ul#menu li#twitter a{
width: 50px;
background: url(imagens/menu.png) no-repeat -53px 0px;
margin-right: 30px;
}
ul#menu li#twitter a:hover{
width: 50px;
background: url(imagens/menu.png) no-repeat -53px -70px;
margin-right: 30px;
}

Fig. 11: Formatação do link:hover

É isso aí, pessoal.

Obedecendo a mesma sequência lógica e devidos ajustes, nosso código css final deverá ficar assim:

/*----------------------------------------------------------
Configurações Gerais
----------------------------------------------------------*/
*{
margin: 0; /*Zera todo o espaçamento EXTERNO entre as DIV's*/
padding: 0; /*Zera todo o espaçamento INTERNO das DIV's*/
}
/*----------------------------------------------------------
Configurações da div PAGINA que receberá a imagem de fundo
----------------------------------------------------------*/
#pagina{
background-image: url(imagens/topo.jpg); /*endereçamento da imagem*/
background-repeat: no-repeat; /*evita a repetição da imagem*/
background-position: top center; /*posicionamento da imagem: topo e centro*/
background-attachment: fixed; /*fixando a imagem de fundo*/
width: 960px; /*largura da div*/
height: 400px; /*altura da div*/
}
/*----------------------------------------------------------
Configurações da ID da lista TOPO que receberá os itens do menu
----------------------------------------------------------*/
#topo{
position: relative; /*posicionamento relativo da div*/
left: -35px; /*distanciamento da margem esquerda relativa a div*/
top: 256px; /*distanciamento do topo relativo a div*/
}
/*----------------------------------------------------------
Configurações dos itens do menu
----------------------------------------------------------*/
ul#menu{
width: 672px; /*largura do menu*/
height: 76px; /*altura do menu*/
margin: 0 auto; /*centraliza o conteúdo do menu*/
list-style: none; /*retira os marcadores dos itens do menu*/
text-align: center; /*centraliza o conteúdo do menu para IE 5+*/
}
ul#menu li{
display: inline; /*deixa todos os itens da lista na horizontal*/
}
ul#menu li a{
height: 49px; /*altura de todos os links do menu*/
float: left; /*flutuação à esquerda*/
text-indent: -5000px; /*recuo para posicionar o texto dos links*/
}
ul#menu li a:hover{
height: 76px; /*altura do link quando o mouse estiver sobre o mesmo*/
}
ul#menu li#rss a{
width: 36px; /*largura do ícone RSS*/
background: url(imagens/menu.png) no-repeat 0px 0px; /*inserção da imagem que não se repetirá e se posicionará em x=0 e y=0*/
margin-right: 17px; /*distância entre o ícone RSS e o do Twitter*/
}
ul#menu li#rss a:hover{
background: url(imagens/menu.png) no-repeat 0px -70px; /*inserção da imagem que não se repetirá e se posicionará em x=0 e y=-70*/
}
ul#menu li#twitter a{
width: 50px;
background: url(imagens/menu.png) no-repeat -53px 0px;
margin-right: 30px;
}
ul#menu li#twitter a:hover{
width: 50px;
background: url(imagens/menu.png) no-repeat -53px -70px;
margin-right: 30px;
}
ul#menu li#home a{
width: 103px;
background: url(imagens/menu.png) no-repeat -147px 0px;
margin-right: 15px;
}
ul#menu li#home a:hover{
width: 150px;
background: url(imagens/menu.png) no-repeat -120px -73px;
margin-right: -5px;
margin-left: -27px;
}
ul#menu li#portfolio a{
width: 165px;
background: url(imagens/menu.png) no-repeat -277px 0px;
margin-right: 25px;
}
ul#menu li#portfolio a:hover{
width: 170px;
background: url(imagens/menu.png) no-repeat -277px -73px;
margin-right: 20px;
}
ul#menu li#contato a{
width: 156px;
background: url(imagens/menu.png) no-repeat -475px 0px;
}
ul#menu li#contato a:hover{
width: 200px;
background: url(imagens/menu.png) no-repeat -475px -73px;
}

Bom, por hoje é só.

CarlosHPS Webdesogner

Webtutoriais:8A60DFD2