Web no Corel - Parte I Por Alex Falco

Publicada: 2005-01-11

A partir desta semana termos um tutorial diferente. Iremos aprender a construir um site a partir do Corel Draw juntamente com ajuda de outros softwares. Fireworks, Photopaint, Photoshop e Dreamweaver. Usarei o fireworks simplesmente para mostrar como iremos fatiar nosso site e export-lo em HTML. No dreamweaver ser para montarmos todo o site. Veja como ficar nosso site na fase final.Clique aqui . Clique nos links tambm ! Primeiramente iremos construir o logotipo da empresa. Imagine que seu cliente nem logotipo tem. Ento iremos ter que criar. J coloca na ponta do lpis a criao do logotipo no contrato.

1- Vamos definir o tamanho do site na barra de propriedades defina: 778 x 445 pixels e pressione ENTER.

2- Ative a ferramenta elipse na caixa de ferramentas e faa um crculo na sua rea de trabalho. Para fazermos um crculo perfeito, pressione e segure a tecla CTRL .

3-Para que fique exatamente igual ao nosso modelo, defina o tamanho do crculo para: 220 x 220 pixels na barra de propriedades.

4- Ative a ferramenta texto na caixa de ferramentas.E digite o seguinte texto na sua rea de trabalho: COLGIO SHANGRI-L. No se preocupe com a fonte.

5- Aps digitado o texto, iremos format-lo. Selecione na caixa de ferramenta a ferramenta de seleo e d um clique em cima do texto para selecion-lo.

6- Defina na barra de formatao: Fonte: Arial e Tamanho 6,244 e negrito.

7- Agora com a ferramenta de seleo(setinha branca) que se encontra na caixa de feramentas, faa uma seleo desde que envolva os dois objetos.

8- Feito isso, iremos agora fazer o texto ficar em volta da circunferncia. S ir funcionar se os dois objetos estiverem selecionados. Aps os dois estarem selecionados, ative o Menu Texto / Ajustar Texto ao Caminho.

9- Nosso efeito tem que ficar desta forma:

" 10- Agora ns no necessitaremos do crculo. Ento d um clique fora crculo e depois clique dentro do crculo novamente e pressione a tecla: DELETE no teclado.

11- Agora vamos desenhar a nossa lua. Faa uma elipse de tamanho: 200x200 pixels.

12- Agora vamos duplicar nosso crculo.: Selecione o Menu Editar / Duplicar.

13- Posicione o crculo duplicado exatamente como mostra a figura abaixo:

14- Com a ferramenta de seleo ativa, selecione os dois crculos.

15- Aps selecionar os dois crculos, v ao Menu Organizar / Formato / Aparagem.

16- D um clique no crculo da direita e pressione a tecla: DELETE.

17 - Para que fique exatamente igual ao tamanho original do nosso logotipo, defina na barra de propriedades as seguintes medidas: 117x178 pixels e pinte de amarelo.

18 - Agora vamos tirar o contorno da lua. Veja a figura abaixo.Basta voc clicar com o lado direito do mouse na caixa de cores no quadradinho com um X.

19 - Vamos duplicar nossa lua duas vezes.

20 - Com a lua ainda selecionada duplique novamente. Veja abaixo a lua duas vezes duplicada.

21-Para cada lua duplicada defina o tamanho para: 58x89 pixels.

22- Agora pinte as duas luas pequenas com a cor verde.

23- Agora vamos criar as estrelinhas. Na caixa de ferramentas ative o boto Formas Bsicas e escolha: Formas de estrela.

24- E na caixa de propriedades ative a estrela correspondente.

25- Na sua rea de trabalho desenhe apenas uma estrela e defina o tamanho de 33x34 pixels.

26- Pinte de amarelo a estrela e coloque um contorno verde. Para aplicar o contorno na estrela s clicar com o lado direito do mouse em cima da cor verde.

