Conectarse
Temas Favoritos

Creación Aleatoria

Los posteadores más activos del mes
FlairDreamer |
| |||
CharaToLoki |
| |||
Schmieden |
| |||
erik_bcn |
| |||
skellois |
| |||
kingleyend |
| |||
Itsuka Shiro |
|
Hora Mundial
Astucia para decorar los temas de Amigo Invisible
Página 1 de 1. • Comparte
Astucia para decorar los temas de Amigo Invisible
¡Hola S2!, He decidido compartir un truco para los post del concurso "Amigo Invisible" ya que ya estamos al rededor de esas fechas
El efecto del tutorial una vez finalizado, será esto:


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
Los recursos que necesitaremos serán:
Photoshop (Yo usaré el CC)
[RECURSO 1 Ó PARTE DE ABAJO DE LA IMAGEN DE UN REGALO]
[RECURSO 2 Ó PARTE DE ARRIBA DE UN REGALO]
[RECURSO 3 Ó PARTE DE ARRIBA CON UNA SOMBRA ABAJO Y LA CRIATURA EN MEDIO]
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:
El "NOMBREDELIDENTRECOMILLAS" será el nombre que le daremos al elemento, yo le llamaré "RegaloAmigoInvisible"
Y seguidamente del recurso 1
Código que usé:
2- Dándole estilo al "Elemento":
Aquí es donde necesitamos un poco de paciencia
Iniciaremos el código con un:
Después colocaremos el titulo que le hemos dado a nuestro "elemento" Empezando con un numeral y al final abriendo "{":
Colocaremos de fondo el RECURSO 2 y especificaremos que el tamaño del elemento es el de la imagen:
Yo le he puesto más atributos para decorarle un poco
Atributos:
El tamaño de la imagen del RECURSO 2
width es ancho, height es la altura
Hacer que brille el texto:
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:
Bordes:
Color del texto:
Posición del texto:
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:
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.


Ahora cerramos el "style"
Y tendremos completado la decoración
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
Es decir, un segundo código nos quedaría algo como esto:
Espero que les guste,

El efecto del tutorial una vez finalizado, será esto:
¡Revisa el Regalo!

¡Revisa el Regalo!

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

Los recursos que necesitaremos serán:






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

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

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.


Ahora cerramos el "style"
- Código:
</style>
Y tendremos completado la decoración

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

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!
Última edición por Shurin el Sáb 20 Dic 2014, 19:02, editado 2 veces
Re: Astucia para decorar los temas de Amigo Invisible
"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.
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.


Regalos de [Tienes que estar registrado y conectado para ver este vínculo]:
![]() ¡Gracias @Gherla! ![]() | ![]() ¡Gracias @Ikaros[LW]! ![]() | ![]() ¡Gracias @niko1996arg! ![]() | ![]() ¡Gracias @trashmunster! ![]() |
- Spoiler:
Re: Astucia para decorar los temas de Amigo Invisible
faltaron el rosa y el morado


no hay mucho que ver aqui
dekarserverbot- Baneado
- Puntos de Capitán : 554
Actividad de Arquetipos : Ver
Barra de Respeto :Mensajes : 6164
Sexo :
Localización : nunca lo logro... mas nunca se rindio
¿Algo que decir? : MAKE SPOREPEDIA2 GREAT AGAIN #MS2GA
Fecha de inscripción : 17/05/2011
Premios :
Eleanor Drapeaux- Bardo Groupie
- Puntos de Capitán : 12
Actividad de Arquetipos : Ver
Barra de Respeto :Mensajes : 2234
Sexo :
Edad : 23
Fecha de nacimiento : 04/02/1999
¿Algo que decir? : You're an open book
Fecha de inscripción : 01/12/2013
Premios :
Re: Astucia para decorar los temas de Amigo Invisible
Muy, MUY buena astucia, Shurin. Seguro quedará re-cool en los posts.

Re: Astucia para decorar los temas de Amigo Invisible
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.

Re: Astucia para decorar los temas de Amigo Invisible
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
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

