Kit de construcción de la página de inicio: 40 elementos listos para usar para el diseño web con Photoshop (+ cómo crear los suyos propios)

Es bastante común crear prototipos de diseños web en Adobe Photoshop. Aunque el producto final consistirá en una gran cantidad de estilos basados en CSS, generalmente resulta más rápido usar un editor de imágenes para los primeros borradores. Photoshop sigue siendo la primera opción del diseñador en muchos casos. Usando muy pocas formas y formas básicas, puede crear inicios de sesión de usuario de alto grado, botones, controles deslizantes, reproductores de video o incluso sitios web completos.

Formulario de inicio de sesión V2

Sitio web: facecjf.com
Creado por: chris farina

Cuadro de inicio de sesión oscuro

Sitio web: 365psd.com
Creado por: Haziq Mir

Estilo de gruñido de nube azulada

Sitio web: premiumpixels.com
Creado por: Víctor Erixon

Botones verdes y azules únicos

Sitio web: 365psd.com
Creado por: Frantisek Krivda

Control deslizante de imagen moderno (PSD)

Sitio web: graphicsfuel.com
Creado por: Rafi

Globos de texto

Sitio web: 365psd.com
Creado por: Bart Ebbekink

Panel de configuración (PSD)

Sitio web: premiumpixels.com
Creado por: Haziq Mir

Carrusel de imágenes

Sitio web: 365psd.com
Creado por: Bojana Cakic

Reproductor de video ligero PSD

Sitio web: pixelsdaily.com
Creado por: Nguyen Van Thy

Botones de la App Store

Sitio web: 365psd.com
Creado por: latrucoteca.com

Consejo de Photoshop n. ° 1: formularios como elementos básicos

01 Dibujar la forma básica

Si desea verificar rápidamente el efecto de la paleta de colores elegida en una vista previa, puede crear un gráfico, utilizando algunas formas básicas, que transmitirá una impresión rápidamente. Aquí tomé una textura de fondo simple y levanté un círculo, usando el Herramienta Elipse y el color # 4499bb (RGB 68, 153, 187). Recuerde mantener el CONTROL presione la tecla mientras tira hacia arriba de la forma o de lo contrario terminará con un óvalo.

En la barra de opciones elegí Forma, no Ruta o Píxeles.

La misma opción estaba activa mientras usaba el Lapicera. De esa manera pude convertir el círculo en un bocadillo con solo tres clics.

02 más formas

Utilizando el Herramienta rectangular Creé un cuadrado (mantenga presionada la tecla CTRL) y lo cambié a un bocadillo en consecuenciaund gedrückter Strg-Taste wurde ein Quadrat aufgezogen und ebenso in eine Art Sprechblase verwandelt. Mientras el lyer con el cuadrado está activo, cópielo fácilmente presionando CTRL + J y colóquelo usando el Herramienta de movimiento. Mientras lo esté agarrando Cambio presionada, use la tecla de flecha izquierda para mover la capa a la posición deseada. Haga doble clic en el pulgar de la capa para poder ajustar el color de la forma. Luego use el Herramienta rectangular nuevamente para dibujar un rectángulo más pequeño en otro tono de rojo y adaptarlo a la forma subyacente usando Capa> Crear máscara de recorte.

03 Etiquetado

Con el Herramienta rectangular aún activo, aproveché para insertar dos franjas que representan los dos colores utilizados tanto en la parte superior como en la parte inferior de la imagen. Utilizando el Herramienta de texto horizontal y el color blanco etiqueté los bocadillos y el elemento de calendario. Ya en este punto tenemos una muy buena impresión de cómo funcionan juntos los buenos colores, formas y texturas.

Kit de interfaz de usuario PSD gratuito: Super Botones

Sitio web: sixrevisions.com
Creado por: Josh Katherman

Perfil PSD

Sitio web: 365psd.com
Creado por: Bojana Cakic

Panel de configuración PSD y CSS

Sitio web: pixelsdaily.com
Creado por: Ali Asghar

Control deslizante de bloqueo / desbloqueo

Sitio web: 365psd.com
Creado por: Andrew Forrester

Los obsequios

