Bom é possível criar um banner no Fireworks por causa dos Frames ou States que existe no software.
Vamos começar:
1° passo- abra seu Fireworks e crie um novo documento com as seguinte medidas 468px, 60px (medidas padrão de um Full banner)crie um retângulo com o tamanho exato do documento que você criou é interessante você adicionar uma borda preta ou de qualquer outra cor, para destacar as marcações.

2° passo- Escolha um tema em especial para começar a desenvolver o banner, no meu exemplo de um banner que é utilizado no meu site vou usar imagens e textos relacionados a avanço tecnológico, faça com sua necessidade. Bom será preciso agora criar os Frames(states) e em cada um deles será colocado uma imagem ou texto diferente dos demais. No meu exemplo vou criar 8 frames e cada um deles com uma imagem, texto e cor diferentes para que o visitante consiga visualizar a animação.
Então defina qual será o 1° frame a primeira imagem que vai aparecer no banner.

3°passo- após definir o 1° frame, qual será a imagem de abertura da animação, clique em Frames(states) no Fireworks e quando abrir, basta clicar com o botão direito do mouse sobre o frame 1 e depois na opção Duplicate frame, em seguida vai abrir uma caixa de dialogo onde você pode escolher quantos frames deseja criar, no exemplo vou criar 7, lembrando que ja foi criado um, então o numero que você escolher será os novos frames, por exemplo quero um banner com 8 frames, vou criar apenas 7. Selecione a opção “After current “.

4° passo- depois de criar os frames da animação, em cada frame criado você coloca uma imagem, texto diferente para aparecer uma animação, faça isso em todos, mude cores de fundo, tamanho e cor da fonte, utilize imagem atrativas e com cores de destaque, mais isso fica a gosto de cada, use a criatividade.

5° passo- Bom agora que os frames já estão pronto, cada um com informação e imagem diferente dos demais , será necessário configurar o tempo de transição, ou seja o tempo que ira trocar as imagens, essas alterações são feitas no painel frame(states) observe:

vai aparecer dessa forma seu painel frame, bom agora vamos editar o tempo de cada frame, sobre seu frame 1 clique 2 vezes no numero 7 que vai aparecer automaticamente no frame e coloque o tempo que deseja. Vale a pena frisar que quanto menor o valor dos numero, mais rápido será a apresentação dos frames . Eu utilizo o tempo entre 200 a 500 , é bom saber que 100 corresponde a 1 segundo, então vou colocar aqui no exemplo 500 em cada frame, ou seja será de 5 segundos a transição das imagens que compõem o banner animado. Visualize a animação no seu navegador para ter idéia de como esta ficando seu banner, de um F12.

6°passo- Agora vamos exportar o banner do Fireworks, use o atalho(ctrl+shift+X) “Export preview” , vai abrir uma nova tela, na caixa format, selecione a opção “Animated Gif” , que são as imagens gifs animados.

já na guia animation você poderá visualizar todos os frames e os tempos. Na hora de salvar coloque um nome ao banner e na opção Export , coloque HTML and imagens e depois só salvar. Esta pronto seu banner feito todo no Fireworks e exportado com as imagens e o código HTML, agora é só escolher o melhor lugar no seu site e adicionar ou as imagens somente ou inserir o HTML do Fireworks.
Bom é isso até mais amigos do MXstudio, qualquer duvida basta deixar um comentário, obrigado e até a próxima. Não deixe de acessar meu site e conferir novidades na área de TI www.brunohenris.com abraços.

1° passo- abra o seu Fireworks e na aba commands clique em Create slideshow,

depois de clicar em create slideshow vai abrir a pagina de configuração do slide.

2° passo- quando abrir a janela do slideshow, você precisa colocar um titulo e uma descrição, no seu lado direito tem opções de Player nessa opção você pode escolher qual será o estilo usado no slide, infelizmente não tem tantas opções de estilo no Fireworks, para ser mais preciso são apenas 6 estilos. Escolha um de seu agrado, é possível visualizar abaixo sua escolha.

