No tutorial de hoje veremos como criar um topo de site estilizado (1ª parte) e aplicar a técnica de sprites CSS para a navegação (2ª parte). Sendo assim, dividiremos esta postagem em duas partes, ok?!

Pré-Requisitos

• Familiaridade com o Fireworks CS3 ou CS4.
• Download das imagens utilizadas no tutorial.

Objetivos

• Criar um topo de sites estilizado.

PARTE 01 – Criação do Topo do Site

1º  Passo – Dimensões e Importação da Imagem 1

Vamos ser bastante generosos. Criemos um arquivo com as dimensões 960 x 400 pixel, com cor de background (fundo) #000000.

Em seguida, vamos importar (CTRL+R ou File > Import) a nossa primeira imagem (bloco de notas). Após a importação e com ele selecionada, vamos redimensioná-la proporcionalmente, evitando que a mesma fique distorcida. Para isso, aplicaremos o comando Transform Numeric (transformação numérica), através do atalho CTRL + SHIFT + T ou pelo menu Modify > Transform > Nemeric Transform…

Apliquemos a seguinte transformação:

Aposto que alguns de vocês exclamaram:

Uai, oxente, bah tchê, vixi, nooooossa… a imagem sumiu!

Muita calma nessa hora…rsrs

O problema é que ao redimensionarmos uma imagem um tanto grande, ela “some” da nossa área de edição. Mas a solução está a seguir:

2º Passo – Inserir e Trabalhar com a Imagem 2

Vamos trabalhar agora a imagem da caneca de café que ficará sobre o bloco de notas.

Primeiramente, vamos abri-la (CTRL+O). Se você estiver vendo apenas um fundo branco, pressione CTRL + 0 (zero) que a imagem caberá totalmente na área de edição do Fireworks.

Agora vamos redimensioná-la (CTRL+SHIF+T) para 800 x 531 pixel.

Em seguida, com a varinha mágica (W) vamos retirar o fundo branco da imagem. Lembrando que, existem outras técnicas mais precisas para retirarmos o fundo, mas como a imagem não é complexa, esta ação é a mais indicada.

E por fim, aplicando o velho e conhecido CTRL + C e CTRL+V, insiramos a caneca sobre a imagem do bloco de notas tratado anteriormente.

3º Passo – Inserindo a Mancha de Café Sob a Caneca

Bom, uma montagem bem bacana para o nosso topo é a inserção de uma mancha de café sob a caneca. Aí que trataremos a imagem 3.

Como já aprendemos como redimensionar e retirar o fundo da imagem, aplicaremos este mesmo procedimento para a imagem da mancha, tendo o seguinte resultado:

Eu nem preciso dizer que está meio grosseiro essa mancha, não é verdade? Então vamos aplicar um Blend Mod > Multiply para deixá-la mais real.

Agora melhorou.

4º Passo – Refinamento do Topo

Para finalizarmos a 1ª parte deste tutorial, vamos fazer um refinamento no topo, inserindo uma borda e recortando a imagem para termos o resultado ideal.

E o resultado final deverá ser este:

Após eu ter publicado esta imagem final, com certeza terá gente que vai perguntar:

Carlos, como você fez o efeito do seu logotipo?

É bem simples, pessoal.

Com a logo selecionada (a original do blog são das cores roxo e verde), basta aplicarmos um tratamento de matiz e saturação na mesma.

Falei grego? rsrs

Seguinte:

É isso, povo.

Cadastre-se no blog e faça o download do arquivo final em PNG.

Na 2ª e última parte deste tutorial, criaremos o menu e faremos ele funcionar bem no CSS.

Até lá.

CarlosHPS Webdesigner

Não deixem de me fazer uma visita:

• BLOG: www.carloshps.com.br/blog
• CURSOS ONLINE: www.carloshps.com.br/cursos
• PORTFÓLIO: www.carloshps.com.br/

Apresentação

Salve-salve Fireworkseiros de plantão!

