z diseño: marzo 2009

lunes, 23 de marzo de 2009

Zdzislaw Beksinski y su paseo por el infierno


Zdzisław Beksiński: (1929-2005). Su obra surrealista es una visión apocalíptica que nos trae una mirada descarnada sobre los profundos infiernos interiores.

Es considerado uno de los principales artistas contemporáneos polacos. Después de estudiar arquitectura comenzó a interesarse por la fotografía, la escultura y la pintura.

Una mañana, Bekzinski fue arrollado por un tren. Estuvo varias semanas en coma y tras una milagrosa recuperación, recreó en una serie de pinturas sus experiencias en el infierno que había visitado durante su estado de coma. Según lo describió, un mundo desolado de sombras, soledad y absoluto silencio en el que era continuamente perseguido por monstruosos cazadores acompañados de esqueléticos animales como sabuesos. Luego de esta tremenda experiencia ya no soportaría el silencio, que lo aterra, por lo que continuamente necesita escuchar música clásica mientras pinta.







En 1977, quemó en su jardín una selección de sus trabajos, sin dejar ninguna documentación sobre ellos. Explicó que eran "demasiado personales" y no quería que otros lo vieran.

leer más

A finales de los 90 descubrió los ordenadores, internet y la fotografía digital y fue pionero en arte digital.
En febrero del 2005 le encontraron muerto en su casa con 17 puñaladas en su cuerpo.

La obra que comparto con ustedes en este post fue producida por Zdzislaw Beksinski en las décadas de los 70 y los 80, llamada por el mismo "Etapa Fantástica", les dejo acá el link a su sitio oficial: http://www.beksinski.pl















Soy fanático del cine de terror, ciencia ficción y los efectos especiales, en 2005 mientras veía la película Constantine (con Keanu Reeves y Rachel Weisz) y quedé maravillado al ver los infiernos de Beksinski en movimiento (que reconocí inmediatamente) realizados con unos Fx espectaculares, la descepción y lo vergonzoso fue que en ningún momento, ni en los extras del dvd, ni en ninguna de las notas que le hicieron al equipo de fx de la película, (al menos a las que yo tuve acceso) mencionaran siquiera a Beksinski en quien se habian "inspirado" de una manera taaaan notoria, por lo que se ha transformado en un literal afano...

Vean y saquen sus conclusiones:















sábado, 21 de marzo de 2009

Mark Ryden

Quiero compartir con ustedes la inquietante obra de este surrealista contemporáneo norteamericano.
Técnicamente impecable, su obra evoca un viaje des
de la "ingenuidad" de Alicia en el País de la Maravillas a la más perturbadora pesadilla de Bosch y nos sumerge en un mundo donde la inocencia infantil nos invita a una cruel fantasía de oscuros e intrigantes juegos.

Los dejo a solas con su obra:














leer más





















No dejen de visitar su sitio: www.markryden.com

viernes, 20 de marzo de 2009

programar entradas en Blogger


Blogger nos permite programar entradas para que se publiquen automáticamente cuando nosotros lo deseemos.

1- Creamos nuestra entrada como siempre, pero no hacemos click en publicar todavía.

2- Primero expandimos Opciones de entrada (abajo a la izquierda en Creación de entradas) y en fecha y hora de
entrada modificamos los valores por los de la fecha y hora en que quieras que se publique el post por ejemplo este post se publicó el 20 de marzo de 2009 a las 11:00 mientras yo estoy de una playa en Mar de las Pampas. :P



en tu Escritorio --> Editar entradas verás que figura como Programado.

miércoles, 18 de marzo de 2009

crear paleta de colores a partir de una imagen


Encontré esta herramienta online gratuita, que me parece bastante útil, es para generar paletas de colores a partir de una imagen, además de los colores que reconoce en la imagen, genera también una gama de colores claros, medios y oscuros.

si bien en Photoshop hay maneras de genera paletas de colores a partir de imágenes (en la red
encontrarán diversos tutoriales que lo hacen mediante algún artilugio con filtros como: Filtro --> Textura --> Vidriera o con la opción Save For Web --> guardar como gif y guardarlo como Tabla de colores (color table) genera un archivo .act que luego puedes cargar con Cargar Tabla de colores (Load Color Table) cuando lo necesites).

Sin embargo este sitio nos permite hacerlo de manera mucho más sencilla e intuitiva, y luego salvar la paleta como estilo CSS (.css) o como paleta de colores de Photoshop (.aco) que luego colocamos en la carpeta Adobe Photoshop CS4 --> Presets --> Color Swatches y podemos abrirla desde la ventana Muestras como cualquier otra paleta.