27- Duplique esta estrela 4 vezes. V ao Menu Editar / Duplicar e repita este processo 4 vezes. Ou pressione a tecla de atalho: CTRL + D ( 4 vezes).

28 - Segue abaixo nossos objetos criados at o momento.

29- J estamos terminando nosso logotipo. Agora desenhe um crculo de 220x220 pixels.

30- Clique com o lado direito na cor verde para definirmos o contorno do crculo de verde. 31 - E por ltimo EDUCANDO PARA tamanho 5 e negrito. nosso UM slogan. Ative a ferramenta Texto FUTURO MELHOR. Defina e digite em maisculo: como Fonte Arial,

32- Pronto, agora temos todos nossos objetos criados. Vamos mont-lo ?

33- Para mont-lo s ir posicionando os objetos conforme a imagem abaixo:

33- Repare que as estrelinhas esto meio inclinadas n ? Para inclinar a estrela, selecione uma delas dando um duplo clique. Ir fica desta forma.

34- Depois s posicinar o mouse em uma das astes e girar um pouco a estrela.

Ufa pessoal ! At que enfim terminamos.

Construo Web no Corel Parte II Por Alex Falco

Publicada: 2005-01-11

1- Para quem no viu a matria anterior necessrio ter em seu computador o logotipo pronto, porque iremos usar uma parte dele sem que tenhamos que desenhar novamente. Clique aqui para baixar o logotipo prontinho em extenso .cdr 2- Para criar o boto muito simples, selecione o retngulo na caixa de ferramentas e desenho na sua rea de trabalho um retngulo no preocupe com o tamanho, definiremos no passo seguinte.

3- Agora na barra de propriedades defina a seguinte medida: 218x13pixels.

4- Clica na cor verde na caixa de cores. E para tirar o contorno clique com o lado direito em cima do mouse na cor verde novamente. Na realidade voc no estara tirando o contorno e sim pintando de verde.

5- Ative novamente a ferramenta retngulo e desenhe o mesmo do tamanho de 164x15 pixels. E pinte da cor amarelo e com contorno amarelo.

6-Agora posicione-os como na imagem abaixo:

7- Lembra do logotipo que criamos ? Vamos aproveitar aquelas duas luas pequenas da cor verde. 8- Estando com eles na sua mesma rea de trabalho vamos mont-lo para a concluirmos o boto.

9- Selecione uma lua de cada vez e na barra de propriedades coloque as seguintes medidas: 20x31pixels. Depois selecione a outra lua verde e coloque a mesma medida.

10- Agora precisamos espelhar qualquer um dos dois objetos. Selecione qualquer uma das luas verde e clique na barra de propriedades em Espelhar.

11- Ficar desta forma espelhado, veja a imagem abaixo:

12- Agora posicione at que fique igual a imagem abaixo:

13- Se voc reparar no exemplo do nosso site ele tem uma sombra em preto. Pode criar uma sombra com o boto sombra projetada. Mas no essa a idia. Vamos fazer de outra forma. Selecione com a ferramenta seta branca os dois objetos e v ao Menu Organizar/Agrupar.

14- Feito isso, pinte o logo agrupado de preto na caixa de cores.

15- Porque pintamos de preto ? Porque faremos este logo como se fosse Ento com o logotipo ainda selecionado, duplique o mesmo. Ative o Menu Editar / Duplicar.

uma

sombra.

16- Aps ter duplicado o logotipo agora pinte de verde na caixa de cores.

17- Pronto agora s posicionar o logotipo verde em cima do logotipo preto. Caso acontea de ficar por debaixo do logotipo preto. Use a tecla de atalho: SHIFT + PAGEUP no teclado.(paracima) ou SHIFT + PAGEDOWN(parabaixo). Ou ative o menu Organizar / Ordernar / Para Frente.

18- Feito isso, posicione para que fique aparecendo apenas um pouco da parte do logotipo preto. Como na imagem abaixo:

