Lunes, 26 de Febrero de 2018

Noticias Diseño Web

Suscríbete Iniciar Sesión

Imágenes para la página web


Herramientas para incorporar el favicon

logo de Noticias Diseño Web

El favicon de esta página (y también, el logo), está descargado de la web www.flaticon.es. Una extensa biblioteca de iconos e imágenes icónicas, en diversos formatos (incluyendo PNG y el formato vectorial SVG), que permite su descarga totalmente gratis y en varios tamaños a cambio, tan sólo, de reseñar su origen, facilitando para ello el texto y los links a copiar en el html de la web: © Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY


Una vez elegido nuestro favicon, hay que tener en cuenta que los mejores formatos de imagen para ta fin son el ico, el png y el gif, pues están soportado por casi todas las versiones de los navegadores. Para convertir otros formatos a los mencionados, podemos recurrir a conversores online gratuitos como imagen.online-convert.com.

Por último, también contamos con varias páginas online gratuítas que generan imágenes para favicon, básicamente, lo que hacen es redimensionar la imagen a unas dimensiones adecuadas, si bien, favicon-generator.org va un paso más allá y nos genera múltiples tamaños, así como el código necesario para copiarlo en nuestro head (verificando los paths donde guardemos estas imágenes una vez descargadas), para que el favicon se muestre tanto en navegadores de páginas web, como en Android, iPhone e iPad.

Múltiples sitios de imágenes gratis

Imagen jpg de pixabay

Como pixabay.com, que dispone de miles de imágenes (y también videos) en varios formatos; imágenes de tipo fotografía, o dibujos, como la imagen de la izquierda que es un dibujo vectorial en formato svg.


Una herramienta muy útil para ayudarnos a diseñar páginas webs y mientras estamos preparando nuestros borradores es linkear las imágenes desde placeholder.com. Tan sólo necesitaremos indicar como valor del atributo "src" de la etiqueta imagen una dirección web como la siguiente:

http://via.placeholder.com/250x150

En este ejemplo, 300x150 indican las dimensiones en pixeles de la imagen que deseemos insertar y que, en el caso de necesitar otros tamaños, tan sólo tenemos que variar esas cifras por las medidas en pixeles que deseemos (http://via.placeholder.com/200x200, por ejemplo).

Herramientas gratis online para tratamiento de imágenes

1.- Editores de imágenes

Como online-image-editor.com, programita sencillito online, muy útil para el tratamiento de imágenes a fin de, por ejemplo, incluirles marcos, textos, efectos y "chorraditas" sencillas (no al nivel de photoshop, lógicamente), pero que sobre todo, puede ser utilizado para tratar archivos en formato png con transparencias, y evitar que éstas desaparezcan tras hacer cualquier modificación o redimensión en la imagen. También se puede utilizar para crear transparencias en imágenes con formato png.


2.- Optimizadores de imágenes o compresores

Una vez terminada nuestra web, es bueno comprimir nuestras imágenes, sobre todo si contiene muchas, para que los tiempos de carga de las páginas mejore. Existen varias herramientas online gratuitas que lo permiten, y que logran que las imágenes bajen ostensiblemente de peso sin cambios en la calidad de la imagen perceptibles.

Para ello y, por ejemplo, podemos ir a compressor.io, que permite redimensionar los siguientes formatos: jpg, png, gif y svg.

Otra herramienta muy fácil y rápida de utilizar, para formatos de imagen jpg y png, es compressjpeg.com.

Muestras de logos, imágenes icónicas,...

Imágenes o logos descargados de iconspedia.com:

Cuenta gotas Mancha de tinta Cámara Pincel Tintero Lápiz Icono de web Google Wallet Herramientas de Webmaster Clasificado Libros Catálogo Caja Ordenador Imágenes

Fuentes y fuentes icónicas


Google Fonts

Google Fonts

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Font awesome

Blokkfont: la fuente "dummy"

Blokkfont

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Colores


htmlcolorcodes.es

Pasa por aquí y dale color a este recuadro

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.