{"id":2329,"date":"2021-10-15T10:00:07","date_gmt":"2021-10-15T08:00:07","guid":{"rendered":"http:\/\/quadern-tpi.recursos.uoc.edu\/?page_id=2329"},"modified":"2021-12-20T02:11:39","modified_gmt":"2021-12-20T00:11:39","slug":"4-5-5-ejercicio-6-collage-fotografico-y-efectos-digitales-generativos","status":"publish","type":"page","link":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/4-5-5-ejercicio-6-collage-fotografico-y-efectos-digitales-generativos\/","title":{"rendered":"4.5.5. Ejercicio 6: <em>collage<\/em> fotogr\u00e1fico y efectos digitales generativos"},"content":{"rendered":"<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1905 aligncenter\" src=\"\/wp-content\/uploads\/2021\/09\/banner-1.png\" alt=\"\" width=\"761\" height=\"386\" srcset=\"\/wp-content\/uploads\/2021\/09\/banner-1.png 761w, \/wp-content\/uploads\/2021\/09\/banner-1-300x152.png 300w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/p>\n<p>Este ejercicio propone trabajar con fotograf\u00edas, combin\u00e1ndolas en forma de <em>collage <\/em>digital, trabajando con los efectos gr\u00e1ficos del men\u00fa \u00abApariencia\u00bb y jugando con la aleatoriedad.<\/p>\n<p>En este ejemplo guiado trabajaremos con nueve fotograf\u00edas de retratos de Vel\u00e1zquez. Empezaremos modificando las dimensiones del escenario en Snap!, haci\u00e9ndolo de 850 x 500 p\u00edxeles. Vamos a poner todas las fotograf\u00edas como vestidos de un personaje, habi\u00e9ndolas redimensionado previamente para que coincidan con la altura del escenario: 500 p\u00edxeles.<\/p>\n<p>Comenzaremos con un programa muy simple, que estampa al personaje en tres posiciones aleatorias del escenario, eligiendo un vestido aleatorio cada vez que estampemos.<\/p>\n<p><img loading=\"lazy\" class=\"wp-image-2332 size-full alignnone\" src=\"\/wp-content\/uploads\/2021\/10\/Script01_es-1.png\" alt=\"\" width=\"406\" height=\"389\" srcset=\"\/wp-content\/uploads\/2021\/10\/Script01_es-1.png 406w, \/wp-content\/uploads\/2021\/10\/Script01_es-1-300x287.png 300w\" sizes=\"(max-width: 406px) 100vw, 406px\" \/><\/p>\n<p>Con esto conseguiremos resultados de este estilo:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1907 size-medium\" src=\"\/wp-content\/uploads\/2021\/09\/exemple1-300x176.png\" alt=\"\" width=\"300\" height=\"176\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple1-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple1-768x452.png 768w, \/wp-content\/uploads\/2021\/09\/exemple1.png 850w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><img loading=\"lazy\" class=\"alignnone wp-image-1909 size-medium\" src=\"\/wp-content\/uploads\/2021\/09\/exemple2-300x176.png\" alt=\"\" width=\"300\" height=\"176\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple2-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple2-768x452.png 768w, \/wp-content\/uploads\/2021\/09\/exemple2.png 850w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1911 size-medium\" src=\"\/wp-content\/uploads\/2021\/09\/exemple3-300x176.png\" alt=\"\" width=\"300\" height=\"176\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple3-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple3-768x452.png 768w, \/wp-content\/uploads\/2021\/09\/exemple3.png 850w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><img loading=\"lazy\" class=\"alignnone wp-image-1913 size-medium\" src=\"\/wp-content\/uploads\/2021\/09\/exemple4-300x176.png\" alt=\"\" width=\"300\" height=\"176\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple4-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple4-768x452.png 768w, \/wp-content\/uploads\/2021\/09\/exemple4.png 850w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>A partir de ah\u00ed, podemos comenzar a jugar con efectos gr\u00e1ficos. En este ejemplo comenzaremos explorando los efectos de transparencia y de color, utilizando valores aleatorios pero dentro de unos m\u00e1rgenes, para armonizar las gamas crom\u00e1ticas de las tres im\u00e1genes.<\/p>\n<p>Para ello, debemos a\u00f1adir estas dos instrucciones antes de cada una de las tres estampaciones, y jugar con sus par\u00e1metros para conseguir el efecto que buscamos.<\/p>\n<p><img loading=\"lazy\" class=\"wp-image-2334 size-full alignnone\" src=\"\/wp-content\/uploads\/2021\/10\/Script02_es-2.png\" alt=\"\" width=\"448\" height=\"63\" srcset=\"\/wp-content\/uploads\/2021\/10\/Script02_es-2.png 448w, \/wp-content\/uploads\/2021\/10\/Script02_es-2-300x42.png 300w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><\/p>\n<p>Al hacerlo, obtendremos efectos como este:<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-1915\" src=\"\/wp-content\/uploads\/2021\/09\/exemple5-300x176.png\" alt=\"\" width=\"300\" height=\"176\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple5-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple5-768x452.png 768w, \/wp-content\/uploads\/2021\/09\/exemple5.png 850w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><img loading=\"lazy\" class=\"alignnone size-medium wp-image-1917\" src=\"\/wp-content\/uploads\/2021\/09\/exemple6-300x176.png\" alt=\"\" width=\"300\" height=\"176\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple6-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple6-768x452.png 768w, \/wp-content\/uploads\/2021\/09\/exemple6.png 850w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Una vez llegados a este punto, podemos agregar elementos extras, probar nuevos efectos gr\u00e1ficos, etc.<\/p>\n<p>En este ejemplo, dibujaremos una l\u00ednea horizontal para romper la verticalidad de todos los dem\u00e1s elementos. Lo haremos moviendo al personaje a un punto aleatorio del escenario. Una vez situados, observaremos la tonalidad, la saturaci\u00f3n y el brillo de ese punto. Con estos tres elementos configuraremos el color de la l\u00ednea que dibujaremos. Para dibujarla, tenemos que movernos al borde izquierdo del escenario, a una altura aleatoria, y luego bajar el l\u00e1piz y movernos hacia el extremo derecho. Tambi\u00e9n habremos elegido un grosor aleatorio para el l\u00e1piz.<\/p>\n<p><img loading=\"lazy\" class=\"wp-image-2336 size-full alignnone\" src=\"\/wp-content\/uploads\/2021\/10\/Script03_es-2.png\" alt=\"\" width=\"456\" height=\"289\" srcset=\"\/wp-content\/uploads\/2021\/10\/Script03_es-2.png 456w, \/wp-content\/uploads\/2021\/10\/Script03_es-2-300x190.png 300w\" sizes=\"(max-width: 456px) 100vw, 456px\" \/><\/p>\n<p>Adem\u00e1s, en una de las fotos que estampemos, jugaremos con el efecto remolino. Tambi\u00e9n podemos probar los efectos: ojo de pez, pixelar, mosaico o negativo.<\/p>\n<p><img loading=\"lazy\" class=\"wp-image-2338 size-full alignnone\" src=\"\/wp-content\/uploads\/2021\/10\/Script04_es-2.png\" alt=\"\" width=\"224\" height=\"31\" \/><\/p>\n<p>Terminaremos jugando con la rotaci\u00f3n de algunas o todas las fotos que estampemos.<\/p>\n<p>Debemos tener en cuenta que en este tipo de proyectos, si nos centramos en el proceso que seguimos para generar la imagen final que nos guste (repetir ejecuciones, jugar con los par\u00e1metros, etc.), e incluimos este proceso en la obra final, es posible que estemos creando arte procesual.<\/p>\n<p>Proponemos experimentar haciendo <em>collages <\/em>digitales y explorar los efectos gr\u00e1ficos que ofrece Snap!. Podr\u00edamos a\u00f1adir iteraciones, o agregar movimiento a la obra (trabajando con clones que se desplacen, en lugar de estampar un solo personaje), o interacciones (que las fotos se estampen en los puntos donde el usuario hace clic), etc.<\/p>\n<p><a href=\"https:\/\/snap.berkeley.edu\/snap\/snap.html#present:Username=uoc_tpi&amp;ProjectName=Vel%C3%A1zquez%20generative%20collage\" target=\"_blank\" rel=\"noopener noreferrer\">Aqu\u00ed tenemos el c\u00f3digo enter<\/a><u>o<\/u> del ejemplo que hemos seguido y, a continuaci\u00f3n, algunas muestras de resultados del programa.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1919\" src=\"\/wp-content\/uploads\/2021\/09\/exemple7.png\" alt=\"\" width=\"600\" height=\"353\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple7.png 850w, \/wp-content\/uploads\/2021\/09\/exemple7-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple7-768x452.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1921\" src=\"\/wp-content\/uploads\/2021\/09\/exemple8.png\" alt=\"\" width=\"600\" height=\"353\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple8.png 850w, \/wp-content\/uploads\/2021\/09\/exemple8-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple8-768x452.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1923\" src=\"\/wp-content\/uploads\/2021\/09\/exemple9.png\" alt=\"\" width=\"600\" height=\"353\" srcset=\"\/wp-content\/uploads\/2021\/09\/exemple9.png 850w, \/wp-content\/uploads\/2021\/09\/exemple9-300x176.png 300w, \/wp-content\/uploads\/2021\/09\/exemple9-768x452.png 768w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este ejercicio propone trabajar con fotograf\u00edas, combin\u00e1ndolas en forma de collage digital, trabajando con los efectos gr\u00e1ficos del men\u00fa \u00abApariencia\u00bb y jugando con la aleatoriedad. En este ejemplo guiado trabajaremos con nueve fotograf\u00edas de retratos de Vel\u00e1zquez. Empezaremos modificando las dimensiones del escenario en Snap!, haci\u00e9ndolo de 850 x 500 p\u00edxeles. Vamos a poner todas [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2329"}],"collection":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=2329"}],"version-history":[{"count":5,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2329\/revisions"}],"predecessor-version":[{"id":2637,"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/2329\/revisions\/2637"}],"wp:attachment":[{"href":"http:\/\/quadern-tpi.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=2329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}