197 lines
7.1 KiB
HTML
197 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Imagenes: Color a b&w</title>
|
||
<link rel="stylesheet" href="/css/main.css">
|
||
<link rel="stylesheet" href="/css/styles.css">
|
||
|
||
|
||
</head>
|
||
<body>
|
||
<main>
|
||
|
||
<nav class="bg-gray-800 fixed w-full top-0 z-3">
|
||
<div class="mx-auto px-4">
|
||
<div class="flex items-center justify-between h-16">
|
||
<div class="flex items-center">
|
||
<a href="/" class="text-white font-bold text-xl"
|
||
>Fede Landing Site</a
|
||
>
|
||
</div>
|
||
|
||
<div class="hidden md:flex">
|
||
<a
|
||
href="/git"
|
||
target="_blank"
|
||
class="text-gray-300 hover:text-white px-3 py-2"
|
||
>Git</a
|
||
>
|
||
<a
|
||
class="text-gray-300 hover:text-white px-3 py-2 muted"
|
||
title="Under Construction 🚧👷♂️🏗️"
|
||
target="_blank"
|
||
>CV</a
|
||
>
|
||
<a
|
||
href="https://github.com/fedpo2"
|
||
target="_blank"
|
||
class="text-gray-300 hover:text-white px-3 py-2"
|
||
>GitHub</a
|
||
>
|
||
<a
|
||
href="mailto:federico.nicolas.polidoro@gmail.com"
|
||
target="_blank"
|
||
class="text-gray-300 hover:text-white px-3 py-2"
|
||
>Email</a
|
||
>
|
||
<a
|
||
href="https://www.linkedin.com/in/federico-polidoro-40137a25b/"
|
||
target="_blank"
|
||
class="text-gray-300 hover:text-white px-3 py-2"
|
||
>LinkedIn</a
|
||
>
|
||
</div>
|
||
|
||
<div class="md:hidden cursor-context-menu">
|
||
<button
|
||
onclick="toggleOffCanvas()"
|
||
class="border px-2 py-1 rounded text-white"
|
||
>
|
||
<svg
|
||
class="h-6 w-6"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M0 6h25M0 12h25M0 18h25"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
id="offCanvas"
|
||
class="fixed top-16 right-0 w-64 h-screen bg-gray-800 transform translate-x-full transition-transform duration-200 ease-in-out"
|
||
>
|
||
<div class="flex flex-col p-4">
|
||
<a
|
||
href="/git"
|
||
target="_blank"
|
||
class="text-gray-300 hover:text-white px-3 py-2"
|
||
>Git</a
|
||
>
|
||
<a
|
||
class="text-gray-300 hover:text-white px-3 py-2 muted"
|
||
title="Under Construction 🚧👷♂️🏗️"
|
||
target="_blank"
|
||
>CV</a
|
||
>
|
||
<a
|
||
href="https://github.com/fedpo2"
|
||
target="_blank"
|
||
class="text-gray-300 hover:text-white px-3 py-2"
|
||
>GitHub</a
|
||
>
|
||
<a
|
||
href="mailto:federico.nicolas.polidoro@gmail.com"
|
||
target="_blank"
|
||
class="text-gray-300 hover:text-white px-3 py-2"
|
||
>Email</a
|
||
>
|
||
<a
|
||
href="https://www.linkedin.com/in/federico-polidoro-40137a25b/"
|
||
target="_blank"
|
||
class="text-gray-300 hover:text-white px-3 py-2"
|
||
>LinkedIn</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<script>
|
||
function toggleOffCanvas() {
|
||
const offCanvas = document.getElementById("offCanvas");
|
||
offCanvas.classList.toggle("translate-x-full");
|
||
}
|
||
</script>
|
||
|
||
<div class="bg-blue-300 p-12"></div>
|
||
<div class="bg-blue-300">
|
||
<div class="bg-white rounded-md flex flex-col items-center px-2 py-6 max-w-4xl mx-auto">
|
||
|
||
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xl border-4 border-black">
|
||
|
||
<div class="bg-gray-200 text-gray-600 font-mono text-center py-16">
|
||
No image
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<h1 class="text-4xl font-bold mb-4 text-center">Imagenes: Color a b&w</h1>
|
||
|
||
|
||
<div class="text-sm text-gray-600 mb-6 font-mono flex gap-4 justify-center">
|
||
<span>Publicado el: Sep 23, 2023</span>
|
||
|
||
<div class="flex gap-2">
|
||
|
||
<span class="px-2 py-1 bg-gray-200 rounded-full">#old_blog</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="prose prose-lg max-w-none mb-12">
|
||
<h1 id="gimp">Gimp</h1>
|
||
<p>Hay varias formas de pasar una imagen a blanco y negro. yo prefiero la de usar <strong>Gimp</strong> con la opcion de <code>Color > Desaturacion > Color a gama de grises</code>. Pero voy a listar un par de métodos alternativos para obtener el ~mismo resultado.<br>
|
||
<img src="/fedecomp.png" alt="Comparación"></p>
|
||
<h1 id="imagemagick">ImageMagick</h1>
|
||
<blockquote>
|
||
<p>Es un conjunto de utilidades de código abierto para mostrar, manipular y convertir imágenes, capaz de leer y escribir más de 200 formatos.</p></blockquote>
|
||
<p>Una de esas utilidades es llamada <code>convert</code>, la cual acepta un archivo y convierte este a el formato que se le especifique. Existe una flag llamada <code>-colorspace</code> la cual si le damos el parametro <strong>Gray</strong> la imagen resultante estará representada en una gama de grises.
|
||
<img src="/fedeg.jpg" alt="Imagen en gama de grises"></p>
|
||
<h2 id="nota">Nota</h2>
|
||
<p>Tambien se puede usar la flag <code>-monocrome</code> pero esta da un resultado el cual no me termina de gustar, a continuacion doy un par de muestras de como queda,
|
||
<img src="/fedebw.jpg" alt="Imagen monocroma"></p>
|
||
<h1 id="opcion-web">Opcion web</h1>
|
||
<p>Existe <a href="https://pinetools.com/es/imagen-escala-grises">esta</a> pagina en la cual para generar la imagen en gama de grises solo hay que poner la imagen y darle a <strong>Aplicar</strong>.<br>
|
||
<img src="/gamaDeGrises.jpg" alt="Gama de grises demo"></p>
|
||
|
||
</div>
|
||
|
||
|
||
<a
|
||
href="/"
|
||
class="
|
||
inline-block mt-6
|
||
border-2 border-black bg-white px-6 py-2
|
||
shadow-[0_4px_0_black]
|
||
hover:shadow-[0_8px_0_black]
|
||
hover:-translate-y-1
|
||
transition-all duration-100 ease-linear
|
||
font-medium
|
||
"
|
||
>
|
||
← Volver
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="bg-blue-300 p-5"></div>
|
||
|
||
</main>
|
||
<br>
|
||
<footer class="text-center text-sm text-gray-500 mt-12 py-6 border-t">
|
||
© 2025 Federico Polidoro
|
||
</footer>
|
||
</body>
|
||
</html>
|