Neste tutorial veremos uma excelente aplicação do Fireworks para apresentação de um projeto, geralmente um protótipo, ao cliente em formato PDF em poucos cliques.

A idéia é criar links dentro do próprio projeto que levam o cliente a outra página contida no mesmo arquivo que foi gerado em PDF, dando-lhe uma sensação de estar navegando em um site que na verdade, ainda nem foi publicado na Internet.

Pré-Requisitos

Facilidade quanto ao manuseio do Fireworks CS4

Objetivo

Gerar um arquivo PDF com as páginas (e links) de um protótipo criado pelo Fireworks CS4

Conteúdo

1º Passo – Criando as Páginas do Protótipo

Vamos aproveitar o layout disponiblizado para download no tutorial Criando Layout – Empresa de Tecnologia: Parte 2,  para facilitar o entendimento deste tutorial.

Com o arquivo aberto (obviamente ), devemos ter visível no painel à direita, a seção Pages (F5) para renomear a página atual e criar uma duplicação. Para dar um nome a página, basta clicarmos duas vezes sobre o nome da mesma e trocarmos, como sugestão, para HOME.

Fig. 01 - Nomeando página

A intenção é aproveitarmos os links do layout e criarmos (só a efeito de exemplificação) as páginas internas no intuito de apresentarmos o cliente. E para reaproveitarmos a “home”, vamos criar mais 4, dando-lhes os respectivos nomes:

• A Empresa
• Serviços
• Suporte
• Fale Conosco

2º Passo – Editando as Páginas Duplicadas

Só para ilustrar, pois o objetivo deste tutorial é outro, fiquemos à vontade para editar as páginas duplicadas. Para isso é só clica na página indicada e fazer sua edição. As minhas ficaram assim:

Fig. 03: Edição das páginas internas

3º Passo – Criando Links Internos

Páginas criadas e editadas, agora elas estão prontas para serem vinculadas através de links internos. Então, voltemos à página “HOME” para que, a partir delas, criemos tais vínculos no menu.

Utilizando a ferramenta Rectangle Hotspot Tool, selecionemos a área onde desejamos criar um link, e no Painel Properties, façamos o direcionamento como mostrado na imagem a seguir:

Fig. 04: Criando links

Com este mesmo procedimento, façamos todos os outros links para as outras páginas e, em todas elas, não esqueçamos de criar um link para colocar no logotipo das páginas, com link para a “HOME”.

4º Passo – Exportando o Projeto em PDF

Concluída a etapa de criação de links, agora vem a parte mais fácil: criar o arquivo PDF.

Para isso, acessemos o menu File > Export e configuremos como na imagem a seguir:

Fig. 05: Exportação em PDF

Bom, pessoal, agora é só abrir o arquivo e conferir os links.

CADASTRE-SE no blog e faça o download do arquivo final em PDF.

A dica que eu dou é que vocês criem uma capa de apresentação, cabeçalho e rodapé também para ficar bem apresentável.

Até a próxima.

CarlosHPS Webdesigner

Não deixem de me fazer uma visita:

• BLOG: www.carloshps.com.br/blog
• CURSOS ONLINE: www.carloshps.com.br/cursos
• PORTFÓLIO: www.carloshps.com.br/

O detalhe aqui é que não utilizaremos uma ferramenta especí­fica para produções impressas como o Corel Draw ou o Indesign, mas sim, nosso velho e multi-uso Fireworks e, ao final, exportaremos o cartão em um formato compatí­vel, tudo bem?!

Pré-Requisitos

• Facilidade quanto ao manuseio do Fireworks.

Objetivos

• Criar um cartão de visitas profissional utilizando o Fireworks.

Conteúdo

1º Passo – Configurando as Dimensões

Inicialmente, aqui no Brasil, as gráficas trabalham com diversos formatos e dimensões para cartões de visitas, mas o padrão são os de 9.5cm x 5.5cm. E como estamos utilizando o Fireworks, devemos configurar sua resolução para 300 pixel/Inch afim de melhorar no momento da impressão do cartão.

