Imagen de mi autoría.
 Como he dicho anteriormente planeo traer diversos accesorios para sus temas; como los separadores que he mostrado en otros post. Esta vez se me ocurrió que estaría bien enfocarme en algo que no he visto:
Viñetas. Ya saben, esos puntos, asteriscos o números que se colocan al lado de un texto para identificar una lista de elementos.
Las viñetas que he diseñado esta vez son: Diamantes. Debajo de este párrafo te dejo una variedad de ellas con diferentes colores. ¡Puedes usarles gratuitamente! Pero sólo en esta plataforma. Para ello descárgalas y agrégalas a tus temas como cualquier otra imagen. También puedes usarles como adornos, como he dicho, su uso es libre en Steemit.
TODAS las imágenes que ves en este post son de mi autoría. Yo las hice y dibujé.
Morado.
Rosa.
Azul oscuro.
Rojo.
Naranja.
Gris.
Beige.
Verde.
Marrón.
Azul claro.
¿Cómo se usan? Inserta la imagen en tu tema o comentario, tras ello, escribe al lado de su código el texto que desees. Ejemplo:
Imagen de mi autoría. Captura de pantalla.
Ventajas de estas viñetas:
Diseño único.
Destacan tu contenido.
Tus temas tienen más vida.
Son fáciles de hacer y usar.
Las hice yo.
Desventajas de estas viñetas:
Necesitas agregarlas o copiarlas una a una.
Sólo funcionan para una línea de texto a la vez (Solución a esto al final).
Las hice yo.
¡Muy bien! Si quieres aprender a hacer este diseño debes descargar el programa
Easy Paint Tool Sai, te dejo un
vídeo para que te guíes. ¡No me pertenece! Todos los derechos y créditos son de su autor o autora.
Una vez tengas el programa descargado crea un Nuevo Lienzo yendo a la opción Archivo >> Nuevo. El tamaño de este será de 32 píxeles de Anchura y 26 píxeles de Altura. El Lienzo es nuestra área de trabajo. Para acercarle usa la rueda central de tu ratón o mouse.
 Los ejemplos de este tema son imágenes animadas que irán cambiando
 conforme pasen los segundos.
Imagen de mi autoría. Captura de pantalla.
https://cdn.steemitimages.com/DQmZGpRjLJbPD3NTcRg9ZS6KV3fpC8P5jAyCsPzVigpbxbM/Binario_1_Colores.gif
Al lado izquierdo de tu programa encontrarás varias herramientas como lo serían los pinceles. Selecciona el pincel Binario y asígnale un (1) píxel de tamaño. Luego, con el Cuadro o Círculo de Colores elige un color preferiblemente oscuro.
Ahora debes ubicar el cursor de tu ratón o mouse a diecisiete (17) píxeles a la derecha, y siete (7) píxeles hacia abajo. Una vez ubicado en el lugar, presiona el Clic Izquierdo para empezar a dibujar tu diamante.
 La razón de esto es para que se cree un margen entre el dibujo y  el texto.
 En el ejemplo te muestro la distancia en píxeles.
Imagen de mi autoría. Hecha con Photoshop.
Construye tu diamante de la siguiente forma:
¿Qué debes hacer?
|
———
--------------------------------------------------|-----------------------------------
Un píxel en la ubicación antes dicha.
|
Dos líneas diagonales verticales hacia la izquierda. Tamaño 2 píxeles.
|
Una línea diagonal vertical de 3 píxeles.
|
Dos líneas diagonales verticales hacia la derecha. Tamaño 2 píxeles.
|
Dos líneas diagonales verticales hacia la derecha. Tamaño 2 píxeles.
|
Un píxel diagonal hacia la derecha.
|
Dos líneas diagonales verticales hacia arriba a la derecha. Tamaño 2 píxeles.
|
Una línea diagonal vertical. Tamaño 3 píxeles.
|
Dos líneas verticales diagonales hacia la izquierda. Tamaño 2 píxeles.
|
Rellena tu figura con un color claro.
|
Tres líneas verticales diagonales hacia la derecha dentro de tu figura.
|
Para guardar tu trabajo usa la opción Archivo >> Guardar como… >> Tipo: PNG (*.png) >> 32bpp (Cada píxel tiene Opacidad). Así tu viñeta tendrá un fondo transparente.
Imagen de mi autoría. Captura de pantalla.
Como último quiero enseñarte cómo resolver que tu viñeta sólo funcione para una línea de texto. Ejemplo:
 Primera línea de texto (continúa abajo)
