Mostrando postagens com marcador Fireworks. Mostrar todas as postagens
Mostrando postagens com marcador Fireworks. Mostrar todas as postagens

Apostila grátis de Fireworks

Fala Galera!
Disponibilizo pra vocês uma ótima apostila sobre Fireworks, o Software mais usado hoje em dia para criação de layouts de sites, e até para algumas correções em imagens.
Essa apostila fala o básico para quem está começando com essa ferramenta, que tem várias opções para trabalharmos com texto, filters, efeitos do Photoshop, integração com outros softwares, vetores e desenhos, enfim, tudo que você precisa saber para criar lindos layouts.

Espero que gostem, qualquer dúvida postem nos comentários beleza??
Até a próxima!!
Abaixo segue o link para download...

Seu Layout: um site para baixar layouts em PNG



Você está sem criatividade para criar seus layouts?? Sem inspiração??
Seus problemas acabaram!!

Seu Layout é um site que disponibiliza layouts prontos em arquivo PNG, e o melhor: GRÁTIS!!
Você pode escolher entre várias categorias entre elas: Desin, empresarial, music, blog, hotel, hosting entre outras...

Vale a pena conferir!!

Criando um box 3D no Fireworks


Salve galerinha do Blogão do Design!! Hoje postei um tutorial bem legal e útil em muitos casos...Vamos criar um box em 3D no Fire ok??
Sigam o tuto e bom divertimento...

Dicas de Vários sites para Web Designers


Relacionei abaixo vários sites e blogs para uso dos Web Designers. São de todos os tipos, sites para download de arquivos, brushes, patterns, fontes, imagens e ferramentas de design. A maioria deles são free, outros são pagos. Isso serve de inspiração pára todos os Web designers, que às vezes não temos de prontidão para nossos projetos não é mesmo??
Bom chega de conversa, espero que gostem das dicas, se tiverem algum site/blog que por ventura não tenha citado aqui por favor, comentem e deixem o link ok? Abraços a todos...



Imagens:

http://www.sxc.hu/


http://www.everystockphoto.com/

http://www.dreamstime.com/free-photos


http://www.freepixels.com/

http://www.freejpg.com.ar

http://imagebase.davidniblack.com/

http://www.designpacks.com/

http://www.freefoto.com/


Texturas:

http://www.cgtextures.com/

http://www.gamingtextures.com/

http://free3dstextures.com/

http://www.textureking.com/

http://feel.zeroexposure.net/resources/textures

http://www.imageabstraction.com/

http://www.grungetextures.com/

http://www.kavewall.com/stock/index.html

http://www.mega-tex.nl/highqualitytextures/


Vetores e Clip Art

http://www.vecteezy.com/gallery

http://www.openclipart.org/

http://www.vectorportal.com/

http://www.vectorgraphics.info/

http://www.freevectors.net/

http://www.designerstoolbox.com/designresources/

http://www.vetorizar.com/

http://www.fuctastic.com/freebies-vectors/

http://browse.deviantart.com/resources/vector/

http://www.vectorstock.com/

http://www.clip-art.ru/

http://www.art-builders.com/

Fontes:

http://www.dafont.com/

http://www.fontsquirrel.com/

http://www.fontspace.com/

http://www.1001fonts.com/

http://www.abstractfonts.com/

http://www.fenotype.com/font/fontpage.htm

http://www.netfontes.com.br/

http://www.sofontes.com.br/

http://www.fontesgratis.com.br/

http://fonthead.com/freeware

http://www.graffitifonts.net/FreeFonts/FreeFonts.htm

Logotipos:

http://www.brandsoftheworld.com/

http://www.gmkfreelogos.com/

http://www.portalpublicitario.com/index.php?option=com_docman&task=cat_view&gid=97&Itemid=63

http://www.free-logotypes.com/

http://www.vectorportal.com/sportlogo/

http://www.logoed.co.uk/

http://www.logodesignlove.com/

Brushes:

http://browse.deviantart.com/resources/applications/psbrushes/

http://www.brushking.eu/

http://www.brusheezy.com/brushes

http://fbrushes.com/

http://shizoo-design.de/brushes.php

http://brushes.500ml.org/

http://designfruit.com/blog/category/photoshop-brushes/

http://www.damnedinblack.net/brushes.htm

Patterns:

http://www.squidfingers.com/patterns/

