Diseño de Formulario de suscripción o Login – Photoshop

Idea de diseño para formulario para suscribirte al newsletter con Adobe Photoshop.
Crea tus propios diseños o interfaces con esta poderosa herramienta de edición y retoque fotográfico como lo es el Photoshop.

A continuación el video con el proceso de armado del formulario

Creamos un documento nuevo

Clic en Archivo/Nuevo

Indicamos las medidas que vamos a utilizar, en mi caso utilice 750x630ox, entonce le ponemos de Anchura 750 pixeles y de Altura 630 pixeles, en resolución ponemos 72 ppp ya que va a ser para web y no imprimir. (En el caso que este documento sea para imprimir lo recomendable seria que la resolución tenga unos 300 dpi), Modo de Color RGB / Clic en OK

Se crea la hoja nueva con el tamaño indicado

Abrimos los colores que tomamos como referencia en este caso vamos a utilizar 6 colores para todo el diseño, Los colores en Hexadecimal son los siguientes:
Blanco – #ffffff

Amarillo – #fecb76

Celeste Claro – #6aceff

Celeste Oscuro – #009de2

Fucsia – #ff055d

Gris Claro – #eeeeee

Gris Oscuro – #d6d6d6

Uds pueden optar por los colores que prefieran, yo utilice estos.

Ubicamos la ventana a un costado para tener los colores al alcance y que no moleste en la hoja de trabajo

Creamos una nueva capa de color uniforme, seleccionamos el color celeste claro de la paleta de colores que tenemos creada previamente.

Seleccionamos la herramienta de rectángulos redondeados y creamos el cuadro del tamaño que creamos conveniente en la hoja de trabajo

TIPS: Al momento de crear el cuadro antes de soltar el clic del mouse, y manteniendo presionada la tecla de espacio, podemos mover el cuadro a la posición que quieramos, luego soltamos y allí queda creado el mismo

Luego que tenemos el cuadro en la hoja de trabajo, hacemos doble clic sobre la miniatura de la capa y elegimos el color que queremos darle en este caso lo dejamos en blanco

Para crear la franja celeste oscuro que tiene arriba el formulario , vamos a duplicar la capa del mismo recuadro de manera que nos quede sobre esta en la misma posición con respecto a la hoja de trabajo. Para duplicar una capa se puede hacer arrastrando la misma hasta el icono de crear nueva capa que se encuentra abajo en el panel de las capas o con el teclado presionando las teclas CTRL + J, (Control en Windows o Comando en MAC) esto hace que se cree una capa nueva exactamente igual a la anterior con las mismas dimensiones y en la misma posición en la hoja.

Luego que tenemos la capa duplicada sobre la original, la rasterizamos, para esto hacemos clic derecho sobre esta capa y vamos a la opción Rasterizar Capa (esto hace que una capa en formato gráfico vectorial se convierta en pixeles para poder trabajar de otra forma con la capa)

Tomamos la herramienta de recorte rectangular y marcamos la zona que queremos borrar, seleccionamos y presionamos la tecla suprimir para eliminar parte de esa capa de modo que quede solo la parte de arriba.

Para crear el campo donde vamos a escribir nuestro email, lo podemos hacer de diferentes formas, en este caso lo que hago es nuevamente duplicar la capa del formulario, la capa mas grande, la de color blanco, luego hacemos una selección de transformación libre, para esto seleccionamos la capa, luego vamos a Edición / Transformación Libre o con el teclado manteniendo presionado la tecla CTRL + T

Movemos los puntos de ajuste para darle la forma que queremos desde arriba, abajo y ambos laterales. Cuando terminamos de ubicar la capa como la queremos hacemos doble clic sobre la figura.

Luego para cambiar el color hacemos doble clic sobre la miniatura de la capa, seleccionamos el color gris claro / OK

Para el botón de Enviar el formulario, hacemos el mismo procedimiento de duplicar la capa con

CTRL + J o arrastrando la capa hasta el icono de crear nueva capa en el panel de capas

TIPS: Otra forma que se puede duplicar una capa es manteniendo la tecla ALT presionada y arrastrando la forma en pantalla, lo que logramos es duplicar la misma

Para cambiar el color del botón, doble clic sobre la miniatura en la capa, y elegimos el color fucsia/OK. Luego seleccionamos la herramienta de texto o presionado la tecla T, escribimos “Enviar” y presionamos Intro del teclado numérico para confirmar y finalizar ese texto.

Ubicamos el texto sobre el botón.

Para cambiar el tamaño del texto, podemos hacerlo cambiando el tamaño del texto en el panel de propiedades o de caracteres o utilizando la transformación libre presionando CTRL + T y moviendo los puntos de ajuste.

Escribimos un ejemplo de texto en el campo donde debemos ingresar nuestro email, y utilizamos los métodos antes mencionados para cambiar, tamaño, color, etc.

Para el titulo y demás textos utilizamos los métodos antes empleados, dando color, tamaño ubicación, etc.

Luego insertamos las formas de “globo llamado / pensamiento”, la del corazón y la del sobre desde la herramientas formas personalizada la podemos insertar.

Para cambiar el color a las formas usamos los mismos métodos antes mencionados, haciendo doble clic sobre la miniatura de la capa, y le indicamos el color que prefiramos.