Tutorial para diseñar el logo de CreatiVlast TM

Publicado en 04. oct, 2009 por Luis Lopez Garay in Tutoriales Photoshop

En si CreatiVlast no es una marca, empresa o pagina web solida, estoy consiguiendo dinero para apartar el dominio, será el nombre de mi empresa de diseño o Red de Blogs, el chiste es que me dio por crear un tutorial para crear un logo elegante y profesional, con toques de Web 2.0 y aquí lo tienen, este tutorial de 10 pasos te enseñara el simple proceso por el cual tuve que pasar para crear este logo que aun no es ni oficial, se realiza con Photoshop y solo ocupas lo básico de Photoshop.

Bueno, en este tutorial puede que te saque canas verdes el hecho de que no haya incluido ningún video paso, o un video, o pocas imagenes, y mucho texto que tal vez no comprendas pero, estaba a las prisas y aun así pude realizar este tutorial que seguro mas de uno apreciara. Hace no mucho te presente una recopilación para crear botones, navbars y layouts. Ahora te enseño este logo tan simple como matar una mosca que ya esta muerta. Ya sabes no copies y si lo pones en tu sitio pide permiso por medio de un comentario y cita la fuente cuando lo coloques.

Resultado Final

Click en la imagen para ver en tamaño real (no es muy grande).

Materiales Necesarios:

No ocupas mucho, solo imaginación y creatividad, pero eso si, si eres de los que les gusta imitar a mas del 70% un tutorial te dejo la fuente que usé para realizar este logo.

Descargar fuente Eras Demi ITC

Antes de Empezar

Bueno, antes de empezar con los pasos quiero aclarar unas cositas, en primera, CreatiVlast es un proyecto a futuro que realizare cuando sea mayor de edad, se trata del nombre que le daré a mi Red de Blogs o a mi empresa si es que me animo, o el nombre de mi “Trabajo” como posible Freelancer. La otra cosa es que el tutorial, puede parecer que las imágenes no son muy ilustrativas, por lo que tendrás que leer detenidamente y muy bien lo que se describe en cada paso para poder ignorar las prisas con las que hice este tutorial, como ya saben, soy un jovencito muy ocupado y con problemas que no esta para andar haciendo tutoriales cuando se le pegue la gana.

Paso 1 – Estableciendo Tamaños.

Lo primero que tienes que hacer es llenar los campos básicos de cuando creas un nuevo documento (Ctrl+N). El nombre es opcional si es que lo quieres guardar en PNG/ICO/JPG, por cierto, el titulo ese va dedicado a aquellos babosos que copian tutoriales y se los agencian sin citar la fuente como si fueran suyos, y encima se le agradece por ello, eso me molesta y como ya he dicho anteriormente me dilata el pene (sorry por eso) hasta tal punto de ir a joder al lugar donde fue plagiado el tutorial. Bueno entrando en materia, el tamaño depende de tus necesidades o las de tu cliente, cuando vas a crear un logo piensa bien en donde ira, y todo eso así que elije bien un tamaño. Luego la resolución deseada, yo siempre uso 72 Dpi y un fondo transparente.

Paso 2 – El fondo de tu propiedad tuya de ti, recuerda siempre el contraste.

