El post que buscas se encuentra eliminado, pero este también te puede interesar

Tutoriales de Firmas y Photoshop por Xabiling

TUTORIALES

1 Tutorial de Firmas básicas en Photoshop por Xabiling: DIFICULTAD FÁCIL 
Tutoriales de Firmas y Photoshop por Xabiling
2 Tutorial de Firmas básicas en Photoshop ( mas efectos ) por Xabiling: DIFICULTAD FÁCIL 
diseño
3 Tutorial de Firmas en Photoshop ( marcos y renders ) por Xabiling: DIFICULTAD MEDIO FÁCIL 
creatividad
4 Tutorial de Banner con marcos a partir de imágenes en Photoshop por Xabiling: DIFICULTAD MEDIA
firma

Hola! pues como tengo acumulados 3 tutoriales para la creación de firmas a diferentes niveles, me apeteció compartirlos con vosotros.
La utilidad de estos tutoriales es, como ya e dicho, la creación de imágenes personalizadas para usar como firmas, avatares, banners o cualquier utilidad que queráis darles desde el nivel más básico a elementos algo mas complejos. Ahí van los tutoriales.

Edición: 28/5/12
Añadido tutorial de banner con marco a partir de imágenes


Proximamente
Tutorial de firmas medias y avanzadas asi como de más marcos para firmas etc.


TUTORIALES


Tutorial de Firmas básicas en Photoshop por Xabiling: DIFICULTAD FÁCIL

-1-Busca por internet, en google por ejemplo, una imagen que te guste en forma de render, así como un fondo que te guste, como por ejemplo los escogidos en las imágenes.
tutorial
anime
-2-Crea en Photoshop un nuevo archivo de dimensiones 400X150 mas o menos, como aparece en la imagen.
manga
Abre las imágenes que escogiste. Tendrás algo parecido a esto.
arte
-3-Arrastra la imagen de fondo primero y la imagen del personaje despues al archivo *nuevo que as creado previamente, así tendremos tres capas distintas: una abajo del todo bacía, otra por encima de esta con la imagen del fondo, y otra que quedará arriba de las demás con la imagen del personaje.
Puedes ajustar las imágenes a tu gusto para que encajen mejor en el archivo de la firma seleccionando la capa correspondiente y después EDICIÓN> TRANSFORMACIÓN LIBRE, tal y como aparece en la imagen. ( Recuerda que si dejas presionada la tecla SHIFT mientras modificas la imagen, esta lo hará a escala, sin deformarse )
photoshop
-4-Después de esto, vamos a darle un efecto distinto al personaje.
Selecciona la capa del personaje, haz CLICK DERECHO>DUPLICAR CAPA. Ahora tendrás 2 capas iguales del personaje, tal y como aparece en la imagen.
avatar
-5-Selecciona la copia de la capa, que es la que queda mas arriba, y seguidamente FILTRO>DESENFOCAR>DESENFOQUE GAUSSIANO, tal y como aparece en la imagen.
banner
En la ventana que aparece, debes poner 1,5 y aceptar.
-6-Ya solo tienes que darle un efecto de capa a tu gusto, tal y como aparece en la imagen.
one piece
En este caso yo le e dado efecto OSCURECER, pero es ir probando diferentes a ver cual convence mas.
-7-Tras esto, selecciona la anterior capa, la original del personaje, vamos a darle opciones de fusión haciendo CLICK DERECHO> OPCIONES DE FUSIÓN, tal y como aparece en la imagen.
mass effect
Hay muchas opciones de fusión, las mas comunes son: el trazo, el resplandor, el relieve y la sombra. En este caso solo le e dado una sombra.
-8-Ahora vamos a darle a la firma un marco muy básico para delimitarla y darle más efectividad.
Crea una nueva capa por encima del resto en CAPA>NUEVA>CAPA, ahora selecciona la herramienta del cubo de pintura y pinta toda la capa de blanco, por ejemplo.
Seguidamente ves a EDICIÓN>CONTORNEAR tal y como aparece en la imagen.
Guild Wars
En la ventana que aparezca tienes que marcar de ancho:1pixel, color:negro ( o alguno que quede bien ), posición:dentro, modo:normal, opacidad:100% y finalmente la casilla preservar transparencia no tiene que estar seleccionada.
Cuando aceptes, selecciona la herramienta varita mágica y haz click en cualquier parte blanca de la imagen. Justo después pulsa la tecla SUPR del teclado.
-9-Para dar el toque final, selecciona la capa de la imagen del fondo, luego ves a IMAGEN>AJUSTES>TONO/SATURACIÓN tal y como aparece en la imagen.
Tutoriales de Firmas y Photoshop por Xabiling
Mueve la barra de tono para seleccionar un color que quede bien.
-10-Solo tienes que añadir el texto que quieras con la herramienta Texto y modificarlo con los efectos de capa y opciones de fusión mencionados anteriormente. En este caso le e dado una opción de fusión de trazo y un efecto de capa de oscurecer.
El resultado final de la firma será este:
diseño
Otro ejemplo más de lo que se puede hacer con este tutorial:
creatividad