http://www.theinspirationgallery.com/wallpaper/index.htm

http://www.k10k.net/pixelpatterns/

http://www.portfelia.com/patterns.asp

http://fractured-sanity.org/index.php?navi=resources&site=pattern

http://everydayicons.jp/patterns.html

http://www.bgpatterns.com/

http://patterns.ava7.com/

http://www.noqta.it/dromoscopio/

Quer conhecer mais sites desse tipo?

Visite esta aqui: http://www.bluevertigo.com.ar/

Onde tirei estes dicas...

Valeu!

Download de PNG's




Quem busca nos arquivos editáveis do Fireworks fonte de estudo e até mesmo inspiração, tem a obrigação de visitar o Ultraweaver.
Embora não seja atualizado desde 2006, o site permanece com os seus arquivos intactos, e olha, são ótimos. Tem png de tudo que se possa imaginar, alguns são tão bons, que mais parecem reais, como por exemplo, um gabinete da Alienware (muito famoso por sinal) 100% vetorizado, ele é simplesmente perfeito.
Se você trabalha com o Fireworks não pode deixar de visitar o Ultraweaver.

Confira!! Vale a pena...
Abraços...

Criando um papel de parede no Fireworks




Tutorial muito legal ensinando como criar um papel de parede para a tela do seu PC com Fireworks!!
Tutorial retirado do site Oficina da Net, site do qual sou usuário a muito tempo e sempre aprendo também coisas novas, pois conhecimento nunca, nunca é demais! Como digo sempre: “a única coisa que adquirimos na vida e nunca perderemos é o conhecimento.”…

Vamos trabalhar com o Fireworks CS4, aprenderemos a fazer um papel de parede bem bacana utilizando alguns efeitos de texto como o efeito vidro.
1 – Após abrirmos o fireworks vamos em arquivo>novo , nas configurações do documentos utilizaremos 1024 px para a largura e 768 px para a altura, conforme mostra a figura abaixo;
http://static.oficinadanet.com.br/imagens/coluna/2507/01.jpg
2 – Utilizando a ferramenta Retângulo (U) vamos criar um quadrado nas mesmas dimensões do nosso documento (1024px por 768px), aplicaremos um efeito gradiente> radial;
http://static.oficinadanet.com.br/imagens/coluna/2507//quadrado.jpg
3 – Para o nosso próximo passo vamos utilizar uma imagem que peguei no Google (baixar imagem) , após salvar no computador vamos importar nossa imagem arquivo>importar (ctrl R);
http://static.oficinadanet.com.br/imagens/coluna/2507/td_importar.jpg
4 – Com nossa imagem no palco vamos trabalhar no seguinte efeito, com ela selecionada vamos ao menu comando>criativo>mascara vetorial automática marque a segunda opção na parte de forma como mostra a figura abaixo e depois clique em aplicar;
http://static.oficinadanet.com.br/imagens/coluna/2507//mascara.jpg
5 – Finalizado o fundo ele deverá ficar próximo à figura abaixo, agora vamos trabalhar com o texto para isso utilizaremos a ferramenta texto (T), após digitar o texto selecionamos e com o botão direito do mouse vamos à opção converter em caminhos (ctrl shift P);
http://static.oficinadanet.com.br/imagens/coluna/2507//caminhos.jpg
6 – Após convertemos em caminhos vamos trabalho na cor do nosso texto, vamos à opção gradiente>linear e aplique as configurações conforme mostrado na figura abaixo;
http://static.oficinadanet.com.br/imagens/coluna/2507//caminhos.jpg
7 – Agora com muita atenção vamos criar uma cópia (ctrl D) do nosso texto para que possamos aplicar o efeito vidro, para isso clicamos com o botão oposto na nossa cópia e em seguida na opção desagrupar (ctrl shift G), com todas as letras selecionadas vamos ao menu modificar>combinar caminhos>união (crtl alt U);
http://static.oficinadanet.com.br/imagens/coluna/2507//uniao.jpg
8 – Feito isso vamos trabalhar com nosso efeito vidro, primeiro passo alterar a cor do nosso preenchimento gradiente linear para branco nos dois pontos de controle, agora vamos criar um oval pegando na parte superior do nosso texto. Em seguida com o texto é o oval selecionado vamos ao menu modificar>combinar caminhos>interseção (ctrl alt U), o texto será cortado exatamente na área em que o nosso oval toca o texto, acompanhe o passo a passo mostrado na figura abaixo;
http://static.oficinadanet.com.br/imagens/coluna/2507//corte.gif
9 – Vamos da um acabamento melhor ao nosso texto, selecionamos o texto original em seguida aplicaremos uma borda branca (#FFFFFF), agora vamos em filtro>sombra e brilho>sombra;
http://static.oficinadanet.com.br/imagens/coluna/2507//borda.jpg
Coloquei apenas uma frase para finalizarmos nosso papel de parede seja o resultado final;
http://static.oficinadanet.com.br/imagens/coluna/2507//final.jpg
Bom amigos chegamos ao final do nosso tutorial, espero que vocês tenham gostado…
Abraços a todos!!!

Tutorial Fireworks - Efeito Aqua em botões


Bom galera, nesse tuto veremos como criar um efeito aqua em texto, bem simples e legal de se fazer...abraços...


::Novo documento::

Abra o FW
Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento".
Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para:
Largura: 300 pixels - Altura: 250 pixels
Cor da Tela: #FFFFFF.
Tecle OK.

::Construindo as formas básicas::

O efeito aqua é um dos clássicos efeitos que se obtém com o uso do Fireworks.
Inúmeros tutoriais foram escritos ensinando a obtenção deste efeito e aqui mais uma forma.
Siga a numeração na figura abaixo:

1-) Desenhe um retângulo com cantos arredondados no palco e ajuste suas dimensões para 250px x 50px.
Clique na marca amarela e arraste para a esquerda com a finalidade de arredondar ao máximo os cantos do retângulo.
2-) No número 2 da figura mostro o retângulo depois do arraste conforme acima explicado.
3-) Selecione o retângulo já com a forma indicada no número 2 e clone-o.
Para clonar tecle Ctrl + Shift + D;
Após clonar mantenha a tecla Shift apertada e tecle seta para baixo. Isto desloca o clone para baixo.
Vamos agora diminuir o tamanho do clone conforme mostra a figura:
Selecione o clone e tecle Ctrl + Shift + T ( ou menu Modify ==> Transform ==> Numeric Transform ). Com esta ação você abrirá uma caixa para tranformação do que foi selecionado (o clone).
Nesta caixa abra o menu de salto em cima e escolha Resize.
Deixe as duas caixinhas a esquerda em baixo, marcadas (caixas Scale Attributes e Constrain Proportions).
Digite 200 para largura e 30 para altura. Agora você está com um retângulo de 250 x 50
e outro de 200 x 30 conforme mostrado no número 3.
4-) Faça um clone deste retângulo menor e coloque-o logo abaixo dos anteriores. Veja o número 4.
aqua1

::Aplicando efeitos nos retângulos menores::

1-) Selecione o retângulo menor localizado no meio.
Aplique um preenchimento gradiente linear nas cores #FFFFFF e #006633.
Tecle na ferramenta balde de tinta ou clique com a seta preta para "aparecer" a guia de controle do gradiente e ajuste o gradiente com a cor branca em cima e a verde em baixo como mostrado no número 1.
2-) Selecione este retângulo cujo gradiente você acabou de aplicar e vá teclando
seta para cima até posicioná-lo como mostrado no número 2.
3-) Selecione o outro retângulo menor e aplique um preenchimento sólido na cor #00FF33.
e um contorno na cor #006600 de 1Pixel Soft.
Aplique o efeito Blur == > Gaussian Blur e raio 10.
Aplique transparência 85.
4-) Vá teclando seta para cima até posicionar este retângulo como mostrado no número 4

Usei neste tutorial a letra; m com fonte Arial Black, bold, 250 na cor vermelha;
aqua2

::Colocando o texto no botão::


1-) Aqui mostro o botão com as três formas básicas posicionadas.
Selecione o retângulo maior e aplique um contorno (Stroke) na cor #009900 de
2 Pixel Soft Rounded.
Aplique o efeito Drop Shadow na cor #006633 com os parâmetros 15 - 45% - 8 - 270
2-) Digite o texto a colocar no botão.
Aplique efeito sombra como mostrado no número 2.
3-) Posicione o texto no botão.
aqua3

::Algumas variações::

Abaixo três outros botões construidos com outras cores.
aqua4

Créditos para esse tutorial: http://maujor.com

Dica - Milhares de tutoriais de Fireworks - Blogão do Design

Você Gosta de Fireworks?? Já criou algum layout com essa ferramenta?? Gosta de aprender coisas novas sempre?? Então confira abaixo um lista dos melhores sites do mundo  de tutoriais, apostilas e donwloads sobre FIREWORKS!! Realmente muito conteúdo pra vocês… A Adobe também mantém um site com uma enorme quantidade de arquivos de imagem PNG gratuitas para Download!


 Abaixo a lista:

Adobe Support: Fireworks Tutorials

Free Fireworks 8 vídeo tutorials

Qrayg Fireworks Tutorials

Adobe Fireworks Design Center

Adobe Design Center Vídeo

Tutorialized.com

Firetuts.com

Fireworkszone

Fireworks Product Page

Fireworks Guru Forum (Fórum)

A Adobe também mantém um site com uma enorme quantidade de arquivos de magem PNG gratuitas para download. Acesse Fireworks Developer Center.

É isso aí pessoal…Fico por aqui, se você conhece mais algum site, blog sobre Fireworks, poste seu comentário aqui ok?? Ficaremos muito contentes…
Abraços…

Tabela com cantos arredondaddos no Dreamweaver

Tutorial muito legal tirado do site do maujor que disponibilizo pra vocês!! deixem seus comentários aqui no 'blogão'...abraços a todos...


Neste artigo abordarei o uso do (FW) Fireworks e (DW) Dreamweaver para obter um efeito de bordas arredondadas em tabelas. O objetivo é "quebrar" aquela apresentação fria, quadrada e padrão do formato retangular das tabelas tão usadas para definir layouts. É uma maneira bastante simples de se obter um visual diferente e o exemplo que vou seguir tem como finalidade apresentar a técnica geral. Com criatividade você conseguirá outros efeitos. ESTE TUTORIAL SUPÕE QUE VOCÊ TEM NOÇÕES BÁSICAS DE MANIPULAÇÃO DAS FERRAMENTAS DO FW e do .
O efeito final que a que nos propomos está ilustrado na figura abaixo:

Um retângulo claro claro em fundo escuro, com bordas arredondadas

Uma tabela com os quatro cantos arredondados.
Vamos assumir que o fundo geral da página é na cor cinza escuro (#666666) e o fundo da tabela é na cor cinza claro (#EEEEEE), como mostrado na figura acima.
Observe na figura abaixo uma visão "raio X" da tabela:

Mostra as células da tabela ressaltando os quatro cantos 
arredondados
Trata-se de uma tabela com 03 linhas e 03 colunas. A célula marcada com o número 1 destina-se ao conteúdo (um texto no caso mais comum ou uma figura ou um formulário, etc..) da tabela. As células marcadas com o número 2 são os quatro cantos arredondados da tabela. Vamos admitir para o nosso exemplo que as células dos cantos têm as dimensões de 25 x 25 pixels.
Vamos ao FIREWORKS, construir os cantos arredondados. Existem várias maneiras de você criar os quatro cantos. Não está em discussão neste tutorial qual a melhor delas. Se você tem uma maneira diferente desta que usei, vá em frente! Use-á.



Parte 1 - FIREWORKS

Abra o FW - (Óbvio!) :-) Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento". Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para Largura: 50 pixels - Altura: 50 pixels - Cor da Tela: transparente. Tecle OK.
Construa um quadrado de 50 x 50 ocupando todo o palco, sem bordas e com cor do preenchimento #666666. Atenção: o preenchimento do quadrado deve ser com mesma cor do fundo da página. A seguir construa um círculo com 50 px de diâmetro, sem bordas e com cor do preenchimento #EEEEEE. Atenção: o preenchimento do círculo deve ser com mesma cor do fundo da tabela. Você agora está com uma figura igual a mostrada abaixo:

Mostra o círculo descrito acima
Vamos agora transformar nossa figura em BITMAP. Selecione as duas figuras que você criou abra o menu "Modificar ===> Nivelar seleção" (ou tecle Ctrl+Alt+Shift+Z) e você agora tem uma imagen bitmap.
Ver figura abaixo: 1- Selecione a ferramenta "Cortar". 2- Ajuste suas dimensões para 25 x 25 e seu canto superior esquerdo em cima do canto superior esquerdo do bitmap criado. 3-Vamos cortar o canto arredondado superior esquerdo! Dê duplo clique dentro do "quadradinho" do cortar e Zás. 4- O primeiro canto está pronto. Exporte e salve com o nome sup_esq.gif

