Colorear imágenes con Inteligencia Artificial

Cada día se ve con más claridad que la Inteligencia Artificial acabara presente en todos los ámbitos de nuestra vida. Es la nueva era de la industrialización.

La Inteligencia Artificial ya esta a nuestro alrededor, aunque no nos demos cuenta. Móviles, ordenadores, televisores o vehículos ya la utilizan, y cada vez más dispositivos se sumaran a esta nueva realidad.

Hace unos días Adobe presento el nuevo Photoshop, el cual ya incorpora un buen número de herramientas que hacen uso de la Inteligencia Artificial para el diseño y modificación de fotografías.

Esta misma semana Tesla, el fabricante número uno en vehículos eléctricos, a empezado a distribuir una versión beta de su famoso Autopilot, de momento solo para unos pocos usuarios, que llevara a esta marca a ser la primera en la conducción autónoma.

Todos los procesos ya comienzan a girar en torno a la Inteligencia Artificial, y la fotografía y su manipulación no podían quedar al margen.

Aunque es cierto que ya prácticamente no se imprimen en papel las fotografías, aun contamos en nuestros hogares con muchas de ellas en este formato. Incluso, en muchos casos, ya han sido digitalizadas y se encuentran en formato digital.

Imagen original, en blanco y negro, de la entrada del blog.

Hasta ahora, colorear una fotografía, requeria de un complejo proceso, y sobre todo, conocer bien los colores y herramientas que aplicábamos en tales procesos. Con la Inteligencia Artificial, el proceso de colorear una imagen se realiza de forma automática y en solo unos segundos.

Si tu intención es colorear esas viejas fotografías puedes utilizar el sitio web deepai.org. Tan solo tienes que seleccionar la imagen a colorear, el proceso es totalmente automático y gratuito, en unos segundos tendrás tu imagen coloreada.

Imagen original en blanco y negro.

Resultado al ser coloreada por la Inteligencia Artificial.

Puede que aun el resultado no sea del todo perfecto, pero en muy poco tiempo estas técnicas serán perfeccionadas cada vez más, logrando resultados aun más espectaculares.

Share

Photopea el Photoshop gratuito basado en web

Puede, no lo se, que Photoshop no sea el mejor programa de edición y modificación de imágenes, pero sin ninguna duda es el más popular, conocido y utilizado en todo el mundo.

Photopea es una utilidad web muy similar a Photoshop. De hecho, utiliza las mismas teclas rápidas que podemos utilizar en Photoshop para realizar las diferentes tareas. Si ya has utilizado Photoshop con anterioridad, no te costará nada desenvolverte en Photopea.

Como hemos dicho, Photopea es una aplicación web, la puedes utilizar desde tu navegador favorito. Este es el enlace a Photopea.

Puede que Photopea no sea un Photoshop completo, pero para la mayoría de usuarios, las herramientas que nos aporta esta aplicación web son más que suficientes para realizar las tareas habituales.

Con Photopea podrás seguir cualquier curso de Photoshop, y realizar esos pequeños retoques en tus fotografías, realizar practicas, ejercicios o cualquier otra actividad que necesites.

Una herramienta versátil, que no requiere de instalación en nuestro ordenador, no ocupa espacio en tu disco duro, se puede utilizar en cualquier ordenador, cómodamente desde tu navegador web favorito, alli donde te encuentres, y sorprendentemente, de momento, es gratuita.

Por defecto, la interfaz de Photopea, viene en ingles, pero si para ti esto es un problema, puedes cambiar la configuración del idioma a más de 30 lenguas diferentes, incluyendo el castellano (español).

Al seleccionar un proyecto nuevo, tienes multiples plantillas ya rediseñadas para realizar tus tareas. De tantas plantillas que hay, existe un buscador para que te resulte más fácil encontrar una que se adapte a la tarea que necesitas realizar.

También te permite seleccionar una gran variedad de tamaños recopilados en varios grupos; social, impresión, foto, pantalla, móvil, anuncios o iconos. Todos ellos disponibles con un solo click de ratón.

Photoshop, sin ninguna duda es una gran aplicación para crear y retocar imágenes, pero Photopea no se queda atrás, parece verdaderamente un clon de Photoshop.