Tutorial de Firmas básicas en Photoshop ( mas efectos ) por Xabiling: DIFICULTAD FÁCIL

En este tutorial de complementación se añadirán nuevos efectos para renders, fonts y marcos, ademas de creación de fondos personalizados.
-1-Primero vamos a Google y buscamos un render, en este caso es de Ace, tal y como aparece en la imagen.
firma
-2-Como en este caso vamos a crear nuestros propios fondos a base de pinceles, podemos buscar pinceles nuevos y variados para Photoshop tal y como aparece en la imagen.
tutorial
-3-Cuando tengamos nuestros pinceles instalados y el render guardado, abrimos un nuevo documento en Photoshop de las medidas que queramos, en este caso son de 150X425.
-4-Ahora empezamos con la creación del fondo, para ello creamos una nueva capa, la pintamos del color que queramos para tener una base, tras esto y cada vez que queramos insertar algo, creamos una nueva capa encima de la anterior, cogemos la herramienta pincel y cambiamos nuestro pincel al que queramos seleccionando la pestaña con forma de pincel que el programa nos muestra en la esquina superior izquierda de la pantalla, también podemos cambiar el tamaño del este en esa pestaña.
Cuando tengamos el pincel que queramos, al tamaño y color que deseemos, empezamos a manchar el lienzo. Tras esto, podemos jugar con las efectos de capa de las capas que vayamos creando tal y como aparece ne la imagen.
anime
-5-Cuando hayamos manchado suficientemente le lienzo con diversos pinceles, tamaños y colores como para crear un fondo abstracto, insertamos el render escogido, el de Ace, pero en vez de ajustarlo al tamaño de la firma, dejamos el render de forma que solo se le vea la cara de cerca.
A este render le vamos a dar los mismos efectos que en el anterior tutorial, así que duplicamos la capa, a la que quede por encima de damos un FILTRO>DESENFOCAR>DESENFOQUE GAUSIANO y tras ello jugamos con lefectos de capa y la opacidad tanto de la capa copiada como de la original tal y como aparece ne la imagen.
manga
-6-Cuando tengamos el resultado deseado, volvemos a insertar el render, pero esta vez si que lo ajustaremos a la firma para que se vea lo mas posible todo el render. para ajustarlo podemos hacerlo mediante EDICIÓN > TRANSFORMACIÓN LIBRE y dejando pulsada la tecla SHIFT movemos las esquinas del render para ajustarlo a gusto y a escala.
Después hacemos exactamente lo mismo que en el anterior render, lo duplicamos, lo desenfocamos y a la capa de encima de damos efectos de capa para embellecerlo y suavizarlo, pero a la capa original, la que queda por debajo, le podemos dar si lo deseamos opciones de fusión, en este caso le e dado un resplandor exterior.
Cuando acabemos con esto, creamos una nueva capa encima del resto, la pintamos de negro, le damos un efecto de capa de luz suave y con herramienta goma de borrar borramos las partes de render, para así solo oscurecer un poco el fondo tal y como aparece ne la imagen.
arte
-7-Ahora creamos una nueva capa y aplicamos un mapa de degradado a gusto, podemos variar colores, posición dirección, etc, pero en este caso e combinado el azul y el naranja en modo luz suave y al 60% tal y como aparece en la imagen.
photoshop
Cuando este aplicado el mapa de degradado, podemos variar las efectos de capa para conseguir una armonía en la firma, en este caso a e dejado en modo color.
-8-Ahora aplicaremos un efecto nuevo bastante efectivo, para empezar creamos un nuevo documento de 6X6, tras estos cogemos la herramienta lápiz a 1 pixel y pintamos rayas horizontales, verticales o diagonales, en este caso e usado horizontales tal y como aparece en la imagen.
avatar
Tras esto, vamos a EDICIÓN >DEFINIR MOTIVO, ponemos un nombre al motivo, y guardamos. Después de esto ya podemos cerrar el documento del motivo para volver a la firma.
Volvemos al documento de la firma, y creamos una nueva capa arriba, después vamos a EDICIÓN >RELLENAR y aplicamos estos valores:
En contenido, ponemos motivo y seleccionamos le motivo que guardemos anteriormente, el de las rayas y en fusión ponemos luz suave al 50% y aceptamos.
Si vemos que queda demasiado marcado, jugamos con las opacidades i los efectos de capa para suavizarlo, tal y como aparece en la imagen
banner
-9-Ahora nos movemos hasta la ultima capa del render, la que quede mas arriba, y sobre esa capa pondremos nuestro texto con el nik, es opcional posicionarlo allí.
Cuando tengamos la font deseada y el nik, pasamos a jugar con las opciones de fusión y efectos de capa tal y como aparece en la imagen, en este caso le e dado un resplandor exterior rojo y un efecto de fusión de superponer.
one piece
-9-La firma esta casi terminada, solo vamos a aplicar un filtro de fotografía tal y como aparece en la imagen
mass effect
En el cuadro que nos salga, aceptamos y luego nos saldrá otro cuadro, en este cuadro variamos el tipo de filtro y la densidad de este, en este caso e aplicado un filtro sepia al 40%, peor se pueden probar muchos mas para dar un efecto muy logrado a la firma.
-10-Ya para rematar, vamos a CAPA>COMBINAR VISIBLES para acabar dando unas opciones de fusión y añadirle un marco a la firma resultante, en este caso agregue un trazo de color negro, de 1 pixel por dentro, para hacer de marco. También añadí un resplandor interior de color rojo oscuro y alargando un poco la barra de tamaño para finalmente, lograr este resultado:
Guild Wars


