RulersGuides.js - Reglas y guías de estilo de Photoshop en la Web

Una de las mejores cosas de Photoshop es sus líneas de guía fáciles de usar que se pueden extraer de las reglas. Esas guías pueden hacer que el proceso de diseño sea mucho más fácil cuando se trata de posicionar un elemento y obtener el equilibrio perfecto.

Para nuestro deleite, Mark Rolich ha implementado esta característica particular para su uso en la Web. Ha creado RulersGuide.js basado en reglas y guías de Photoshop.

RulersGuide.js tiene la capacidad de agregar una interfaz de estilo de línea de guía de Photoshop en una página web . Las líneas que se han creado se pueden guardar para su uso futuro también. Le proporciona tres opciones de uso: como una biblioteca de JavaScript, como un marcador o como una extensión de Chrome .

El Javascript

RulersGuide.js requiere algunas otras dependencias para funcionar bien. Como funciona arrastrando y soltando líneas en la página y requiere algo de utilización de eventos, deberá agregar Dragdrop.js (disponible aquí) y Event.js (disponible aquí). Luego, incluya esas dependencias junto con la fuente RulersGuide.js (descargue aquí) de la siguiente manera:

Si no le gusta el estilo predeterminado, puede editar su CSS para adaptarlo a su gusto. Luego, inicialice esos paquetes con la siguiente secuencia de comandos:

Bookmarklet y extensión de Chrome

Para su comodidad, puede usar esta herramienta como un marcador o una extensión de Chrome y abrirla cuando y donde quiera.

Instalación Bookmarklet

Para el bookmarklet, simplemente instálelo como lo hace habitualmente. Dado que Internet Explorer a veces funciona de una manera diferente, esta herramienta se adapta a eso al diferenciar el instalador de bookmarklet para el IE y el usuario que no es IE. Simplemente arrastre y suelte el enlace apropiado a continuación en su barra de marcadores de libros.

• Bookmarklet no IE
• Usuarios de IE Bookmarklet

Instalación de extensión de Chrome

Si eres un amante de Chrome, es posible que te guste esta opción. Desafortunadamente, RulersGuide aún no está disponible en Chrome Webstore. La única opción es instalarlo manualmente.

Primero, toma el archivo de extensión aquí. El navegador le pedirá que confirme el archivo; solo presiona continuar. La extensión no se instalará automáticamente porque Chrome tiene su protocolo de seguridad para mantenerte a salvo.

Ábralo navegando a Opciones> Herramientas> Extensiones o abra una nueva pestaña y luego copie y pegue las extensiones chrome: // en la barra de direcciones. Luego, arrastre y suelte el archivo RulersGuide.crx descargado a la página de extensión como se muestra a continuación.

La extensión está ahora lista.

Trabajando con reglas

Como se mencionó, RulersGuide funciona exactamente como la regla de Photoshop y la línea de guía. Cuando habilite esta herramienta, obtendrá reglas en la parte superior e izquierda de su navegador. Puedes sacar algunas líneas de esas reglas.

Y en la esquina superior izquierda de la página, puede obtener más opciones del menú disponible. Desde este menú, puede personalizar si desea que las líneas se muestren, guarden, bloqueen y más.

Vamos a conocer mejor las opciones.

• La opción ocultar se usa para ocultar ambas reglas y guías como lo desee. Incluso cuando las reglas están ocultas, aún puedes ver la opción de menú.

• Si presionas Desbloquear, las reglas permanecerán visibles en la página mientras te desplazas. Borrar todas las guías es útil cuando quiere borrar todas las guías que ha creado.
• La opción Guardar grilla se usa para guardar la cuadrícula que ha creado. La cuadrícula se guardará en función de la ubicación de la página, por lo que no podrá usar la misma cuadrícula en otras ventanas / pestañas del navegador. Y como era de esperar, la opción Abrir cuadrícula es abrir sus grillas guardadas.

• Cuando pulse la opción Mostrar información detallada, se habilitará el modo de información detallada. Puede mostrarle la posición y el tamaño de las regiones de la cuadrícula que crea, así como también cualquier cambio que realice en la posición de la guía.

• El último es la opción de ajuste . Esto es lo que me gusta de RulersGuide. Puede ajustar las guías al elemento DOM o usarlo con el tamaño de píxel definido. Tenga en cuenta que, la opción Ajustar a DOM todavía está en su etapa experimental en el momento de la escritura. Puede disminuir la velocidad o dejar de responder en una página con muchos elementos.

Conclusión

Desafortunadamente, todavía hay un pequeño inconveniente. No puede eliminar una sola guía como en Photoshop. Solo puede eliminar todas las guías y sxtart crearlas desde cero. Aún así, si trabaja en diseños web con frecuencia en buscadores, entonces esta herramienta es para usted.

GraphicsJS le permite crear cualquier gráfico web que pueda imaginar

Las API de JavaScript personalizadas son el futuro de la web. El movimiento de fuente abierta junto con los gráficos SVG han abierto las posibilidades para los desarrolladores web.GraphicsJS es una biblioteca de código abierto y una API JS para crear gráficos personalizados en navegadores web. Se puede usar como una herramienta de visualización para graficar datos, o se puede usar para hacer cosas geniales solo para presumir . En

(Consejos de tecnología y diseño)

5 mitos sobre la carrera que deben ser reventados

¿Eres un recién graduado con los ojos abiertos buscando pasar a ser un miembro productivo de la sociedad? ¿O tal vez eres alguien que hizo una elección de carrera equivocada y ahora quiere comenzar de nuevo? Va a ser un viaje difícil ya que solo está limitado a su grado, habilidades y nivel de experiencia, ¿ verdad ?¡Incor

(Consejos de tecnología y diseño)