19- Selecione todo o logotipo e mande agrupar para que possamos arrast-lo todo de uma vez para onde voc quiser na sua rea de trabalho. Posicione em cima do boto como mostra a figura abaixo:

20- Agora ative a ferramenta Texto na caixa de ferramentas e digite: Quem Somos. Defina como fonte: Bank Gothic MD BT e tamanho 3. Caso no possua esta fonte. Coloque Arial.

21- Pronto ! Nosso 1 boto esta concludo. Para fazer o restante. Selecione todos os objetos e mande duplicar no Menu Editar / Duplicar.

22- Clique na Ferramenta Texto e clique em cima do texto: Quem Somos. E aperte delete para ir apagando o texto QUEM SOMOS, assim voc pode aproveitar a fonte e o mesmo tamanho. E escreva: Educao Infantil.

23- Para continuar s ir duplicando os botes e trocar o texto. Beleza ento !!! Agora j temos todos os botes prontos juntamente com a criao do logotipo da aula passada. Semana que vem iremos fazer a parte superior juntamente com o endereo. Lembrando que importante que todo o desenvolvimento do projeto do site seja feito no mesmo arquivo da primeira aula. Porque j esta definido o tamanho da rea do site.

Contruo Web no Corel Parte III Por Alex Falco

Publicada: 2005-01-11

Ol pessoal !! Vamos dar andamento a 3 parte do Site em Corel. Nesta matria iremos construir a parte superior. E vamos admitir que muito fcil fazer esta 3 etapa. Para quem acompanha minhas matrias desde o incio j consegue fazer sozinho. Tanto que recebi e-mails das pessoas dizendo que ja concluiram a parte da construo sem ao menos ser publicada esta coluna. Parabns a todos. O mais importante que no fizeram igual. uns trocaram as cores, outros fizerem um tipo de layout diferente.Parabns a todos mesmo. Vamos ao que interessa. 1- Primeiramente ative a ferramenta retngulo. E faa um retngulo na parte superior da sua rea de trabalho de: 778x80 pixels.

2- Feito isso vamos a segunda etapa. Essa parte mais chata, porque tem vrias maneira de fazermos. Podemos usar a ferramenta mo livre e depois trabalharmos com curvas. Mas achei que ficaria difcil de explicla. Vamos usar a ferramenta mo livre para quando eu criar uma matria de vetorizao no Corel Draw. Beleza ? Ento vamos a forma mais fcil que encontrei para explicar este passo. 3- Iremos novamente ativar a ferramenta retngulo na caixa de ferramentas e desenhar no palco um quadrado perfeito. Mas querido professor !! Como se faz um quadrado perfeito ? Simples !! Com a ferramenta retngulo selecionada, segure a tecla CTRL e faa um quadrado perfeito na sua rea de trabalho. No se preocupe com o tamanho. Bom eu define como: 328x316 pixels.

4- Agora ative a ferramenta Elipse e faa um crculo perfeito tambm. Tamanho: 594x594 pixels. E posicione o crculo exatamente como mostra a imagem abaixo:

5- Agora vamos usar o efeito de APARAR um objeto. Muito til por sinal em vrias situaes. Ento selecione os dois objetos o retngulo perfeito e o crculo. V ao menu Organizar / Formato / Aparagem.

6- Reparem como ficou depois de aparado.

7- Feito isso s clicar no crculo e deletar.

8- Temos nosso objeto prontinho. Agora s duplicar. Selecione o objeto e pressione a tecla CTRL + D. Temos que aprender a usar as teclas de atalho. OK ? Aps duplicado pinte um de amarelo e o outro de preto e sem contorno ambos.

9- Para tirar o contorno so clicar com o lado direito do mouse na ferramenta sem contorno como mostra a imagem abaixo. Faa o mesmo para os dois.

10- O preto servir como uma sombra. Ento posicione como a imagem abaixo.

