Uno de los problemas que he encontrado a la hora de diseñar con CSS, es centrar las imágenes. Así es, tan simple como eso, lo que se solucionaba con un simple <center></center> en HTML, usando css no parece tan sencillo. Soluciones?

Pues existen dos soluciones posibles (a lo mejor hay más pero son las únicas que he probado)

Uno
Asignamos a la etiqueta img la propiedad de “elemento de bloque” y al “margin” el valor “auto”, de esta manera el navegador asignará margenes proporcionales al espacio donde está contenida la imagen.

img { display: block; margin: auto; }

Lamentablemente esta solución no es viable en Internet Explorer (para variar), lo cual nos fuerza a buscar otra manera de hacerlo.

Dos
Esta es la manera como vengo haciéndolo, no es la más elegante pero funciona, para eso le daremos la propiedad text:align-center al cuadro contenedor de nuestra imagen, por ejemplo:

<div style="text-align:center"><img src="http://direccion/de/la/imagen.jpg"/></div>

Con lo cual habremos centrado la imagen.

A pesar de haber logrado el objetivo, no se porqué me queda un saborcito amargo en la boca… ¿CSS no sabe centrar imágenes?

Ultimamente he encontrado en la web varias personas interesadas en vectorizar una fotografía (foto a dibujo), esto permite darle otro acabado a las imágenes. Bien, manos a la obra.

Existen varias formas de vectorizar las imágenes, la más entretenida es hacerlo manualmente haciendo trazos (paths), pero si no tenemos mucho tiempo podemos usar las bondades de algunas aplicaciones, en este caso Illustrator.

(more…)

Ultimamente estoy un poco atareado con un par de sitios pendientes, por un lado está Tecnigas, una empresa de instalación, mantenimiento y reparación de equipos a gas (cocinas, hornos, campanas, automóviles) etc.

Esta web ya está casi terminada, solo me faltan unos ajustes y la puesta on-line.

Por otro lado Perú Tours, una empresa nueva que espera ser lanzadera para empresas dedicadas especialmente al turismo en el Perú, servicio de taxis, agencias de viajes, hoteles, y un largo etcétera de servicios. Este web está en fase media, el diseño está casi terminado y se está incluyendo el Administrador de Contenidos a cargo de Gerald.

Y por último TrinyTours, una empresa de transportes que ofrece además, servicio de alquiler de camionetas 4×4 en Lima, este sitio aún está iniciándose, pero está hecha casi toda la maketación en css. Gerald se está encargando del contenido, aunque solo será una web estática con un par de formularios.

Creep – Galactic Archivement Society (Radiohead cover)

Revisando los blogs me encontré con un post (via x-blog) sobre el trabajo de Glen Feron, entonces me animé a escribir este tutorial de un truco para mejorar un poco el aspecto de algunos rostros y siempre en mi kerido photoshop.

Este truco permite realizar el cambio que presento a continuación:

(more…)

Durante el desarrollo de las columnas de un web, a veces en algunos navegadores una de las columnas se desplaza a la parte de abajo, este error es producido por un par de pixeles de ancho en alguna de las columnas, aquí hay un log de una conversa con un amigo, donde traté de explicarle como resolver este problema aplicando un hack de css (según lo que ví en la web se llama “Box Model”); puse toda la conversa para tratar de ser lo más didáctico que puedo, espero que les sirva

Los caminos de la vida… dice:
bueno mi consulta en particular era como meter ese hack q me diste la otra vez, para que el menú no se vaya para abajo
º dice:
bueno
º dice:
es sencillo mira, teóricamente en el css esto es interpretado por todos los browsers
#contenido { width:100px; }
º dice:
le dices que el ancho de la capa “contenido” es 100 pixeles, pero a veces no se ve bien en todos los browsers, entonces por ejemplo haces que esto se vea bien en Internet explorer poniendole #contenido { width:100px; } , y debajo usaremos una expresión que no es interpretada por el explorer solo por firefox (en este caso) html>body #contenido { width:105px; }
º dice:
lo pondremos asi
 
