Imagem para o cabeçalho do Blogger com Photoshop

<p>Continuando a série sobre o <strong>Adobe Photoshop</strong>, hoje vou explicar como criar uma imagem para o cabeçalho do Blogger/Blogspot. </p> <p>Como o Dicas Blogger não é um blog sobre o Photoshop, estou tentando escolher temas que sejam do interesse de todos os blogueiros.</p> <p>Pra saber o tamanho da imagem a ser usada em seu blog, vá em <strong>design</strong>> <strong>elementos de página</strong>> gadget <strong>cabeçalho</strong>. Clique em <strong>editar</strong>. No final do gadget, irá aparecer a largura máxima permitida (figura 1). Quanto à altura, a escolha é livre.</p> <span id="fullpost"> <p><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/"><img width="472" alt="Tutorial Dicas Blogger" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqEEIS0nW1y1NehGiTw0lOyQgvv5wnQsmSC0ITpKanfqRYcUkdMsqtfgCLj9ELUQ6C-wWr9fYuvfaB1NLznBh88tm2k7dY7ZY14UjsVogi2B57V93Hmn_wiizXAjGA1EvKghl3U9Vyu8Q/=3fimgmax=3d800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Tutorial Dicas Blogger" height="228" border="0" /></a></p> <p>Vamos usar como exemplo o <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2010/05/template-magazine.html">Template Magazine</a>, cuja largura máxima é de 970 px.</p> <p>Para ampliar as imagens deste tutorial, clique sobre as elas.</p> <p>No Photoshop, clique em <strong>arquivo</strong>><strong>novo</strong>. Escolha o tamanho de 970 (largura) por 150 (altura), com fundo transparente (figura 2). O resultado está na figura 3.</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-DAANYiVgxbyJo-JMyVYXWXHEbc7j6yL2M8ev87tMB24NiZYZRstTOYw50HHSEu56z6NicFmT3UZ6IRO-y2GaexDvSB4nU6pQo70tFQ-TcFjYZcgTs1yYm_gytSiPYzHWbIoNPgn4aiwM/s1600-h/image=255B75=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDuTlyJXEbOCtET0Fv0MB0QLejybsCXP-cjwvllI9MBM4G2KF4JWY6l0P0aTgG_lpFb-CJn35zpLCM9G2nLKUYSC76wqW973wyhprdGMxynTDo-AeHfZMncDb0bbO8WXkdY5WsaiwxdXuL/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a> </td> <td valign="top" width="275"> <p><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGF7NESdB9yQQTsgLTiZuTDBxaBZ9gkexZWUAJ5JpUemOl7lH_5Ax9Ma37zOCjRXg7b3o3QX53tFSSgGsfM3gvMF0gPwV1kqVZlXFxRY9Jif8x09oNE4OQYAsM0aUlAYcKWbBl2r_nVzU4/s1600-h/image=255B74=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyzKIjTjmNbInaghkjOzaeiuWs_10pTN-edL1DB5iKYtYhLyx65ntGxz_HzwK3xkCtXtwGDVVM9x5y2-6iiTxW4OgY_zp63peLxvntAMqbYMi0zdbF5z4EXKcO3d9RtKGxWt9B3l4vvm5A/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a></p> </td> </tr> </tbody></table> <p>Agora vamos escolher uma ícone para incrementar nosso cabeçalho. Não sabe onde encontrar? Então acesse - <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2009/11/15-sites-para-busca-de-icones-web.html">15 sites para busca de ícones web</a>.</p> <p>Clique em <strong>abrir</strong> e procure dentro do computador por um ícone de sua preferência. Para este tutorial, eu vou escolher um do Blogger (óhhhhh).</p> <p>Agora temos duas abas abertas no Photoshop: uma com o fundo transparente e a outra com o ícone. Dependendo do tamanho do ícone, será necessário ajustar a sua altura à da futura imagem do cabeçalho. Em nosso exemplo, o cabeçalho vai ter 150px de altura, então o ícone deve ter menos do que isso.</p> <p>Para ajustar o tamanho da imagem, clique em <strong>imagem</strong>><strong>tamanho da imagem</strong> (figura 4) e altere para o valor desejado (figura 5)</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisheZELQMnK7NfUoVBXKT6taHVzJgeMpcnAkp27xFUPB4qZLFiAI8n2SGC6X6Ubbef02_vCFhrGtC8QcQqXObiB9BZuZsqoJWJ5UwuETs2IvdDSgen40-HJ1VCaWG-cGWUAz9V1rgR7Cqt/s1600-h/image=255B78=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6SGr8w3fbxDXtS80KdcDKN3V5u97zGiiqEiitwdDnXyjovxHHtWhmJumUi0hsH11PW9ssNj-AjFJZKdM9CaZDUH4xUllQjmEVYF0TSfEAHXjlQRsQ9v3_1ZP4dwyDqsgVV-QexZElY8uU/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPp3NK6BiYgHqGgQjqBBGwuF9EWjgnwFVnXkBTNHfL7mpS3aCbOfUkZHLUAiM-0cdRHg96xIRfuIMGI1Qe_EodtN0sw1NN_biYGBMw9BUmjbHQxE1ecLbtYIE3F_GVV6bmcoP8ZD8V6hTh/s1600-h/image=255B79=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3J3evkzMjOLw795trlx7azgAWk0l5SLRETy12IacGhw0Sdovb2X5Gh1nG0WqcC17yDoDQ6L4ytQBVIlw_6qxyR-p-a6xK2CaCzXoWmJ3zQKJ7-STTYYu7osRws5qhVK_8HUBoFAmpbgGu/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a> </td> </tr> </tbody></table> <p>Agora dê um Crtl+A e um Crtl+C no ícone. Abra a aba onde está a outra imagem e cole o ícone aí. Para uma melhor visualização, use o zoom. (figura 6). Agora selecione a <strong>ferramenta de texto</strong> e escreva o nome do seu blog (figura 7)</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvbqOlC-CBrvLGTQkWMY_NYS7xBfYhVWLPwjYXkX8yjPeu3d6dYheAT2WNvlGCXSksHe7iwk-OagOQRg-pOB1EMKT9kwJ8tsKqIG8qcxwZ05fkpXTdsfkoDP9kWX1gVROHi88680DlIjO/s1600-h/image=255B82=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt9HPyITKVxcQOyXYE6kJId_HU2U-moSVfXaoF__74w39i9ihs4e8ISkvio_H8YVXGSTEG0qI-UHMMBq7wbjO3HKYDqUFk1bQXggOhVTuL9Z_UtNSO3MnlfwWPrrPlWxPyWWVsZYu6xBAh/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7KYt7ptaq7D_AzFfif1uUN2FN7KgshdWS3u72a-9JGUra_Zre6rgehCLzXzlLJxEKB7ogttouZMjwm4BYz5HFpTp2A5SKw2KJHVkZlo28D2TwBIdIlHbgjXpcUodSUykreziyWaYn6Il/s1600-h/image=255B84=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjF2MqRcgmVRzu4ATt_C-eBP3nPmCXssIgeVIMOREqCbEO2lwfpL8EP6LduRxjUzv3UmcQpV5ifZil6124iLzKihI5Z2uUeRQAfxTClB3AgWv9mCneE8RcOhckJ87iC8jhl_3HY-8pIl9X/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a> </td> </tr> </tbody></table> <p></p> <p>Para alterar as cores, passe o mouse sobre o texto e selecione a cor (figura 8). Siga o mesmo procedimento para alterar o tipo da fonte (figura 9)</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqiKGFnriVhGMYJFeIiOy57iIKqxpFbpz12V86vsbiYI2Ap2_43qOW4R-6mlycizPFALtev_dPcUDty-QIIqgAeEg57cZZE0X7H1kRRFRlqgpVuVUFypBHIWBtA_bpHuTMqA2v_FupGyaY/s1600-h/cor=255B5=255D.jpg"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0PJvzaRkOhgTfkfDas3F27TYtXlgxrWoDS7IdsSFrvgwAYqU5-jBPL4ziI5_bxTtz4QeJBaRrvzzTk6IxdCwjeyZzEQQetFJibpueDjUovhUq-2lCTJKh1UYKK-7vWuxIQbAg0vmIRrf/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKtl65jmCeGkoV6YV7sTx609ClCF4uMZeamKk6nqXzvpAn7w0M5UEz-kdhPjajDK1OOHWd49rUupXk9MVQXj6HN0HPXDqTM3OU-CJDSrV21596ZUAJD76UmwDh6bCn5LG8LRaxV2XQRjoZ/s1600-h/image=255B86=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsuYCYmEcTnN0VlAojJZsjAdHQyMaDQFmn_PnB5QXl-X30h-xXX3NfEACFcKCLCmt34rqdZIjNyCZTSW6VWONkiE0ZjGSafr1hqHvZY1gVKJwc2HYKSRrgxz4Db5a-Lio_BV62wjQwAzP/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a> </td> </tr> </tbody></table> <p></p> <p>Para movimentar o texto e o ícone, use a <strong>ferramenta mover</strong> (figura 10). Com a ferramenta mover ativada, clique com o botão direito do mouse sobre a parte a ser movimentada (figura 11) e deslize a imagem com a seta do mouse.</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggjCQtORb7g8fuXk4OaCb8PFS87PnuU_Xcyv9oi1XcxVNrc5iARDzPiOUuCY7KrcR1N6jBooZtDCzLLL456USYDQxnf87ezU7chPIpb19xGn4eEm4JuU9V3MAWW5YM5Q0kuhAfXWGtd-MA/s1600-h/image=255B90=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_LfzImNznxl6OxpWkAC8gbXWXb0_Lul1WSzXloDmpnhVFHQCUP_GF-e-eWOMYCQH4ou6EmwakQWDTrWf_89U0PycTQ_-gWDKnxHpw734Mm1OJXZQPuqsKltsN1JM_mTPSGgafCT4G6gD/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="142" border="0" /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUa109XHC0NjcOdisyNuPrwBbeso0SOCPQjaDuoySlkquu1shi5yyyYhTC5SL_vN-oJn7HrgyocfrehrdzKiRzrF2L6YbZlGjIIMIZ4L6P-w8-uAK55sYWZr1m8yshJd1WirQPDKyGLvcS/s1600-h/image=255B91=255D.png"><img width="262" alt="image" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIQ_G3n1ixV8KfRv6mVT3JbvTyNAFpK6cTdx5Eiw-RZ3u2nZ8HVZ9sJLB0F-89O9Pg2qu4Te3NlU8emmR95Cw4O8nf3yCWqkpV1wfD1WTZ8IkXZbBMoiS8byYBZ4Pm_u9wvFlPgmKD7zC/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title="image" height="142" border="0" /></a> </td> </tr> </tbody></table> <p>A imagem do cabeçalho está pronta (figura 12). Agora é só salvá-la (figura 13) no formato .png e fazer o upload para o seu blog.</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirOlKmUfF7sqNwy0MARdIJqTwCMGumsTl8KtIW2SbQhvJv7WQyG-O25guio8oPA4DWC1hH57asSjeTsDyYybMkp0wORXSOaqaJcx6Pi2NslYkx5AQsFQG3AjvEynLtLkzF6k9Y6fDqJxR9/s1600-h/image=255B98=255D.png"><img width="252" alt="image" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgClefdxS9WP2JfxM968GViEQDLb9dvkt0wpQ2g1qkgp_I0q2mgK0wPmMKCB97YHv8x3CUOYCj1BdwCCZG9oHLZJDavTzpAdpS6E2DT0uEUs3FndjKaAskVo7sh1GGSWMbQDIk6xwcdbT25/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title="image" height="142" border="0" /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT02-TZM7jHvX04_YNMUce9eGBk6_8DpQ8uPXVd4PaEAiMaLi6BH8oo4-AVyzCtruk5IVwv5enwFWq0soOa6UTe9IZ6BaS5Uo22iys2_3FYjGHRHO_z0NPr90HkU-Ft5tbjsR0eyiqhbKh/s1600-h/image=255B100=255D.png"><img width="252" alt="image" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKR9Xpuziwaq1wt9pEHKL7UiHxTfuTDYxO0pFcKCa2LBWdvfu0zH79xc8GaNs2EgwemQO3OScG2PqMTzNCumqWh889YgJvJziEz4lJRz9q3U61gOMdxJ19dwe_zOu-1ArzLmOK_v1MmqBU/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title="image" height="142" border="0" /></a> </td> </tr> </tbody></table> <p>Este foi um tutorial super básico. Recomendo que vocês explorem os maravilhosos recursos do Photoshop. Caso queiram utilizar novas fontes, acessem: </p> <blockquote> <p align="center"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2009/08/instalando-fontes-no-photoshop.html">Instalando novas fontes no Photoshop</a></p> </blockquote> <p></p> </span>

