tag:blogger.com,1999:blog-41145258502111625142011-07-08T02:13:14.496-07:00Como criar um efeito vidro no FireworksFilipe Petterhttp://www.blogger.com/profile/08184222509453037190noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-4114525850211162514.post-62872493687685998892009-03-24T21:59:00.000-07:002009-06-15T12:54:50.938-07:00<h2>Olá, nesse rápido tutorial, iremos aprender a criar um <a href="http://efeito-vidro-fireworks.blogspot.com/">efeito vidro em textos</a>.</h2><br /><div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_b_jRZ5THaWI/ScpqNF9ZmaI/AAAAAAAAATA/Luc9kJ3dBIw/s1600-h/final_img.gif"><img style="cursor: pointer; width: 400px; height: 112px;" src="http://2.bp.blogspot.com/_b_jRZ5THaWI/ScpqNF9ZmaI/AAAAAAAAATA/Luc9kJ3dBIw/s400/final_img.gif" alt="imagem de resultado do efeito vidro" title="imagem de resultado do efeito vidro" id="BLOGGER_PHOTO_ID_5317179083234843042" border="0" /></a></div><div><br />Quem é web designer na hora de criar um site, precisa utilizar alguns efeitos de imagens na criação ou até na melhoria de algum logotipo ou parte em destaque do site.</div><div><br />Nesse tutorial irei mostrar como criar um <a href="http://texto-curvado-fireworks.blogspot.com/">texto com efeito usando o Adobe Fireworks CS4</a>.</div><div><br /></div><div>Abrindo o fireworks, iremos criar um novo documento de <span style="font-family:courier new;"><span style="color: rgb(0, 0, 102);">500 x 250</span>px</span> e fundo de cor <span style="color: rgb(0, 0, 102);font-family:courier new;" >#E4E4E4</span><br /></div><div>Para esse tutorial iremos usar a fonte <span style="color: rgb(51, 0, 153);font-family:courier new;" >"Brush Script"</span> que deve vir nativa no fireworks CS4 com a cor <span style="color: rgb(51, 0, 153);font-family:courier new;" >#003366</span>.</div><div><br /></div><div>Agora vamos escrever a palavra Hollywood com fonte no tamanho 96, não esqueça de sempre usar um anti-alias, pode ser o smooth mesmo.</div><div><br /></div><div><img src="http://1.bp.blogspot.com/_b_jRZ5THaWI/Scm9aSKoqPI/AAAAAAAAARw/JCWUwxxD06U/s400/prim_img.gif" style="margin: 0pt 10px 10px 0pt; cursor: pointer; width: 400px; height: 200px;" alt="duplicação da imagem efeito vidro" title="duplicação da imagem efeito vidro" id="BLOGGER_PHOTO_ID_5316989094338275570" border="0" /></div><div>Agora vamos duplicar essa imagem.</div><div>Clicando sobre ela com o botão direito, em seguida em EDIT e logo em DUPLICATE</div><div><br /></div><div><img src="http://1.bp.blogspot.com/_b_jRZ5THaWI/Scm-_phfY8I/AAAAAAAAAR4/p8jnMtxfvGM/s400/2a_img.gif" style="cursor: pointer; width: 504px; height: 452px;" alt="efeito vidro duplicando imagens" title="efeito vidro duplicando imagens" id="BLOGGER_PHOTO_ID_5316990835774940098" border="0" /><br /></div><div><br /></div><div>Com as duas copias do mesmo texto, iremos bloquear nosso texto que ficará mais ao fundo, para isso iremos trabalhar com as layers da imagem:</div><div>No menu lateral direito, selecione a opção LAYERS, selecione a layer mais a baixo e clique no cadeado.</div><div><br /></div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_b_jRZ5THaWI/ScnCp8EClCI/AAAAAAAAASA/SO4mFUR-kiU/s1600-h/3a_img.gif"><img style="cursor: pointer; width: 356px; height: 400px;" src="http://1.bp.blogspot.com/_b_jRZ5THaWI/ScnCp8EClCI/AAAAAAAAASA/SO4mFUR-kiU/s400/3a_img.gif" alt="efeito vidro trabalhando com layers" title="efeito vidro trabalhando com layers" id="BLOGGER_PHOTO_ID_5316994860841079842" border="0" /></a><div>Ok, com isso nenhuma alteração sera feita nessa parte da imagem. Para melhorar nosso trabalho, vamos clicar no "olho" ao lado do cadeado, deixando assim a imagem invisivel também.</div><div><br /></div><div>Concluída essa etapa, iremos converter o texto em uma imagem, para que possamos começar a criar o <a href="http://efeito-vidro-fireworks.blogspot.com/">efeito vidro</a> sobre ela.</div><div>Para converter o texto em uma imagem, vamos clicar com o botão direito sobre o texto e logo em seguida em CONVERT TO PATHS</div><div><br /></div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_b_jRZ5THaWI/ScnEGURTScI/AAAAAAAAASI/yLa9Po1gFXc/s1600-h/4a_img.gif"><img style="cursor: pointer; width: 419px; height: 323px;" src="http://4.bp.blogspot.com/_b_jRZ5THaWI/ScnEGURTScI/AAAAAAAAASI/yLa9Po1gFXc/s400/4a_img.gif" alt="converter paths efeito vidro" title="converter paths efeito vidro" id="BLOGGER_PHOTO_ID_5316996447887116738" border="0" /></a><div><br />Ok, nesse momento nosso texto foi transformado em uma imagem, ou melhor, num conjunto de imagens como você pode ver abaixo:</div><div><br /></div><div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_b_jRZ5THaWI/Scpbd36U11I/AAAAAAAAASY/m4cJ9K_ejSs/s1600-h/5a_img.gif"><img style="cursor: pointer; width: 516px; height: 202px;" src="http://4.bp.blogspot.com/_b_jRZ5THaWI/Scpbd36U11I/AAAAAAAAASY/m4cJ9K_ejSs/s400/5a_img.gif" alt="union paths efeito vidro" title="union paths efeito vidro" id="BLOGGER_PHOTO_ID_5317162878847211346" border="0" /></a><br />Mas para que o <a href="http://efeito-vidro-fireworks.blogspot.com/">efeito vidro</a> seja executado no conjunto das imagens igualmente, precisamos formar uma imagem única. Para isso você vai selecionar todas as imagens clica no menu lateral em PATH e em seguida em UNION PATHS.<br /><br />Pronto, nós temos todas as imagens unidas como uma imagem única, agora vamos criar um recorte usando a PEN TOOL.<br /><br />Crie um retangulo usando a PEN TOOL começando do ponto mais baixo a esquerda e terminando no ponto mais baixo a direita, como na imagem abaixo:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScpeioawU4I/AAAAAAAAASg/N1hs5NDz5s4/s1600-h/6a_img.gif"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 339px; height: 400px;" src="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScpeioawU4I/AAAAAAAAASg/N1hs5NDz5s4/s400/6a_img.gif" alt="efeito vidro criando retangulo" title="efeito vidro criando retangulo" id="BLOGGER_PHOTO_ID_5317166259122492290" border="0" /></a>Passo 1 - Comece do ponto mais baixo a esquerda, em seguida marque o 2º ponto acima e vá para o ponto a direita.<br /><br /><br /><br /><br /><br />Passo 2 - Quando marcar o ponto a direita, segure o botão do mouse e arraste para cima para criarmos uma curva no texto. Com o ponteiro branco (subselection) defina a curvatura da linha superrior.<br /><br /><br /><br /><br />Passo 3 - Após definida a curvatura, clique novamente sobre o ponto superior esquerdo para fechar o nó e assim faça os demais pontos para fechar o retangulo.<br /><br /><br />Importante: o retângulo deve ter o PREENCHIMENTO BRANCO e SEM BORDA<br /><br />Nesse momento vamos usar a ferramenta PUNCH PATHS para cortar fora a parte de baixo do texto coberta pelo retângulo branco.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScpiIp-Yx_I/AAAAAAAAASo/_vG7ug9J2Eo/s1600-h/7a_img.gif"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 474px; height: 237px;" src="http://3.bp.blogspot.com/_b_jRZ5THaWI/ScpiIp-Yx_I/AAAAAAAAASo/_vG7ug9J2Eo/s400/7a_img.gif" alt="efeito vidro recortando texto" title="efeito vidro recortando texto" id="BLOGGER_PHOTO_ID_5317170210910291954" border="0" /></a><br />Passo 1 - Selecione a imagem do texto e o retangulo branco.<br /><br /><br /><br /><br /><br />Passo 2 - Clique em PATHS e em PUNCH PATHS<br /><br /><br /><br /><br />Pronto, agora nós temos uma das copias do texto transformada em imagem e com a parte inferior recortada em curva, vamos voltar para o primeiro texto, ocultando essa imagem no menu layers como fizemos anteriormente.<br /><br />No texto original é mais simples, vamos apenas criar um gradiente de tons de azul diferentes.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_b_jRZ5THaWI/ScpmAlAhtQI/AAAAAAAAASw/tJZvyLm3NJ0/s1600-h/8a_img.gif"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 367px; height: 400px;" src="http://4.bp.blogspot.com/_b_jRZ5THaWI/ScpmAlAhtQI/AAAAAAAAASw/tJZvyLm3NJ0/s400/8a_img.gif" alt="efeito vidro criando gradiente" title="efeito vidro criando gradiente" id="BLOGGER_PHOTO_ID_5317174470184645890" border="0" /></a><br /><br /><br /><br />Apenas com o gradiente, já podemos perceber uma luminosidade na parte superior do texto, agora vamos finalizar o <a href="http://efeito-vidro-fireworks.blogspot.com/">efeito vidro</a>.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Vamos deixar a imagem e o texto visíveis, você verá que um fica exatamente sobre o outro, se caso não estiver, posicione os dois exatamente um sobre o outro.<br /><br />Selecione a imagem e vamos criar um gradiente de branco e transparência.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_b_jRZ5THaWI/ScppR94cAwI/AAAAAAAAAS4/Cy2vccgmIVo/s1600-h/9a_img.gif"><img style="cursor: pointer; width: 400px; height: 400px;" src="http://4.bp.blogspot.com/_b_jRZ5THaWI/ScppR94cAwI/AAAAAAAAAS4/Cy2vccgmIVo/s400/9a_img.gif" alt="sobrepondo imagens efeito vidro" title="sobrepondo imagens efeito vidro" id="BLOGGER_PHOTO_ID_5317178067454264066" border="0" /></a><br />Para criarmos nossa transparencia com <a href="http://efeito-vidro-fireworks.blogspot.com/">efeito vidro</a>, os graus de opacidade devem transitar de 70% para 0% como mostra a figura, usando aquela linha preta sobre a imagem.<br /><br />Você pode determinar qual o grau de luminosidade e contraste que você vai aplicar sobre a imagem.<br /><br />No nosso tutorial o resultado final ficou assim:<br /><div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_b_jRZ5THaWI/ScpqNF9ZmaI/AAAAAAAAATA/Luc9kJ3dBIw/s1600-h/final_img.gif"><img style="cursor: pointer; width: 400px; height: 112px;" src="http://2.bp.blogspot.com/_b_jRZ5THaWI/ScpqNF9ZmaI/AAAAAAAAATA/Luc9kJ3dBIw/s400/final_img.gif" alt="efeito vidro" title="efeito vidro" id="BLOGGER_PHOTO_ID_5317179083234843042" border="0" /></a></div><br />Espero que tenham gostado, fiquem ligados nos nossos próximos tutoriais.<br /></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4114525850211162514-6287249368768599889?l=efeito-vidro-fireworks.blogspot.com' alt='' /></div>Filipe Petterhttp://www.blogger.com/profile/08184222509453037190noreply@blogger.com1