#contenido { width:100px; }
html>body #contenido{ 105 px; }
º dice:
todos los browsers interpretan la primera línea (100px) incluido el explorer, pero en la segunda línea le estás diciendo solo a firefox que corrija nuevamente el ancho de esa capa por el nuevo valor asignado (105px)
º dice:
esa segunda línea el explorer no la interpreta entonces queda bien cuadrado, y en firefox se corrije el error
º dice:
no se si me explico bien
Los caminos de la vida… dice:
a ver
Los caminos de la vida… dice:
creo q si, eso lo sustituyo en la parte donde se especifica el ancho del contenido
Los caminos de la vida… dice:
le pongo eso de
Los caminos de la vida… dice:
#contenido { width:100px; }
html>body #contenido{ 105 px; }
Los caminos de la vida… dice:
con eso le digo al firefox q lo haga un poco mas ancho de lo q es realmentre
º dice:
asi es
º dice:
pero sin borrar el anterior, solo le añades el nuevo valor debajo de lo que ya está hecho
º dice:
el que dice html>body #contenido
Los caminos de la vida… dice:
??
º dice:
es decir
º dice:
en tus hojas de estilo, ya están definidas las propiedades de los objetos
Los caminos de la vida… dice:
si
º dice:
no necesitas borrar nada, sino solo añadirle una línea donde sea necesario
º dice:
generalmente es algún ancho
º dice:
width
º dice:
hay una etiqueta que modifica las columnas de la derecha e izquierda
º dice:
en aquella debe ser
Los caminos de la vida… dice:
mmm
º dice:
a ver deja que veo
º dice:
#menu {
margin: 0;
padding: 0 0 0 5;
width: 255px;
float: left;
font-family: "Verdana Geneva Arial Helvetica sans-serif";
font-variant: normal;
font-size: 11px;
background-image: url(build/white_bar_top.jpg);
background-repeat: repeat-x;
background-position: center top;
}
º dice:
un parche podría ir ahí debajo
º dice:
ese es el menu de la izquierda
º dice:
mira ahí hay una propiedad width: 255px;
º dice:
si necesitas, puedes reducir ahi
º dice:
html>body #menu { width: 250; }
º dice:
por ejemplo
º dice:
la cantidad será cosa de que vayas probando reduciendo el número poco a poco hasta que la otra columna no se corra hacia abajo
(more…)

Una de las webs que más visito es http://www.worth1000.com un sitio lleno de imágenes que son producto de los frecuentes concursos que organizan, concursos sobre photoshop (the best). Siempre se pueden ver muy buenos trabajos, aunque mis favoritos son los que se realizan con animales (si, esperimentos con animales, pero en este caso nadie sale herido), además hay categorías de animales cyborg, y fusión de frutas y verduras, en fin, un muy diversas galerías, definitivamente un sitio para tener en cuenta, mucho más si te gusta Photoshop.

Actualmente hay una galería llamada “Chimaera 6″ y el tema es “3 bestias en una” muy recomendable, para los que como a mi, nos gusta la parte gráfica del asunto. El link del concurso es ESTE

Una vez que hayamos transferido el dibujo sobre la cartulina, procederemos a borrar con mucho cuidado, los excesos de lapiz sobre la misma; para ello usaremos el limpiatipos, el cual podemos usar de dos maneras: de forma similar a cualquier borrador, o en forma de moteado sobre la línea que deseamos borrar. La idea es que kede marcado el dibujo, pero con las líneas muy, muy tenues, casi sin línea, ya que ellas solod eben servirnos para difeenciar el área que iremos pintando con las acuarelas. Hay que tener en cuenta que, una vez pintadas con acuarelas, las líneas del lapiz son muy dificiles de borrar (casi imposibles sin raspar la cartulina). Otra cosa a tener en cuenta es que al pintar con acuarelas, las líneas del lapiz (al mojarse) se harán más notorias, por eso hay que tener especial cuidado en los rostros o en otras partes donde no se necesiten estas líneas.