Fig. 01: Dimensões e resolução do cartão

Só para ressaltar, mesmo colocando as dimensões em centímetros no momento da criação do novo arquivo, automaticamente o Fireworks converte para pixel. Sendo assim, 9.5 x 5.5 cm é a mesma coisa que 1122 x 649 pxiel.

2º Passo – Configurando as Linhas-Guias

Para os “novatos” com o Fireworks, é preciso ativar as réguas pelo menu View > Rulers (Ctrl + Alt +R). E para criar as linhas-guias, basta clicar sobre a régua, segurar e arrastar para a área de desenho.

Em um processo de criação de um cartão de visitas em uma gráfica, é preciso que definamos duas áreas: a de corte e a de segurança. Estas áreas são delimitadas pelas linhas-guias. Uma área de corte ideal, fica entre 3mm a 5mm da área de segurança. Portanto, faremos aqui com de 3mm, ok?!

Fig. 02: Linhas-Guia

Para deixarmos as linhas-guia exatamente onde queremos, basta darmos dois cliques sobre as mesmas e determinarmos suas posições. Sendo assim, criemos as seguintes marcações:

Horizontal

0 – 35 – 1087 – 1122

Vertical

0 – 35 – 614 – 649

Fig. 03: Posicionamento das linhas-guia.

3º Passo – Configuração do Background (fundo): Textura

Criaremos um fundo meio estilo Windows Vista para este cartão. Para isso, as imagens utilizadas estão disponíveis logo abaixo:

Downoad da Textura

Importemos (Ctrl + R) a Textura-1.jpg e a alinhemos como na imagem abaixo:

Fig. 04: inserção das guias

Agora, para desfocá-la, vamos utilizar o filtro Blur, acessado em Filters > Blur > Gaussian Blur.

Fig. 05: Filtro Gaussian Blur

O resultado obtido é este:

Fig. 06: Aplicação do Gaussian Blur

Em seguida, vamos criar um retângulo com as mesmas dimensões do cartão para refinarmos o background, aplicando em seguida, um preenchimento gradient radial nos tons de azul:

Fig. 07: Retângulo com preenchimento Gradient Radial

Atenção!
A camada (layer) que contém o retângulo azul deve estar sobre a imagem inserida anteriormente.

E para concluirmos esta parte, aplicaremos um Blend mode > Hard Light neste retângulo e com Opacidade (opacity) 85%, obtendo o seguinte resultado:

Fig. 08: Aplicação do Blend mode.

4º Passo – Configuração do Background: Curvas

Pronto! Já preparamos a textura do nosso cartão. Agora iremos criar e estilizar algumas linhas curvas, resultando em um efeito bem moderno e diferenciado.

Com a ferramenta Pen Tool, façamos uma curva como mostrada a seguir:

Fig. 09: Criação de um linha curva

Em seguida, apliquemos um preenchimento grandiente, retiremos a borda e incluamos mais um Blend mode como na imagem abaixo:

Fig. 10: Formatação da curva

E com isso, teremos o seguinte efeito:

Fig. 11: Resultado da aplicação de efeitos à curva

E, utilizando esta mesma técnica, alternando as opacidades e Blends modes, façamos várias curvas e distribuamos pelo cartão. Minha distribuição ficou assim:

Fig. 12: Resultado das curvas

5º Passo – Inserindo o Logotipo

Façamos agora um retângulo que servirá de “cercadura” para a inserção do logotipo. Utilizei o meu. Fique à vontade para usar o seu ou outro.

Neste retângulo (rotacionado), apliquemos as seguintes formatações:

Fig. 13: Inserção do logotipo

6º Passo – Inserção dos Textos

E para finalizarmos, basta inserirmos os dados que conterão no cartão de visitas, mandar para a gráfica e começar a distribuir

