Plantilla ps de diseño de sitios web: cómo usar PS para crear plantillas de páginas web

¿Cómo diseñar una plantilla de página web en PS? ¿Cómo diseñar una plantilla de página web en PS? Cuando miramos sitios web, encontramos que los diseñadores prestan cada vez más atención al diseño de patrones. Los diferentes estilos de diseño de sitios web requieren diferentes ideas de diseño. ¿Cuáles son los requisitos para el diseño de un sitio web? A continuación, el editor le mostrará cómo diseñar una página web. Pasos para utilizar fuentes en el diseño de sitios web. Primero, debemos determinar el tipo y tipo de sitio web. Si se trata de un sitio web corporativo, debemos escribir el contenido del sitio web en títulos, subtítulos y texto principal, y luego diseñar las páginas del sitio web de acuerdo con el tema del contenido. También debemos prestar atención a la unidad del contenido. fuentes en el sitio web. Si se trata del sitio web de un centro comercial, utilice serifas, escritura a mano, rectángulos redondeados, negrita, cursiva, etc. Otro formulario de página web simple, como sitio web genial y Tao. Lo más importante es expresar el contenido del sitio web. Esto se debe a que otros sitios web nunca están diseñados para verse bien, sino para que los usuarios se sientan cómodos.

Utilice Photoshop para diseñar una hermosa plantilla de pie de página. Este artículo presenta un tutorial de PS para crear un pie de página. El diseño del pie de página tiene un sentido de jerarquía y está decorado con una textura de fondo de espacio en cuadrícula. Es un pie de página muy hermoso.

Desde que Web2.0 aterrizó en Internet, los pies de página se han vuelto más importantes que nunca y han aparecido muchos diseños de pies de página muy hermosos. En este tutorial, te enseñaré cómo crear un pie de página de sitio web simple y fluido en Photoshop.

Pie de página

Este es el pie de página que crearemos. Haga clic en la captura de pantalla a continuación para ver la imagen original.

Paso 1

Al igual que los encabezados y pies de página líquidos, los degradados suelen ser un sello distintivo de los estilos de diseño web 2.0. En este tutorial usaremos un conjunto de archivos de degradado que simulan materiales 3D. Puede obtener este paquete en los distribuidores Premier. Haga clic aquí para descargar el paquete de archivos de degradado.

Paso 2

Crea un nuevo documento en Photoshop. Yo mismo creé un archivo grande, con un tamaño de 1440 píxeles x 900 píxeles (adecuado para el monitor de 17 pulgadas de mi computadora portátil). Por supuesto, su pie de página no debería ser tan grande, aunque simula bien lo que sucede cuando se arrastra la ventana de su navegador.

Selecciona un color de fondo. En mi caso, el color de fondo es un degradado simple de #b0b0b0 a #e1e1e1. Mantenga presionada la tecla Mayús para crear un degradado vertical de arriba a abajo.

Paso 3

En diseño web, el diseño que crearás es muy importante. Es decir, elegir entre un diseño fluido (un diseño que puede adaptarse al tamaño del navegador) y un diseño de ancho fijo (los diseños de ancho fijo suelen centrarse en sitios web de estilo web 2.0). Nuestro pie de página será un pie de página de diseño de ancho fijo con un tamaño de 760 px por 420 px. Este tamaño garantizará una visualización correcta incluso en una pantalla de 800 x 600 píxeles.

Utilice una cuadrícula para determinar el tamaño de su sitio web, como se muestra a continuación. Tenga en cuenta que si desea crear un diseño que se ajuste al tamaño de pantalla de 1024 px x 768 px, defina su cuadrícula en un área de 955 px x 600 px.

Paso 4

Aunque nuestro pie de página tiene un ancho fijo, aún queremos que el pie de página ocupe toda la página. Para lograr esto usaremos un patrón de imitación de metal que hice en Photoshop. Haga clic aquí para descargar este patrón. Abra esta imagen en Photoshop, seleccione "Editar" para definir el patrón y asígnele un nombre.

