Crear una lista de precios en Photoshop. Creación de una lista de precios concisa y moderna en Photoshop. Cómo hacer un cartel sencillo para principiantes.

Nota del traductor: fuentesCalibri y Corbe - sistema. Si estas fuentes no están en su sistema, puede tomarlas del archivo.

Paso 1

Cree un nuevo documento Ctrl+N con los siguientes datos, que se muestran en la captura de pantalla a continuación. Enciende la red Ver > Mostrar > Cuadrícula ( Ver-Mostrar-Grid), y también habilitar el ajuste a la cuadrícula Ver > Ajustar a > Cuadrícula(Ver-Ajustar a cuadrícula).

Necesitamos una cuadrícula de 5 px. Para hacer esto, vaya a Editar >Preferencias >guías,Red &Rebanadas(Edición-Configuración-Guías, Cuadrícula y Fragmentos). En el elemento Cuadrícula, en el campo Línea de cuadrícula Cada, ingrese un valor de 5 y en el campo Subdivisión ( División interna) ingrese 1. Establezca el color de la cuadrícula en #a7a7a7.

Paso 2

#205d7a. Seleccione una herramienta Herramienta Rectángulo redondeado(Rectángulo con esquinas redondeadas) radio de esquina de 5 px y dibuja una forma que mida 145 x 420 px. En el panel Capas, haga doble clic en la capa de forma para abrir la ventana Estilos de capa.

Activar GotaSombra(Sombra), InternoSombra(Sombra interior), Resplandor exterior (Resplandor exterior), Resplandor interior(Resplandor interior) y Ataque(Ataque). Configure estos estilos con las opciones que se muestran a continuación. Debería terminar con una forma como la segunda imagen. Puede desactivar temporalmente la cuadrícula para ver cómo se ve la forma en esta etapa.

Paso 3

Establecer color primer plano a negro. Seleccione una herramienta Herramienta Rectángulo(Rectángulo). Crea una forma de 145 x 70 px y colócala como se muestra en la primera imagen.
En el panel Capas, abra la ventana de estilo para esta forma e ingrese los parámetros que se muestran a continuación.

Nota del traductor: algunas correcciones en estilos - EstiloInterno Sombra (Sombra interior)-Distancia (Distancia) -2 px., Estilo Ataque(Ataque)-Posición-Dentro (Dentro),LlenarTipo -Color - color aproximado - #60b9fb. Los estilos Relieve y Resplandor exterior no son necesarios.

Paso 4

Duplica la capa con el rectángulo creado en paso anterior(Ctrl+J). Hacer clic clic derecho Pase el cursor sobre el duplicado y seleccione Claro Estilo de capa (Borrar estilos de capa). Instalar Llenar(Rellenar) al 0%. Abra la ventana de estilos e ingrese los parámetros que se muestran a continuación.

Paso 5

Para este paso necesitaremos una cuadrícula de 1 px. Ir a Editar >Preferencias >guías,Red &Rebanadas(Editar-Preferencias-Guías, Cuadrícula y Sectores) e ingrese 1 en el campo Línea de cuadrícula Cada.

Establezca el color de primer plano en #ed1c24 y seleccione la herramienta Herramienta Rectángulo(Rectángulo). Crea una forma con un tamaño de 145 x 1 px. Coloca la forma como se muestra en la primera imagen. Duplica la forma (Ctrl+J).
Mueve la copia hacia abajo 1 px y cambia su color a #fed700.

Paso 6

Seleccione la capa de forma roja. Llenar(Rellenar) al 0%. Abra la ventana Estilos e ingrese la configuración que se muestra a continuación.

Paso 7

Selecciona la capa con la forma amarilla. Reducir Llenar(Rellenar) al 0%. Agregue un estilo con las opciones que se muestran a continuación.

Paso 8

De nuevo ir aEditar >Preferencias >guías,Red &(Editar-Configuración-Guías, Cuadrícula y Fragmentos) y en el campo Línea de cuadrícula Cada establezca el valor en 5.

Seleccione las capas del rectángulo delgado y agrúpelas (Ctrl + G). Duplica el grupo creado y muévelo hacia abajo como se muestra en la imagen a continuación.

Paso 9

Cree cinco copias más del grupo y coloque los duplicados como se muestra en la imagen a continuación.

Paso 10

Establece el color de primer plano en #a1d8ff. Seleccionar Herramienta Rectángulo redondeado(Rectángulo con esquinas redondeadas) radio 3 px. Crea una forma de 95 x 25 px y colócala como en la imagen de abajo.
Abra la ventana Estilos e ingrese la configuración que se muestra a continuación.

Paso 11

Deshabilitar la grilla Ver > Mostrar > Cuadrícula(Ver-Mostrar-Cuadrícula).
Abra el panel Carácter (Ventana - Carácter). Seleccione la herramienta Texto, establezca el color en #ddf1ff y escriba la palabra BÁSICO. Utilice la fuente Sakkal Majalla Bold de 20 pt. Agregue un estilo al texto con las opciones que se muestran a continuación.

Paso 12

Seleccione la fuente Calibry Вold tamaño 35 pt color #205d7a y escriba el precio. Para este texto, agregue estilos con las opciones siguientes.

Ver > Mostrar > Cuadrícula (Ver-Mostrar-Cuadrícula). Seleccione una herramienta Herramienta Rectángulo(Rectángulo). Crea dos cuadrados de 5 x 5 px y colócalos como se muestra a continuación.

Paso 17

Establezca el color de primer plano en #282828. Seleccione una herramienta Herramienta Rectángulo(Rectángulo) y crea una forma con un tamaño de 600 x 600 px. Coloque la capa con esta forma debajo de todos los grupos en el panel de capas (Shift + Ctrl + [). Aplique un estilo de capa a la forma con las opciones que se muestran a continuación. Seleccione el patrón que creó anteriormente.