E como resultado final, vejamos:

Fig. 14: Resultado final

7º Passo: Download

CADASTRE-SE no blog e faça o download do arquivo final em PNG:

Um grande abraço e até a próxima.

CarlosHPS Webdesigner

Não deixem de me fazer uma visita:

• BLOG: www.carloshps.com.br/blog
• CURSOS ONLINE: www.carloshps.com.br/cursos
• PORTFÓLIO: www.carloshps.com.br/

Apresentação

Salve-salve Fireworkseiros de plantão!

Vamos à conclusão deste layout?!

Pré-Requisitos

• Ter concluído a 1ª parte deste tutorial. Se não, clique aqui.
• Facilidade quanto ao manuseio do Fireworks CS3/CS4.

Objetivo

Concluir um layout para uma empresa de tecnologia utilizando o Fireworks.

Conteúdo

1º Passo – Barra de Separação

Observando bem o layout final da 1ª parte deste tutorial, é percebido a necessidade de criarmos uma divisória entre o conteúdo principal e o secundário. Podemos fazer de diversas maneiras: criando caixas com cores diferenciadas, gradientes, bordas…

Mas neste caso, utilizaremos uma simples e eficiente, barra de separação.

Então, vamos criar dois retângulos com as dimensões 940 x 1 pixel cada, nas cores de preenchimento, #FFFFFF e #D3DDE4.

Fig. 01: Barras divisórias

Aí você me pergunta:

“Mas Carlos, eu poderia ter criado duas linhas ao invés de dois retângulos?”

Sim, poderia, mas, por incrível que pareça, um arquivo/imagem fica mais “leve” quando utilizamos menos linhas, bordas para as artes gráficas. Aí vai uma dica que vale ouro….hehehe

2º Passo – Criando o Blocos de Conteúdo

Lembram do wareframe criado no tutorial anterior?

Fig. 02: Wareframe do layout

Pois bem, existem 3 blocos de conteúdo. Então vamos lá!

Criemos 2 retângulos com as dimensões 240 x 143 px nos dois das extremidades, 1 retângulo de 245 x 143 px, no bloco do centro e os coloquemos de acordo com a imagem:

Fig. 02: Posicionamento dos blocos de conteúdo secundário no layout.

Observemos que o alinhamento através das linhas-guia são fundamentais para organizarmos e harmonizarmos os elementos e conteúdos do layout.

Sabendo destes posicionamentos, agora é só inserir o devido conteúdo:

Fig.03: Conteúdo dos blocos secundários

3º Passo – Rodapé

E para finalizarmos, basta inserirmos o copyright (direitos autorais) e, com a autorização prévia do cliente, nosso logotipo ou dizeres “desenvolvido por”. E eis o resultado final:

Fig. 04: Layout finalizado

CADASTRE-SE no blog e faça o download do arquivo final em PNG:

Download do Layout Final (formato PNG)

Um grande abraço e até a próxima.

CarlosHPS Webdesigner

Salve-salve Fireworkseiros de plantão!

Neste tutorial, veremos como criar um layout para uma empresa de tecnologia, utilizando algumas técnicas ainda não empregadas em tutoriais anteriores.

Pré-Requisitos

Facilidade quanto ao manuseio do Fireworks CS3/CS4

Objetivo

Criar um layout para uma empresa de tecnologia utilizando o Fireworks

Conteúdo

1º Passo – Definindo a Estrutura do Site

Como mencionei no tutorial Criando um Site Passo-a-Passo: Parte 5, a utlização de um Wireframe, ou seja, a criação de uma estrutura antes do desenvolvimento em si, faz com que economizemos tempo e otimizemos o processo de criação. Pensando nisso, vejamos como está dividido o layout a ser desenvolvido:

Fig. 01 - Wareframe - Estrutura do website

2º Passo – Utilizando Modelo do 960 Grid System

