Blog
Our Blog| Blog Home | About | Entries By Date | Search |
|
Posts
Teste - comparando taxa de compressão
olá! numa bola levantada no grupo HTML5/CSS3 sobre compactação de imagens, resolvi fazer um teste rápido para ver o resultado... vejam: • selecionei uma imagem e escolhi o tamanho - 500x500px, 65kb. • redimensionei usando 3 métodos diferentes: ❉ serviço online kraken.io >> resultado: 34kb - fiz o upload da imagem, - fiz a escolha de otimização, primeiro lossless e depois lossy, entretanto as duas deram o mesmo resultado - baixei o arquivo de resultado ❉ photoshop >> resultado: 26kb - abri a imagem original - file > save for web - ajustei manualmente as configurações de exportação, observando o resultado final para não haver perda da qualidade (produto final com JPG, qualidade 40) ❉ fireworks >> resultado: 21kb - abri a imagem original - botão preview - painel optimize e configurei manualmente, observando o resultado final para não haver perda da qualidade (produto final com JPG, qualidade 60) vejam a qualidade das imagens abaixo! acho que ainda poderia espremer um tiquinho a mais, tanto no photoshop quanto no fireworks, mas já dá para perceber a diferença. nos dois a imagem ficou menor que no serviço online. sei que não é todo mundo que tem estas ferramentas, mas é bom lembrar que em tempos de mobilidade é super importante reduzir cada byte de informação desnecessária. e tem outra coisa, acho muito importante olhar o resultado antes de comprimir. eu estou vendo o que estou fazendo, isso conta bastante! espero que tenham gostado! bjs, ana laura gomes original - 65kb:
serviço online kraken.io >> resultado: 34kb
photoshop >> resultado: 26kb
fireworks >> resultado: 21kb
Novas extensões para Fireworks: phoenix project
olá para tod@s!
• iOS Panel
Link da gravação - novidades CS6
olá pessoal! segue o link da gravação de nossa última reunião (16/06/2012) sobre as novidades CS6 - Fireworks e Dreamweaver http://experts.adobeconnect.com/p94mrh5u819/ fique à vontade para postar comentários e fazer perguntas. se quiser, vale até sugerir algum tema para um post no blog! lembrando que todos os membros podem criar "questões em andamento", que são os "Threads". se você está chengando no grupo agora, consulte o post "Marinheiro de primeira viagem" para aprender mais sobre como interagir. super, super obrigada à todos que participaram :) bjs, ana laura gomes ps - lembrando que o acesso é sempre livre, mas brindes e benefícios só acontecem para membros do grupo! participe e divulgue!
Resultados dos encontros CS6
olá galera! aos poucos estou recebendo as fotos dos sorteados nos encontros online... para facilitar, vou colocar todas as nossas "fotinhas" nesse post, OK?! assim deixamos um registro único para estas nossas festas de roupa nova CS6 :) online - 08-05-2012Fabio Fernando Torrezan
Fabrício Cunha
Eng - 17-05-2012Turma toda:
Premiados:Renato, Vinicius, Winnie e Deivid
Eng - 02-06-2012Turma ganhadora: Rodrigo, Alex, Fábio, Yuri
Tietagem pura...
Refinando seu projeto com o Fireworks CS5.1
Refinando seu Projeto com Fireworks CS5 Refinando seu projeto com o Fireworks CS5.1Olá, 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/ 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 7x7 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. Agradeço pela atenção e até nosso próximo post! Beijos, Marta Roberta Teles
Encontro 02/06 - na Eng
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 
Problemas no encontro de 18/05/2012 Olá, pessoal! Pode ser que hoje não possamos fazer a reunião marcada para as 20:00 horas. Estamos com alguns problemas técnicos. Caso sejam resolvidos, a sala estará OK. Do contrário, nosso encontro on line fica para a próxima data, em 23/05 às 12:00 horas. Agradeço à todos pela compreensão. Beijos, Marta Roberta P. G. Teles
Festa CS6: roupa nova e encontros
olá galera! quem ainda não viu... acabei de "trocar a roupa" do grupo! carinha de CS6 :) é festa total e vamos fazer uma série de encontros, como prometido! aqui vão as datas e locais para todos poderem se organizar. já chegaram os brindes novos para comemorarmos juntos mais uma versão. lembrando: as reuniões são abertas e gratuitas, apenas os sorteios são reservados aos membros do grupo.
endereços:
espero por vocês! ah, quem puder e quiser divulgar estes encontros, fique à vontade! agradeço de coração! para quem quiser divulgar o grupo, fiz um pequeno banner:
(460 x 191 - 20k - http://images.groups.adobe.com/13303ba/fw_br_banner_cs6.jpg) quem precisar de outros formatos, é só avisar! muitos beijos à todos. ana laura gomes
Como criar sua própria textura com o Fireworks CS5.1
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
O que há de novo no Fireworks CS6
O que há de novo na versão Fireworks CS6Este post é um resumo rápido do que há de novo na nova versão do programa. Mais detalhes vocês poderão acompanhar nas apresentações presenciais e online dos dias:
Os locais e horários serão indicados com antecedência. (datas sujeitas à alteração) CSS ExtractionNovidade que apareceu pela primeira vez no CSS3 Mobile Pack do Fireworks CS5. No Fireworks CS6 foram feitas algumas melhorias. Para os que não conhecem, este recurso permite que se desenhe no Fireworks e leve para o Dreamweaver, não o desenho, mas o CSS relativo ao desenho. Window > CSS Properties (Command/Ctrl-F7) No painel você pode selecionar uma ou mais propriedades para serem copiadas e levadas para o Dreamweaver. Assim como pode escolher com quais navegadores você deseja fazer a compatibilidade para as propriedades escolhidas.
Basta selecionar um outro elemento que o painel já indica quais propriedades CSS serão necessárias.
CSS SpritesCSS Sprite é um recurso muito utilizado para melhorar a utilização de imagens de background em CSS. Ao invés de fazer uma imagem para cada imagem de background que será utilizado no CSS, este recurso permite que você crie uma única imagem que será posicionada nos diversos backgrounds que a utilizam. Observe um exemplo títpico:
Apenas os ícones e botões serão selecionados, copiados...
E colados em um novo documento.
Cada um dos botões será usado como referência para criar as fatias (Slices) com o tamanho correto.
Para facilitar a utilização dos Sprites, é recomendado que se troque o nome de cada uma das fatias, de acordo com o botão que representam.
Por fim, File > Export, opção CSS Sprites. O programa se encarrega de criar a imagem e os estilos necessários. Então é só usá-los, combinando-os com outros estilos para comporem seu projeto.
jQuery Mobile theme skinningEste recurso também fazia parte do CSS3 Mobile Pack do Fireworks CS5 e foi aprimorado.
Ao criar um novo tema, o programa se encarrega de criar todas as páginas necessárias para a criação do design projeto mobile.
Você poderá alterar uma das páginas existentes ou criar uma nova, associando-a a uma nova letra. Vector and bitmap design toolsDesenhar ficou ainda mais simples! Vários detalhes foram implementados em toda a ferramenta para facilitar o desenho e a manutenção de seus projetos. - Ícones no painel Layers
- É possível renomear elementos no painel Layers
- Novo painel de cores de preenchimento
Neste painel, é possível copiar o valor da cor hexadecimal ou RGB para ser aplicado em outro elemento ou outro aplicativo, como o Dreamweaver.
Além do painel, o acesso aos recursos de preenchimento estão facilitados. Sem preenchimento, preenchimento sólido, preenchimento gradiente e preenchimento com padrão (pattern):
Nos gradientes, é possível fazer ajustes da posição da cor e ângulo do gradiente através de valores específicos:
Foram acrescentados novos Patterns (lista completa):
E novas Textures (lista completa):
- Novo painel de cores de contorno
Da mesma forma que no painel de preenchimento, é possível copiar os valores das cores. - Transparências independentes para preenchimento e contorno Observe que nas duas caixas é possível ajustar, de forma separada, o valor da transparência.
Neste caso, os efeitos acompanham os valores e o resultado é mais perfeito:
TemplatesNesta versão é possível salvar seus templates na própria pasta templates. PrototipagemNovos itens de biblioteca:
E mais...- O programa agora salva no formato fw.png, facilitando a localização e reconhecimento dos arquivos nativos do Fireworks.
- As abas com os nomes dos arquivos foram simplificadas:
- Criar máscara a partir do menu do botão direito do mouse:
- Cor de contorno para textos:
- Atualização do painel Path (por Aaron Beall):
- Aprimoramento do painel Styles e suas funções: Ao salvar um estilo, ele fica na pasta do estilo escolhido e também na pasta dos estilos do documento atual.
É possível acessar os estilos salvos de outros documentos abertos.
- Copiar cores com a ferramenta conta gotas.
Basta selecionar a ferramenta e clicar na cor desejada com o botão direito do mouse.
No painel Properties é possível escolher o formato que será utilizado, hexadecimal ou RGB.
Por enquanto é isso! Espero que todos curtam a nova versão. Acompanhem os detalhes nos encontros. Beijos, Ana Laura Gomes |
Filter by Date
Filter by TagAllDesign Development Event Interactive Experience Mobile News Rich Internet Apps Video Change View
Titles Change Sort
Alphabetically |
|||||||||||||||||||||||||||||||||||||||||||||||||
1
------ 
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!