Detalles de la lección
Software utilizado: Adobe Photoshop CS6
Complejidad: promedio
Tiempo aproximado de finalización: 1 hora

lo que crearemos

Photoshop se utiliza a menudo para crear gráficos y diseños en diseño web. esta lección en Photoshop describe el proceso de creación, utilizando una combinación de formas vectoriales y estilos de capa, una lista de precios para una empresa de hosting. ¡Así que comencemos!

Paso 1: preparación
Comencemos creando un nuevo documento (Comando/Ctrl + N) con un tamaño de 800x600 píxeles.

sha2
Agregue una capa de ajuste de Color sólido para usarla como fondo. Establece el color en #f7f8eb.

Paso 3
Descarga el patrón de píxeles gratis. Luego haga doble clic en la capa de ajuste para aplicarle un estilo de capa de Superposición de patrón.

Paso 4
Crear nueva capa y rellénalo de negro. Vaya al menú Filtro> Ruido> Agregar ruido (Filtro> Ruido> Agregar ruido).

Paso 5
Establece la paleta de capas en Modo de fusión – Pantalla.

Paso 6: base
Empecemos a crear la base. Dibujar rectángulo redondeado radio de 10 píxeles. Rellénalo de un color azul muy claro, sin ningún trazo.

Paso 7
Haga doble clic en esta capa para abrir la ventana de Estilos de capa. Aplicar estilos de capa Trazo y sombra interior(Sombra interior) con la configuración siguiente.

Paso 8: barra de título
Duplica esta forma y cambia el color de la copia. Cree otro rectángulo en su parte inferior, configurando el modo de dibujo en "Restar del área de forma" (Restar). Terminamos con este pequeño panel.

Paso 9
Aplique los estilos de capa Trazo, Resplandor interior y Superposición de degradado con la configuración a continuación.

A continuación puede ver el resultado de aplicar estilos de capa a la barra de título.

Paso 10
Agregue un título de texto para la lista de precios. Dale un efecto de relieve aplicando un estilo de capa de Sombra interior.

Paso 11: Información de precios
Ahora, habiendo preguntado fuente más grande, agregue el precio en sí. Usar gris saturación media. Aplique los estilos de capa Sombra interior, Sombra interior y Bisel y relieve a esta capa.

A continuación puedes ver la diferencia antes y después de aplicar los estilos de capa.

Paso 12
Añade cualquier información adicional al precio.

Paso 13: Lista (elementos)
Duplica la capa base y cambia su color a #f0f0f0. Dibuja un círculo y un rectángulo encima del duplicado usando el modo Restar.

Paso 14
Aplique estilos de capa Trazo, Resplandor interior y Superposición de degradado.

Paso 15
Crea una nueva capa encima de esta forma. pintar encima parte superior figuras en blanco. Presione Comando/Ctrl + Alt + G para convertir esta capa en una máscara de recorte. Ahora crea otra capa nueva debajo de esta forma y usa negro para agregarle una sombra.

Aquí está el resultado a escala del 100%.

Paso 17
Separe cada elemento de la lista con una línea negra de 1 píxel.

Paso 18
Asegúrese de que las líneas aún estén activas, luego haga clic en este botón Más opciones y seleccione la línea de puntos.

Paso 19
Crea una máscara de capa para la capa de líneas y pinta los extremos derecho e izquierdo de las líneas con negro.

Paso 20: Botón
Dibuja un rectángulo redondeado con el color #a7bed5.

Paso 21
Aplique estilos de capa Trazo, Resplandor interior y Superposición de degradado a la forma.

Paso 22
Duplica el botón, coloca la copia debajo del original y muévela hacia abajo unos píxeles.

Paso 23
Aplique los mismos estilos de capa a esta forma que la primera, pero aumente la Opacidad del estilo de capa Superposición de degradado para oscurecerla.

Además, para agregar una sombra suave alrededor del botón, aplicaremos un estilo de capa de Sombra interior.

Así es como debería verse al final.

Paso 24
Aplicar texto a la superficie del botón. Aplica una sombra interior para darle un efecto de relieve.

Paso 25
Seleccione todas las capas relacionadas con la lista de precios creada y presione Comando/Ctrl + G para combinarlas en un grupo. Ahora, mientras mantienes presionada la tecla Alt, arrastra el grupo hacia un lado, creando una copia del mismo. Crea 3 tablas de esta manera.

Paso 26
Por supuesto, no tienen por qué ser idénticos, así que cambie la información de precios que contienen.

Paso 27
Ahora resaltemos de alguna manera uno de los planes tarifarios creados. Para hacer esto, suba un poco el segundo plan. Alinear borde inferior sus paneles de cabecera a lo largo de los bordes superiores de los otros dos paneles.

Paso 28
Deberíamos asegurarnos de que las posiciones en la lista de precios también estén alineadas. Seleccione la línea de texto y la línea debajo de ella, y bárralas, alineándolas con las adyacentes. Debería quedarte algo espacio libre, donde se agregará información adicional.

Paso 29
También cambie la posición del botón.

Paso 30
Ajusta la figura base haciéndola un poco más alta.

Paso 31
Agregue información adicional.

Paso 32
Dibuja el borde derecho de la segunda tabla de precios sobre el borde izquierdo de la primera tabla.

Paso 33
A continuación puedes ver el resultado antes y después de modificar las formas.

Paso 34
A continuación, levantemos un poco más el plano resaltado, dándole un aspecto un poco más alargado añadiendo una sombra. Primero, mantenga presionado Comando/Ctrl y haga clic en el icono de la capa con la base de la seleccionada plan tarifario en la paleta Capas para formar una selección.