Como hacer una caja de un producto en Photoshop

En este tutorial voy a explicar como hacer una caja usando Photoshop CS4, lo primero es conseguir la imagen de caja o dibujar la forma de la caja que vamos a utilizar para ponerle las diversas caras, en mi caso usé Illustrator para dibujar la caja pero una imagen bajada de Internet también funciona muy bien.

Seleccionando la cara

Vamos a usar este filtro para hacer que las diversas caras de nuestra caja tengan la figura que les corresponde para ello primero debemos seleccionar la cara que deseamos modificar usando la herramienta lazo poligonal, además en otra capa u otro archivo debemos tener el dibujo que deseamos poner en esa cara y crear una nueva capa.

photoshop crear caja 1

Filtro Punto de Fuga/Vanishing Point

Luego elegimos en el menu filtros->punto de fuga y se abrirá una nueva ventana, allí debemos crear los planos que conforman la caja es decir debemos seleccionar las diversas caras visibles de la caja similar a la selección que hicimos con la herramienta lazo poligonal, en la figura se ve más claro.
Todo empieza colocando los puntos de la primera cara (frontal), luego apretando la tecla control vamos hacia uno de los extremos y al arrastrar se crea el 2do plano y finalmente de la misma forma creamos el ultimo plano.

Photoshop creando caja punto de fuga

Colocando la “textura”

Para colocar la cara de la caja que deseamos, primero hay que tenerla esta en el portapapeles y luego con la combinación CTRL+V la pegamos, luego podemos moverla e incluso cambiarle el tamaño usando la herraminenta transformar (quinta de la izquierda), eso colocará la “textura” que corresponde a dicha cara, ajustando automáticamente la perpectiva que corresponde.

Photoshop creando caja de jugos

Caja completada

Siguiendo los pasos antes mencionados es posible crear el resto de caras de nuestra caja en Photoshop, para obtener el siguiente resultado:

resultado final caja photoshop

Hojas de estilo para impresión

Cuando le damos imprimir a una página web, salen muchas cosas que no deberían imprimirse, como la bara de menú, hasta la barra de anuncios pero hay forma de evitar esto y darle un mejor formato a nuestra página para impresión, inclusive agregándo algun mensaje adicional con el copyright o algún otro detalle.

Nuestra página para impresión

Voy a usar un código resumido como muestra de lo que podría ser nuestro sitio

Si nos fijamos en el encabezado hay 2 hojas de estilo la primera nos sirve para el diseño en pantalla, es decir la hoja que siempre usamos, miesntras que la segunda es específica para imprimir la página web.

Hoja de estilos en pantalla

Más allá de todos los estilos que hayamos definido aqui debemos agregar una clase que indique que elementos no deben aparecer porque son exclusivamente para impresión.
website.css

Hoja de estilos para impresión

Ahora vamos a ocultar el menu y encabezado que no deseamos imprimir además de mostrar un mensaje en nuestro div copyright

Esta demás decir que en la hoja de estilos debemos aplicarle alguno a nuestro div copyright para que se muestre adecuadamente.

Incrustar PDF en nuestra página web

Para incrustar un PDF en nuestra página web bastaría con agregar un link a nuestro archivo, algo como:

Pero que ocurre si nuestro visitante no tuviera instalado Acrobat Reader o este tiene tendencia a colgarse como ocurre con cierta frecuencia en IE6, entonces ya no resulta tan buena idea pero Google Docs nos da una mano y podriamos usar un link como este:

Y que ocurre si no queremos que se abra en una ventana nueva sino que nos gustaría que se incruste en nuestro sitio o tal vez dentro de nuestro blog para que la gente pueda comentarlo y votar por él, pues eso también tiene solución con un código como este:

Podemos cambiar el ancho y alto modificando el width y height de ese iframe y la dirección de nuestro PDF en donde dice url, si te parece muy dificil hacer eso, no te preocupes google tiene una utilidad que genera ese código por ti

Google Viewer

Usar Regla en Diseño Web

Esta es una de mis extensiones favoritas para Firefox se llama MeasureIt nos permite hacer aparecer una regla para medir cualquier objeto dentro de una página web, resulta muy util para poder modificar la hoja de estilos y acomodar los objetos en nuestro diseño, aunque puede tener algunos problemas a la hora de medir objetos Flash creo que cumple bien con su propósito.

measureit extension firefox

¿Como funciona Measure It?

Una vez instalado le das un click al ícono con forma de regla que aparece en la parte inferior izquierda del navegador, la pantalla cambiará de color y usando arrastrar y soltar podrás medir el area que desees para desactivarla simplemente presiona la tecla “ESC” o le das otro click a su ícono.

Download

Mockups, prototipos, bosquejos para diseño web

Imagino que a la mayoría no le suena la palabra mockup ya que no suele ser de uso muy común en español pero en inglés ser refiere a nuestro diseño previo, nuestro bosquejo de la idea usado para enseñar, demostrar, evaluar el diseño en una sóla palabra es un prototipo.

Para páginas pequeñas usualmente un bosquejo con lápiz y papel suele ser suficiente, el cliente lo observa y vamos quedando la funcionalidad del futuro sitio pero para portales con muchas páginas internas se requiere un boceto de verdad que de una clara idea de las funcionalidades que desea el cliente que nos digan “Quiero un clon de tal o cual pero que tenga una cosa de aca un detallito de por alla” no es explicacion suficiente.

Balsamiq Mockups

Esta es una aplicación en Adobe AIR muy potente aunque me parece un poco cara, sin embargo podemos obtener una versión de prueba con todas sus funcionalidades, esta permite diseñar la interfaz con algunos clicks y arrastrando los componentes de lo que será nuestro futuro sitio web.

balsamiq mockup ejemplo

Haciendo el prototipo

Prefiero que el cliente haga el prototipo y luego sobre este se le hacen sugerencias de lo que se podría usar en la interfaz, usualmente el cliente no tiene dominio de un graficador pero podemos pedirle que nos entregue el boceto en Power Point o Word, enviandole un modelo como ejemplo.

Boceto Sitio web

También suele ocurrir que nuestro cliente quiere que hagamos todo y luego se molesta cuando no sale como quiere el proyecto cuando en principio él no se quiere tomar el trabajo de hacer un boceto, para estos casos mi sugerencia es que nosotros hagamos un boceto se lo enviemos por fax o listo para imprimir de tal forma que el cliente coja un marcador, lapicero o plumón y haga todas las anotaciones y cambios que desee luego lo escanee y lo envie por correo o fax.

Todos estos consejos nos evitarán empezar una programación que luego será inutil, finalmente que ocurre si al cliente no le parece ninguna de las opciones para armar un boceto en ese caso mejor cambia de cliente, rechaza ese trabajo, envialo al demonio de la forma más cordial posible porque ese cliente te va a reventar el higado y es mejor no hacernos de clientes asi les aseguro que el pago que nos haga no cucbre el valor de nuestra salud mental.