Blog
Our Blog| Blog Home | About | Entries By Date | Search |
|
Posts
Entry:
"Participe das palestras sobre tecnologias
Adobe da Creative Suite 5.5 em um Sábado que vai marcar Niterói" :) Keywords: AUGbr, palestra
Entry: Pequeno efeito [bolha] de luz no Adobe fireworks:: tradução: Lucas Holtz Mano (lholtzmano@gmail.com) Este tutorial simples vai te ensinar a criar um pequeno efeito decorativo de luz [bolha]. #1Primeiramente, vamos criar um background preenchido com gradiente conforme segue. [pode ser um retângulo com gradiente do tipo Bars ou Radial] [utilize cores escuras ou use transparência sobre um fundo preto]
#2Desenhe uma curva vetorial. [você pode ajustar a curva com a ferramenta Subselection - seta branca]
#3[Com a curva selecionada] No painel de propriedades, selecione o contorno 'Oil > Splatter'. Aumente ou diminua o diâmetro do contorno conforme sua necessidade. [se necessário, "zere" a porcentagem do efeito de textura]
#4Adicione algum efeito de inner glow e glow.
#5Efeito final.
[este efeito também é conhecido como bokeh] Keywords: traduções, efeito de luz, efeito bolha de luz, bokeh
Entry: Contornando formas com textos:: tradução: Lucas Holtz Mano (lholtzmano@gmail.com) #1.Para quebrar um texto ao redor de um objeto, você precisa primeiro criar a forma que irá conter o texto. Em nosso exemplo, estamos contornando o texto em volta de um círculo. #2.Desenhe um círculo de 177x177px de diâmetro e um retângulo de 277x160px que será o recipiente para o texto.
#3.Certifique-se de que o círculo esteja cobrindo o retângulo. Selecione os dois e vá em [menu] "Modify > Combine Paths > Punch".
#4.Digite um texto. Selecione o texto e a forma e vá em [menu] "Text > Attach In Path" e seu texto seguirá a forma.
[nota: no Firewroks CS 5.5 o texto permanece editável memso após o comando] [outro modelo]
#5.Outras Formas Formas que você pode usar para receber os textos.
#6.Limitação (ões) O texto deve ser inserido em uma forma fechada e não funciona com o Auto Shapes a não ser que você as desagrupe. Keywords: traduções, caixas de texto
Entry: olá membros do grupo! é com muita honra que divulgo a foto do ganhador da camiseta do terceiro encontro: marcos reis! demorou pq foi de são paulo até maceió!! além disso, ele mandou fazer uns ajustes, para cair ainda melhor e fazer bonito, morri de orgulho! bjs e boa sorte à todos nos próximos sorteios... ps - é marcos, confesso q tb dou uma ajustadinha nas minhas... tamanho americano é fogo :) Image: 
Keywords: sorteio, camiseta
Entry: Como criar sua própria textura com o Fireworks CS5.1Criando textura
Este é o meu primeiro contributo, em matéria de tutoriais e espero, sinceramente, que dê asas à imaginação de quem gosta de trabalhar com Fireworks. A matéria que trago nesta minha estréia tem a ver com a criação de texturas. Como nós sabemos, o Fireworks nos traz por padrão, várias texturas, mas nem sempre encontramos uma que realmente nos agrade ou que seja a mais apropriada para o projeto que estamos desenvolvendo. Pensando nisso, resolvi escrever este tutorial e quero mostrar a vocês, que nós também podemos desenvolver nossas próprias texturas. Vamos lá! 1° – Passo: Abriremos um novo documento (Atalho = ctrl + n), no tamanho 100px width por 100px height, com a cor de fundo em branco. O Fireworks CS5 possui algumas texturas prontas no formato .png que ficam armazenadas em C: >> Arquivos de Programas >> Adobe Fireworks CS5.1 >> Configuration >> Textures e nesta pasta, verifiquei que os arquivos padrão disponibilizados variam de tamanho, sendo a textura Sandpaper, por exemplo nas dimensões de 96px por 93px e a textura Grain nas dimensões de 128px por 128px. Sendo assim, o tamanho e a cor proposta para este tutorial, servem como sugestão, pois você pode trabalhar com o padrão que for mais conveniente para o seu projeto.
2° – Passo: Para um trabalho 100%, iremos utilizar a régua e a grade. Então, na aba superior, clique em Exibir e habilite a visualização da régua e edite sua grade. Editarei a minha grade para ser visualizada com espessura 25px para width e height, na cor cinza (#666666).
3° – Passo: Selecione a ferramenta Polígono (Atalho = U). Repare que na caixa de propriedades você tem a possibilidade de configurar as propriedades da ferramenta Polígono. Então, defina-o com 6 pontas.
4° – Passo: Bom, agora selecione a ferramenta Polígono (atalho = U), na caixa de propriedades, escolha a cor preto (#000000) ou de sua preferência para o preenchimento desta forma e, segurando o shift, crie uma forma no palco no tamanho 70px width por 70px height e centralize-a na horizontal e na vertical para perfeita visualização no centro da tela. Note que para este trabalho, estou utilizando a visualização de 400% para trabalhar com mais precisão e visão da minha forma e das grades.
5° – Passo:
Agora vamos duplicar a nossa camada atual (Atalho = Ctrl + Shift + D), para podermos começar as separar as partes da figura polígono e montarmos a nossa textura.
6° – Passo:
Selecione a ferramenta Faca (Atalho = Y), e faça um corte na imagem polígono, no sentido horizontal como segue.
7° – Passo:
8° – Passo:
9° – Passo: Para juntar os pontos abertos, utilizaremos a ferramenta Subseleção (Atalhos = A, 1). Vamos marcar estes pontos e em seguida, no painel "Caminhos", e em "Editar Pontos", vamos selecionar a opção "Juntar Pontos".
10° – Passo: Vamos fazer o mesmo procedimento dos passos 7° e 8° , porém na camada inferior, marcando-a para visualização e desmarcando a camada que utilizamos.
11° – Passo: Pronto! Agora temos duas camadas prontas para serem separadas novamente! Para isso, utilizaremos a ferramenta Faca (Atalho = Y) e faremos o corte no sentido vertical, mas isso com as duas partes da imagem Polígono sendo visualizadas e selecionadas (pode-se apertar Ctrl e clicar nas camadas para selecioná-las juntas), no painel "Camadas".
12° – Passo: O resultado será um total de cinco camadas:
13° – Passo: Para finalizarmos a visualização do nosso trabalho de textura, precisaremos apenas selecionar uma camada por vez e posicionar os elementos de acordo com a montagem da textura. Utilizei o painel "Alinhar" para posicionar todas as partes corretamente.
14° – Passo: Vamos habilitar a visualização da última camada onde está nossa figura base e exportar nossa imagem através do menu "Arquivo" na aba superior, opção "Exportar". Você pode exportar para a pasta de sua preferência ou instalar a textura diretamente na pasta específica do Fireworks (C: >> Arquivos de Programas >> Adobe Fireworks CS5.1 >> Configuration >> Textures), para que se torne textura padrão.
15° – Passo: Para testarmos nossa textura, vamos criar um novo documento (Atalho = ctrl + n), no tamanho e cor de sua preferência. Vou criar meu novo documento no tamanho de 500px width por 500px height, com a cor de fundo em branco e vou utilizar a ferramenta Retângulo (Atalho = U) para teste da textura. No painel de Texturas, você deverá escolher a textura polígono se tiver instalado o arquivo na pasta de Texturas do Fireworks, ou se em uma pasta diferente, deverá selecionar a opção outro e apontar o caminho da sua textura.
16° – Passo: Pronto! Aplicamos a textura! Agora você pode finalizar a edição da sua textura fazendo alterações de cores e transparência.
Bye bye: Bom, por hoje é só pessoal :) Agradeço muito pela atenção e espero que tenham gostado deste tutorial e que eu realmente tenha ajudado na criação de vocês! Brevemente postarei outros tutoriais com novidades para todos. Beijos, Marta Roberta Teles Keywords: textura, patterns
Entry: Cinco passos fáceis para criar um código de barras no Fireworks:: tradução: Lucas Holtz Mano (lholtzmano@gmail.com)
1º Passo.Selecione a Pencil Tool [área de Bitmap] com a cor preta e certifique-se de que as opções Anti-aliased e Auto erase estão desmarcadas. Segure Shift e desenhe linhas randômicas. [dica: clique em pontos para cima e para baixo no desenho, acim como em pontos para a direita e para a esquerda] Você deverá ter algo parecido com isso:
2º Passo.Certifique-se de que a camada do bitmap está selecionada e crie uma caixa de seleção em qualquer lugar da imagem com uma largura qualquer e altura 1 usando a Marquee Tool. Clique com o botão direito na seleção e escolha "New Bitmap Via Copy".
3º Passo.Agora que você já tem o que precisa, delete a camada do desenho original (as linhas randômicas). Nesse momento, você deve ver apenas alguns pontos alinhados. Aumente a altura desse desenho usando a Free Transform Tool ou colocando a altura desejada do código de barras no Properties Panel.
4º Passo.Todos sabemos que códigos de barras têm números. Usando a Marquee Tool, selecione um pedaço do código de barras como ilustrado abaixo, e aperte Delete. Adicione alguns números randômicos espaçados neste lugar.
5º Passo.Seja criativo! Adicione texto ao invés de números, ou ambos.
Keywords: traduções, código de barras
Entry: A ideia é tão simples que parece mágica! E o resultado, nem se fala! Criar ícones minúsculos é sempre um desafio: cores reduzidas, detalhes ao mínimo, simplicidade ao máximo... Veja algumas dicas sobre o planejamento de ícones:
No caso de ícones vazados, o drama podia ficar bem sério. Agora você verá como fazê-los com qualidade. Segundo o artigo original, a técnica foi desenvolvida por Rogie King (http://methodandcraft.com/authors/rogie-king). Ele conta que durante muito tempo criou ícones usando uma combinação de várias formas e caminhos com ferramentas de mesclagem, como união, corte e intersecção. No tutorial, ele explica a técnica de usar grupos de formas com o filtro Converter em alfa (Convert to alpha). Este é o artigo original (em vídeo): http://methodandcraft.com/videos/fireworks-icon-technique Tudo começa com o desenho: uma combinação de formas e traços. Nesse caso o tamanho do círculo é 24x24px:
Mais duas elipses para os olhos com 5x13px cada:
E a boca feita com a ferramenta Caneta:
(tudo está sendo visualizado com ampliação de 400%) Da forma mais usual, você poderia simplesmente selecionar os caminhos a aplicar o comando Perfurar caminhos, mas observe algumas falhas. Juntar os olhos e aplicar o comando Perfurar – repare como os olhos ficaram menores do que o original (a imagem da esquerda é o antes e a da direita é o depois):
A boca fica completamente diferente:
Nesse caso, como é um caminho, você poderia antes transformá-lo em preenchimento, usando o comando “Converter traçados em preenchimento” do painel “Caminho”.
Agora vamos à mágica. O desenho é o original, sendo a parte preta a que vai ficar visível no seu ícone e a parte branca a que vai desaparecer com o efeito alfa. Selecione todos os elementos do ícone e agrupe-os. No painel “Propriedades”, clique no botão “+” da opção “Filtros”, clique “Outro” e “Converter em alfa”.
Notou que o original e o “furado” estão iguais? Troque o fundo da sua tela de desenho para visualizar melhor o resultado...
Como vantagem adicional, você poderá trocar a cor do ícone também utilizando o filtro “Ajustar cor” e “Preenchimento de cor”.
Confesso que fiquei encantada com a técnica e achei muito simples e prática, assim como deve ser o uso das ferramentas no nosso dia a dia, sempre para simplificar e ajudar! bjs, ps - anexo o meu arquivo do fireworks para quem precisar, com todas as imagens do processo. Keywords: ícones, filtros, alpha, alfa File: icones_alfa.png (86 Kb)
Entry: Dicas para a ferramenta Subselection
Você conhece a ferramenta Subselecion? É a ferramenta de seta branca, ao lado da seta preta de seleção... Com ela você faz algumas coisas bastante úteis:
Mas não é só isso. Com o auxílio da tecla ALT ela cria, em um nó selecionado, segmentos de controle para uma curva. Acompanhe as imagens abaixo. #1Este é um desenho simples de um gato e sua cartola, feito com polígonos e segmetnos de reta. Observe que a cartola foi feita com a ferramenta retângulo, 2 retângulos para ser mais exata.
#2Selecione a parte superior da cartola com a ferramenta Pointer (seta preta) ou com a ferramenta Subselection (seta branca). Se você usar a ferramenta Pointer o resultado é este:
Se você usar a ferramenta Subselection o resultado é este:
#3Com a ferramenta Subselection, clique no nó que você deseja editar.
Observe que, sendo este objeto um retângulo, o programa avisa que irá desagrupá-lo e transformá-lo em um vetor. Clique no botão OK.
#4Selecione novamente o retângulo (ferramenta Pointer ou Subselection) e clique novamente no nó que deseja editar (ferramenta Subselection). Veja que agora o nó fica selecionado.
#5Ainda com a ferramenta Subselection, pressione a tecla ALT e mantenha pressionada enquanto clica e arrasta para o lado que deseja criar o segmento de controle para a curva.
#6Repita o procedimento para os outros nós da cartola.
#7Para não receber a mensagem de que é necessário converter o polígono em curva (passo #3), você pode desagrupá-lo antes de iniciar as alterações dos nós. Para isso, basta selecionar o elemento (ferramenta Pointer ou Subselection) e clicar novamente com o botão direito do mouse e escolher a opção Ungroup. Veja um exemplo com o segundo retângulo.
Agora basta usar a ferramenta Subselection para alterar os nós.
:) Divirtam-se! Abraços, ps: no anexo está o arquivo PNG do início e do final utilizado neste post. Keywords: dicas, subselection File: gato.png (87 Kb)
Entry: encontro confirmado> 02/06 - 9h30 - ENG DTP & Multimídia - Rua Alvarenga, 744, Butantã (11)3816.3000 novidades da versão CS6 do firewroks e dreamweaver. dica: a eng fica próxima ao metro butantã. o encontro é aberto à todos, apenas os sorteios serão fechados para os membros do grupo. participem! bjs, ana laura gomes Image: 
Entry: Nova extensão para o Fireworks (a partir da versão CS5): Adobe Fireworks CSS3 Mobile PackEsta extensão tem como funcionalidade criar, rápida e facilmente (e dentro dos padrões), designs para celulares dentro do Fireworks CS5. Dentro do pacote Fireworks CSS3 Mobile Pack você irá encontrar um novo painel CSS3 Property, que que oferece uma abordagem perfeita para extrair CSS a partir dos elementos de design do Fireworks. Além disso, a ferramenta jQuery Mobile Theme Skinning ajuda a modificar o padrão de swatches do jQuery Mobile e gerar suas próprias cores para o CSS e sprites (que vão funcionar fora da caixa com o framework jQuery Mobile). Isso tudo é o que diz a página inicial do adobe labs. Agora é baixar e testar! http://labs.adobe.com/technologies/fireworks_css3mobile/ Façam seus testes e deixem suas impressões nos comentários! O grupo agradece!! ps - dica fresca do Adobe Fireworks no FB. Abraços, Ana Laura gomes Keywords: extensions, mobile |
Filter by Date
Filter by TagAllDesign Development Event Interactive Experience Mobile News Rich Internet Apps Video Change View
Titles Change Sort
Alphabetically |
|||||||||||||||||||||||||||||||||||||||||||||||||
>> 
Copyright © 2013 Adobe Systems Incorporated. All rights reserved.
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).
Site powered by the all powerful, super charged, amazing ColdFusion 9!