Grande parte dos layouts desenvolvidos por mim, utilizo como base para alinhamento e proporções, modelos do 960 Grid. Portanto, façamos o download no site oficial – 960.gs e descompactemos os arquivos PNG. Ao descompactarmos, veremos dois modelos: um 12_col (contém 12 colunas) e outro, 16_col (contém 16 colunas).

E qual deles usar?

Simples. Geralmente (eu disse: geralmente), se o layout tiver 3 caixas (exemplo: “Sobre a Empresa, Atendimento e Notícias, como na Fig. 01″), utilizaremos o modelo 12_col. Isso porque 12 é múltiplo de três. Já para um layout com 4 caixas, utilizaríamos o 16_col, devido o fato de 16 ser múltiplo de quatro.

Então, ao abrirmos o arquivo 960_grid_12_col.png, teremos:

3º Passo – Criação do Topo – Tarja

Com um retângulo de 940 x 05 pixel, de preenchimento #28333C, criaremos uma pequena “tarja”:

4º Passo – Criação do Topo – Barra de Menu

Criemos outro retângulo de dimensões 940 x 30 pixel, com a mesma cor da tarja e posicionamento X: 40 e Y: 70:

5º Passo – Criação do Topo – Logotipo, Feed e Twiter

Realizando os downloads do logotipo e ícones, complementaremos o topo como mostra as orientações das figuras 05 e 06 a seguir:

LOGOTIPO | ÍCONES
(desenvolvedor, o Dry Icons)

Fig. 05: Posicionamento do logotipo

Fig. 06: Ícones, Feed, Twiter e links do topo

Vejamos o resultado até aqui:

6º Passo – Criação do Topo – Barra de Menu

E concluindo o topo, utilizando a fonte Arial Narrow, tamanho 13 e cor #D7E1E8, posicionemos os itens como na imagem a seguir:

Fig. 08: Barra de menu - links

7º Passo – Criação do Background

Passemos agora para a criação do background do site. Façamos um retângulo com as dimensões 940 x 350 pixel. Em seguida, vamos aplicar um preenchimento gradiente do tipo barra (bars) com as cores branca e azul conforme a imagem abaixo:

8º Passo – Inserindo Imagem dos Computadores

De acordo com a imagem abaixo, após realizarmos o download dos computadores, posicionemos nas coordenadas – X: 379 | Y: 71. E Complementemos com o slogan da empresa: “Empresa Especializada em Tecnologia WEB”

COMPUTADORES

9º Passo – Lista de Serviços – Textos

Criaremos agora a lista de serviços da empresa, juntamente com seus botões e ícones.

Posicionemos os textos conforme a imagem abaixo:

10º Passo – Lista de Serviços – Ícone

Agora, criaremos os ícones para cada item da lista.

Primeiramente, façamos um círculo na cor branca e com as dimensões 14 x 14 px. Depois uma estrela que se transformará num triângulo de 7 x 6 px.

11º Passo – Lista de Serviços – Botões

E para concluirmos esta seção, criaremos os botões “Saiba Mais…” e “Adquira Já!”

O mesmo processo deverá ser aplicada para a criação do outro botão.

Vejamos o resultado até aqui:

Bom, pessoal

No próximo tutorial, concluiremos o layout.

Até lá.

CarlosHPS Webdesigner

Não deixem de me fazer uma visita:

• BLOG: www.carloshps.com.br/blog
• CURSOS ONLINE: www.carloshps.com.br/cursos
• PORTFÓLIO: www.carloshps.com.br

É nesse sentido que sugerimos agora esta página, com dezenas de tutoriais que lhe permitirão dominar algumas das mais impressionantes potencialidades do software:

77 Ultimate Round-Up of Adobe After Effects Tutorials

1) Sketch to vector Illustrator Tutorial

2) How to Create a Vector RSS Icon

3) Film Strip Tutorial – Illustrator

4) Create a Vibrant 3D Pixel Type Treatment – Video

5) engage> Quick Tip: Select objects faster and more efficiently in Illustrator

