Encha seu Fireworks com excelentes plugins, scripts, commands, textures e patterns.
Muita gente vem me perguntando porque meu Fireworks, que demonstro nas coluna é diferente do que os usuários possuem. Simples! Estou constantemente instalando commands e criando meus próprios para utilização diária, usando os exemplos das colunas:
Que tal você também ter os filtros que utilizo no dia a dia, basta clicar e salvar o arquivo para você, em seguida ao fim do download, pressione "abrir" da caixa de finalização para instalar as extensões.
Dicas no site: PontoFlash
Fireworks é um ótimo editor de imagens para criação de layout web. Durante muito tempo usei o Photoshop e em 2000 mudei para o Fireworks pois na época era o software mais otimizado para criação web. Tanto que depois o Photoshop incorporou algumas ferramentas do FW finalizando então na aquisição da Macromedia.
Porém, quem acha que o Fireworks só faz retângulo, circulos, linhas e curvas, está enganado. Podemos criar inúmeros efeitos, não deixando nada a dever ao Photoshop e outros programas.
Sombra em Foto
Aprenda a criar aquele efeito realístico de sombra em fotos com Fireworks
Uma bela gota
Efeito real de uma gota d’água feito no Fireworks
Neste site 15 efeitos interessantes: Bruno Ávila - AVANTE
O efeito final é bastante satisfatório e é produzido de forma rápida e fácil.
1) Abra a imagem a qual deseja atribuir o texto transparente. No exemplo que darei vou usar a seguinte imagem:
2) Selecione a Ferramenta Texto e insira um texto qualquer, com as seguintes configurações:
» Fonte: Arial.
» Tamanho: 30.
» Cor: Branco (#FFFFFF).
» Estilo: Negrito.
Obs.: Caso sua imagem esteja em outros padrões de tamanho, fique a vontade para fazer as configurações devidas em seu texto.
3) Com a Ferramenta Ponteiro, selecione o texto e acesse no Inspector de Propriedadesa opção efeitos, aqui representada pelo sinal de adição (+). Escolha a opção Chanfro e relevo,Relevo elevado.
4) Configure este efeito com os seguintes valores:
» Largura: 2.
» Contraste: 100%.
» Suavidade: 0.
» Ângulo: 30.
Obs.: Atente-se em desmarcar a opção Mostrar objeto deste efeito. Caso contrário seu efeito estará comprometido, não resultando no efeito esperado.
5) Ao configurar o efeito o resultado apresentado será semelhante ao que segue abaixo:
6) Veja o quanto ficou legal nossa imagem. Desta forma poderá realizar o processo para quantas imagens quiser. Mas ainda podemos, neste exemplo, dar uma melhorada no layout retirando a data e horário que a foto foi tirada. Informações estas localizadas na parte inferior direita da foto. Para tirar as informações desejadas será necessário o uso de uma ferramenta já ensinada nos tutoriais anteriores – a Ferramenta Carimbo.
7) Os métodos para se trabalhar com esta ferramenta já foram ensinados. Caso tenha esquecido, acesse os tutoriais da série Fireworks Básico e tire suas dúvidas. Veja a configuração utilizadas para esta ferramenta:
» Tamanho: 10.
» Borda: 10.
8) Aos poucos vamos retirando as informações que desejamos remover da fotografia.
9) Ao final, teremos o seguinte resultado:
Muita bem galera, chega ao final mais um tutorial da série Fireworks. Foi apresentado como se criar textos transparentes para usar em imagens em geral e ainda relembramos os procedimentos para se remover partes de fotos, utilizando a Ferramenta Carimbo.
Tutorial retirado do site:Julio Battisti
Semana passada foi o Digg, essa semana o YouTube. E a comunidade de desenvolvedores os segue fazendo barulho, anunciando que vai fazer o mesmo. Nós estamos fazendo nossa parte na Visie, eliminando a preocupação com o IE6 de nossos sites e convencendo nossos clientes a fazê-lo também. Já vai tarde.
Mas não é tempo de comemorar, ainda há muito trabalho a fazer. Há oito anos o Zeldman publicou seu célebre artigo To Hell With Bad Browsers, em que nos explicava porque devíamos abandonar o suporte aos navegadores 4.0. O ponto básico era não ter que fazer várias versões do mesmo site. Uma versão apenas, com bom layout CSS, podia funcionar para todo mundo, com todas as vantagens dos padrões web, mas não nos navegadores 4.0.
Bom, fazem oito anos. OITO LONGOS ANOS! Há oito anos que podemos escrever uma versão só de cada site, desde que saibamos escrever hacks de CSS e ajustes de float para o Internet Explorer 6. Há oito anos que estamos repetindo o fato de que o Internet Explorer 6 é a pedra que restou em nosso sapato. Há oito anos que sonhamos em não ter que escrever hacks.
A morte do Internet Explorer 6 significa apenas isso: poder usar PNG transparente e não ter que escrever hacks (ou não ter que escrever tantos hacks.)
A Microsoft passou oito anos sem atualizar seu navegador para nos dar exatamente o que? PNG transparente? Nesse período, Firefox, Opera, Safari e Konqueror estão trabalhando em coisas como controle de opacidade, CSS transform, bordas com imagem, sombras, media queries, colunas e os maravilhosos novos seletores do CSS3. Coisas maravilhosas que você já pode usar, mas a maioria de seus usuários não vai ver porque usa Internet Explorer.
A morte do Internet Explorer 6 nos leva apenas ao lugar onde deveríamos ter chegado há oito anos: sites sem hacks. A Microsoft ainda está algumas gerações atrasadas e, se queremos usar CSS 3 e HTML 5 um dia, é bom parar de comemorar e voltar ao trabalho. Há um mundo para mudar.
Artigo retirado do site:Tableless
Você faz o seu layout com todo cuidado, escreve o html totalmente web standards compliant e faz o CSS bem estruturado. Arruma cada detalhe e confere cada mudança no firefox e internet explorer 7. Pronto. Terminou. Perfeito. Agora só falta testar no internet explorer 6. Nooossa!…. Está tudo errado. Maldito ie6!!!
Acho que todo mundo já passou por isso algum dia e provavelmente ainda vai continuar passando, pois mesmo com ie7, firefox e chrome ainda tem muita gente usando ie6.
Por isso aqui vão algumas dicas para resolver os problemas mais comuns com o velho navegador da Microsoft.
Esse é um dos bugs mais comuns. Quando um elemento usa float:left e tem uma margem esquerda [margin-left] o internet explorer 6, sabe-se lá por quê, duplica o valor desta margem.
Solução:
Basta adicionar um display:inline na div ou em outro elemento que apresente esse problema.
Quando você tem uma div com 100% de altura dentro de outro elemento sem altura definida o internet explorer 6 não ‘entende’ e exibe o layout de maneira errada.
Como resolver:
Defina uma altura fixa para o elemento que contém a sua div.
É. IE6 não renderiza corretamente PNGs com transparência, o que torna seu uso um pouco arriscado, mas não impossível.
Solução:
Existe um patch quase desconhecido lançado pela Microsoft que corrige este problema, adicione ao seu CSS:
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);
Isso também é comum, e pode ter dois motivos. Primeiro: se a sua coluna tem margin-left, o internet explorer 6 pode estar duplicando a margem então o espaço restante acaba sendo insuficiente e a sua coluna “cai”. Segundo: mesmo que a sua coluna tenha uma largura definida, se houver qualquer elemento com largura maior dentro dela, o internet explorer 6 irá expandí-la.
Como resolver:
Primeiro, se sua coluna tem margin-left, coloque um display:inline pra ela.
Se o problema não for esse, provavelmente existe algum elemento forçando a largura da coluna. Procure por este elemento e arrume a sua largura. Se você não está encontrando coloque um overflow:hidden na sua coluna.
Provavelmente você está usando padding-top no seu
E o gran finale:
Esse bug é chato. Muito chato. Acontece por que o ie6 sempre “duplica o final do conteúdo do último elemento de uma série elementos com float:left que tenham comentários entre eles”. Acredite ou não, é isso.
Como resolver:
Primeiro, tente retirar todos os comentários entre estes elementos. Se não for possível, coloque float:none nestes elementos e trabalhe com largura, altura e position para posicioná-los corretamente.
Artigo retirado do site:Top rated never dies
Qual web designer nunca teve que trabalhar horas a mais em um arquivo CSS por causa de problemas de incompatibilidade com o nosso queridíssimo Internet Explorer? Então com certeza, você sabe o que é ou pelo menos já ouviu falar em Conditional Comments, certo? Se não sabe, acesse este artigo e aprenda a utilizar esta ferramenta para contornar os problemas do IE.
Tudo começa pelo fato que cada versão do Internet Explorer (IE), interpreta o CSS de uma determinada maneira, o que pode ocasionar do design que está funcionando em browsers como Firefox, Opera e Safari por exemplo, ser exibido de uma forma totalmente errada no IE. Os Conditional Comments, são comandos, ou melhor, são TAGs reconhecidas apenas pelo IE. Estes comandos são utilizados para dar instruções espefícas apenas para o IE. OsConditional Comments são suportados a partir da versão 5 e basicamente são empregados para definir um CSS específico para cada versão do IE que o web designer desejar. A estrutura básica de um Conditional Comment é a seguinte:
Falando sobre os operadores utilizados no código
gt = greater than - superior a
gte = greater or equal - superior ou igual a
lt - less than - inferior a
lte - less than or equal - inferior ou igual a