Pruebenlo, es interesante acá les dejo el link:
http://www.cssdrive.com/imagepalette/

miércoles, 11 de marzo de 2009

memorias - óleo





memorias
Pintura - Oleo sobre tela - 20 x 30 cm

Safe Creative #0903102721630

el viejo - bolígrafo





el viejo
ilustración - bolígrafo sobre papel shoeller 300g - 30 x 60 cm

Safe Creative #0903112728940

lunes, 9 de marzo de 2009

dos - acrílico





Dos
Pintura - acrílico sobre tela - 50 x 60 cm



Safe Creative #0903092721078

el hacedor de silencios - óleo





El hacedor de silencios
Pintura - Oleo sobre tela - 30 x 45 cm


Safe Creative #0903102721616

atardecer en kgnar - óleo




Atardecer en Kgnar
Pintura - Oleo sobre tela - 30 x 40 cm



Safe Creative #0903102721579

domingo, 8 de marzo de 2009

mujeres, imagenes vectoriales




imagen vectorial mujerimagen vectorial mujer

Ilustraciones vectoriales realizadas con adobe illustrator CS4.


recursos útiles para tu blog


Tal vez me desvie un poco de la intención inicial de este blog, pero me parece una buena idea compartir con ustedes la información que he recolectado (y usado) en estos días sobre herramientas y recursos para personalizar nuestros blogs y tratar de mejorar la experiencia de nuestros lectores.

Hay mucha información, muy interesante y útil dando vueltas por ahí; mucha gente que dedica una buena parte de su tiempo para compartir soluciones a nuestras dudas y necesidades, a ellos mi agradecimiento, de a poco los iré incluyendo en la sección de links.

Les dejo entonces, en esta primer entrada, una serie de enlaces que me resultaron sumamente útiles para poner en funcionamiento este blog:

Cómo activar elementos de página bloqueados en Blogger

Cómo crear descargas directas desde Blogger usando Skidrive

Cómo hacer un backup de tu blog (Blogger)

Qué es RSS

Escribir código en Blogger

Crear botón para imprimir

En post siguientes describiré de manera más detallada mi experiencia en la aplicación de otros recursos para blogs, gracias.

uso de favicon en Blogger

Favicon (del ingles 'Favorites Icon') es una pequeña imagen asociada con un sitio web, esta imagen o icono se muestra en los navegadores junto a la dirección de un sitio web y que sirve para que sus visitantes puedan identificarlos de forma visual, rápidamente.


Se puede crea un favicon con diversas aplicaciones (pagas o gratuitas) o medianteservicios online en los que puedes generarlo sin tener que instalar nada en tu maquina:

FavIcon from Pics
Favicon Generator
Getfavicon
Favicon Editor
Favicon.cc

Una vez generado el archivo en formato .ico lo subimos a un servidor que admita este tipo de archivo, yo estoy usando para estas cosas SkyDrive y debo admitir con sorpresa que me ha resultado muy útil ya que podemos cargar en la carpeta pública prácticamente cualquier formato, (.css, ,.js, .ico, etc).

leer más

BLOGGER:

para los blogs creados en Blogger, vamos a Plantilla ---> Edición HTML y buscamos en el título del blog, la línea de código:
<title><data:blog.pagetitle><title>

y colocamos justo antes de ella el siguiente código:
<link href='url de tu favicon' rel='shortcut icon' type='image/x-icon'/>
<link href='url de tu favicon' rel='icon' type='image/x-icon'/>

Con esto todo debería funcionar ok, si no te aparece inmediatamente puedes probar borrando el cache del navegador o esperar a que este se resetee sólo luego de un tiemo; ten en cuenta también que algunas versiones de navegadores pueden no mostrar los favicons.
Por otro lado he leído comentarios de algunos usuarios a los que les ha desaparecido su favicon y ha sido reemplazado nuevamente por el de blogger, acá les dejo el link de un blog muy interesante El escaparate der Rosa con un par de soluciones a este problema en el post: favicon desaparecido, además de mucha información útil para personalizar tu blog.

WORDPRESS:
Para Wordpress puedes usar el plugin Blog Icons que te permitirá configurar de manera sencilla los favicons para tu blog mediiante un panel de configuración bastante sencillo e intuitivo.

HTML:
para insertar tu favicon en un sitio web es necesario una línea de código en el header de nuestro HTML:
<link rel="shortcut icon" href="http://tuweb.com/favicon.ico" />

Como pueden ver es bastante sencillo añadir este elemento de personalización a sus blogs o webs.



sábado, 7 de marzo de 2009

leer más en Blogger (expandir y contraer)

