Forma base del diseño de una interfaz de usuario con Photoshop – Tutorial

Cómo diseñar la forma base de una interfaz gráfica con Photoshop

Ahora que acabamos de ver cómo crear formas para aplicar efectos de metal, es la hora de diseñar la forma base que definirá la estructura principal de la interfaz.

Los estilos de metal de Photoshop son muy adecuados para crear interfaces modernas. La idea clave del diseño es crear una forma grande que será la forma base de la interfaz principal.

Mi consejo es utilizar una forma rectangular de esquinas redondeadas y de gran tamaño como punto de partida para el diseño de la interfaz web. No hay más que aplicar un efecto de metal cromado a esta forma para obtener interesantes efectos de reflejos metálicos.

¿Recuerda que anteriormente se desaconsejó el uso de formas grandes junto con los estilos de Photoshop? Este tipo de formas no suele sacar el máximo partido de la aplicación de estilos web de Photoshop, porque los reflejos del efecto cromado aparecen sólo hacia los bordes de la forma base (debido a los efectos de bisel, contorno, trazo y brillo).

Así que el truco para que el diseño de la forma base de la interfaz de usuario resulte más interesante es borrar partes de la interfaz y crear algunos huecos dentro de esta forma básica.

Forma base del diseño de la interfaz

Las formas grandes con estilos metálicos no suelen brillar mucho. Pero no hay problema: eso puede arreglarse borrando partes de la interfaz.

Forma de una interfaz web cromada

Dibuje las secciones de la interfaz principal borrando zonas específicas de la base, reforzando así el efecto cromado del diseño de interfaz.

Al crear secciones de la interfaz más estrechas, y al definir más bordes dentro de los huecos del interior, aparecerán más reflejos de cromo metalizado al aplicar el estilo de Photoshop a esta interfaz mejorada.

Recuerde que el truco es crear zonas vacías, separadores de secciones y huecos que se correspondan con las diferentes secciones contenidas dentro del diseño de la interfaz de usuario.

Trucos de Photoshop para diseñar interfaces web con formas y estilos más vistosos

Existen muchas formas de crear espacios vacíos dentro de la forma base para incrementar los efectos de reflejo de un estilo de metal cromado de Photoshop.

Como hicimos anteriormente en este tutorial para diseñar la forma base, es posible crear una selección con la herramienta de Selección Rectangular o con la herramienta de Selección Elíptica de Photoshop para borrar áreas de la interfaz. Puede Borrar las zonas seleccionadas pulsando Suprimir. Éste es un truco sencillo para definir secciones rectas y cuadradas dentro del diseño de la interfaz.

Otro truco intuitivo para crear espacios en blanco es usar la Herramienta Borrador de Photoshop (atajo de teclado: E). Mientras borra partes de la interfaz web con un estilo de capa aplicado verá de forma interactiva cómo se van creando nuevos reflejos con vistosos efectos de metal cromado.

Mi consejo es borrar usando un pincel duro de Photoshop como borrador para evitar contornos desenfocados y mantener los bordes del diseño de la interfaz bien definidos.

Pincel duro en Photoshop

Un truco sencillo es usar un pincel duro como borrador para crear efectos cromados adicionales.

Crear la interfaz con efectos de cromo metalizado

Al borrar partes de la interfaz base creará nuevos reflejos más vistosos e interesantes. ¡Haga brillar el diseño de su interfaz!.

Incluso un pincel de pequeño tamaño puede usarse para crear una línea separadora. Con un cambio tan sencillo como ése conseguirá crear numerosos reflejos metálicos vistosos en lo que antes era un diseño de interfaz un tanto plano y apagado.

Recuerde este truco sencillo: cuanto más cerca estén entre sí los bordes de la forma base, más intensos serán los efectos de reflejo metalizado de la interfaz.

Ahora que ya tenemos la forma base principal con unos contornos de aspecto metalizado, comienza la parte más divertida del tutorial: diseñar su propio estilo de Photoshop. Continúe en el paso siguiente, cómo escalar efectos con Photoshop para descubrir la forma más rápida en que poder hacer más vistosos los estilos de Photoshop.