Как вырезать эти картинки с макета?

Question

[GreatBOND]

Уже долго думаю над этим. В Интернете искал, но так и не нашел ничего подобного. Не знаю как вырезать эти картинки:



Вот макет: psd-html-css.ru/templates/black-white-besplatnyy-p...

Пробывал вырезать, но у меня получается без этой серой маски(или как правильно назвать?):



Также еще вопрос: как правильно организовать это в коде(HTML)? Можно сделать эти картинки как фон, но я думаю что логичнее это сделать через тег , на случай если на сайт в будущем будут добавляться новые работы.

Помогите пожалуйста.

Answer 1

[Иван Татауш]

Проще всего вырезать картинки PhotoShop СС, кликай на слой правой кнопкой и "Быстрый экспорт в PNG". Но лучше делать Экспорт для Web и сохранять jpg (оптимизация размера).
Вырежи картинки так как тебе удобно и добавь css filter www.w3schools.com/cssref/css3_pr_filter.asp
Делай это тегом img так правильнее будет, при наведении на блок убирай фильтр

Answer 2

[Ankhena]

1. В данном случае: объединить видимые слои и потом вырезать.

2. Использовать конструкцию

<figure>
  <img>
  <figcaption>
    Тут описание, которое будет появляться при наведении
  </figcaption>
</figure>

Answer 3

[Алексей]

По последнему пункту. Бэкграундом делаются изображения, которые несут в себе исключительно оформительские цели. Тегом вставляются изображения которые несут семантическую нагрузку, то есть сами являются контентом сайта и должны подпадать под индексацию поисковыми системами.

Answer 4

[Serj-One]

Вырезать с рамкой и не нужно. Рамка - элемент вёрстки.