Hay varias métodos para crear un expandir y contraer elementos (ver y ocultar), por ejemplo para generar un "leer más" en entradas extensas con mucho texto o imagenes, pero sus posibles aplicaciones son muchas.

Yo utilizo uno que encontré en Vagabundia (estupendo blog con muchísima información útil para mejorar nuestros blogs) en este link puede ver el post original de donde saque el código, para JMiur son entonces los créditos por este código y nuestro agradecimiento.
Acá simplemente transcribo el código de JMiur y les cuento mi experiencia paso a paso por si les resulta útil:

leer más

PASOS:
Como siempre lo primero es salvar nuestra plantilla en Ir a Diseño ----> Edición de HTML y hacer click en Descargar plantilla completa para poder restaurarla si algo sale mal.

Siguiendo en Edición de HTML, en el encabezado del blog, o sea antes de la etiqueta </head> insertamos el siguiente código:

<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Y listo, guardamos...
Ahora vamos a la entrada en la que queremos esconder una parte para que se despliegue al hacer click en "leer más", seleccionamos la solapa Edición de HTML de la entrada y en el lugar en que queremos hacer el corte, incluímos el código:

<a onclick="return verocultar(this);" href="javascript:void(0);">leer más</a><div style="display: none;">

Al final de la entrada agregamos una etiqueta </div> para cerrar todo.

Quedaría así:



........Contenido visible...........
<a onclick="return verocultar(this);" href="javascript:void(0);">leer más</a><div style="display: none;">
........Contenido a ocultar........
</div>


ACLARACION:
Todos los cambios de edición que desees hacer en la parte de contenido a ocultar, si lo vas a hacer desde la pestaña Redactar de la entrada, (como poner texto en bold, cambiar colores, incluir imágenes , etc...) es preferible hacerlo antes de incluír los códigos de "leer más" ya que después de hacerlo en Redactar sólo verás el contenido hasta "leer más".

FIRMA:
Para colocar una firma que quede visible después de el contenido a ocultar debes incluir su código después de la etiqueta que incluímos en el paso anterior. (si la colocas antes del quedará oculta con el resto del contenido.)
ejemplo de firma:

<div style="text-align: right;"><span style="color: rgb(102, 102, 102);" >TU FIRMA</span></div>

Todo terminado quedaría así:

........Contenido visible...........
<a onclick="return verocultar(this);" href="javascript:void(0);">leer más</a><div style="display: none;">
........Contenido a ocultar........
</div>
<div style="text-align: right;"><span style="color: rgb(102, 102, 102);" >TU FIRMA</span></div>

y se vería:

........Contenido visible...........
leer más
TU FIRMA

y al desplegarlo

........Contenido visible...........
leer más
........Contenido oculto...........
TU FIRMA

Espero les haya resultado claro, cualquier duda.. escriban!
Saludos


cómo hacer una nube de etiquetas animada para Blogger


Blogumus
es una nube de etiquetas animada en flash con un efecto de rotación en 3D, originalmente desarrollada por Roy Tank para Wordpress.org que ha sido adap
tada para Blogger por Amanda de Blogger Buster.

Yo hice numerosas pruebas de varios tutoriales (en los que debía incluir el código sin expandir la plantilla de artilugios) y a pesar de que a otros parecía funcionarles yo sólo conseguía un áre
a blanca en en el lugar en que se instalaba el gadget en la sidebar...


Finalmente lo que funcionó en mi caso fue lo siguiente: este código lo encontré en Blogeriana y de allí lo transcribo, mi agradecimiento para Alessandra a quien corresponden los créditos de este post.

leer más

PASOS:
PRIMERO HACER UNA COPIA DE SEGURIDAD DE TU PLANTILLA:
Ir a Diseño ----> Edición de HTML y hacer click en Descargar plantilla completa. y salvarla en tu computadora para poder restaurarla si algo sale mal. Es importantísimo que hagas esto cada vez que vallas a meter mano en la plantilla, no lo olvides.

en Diseño ----> Elementos de página
borrar el gadget Etiquetas si ya lo tenías instalado (a mi al menos hasta que no lo borré me salia un error diciendo que no se podia repetir el Label99.. etc, etc... y no me permitía salvar correctamente la plantillla)

Ir a Diseño ----> Edición de HTML y Expandir plantilla de artilugios, y buscar esta línea de código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Justo debajo de esta línea pegar el siguiente código:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


PERSONALIZAR:
Los elementos a modificar están establecidos en este código en los siguientes valores:
- Ancho: 240
- Altura: 300
- Color de fondo: ffffff (blanco)
- Color de fuente: 333333 (gris)
(en 0x333333 no borres el 0x, sólo reemplaza los valores numéricos 333333 por los que vos quieras)
- Tamaño de fuente: 12

