Blog de diseño web

Blog de Diseño web

Blog dedicado a la divulgación de noticias, novedades, consejos, trucos relacionados con el diseño y posicionamiento web.
También hablaremos de tendencias, noticias y curiosidades relacionadas con este sector sin olvidar aquellas noticias relevantes para la sociedad.

Crear una imagen con efecto caja en Photoshop

En este artículo vamos a ver cómo crear una imagen con efecto caja con Photoshop, programa imprescindible tanto para el Diseño de páginas web como el Diseño gráfico.

 

 

cajaconfondo

La versión de Photoshop que utilizaremos es CS5.

Iremos paso a paso, explicando todos los pasos con imágenes. En algunas verás que hay zonas resaltadas en amarillo. dichas zonas son aquellas en las que interactuamos. De ese modo, el usuario encontrará rapidamente los botones que se utilizan.

Para ampliar las imágenes, solo tienes que hacer clic sobre ellas.

 

Después de abrir Photoshop,

Nuevo documento (Ctrl + N) y le damos un formato de 1000 x 1000px.

caja1

Le damos color a la capa con el bote de pintura (color #0476b9)

Pinchamos en “Añadir un estilo de capa” (Fx, abajo a la derecha) y seleccionamos superposición de degradado con los colores #000059 y #FFFFFF

caja2

Creamos un nueva capa (Mayus + Ctrl + N)

Con la herramienta rectángulo (U), creamos un rectángulo de 500px de ancho por 750px de alto con un color #0476b9

caja3

Pinchamos otra vez en “añadir un estilo de capa” y seleccionamos superposición de degradado con los colores #0476b9 y #000059

caja4

Con la herramienta Marco Rectangular (M), seleccionar una tira vertical a la izquierda de la capa y presionar Ctrl + Mayus + J para Cortar y Nueva Capa. En la nueva Capa giramos el ángulo de degradado a 0 grados.

caja3a

 Creamos una nueva capa y con la herramienta pincel (blanco – grosor 20) pintamos unas formas (que en este caso son aleatorias)

Cuando hemos terminado, vamos al menú de arriba, filtro – distorsionar – Zigzag dando unos valores de Cantidad = 52, Crestas = 8 y seleccionamos ondulaciones en estilo.

Damos a OK y ajustamos la opacidad a 35% (a la derecha)

caja5

Cortamos esa capa a la misma medida que la tira (podemos ayudarnos de las guías)

caja3b

Combinamos por un lado la capa de efecto de la carátula con la capa de la carátula y por otro lado la capa de efecto del lado con el fondo del lado.

caja3c

 

Debería quedarte algo así

caja6

Ahora insertaremos textos y logos en la carátula y luego en la tira de la izquierda que será el lado de la caja

Insertamos nuestro logo.

  • Si queremos darle un efecto de espejo:
  • Duplicar capa del logo
  • En la nueva capa resultante, Edición – Transformar – Voltear vertical
  • Arrastrar al pie de la 1ª capa del logo
  • Herramienta de degradado
  • Modo máscara rápida (el último de los botones de la izquierda)
  • Hacer clic desde casi la parte de abajo del logo de arriba y arrastrar el logo hasta +/- 3/4 partes del logo de abajo. Al soltar el botón debería verse una imagen más o menos como ésta

caja7

Volver a pinchar sobre el botón de Máscara rápida para salir de ella y borrar con el botón Supr de nuestro teclado.

Deseleccionar

Darle una opacidad a la capa del 50%

Combinar las capas de los dos logos.

Seguir añadiendo texto en la carátula y en lo que será el lado de la caja a vuestro gusto. En esta imagen utilizo Arial Narrow Bold para los textos.

Una vez colocados los textos e imágenes, rasterizar todos los textos (sobre la capa de texto, botón derecho – rasterizar texto).

caja8

Combinar las capas de la carátula con el fondo de la misma y combinar las capas del lado de la caja con el fondo del mismo. (Seleccionar capas - Botón derecho – combinar)

caja9

Ahora viene lo divertido. Vamos a empezar a darle la perspectiva.

Seleccionamos la capa de la carátula

Edición – Transformar – Perspectiva; y ajustamos la perspectiva haciendo clic en la parte superior o inferior de la derecha de la selección

caja10

Duplicamos la capa y con la capa resultante:

Edición – Transformar – Voltear Vertical

Bajarla hasta ajustarla con la imagen superior por la punta de la izquierda

Edición – Transformar – Sesgar para ajustar la imagen por la parte de la derecha

caja11

Seleccionamos la capa del lado de la caja y repetimos el proceso

Edición – transformar – Perspectiva

Duplicar capa

Edición – Transformar - Voltear vertical

Bajarla hasta ajustarla con la imagen superior por el lado derecho

Edición – Transformar – Sesgar y ajustar a la imagen superior por el lado izquierdo.

caja12

Combinamos las dos capas que harán el reflejo

Con la herramienta de degradado y la nueva capa resultante seleccionada, pinchamos en Máscara rápida.

Llevamos el cursor hasta casi la parte de debajo de la imagen de arriba, hacemos clic y arrastramos el cursor hasta casi un 10% de la parte de debajo de la imagen de abajo. Al soltar el botón quedará algo parecido a lo de la imagen siguiente

caja13

Volvemos a pinchar el botón de Máscara rápida y borramos con la tecla Supr de nuestro teclado.

Ctrl + D para deseleccionar.

Ya tenemos finalizada nuestra imagen

caja14

Solo queda guardarla Archivo – Guardar para Web y dispositivos en el tamaño y formato que queramos.

Si le dejamos el fondo azul, recomendamos guardarla en formato JPEG.

cajaconfondo

Si la queremos hacer transparente, solo hay que quitar la capa del fondo azul (capa1) y guardarla en formato PNG.

cajatransparente

 

Eso es todo. Si tienes cualquier duda o pregunta, déjame un comentario.

Si te ha gustado el tutorial, por favor, compártelo en la red, Facebook, Twitter, Google +, etc. Si te ha ayudado a ti y lo compartes, también ayudará a otros.

en Formación Visitas: 2501
  • Alumdena Martes, 03 Diciembre 2013

    gracias

    Llevaba tiempo buscando un turorial para hacer este efecto. explicado de forma clara y sencilla. gracias! :)

  • Juan Miércoles, 28 Diciembre 2016

    Capacitarse y orientarse con el cliente

    Esta caja de guía para trabajar con Photoshop de seguro nos ayudara en nuestros proyectos ilustrativos, de ahí bien vale captar las habilidades necesarias del autor para con el tiempo y con otros aprendizajes adicionales, podamos convertirnos en un diseñador gráfico de alto nivel.

    En general las habilidades analíticas y la creatividad son las dos cosas que son necesarias en cualquier diseñador gráfico. Hay muchos diseñadores, que se sienten más cómodos en la tiza o haciendo el boceto en papel, por lo que se dan una idea acerca de su proceso de pensamiento orientado hacia el cliente, esta es una práctica común entre muchos diseñadores gráficos.

    "Ten siempre a mano tu paquete de iconos , y prepara tus ilustraciones a tiempo"

Deja tu comentario

Invitado Sábado, 22 Julio 2017

José María Somoza es profesional del diseño web y posicionamiento en buscadores.
Desde 1.998 ha trabajado como desarrollador en múltiples proyectos web afianzando cada uno de ellos con una estrategia de posicionamiento web adaptada a las novedades que periodicamente traen los cada vez más modernos de búsqueda.