
-- En mi caso la gestionaré con Adobe Photoshop (aunque puedes usar cualquier otro programa similar). La abro:

-- Me fijo en el tamaño de la imagen original, y veo que tiene 600x80 pixel.
-- En este punto, puedes optar por modificar la imagen original, por ejemplo añadiéndole más hojas de las que tiene, eliminando alguna, o incluso añadiendo otro(s) motivo(s) a la imagen. Eso queda a tu gusto.
-- Yo lo que voy a hacer es crear una imagen nueva; para ello creo una con los 600x80 que vimos:

-- Ahora procuro que tenga el fondo con el mismo tono anaranjado que el original; para ello con el cuentagotas lo tomo de la imagen original (vemos que el color es el cb8c57 que aplico:

-- Aplico el color usando la opción de Degradado para lo que elegà además del original que tomé, otro más oscuro (como puedes ver en la imagen), y aplico el degradado de forma muy suave.
-- Una vez listo, procedo a guardarla:

-- La guardo con un nombre distinto a la original (en mi caso la llamo header3_Mio.jpg).
-- El siguiente paso lógico será el de subir la imagen mediante
FTP a mi servidor:

-- Asà que me conecto con mi aplicación FTP (en mi caso el CuteFTP) y lógicamente debo dirigirme al lugar donde se encuentra la imagen original, recuerda: ../templates/ja_purity/images/header
-- Entro en la carpeta header/ y como vés ahà aparecen las tres imágenes. Se tratará de sustituir header3.jpg por la que acabo de crear yo en Photoshop, asà que la busco en la parte izquierda en mi ordenador (la que llamé header3_Mio.jpg) y la arrastro a la parte derecha, es decir, la subo al servidor:

-- Ahora le cambio el nombre a la original (y le pongo header3ANTIGUO.jpg), mientras que la imagen mÃa (header3_Mio.jpg) la dejo con el nombre original de header3.jpg:

-- Ya lo tenemos todo listo. Si ahora vamos a nuestra web, ya deberÃamos ver el cambio que realizamos:

-- El cambio se realizó sin problemas y la cabecera aparece con la nueva imagen de fondo que habÃamos creado.
-- Al tratarse como dije al principio de un template que dispone de 3 imágenes que aparecerán aleatoriamente, estas operaciones que he explicado deberÃamos realizarlas con las otras dos imágenes (header1.jpg y header2.jpg). Esto te queda como ejercicio para que tú puedas practicar lo aprendido.
-- Con esto finalizamos la presente lección. En la próxima vamos a ver como cambiamos también el tÃtulo de la web, con lo cual ya habremos completado todo el trabajo para cambiar la apariencia completamente en la cabecera o header.
-- Lectura recomendada: manejo de Adobe Photoshop.
Lecciones del tutorial:  << Inicio < Anterior lección 1 - lección 2 - lección 3 - lección 4 Siguiente >  Fin >>   Â
<< Ir al Ãndice con todas las lecciones Subir al principio de esta página >>
-