11- Caso acontea do amarelo ficar por debaixo s usar a tecla de atalho. Pressione as teclas: SHIFT + PAGEUP em seu teclado. 12- Agora ative a ferramenta TEXTO e escreva: MEU QUERIDO PROFESSOR UM MESTRE! (brincadeirinha). Digite o texto como na imagem abaixo: Caso no possua a fonte na imagem abaixo, escolha uma de sua preferncia.

13- Se quiser fazer uma sombra. s duplicar o texto (CTRL+D) e pintar de preto.

Semana que vem daremos continuidade. ME AGUARDEM !!

Contruo Web no Corel Parte IV Por Alex Falco

Publicada: 2005-01-11

1- Vamos abrir nosso projeto. Para quem perdeu ou deu algum bug em seu computador, pode baixar o arquivo .cdr completo clicando aqui. 2- muito simples fatiarmos nosso site no Fireworks. No Corel Draw com nosso documento aberto. Ative o menu Arquivo / Exportar ou (CTRL+E).

3- Feito isso ! Abrir uma janela e voc exportar como: layoutprin com extenso JPG - bitmaps JPEG e escolha uma pasta para armazenar esta imagem e clique em Exportar.

4- Ao clicar no boto exportar ir abrir uma outra janela. Nesta janela voc definir o tamanho original do nosso projeto que de: 778x445 e clique em OK.

5- Ir abrir uma nova janela. Nesta janela para ns definirmos o nvel de qualidade da imagem: Deixe como zero os nveis e pressione OK.

Pronto ! J exportamos nossa imagem. Agora iremos abrir o Fireworks.Neste caso estarei usando a verso MX, mas pode ser feito da mesma maneira na verso anterior. 6- Como o Fireworks aberto, ative o menu File(Arquivo) Open(Abrir) e selecione a pasta que voc exportou a imagem. Aps selecionado a pasta clique no arquivo que voc exportou. Que no caso o layoutprin e clique em Abrir.

7- Aps aberto o arquivo. Iremos selecionar na caixa de ferramentas a apo Slice Tool (Fatiar).

obs: Esta ferramenta consiste em fatiar em pedaos nosso projeto para que ns exportemos em html para o Dreamweaver. Cada pedao que fatiarmos ficar numa tabela. Vocs perceberam mais para a frente. 8- Com a ferramenta ativa voc ir clicar e arrastar como se tivesse desenhando um retngulo no Corel Draw. Conforme os passos abaixo: 1 Fatia

Com a ferramenta ativa novamente, fatia a parte superior agora. Fatia na parte superior a partir de onde terminamos o 1. 2 Fatia

3 Fatia

9- Fcil fatiar um site n ? Agora vamos export-lo como Selecione o menu File (Arquivo) Export (Exportar). Abrir uma janela.

HTML.

mais

fcil

ainda.

10- Nesta janela voc salvar como index.html. E criar uma pasta chamada (images). E no clique em Salvar ainda. OBS: Porque index.html ? Porque index.html padro para qualquer tipo de site. E quando voc for publicar o site ele somente aceitar se a 1 pgina do site chamar-se index.html ou default.html tanto faz. Mas neste caso vamos definir como index.html. Mas preste ateno isso s vale para a 1 (primeira) pgina. Ok ? As demais voc cria com qualquer nome.

11- Como voc no salvou ainda, nesta mesma janela aps voc ter criado a pasta images, selecione a opo put images in subfolder e clique no boto Browse.

12- ir abrir uma nova janela. Nesta janela de um duplo clique na pasta Images e clique no boto 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, temos que criar uma pasta somente para as imagens e colocarmos as imagens em sua devida pasta.

No esquea de dar um duplo clique na pasta images e clicar em abrir. 13-Aps clicar no boto abrir. Voltar para a janela principal. A s voc clicar em Salvar. Pronto ! Acabamos de criar nossa 1 pgina em html. Que ser a pgina principal.

