Haz tus propios logos o banners para tu blog

Publicado en 12. jul, 2009 por Luis Lopez Garay in Blogging, Tutoriales Photoshop

Cuantas veces no nos hemos querido matar pensado en contratar a un diseñador o pedirle a un amigo cercano que nos cree un hermoso logo para nuestro blog, web o proyecto que necesites. Pues si es así y quieres ser original o no buscar por todos lados como crear un logo elegante y muy 2.0, te encuentras en el lugar adecuado, aqui en este tutorial que he creado exclusivamente para ConceptoPixel y Forobeta.

Primero antes que nada vamos a necesitar algo muy valioso para todo creador de logos y botones, un set de estilos que podemos modificar a nuestro gusto en colores y formas.

Asi quedaria nuestro resultado final:

Paso 1 – Preparando el escenario para bailar

Creamos un documento del tamaño deseado según tus necesidades con el fondo según lo que desees o el fondo de la cabecera de tu blog, todo de depende de tu imaginación, yo use un Desenfoque Radial de #FFFFFF a #d1d1d1 partiendo del centro hacia afuera. (el texto es una marca de agua anti leechers)

Paso 2 – Escribiendo nuestro texto principal

Vaya que suerte ya tenemos el fondo ahora nos dedicaremos a tomar la Herramienta de Texto (T) y escribimos principalmente el nombre de nuestro diseño, blog, o sitio web, ya sea en 1 o 2 palabras.

Tratamos de variar el color para un toque profesional, yo use en orden de izquierda a derecha los siguientes colores: #ff9c00 (naranja), #343434 (gris obscuro), #007eff (azul) y #000000 (negro).

También puedes si lo deseas, aplicar un Gradient Overlay en las opciones de fusión.

Paso 3 – Detalles cursis o profesionales para decorar

Ha llegado la hora de añadir un toque creativo que llenara el espacio de abajo, primero usaremos Estos pinceles de nubes para decorar el espacio de la parte de abajo de nuestro diseño, colocamos 3 nubes de diferentes colores una sobre otra de tamaño considerable. Yo use colores como Azul, Blanco y Naranja.

Luego aplicamos los siguientes modos de fusión a esa capa de nubes (las 3 nubes en la misa capa)

Paso 3 – Añadiendo últimos detalles al texto

Bueno esto es para adornar el texto principal añadimos unos brushes basicos circulares a las “O” del texto y a la “I” del Pixel le ponemos 2 recuadros de los colores del texto, yo use el negro y el naranja, puedes meter tanto detalle se te ocurra, eso ya depende de tu imaginacion.

Luego duplicamos la capa del texto principal (Layer > Rasterize > Type) y le cortamos la primera palabra, note que este paso es solo cuando el texto es de dos palabras o si entre las nubes y el texto dejo espacio para un reflejo. Ahora vamos a Edit > Transform > Flip Vertical, esto hara que se voltee verticalmente la segunda palabra, ahora aplicaremos un estilo de fusion de degradado y le establecemos el FILL a 0%.

Paso 5 – Añadimos un efecto de plástico

Pues ahora nos toca añadir ese efecto característico de la Web 2.0 que es el llamado efecto “Glossy”

Primero tomamos la herramienta Pen Tool o Pluma (P) para hacer un trazado que envuelva una parte de las nubes, luego una vez cerrado el trazo hacer click derecho dentro del documento y del trazo para seleccionar posteriormente “Rellenar trazado” asegúrate tener el color frontal blanco y como opción a la hora de rellenar, ahora dale OK, ahora borra los trazados con el Delete (presiónalo hasta que se borre el contorno negro que lo rodea, luego trata de borrar una parte de ese trazado blanco y lo te dirá que si deseas “Rasterizar” dale que si y dirígete a la paleta de Capas para dar CTRL + Click a la capa del texto principal, vete a Select > Inverse (Selección > Invertir) para después seleccionar la capa blanca y dar un teclazo a Delete, repite estos pasos pero para el texto, crea un ovalo blanco y recorta lo que sobre del texto usando la técnica que te acabo de decir.

Paso 6 – Creando una leyenda 2.0 llamativa

Uno de los elementos mas característicos de los logos 2.0 es el globo que nos señala algo, desde la terminación del dominio hasta la fase de desarrollo (clásico ver un BETA).

Primero vamos a la herramienta Rounded Rectangle Tool (U) y de Radius elegimos 3 PX, luego dibujamos un recuadro redondeado justo arriba de la segundo palabra del color que sea y después tomamos la Herramienta Pluma (P) para trazar un triangulo y completar el globo rellenando dicho trazado del mismo color que el recuadro. Para soldar esas figuras seleccionamos ambas capas y nos dirigimos a Layer > Merge Layers. Ahora aplicamos un estilo de capa con los estilos de botones 2.0 que te di al inicio, en la imagen de abajo señalo cual use yo, por supuesto el paquete incluía unos 50. Añadimos texto también.

Paso 7 – Los últimos detalles y nos vamos, iluminación y slogan

Este paso es opcional ya que hemos terminado, pero si quieres añadir un efecto de iluminación al texto principal, haz lo mismo que con el gloss de las nubes y el texto, pero ahora tomando la herramienta de brush (pincel) usando los pinceles básicos con 0% de dureza (soft brushes) y pincelando en una nueva capa justo arriba de la capa del texto con color azul claro o blanco en donde quieras (yo lo hice arriba de la CON y de la PIX y también en el .COM con todo y figura) y en la capa pon el modo de fusión en Sobreexposición Lineal (Linear Dodge) y si quieres bájale la opacidad para no lucir sobre iluminado.

Ahora es tiempo de personalizar tu slogan, puedes ponerlo donde se te pegue la gana, yo puse uno blanco y muy simple rodeando la nube blanca para añadir un estilo único.

Hemos Terminado!

Ahora mostrare mi final:

Tutorial creado por mi, Luis López o Crystaldream de este mismo blog para los lectores del blog y también para los usuarios de Forobeta.Com (un saludo chicos).

Si tienen alguna duda, felicitación, pregunta, propuesta o sugerencia hagan un comentario.

Villas, Malloca

Entradas Relacionadas:

1. 47 Tutoriales para crear Botones, Web Layouts, Barras de Navegación, Banners y Más
2. Descargar Headers (cabeceras) para Blog en PSD o AI Gratis
3. Wallpaper Tipografico rapido y facil en Photoshop
4. Crear un texto colorido neon en Photoshop
5. 40 tutoriales para crear logos con Photoshop