Como usar espaços reservados para imagens bonitas em seus designs da Web

Uma maneira de aumentar a qualidade estética e o realismo de suas apresentações de design é usar fotos reais para seus marcadores de imagem em vez de marcadores de imagem genéricos.

Um espaço reservado genérico não é inspirador.

No entanto, isso pode ser um processo tedioso: você precisa procurar fotos, baixá-las e colocá-las em um servidor da Web para poder usá-las em seus modelos de design.

Existe uma opção mais fácil e rápida para implementar marcadores de posição de imagem?

Sim existe.

Chama-se Unsplash It , um serviço web gratuito que permite aos web designers servir belas fotos do arquivo Unsplash. ( Unsplash é um site que publica imagens de domínio público espetacularmente de alta qualidade).

Deixe-me orientá-lo rapidamente sobre como usar este maravilhoso serviço de espaço reservado para imagens.

Como funciona

Para colocar uma imagem em um documento HTML, tudo o que você precisa fazer é mencionar a largura e a altura na URL do Unsplash It e usar isso como o srcvalor do seu elemento de imagem.

O formato é:

https://unsplash.it/[width]/[height]

Parece complicado, mas na verdade não é.

Digamos que você queira gerar um marcador de posição de imagem de 600x400px. Esta é a marcação HTML que você usaria:

<img src= “https://unsplash.it/600/400” />

Pronto: nada de enviar fotos por FTP para o seu host ou usar fotos que possam estar protegidas por direitos autorais e que possam causar problemas a você (e possivelmente ao seu cliente).

Espaços reservados para imagens em preto e branco

Unsplash Ele também oferece alguns efeitos de imagem bacanas, como a capacidade de servir marcadores de posição de imagem em preto e branco (também conhecidos como tons de cinza). Você acabou de adicionar um /g/(que presumivelmente significa “escala de cinza”) na URL antes de seus valores de largura/altura:

<img src= “https://unsplash.it/g/600/400” />

Usando um espaço reservado de imagem específico

Você também pode usar uma foto específica do arquivo de imagens Unsplash It se quiser controlar qual foto aparece no espaço reservado para sua imagem, seja para um site de frases de amor ou qualquer outro nicho de mercado.

Digamos que você queira usar a imagem #501 de seu arquivo.

Você só precisará adicionar ?image=501o URL:

<img src= “https://unsplash.it/600/400?image=501” />

Unsplash Ele tem mais opções, como desfocar imagens, especificar a gravidade do corte, gerar uma lista de imagens e todas essas coisas boas, vá até o site deles para explorar o conjunto completo de recursos do serviço da web.

Related Posts

Deixe um comentário

O seu endereço de e-mail não será publicado.