Scribd Logo
Upload

Welcome to Scribd!

  • Como Hacer Fondo de Imagen Degradada para Web Con Photoshop

    Uploaded by

    Pedro Manuel Aguayo Muñoz
    8 views8 pages

    Original Title

    Como Hacer Fondo de Imagen Degradada Para Web Con Photoshop

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views8 pages

    Como Hacer Fondo de Imagen Degradada para Web Con Photoshop

    Uploaded by

    Pedro Manuel Aguayo Muñoz

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Como hacer fondo de imagen degradada para web con Photoshop

    Estilos
    Lo que voy a ensear es muy bsico pero realmente efectivo a la hora de disear un sitio web. Dado que se necesita algo de estilos css para poder colocar una imagen de fondo en una plantilla, les mostrare como colocar si no usan un editor de diseo web como dreamweaver. Est es la etiqueta css que deben colocar para que su imagen funcione en el sitio:

    body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #fff; background-image: url(http://www.elnicdetusitioweb.com/fondo.png); margin: 0; padding: 0; color: #000; }
    Lo que est en negrita es la etiqueta que hace que funcione una imagen de fondo en un sitio web, esa misma etiqueta se puede colocar tambin dentro del contenido de texto e imagenes Content o Container, en el Header o Footer en los estilos css.

    Crear imagen degradada con Photoshop


    Si no tienen el programa se puede descargar una versin de prueba en el sitio de Adobe, los pasos a seguir para la realizacin de una imagen con un color degradado son los siguientes: Una vez abierto el programa crearemos yendo a Archivo y seleccionaremos Nuevo. aparecer una ventana donde nos da la opcin de elegir un nombre, que tipo de medida usar, que modo de color ponerle, cuantos bits deseamos que tenga la imagen (En 32 bits no funcionan imgenes PNG o GIF si deseamos transparencia en el fondo de la imagen) y contenido de fondo, o sea el color o sino transparencia.

    Una vez aprobadas las opciones, tendrn que ver si quieren colocar un color o usar la transparencia como fondo y degradar la imagen con algn color de su eleccin sobre el fondo transparente (Tendrn que revisar los estilos css de color de fondo background: #fff; para que concuerde con el degradado si se usa una imagen con fondo transparente.)

    Seleccionar la herramienta Bote de pintura si se quiere dar color a todo el fondo, lo encontraremos del lado izquierdo del panel de control

    En este caso voy a colocar un color de fondo antes de dar el degradado, despus muestro como hacerlo con transparencia

    Luego con la tecla derecha del Mouse clickeamos sobre la herramienta Bote de pintura y nos aparecer la herramienta de degradado

    Una vez elegida la herramienta de Degradado cambio el color para que el degradado se efecte y elijo que tipo de degradado quiero hacer con el nuevo panel que se ha abierto en la parte superior, van a encontrar varias opciones, solo es cuestin de ir probando la que mas les convenga.

    Marco desde un punto exterior en este caso para dar un degradado en la parte superior

    Suelto el botn del mouse donde quiero que llegue el degradado y quedar de est manera

    Est es otra de las opciones para degradar una imagen

    Luego guardan en el formato que deseen, lo suben al servidor en la carpeta que les parezca adecuada para que se vea, por lo general en el archivo raz public_html y colocan la etiqueta css antes del cierre <head>

    body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #fff; background-image: url(http://www.elnicdetusitioweb.com/fondo.png); margin: 0; padding: 0; color: #000; } </head>

    You might also like