Mostra a ferramenta cortar sobre um quadrante do círculo
Vamos a construção dos três cantos restantes. Abra o arquivo recém criado sup_esq.gif Ver figura abaixo: Selecione o desenho e vá no menu "Modificar ===> Transformar ===> Inverter Horizontalmente"

Mostra como cortar o canto superior esquerdo

Com essa ação você inverte a figura na horizontal e obtém o canto superior direito. "Salve" a figura como sup_dir.gif A estas alturas você já descobriu como construir as duas que faltam não é mesmo? O procedimento é o mesmo, selecione a figura que você acabou de "salvar" e vá ao menu "Modificar,Transformar,Inverter Verticalmente" você obtém a inf_dir.gif De modo semelhante obtenha inf_esq.gif

Mostra como cortar o canto superior direito
Abaixo estão os quatro cantos para você transferir para seu HD, caso não queira construí-los. Clique com botão direito do mouse sobre a figura e "Salvar figura como".
canto superior esquerdo sup_esq.gif
canto superior direito sup_dir.gif
/tutorial/ inf_esq.gif
canto inferior direito inf_dir.gif

 

Parte 2 - DREAMWEAVER

Abra o - (Óbvio!) :-) Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento". Abra um novo documento (Página básica-HTML). Tecle OK.
Ajustando a cor do fundo da página; No menu "Modificar" selecione "Propriedades da Página" (ou tecle Ctrl+J), para abrir a caixa das Propriedades da página. Digite o Título da Página e ajuste a cor do fundo para #666666. Tecle OK Ver figura abaixo:

Mostra como definir a cor do fundo

Inserindo a tabela; 1- selecione a aba "Tabelas"; 2- Clique no ícone das tabelas para abrir a caixa "Inserir Tabelas" (ou tecle Ctrl+Alt+T); 3- Ajuste os parâmetros de construção da tabela conforme a figura abaixo e tecle OK.

Mostra como inserir uma tabela

Selecione a aba "Layout" e a "Visualização padrão", para ter a tabela neste modo, na janela de visualização. Ver figura abaixo:

Mostra a tabela inserida

Vamos inserir as imagens dos cantos arredondados nas células correspondentes: Ver na figura acima: CÉLULA A - figura sup_esq.gif CÉLULA B - figura sup_dir.gif CÉLULA C - figura inf_esq.gif CÉLULA D - figura inf_esq.gif
Para inserir a figura na célula A: Clique dentro da célula; Menu "Inserir", "Imagem" (ou tecle Ctrl+Alt+I) para abrir a caixa de origem do arquivo de imagem. Selecione a imagem sup_esq.gif e tecle OK. Faça o mesmo com os três cantos restantes e você terá uma imagem como a figura abaixo:

Mostra os cantos inseridos nas celulas

Coloque o cursor em cima da linha 1 e arraste para a posição 2. Faça o mesmo de 3 para 4. Sua tabela ficará como na figura abaixo:

Mostra como ajustar os cantos na posição

2- mude a cor do fundo da tabela digitando a cor #eeeeee no campo correspondente. 3- clique no ícone de tabela e sua tabela assumirá o aspecto abaixo:

Mostra a tabela pronta

Coloque o cursor na célula F e digite seu texto. Nota: Como você já deve ter percebido as células E e G podem ser preenchidas com conteúdo, mas sem ultrapassar sua altura, no caso 25 px. A célula F pode expandir-se a vontade sem interferir com os cantos arredondados. (Faça experiências para analisar!).
Abaixo um exemplo de aplicação de tabela com canto arredondado construido na tabela gerada conforme esta matéria:

Mostra a tabela com uma texto de 10 linhas escrito

É isso pessoal!
E, agora a melhor parte do novo aprendizado. Os exercícios e pesquisas individuais e novas descobertas :-)
Crie outros arquivos e experimente:
...coloque cantos chanfrados na sua tabela;
...
construa uma figura para inserir nas células E e G (ver segundo desenho acima), que se integre com os cantos!
...e milhares de outras combinações! ...DESCUBRA A VERSATILIDADE DAS FOLHAS DE ESTILO EM CASCATA. Um abraço e até a próxima.