Grafismo

Iconos gratuitos para tu web

ByLuis October 4, 2006

Una colecciÃ³n de iconos para nuestra web, sencillos, pequeÃ±os y muy claros. Su uso es gratuito si no incluyes mÃ¡s de 10 iconos en tu web, en otro caso deberÃamos pagar una licencia de 30$.

Organizado por diferentes categorÃas: tipos de fichero, web, blogs y CMS, usuarios y comercio electrÃ³nico. Nos puede ayudar mucho, nos ahorrarÃ¡ mucho trabajo y le darÃ¡ un buen toque de diseÃ±o a nuestro sitio.
De paso, visitando el sitio y el blog del autor de los iconos, os recomiendo que os pasÃ©is por su galeria de cliparts vectoriales, su tutorial de cÃ³mo vectorizar una fotografÃa o cÃ³mo crear un fondo abstracto.

Apache | Grafismo | How to

Protege tus imágenes con Apache

ByLuis March 31, 2006

Una de las cosas más molestas con las que te puedes encontrar al mantener un sitio, es ver cómo tus imágenes estan siendo utilizadas en otros sitios que las enlazan directamente a tu servidor, esto es molesto por dos motivos, evidentemente el uso de material gráfico de tu propiedad sin tu consentimiento, y la carga extra que sufre la conexión de tu página.
Para los que usamos Apache existe una fácil solución combinándolo con mod_rewrite, el método se basa en crear un fichero .htaccess que contenga una serie de reglas, que literalmente le indicarán al servidor que las imágenes solo se mostrarán si la petición viene del dominio propio.
Las reglas a añadir son las siguientes. Solo tendrás que sustituir el texto example.com por el nombre de tu dominio:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example.com/?.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]

Grafismo | How to | Javascript | Laboratorio | PHP

Laboratorio: Recorta imágenes dinámicamente con PHP y HTML

ByLuis April 11, 2006

En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.

Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.

Firefox | Grafismo | Safari

Elemento CANVAS en HTML

ByLuis March 16, 2006

CANVAS es un elemento no estándar que permite dibujar gráficos directamente sobre el HTML. Inicialmente lo implementó Apple para Safari, pero ahora es WHATWG quien se encarga de su estandarización.

Al no ser un estándar, se han levantado voces en contra de ello, sobre todo existiendo el SVG que realizaría la misma función. La cuestión sobre cual es más correcto, si el SVG o CANVAS, es algo de lo que ya se ha tratado y aunque en ambos casos se puede hacer lo mismo, parece que el SVG gana por ser un estándar y sobre todo cuando se quiere que haya interacción con el usuario, aunque CANVAS sea más útil a la hora de dibujar.

Más información

Ejemplos

css | Grafismo | XHTML

Recursos para crear bordes redondeados

ByLuis March 30, 2006

Para aquellos que quieran usar bordes redondeados y no se vean capaces de hacerlo, pueden usar varias herramientas.

Una de ellas, es Nifty Corners Cube. Sólo se necesita importar un script, importar una hoja de estilos y realizar una llamada Javascript.

Otra opción, quizá más sencilla y que nos gusta especialmente, es el generador de cajas de bordes redondeados de los catalanes de Neurotic Web. Solo tienes que elegir los colores y te genera automáticamente el código CSS y XHTML. Después subes las imágenes a tu servidor cuidando que la ruta del código de las imágenes en la CSS coincida y listo.

Y por último, Spiffy Corners, el más reciente en aparecer. Otro generador que te lo da todo con la novedad de que no incluye javascript ni imágenes para los bordes redondeados.

Para conocer otras opciones, un post a estas alturas ya muy leído pero que quizá no conozcas: CSS Rounded Corners ‘Roundup’.

Grafismo

Colors on the Web: ayuda para diseñadores

ByLuis September 25, 2006

Visitando una entrada de Vecindad GrÃ¡fica, he encontrado una pÃ¡gina que nos puede ser muy Ãºtil a los que diseÃ±amos sin llegar a ser grandes diseÃ±adores. Se trata de Colors on the Web, una pÃ¡gina centrada en los colores y el diseÃ±o web. En ella encontraremos informaciÃ³n sobre los colores (colores primarios, saturaciÃ³n, …), el significado de los colores (por ahora solo el rojo), el uso de colores en la web, combinaciÃ³n de colores (rueda de colores, colores anÃ¡logos, …) y tres utilidades bastante interesantes: un selector de colores similar a las que ya existen, una rueda de color que selecciona aleatoriamente colores y nos muestra sus resultados en un diseÃ±o y una colecciÃ³n de esquemas organizada por categorÃas.
Colors on the Web
VÃa / Vecindad GrÃ¡fica

Grafismo

Encontrar un color para el diseño

ByLuis July 25, 2006

Al menos a mÃ me ocurre que cuando estoy empezando con un diseÃ±o, y tengo que basarme en una imagen, me paso bastante tiempo buscando los colores que vayan con la imagen. Normalmente uso un editor de imÃ¡genes, realizo la pixelaciÃ³n de la imagen y voy buscando que los colores sean representativos. Esto puede ser sencillo con esta rÃ¡pida y cÃ³moda aplicaciÃ³n on line, que nos permite enviar una imagen, seleccionar el tamaÃ±o de los cuadrados de la pixelaciÃ³n y ver quÃ© cÃ³digos tienen los colores. TambiÃ©n se podrÃa usar la entrada que explicamos sobre fondo de pantalla calculado de una imagen, pero esta opciÃ³n nos permite optar a varios colores.

Color Palette Generator
VÃa / Maestros del Web

Similar Posts

Más información

Ejemplos