El foro principal del servidor Pokemon Origins


    2-Diseño de fondos

    Comparte
    avatar
    [lolicon team]R.Zoro

    Mensajes : 15
    Fecha de inscripción : 18/10/2014

    2-Diseño de fondos

    Mensaje por [lolicon team]R.Zoro el Dom Nov 09, 2014 5:33 pm

    Diseño de fondos

    Ahora que ya conocemos las herramientas necesarias para diseñar nuestra Trainer Info personalizada,empezaremos a diseñarla.En mi opinion,la Trainer Info se divide en tres partes:fondo,imagen y texto.En este capitulo del tutorial nos centraremos en el fondo.En la mayoria de Infos,el fondo ocupa el 90% de espacio visible.Asi que es importante elegir un fondo adecuado y vistoso,a juego con las imagenes y/o texto que queramos incluir posteriormente.Hay que tener presente que el limite en una Trainer Info es de 300 caracteres.Esto no nos permitira hacer una Info muy elaborada,pero eso no impide que hagamos verdaderas obras de arte si le dedicamos el tiempo necesario.Para empezar el diseño lo primero que hay que hacer es abrir el Designer Plugin,algo que ya se explico en el apartado 1-Introduccion y herramientas necesarias.Hay que recordar que en la parte de arriba se escribira el codigo y en la parte de abajo se muestra el resultado de dicho codigo en tiempo real.Dicho esto,procedere a mostrar y explicar(en caso de ser necesario) los ejemplos mas comunes de fondos.En los ejemplos usare los nombres en ingles de los colores en el codigo,pero si quisiera usar algun codigo de color HTML,solo tendria que sustituir el nombre del color en ingles por el codigo HTML del color deseado.En el primer ejemplo expondre las dos formas de hacerlo.

    Fondo simple

    Como el mismo nombre indica,es el fondo basico.Es un fondo de un solo color,sin ningun tipo de diseño.El codigo seria el siguiente:

    <body style="background:green">

    Fondo simple 1:

    Si decidieramos usar un codigo de color HTML,el codigo seria el siguiente:

    <body style="background:#2EFE2E">

    Fondo simple 2:

    Como se ve,no hay diferencia a la hora de escribir el codigo si expresamos los colores de una manera o de la otra.Solamente cambia en el numero de colores disponibles.

    Degrade horizontal

    Fondos donde los colores se suceden de forma horizontal,habiendo zonas donde los colores se fusionan,dando lugar a un efecto denominado degrade.Un codigo de ejemplo para un fondo de este tipo donde solo se usen 2 colores seria el siguiente:

    <body style="background:qlineargradient(x1:1 stop:.25 white stop:.75 green)">

    En este caso,se aprecia que "x" indica el eje horizontal."White" es el color que aparecera en el lado derecho del fondo y se detendra en el 25% de la imagen a partir la derecha,pero su degrade partira desde el 25% y se detendra en el 75% de la imagen.Y "green" ocupara el 25% restante situado a la izquierda,desde el 75% al 100%.

    Degrade horizontal 1:

    Se puede observar como cada color ocupa un 25% de la imagen,siendo el 50% restante la zona donde se mezclan y dan lugar al degrade.Como siempre digo,depende de cada uno conseguir un fondo en particular.Depende de la experimentacion.Aqui dejo otro ejemplo,esta vez con tres colores.

    <body style="background:qlineargradient(x1:1 stop:.20 yellow stop:.40 orange stop:.80 red stop:.99 red)">

    En el caso de que no quisieramos degrade,este seria un ejemplo:

    <body style="background-color: qlineargradient(x1:1 stop:.333 red stop:.334 orange stop:.666 orange stop:.667  yellow) ";>

    Sin degrade:

    Esto tiene su principal uso en el diseño de fondos con los colores de la bandera de nuestro pais.

    Degrade horizontal 2:

    Degrade vertical

    La forma de expresar el codigo es exactamente igual,solo hay que cambiar la "x" por una "y",para indicar el eje vertical.Usare los mismos ejemplos que en el degrade horizontal pero con la sustitucion de eje necesaria.

    <body style="background:qlineargradient(y1:1 stop:.25 white stop:.75 green)">

    Degrade vertical 1:

    <body style="background:qlineargradient(y1:1 stop:.20 yellow stop:.40 orange stop:.80 red stop:.99 red)">

    Degrade vertical 2:

    <body style="background-color: qlineargradient(y1:1 stop:.333 red stop:.334 orange stop:.666 orange stop:.667  yellow) ";>

    Sin degrade:

    Degrade diagonal

    En este caso hay que intoducir ambos ejes en el codigo.Dependiendo de como indiquemos esos ejes,la orientacion del fondo cambiara,habiendo hasta cuatro opciones disponibles.

    Codigo opcion numero 1:<body style="background:qlineargradient(y1:1 x1:1 stop:.25 white stop:.75 black)">

    Degrade vertical opcion 1:

    Codigo opcion numero 2:<body style="background:qlineargradient(y1:1 x2:1 stop:.25 white stop:.75 black)">

    Degrade vertical opcion 2:

    Codigo opcion numero 3:<body style="background:qlineargradient(y2:1 x1:1 stop:.25 white stop:.75 black)">

    Degrade vertical opcion 3:

    Codigo opcion numero 4:<body style="background:qlineargradient(y2:1 x2:1 stop:.25 white stop:.75 black)">

    Degrade vertical opcion 4:

    Como se observa en el codigo,solo se cambia el "1" (que hay inmediatamente despues de "x" o "y") por un "2".Esto cambia la orientacion del fondo.Como siempre,se podran añadir mas colores.He aqui un ejemplo:

    <body style="background:qlineargradient(y1:1 x1:1 stop:.15 black stop:.30 red stop:.45 black stop:.6 orange stop:.75 black stop:.99 yellow)">

    Degrade vertical con varios colores:

    Degrade circular

    En este caso,hay mas parametros que podremos ajustar dentro del codigo.Son las siguientes:

    Radius:indicara el porcentaje del radio del circulo.
    fx y fy:determinan la posicion del centro de la circunferencia en el plano.
    cx y cy:determinan la orientacion del degrade.

    Ahora un ejemplo bastante basico:

    <body style="background:qradialgradient(cx:.5 cy:.5 fx:.5 fy:.5 radius:1 stop:.4 white stop:.5 black)">

    Degrade circular basico:

    Ahora empecemos a "jugar" con los parametros configurables.

    Radius

    Imaginemos que el radio de la circunferencia del ejemplo anterior es muy grande y queremos reducirlo a la mitad.Lo primero es identificar el parametro a cambiar.Como ya deberiamos saber,es radius.En el caso anterior tenemos que radius:1.Como la mita de 1 es 0.5.solo deberemos sustituir esos valores en el codigo:

    <body style="background:qradialgradient(cx:.5 cy:.5 fx:.5 fy:.5 radius:0.5 stop:.4 white stop:.5 black)">

    Radius 1:

    fx y fy

    Ahora veremos que pasa si variamos los valores de fx y fy.Sus valores por defecto deberian ser 0.5.El mismo resultado da .5.Depende de cada persona como indicar los valores en el codigo.Como decia,con sus valores por defecto la circunferencia se mantiene en el centro de la imagen.Para fx,los valores menores a 0.5 hacen que la circunferencia se mueva hacia la izquierda de la imagen.Y los valores mayores a 0.5 hacen que se traslade a la derecha.Para fy,los valores menores a 0.5 hacen que la circunferencia se mueva hacia arriba de la imagen.Y los valores mayores a 0.5 hacen que se traslade hacia abajo.

    Supongamos que yo quiero situar la circunferencia de la situacion anterior arriba a la izquierda.Para ello solo tendre que darle valores a fx y fy menores a 0.5.Como en el siguiente ejemplo:

    <body style="background:qradialgradient(cx:.5 cy:.5 fx:.1 fy:.1 radius:0.5 stop:.4 white stop:.5 black)">

    fx/fy 1:

    Ahora supongamos que quiero situar la circunferencia abajo a la derecha.Pues ahora tendre que darle valores a fx y fy mayores a 0.5.Como se indica a continuacion:

    <body style="background:qradialgradient(cx:.5 cy:.5 fx:.9 fy:.9 radius:0.5 stop:.4 white stop:.5 black)">

    fx/fy 2:

    Sabiendo que hacemos al variar cada parametro,podremos elegir la ubicacion de la circunferencia a la perfeccion.

    cx y cy

    Estos parametros funcionan de la misma forma que fx y fy.Pero su cambio de valores influye en la orientacion del degrade.Aunque la circunferencia se adapta a esos valores para hacerlo todo posible(al igual que el degrade se adapta cuando cambiamos los valores de fx y fy).

    Ahora quiero que la orientacion del degrade sea hacia arriba a la izquierda.Pues tendre que darle valores a cx y cy menores a 0.5.Como en el siguiente ejemplo:

    <body style="background:qradialgradient(cx:.1 cy:.1 fx:.5 fy:.5 radius:0.5 stop:.4 white stop:.5 black)">

    cx/cy 1:

    Ahora quiero que la orientacion del degrade sea hacia abajo a la derecha.Pues tendre que darle valores a cx y cy mayores a 0.5.Como en el siguiente ejemplo:

    <body style="background:qradialgradient(cx:.9 cy:.9 fx:.5 fy:.5 radius:0.5 stop:.4 white stop:.5 black)">

    cx/cy 2:

    Ahora podremos utilizar lo aprendido para hacer cosas mas complicadas.

    Circulos concentricos

    Para hacer circulos concentricos,el codigo seria el siguiente:

    <body style="background:qradialgradient(cx:.5 cy:.5 fx:.5 fy:.5 radius:1 stop:.1 black stop:.15 black stop:.2 red stop:.25 black stop:.3 orange stop:.35 black stop:.4 yellow stop:.45 black)">

    Circulos concentricos:

    Ahora que ya sabemos que parametros podemos cambiar,podriamos cambiar alguno y obtener algo similar a esto:

    <body style="background:qradialgradient(cx:1.2 cy:.5 fx:0 fy:1 radius:1.5 stop:.1 black stop:.15 black stop:.2 red stop:.25 black stop:.3 orange stop:.35 black stop:.4 yellow stop:.45 black)">

    Ejemplo:

    Como siempre,las opciones son infinitas.Solo depende de nosotros mismos el conseguir lo que de verdad queremos.

    Degrade conico

    Este es el fondo que mas caracteres puede ocupar,si se trata de hacer algo muy elaborado y con mucho detalle.Funciona de forma similar al circular,aunque con alguna diferencia a la hora de escribir el codigo.Pondre varios ejemplos,que es de la mejor forma en la que el lector podra ver que se obtiene y cuales son las diferencias con el degrade circular.

    Ejemplo numero 1:<body style="background:qconicalgradient(cx:.50 cy:.50  stop:0 indigo stop:.2499 e stop:.25 indigo stop:.4999 e stop:.50 indigo stop:.7499  e stop:.75 indigo stop:1 e radius:2 fx:0 fy:2)">

    Ejemplo 1:

    Ejemplo numero 2:<body style="background:qconicalgradient(cx:.50 cy:.50  stop:0 red stop:.1299 e stop:.13 orange stop:.2499 e stop:.25 yellow stop:.3699  e stop:.37 green stop:.4999 e stop:.50 blue stop:.6399 e stop:.64 cyan stop:.7499 e stop:.75 indigo stop:.8799  e stop:.88 purple stop:.999 e radius:2 fx:0 fy:2)">

    Ejemplo 2:

    Este seria algo mas complejo,llegando a ocupar los 300 caracteres que tenemos disponibles para nuestra Trainer Info.Esto nos impediria añadir cualquier elemento mas(imagen y/o texto).

    Ejemplo numero 3:<body style="background:qconicalgradient(cx:.50 cy:1.0  stop:0 red stop:.049 e stop:.05 white stop:.099 e stop:.10 red stop:.149  e stop:.15 white stop:.199 e stop:.20 red stop:.2499 e stop:.25 white stop:.299 e stop:.30 red stop:.349  e stop:.35 white stop:.399 e stop:.40 red stop:.449 e stop:.45 white stop:.499 e radius:2 fx:0 fy:2)">

    Ejemplo 3:

    Este ya superaria el limite de 300 caracteres de una Trainer Info,pero podria usarse como Server Description,que nos permite 500 caracteres.

    Ejemplo numero 4:<body style="background:qconicalgradient(cx:.50 cy:.50  stop:0 red stop:.049 e stop:.05 white stop:.099 e stop:.10 red stop:.149  e stop:.15 white stop:.199 e stop:.20 red stop:.249 e stop:.25 white stop:.299 e stop:.30 red stop:.349  e stop:.35 white stop:.399 e stop:.40 red stop:.449 e stop:.45 white stop:.499 e stop:.50 red stop:.549 e stop:.55 white stop:.599 e stop:.60 red stop:.649  e stop:.65 white stop:.699 e stop:.70 red stop:.749 e stop:.75 white stop:.799 e stop:.80 red stop:.849  e stop:.85 white stop:.899 e stop:.90 red stop:.949 e stop:.95 white stop:.999 e radius:2 fx:0 fy:2)">

    Ejemplo 4:

    Este supera hasta los 500 caracteres,asi que solo se podria usar como Server Announcement,que sube el limite hasta unos casi infinitos 80000 caracteres.

      Fecha y hora actual: Mar Sep 26, 2017 2:29 am