Sporepedia 2
¡Bienvenido a Sporepedia 2! Si quieres empezar a compartir tus creaciones y descargar las de otros, regístrate ya.

Astucia para decorar los temas de Amigo Invisible DL4SYdk
Conectarse

Recuperar mi contraseña

Últimos temas
» Rise of Cults 2 Bot (Beta abierta)
Astucia para decorar los temas de Amigo Invisible CVRdAIRAyer a las 23:31 por Paul_q_f

» TEMA FLOOD
Astucia para decorar los temas de Amigo Invisible CVRdAIRJue 21 Nov 2024, 20:16 por UFHDE

» Experimento Scaver [ZERG]
Astucia para decorar los temas de Amigo Invisible CVRdAIRJue 21 Nov 2024, 16:40 por Davitroon

» El Iceberg Definitivo del Foro [PROYECTO COMUNITARIO]
Astucia para decorar los temas de Amigo Invisible CVRdAIRMiér 20 Nov 2024, 21:20 por Mathaloz

» Experimento Grifo Fantasmal [SINDROME DEL 23]
Astucia para decorar los temas de Amigo Invisible CVRdAIRMiér 20 Nov 2024, 18:10 por Quincho96

» Presentacion y Preguntas
Astucia para decorar los temas de Amigo Invisible CVRdAIRMiér 20 Nov 2024, 11:28 por Quincho96

» BlueXYZ
Astucia para decorar los temas de Amigo Invisible CVRdAIRDom 17 Nov 2024, 00:47 por Max

» Hola
Astucia para decorar los temas de Amigo Invisible CVRdAIRSáb 16 Nov 2024, 23:35 por FlairDreamer

» Los experimentos del Dr. Breincrox, parte 2
Astucia para decorar los temas de Amigo Invisible CVRdAIRSáb 16 Nov 2024, 23:23 por FlairDreamer

» Aldeano Mini Carro [O5] [T] [♫]
Astucia para decorar los temas de Amigo Invisible CVRdAIRVie 15 Nov 2024, 18:38 por Quincho96

» [set]: Criaturas de Maenard
Astucia para decorar los temas de Amigo Invisible CVRdAIRVie 15 Nov 2024, 18:35 por Quincho96

» R3-XP10R3 [AI3] [♫]
Astucia para decorar los temas de Amigo Invisible CVRdAIRVie 15 Nov 2024, 16:17 por Quincho96

» Experimento Scarver-T [Virus-T]
Astucia para decorar los temas de Amigo Invisible CVRdAIRJue 14 Nov 2024, 14:27 por Quincho96

» Caballo [3lite vs. Xhaps] [2]
Astucia para decorar los temas de Amigo Invisible CVRdAIRJue 14 Nov 2024, 11:50 por Sirillium64

» Esidisi's Tower [O4] [E]
Astucia para decorar los temas de Amigo Invisible CVRdAIRJue 14 Nov 2024, 11:47 por Sirillium64

» ¿Que música están escuchando?
Astucia para decorar los temas de Amigo Invisible CVRdAIRJue 14 Nov 2024, 11:44 por FlairDreamer

» Problema con los pies de DI y otros mods
Astucia para decorar los temas de Amigo Invisible CVRdAIRMiér 13 Nov 2024, 20:10 por FlairDreamer

» Las partes robóticas en mi spore no funcionan bien
Astucia para decorar los temas de Amigo Invisible CVRdAIRMiér 13 Nov 2024, 20:08 por FlairDreamer

» ¿Cómo recuperar una criatura borrada?
Astucia para decorar los temas de Amigo Invisible CVRdAIRMiér 13 Nov 2024, 19:22 por FlairDreamer

» Una decada despues!
Astucia para decorar los temas de Amigo Invisible CVRdAIRMar 12 Nov 2024, 22:31 por Endy

» Prototipo Zangief [O3]
Astucia para decorar los temas de Amigo Invisible CVRdAIRMar 12 Nov 2024, 19:09 por Quincho96

» El traveler barato de Owari [TA] [Mx3]
Astucia para decorar los temas de Amigo Invisible CVRdAIRMar 12 Nov 2024, 16:12 por Quincho96

