• Sigueme en Twitter

10 tutoriales para maquetar en Photoshop

Cando comenzamos a diseñar sitios Web, una buena practica ha tener en cuenta antes de sentarse frente a nuestro editor de código favorito es diseñar lo que sera la interfaz de nuestra pagina, en un post pasado comente la importancia de plasmar nuestras ideas, en papel, siguiendo con esta linea, supongamos que hemos pasado por la parte creativa, y te encuentras con un bosquejo  en papel de como se vera tu pagina Web en un navegador. A partir de este momento hay quienes empiezan a codificar su diseño hecho en papel y existen otros que prefieren pasar ese bosquejo de papel a un bosquejo mas real a través de Photoshop.

Papel-Código O Papel-Photoshop-Código

Que camino elegir resulta ser una elección muy personal. Si eliges pasar de papel a código seguramente ahorraras tiempo en diseñar mas a profundidad tu bosquejo, aunque muchas veces este ahorro de tiempo, trae como consecuencia que al momento de estar codificando nuestro diseño, comenzamos a ver que el resultado no esta siendo el que en primer momento teníamos pensado, y al final el tiempo que ahorramos lo volvemos a recuperar en re diseñar ciertos elementos de nuestro sitio.

Por otro lado si eliges pasar tu bosquejo en papel a un formato digital con ayuda de Photoshop, seguramente te encontraras con que el tiempo usado para el diseño se comienza a extender , debido a que comienzas a agregar detalles a tu diseño para hacerlo lo mas atractivo posible, por una lado esto puede resultar contraproducente debido a que puede llegar un punto en que comenzamos a adornar nuestro sitio con elementos que no son aplicables al momento de la codificación, recordemos que el diseño en la Web esta hasta cierto punto limitado, y no podemos diseñar el sitio como si estuviéremos diseñando para un medio impreso, yo en lo personal me decanto mas por usar este método cuando diseño una Pagina Web, ya que me da una visión real de como se vera el resultado final, otra razón por la que escojo este método es que me permite mostrarle al cliente como se vera su sitio, al estar digitalizado mi bosquejo, este es mas presentable, a demás si al cliente se le ocurren cambios , podre realizar cambios rápidamente en photoshop.

10 ejemplos prácticos.

Es normal que muchas veces tengamos la intención de pasar nuestro bosquejo a digital, pero Oh! sorpresa, no sabemos usar mucho Photoshop, y solo pensar el tiempo que te llevaras en digitalizar tu bosquejo puede resultar un dolor de cabeza, para ir agarrando cayo en esto “catswhocode“, hace una recopilación de 10 tutoriales en los que se muestra como maquetar una Pagina Web en Photoshop, muchos de ellos están bien explicados y al final del día nos permitirán ganar habilidad en este menester.

Remato diciendo que seamos cuidadosos en nuestros diseños, ya que mientras mas elementos visuales le metamos a nuestro sitio mas complicado de codificar sera, yo utilizo para proyectos pequeños papel-código y para proyectos mas grandes papel-photoshop-codigo.

¿Y tu que como lo haces?

Visitar Ejemplos

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: