Novos Recursos Edge Animate: Responsive Scaling e Center Stage

Olá, pessoal!

Hoje quero falar um pouquinho dos novos recursos nativos do Edge Animate CC:

Responsive Scaling e Center Stage.

O Responsive Scaling nos permite transformar nosso projeto com dimensões fixas em um projeto responsivo, se adaptando a qualquer resolução de tela.

O Center Stage, como o próprio nome já diz, posiciona nosso projeto exatamente no centro da tela.

Para iniciar nosso projeto, eu defini valores fixos ao Stage (900 x 400 pixels).

Importei as imagens necessárias para a biblioteca de imagens.

Neste projeto, apenas uma imagem de background e uma imagem de bolha.

Criei um símbolo com a bolha no Edge Animate e dentro do símbolo, fiz várias cópias da mesma imagem, redimensionando-as também.

Com as bolhas prontas e antes de iniciar o deslocamento de posição, habilitei os “motion paths”, para criar caminhos em curvas para a subida das bolhas.

Após o deslocamento das bolhas ao topo (marcação na timeline de 0 a 3 segundos), comecei a curvar os caminhos.

Repare que nesta nova versão, quando aproximo o cursor do mouse do caminho a ser alterado, posso visualizar os atalhos para edição do path.

Após a finalização dos paths, iniciei o deslocamento de tempo das bolhas na timeline, para criar um efeito mais real das bolhas sendo carregadas de baixo para cima.

Terminada a animação dentro do símbolo, precisei retornar ao Stage para também animar as bolhas.

Fiz uma animação também de 3 segundos, movimentando o símbolo das bolhas da esquerda para a direita e para melhorar um pouco mais, desloquei do rodapé para o topo também.

Terminada a animação, precisamos inserir as”actions” diretamente no “Stage”, para criarmos um efeito “Parallax” no deslocamento hotizontal.

Primeiro, iremos capturar os movimentos do mouse (eventX e eventY).

Depois precisaremos “informar” à timeline, qual será o deslocamento e o tempo (neste caso, 3 segundos).

Neste ponto já poderemos testar nossa animação, mas não se esqueça que para ficar legal de verdade, é necessário inserir uma ação de loop (play from), para a timeline e para o símbolo.

Com a ação, teremos um efeito de loop e poderemos testar o parallax por repetidas vezes.

Para finalizar e dar um acabamento com as novas funcionalidades, poderemos habilitar as opções de Responsive Scaling e Center Stage (ambos na horizontal), para a “finalização responsiva” do nosso projeto.

Terminado o nosso projeto, é só publicar e ser feliz 😀

Espero ter contribuído com a galerinha daqui e brevemente postarei sobre uma outra nova funcionalidade: áudio nativo no Edge Animate CC.

Por hoje vou me despedindo, mas peço a todos que compartilhem idéias e gostaria de ver algumas até publicadas por aqui ou lá no grupo oficial com essas funcionalidades.

Link do grupo Adobe Edge Animate BR:

 http://edgeanimatebr.groups.adobe.com/

Segue o link para baixar o exemplo e testar 😀

Baixar Demo.

Redimensione sua tela do browser, deslize o cursor do mouse para a esquerda e para a direita e, visualize o efeito parallax.

Bjs para todos e obrigada 🙂

Marta Roberta Teles

Inaugurando o Grupo Oficial Adobe Edge Animate BR

Olá, pessoal!

É com muita alegria que venho comunicar a criação do novo grupo Adobe Edge Animate BR:

http://edgeanimatebr.groups.adobe.com/

Estão todos convidados para conhecer esta fantástica nova ferramenta da Adobe que nos possibilita a criação de banners, apresentações, projetos interativos, infográficos e muitas, mas muitas animações fantásticas.

Totalmente adaptado para os browser modernos, o Edge Animate tem como arquivos finais o HTML5 com CSS3 e Javascript.

Para participar do grupo, você precisará possuir ou cadastrar uma nova Adobe ID.

Para saber como cadastrar uma Adobe ID ou ainda para tirar algumas dúvidas, acesse a página de ajuda: HELP ADOBE.

Aproveite e conheça um pouco mais das idéias e normas do grupo para uma boa convivência em grupo, visitando a nossa página ABOUT.

Fique à vontade para participar e interagir neste grupo.

A idéia é criarmos nossos próprios conteúdos, compartilharmos idéias e podermos desenvolver assuntos desde o nível básico, até o avançado.

No grupo Edge Animate BR você poderá participar enviando suas dúvidas ou sugestões através do nosso Fórum ou acompanhando e interagindo através dos nossos Posts.

Lembrando que para participar e receber as atualizações do grupo ou dos nossos encontros presenciais e on line, você precisará registrar-se neste grupo com a sua Adobe ID.

Participe, divulgue e aprenda muito mais.

Participe também e acompanhe nosso grupo nas redes sociais:

Facebook & Twitter

Sempre com muitas novidades!

Abs,

Marta Roberta Teles

Palestra Adobe Edge Animate CC – 23/10/2013

Olá, pessoas!!!

Mais uma palestra de Edge Animate \o/ realizada no dia 23/10/2013 no DRC Treinamentos.

Lá vai uma prévia do que rolou:

Tivemos uma breve apresentação da Creative Cloud com suas vantagens para assinatura.

Passamos também por um introdutório sobre o Edge Animate & Tools.

No Edge Animate, apresentei e demonstrei possibilidades e ferramentas para um trabalho de maneira intuitiva, com criação de conteúdo interativo para as múltiplas plataformas.

Conhecemos um pouco mais do design responsivo e possibilidades com Edge Animate e Edge Reflow.

Conhecemos ainda a nova integração do Photoshop com o Edge Reflow:

– O recurso Generate > Edge Reflow Project está sensacional!

Como sempre, não faltou ninguém 🙂

Tivemos presença registrada do Edge Inspect, Edge Reflow, Edge Code, PhoneGap Build e soubemos quais são as diferenças entre o Edge Typekit e Edge Web Fonts.

Quer saber mais?

Não perca a próxima palestra ou confira o calendário de cursos no DRC Treinamentos 😉

É isso aí pessoal! Até o próximo post e meu enorme agradecimento às pessoas que puderam comparecer!

Beijo grande para todos  😉

 

 

 

 

 

10 Razões para usar o Adobe Edge Animate CC

O Adobe Edge Animate tem sido apontado como um substituto para o Adobe Flash. Embora isso possa ser uma ilusão para aqueles que estão prontos para se mover além da era Flash, ainda é muito cedo para fazer essa afirmação. No entanto, o Edge Animate é uma poderosa ferramenta: um software intuitivo que te permite criar animações interativas para a web, iBooks e apps.

Aqui estão dez grandes razões para começar a usar o Edge Animate:

1 – HTML5 , JavaScript e CSS trabalhando em conjunto:
Adobe Edge Animate gera o arquivo final em HTML5, com JavaScript e CSS. Esta é uma grande notícia para os desenvolvedores e designers que não trabalham com os códigos.

A boa notícia para os desenvolvedores é que eles podem editar o código para melhorar suas animações e personalizá-las.

A boa notícia para os designers é que eles podem fazer animações funcionais e eficazes , sem saber uma única linha de código.

2 – O stage já é layout do navegador:
O stage é a parte da interface do Edge Animate onde você faz a maioria do seu trabalho de design.

O que é ótimo sobre o stage é que ele se comporta como uma janela do navegador. O que você visualiza no stage é o que você veria se estivesse com seu projeto publicado e visualizado em um navegador moderno .

Você pode até mesmo visualizar a animação diretamente do stage.

Há algumas limitações: Por exemplo, você não pode visualizar ações , como loops e cliques, no stage. Mas isso é um pequeno obstáculo no na grande quantidade de recursos .

3 – Símbolos reutilizáveis:
O Edge Animate permite criar símbolos. Com símbolos , você pode salvar elementos ou grupos de elementos, e suas ações associadas para reutilização em outros projetos. Por exemplo, se você criar uma apresentação de slides usando o Edge Animate e salvar o projeto como um símbolo , você pode exportá-lo para o seu desktop e , em seguida, importá-lo para um outro projeto do Edge Animate.

Se você prefere um fluxo de trabalho mais rápido, você pode até mesmo copiar e colar um símbolo de um projeto para outro . Símbolos são uma ótima maneira de poupar tempo e energia quando se trabalha com elementos comuns que você gosta reutilizar.

4 – Web design responsivo:
A próxima grande coisa para web design é o que torna ágil ( claro e fácil de usar em uma ampla gama de tipos de dispositivos e tamanhos ) . Apenas alguns sites atualmente pode se gabar de um web design responsivo. Quando você visualizá-los em ação , certamente será impressionante.

Se você pode  criar uma única animação que será visualizada da mesma maneira e com a mesma qualidade em um monitor de 30” ouem uma tela de smartphone de 4″ como a do iPhone.