segunda línea de texto que no abarca la viñeta.
Lo único que debes hacer es crear un Lienzo cuyas dimensiones sean 32 píxeles de Anchura y 26 píxeles de Altura. Las mismas medidas de la viñeta. Después de eso guarda tu trabajo con la opción Archivo >> Guardar como… >> Tipo: PNG (*.png) >> 32bpp (Cada píxel tiene Opacidad). Esto te dará un recuadro transparente que simulará un espacio entre el borde de tu post y tu texto, igual al de tu viñeta. Este cuadro debe ubicarse antes de la palabra que da inicio a la segunda línea del texto.
Te muestro el resultado:
 Primera línea de texto (continúa abajo)
 segunda línea de texto. Con color para que identifiques el resultado.
Dimante_1.png (https://cdn.steemitimages.com/DQmV7449ccM1DnX7A3aAvkeye1B2CEiMdjxUX3UdwovLWpV/Dimante_1.png) Primera línea de texto (continúa abajo)
Dimante_1_2.png (https://cdn.steemitimages.com/DQmPMtM66aawsEzD4vPJGHRbdy7oMfr1ieMaiv9bydzuX3s/Dimante_1_2.png) segunda línea de texto. Cuadro transparente.
Dimante_1.png (https://cdn.steemitimages.com/DQmV7449ccM1DnX7A3aAvkeye1B2CEiMdjxUX3UdwovLWpV/Dimante_1.png) Si no tienes inconveniente con que la oración de tu texto tenga un desnivel, puedes simplemente agregar tu viñeta y seguir escribiendo, justo como te muestro en este texto.
¡Y eso es todo! ¿Te ha gustado lo que te he traído? ¿Tienes alguna duda? ¿Alguna opinión sobre mi contenido? ¡Estaría encantado de leerte! Tu comentario es importante para mí. Recuerda que subiré más accesorios como este en mi blog. No uses estos diseños en otro lugar que no sea Steemit, por favor.
Estrella_Sola.png (https://cdn.steemitimages.com/DQmUrcw6kEn7vGZM5ZVRkjdF84VrJz33nLrkwnvxsq2gGn3/Estrella_Sola.png)
Separador de estrellas Estrella_Sola4.png (https://cdn.steemitimages.com/DQmdGQMDEbCcmJodzaepogmZHNygeMdj28u138mcGrh7WbW/Estrella_Sola4.png)
LogoSteemit2.png (https://cdn.steemitimages.com/DQmYuCzue9by4SUgXXUahyh27onKExRuxiKbSVgobqAkk1n/LogoSteemit2.png)
Separador logo de Steemit LogoSteemit4.png (https://cdn.steemitimages.com/DQmeNd6pboNMFwr3yThQHvAytKoqmnzx9dXaBcJkvgSU5pM/LogoSteemit4.png)
TODAS las imágenes en este post son de mi autoría. Yo las hice o dibujé. El programa empleado para los dibujos es
Easy Paint Tool Sai, y para las imágenes animadas y editadas;
Photoshop CS6 Portable.
Saludos2.png (https://cdn.steemitimages.com/DQmRFo2ku2q3ZLjRLdHYD8s73rwzrdD1WhRWVuCyuvVFFBf/Saludos2.png)
_______________________
Firma_Gif_1.gif (https://cdn.steemitimages.com/DQmV5L4tpt4XyWFUXVbfDmjiZQEt6DFSBpJY3TkBfQtRPDx/Firma_Gif_1.gif)