Archive for month: December, 2009

Como hacer una paleta de colores

Categories: Diseño, photoshop - Tags:

Para poder diseñar un banner, una página web o cualquier otro trabajo podemos hacer una paleta de colores de forma intuitiva o podríamos hacer una paleta basados en armonías de color (complementario, cuadra, triada…).

Sin embargo es posible hacer que nuestra paleta creada de forma intuitiva sea aún más armoniosa de forma rápida usando Photoshop

Creando la armonía

Probemos combinando algunos colores
paleta inicial photoshop

Hasta ahi puede funcionar pero vamos a mejorarla y crear una paleta que represente el otoño para ello agregamos una capa pintada de rojo, fijamos la opacidad a 40% y el modo de fusión “color”, con ello obtendremos algo así:
paleta photoshop optimizada
Podríamos usar cualquier otro color en vez de rojo y así obtener colores afines a este nuevo color, si tenemos el color del logo podríamos usar este para crear colores afines.
Ahora falta conseguir los tonos claros y oscuros para ello voy a crear dos rectangulos sobre la paleta que hemos obtenido uno negro y el otro blanco y como fusión de capa a ambos “soft light”(luz suave)
paleta otoño photoshop

AJAX ocultar mostrar secciones de nuestro sitio

Categories: Otros - Tags: , ,

En este tutorial explicaré como hacer aparecer secciones de un formulario o cualquier otro elemento de nuestro sitio usando jquery, yo lo suelo usar cuando tengo un formulario de búsqueda y deseo mostrar opciones de búsqueda avanzada por ejemplo o también es posible usarlo a modo de acordeón

Ocultar un elemento

Si bien es cierto que podemos ocultar un elemento cualquiera lo mejor es colocar un div que agrupe el elemento o elementos que deseamos ocultar si es un formulario y estas basado en una estructura de OL/UL y LI le asignamos u ID a es LI que deseamos ocultar, nuestro código sería algo así:

1
2
3
4
5
<div id="paraocultar">
<p>Aqui el texto o elementos del formulario que se ocultarán</p>
</div>
<p>Para ocultar podemos usar link o un boton</p>
<a id="oculta">Click para ocultarlo</a>

Nuestro código jquery para detectar que se ha hecho click sería:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    estado=0;                          
    $("#oculta").click(function () {
       if(estado==0) {
         $('#paraocultar').slideUp('fast');
         estado=1;
      } else {
         $('#paraocultar').slideDown('fast');
         estado=0;
      }
    });
});

//////// Actualización ///////
He modificado el script para funcionar con múltiples elementos, pueden ver el ejemplo aqui

Download - Jquery ocultar mostrar secciones
Demo

Jquery music player

Categories: AJAX, javascript - Tags: ,

Este es un muy interesante plugin para jquery que nos permite reproducir música usando HTML y Flash muy fácil de implementar y lo más importante es que es muy liviano además de personalizable usando CSS.


Veamos algunas de sus características

  • Permite reproducir y controlar archivos de música (incluso listas de reproducción)
  • 100% personalizable usando HTML y CSS
  • Rápido stream
  • Soporta MP3 y OGG

Pueden descargarlo AQUI

Thumbnails/miniaturas en zencart

Categories: Otros, zencart - Tags:

Cuando trabajamos con Zencart este no genera thumbnails de los productos lo que nos ocasiona dos problemas:
– La carga de nuestro sitio es muy lenta que las imágenes suelen ser muy pesadas
– Las imágenes reducidas que muestra zencart lucen pixeladas y por lo tanto el resultado es poco profesional

Hay un pequeño plugin que además de solucionar estos dos problemas nos ofrece algunas funciones adicionales como son:
– Agregar sellos de agua a nuestras imágenes
– Coloca una vista previa agrandada de la imagen cuando pasamos el mouse por encima
– Permite fácilmente manejar múltiples imágenes por productos

Lo mejor de todo es que es gratuito, lo podemos descargar AQUI

Para instalarlo debemos descomprimir el archivo y modificar dentro de la carpeta includes/templates el nombre de la carpeta que contiene el template con el de nuestra carpeta, luego subimos todos los archivos al servidor y lo activamos desde la administración tools/Image Handler 2

Crear gif animados Photoshop CS4

Categories: Diseño, photoshop - Tags: ,

Antes existía el Image Ready que permitía crear GIF animados pero con CS4 la cosa ha cambiado y ahora se pueden crear animaciones más complicadas, personalmente creo que sólo debe usarse en animaciones simples, para lograr un buen efecto mejor es incrustar un Flash que dará un archivo menos pesado y un efecto más logrado.


Via STR0NGBACKER