Cómo crear un fondo página web diagonal

Escrito por suzanne fyhrie parrott

Crea un fondo diagonal para darle una característica de diseño atractivo a tu sitio web. Basta con colocar una línea diagonal en un gráfico y que sirva como fondo dando un aspecto picado, desigual, por lo que tendrás una diferencia de relleno. De lo contrario, la línea aparece quebrada. Estas instrucciones se refieren al uso de Photoshop en un PC, pero los principios son los mismos para otros programas de diseño y sistemas informáticos.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre una nueva página con 200 píxeles cuadrados.

  2. 2

    Coloca de fondo un color sólido, como el negro.

  3. 3

    Crea una nueva capa.

  4. 4

    Dibuja una caja rectangular (regla) de 10 píxeles de alta y ancho.

  5. 5

    Rellénala con un color más claro que el fondo, por ejemplo blanco.

  6. 6

    Elige la transformación libre ("Ctrl" y más "T") para la regla del rectángulo (Capa 1) y gira 45 grados. Para ello, puedes mantener pulsado el botón de cambio y de forma manual girar el rectángulo, o cambiar el campo de grados de rotación en el menú superior de 0,0 a 45. (Usa -45 grados para una diagonal desde la esquina superior derecha hasta la esquina inferior izquierda).

  7. 7

    Arrastra los puntos finales del centro del rectángulo hasta que se superpongan con las esquinas del fondo, cubre la caja de arriba y centrado a ras del borde. Amplia la vista de página para ayudarte a alinear las reglas, si es necesario.

  8. 8

    Reduce el tamaño del lienzo a 100 píxeles cuadrados (en "Imagen" y luego "Tamaño del lienzo"), asegúrate de que el cuadro de ubicación en el centro esté seleccionado, y escribe 100 en el ancho y alto en los campos.

  9. 9

    Haz clic en "Aceptar", y cuando te le solicite, haz clic en "Continuar" para finalizar el proceso.

  10. 10

    Crear una nueva capa (Capa 2).

  11. 11

    Dibuja un cuadro de 5 píxeles cuadrados (sostén el botón de desplazamiento cuando lo dibujes) y rellénalo de color blanco.

  12. 12

    Duplica la capa 2 (Copia de la Capa 2).

  13. 13

    Mueve la imagen de la capa 2 hasta que el cuadro quede al ras en la esquina superior derecha.

  14. 14

    Mueve la imagen de la copia de la capa 2 hasta que la caja esté al ras de la esquina inferior izquierda.

  15. 15

    "Guarda para la Web" (Alt + Ctrl + Shift + S) y ajusta el tamaño a 10 o 20 píxeles cuadrados.

  16. 16

    Expórtalo como un archivo GIF.

  17. 17

    Agrega la imagen a tu sitio web a través de las etiqueta * (*) o una hoja de estilo, configura correctamente la dirección URL. *

Consejos y advertencias

  • Trata de usar una línea de puntos en lugar de una línea continua para variar.
  • Para crear más espacio entre las líneas, guarda el archivo en un tamaño más grande, por ejemplo 80 o 100 píxeles cuadrados.
  • Los cuadrados de las esquinas son siempre la mitad de la altura del rectángulo (línea) a crear, si la línea es de 20 píxeles de alto, las cajas de la esquina serán de 10 píxeles cuadrados.
  • Las cajas de esquina llenan el vacío entre las imágenes por lo que la línea se ve lisa y continua.
  • Guarda el archivo PSD original para crear mas fondos diagonales, simplemente cambia los colores.
  • Si la imagen no se muestra, comprueba si has especificado correctamente su ubicación.

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media