Css Listamatic

Css Uberlinks

Trabajando en Photoshop a menudo nos encontramos con el problema del idioma, algunos de los comandos y las opciones no tienen una traducción digamos “literal”, esto dificulta un poco el trabajo con Photoshop, en esos casos podemos recurrir a estas listas de comandos traducidos que nos ayudan para salir del apuro fácilmente:

INGLES ———– ESPAÑOL

Normal———— Normal
Dissolve———– Disolver
Darken———— Oscurecer
Multiply———— Multiplicar
Color Burn——– Subexponer color
Linear Burn——- Subexposición lineal
Lighten———— Aclarar
Screen————- Trama
Color Dodge——- Sobreexponer color
Linear Dodge—– Sobreexposición lineal
Overlay———– Superponer
Soft Light——— Luz Suave
Hard Light——– Luez fuerte
Vivid Light——– Luz intensa
Linear light——– Luz lineal
Pin Light———– Luz focal
Difference——– Diferencia
Exclusion———- Exclusión
Hue—————- Tono
Saturation———- Saturación
Color————— Color
Luminosity——— Luminosidad

Me encargué de crear un archivo pdf para poder descargar toda la lista en un solo archivo:

Descarga Pdf

Fuentes:
Foro Creativo, Solo Photoshop,Canal Photoshop

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