5 – Importando fontes:
A Adobe sabe que há mais do que apenas as fontes Arial e Helvética. É por isso que eles desenvolveram a ferramenta eficaz para importar de forma simplificada, as fontes de vários sites como as fontes da web do Google , Typekit e muito mais.

6 – Ferramentas de desenho familiares:
Se você já usou uma ferramenta de desenho da Adobe para desenhar um retângulo ou um círculo , você já saberá instantaneamente como fazer isso no Edge Animate, pois temos um Menu de desenho.

A Adobe tornou super fácil a adição de elementos para o palco e, assim você pode criar tudo, desde quadrados até círculos perfeitos (e animar!) . As ferramentas de desenho incluem uma ferramenta de texto, ferramenta retângulo, ferramenta elipse , e muito mais.

7 – Timeline intuitiva:
A Timeline (linha do tempo) é onde você cria as animações com keyframes.  Depois de descobrir como ela funciona, você pode usar a linha de tempo para dar vida às suas animações.

8 – Interatividade:
Você não tem precisa se contentar com animações simples para sentar e assistir passivamente . Oh , não! Você pode clicar ativamente com um mouse, ou adicionar eventos de touch para um tablet, para executar ações diferentes. Por exemplo, de links para disparar loops, e muito mais!

Você pode criar animações tão variadas como um livro de animação para crianças ou até uma página inteira para um restaurante.

9 – Área de trabalho personalizada:
Nem todo mundo trabalha da mesma forma. Nem todo mundo aprecia os mesmos pontos de vista. Com base nisso, a Adobe fez a interface de Edge Animate extremamente personalizável.

Você pode até salvar visualizações personalizadas para uso posterior. Se você acidentalmente fechar um painel e não conseguir encontrá-lo , você sempre poderá reverter para o modo de exibição padrão .

10 – Uma ferramenta de animação que qualquer um pode usar:
Edge Animate é uma daquelas ferramentas que muitos tipos diferentes de pessoas podem apreciar. Se você é um designer profissional que não conhece o código, você ainda pode criar animações complexas . Se você é um desenvolvedor que quer adicionar alguns recursos extras a um projeto, então você pode fazer isso também.

Por outro lado, se você é um estudante ou um amador que só quer brincar com algo novo e inovador , então você também não pode deixar de experimentar. Quem sabe? o seu hobby poderia se tornar sua profissão!

Esta é uma tradução e a matéria original está publicada: Por Michael Rohde da Adobe Edge Animate CC For Dummies em http://www.dummies.com/how-to/content/10-reasons-to-use-adobe-edge-animate-cc.html

 

Bjs e até o próximo post!

 

Mentir pra si mesmo é sempre a pior mentira

Olá, galerinha que me acompanha!

Estava lendo umas coisinhas aqui e outras ali, quando me lembrei das perguntas que as pessoas me fazem com relação às mudanças no meu estilo de vida.

Por coincidência ou não, me deparei com uma história muito parecida com a minha trajetória de vida, o que me inspirou de vez a escrever este post.

Por volta dos meus 20 aninhos, eu havia traçado uma meta na minha vida: trabalhar e crescer em uma grande empresa, ter alguma experiência viajando, um cargo de destaque e lógico que não poderia faltar,  “casa, comida e roupa lavada” (risos).

Depois de ter alcançado estes meus objetivos, ficou a questão do “e agora, o que mais?” Este desafio não me preenchia mais, sentia um grande vazio, uma desmotivação enorme.

Fiquei mais de um ano sem saber a resposta para a desmotivação que eu sentia mesmo tendo atingido tudo o que havia desejado. Para ser mais objetiva diria que o mais difícil foi admitir para mim mesma que precisava buscar outro caminho.

Eu já sabia que não seria nada fácil, mas com certeza me faria mais feliz.

Nesta época trabalhava somente na cidade de São Paulo, mas tinha uma vontade enorme de mudar… mudar mesmo!

Mudar de trabalho, mudar de cidade, mudar, mudar! Queria mudar minha rotina completamente! Conhecer lugares, coisas e pessoas novas.

Foi então que paralelamente a minha faculdade e ao meu trabalho fixo da época, comecei a investir muito mais nos estudos, fazendo treinamentos também.

Resolvi partir de vez para as ferramentas Adobe, como o Flash (meu amor a primeira vista), Photoshop, Dreamweaver, Illustrator e Fireworks… Atualmente, acrescento à lista, o Adobe Edge Animate e o Muse.

Ficava fascinada quando via uma animação ou um belo job na web e queria saber mais e mais.

Passei a estudar programação e a cada novo trabalho que eu era capaz de executar, sentia-me realizada!

