“Mis” cosas en photoshop

Como muchas veces hago, cuando estoy aburrido (o cuando ya no tengo ganas de estudiar) me pongo a googlear mis propias imágenes viejas hechas en Photoshop en internet, y lo que encontré esta vez, me rompió las pelotas.
Suele pasar que muchas veces usan mis imágenes acá y allá, pero esto fue demasiado, un pendejo, un tal Gabriel Koszko, no solo usó mis imágenes, si no que se manda la parte de haberlas hecho él, y hasta inventa que cosas editó (cosas que se equivoca, ya que ni sabe como eran las fotos originales).

Su post en donde sube “sus imágenes”:

http://www.taringa.net/posts/arte/5366587/Mis-Cosas-En-Photoshop.html

Un post viejo que hice en psicofx de donde las debe haber robado, ya que ni cambia el orden de las imágenes:

http://www.psicofxp.com/forums/grafica.543/925787-mis-cosas-en-photoshop.html

(pueden ver que ni se tomó el trabajo de borrar las firmas de las imágenes firmadas)

Y buscando encontré su perfil de Facebook, acá pueden ver:

https://www.facebook.com/Jodaanootdead

a) Es un pendejo.
b) Aparte de pendejo, es un pelotudo, se puede ver claramente en su cara.
c) Creo que las dos anteriores son más que suficientes.

Así que bueno, si alguno quiere mandarle un mensaje puteandolo, mandarle virus, nukes, o sicarios, puede hacerlo.

PD: Por suerte despues de varias quejas, mails y llenar formularios, la gente de Taringa borro el post (aunque me parece un “castigo” muy liviano por un tema de violación de derechos de autor).

Menu en HTML y CSS3

Estaba aburrido y despues de un tiempo me puse a practicar algo de HTML y CSS, y se me ocurrió hacer unos ejemplos de menues usando solo HTML y CSS3, sin usar jQuery, Flash o nada de eso.

Les dejo los ejemplos de un menu horizontal y uno vertical, y sus respectivos códigos.

Ya saben, cualquier pregunta, pueden dejar un comentario y en seguida se los contestaré.

 

Resultado.

Código.

HTML

<ul id=”menu”>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
</ul>

<ul id=”menu2″>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
</ul>

CSS

*{
border:0;
padding:0;
margin:0;
}

#menu{
background-color:#0CC;
width:70px;
height:22px;
transition-property:height;
transition-duration:1s;
text-align:center;
list-style:none;
position:absolute;
top:100px;
left:100px;
color:#FFF;
}

#menu:hover{
height:105px;
}

#menu a:link{
color:#FFF;
text-decoration:none;
}

#menu a:visited{
color:#FFF;
text-decoration:none;
}

#menu2{
background-color:#0CC;
width:70px;
height:22px;
transition-property:width;
transition-duration:1s;
text-align:center;
list-style:none;
position:relative;
top:200px;
left:200px;
color:#FFF;
}

#menu2 a:link{
color:#FFF;
text-decoration:none;
}

#menu2 a:visited{
color:#FFF;
text-decoration:none;
}

#menu2 li{
display:inline;
}

#menu2:hover{
width:300px;
}

#menu2:hover li{
padding-left:10px;
}

seo

8 recomendaciones sobre SEO

seo

Buscando en la web encontré algunas recomendaciones para mejorar el SEO de tu sitio web. Para algunos quizás sean algo básicas, pero para los que recien se meten en el tema son bastante interesantes.

1.- Utiliza guiones “-” para separar las palabras clave dentro de la URL de tus páginas web. En la medida de lo posible utiliza URLs cortas pero que a su vez sean descriptivas.

2.- Inserta palabras clave dentro del contenido del sitio, pero hazlo de manera inteligente. Usar palabras clave en exceso puede traer consecuencias adversas. Debes respetar la naturaleza del texto, el mismo debe ser fácil de leer y entender, no incluyas palabras clave de manera forzada. Dicho de otra forma, escribe para los humanos no para los motores de búsqueda.

3.- Incluye palabras clave dentro de la meta-etiqueta description, aunque esto no afecta directamente el ranking de tu sitio en los motores de búsqueda, sí ayuda a atraer más clics desde la página de resultados.

4.- Resalta en negritas las palabras clave dentro del contenido del sitio, esto ayuda a que los usuarios centren su atención en las palabras de más relevancia y contribuye de manera importante en la optimización del SEO.

5.- Rellena los atributos alt y title de las imágenes de tu sitio utilizando palabras clave, esto ayudará a que el buscador las indexe. Esto es mucho más importante si utilizamos imágenes que funcionan como enlaces.

6.- Como decía al principio, el truco está en saber como usar nuestras palabras clave. La posición en la que se incluyan tendrá un impacto importante en el SEO de la página. De manera más clara, las palabras clave que se incluyen en la parte superior de la página son mejor valoradas por los rastreadores y por lo tanto ofrecen mejores resultados.