3° passo- depois de escolher o estilo, logo abaixo você poderá escolher como quer que seu slide seja apresentado; existe 2 opções :Auto-start slidshow (nessa opção o slide começa sozinho a apresentação), Allow clicking imagens (Já essa opção será necessário clicar nas imagens para a apresentação iniciar). Caso você marque a opção Allow clicking imagens , terá que escolher ainda se deseja que as imagens abram na mesma aba, na mesma janela ou se o navegador quem decide isso.

4° passo- agora vamos adicionar as imagens no slide, do seu lado esquerdo visualize Albuns, depois disso clique no + na parte superior, ele vai adicionar as imagens. Depois de clicar no + vai aparecer uma janela Files to process, nela existe …(3 pontinhos) clique neles para procurar a pasta das imagens que você criou no inicio. Selecione todas as fotos e depois clique em Done e ok.

5° passo- após adicionar suas imagens no slide, você vai visualizar na parte superior em álbuns: o titulo e folder name, logo abaixo você encontra o nome de todas as imagens que você adicionou em file name, na opção caption é possível adicionar uma legenda a cada foto. Também é possível alterar a ordem das fotos, Cada foto que você clicar é possível visualizar abaixo.

6° passo- Agora você vai editar as configurações da forma que preferir, nessa parte não tem muito segredo, vai ate Album properties e escolha entre as opções: Thumbnail e background, também pode ver suas escolhas ao lado das opções.
Abaixo você encontra captions que são opções de legenda. E logo abaixo e muito importante, são as propriedades do slide, onde você vai configurar qual o intervalo das imagens, o estilo de transição das imagens, ainda é possível escolher qual o estilo que fica mais bonito visualizado; são 12 opções de estilo de transição das imagens. Também será necessário escolher como deseja que as fotos apareçam, In ordem(em ordem) ou Random(aleatóriamente).

7° passo- Bom agora para finalizar seu slide, configure as opções de exportar seu slide. Clique em Export options Nessa opção você vai escolher se deseja gerar o XML, exportar as imagens, o formato do XML e export path que é onde você deseja salvar seu slide. Você pode ainda configurar a altura(height) e largura(width) e qualidade da imagem. Depois de fazer todas essas configurações de acordo com o que você deseja, clique em Create para criar seu slide show.

8° passo- Pronto seu slide show foi criado, agora basta abrir a pasta onde ele foi salvo, la vai estar o html do slide, XML , scripts e uma pasta com as imagens, clique no arquivo HTML do slide e visualize no seu navegador. Bom ai fica ao seu critério se deseja utilizar a pagina toda em seu site ou colocar apenas o código no HTML onde deseja visualizar o slide.

Bom é isso meus amigos do MXSTUDIO, mais um tutorial bem fácil de fazer e que fica legal no seu site, blog. Mais uma ferramenta do Fireworks que é desconhecida por muitos da área e tem uma certa utilidade. Até o próximo artigo, tutorial aqui no portal MXSTUDIO, um grande abraço e mais informações acesse meu site www.brunohenris.com lá você encontra meu Portfólio, noticias e mais informações sobre Design. Obrigado e até a próxima. by: @brunohenris

2° crie um botão e dentro dele escreva um texto por ex. Home

3° depois de feito o botão localize no seu Fireworks o painel FRAMES (state) (atalho shift+F2)

4° agora que localizado o frame vamos duplicar ele ,para fazer essa duplicação vamos clicar sobre o frame 1 o que foi feito o botão e com o botão direito do mouse um click e escolha a opção duplicate state(duplicar frame) depois uma nova janela vai se abrir marque apenas um (1) na caixa de dialogo é o que sera necessário pra fazer o efeito.

5° ok agora tem 2 frames (state) o primeiro frame o botão esta com as cores de fundo ,texto como você escolheu nesse segundo frame faça modificações no botão por ex. mude a cor do botão a cor da fonte do texto.

6° então agora temos 2 frames com o mesmo botão e texto apenas com cores diferentes ,selecione o primeiro frame e procure a ferramenta slice tool (atalho k)vamos fatiar o botão.

7° Com a ferramenta selecionada faça um retângulo do tamanho exato do botão,note que após isso o botão vai ficar com uma espécie de relógio no centro e no topo do retângulo algo do tipo slice:jpeg

8° agora vamos clicar sobre esse icone no centro do retângulo feito com a slice e escolher na caixa que vai se abrir a opção “Add simple Rollover behavior ” que fará o efeito.