Tutorial de Firmas en Photoshop ( marcos y renders ) por Xabiling: DIFICULTAD MEDIO FÁCIL

-1-Busca por internet una imagen que te guste en forma de render, en este caso escogí el render de un charr de Guild Wars 2.
Tutoriales de Firmas y Photoshop por Xabiling
-2-Ahora abre un nuevo documento en Photoshop. Esta vez vamos a hacerlo un poco pequeño, de 400X150.
Abre también la imagen del charr.
diseño
-3-Ahora nos centraremos en el documento nuevo, dentro del lienzo creamos un rectángulo de color blanco con la herramienta rectangulo, que sea de alto como la mitad del documento mas o menos y que no llegue al final de los bordes de él por ningún lado. Cuando lo tengamos, clicamos dos veces en la capa para ajustar las propiedades de capa a gusto, en este caso lo que le e agregado es un trazo de 1 pixel de color negro y una sombra paralela, aunque luego la sombra no ará falta, de todos modos las elecciones son libres.
creatividad
-4-Ahora vamos con el render, lo arrastramos hasta el nuevo documento 2 veces, a la capa que quede por debajo no le vamos a hacer nada, es decir, la dejaremos grande, pero la colocaremos donde creamos conveniente, pero a la capa que queda por encima, la modificamos con la herramienta transformación libre para que se vea mas el render y la encajamos donde queramos, pero pensando en que la parte superior del render saldrá del recuadro blanco.
firma
-5-Ahora nos vamos a la capa del rectángulo, cogemos la herramienta varita mágica y seleccionamos lo que queramos fuera del rectángulo, después volvemos a la capa del render inferior, la grande, y presionamos suprimir, de esta manera quedará lo que queríamos como fondo dentro del rectángulo.
Ahora hacemos algo parecido con la superior, repetimos el proceso, pero no tecleamos suprimir, sino que
seleccionamos la herramienta lazo poligonal y señalamos en la parte superior izquierda de la pantalla la opción de restar a la selección.
tutorial
Entonces vamos clicando y rodeando las partes superiores del render que no queremos borrar, para dar el efecto de que este está saliendo de la firma, cuando acabemos de rodear lo que queremos y unamos el lazo, presionamos la tecla suprimir. Después puedes ayudarte de la goma para pulir imperfecciones del render.
-6-Ahora vamos a experimentar un poco con los marcos, para ello vamos a usar un pedazo del mismo render y usarlo como base para crear un marco de fuego, usaremos el fuego de la espada del charr.
En la capa del render superior contorneamos el fuego de la espada con la herramienta lazo poligonal.
anime
Cuando tengamos lo que queremos, presionamos Control+C(Edicion>Copiar) y luego Control+V(Edicion>Pegar)
-7-Lo siguiente es hacer una transformación libre sobre el fuego para adaptarlo a la dirección que queramos y al tamaño, asi como ayudarnos de la goma para pulir un poco.
Cuado lo tengamos listo, solo tenemos que moverlo encima del rectangulo, y colocarlo en una esquina, como si este comenzase a ser un marco de fuego.
Tras esto duplicamos la capa las vezes que haga falta y movemos las filas de fuego para crear un marco igneo. Ahora hacemos invisibles todas las capas menos las del futuro marco igneo y vamos a CAPA>COMBINAR VISIBLES, asi tendremos nuestro marco hecho, solo faltará retocar con la goma.
manga
-8-Para darle un fondo a nuestro render volvemos a internet a buscar un fondo, en este caso e escogido un fondo de fuego.
arte
Colocamos el fondo en nuestra firma, movemos la capa justo por encima de la del rectangulo, para que todo lo demás quede por encima, ahora repetimos el proceso de seleccionar lo que hay fuera de la capa rectangulo con varita mágica, volver a la capa del fondo de fuego recién puesta y presionar la tecla suprimir. Ahora ya tenemos un fondo igneo a combinación de nuestra firma.
-9-Para rematar el trabajo creamos una nueva capa justo encima del fondo igneo, y vamos a EDICION>RELLENAR, seleccionamos motivo, ponemos el mismo que ya habíamos creado a través de mi anterior tutorial, el motivo de rallas, y ponemos de opacidad un 50% y de opción de fusión Luz suave. Aceptamos, para que quede bien volvemos a usar el metodo de la varita mágica sobre la capa rectángulo blanco para borrar lo que sobra de la capa del relleno de motivo.
También para mejorar el acabado podemos ir a la capa del fondo igneo y duplicarla, dandole a la superior un FILTRO>DESENFOQUE>DESENFOQUE GAUSIANO de 1 punto para luego jugar con las opciones de fusión de la capa.
photoshop
-10-Finalmente le añadimos con gusto y estilo unas letras donde mas nos convenga. También podemos jugar con los efectos de fusión y estilos de capa para el texto, el fondo o el render inferior. Retocamos posibles imperfecciones y listo, nuestra firma superchachimolongui en 10 sencillos pasos como siempre, aquí el resultado. A disfrutar!
avatar