Estava eu entrando de cabeça no mundo Front-End…

Fiz vários freelas (continuo fazendo, ok? risos).

Com esses trabalhos paralelos ao emprego fixo que eu tinha,  pude dar um tempo para mim também.

Engravidei da minha filha e não pensei duas vezes… lá fui me aventurar nos “freelas” das agências e, em uma licença não remunerada por dois anos.

Sabia que deveria mudar meu caminho, mas não sabia se o caminho que eu havia escolhido era o caminho certo. Algumas vezes a grana era tão curta que pensava em desistir dos treinamentos e cancelar minha licença, mas logo caí na real e percebi que havia levado 10 anos para chegar onde havia chegado e que agora precisava me dar mais tempo e não me cobrar tanto para ter resultados mais concretos.

Logo depois desse período, ainda voltei a trabalhar na mesma empresa por mais seis meses e, finalmente, cheguei a definitiva conclusão de que se uma pessoa não está feliz, se esforça muito para ir trabalhar todos os dias, não vê sentido no que faz, não tem um propósito a ser atingido com seu trabalho e o único foco do trabalho é pagar as contas, é preciso repensar. Neste caso, é preciso levar em consideração o que se deseja de verdade, e quantos passos para trás serão permitidos pela sua estrutura de vida.

É importante também ter um plano de ação para a mudança, um forte apoio familiar e por que não um apoio terapêutico se for o caso? O caminho não é nada fácil!

Eu tenho o costume de dizer que uma pessoa de 40 anos hoje em dia vive facilmente até os 80, ou seja, porque não mudar? Dez anos bem vividos valem mais do que 60 anos de frustração.

Mudem! Mudem de casa, de carro, de carreira, de parceiro, mas sejam fiéis a si mesmos, aos seus valores e a tudo que acreditem.

Eu mudei!

Marta Roberta Teles é Instrutora de desenvolvimento e criação com as ferramentas Adobe

Hoje sou Instrutora e palestrante Front-End com as ferramentas Adobe e, sinceramente, minha ocupação atual é uma experiência maravilhosa.

A cada dia, a cada turma e a cada aula eu percebo o quanto consigo agregar à vida das pessoas através do meu prazer de ensinar e da didática que tanto estudei e, modéstia a parte, nem sabia que já a tinha por puro descuido da natureza… risos…

Agradeço a Deus por todas estas conquistas e também às pessoas maravilhosas (todas saberão quem são sem que eu cite nomes… risos…) que estiveram ou estão ao meu lado, sempre me ajudando, motivando, apoiando e me impulsionando para o crescimento e aprendizado de todo dia.

Sinto-me realizada por ter descoberto o que realmente me faz feliz e mais ainda, por ter o privilégio de ensinar e aprender o que ensino (tá bom…. tá bom… adaptado da frase do grande mestre Guimarães Rosa).

O que move o mundo é a mudança, então por que não sermos os agentes que impulsionam o mundo?

Aproveito este post para compartilhar uma galeria de fotos, com momentos mais que especiais, sempre guardados na memória e no coração.

Flash AS3 Avançado

Dreamweaver, HTML5 e CSS3

Formação Web Instituto Nextel

Palestra Adobe Edge Animate CC

Flash AS3 Avançado

Senac Consolação SP

HTML5 e CSS3 Avançados

PUC SP COGEAE

WordPress

Uniodonto Campinas – WordPress, HTML5 e CSS3

Flash AS3

Adobe Edge Animate CC

DW e Muse

DW com HTML5 e CSS3 Básicos

Palestra Edge Animate

HTML5 e CSS3

A todos que participam comigo, o meu muito obrigada sempre, pela paciência e atenção!

Beijos e até nosso próximo post 🙂

Marta Roberta Teles

Testando a Nuvem Adobe Creative Cloud

Olá, pessoas!

A nuvem Adobe Creative Cloud é novo serviço de assinatura onde posso verificar e manter meus programas sempre atualizados.

Possui ainda outros serviços auxiliares por mensalidades que relativamente considero baixas pela facilidade e praticidade que proporciona.

Bacana também foi verificar que já está disponível, além dos tutoriais, os Touch Apps.

Vale a pena dar uma conferida!

