Evitar que nos copien las imagenes con Inkscape

Hace algunos meses escribí un post sobre como evitar que nos copien las imágenes (o al menos hacerlo un poco mas complicado) dividiéndolas en varias partes con Gimp, ya que en ocasiones puede resultar molesto como cuando nos copian alguna publicación de carácter comercial haciendo que esta pierda efectividad.

Esta vez el turno le toco a Inkscape, o para ser mas exacto al estándar SVG, que es el que realiza el truco ya que los archivos SVG de Inkscape y otros programas de dibujo vectorial, son en si archivos XML que contienen toda la información de la imagen y son completamente compatibles con HTML por lo que se pueden integrar directamente en el código de nuestra publicación haciendo que sea mas complicado de copiar ya que solo se podría hacer copiando la porción de código correspondiente a la imagen y guardándola como un archivo con extensión svg.

Nota: Esto solo funciona con imágenes en formato vectorial, no con cualquier imagen en JPG, PNG o GIF a menos que las vectoricemos primero.

Lo primero que debemos hacer es abrir el archivo SVG con cualquier editor de texto.

Copiamos todo el código y lo pegamos donde lo vayamos a insertar, en caso de una entrada de un blog debemos pegarlo en la vista html, si es en la sidebar lo hacemos como un elemento html, etc.

Con esto le complicaremos la vida a quienes se dedican a copiar nuestras imágenes, pero también un poco a nosotros mismos ya que para alinear o cambiar el tamaño de las imágenes necesitamos saber HTML, por lo menos lo suficiente para trabajar con tablas y contenedores.

blogger, diseño grafico libre, diseño web, inkscape 12/02/2013

Dibujar a Homero en Inkscape

Desde hace ya cierto tiempo que tenia ganas de hacer algo como esto, a decir verdad ya habia dibujado a Homero antes en Inkscape pero nunca le habia dedicado tiempo a detallar el procedimiento paso a paso y mucho a hacer un post sobre eso.

Curiosamente dibujar a los personajes de los Simpson no es muy dificil, uniendo figuras geometricas y modificandolas un poco se puede dibujar a la mayoria de ellos.

En este caso dibuje a Homero ya que es mi personaje favorito de la serie y el que le da la gracia al programa.

1. Lo primero que hacemos es dibujar algo como lo que esta a continuaciòn, es solamente un rectangulo con la forma un poco cambiada y que sera la base del dibujo.

 2. Con la herramienta de editar nodos, modificamos la figura para curvarla un poco y quedara algo parecido a esto:

 3. Ahora hacemos un circulo que sera la parte superior de la cabeza

 3. Seleccionamos, las 2 figuras y en el menu nodos o trayectos (el nombre varia dependiendo de la traducción), le damos a la opción "Union" para convertir las 2 figuras en una sola.

 4. Ahora hacemos un pequeño circulo que seria la protuberancia que tiene homero arriba de los ojos.

 5. Unimos los nodos de nuevo y hacemos lo mismo con la oreja.

 6. Hacemos el primero de los ojos de homero, ya comienza a parecerse un poco.

 7. Ahora hacemos la nariz con un circulo y un rectangulo

 8. Unimos los nodos en la nariz y ahora monemos un parche amarillo para tapar la linea recta  al final y hacemos los ojos, estos no son muy difíciles solo son un par de círculos.

 10. Ahora viene lo mas dificil de todo, hacer la boca y la barba de Homero, algunas veces la hago con un hexagono pero esta vez la hice uniendo 2 circulos.

 11. Despues de unidos los circulos modificamos un poco los nodos para terminar de darle la figura a la barba.

 12. Aquí coloco la barba en su posición ya que la había hecho por aparte.

 13. Ahora hacemos los detalles que faltan en las orejas y la boca, ya empieza a parecerse a Homero aunque ahora mismo se parece mas bien a un Homero zombie.

 14. Curvamos las lineas de la boca y de las orejas, agregamos las pupilas y los pelos.

 15. Ahora creamos el cuello de la camisa y listo ya tenemos a Homero un poco rustico pero es un buen comienzo

Aquí dejo el archivo original que hice, por si alguien quiere experimentar un poco con el.

diseño grafico libre, graficos, homero, inkscape, simpson 6/20/2013

Cortar imágenes para evitar que nos las copien con Gimp

Si hay algo muy molesto es que nos copien y se atribuyan nuestro contenido como propio, especialmente cuando se trata de publicaciones comerciales como las que se hacen en mercadolibre, es realmente molesto dedicarle tiempo a elaborar un anuncio creativo y llamativo y que llegue otro (u otros) y lo copien pues no solo se benefician a costa nuestra si no que además sucede algo que en Colombia tiene su propio nombre: "se boletea", que no es mas que hacer que nuestra publicación se desprestigie.

Por eso cualquier cosa que se pueda hacer para complicarle un poco la vida a estos personajes que se dedican a copiar y pegar compulsivamente es una obligación, especialmente si se puede hacer de forma muy sencilla.

En este caso lo que haremos es cortar una imagen y "juntar los pedazos" para que cuando este publicada parezca que es una sola imagen, esta es una técnica muy utilizada en paginas porno y otras paginas de carácter comercial, especialmente en las portadas e incluso en los logos.

1. Para hacer esto lo primero que debemos hacer es abrir la imagen con Gimp.

2. Ahora crearemos las lineas por donde se va a dividir la imagen, en este caso solamente 3, para dividir la imagen en 4 partes. Para eso vamos a imagen -  lineas de guía - nueva guía por porcentaje

