Muchos buscamos una mejor visibilidad de nuestras publicaciones dando mejor organización al contenido, para eso, el uso de separadores e imágenes es fundamental.
Hoy quiero escribir un tutorial básico sobre cómo crear elegantes separadores mediante el programa de photoshop Cs6 y como utilizar el markdown para usar imágenes en nuestras publicaciones.
Como crear separadores
Paso 1
Ya que tenemos abierto el Photoshop cs6, lo primero que vamos hacer es ir a la pestaña: Archivo y seleccionar la opción: Nuevo
Paso 2
Nos mostrará una ventana en la que debemos ingresar los siguientes parámetros:
Anchura: 800px
Altura: 450px
Resolución: 72
Modo de color: Color RGB
Contenido de fondo: Transparente
Luego daremos click a la opción: OK
Paso 3
El siguiente paso es seleccionar la herramienta de rectángulo redondeado en la barra lateral izquierda, como lo muestro en la imagen de arriba.
Paso 4
Al seleccionarlo nos mostrará en la parte superior un barra con opciones en ella daremos click en donde dice: Trazo y seleccionamos la opción: Sin color, como lo muestro en la imagen de arriba
Paso 5
Ahora en la misma barra superior seleccionamos la opción: Relleno y elegimos el color que queremos para el rectángulo redondeado
Paso 6
Para realizar los rectángulos redondeados como lo muestro en la imagen de arriba vamos a tomar en cuenta los píxeles de la imagen y la regla superior.
Comenzando desde la parte izquierda dejando un espacio de 2 píxeles, alargamos hacia el centro y fijándonos en la regla superior lo soltamos en 12.3 cm y repetimos todo con el siguiente rectángulo pero esta vez empezando desde la parte derecha.
El grosor del rectángulo a mi me gusta dejarlo en 1 pixel ( la altura de un cuadro en la imagen de fondo en la que estas trabajando )
Paso 7
Ahora vamos a irnos a la pestaña: Archivo y seleccionamos la opción: Colocar.
Nos mostrará una ventana de nuestro explorador de windows donde seleccionaremos la imagen que vamos a colocar en el centro de nuestro separador.
Paso 8
Nos mostrará la imagen en su tamaño original, para achicarla vamos hacer uso de los extremos y jalamos hacia el centro hasta tener el tamaño justo para el espacio en el centro entre los 2 rectángulos redondeados.
Ya que tenemos el tamaño, vamos arrastrar la imagen al centro.
Paso 9
Ahora vamos a seleccionar la herramienta: recortar de la barra lateral izquierda y nos aparecerán unas marcas en los bordes de la imagen.
Vamos a jalar el borde superior hasta donde está el límite de nuestro separador y repetimos la misma opción con el borde inferior. Nos tiene que quedar como lo muestro en la imagen de arriba.
Paso 10
El último paso es irnos a la opción: Archivo y seleccionar la opción: Guardar como.
Elegimos la carpeta y el nombre de nuestro separador y seleccionamos el formato del archivo: PNG y damos click en Guardar
Guía de Markdown en imágenes
Imagen a la derecha
Si queremos que la imagen a utilizar dentro del texto nos aparezca en la parte derecha utilizaremos el siguiente código:
< div class="pull-right" >< img src="image" >< /div >
Donde dice "image" lo reemplazamos por el link de la imagen que subimos ( dentro de las comillas ), se tiene que ver así:
Nota: si vas a coger el código de arriba directamente de este post, elimina los espacios en blanco dejados después del símbolo mayor que y menor que.
Imagen a la izquierda
Si queremos que la imagen a utilizar dentro del texto nos aparezca en la parte derecha utilizaremos el siguiente código:
< div class="pull-left" >< img src="image" >< /div >
Donde dice "image" lo reemplazamos por el link de la imagen que subimos ( dentro de las comillas ), y ahora para que la imagen se muestre a la izquierda, reemplazamos donde dice "pull-right" por "pull-left" ( dentro de las comillas ), se tiene que ver así:
Nota: si vas a coger el código de arriba directamente de este post, elimina los espacios en blanco dejados después del símbolo mayor que y menor que.
Como usar imagenes dentro de una tabla
Si quieres usar imágenes en forma de galería para mostrar tus fotos, este es el código necesario:
|||||
|---|---|---|---|
|imagen|imagen|imagen|imagen|
Reemplazamos donde dice imagen y colocamos el link de la imagen que subimos y nos quedará algo así:
 | | | |
Si queremos agregar información debajo de cada imagen podemos usar este código:
|||||
|---|---|---|---|
|imagen|imagen|imagen|imagen|
|Detalles|Detalles|Detalles|Detalles|
Reemplazamos donde dice Detalles por la información que quieras incluir.
Hago separadores en movimiento
Hago bonitos separadores con movimiento por un precio de $2 SBD, aquí te muestro un vídeo con unos ejemplos:
Si te gustaría tener un separador como en el vídeo por favor envíame $2 y dentro del memo coloca el link de la imagen que quieres utilizar en el centro de separador.
También agrega en el memo que clase de movimiento quieres que tenga la imagen, por ejemplo:
- girar en 360 grados
- en 180 grados y regresar a la posición inicial
- en 180 grados y luego vuelta de 360 grados y volver a la posición original
Nota: los vectores usados en los ejemplo dentro del vídeo no son mios son tomados de freepik y editados por mi.
Atribución a sus autores:
Imagen del león
Imagen de la cara del perro
Imagen del pug
Gracias por leer!, por favor apoyame con tu voto, follow me, resteem, todo es bienvenido, Saludos!! :)