Sitio web: kbsportfolio.com
Creado por: Cartera de kb

Barra de herramientas oscura

Sitio web: 365psd.com
Creado por: Rob Smittenaar

Aprenda a crear una caja modal de Twitter con estilo

Sitio web: photoshop-plus.co.uk
Creado por: photoshop-plus.co.uk

Signo De Nota Colgante Psd

Sitio web: www.pixeden.com
Creado por: www.pixeden.com

Widget de música

Sitio web: 365psd.com
Creado por: Ben Muschol

Control deslizante noche / día

Sitio web: 365psd.com
Creado por: Kuba Holuj

Kit de interfaz gráfica de usuario de mapas (PSD)

Sitio web: graphicsfuel.com
Creado por: Rafi

Etiqueta de precio detallada

Sitio web: pixelsdaily.com
Creado por: Liam McCabe

PSD gratis – Chat UI PSD Concept

Sitio web: blazrobar.com
Creado por: blazrobar.com

Tablas de precios coloridas PSD

Sitio web: pixelsdaily.com
Creado por: Ali Asghar

Pump – Una plantilla psd de sitio web gratuita

Sitio web: blazrobar.com
Creado por: blazrobar.com

Marcadores de mapa PSD

Sitio web: dribbble.com
Creado por: Jeff Broderick

Widget de carga de archivos

Sitio web: 365psd.com
Creado por: Bart Ebbekink

Mini deslizador gratis

Sitio web: dribbble.com
Creado por: Dan Edwards

Interfaz de usuario de Drop Zone

Sitio web: dribbble.com
Creado por: Michael Donovan

Superposición de estado de desplazamiento de miniatura (PSD)

Sitio web: premiumpixels.com
Creado por: premiumpixels.com

Consejo de Photoshop n. ° 2: diseño de una barra de menú

01 Forma básica con degradado

Elegir la Herramienta Rectángulo redondeado, establezca su radio en 20 px y dibuje la forma básica de nuestra barra de menú. Para cambiar el lado superior de la barra a bordes rectos, elija el Herramienta rectangular y establecer Restar forma frontal desde la barra de opciones. Activar Capa> Estilo de capa> Superposición de degradado y establezca el degradado de blanco a gris.

02 Sombra compleja

Crea una nueva capa usando Mayús + CTRL + N y cambiar el orden de las capas de manera que la nueva capa se encuentre debajo de la capa con nuestra barra de menú básica. Ahora activa el Herramienta Lazo poligonal y haga clic en la forma básica de una sombra. Rellena la selección con negro. Deseleccionar (CTRL + D) y use Filtro> Desenfocar> Desenfoque gaussiano para darle un toque suave a nuestra sombra.

03 Divisor

Se supone que los divisores dividen áreas de otras áreas. Los usaremos para construir una estructura de navegación sobre ellos. Primero creamos una nueva capa usando Capa> Nuevo> Capa. Entonces activamos el Herramienta Marco Rectangular, dibuja una forma y elige la Herramienta gradiente. Usando un gris más oscuro seleccionamos Color de primer plano a transparencia y dibuja un pequeño degradado a un lado. Repite ese paso hacia el otro lado. imprenta CTRL-D para deseleccionar.

04 botones insertados en forma de círculo

Elija el Herramienta Elipse, sostener CONTROL presiona y dibuja un círculo. Activar Capa> Estilo de capa> Superposición de degradado con un gradiente que fluye de # 88aacc (RGB 136, 170, 204) a # 5588aa (RGB 85, 136, 170). Agrega un Estilo de capa> Bisel y relieve> Contorno con los siguientes valores: Tamaño 2 px, Bisel exterior, color # 889090 (RGB 136, 144, 144).

Debajo de estos botones crea otro círculo, pero un poco más grande que el primero. Este círculo obtiene una superposición de degradado de gris más oscuro a más claro. Esto crea la ilusión óptica de un botón insertado.

05 Etiquetado

Etiqueté los botones con letras consecutivas y puse un texto descriptivo al lado de cada botón. Ambos se logran usando el Herramienta de texto horizontal. Elegí la fuente Dekar.