![]() |
Re: Astucia para decorar los temas de Amigo Invisible
Tiene experiencia administrando un foro, habrá aprendido por eso.

Regalos de [Tienes que estar registrado y conectado para ver este vínculo]:
![]() ¡Gracias @Gherla! ![]() | ![]() ¡Gracias @Ikaros[LW]! ![]() | ![]() ¡Gracias @niko1996arg! ![]() | ![]() ¡Gracias @trashmunster! ![]() |
- Spoiler:
Re: Astucia para decorar los temas de Amigo Invisible
Lisander escribió:
Edit: Como sabes tanto de codigos? O_o
Jamas te poses ante la luz del FDF

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

Re: Astucia para decorar los temas de Amigo Invisible
Wigazo escribió:Tiene experiencia administrando un foro, habrá aprendido por eso.
...

¿Lo dices en serio, Wig, o te refieres al foro plagio? xDDD.
Re: Astucia para decorar los temas de Amigo Invisible
Lo digo en serio. xD

Regalos de [Tienes que estar registrado y conectado para ver este vínculo]:
![]() ¡Gracias @Gherla! ![]() | ![]() ¡Gracias @Ikaros[LW]! ![]() | ![]() ¡Gracias @niko1996arg! ![]() | ![]() ¡Gracias @trashmunster! ![]() |
- Spoiler:
Re: Astucia para decorar los temas de Amigo Invisible
AH, arrastrarlo hasta el photoshop, ahora entiendo. Gracias 


![]() |
Re: Astucia para decorar los temas de Amigo Invisible
NO CONTABAN CON MI CODIGO!




no hay mucho que ver aqui
dekarserverbot- Baneado
- Puntos de Capitán : 554
Actividad de Arquetipos : Ver
Barra de Respeto :Mensajes : 6164
Sexo :
Localización : nunca lo logro... mas nunca se rindio
¿Algo que decir? : MAKE SPOREPEDIA2 GREAT AGAIN #MS2GA
Fecha de inscripción : 17/05/2011
Premios :
Re: Astucia para decorar los temas de Amigo Invisible
dekarserverbot escribió:NO CONTABAN CON MI CODIGO!

Bam dum tss.
Re: Astucia para decorar los temas de Amigo Invisible
dekarserverbot escribió:NO CONTABAN CON MI CODIGO!

Interesante tutorial

>>>>>>>>/
//
/[Tienes que estar registrado y conectado para ver este vínculo]/
//
/<<<<<<<<




- Mi filosofía:
Xhaps- Visitante Viajero
- Puntos de Capitán : 537
Actividad de Arquetipos : Ver
Barra de Respeto :Mensajes : 18610
Sexo :
Edad : 23
Fecha de nacimiento : 25/01/1999
Localización : Chilelandia
¿Algo que decir? : Allá le vamos po // 沢村 竜平 // 矢吹 丈 // アカギ // 内藤馬乃介 // King Logan// Makalov// Zephiel// 神 隼人// 流竜馬
Fecha de inscripción : 08/05/2011
Premios :

