-
Cómo crear un sitio web de fondo Diagonal
-
La creación de un fondo diagonal convierte en una característica de diseño llamativo en su página web. Simplemente colocando una línea diagonal en un gráfico y que sirva como un fondo da como resultado una apariencia picada, desigual, por lo que necesitará un Gap Filler. De lo contrario, la línea aparece roto. Estas instrucciones se refieren al uso de Photoshop en un PC, pero los principios son los mismos para otros sistemas de software de diseño y de la computadora.Instrucciones
1 Abrir una nueva página con 200 píxeles de lado.
2 Colorear el fondo con un color sólido, tal como negro.
3 Crear una nueva capa.
4 Dibuje una caja rectangular (regla) 10 píxeles de altura y la anchura de la caja.
5 Rellenar con un color más claro que el fondo, tal como blanco.
6 Transformación libre ( "Ctrl" y más "T") la regla rectángulo (Capa 1) y gire 45 grados. Para ello, puede mantener pulsado el botón de desplazamiento y girar manualmente el rectángulo, o cambiando el campo grados de rotación en el menú superior de 0,0 a 45. (Uso -45 grados para una parte superior derecha de abajo a la izquierda de la diagonal).
7 Arrastre los puntos finales centro del rectángulo hasta que se superpone a las esquinas del fondo, que recubre el cuadro de centrado y alineado con el borde. Agrandar la vista de página para ayudar a alinear las reglas, si es necesario.
8 Reducir el tamaño del lienzo de 100 píxeles cuadrados (en "Imagen" y luego "Tamaño del lienzo"); asegúrese de que el cuadro de ubicación del centro se selecciona, y la entrada 100 en ambos campos de anchura y altura.
9 Haga clic en "OK" y, cuando se le solicite, haga clic en "Continuar" para finalizar el proceso.
10 Crear una nueva capa (Capa 2).
11 Dibujar un cuadrado de la caja 5 píxeles (el pulsador de cambio en la elaboración) y llenan de color blanco.
12 Duplicar capa 2 (Copia de la capa 2).
13 Mueva la imagen de la capa 2 hasta que la caja esté al mismo nivel en la esquina superior derecha.
14 Mueva la copia de imagen de una capa 2 de la caja hasta que esté al mismo nivel en la esquina inferior izquierda.
15 "Guardar para la Web" (Alt + Ctrl + Shift + S) y ajustar el tamaño de la imagen a 10 o 20 píxeles cuadrados.
dieciséis Exportar como un archivo GIF.
17 Añadir la imagen a su sitio web a través de la etiqueta <body> (<Antecedentes cuerpo = "Image.gif">) o la hoja de estilo, ajuste correctamente la ubicación URL.
<STYLE type = "text / css"> body {background-image: URL (Image.gif); } </ Style>
Consejos y advertencias
- Trate de usar una línea discontinua en lugar de una línea continua para la variedad.
- Para crear más espacio entre líneas, guardar el archivo en un tamaño más grande, como 80 píxeles o 100 píxeles cuadrados.
- Los cuadrados de las esquinas son siempre la mitad de la altura del rectángulo (línea) se crea; si la línea es de 20 píxeles de alto, las cajas de esquina son 10 píxeles cuadrados.
- Las cajas de esquina llenan la brecha entre las imágenes lo que la línea se ve sin problemas y sin roturas.
- Guarde el archivo PSD original para crear más fondos diagonales por un simple cambio de colores.
- Si la imagen no está en pantalla, compruebe que ha especificado la ubicación correcta de la imagen.
