Fireworks - como adicionar imagens dentro de crculos

Neste tutorial mostrarei como inserir uma imagem dentro de uma forma (circulo,retngulo,etc) fazendo assim com que a imagem adote o formato desta forma. Muita gente tem esta duvida e pensa que difcil fazer mas a verdade que muito fcil e fica um resultado muito bonito. Inicie com um novo documento. Neste tutorial mostrarei como criar este efeito usando um circulo, lembrando que voc pode faze-lo com qualquer forma criada pelo fireworks. 1 passo: Com a ferramenta Ellipse crie um circulo de qualquer tamanho e com qualquer cor de preenchimento. Obs: neste caso a cor no vai influenciar para que o efeito de certo, mas para obter um bom resultado recomendo que voc deixe o circulo da cor do palco ou at mesmo deixe ele sem cor.

2 passo: V em File>Import ou pressione Ctrl+R para importar uma imagem para o palco, observe na figura abaixo que eu deixei o tamanho da imagem que importei um pouco maior que o circulo.

3 passo: Posicione a imagem importada em cima do circulo de forma que fique como na imagem abaixo.

4 passo: Com apenas a imagem selecionada pressione Ctrl+X para recortar. 5 passo: Selecione o circulo,v em Edit > Paste Inside ou pressione Ctrl+Shift+V para colar a imagem dentro na forma selecionada. E pimba o efeito j estar feito,fcil n? Veja o resultado.

Por hoje s,essa parte bem basica mas fundamental para quem quer continuar no fireworks,

Dreamweaver CS4 - Tabelas - mudar background da tabela

Aps criar a tabela, clique em New CSS Rule, escolha em Selector Type a opo tag, em selector name ir aparecer no campo a palavra "table", se for apenas para este documento clique em OK. Ir abrir uma nova janela, clique na opo Background, e em Background imagem escolha o que deseja como fundo para aplicar na tablela. Um detalhe, se tiver mais de uma table na pgina, todas recebero o mesmo background. Se desejar criar um estilo personalizado para cada elemento escolha a opo "Class", depois de definir, ser necessrio aplicar manualmente, selecionando o objeto e e no painel properties, em Class, escolher a opo de estilo que voc criou.

como criar site com o Fireworks Parte 1

Neste tutorial irei mostrar a vocs como criar um site completo utilizando o Fireworks,esta s a primeira parte,no final da srie voc estara pronto para criar um site com menus,topo,banner,etc. Bem vindos fire-experts a mais um tutorial de Fireworks,antes de mais nada eu gostaria de agradecer pela audincia que vocs tem nos dado nesses dias que estamos online,todos vocs nos do uma fora incrvel para ns sempre continuarmos fazendo coisas desse tipo. Bom muita gente me pergunta. Leonardo por que voc utiliza o Fireworks? e eu sempre respondo a mesma coisa Sinto-me bem trabalhando com ele, uma ferramenta que me prende ao projeto,cada vez que crio uma coisa me empolgo e crio outra e mais outras coisas na minha opinio ele ainda vai evoluir muito, uma ferramenta excelente para se trabalhar com sites e com imagens tambm,bom para provar o que eu digo eu preciso mostrar a vocs, ento ai que pensei em criar um tutorial que em vrios passos eu possa mostrar tudo isso. Ingredientes Fireworks MX 2004 ( a verso atual da ferramenta,muito mais agradvel de mexer,proporciona movimentos mais precisos e suaves) Banco de Imagens ( muito importante voc ter um pasta com muitas imagens para qualquer ocasio de sites, ai que comeam surgir as idias) Criatividade e Pacincia (talvez as mais importantes para voc se dar bem) Neste tutorial mostrarei a vocs como criar um site completo com o Fireworks,veja abaixo uma lista do que abordarei nos artigos no decorrer das semanas. * Definindo um tamanho * Como criar um logotipo sem mistrios * Como criar um topo de site agradvel * Menu rollover e menu popup * Slices para exibir informaes * Tratamento de imagens Desenvolvendo Full site com o Fireworks Parte 1 >> Dimenses da tela Um dos erros que as vezes cometemos criar um site com seu tamanho width definido de

