¿Cómo utilizar Photoshop para crear una página web? ¿Por dónde empezar?

El diseño de la interfaz tiene ciertas especificaciones de diseño y usted puede comenzar y avanzar rápidamente según las especificaciones de diseño.

Composición de la página

Una página web suele tener una barra de navegación (nav), un pie de página (footer) y un área de contenido (body). Se accede a las páginas individuales (páginas secundarias) a través de enlaces en la barra de navegación. Acceda a otras páginas detalladas (páginas terciarias) a través de enlaces y listas en el área de contenidos. Por lo tanto, un CMS (sistema de gestión de contenidos, que también puede denominarse simplemente sistema de noticias o blog) sencillo suele constar de tres páginas: página de inicio index.html list.html text/details show.html.

Área del módulo de página

Una vez que conoces la estructura y composición de la página, puedes comenzar con el contenido de la página. Existen ciertos estándares para el diseño y la producción de contenido. En pocas palabras, se puede hacer clic en los enlaces, los botones parecen botones, los cuadros de texto parecen entradas y se conserva el reconocimiento y la usabilidad de los controles predeterminados (selección de radio, verificación, móvil). El terminal suele tener un tipo deslizante hacia la izquierda y hacia la derecha, mientras que el lado de la PC tiene un tipo de botón vertical. Este es un cambio y diseño que está en línea con la experiencia operativa del dispositivo. Preste atención a los ejemplos de la página web. Ordene cosas como el encabezado de la página: navegación del logotipo y otros menús desplegables de navegación principal y diapositivas del cuadro de búsqueda, módulos con múltiples métodos de visualización, como lista de texto, pestaña de lista de imágenes/lista de puertas corredizas, lista de comentarios, área de formulario, etc.

Planificación y diseño de páginas

Estrictamente hablando, además de diseñar basándose en la creatividad del diseñador, el diseño de páginas también incluye un análisis y diseño de necesidades. El análisis de la demanda se basa en las necesidades reales (supongamos que estoy haciendo noticias, quiero mostrar más en forma de lista; estoy haciendo compras, quiero mostrar más en forma de lista de imágenes y textos, etc.) para diseñar el formulario de visualización, según el diseño del contenido según el peso (qué módulo es más importante o significativo). La creatividad del diseñador es relativamente flexible. Sólo necesitas diseñar los módulos organizados según tus ideas.

Estrictamente hablando, no hay límite para el tamaño de la página. Sin embargo, las páginas con diseños habituales (como Weibo, Tencent y otros portales) se basan en el tamaño real del monitor (adaptado al formato). resolución de 1024*768) El diseño se basa en una cuadrícula de 960. Todo el sitio flash no tiene muchos requisitos (se puede escalar en tiempo real, al igual que una película reproducida, los dispositivos móviles deben considerar tamaños de resolución normales (320). *480, etcétera).

Por lo tanto, los diseñadores generalmente crean un nuevo documento de tamaño moderado y luego crean un documento de página del tamaño correspondiente. Este último se arrastra al primer documento como un gráfico auxiliar y luego comienza a crear líneas auxiliares. Por ejemplo: cree un nuevo documento de 1440*3000 y guárdelo. Luego cree un documento de 960*3000, presione la tecla V, haga clic en el documento, arrástrelo al primer documento sin soltar el mouse, use el método de alineación para centrar y alinear desde arriba, y arrastre las líneas auxiliares de la regla.

Detalles y efectos

El diseño de la página es diferente de la composición tipográfica. El diseño de la página aún debe tener en cuenta la producción real. Algunos efectos se ven geniales, pero no pueden serlo. logrado a través del código (las páginas web generalmente se escriben y usan como archivos HTML), entonces necesitamos comprender algunos de los efectos y conocernos a nosotros mismos y al enemigo antes de poder hacerlo con facilidad.

Los buenos efectos visuales pueden hacer que el sitio parezca más impactante y amigable (diferentes estilos tienen diferentes sensaciones. Además de hacer uso de modos de mezcla de materiales, filtros y gradación de color, también es necesario diseñar efectos visuales). Hay un cierto gusto estético en el pasado, se decía que el ojo está alto y la mano baja, pero ahora se dice que el ojo está bajo y la mano alta. Se pueden entender muchos de los efectos, pero. ¿No puedes pensar en ellos? Cuando ves las cosas de otras personas, ¿siempre dices que está bien?

Se necesita práctica para comprender los detalles. Te recomiendo que mires algunos casos de diseño de iconos y UI en iconfans. Puedes aprender a usar lápices para ajustar los detalles a nivel de píxeles y también puedes aprender. a usar bolígrafos y pinceles para dibujar. También puede aprender a generar gráficos e imágenes claros y nítidos con gráficos salvajes y sin restricciones, y también puede aprender a diseñar módulos y estructuras con un significado más experiencial (no subestime la experiencia y el diseño, solo). Imagínate, el texto o los íconos demasiado pequeños no se ven claramente, creo que tampoco puedes hacer clic en ellos, y esta es la experiencia).

Otros

El diseño web de PS no solo requiere que usted tenga habilidades de diseño, sino que también requiere buenos hábitos de uso de herramientas. Aquí hay dos puntos principales: organización de materiales y operación de capas.

Organización de materiales, los materiales más flexibles en PS son fuentes, estilos de pincel y patrones, entre los cuales los estilos son particularmente importantes. Además de utilizar materiales descargados de Internet, también puedes crear otros nuevos en el estilo. lista que usa con frecuencia Además, asegúrese de hacer una copia de seguridad de su lista de estilos de manera oportuna (si ocasionalmente reinstala el sistema o cambia de computadora, probablemente no desee volver a crear una biblioteca de estilos). Los patrones generalmente se pueden usar para diseñar rápidamente algunas texturas de fondo complejas (como patrones y cuadrículas clásicas, matrices de puntos de píxeles, etc.) y fondos de imágenes (como fondos de vetas de madera).

Operaciones de capas. Además del control simple del estilo de las capas, también debe aprender a usar Ctrl G y la agrupación de capas para administrar bien sus configuraciones (una página web generalmente tiene N capas múltiples). puede comprimir la altura de la lista de capas y también puede integrar módulos relacionados), asígnele un nombre apropiado y le resultará mucho más fácil encontrar la aguja en el pajar~~~

Eso es todo Por ahora, la luz de la mañana lo codificará por ti~~