Imagem para o cabeçalho do Blogger com Photoshop

Continuando a série sobre o Adobe Photoshop , hoje vou explicar como criar uma imagem para o cabeçalho do Blogger/Blogspot. Como o Dicas B...

Continue Lendo >>

Como criar banner simples com o Photoshop

<p>Já que vocês gostaram tanto do <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2010/07/banner-animado-photoshop-cs4.html">post anterior</a>, resolvi fazer uma pequena série de tutoriais sobre o <strong>Adobe Photoshop</strong>. Antes de mais nada, quero dizer que não sou nenhuma expert no assunto, mas me viro bem com ele :)</p> <p>Em 2008, eu fiz uma vídeo-aula ensinando a criar o banner estático no Photoshop, mas, sinceramente, eu não tenho muita paciência para assistir tutoriais em vídeo – prefiro em texto e imagens. Pensando nos impacientes como eu, resolvi fazer um tutorial semelhante, porém escrito e já com o Photoshop CS4.</p> <span id="fullpost"> <p>A <strong>ABRAWEB</strong> – Associação Brasileira de Web Designers e Desenvolvedores – padronizou os tamanhos e tipos de banner para uso na web e vocês podem escolher entre os vários modelos disponíveis - <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.abraweb.com.br/site/banners.php" title="http://www.abraweb.com.br/site/banners.php">Padrões de Banner Abraweb</a>.</p> <p>Vou utilizar o modelo que é mais usado em blogs – 120 x 60px - mas eu penso que cada um pode criar um banner do tamanho que for melhor para o seu blog. </p> <p>Para ampliar as imagens utilizadas neste post, basta clicar sobre elas.</p> <p>Abra o Photoshop, clique em <strong>arquivo</strong> e em <strong>novo</strong>. Escolha o tamanho 120 x 60px, com fundo transparente (figura 1). Como o tamanho do banner é muito pequeno, iremos aumentá-lo para termos melhor visualização. </p> <p>Clique em <strong>imagem</strong> e <strong>tamanho da imagem</strong> (figura 2). Aumente para 600 x 300 px</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidU0es19eejT2PQyIA6LtZKsTZ346_bUQeSz79yJV5d4NgbVVdNmnh47zdbQ_Y4Tc0nTpght9qEsfI6R61gFI-3aEIiY36T54hHlDxi47MLt_aShUtTc_lOxkyCmV9aWyTy1PxujJaIILn/s1600-h/image=255B53=255D.png"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQ4rj_qZ15HGIVf6JXfS3tydVN7i_pukrcaHdi7aOKJ3Omp7XiV_hpGz8TReLdMc0P0zn2kcRVenT8ZrSzSqPWGZR7f-zyJ7TUZabUpe4JRbpg1Rd5YCeIdNHt4xV_COVvvEkqw4duCZ0/=3fimgmax=3d800" style="border-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title height="126" border="0" /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvK_f1tjnnfi2aeN9P-g0MDXOilu6V9FNeSyJIoNQtZe83rcb63sm6TJDXbRJm-0Oe8c49T85UDlaeI8rszBrzY8lU0icGMCi1N6nOnbjMSkzQ45Nr99Eo1Kp6yDXGOmNSZ3vOxrW_6lE/s1600-h/image=255B56=255D.png"><img width="240" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2j6b9uvZEZR0bFryIok8Nj0ZBNcOrfeDz2VB2OLF-bA3mLYbFXhz8oUK2wG6OfeKjOJrQtHHEQaRI07B_6-rwx6BTtv6qUpZAg9KvA19LB2bjPINc05kaxLGnYkDQjRy7cuaWUccPw0Oj/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> </tr> </tbody></table> <p>Agora vamos colocar uma cor de fundo. No Photoshop podemos usar uma cor sólida ou um degradê (figura 3). Vamos escolher degradê pra ficar mais emocionante. Escolha as cores que farão parte do plano de fundo, clicando no local indicado pela seta 1 da figura 4. Escolha as 2 cores separadamente.</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMp2GH9JY22QH8xGAcWP9kraMvk9n1hlqVoZOh7VHiQqrHAH2xYLOPv6uPWT6ItvQAzu8g_UAxjoCSlwGLRIXOL1qaQUirLyJL4GG4wbluOvkqbU8G6vE7xr81KVpYpiJDSEzeG4ECcg-Q/s1600-h/image=255B57=255D.png"><img width="239" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj198BJLOyQvjNRV33OhnLL-ZuwH_2BcQckG-1lmaA0hC-nbFm-edc34-L085JfFxvuf_3bqnyxKx78t0hGSYojRwwFxWumlIynJPKji_7ArCC3bJeAoVFG5pp72VUX2iwsBAYj84rrSqwp/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ1m50qk4U53iGizyFlAuYKPczkez3s3xKHf8uy1wCbviUdZzaDCoNsHvjmMF8jwuAATUtg0ne7lrWkZXI1Gnbc04igMUgyFJba7UNlW638Wh16fj2frCIxrt9SNji7X9dxCut19MrhHIb/s1600-h/photoshop_degrade=255B9=255D.jpg"><img width="239" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4-6EgggZBoxU6vF10f-WxCGji3hwTSSz8BjS08JneTKNQst45CKmzX_YA13l4x2xeDnzL2hXZ5jwgUxiDZXYhAY8EMK-EIX8haLTD3g66bt-PynsFxofWakz4QJmXgqWEvR-6cj6cfd8/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> </tr> </tbody></table> <p>Selecione a <strong>ferramenta degradê</strong> (figura 3) e passe a seta do mouse dentro da imagem e de uma ponta a outra ( figura 5) Repita até encontrar a cor ideal (figura 6)</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj36zJMKW9OVyjk4vskGwg57IXrRpCT1Weq0aRefXhLqv7teA9Ylp280p4iKgom5288NUCO_k8pVskhARQzo3Z7DVhf6awwEsqDfcDvPxPmMpJpUMw2kcaX4Ua29Nj5KVN7WZEkcxVNneFZ/s1600-h/image=255B64=255D.png"><img width="246" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kB9Xc3bwmhwFKfFcQMwTsPD9A7qB6GWJEc-LNj4018A5YNAAkPygM6iLly-FTnIrwRK9RmtOiN5lRK1GlC-wYRXLyi3kFxneiAeyPiUhRKvVxIDj00bDqhlk1Xc7FxgVkD_4o07qFUP9/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicdlTeyKZsHBCmU8LJwsmLaZ0NkHn8KfB3igQW0bAsFa2Oom7qRhWSCp1oDQqr-taoTGOLXy2cqXfEoz1kBVkrzaFcrW8HBBO3VMXh4zp-Qui5UnWZGj7Pqe1JHwf8Bf4vxY8khe2HXiTb/s1600-h/image=255B65=255D.png"><img width="248" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKxIjk7PpoKDMj2bRKkAl1tih4-mZDCeqNrQvbLawr7t37QWevQLo1BIm8afVngq8l1PIISNq6QQnFk85unh-BIDShU2hoer6BX5tD8kCFtCTziZMEQzdTvQO0D83QkWIO3pGEit3AmZN/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> </tr> </tbody></table> <p>Selecione a ferramenta <strong>caixa de texto</strong> ( figura 7) para escrever dentro do banner. Escolha o tipo e o tamanho da fonte (figura 8) e as cores (figura 4)</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YvpN0MV0EZYvTwZ3Qx1jpqe385sp37eofQO6BIENWxxdWEYJP5o22-CDU7lOMh3ZN8GO0OsZjjeupW3OYXeNFhCymqwWKYLjvsx9PUlnL2Pp3_vvfN3Z1zXgms56D0A3VuVSkVqFU5pe/s1600-h/image=255B66=255D.png"><img width="244" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz124ny02xA-fTRNmAnWsIuK8nebfdYPbJcO636MLxcHyWkxMnhjB7JFspBMT0Xf4sdtQgeYAoN7rbkgOY9JObK2PdvmKxfZH7LAlFvWteHBhZcA5BUs2ACgNZWU5EhaBYoAREg33OsTYD/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdwLU0kcSMu4oKn90NRpiT6Yxr_jP7aGwAE7gfrdxvuJ9PrVn5V2uNbO3v1wY3aeAY1mMBILH_99k8fmGJArWgI60RWv2oxqAEAHosbadS-j0zEDFw0SYd9DtE_1uEJCKvDQEQCL3yHBLH/s1600-h/image=255B67=255D.png"><img width="238" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQKJFTQcgPIsfZMHqvCjTRwGIkknyvaAqyw8musoq66kb4YGfD9ruJStcMCxbBPkFqdaB7lo3jR4SSXsJy_kr6rI4cri1_6Xjhusne-YuGn1qClgrzAlyNUYQ01_fYIY-QC5SUddEOg3c/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> </tr> </tbody></table> <p>Escreva o que desejar e, se quiser incrementar, passe o mouse sobre o texto todo, clique em <strong>camadas</strong>, <strong>estilo de camadas</strong> e <strong>opções de masclagem</strong> (figura 9). </p> <p>Faça vários testes, pois é bem divertido. No nosso banner de exemplo, eu usei apenas a <strong>sombra projetada</strong> ( figura 8), mas existem várias opções de mesclagem.</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD88dm-A1D5iwqgjBLwMEOUqatux4grn9krTM9oaidSIt7f3BK8l7SslmVXxNI0JiSYoqoC5lF0CLtDApztWbd_zOpqfgXeaZ6NwrB6d0ragbZXlYTGx9GGA10aHNGjgE7LG2TP81bWkvo/s1600-h/image=255B68=255D.png"><img width="224" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0_1o_2pk2_4YiVqQcWBoX6BKtZQutuLV-aIMpG5eaPZzrDmYsnq8933aJwiP6Hex_LfyjcluzM-pGgIwa9l9EVScfAvQaaRiWeMkptYKoKFg9a_rT8im9EmvP4xhfA44Z1uT93SjZTRl/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_dTVLMI4KSaZoo8UVyRfgXEE83uPMTLXhTVm9OeiTp2M3TCri0pnCwDtX0m6BsKXY_6TvMwxawBxXqpm9uYKL-m9Q7tuuXCwGH_2XktrUJwONT8IkzsMU2HHISl9hs7UYZCsliPWNUEd/s1600-h/image=255B69=255D.png"><img width="229" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24Snv-kcJCzT0VKfLJmJ2LgSMSpAWQzvgMVI0s0Q4_O4jfi9rF3y5hJqwBR5jKbUzv_nL1uDISofABvOsoVUrPMFYJixYktXqrMVufqdU_nMS2QC4I59mkuosUthcwRDo3Os3BRd9YddP/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a></td> </tr> </tbody></table> <p>Agora vamos voltar em <strong>imagem</strong>, <strong>tamanho da imagem</strong> e reverter o tamanho para 120 x 60px. O banner está pronto! Salve no formato .png e caso queira colocar em seu blog para divulgação, acesse - <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2008/12/caixinhas-para-divulgar-banner.html">Caixinhas para divulgar os banners do seu blog</a></p> </span>

