Cómo usar ps para diseño web Cómo usar ps para diseño web

Cómo usar Photoshop para crear páginas web. Muchos amigos no conocen las especificaciones del uso de ps para crear páginas web. Se lo presentamos a continuación. 01

Abre la interfaz de Photoshop en tu computadora. Primero, creamos un lienzo con un ancho de 1200, una altura arbitraria y una resolución de 72. 02

Después de crear el lienzo, dibujamos una línea auxiliar en los lados izquierdo y derecho de 1200px para arreglarlo. 03

Luego abra el tamaño del lienzo, cancele "relativo" y ajuste el ancho a 1920px. 04

Después de configurarlo, simplemente edite el diseño en el área roja, que es el área de 1200 px. Depende de sus capacidades personales de diseño web.

¿Cómo hacer una página web en Ps?

1

Cree un nuevo archivo en blanco, abra el archivo "Material/Webpage Material 1.jpg", use la "Herramienta Mover" para mover la imagen al lienzo actual y obtenga "Capa 1" ". Cambie el tamaño usando Transformación libre.

2

Utilice la "Herramienta Rectángulo" para dividir el diseño de la página web, coloree el blanco RGB a (255.255.255) y establezca el modo de fusión de capas: proyección

3

Carga el gráfico de forma en la selección. Crea una nueva capa "Capa 2" y usa el color RGB de la "Herramienta Degradado" para (178.178.178) (255.255.255) para rellenar el efecto de degradado

4

Usa " Mover" Herramienta" mueve la imagen de la barra de navegación al lienzo actual para obtener la "Capa 3". Utilice "Transformación libre" para cambiar el tamaño

5

Cree contenido, abra "Material/Página web Material 3.jpg, Página web Material 4.jpg, Página web Material 5.jpg, Página web Material 6 Archivo ".jpg, material de página web 7.jpg", use la "Herramienta Mover" para mover la imagen al lienzo actual y obtenga "Capa 4", "Capa 5", "Capa 6", "Capa 7", " Capa 8". Cambie el tamaño usando Transformación libre.

6

Utilice la "Herramienta de texto horizontal" para ingresar el nombre de cada película con un tamaño de fuente de 14 puntos, fuente china (círculo pequeño) y color RGB (143,86. 46). El efecto se muestra en la figura.

7

Abra los archivos "Material/Webpage Material 8.jpg, Webpage Material 9.jpg, Webpage Material 10.jpg" y utilice la "Herramienta Mover" para mover la imagen. al lienzo actual, obtenga "Capa 9", "Capa 10" y "Capa 11", y use "Transformación libre" para ajustar el tamaño.

8

Utilice la "Herramienta de texto horizontal" para ingresar cada película con un tamaño de fuente de 18 puntos, fuente china (negrita) y color RGB (143.86.46). El efecto se muestra en la figura.

9

Abra el archivo "Material/Material de página web 11.jpg", use la "Herramienta Mover" para mover la imagen de la tabla al lienzo actual, obtenga la "Capa 12", utilice el cambio de tamaño "Transformación libre". El efecto se muestra en la figura.

10

Utilice la "Herramienta de texto horizontal" para ingresar un número con un tamaño de fuente de 18 puntos, fuente china (Songti) y color RGB (143.86.46) para crear un menú de selección. Abra los archivos "Material/Capítulo 9/Material de página web 12.jpg, Material de página web 13.jpg", use la "Herramienta Mover" para mover la imagen del botón al lienzo actual, obtenga la "Capa 13" y la "Capa 14", elimine Fondo no deseado, cambie el tamaño usando Transformación libre.

11

Dibuje una selección rectangular, haga clic en el botón para crear la "Capa 15" y use la "Herramienta Degradado" para rellenar el color RGB (255.255.255) hasta convertirlo en transparente. efecto degradado. Seleccione el tamaño de fuente "Herramienta de texto horizontal" de 16 puntos, fuente occidental (Verdana) y color RGB (255.255.255) para ingresar la fuente.

12

Abra el archivo "Material/Material de página web 14.jpg", use la "Herramienta Mover" para mover la imagen del logotipo al lienzo actual, obtenga la "Capa 16", utilice el cambio de tamaño "Transformación libre".

13

Utilice la "Herramienta de texto horizontal" para ingresar el tamaño de fuente de 40 puntos, la fuente occidental (LithosPro) y el color RGB como (188.202.112) y ( 143.86.46) Texto del título.