forma errada,isso far com que alguns visitantes com resolues 800x600 possam no visualiza-lo de maneira correta,ento quando voc for criar um novo documento no Fireworks,defina seu tamanho width(Largura) com tamanho de 799 pixel,j sua altura height voc no ter que ter tanta preocupao por que vai ser a rea onde o visitante ir navegar livremente para ver possivelmente os destaques da pagina. >> Criao do topo Com certeza essa uma das fazes de criao mais trabalhosas para um webdesign, agora que ele deve pensar muito antes de criar um topo para o site, o primeiro lugar que o visitante olha quando entra em um site o topo, ento se ele no estiver em perfeita harmonia o visitante no ter prazer em acessa-lo. 1 passo: Com a ferramenta "Rectangle Tool" crie um retngulo com os tamanhos "width 779" e "height 130",a borda voc pode por na cor #999999 do tipo "Pixel Soft com 1 pixel" veja:

A imagem acima esta um pouco reduzida para caber na tela. 2 passo: Para dar uma aparncia mais bonita iremos adicionar o famoso efeito "degrade", com o topo selecionado clique na guia "Fill Category" > "Gradient" > "Linear" veja:

Perceba que seu banner ficou com essa caracterstica:

Por padro o Fireworks cria o efeito degrade nas cores Preta e Branco mas para esse nosso exemplo eu quero trabalhar com outras cores,para trocar a cor clique na caixa de cores como mostra na figura abaixo:

Perceba na imagem acima que eu coloquei a cor Branca #FFFFFF e a cor Bege escuro #999966, para dar um toque melhor no topo,la em cima em adicionei uma opacidade em 70%,configure tudo como mostrado nesta imagem,saia da caixa de cores e posicione o guia do seu degrade da seguinte forma, veja:

Pronto,acabamos de criar o topo,agora ns precisamos criar os menus,o logotipo etc,mas isso voc ver mais adiante. >>Criando o menu do topo Vocs perceberam que o topo que criamos bem simples,mas muito bonito e "clean", agora iremos criar o seu menu, devemos cria-lo de maneira com que fique agradvel quando o visitante acessar seu site,ento vejam como criei. 1 passo: Com a ferramenta "Rectangle Tool" crie um retangulo com largura (width) mais ou menos a metade do topo e sua altura (height) com "20 pixels", para cor de fundo defina #CCCCCC e para a borda a cor #999999 do tipo "Pixel soft" com 1 pixel,depois de criado posicione-o na parte inferior do topo de maneira que fique igual a imagem abaixo, veja:

Perceba que o fundo menu ficou um pouco grosseiro,para deixa-lo mais bonito arredonde sua borda em 90% na guia "Rectangle roundness" veja:

Veja agora como ficou agora:

2 passo: Agora iremos adicionar os textos que futuramente sero os link do nosso menu,com a ferramenta "Text" digite algumas opes utilizando a fonte 04b_21 no tamanho "8" na cor #666666 e na guia Anti-aliasing level defina " No Anti-Alias ",veja:

As opes do menu que digite foram: QUEM SOMOS, EVENTOS, NOTICIAS, LIVROS, CONTATO Vejam como esta ficando nosso topo:

3 passo: Para ficar mais organizado vamos criar uma linha de 1X20 com a ferramenta "Line Tool" com a mesma cor da borda do fundo do menu,veja como devera ficar:

Dica extra: Percebam que para dar um toque mais "clean" no fundo do menu,eu acrescentei um efeito "Inner Glow" com a cor #999999,e um efeito degrade linear na cor #FFFFFF para #CCCCCC,veja.

Se baseie nas guias do degrade para fazer o efeito certinho, veja:

Ficou um menu muito agradvel e que combinou com o topo perfeitamente. >>Interatividade com o Menu Vocs viram anteriormente como criar a aparncia do menu,agora eu irei mostrar como trabalhar com "Boto",essa opo muito interessante,quando passarmos o mouse em cima

dos Botes do menu eles iro trocar de cor,essa apenas uma das coisas que podemos fazer com essa opo. 1 passo: Selecione uma das opes do menu e precione ( F8 ), ir abrir uma janela chamada "Symbol Properties",nela configure da seguinte forma, veja:

Em "Name" voc devera informar um nome para seu objeto e em "Type" voc devera selecionar o opo "Button" que sera nosso boto,depois de ter configurado clique no boto ok. 2 passo: Precione ( F11 ) para abrir o painel "Library", para l que vo todos os botes que voc criar, vejam que s temos um boto:

