iMasters | Por uma internet mais criativa e dinâmica

Segunda-feira, 03/11/2003 - 03:59 - Por Alex Falcão
Seções relacionadas:

• Suite Corel

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 3 comentários

Olá Pessoal! Chegamos ao momento de concluirmos nosso projeto. Nossa primeira opção é fatiarmos no Fireworks. Então vamos lá!

01. Vamos abrir nosso projeto.

02. É muito simples fatiarmos nosso site no Fireworks. No Corel Draw, com nosso documento aberto, ative o menu Arquivo / Exportar ou (CTRL+E).

03. Feito isso, abrirá uma janela e você exportará como: layoutprin com extensão JPG - bitmaps JPEG e escolha uma pasta para armazenar esta imagem e clique em Exportar.

04. Ao clicar no botão exportar, irá abrir uma outra janela. Nesta janela você definirá o tamanho original do nosso projeto que é de: 778x445 e clique em OK.

05. Abrirá uma nova janela. Nesta janela é pra nós definirmos o nível de qualidade da imagem: Deixe como zero os níveis e pressione OK.

Pronto! Já exportamos nossa imagem. Agora iremos abrir o Fireworks. Neste caso usarei a versão MX, mas pode ser feito da mesma maneira na versão anterior.

06. Com o Fireworks aberto, ative o menu File(Arquivo), Open(Abrir) e selecione a pasta que você exportou a imagem. Após selecionado a pasta, clique no arquivo que você exportou. No caso é o layoutprin e clique em Abrir.

07. Aberto o arquivo, iremos selecionar na caixa de ferramentas a apção Slice Tool (Fatiar).

OBS: Esta ferramenta consiste em fatiar em pedaços nosso projeto para que nós exportemos em html para o Dreamweaver. Cada pedaço que fatiarmos ficará numa tabela. Você perceberam mais para a frente.

08. Com a ferramenta ativa você irá clicar e arrastar como se tivesse desenhando um retângulo no Corel Draw. Conforme os passos abaixo: (Não levar em conta a qualidade da imgagem abaixo. É apenas teste)

1ª Fatia

Com a ferramenta ativa novamente, fatie a parte superior agora. Fatie na parte superior a partir de onde terminamos o 1º.

2ª Fatia

3ª Fatia

09. Fácil fatiar um site né? Agora vamos exportá-lo como HTML. É mais fácil ainda.
Selecione o menu File (Arquivo) Export (Exportar). Abrirá uma janela.

10. Nesta janela você salvará como index.html. E criará uma pasta chamada (images). Não clique em Salvar ainda.

11. Como você ainda não salvou, nesta mesma janela, após você ter criado a pasta images, selecione a opção put images in subfolder e clique no botão Browse.

12. Abrirá uma nova janela. Nesta janela, dê um duplo clique na pasta Images e clique no botão Abrir.

OBS: Porque estamos fazendo tudo isso? Porque quando você fatia uma imagem, você estará exportando em html e consequentemente cada fatia que você faz torna-se uma imagem. Como fatiamos 3 vezes, teremos 3 imagens. E para que um site fique organizado, é bom separarmos as imagens em pasts.

Não esqueça de dar um duplo clique na pasta images e clicar em abrir.

13. Após clicar no botão abrir, voltará para a janela principal. Aí é só você clicar em Salvar.

Pronto, acabamos de criar nossa 1ª página em html. Que será a página principal.

OBS: Ao abrir o seu site você reparará que esta criando barra de rolagem. Isso é normal. Iremos corrigir na próxima semana no Dreamweaver.

14. Só para encerrarmos esta matéria. Falta o segundo layout né? Só que neste caso não precisaremos fatiar, já que ésomente a parte superior. Apenas iremos exportar como .jpg e guardaremos dentro da pasta images. OK. Iremos aproveitar esta imagem no Dreamweaver.

15. Então volte para o Corel Draw e selecione todo o segundo layout e mande exportar novamente.
Arquivo / Exportar. Mas antes repare que seu layout mede 778x135 pixels. Ok?

16. Na janela de Exportar, salve como layout na pasta images do seu projeto e clique em Exportar.

17. Exporte exatamente com esta medida: 778x135 pixels.

18. Deixe tudo zero na próxima janela.

19. Pronto! Nossa segunda tela do layout já esta exportada. Apenas confirme se você gravou corretamente dentro da pasta images.

Bom pessoal, espero que tenham gostado. Na próxima semana mostrarei como fatiar rapidamente no Photoshop e no Photopaint. Ambos são parecidos com o Fireworks, tudo é questão de adaptação com o software mesmo. Será uma explicação rápida e logo em seguida já montaremos tudo no Dreamweaver aproveitando o que fizemos nesta aula. Abraços a todos.

Todos os artigos de Alex Falcão

