Plantillas PSD y PNG de grids o rejillas CSS para diseño web

Existen herramientas que nos ayudan a crear el layout, la estructura de una web, mediante grids, rejillas o cuadrículas.

Algunas de estas herramientas incluyen opciones para hacer diseños adaptados a las resoluciones de los dispositivos móviles y también plantillas para crear los bocetos en aplicaciones como Photoshop, Fireworks o Illustrator.

Al crear un boceto web, un mockup o wireframe, la imagen gráfica de un sitio para que lo vea tu cliente te puede ayudar tener la rejilla de referencia.

Puedes utilizar:

1. Estas plantillas de grids para Photoshop o estas para Fireworks con diversas resoluciones.
2. O crearlas tú mismo con ayuda de algún plugin que las genere.
3. O utilizar alguna imagen de rejilla como base de la que además ya tengas el CSS.
4. O utilizar algún generador de grid y buscarte la vida para montar tu boceto.

Extensiones y plugins

• GridFox. Para Firefox
• GuideGuide. Para Photoshop

• Grids – Adobe Fireworks Extensions, Commands and Panels – johndunning.com. Para Fireworks

Plantillas gráficas de grids

Vamos a centrarnos en aquellos CSS frameworks que incluyen esas plantillas para crear nuestros bocetos en editores gráficos:

• Less Framework 4 (Descarga PNG, PSD, AI)
• 52framework – The framework from the future, HTML5, CSS3, and more! (Descarga PNG, PSD, AI)
• The Golden Grid (PSD)
• 960 Grid System, el más famoso y al que puedes añadir el javascript Adapt.js – Adaptive CSS para que cargue uno u otro CSS según la resolución del navegador. La descarga incluye plantillas para Photoshop, Illustrator, GIMP, InDesign, Corel, Inkscape y muchos más.
• FEM CSS Framework, basado en 960 GS, la descarga incluye PDF, PNG y PSD.
• Baseline, este framework cuida especialmente la tipografía y como su nombre indica la rejilla base de nuestro texto. La descarga incluye PSD.

• BlueTrip CSS Framework, la descarga incluye PSD
• Blueprint, incluye PSD
• Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development. Descarga PSD.

Generadores online que además de código generan una imagen

• Gridulator: Make pixel grids, lickety-split. Generas un PNG.
• Design By Grid | Tools. Generas un PNG
• nP: Grid Generator – build your own custom css grid, genera CSS y también PNG
• GRIDINATOR genera HTML, CSS y también PNG

Generadores online de grids o rejillas (sin imagen para descargar)

• YAML
• The 1KB CSS Grid

• Variable Grid System, basado en el framework 960 Grid System, el más famoso y al que puedes añadir el javascript Adapt.js – Adaptive CSS para que cargue uno u otro CSS según la resolución del navegador.

• Grid System Generator incluye un generador para varios frameworks.
• Gridulator: Make pixel grids, lickety-split
• 960 Layout System | Grids made easy
• Grid Layout Generator
• Grid Designer
• YUI: CSS Grid Builder
• CSS Layout Generator | CSS Creator
• CSS Layout Generator – CSS Portal
• ZURB CSS Grid Builder – ZURB Playground – ZURB.com
• nP: Grid Generator – build your own custom css grid
• NegativeGrid Generator
• Compact CSS Grid Generator – Dark House Media
• 1200px Grid System

Relacionado

• 99 + 12 recursos HTML5 y CSS3
• Cómo crear un boceto web, mockup o wireframe

Cursos de diseño y desarrollo web

Te recordamos que desde video2brain tenemos un extenso catálogo de cursosde diseño web.

• HTML5 y CSS3
• AJAX
• Maquetación web

De Dreamweaver:

• Dreamweaver CS5
• Extensiones con Adobe Dreamweaver
• Secretos de Dreamweaver

Y estos dos para quienes quieren dar sus primeros pasos en el diseño web

• Diseño web y estilos CSS
• Mi primer proyecto web
• Adobe Photoshop para diseño web

Recuerda que estos cursos puedes realizarlos gratis y con tutorías si estás trabajando por cuenta ajena en España con las ayudas de la Formación Tripartita.

Y si los quieres todos hazte con una suscripción