Mary Солнечная

Вы видимо плохо понимаете как происходит сам процесс верстки. Разумеется... надо самому все верстать!

То есть надо вытаскивать все картинки из получившегося после "сохранить в web" файла и самому все верстать

Нет.Вы должны вытаскивать картиночки уже из psd. Вы открываете psd, выбираете слой с картиночкой и сохраняете его в png/jpg. Сохранять картиночки/иконочки/узорчики все отдельно в папку.
А верстать все ручечками надо!
В интернете просто огромное кол-во туториалов/видеоканалов где все просто пошажачно рассказывается, любому школьнику понятно. Любой запрос на ютюбе - верстка сайта из psd приведет вас к правильным действиям и решению

Попробуйте Brackets, классный редактор

так как нету адекватных макетов.

Вопрос 1: что вы подразумеваете под "адекватностью макетов"? :)
Совет 1: чтобы научиться верстать, надо верстать все подряд. :)

но вот в макете только одна картинка с текстом, как верстать другие элементы слайда

Что вы подразумеваете по другими элементами слайдра? :)
Если вы не понимаете как делать остальные слайды, то в такой ситуации надо мыслить чуть шире - это не картинка с текстом и кнопками, это слайд, в котором отдельно текст, картинка и кнопка. И вам нужно подумать - так, вот есть слайдер, у него есть какие-то фиксированные размеры, или их нет, как будет заливаться картинка - фоном или просто вставлена img, и всё такое. Вам просто для примера можно брать другие картинки и адаптировать их под ширину вашего слайдера, а не думать "вот тут одна картинка в макете, а где же остальные?". + как вариант в фш в некоторых макетах дизайнеры оставляют скрытыми слоями дополнительные картинки

<div class="slider">
    <div class="slide-item">
         <p>Далеко далеко, за высокими горами...</p>
         <a href="#">Подробнее</a>
   </div>
    <div class="slide-item">
        <p>Далеко далеко, за высокими горами...</p>
         <a href="#">Подробнее</a>
    </div>
    <div class="slide-item">
         <p>Далеко далеко, за высокими горами...</p>
         <a href="#">Подробнее</a>
    </div>
</div>

В таких случаях макет делается х2 от реального размера, и все картинки делаются тоже х2.

Потом ширина макета, есть макеты с шириной 2к, 4к, как такие верстать

На такой вопрос тоже уже есть ответ Тыц
Плюс все еще от макета зависит. Хотелось бы посмотреть чо там, может быть у вас 4к макет с контейнером по центру.
В любом случае, медиазапросы вам помогут

www.cssplant.com/clip-path-generator
генерирует и в clip-path и в svg,
Вы сможете создать любой кривоватости блок. И лучше брать сгенерированный svg, у него лучше поддержка

1.
Откройте инструменты разработчика и посмотрите: скорее всего у вас прописано в html для каждой стрелки свой тег (div, а или button) со своим классом. К этому классу добавляйте стили с нужной вам стрелкой.

2. Текст на примере:

div class="fotorama">
<a href="/photo/1.jpg"><h1>Более десяти лет занимается проектированием, производством и сборкой металлических конструкций в России</h1></a>
<a href="/photo/2.jpg"><h1>Более десяти лет занимается проектированием, производством и сборкой металлических конструкций в Украине</h1></a>
<a href="/photo/3.jpg"><h1>Более десяти лет занимается проектированием, производством и сборкой металлических конструкций в Белорусии</h1></a>
</div>

а h1 стилизуете как вам надо :)

Такой эффект есть в slick-slider.

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

Ccылка на документацию
kenwheeler.github.io/slick