Cómo hacer íconos pixelados perfectos | Margarita Ivanchikova | Skillshare

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Cómo hacer íconos pixelados perfectos

teacher avatar Margarita Ivanchikova, Icon and Motion Designer

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

9 lecciones (11min)
    • 1. Introducción

      1:21
    • 2. Dónde empezar

      2:42
    • 3. Anchura de trazo

      1:15
    • 4. Elementos de interior

      1:57
    • 5. Curvas de Bezier

      0:50
    • 6. Cantidad de detalles

      1:19
    • 7. Perspectiva

      0:30
    • 8. Escala

      0:54
    • 9. Final

      0:32
  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

923

Estudiantes

7

Proyectos

Acerca de esta clase

b604e43b

Dibujar un icono de aspecto no es suficiente de la dibujar un buen parte. Hacer que el icono sea mayor y en la que muchos dispositivos es importante si quieres que compre o utilices de íconos. Es que requiere mucho pensamiento y experiencia, y eso es exactamente lo que te voy a ayudaré.

Mi nombre es Margarita y en los 2 años que he estado dibujando íconos para Icons8.com con los iconos que se emiten de un equipo de diseño mayor mismo. Y todos 40 000 íconos de ellos son perfectos.

Así que tune y observa cómo hacer que tus íconos hermosos de íconos sean perfectos.

Conoce a tu profesor(a)

Teacher Profile Image

Margarita Ivanchikova

Icon and Motion Designer

Profesor(a)

I love creating animations, vector graphics, clean geometric shapes, and cute characters.

View my profile on Dribbble

Get printed artwork at Society6

 

Ver perfil completo

Calificaciones de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%
Archivo de reseñas

En octubre de 2018, actualizamos nuestro sistema de reseñas para mejorar la forma en que recopilamos comentarios. A continuación, se muestran las reseñas escritas antes de esa actualización.

¿Por qué unirse a Skillshare?

Toma las galardonadas clases originales de Skillshare

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Toma clases sobre la marcha con la aplicación Skillshare. Transmite o descarga para verlas en el avión, el metro o donde aprendas mejor.

Transcripciones

