WebZap es un increíble complemento de Photoshop para ayudar a los diseñadores a crear maquetas de diseño web de alta fidelidad más rápido de lo que nunca creíste posible. Al combinar acciones simples de un solo clic con sólidas opciones de personalización, esta herramienta hace que todo el proceso de diseño no solo sea indoloro, sino también divertido.
Sigue a lo largo de lo que hace WebZap y ponlo a prueba para ver cómo funciona. Prometo que es el mejor complemento de Photoshop que has visto para los diseñadores web desde GuideGuide.
¿Qué es WebZap?
Cuando descargue WebZap, recibirá un paquete de extensión de Adobe que simplemente haga doble clic para instalar (solo CS5 o superior). Una vez que haya pasado por el breve proceso de instalación en Adobe Extension Manager, querrá abrir Photoshop e ir a Ventana> Extensiones> WebZap.
Esto abrirá un nuevo panel de Photoshop que se parece al de abajo. Este panel amigable y atractivo contiene la totalidad de las características de WebZap.
Parece simple aquí, y es simple desde una perspectiva de usabilidad (casi todo requiere un solo clic), pero hay un montón de poder y complejidad ocultos aquí que hacen que la extensión gane su punto de precio. Vamos a ver cómo funciona todo con un flujo de trabajo de muestra.
Diseño
La esencia del Panel de WebZap es que se divide en cuatro pestañas principales: Diseño, UI, Estilo y Vista previa. Estos están representados por los iconos grandes en la parte superior.
Caminaremos a través de cada uno de estos rápidamente para ver cómo funcionan. Para empezar, vamos a saltar en el diseño. Lo primero que debemos hacer es decidir si queremos que nuestra navegación se centre horizontalmente en la parte superior de la página o en el lado izquierdo de la página. Para nuestro proyecto de muestra, vamos a elegir la opción centrada.
Esta elección afecta a casi todo después de ella. Todas las opciones de diseño se ajustarán automáticamente al formato que haya elegido para desarrollar. Estoy realmente sorprendido de lo versátil que es WebZap. Parece que siempre estás tomando una decisión que afecta a otras opciones, y simplemente da vueltas con los puñetazos, nunca te molesta o te da resultados extraños e inesperados.
Navegación
Ahora que hemos elegido un diseño centrado, seguimos adelante y elegimos entre las catorce opciones de navegación integradas. Todo lo que tienes que hacer para construir uno es hacer clic en él. ¡Es tan fácil como eso!
Hacer clic en una opción de navegación es esencialmente como ejecutar una acción de Photoshop. Usted se sienta y toma un sorbo de su café mientras Photoshop crea automáticamente el menú de navegación completo (esto toma solo unos segundos). Cuando termine, deberías tener algo como esto:
Tenga en cuenta que esto no es una obra de arte plano que WebZap le está lanzando. En realidad, está construyendo una PSD completamente en capas y fácilmente personalizable.
Curiosamente, la navegación? es un poco un nombre inapropiado aquí. Lo que realmente está obteniendo es el marco básico para toda la página. Esto incluye tanto la navegación en la parte superior como un pie de página en la parte inferior. Por lo que puedo decir, el pie de página es idéntico en cada una de las catorce opciones de diseño.
Como puede ver, elegí una opción agradable y mínima con un logotipo de marcador de posición, un cuadro de búsqueda y algunos elementos de navegación. Esos elementos de navegación son texto en vivo y se pueden cambiar fácilmente para satisfacer sus necesidades.
Principal
Después de elegir el diseño de navegación, es el momento de seleccionar una "Función", "Doblar" o ambas. La función es básicamente una especie de deslizador de imagen grande con un texto y / o una disposición de miniaturas.
Una vez más, un clic más tarde y mi diseño está llegando. Recuerda que realmente solo he realizado tres o cuatro clics de ratón hasta este punto. Todo lo demás ha sido completamente automatizado.
Doblez
A partir de aquí, es solo enjabonar, enjuagar y repetir. La sección final de nuestro diseño se llama "Fold," lo que significa que probablemente estará por debajo del pliegue hipotético (punto de desplazamiento). Aquí tenemos dos pestañas diferentes de opciones, una de las cuales ocupa todo el ancho de la página, mientras que la otra ocupa la mitad de la página.
¡Antes de que te des cuenta, tienes un diseño de página completo! Tenías muchas opciones de combinación y combinación para elegir, por lo que posiblemente podrías seguir este mismo proceso cincuenta veces más y lograr resultados únicos cada vez.
UI
A estas alturas, ya tiene una idea de cómo avanza el flujo de trabajo, por lo que vamos a ver rápidamente algunas funciones más impresionantes. La siguiente pestaña principal llena de funcionalidad es la pestaña UI. Aquí encontrarás varios botones, elementos de forma y deslizadores.
Una cosa que realmente me gusta aquí es la posibilidad de elegir el color de tu botón cuando lo creas. Esto puede ahorrar mucho tiempo de personalización más tarde.
Estilo
La pestaña Estilo es donde puede comenzar a ajustar algunas de las decisiones de diseño que se han tomado automáticamente para usted. Hay tres secciones aquí: Marco, Divisor y Texto. Cada uno se explica en la imagen de abajo.
Esto es lo que sucede cuando tiro un marco en el diseño que he construido hasta ahora. Tenga en cuenta que puedo elegir el color que desee e incluso cambiar el color repetidamente con la pequeña rueda de colores de la derecha.
Las opciones de reemplazo de texto son realmente robustas. Puede elegir personalizar los encabezados (h1, h2, h3, etc.), el texto del párrafo y los enlaces. Simplemente elija el elemento que desea cambiar, elija un color y use el menú de reemplazo de fuente que aparece.
Avance
La pestaña principal final es "Vista previa," que convierte automáticamente su página web en una maqueta elegante que se encuentra dentro de la ventana de un navegador o en el marco de un dispositivo móvil.
Algunos de estos pueden parecer un poco sofisticados, pero son realmente agradables de tener y te ofrecen una excelente manera de mostrar tus ideas en el último momento sin esfuerzo.
Mini juego de herramientas
La última parte de las herramientas que vamos a discutir es el "Mini Toolset". que se encuentra en la parte superior derecha del panel WebZap. Contiene cuatro botones:
Los dos primeros botones aquí son bastante explicativos. El primero genera un nuevo documento para que pueda comenzar una nueva página y el segundo crea guías basadas en el diseño del sistema de cuadrícula 960. El tercer botón es extremadamente útil. Agarra el grupo de capas que ha seleccionado, lo recorta y lo arroja a un nuevo documento. Esto hace que sea muy fácil esencialmente cortar y guardar sus imágenes. Incluso como un complemento independiente, esta característica sería bastante útil.
Finalmente, el cuarto botón genera párrafos de marcador de posición llenos de lorem ipsum. Al igual que con otros elementos de diseño, puede elegir entre una variedad de opciones diferentes.
¿Cómo es?
Desde aplicaciones web y marcos de desarrollo hasta plantillas de Keynote y Powerpoint, hay una tonelada de productos en el mercado para ayudarlo a crear rápidamente maquetas de diseño de páginas web. WebZap es el único que he usado que realmente me hizo sonreír. Es tan increíblemente fácil y tan poderoso que no puedes evitar sentirte impresionado por su potencial. Me encanta poder construir maquetas tan hermosas con tan poco esfuerzo.
¿Todos mis sitios tendrán el mismo aspecto?
De un vistazo, podría pensar que la utilidad de WebZap es limitada. Después de todo, si utilizara esto en sus próximos diez proyectos, ¿no empezaría a verse igual todo su trabajo?
A esa protesta mi respuesta es, "sólo si eres perezoso". Si se tratara de una aplicación web, de hecho estaría bastante atrapado en los diseños, estilos, etc. que se le proporcionan. Sin embargo, recuerda que esto es un Photoshop enchufar. Esto significa que puede hacer absolutamente lo que quiera con la salida generada por WebZap.
Piense en WebZap como un punto de partida que lo ayuda a generar primero algunas ideas de diseño aproximado y, finalmente, a proporcionar una estructura sólida que puede agregar y personalizar para un diseño completamente único.
De esta manera, se parece mucho a una versión de Photoshop de Twitter Bootstrap, que es utilizada por miles y miles de diseñadores todos los días. Con Bootstrap, los diseñadores pueden crear un sitio de gran apariencia utilizando los estilos predeterminados, pero sin mucho esfuerzo, puede romper el molde y crear diseños que son todos suyos mientras aún aprovecha el útil conjunto de herramientas. La misma lógica se aplica para WebZap.
Características que me encantaría ver
Como puede ver, estoy muy entusiasmado con esta herramienta y realmente creo que se destaca como uno de los mejores complementos de Photoshop para diseño web que he usado. Cuando se maneja adecuadamente, puede acelerar dramáticamente su flujo de trabajo sin encajonarlo en un sistema estricto.
Dicho esto, hay algunas características que realmente me gustaría ver agregadas en el futuro. Aquí están algunos de la parte superior de mi cabeza.
Opciones de diseño de pie de página
En este momento, el pie de página se ha introducido realmente como una ocurrencia tardía con la navegación. Definitivamente merece su propio módulo que le permite elegir entre varios diseños diferentes, al igual que con los otros elementos de diseño.
Información sobre herramientas
A menos que haya leído detenidamente la documentación (que es impresionante), realmente no hay forma de saber exactamente qué hace un botón hasta que lo presiona. Por supuesto, las acciones son fáciles de deshacer, pero si es posible, sería genial tener algunas informaciones sobre herramientas que aparecen al pasar el mouse para ayudarlo a comprender lo que va a suceder. Esto sería especialmente útil en la sección Mini Toolset.
Arreglos y estilos personalizados
Hay muchas opciones de personalización ya integradas en WebZap, pero no hace falta decir que quiero aún más. Cuanto más versátil se vuelve esta herramienta (mientras mantiene firmemente su facilidad de uso), más diseñadores la adoptarán fácilmente. Sé que es una tarea difícil, pero me encantaría poder guardar mis propios diseños, colores de botones, etc.
Ve a buscarlo!
Si pasa sus días creando diseños de diseño web en Photoshop, absolutamente necesita darle una oportunidad a esta herramienta. Combina la facilidad de uso que obtendría de algo como Rapidweaver y las amplias posibilidades de trabajar en Photoshop. Felicitaciones a Norman Sheeran y UI Parade por crear una herramienta tan increíble.
Dirígete al sitio web de WebZap para ver algunos videos de la extensión en acción. Dado el tiempo que te ahorra, creo que vale la pena los $ 15.