Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Cómo Crear un Conjunto de Iconos de Editor de Texto en Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

En el tutorial de hoy, vamos a abordar otro proyecto de icono, en que vamos poco a poco aprender a crear un conjunto de texto editor de elementos, utilizando algunas de las formas básicas y herramientas encontradas Illustrator vieja buena.

Así, si suena como algo justo encima de su callejón, asegúrese de agarrar una taza fresca de ese jugo de haba mágica y empecemos!

Y no olvide, siempre puede ampliar el paquete por dirigirse a GraphicRiver donde encontrarás una gran selección de Iconos UI.

1. Cómo Crear un Nuevo Archivo de Proyecto

Suponiendo que ya tienes Illustrator para arriba y corriendo en el fondo, traen para arriba y vamos a crear un Nuevo Documento (Archivo >  Nuevo o Control-N) con la siguiente configuración:

  • Número de mesas de trabajo: 24
  • Espacio: 20 px
  • Columnas: 4
  • Anchura: 32 px
  • Altura: 32 px
  • Unidades: píxeles

Y en la pestaña de Avanzado:

  • Modo de color: RGB
  • Efectos de rasterizado: Pantalla (72ppi)
  • Escuchar Mode: por defecto
setting up a new document

2. Cómo Configurar una Cuadricula Personalizada

Puesto que vamos a crear los iconos usando un flujo de trabajo perfectamente, te queremos configurar una Cuadricula agradable para que podemos tener control total sobre nuestras formas.

Paso 1

Ir a Edición > Preferencias > Guías y Cuadrícula, y ajuste la siguiente configuración:

  • Línea de cuadrícula cada: 1 px
  • Subdivisiones: 1
setting up a custom grid

Consejo Rápido: usted puede aprender más sobre cuadriculas leyendo esta pieza detallada sobre Como Funciona el Sistema de Cuadricula de Illustrator.

Paso 2

Una vez que hemos configurado nuestra red personalizada, todo lo que necesitamos hacer para garantizar nuestras formas nítidas es permitir el Ajustar a Cuadrícula y Ajustar a Píxeles en el menú Ver, que va a transformar en Ajustar a Píxeles cada vez que entras en el modo Previsualización de Píxeles (si eres usin g una versión anterior del software).

Ahora, si eres nuevo en el conjunto "flujo de trabajo perfectamente", recomiendo que vas a través de mi tutorial de Como Crear una Mesa de Trabajo Pixel-Perfect, que te ayudarán a ampliar sus conocimientos técnicos en ningún momento.

3. Cómo Configurar las Capas

Con el nuevo documento creado, sería una buena idea de nuestro proyecto utilizando un par de capas para separar las redes de referencia de los iconos actuales de la estructura. Si usted está familiarizado con mis tutoriales anteriores, se dará cuenta de que con esto estamos tomando un enfoque ligeramente diferente, ya que estamos basando el proyecto en las mesas de trabajo en vez de capas debido a la cuenta alta del icono.

Dicho esto, abrir el panel Capas y crear un total de dos capas, que renombrará como sigue:

  • capa 1: cuadrículas de referencia
  • capa 2: iconos
setting up the layers

4. Cómo Crear las Cuadriculas de Referencia

Las cuadrículas de referencia (o rejillas base) son un conjunto de superficies de referencia delimitado precisamente, que nos permiten construir nuestros iconos centrándose en tamaño y consistencia.

Generalmente, el tamaño de las cuadrículas determina el tamaño de los iconos actuales, y siempre deben ser la primera decisión que una vez que comienza un nuevo proyecto, ya que siempre querrás comenzar desde el tamaño más pequeño posible y basarse en.

Ahora, en nuestro caso, vamos a crear el pack de iconos con un tamaño, más exactamente de 32 x 32 px, que se encuentra en el lado más pequeño de la escala.

Paso 1

