Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Cómo crear una biblioteca de icono dinámico con Sketch

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Richter Domagas (you can also view the original English article)

Hoy vamos a crear una biblioteca de icono dinámico en bosquejo. Esto podría ser un proceso bastante complicado, pero vamos a nosotros mismos guardar un montón de tiempo y estrés mediante un enchufar llamado Sketch Icons. ¡Vamos a bucear!

Sketch Icons

Sketch Icons es un enchufar para Sketch que le permite importar un montón de iconos, luego establece automáticamente una máscara de color. Vamos a pasear por funciona.

1. Instalar el enchufar

Comenzar por descargar e instalar el enchufar. Yo personalmente disfrute de Runner para instalar mis Sketch enchufar, así que puede usar ese método también si lo desea.

2. Declarar algunos colores

Iniciar un nuevo documento y declarar unos pocos colores. Para ello, hacer unas mesas de trabajo y dándoles nombres del color adecuado. Coloque una forma en cada uno, con cualquier color que parezca, y luego convertir cada mesa de trabajo en un símbolo. Usted debe terminar con algo como esto:

Three sketch artboards rectangles symbols
Tres mesas de trabajo de sketch muy bien organizado, rectángulos, símbolos

3. Importar algunos iconos

Voy a granel importar unos iconos por ir a Plugins > Sketch Icons > Import icons... Los Sketch Icons le preguntará qué tamaño quisiera que la mesa de trabajo para cada uno que, por lo tanto en este caso arreglar en mesas de trabajo de 24px con acolchado de 3px. Yo también asegúrese de que la casilla para convertir a cada uno a un símbolo, y Add color mask también comprobar.

Como estamos usando una máscara de color, le estamos dados la opción a tomar el color inicial de un selector de color, o de símbolos de nuestra propia biblioteca. Como se puede ver en la imagen de abajo, yo soy capaz de seleccionar los tres símbolos en mi actual documento – perfecto!

Configuring Sketch Icons import
Configuración de los Sketch Icons de importación

Una vez que estamos contentos con nuestra configuración, pulsamos Continue y cabeza sobre el para seleccionar los archivos de icono que desean importar. Los iconos serán añadidas al documento, cuidadosamente dispuesto en mesas de trabajo debidamente nombrado y disponibles como símbolos.

Imported icons into Sketch
Importado los iconos en Sketch

4. Utilizando el icono de símbolos

Si nos fijamos en las capas de la imagen de arriba, cada uno de estos símbolos de icono es esencialmente una capa de color, con el icono de parte inferior actúa como una máscara.

Cuando se agrega uno de estos símbolos de icono a una página en el documento puede cambiar su color utilizando el color Override en la barra lateral derecha. Los símbolos de colores ya preparados están disponibles en un práctico menú desplegable.

Además, si desea cambiar cualquiera de los colores que se establece inicialmente como símbolos, usted puede ir a ese símbolo, cambiar el color del rectángulo dentro de ella y ese cambio se reflejará en todos los iconos afectados en el documento.

5. Creación de una biblioteca de icono

Pero hablemos un poco sobre la construcción de una biblioteca dinámica. Recientemente hemos publicado un tutorial sobre el uso de Sketch Libraries:

Estas bibliotecas a disposición archivos de Sketch individuales a nivel mundial, incluyendo todos los símbolos y estilos compartidos dentro de ellos. Para que los iconos hacen parte de una biblioteca, ir a Preferences > Libraries > Add Library. Seleccione el documento recién creado icono y se añadirá a su lista de bibliotecas.

Ahora puedes crear un nuevo documento (no dude en cerrar su documento icono también) y tienen todos los iconos, colores, disponibles para su uso.

Conclusión

El enchufar de los Sketch Icons nos da gran flexibilidad en materia de gestión de los iconos en el Sketch. Este tutorial rasca la superficie y empezó en la dirección correcta; sepamos bien cómo trabajar con los iconos en Sketch!

Y antes de ir, echa un vistazo de algunos de los conjuntos de icono disponibles en Envato Elements; todo listo y esperando unas añadirlos a sus bibliotecas de icono Sketch dinámicos!

httpselementsenvatocomgraphicsiconssort-by-popular
Icono sistemas Envato Elements
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.