Tutorial como crearle bordes a tus imágenes

Hola a todos! .. El día de hoy les traigo un sencillo tutorial a pedido de sobre como ponerle un bordecito a tus imágenes.

Paso 1: abres un nuevo lienzo

Paso 2: colocan la imagen que desean editar

Paso 3: Después en una nueva capa, con la herramienta marco rectangular  

  haces un rectángulo de menor tamaño que el de tu lienzo.

Das clip derecho  sobre tu imagen y te saldrán varias opciones, seleccionas la segunda opción que dice seleccionar inverso. Se marcará el área inverso al que seleccionaste primero. Allí con la herramienta bote de pintura  pintas de algún color, puede ser cualquiera. Ya tienes marcado el marco.

Luego yo simplemente utilizo un estilo que deja al marco con un efecto mas lindo.
Yo suelo utilizar los de esta clase:

Por si no los tienen les comparto dos

Descargar

Luego si quieren apretando Ctrl T (y estando en la capa de su borde) pueden modificar el tamaño de su borde o moverlo de lugar. (como se muestra en la imagen de as arriba)

Seguir leyendo

Tutorial: Como combinar fuentes

 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.

Descargar tutorial: PDF

Seguir leyendo

Efecto Hover: Pixel Heart |♥

Holi a todos mis angelitos ♥ hoy 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.

Seguir leyendo