Al crear un sitio web, la etapa de renderización del diseño de la página es muy importante, que posteriormente se compondrá y publicará en la red. En este artículo, aprenderá a usar Adobe Photoshop para dibujar un diseño competente para un sitio web, sobre la base del cual luego podrá crear diseños más complejos.
Es necesario
Programa de Adobe Photoshop
Instrucciones
Paso 1
Cree un nuevo archivo en Photoshop (Ctrl + N) con dimensiones 1040x1400, donde 1400 es la altura. Encienda la visualización de reglas (Ctrl + R) y establezca píxeles como unidades de medida en la configuración de la regla.
Paso 2
Empiece a estirar las guías para que se ajusten a los bordes de los cuadros de diseño. Estire los bordes laterales de modo que queden 40 píxeles en los bordes. Los bordes superior e inferior también deben dejar 40 píxeles a cada lado de los bordes del fondo.
Paso 3
Luego, seleccione una guía que esté 200px hacia abajo desde la parte superior del fondo para el encabezado superior.
Paso 4
Para formar las barras laterales a la izquierda y a la derecha del diseño, establezca las guías 240 píxeles desde el borde del fondo a la izquierda y 800 a la derecha.
Paso 5
5px hacia adentro desde las barras laterales izquierda y derecha y dibuja dos guías verticales más. Luego, arrastre dos guías más de 245 px a la izquierda y 795 px a la derecha.
Paso 6
Ahora mida desde el borde del encabezado 30px y dibuje una guía horizontal para el menú horizontal.
Paso 7
Seleccione el área estrecha del menú horizontal que acaba de marcar con una selección rectangular usando la tecla M. Seleccione la herramienta de relleno y rellene el área con un color gris claro neutro.
Paso 8
Seleccione la herramienta de relleno y rellene el área con un color gris claro neutro. Haga clic en el menú "Seleccionar-Modificar-Comprimir", especifique una opción de 1 píxel y haga clic en "Aceptar". Llene el área con un tono de gris más claro; tendrá un marco de menú.
Paso 9
Cree una nueva capa y seleccione una imagen adecuada para el icono o logotipo del sitio, y luego ábrala.
Paso 10
Inserte una imagen en una nueva capa en el encabezado, colocándola en el borde izquierdo. A la derecha de la imagen, escriba el título del texto del sitio usando cualquier fuente.
Paso 11
Diseñe los bloques de su sitio web con el mismo esquema de color que el encabezado recién creado. Seleccione el área de la barra lateral izquierda y realice las mismas operaciones de relleno de dos colores que con el bloque de menú.
Paso 12
Haz lo mismo con el bloque de contenido ancho central. Copie la capa de la barra lateral izquierda y colóquela como la barra lateral derecha.
Paso 13
Agregue texto a su diseño: elija una fuente neutral y complete la sección de títulos de menú, ejemplos de noticias, fotos, etiquetas y enlaces.
Paso 14
Termine el diseño creando un "pie de página" o pie de página: escriba sus derechos de autor y sus contactos allí.
