Tutorial: Crear un logo estilo web 2.0 (estilo espejo)
¿Os gusta el nuevo logotipo de Gran Angular? Si la respuesta es sí y queréis hacer vuestro propio logo estilo espejo (tan típico de la Web 2.0), seguid leyendo :). Lo intentaré explicar bastante detalladamente por si hay alguien que nunca haya usado Photoshop. Si tenéis alguna duda, no dudéis en ponerla en los comentarios. Espero que os sirva, ahí va:
» Primero de todo cogéis el Photoshop y creáis un nuevo documento de las dimensiones que necesitéis y escoged también el color de fondo (o transparente si queréis hacer un .png o un .gif). En mi caso he creado un nuevo documento de 300×200 píxeles y le he puesto el color de fondo #444444:
» Hecho esto, escribís el texto deseado con la herramienta de texto. Escoged el color base y la fuente que os guste. También podéis poner diferentes colores seleccionando una sola letra (o varias) y cambiando su color por la barra superior.
» Paso opcional: Podéis aplicar un gradiente o algún otro efecto en el texto que habéis creado des de la ventana lateral capas (layers) pulsando con el botón derecho encima de la capa que contiene el texto y seleccionando Opciones de fusión… (Blending Options…) y después haciendo click en degradado (gradient), trazado (stroke), o lo que más os guste:
» Ahora toca Rasterizar el texto (pasar de vector a imagen de píxeles), para hacerlo seleccionaremos la capa donde se encuentra el texto, iremos al menú capa >> Rasterizar >> Texto. Hecho esto, fijaros en la miniatura de la capa que aparece en la ventana lateral capas: ha pasado a tener el fondo transparente (a cuadros).
» El siguiente paso es hacer una copia de la capa donde se encuentra el texto haciendo clack con el botón derecho sobre ella y seleccionando Duplicar Capa. Le ponemos nombre a la nueva capa (no importa cuál).
» Ahora cogemos una de las dos capas iguales (no importa cuál) y la situamos justo debajo de la otra mediante la herramienta de Selección (la flecha negra de la barra de herramientas izquierda).
» Ya falta poco, ahora vamos al menú Editar >> transformar >> Voltear Vertical (Flip Vertical) para girar la capa de forma que quede reflejada. Vuelve a mover la capa si lo crees necesario para que quede justo debajo de la capa no reflejada como véis en la imágen.
» Ahora entraremos en el Modo Máscara Rápida. Para hacerlo, tienes que hacer click en el botón que véis en la imágen, situado abajo del todo de la barra lateral de herramientas izquierda o presionando la tecla Q. Es posible que tengáis que cambiar un ajuste: Haced dobleclick en el botón que os acabo de situar y comprovad que tenéis seleccionada la opción el color señala las áreas seleccionadas.
» Hecho esto, cogemos la herramienta Degradado que se encuentra en la barra de herramientas laterale izquierda , en el mismo menú que el típico bote de pintura. Previemente seleccionada la herramienta Degradado, hacemos un gradiente como el que muestro en la siguiente imágen. Es posible que no os salga a la primera, ni a la segunda. Recordad que con Ctrl+Z podemos deshacer la última acción. Para realizar el gradiente, os ponéis en el borde inferior de la imágen, y manteniendo pulsado el botón derecho del ratón, arrastramos la linea de gradiente hasta más o menos donde se juntan los dos textos, esto va a gusto de cada uno.
» Ahora nos salimos del modo máscara rápida haciendo click en el botón de al lado ( Modo Standard ) o presionando otra vez la tecla Q. Os debería quedar algo así:
» Pulsamos la tecla Supr (suprimir) y seguidamente Ctrl+D para des-seleccionar la selección. Deberiáis tener algo así:
» Y básicamente ya estamos, sólo queda recortar la imágen si es necesario y/o redimensionarla. Os aconsejo que guardéis una copia del archivo en formato .PSD antes de hacer ninguna modificación adicional ya que así siempre tendréis el diseño base disponible.
-
ummm, la verdad es que lo de la web 2.0 me sigue pareciendo algo muy relativo, el otro dia comentaba uno de los impulsores del internet originario o de la web normal y corriente que eso del 2.0 le parecia una tonteria enorme nuse nuse, muy buen tuto
14/12/2006 a las 4:25 pm -
Ya bueno, el logo en si tiene poco que ver con la web 2.0, solo que la web 2.0 lo ha puesto de moda XD
14/12/2006 a las 11:15 pm -
[...] Como me sugirieron algunos lectores de esta web, acabo de cambiar el logo anterior por uno mas “onda web 2.0″. Espero que les guste, a continuacion les dejo 2 enlaces para que creen el suyo utilizando Fireworks o Photoshop… les sugiero que utilizen estos softwares ya que nos permiten personalizar aun mas el diseño del logo en vez de utilizar alguno de esos “sitios webs generadores de logos 2.0″. Tutorial: Crear un logo estilo web 2.0 (estilo espejo) (Photoshop) Crea tu propio logo Web 2.0 (Fireworks) [...]
9/1/2007 a las 7:31 pm -
Excelente tutorial. Alguien sabe como hacerlo pero con The Gimp ?
16/1/2007 a las 5:57 am -
, Crear un logo estilo web 2.0 (estilo espejo)…
Sí queréis hacer vuestro propio logo estilo espejo (tan típico de la Web 2.0), seguid leyendo. Lo intentaré explicar bastante detalladamente por si hay alguien que nunca haya usado Photoshop. Si tenéis alguna duda, no dudéis en ponerla en los co…
7/5/2007 a las 3:48 pm -
hay un js que hace eso
10/5/2007 a las 7:45 pm -
[...] http://www.gran-angular.net [...]
14/3/2008 a las 10:35 pm -
16/8/2008 a las 4:52 pm
-
Bueno el tema 2.0 es mas que un bonito diseño hecho con nuevas herramientas y un nuevo estilo, la web 2.0 se denomina asi alas nuevas paginas web que han salido que ayudan a l internauta a usar de una forma mas dinamica y clara lo que anteriormente pagians no hacian ahora el hombre interactua con la pagina y la pagina repsonde ala solicitud del internauta paginas como youtube, facebook, blogguer, hi5,son pagians que han evolucionado de las pagians tradicionales a este nuevo ambiente es a loq se le denomia 2.0 en conclusion paginas que interactuan.
Saludos y bonito el logo pero hay muchas infinidades decosas que podemos hacer con fireworks o fotocho`p solo es cuestiond creatividad
18/10/2008 a las 9:03 pm


Feed
