Share

Personaliza tu Apple Watch con estas aplicaciones

Es evidente que ha la inmensa mayoría de las personas les gusta imprimir un diseño personal a su imagen. La forma de vestir o de peinarse refleja nuestra personalidad, nos diferencia del resto de humanos. No es de extrañar que también queramos llevar esta personalización a otros objetos que se han hecho cotidianos en nuestro entorno. Personalizar relojes y teléfonos inteligentes esta cada vez más en uso.

La última versión de watchOS, la versión 7, trae una importante característica que nos permite personalizar, aunque de forma limitada, las carátulas de nuestro reloj.

Una mejora que ha vuelto locos a muchos de los propietarios de este icónico reloj de Apple.

Por este motivo están apareciendo aplicaciones que comparten el diseño realizado por otros usuarios, para que cualquiera de nosotros personalicemos con estas esferas nuestro Apple Watch. Una analogía a nuestra forma de vestir, pero aquí vestimos a nuestro dispositivo, con las imágenes, formas y colores que nos sean más atractivos.

Una de estas aplicaciones es WatchFacely

Esta aplicación nos permite ver y descargar los diseños realizados por otros usuarios. Podemos realizar busquedas por usuario, tags, o ver los más populares, los añadidos recientemente o las colecciones. También podemos guardar nuestros favoritos para tenerlos siempre a mano.

Una vez seleccionada la esfera que nos gusta tan solo tendremos que pulsar en el botón “add Apple Watch Face“. Esta acción nos lleva a la aplicación “Watch“. Para añadir la esfera a nuestra colección pulsamos en “Añadir a mis esferas“, y ya estará disponible en nuestro reloj.

Esta nueva esfera la podemos personalizar aun más a nuestro gusto, cambiando colores, posiciones y complicaciones, desde la propia aplicación Watch.

Otra interesante aplicación es BuddyWatch. Esta aplicación quizas tenga diseños más elegantes, es solo cuestión de gustos.

Su funcionamiento es similar a la aplicacción anterior, navegamos por las diferentes caratulas que nos ofrece, cuando alguna nos gusta, tan solo debemos de pulsar en el botón “Download“, y seguir los pasos igual que en la aplicación anterior.

La aplicación también nos permite guardar las mejores caratulas para tenerlas siempre a mano. La esfera también nos ofrece información de las correas que mejor conbinan con dicha esfera.

Es verdad que los diseños ofrecidos por estas aplicaciones son bastante limitados, Apple no deja libertad absoluta para el diseño de las caratulas. Todos los diseños ofrecidos estan basados en la personalización de las caratulas ya existentes, pero el ingenio humano siempre nos puede sorprender, aun existiendo muchas limitaciones, se crean diseños muy atractivos y que ha nosotros no se nos hubieran ocurrido nunca.

Share

Crear notas adhesivas con HTML y CSS

CSS dispone de increíbles posibilidades para el diseño de los proyectos en HTML, casi cualquier cosa es posible.

Con CSS puedes convertir una lista en unas bonitas notas adhesivas muy llamativas, simulando las notas reales en papel. Al pasar el cursor del ratón por una de las notas, esta, creará un efecto de zoom.

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Notas adhesivas</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" type="text/css">
    </head>


    <body>

        <div>
            <ul>
                <li>
                    <a href="#">
                    <h2>Nota #1</h2>
                    <p>Buscar cursos gratuitos de tecnologías para Inteligencia Artificial</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <h2>Nota #2</h2>
                    <p>Compar el pan para el pinic de mañana</p>
                    </a>
                </li>
            </ul>
        </div>

        <div>
            <ul>
                <li>
                    <a href="#">
                    <h2>Nota #3</h2>
                    <p>Comprobar el funcionamiento correcto del calentador de agua</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <h2>Nota #4</h2>
                    <p>Comprobar funcionamiento aplicación medición temperaturas</p>
                    </a>
                </li>
            </ul>
        </div>

    </body>

</html>

Código CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: arial, sans-serif;
    font-size: 100%;
    margin: 3em;
    background: #666;
    color: #fff;
}

h2,
p {
    font-size: 100%;
    font-weight: normal;
}