01/06/2009 - Personalizando teclas de atalho 20/11/2008 - Marca Claro em CDR 06/11/2008 - Desenho da marca Claro 30/07/2008 - Recrie o efeito da marca de "A Favorita" 17/02/2008 - O novo CorelDraw X4 25/09/2007 - Cubo Mágico 27/08/2007 - Efeito CutOut 16/06/2007 - Vídeo: Photopaint ou Photoshop (4º round) 24/04/2007 - Photopaint ou Photoshop. 3º round 23/02/2007 - Vídeo: O poder da Borracha 13/12/2006 - Trabalhando com Perspectiva 22/11/2006 - Trabalho com bandeiras 04/10/2006 - Corel Trace 30/08/2006 - Corel Photopaint ou Adobe Photoshop? 2º Round 17/08/2006 - Photopaint ou Photoshop? Eis a questão! 26/07/2006 - Logomarca Band 06/07/2006 - Efeito Plasma 28/06/2006 - Barba Serrada 19/06/2006 - Personalizando teclas de atalho 05/06/2006 - Efeito Polaroid 12/05/2006 - Coração chanfrado 04/05/2006 - Corel Draw em 3D 20/03/2006 - Texto vertical 02/03/2006 - Novo CorelDRAW X3 31/01/2006 - Impressão mesclada 06/12/2005 - Duplicação 08/11/2005 - Processo em lote 17/10/2005 - Vote Consciente - Referendo 2005 21/09/2005 - Subindo a Serra 25/08/2005 - Aparagem - Logo Pão de Açúcar 09/08/2005 - Clone - O Retorno 11/07/2005 - Clonagem e duplicação 23/06/2005 - Dica sobre duplicação 17/06/2005 - Vetorizando Batman! 10/06/2005 - Vídeo digital: Legendas 03/06/2005 - Emotion 24/05/2005 - Demarcadores (path) em vídeo aula 17/05/2005 - History Brush - Vídeo aula 02/05/2005 - Menus interativos 28/04/2005 - Templates 25/04/2005 - Botão aqua 01/04/2005 - Thundercats 08/03/2005 - Vídeo digital - Parte 2 04/03/2005 - Exportação correta de imagens (vídeo aula) 28/02/2005 - Vídeo digital - Parte 01 21/02/2005 - Efeito Matrix 15/02/2005 - Video aula - De volta para o futuro 01/02/2005 - Vídeo aula: Quebra cabeça 24/01/2005 - Power clip 19/01/2005 - Canais em vídeo aula 06/01/2005 - Fundo abstrato - Parte 02 07/12/2004 - Fundo abstrato 12/11/2004 - Manipulação de imagens no PhotoPaint 03/11/2004 - Perspectiva 20/10/2004 - Efeito televisão 13/10/2004 - Vídeo aula sobre botões 28/09/2004 - Efeitos abstratos 22/09/2004 - Texto em volume 10/09/2004 - Mistura Interativa 26/08/2004 - Vídeo Aula - Fundo transparente 16/08/2004 - Corel Bug 12 05/08/2004 - Barra de menu personalizada 13/07/2004 - Problemas do dia-a-dia 01/07/2004 - Vetorizando na mão 21/06/2004 - Formulários web no Corel Draw 20/05/2004 - Montagem de fotos 19/05/2004 - Programando VBA no Corel 11/05/2004 - Criando uma bola de futebol 13/04/2004 - Corel Draw 12 - 12 razões para a atualização 26/03/2004 - Dicas e macetes - Parte 2 13/02/2004 - Exlusão de fundos chapados 09/02/2004 - Menu avançado no PhotoPaint - Conclusão 23/01/2004 - Novas dicas para o CorelDraw! 07/01/2004 - Cubo 3D no RAVE - Final 11/12/2003 - Cubo 3D no RAVE 02/12/2003 - Menu avançado no PhotoPaint 17/11/2003 - Conclusão da série CorelDraw e fatiamento no PhotoPaint 03/11/2003 - Corel + Fatiamento no Fireworks - Parte 1 20/10/2003 - Construção web no Corel - 3ª parte 09/10/2003 - Construção web no Corel - Botões 02/10/2003 - Construção web no Corel 25/09/2003 - Novos efeitos Photopaint 11 19/09/2003 - Bordas no Photopaint 09/09/2003 - Corel PhotoPaint: Retoque de imagens - Parte 2 05/09/2003 - Corel PhotoPaint: Retoque de imagens 28/08/2003 - Efeito rollover no Corel Draw 18/08/2003 - Trabalhando efeitos no PhotoPaint 08/08/2003 - Uma visão sobre Corel R.A.V.E. 30/07/2003 - O poder do Corel Trace 28/07/2003 - Guias de movimento 16/07/2003 - Desenhando um avião pelo Flash

3 comentários publicados

• 1.

  Sexta-feira, 17/02/2006, por Gilberto Marques
  
  Responder comentário

• 2. Corel + Fatiamento no Fireworks - Parte 1

  Sexta-feira, 17/02/2006, por Gilberto Marques
  

  Alex!
  Tudo bem?
  Eu acesso este site a um bom tempo e tenho aprendido muito com ele pois sou iniciante, eu não consegui abrir o programa Firworks
  no meu Computador, como posso abri - lo.

  Responder comentário

• 3. mac

  Domingo, 15/02/2009, por Hugo Vitor
  

  oi
  queria saber desenha o logo do mac
  o da maçazinha
  
  as videos aulas sao muitos boas
  parabens!!!

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Alex Falcão é formado em Processamento de Dados pelo Objetivo e TI pela Faculdade Radial, é Instrutor da Microlins (Unidade Socorro) e também escreve para as Revista Webdesign e Silk & Sign.

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

linux mercado iphone twitter tecnologia brasil celular microsoft ti 3g windows php firefox youtube google android seguranca mobile internet crescimento desenvolvimento apple lançamento yahoo web criação

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!