Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas

martes, 15 de septiembre de 2009

Como hacer un texto de césped

Como hacer un texto de césped

Lo que vamos a conseguir en este tutorial es este efecto:
Pasos a seguir:

No creo que haya problema de hacerlo con cualquier versión de pgotoshop, la que utilicé yo es la CS3.
1. Creamos un documento nuevo de 400 por 250 px, con el fondo de color blanco.
2. Con la herramienta de texto escribimos lo que queramos poner usando este color 5a4929. Puedes usar cualquier fuente, pero yo os recomiendo una gordita.
3. Luego seleccionamos el texto (sin rasterizarlo), con CTRL+CLICK sobre la capa de texto. Quedará así:

Recordad que el click debeis darlo sobre el simbolito del texto en la capa texto para que funcione
4. Creamos una capa nueva transparente sobre la capa texto, vamos a la herramienta de pinceles y escojemos el "Pasto" de 112 pt

5. Ahora vamos a propiedades del pincel y modificaremos algunos parametros, los siguientes:

6. Cambiamos los colores frontal y de fondo por estos 007b06 y 87e41b respectivamente

7. Pintamos la capa y luego deseleccionamos (CTRL+D) y deberia quedar más o menos así:

A gusto de cada uno elegirá al pintar si quiere que se queden muchas zonas del color base de abajo de las letras o si quiere cubrirlo mucho, como veis yo he dejado zonas con el color base que habiamos colocado al inico del tutorial.
8. Por ultimo le bajamos el puntaje al pincel entre 15 pt y 22 pt por ejemplo. Pintamos todo el borde de las letras.
También en ciertas partes puede pintarse con el pincel a más grosor para darle más volumen....
y aquí está nuestro resultado final *-* espero les haya gustado, es sencillo pero el acabo me parecio muy bueno!
Si lo probais espero ver vuestros resultados aquí *-*


Ahora a partir de este efecto se pueden hacer variaciones y conseguir diseños muy interesantes.
Este tutorial lo preparé para mi blog personal y para el foro Neptune School por lo que no está permitido llevarse las imagenes ni el tutorial a otras webs.

Otros ejemplos:


Con más borde:




martes, 13 de enero de 2009

Creación de un título animado con un bolígrafo

He preparado un tutorial (mi primer tutorial a decir verdad).
El objetivo del tutorial es llegar a hacer un gif como este (lo coloco en un link porque he estado teniendo problemas para subir gif al blog y que se vean en movimiento).
Para hacerlo necesitamos Photoshop (no importa la versión) y Animation Shop o Imagen Ready.

1° Lo primero es conseguir la imagen de un boligrafo, pincel o algo similar, lo que queramos y dejarlo en fondo transparente.
2° Abrimos un documento nuevo de 400x115 pixeles por ejemplo, en el cual hay que agregarle el texto que queramos (se pueden poner efectos al texto, a gusto del autor).
3° Pegar el boligrafo o lo que has escogido (ya con el fondo transparente).
















4° Dar click con el boton derecho del raton en la capa del texto y seleccionar "Rasterizar capa".



















5° Ahora mismo debemos tener el texto y el boligrafo en capas separadas.
















6° Ahora hay que ir haciendo copias de esas capas según el número de letras que tengamos en nuestra palabra, yo en este ejemplo hize 2 copias (del texto y del boligrafo) por letra pero cada uno puede hacer las que quiera. Eso sí, hay que hacer mismo número de copias de la palabra que del bolígrafo (por si hay dudas, dandole clik en el boton derecho del ratón sobre la capa a copiar nos saldrá la opción de duplicar capa ^^ ).

7° Ahora nos situamos en la primer capa de texto y con la herramienta de borrador quitamos las letras que no queramos.En el caso de este ejemplo voy a poner un boligrafo al inicio de la letra. En la siguiente hare lo mismo pero borrando menos la letra para colocar el bolígrafo al final de esta (por ello el que hiciera dos copias de las capas por letra).
Para no liarnos aquí, podemos ocultar las capas que no estemos usando (todo el resto de copias) dejando sólo la capa del bolígrafo y la del texto con la que trabajamos. Para ocultar hemos de darle al dibujo de un 'ojo' que sale al lado izquierdo de cada capa. Este dibujo desaparecera y la capa nos quedará escondida. Para volverla visible solo deberemos darle donde estaba el ojo y la capa volverá a ser visible.








Inicio de la letra









Final de la letra.

8° Cuando terminamos de poner un boligrafo en su lugar unimos las 2 capas (texto y boligrafo). Para ello seleccionamos una, pulsamo control y sin soltarlo seleccionamos la otra. Nos quedarás así las dos seleccionadas y entonces le damos al boton derecho del ratón y seleccionamos unir//fusionar capa (dependiendo de la version del photoshop se llama de una forma u otra).
Cada vez que hayamos terminado con una capa la podemos ocultar para que no moleste.














9° Al terminar con todas las capas, podemos pasarlo a Image Ready para crear la animación pero en este caso yo he trabajado con Animation Shop. Para ello he guardado todas las capas una por una en mi pc. Hay que guardarlas en formato PNG o de lo contrario no funcionara.
Ahora ya sólo nos falta crear nuestra animación.
Abrimos Animation Shop.

10º En archivo debemos darle a asistente de animación. Entonces nos abrirá otra ventanita con unos pasos que deberemos ir siguiendo.

































Es muy importante tener en cuenta de que debe quedarse en la opción de transparente:















A partir de aquí nos pedirá que seleccionemos las imágenes desde nuestro pc. Las seleccionamos y nos encontraremos con la pantalla de trabajo de Animation Shop y todas las imagenes en paralelo. Ya solo falta darle a Ver- Animación y nuestra animación saldrá reproducida. Si no estamos conformes con la velocidad podemos modificarla.
Desde aquí ya sólo falta guardala en formato Gif y a disfrutar de nuestras animaciones!!!
Espero que el tutorial haya resultado sencillo y del gusto de todos ^^
Cualquier duda podeis dejarla en los comentarios.
Aquí os dejo un ejemplo de inclusión del gif en un avatar.