Una vez limpio el dibujo, empezaremos a pintar con las acuarelas, disolver la acuarela en un poco de agua (muy poca, dependiendo la intensidad de color que se pretenda alcanzar), lo ideal es cubrir la cartulina, sin llegar a saturar demasiadod e color, ya que, el acabado final se conseguirá con los lápices de color.

Hay que combinar tratando de lograr los colores más parecido que se puedan, distinguiendo las diferentes tonalidades de cada color. Las betas (beteado) en la pintura son muy comunes, sobretodo en superficies grandes; si se desea se pueden evitar, pintando de un extremo al otro, cargar el pincel con suficiente acuarela, mientras se pinta, no se debe dejar que se seque el final de lo pintado, para esto, no se debe dejar que se seque el pincel, cargarlo nuevamente y continuar desde el sitio donde se dejó, posiblemente se pueda dar cierta inclinación al tablero, de esta manera podremos hacer que la acuarela escurra hacia abajo, al terminar de pintar el area, hay que recoger la acuarela sobrante, esto se puede hacer con un pincel seco (se puede secar el pincel rápidamente chupandolo, la acuarela no contiene plomo como las temperas). Para conseguir los brillos, que puedan existir en algunos lugares, o quitar acuarela de donde ya se haya pintado, se puede usar un pincel limpio, humedecerlo ligeramente con agua limpia, y pasarlo por el lugar donde se desea retirar un poco de pintura.

Es recomendable pintar primero los colores claros, y luego los oscuros.

No olvidar lavar bien los pinceles una vez terminado el trabajo, o antes de hacer un cambio de color.

Paranoid Android – Radiohead

Una vez que tengamos listo el dibujo sobre el papel canson (o mantekilla), procederemos a la ampliación del dibujo, para esto necesitaremos una fotocopiadora (o algún artilugio parecido), haremos ampliar la imagen hasta que alcance un tamaño ligeramente menor al de la cartulina, en algunos lugares pueden hacerlo en una sola hoja de papel (tamaño A1, o los comúnmente llamados papelógrafo), en otros casos (como me ocurrió a mi), tendrán que piezar el dibujo, y luego “armarlo” usando cinta adhesiva transparente, de manera que la imagen kede completa, y de buen tamaño.

Ahora, prepararemos la cartulina, para poder usarla con el dibujo. Lo que haremos será extender la cartulina sobre el tablero (el triplay o la tabla donde se va a realizar el trabajo) y la fijaremos al mismo colocando cinta de papel principalmente en las esquinas. Debemos tratar de que no kede aire debajo de la cartulina y que se encuentre lo mas firme posible.

Una buena forma para hacerlo sería fijar la cartulina según el orden que indica la figura, fijando primero una esquina, y luego la esquina contraria, luego las otras dos. Una vez fija al tablero, tomaremos un pincel, preferentemente grueso, y lo humedeceremos con agua (humedecer no es empapar!!!) con el pincel húmedo “pintaremos” sobre toda el área de la cartulina, tratando de que no kede lugar donde no se haya asdo el pincel. Sabemos que normalmente los papeles al contacto con el agua, tienen la tendencia de ondearse, entonces forzaremos este proceso, la cartulina se humedecerá ligeramente (muy ligeramente) y se prepare para el posterior trabajo con acuarelas. Es posible que en algunos casos sea necesario volver a fijar la cartulina al tablero, esta vez colocaremos cinta a todo el borde, para que kede completamente fijo; luego la dejaremos secar.