3 passo: D dois cliques sob o objeto "Boto" que esta na "Library" ira abrir a seguinte tela, veja:

Voc ir perceber que agora temos o boto "Edit" clique sob ele e voc entrara nas propriedades do boto,na parte superior direita temos as seguintes propriedades:

Veja para que ser cada uma dessas propriedades: Up - Nesta propriedade voc devera configurar a aparncia do menu esttico,ou seja, esta a forma que o visitante ir ver assim que entrar no seu site. Over - Nesta propriedade voc devera configurar a aparncia do menu enquanto o visitante estiver com o mouse em cima dele. Down - Nesta propriedade voc devera configurar a aparncia do menu quando o visitante clicar em cima dele. Over While Down - Nesta opo voc devera configurar a aparncia do menu quando o visitante passar o mouse por cima de um menu j clicado. Active Area - Esta propriedade serve para voc aumentar ou diminuir a rea em que um boto pode ser clicado Agora ficara critrio de cada um, no necessrio configurar todas essas propriedades, eu gosto de utilizar apenas a "UP" e a "Down". 4 passo: Nas propriedades "Over,Down e Over While Down" voc ira perceber que no canto inferior direito do painel em branco tem o seguinte boto:

Clicando-o voc ir fazer uma cpia automaticamente do tipo de menu que esta na propriedade anterior a ele,por exemplo, clicando no boto "Copy Up Graphic" da propriedade "Over" ele ir por na tela para voc o menu que esta na propriedade "Up" e assim por diante, essa opo muito interessante,pois voc no precisara toda hora ficar Ctrl + C e Ctrl + V.

Bom com o menu na tela voc poder modifica-lo da maneira que quiser,poder at mesmo adicionar botes que ja vem prontos junto com o Fireworks clicando no boto "Import a Button".

Depois de tudo configurado ao seu gosto clique no boto "Done" para sair desta tela. Faa os mesmos passos para todos os menus que quiser, para visualizar como ficou as aes do seu Boto clique na guia "Preview" do Fireworks.

Ol pessoal tudo bem com vocs? Primeiro eu gostaria de me desculpar pela demora da segunda parte deste tutorial,a primeira parte o pessoal gostou muito, recebi vrios e-mails com dvidas e procurei responder a todas da melhor forma possvel. Bom, hoje eu irei mostrar como criar o logotipo, o meu em cascata e o local para banner do nosso topo,ento vamos l: Ingredientes: * Fireworks MX 2004 * Fonte Fantastic Creatures ( Fonte que contem a imagem do logotipo ) * Fonte Alliance Extended ( Fonte para o nome do logotipo ) Abram o arquivo .png do topo que vocs criaram na matria anterior, para quem no sabe este abaixo:

>>Criao do logotipo O logotipo de um website muito importante que seja bem elaborado e que agrade o visitante assim quem ele bater o olho no site, neste exemplo iremos criar um bem simples mas que dar um visual bem interessante ao layout. 1 passo: Com a ferramenta "Text Tool" e com a fonte Alliance Extended digite a palavra ( uni. ), atribua a cor #333333 e o tamanho 14,veja:

2 passo: Novamente com a ferramenta "Text Tool" escreva a palavra ( books ), atribua a cor

#996600 e o tamanho 14, ponha esta palavra ao lado da criada anteriormente,veja:

Olhe como est ficando:

3 passo: Agora vamos por a imagem do logotipo para isso utiliza a ferramenta "Text Tool", digite a letra ( q ) e escolha a fonte "Fantastic Creatures" com tamanho 79, coloque-a do jeito que mostra abaixo.

>> Criao do banner A rea destinada ao banner onde voc atravez de um sistema em php por exemplo ir admistrar os anncios dos seus patrocinadores e parceiros, banners so fundamentais em um site, os padres de banners para um topo de site de 468 x 60 pixels. Neste exemplo eu irei mostrar apenas como criar uma rea que futuramente iremos fatia-la para insero de um banner: 1 passo: Com a ferramenta "Rectangle Tool" crie um retngulo de 482 x 74 com cor de fundo # F4F4F4 com cor de borda #999999 e arredondamento das pontas em 22

2 passo: Novamente crie um retngulo,mas desta vez com a cor de fundo um pouco mais escura, neste caso escolhi #CCCCCC, no se preocupe com a cor deste retngulo, por que ai que ira aparecer o banner futuramente.

