CREAR EL LOGO PARA QUASAR, CON ADOBE PHOTOSHOP

    Había quedado en la lección anterior en que explicaría la forma de crear nuestro logo para colocar en la cabecera del template Quasar, con Adobe Photoshop CS3 (si no dispones de Fireworks CS3 que es preferible). Supongo que tienes algo de experiencia en el manejo de Photoshop, aunque de no ser así creo que con las explicaciones que te doy en esta lección no tendrás problemas para llevar a cabo la tarea sin problemas.

    Te dije en las lecciones anteriores que tenías que descargar dos archivos necesarios para Quasar, y uno de ellos es el llamado "quasar-sources.zip" el cual debes descomprimir y ofrecerá entre otros el archivo "logo-source.png" que será el que tenemos que abrir con Photoshop:

    Fíjate que el archivo de imagen, tiene unas medidas de 350 x 100 px. así que ya dentro de Photoshop, ahora además de tener abierto este archivo como dije, tenemos que crear uno nuevo con las mismas medidas de 300 x 100:

    Picamos para ello en "Archivo > Nuevo" y nos aparecerá este cuadro de diálogo:

    Fíjate en que en "Contenido de fondo" debes colocar Transparente, y el resto de parámetros como te indico en la imagen de arriba. Picamos ahora sobre OK:

    Con la herramienta "Selección rápida" (que te indico en la imagen), pico sobre el triangulito rojo de la imagen original para que quede seleccionado (verás que queda rodeado por unas líneas cortas que parecer girar alrededor del triángulo rojo), ahora:

    Se trata de seleccionar un color picando sobre el cuadrado de "Configurar color frontal" (elijo un verde como ves); acto seguido picamos sobre el cubo "Herramienta bote de pintura" y picamos dentro del triangulito rojo que teníamos seleccionado. Pasará dicho triángulo a coger el verde seleccionado.

    Ahora nuevamente elegimos la "Herramienta selección rápida" y hacemos clic dentro de cada uno de los 3 triángulos (ver imagen de arriba) para que queden seleccionados. Ahora debemos "Copiar" esa selección mediante "Control + C" y acto seguido:

    Elegimos la "Herramienta marco rectangular" (ver imagen de arriba) y seleccionamos en la nueva imagen el lugar donde queremos colocar la selección (procura que sea más o menos en el mismo sitio que la imagen original). Procedemos a "Pegar" (mediante "Control + V") la selección que habíamos hecho. Ahora hay que escribir el texto del logo:

    Para ello hay que primeramente tomar la "Herramienta cuentagotas" y con ella colocarnos encima de una letra del logo original para tomas el color; se abre el "Selector de color" (ver imagen de arriba) y picaremos sobre OK aceptando el color que propone. Será el gris del texto original. Ahora:

    Es obvio: picamos sobre la "Herramienta texto horizontal" y elegimos una fuente arriba (yo elijo Forte) y un tamaño de fuente (elijo 48 pt) para finalmente picar dentro de la imagen (lugar aproximado donde queremos que se coloque el texto) y escribir el texto que queremos para nuestro logo. Procura que no sea muy largo para que las letras queden bastante grandes.
    Con esto queda listo el texto principal; si además queremos colocar el texto secundario --el que aparece en rojo y más pequeño debajo--, no hay problema, creamos nueva capa picando en la esquina inferior derecha sobre el icono que te muestro:

    Y ahora los pasos son los que expliqué más arriba: seleccionar la herramienta texto, elegir un color para el mismo (rojo), colocarnos en el lugar donde queremos que aparezca y elegir la fuente (en este caso elijo Arial) y el tamaño (12 pt) y escribimos el texto:

    Dejamos listo así nuestro logo; sólo queda guardarlo y para ello picamos arriba en el menú, en "Archivo > Guardar como..." y le indicamos que queremos guardarlo como un ".png" además de indicarle la carpeta y el nombre que queremos darle:

    Queda así listo como puedes observar:

    Y si queremos verlo, podemos abrirlo por ejemplo con Paint y este será su aspecto:

    ¡¡ Perfecto !!, es un logo que sustituirá sin problemas al original del template Quasar de Joomla 1.5 y que si quieres que sea el que instales en tu web, será sumamente sencillo el cambio sin más que seguir las instrucciones que te dí en la lección anterior (subirlo por FTP a tu servidor y colocarlo en la carpeta correspondiente, sustituyendo el original por este --por supuesto cambiando nombre del original y poniéndoselo al nuestro--; así de sencillo.
    Espero que esta lección te haya resultado útil. Seguiremos en la próxima viendo más sobre el template Quasar, pues queda aún algo que explicar...

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