×
×

Surtido de iconos para la realización de páginas web (1.- CSS, 2.- WEB, 3.- PHOTOSHOP)

Los iconos son un aspecto muy importante a la hora de la realización de una página web, por 2 razones de peso, y podemos utilizarlos prácticamente en cualquier web (siempre con sentido común, claro):

Diseño y estética. Normalmente “asusta” la idea de visitar una web en la que solo hay texto. Maquetemos un poco y pensemos como nos gustaría a nosotros leer el contenido de nuestra web. Siempre atrae permanecer más tiempo en una web que nos resulta atractiva y clara, que una en la que vemos montañas de texto.

Los iconos nos aportan una idea general  del contenido del texto al que se refieren, leemos “por encima” y si vemos que realmente merece la pena, leemos más. (Cada vez se lee menos contenido en internet, ya que hay muchísima información y no perdemos el tiempo con cualquier página. La primera impresión de una página web debe aportar una idea general visual que se ofrezca mediante imágenes o iconos).

Os vamos a mostrar de dónde saca SOS Creaciones Web normalmente los iconos para las webs que realizamos.

Fontawesome (iconos por CSS)

Iconfinder (página web de colección de iconos)

Flaticon (plugin de colección de iconos para Photoshop)

 

1.- Fontawesome

Descubrimos hace poco esta colección de iconos. La verdad es que nos resulta realmente útil y la novedad es que utilizamos los iconos mediante CSS.

Inconvenientes

  • Los iconos normalmente los utilizamos para darles colores planos o un gradient (propiedad CSS)

Ventajas

  • La principal y más importante, es el peso. No es lo mismo utilizar una librería de iconos que realmente son texto que una imagen. Una imagen siempre pesa más que un caracter de texto.
  • Al ser tratado como un carácter de texto tenemos la posibilidad de darles el color que deseemos mediante CSS.

Si queréis saber más sobre esta colección de iconos, podéis visitar su página: FontAwesome. Allí podréis ver varios ejemplos sobre su utilización y la colección de iconos que utiliza.

 

2.- Iconfinder

Iconfinder es una página web con una colección de iconos muy interesante. Podemos encontrar tanto iconos de pago como gratuitos.

Inconvenientes

  • Una imagen siempre pesa más que un carácter. Pero, por otro lado siempre podemos reducir el tamaño de nuestras imágenes e iconos, como ya os mostramos en nuestro anterior artículo Comprimir imágenes sin perder calidad.
  • Debes buscar la temática con su nombre en inglés. No es un problema si buscas un traductor online, como por ejemplo el de Traductor de Google.

Ventajas

  • Gran cantidad de iconos.
  • Buscador de iconos. Escribes la temática que necesitas, por ejemplo, nos hace falta un icono para enlazar con nuestra página de Facebook, escribes “Facebook” y nos aparecerá un buen surtido de iconos relacionados con esta temática.
  • Hay tanto iconos planos como de varios colores.
  • Nos ofrece la posibilidad de descargarlos en varios formatos (SVG, PNG, ICO, e  ICNS) y tamaños (512x512, 256x256, 64x64, 48x48, 32x32, 24x24, 20x20 y 16x16).
  • Si el tamaño del icono no se ajusta con el contenido que queremos, siempre podemos modificar su tamaño a través de CSS.
Si estás interesado en saber más visita la web de Iconfinder.

 

3.- FlatIcon

Normalmente si eres diseñador web, es probable que utilices Photoshop para editar imágenes. Por supuesto, hay otros editores de imágenes muy interesantes, pero el que más utilizamos es este.

FlatIcon es un plugin gratuito que existe para Photoshop en la cual nos encontraremos una vasta colección de casi 50.000 iconos vectoriales. También cuenta con su versión web, al igual que Iconfinder.

 

Inconvenientes (los mismos que el anterior)

  • Una imagen siempre pesa más que un carácter. Pero, por otro lado siempre podemos reducir el tamaño de nuestras imágenes e iconos, como ya os mostramos en nuestro anterior artículo Comprimir imágenes sin perder calidad.
  • Debes buscar la temática con su nombre en inglés. No es un problema si buscas un traductor online, como por ejemplo el de Traductor de Google.

Ventajas

  • Página web con la colección de iconos que tiene el plugin. Aunque es más cómodo a nuestro parecer tener incorpor el plugin directamente en Photoshop.
  • Lo encuentras casi todo.
  • Puedes cambiar su aspecto, como su color directamente en Photoshop o añadirle algún retoque más para que se ajuste a lo que buscas.
  • Desde la página puedes descargar iconos en varios formatos (SVG, PSD , PNG y en base64), además también tiene la posibilidad de elegir el tamaño.
  • Incorpora packs descargables especializados en algunas temáticas.
Desde la página web de FlatIcon podéis ver más información y descargaros el plugin.

 

Esperamos que os resulten útiles estas colecciones de iconos.


Añadir nuevo comentario