<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icon-design" 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 - 2019</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>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>Crear iconos</title>

<p>This page provides guidelines for those creating their own icons, including both full-color icons (typically used for application icons) and symbolic icons (typically used for user interface controls). For a more general overview of icon styles and usage, including the stock icons that are available, see <link xref="icons-and-artwork">icons and artwork</link>.</p>

<section id="full-color-icons">
<title>Iconos a todo color</title>

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

<p>The full-color icon style is most commonly used for application icons. The nominal size of full-color icons is 128×128px. However, because application icons are sometimes presented at lower resolutions, they should only feature detail that is presentable at 64×64px resolution: anything more detailed would get lost by filtering/scaling down.</p>

<p>The <link href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/blob/master/template.svg">full-color icon template</link> includes a 2px grid which should help you avoid adding detail that's finer than the desired threshold.</p>

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

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

<p>Full-color icons should be rendered with a simple orthogonal view and no real or isometric perspective. To provide depth a raised effect can be applied to mimic the Z-axis. Please keep the effect subtle though! Raising the object more than 2 detail units (4 nominal pixels) is not recommended.</p>

<p>In order to aid recognition, each application icon should have a unique silhouette. However, to ensure visual balance with other application icons, the aspect ratio should not be extreme. Very narrow or very wide shapes should be avoided.</p>

<media type="image" mime="image/png" src="figures/icons/aspect-ratio.svg"/>

<p>A <link href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/raw/master/template.svg">grid template</link> is available to assist with placing your icon outline. Do not try to cover a maximum area of the canvas: the outside margin should be left empty. In some circumstances a small detail can be extended into this margin space.</p>

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

</section>

<section id="shadows">
<title>Sombras</title>

<p>Shadows can be drawn internally, within a full-color icon, with the light source pointing straight from above. However, shadows should not be drawn outside the main silhouette of the icon, as these are generated programmatically based on the context. When app icons are presented on a white background, for example, a strong drop shadow is rendered to help define the contours.</p>

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

<p>Versions of application icons can also be programmatically generated for development or nightly builds.</p>
</section>

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

<p>A continuación está la paleta de colores de iconos de aplicaciones básica de GNOME.</p>

<!-- will chop up into named sections once the colors stabilize -->


<table>
<tr>
<td><p>Azul</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/blue.png"/></td>
</tr>
<tr>
<td><p>Verde</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/green.png"/></td>
</tr>
<tr>
<td><p>Amarillo</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/yellow.png"/></td>
</tr>
<tr>
<td><p>Naranja</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/orange.png"/></td>
</tr>
<tr>
<td><p>Rojo</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/red.png"/></td>
</tr>
<tr>
<td><p>Morado</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/purple.png"/></td>
</tr>
<tr>
<td><p>Marrón</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/brown.png"/></td>
</tr>
<tr>
<td><p>Neutral</p></td>
<td><media type="image" mime="image/svg" src="figures/icons/palette/neutral.png"/></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. A GIMP/Inkscape format palette <link href="https://gitlab.gnome.org/Teams/Design/HIG-app-icons/raw/master/GNOME%20HIG.gpl?inline=false">is available</link>.</p>

<p>It is recommended to keep flat surfaces unshaded, but using gradients to signify bent surfaces is allowed.</p>

</section>
</section>


<section id="custom-symbolic-icons">
<title>Iconos simbólicos</title>

<p>Los iconos simbólicos tienen una forma sencilla y están dibujados en una rejilla de 16×16 píxeles. Se escalan y colorean automáticamente en la propia interfaz de usuario.</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>When using unfilled strokes for an outline, try avoiding hairline (1px) and do at least a 2px stroke for the main feature of the icon. </p></item>
<item><p>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.</p></item>
<item><p>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í.</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 symbolic icons are scalable and should work at any size, the basic canvas size is 16×16 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>


<!-- graphic assets TODO
<section id="stock-icons">
<title>GNOME Icon Pack</title>

<p>To avoid starting from scratch, we prepared a selection of commonly used icons you can include in your application, or create derivatives of. The set is licensed CC0, so they can be used regardless of your project's license.</p>

</section>
-->

</page>