Mientras se produce el secado de la cartulina, iremos preparando nuestro dibujo (la fotocopia ampliada) para traspasarlo a la cartulina. Para esto tomaremos un lapiz con la punta muy suave (5b ó 6b) y empezaremos a pasarlo por la parte trasera del dibujo. Lo que haremos será cubrir todas las líneas del dibujo por detrás, para luego poder calcarlo sobre la cartulina. No usaremos papel carbón porque es muy dificil de borrar y suele ensuciar demasiado la cartulina; cubriremos bien las líneas del dibujo (puede ser en una ventana o en una mesa de luz).

También se puede volver a calcar la imagen sobre un papel mantequilla, y enmascarar con el lapiz por detras del mismo, para que resulte más facil pasarlo sobre la cartulina.

Una vez cubierto todo el dibujo (por la parte de atrás y con el lápiz 6b), fijaremos el dibujo sobre la cartulina, tratando de ubicarlo en el lugar donde deseamos que se copie la imagen, con la cara donde hemos cubierto con el lapiz en contacto con la cartulina (el lapiz para abajo). Podemos usar cinta adhesiva para fijar el dibujo, tratando de no pegar dentro de la cartulina para no dañarla.

Luego procederemos a pasar la imagen, para ello solo tenemos que pasar con algún lápicero sobre las líneas del dibujo original, y estas se irán calcando sobre la cartulina. Yo normalmente uso un lapicero de un color diferente (rojo por ejemplo) para poder darme cuenta de los lugares donde ya pasé, ya que no es nuestra intención remarcar la cartulina, sino solamente pasar la línea del lapiz, y dejar una mínima marca.

Escuchándo:
Misfits – We are 138

Lo primero que haremos, será trabajar sobre la foto “original”. Asumo que a una persona muy diestra en el dibujo, le resultará facil dibujar a escala el original sobre la cartulina, lo cual es muy válido. En mi caso, no soy tan bueno dibujando, entonces lo haremos calcando (además queda mejor).

Colocaremos el papel canson, mantekilla u otro parcialmente transparente; sobre la foto original, las fijaremos con unos clips. Es muy importante que la imagen no se mueva del original mientras dibujamos, así lograremos que la imagen sea lo más fiel que se pueda al original.

Luego, con un estilógrafo o un marcador de punta fina, empezaremos a calcar del original, encerrando en áreas los diferentes blokes de color de la imagen, por ejemplo, dentro de un área roja, puede haber 2 o 3 tonos diferentes de rojo, dibujaremos por separado cada uno de los tonos de rojo, además hay que tomar los razgos de la imagen en caso de existir rostros que es lo más dificil, tener cuidado con los labios, las sombras de la cara, todo. Cada una de las partes de la imagen tiene que estar completamente dibujada, ya que serán estos “blokes” los que luego rellenaremos con las acuarelas.

Más abajo tenemos una muestra de como va quedando el dibujo (el mio) al ser dibujado sobre el papel. Puede que se vea un poco raro pero es parte del proceso. Recordar no separar el papel donde dibujamos del original, hasta terminar con todo el dibujo.

Normalmente, facilita el trabajo realizar el calco en una ventana, o en una mesa de luz. Trataremos de captar todos los detalles. Y una vez terminado, separamos el original de nuestro dibujo. Debemos tener cuidado, no se trata solo de copiar la imagen, sino de poder captar las diferencias de color que esta posee. Chifast!

Escuchándo:
High – The cure

Ya que me animé a ocupar algo de tiempo en otras cosas fuera de la pc, se me ocurrió hacer una ilustración como las de antaño, ya que ahora es tan facil llevar una fotito y que te hagan la gigantografía, entonces durante la mañana (ayer) estuve pensando en lo que necesitaba, y en la tarde (ayer) empecé a comprar algunas cosas de las necesarias, y se me ocurrió hacer aquí una especie de “manual” por si a alguien le sirve esto.

Materiales

- Una imágen, obvio (yo usaré la foto de Radiohead que tengo aquí arriba)

