Cómo crear logos Web 2.0 (Photoshop)




Por: el 15-marzo-2007

Traducción del artículo de hongkiat.com por rienzie

Ésto es una traducción hecha en rienzie.com sin ánimo de lucro de la web de hongkiat.com.

¿Te has preguntado alguna vez cómo diseñan los logos Web 2.0? A veces esta bien aprender de los otros, aprendes las técnicas básicas y después empiezas a desarrollar tu propia creatividad. En esta clase particular de Photoshop, en éste tutorial voy a explicarte como se hacen algunos de los bonitos logos web 2.0 casi exáctamente iguales.

1. Descarga e instala el archivo de estilo.

Primero de todos, necesitaras descargar un archivo de estilo que ha creado hongkiat.com y cargarlo en Photoshop.

  1. Descarga el estilo de Photoshop aqui. (Botón derecho -> Guardar como )
  2. Si usas Photoshop CS2, pon éste archivo de estilo en “C:Archivos de ProgramaAdobeAdobe Photoshop CS2 Ajustes preestablecidosEstilos”. Si usas otra versión anterior de
    Photoshop, pon el archivo dentro de Ajustes preestablecidosEstilos

2. Carga el estiloBusca el estilo del diálogo en Photoshop

  1. Windows->Estilo
  2. Te saldrá un apartado con una flecha pequeña en la esquina derecha superior.Clica en ella y selecciona el estilo de los que se desplegan abajo.
  3. Busca web20 de la lista y clica en cargar. Si no lo encuentras, prueba a cerrar el Photoshop, y vuélvelo a abrir y repite el paso 1.
  4. Clica en botón de la flecha otra vez y selecciona Lista Grande del desplegable.

El resultado tiene que ser parecido a la imágen de la derecha.

3. Los 6 logos de web 2.0

Logo web 2.0

Aqui están los 6 logos de web 2.0: My bloglog,Imified,mixd,skype,Linked In y Go2web2.0.El estilo que acabas de instalar te dirá como dibujarlos.Yo seleccionaré los logos “mixd” y “Go2web2.0“,el resto se usan utilizando la misma técnica.

4. Como dibujar

The reason I use Style here is because once they are saved in to a .asl file (the file you downloaded) they are convenient to apply. Let’s go about drawing some of these logos.

La razón por la cual utilizo Estilo aqui es porque una vez lo he guardado en un archivo .asl (el archivo que te has descargado) está listo para ser utilizado cuantas veces queramos. .Vamos a dibujar algunos de estos logos.

Dibujar “mixd” logo

Observación inicial,”mixd” logo consiste en:

  1. texto “mixd”
  2. rectangular redondeada
  3. punto pequeño
  4. un punto más pequeño

Intentaremos dibujarlo mas o menos, en el Photoshop, cada elemento en una capa diferente, como se muestra en la imágen de abajo.

Ahora,aquí está el truco.Busca “mixd-label” en el listado de estilos. Dibujalo directamente en la capa del fondo, la capa del punto pequeño y la capa del punto más pequeño respectivamente. Si lo has dibujado bién, te darás cuenta de que la capa coge los colores y mezcla el estilo. Busca “mixd-font” en el listado de estilos, llévalo a la capa del texto y tu “mixd logo” ya está completado,90% como el original.

Dibujar Go2Web20 Logo

Tienes 4 capas creadas,cada una para “GO“,”2“,”WEB” y “2.0

Arrastra “go2web2.0-purple” desde el listado de estilos hasta “GO” y “WEB“, y arrastra “go2web2.0-green” hasta “2” y “2.0” y tendrás el resultado final.

En cuanto al resto (MyBlogLog, imified, skype y Linked In) es hacer lo mismo: seleccionar la fuente correcta y aplicar el estilo que le pertoque.

5. Conclusión

Si miras en las opciones de cada estilo, te habrás dado cuenta de que los logos Web 2.0 están hechos a base de jugar con degradados y combinando los movimientos de las fuentes adecuadas.Esto no es una manera de exigir que se tiene que hacer así tu logo, pero al fin y al cabo es una manera de conseguirla. No te animo a que falsifiques tu estilo y rediseñes tu logo, pero de por lo menos sabes cómo se crean los logos con estilo Web 2.0.

Fuente: Hongkiat.com

Tags: , , ,

11 respuestas a “Cómo crear logos Web 2.0 (Photoshop)”

  1. Rosibel dice:

    Excelente tutorial y pude hacer mi logo en poco tiempo!! Muxas Gracias!!

  2. Neoriix dice:

    Excelente tutorial, gracias a él diseñé un buen logo para mi blog.

  3. No te ofendas, lo dije en tono chistón, aunque quizás no se note…

    Como bien dices, los comentarios con enlaces se guardan en colas esperando ser moderados, y el tuyo lo estuvo. Yo mismo lo aprové.

    Te pido disculpas por mi comentario si te pareció algo arisco.

    Un saludo.

  4. Ignacio dice:

    Ya.. es un plugin (concepto) de estilos.. Por cierto, no es spam mi comentario, fué con buena voluntad, aunque si que la referencia del tutorial sea mi blog te parece spam, pues.. tu verás como catalogarlos.. además tu blog tiene para validar comentarios.. y yo dejé el mio, tu mismo..

    Un cordial saludo.. 🙂

  5. Ignacio dice:

    Hola, aquí hay un tutorial de cómo hacer el logo 2.0 sin plugins: http://www.diaryof.me/?p=18

    Espero les sirva.. Saludos!

  6. Sr.Euro dice:

    Gracias!

    Será de gran ayuda para futuros proyectos! 😀

  7. JokinSu dice:

    Genial…necesitaba un logo facilito y con esto seguro que me sale algo.

  8. Luz dice:

    Oye muchas gracias!!!

    Me ha sido de mucha utilidad.

    Buen día!!!

  9. Gracias! Me alegra que te haya servido de ayuda.

    Saludos!

  10. Dogguie dice:

    Buenísima traducción.
    Lo tengo copiado.
    Muy buena!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Doce − 9 =

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.