» Golem Guardian [DoT][21] (Golem)
Astucia para decorar los temas de Amigo Invisible CVRdAIRLun 11 Nov 2024, 16:14 por Quincho96

Los posteadores más activos de la semana
Quincho96
Astucia para decorar los temas de Amigo Invisible I10Astucia para decorar los temas de Amigo Invisible M10Astucia para decorar los temas de Amigo Invisible D10 
UFHDE
Astucia para decorar los temas de Amigo Invisible I10Astucia para decorar los temas de Amigo Invisible M10Astucia para decorar los temas de Amigo Invisible D10 
Davitroon
Astucia para decorar los temas de Amigo Invisible I10Astucia para decorar los temas de Amigo Invisible M10Astucia para decorar los temas de Amigo Invisible D10 
Sirillium64
Astucia para decorar los temas de Amigo Invisible I10Astucia para decorar los temas de Amigo Invisible M10Astucia para decorar los temas de Amigo Invisible D10 
Paul_q_f
Astucia para decorar los temas de Amigo Invisible I10Astucia para decorar los temas de Amigo Invisible M10Astucia para decorar los temas de Amigo Invisible D10 
Mathaloz
Astucia para decorar los temas de Amigo Invisible I10Astucia para decorar los temas de Amigo Invisible M10Astucia para decorar los temas de Amigo Invisible D10 
Coldfusion
Astucia para decorar los temas de Amigo Invisible I10Astucia para decorar los temas de Amigo Invisible M10Astucia para decorar los temas de Amigo Invisible D10 

Creación Aleatoria
Hora Mundial

Astucia para decorar los temas de Amigo Invisible

Ver el tema anterior Ver el tema siguiente Ir abajo

Resuelto / Aceptado Astucia para decorar los temas de Amigo Invisible

Mensaje 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
Astucia para decorar los temas de Amigo Invisible 2145037518 [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 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, xD


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


Última edición por Shurin el Sáb 20 Dic 2014, 19:02, editado 2 veces

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje 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 LOL

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

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

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

faltaron el rosa y el morado

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

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

Bonito, lástima que no lo use Yao Ming

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

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

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

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

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

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

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


Okay

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje 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

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por Wigazo Sáb 20 Dic 2014, 16:55

Tiene experiencia administrando un foro, habrá aprendido por eso.

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por Shurin Sáb 20 Dic 2014, 17:10

Lisander escribió:
Edit: Como sabes tanto de codigos? O_o



Jamas te poses ante la luz del FDF Raisins 2

Edit: Agregué imágenes del momento cuando quedaría la criatura "dentro" del regalo, pero en el ejemplo no lo colocaré Razz

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por Lechuza Sáb 20 Dic 2014, 18:16

Wigazo escribió:Tiene experiencia administrando un foro, habrá aprendido por eso.

... JAJAJAJA

¿Lo dices en serio, Wig, o te refieres al foro plagio? xDDD.

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por Wigazo Sáb 20 Dic 2014, 18:44

Lo digo en serio. xD

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por Lisander Sáb 20 Dic 2014, 19:31

AH, arrastrarlo hasta el photoshop, ahora entiendo. Gracias Very Happy

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por dekarserverbot Sáb 20 Dic 2014, 20:49

NO CONTABAN CON MI CODIGO!
Astucia para decorar los temas de Amigo Invisible El_chapulin_colorado

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por Shurin Sáb 20 Dic 2014, 22:02

dekarserverbot escribió:NO CONTABAN CON MI CODIGO!
Astucia para decorar los temas de Amigo Invisible El_chapulin_colorado


LOL , con mi "astucia"
Bam dum tss.

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por Xhaps Dom 21 Dic 2014, 01:31

dekarserverbot escribió:NO CONTABAN CON MI CODIGO!
Astucia para decorar los temas de Amigo Invisible El_chapulin_colorado


LOL

Interesante tutorial

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por ISketchy Dom 21 Dic 2014, 03:01

interezante, tal vez lo use Sos Groso!

Volver arriba Ir abajo

Resuelto / Aceptado Re: Astucia para decorar los temas de Amigo Invisible

Mensaje por Contenido patrocinado

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

Permisos de este foro:
No puedes responder a temas en este foro.