Uno de los pasos mas decisivos de crear un logo, si es que tendrá fondo, es precisamente, crear un fondo, trata siempre de elegir un color que contraste o le venga bien al concepto que quieras dar a conocer, yo en lo personal soy fan de los logos que están de colores claros bajo un fondo negro con iluminación radial en el centro. Yo, para este logo en especial, elegí un degradado radial (Herramienta Degradado  > Tecla G) , por consiguiente se eligen los colores de fondo y de frente, para color de frente elegí el color gris apagado (#353435) y para el de fondo un negro (#000000). Luego en una capa independiente, ya sea que tengas seleccionada la primera, da click justo en el centro del documento, si lo deseas crea y arrastra guías verticales y horizontales hacia el centro para guiarte mejor, luego arrastra el mouse hasta un punto cercano al borde del documento y suéltalo, veras que se crea algo con profundidad, ya tenemos un fondo, felicidades ya eres Chuck Norris .

Paso 3 – Poniendo el Texto

Me imagino que has de tener una fuente por ahí, por lo que mas quieras, se elegante por primera (o segunda vez, yo que se) vez en tu vida y no uses Comic Sans o alguna font que sepas bien que no va, yo esta vez no elegí Myriad Pro como fuente, si no que elegí la que te di al principio, la Eras Demi ITC, la cual puse a descarga gratuita. Bueno, mira lo que tienes que hacer, tomas la herramienta de texto (T) y das click en algún área del lienzo, Luego escribe el nombre de tu súper empresa, corporación, nombre falso, proyecto o solamente de pura prueba, lo mismo que yo he puesto. En el aspecto de los colores es bien sabido que colores como rosa violeta, azul claro, naranja y verde hoja son colores muy profesionales que encajan muy bien en este tipo de fondos, mezclados con alguna palabra en blanco. Los colores son: Blanco (#FFFFFF), azul claro (#00ccff) y azul mas obscuro pero aun claro (#00a3e0). Ahora vamos a aplicar un estilo de capa, una sobreexposición de degradado. Con estos valores: Modo de Fusión “normal”, Opacidad “de 10 a 20%”, Degradado (De negro a blanco a tu gusto y sin reversa). y por ultimo valores como el estilo y el de alinear con la capa se dejan por default, la escala 100% y el ángulo unos 90°.

Paso 4 – Iluminando el Texto

Este paso no es muy importante pero date cuenta que un logo plano es un Epic Fail en el diseño, hay que explorar la mente a su máximo nivel, este paso ayudara a darle un aspecto mas 2.0, simplemente toma la Herramienta Pincel (B) y elige un pincel como el de la imagen del tamaño que creas adecuado para poder iluminar las puntas (como los círculos en rojo), luego pon la capa en linear dodge si el color elegido (yo use blanco) es azul claro, amarillo claro o quieres darle un toque de iluminación integrada, si es blanco realmente no importa, si queda sobre iluminado baja la opacidad de 50 al 80%. Trata de ser hábil aquí, ya que después de iluminar tienes que hacer una mascara de recorte (Clipping Mask) para que todo lo que salga del limite del texto se oculte, para eso presiona CTRL+ALT+G o da click derecho con el mouse y da click en “Create Clipping Mask / Crear Mascara de Recorte) asegurándote que la capa de las esferas de iluminación estén arriba del texto. También puedes añadir una cubierta circular plana en blanco y bajarle la opacidad al 20% o 30% para dar un aspecto 2.0 Glossy, aquí no se nota tanto pero en textos obscuros si se nota.

Paso 5 – El Reflejo del Texto

No… el reflejo del texto NO es una película, es un efecto que se viene usando desde hace un buen tiempo en los logotipos o presentaciones de estos. Para hacerlo simplemente duplica la capa de texto y ve a Edit / Editar > Transform / Transformar > Flip Vertical / Voltear Verticalmente, para que se voltee en lado opuesto al normal de forma vertical, ahora lo mueves debajo del texto original y lo separas 1 o 2 pixeles (presionando la tecla Abajo 1 o 2 veces). Ahora aplícale un estilo de capa “Gradient Overlay / Sobreexposición de Degradado” con los parámetros de la imagen de atrás y pon dicha capa en opacidad de 10% a 30%, pero no se te olvide tomar la Herramienta de Borrador (E) para borrar partes sobrantes y que quede mas corto en altura de lo que debe ser.

Paso 6 – El globo textual

Como puedes ver ha aparecido de la nada otro elemento en nuestro (en realidad es mío) logo, es una globo de llamada muy clásico, con una pequeña sensación de 3D con un texto integrado muy contrastante y un texto mas pequeño que dice Team. Para hacer esto solamente tienes que tomar la herramienta de Rectángulo Redondeado (U) y dibujar uno cuidando que el Radio sea de 3 Pixeles (se puede cambiar en la barra de propiedades de herramienta donde dice Radio o Raduis) o de 5 dependiendo que tan notables quieres las esquinas redondas, dibújala de color blanco, luego justo encima o debajo (no importa el orden) un triangulo ancho volteando hacia a abajo y centrarlo con el rectángulo para así después seleccionar ambas capas (en el panel de capas selecciona la capa del rectángulo y luego presionando CTRL, la del triángulo), ya que las capas están seleccionadas presiona CTRL+E (Layer > Merge Layers). Una vez hecho esto quedara de esas 2, una sola capa a la que deberás aplicarle estilos de capa como los que se ven en la imagen descriptiva, tales como Outer Glow, Drop Shadow y Gradient Overlay. OJO, al gradient overlay (sobreexposición de degradado) ponle como color inicial un gris claro (#d9d9d9) y de color final un blanco y aplica los parámetros de la imagen (90° de ángulo).

Luego metemos un texto como el de “Media” con el gradiente que se ve en la imagen, de color negro el texto por supuesto, o un color que contraste con el blanco-gris, o séase un color mas obscuro. Y Finalmente un texto mas pequeño a un lado para añadir un toque profesional.

Paso 7 – Detallitos innecesarios (?)

No vale mucho poner una imagen para decir que añadí dos círculos azules arriba de la “V”.

Pasos 8, 9 y 10 – Diseñando el Complemento del logotipo de CV Media

Este es el paso mas confuso de todos, pero no por eso es difícil. Lo primero que tienes que hacer es dibujar un circulo blanco justo debajo del logo y hacer unas selecciones en forma horizontal y vertical usando guías para después borrarlas y dejar una cruz en el centro que después se cubre.

Como primer paso después de dibujar el circulo perfectamente redondo, vamos a View / Ver > New Guide / Nueva Guía y añadimos 2 con este modo, una horizontal y otra vertical, se crearan en el origen por lo que tendrás que arrastrarlas al centro exacto del circulo, no es difícil ya que photoshop lo detecta automáticamente y mientras arrastres las guías se imantara al centro tanto vertical como horizontal. Ahora tomamos la herramienta de Selección Rectangular (M) y hacemos una selección a lo largo de la línea guía haciéndolo 1 pixel mas ancho tanto como del lado izquierdo como el derecho y borramos esa selección, hacemos lo mismo pero vertical, una selección 1 o 2 pixeles mas alta que la guía central tanto arriba como abajo y borramos, para finalmente dejar una especie de cruz delgada en en centro vacía.

Después abajo de esa capa del circulo, colocamos un foco de luz blanco de mayor o igual tamaño que el circulo anterior pero con 0% de dureza (Soft Brush) y quedara como el primer estado y segundo mostrado en la imagen del principio de este paso.

Ahora toca añadir un circulo negro en el centro pero mas pequeño y no tan chico que el anterior, debe quedar en el centro, fíjate en la imagen del principio del paso en el estado 4, ahí se aprecia un circulo negro con otro circulo azul en el centro, pero primero vamos con el negro, una vez creado dicho circulo, en la capa del circulo blanco tomamos la Herramienta Pincel (B) y rellenamos los cuartos del “pastel” de colores para dar un toque colorido y profesional, como esta el circulo negro en medio no se notara como en el estado 3. Yo añadí colores rosa, azul clarito y un amarillo semi-naranja, y el otro lo deje de color blanco. Luego creamos un circulo mas pequeño encima de la capa del circulo negro pero de color azul y con este estilo de capa:

Y una vez creado ese circulo, para hacerlo mas cool toma la herramienta de pincel de nuevo y con un soft brush del mismo tamaño que circulo azul o menor (recomendable) de color azul claro colócalo en el centro para después colocar dicha capa en modo Linear Dodge (Sobreexposición Lineal) con la opacidad que quieras. Esto dará un brillo interno al circulo azul para que el circulo azul mas grande no luzca plano, eso concluye el complemento, como ves, fue simple pero confuso.

Resultado Final

Ahora toca añadir lo que te plazca añadir, efectos de iluminación o descripciones elegantes, por fin has terminado (si es que lo seguiste) este tutorial cortísimo y con mas letras que imagenes, sin ningún video. Bueno espero de algo te haya servido el tutorial, nos vemos, deja tu comentario, y se agradece cualquier duda, felicitación o propuesta que tengas .

Descárgate el PSD Del Logo!!! Gratis!!! Sin Costo!!! FREE!!!

Entradas Relacionadas:

1. Tutorial Para Crear una Composición Tipo Fashion muy Elegante en Tonos Pastel
2. Haz tus propios logos o banners para tu blog
3. Mas de 50 tutoriales para texto en Photoshop
4. 34 Tutoriales y Tips para el Diseño de Logotipos
5. Crear un texto colorido neon en Photoshop