<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icons-and-artwork" xml:lang="es">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Jakub Steiner</name>

    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <desc>Seleccionar y crear iconos.</desc>   

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Daniel Mustieles</mal:name>

      <mal:email>daniel.mustieles@gmail.com</mal:email>

      <mal:years>2011 - 2017</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Alex Puchades</mal:name>

      <mal:email>alex94puchades@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Nicolás Satragno</mal:name>

      <mal:email>nsatragno@gnome.org</mal:email>

      <mal:years>2013</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Benjamín Valero Espinosa</mal:name>

      <mal:email>benjavalero@gmail.com</mal:email>

      <mal:years>2011</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Jorge González</mal:name>

      <mal:email>jorgegonz@svn.gnome.org</mal:email>

      <mal:years>2009</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Rosa Elena Pérez</mal:name>

      <mal:email>rozydicemiau@gmail.com</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Oscar Rafael Arachi</mal:name>

      <mal:email>arachi910@gmail.com</mal:email>

      <mal:years>2014 - 2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Miguel Ajuech</mal:name>

      <mal:email>miguel.ann.28@gmail.com</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Adrián Pérez Domínguez</mal:name>

      <mal:email>adrian@aztli.org</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Celina Osorio Ochoa</mal:name>

      <mal:email>chelinoska@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Dario Amigon Espinoza</mal:name>

      <mal:email>daramigon@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Yenisei Ramírez Pérez</mal:name>

      <mal:email>yeniseirape@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>José Roberto Ramíres Mendoza</mal:name>

      <mal:email>aczella@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Bernardo Sánchez Romero</mal:name>

      <mal:email>b.sanchez.rom@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Emmanuel Márquez Juárez</mal:name>

      <mal:email>resident3333@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>David Romero Serrano</mal:name>

      <mal:email>lemi136@hotmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Omar Garcia Guzman</mal:name>

      <mal:email>garciag.omar91@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Edilberto Huerta Niño</mal:name>

      <mal:email>edilberto.huerta0290@gmail.com</mal:email>

      <mal:years>2015</mal:years>

    </mal:credit>

  </info>

<title>Iconos y diseño</title>

Los iconos juegan un papel importante en las interfaces de usuario: seleccionar el icono correcto es, por lo tanto, vital para asegurarse de que su aplicación es usable. Un icono identificativo es una parte esencial de cualquier aplicación, y es una parte crucial de su identidad.

<section id="using-icons">

<title>Usar iconos en su interfaz</title>

Hay muchas situaciones en las que es necesario elegir entre usar un icono y usar una etiqueta de texto, particularmente en los botones. Los iconos tienen la ventaja de ser más pequeños y no requieren traducción. Al mismo tiempo, el uso incorrecto de un icono puede hacer que interfaz sea difícil (o imposible) de entender.

<list>

<item>
Use sólo iconos cuyo significado es comúnmente reconocido. Si no hay disponibles un icono reconocido habitualmente, es preferible usar una etiqueta de texto en su lugar.

<list>

<item>
El convenio establece qué iconos se reconocerán. Si tiene dudas, elija iconos que se usen frecuentemente en otras aplicaciones.
</item>

<item>
Considere qué iconos serán significativos en el contexto específico de su aplicación; los usuarios de herramientas específicas estarán a menudo familiarizados con símbolos específicos de ese área.
</item>

</list></item>

<item>
Recuerde que algunos iconos sólo tienen sentido cuando están junto a otros del mismo tipo. Por ejemplo, un icono multimedia para detener es simplemente un cuadrado, y puede no identificarse como un icono de detener sin otros controles multimedia (como reproducir, pausar u omitir) visibles cercanos a él. Del mismo modo, el icono de eliminar un elemento de una lista como un signo menos (una única línea) no se reconocerá sin el correspondiente icono «+» de añadir.
</item>

</list>

</section>

<section id="stock-icons">

<title>Elegir iconos del almacén de GNOME</title>

GNOME proporciona un conjunto completo de iconos estándar. Estos se deben usar donde sea apropiado; intente evitar crear iconos personalizados a menos que sea absolutamente necesario.

Siga la especificación de nombrado de iconos al selecciona qué iconos usar; el nombre del icono debe reflejar lo que el icono pretende comunicar. Esto es importante para aquellas personas que usan un lector de pantalla.

Puede usar el icono del navegador GTK+ para encontrar iconos recomendados.

<section id="color-vs-symbolic">

<title>Iconos de color frente a iconos simbólicos</title>

GNOME 3 proporciona dos tipos de iconos: a todo color y simbólicos monocromo. Los consejos de esta guía indican cuando usar cada tipo de icono. Lo siguiente es una guía general.

Los iconos a todo color se deben usar para:

<list>

<item>
dispositivos
</item>

<item>
tipos de archivo/tipos MIME
</item>

<item>
Iconos de aplicación (lanzador)
</item>

</list>

Todos los demás iconos deben usar el estilo de icono simbólico. Además, los iconos simbólicos se deben usar siempre en:

<list>

<item>
botones
</item>

<item>
listas
</item>

<item>
campos de entrada
</item>

<item>
cuando el fondo sea semi-transparente (como en medios superpuestos o controles a pantalla completa)
</item>

</list>

</section>

</section>

<section id="application-icons">

<title>Iconos de aplicación</title>