Voc achou fcil demais n? Eu tambm achei. Ento vamos ver como ficou nosso html ? Vai na sua rea de trabalho e clique em MEU COMPUTADOR. Selecione o Drive C: e procure a pasta que voc salvou seu html e suas imagens. No meu caso eu salvei no C: na pasta Exemplo. Feito isso ! Clique duas vezes em index.html. A esta seu primeiro site nascendo. OBS: Ao abrir o seu site voc reparar que esta criando barra de rolagem. Isso normal. Iremos corrigir na prxima semana no Dreamweaver. 14- S para encerrarmos esta matria. Falta o segundo layout n? S que neste caso nao precisaremos fatiar. Porque somente a parte superior, ento no h necessidade de fatiarmos. Apenas iremos exportar como .jpg e guardaremos dentro da pasta images. OK. Iremos aproveitar esta imagem no Dreamweaver. 15- Ento 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 prxima janela.

19- Pronto ! Nossa segunda tela do layout j esta exportada. Apenas confirme se voc gravou corretamente dentro da pasta images mesmo. Para isso v at a rea de trabalho e selecione novamente MEU COMPUTADOR, C: e procure a pasta do seu projeto.

Bom Pessoal espero que tenham gostado. Na prxima semana mostrarei como fatiar rapidamente no Photoshop e no Photopaint. Ambos so parecidos com o Fireworks, tudo questo de adaptao com o software mesmo. Ser uma explicao rpida e logo em seguida ja montaremos tudo no dreamweaver aproveitando o que fizemos nesta aula. Abraos a todos.

Construo Web no Corel - Final Por Alex Falco

Publicada: 2005-01-11

Ol pessoal ! Esta semana estaremos encerrando nosso projeto de site em corel. Hoje vamos aprender somente como arrumar no dreamweaver caso voc tenha este software instalado em sua mquina. No vou ensinar nada do dreamweaver. Vamos apenas usar um comando para indireitar a pgina corretamente. 1- Portanto abra a pasta onde esta localizado o index.html e clique com o lado direito do mouse e selecione a opo. Editar com Dreamweaver.

2- Agora selecione o menu Modify Page Proprieties. E defina tudo zero como na imagem abaixo:

3- Pronto ! Sua pgina esta corrigida agora. Agora vamos ver como fatiar no Photopaint. Agora iremos aprender rapidamente como fatiar nosso projeto no Photopaint.. No Corel Draw exporte a imagem. Arquivo/Exportar. E exporte com o nome index.

Salve com extenso .JPG conforme a imagem abaixo:

Na prxima janela defina como 778x411 e clique em OK.

Depois deixe como a imagem abaixo tudo zero.

Abra o Photopaint e ative o menu Arquivo/Abrir e selecione o arquivo index.jpg na devida onde voc salvou. Com a imagem aberta agora iremos fatiar no Photopaint. Selecione a ferramenta fatiamento de imagem.

Aps selecionado esta ferramenta. Repare que na barra de propriedades aparece todas as opes relativa a esta ferramenta.

Selecionte justamente a Fatia Vertical.

Aps selecionado trace uma fatia conforme a imagem abaixo: Para fazer corretamente. Leve a ferramenta fatia na parte superior esquerda do layout e arraste para a esquerda conforme a imagem.

Agora ative a ferramenta Fatia Horizontal.

A fatie conforme a imagem abaixo:

Na parte do logotipo no necessrio fatiar. Agora iremos exportar nosso projeto em html. Ative o menu Arquivo/Publicar na Web/HTML

Na prxima etapa defina como na imagem abaixo:

A nica ressalva que em (Pasta de Imagens) voc pe o nome da pasta onde voc quer salvar as imagens fatiadas. Depois clique em Salvar. Pronto ! Agora abra a pasta que voc salvou e clique duas vezes no arquivo index.html Para arrumar o projeto para que fique certinho nos cantos do browser e no gere barre de rolagem. Siga o procedimento do incio desta matria. Bom, finalmente encerramos a matria de Site em Corel. Espero que tenham todos gostado. Abraos a todos.