Ubicalos en el código y reemplazalos por los de tu preferencia, una vez cambiados le das Vista Previa y si esta todo ok y Guardar Plantilla.

NOTA:
Es necesario que tengas ya creadas 2 o más etiqueta en tus entradas.

Espero les sirva, saludos.


traductor para blog


al momento de elegir un traductor para mi blog, primero probé el beta que provee google en su sección herramientas que es bastante eficiente.

http://translate.google.com/translate_tools

para instalarlo en Diseño ----> Elementos de página, añadimos un gadget HTML/Javascript y en el pegamos la siguiente linea de código:

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=es&w=160&h=60&title=&border=&output=js"></script>

pero como buscaba algo visualmente más limpio la solución vino una vez más del blog el escaparate de rosa al propuesto por rosa en este post: traductor del escaparate le quite la parte de código que incluye la imagen de las banderitas y cambie los textos para que cada usuario lea en su propio idioma las opciones de traducción.

Quedando el código así que debemos pegar en el gadget HTML/Javascript:


<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>spanish - english
<option value="FR"/>espagnol - français
<option value="DE"/>spanisch - Deutsch
<option value="IT"/>spagnolo - italiano
<option value="PT"/>espanhol - Português
<option value="RU"/>испанский - pусский
</select>
<input value="http://zdesign-arg.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 60px;" value="Traducir" type="submit"/>
</form>


modificando el valor de width: 60px: podemos modificar el ancho de la caja
en font-size: 70%: podemos definir el tamaño del texto
puedes reemplazar Traducir por qualquier texto que desees, pero no borres las "".

viernes, 6 de marzo de 2009

cómo hacer una precarga para Blogger


A veces los blogs tienen demasiados widgets, imagenes y elementos y tarda mucho en cargar, este código mostrará un "loader" o "cargador" hasta que todo el blog se haya cargado completamente.

cargando blog...

PASOS:
Lo primero que haremos es HACER UNA COPIA DE SEGURIDAD DE TU PLANTILLA:
Ir a Diseño ----> Edición de HTML y hacer click en Descargar plantilla completa para poder restaurarla si algo sale mal.

leer más

luego buscamos </head> y justo antes colocamos el siguiente codigo:

<!-- Inicia Precargador -->
<script type='text/javascript'>
window.onload = precargar;
function precargar() {
document.getElementById("imgLOAD").style.display="none";
}
</script>
<!-- Finaliza Precargador-->

Guardamos la plantilla y pasamos a l siguiente paso.

Vamos a crear una imagen para nuestro cargador, para ello hay varios sitios que generan animaciones .gif que nos serán utiles en las que puedes el tipo, color y color de fondo del cargador, por elemplo:

http://loadinfo.net/
http://www.ajaxload.info/

una vez que descargamos el .gif en nuestra computadora, lo subimos a a algún servidor por ejemplo, skydrive, picasa o photobucket, y obtenemos ahi la url de la imagen que luego usaremos en el siguiente paso.

volvemos a nuestro blog, en Diseño ----> Elementos de página, añadimos un gadget HTML/Javascript y en el pegamos la siguiente linea de código:

<div id="imgLOAD" style="text-align:center;">Cargando<img src="url de la imagen"/></div>

reemplazamos -url de la imagen- (dejando las comillas) por la dirección de la imagen que usaremos como cargador, podemos cambiar la palabra -Cargando- por la que querramos, guardamos y listo.

estadísticas en tu blog

Hay muchos servicios online que ofrecen sistemas de estadísticas para nuestros blogs, yo opte por el servicio gratuito (al menos hasta ahora) de www.histats.com.

Estoy bastante conforme con él, si bien los contaores no tienen un diseño muy estilizado que digamos, algunos son aceptables; esta traducido al español, muestra información útil al momento de evaluar como evoluciona el tráfico de nuestro blog y por sobre todo no utiliza anuncios ocultos con molestas ventanas emergentes como otros de estos servicios gratuitos que llenan de banners forzados, tampoco parece instalar spyware ni nada perjudicial.

Lo más probable que haya servicios mejores, si encuentran algo mejor, avisen!

miércoles, 4 de marzo de 2009

inicio



En realidad más que un blog, esto es un pequeño laboratorio de ilustración donde publicar mis bocetos, pruebas de técnicas y experimentos varios y compartir cualquier información relacionada con el arte, la ilustración y el diseño que se me cruce en el camino y resulte interesante.


A los que lo lean, un abrazo y gracias por su tiempo.