ul,
li {
    list-style: none;
}

ul {
    overflow: hidden;
    padding: 3em;
}


/* Parametros de la nota, medidas, color, etc. */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
}

ul li {
    margin: 1em;
    float: left;
}

ul li h2 {
    font-size: 140%;
    font-weight: bold;
    padding-bottom: 10px;
}

ul li p {
    font-family: "Reenie Beanie", arial, sans-serif;
    font-size: 280%;
}


/* Añade el sombreado */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
    /* Firefox */
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    /* Safari+Chrome */
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    /* Opera */
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
}


/* Inclinar las notas */

ul li a {
    -webkit-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
}


/* Inclinar notas al azar */

ul li:nth-child(even) a {
    -o-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    position: relative;
    top: 5px;
}

ul li:nth-child(3n) a {
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    position: relative;
    top: -5px;
}

ul li:nth-child(5n) a {
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    position: relative;
    top: -10px;
}


/* Añadir trancisión y colores suaves */

ul li a {
    text-decoration: none;
    color: #000;
    background: #ffc;
    display: block;
    height: 25em;
    width: 25em;
    padding: 1em;
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    -moz-transition: -moz-transform .15s linear;
    -o-transition: -o-transform .15s linear;
    -webkit-transition: -webkit-transform .15s linear;
}

ul li:nth-child(even) a {
    -o-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    position: relative;
    top: 5px;
    background: #cfc;
}

ul li:nth-child(3n) a {
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    position: relative;
    top: -5px;
    background: #ccf;
}


/* Zoom en las notas al pasar por encima */

ul li a:hover,
ul li a:focus {
    -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    position: relative;
    z-index: 5;
}
Ejemplo etiquetas adhesivas

Share

Añade un menú animado y colorido en tu pagina Web, en CSS

Es posible crear un menú animado muy vistoso para tu pagina web con un sencillo código CSS.

CSS nos permite dar formato a las paginas web, convertirlas en algo mucho más atractivo que lo que nos da el soso html. Es increíble la cantidad de posibilidades que nos ofrece CSS para crear un atractivo, colorido y dinámico menú.

Este ejemplo de menú esta diseñado para contener 5 elementos, pero fácilmente puede ser modificado, si necesitas un número de elementos mayor o menor.

Código de ejemplo html:

<nav>
    <a href="#">Inicio</a>
    <a href="#">Blog</a>
    <a href="#">Sitemap</a>
    <a href="#">Portafolio</a>
    <a href="#">Contact0</a>
    <div class="animation start-home"></div>
</nav>

Código CSS:

nav {
    margin: 27px auto 0;
    position: relative;
    width: 590px;
    height: 50px;
    background-color: #34495e;
    border-radius: 8px;
    font-size: 0;
    margin-top: 200px;
}

nav a {
    line-height: 50px;
    height: 100%;
    font-size: 15px;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    color: white;
    cursor: pointer;
}

nav .animation {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    transition: all .5s ease 0s;
    border-radius: 8px;
}

a:nth-child(1) {
    width: 100px;
}

a:nth-child(2) {
    width: 110px;
}

a:nth-child(3) {
    width: 100px;
}

a:nth-child(4) {
    width: 160px;
}

a:nth-child(5) {
    width: 120px;
}

nav .start-home,
a:nth-child(1):hover~.animation {
    width: 100px;
    left: 0;
    background-color: #1abc9c;
}

nav .start-about,
a:nth-child(2):hover~.animation {
    width: 110px;
    left: 100px;
    background-color: #e74c3c;
}

nav .start-blog,
a:nth-child(3):hover~.animation {
    width: 100px;
    left: 210px;
    background-color: #3498db;
}

nav .start-portefolio,
a:nth-child(4):hover~.animation {
    width: 160px;
    left: 310px;
    background-color: #9b59b6;
}

nav .start-contact,
a:nth-child(5):hover~.animation {
    width: 120px;
    left: 470px;
    background-color: #e67e22;
}

body {
    font-size: 12px;
    font-family: sans-serif;
    background: #2c3e50;
}

span {
    color: #2BD6B4;
}

Da un aspecto elegante a tu menú con este llamativo ejemplo en CSS.

Share