<?xml version="1.0" encoding="utf-8"?>
<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>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>Daniel Mustieles</mal:name>
      <mal:email>daniel.mustieles@gmail.com</mal:email>
      <mal:years>2011 - 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>Benjamí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>

<p>Icons play an important role in user interfaces: selecting the correct icon is therefore vital to making sure that your application is usable. An identifying icon is also an essential part of any application, and is a crucial part of its identity.</p>

<section id="using-icons">
<title>Usar iconos en su interfaz</title>

<p>There are many situations when it is necessary to decide between using an icon and a text label, particularly for buttons. Icons have the advantage of being smaller, and not requiring translation. At the same time, the incorrect use of an icon can make your interface hard - or even impossible - to understand.</p>

<list>
<item><p>Only use icons whose meaning is commonly recognized. If a commonly recognized icon is not available, it might be better to use a text label instead.</p>
<list>
<item><p>Convention establishes which icons will be recognized. If you are in doubt, stick to icons which are frequently used in other applications.</p></item>
<item><p>Consider which icons will be meaningful in the specific context of your application - users of specialist tools will often be familiar with domain-specific symbols.</p></item>
</list></item>
<item><p>Remember that some icons are only meaningful alongside other icons of the same type. For example, a media icon for stop is simply a square, and may not be identified as a stop icon without other media controls (like play, pause, or skip) being visible close by. Likewise, the icon to remove an item from a list is a subtract symbol (ie. a single line), and will not be recognizable without a corresponding “plus” add icon.</p></item>
</list>

</section>

<section id="stock-icons">
<title>Elegir iconos del almacén de GNOME</title>

<p>GNOME provides a full set of standard icons. These should be used where ever appropriate; try to avoid creating custom icons unless they are absolutely necessary.</p>

<p>Follow the icon naming specification when selecting which icons to use - the name of the icon should reflect what the icon is intended to communicate. This is important for those using a screen reader.</p>

<p>Puede usar el icono del navegador GTK+ para encontrar iconos recomendados.</p>

<section id="color-vs-symbolic">
<title>Iconos de color frente a iconos simbólicos</title>

<p>GNOME 3 provides two types of icon: full-color and monochrome symbolic icons. The guidelines in this HIG indicate when to use which type of icon. The following is a a general guide.</p>

<p>Los iconos a todo color se deben usar para:</p>

<list>
<item><p>dispositivos</p></item>
<item><p>tipos de archivo/tipos MIME</p></item>
<item><p>Iconos de aplicación (lanzador)</p></item>
</list>

<p>All other icons should use the symbolic icon style. In addition, symbolic icons should always be used inside:</p>

<list>
<item><p>botones</p></item>
<item><p>listas</p></item>
<item><p>campos de entrada</p></item>
<item><p>when the background is semi-transparent (such as overlaid media or fullscreen controls)</p></item>
</list>

</section>

</section>

<section id="application-icons">
<title>Iconos de aplicación</title>

<p>Every application should have a unique and beautiful application icon. It is the face of the application, and the first visual element a user sees when browsing for new applications. The <link xref="application-basics">application basics page</link> includes details on what an application is, and when to provide an application icon.</p>

<p>Because application icons are presented at larger sizes, legacy Tango styled 48x48px or SVG icons no longer suffice (lacking detail). It is essential your application has a 256x256px icon. With the advent of high-DPI displays, a 512x512px variant is recommended.</p>

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

<p>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.</p>

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

<p>To maintain crispness, a lot of detail is discarded for the low resolution variants and a 1px stroke is used to outline the silhouette of the object.</p>

<p>More information on designing an application icon can be found below, in the custom full-color icon section.</p>

</section>

<section id="custom-symbolic-icons">
<title>Custom symbolic icons</title>

<p>Symbolic icons have a simple form and are drawn within a 16x16 pixel grid. They are then programmatically scaled and colored within the user interface itself.</p>

<list>
<item><p>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).</p></item>
<item><p>Evite usar cualquier perspectiva en los iconos simbólicos, limítese a una vista simple ortogonal.</p></item>
<item><p>Filled shapes are generally faster to process by the human visual system than wireframe outlines.</p></item>
<item><p>Symbolic icons are recolored at runtime to match the context, very much like a piece of text. While there are ways to “shade” parts of an icon by using opacity or creating duotone/pattern dithering, try avoiding these as much as possible.</p></item>
<item><p>When a metaphor relies on the negative space, make sure it will work with the colors inverted. For example a camera lens spec/highlight will only work if lighter than the lens itself.</p></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>

<p>While the icons are scalable and should work in any size, the basic canvas size is 16x16 grid units. You have the whole canvas to fill, but note that a filled rectangular object will appear stronger/larger when placed next to items that only use thinner strokes. Try to keep the contrast of your whole set.</p>

</section>

</section>

<section id="custom-full-color-icons">
<title>Custom full-color icons</title>

<p>Full-color icons are drawn and rendered at a variety of preset sizes.</p>

<section id="perspective">
<title>Perspectiva</title>

<p>Most icons can be executed best by using the “on the table” perspective, as if the observer was standing in front of the object and looking slightly down on it. Many icons can be rendered with a simple “straight on” or “on the shelf” perspective, with the observer looking directly at the object at eye level.</p>

</section>

<section id="palette">
<title>Paleta</title>

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

<table>
<tr>
<td><p>Mantequilla</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/butter.svg"/></td>
<td><p>Ciruela</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/plum.svg"/></td>
</tr>
<tr>
<td><p>Naranja</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/orange.svg"/></td>
<td><p>Rojo escarlata</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/scarlet-red.svg"/></td>
</tr>
<tr>
<td><p>Chocolate</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/chocolate.svg"/></td>
<td><p>Aluminio</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/aluminium1.svg"/></td>
</tr>
<tr>
<td><p>Camaleón</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/chameleon.svg"/></td>
<td/>
<td><media type="image" mime="image/svg" src="figures/icons/palette/aluminium2.svg"/></td>
</tr>
<tr>
<td><p>Azul cielo</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/sky-blue.svg"/></td>
</tr>

</table>

<p>You are free to use different shades of these colors depending on the desired material effect. However, these primary colors are a good baseline to start from. All major libre graphics packages come with the Tango palette pre-installed.</p>

</section>

</section>

<section id="see-also">
<title>Consulte también</title>

<p><link href="http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines">Tango Icon Guidelines</link></p>

</section>

</page>