- Un pliego de cartulina, yo uso canson porque no se “despelleja” cuando borro sobre ella, además tiene un lado menos liso (texturado) que es por donde “yo” trabajo, quien desee lo puede hacer por el lado liso.

- Un tablero, puede ser un pedazo de triplay (tripley) o fórmica un poco más grande que la cartulina, la idea es la de fijar la cartulina (para que no se mueva ni deforme) sobre una superficie plana, lo más lisa que se pueda.

- Papel canson o mantekilla, del tamaño de la imagen original. Con el cual se calcará el mapa de color de la imagen (esto se explicará después)

- Unos pinceles, de diferentes grosores, desde muy delgados, hasta muy gruesos, dependiendo de la forma de nuestro dibujo, si tiene muchos o pocos detalles, si son pequeñas o grandes las áreas que vamos a pintar. Preferentemente de “pelo de camello” (aunque sabemos que los hacen de pelo de ardilla), no usar esos pinceles de pelo de chancho que venden en cualquier librería, para que cuando se pinte no kede beteado (rayado) por la dureza de las cerdas de estos pinceles. De hecho que se necesitará uno muy delgado para las zonas que tienen detalles.

- Un lápiz B6, que se usará para realizar el calco.

Existen de diferentes tipos de lápices:
Los H, desde el 1h (menos duro), 2h, 3h, 4h, 5h, 6h (más duro).
El HB, este es el punto medio, ni muy duro ni muy suave.
Los B, estos son los lápices suaves desde el 1b (menos suave), 2b, 3b, 4b, 5b, 6b (mas suaves)

- Acuarelas, preferentemente aquellas que vienen en pasta (tubos como los de pasta dental, pero mucho mas pequeños y de colores =P)

- Lápices de color, aquí está el problema, los lápices de color que venden en las librerías, normalmente NO SIRVEN PARA ESTE TRABAJO, y no es nada personal, pero la punta de estos lápices (colores) es demasiado dura, y es mucho más dificil lograr que el color cubra la cartulina, tratar de buscar unos colores que tengan la punta más suave, me parece que ya no venden akellos “Colorama” que si bien no son los mejores, servían perfectamente para nuestra empresa (si se me ocurre un nombre lo pondré aquí).

- En algunos casos se necesitarán algunas temperas, sobretodo para algunos fondos, en mi caso yo usaré tempera blanca y negra, negra para el fondo (ke difuminaré) y blanca para las letras de la parte inferior.

- Masking tape, maskin teip, cinta de papel, para usos diversos.

- Limpiatipos, …limpia keeeeeeeeeee? …es una especie de goma muy flexible (parece plastilina) realmente sirve para limpiar los tipos de la mákina de escribir, pero lo usaremos como borrador, porque no daña la superficie (en este caso la cartulina) y realiza un borrado muy suave, posiblemente necesitaremos tb un borrador “blanco”.

- Cinta scotch, aquí si me cagaron, no se como se escribe (cinta adhesiva transparente), esto se usará para enmascarar partes de la imagen al momento de pintar el fondo.

- Posiblemente 1 pliego de papel mantekilla para efectos del enmascarado (no se usa en todos los casos).

- Cutter (cuchilla para cortar), lapicero, clips.

Editado:
- Necesitamos también un estilografo con tinta china, o un marcador de punta fina que se le parezca, no se si el “finepen” puede cumplir esta misión.

- Una fotocopiadora que haga ampliaciones (operador incluido), o en su defecto algúna librería que pueda hacernos el servicio de fotocopiado (no es necesario que sea propio, solo se usará una vez).

- Buena música, Inca kola, café, cigarrillos, buen humor, paciencia, dedicación, y otros, a efecto de realizar el trabajo mucho más agradable.

- Ahh, lo olvidaba, un cerebro promedio.

Me parece que tenemos todo, si durante el proceso necesito algo más, lo iré añadiendo a la lista de materiales. Manos a la obra…