Astucia para decorar los temas de Amigo Invisible

por Shurin Sáb 20 Dic 2014, 15:44

¡Hola S2!, He decidido compartir un truco para los post del concurso "Amigo Invisible" ya que ya estamos al rededor de esas fechas UUU!

El efecto del tutorial una vez finalizado, será esto:

¡Revisa el Regalo!

Astucia para decorar los temas de Amigo Invisible Regalo12

¡Revisa el Regalo!

Astucia para decorar los temas de Amigo Invisible Regalo17

Un regalo que se "abre", cuando éste se abre, se supone que adentro debería de quedar la criatura, pero si la coloco sería spoiler :genius: y si le das click te lleva a la criatura para descargar Ahamm

Los recursos que necesitaremos serán:

Astucia para decorar los temas de Amigo Invisible 2145037518

Photoshop (Yo usaré el CC) Forever Alone

[RECURSO 1 Ó PARTE DE ABAJO DE LA IMAGEN DE UN REGALO]
Astucia para decorar los temas de Amigo Invisible 2145037518

[RECURSO 2 Ó PARTE DE ARRIBA DE UN REGALO]
Astucia para decorar los temas de Amigo Invisible 2145037518

[RECURSO 3 Ó PARTE DE ARRIBA CON UNA SOMBRA ABAJO Y LA CRIATURA EN MEDIO]
Astucia para decorar los temas de Amigo Invisible 2145037518

Bloc de Notas

Nota: Debes de agarra una imagen cualquiera, recortarle en 2 partes, deben de tener las mismas dimensiones en cuanto a la anchura
Nota 2: EL COLOR DE FONDO DEL RECURSO 3 SERÁ EL DEL COLOR DE FONDO DEL FORO, no recuerdo por que, pero debe ser así xD.

1- Construir el Código
Se divide en 2 partes:

1- Llamando "Elemento":
Aquí insertaremos un enlace, nada de otro mundo, el link será de la imagen de nuestra criatura, y en lo que sé verá deberemos colocar:

Código:: <div id="NOMBREDELIDENTRECOMILLAS">¡Revisa el Regalo!</div>

El "NOMBREDELIDENTRECOMILLAS" será el nombre que le daremos al elemento, yo le llamaré "RegaloAmigoInvisible"

Y seguidamente del recurso 1

Código que usé:

