{"id":269,"date":"2013-04-26T08:47:00","date_gmt":"2013-04-26T08:47:00","guid":{"rendered":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web"},"modified":"2017-01-09T12:12:25","modified_gmt":"2017-01-09T11:12:25","slug":"botones-para-aplicaciones-web","status":"publish","type":"post","link":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/","title":{"rendered":"Botones para aplicaciones Web"},"content":{"rendered":"
\nCon el programa de photoshop podemos crear de una manera muy sencilla botones con apariencia tridimensional, un efecto \u00fatil para p\u00e1ginas web y botones de aplicaciones m\u00f3viles.<\/p>\n

Para comenzar abrimos un nuevo archivo con las medidas que vemos en la siguiente imagen (por ejemplo).<\/p>\n

\n<\/a><\/div>\n

Creamos una nueva capa y usamos la herramienta Marco El\u00edptico, presionamos la letra \u201cShift\u201d para crear un c\u00edrculo en lugar de una elipse.<\/p>\n

\n<\/a><\/div>\n

 La rellenamos del color que deseemos con la herramienta bote de pintura.<\/p>\n

\n<\/a><\/div>\n

Para crear los reflejos, creamos una nueva capa y volvemos a usar la herramienta Marco El\u00edptico para crear otra elipse dentro de la que ya ten\u00edamos, en la parte superior, como vemos en la imagen. 
\n
\nUtilizamos la herramienta de degradado con el color blanco y el mismo color que hemos usado para la primera elipse.<\/p>\n

\n<\/a><\/div>\n

<\/p>\n

\n<\/a><\/div>\n

Para que el reflejo se vea m\u00e1s real, en la capa del reflejo, a\u00f1adimos una m\u00e1scara de capa (hacer click en el \u201crecuadro con un c\u00edrculo en el interior\u201d que vemos bajo el cuadro de las capas), y lo rellenamos con el mismo degradado.<\/p>\n

\n<\/a><\/div>\n

En el siguiente paso tenemos que duplicar la capa de los reflejos, y seleccionar \u201cEdici\u00f3n-Transformar- Voltear vertical\u201d, y la arrastramos a la parte inferior del objeto (en este caso un c\u00edrculo).<\/p>\n

\n<\/a><\/div>\n

<\/p>\n

\n<\/a><\/div>\n

<\/p>\n

\n<\/a><\/div>\n
\n<\/div>\n

Le aplicamos al reflejo inferior la herramienta \u201cFiltro- Desenfocar- Desenfoque gaussiano\u201d, con un valor del radio de 16.<\/p>\n

\n<\/a><\/div>\n

<\/p>\n

\n<\/a><\/div>\n

A continuaci\u00f3n a\u00f1adimos una imagen o un texto sobre el c\u00edrculo.
\nDespu\u00e9s crearemos una sombra con en el objetivo de aumentar su parecido con una bolapa tridimensional. Creamos una elipse negra y usamos de nuevo la herramienta \u201cFiltro- Desenfocar- Desenfoque gaussiano. Para terminar la arrastramos bajo la capa de la primera elipse, como vemos en la imagen.<\/p>\n

\n<\/a><\/div>\n

<\/p>\n

\n<\/a><\/div>\n

<\/p>\n

\n<\/a><\/div>\n

Este efecto se puede crear tambi\u00e9n con cuadrados o tri\u00e1ngulos, o cualquier otra figura. Espero que os sea \u00fatil para los fines que se pretenden.<\/p>\n

Otro ejemplo con un cuadrado: Este es el efecto que se usa para los botones de las aplicaciones m\u00f3viles, y es el mismo que el de la bola de crista.<\/p>\n

<\/p>\n

\n<\/a><\/div>\n

\nCon pr\u00e1ctica llegan a salir mucho mejor que los regalos que os he puesto. Pero poco a poco con pr\u00e1ctica se consigo un efecto mejor.<\/p>\n

<\/div>\n","protected":false},"excerpt":{"rendered":"

Con el programa de photoshop podemos crear de una manera muy sencilla botones con apariencia tridimensional, un efecto \u00fatil para p\u00e1ginas web y botones de aplicaciones m\u00f3viles. Para comenzar abrimos un nuevo archivo con las medidas que vemos en la siguiente imagen (por ejemplo). Creamos una nueva capa y usamos la herramienta Marco El\u00edptico, presionamos la letra \u201cShift\u201d para crear un c\u00edrculo en lugar de una elipse.  La rellenamos del color que deseemos con la herramienta bote de pintura. Para crear los reflejos, creamos una nueva capa y volvemos a usar la herramienta Marco El\u00edptico para crear otra elipse dentro <\/p>\n","protected":false},"author":1,"featured_media":457,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,21],"tags":[19],"class_list":["post-269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","category-trucos-web","tag-tutoriales-photoshop","has_thumb"],"yoast_head":"\nBotones para aplicaciones Web - 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\/botones-para-aplicaciones-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Botones para aplicaciones Web - Trucos Dise\u00f1o Web\" \/>\n<meta property=\"og:description\" content=\"Con el programa de photoshop podemos crear de una manera muy sencilla botones con apariencia tridimensional, un efecto \u00fatil para p\u00e1ginas web y botones de aplicaciones m\u00f3viles. Para comenzar abrimos un nuevo archivo con las medidas que vemos en la siguiente imagen (por ejemplo). Creamos una nueva capa y usamos la herramienta Marco El\u00edptico, presionamos la letra \u201cShift\u201d para crear un c\u00edrculo en lugar de una elipse.  La rellenamos del color que deseemos con la herramienta bote de pintura. Para crear los reflejos, creamos una nueva capa y volvemos a usar la herramienta Marco El\u00edptico para crear otra elipse dentro\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Trucos Dise\u00f1o Web\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-26T08:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-09T11:12:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/04\/1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"228\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Euroresidentes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Euroresidentes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\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\/botones-para-aplicaciones-web\/\",\"url\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/\",\"name\":\"Botones para aplicaciones Web - 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\/botones-para-aplicaciones-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/04\/1.jpg\",\"datePublished\":\"2013-04-26T08:47:00+00:00\",\"dateModified\":\"2017-01-09T11:12:25+00:00\",\"author\":{\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#\/schema\/person\/8cb13da0909a9d75116f29d6910d0907\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/#primaryimage\",\"url\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/04\/1.jpg\",\"contentUrl\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/04\/1.jpg\",\"width\":400,\"height\":228},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Botones para aplicaciones Web\"}]},{\"@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\/8cb13da0909a9d75116f29d6910d0907\",\"name\":\"Euroresidentes\",\"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\/logo-euroresidentes-300x300-150x150.jpg\",\"contentUrl\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2016\/03\/logo-euroresidentes-300x300-150x150.jpg\",\"caption\":\"Euroresidentes\"},\"description\":\"EuroresidentesContenidos \u00fatiles que ayudan a resolver las necesidades grandes y peque\u00f1as de la vida cotidiana.\",\"sameAs\":[\"https:\/\/www.euroresidentes.com\/info.htm\"],\"url\":\"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/author\/euroresidentes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Botones para aplicaciones Web - 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\/botones-para-aplicaciones-web\/","og_locale":"es_ES","og_type":"article","og_title":"Botones para aplicaciones Web - Trucos Dise\u00f1o Web","og_description":"Con el programa de photoshop podemos crear de una manera muy sencilla botones con apariencia tridimensional, un efecto \u00fatil para p\u00e1ginas web y botones de aplicaciones m\u00f3viles. Para comenzar abrimos un nuevo archivo con las medidas que vemos en la siguiente imagen (por ejemplo). Creamos una nueva capa y usamos la herramienta Marco El\u00edptico, presionamos la letra \u201cShift\u201d para crear un c\u00edrculo en lugar de una elipse.  La rellenamos del color que deseemos con la herramienta bote de pintura. Para crear los reflejos, creamos una nueva capa y volvemos a usar la herramienta Marco El\u00edptico para crear otra elipse dentro","og_url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/","og_site_name":"Trucos Dise\u00f1o Web","article_published_time":"2013-04-26T08:47:00+00:00","article_modified_time":"2017-01-09T11:12:25+00:00","og_image":[{"width":400,"height":228,"url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/04\/1.jpg","type":"image\/jpeg"}],"author":"Euroresidentes","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Euroresidentes","Est. reading time":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/","url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/","name":"Botones para aplicaciones Web - 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\/botones-para-aplicaciones-web\/#primaryimage"},"image":{"@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/04\/1.jpg","datePublished":"2013-04-26T08:47:00+00:00","dateModified":"2017-01-09T11:12:25+00:00","author":{"@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/#\/schema\/person\/8cb13da0909a9d75116f29d6910d0907"},"breadcrumb":{"@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/#primaryimage","url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/04\/1.jpg","contentUrl":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2013\/04\/1.jpg","width":400,"height":228},{"@type":"BreadcrumbList","@id":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/botones-para-aplicaciones-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/"},{"@type":"ListItem","position":2,"name":"Botones para aplicaciones Web"}]},{"@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\/8cb13da0909a9d75116f29d6910d0907","name":"Euroresidentes","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\/logo-euroresidentes-300x300-150x150.jpg","contentUrl":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-content\/uploads\/sites\/7\/2016\/03\/logo-euroresidentes-300x300-150x150.jpg","caption":"Euroresidentes"},"description":"EuroresidentesContenidos \u00fatiles que ayudan a resolver las necesidades grandes y peque\u00f1as de la vida cotidiana.","sameAs":["https:\/\/www.euroresidentes.com\/info.htm"],"url":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/author\/euroresidentes\/"}]}},"_links":{"self":[{"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/posts\/269","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":0,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/media\/457"}],"wp:attachment":[{"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.euroresidentes.com\/tecnologia\/trucos-diseno-web\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}