1. Introducción: Hola, soy Margarita. Soy una diseñadora que puedo decir dot com Hay muchos diseñadores que hacen bellas escrituras de vencedor y no saben por qué tienen que ser grandes, tan perfectos al mismo tiempo. Los vectores fuera de curso son escalables. Se verán geniales y suaves cuando sean un grande. Pero, ¿y si usas un icono, no como administración? Si se trata de un elemento de interfaz de usuario en una pequeña imagen de ventas de 16 a 50 grandes puede convertirse solo en una floristería. ¿ Por qué nos preocupamos por el resto de ustedes? Porque así es como se renderizará en realidad en la pantalla del dispositivo. Todos los Aikens hechos en Victor ex se despertarán cuando se muestren en una pantalla de un portátil o dispositivo móvil. Si estás haciendo Aikens con la esperanza de que otras personas lo usen, entonces deben ser no solo hermosos en estilo, deben ser útiles y y puedes hacerlos perfectos. Grandes ayudan en esta lección, capaces diariamente alrededor de seis sospechosos a tener en cuenta mientras diseña. Y Aiken, estaré usando Adobe Illustrator. Pero en realidad no depende del software. Puedes hacer pixel perfecto Aikens en boceto para otro reductivo gráfico. Tú eliges 2. Dónde empezar: vamos a empezar de configurar y Adobe Illustrator Document para crear una gran venta perfecta Aiken para estos click de nuevo y dicho grandes Seres como sindicatos y luego un número entero fuera de grandes celdas también y esconderse. Entonces iríamos a las preferencias. Por esto. Simplemente podrías presionar el control K en tu teclado y luego ir a guías y avaricia. Voy a establecer un píxel para línea de avaricia y uno para subdivisiones. Haga clic en Aceptar. Entonces puedes ir a la nueva vista mostrar genial, o puedes usar un atajo y se enciende un cerdo acordado, y cada guía muestra los bordes de un píxel. Entonces puedes volver a ir a muchos de ustedes. Y hay algunas opciones. Blag se quebró. Se partió una célula de pic. Boyne se quebró. Acordado. Voy a romperme una gran opción. Ahora se acabó la configuración, y todas las formas que creo lo van a cortar a celdas de pico. Sus puntos se van a colocar justo en las intersecciones fuera de las líneas de la cuadrícula con el fin de comprobar que tu no puedo hablar tan perfecto y se va a descansar levantado de la mejor manera posible puedes convertir el pixel conocido prevue para este tipo de cosas. Normalmente uso atajos, y hace que mi trabajo sea mucho más rápido. Ahora voy a apagar, romperé a los cerdos y cargar y mostrar cómo se verían las formas sin ella. Se puede ver cómo se borran las imágenes. Si quieres ver algunas opciones más off snapping to pick cells, puedes ir a la esquina superior derecha fuera de la ventana, y puedes jugar con todas las casillas de verificación para encontrar las mejores preferencias para tu trabajo . Entonces, ¿cómo arreglar realmente el Victor Aiken Eso no es pixel perfecto en primer lugar? Básicamente hay dos formas de hacer que el Eiken sea más agudo. En primer lugar, me voy a encender chasped, acordar bolsa de adopción en. Entonces voy a la verdad selección directa dedo del pie, y para arreglarlo puedo. Puede seleccionar los puntos y simplemente arrastrarlos a la gran intersección. O bien puede seleccionar el punto y fijar su posición en la parte superior de la ventana. Por lo general, lo mejor es mantener sus números enteros, por lo que los fundamentos son tan simples como eso. Solo quieres mantener los puntos en la gran plateada, y luego estás puedo ser crujiente y afilada en los restaurantes para ti 3. Anchura de trazo: de lo siguiente que vamos a hablar es del derrame cerebral. Con aquí, se pueden ver ejemplos de trazos fuera de 24 y seis píxeles, y del otro lado, a los 13 y cinco píxeles, se puede ver que todas las líneas están sentadas en lo grande tan grande. Pero, ¿qué pasa si descansamos los levantó? Se pueden ver las líneas con el trazo con números pares están descansando perfectamente. Pero los números impares que los haríamos borrosas, así que vamos a hacer un desplazamiento fuera de la línea misma. Simplemente recorre un píxel a un lado, por lo que esta línea está de pie justo en medio de la gran venta. Y como puedes ver, el trazo se siente todo a lo grande. Entonces y esto le pasa a las otras líneas cuando están con es un número impar. Lo peor que puedes hacer al trazo es decir no todo el número. Entonces no importa si está en lo grande, tan grande o ligeramente ofrecido. Se va a difuminar de todos modos, así que es mejor cuando tu trazo con es un número par para dar la línea en la cuadrícula de píxeles, y cuando trazos con es un número impar para mantenerlo justo en el medio de lo grande así que 4. Elementos de interior: Otra cosa que quizá quieras considerar es cómo los elementos internos de una Nikon podrían afectar su tamaño. Por ejemplo, veamos un círculo y un signo de exclamación en él. Las versiones correctas del mismo son el hombro en la parte superior, y las incorrectas están abajo. Cuando la ICANN tiene que pixel stroke y un signo de exclamación está en con también para recoger celdas, entonces el tamaño del círculo debe ser un número par. Entonces el signo de exclamación puede ser centrado en el círculo y al mismo tiempo, ser agudo. Veamos qué sucede cuando el mismo círculo se hace un píxel más grande y el signo de exclamación está centrado en necesidad. Entonces es el descanso. Arised es un horrible depender azul, así que no queríamos que eso le pasara a tu Aiken. Ahora veamos el círculo con un trazo de píxel y un signo de exclamación con también un píxel. Su tamaño y su posición deben permitir que los cualquier detalle se coloquen en el centro y que se descanse bien al mismo tiempo para que podamos ver el elemento, el trazo. Todo está relacionado con el tamaño del propio Eiken. hay algo más que hay que tener en cuenta a la hora de diseñar flechas u otros objetos afilados . Por ejemplo, haces una flecha cuando odian. Su punta de flecha no es par, y su punto se coloca justo en la codicia en cada sitio fuera. Este mismo punto medio de píxel es transparente, por lo que el árabe se ve un poco redondeado. Es posible que prefieras hacer una flecha, que está en altura y en número. Entonces el punto de la punta de flecha va a estar en medio de la gran venta, por lo que la punta de flecha va a estar más afilada. Cada flecha es mejor para su propio contexto, por lo que definitivamente depende de ti qué opción elegir. 5. Curvas de Bezier: Ahora veamos cómo haces que el pixel sea perfecto. Puedo trabajar inglés, curas más ocupadas, por ejemplo. Tomemos el ícono oscuro. Voy a encender el griego, la gran revisión de Soap, y luego acercar su grande. Selecciono el formulario, por lo que ahora vemos los cambios, toda la forma misma. Se sale un poco de los píxeles, por lo que son un poco transparentes. No queremos un lío así. Entonces básicamente drogamos el punto al griego. Y luego ajustamos de la manera en que el mango del punto no sale de la línea de rejilla que muestra el borde de la forma misma. En ocasiones se puede agregar un poco más. Todo lo que quieres hacer es respetar la codicia. Entonces veamos qué tan oscuro se ve en Victor. En la mayoría de los casos, parece más bien lo mismo que un vencedor. Yo puedo, pero se ve jugando mucho mejor como una gran revisión de jabón 6. Cantidad de detalles: cuando estás diseñando y yo puedo. Todo depende de su tamaño, incluso la cantidad de detalles que puedes incluir en él. Encontré este ejemplo de bellas ilustraciones en la Web. Se distribuyó como un conjunto de iconos y elijamos un ICA y veamos cómo se ve cuando el descanso se levantó y se escaló hacia abajo. Digamos que lo hacemos 30 células grandes del lado más grande. Ahora veamos cómo será. Renderizarlo aunque más grande pueda ¿No es pixel perfecto? Todavía se pueden ver muchos detalles que no son visibles en la versión más pequeña del vagón. Entonces cuando estás haciendo algo detallado y hermoso, tienes que predecir el tamaño del Eiken que será un colocado en la interfaz o en la página web. Lo que hemos hecho para uno de nuestros sets es que predijimos para diferentes tamaños de una Nikon, y hemos incluido diferente cantidad de detalles para cada uno. Tenemos cada Aiken tamaño ING 80 pixels, 40 grandes vendas, 30 pixels y 16 células de cerdo. La cantidad de píxeles que puedes permitirte en cada uno de ellos es muy diferente, por lo que incluimos diferente cantidad de detalles en cada tamaño 7. Perspectiva: lo siguiente que depende del tamaño del que puedo hacer es el uso de la perspectiva. Por ejemplo, se hace un Aiken isométrico grande de lo que se ve bien. Renderíalo en alguna pantalla. Tiene algunos pequeños detalles, algunas líneas diagonales. Pero cuando es un diminuto te puedo hacer para un lugar muy particular toda la interfaz, entonces se va a desenfocar en todos los detalles solo se perderán. Por lo que para tamaños pequeños de Aiken, es mejor apegarse al estilo de icono plano. 8. Escala: cuando se riken esté listo y sabes que es de tamaño básico, te vas a enfrentar la escalabilidad o el ícono. Por ejemplo, creaste una Nikon que tiene 32 píxeles de grande entonces, si quieres hacerlo más grande, la mejor manera de hacerlo es hacerlo dos o tres veces es grande. Lo importante aquí es usar un número entero para multiplicar el tamaño en él. Este caso, cuando la escala que pueda estar descansada arizada. Será tan afilado como el que has creado, y también será grande, tan perfecto. Veamos un ejemplo de la escala realizada de la manera incorrecta. Hagamos el tamaño de algún número aleatorio aquí y se puede ver que el Eiken se vuelve borroso porque los puntos del mismo son reverberación. Se desplazó porque el tamaño no es respecto al tamaño básico del Eiken. No obstante, como vencedor, puedo dormir todos parezcan igual 9. Final: Ahora tienes toda la información para crear Big auto perfecto Aikens. Es un buen momento para aplicar todo lo que sigue siendo mente cristiana tan pronto como puedas. Todo lo que necesitas hacer es publicar una captura de pantalla de tu ícono en el molde de revisión bigs up a la sección del proyecto a continuación. Si tienes alguna pregunta, puedes hacerlas en la discusión de la comunidad. Les responderé en cuanto pueda. Quiero agradecerte por tomar estas clases, y si te gusta la clase, agradecería tus críticas positivas y buena suerte contigo puedo diseñar.