Asegúrese de que usted está en la capa derecha (que sería el primero de ellos) y agarrar la Herramienta Rectángulo (M) y crear un 32 x 32 px naranja (#F15A24) square que será centro alinear a la primera mesa de trabajo y utilizar para definir el tamaño total de nuestros iconos.

creating the main shape for the reference grid

Paso 2

Añadir un pequeño 28 x 28 px uno (#FFFFFF) que colocará encima de la forma anterior, ya que actuará como nuestra área de dibujo activo, dando así un relleno de 2 px versátil para trabajar con.

creating the main shape for the active drawing area

Paso 3

Seleccionar y agrupar los dos cuadrados juntos usando el atajo de teclado Control-G y luego crear las cuadrículas restantes con 23 ejemplares (Control-C > Control-F) que se coloque en cada una de las mesas de trabajo vacía. Tómese su tiempo y una vez que haya terminado, asegúrese de que bloqueo la capa actual antes de pasar a la siguiente sección.

adding the remaining reference grids

5. Cómo Crear el Icono de Justificar

Suponiendo que usted ha conseguido crear y colocar las redes de referencia poco, pasemos a la siguiente capa (que sería el segundo) y vamos a poner en marcha el proyecto creando el primer icono de la serie.

Paso 1

Empezar por crear la línea horizontal inferior utilizando un 2 px Trazo grueso, que color usar #252A2D y sitúe a una distancia de 2 px desde el centro del borde inferior de la zona dibujo activa.

creating the bottom line for the justify icon

Paso 2

Acabar con el icono añadiendo las líneas restantes con dos copias (Control-C > Control-F dos veces) de la que nos hemos creado, que nos se acumula verticalmente a una distancia de 4 px de la original. Una vez haya terminado, seleccione y, los tres de ellos antes de pasar a la siguiente red de referencia usando el atajo de teclado Control-G.

finishing off the justify icon

6. Cómo Crear el icono de Alinee a Izquierda

Tan pronto como hemos terminado de trabajar en el segundo icono, podemos pasar a la siguiente área dibujo activo, donde será rápidamente armamos nuestro otro.

Paso 1

Puesto que algunos de los iconos próximos se basan en que apenas hemos terminado de trabajar, vamos a hacer una copia (Control-C) que luego pegue (Control-F) en la actual red de referencia, asegurándose de hacer clic en la mesa de trabajo subyacente primero para hacerla activa.

creating the main shapes for the left align icon

Paso 2

Aislar el trazo medio haciendo doble clic sobre él y luego acortar su longitud de 24 px a 16 px — usted puede hacer esto seleccionando su punto de anclaje adecuado utilizando la Herramienta de Selección Directa (A) y luego lo empuja hacia la izquierda por 8 px mediante la herramienta Mover (click derecho > Transformar > Mover > Horizontal > - 8 px).

Una vez haya terminado, pulse la tecla Escape para salir del Modo de Aislamiento y luego realizar un copiar (Control-C) del icono resultante antes de pasar a la siguiente cuadricula.

finishing off the left align icon

7. Cómo Crear el Icono Alinear a Derecha

A continuación, vamos a crear rápidamente la derecha alinear el icono, así que asegúrese de que está a la derecha mesa de trabajo (que sería la tercera) y vamos a empezar.

Paso 1

Pegar una copia del icono que apenas hemos terminado de trabajar en el área de dibujo activo vacío usando el atajo de teclado Control-F.

creating the main shapes for the right align icon

Paso 2

Ajustar la copia que hemos creado solo por reflejar verticalmente utilizando la herramienta Reflejo (click derecho > Transformar > Reflejar > Vertical). Una vez que termines, no olvides hacer un copiar (Control-C) del icono resultante, antes de pasar a la siguiente.

finishing off the right align icon

8. Cómo Crear el Icono de Alinee al Centro

Puesto que ningún editor de texto es completo sin un centro alinear opción, vamos a agregar rápidamente uno de los momentos siguientes.

Paso 1

Pegar una copia del icono anterior en la cuarta mesa de trabajo utilizando el atajo de teclado Control-F por lo que lo coloca en exactamente la misma posición.

creating the main shapes for the center align icon

Paso 2

Aislar el movimiento medio Borde de la copia que hemos creado simplemente haciendo doble clic sobre él, y luego centro Alinear a la mesa de trabajo subyacente mediante opción de Alinear Horizontal Centro del panel Alinear. Una vez que termines, rápidamente salir de Modo Aislamiento pulsando la tecla Escape.

finishing off the center align icon

9. Cómo Crear el Icono de Aumentar Sangría

Mover sucesivamente a la segunda fila y luego acercarse a la primera mesa de trabajo donde vamos a empezar trabajando en nuestra siguiente icon.

Paso 1

Crear principales formas del icono utilizando una copia (Control-C) de la justificar, que le pegamos (Control-F) en el área de dibujo activado actual ajuste por aislar y acortamiento de la longitud de su medio y fondo Bordes de 24 px a 12 px utilizando la herramienta de Mover (Puntos de Anclaje de Izquierda Seleccionados > click derecho > Transformar > Mover > Horizontal > 12 px).

creating and adjusting the main shapes for the increase indent icon

Paso 2

Añadir la forma principal de la flecha de la derecha utilizando un rectángulo de 8 x 12 px, que color usar #252A2D y luego coloque en el lado izquierdo de la zona de dibujo activo, como se ve en la imagen de referencia.

creating the main shape for the arrow of the increase indent icon

Paso 3

Final apagado el icono girando la forma que hemos de crear en una flecha agregando primero un ancla nueva del punto al centro de su borde derecho usando la herramienta de Añadir Punto de Ancla (+) y luego quitar la parte superior e inferior los utilizando la herramienta de Eliminar Punto de ancla (-). Una vez que termines, salir del modo de Aislamiento y luego hacer una copia (Control-C) del icono todo antes de pasar a la siguiente mesa de trabajo.

finishing off the increase indent icon

10. Cómo Crear el Icono de Disminución de Sangría

Suponiendo que haya terminado de trabajar en el icono anterior, posicionarte en la mesa de trabajo vecino, donde vamos a crear su versión alternativa.

Paso 1

Utilice el método abreviado de teclado Control-F para pegar una copia del icono de sangría del aumento en el área de dibujo activado actual.

creating the main shapes for the decrease indent icon

Paso 2

Haga doble clic en la flecha pequeña para aislarlo y luego ajustar rápidamente reflejando verticalmente utilizando la herramienta Reflejo (click derecho > Transformar > Reflejar > Vertical). Una vez que termines, no olvides salir del Modo de Aislamiento mediante la tecla Escape antes de pasar al siguiente icono.

finishing off the decrease indent icon

11. Cómo Crear el Icono de Agregar Espacio Antes de Párrafo

Tan pronto como haya terminado de trabajar en el icono de sangría de la disminución, podemos pasar a la siguiente área dibujo activo, donde crearemos nuestro siguiente punto.

Paso 1

Crear las formas principales del icono con una copia (Control-C) de la justificar, que se pega (Control-F) en la actual mesa de trabajo, asegurándose de que el centro alinear al borde inferior de la zona dibujo activa.

creating the main shapes for the add space before paragraph icon

Paso 2

Desagrupar la copia que nos hemos pegado justo (click derecho > DesagruparShift-Control-G) y ajuste mediante la eliminación de su Trazo de movimiento superior seleccionándolo y pulsando Delete.

adjusting the shapes of the add space before paragraph icon

Paso 3

Acabar con el actual icono añadiendo la flecha hacia abajo. Vamos a crear utilizando un rectángulo de 12 x 8 px (#252A2D), que se ajusta mediante la adición de un nuevo punto de ancla en el centro de su borde inferior con la herramienta de Añadir Punto de Ancla (+), y luego quitar la parte inferior unos utilizando la herramienta Elimina de Punto de Ancla (-). Una vez que termines, seleccionar y agrupar (Control-G) todas las formas de tres antes de pasar a la siguiente.

finishing off the add space before paragraph icon

12. Cómo Crear el Icono de Añadir Espacio Después de Párrafo

A continuación, vamos a crear rápidamente una versión alternativa del icono que apenas hemos terminado de trabajar.

Paso 1

Crear una copia (Control-C) del icono anterior, que vamos a pegar (Control-F) en el área de dibujo activado vacía, como se ve en la imagen de referencia.

creating the main shapes for the add space after paragraph icon

Paso 2

Desagrupar la copia que nos hemos creado (click derecho > DesagruparShift-Control-G) y luego ajuste el icono por la posición de sus Trazos con la flecha como se ve en la imagen de referencia, asegurándose de seleccionar y agrupar (Control-G) antes de mover a los bancos la después de uno.

finishing off the add space after paragraph icon

13. Cómo Crear el Icono de Tipo Herramienta

Suponiendo que ya ha mudado a la tercera fila, vamos a empezar a trabajar en la categoría siguiente, que tiene que ver con formato de texto.

Paso 1

Crear la sección superior del icono usando un rectángulo de 20 x 6 px un Trazo grueso de 4 px, que color usar #252A2D y luego centro alinear al borde superior de la zona dibujo activa.

creating the upper section of the type tool icon

Paso 2

Abrir el camino de la forma que hemos creado añadiendo un nuevo punto de anclaje al centro de su borde inferior con la herramienta de Añadir Punto de Ancla (+) inmediatamente seleccionar y quitar presionando Eliminar.

opening up the path of the upper section of the type tool icon

Paso 3

Añadir el centro sección usando un 20 px alto 8 px grueso Trazo línea vertical (#252A2D), que será centro alinear a la forma anterior, como se ve en la imagen de referencia.

adding the vertical section to the type tool icon

Paso 4

Final apagado el icono mediante la creación de la sección inferior con una 16 px ancho 4 px de Trazo línea gruesa (#252A2D), que se centra alinear al borde inferior de la zona dibujo activa. Tómese su tiempo y una vez que haya terminado, seleccione y (Control-G) todas las formas de tres juntas antes de pasar a la siguiente.

finishing off the type tool icon

14. Cómo Crear el icono Negrita

A continuación, vamos a crear rápidamente uno los iconos más utilizados en toda historia de editor de texto, así que asegúrate de que has colocado a ti mismo en la próxima mesa de trabajo y vamos a saltar directamente a él.

Paso 1

Crear la sección inferior del icono con un cuadrado de 12 x 12 px con un Trazo grueso 4 px, que color usar #252A2D y luego centro alinear al borde inferior de la zona dibujo activa.

creating the lower section of the bold icon

Paso 2

Ajustar rápidamente la forma que hemos de crear estableciendo el Radio de las esquinas derecha 6 px desde dentro Rectángulo Propiedades del panel Transformar.

adjusting the lower section of the bold icon

Paso 3

Acabar con el actual icono añadiendo la parte superior con un cuadrado de 8 x 8 px con un Trazo grueso de 4 px (#252A2D), que ajustaremos estableciendo el Radio de las esquinas derecha a 4 px desde dentro Rectángulo Propiedades del panel Transformar. Una vez haya terminado, coloque la forma resultante como se ve en la imagen de referencia, asegurándose seleccionar y agruparlos después usando el atajo de teclado Control-G.

finishing off the bold icon

15. Cómo Crear el Icono de Subrayado

Como de costumbre, hacer su camino a la próxima mesa de trabajo, donde veremos como poner el icono de subrayado.

Paso 1

Inicio mediante la creación de la sección más baja usando un 24 px ancho 4 px con un Trazo línea gruesa, que color usar #252A2D y luego centro alinear al borde inferior de la zona dibujo activa.

creating the lower section of the underline icon

Paso 2

Crear la forma principal para la letra "U" con un rectángulo de 12 x 14 px con un Trazo grueso de 4 px (#252A2D), que se centra alinear al borde superior de la zona dibujo activa para que su ruta superpone a eso.

creating the upper section of the underline icon

Paso 3

Empezar a ajustar la forma estableciendo el Radio de sus esquinas inferiores a 6 px desde dentro Rectángulo Propiedades del panel Transformar.

adjusting the upper shape of the underline icon

Paso 4

Acabar con el icono abriendo el camino de la forma que hemos anterior ajustado, añadiendo un nuevo punto de ancla en el centro de su borde superior utilizando la Herramienta de Añadir Punto de Ancla (+), y luego inmediatamente seleccionar y eliminar presionando Eliminar. Una vez que termines, no olvides seleccionar y agrupar las dos formas juntas usando el atajo de teclado Control-G.

finishing off the underline icon

16. Cómo Crear el Icono de Cursiva

Ahora hasta el último icono de la fila actual, así que suponiendo que ya has colocado a ti mismo en la mesa de trabajo, vamos a crear el siguiente punto.

Paso 1

Crear el fondo y parte superior de la "I" en forma de carta con dos 16 px ancho 4 px grueso de Trazo líneas (#252A2D), que se posiciona como se ve en la imagen de referencia.

creating the bottom and upper sections of the italic icon

Paso 2

Acabar con el actual icono añadiendo la línea diagonal une las dos secciones horizontales con un Trazo grueso de 4 px (#252A2D). Como siempre, una vez que termines, grupo (G-Control) y seleccione las tres formas juntos antes de pasar a la siguiente.

finishing off the italic icon

17. Cómo Crear el Icono de Traer al Frente

Suponiendo que se ha mudado a otra fila, acercarse a su primera mesa de trabajo y vamos a crear nuestro icono siguiente.

Paso 1

Inicio creando la forma frontal con un cuadrado de 12 x 12 px con un Trazo grueso 4 px, que color usar #252A2D y luego alinear el área dibujo activa esquina superior izquierda.

creating the front shape of the bring to front icon

Paso 2

Crear la forma posterior con otro cuadro de 12 x 12 px con un Trazo gruesa de 4 px (#252A2D), que se alinearán a la activa zona de dibuja esquina inferior derecha.

creating the back shape of the bring to front icon

Paso 3

Ajustar la forma de la plaza que nos hemos creado añadiendo un conjunto de nuevo punto de ancla donde sus caminos cruzan de uno utilizando el Herramienta Agregar Punto de Ancla (A), asegúrese de colocar su esquina uno como se ve en la imagen de referencia.

adjusting the back shape of the bring to front icon

Paso 4

Terminar el icono Agregar un relleno a la forma resultante, que vamos a crear utilizando un copiar (Control-C) que pegamos en lugar (Control-F) y luego ajustar poniendo su Trazo con su Relleno (Shift-X). Una vez que termines, seleccionar y agrupar formas (Control-G) los dos, haciendo lo mismo para el icono de todo luego.

finishing off the bring to front icon

18. Cómo Crear el Icono de Enviar

Por ahora, ya conoce el taladro, así que salta en la próxima mesa de trabajo y vamos a seguir trabajando en nuestro próximo artículo.

Paso 1

Crear la forma trasera con un Trazo gruesa de 4 px (#252A2D), que se alinearán a la activa zona de dibuja de un cuadrado de 12 x 12 px esquina superior izquierda.

creating the back shape of the send to back icon

Paso 2

Acabar con el actual icono añadiendo la forma frontal con otra cuadro de 12 x 12 px con un Trazo grueso 4 px (#252A2D) y una forma de relleno del 12 x 12 px (#252A2D), que vamos a grupo (Control-G) y luego alinee la esquina inferior derecha de la zona dibujo activa. Una vez haya terminado, seleccione y (Control-G) todas las formas juntas antes de pasar a la siguiente.

finishing off the send to back icon

19. Cómo Crear el Icono de Insertar Encabezado

Asegúrese de que usted mismo ha colocado en la mesa de trabajo vecina vacía y entonces comencemos trabajando en nuestro siguiente icono.

Paso 1

Crear la sección superior con un rectángulo de 20 x 6 px y Trazo grueso 4 px, que color usar #252A2D y luego centro alinear al borde superior de la zona dibujo activa.

creating the upper section of the insert header icon

Paso 2

Añadir la forma principal para la parte inferior con un rectángulo de 20 x 8 px con Trazo grueso 4 px (#252A2D), que se posiciona para que su camino de fondo superpone al borde del área de dibujo activo, como se ve en la imagen de referencia.

creating the lower section of the insert header icon

Paso 3

Abrir el camino de la forma que hemos creado añadiendo un nuevo punto de anclaje al centro de su borde inferior con la Herramienta Añadir Punto de Ancla (+) inmediatamente seleccionar y quitar presionando Eliminar.

adjusting the lower section of the insert header icon

Paso 4

Final apagado el icono añadiendo poco segmento de relleno con un rectángulo de 12 x 4 px (#252A2D), que se centra alinear al borde inferior de la zona dibujo activa. Una vez haya terminado, seleccione y todas las formas de composición usando el atajo de teclado Control-G.

finishing off the insert header icon

20. Cómo Crear el Icono de Insertar Pie de Página

A continuación, vamos a crear otra versión del icono de encabezado, así que asegúrate de posicionarte en la siguiente área de dibujo activado y vamos a empezar.

Paso 1

Crear una copia (Control-C) del icono anterior, que luego pegamos en la mesa de trabajo actual usando el atajo de teclado Control-F.

creating the main shapes for the insert footer icon

Paso 2

Terminar el icono actual horizontalmente, lo que refleja la copia que nos hemos creado (click derecho > Transformar > Reflect > Horizontal), haciendo que al centro otra vez luego.

finishing off the insert footer icon

21. Cómo Crear el Icono de Lista

Nuestro siguiente punto es imprescindible para cualquier buen bloc, así que Súbete a la siguiente fila y vamos a saltar directamente a él.

Paso 1

Crear la bala superior usando un cuadrado de 4 x 4 px, que color usar #252A2D y luego alinear borde izquierdo del área dibujo activo, colocándolo a una distancia de 2 px desde su cima uno.

creating the main bullet for the list icon

Paso 2

Agregue el elemento de la lista usando un 16 px ancho 4 px de Trazo línea gruesa (#252A2D), que colocará junto a la bala como se ve en la imagen de referencia, asegurándose de seleccionar y agrupar (Control-G) los dos juntos antes de pasar al siguiente paso.

adding the top horizontal line to the list icon

Paso 3

Acabar con el icono de crear dos copias (Control-C > Control-F dos veces) de las formas que sólo hemos agrupado, que verticalmente se acumulará por debajo a una distancia de 4 px de la original. Una vez que las formas en su lugar, no olvide seleccionar y agrupar a todos ellos juntos usando el atajo de teclado Control-G.

finishing off the list icon

22. Cómo Crear el Icono de Sub-Lista

Tenemos ahora un icono de la lista, pero por qué pasamos a la siguiente mesa de trabajo y crear un subnivel uno.

Paso 1

Empezar por crear una copia (Control-C) del icono anterior, que pegará en el área de dibujo activado actual usando el atajo de teclado Control-F.

creating the main shapes for the sublist icon

Paso 2

Acabar con el actual icono aislar los elementos de lista medio e inferior, y luego ajustando su longitud para que sus balas se alinean con la superior como se ve en la imagen de referencia. Tómese su tiempo y una vez que termines, salir del Modo de Aislamiento pulsando la tecla Escape.

finishing off the sublist icon

23. Cómo Crear el Icono de Insertar Salto de Página

Número 19 de la lista de nuestros artículos es el icono de salto de página, que vamos a crear en un abrir y cerrar de ojos.

Paso 1

Empezar por crear la línea central usando un 24 px ancho con un Trazo grueso 4 px, que color usar #252A2D y luego centro alinear a la mesa de trabajo subyacente.

creating the center line for the insert page break icon

Paso 2

Añadir las formas principales de las páginas con dos rectángulos de  12 x 6 px con Trazo grueso 4 px (#252A2D), que nos se coloque en los bordes superior e inferior de la zona activa del dibujo como se ve en la imagen de referencia.

adding the main rectangles for the insert page break icon

Paso 3

Acabar con el icono abriendo los caminos de las formas que hemos creado solo por añadir un nuevo punto de ancla en el centro de sus bordes exteriores inmediatamente seleccionar y eliminar usando la tecla Delete. Una vez haya terminado, seleccione y, todos tres formas usando el atajo de teclado Control-G.

finishing off the insert page break icon

24. Cómo Crear el Icono de Redimensionado

A continuación, tenemos otro simple pero útil herramienta que la mayor parte del tiempo va pasado por alto, pero no hoy.

Paso 1

Crear el cuerpo principal del icono con un cuadrado de 20 x 20 px con un Trazo grueso 4 px (#252A2D), que se centra alinear con la mesa de trabajo subyacente.

creating the main shape for the resize icon

Paso 2

Acabar con el icono actual creando un cuadrado pequeño de 12 x 12 px con un Trazo gruesa 4 px (#252A2D), que se alinearán a la activa zona de dibuja esquina inferior derecha. Una vez que termines, no olvides seleccionar y agrupar (Control-G) los dos juntos antes de pasar a la siguiente.

finishing off the resize icon

25. Cómo Crear el Icono de Formas

Ahora hasta nuestro sexto y último fila de iconos, así que suponiendo que ya has colocado a ti mismo en el primero de sus mesas de trabajo, vamos a crear nuestro siguiente punto.

Paso 1

Comienzo por crear un círculo de 16 x 16 px con un Trazo grueso 4 px, que color usar #252A2D y luego alinear el área dibujo activa esquina superior izquierda.

creating the circle for the shapes icon

Paso 2

Agregar un cuadrado pequeño de 12 x 12 px con Trazo grueso 4 px (#252A2D), que colocará en el círculo como se ve en la imagen de referencia.

adding the square to the shapes icon

Paso 3

Acabar con el actual icono añadiendo una serie de nuevos puntos de ancla a los bordes de la plaza donde superponen los dos caminos con Herramienta Añadir Punto de Ancla (+), seleccionando y eliminando su esquina uno usando la tecla Eliminar. Como siempre, no olvide seleccionar y agrupar formas (Control-G) los dos una vez que termines.

finishing off the shapes icon

26. Cómo Crear el Icono de Gráfico

Si te gusta gráficos, estarás feliz de saber que vamos a construir uno de los nuestros en los momentos siguientes.

Paso 1

Crear la parte inferior del icono mediante un 24 px ancho con un Trazo línea gruesa 4 px (#252A2D), que se centra alinear al borde inferior de la zona dibujo activa.

creating the lower section of the chart icon

Paso 2

Añadir los segmentos verticales de la tabla usando tres 16 px de alto con Trazos gruesos 4 px (#252A2D), que se posiciona 4 px entre sí horizontalmente, y luego centro en borde superior de la zona dibujo activa.

adding the vertical lines to the chart icon

Paso 3

Terminar la tabla, ajustando la longitud de sus segmentos vertical externos como se ve en la imagen de referencia. Tómese su tiempo, y una vez que haya terminado, asegúrese de que usted seleccione y grupo (Control-G) todos lo icono de componer formas antes de pasar a la siguiente.

finishing off the chart icon

27. Cómo Crear el Icono de Tabla

El siguiente punto de nuestra lista es uno que usted probablemente use bastante, así que asegúrate de posicionarte en la próxima mesa de trabajo y vamos a aprender rápidamente cómo crearla.

Paso 1

Empezar a trabajar en la parte superior mediante la creación de una cuadro de 8 x 8 px con Trazo gruesa 4 px (#252A2D), que se alinearán a la activa zona de dibuja esquina superior izquierda.

creating the smaller square for the table icon

Paso 2

Añadir uno mayor 12 x 8 px con el mismo Trazo gruesa 4 px (#252A2D), que colocará en la Plaza lateral a la derecha para que sus contornos se superponen.

adding the top rectangle to the table icon

Paso 3

Crear la forma izquierda para la parte inferior del icono con un rectángulo de 8 x 12 px con un Trazo grueso 4 px (#252A2D), que se alinearán a la activa zona de dibuja esquina inferior izquierda.

adding the bottom rectangle to the table icon

Paso 4

Acabar con el actual icono agregando un cuadrado de 12 x 12 px con un Trazo grueso 4 px (#252A2D) en la esquina inferior derecha de la activa zona de dibuja, asegurándose de seleccionar y agrupar los cuatro juntos más adelante usando el atajo de teclado Control-G.

finishing off the table icon

28. Cómo Crear el Icono de Regla

Ahora estamos hasta nuestro último icono, así que su camino a la mesa de trabajo restante y vamos a envolver las cosas!

Paso 1

Crear la sección superior de la regla con un rectángulo de 20 x 6 px con Trazo grueso 4 px (#252A2D), que se centra alinear al borde superior de la zona dibujo activa.

creating the upper section of the ruler icon

Paso 2

Terminar el icono y con él el proyecto, agregando un rectángulo de 6 x 20 px con un Trazo grueso 4 px (#252A2D), que se centra alinear con el área de dibujo activado. Como siempre, una vez que termines, no olvide seleccionar y grupo (Control-G) las dos formas juntas antes golpear el botón guardar.

finishing off the ruler icon

¡Buen Trabajo!

Podría haber sido uno más de lo habitual, pero si lo hecho hasta el final, ahora debe tener un buen conjunto de práctico icono pequeño que se puede poner para utilizar en cualquier proyecto futuro.

Como siempre, espero que ha podido mantenerse al día con cada paso y aprendió algo nuevo y útil en el camino.

Dicho esto, si usted tiene alguna pregunta, no dude en publicar en la sección de comentarios y voy a volver a usted tan pronto como pueda!

finished project preview
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.