Share
Establecer una cuadrícula de línea de base para sus diseños basados en Photoshop es un primer paso indispensable en cualquier nuevo proyecto de sitio web. Una cuadrícula de línea de base establecerá un espaciado consistente entre los elementos de su página, creando un ritmo armonioso a lo largo de la página. Además, durante la fase de desarrollo, el uso de un marco CSS con una cuadrícula de línea de base compatible puede hacer que la traducción del diseño al código sea mucho más fácil.
En un reciente tutorial sobre Webdesign Tuts +, Amir nos mostró cómo crear un script de cuadrícula flexible para Photoshop para eliminar el trabajo de configuración de sus guías para su diseño. En una línea similar, vamos a utilizar una extensión de Photoshop que hará todo el trabajo por nosotros, una gran opción, especialmente si crear su propio script personalizado es demasiado ambicioso para sus necesidades..
Lo guiaré a través de cada paso requerido para establecer una cuadrícula de línea de base horizontal y vertical en Photoshop que sea flexible, personalizable y fácil de completar en menos de diez minutos.
En el tutorial de hoy, usaré una extensión gratuita de Cameron McEfee llamada, apropiadamente, GuideGuide. Dirígete a http://www.guideguide.me para descargar el complemento.
Seleccione la versión que coincida con su Photoshop (CS4 +) y guárdela en una ubicación adecuada en su disco duro.
Nota: Los usuarios de OSX con Photoshop CS5 deberán instalar el parche de Adobe Extension Manager.
Asegurándose de que su Photoshop está cerrado, abra su Adobe Extension Manager.
Al hacer clic en el enlace 'Instalar' en el menú superior, navegue hasta la extensión de Guía de guía extraída y haga clic en 'Abrir'. Después de aceptar los términos y condiciones, GuideGuide estará lista para ser visitada la próxima vez que abra Photoshop..
Inicie Photoshop y, en el menú de archivo 'Ventana', seleccione 'Extensiones → Guía de guía'.
La extensión GuideGuide ahora aparecerá en su área de trabajo. No te preocupes demasiado por el campo de entrada, estaremos investigando la extensión en breve..
Mantendremos las cosas muy simples hoy y replicaremos la cuadrícula de 960px utilizada por el Sistema de cuadrícula 960 (aunque puede acercarse a las cuadrículas utilizando las mediciones que encuentre más fáciles). Si nos dirigimos al sitio, la cuadrícula que vamos a replicar se presenta en inglés sencillo en la página de inicio:
Para reformular esto, lo que crearemos hoy es un lienzo de 960 píxeles de ancho con 12 columnas equidistantes y de igual tamaño. Con un margen de 10 px a cada lado del lienzo, nos quedará un margen de 20 px entre cada una de las columnas..
Antes de continuar, sé lo que puede estar diciendo: "¿Por qué no descargar la plantilla de Photoshop del sitio?". Lo que te mostraré cómo crear hoy es completamente personalizable para alguna proyecto y cualquier marco CSS, independientemente de la cantidad de columnas, ancho de lienzo o canales. Solo estamos usando un ejemplo simple para demostrar las técnicas.
En Photoshop, seleccione Archivo → Nuevo y cree un nuevo documento de 960 píxeles de ancho por 1050 píxeles de alto.
Asegurándose de que se muestran sus reglas (Ver → Reglas) arrastre dos guías a los bordes del lienzo.
Al abrir la extensión GuideGuide, observará una serie de campos de entrada y elementos de menú que nos permitirán definir nuestra cuadrícula de línea de base horizontal, como se indica a continuación (también puede desplazarse sobre cada icono para obtener una descripción).
Ingrese los valores de la siguiente manera y haga clic en el botón Guía de Guía:
Una vez que haya enviado los valores, Photoshop renderizará automáticamente todas las guías para la cuadrícula:
Nota: Al utilizar GuideGuide sin una selección, las guías se mostrarán automáticamente en todo el lienzo. Si solo desea guías sobre una parte del documento (por ejemplo, una barra de navegación), cree una selección con la herramienta Marquee (M) antes de usar la extensión.
En su forma actual, tenemos una cuadrícula de línea de base horizontal perfectamente utilizable. Para facilitar las cosas para nosotros mismos, ahora vamos a agregar un asistente visual para decirnos qué es una columna y qué es un canalón, algo que puede ser difícil de diferenciar cuando se amplía la imagen en el documento..
Crear una nueva capa (Ctrl + Shift + N) y dibuja una selección del ancho y alto de la primera columna. Prensado Ctrl + BkSpace, Rellene la selección con # ff0084. También puedes utilizar la herramienta de forma para esto, pero asegúrate de que tus píxeles estén seleccionados con precisión.
A continuación, crea 12 versiones totales de la capa presionando Ctrl + J 11 veces. Seleccionando la capa superior, arrastre la columna a la posición de la duodécima columna con la herramienta Mover (V).
A continuación, seleccione todas las doce capas (Ctrl + Clic) y distribuir las columnas seleccionando la Distribuir centros horizontales icono debajo de la herramienta Mover (V) (alternativamente, Capa → Alinear → Centros horizontales)
Finalmente, limpie el documento seleccionando todas las capas de columna y fusionándolas (Ctrl + E). Cambie el nombre de la capa 'Línea de base horizontal' y marque la opacidad hasta el 10%.
Ahora que hemos establecido una línea de base horizontal, es hora de pasar a nuestra línea de base vertical. Hoy no vamos a profundizar en la teoría de las líneas de base verticales, pero si desea obtener más información, puede leer sobre Configuración de tipo de web en una cuadrícula de línea de base..
Hoy, estableceremos nuestra línea de base vertical basada en un tamaño de fuente de cuerpo de 14px. Para establecer una altura de 1.5 líneas, y para darnos mucha flexibilidad, nuestra línea de base será de 7px (es decir, tres unidades de línea de base igual a 21px).
Les mostraré dos métodos para lograrlo: siéntase libre de usar el que le hable a usted y a su flujo de trabajo.!
Para empezar, vamos a utilizar GuideGuide una vez más. Abra la extensión, ingrese el siguiente valor y presione el botón Guía de Guía:
Una vez enviado, Photoshop renderizará todas las guías para nuestra línea de base vertical:
En este punto, el lector más astuto se habrá dado cuenta de que este método solo es posible porque creamos la altura de nuestro documento en un múltiplo perfecto de 7px (1050px). Si no tomáramos este paso inicial, la Guía de Guía representaría tantas guías de 7 píxeles como sea posible y dejaría el resto en la parte inferior del documento..
Y en ese simple paso, hemos creado una línea de base vertical perfectamente funcional. El único problema es que este documento está ahora muy ocupado. Además, si tiene la costumbre de usar guías en sus diseños, este método puede volverse confuso, desordenado e inutilizable..
Si este método no hace cosquillas a su gusto, puede quitar las guías horizontales (Ctrl + Alt + Z) y crear una línea de base alternativa utilizando una cuadrícula de píxeles.
Para nuestro método alternativo, abra el panel de preferencias de la cuadrícula de Photoshop (Editar → Preferencias → Grillas, Guías y Slices). Ingrese los siguientes valores para la cuadrícula de píxeles:
Ahora, volviendo a su documento, puede activar y desactivar la visibilidad de la cuadrícula (Ctrl + '), donde cada línea horizontal de la cuadrícula establece su línea de base vertical, como puede ver aquí con un zoom del 600% aplicado.
Lo mejor de este método es que hemos separado las líneas de base horizontales y verticales, lo que le permite alternar fácilmente su visibilidad según la parte del diseño en el que esté trabajando..
Sea cual sea el método que prefiera (guías o capas de cuadrícula), el paso final es crear un asistente visual para nuestra línea de base vertical de la misma manera que lo hicimos para nuestra línea de base horizontal (pero usaremos un método diferente).
Cree un nuevo documento de 1px x 7px con un fondo transparente:
Usando la herramienta Marquesina (M), establezca el Estilo en Tamaño fijo, y las dimensiones a 1px x 1px. Cree una selección en la parte inferior del documento (querrá acercarse hasta donde pueda ir aquí (Z)) y rellénela con # 00ff12 (Ctrl + Bkspace).
A continuación, define este documento como un patrón (Editar → Definir patrón). Nómbrelo '7px Vertical Baseline'.
Vuelve a tu documento principal. Crear una nueva capa (Ctrl + Shift + N), selecciona todo el lienzo (Ctrl + A) y presione Ctrl + Bkspace Para completar la selección. Desde los menús desplegables, seleccione 'Patrón' para el tipo de relleno y su 'línea de base de 7px' recién creada para el patrón.
Cambie el nombre de la capa a 'Línea de base vertical' y marque la opacidad hasta aproximadamente el 30%.
Aunque los elementos no se ajustarán a ninguno de los asistentes visuales, independientemente del método que haya utilizado para la línea de base vertical (guías o capas de cuadrícula) en los pasos anteriores, la capa visual que acaba de crear se alineará perfectamente con la línea de base, lo que permite un ajuste fácil para el diseño completo.
Y con eso, ha creado una cuadrícula de base de píxeles perfecta con capas visuales útiles para su próximo proyecto. Lo único que queda por hacer es darle a tu diseño un poco de espacio para respirar.
Abre tu cuadro de diálogo Tamaño de lienzo (Imagen → Tamaño del lienzo) y cambiar el ancho a 1400px.
El resultado final:
Si lo has hecho hasta el final, ¡buen trabajo! Ahora tiene todas las técnicas necesarias para crear sus propias cuadrículas de línea de base personalizadas en Photoshop..
El único consejo que ofrecería es que aunque GuideGuide hace un gran trabajo al manejar todas las matemáticas necesarias, tiene que funcionar dentro de las limitaciones de Photoshop, es decir, que las guías solo se pueden colocar en un píxel completo. Si su cuadrícula requiere mediciones de subpíxel, las guías se representarán lo más cerca posible, y sus posiciones se redondearán al píxel completo más cercano. Con eso en mente, un poco de planificación al principio puede evitar muchos dolores de cabeza de un píxel más adelante en el proyecto.
Como nota de despedida, puede usar GuideGuide para mucho más que solo líneas de base; Experimente su uso para diseñar grillas para todo tipo de componentes de diseño, desde marcos de imágenes hasta menús.!
Gracias de nuevo, y no olvide suscribirse y dejar un comentario a continuación. Nos encantaría escuchar sus opiniones.!
Accentsconagua