tag:blogger.com,1999:blog-50912236642103068532011-07-31T04:03:30.630-07:00Como criar um efeito reflexo no FireworksFilipe Petterhttp://www.blogger.com/profile/08184222509453037190noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-5091223664210306853.post-53268644373220246362009-04-01T07:21:00.001-07:002009-06-15T12:52:56.452-07:00<h2>Olá, nesse rápido tutorial iremos aprender como criar um <a href="http://efeito-reflexo-fireworks.blogspot.com/">efeito reflexo em textos usando o fireworks CS4</a></h2><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScrrnmeMKJI/AAAAAAAAAT0/F0Coo5n8zzo/s1600-h/img_final.gif"><img style="cursor: pointer; width: 400px; height: 180px;" src="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScrrnmeMKJI/AAAAAAAAAT0/F0Coo5n8zzo/s400/img_final.gif" alt="imagen final efeito reflexo" id="BLOGGER_PHOTO_ID_5317321375638890642" border="0" /></a><br />Quem tem duvida de como criar esse efeito, agora vamos apresentar nesse tutorial uma das formas mais simples de criá-lo.<br /><br />Algumas pessoas gostam de criar esse <a href="http://efeito-reflexo-fireworks.blogspot.com/">efeito reflexo no fireworks</a> usando a ferramenta CONVERT TO ALPHA ou aplicando a transparência diretamente sobre a imagem, eu realmente aconselho fazer isso caso o fundo não seja uma imagem de cor sólida.<br />Mas nesse nosso caso vamos usar uma outra técnica que deixa todo o processo muito mais rápido.<br /><br /><br />Vamos criar um novo documento no Fireworks de <span style="color: rgb(0, 0, 153);font-family:courier new;" >500 x 400px</span> com fundo branco.<br />Em seguida vamos escrever a palavra <span style="color: rgb(0, 0, 102);font-family:courier new;" >Reflex</span> em <span style="color: rgb(0, 0, 102);font-family:courier new;" >Arial Black</span> com tamanho <span style="color: rgb(0, 0, 102);font-family:courier new;" >96</span> cor <span style="color: rgb(0, 0, 102);font-family:courier new;" >#0085DE</span> e <span style="color: rgb(0, 0, 102);font-family:courier new;" >smooth anti-alias</span>.<br /><br />Vamos começar a produzir o <a href="http://efeito-reflexo-fireworks.blogspot.com/">efeito reflexo no texto</a>:<br /><br />Vamos converter o texto em uma imagem, clicando com o botão direito do mouse sobre ele e em CONVERT TO PATHS<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScrhNwyHsXI/AAAAAAAAATM/sJ5op4wYoWg/s1600-h/img_1.gif"><img style="margin: 0pt 10px 10px 0pt; cursor: pointer; width: 400px; height: 308px;" src="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScrhNwyHsXI/AAAAAAAAATM/sJ5op4wYoWg/s400/img_1.gif" alt="imagem um efeito reflexo" id="BLOGGER_PHOTO_ID_5317309936613962098" border="0" /></a><br /><br />O próximo passo é duplicar e inverter a imagem do texto para criar o <a href="http://efeito-reflexo-fireworks.blogspot.com/">efeito reflexo</a><br /><br />Com o botão direito vamos clicar em EDIT e em seguida em DUPLICATE<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_b_jRZ5THaWI/ScrlHbdsgII/AAAAAAAAATc/vHEoxrMtgQk/s1600-h/img_2.gif"><img style="cursor: pointer; width: 400px; height: 213px;" src="http://2.bp.blogspot.com/_b_jRZ5THaWI/ScrlHbdsgII/AAAAAAAAATc/vHEoxrMtgQk/s400/img_2.gif" alt="imagem dois efeito reflexo" id="BLOGGER_PHOTO_ID_5317314225858445442" border="0" /></a><br /><br />Em seguida vamos inverter a imagem para criar o <a href="http://efeito-reflexo-fireworks.blogspot.com/">efeito reflexo</a>, para isso vamos clicar em EDIT e depois em FLIP VERTICAL<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_b_jRZ5THaWI/ScrknpgmkqI/AAAAAAAAATU/JJX7j1axdP8/s1600-h/img_3.gif"><img style="cursor: pointer; width: 400px; height: 309px;" src="http://1.bp.blogspot.com/_b_jRZ5THaWI/ScrknpgmkqI/AAAAAAAAATU/JJX7j1axdP8/s400/img_3.gif" alt="imagem tres efeito reflexo" id="BLOGGER_PHOTO_ID_5317313679872922274" border="0" /></a><br /><br />Após inverter a imagem, posicione exatamente abaixo da outra imagem.<br /><br />Agora vamos criar um retângulo branco sobre a imagem invertida de um tamanho que cubra completamente a imagem.<br /><br /><span style="font-style: italic;">OBS.: Iremos criar um retângulo branco devido ao nosso fundo ser branco, se a imagem que você está criando tem um fundo de cor diferente, acompanhe a cor do fundo.</span><br /><br />Sobre esse retângulo, iremos aplicar um gradiente linear<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_b_jRZ5THaWI/Scrqf4HmDuI/AAAAAAAAATk/tdHwEB9Tkg0/s1600-h/img_4.gif"><img style="cursor: pointer; width: 400px; height: 227px;" src="http://2.bp.blogspot.com/_b_jRZ5THaWI/Scrqf4HmDuI/AAAAAAAAATk/tdHwEB9Tkg0/s400/img_4.gif" alt="imagem quatro efeito reflexo" id="BLOGGER_PHOTO_ID_5317320143425375970" border="0" /></a><br /><br />Vamos definir as duas cores do gradiente como branco e vamos modificar a transparência clicando nas setas superiores e definindo a opacidade em zero em uma das partes<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_b_jRZ5THaWI/Scrq6x0tQ3I/AAAAAAAAATs/DQ0WJpGGwuQ/s1600-h/img_5.gif"><img style="cursor: pointer; width: 351px; height: 400px;" src="http://1.bp.blogspot.com/_b_jRZ5THaWI/Scrq6x0tQ3I/AAAAAAAAATs/DQ0WJpGGwuQ/s400/img_5.gif" alt="imagem cinco efeito reflexo" id="BLOGGER_PHOTO_ID_5317320605592011634" border="0" /></a><br /><br />Você vai perceber que na imagem será criado uma linha preta, modificando o comprimento e posição dessa linha você poderá adequar da melhor forma o gradiente do retângulo até que o <a href="http://efeito-reflexo-fireworks.blogspot.com/">efeito reflexo</a> fique perfeito.<br /><br />Durante a produção desse tutorial nosso resultado foi esse:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScrrnmeMKJI/AAAAAAAAAT0/F0Coo5n8zzo/s1600-h/img_final.gif"><img style="cursor: pointer; width: 400px; height: 180px;" src="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScrrnmeMKJI/AAAAAAAAAT0/F0Coo5n8zzo/s400/img_final.gif" alt="imagem seis efeito reflexo" id="BLOGGER_PHOTO_ID_5317321375638890642" border="0" /></a><br /><br />Espero que tenham gostado, fiquem ligados nos nossos próximos tutoriais, até!<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/5091223664210306853-5326864437322024636?l=efeito-reflexo-fireworks.blogspot.com' alt='' /></div>Filipe Petterhttp://www.blogger.com/profile/08184222509453037190noreply@blogger.com1