Nymphea's Cage
  • Pedido #1 Savage Themes
  • Pedido #9 Savage Themes
  • Pedido The Warrior Road
  • Cupo disponible
  • Cupo disponible
  • Cupo disponible
  • Haz tu propio pedido aqui
    Lo ultimo
    Ultimo aporteUltimo tutorialUltimo proyectoUltimo grafico
    Compañeros y Recomendados
    adminsitro miembro solo recomiendo

    Últimos temas
    » Keep it Simple
    Lun Mayo 08, 2017 3:19 am por Nymphea

    » ¿Qué ocurre con el copyright de las imágenes?
    Dom Mayo 07, 2017 5:23 pm por Nymphea

    » Cloudy Spring
    Lun Abr 24, 2017 2:38 am por Nymphea

    » Tablilla para blogspot
    Dom Abr 23, 2017 4:45 pm por Nymphea

    » StarDust
    Sáb Mar 18, 2017 2:37 am por Nymphea

    » ¿Podrías desarrollar más tutoriales?
    Mar Mar 14, 2017 6:10 pm por Shiki

    » Hidden in the Moon
    Jue Feb 23, 2017 5:36 am por Nymphea

    » Captain's life
    Mar Ene 31, 2017 10:35 pm por Ivy Laufeyson

    » Movie Afis Pack
    Sáb Ene 07, 2017 4:05 am por Nymphea


    Personalizar una tablilla

    Ver el tema anterior Ver el tema siguiente Ir abajo

    Personalizar una tablilla

    Mensaje por Nymphea el Lun Jun 08, 2015 11:49 am


    Como personalizar una tablilla

    Welcome!...

    Bienvenidos a este tutorial, en el que les enseñare a personalizar una tablilla a su gusto para adecuarla a sus gustos, o a sus personajes. Este no es un tutorial apra modificar tablillas, es para personalizarlas! No les enseñare a cambiar tablillas usandolas como base apra sus creaciones si no que les enseñare a personalizarlas. Con esto claro comenzemos, yo para el ejemplo usare esta
    Tablilla de Savage Themes por Nymphea (por si algiuen no capto, es mia):
    Con esto y el codigo listo estamos listos para comenzar el tutorial c:

    El concepto

    Lo primero que tenemos que definir, es que queremos lograr, no es lo mismo crear una tablilla para un pj maculino o femenino, como a si mismo no es lo mismo uno con tematica de fiestas. Con eso listo, nos dedicaremos a buscar una paleta que responda a lo que necesitamos. Hay dos formas de hacer esto buscar una paleta ya creada, en webs como Colour Lovers, o crear una en paginas de colores HTML la que yo recomiendo como siempre es esta Color HTML, por que nos permite guardar los codigos de colores que nos gustas y asi armar la paleta.
    Yo por ejemplo usare esta paleta

    Si por ejemplo queremos usar un patron (patron es una imagen pequeña que al ponerse una junto a otra, crean una imagen mas grande, sin que se vea cortado), tambien este es momento de buscarlo, yo por ejemplo encontre este que esta hecho con mi paleta dont_leaf_qlaudia
    Vector Patterns by COLOURlovers

    Las fuentes

    Tambien tienes que conciderar, si cambiaras la funete de los textos, la fuente o font, consiste en gran parte de como luce un codigo. Como para esta ocasión solo usariamos una para cambiar los textos les hare una mini-tuto para añadir webfonts, pero si gustan saber mas de las fonts o usar mas de una, les recomiendo que visiten mis tutoriales "Un mundo de letras".
    Para buscar una font, nos iremos a Google Web fonts, y escogeremos alguna que nos guste, por ejemplo yo escogere Droid Serif. Luego hagan click al boton que tiene una flecha a la derecha, si ponen el cursor encima dira "Quick Use". Los llevara a una pagina donde el punto 3 les dará el codigo que estamos buscando. Si no quedo claro aquí dejo capturas mas explicativas
    Capturas:
    Aqui esta el Boton

    Y la forma del codigo
    El codigo que les dara peguenlo abajo o arriba de la tablilla por ejemplo este es el que me dio a mi
    Código:
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

    Y Comenzamos... por el fondo

    Lo primero que les recomiendo es que, hagna esto en el foro en el que usaran la tablilla o usen la siguiente pagina: Codepen, por que les recomiendo esta pagina? por que la previsualizacion es automatica, no tendran que estar ponienddo el post a cada rato, ademas les separará por colores las partes de cada div y los diferenciará. Si no se manejan mucho les sera de gran ayuda.

    La premisa de esto, es comenzar desde afuera hacia adentro, por que? Lo mas probable es que nos encontremos adentro con elementos similares, si sabemos combinarlos probablemente sea mas sencillo para nosotros que la tablilla luzca linda y armonica. Ademas debemos considerar que hay un elemento que no podemos cambiar que es el fondo del foro. Por eso mismo debemos enfocarnos en que lo que esta en directo contacto con el fondo del post luzca bien con el. Los colores de las fuentes, deben ser siempre lo ultimo que veamos. Por que son mas faciles de cambiar y deben contrastar con el fondo.

    Yo comenzare cambiando el fondo por mi patron, para hacer eso debemos encontrar la propiedad de background en el div. Esta puede venir de tres formas "background" "background-color" o "background-image". Las tres son para lo mismo, solo que la senga involucra solo color y la ultima solo imagen. Mi recomendación personal es que las cambien a solo background, por si cambian de opinion.
    Buscan una parte que luzca asi:
    A continuación cambian ese valor por el que sea de su agrado, pueden ponerlo de cualquiera de estas formas
    background: url(URLDELAIMAGEN!)
    background: #XXXXXX
    background: Nombredelcolor

    Ustedes van jugando yo por ejemplo lo cambie por el patron de la imagen y me ha quedado asi
    Capturas de lo anterior!:
    Asi me quedo al cambiarlo por la imagen

    Y asi se ve en el codigo

    Los que se manejen mas en el HTML pueden añadir bordes o alguna otra cosa que quieran (Luego les colgare un tutorial de bordes). Ahora de la misma forma, vamos a la siguiente caja, como en este caso no hay, yo ire de arriba hacia abajo. Es importante que se fijen siempre un orden en lugar de cambiar elementos al azar por que si no, en algun momento puede quedarle partes que les gusten pero no luzcan bien juntas.

    Recuerden que si no lo están haciendo en una pagina como codepen, vayan previsuaizando su post varias veces para asegurarse que todo combine

    Y ahora de arriba a abajo

    Ahora seguire con las fonts, por que enseñarles de nuevo a cambiar los fondos seria redundante, asi que pasare al titulo de la tablilla, recuerden que este puede estar dentro de un div sin fondo, un span o dentro del elemento font. Es decir delas sigueitnes tres formas:
    Código:
    <div style="propiedades">Titulo</div>
    <span style="propiedades">Titulo</span>
    <font style="propiedades">Titulo</font>
    Ahroa si han visto todas las propiedades que menciono en el tutorial mundo de letras, esto les será super sencillo, pero si no es asi, les cuento lo basico. Lo primero que haremos sera ubicar la propiedad fuente, puede estar acoplada a la propiedad "font" o aparecer explicitamente como "font-family". Si esta como font-family es muy facil solo deben cambiar el nombre de la fuente por la que encontramos en google fonts antes. Si esta como font, aparecera asi. De esta forma el primer valor sera el tamaño y el siguiente la fuente. Por lo tanto tengan en mente, que si aparece font-family, para cabiar el tamaño tendran que buscar la que dice "font-size". Si se marearon un poco les mesutro con una captura
    Explicaciones:

    Lo que esta en azul es la propiedad font, lo que esta en amarillo corresponde al tamaño de la fuente y lo rojo al tipo de fuente. Eso es lo que por ejemplo yo cambiare dejandolo asi

    Ahoraq cambiamos el color de la font, la propiedad se llama color, si no estan no duden en agregarla. Como antes, pueden poner el color en hexagesimal ( #XXXXXX ) o con su nombre. Recuerden intentar ceñirse a su paleta, pero no pasa nada si escogen otro color, yo por ejemplo escogi un suave color crema, pero que por desgracia no se nota mucho, para esto haremos un pequeño truco. Agregaremos una propiedad llamada "text-shadow", cuyo funcionamiento les explico en esta captura. Pero lo que hara sencillamente es agregar una sombra al texto para que sea mas facil de leer. Como saben esto es opcional
    Funcionamiento de Text-shadow:


    Lo amarillo corresponde a la distancia de la sombra en pixeles en sentido vertical
    El rojo corresponde a la distancia de la sombra respecto al original pero en sentido horizontal
    El azul es que tan difuminado quedemos la sombra, como yo la quiero nitida, le deje un valor de 0
    Y el verde por ultimo corresponde al color que queremos tenga esta sombra.

    Aca les dejo como estaria quedando, si lo notan al texto pequeño de abajo le puse una difuminada blanca muy pequeña.


    Cambiando las imagenes

    Ahora pasaremos a las imagnees estan pueden estar de dos formas como fondo de un div (segun lo cual tendremos que cambiarla como cambialos los fondos arriba o puede estar en formato imagen la cual es un codigo similar a este

    Código:
    <img src="URL DE LA IMAGEN AQUI" />

    Ustedes lo cambian con alguna imagen que combine, recuerden que si tiene bordes o algo asi de igual manera deben cambiarlos.

    Y como cambiar el color de los bordes..

    Para cambiarlo deben saber de que Div o caja son parte, y deben cambiar unicamente el valor del color que esta al final. Esto puede estar como "border-color", pero generalmente aparece asi "border: Xpx tipo #color", si aparece asi solo deben cambiar la parte de color, como indique mas arriba. La verdad es que no es nada complicado.

    Resultado final

    Bueno, ahora haciendo las modificaciones en todas las partes que consideren necesarias, pueden disfrutar su resultado final, recuerden respetar el credito de las tablillas, para que todos puedan disfrutarlas libremente. Les adjunto una captura de como me ha quedado a mi por si estaban curiosos

    Mi resultado:


    Tutorial by Nymphea


    Nymphea
    avatar
    Admin

    Mensajes :
    333

    Fecha de inscripción :
    10/09/2012

    Localización :
    somehere


    http://mikeiry.forochile.org

    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.