¿Cómo utilizar Photoshop para crear una página web?

1. Primero use Photoshop para crear una imagen de una página web; 2. Ctrl+R para abrir la regla, dibujar una tabla en la imagen y seleccionar la parte que desea vincular. herramienta para seguir la división y corte de la tabla dibujada 4. Una vez completados los pasos anteriores, seleccione "Archivo" > "Guardar para Web y dispositivos" y configure la imagen de la página web según sus propias necesidades en la ventana que se abre. Una vez completada la configuración, "Guardar" y guardar Escriba "html e imágenes", corte "todos los cortes". 5. A continuación, utilice Dreamweaver para abrir el archivo html, crear enlaces al mismo y otras cosas. 6. Finalmente guárdelo. Si aún no lo sabes, puedes ¡Hola!

¿Cuál es el proceso de uso de PS para crear renderizados web?

1. Abra PS y cree un nuevo archivo con un ancho de 1920PX y una altura personalizada (configurada según sus propias necesidades) con una resolución de 72 y un modo de color de RGB/8 bits.

2. Cree carpetas de estructura de página según los requisitos de la página (aspectos de gestión de la estructura de la página)

3. Utilice rectángulos para rellenar y dividir colores según la estructura de la página (el editor toma el JD). interfaz de inicio de sesión como ejemplo)

4. División detallada de cada parte estructural, el editor toma el área principal como ejemplo

5. se realiza la renderización del efecto real

6. Según el paso anterior, y así sucesivamente, se puede completar una renderización.

¿Cuáles son los pasos para diseñar una página de imágenes de PS?

1. Abra PS, cree un nuevo documento en blanco, establezca el nombre en "feifei studio", seleccione "1024x768" en la lista desplegable de tamaño predeterminado, configure el modo de diseño en "color RGB". y establezca el contenido en "blanco"”, haga clic en el botón “Aceptar” para completar la creación del documento.

2. Cree una nueva capa llamada "Marco" y utilice esta capa para implementar el diseño general de toda la página web. Primero seleccione la "Herramienta de selección rectangular", luego establezca el ancho del rectángulo en 1024 y la altura en 80. Seleccione una parte del contenido en los lados superior e inferior del documento y rellénelo de negro, de modo que toda la web La página presenta un efecto de "pantalla ancha".

3. Cree una nueva capa encima de la capa de fondo y asígnele el nombre "Color de fondo". Haga clic en la "Herramienta de selección rectangular" y establezca el "ancho en 400 y el alto en 768".

4. Luego seleccione una parte del contenido en el lado izquierdo de la ventana y rellénela con un color verde oscuro. color Luego haga clic en la "Herramienta de selección rectangular", establezca el ancho en 624 y el alto en 768, luego seleccione una parte del contenido en el lado derecho de la ventana y rellénela con un color verde claro. Rellene dos colores con una saturación ligeramente diferente para crear un contraste más obvio.

5. Cree una nueva capa encima de la capa "Marco", llamada "Elemento principal". Abra una imagen de lirio preparada, haga doble clic en la capa "Fondo" para convertirla a "Capa 0", haga clic en la herramienta "Varita mágica", haga clic en el área blanca de la imagen, seleccione el área blanca y presione el Tecla DEL Elimina las áreas blancas.

6. Luego arrastre y suelte la imagen en la capa "Elemento principal", como se muestra en la imagen.

7. Luego seleccione la "Herramienta de selección rectangular", establezca el "ancho en 624 y el alto en 768, luego seleccione una parte del contenido en el lado derecho de la flor en la ventana y ajuste su brillo y contraste para que los lados izquierdo y derecho de la flor haya un contraste obvio en ambos lados.

8. Ajuste los detalles de la página, agregue algunas barras de navegación, mensajes de información, información de derechos de autor. etc., y la página final es como se muestra en la figura

9. Seleccione la herramienta "Cortar" y luego divida el contenido. La ventaja de dividir es que facilita la transmisión de archivos. Al mismo tiempo, es mejor reemplazar el contenido del texto al dividir el contenido. Las partes se dividen de forma independiente. El efecto es como se muestra en la figura. ¿Cómo guardar la página web cortada en PS?

Después de cortar, haga clic en Archivo-Guardar. La tecla de acceso directo de formato utilizada para la web es alt+shift+ctrl+s.