Cada aplicación debe tener un icono de aplicación único y bonito. Es la cara de la aplicación y el primer elemento visual que un usuario ve al buscar aplicaciones nuevas. La <link xref="application-basics">página de conceptos básicos de aplicaciones</link> incluye detalles sobre qué es una aplicación y cuándo proporcionar un icono de aplicación.

Dado que los iconos de aplicación se muestran en tamaños más grandes, los iconos heredados de Tango de 48x48px o los SVG no son suficientes (faltan detalles). Es esencial que su aplicación tenga un icono de 256x256px. Con la llegada de las pantallas de alta definición, se recomienda una variante de 512x512px.

<media type="image" mime="image/png" src="figures/icons/sizes.png"/>

Aunque no es tan critico, hay áreas todavía donde los iconos de las aplicaciones se muestran en tamaño pequeño. Para mantener el icono claro y bien definido se requiere un renderizado específico a los tamaños de 48x48px 32x32px, 24x24px y 16x16px. Muchos iconos de GNOME también proporcionan un tamaño de 22x22px por razones de compatibilidad, pero eso no es obligatorio.

<media type="image" mime="image/png" src="figures/icons/sizes-small-24.png"/>

Para mantener la frescura, en las versiones de baja resolución se descartan muchos detalles y se usa una sombra de 1px para bordear la silueta del objeto.

A continuación puede encontrar más información sobre el diseño del icono de una aplicación, en la sección de iconos a todo color personalizados

</section>

<section id="custom-symbolic-icons">

<title>Iconos simbólicos personalizados</title>

Los iconos simbólicos tienen una forma sencilla y están dibujados en una rejilla de 16x16 píxeles. Se escalan y colorean automáticamente en la propia interfaz de usuario.

<list>

<item>
Identifique una propiedad simple cuando busque una metáfora apropiada para un icono, y céntrese en la idea que distingue lo que se quiere comunicar. Por ejemplo, cuando se describe una acción que realizar en una imagen, no es necesario repetir la idea de una imagen en cada icono. En su lugar, céntrese en lo que es distinto sobre cada acción (por ejemplo: rotar, etiquetar, alinear).
</item>

<item>
Evite usar cualquier perspectiva en los iconos simbólicos, limítese a una vista simple ortogonal.
</item>

<item>
Las formas rellenas son generalmente un proceso más rápido para el sistema visual humano que los marcos externos.
</item>

<item>
Los iconos simbólicos se colorean en tiempo de ejecución para que coincidan con el contexto, como si fueran fragmentos de texto. Aunque hay maneras de «sombrear» partes de un icono usando opacidad o creando un patrón difuminado o de dos tonos, intente evitarlo siempre que sea posible.
</item>

<item>
Cuando una metáfora recae en el espacio negativo, asegúrese de que funcionará con los colores invertidos. Por ejemplo, el resaltado de la lente de una cámara sólo funcionará si es más clara que la lente en sí.
</item>

</list>

<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>

<section id="size-and-grid">

<title>Tamaño y cuadrícula</title>

Aunque los iconos son escalables y deben funcionar en cualquier tamaño, el tamaño básico del lienzo es de 16x16 unidades. Puede rellenar todo el lienzo, pero tenga en cuenta que un objeto rectangular completo aparecerá más grande cuando se coloque junto a otros elementos que usar trazos más finos. Intente mantener el contraste del conjunto completo.

</section>

</section>

<section id="custom-full-color-icons">

<title>Iconos a todo color personalizados</title>

Los iconos a todo color se dibujan y renderizan en una amplia variedad de tamaños predefinidos.

<section id="perspective">

<title>Perspectiva</title>

La mayoría de los iconos se pueden usar mejor usando la perspectiva «de tabla», como si el observador estuviera de pie frente al objeto y mirándolo ligeramente hacia abajo. La mayoría de los iconos se pueden mostrar simplemente con una perspectiva «recta» o «en estantería», con el observador mirando directamente al objeto al nivel de los ojos.

</section>

<section id="palette">

<title>Paleta</title>

Use la paleta de color de Tango al diseñar iconos de dispositivo o de aplicación a todo color.

Mantequilla

<media type="image" mime="image/svg" src="figures/icons/palette/butter.svg"/>

Ciruela

<media type="image" mime="image/svg" src="figures/icons/palette/plum.svg"/>

Naranja

<media type="image" mime="image/svg" src="figures/icons/palette/orange.svg"/>

Rojo escarlata

<media type="image" mime="image/svg" src="figures/icons/palette/scarlet-red.svg"/>

Chocolate

<media type="image" mime="image/svg" src="figures/icons/palette/chocolate.svg"/>

Aluminio

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium1.svg"/>

Camaleón

<media type="image" mime="image/svg" src="figures/icons/palette/chameleon.svg"/>

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium2.svg"/>

Azul cielo

<media type="image" mime="image/svg" src="figures/icons/palette/sky-blue.svg"/>

Es libre de usar diferentes sombras de estos colores, dependiendo del efecto de material que quiera. Sin embargo, estos colores primarios son una buena base para empezar. Todos los paquetes de gráficos libres incluyen la paleta de Tango preinstalada.

</section>

</section>

<section id="see-also">

<title>Consulte también</title>

<link href="http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines">Guías de iconos Tango</link>

</section>

</page>