6) Web 2.0 Style Box / Icon: Adobe Illustrator Tutorial

7) Pixel Art Tutorial – Illustrator

Vector Metal Icon Buttons: Illustrator Tutorial!

9) Create a Windows Vista Icon all Vector! Illustrator Tutorial

10) Masking in Adobe Illustrator! Basics Tutorial

11) Metal Lightning Bolt & Vector Leather! Illustrator Tutorial

12) Create a button for a website in Illustrator – Tutorial

13) Vector Swirls, Swooshes, and Florals: Illustrator Tutorial

14) Draw Vector Heart Artwork: Adobe Illustrator Tutorial

15) engage> Quick Tip: Select objects faster and more efficiently in Illustrator

16) Metal/Metallic Text: Adobe Illustrator CS3 Tutorial

17) NEW! Adobe Illustrator Tutorial! Make Comic Style Text!

18) ‘>’>’>Adobe Illustrator Tutorial! ::The Pen Tool::

19) Illustrator & Photoshop CS4 Tutorial: Create 3D Shapes and Backgrounds

20) Create Intricate Patterns in Illustrator

21) graphic design illustrator text effects

22) How to Create an Hourglass Icon in About an Hour – Screencast

23) Electric Zombie Tee Creation

24) How to Create an Alarm Clock Icon – Screencast

25) Crow No!

26) How to Create Sheet Rolls with Custom Spirals – Screencast

27) How to Create a Vector Sketchbook – Screencast

28) Illustrator Grunchybackground Tutorial

29) illustrator envelope tutorials

30) Illustrator Tutorial – Rotationswerkzeug

E um dos factos inapeláveis do ofício é que cada visitante usa as suas próprias definições de navegação, nomeadamente o seu próprio navegador ou browser. Nem todos os internautas, de facto, usam o Explorer da Microsoft ou o Firefox da Fundação Mozilla. Nesse sentido, é essencial que o site tenha uma apresentação adequada e uniforme para todas estas variações.

Para resolver este dilema, existe felizmente uma ferramenta online, gratuita e em open source, que permite testar os seus sites nas mais diversas circunstâncias: Browsershots. Um site valioso para webdesigners ou webdevelopers.

“Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.”

Browsershots

Tem aqui fantástica arte digital à discrição, numa galeria cheia de belas imagens (sobretudo em formato EPS). Quem tiver talento e quiser divulgar o seu trabalho, pode também submeter aqui as suas criações:

“Vecteezy is an index of Free Vector Graphics available for download by some of the best artists around the world. The site is updated every day, so be sure to check back often”

Vecteezy: stupid name, cool vectors!

A chamada web 2.0, ou internet social, “explodiu” em inúmeras direcções e tem evoluído em sentidos realmente fascinantes e múltiplos.

Desde o Twitter ao Facebook, passando pelo que acabei pessoalmente por adoptar como preferido neste segmento (cada vez menos “segmentado”…) da experiência online, o LinkedIn, site social mais vocacionado para o mundo profissional, são às dezenas as propostas web de segunda geração.

No entretanto, é cada vez mais real a terceira vaga, em forma de Wave, por exemplo…

Mas desse vasto universo de modelos e projectos, conheci recentemente um que achei particularmente curioso e cujo conceito vai um pouco contra a “maré” de agregar gente com interesses e conhecimentos comuns. Poderá levar realmente à aproximação de pessoas, cumprindo uma das principais funções da web 2.0, mas parte de um princípio  um pouco diferente: pretende juntar pessoas com interesses diversos.

Está então farto de gente com as mesmas ideias? Quer alargar os seus horizontes para além do seu grupo de amigos, colegas ou familiares? Então conheça gente nova ou converse com um desconhecido, neste projecto de social networking. Chama-se Omegle, coloca-o a conversar aleatoriamente com outros internautas de forma anónima, está aqui e recomenda-se:

Omegle: Talk to Strangers!