7.- Los encabezados h1, h2 y h3 son extremadamente importantes para el SEO, incluye palabras clave en ellos. No todos tienen el mismo impacto, pero es necesario tenerlos en cuenta por igual. El más importante, evidentemente, es h1.

8.- Agrega información al atributo title de los enlaces, esto no solo ayuda al SEO sino que también mejora la accesibilidad del sitio.

Visto en bitelia

adobe edge web fonts 1

Adobe Edge Web Fonts

Algunos conocerán Google Web Fonts, bueno, los que no, les explico:

Sabrán que en diseño web no hay una extensa galería de tipografías a nuestra disposición, ahí es donde entran las “web fonts”, galerias alojadas online, que nos agrandan enormemente las opciones en cuanto a tipografía, sin la necesidad de tener tipografias instaladas en la máquina o conformarse con las tipografias web “standard”.

Pero bueno, como les decia, está el viejo y conocido Google Web Fonts, y ahora Adobe lanza su versión, el Adobe Edge Web Fonts, el cual posee cientos de tipografias listas para usar en nuestras webs.

Su uso es muy simple, solo tienen que seleccionar una tipografía, si quieren probar como se veria, y bueno, algo de conocimientos sobre HTML y CSS para aplicar en nuestra web, y listo, sea donde sea que se visualice nuestra web, tendrá las tipografias que nosotros elegimos.

Links:

Poné tus archivos .png a dieta

imagen de TinyPNG

Hace un rato me encontré esta herramienta y la verdad que parece bastante útil, que es lo que hace?

Seguramente muchas veces a la hora de diseñar un sitio entraron en la duda si usar imágenes en formato .jpg o .png, lamentablemente estas últimas, suelen hacer al sitio pesado, y por lo tanto hace que tarde más en cargar, bueno, ahí es cuando entra TinyPNG.

En esta herramienta se cargan los archivos en formato .png de 24 bits, y esta se encarga de hacer que pesen menos, sin perder demasiada calidad, lo mejor de dos mundos, gran calidad, y muy poco peso.

Pruébenlo y vean como sus archivos pesan hasta un 70% menos.

TinyPNG

Máscara con degradado radial

Hace ya un tiempo que quiero escribir este post, y por una cosa u otra, tengo que posponerlo.

El tema es así, en una conversación nombré una “máscara con degradado radial” y se me quedaron mirando como si estuviese loco, así que en ese momento pensé en escribir un pequeño tutorial.

Pero primero, a definir:

Una mascara es una capa, que se pone encima de otra, para ocultar alguna parte, y mostrar otra. La diferencia a usar el borrador es que, el borrador elimina los pixeles de la imagen mientras la mascara solo los oculta.

Un degradado es una “fusión gradual de colores”, qué significa esto? es rellenar un objeto con un efecto que va de un color a otro (o varios más) gradualmente.

Y bueno, con radial nos referimos a la dirección que toma el degradado, si es lineal va a ser de un punto a otro, y si es radial el degradé va a ir desde el centro hacia afuera.

Ahora, a la práctica:

Voy a explicarlo con un ejemplo muy simple, y en pocos pasos. Con lo que podria servir, por ejemplo, para hacer el fondo de un sitio web.

Paso 1.

Seleccioné un color negro de fondo (es el color que se va a translucir) y coloco la imagen que voy a enmascarar.

Paso 2.

En el menu de capas, creo la capa de mascara. Y esa capa, la relleno con el degradado radial (recuerden que las máscaras solo aceptan el color blanco, que es lo que deja ver, y el negro, que es lo que oculta).

Paso3.

Admiren su trabajo terminado 😛

Propiedad transition en CSS

Hoy estuve practicando algo de CSS, más precisamente algo de CSS3, y como hace rato que no posteo nada en el blog, se me ocurrió compartir este pequeño ejercicio que hice.

Obviamente en la imagen no se aprecia el efecto ya que es una transición, así que tendran que verlo en sus exploradores para verlo en acción. No esperen la gran cosa, es solo un ejemplo básico de lo que se puede lograr con CSS3.

El código es 100% mio, tanto el html como el css, pero si quieren usarlo o pedir ayuda con el suyo, solo tienen que dejarme un comentario e intentaré ayudarlos.

Pueden verlo on-line acá: http://result.dabblet.com/gist/3367128/129dbda1e7c4c2da047ad275b4e37ce7b696408a

ahí tambien tienen el código HTML y CSS, si no, se los dejo directamente acá en el cuerpo del post.

PS: Como obviamente muchos ya deben saber, este efecto no funciona en el maldito IE.

HTML

<body>

<div id=”texto”>
<span class=”an”>an</span>
<span class=”attemp”>attempt</span>
<span class=”to”>to</span>
<span class=”play”>play</span>
<span class=”with”>with</span>
<span class=”colours”>colours</span>
</div>

</body>

CSS

body{
background-color:#000;
font-family:Arial, Helvetica, sans-serif;
font-weight:800;
width:100%;
}

