{"id":266,"date":"2013-06-11T13:59:00","date_gmt":"2013-06-11T13:59:00","guid":{"rendered":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu"},"modified":"2016-03-02T08:25:01","modified_gmt":"2016-03-02T08:25:01","slug":"como-hacer-un-banner-animado-para-tu","status":"publish","type":"post","link":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/","title":{"rendered":"C\u00f3mo hacer un banner animado para tu blog"},"content":{"rendered":"<p><b>C\u00f3mo hacer un gif animado.<\/b><br \/>\n<b><br \/><\/b><br \/>\nUn <b>banner<\/b> es una imagen que sirve para destacar o promocionar un evento, una categor\u00eda, un post o una de las secciones de tu blog.<\/p>\n<p>Un banner puede ser fijo (una sola imagen) o animado, es decir en una misma imagen o espacio aparecen varias im\u00e1genes difererentes que van cambiando de forma autom\u00e1tica, habitualmente estos banners que se mueven est\u00e1n hechos con gifs animados.<\/p>\n<div style=\"text-align: center;\">\n<b>Ejemplo banner fijo:<\/b><\/div>\n<div style=\"text-align: center;\">\n<\/div>\n<div class=\"separator\" style=\"clear: both; text-align: center;\">\n<a href=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img decoding=\"async\" border=\"0\" src=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png\" \/><\/a><\/div>\n<div class=\"separator\" style=\"clear: both; text-align: center;\">\n<\/div>\n<div class=\"separator\" style=\"clear: both; text-align: center;\">\n<b>Ejemplo banner animado:<\/b><\/div>\n<div class=\"separator\" style=\"clear: both; text-align: center;\">\n<\/div>\n<div class=\"separator\" style=\"clear: both; text-align: center;\">\n<a href=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.gif\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img decoding=\"async\" border=\"0\" src=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.gif\" \/><\/a><\/div>\n<div class=\"separator\" style=\"clear: both; text-align: center;\">\n<\/div>\n<div class=\"separator\" style=\"clear: both; text-align: center;\">\n<\/div>\n<p>\n<b>\u00bfQu\u00e9 es un gif animado?&nbsp;<\/b><\/p>\n<p>El gif animado es un formato gr\u00e1fico que permite guardar varias im\u00e1genes en distintos fotogramas para crear una animaci\u00f3n. Las im\u00e1genes pueden ser fotos o ilustraciones<\/p>\n<p><b>\u00bfC\u00f3mo hacer un gif animado?&nbsp;<\/b><br \/>\n<b><br \/><\/b><br \/>\nPara hacer un gif animado necesitas un programa que te permita hacerlo, puedes hacer gifs animados con photoshop, con fireworks y tambi\u00e9n hay programas gratuitos y online como <a href=\"http:\/\/gifmake.com\/\" rel=\"nofollow\" target=\"_blank\">Gifmake<\/a> o <a href=\"http:\/\/gickr.com\/\" rel=\"nofollow\" target=\"_blank\">Gickr<\/a>.<\/p>\n<p>El proceso siempre es el mismo para hacer el <b>banner animado<\/b> necesitas una secuencia de im\u00e1genes que pueden ser fotos o ilustraciones, si lo haces online tienes que subir la im\u00e1genes, ordenarlas para crear la secuencia y despu\u00e9s aplicarles una velocidad de fotogramas, (en gifmake te permite aplicar la velocidad de fotograma de forma independiente a cada imagen (yo prefiero esta opci\u00f3n).<br \/>\nUna vez creado tu banner animado lo guardas en tu ordenador y ya lo puedes usar para ponerlo en tu blog.<\/p>\n<p>\n<b>Enlaces relacionados con c\u00f3mo hacer un banner animado para tu blog:<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/trucos-diseno-web.euroresidentes.com\/2013\/06\/como-cambiar-la-cabecera-en-blogger.html\">C\u00f3mo cambiar la cabecera de tu blog<\/a><\/li>\n<li><a href=\"http:\/\/trucos-diseno-web.euroresidentes.com\/2013\/04\/botones-para-aplicaciones-web.html\">C\u00f3mo hacer botones para la web<\/a><\/li>\n<li><a href=\"http:\/\/www.euroresidentes.com\/Blogs\/Bitacoras\/recursos-para-blogs.htm\" target=\"_blank\">Herramientas y recursos para blogs<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>C\u00f3mo hacer un gif animado. Un banner es una imagen que sirve para destacar o promocionar un evento, una categor\u00eda, un post o una de las secciones de tu blog. Un banner puede ser fijo (una sola imagen) o animado, es decir en una misma imagen o espacio aparecen varias im\u00e1genes difererentes que van cambiando de forma autom\u00e1tica, habitualmente estos banners que se mueven est\u00e1n hechos con gifs animados. Ejemplo banner fijo: Ejemplo banner animado: \u00bfQu\u00e9 es un gif animado?&nbsp; El gif animado es un formato gr\u00e1fico que permite guardar varias im\u00e1genes en distintos fotogramas para crear una animaci\u00f3n. Las <\/p>\n","protected":false},"author":15,"featured_media":434,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,21],"tags":[16,13],"class_list":["post-266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","category-trucos-web","tag-recursos","tag-tutoriales-blogger","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo hacer un banner animado para tu blog - Trucos Dise\u00f1o Web<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo hacer un banner animado para tu blog - Trucos Dise\u00f1o Web\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo hacer un gif animado. Un banner es una imagen que sirve para destacar o promocionar un evento, una categor\u00eda, un post o una de las secciones de tu blog. Un banner puede ser fijo (una sola imagen) o animado, es decir en una misma imagen o espacio aparecen varias im\u00e1genes difererentes que van cambiando de forma autom\u00e1tica, habitualmente estos banners que se mueven est\u00e1n hechos con gifs animados. Ejemplo banner fijo: Ejemplo banner animado: \u00bfQu\u00e9 es un gif animado?&nbsp; El gif animado es un formato gr\u00e1fico que permite guardar varias im\u00e1genes en distintos fotogramas para crear una animaci\u00f3n. Las\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/\" \/>\n<meta property=\"og:site_name\" content=\"Trucos Dise\u00f1o Web\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-11T13:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-02T08:25:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"273\" \/>\n\t<meta property=\"og:image:height\" content=\"186\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Trini Mora\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Trini Mora\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/\",\"url\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/\",\"name\":\"C\u00f3mo hacer un banner animado para tu blog - Trucos Dise\u00f1o Web\",\"isPartOf\":{\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png\",\"datePublished\":\"2013-06-11T13:59:00+00:00\",\"dateModified\":\"2016-03-02T08:25:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#\/schema\/person\/fe5a696a7f74cdc0e87eeab5c4a647c4\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#primaryimage\",\"url\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png\",\"contentUrl\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png\",\"width\":273,\"height\":186},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo hacer un banner animado para tu blog\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#website\",\"url\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/\",\"name\":\"Trucos Dise\u00f1o Web\",\"description\":\"Euroresidentes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#\/schema\/person\/fe5a696a7f74cdc0e87eeab5c4a647c4\",\"name\":\"Trini Mora\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2016\/03\/trini-150x150.jpg\",\"contentUrl\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2016\/03\/trini-150x150.jpg\",\"caption\":\"Trini Mora\"},\"description\":\"Trini MoraDise\u00f1adora gr\u00e1fica, editora web.\",\"url\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/author\/trinimora\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo hacer un banner animado para tu blog - Trucos Dise\u00f1o Web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo hacer un banner animado para tu blog - Trucos Dise\u00f1o Web","og_description":"C\u00f3mo hacer un gif animado. Un banner es una imagen que sirve para destacar o promocionar un evento, una categor\u00eda, un post o una de las secciones de tu blog. Un banner puede ser fijo (una sola imagen) o animado, es decir en una misma imagen o espacio aparecen varias im\u00e1genes difererentes que van cambiando de forma autom\u00e1tica, habitualmente estos banners que se mueven est\u00e1n hechos con gifs animados. Ejemplo banner fijo: Ejemplo banner animado: \u00bfQu\u00e9 es un gif animado?&nbsp; El gif animado es un formato gr\u00e1fico que permite guardar varias im\u00e1genes en distintos fotogramas para crear una animaci\u00f3n. Las","og_url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/","og_site_name":"Trucos Dise\u00f1o Web","article_published_time":"2013-06-11T13:59:00+00:00","article_modified_time":"2016-03-02T08:25:01+00:00","og_image":[{"width":273,"height":186,"url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png","type":"image\/png"}],"author":"Trini Mora","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Trini Mora","Est. reading time":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/","url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/","name":"C\u00f3mo hacer un banner animado para tu blog - Trucos Dise\u00f1o Web","isPartOf":{"@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#primaryimage"},"image":{"@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png","datePublished":"2013-06-11T13:59:00+00:00","dateModified":"2016-03-02T08:25:01+00:00","author":{"@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#\/schema\/person\/fe5a696a7f74cdc0e87eeab5c4a647c4"},"breadcrumb":{"@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#primaryimage","url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png","contentUrl":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/06\/como_hacer_banner.png","width":273,"height":186},{"@type":"BreadcrumbList","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/como-hacer-un-banner-animado-para-tu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo hacer un banner animado para tu blog"}]},{"@type":"WebSite","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#website","url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/","name":"Trucos Dise\u00f1o Web","description":"Euroresidentes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#\/schema\/person\/fe5a696a7f74cdc0e87eeab5c4a647c4","name":"Trini Mora","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#\/schema\/person\/image\/","url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2016\/03\/trini-150x150.jpg","contentUrl":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2016\/03\/trini-150x150.jpg","caption":"Trini Mora"},"description":"Trini MoraDise\u00f1adora gr\u00e1fica, editora web.","url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/author\/trinimora\/"}]}},"_links":{"self":[{"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":0,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/media\/434"}],"wp:attachment":[{"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}