Creamos 3 verticales con posiciones en 25%, 50% y 75%, después tendremos algo como esto:

3. Ahora vamos a imagen - transformar - Guillotina, esto "cortara" la imagen por las guías y abrirá cada pedazo en una ventana diferente.

 
4. Ahora viene lo engorroso, guardamos cada "pedazo" de la imagen de uno en uno, con lo que tendremos al final varias imágenes diferentes, por lo que sera conveniente ponerle nombres que indiquen la posición y sean fácil de recordar.

5. Ahora debemos subir las imágenes a donde las vayamos a alojar y las acomodamos en una tabla, echando mano de un poco de html:

<table style="text-align: left; width: 100%;" border="0"

 cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td>imagen1</td>

      <td>imagen2</td>

      <td>imagen3</td>

      <td>imagen4</td>

    </tr>

  </tbody>

</table>

Al final tendremos algo como esto:

Toca añadir:border=1 para poder notar la diferencia:

Podemos cortar las imágenes en muchas mas partes para protegerlas un poco mas, cuando hago publicaciones en sitios como mercadolibre suelo cortarlas en 10 o mas partes, si bien hay servicios online que "hacen todo el trabajo", tienen sus limitaciones al menos en cuanto al tipo de imagen, pues he probado varios y no trabajan con imágenes en PNG o las convierten en JPG antes de cortarlas, ademas de que las imágenes y el código que generan solo nos servirían en caso de subirlas por FTP, que no suele ser la mayoría de los casos, por lo que tendríamos que subirlas y crear la tabla manualmente de todos modos, aunque si usamos Kompozer o un generador de tablas online se nos hace un poco mas fácil el proceso.

blogger, diseño grafico libre, diseño web, gimp, graficos, html, proteger imágenes 6/19/2013

Logos de la Universidad del Atlántico Vectorizados

Hace algunos días, mi hermano y algunos de sus compañeros se encontraban haciendo un trabajo para la universidad pero me llamo particularmente la atención que  la elaboración de las diapositivas para hacer la sustentación, les estaba llevando mucho mas tiempo de lo normal y esto debido a que planeaban incluir en la presentación el logo de la Universidad del Atlántico, pero no encontraban en internet uno de buena calidad, todos los que encontraban eran de baja resolución y por lo general con algún color de fondo, por lo que la tarea que se tomaron de quitarles el fondo  y hacer que no se vieran tan borrosas al ampliarlas utilizando el Paint, era muy tediosa por no decir imposible y recordé que cuando estudiaba tuve el mismo problema a la hora de hacer los trabajos, a pesar de que el logo es muy simple por lo que me decidí a hacerlo en Inkscape, luego de decirle a mi hermano que lo estaba haciendo como los tontos.

Lo primero que hice son las letras comenzando por la "A", pero ¿por que de atrás para adelante? pues por que es plana tanto en la parte de arriba como en la de abajo lo que me facilita calcular el tamaño.

Primero hice un rectángulo que posteriormente se convertiría en la letra "A"

Luego con la herramienta de editar nodos muevo las esquinas hasta darle la forma que tiene la letra "A" en el Logo

Después de tener la figura exterior tengo que "recortar" una parte de abajo y otra del centro para darle la forma final

En este caso duplique el rectángulo que ya tenia y lo cambie de tamaño, luego lo puse en la parte de abajo que iba a recortar y con la herramienta de diferencia del menú trayecto hago el recorte, lo mismo hago con un triangulo en la otra parte que voy a recortar y listo ya esta terminada la "A".

Después  de esto hago otro rectángulo que es el que se convertirá el la letra "U", luego con la herramienta de editar nodos o tiradores "redondeo" un poco la parte de abajo hasta que tenga la forma de la "U"

Luego de esto le aumento un poco el tamaño para que la curva de arriba no quede en curva.

Ahora duplico la figura y la disminuyo un poco de tamaño y de grosor para hacer la parte interior de la "U" tal y como hice con la "A"

En realidad parece mas una "O" que una "U" pero ya va tomando forma, solo es cuestión de recortar la parte de arriba al ras de la letra "A" para lo que recurro a otro rectángulo

Hago el recorte y ya solo falta aplicarles el color

Aplicamos el color #4D4F53 por su nombre en html para la "U" y #0091D1 para la letra "A"

Después de esto solo falta agregar el texto, que es algo muy fácil de hacer

Y listo después de esto tendremos un logo vectorizado que no solo podemos cambiar de tamaño sin temor a que se vea borroso si no que tambien tiene fondo transparente por lo que podemos agregarlo a cualquier trabajo sin preocuparnos por el color de fondo.

Lo mismo hice con el escudo que se usaba anteriormente:

Los logos que puse en esta entrada son pequeños, casi de los mismos tamaños que se encuentran por ahí en la red por cuestiones de espacio ya que tenia problemas para agregar imágenes mas grandes de paso tambien sirven de comparación; pero si quieren descargarlos con mayor resolución para los trabajos o los archivos "fuente" en formato vectorial que se puede editar a cualquier resolución, pueden hacerlo en los siguientes enlaces:

Logo U A en alta resolución y fondo transparente - Descargar

Logo U A en formato vectorial editable - Descargar

Escudo en Alta resolución y fondo transparente - Descargar

Escudo en formato vectorial editable - Descargar

diseño grafico libre, escudo, graficos, logo antiguo, logo ua, logo universidad del atlántico, logos, logos nuevos, ua, universidad del atlántico, vectorizados 5/30/2013