#texto{
width:33.3%;
margin:auto;
text-align:center;
color:#FFF;
text-transform:uppercase;
font-size:5em;
}

.an{
display:block;
transition:color 1s;
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}

.an:hover{
color:#00aeef;
}

.attempt{
display:block;
transition:color 1s;
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}

.attempt:hover{
color:#ec008c;fff200
}

.to{
display:block;
transition:color 1s;
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}

.to:hover{
color:#fff200;43ea09
}

.play{
display:block;
transition:color 1s;
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}

.play:hover{
color:#43ea09;0968ea
}

.with{
display:block;
transition:color 1s;
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}

.with:hover{
color:#0968ea;9309ea
}

.colours{
display:block;
transition:color 1s;
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}

.colours:hover{
color:#9309ea;
}

EDIT: no se por que cuando copié el código lo hizo mal, ahora lo arreglé, tanto en la previsualización, como en el código que postee acá.

Guide Guide

Si hay algo que me molestaba hacer en Diseño es el tema de marcar las guias para las columnas de un sitio o cualquier composición. Pero buscando en internet encontré un plugin para Photoshop que hace todo este trabajo por nosotros automáticamente.

imagen de guide-guide

Guide-Guide

Dentro de las opciones podemos encontrar todo, cantidad de columnas, filas, espacio entre filas, todo lo que necesitamos para dejar nuestras guias exactamente como las queremos.

Tengan cuidado al momento de descargarlo y fijense que versión de photoshop es la que tienen.

Cromática: Contraste

Bueno, ya habiendo promocionado Introducción al Diseño (si, si, felicitenme :P) les posteo esto que seguramente les ayude a muchos, por mi parte me ayudó mucho a entender mejor los distintos contrastes que existen.

El contraste entre elementos es un aspecto importante a la hora de crear una composición gráfica, una de las formas más efectivas de conseguirlo es mediante el color.

El contraste es considerado como la contraposición o diferencia notable que existe entre personas o cosas, entre dos elementos. En la disciplina del diseño el contraste podría definirse entonces, como un fenómeno visual mediante el cual se pueden diferenciar colores según diversas características.

Cuando dos colores diferentes entran en contacto directo, el contraste intensifica las diferencias entre ambos. El contraste aumenta cuanto mayor sea el grado de diferencia y mayor sea el grado de contacto, llegando a su máximo contraste cuando un color está rodeado por otro.

El efecto de contraste es recíproco, ya que afecta a los dos colores que intervienen. Todos los colores de una composición sufren la influencia de los colores con los que entran en contacto.

Dentro de los tipos de contraste podemos señalar los siguientes:

Contraste del color en sí mismo:  También conocido como contraste de tono, consiste en combinar colores puros netamente diferenciados, bastante alejados en el círculo cromático entre si. El contraste más potente es cuando se utilizan colores  primarios, y va disminuyendo su intensidad al utilizar colores secundarios, terciarios, etc. Puede intensificarse separando los colores por blancos y negros, ya que se enfatizan sus características.

Contraste de luminosidad o claro-oscuro: Se produce al confrontar un color claro o saturado con blanco y un color oscuro o saturado de negro. Es uno de los más efectivos, siendo muy recomendable para contenidos textuales, que deben destacar con claridad sobre el fondo.  La mayor expresión de contraste claro-oscuro es la compuesta por  blanco y negro.

Contraste por temperatura: Este contraste se genera a través de la confrontación de colores cálidos y fríos. Presenta cierta subjetividad, ya que la temperatura de un color puede ser modificada por los matices que le rodean. Por ejemplo, un amarillo puede ser cálido con respecto a un azul y frío con respecto a un rojo, a su vez podría percibirse más cálido al rodearse de colores fríos, y menos cálido rodeado de rojo, naranje, etc.

Contraste por complementariedad: Los colores complementarios ya fueron mencionados en las armonías del color, ya que es una excepción que aplica en ambas formas compositivas. Dos colores complementarios son los que ofrecen juntos mejores posibilidades de contraste, aunque resultan muy violentos visualmente combinar dos colores complementarios intensos. Para lograr armonía y contraste al unísono, conviene emplear un color puro con otro que esté modulado con blanco o negro.

Contraste simultáneo: Es el fenómeno según el cual nuestro ojo, para un color dado, exige simultáneamente el color complementario, y si no le es dado lo produce él mismo. El color complementario engendrado en el ojo del espectador es posible verlo, pero no existe en la realidad. Es debido a un proceso fisiológico de corrección en el órgano de la vista.

Contraste cualitativo: Viene dado por la composición de colores de un mismo tono con diferentes grados de saturación e igual brillo. Es efectivo sobre todo cuando el color inicial es muy puro.

Contraste cuantitativo: En una composición con alto predominio de un color, se incluye una pequeña porción del espacio de otro color bastante diferente del principal, preferiblemente su complementario. El contraste se genera acentuando la contraposición de lo grande y lo pequeño. Frecuentemente es utilizado por los fotógrafos para dar mayor interés a sus imágenes.

Visto en Color