3 passo: Com a ferramenta "Text Tool" escreva a palavra ( publicidade ) acima do banner.

>> Menu em cascata Como vocs viro este layout que estamos fazendo do estilo site pequeno, ele ficaria ruim se colocasemos muitos menus em seu topo, ento para isso que existe o menu em cascata,quando passarmos o mouse em cima de algum menu do topo ele descer varias opes. Na matria anterior eu mostrei como criar botes no menu, em cada boto criado uma Slice definida pela cor verde, se esta slice for muito pequena passe o mouse por um das linhas vermelhas que cercam a slice e arraste para aumentar sua rea ativa:

1 passo: Clique em cima desta Slice verde, voc ir perceber que um alvo surgiu no meio dela:

2 passo: Clique em cima deste alvo, uma caixa de opes ir surgir, clique em "Add Pop-up Menu"

3 passo: A janela Pop-up Menu Editor ir se abrir

Logo de cara voc ve tres opes: Text - Local onde voc ira configurar o nome para as opes do menu Link - Local onde voc ira configurar o link para as opes do menu Target - Voc ira definir se a pagina ira abrir em uma nova janela ou se ela vai abrir na mesma janela Por default o programa j cria um campo de cada para voc configurar, ento basta clicar duas vezes em cima de cada campo para por as informaes. Quando voc termina de configurar automaticamente novos campos so adicionados logo abaixo, caso queria adicionar mais opes manualmente basta clicar no sinal ( + ) que fica na parte superior da janela. Veja abaixo algumas opes que eu adicionei:

Tambm possvel criar sub-opes nas opes, para isso selecione uma opo do menu (menos a primeira) e clique no cone "Indent Menu"

Perceba que a opo "Lojas" foi um pouco mais para o lado,isso quer dizer que ela vai ser uma sub opo da opo "Histria" que esta acima dela, para voltar ao normal clique no icone "Outdent Menu" que fica ao lado do "Indent Menu", mas esse no ser nosso caso. Clique no boto Next para ir para a guia "Appearance", nela que voc vai encontrar todas as opes para trabalhar com a aparncia do menu de opes.

Nessas opes voc poder configurar as seguintes aparncias: Cells - Html ou Imagem, para uma coisa mais simples escolha Html, se voc quiser definir algo mais robusto escolha image. Vertical Menu ou Horizontal Menu, voc poder definir se as opo iro aparecer na posio vertical ou horizontal. Font - Escolha a fonte das opes do seu menu. Size - Define o tamanho da fonte Ao lado de size voc ira encontrar opes para deixar em Negrito,Itlico, alinhamento a esquerda,a direita e ao centro. Up State - Define as configuraes quando o mouse no estiver em cima das opes. Over State - Define as configuraes quando o mouse estiver em cima das opes. Configure tudo da maneira que achar que fique mais bonito com o visual do seu site e clique

no boto Next. A prxima guia "Advance", nela voc ira configurar algumas coisas avanadas para a aparncia.

Veja as opes que voc poder configurar na guia "Advance": Cell width - Nesta opo voc poder definir a largura da clula como automtica ou poder definir um numero de pixel. Cell height - Nesta opo voc poder definir a altura da clula como automtica ou poder definir um numero de pixel. Cell padding - Tem basicamente a mesma funo do height Cell spacing - Nesta opo voc poder definir um espao entre as clulas Cell Indent - Voc joga os textos a direita Menu delay - Define a velocidade em que os menus vo abrir, recomendo vocs deixarem como esta

Pop - up Border - Habilite a opo Show Borders se quiser exibir bordas no menu de opes Border widht - Defina a espessura da borda Border color - Defina uma cor para borda Shadow e Highlight - Defina as cores das linhas de dentro da borda como sombra e luz Clique no boto Next para ir para guia "Position"

Na guia "Position" voc ira clicar em algum dos cones para definir a posio em que vai aparecer as opes e as sub-opes do seu menu caso haja. Bom pessoal,clique em done para salvar todas as configuraes,agora v no cone "Preview"

Ela fica na parte superior do palco, e faz com que voc visualize os menus funcionando. Por hoje s pessoal,aguardem que na prxima parte deste tutorial irei mostrar como criar a parte debaixo do site