Tutorial de Banner con marcos a partir de imágenes en Photoshop por Xabiling: DIFICULTAD MEDIA

-1-Abre un nuevo documento en Photoshop bastante grande, puesto que será un banner, de unos 610X310 pixeles.
banner
Cuando lo tengas, dibuja un rectángulo grande, pero que no llegue al borde de los límites del documento. también en esa misma capa puedes añadir con unas selecciones formas distintas para, por ejemplo, añadir una pestaña encima del rectángulo. cuando tengas el fondo en blanco deseado, usa los estilos de capa para dar un trazo de 1 Pixel exterior y una sombra paralela al fondo del banner, tal y como aparece en la imagen:
one piece
-2-Ahora vamos a internet, vamos a ojear por la red a ver que encontramos.
Buscando, al final logré encontrar lo que buscaba, esta imágen:
mass effect
De ella aprovecharemos la parte inferior derecha, el marco metalizado, recortaremos esa zona con el lazo poligonal para que al final nos quede algo parecido a esto:
Guild Wars
-3-Lo siguiente es arrastrar el resultado del marco a nuestro banner y colocarlo como queramos.
Pero ese marco es demasiado pequeño para el banner, así que vamos a "estirarlo", veréis.
Con la herramienta selección rectangular, seleccionamos una de las partes del marco, luego clicamos Control+C y luego Control +V, tal y como aparece en la imagen:
Tutoriales de Firmas y Photoshop por Xabiling
-4-Ahora tenemos un fragmento nuevo de marco, el cual con la herramienta transformación libre, vamos a estirar, rotar y duplicar de manera que esas barras resultantes cubran el contorno del banner, tal y como aparece en la imagen:
diseño
Cuando acabemos de duplicar capas y estirar las barras, rotarlas y colocarlas en los contornos que deseemos, podemos también seleccionar un fragmento mas del marco base para duplicarlo y ponerlo en una esquina, así embelleceremos mas aun el marco.
El marco final tendrá este resultado:
creatividad
-5-Ahora vamos a mejorar nuestro marco, para ello vamos primero a ocultar todas las capas que no tengan que ver con el, osea, de momento la capa del rectángulo de fondo blanco. Al resto de capas recurrimos a CAPA<COMBINAR VISIBLES para unirlas en un solo marco. A este marco final vamos a darle unos estilos de capa para hacerlo mas atractivo y visible, tal y como aparece en la imagen:
firma
Los estilos de capa que e usado son los siguientes:
-Sombra paralela.
-Bisel y relieve: Profundidad 21, tamaño 4, Suavizar 0. Textura a escala 200 y profundidad +75.
-Superposición de degradado combinando colores plateados en modo sobreexponer color y a 80% de opacidad.
-Trazo negro exterior tamaño 2.
-6-Ya tenemos nuestro marco 100% listo y creado exclusivamente a partir de una imagen de un menú metálico del videojuego Mass Effect, ahora vamos a darle un fondo al banner.
Vamos a Internet y buscamos una imagen que nos guste, en este caso escogí una relacionada con Mass Effect:
tutorial
-7-Abrimos la imagen, arrastramos a nuestro proyecto y aplicamos una transformación libre para ajustarla a nuestro gusto. Una vez la tenemos, vamos a la capa del fondo, seleccionamos con la varita mágica cualquier parte de fuera de el y volvemos a la capa de la imagen de mass effect para presionar la tecla Suprimir y así borrar el sobrante de la imagen. tras esto, podemos dar efectos a la imagen para mejorarla como ya expliqué en anteriores tutoriales, duplicando esa capa y jugando con los efectos de capa y opciones de fusión.
-8-También podemos rellenar la zona de la imagen con un motivo a rallas como expliqué en anteriores tutoriales, aunque en este caso cree un motivo que simulan cuadrados en vez de rallas, es cuestión de ir probando.
-9-Para ir terminando vamos a usar otro menú del mismo videojuego para usarlo como caja de texto.
Abrimos una imagen previamente descargada, en este caso e usado esta:
anime
Con la herramienta lazo poligonal seleccionamos la caja de texto que queramos agregar al banner, tras el recorte, arrastramos la selección a nuestro archivo, ajustamos con transformación libre, regulamos opacidades, opciones de fusión y estilos de capa y agregamos con la herramienta texto una frase, en este caso al ser un banner de mass effect para su comunidad oficial, agregué "comunidad oficial" con una font descargada de Internet.
-10-Ya para finalizar buscamos por Internet el logo del videojuego y lo agregamos:
manga
Lo adaptamos a nuestro banner y listo, con un poco de imaginación y dedicación sacamos un banner a partir de imágenes del mismo videojuego al que va dedicado, simple y vistoso, este será el resultado final:
arte