Como criar banner simples com o Photoshop

Já que vocês gostaram tanto do post anterior , resolvi fazer uma pequena série de tutoriais sobre o Adobe Photoshop . Antes de mais nada, qu...

Continue Lendo >>

Como criar banner animado com o Photoshop CS4

<p>Há muito tempo atrás, fiz uma vídeo-aula ensinando como criar banner animado usando o software Fireworks. Hoje “cismei” que queria aprender a fazer o mesmo, mas usando o magnífico <strong>Adobe Photoshop</strong>. E não é que deu certo?</p> <p>Primeiramente, é preciso criar uma sequência de imagens estáticas que farão parte dos quadros do banner animado - <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/2008/01/srievideo-aula-criando-banner-no.html">Video-Aula:Criando Banner no Photoshop</a>.</p> <p>Como o tutorial ia ficar muito grande, resolvi colocar a maior parte das imagens em tamanho reduzido. Para ampliá-las, basta clicar em cada uma delas.</p> <span id="fullpost"> <p>Como exemplo, vou usar 4 imagens que criei previamente. Vamos considerar a primeira imagem como o primeiro quadro do futuro banner animado. Copie (Crtl+A/Crt+C) a segunda imagem e cole (Crtl+C) em cima da primeira, formando assim uma nova camada. Repita esse procedimento com as demais imagens. </p> <p>Clique em <strong>janela</strong> e procure por <strong>camadas</strong>. Você vai ver todas as camadas que acabou de criar. Agora clique em <strong>janela </strong>e depois em <strong>animação</strong>. </p> <p>Na <strong>figura 1</strong> vemos as quatro camadas, numeradas de 0 a 3 e, logo abaixo, temos a janela de animações. Vamos desmarcar as camadas 1, 2 e 3 clicando, no ícone correspondente, que parece um pequeno olho ( seta 1). </p> <p><a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.dicasblogger.com.br/"><img width="452" alt="Tutorial Dicas Blogger" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqbOSZJBJS7k7d2MuWz_8nndLiZWQZEzwaNr4tZdsOviOFrI059PGsZPcUz-zcOXSuuldTcYFQE-niEAVOKCA_eFcW7Fas9eNqiv1HZCY7tdQwlB1dX6kU2YPT-wwlVmiirmx210k-TYe/=3fimgmax=3d800" style="border: 0px none; display: block; float: none; margin-left: auto; margin-right: auto;" title="Tutorial Dicas Blogger" height="251" border="0" /></a></p> <p>Clique agora onde está a seta 2 para abrir um novo quadro. Desmarque a camada 0 e marque a camada 1. Repita o procedimento para as demais camadas (figuras 2 e 3) </p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLGD3AS-nvt59uzAuWHLb-G4stON5dewgevP-bkKSRXfR8MDzVnCsQgfMiyDYDagAFLsHnOuBaCo9PNZxUmPNmkUEGWdmwSdfblUAV9DKXspLs-ZwfKNy1B6haX9lNFrT43vprhAwGt5r/s1600-h/tuto2=255B14=255D.jpg"><img width="242" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnmNS0WUV3A3LVVTZEWnZtfdaBHK_pOE_yn87M5oKwWgFogxlHrbWVtwa-JX0tmlPjJA0UngT3fu60GefnZtxvizsY8qWQi0MGyj_hvhfJrre66yadKw6bSzEWmfZlkl-Ze-NaHwoxQOaq/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="125" border="0" /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiO7bWUjxTdrJey4-POR4fyCEDJjkdELnB4bnhV_KRXVHBniaT_pmAaTLd5Cf9_-gpNOhE0bHyQ0bf9IlbFeZwyI-67GSmnjerbp_KhfR8HbJ-L_Yx27N-BrAqpEGUSfMIfpPF2tVqM6kv/s1600-h/tuto3=255B12=255D.jpg"><img width="242" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKu3TmWvjfgWghegnHBbafiE6opfOo_BtwcsC5s37KezxSGfx_P7_4UKgTqoulWtxXRUNE0C4KfJdnF2NGKmJ0L_30W8ojm0-UB-IFzHL1MYe6En2YJ7ERuRYdcZ4M8_GHia5vkor5Fjog/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="122" border="0" /></a> </td> </tr> </tbody></table> <p>Agora, vamos escolher por quantos segundos será exibido cada quadro. Clique logo abaixo do quadro, onde está escrito <strong>0 seg</strong> (figura 4) e escolha o tempo (sugestão 2,0 seg). A seguir, visualize a animação, clicando no local indicado na figura 5.</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadKE3udmBowQzKDVN46jwbeO5W7IBwKzVENfUGFFWd1NFfUeNEInGQ99egzlQ_LlYlBgldJ7KZQzv72Rh_iLcguZ4phMTwey058aMC5X6QmQ2di5Y1dzcRpJzTJt_wifeCjp3Q5xsuDQy/s1600-h/tuto4=255B6=255D.jpg"><img width="242" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbauQPVqH4b5UHDfqFob6b4DRayRro8LP9zNhSUPTl7I1mb0S8Ybp9APPJECsiFc7_g7OgX1rey1yJeidGlB49XJO4bMjSQqBy7NqdRiKrp-5BC2m_XLzkD1RGtksWT7GnOq0qoPV8x0aT/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="116" border="0" /></a></td> <td valign="top" width="275"> <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mEchandXoiFWQAqtu9TYhcSxohj0eMXUnVqldeeifT82CpJRFW5npimOhR5FpR4kvw_3MgHr7wG6TeBV6zq7jDyC4VhTSaOgfj5ywE9Wv3HZBRG9rhEIK4EMraE1DlB-OkLCpOwRHCCE/s1600-h/tuto5=255B9=255D.jpg"><img width="242" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BRjMb6CJVfKFHgORAKjPC0wDQECG_tvcSvcesqipUb5yzfCF-aG8QvihLAOP-ZHms3QS12pgOE5FlQpH7qdoBgjEU6ftvBKYcw0TslbbXvScdecGcWxEHguZLAsXeIdgGjB96yjjjLMc/=3fimgmax=3d800" style="border-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title height="116" border="0" /></a></td> </tr> </tbody></table> <p>Se tudo estiver Ok, selecione todos os quadros, clique em <strong>arquivo</strong> e <strong>salvar para web e dispositivos</strong> (figura 6). Faça as configurações conforme mostra a figura 7 e, ainda na mesma janela, clique no botão <strong>visualizar</strong> (veja a seta)</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqdlh6EwOGmgsvPSbQq72PKsqXa5SBNyDI9l8wBECDbZhhEk0DWKgjnPcl3YiHgxGyiMI0XgYWwMwgiSHl3OWMmkkVVeBg8UUhZHStn5iAMqRdS0SQ1fgRXq0_eoSn2D0Q6uRdzkqBWmdL/s1600-h/tuto6=255B11=255D.jpg"><img width="241" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYfafAgqMDipiqcPTrX4eYLM-3WXNWmEdMPdHxWy2hRPrGclmZ0e67ZKHdM4lSfwya-Gy6Eu-BRN1aklkogMyitvcs_Ij-1ewU0oknsSOQwlQ_X0eQYt-pAbt_YSxjJjewYX0aJqoR-sbr/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="159" border="0" /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJVkU5n1yB7AaX6HScrDNlB1tK87IXIAW3nesrfmHJ5NCKqYsgvXj2pIQ6fVy2n1gbLwgHZSmu-dwZVXKrkdIQGpujhace3LbsAVt1rdw-VeYphSS7G2w3DGrslZpfyMbSDGlrEuy7l5gy/s1600-h/tuto7=255B9=255D.jpg"><img width="251" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjULnnoAiwtO6WpiaHpR4NdBXzaYe7QQp-_jp3aw86wZ1HTelEEMQsx7SkwyVTLMvuYLbqR3KrbyzRAlHkZIFX0EOPKRZGdlM364Y1XIP54sbkoaxv7g6KyrIWo5c1ZImzejZw5qCsJgV-I/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="163" border="0" /></a> </td> </tr> </tbody></table> <p>A animação irá aparecer no navegador. Clique com o botão direito do mouse e salve.</p> <p>Eis o resultado do banner animado, que foi utilizado para este tutorial:</p> <blockquote> <p><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6DfZ1JwEn8n8S71pe-81lrOLvPA9c_kvDZX2OIc_AKhY8rE1JXCwuPYSmQOKRXKbuyFGDaEJ7ODKjxJ6dmyFK-pQQFlzyJQQ776Ej4xpebK7m-3_UR4IiSkcLcEeGA3skA_sPcWIebCvJ/s1600-h/banner=255B6=255D.gif"><img width="300" alt="banner" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnlnLO9O9VSxcXndyVYcCDwYzTfGFJdlBKcNA9dkHoZwociRCXHWrasOqS0PodvTBda_-pmQ703yZEOk4Dg6riULea3nE0SUF3-aqNzXxmORGo5hWlJc7EynB4WfYZAavLwj8S_HRjewU1/=3fimgmax=3d800" style="display: block; float: none; margin-left: auto; margin-right: auto;" title="banner" height="80" /></a></p> </blockquote> <p>Para colocar o banner em seu blog do Blogger, faça o upload para o Picasa (figura 8), por exemplo. Você deve escolher um álbum, clicar em <strong>arquivo </strong>(1), procurar o banner que foi salvo no seu computador (2), clicar em <strong>abrir</strong> (3) e depois em <strong>iniciar upload</strong>. Ao término, o banner animado irá aparecer no seu álbum do Picasa. Clique sobre ele para ampliar e copie o endereço/url da imagem (figura 9).</p> <table border="0" cellpadding="2" cellspacing="0" width="550"><tbody> <tr> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1gbT6idyxyHmtgrOyawnBgPuY-Ac0zhm1zNcQCy6qXlDS-TJOcKIikK6Zlk_Uxrl-zrx5Y5CuZYiUT2OjsD0PmPGHEal8UsNTyU0LR7q51eKPF5Hoi0iMslRQQj-zbqorAI6HxgSwoBb/s1600-h/tuto9=255B8=255D.jpg"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinmfWc1f9lHiTGUGAp83pOMKgLf7nffOeHGvJZLojGMO0YwsalTgi6615-hsYpWK6hSzPMXbZCIYxa69lVCjGDMQrdHulgbUD-pHn8cAmw0U09hSr_dJ4zb0O0Io_DXpd2Khxt6Jd0WuxX/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="123" border="0" /></a> </td> <td valign="top" width="275"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQAt_fDamED4cdMsckbOsU-bX-B4boVuGkLk70wk8uWnc2BX2KVGVUhJH6s6jvKTRXm9nwkf-mUZtstegGm_FyKVk1EqQa6laAGcNfBjB8LbOWVvYZL8LA4-A9BLFR_5gpGOPpkahP_YW/s1600-h/tuto10=255B8=255D.jpg"><img width="252" alt src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUx6kAw9h2BQ2lmVRI1xIt7emPDXZ38zl7krOhoWHJePKkmk-DkRyCJ01ZjJiVChRAB446i4eo5lwDSb-4Q3LSyEhRgHE64KoJojFH5J68FWu1lBnkB3pG2tBp1OJ5xlJZO45VXaFqOrwS/=3fimgmax=3d800" style="border-width: 0px; display: inline;" title height="126" border="0" /></a> </td> </tr> </tbody></table> <p>Abra o gadget <strong>html/javascript</strong> e cole o seguinte código, com as modificações</p> <blockquote> <p><a href="endereço do site"><img src="endereço da imagem" /></a></p> </blockquote> <p>Depois é só salvar e pronto – o banner animado estará visível no blog ;)</p> </span>