» Regalo (atrasado) para mi amigo invisible.
» Regalo para Zarkhator2 [Amigo invisible]
» Sugerencia para hacer otro Amigo invisible
» Mi regalo especial para el amigo invisible [as] @Señor churrasko
» Soultastic naga (Regalo para Cubic souls![Amigo invisible] uwu) [AI5]
» Regalo para Zarkhator2 [Amigo invisible]
» Sugerencia para hacer otro Amigo invisible
» Mi regalo especial para el amigo invisible [as] @Señor churrasko
» Soultastic naga (Regalo para Cubic souls![Amigo invisible] uwu) [AI5]
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
|
|
» Como migrar de continente en el estadio criatura/How to migrate from one continent to another during creature stage
» Spore Adventures Downloader v3.23
» Manaphy (Pokemon)
» Mod complejidad infinita sin cosas extra y un bonus (opcional)
» Two spiders/Dos arañas
» Ancient Space Mod V.2
» Spore2005_BetaFaces
» ¿Que música están escuchando?
» Surviving The Aftermath: Turbina Eólica Grande
» Pregunta: ¿Existe un limite de creaciones en Spore?
» Aventuras de Robot chicken
» Dónde encontrar el mod de partes robóticas?
» "Guía del Aventurero Aventurado en Aventuras" (Mega Tutorial de Aventuras Galácticas)
» Plantilla de Aventura: Bosque Viejo
» Better Spore Parts (Revivido)
» Lanaris
» AVENTURA: De un rescate a una odisea
» Servidor Oficial del Foro [Discord]
» ISLAS GUMPA
» Algunos Vehículos míos Remasterizados
» Spore Vehicle Converter
» Star Wars: Caza TIE Experimental M1
» Creature Editor Backgrounds - Rainbows
» Hola
» Creaturas feas y deformes que hice
» Usuario con 21.000 creaciones en la Sporepedia
» DekarServerSpoffit[TS][♫]
» Aventura: "Encuentro" v2.0
» No sé... un mercado...
» Cosas que pueden necesitar las criaturas
» Rodolfo [AYUNTAMIENTO]
» criaturas de frutas
» Ikariam: Portaglobos.
» Alfonso
» Beta Faces (Revivido)
» Motel of Melora (Inglés)
» Las pruebas de Cascazul.
» caos en el planeta sebes
» Preguntas simples sobre Aventuras Galácticas
» KROMA
» Pac-Man en Spore (primer aventura)
» Mi primer aracnido.
» PioPlin (Mi primer Ave)
» 7 Criaturongas mias
» mis antiguas creaciones
» SporeCraft V1! Partes de Minecraft en Spore!
» Mod potente modo criatura
» Solo en la galaxia
» Platinum Spore 1.8.1 un mod que cambia el juego por completo
» CamBen Color Pack
» Castillo (un edificio de ocio)
» Más slots en el Creador de Aventuras.
» Bots de Exploracion
» Para los usuarios de Sporepedia 2: Disculpas
» Cómo subir de nivel de capitán con Cheat Engine
» Asimetría para Spore (Revivido)
» ¡Poder crear o elegir una célula antes de iniciar una nueva partida!
» HV JI-Nedes Starcruiser
» Las 5 Misiones Imposibles: El Santuario Negro parte 1
» Taller de Encargos Oficial: Edificios [Pide aquí tu edificio]
» [Imperio Colmenar] - Dron Dinámico de Asalto -
» HV Helltank BR5
» [Imperio Colmenar] - Dron de Combate -
» Edificios Set: Rojo-Negro
» Pustulante
» TEMA FLOOD
» Beyond [O8][E][♫]
» Ikariam: La Otra Tienda.
» Génesis... ¿algo grande se acerca?
» Los posibles sucesores de Spore.
» (Nuevo) Arquetipo Grox Mod y pirata Arquetipo 2018 (1.4) + Bonus
» Galaxia Sporepedia2 - Spore Multijugador
» M.I.L.F - Friday Night Funkin'
» Crear interiores en el editor de edificios
» Pack Mods Spore
» Chicas en bikini (creaciones de la Sporepedia original)
» Partidas spore multijugador
» 7 mods
» Mi imperio NPC
» Los Arquetipos
» mods para hacer personajes
» Dance Animations Mod - 3rd Set
» El Mito Olvidado, Una aventura sin mods
» Mensaje de socorro [REMASTERIZADO]
» MegaPack de Texturas
» Aventura: Deepspace (Espacio Profundo) Aventura de la Sporepedia original. [Resubido]
» Viaje en el Tiempo II
» Lyoko
» El Queso Fiant
» La Leyenda del Unicornio
» Forzar Guardado
» ¡Versiones de Grox!
» Extensión de Chrome: Sporepedia Downloader [1.2]
» Mod especia Marihuana Espacial
» Uso de mando en spore: ¿viable?
» Equilibrar la temperatura de los planetas.
» Crear una cuenta
» Me presento