Tutorial: Como combinar fuentes

3 de marzo de 2015



 Hola a todos mis queridos angelitos! .. estuve bastante perdida últimamente por falta de internet, ya que me mude y no la instalo todavía, espero poder tenerla pronto.


 La entrada de hoy esta dedicada a un sencillo tuto de como combinar fuentes en sus ediciones para que queden mas llamativos y lindos, ya que es un poco complicado y a muchos no les sale.

 Lo realice en varias imágenes con ejemplos para que se entienda mejor y sea mas entretenido leer..



Tip 1: Si tienes en una edición un título y un subtitulo, o un texto con mayor importancia que el resto del texto, puedes usar esta dos opciones:                        

  • La de resaltar o remarcar mas el título con una fuente mas gordita, y al subtitulo hacerlo con una fuente mas finita y menos cargada como indica la imagen.

  • Si tu título es mas largo que el subtitulo puedes hacer como en el segundo ejemplo, en el titulo usar todas las letras en minúscula y con una fuente llamativa, y al subtitulo ponerle un fuente livianita y con todas las letras en mayus para que acapare un poco mas de lugar y no se pierda tanto debajo de la oración del título.


Tip 2:  Si tienes bastante que decir (no creo que tanto como en la imagen de ejemplo xD) siempre tienes que tener en cuenta que todo el mundo siempre lee primero lo que esta como una fuente en mayor tamaño, por eso siempre hay que poner lo mas importante mas grande que el resto del texto!


Tip3: También puedes probar con acomodar los tamaños de los textos haciendo que rellené alguna forma como redondos, cuadrados, rectángulos, triángulos, así queda mas llamativo y no desperdicias un determinado lugar de tu diseño.


Tip 4: Siempre debes de tener en cuenta que temática o mensaje tiene tu diseño, si es para algo llamativo e informal debes colocar cierta fuente que enfatice con el tema, si es para algo serio debes de usar una fuente completamente distinta.


Tip 5: Nunca debes usar fuentes difíciles de leer como en la imagen, porque es un rollo tratar de descifrar algunas veces que dice y cansa la vista. Fuentes de ese tipo quedan mejor para aclarar cosas cortitas o para poner tu nombre.

Efecto Hover: Pixel Heart |♥

7 de febrero de 2015



Holi a todos mis angelitoshoy les traigo un pequeño efecto que les permite poner a una imagen formas (como corazones, estrellas, etc.) al pasar el cursor por encima..  puede serles útil para sus afiliados o para cualquier uso que quieran darle.. Sin mas les dejo como es .. 

Preview




Para tenerlo en tu blog debes ir a Plantilla | Editar HTML y colocar el siguiente código arriba de ]]></b:skin> y en plantillas clásicas arriba de </style>

.storm {
-webkit-transition:.6s;
outline-offset: -2px; /* Posición del borde */
outline: 1px solid #bbb; /* Estilo del borde */
max-width:49px; /* Tamaño máximo de la imagen */
box-shadow: inset 0 0 50px #bbb, 0 0 3px #bbb; /* Sombra de la imagen */
}
.storm:hover, .storm2:hover {
-webkit-transition:.6s;
outline-offset: -50px;
outline: 1px solid #fff;
-webkit-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */-moz-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
-o-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
}
.storm2 {
-webkit-transition:.6s;
outline-offset: -2px;
outline: 1px solid #bbb;
max-width:50px;
box-shadow: inset 0 0 50px #bbb, 0 0 3px #bbb;
}

Una vez que lo haces  guardas, y colocas en un gadget de javascripts {en plantillas clásicas solo colócalo en el lugar que lo quiers tener} lo siguiente:

<a href="url" target="_blank"><img class="storm" src="http://i.imgur.com/3g4puLP.png" /></a>
<a href="url" target="_blank"><img class="storm2" src="http://i.imgur.com/W7udCrR.png" /></a>
<a href="url" target="_blank"><img class="storm" src="http://i.imgur.com/3g4puLP.png" /></a>

Por si le quieren cambiar de forma solo deben pegar el link de una forma png en donde dice /* Forma hover */

Aquí les dejo alguna formas por si les sirve- 



Da créditos si lo usas- el efecto es 100% creado por mi.

Descargar fuentes de google fonts a tu pc

23 de enero de 2015



Hoy les traigo un sencillo tutorial de como descargar e instalar fuentes de google/fonts en la pc, podría serles de utilidad si por ahí encuentran una fuente de allí para el diseño de sus blogs y tambien quieran descargarla para editar en photoshop.. en fin sin mas vueltas les dejo el tuto..

1. Deben ir a google.com/fonts  teniendo su sesión de gmail o google+ iniciada.

2. Busquen entre las categorías de fuentes que existen {ver imagen} y se ven alguna que les guste cliquean en Add Collection, toda las que van escogiendo se van agregando en la parte de abajo de la ventana {ver imagen}.



3. Una vez que encontraron todas las fuentes que les gustan cliquiean donde muestra la imagen y les aparecerá una ventada donde deben escoger .zip .. una vez que lo hagan comenzara la descarga.


4. Cuando termine de descargarse solo deben abrir el zip e instala la fuente en su pc♥

Espero les haya sido de utilidad el tutorial.. saludos!♥