Ahora crea un nuevo documento, de 1440 píxeles de ancho y 86 píxeles de alto. Seleccione el comando Editar relleno y seleccione el patrón que acabamos de crear. Seleccione Todo (Ctrl A) y luego corte y pegue la imagen en la parte inferior de nuestro primer documento. Obtendremos el resultado a continuación.

Paso 5

Ahora es el momento de usar el hermoso paquete de degradado del paso 1. Cree una nueva capa y use la herramienta Selección rectangular (M) para crear una selección con un ancho de archivo de 100 y una altura de 21 píxeles. Elige la herramienta Degradado (G) y elige un bonito degradado. Elegí "Negro 5 Brillo".

Ahora mantenga presionada la tecla Mayús y dibuje una línea vertical en la selección rectangular para crear este degradado.

Mueve la forma creada encima de la forma creada en el paso 4. Debería obtener resultados similares a la imagen a continuación.

Paso 6

Ahora agreguemos un efecto de sombra a la capa creada en el paso 5.

Paso 7

Establezca el color de primer plano en #545557 y el color de fondo en #1e211f. Cree una nueva capa debajo de la capa creada en el paso 4. En el paso 4, utilice la herramienta de selección para seleccionar el contenido de la capa. Seleccione la herramienta Degradado, seleccione el primer degradado (la combinación de colores de primer plano y de fondo), mantenga presionada la tecla Mayús y dibuje un degradado vertical en la selección. Ahora seleccione la capa en el paso 4 y cambie el modo de fusión de la capa a Multiplicar.

Paso 8

Crea una nueva capa sobre todas las capas y dibuja un rectángulo redondeado con el color #dfdfdf en el medio de la línea guía. Haga clic derecho en la capa y haga clic en Opciones de fusión para crear un efecto de sombra paralela para el rectángulo. Luego haga clic derecho en la capa de efectos y seleccione Crear capa, lo que separará el efecto de sombra paralela en una capa separada.

Ahora que tienes una capa de rectángulo y una capa de sombra, mueve y cambia el tamaño de la sombra hasta obtener el efecto que se muestra a continuación. Puede abrir la herramienta Transformar presionando Ctrl T, luego hacer clic derecho, seleccionar Perspectiva y arrastrar los dos controladores superiores hacia adentro. También puedes mover la sombra hacia abajo y usar la herramienta Borrador y un pincel suave para borrar el borde superior de la sombra.

Paso 9

Finalmente, agrega texto, información de derechos de autor y tu logotipo para completar el diseño.

Paso 10

Para utilizar un pie de página en un archivo html, simplemente elimine el texto (el texto se agregará al html), corte la imagen de fondo como se muestra a continuación. y luego agregue Péguelo en un archivo nuevo. Al igual que en Photoshop, este patrón se logrará utilizando la propiedad de imagen de fondo en el archivo CSS. Es por eso que recortamos la imagen a un tamaño tan pequeño, para obtener mejores resultados con archivos de menor tamaño.

Para cortar el pie de página, simplemente seleccione el contenido de la imagen en las guías, luego córtelo y péguelo en un nuevo archivo.

Seleccione los comandos Guardar como página web y Dispositivo para guardar estas dos imágenes. Luego elija el formato JPG y la calidad adecuada. El formato JPG y el formato PNG son buenos formatos para almacenar imágenes y pueden guardar muchos colores. El formato GIF se utiliza mejor para imágenes con colores simples. Este uso diferente se debe a diferentes algoritmos.

Pie de página final

¿Cómo usar PS para hacer una plantilla de página web? Después de diseñar un tamaño, simplemente diseñe el contenido directamente. Tenga cuidado de no fusionar ninguna capa. El texto se puede reemplazar con algunas palabras comunes.

Al fin y al cabo, guarda en formatos PSD y JPEG. ¡La primera es una plantilla y la segunda es una vista previa en línea!