Estou em dívida com meus posts, portanto, resolvi postar uma imagem do Adobe Creative Cloud (https://creative.adobe.com/), com alguns dos meus games e apresentações de Touchscreen em AS3.

Estou “redesenhando” estes games para a web e mobile com as tecnologias HTML5, CSS3 e Javascript.

Logo teremos mais novidades…

Bjs e até lá!

Audiência do Google+ cresce 66% em nove meses

O Google+ recebeu 110,7 milhões de visitas únicas em junho – 66% a mais que o registrado em novembro. O dado é da comScore, empresa de pesquisa e análise de internet.

Contando somente os Estados Unidos, o crescimento foi ainda maior, chegando a 82%. Foram 27,7 milhões de visitantes únicos, contra os 15,2 milhões de nove meses atrás.

Os dados não são oficiais, mas ao menos no setor de visitantes norte-americanos, estão em alinhamento com o constatado há poucas semanas pelas empresas Compete e Experian Hitwise, que atuam na mesma área.

Também de acordo com a análise da comScore, o Facebook teve leve queda nas visitas norte-americanas no mesmo período, caindo de 166 milhões de visitas para 159,8 milhões.

A pesquisa de visitantes únicos não leva em conta o tempo que o usuário permanece no site e nem o retorno dele à página.

Fonte: http://tecnologia.terra.com.br/

Visite nossa page no facebook: http://www.facebook.com/jbwebinternet

Refinando seu projeto com o Fireworks CS5.1

Olá, galerinha!

Vou apresentar para vocês, algumas técnicas para melhorarmos a aparência dos nossos trabalhos com Fireworks.

O original encontra-se em http://fireworks.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/

***(original:Benjamin De Cock, Smashing Magazine)***

Vamos começar aqui, traduzindo e apresentando para compartilharmos nossas idéias:

Embora, certamente, não seja tão conhecido como o Photoshop, o Adobe Fireworks é uma grande ferramenta para a criação de interfaces, websites, protótipos, wireframes, ícones e muito mais. Entretanto, muitos designers que utilizam o Photoshop há anos podem estranhar um pouco o Fireworks à primeira vista. O Fireworks tem um fluxo de trabalho um pouco diferente e requer uma abordagem também diferente daquela que você está acostumado a usar com Photoshop.

Nesse artigo, vou compartilhar algumas dicas que uso em meu trabalho com o Fireworks que poderão ajudá-lo a melhorar a qualidade dos seus projetos e fluxo de trabalho. Algumas dessas dicas são apenas explicações rápidas de recursos que você pode não conhecer, enquanto outras são técnicas e métodos para melhorar o padrão visual dos resultados. Vamos começar!

Aperfeiçoar contornos delicados:

Uma das características do Fireworks é que ele  dá ao usuário um monte de opções, mas um dos mais importante está faltando: a capacidade de adicionar um gradiente num stroke (traçado, borda). Além disso, o efeito do Stroke  não é sempre bacana – por exemplo, quando usamos uma borda com cantos arredondados.

O Fireworks permite especificar a posição do contorno: para fora (outside), ao centro (centered) ou interno (inside), mas os melhores resultados são quando o contorno está para fora.

O contorno pode ser definido com alinhamentos diferentes no painel de propriedades. Contorno alinhado para fora (outside, exemplo3) apresenta melhores resultados que as outras opções para contornos finos.

Mas, nestes casos, recomendo um caminho composto em vez de um contorno para ter mais controle do resultado e para poder aplicar um gradiente.

Comece desenhando dois retângulos com cantos arredondados, um deles, 2 pixels maior que o outro, na altura e largura. Coloque o retângulo menor sobre o maior (você pode verificar se ele está acima, no painel Layers), e diminuir o arredondado da, como mostrado aqui:

O objetivo da forma menor (com o fundo amarelo) é cortar (ou “perfurar”) o interior da forma vermelha, resultando em um objeto com um pixel de largura que pode ser usado no lugar de um contorno. Para isso, selecione os dois retângulos e aperte o “Punch Paths”, no painel Path:

Outra alternativa: você pode selecionar os dois retângulos e vá em Modify > Combine Paths > Punch.

Dica extra: Caso você decida mais tarde que precisa redimensionar esta forma (sem distorcer seus cantos perfeitamente arredondados), a ferramenta “9-slice scaling tool” pode ser sua salvação:

Desenhando Triângulos Melhores:

Os triângulos estão em todos os lugares nas interfaces: setas nos botões, breadcrumbs, indicadores pop-over e assim por diante.

Enquanto o Fireworks oferece recursos vetoriais prontos como a seta e a seta de linha, eu recomendo seguir a rota personalizada e desenhar você mesmo essas formas vetoriais.

O autoshape de seta vetorial no Fireworks. Os pontos de controle amarelos permitem uma customização mais fácil da largura, algura, espessura, tipo de ponta, arredondado, tamanho e mais.

O vetor smart polygon no Fireworks. Você pode facilmente transformar em um triângulo.

Para ilustrar o nosso novo fluxo de trabalho, vamos desenhar uma seta simples como a do botão de início de download:

Botão de início de download.

Vamos começar pelo desenho de um triângulo. Na maioria das vezes, você vai querer um número ímpar de pixels para a base do triângulo de modo que sua ponta fique centralizada a meio-pixel, resultando em uma seta pontiaguda:

À esquerda, o triângulo com largura ímpar. À direita, o triângulo com largura par.

Para criar um triângulo como o da esquerda, começamos por desenhar um simples quadrado com 7×7 pixels usando a ferramenta Retângulo (encontrada no painel Ferramentas, ou simplesmente pressione U). Para excluir seu ponto inferior direito, use a ferramenta Subselection(pressione A, ou use a seta branca no painel Ferramentas), selecione o nó inferior direito, em seguida, pressione a tecla Delete; o Fireworks irá lembrá-lo que você está tentando mudar um ponto de um retângulo primitivo e que deve ser desagrupado para a mudança ocorrer, para isso, clique em “OK” para transformá-lo em um vetor, e apagar o ponto. Após deletado, você ficará com isso:

Nosso quadrado com o ponto inferior direito deletado.

Precisamos agora colocar o ponto inferior esquerdo exatamente no centro, que está localizado a 7 pixels ÷ 2 = 3,5 pixels de sua posição atual. Quando você usa as setas do seu teclado, o Fireworks move os elementos de pixel em pixel e os alinha perfeitamente à grade de pixels. Isto é conveniente, na maioria dos casos, mas não neste. Felizmente, Fireworks nos dá o recurso “Move Points ” (no painel Path) que nos permite especificar valores numéricos:

Mover 3,5 pixels horizontalmente irá centralizar o ponto inferior.

Se o triângulo está um pouco pontiagudo demais para a nossa seta, use a ferramenta Subselection para selecionar o ponto central novamente e pressione a seta para cima do teclado duas vezes para mover o nó.

Estamos quase terminando! Nós precisamos apenas inserir a parte retangular de nossa seta, com 3×5 pixels  e, em seguida, usar o “Union Paths” de comando (Modify > Combine Paths > Union, ou pressionar Control / Command + Alt / Option + U) para soldar os nossos dois caminhos em uma forma vetorial única final:

As formas separadas estão à esquerda e a forma soldada está à direita.

Desenhar Elipses Melhores

Por alguma razão, o Fireworks tem dificuldade em desenhar círculos elegantes (especialmente os pequenos), e os círculos tendem a ter também uma borda em linha reta:

Um círculo padrão no Fireworks. Observe que os lados do topo, da direita, da base e da esquerda não estão arredondados suficientemente.

Nós vamos usar a janela “Numeric Transform” (Control / Command + Shift + T, ou no menu Modify > Transform > Numeric Transform) para fazer o círculo apenas um pouquinho menor:

Diminuir o tamanho do círculo um pouquinho para fazê-lo parecer mais arredondado.

O original à esquerda e nosso resultado depois da transformação à direita. 

Você vai notar que o círculo da direita está mais nítido e regular,  isso porque temos menos pixels  “cheios” nas bordas:

O original à esquerda, e nosso círculo perfeito (depois da transformação) à direita. 

Pontos em Filete

Uma grande recurso do Fireworks que poucas pessoas parecem conhecer é a ferramenta Fillet Points, do painel Path. Basicamente, ele arredonda qualquer ângulo que você selecionar pora um valor que você especifica. Para usá-lo, selecione qualquer forma vetorial e, no painel do Path, seção “Edit Points“, escolha “Fillet Points“:

Fillet Points arredonda todos os seus ângulos.

Vamos usar a forma pronta de Estrela vetorial padrão como um exemplo. Note que você precisa desagrupar formas prontas e retângulos primitivos antes de usar o Fillet Points, feito isso, você pode selecionar a forma vetorial inteira para arredondar todos os cantos de uma só vez ou usar a ferramenta Subselection para selecionar determinados pontos para arredondar.

A forma original à esquerda, e com o Fillet Points aplicado à direita.

Isto pode representar uma enorme economia de tempo quando você quiser modificar formas complexas com muitos filtros e efeitos. Agora você não terá que redesenhar as formas de novo e de novo, só porque o raio está alguns pixels cortado.

Caminhos Internos

Outra ferramenta vetorial muito útil desconhecida pelos designers é a Inset/Expand Paths.

Inset/Expand Paths é também acessada via menu Modify > Alter Path > Inset Path.

Como você já deve ter adivinhado pelo seu nome, esta ferramenta permite que você altere um caminho vetorial e torne-o menor (inset) ou maior (expand), sem perder suas proporções.

Vamos dizer que nós queremos fazer a nossa estrela acima com 10 pixels a menos:

O comando Inset/Expand Paths.

Esta caixa de diálogo pode ser confusa se você não sabe o que todas as opções e abreviaturas significam. O terceiro parâmetro (“corners” – cantos) é o menos óbvio, porque o significado de “BE, RO, MI” não está definido. As letras são as abreviações de “Bevel“, “Round” e “Miter“. Você não pode usar essas abreviações no campo de texto, de modo que você precisa saber o que significam. “Bevel” cria cantos quadrados, “Round” cria cantos arredondados, e “Miter” cria cantos pontiagudos, o “Miter limit” especifica o comprimento máximo dos cantos pontiagudos antes do Fireworks substituí-los com as pontas cortadas (ou quadrado). Vamos usar “Miter“, em nosso exemplo, porque nós obviamente queremos manter nossas linhas retas.

E voilà!

Gradient Dither

Adicionar um gradiente entre duas cores semelhantes (cores próximas em matiz) em uma forma grande, muitas vezes produz um efeito desagradável de estrias, como mostrado aqui:

Banding (efeito de estrias) é visível neste gradiente,  especialmente em telas LCD do tipo “twisted nematic”, que exibe apenas 6bits por pixel e não 8.

Para evitar isso, no Fireworks CS5 foi introduzida a opção Gradient Dither que pode ser usada como se as bordas do objeto forem definidas como “Anti-alias” e se você usar o tipo “Radial” ou tipo “Linear”, para preenchimento de gradiente. fill.

Gradient Dither (localizado no painel Properties) fazem com que os gradientes pareçam melhores.

O resultado é um gradiente suave, único e linear, semelhante ao que você teria no navegador com aplicação do CSS:

Com a opção “Dither” aplicada, o gradiente fica muito mais suave.

Da mesma forma bons resultados podem ser alcançados por gradientes radiais.

Evitar Sombras Grandes

Fireworks não é muito bom em renderizar grandes sombras (se você usa o filtro “Drop Shadow“). Se você está curioso sobre as sutilezas envolvidas, um artigo detalhado no WebDesignShock compara efeitos de sombra e brilho  no Fireworks, Photoshop e Illustrator.

Em vez de uma bela sombra que desaparece lentamente para um valor transparente, a borda da sombra pode parecer que foi cortada antes de desaparecer completamente com a transparência. A questão é particularmente visível na versão do Fireworks para Mac:

O efeito de sombra criado com o filtro Drop Shadow. Observe as laterais (no fireworks CS5 para Mac) – eca!

Aqui estão as configurações para usar para obter este efeito de sombra no Windows e Mac:

Configurações para o efeito drop-shadow no Mac. De novo, observe o corte nas pontas das sombras.

Configurações para o efeito drop-shadow no windows. As configurações são as mesmas, mas as pontas das sombras estão quase perfeitas.

Então, em vez de usar um filtro, eu costumo duplicar a forma (o retângulo branco neste exemplo), definindo sua margem para “Feather” e preenchendo-o com preto.

Configurações possíveis para a “sombra” vetorial atrás do objeto.

Colocando esta forma atrás do retângulo branco, produz-se uma sombra mais bonita e maior do que com o método interno:

A sombra original à esquerda e o “método feather” à direita.

 

Exemplos Práticos

Falar sobre gradientes, preenchimentos, contornos, formas automáticas vetoriais, retângulos arredondados, pixels e meios-pixels é emocionante, mas alguns exemplos reais seriam ainda melhores. Abaixo estão algumas ilustrações, ícones e desenhos de interface do usuário que eu fiz exclusivamente com o Fireworks. As dicas e truques faladas anteriormente fizeram os resultados mais elegantes e refinados.

Ícone pasta de arquivos.

Interface de usuário para selecionar data.

Ícone Free – Grátis.

Ícones para um FAQ – Frequently Asked Questions / perguntas feitas com frequência.

Ícone envelope.

Conjunto de ícones monocromáticos.

Ícones de chamada.

Ícones de contas de email.

Barra de ferramentas com navegação por ícones.

Como você pode ver, tem tudo a ver com precisão de pixel, e o Fireworks produz grandes resultados!

Conclusão

O Adobe Fireworks é uma ferramenta poderosa, oferecendo recursos de edição de vetores e imagens e até escondendo algumas preciosidades. Sim, ele impõe um fluxo de trabalho diferente, e alguns de seus efeitos padrão são decepcionantes, mas as vantagens superam os pequenos equívocos aqui ou ali.

Ter que mudar hábitos de trabalho é sempre frustrante. Talvez algumas ações que você faz em poucos minutos com sua ferramenta tradicional de design agora lhe pareçam incrivelmente lentas. Acostumar-se a um fluxo de trabalho diferente leva tempo, e pode ser que você não veja, de imediato,a vantagem de usar o Fireworks. A melhor coisa que você pode fazer é comprometer-se a fazer UM projeto real, do início ao fim, usando apenas o Fireworks. Escolha um projeto pequeno ou um projeto pessoal para este fim e coloque as mãos na massa por algumas horas (ou alguns dias). É a única maneira de ser capaz de julgar se o Fireworks realmente se adapta às suas necessidades. Se você estiver trabalhando com design de interface, eu aposto que o Fireworks será uma excelente ferramenta!

Se você estiver interessado em aprender mais sobre Fireworks, eu recomendo assistir aos vídeos produzidos por Rogie King. Eles oferecem muitas dicas e truques para refinar projetos e obter resultados mais ainda mais precisos do que neste artigo.

Além disso, o trabalho dos outros pode ser uma boa fonte de inspiração e conhecimento, portanto, dê uma olhada na série Fw PNG Week de Craig Erskinee baixe e desconstrua seus arquivos fonte gratuítos.

Feliz experiência com Fireworks!

Galerinha linda 🙂

Vou encerrando por aqui e espero novamente ter contribuído e despertado a imaginação de todos.

Este post também está publicado no grupo ADOBE FireworksBR:

http://fireworksbr.groups.adobe.com/index.cfm?event=post.display&postid=42888

Vocês podem passar por lá para conhecer mais do Fireworks e de quebra, podem se inscrever para participar dos nossos sorteios de brindes.

Agradeço pela atenção e até nosso próximo post!

Beijos,

Marta Roberta Teles

Como criar sua própria textura com o Fireworks CS5.1

Criando textura

Olá, galerinha!

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:

O nosso polígono está pronto, mas e agora?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:

Bom, agora nós vamos começar a dividir a nossa figura polígono.Selecione a ferramenta Faca (Atalho = Y), e faça um corte na imagem polígono, no sentido horizontal como segue.

7° – Passo:

Observe que dividimos a figura polígono ao meio pela horizontal e obtivemos a visualização desta divisão no painel “Camadas”.

8° – Passo:

Agora vamos marcar somente a primeira camada para podermos juntar os pontos que ficaram abertos com o corte.

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

 

P.S.: 

Este post foi publicado por mim também no grupo Adobe FireworksBR. Conheçam e cadastrem-se!

Temos encontros, tutoriais, fórum, vídeo aulas e sorteio de brindes da Adobe (sorteio somente para usuários cadastrados).

Aqui vai o link deste post no grupo:

http://fireworksbr.groups.adobe.com/index.cfm?event=post.display&postid=42888

Palestra de Webdesign com tecnologias Adobe CS6

Olá, pessoal 🙂

Hoje ministrei a palestra de Webdesign com as novas tecnologias Adobe CS6.

Sabemos que a tecnologia Adobe é utilizada por 100% dos designers de todo o mundo, grantindo recursos e produtividade, que aliados ao seu potencial criativo, geram trabalhos gráficos de alta qualidade e excelente comunicação.

Estive apresentando a designers e a interessados, o mundo de criatividade e tecnologia, com novo pacote de tecnologias da Adobe, o Creative Suite CS 6.

Nesta palestra mostrei como Designers podem fazer uso dos novos recursos de ícones da tecnologia do design: Dreamweaver, Photoshop, Fireworks, Illustrator e Flash; todos na versão CS6.

A oportunidade gerada pela chegada maciça de Tablets ao mercado foi enfocada, com a demonstração de uma publicação para visualização interativa com a nova ferramenta do Dreamweaver – Fluid Grid Layouts – que nos permite a criação de layouts baseados em escala que se adapta a todos os tamanhos de tela (mobiles, tablets e desktop).

Tivemos  sorteios de brindes da Adobe e da ENG DTP & Multimídia.

Agradeço às pessoas que puderam comparecer!

Beijo grande para todos  😉

Palestra Adobe CS6

Palestra Adobe CS6

Palestra Adobe CS6

Palestra Adobe CS6

Palestra Adobe CS6

Palestra Adobe CS6