Como criar banner animado com o Photoshop CS4

Há muito tempo atrás, fiz uma vídeo-aula ensinando como criar banner animado usando o software Fireworks. Hoje “cismei” que queria aprender ...

Continue Lendo >>

Instalando novas fontes no Photoshop

<a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/dicasblogger.blogspot.com/" onblur="try {_proxy_jslib_handle(null, 'parent', parent).deselectBloggerImageGracefully();} catch(e) {} ; _proxy_jslib_flush_write_buffers() ;"><img alt="Tutorial Dicas Blogger. Todos os direitos reservados." src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5KFZaPdmvA3D0iRigx1U5R2N4t-2JpxEjo7bPzmEXVEGFqEJaLejUDra15OVQJgiJ-Oo1u89thkT_kxZMjWlWy__NX45dGbOKWAeDsMCTGFUsXomroftJ8X1WBYlN7dTc238B9S4Z-ZD/s320/Photoshop-256x256.jpg" style="margin: 0pt 0pt 10px 10px; width: 128px; float: right; height: 128px; cursor: pointer" title="Tutorial Dicas Blogger. Todos os direitos reservados." id="BLOGGER_PHOTO_ID_5366574249541673970" border="0"></a> <div align="justify"> <p>O <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/pt.wikipedia.org/wiki/Adobe_Photoshop">Adobe Photoshop</a> é o editor de imagens mais utilizado no mundo todo e é de grande utilidade para quem trabalha com fotografias digitais e designer gráfico. </p> <p>Pra nós blogueiros, ele funciona como um canivete-suíço, já que nos permite manipular imagens usadas nas ilustrações dos posts e nos desenhos dos templates. É um programa obrigatório para quem deseja ter um blog com um visual diferenciado e exclusivo.</p></div><span id="fullpost"> <p align="justify">Daqui pra frente, irei publicar alguns tutoriais de utilização do Photoshop. Os leitores mais ansiosos podem usar o São Google, já que existem milhares de tutoriais disponíveis na web.</p> <p align="justify">E pra começar, iremos aprender como instalar novas <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/pt.wikipedia.org/wiki/Fonte_=2528tipografia=2529" title="O que &eacute; Fonte?">fontes</a> no Photoshop, já que ele é usado também para a criação de banners e de logotipos.</p> <p align="justify">A instalação das fontes é feita pelo Windows e o procedimento pode ser usado também para instalá-las no MS Office (Word, Power Point e etc). Peço desculpas aos usuários do Linux e do Mac, mas desconheço como proceder em outros sistemas operacionais.</p> <p align="justify">Vou usar o site <a target="_blank" href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/www.netfontes.com.br/">NetFonts</a>, para baixar uma nova fonte; no caso, escolhi a BASE 02.</p> <p align="justify"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/dicasblogger.blogspot.com/"><img width="452" alt="fonte escolhida" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8L48nVUkbGsC8OaRzZ_lgFk5HBYwB9d9IUVKvoxDw9LJ557JOxoaMeAr16XDPIPV5BFkcEvvj9xUH9X9kSVV99V0tB3uQHr6c6tYqT8nmpCNi_C7HYr8QZeRq98U3xVwI8mFS3NLu59B/=3fimgmax=3d800" style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="fonte escolhida" height="128" border="0"></a> </p> <p align="justify">Faça o downalod da fonte que você escolher, descompacte a pasta e salve no seu computador. Vá até a caixa de busca do Windows (pesquisar) e digite <strong>Fonts </strong>para encontrar a pasta onde ficam as fontes previamente instaladas. No <strong>Windows Vista</strong>, elas ficam em: <strong>C:\Windows\fonts. </strong>Agora, clique em<strong> arquivo</strong> e escolha a opção<strong> instalar nova fonte.</strong></p> <p align="justify"><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvXzlRyLf-HzmtwJM-D6CeWTK89IbUENvNikWR_o3UjhzKcI4ymXMipWSNbBw3Dtybi7Ct6x9zOZ8hFXoD0QsTXLVmCcyg6KYF9-oQ1ARWgfcoN_rZkN_F9k7UpyYgNAbymIiGef8PhHT/s1600-h/image21=255B1=255D.png"><img width="452" alt="procurando a fonte" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4MkDkIBV1vr8ElK5SdYYN2LN6g3iu82AjnMK9aZCHfxaxRQdis5BjfeGsQTp9vxSxMgJboKg-_g_P8GA6ypCI-wsbTX23h70YhXzmpI7FBw0PGDplMEM7HOyoHdPkjs_RJktu2_NwK7cK/=3fimgmax=3d800" style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="procurando a fonte" height="150" border="0"></a></p> <p>Abrirá uma pequena janela. Procure pela fonte salva no seu computador e clique em <strong>instalar</strong>.</p> <p><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaJ5Ec_syRXaJWQw87rmjeFUQjducZXNUlIlnkupidiQzXlvKxBDqzePW-Pwbkb2C0TUyrL-8iE4F8QX3ISiFsuTSJcwnt0cK-XQibFU04Im3u_ZhPYbckP5nxzaMB9vT0EoMj4eRm2m1x/s1600-h/image28=255B1=255D.png"><img width="452" alt="Instalando a fonte" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkekCVxDCk_NsGHypn0deh-AS890rug8Y-Eq88VXnTxlUk-zwcIyXG8S8B7iH4Or7zuWUeB1l8aeUvOFLg2vRigHL6qUIeNJl6wynnX0b95lnrwO4Fva2dcuoaILtT35tfql0LkLqrB3uW/=3fimgmax=3d800" style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Instalando a fonte" height="236" border="0"></a></p> <p>Abra o Photoshop, clique em <strong>ferramento de texto</strong> e confirme se a nova fonte foi instalada.</p> <p><a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkShPcYShmGJRn-2LZblqPANHucAihFwTcwR3oqt-f7_nhfKrRHBTZ9dumi6kaO_x0VA7hsPDqX8sksKarcFvSXmgR-KkBEfKg21YL-hdlQuWoVLCEyncV0PYWMKSQWmqfAh1a1gny149/s1600-h/image35=255B1=255D.png"><img width="452" alt="Fontes do Photoshop" src="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/https/blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6qGJ9rY-aEjLhlNpyfFhxMowpkT3iNHiDGeFTLnQrStcVe1YwNXO4fH1N8SMVlc8eBf2bu4etTNy59eMdJPmf8_AIao2iIO2443Y5lwZzI78DnWstqn69hNyLuAv03lzIyBfli2hDJAF/=3fimgmax=3d800" style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Fontes do Photoshop" height="96" border="0"></a></p> <p align="justify">Pra criar um banner simples, recomendo a minha <a href="http://library.vu.edu.pk/cgi-bin/nph-proxy.cgi/000100A/http/dicasblogger.blogspot.com/2008/01/srievideo-aula-criando-banner-no.html">Video-Aula:Criando Banner no Photoshop</a></p></span>

Instalando novas fontes no Photoshop

O Adobe Photoshop é o editor de imagens mais utilizado no mundo todo e é de grande utilidade para quem trabalha com fotografias digitais...

Continue Lendo >>