19 comentarios - Tutoriales de Firmas y Photoshop por Xabiling

JillValentineBcn
UE!! menudo post que te acabas de marcar.Ahi tienes mis 10 y recomendado por supuesto!
Utzaonus
Que buen post!

Aparte puedo comentar! mejor todavia. Buen post.
Utzaonus
De donde bajaste el photoshop?

Lo quize hacer con el GIMP pero no doy pie con bola
VicoShepard
Lo voy a poner en práctica...gracias
VicoShepard
por desgracia por mi rango solo te puedo dar 3 puntos...
DemonDead11
Muy bueno capo como me gustan que los usuarios hagan sus propios tutos
fcvwg
Seriá mucho mejor que lo complementaras con imágenes...
fcvwg
Perdón, al parecer el post SÍ tiene(o tenía) imagenes, vuelvelas a subir por favor que no se ven
fcvwg
xabiling dijo:
fcvwg dijo:Perdón, al parecer el post SÍ tiene(o tenía) imagenes, vuelvelas a subir por favor que no se ven

debes de tener algún problema en tu pc o internet, porque las imágenes se ven todas, las tengo guardadas en una cuenta photobucket y están correctas

Ahora si las veo, pero te juro que cuando comenté no se veían y tengo internet de 6MB, asique no se
Thevictorxx
Podes hacer uno que diga Mhox como el de ace?