Diseño de íconos en línea gratis: ¿cómo crear íconos en PS?
1. Biblioteca de iconos vectoriales Iconfont-Alibaba
La biblioteca de vectores gratuita de Alibaba ofrece descargas de iconos vectoriales, almacenamiento en línea, conversión de formatos, etc. , puedes buscar en chino, ingresar el contenido requerido directamente en el cuadro de búsqueda y aparecerá el material correspondiente. Simplemente haga clic en el ícono de descarga y el sitio web también admitirá la modificación de color en línea. Es realmente un sitio web único.
2. NounProject
Una plataforma para compartir íconos basada en diseñadores gráficos, que proporciona íconos reconocibles y de alta calidad. Los usuarios pueden encontrar categorías a través de los íconos en la esquina superior derecha del sitio web y filtrar los íconos del logotipo que desean buscar o usar. Estas categorías incluyen animales, alimentos y bebidas, cuidado del estilo de vida, personas, seguridad y advertencia, ciencia, deportes y entretenimiento, transporte, viajes, clima y naturaleza.
3. Idol Ninja
IconNinja es una plataforma de búsqueda y descarga de material de íconos gratuito de alta calidad, que admite casi 654,38 millones de íconos gratuitos. Según el formato del archivo, el ancho, el alto, el tamaño del archivo y otra información de la imagen, los usuarios pueden elegir según sus propias necesidades, lo cual es especialmente adecuado para ingenieros de front-end o diseñadores de PPT.
4. Icons 8
Icons8 es un sitio web de recursos de iconos gratuito de alta calidad que admite cambios de color en línea, adición de texto o decoración de fondo, etc. Al descargar materiales, los usuarios pueden elegir cuatro formatos de descarga: SVG, EPS, PNG y PDF, que son convenientes para que los usuarios los utilicen en diferentes escenarios.
5. Icon Park
IconPark es una biblioteca de iconos de código abierto producida por Bytes. Puede convertir un único archivo fuente SVG en una variedad de temas. el código es más ligero y los usuarios Los escenarios de uso son más flexibles. Comprometidos con la creación de recursos de iconos definibles, unificados y de alta calidad para que la mayoría de las personas puedan elegir su propio estilo de iconos.
Cómo usar PS para crear íconos pequeños. Método 1: abrir PS directamente.
Cree ctrt N, cree una imagen con una altura y un ancho de 256 píxeles (lo probé personalmente, si la altura y el ancho son mayores a 256 píxeles, no se puede guardar en formato ico), controle el píxeles de alto y ancho Menos de 256, luego arrastre su propia imagen para guardarla como CTRT Shift S-seleccione Guardar formato ico. Luego, aparecerá un cuadro de diálogo, seleccione la segunda opción. Simplemente hazlo
Método dos, abre PS, abre tu propia imagen, presiona Ctrl Alt i para ajustar el tamaño de la imagen y controla la altura y el ancho dentro de 256 píxeles. Esto también se ha probado cuando es mayor a 256 píxeles, como se muestra en la imagen:
Cuando es menor o igual a 256 píxeles, como se muestra en la imagen, se puede guardar. guardando, puede elegir el formato ico. En este punto el archivo apenas tiene 150K K.
Seleccione una ruta para guardar, haga clic en Guardar y luego seleccione la segunda opción: png(vista). Simplemente haga clic en Aceptar. (Si elige la primera opción, este archivo básicamente fallará).
¿Cómo crear su propio ícono de fuente web? Desde diseñar un único ícono hasta convertirlo al formato @font-face para incrustarlo, o incluso autorizar a otros a usarlo, solo utilizaremos software y servicios en línea gratuitos durante todo el proceso. ¿Cómo te sientes? Crear un conjunto exitoso de fuentes en inglés (incluidas letras y números) no requiere necesariamente conocimientos avanzados, solo requiere tus ojos para diseñar; es posible que te enfrentes a cosas muy, muy pequeñas.
Al final, obtendrás un proceso (método) para crear elementos de diseño, que es mucho más significativo que crear iconos simples.
Antes de continuar, debemos hablar sobre lo que esperamos lograr usando íconos en nuestros diseños y qué hace que un ícono tenga más éxito que el siguiente. Teoría primero, aplicación después. Para lograr esta tarea, debemos considerar el papel de los íconos como parte de la semiótica.
¿Qué es un icono excelente?
La semiótica en un sentido amplio es el estudio de los sistemas de símbolos.
¿Cómo contribuimos a su formación y mantenimiento? También están influenciados por nuestra comprensión del mundo.
Cada vez que piensas en una parte de tu trabajo de diseño en términos de lo que simboliza (qué mensaje transmite a tu audiencia o qué concepto evoca), estás mirando tu diseño desde la perspectiva de un semiótico. La semiótica, al igual que otras lingüísticas, puede abarcar una lengua. En un sitio web hay muchas cosas que no se expresan con palabras, como colores, fuentes, formas (iconos). A lo que todo el mundo debería prestar atención es a que lo que estas cosas expresan contiene fuertes factores culturales. En China, el rojo significa buena suerte, pero en muchos países occidentales significa peligro.
La palabra “icono” tiene un significado especial en semiótica. Los iconos son artefactos que expresan algo a través de la similitud. Por ejemplo, un icono que marca una ubicación en el mapa. Tiene una realidad similar.
La forma del marcador del mapa para que pueda representar una ubicación. A su vez, los marcadores de ubicación en mapas reales evocan una variedad de conceptos significativos. Entre ellos, hay conceptos abstractos, como el de ubicación, y también hay generalizaciones menos abstractas.
Por ejemplo, lea dónde podría estar esta ubicación.
Algunos de los llamados iconos no son verdaderamente representativos. El omnipresente ícono RSS, un punto y dos arcos concéntricos, no hay nada más simple que esto.
Distribuir. Las formas que componen el ícono RSS están simbolizadas por un acuerdo separado al que hemos llegado * * *. Sin embargo, el icono RSS se llama más apropiadamente logotipo RSS.
Ahora, espero que hayamos identificado los siguientes dos criterios para un ícono de sitio web exitoso:
Debe tener un parecido físico, como un ícono de impresión que se asemeje a una impresora real.
Tu icono debe ser un símbolo familiar y reconocible en la simbología.
Los iconos de fuentes son cada vez más populares.
Las fuentes de iconos, debido a que proporcionan un método de taquigrafía icónica, se han considerado durante mucho tiempo un diseño de interfaz de usuario mejorado que ayuda a las personas a comprender la información textual. Las imágenes de iconos se difunden por toda la comunidad de diseño web a la velocidad de una droga. Úselo para hacer que su diseño sea más brillante y atraer a más usuarios para que hagan clic.
El uso de fuentes de iconos es una idea relativamente nueva en comparación con las imágenes. Pero en comparación con las imágenes (imágenes de fondo), tiene muchas ventajas inherentes, por lo que su atractivo está aumentando gradualmente. Escribí sobre sus beneficios en Weibo a principios de septiembre y Chris Coyier aparentemente tuvo pensamientos similares y lo presentó a una audiencia más amplia unas semanas después. Basándome en los dos artículos anteriores y otros contenidos, he compilado esta lista relativamente completa de características:
Se pueden cambiar de tamaño fácilmente (como imágenes vectoriales) sin comprometer la calidad de la imagen;
Definición Los colores de los iconos son tan fáciles como el texto. Por ejemplo, para un ícono rss, color: naranja;
Se pueden organizar muchos íconos en un grupo, que es un archivo, de modo que solo se necesita una solicitud http;
Como Chris señaló que también pueden mostrar formas a través de la transparencia en IE6 (esto es diferente de las imágenes PNG);
Para los íconos que deberían aparecer cerca del texto, la alineación y el empaquetado no son un problema (porque es texto). ;
Puedes aplicar sombra de texto CSS3 y recorte de fondo: efectos de texto para resaltar la forma de la fuente.
A diferencia de SVG, las fuentes de íconos son fácilmente compatibles con todos los navegadores;
Pregunta
Chris dijo que usar fuentes de íconos es una buena idea y quería decírtelo.
Dicho esto, el uso de fuentes de iconos no es lo ideal. En primer lugar, algunas de las fuentes de alta calidad disponibles, como Pictos, Fico, Klepto, Cheetos, Ponyo y SailorMoon, están disponibles mediante una tarifa. En la práctica, esto significa que en realidad hay dos problemas:
Es posible que necesites invertir algo de dinero.
Cueste dinero o no, te verás obligado a aceptar los malos diseños de otras personas.
Aparte de los rastreadores automatizados, creo que serán principalmente los diseñadores web quienes leerán este artículo. Soy diseñador y creo que no soy el único que odia depender del trabajo de otras personas, lo que afecta en gran medida sus ideas de diseño.
Algo así. Por supuesto, no me gusta la idea de tener derecho a pagar. Sabía qué ícono quería usar y cómo adaptarlo a mi diseño general. Quiero ese control.
Después de algunas búsquedas, me gustaría presentarles el editor de fuentes svg de Inkscape. Usando Inkscape y un convertidor en línea (fuente SVG a TTF), creé la fuente "Heyding", que aparece en la lista de Simurai (vinculada al artículo de Coyier). No te voy a vender mi fuente (es gratis), pero creo que te dará una muy buena idea.
Crear fuentes de iconos con Inkscape
Iniciar Inkscape
Comencemos descargando e instalando Inkscape. También deberías usar mis plantillas de inicio de fuentes de íconos, que se encuentran en la carpeta de recursos de este repositorio de GitHub (más sobre este proyecto en el futuro). Después de abrir este archivo en Inkscape, debes configurar tu espacio de trabajo abriendo la siguiente ventana en el menú principal:
Objeto → Rellenar trazo
Objeto → Alinear y distribuir
p>Texto→SVGFONTEDITOR
En el panel "Edición de fuentes SVG", haga clic en "Fuente1" debajo de "Fuente". Su espacio de trabajo ahora debería verse similar a esta captura de pantalla:
Vale la pena señalar que la línea base no está debajo del borde inferior del lienzo: si desea compartirla con una fuente adyacente * * *) Con el misma línea de base, su ícono debería flotar ligeramente fuera de la parte inferior del lienzo. Probé con Georgia, Arial y algunas fuentes web.
Cree su primera fuente
Para definir una fuente, haga clic en la pestaña Glifos en el panel de edición de fuentes SVG y luego haga clic en Agregar en la parte inferior del panel.
Glyh". Puede que no le quede claro al principio, pero si hace clic en su fuente ("Fuente 1"), aparecerá un campo que le pedirá que ingrese los caracteres que corresponden al ícono que desea. Primero, vamos. ../empezamos con/empezamos con/empezamos con
Para hacer un asterisco simple, te sugiero que ingreses los caracteres "s", "s" o "*" :
Ahora que hemos definido los caracteres correspondientes a la fuente, necesitamos crear la fuente en sí. Como esta vez solo queremos hacer una estrella, seleccione la que sea útil en la barra de herramientas a la izquierda de Inkscape.
p>Estrellas y Taburete Poligonal
Luego, dibuja una estrella en el lienzo. Encontrarás que esta herramienta viene con opciones que te permiten cambiar la apariencia de la estrella. Seleccioné El número de ángulos es 5, los radios son 0,5 y el valor de redondeo es 0,1.
Centra la estrella horizontalmente usando el panel AlignandDistribute (posiblemente oculto debajo del SVGFontEditor) y arrastra las formas. país toque la línea de base Con la visualización de cuadrícula desactivada, el lienzo debería verse así:
En nuestra fuente de íconos, la fuente es solo la forma, no hay color, ni degradado, ni forma de degradado. Para que nuestra estrella sea una candidata a fuente calificada, debemos cambiarla de un objeto a un gráfico basado en ruta seleccionando la estrella en el botón principal y seleccionando Ruta → Objeto p>
La ruta para completar esta tarea. Con el asterisco seleccionado, podemos resaltar la fuente "S" disponible en SVGFontEditor y hacer clic en Obtener.
Botón de selección de curva:
Cuando escribes "s" en el área Texto de muestra, tu asterisco debería poder obtener una vista previa de esta manera:
Realizar actualizaciones de iconos complejos
Has creado tu primera fuente SVG escalable. Philander
Puedes crear diseños de iconos más extraordinarios usando las opciones del panel Trazo: editar nodos de ruta y fusionar objetos y trazos. Como todavía tenemos mucho de qué hablar, no quiero profundizar en uno completo.
Tutorial de Inkscape, pero seguir estas simples reglas te beneficiará:
Cíñete a los trazos y rellenos negros, solo para recordarte que esos íconos son solo formas, no dibujos vectoriales complejos. Usaremos CSS para colorear los íconos en el producto final.
Todos los objetos y trazos (líneas) deben convertirse en trazados (ya sea usando Ruta→Ruta del objeto o Ruta→Ruta del trazo).
Cuando se utilizan múltiples objetos y/o trazos para completar una fuente de icono, se deben combinar (usando Trazado → Combinar, o en algunos casos, Trazado → Unión).
Para recortar la forma deseada de una forma existente, coloque la forma sobre la forma principal, seleccione ambas formas y elija Trazado → Diferencia. Haga clic en Obtener curvas de la selección, el área blanca sobre el bloque negro es la forma que desea.
Prepárate para incrustar tu fuente.
Supongamos que repitió el método que acabo de describir varias veces, creó algunos íconos útiles y guardó el archivo de fuente como . Ahora puedes utilizar esta biblioteca de iconos en tus páginas web.
Convertir SVG a TTF
El primer paso que debes dar es convertir el formato de fuente SVG a un formato más familiar y versátil. Para instalaciones locales, TTF es un buen formato. También proporciona una buena base para la reconversión a @font-face. Los servicios en línea que pueden convertir fuentes incluyen:
,
y
. Sin embargo, mi favorito personal es
porque no hago cola y no lo he visto fallar.
No creo que haga falta decirte cómo utilizar este recurso, lo cual es suficiente para mostrar mi sinceridad. El llamativo campo de carga de archivos, el elemento de selección y el enorme botón de conversión te llevarán al tema en muy poco tiempo.
Editar información de fuente
Ahora que has obtenido un TTF, te recomiendo que edites los metadatos generados ahora. Cambie el nombre de las fuentes, agregue propiedades y descripciones para su instalación, incrustación y distribución. También es una forma de declarar que la fuente fue creada para usted. Los lectores que ejecutan Windows pueden optar por utilizar el aparentemente dominante Editor de propiedades de fuentes de Microsoft o permitir el uso gratuito de Typograf durante unos días. Para los usuarios de Apple y Linux, espero obtener mejores opiniones de todos.
Importante: Aunque el editor MicrosoftFontProperties
le permite agregar información sobre el autor, la descripción y los permisos, no parece permitirle editar datos básicos como el nombre de la fuente y el nombre de la posdata. , etc. Estos campos están deshabilitados. Si desea utilizar estas funciones especiales,
debe editar los valores prohibidos en el código SVG antes de convertir SVG a TTF. Abra el SVG original en su editor de texto favorito (yo uso el Bloc de notas) y edite lo siguiente:
FontName: puede encontrar el atributo font-family en la etiqueta.
PostscriptName: Puedes encontrar el atributo id en la etiqueta.
Descripción: Debes añadir una descripción (autor, permisos, etc.). ) a esta etiqueta. Tenga en cuenta que esto es diferente del texto de descripción del TTF y no se conservará durante la conversión. También deberá agregar una descripción separada para el TTF.
Incrustar fuentes
Una vez que haya instalado TTF en su sistema local y haya obtenido una vista previa, puede ejecutarlo en @font-facegenerator de FontSquirrel. Para que el código de salida sea lo más eficiente y efectivo posible, aquí hay algunas opciones que vale la pena mencionar en el modo experto:
Subconjunto: esta opción le permite ejecutar solo el conjunto de caracteres requerido (incluida la codificación de caracteres, tipo, idioma y otras opciones) para reducir el tamaño del archivo.
Su icono casi siempre aparecerá solo, por lo que el interletraje no es necesario. Se dice que esto también reduce el tamaño del archivo.
Solo Web: si desea que su fuente se use solo en la web y no en el escritorio, puede seleccionar esta opción. También puede adaptarse mejor a su plan de licencia. Ahora presentaré la licencia.
Publicar fuentes
Si está interesado en publicar su fuente, es una buena práctica agregarle una licencia. De lo contrario, muchos sitios web de fuentes no la utilizarán para jugar. Dado que utilizamos software gratuito y de código abierto al crear íconos, también podríamos hacer lo mismo al publicarlos.
Actualmente, hay muchas opciones de licencia disponibles y, a veces, investigar cada una de ellas puede resultar confuso. La GNUGeneralPublicLicense es perfectamente aceptable, pero es posible que desee considerar la SILOpenFontLicense. La principal ventaja de utilizar esta licencia es que permite a otros diseñadores modificar la fuente, pero necesitan utilizar un nombre diferente. En términos prácticos, esto significa que algunas malas prácticas en el diseño de iconos no se pueden realizar con "tu nombre".
Con ambas licencias, también debes guardar la información de la versión en un archivo de texto e insertar el aviso de copyright y el enlace URL a la licencia completa en la metainformación de la fuente. Si necesita instrucciones más específicas, visite las páginas de licencia respectivas (enlaces arriba).
El terminador de CSSspriting
¿Por qué ya no utilizar fuentes SVG como iconos universales? Con la capacidad de crear íconos, tiene la posibilidad de diseñar estilos, elementos de marca y decoraciones únicos para su sitio web. Es como CSS.
Sprities, todos estos elementos visuales se pueden guardar en un solo archivo, lo que reduce la cantidad de solicitudes http que el servidor debe realizar; sin embargo, los elementos de fuente de los íconos se pueden cambiar de tamaño sin tener que depender de ello;
Las coordenadas de posición (valor de posición de fondo) se pueden mostrar correctamente. Esto los hace más adecuados para el diseño responsivo.
Supongamos que elegimos una fuente SVG en lugar de algunos elementos de diseño básicos para mi blog steampunk. Una tabla HTML simple de diseño de componentes es la siguiente:
La mayor ventaja de este método es su versatilidad. Por ejemplo, la forma del segundo engranaje de la izquierda se puede diseñar como un punto pequeño o como una decoración de fondo enorme y abstracta. Colorear es muy simple
Único: Color: granate, pero no es necesario ceñirse a un color plano; múltiples efectos CSS3 pueden agregar textura y toque. Para inspirarte desde el principio, echa un vistazo a estas 3 fuentes web mejoradas de sexygalleyofcss.
Notas rápidas para lectores de pantalla
Un problema con el uso de fuentes para mostrar elementos visuales de esta manera es que sufre cuando se muestra en un lector de pantalla. Intuitivamente, los visitantes del sitio web verán íconos como engranajes y flechas, pero los lectores de pantalla insistirán en leer los caracteres que especifican estos diseños. Para el uso de elementos de fuente SVG decorativos, recomiendo seguir el consejo de Coyier: asigne el vector al SuplementaryPrivateUseArea de Unicode. Los lectores no deben leer estos símbolos.
Fuentes web de iconos colaborativos
Como mi mentor de JavaScript, Rupert me señaló un día que el uso de fuentes SVG para crear conjuntos de iconos presentaba una oportunidad interesante para la colaboración. Verá, el código SVG, una forma de XML, está altamente estandarizado y es fácil de leer.
Es el orden del código fuente lo que me hace pensar que el desarrollo de fuentes de iconos es muy adecuado para elegir servicios de codificación colaborativa como GitHub.
Esta idea es muy coherente con el significado simbólico que quiero: si un icono se determina por consenso entre muchas personas, entonces también hay un cierto "* * * conocimiento" en su proceso de formación. Debe ser el ícono más típico diseñado por nuestro sistema de reconocimiento de íconos. Queremos crear un vocabulario icónico que pertenezca a la comunidad y sea significativo para quienes lo necesitan.
Para desarrollar esta idea, creé un repositorio abierto en GitHub, CommunityIconFont. La estructura de archivos de esta biblioteca no es complicada: una lectura cuidadosa del tutorial de Inkscape y la página de inicio del proyecto debería responder a todas sus preguntas. Si eres nuevo en GitHub, intenta leer su página de ayuda o preguntarle a un técnico cerca de ti (eso es lo que hice yo).