9° aparentemente nada aconteceu ,mais para visualizar o efeito salve e pressione a tecla F12 que vai abrir o botão no seu navegador.

10° no navegador passe o mouse sobre o botão e vai perceber que ele mudara de cor , qyuando o mouse ficar sobre esse botão vai apresentar uma outra cor a cor que você escolheu para o frame 2 se você também mudou de cor a fonte essa mudança também ira acontecer.

Bom taí em 10 passos como fazer um simples botão com o efeito rollover ,espero que tenham gostado e em breve com novos post .muito obrigado

Um tipo de site que andava meio esquecido na web e que, em meados do ano 2000 estava “bombando”, era o Currículo Virtual. Hoje ele está voltando com toda força e cada vez mais, profissionais, freelancers e estudantes, estão aderindo a esta modalidade de apresentação das suas qualificações e experiências.

Com isso, dividi este tutorial em duas partes. A primeira, veremos como criar o layout de um currículo virtual, com nosso velho e poderoso Fireworks CS5. E na segunda, como convertê-lo em uma página web, utilizando Tableless (xhtml/css), ok?!

Vamos lá, então.

Pré-Requisitos

• Facilidade quanto ao manuseio do Adobe Fireworks CS3 / CS4 / CS5
• Fazer o download dos ícones no site www.iconfinder.net

Objetivo

Criar uma currículo virtual utilizando o Fireworks CS5

Resultado Final

Clique na imagem para ampliá-la.

Layout Final

Conteúdo

1º Passo – Definir as Configurações do Documento

Iniciaremos, criando um novo documento com as dimensões 1200 x 1600 pixel. No entanto, nossa área útil será de 900 pixel. E para delimitá-la com exatidão, necessitaremos da régua e das linhas-guias. Para acionar as réguas, pressionemos CTRL+ALT+R (Menu > Views > Rules); e para posicionar as linhas guias, cliquemos sobre a régua e arrastemos a linha até a área de desenho:

Fig. 01: Acionando as linhas-guia

Na verdade, serão duas linhas-guia, posicionadas em 150 px e 1050 px.

Fig. 02: Delimitação das áreas do layout com linhas-guia