Código:: [url=http://i39.servimg.com/u/f39/17/33/68/09/regalo14.png]<div id="RegaloAmigoInvisible">¡Revisa el Regalo!</div>[/url][img]http://i39.servimg.com/u/f39/17/33/68/09/regalo12.png[/img]

2- Dándole estilo al "Elemento":
Aquí es donde necesitamos un poco de paciencia Ejem...

Iniciaremos el código con un:

Código:: <style type="text/css">

Después colocaremos el titulo que le hemos dado a nuestro "elemento" Empezando con un numeral y al final abriendo "{":

Código:: #RegaloAmigoInvisible{

Colocaremos de fondo el RECURSO 2 y especificaremos que el tamaño del elemento es el de la imagen:

Código:: #RegaloAmigoInvisible {width: 128px;height: 60px;text-shadow: 0px 0px 3px white;background-image: url(http://i39.servimg.com/u/f39/17/33/68/09/regalo11.png);border-top-left-radius: 25px;border-top-right-radius: 25px;color: white;text-align: center;}

Yo le he puesto más atributos para decorarle un poco SIII

Atributos:
El tamaño de la imagen del RECURSO 2

Código:: width: 128px;height: 60px;

width es ancho, height es la altura

Hacer que brille el texto:

Código:: text-shadow: 0px 0px 3px white;

Los 2 primeros digitos son las coordenadas de la sombra, con X, Y, ya sabes, plano cartesiano, okno
y el tercero es la dispersión del efecto, por ultimo, el color, en ingles
Imagen de fondo:

Código:: background-image: url(http://i39.servimg.com/u/f39/17/33/68/09/regalo11.png);

Bordes:

Código:: border-top-left-radius: 25px;border-top-right-radius: 25px;

Color del texto:

Código:: color: white;

Posición del texto:

Código:: text-align: center;}

RECUERDEN LOS ";", y el { al final.

Ahora, seguido de ese cierre, colocamos "#NOMBREDELELEMENTO:hover", sin comillas, y de fondo, le colocaremos el 3 recurso, y especificaremos el tamaño, como hicimos anteriormente:

Código:: <style type="text/css">#RegaloAmigoInvisible {width: 128px;height: 60px;text-shadow: 0px 0px 3px white;background-image: url(http://i39.servimg.com/u/f39/17/33/68/09/regalo11.png);border-top-left-radius: 25px;border-top-right-radius: 25px;color: white;text-align: center;}#RegaloAmigoInvisible:hover {height: 256px;width: 128px;text-shadow: 0px 0px 3px transparent; background-image: url(RECURSO 3);}</style>

Abandonemos el HTML por un momento, y vayamos al PS.

Abrimos nuestra imagen que usaremos como RECURSO 3, y abrimos nuestra carpeta de creaciones de Spore, y arrastramos la imagen hacia el Photoshop, guardamos, y ya estaría listo.

Astucia para decorar los temas de Amigo Invisible Captur10

Astucia para decorar los temas de Amigo Invisible Captur10

Astucia para decorar los temas de Amigo Invisible Captur11

Ahora cerramos el "style"

Código:: </style>

Y tendremos completado la decoración cute

Si queremos varios de estos en nuestros post, solo debemos cambiar los "NOMBRESDELELEMENTO", que se usan 3 veces, 1 en la primera parte del código, cuando se "Llama elemento" y los otros 2, en la segunda parte, cuando se les da estilo, y después, sustituir las imágenes de los recursos Sos Groso!

Es decir, un segundo código nos quedaría algo como esto:

Código:: [url=http://i39.servimg.com/u/f39/17/33/68/09/regalo20.png]<div id="RegaloAmigoInvisible2">¡Revisa el Regalo!</div>[/url][img]http://i39.servimg.com/u/f39/17/33/68/09/regalo17.png[/img] <style type="text/css">#RegaloAmigoInvisible2 {width: 128px;height: 60px;text-shadow: 0px 0px 3px white;background-image: url(http://i39.servimg.com/u/f39/17/33/68/09/regalo18.png);border-top-left-radius: 25px;border-top-right-radius: 25px;color: white;text-align: center;}#RegaloAmigoInvisible2:hover {height: 256px;width: 128px;text-shadow: 0px 0px 3px transparent; background-image: url(http://i39.servimg.com/u/f39/17/33/68/09/regalo20.png);}</style>

Espero que les guste,

Si se me ha pasado algo por alto, ¡preguntalo!

por Wigazo Sáb 20 Dic 2014, 15:50

"Astucia"
Una vez más, te recuerdo que no estás en FDF. what is this racket

Muy buena astucia, gracias por compartirla, es un lindo detalles para los temas. Sos Groso!

por dekarserverbot Sáb 20 Dic 2014, 15:51

faltaron el rosa y el morado

por Eleanor Drapeaux Sáb 20 Dic 2014, 15:56

Bonito, lástima que no lo use Yao Ming

por Lechuza Sáb 20 Dic 2014, 16:03

Muy, MUY buena astucia, Shurin. Seguro quedará re-cool en los posts.

por Shurin Sáb 20 Dic 2014, 16:17

Wigazo escribió:"Astucia"
Una vez más, te recuerdo que no estás en FDF.

Muy buena astucia, gracias por compartirla, es un lindo detalles para los temas.

por Lisander Sáb 20 Dic 2014, 16:29

Me duele la cabeza D:

No creo que lo use, igual no entendi todavia como poner la criatura en el regalo. Igualmente gracias por enseñarnos este codigo.

Edit: Como sabes tanto de codigos? O_o