¿CÓMO CAMBIAMOS EL LOGO DEL TEMPLATE POR EL NUESTRO?

    Es lógico que si te has decidido a descargarte este buen template Quasar para tu web, una de las primeras cosas que quieras hacer es el cambiar el logo "quasar" que aparece en la parte superior por el tuyo propio, de forma que tengas un cambio similar a este:

  >>

    Para realizar este cambio, deberás tener un poco de idea sobre el manejo de algún programa editor de imágenes (por ejemplo: Photoshop) con el que no tienes más que crearte una según te explicaré en otra lección próximamente que será la que coloques en tu cabecera de la web. Pero la mejor forma para que todo sea perfecto, es usar el programa "Adobe Fireworks CS3 ", ya que la imagen original que tenemos que modificar en este caso, se trata de un archivo de imagen ".png"

CÓMO CREARTE TU PROPIO LOGO CON: ADOBE FIREWORKS CS3

    Lo primero que debes hacer --bueno, que habrás hecho ya, puesto que lo recomendaba en la primera lección de este manual--, es descargarte el archivo quasar-sources.zip que debes tener guardado en una carpeta. ¿Aún no lo descargaste?, pues te recuerdo que puedes hacerlo desde esta página (está abajo del todo).

    Ahora descomprímelo y obtendrás:

    Existe una carpeta (fonts) y tres archivos; a nosotros el que nos interesa es el que te indico en la imagen ( logo-source.png ). Picamos sobre él con botón secundario del ratón:

    Y lo abrimos con Adobe Fireworks CS3 que nos aparecerá como opción (siempre que lo tengamos instalado en nuestro equipo, claro):

    Nos hará esta pregunta y debemos indicarle que queremos "Reemplazar fuentes", apareciendo ahora:

    Se trata de usar la fuente propia del template Quasar (Danube), así que picamos sobre "Aceptar". De esta forma ya tendremos en pantalla la imagen del logo abierta. Ahora tenemos que ir arriba a la derecha donde tenemos este apartado:

    Se trata de ir a la pestaña "Fotogramas" y ahí elegir el estilo que queremos en nuestra web; ya sabes que hay 6 distintos (ver lección primera de este manual). En el ejemplo como viste, yo elegí el estilo 1 así que pico sobre él (ver imagen de arriba) para activarlo. Ahora vamos a la pestaña "Capas":

     >>>      

    Picamos sobre el ojo situado a la izquierda de "Capa de Web" para que desaparzca (ver segunda imagen de arriba). Ahora ya podemos hacer doble clic sobre la imagen:

    ** También podremos quitar la leyenda inferior si queremos (como en mi caso del ejemplo) picando sobre ella y botón "Supr" de tu teclado:

    Teniendo ahora el texto "quasar" seleccionado como te indiqué más arriba, vamos abajo a la izquierda y colocamos:

    Finalmente, escribimos el texto para nuestro logo (lógicamente no debe ser muy largo, ya que al adaptarlo al limitado espacio de la imagen, quedaría muy pequeño). En mi ejemplo tecleo:

    Hecho esto, tengo que ir abajo para adaptar el ancho (70%) y a continuación activo el ojo en "Capa de Web":

    Finalmente, ahora hacemos un solo clic sobre la imagen para que se ponga en verde, de esta forma:

    Picamos sobre "Exportar división seleccionada..." y procedemos a guardar el nuevo archivo con un nombre ( por ejemplo: logo-sourceMIO.png ). ¡¡ No machaques nunca el archivo original dándole el mismo nombre "logo-source.png" !!:

    >> Quedan aún algunas operaciones para finalizar, pero de momento no quiero hacer esta lección excesivamente larga; así que termino este tema en la siguiente lección, en la que te enseñaré además a crear el logo para tu web, pero esta vez usando Adobe Photoshop CS3 (por si no dispones de Fireworks CS3.

QUASAR TEMPLATE: [ 1. Template interesante ] [ 2. Librería Gantry ] [ 3. Logo con Fireworks CS3 ] [ 4. Logo con Photoshop CS3 ] [ 5. Los menús ]