E para fecharmos esta configuração inicial, vamos trocar a cor do fundo de branco para um azul escuro (#132535) no painel Properties (propriedades):

Fig. 03: Cor de fundo do layout

2º Passo: Estilizando o Fundo do Layout

Vamos criar dois retângulos, como na imagem a seguir:

Fig. 04: Definindo fundos do layout

Em seguida, aplicaremos o efeito gradiente em ambos, mas cada um com uma tonalidade diferente:

Fig. 05. Aplicando gradiente

Agora, aplicaremos uma leve textura nos dois retângulos com o filtro Noise (Filter > Noise > Add Noise)como se fosse um ruído na imagem:

Fig. 06: Aplicando filtro de ruído (noise)

E por fim, vamos criar uma separação mais refinada entre os dois fundos. Para isso, criemos dois retângulos com as dimensões 1200 x 1 px sem borda e com o preenchimento: #000000 e #203D57, posicionemos junto na divisão entre os backgrounds. Recomendo que utilize o Zoom para posicionar melhor.

Fig. 07: Divisória entre os retângulos

O resultado esperado é este:

Fig. 08: Resultado parcial

3º Passo: Criando a Área de Contorno do Conteúdo

Lembram que delimitamos em 900 px a área do nosso conteúdo? Pois bem, criaremos um retângulo para ficar melhor de visualizá-la. Sua dimensão será de 900 x 1500 px e posicionado à 50 px no eixo Y e com o preenchimento branco.

Fig. 09: retângulo do conteúdo

E agora, aplicaremos uma transparência de 10% e em seguida, acionando o filtro Filter > Photoshop Live Effects, configuraremos o retângulo da seguinte forma:

Fig. 10: Efeitos no retângulo do conteúdo

Em seguida, com este retângulo selecionado, vamos copiá-lo e colá-lo na mesma posição em que o anterior está. retiremos o preenchimento (deve ficar transparente) e acrescentemos uma borda com 1 px de espessura e na cor branca. E este retângulo (que nada mais é que uma borda ao anterior), deixemos com 10% de transparência e sem nenhum filtro.

Fig. 11: Borda do retângulo

4º Passo: Criando a Área do Conteúdo

Criada a área de contorno do conteúdo, faremos a seguir, área onde este conteúdo será colocado.

Para isso, inseriremos mais um retângulo, com as dimensões e posicionamento como na imagem a seguir:

Fig. 12: Configuração do retângulo central

Prosseguindo, inseremos um preenchimento gradiente e um filtro (Photoshop Live Effects) de acordo com a imagem:

Fig. 13: Efeitos no retângulo central

5º Passo: Montagem do topo

O topo do currículo deve ficar da seguinte forma (lembrando que todas as imagens foram baixadas do site Iconfinder):

Fig. 14: Montagem do topo do currículo

E para refinar, vamos colocar um efeito no nome do profissional e sua profissão:

Fig. 15: Formatação do Nome e profissão

E pra finalizar a montagem do topo, criaremos a mesma divisória feita no fundo do layout, mas com cores diferentes:

Fig. 16: Finalização do topo do currículo

6º Passo: Adicionando Conteúdo

Neste momento, vem a parte mais difícil: inserir o conteúdo…hehehe

Fig. 17 - Estilização do conteúdo

E, seguindo este padrão, completemos o conteúdo do site:

Layout Final

Paramos por aqui e no próximo tutorial, veremos como fatiar este layout e convertê-lo em XHTML/CSS.

Até lá.

Autor: CarlosHPS Webdesigner – Colunista do Portal MXSTUDIO

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/
• JOBS: www.carloshps.com.br/jobs

Andei um pouco sumido devido estar lançando meu novo curso on-line Criação de Sites Profissionais, que, modéstia à parte, está muito bacana. E a turma, muito participativa e estimulante.

Tirando a “rasgação” de seda, vamos ao trabalho…rsrs

Bom, neste tutorial, mostrarei como criar uma capa de revista com o nosso velho, versátil e poderoso Fireworks.

Pré-Requisitos

• Facilidade quanto ao manuseio do Adobe Fireworks CS3 / CS4 / CS5
• Download das fontes:  Harabara / Amerika Sans / Paskowy
• Download das imagens: Orange Tunnel /Textura / Hands 2:OK

Objetivo

Criar uma capa de revista utilizando o Fireworks CS5

Resultado Final

Conteúdo

1º Passo – Definir as Configurações do Documento

Vamos criar um novo documento com as dimensões de uma revista real, mais ou menos, do tamanho de um papel A4 (21.0 x 29.7 cm).

Perceba que, em pixel o documento fica enorme. Então, para efeito deste tutorial, diminuirei a imagem em 4 vezes, ficando com as dimensões 620 x 894 pixel.

Outro detalhe é quanto à resolução. Como será um arquivo que será impresso, utilizaremos a resolução 300 pixel/Inch  (quanto maior o valor, melhor a qualidade para a impressão). Se fosse um arquivo específico para a web, deixaríamos para 72 pixel/Inch.

2º Passo – Inserindo as Linhas de Corte

Para quem trabalha com o Indesign, Corel, PageMaker e outros editores gráficos voltados para impressão, sabem bem mais que eu, da importância das linhas de corte, também chamadas de “sangria” (se eu tiver errado, por favor, me corrijam ). A grosso modo, é onde a arte será cortada pela lâmina da máquina da gráfica.

Isso significa que, dentro desta área é o que temos certeza que será impresso, tudo bem?

Para isso, vamos utilizar as linhas-guias. Lembrando que as réguas devem estar visíveis (Ctrl + Alt + R ou menu View > Rulles).

Vamos colocar as linhas com a distância de 20 pixel que equivale a 7 mm, em todos os lados.

Primeiro, clique sobre a régua, segure e arraste para a área do desenho e depois, solte. Faça isso duas vezes na horizontal e na vertical.

As posições serão no eixo X: 20px e 600px | eixo Y: 20px e 874px.

Caso tenha dificuldade, basta inserir as guias e dar dois cliques sobre cada uma delas, determinando em seguida, seu posicionamento.

3º Passo – Organizar Camadas (Layers)

Bom, particularmente, gosto de deixar todos os layers organizados, pois nunca se sabe se você irá compartilhar com alguém este trabalho ou, até mesmo, fazer uma atualização. Isso porque, fica bem mais fácil e rápido de encontrar todos os elementos do desenho.

Então, inicialmente, dividi o projeto em 3 partes: topo, conteúdo e rodapé.

Então, vamos criar as pastas como na imagem.

Se por ventura, necessitemos de mais algumas, sem problemas – basta inserirmos nos devidos lugares.

4º Passo – Topo: Background

Vamos criar um fundo para o topo e prepará-lo para receber o logotipo da revista, a machete e os dados da edição, etc.

Criemos então, um retângulo nas dimensões 620 x 175 px, com preenchimento #212121. Como efeito gradiente, coloquemos o seguinte:

Fig. 05: Efeito gradiente no topo

5º Passo – Topo: Logotipo + Textos Adicionais

Vamos ver como é simples criar um logotipo para nossa revista utilizando apenas uma combinação de fontes, cores e posicionamentos.

Simples, não?

E, complementando com a edição e endereço do site da revista, teremos, até aqui, o nosso topo prontinho:

Fig. 07: Resultado final do topo

6º Passo – Criando o Background da Revista

Criemos agora um retângulo com as dimensões 620 x 620 pixel e apliquemos o seguinte efeito:

Em seguida, insiramos a imagem Orange Tunnel sobre este retângulo verde (diminuí o tamanho em 50%) e apliquemos o filtro Stamp.

E para arrematarmos o fundo da capa, aplicaremos uma textura.

E o nosso resultado até aqui é este:

7º Passo – Inserir a Imagem de Capa

Nossa imagem principal, a que será destaque em nossa capa, será a Hand 2. O detalhe aqui é que colocaremos nas pastas da camada TOPO, ok?!

Vamos retirar o fundo branco da imagem para encaixá-la melhor na capa.

Existem várias técnicas, mas vamos usar a mais rápida delas, apesar de não ser tão precisa.

Com a varinha mágica (Magic Wand tool), configuremos como na imagem abaixo e, em seguida, devemos clicar no fundo branco e, pelo teclado, DELETE para excluir o fundo.

Reparemos que existe uma área a ser editada ainda. Para isso, usando as configurações da Borracha (Eraser), removemos isso facilmente:

E o resultado da inserção e tratamento da imagem, deve ficar assim:

8º Passo – Inserir Manchete da Capa

Como sabemos, toda capa de revista, jornal, livro tem uma chamada principal, um texto que dá destaque ao principal assunto a ser tratado naquela edição. É o que os jornalistas chamam de MANCHETE.

Então, vamos à ela:

9º Passo – Inserir os textos secundários

E, para complementar a nossa capa de revista, outros temas em destaque, com menor ênfase que a manchete, também comporão nossa arte gráfica.

10º Passo – Rodapé

E, para finalizarmos, vamos completar o rodapé da revista. Neste caso, colocaremos alguns logotipos e o código de barras.

Pronto!

E eis o resultado final:

Download

Para fazer o download do arquivo-fonte (PNG), acesse: www.carloshps.com.br/blog

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

Autor: CarlosHPS Webdesigner – Colunista do Portal MXSTUDIO

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/

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:

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

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:

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?!

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.

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:

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.

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:

Para fazer o download do arquivo-fonte em PNG, acesse meu blog:

http://www.carloshps.com.br/blog/como-criar-um-icone-rss

Até a próxima, povos e povas

CarlosHPS Webdesigner

Autor: CarlosHPS Webdesigner – Colunista do Portal MXSTUDIO

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/

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:

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:

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:

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:

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

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:

E o resultado até aqui é este:

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:

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.

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:

E o resultado é:

Até a próxima, pessoal.

CarlosHPS Webdesigner

Autor: CarlosHPS Webdesigner – Colunista do Portal MXSTUDIO

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/

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

Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO

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/

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

Fig. 02: Duplicação das páginas

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:

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:

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

Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO

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/

Olá, pessoal

No tutorial de hoje veremos como criar um cartão de visitas profissional, com dimensões, formatos, tipografia e ilustrações voltadas aos profissionais freelancer’s da web espalhados por este “mundão” a fora, ok?!

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:

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

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

O resultado obtido é este:

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:

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:

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:

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:

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:

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:

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

Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO

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/