tpverstak-free-psd-website-templates
Веб-разработка Макеты

20 крутых PSD макетов для верстки (часть 1)

Многие макеты веб-дизайнерами рисуются в программе Adobe Photoshop. Именно поэтому знать и владеть этой программой верстальщикам просто необходимо. Кстати о его основах я уже писала в статье Фотошоп для верстальщика.

Для «набивки руки» предлагаю Вашему вниманию подборку из 20 бесплатных макетов для верстки. Выбирайте то, что нравится и действуйте!

Надеюсь, потом Вы скинете в комментарии свой сайт-пример с версткой одного из этих макетов, чтобы показать всем какой Вы молодец 🙂

Creative Digital Agency Website Template (Photoshop PSD)

example

Merkury Web Template (Photoshop PSD)

example

Sertin Bootstrap Template (HTML & PSD)

example

Foundation FDN Template (Photoshop PSD)

example

Media Flat Web Template (Photoshop PSD)

example

Esports Web Template (Photoshop PSD)

example

Event Landing Page (Photoshop PSD)

example

Waxom Homepage Template (Photoshop PSD)

example

Ecommerce Homepage Template (Photoshop PSD)

example

Mark Web Template (Photoshop PSD)

example

Wooder Web Template (Photoshop PSD)

example

Shopy eCcomerce Template (Photoshop PSD)

example

NeoDigital One-Page Web Template (Photoshop PSD)

example

Maker Free Landing Page Template (Photoshop PSD)

example

New Providence Mobile App Landing Page Template (Photoshop PSD)example

Adele Product Landing Page (Photoshop PSD)

example

Agency Web Template (Photoshop PSD)

example

Webby Multi-Purpose Web Template (Photoshop PSD)

example

Search Results Templates (Photoshop PSD)

example

Lucid One Page Template (Photoshop PSD)

example

Не нашёл нужный макет? Переходи во вторую подборку бесплатным PSD макетов

Предыдущий пост

Какими качествами должен обладать верстальщик?

Следующий пост

Чем верстальщик отличается от фронтенд-разработчика?

Комментарии

  • Alexey

    Всем привет. Сверстал еще один макет — «Dart Service Manager» https://iventeye.github.io/dart-serv-manager.github.io/, заходите, оценивайте. Есть адаптив, все как надо, можете заходить с различных устройств)

    Reply to Alexey
  • Евгений

    Наваял
    https://evd3v.github.io/mark.github.io/

    Reply to Евгений
  • Alexey

    Всем привет. Сверстал тут «Shoe Landing» — https://iventeye.github.io/#. Переходите, смотрите и делитесь своим мнением. Особенно я хочу, чтоб вы мне написали, как там с адаптивностью, норм или нет?

    Reply to Alexey
  • Дмитрий

    Куда нажимать что бы скачать???

    Reply to Дмитрий
  • Virko

    Сверстал Tajam — https://boxing199.github.io/tajam/dist/index.html

    Reply to Virko
    • Egor

      Блок MEET OUR AMAZING TEAM немного багает, а так супер.

      Reply to Egor
  • Razmik

    Научите запоминать теги и их значения ))
    За то они отвечают и для чего они — знаю )
    Но при вёрстке приходится подсматривать )

    Reply to Razmik
  • Mixkino

    Например, банальное требование о том, что вместо фото в макетах должны быть использованы плейсхолдеры (например, серые квадраты), мы узнали только от модератора (или “ревьювера”, как мы позже его стали называть). А о необходимости документации (да-да, для PSD-шаблонов тоже) и ее содержимом нам оставалось только догадываться.

    Reply to Mixkino
  • Nikbard

    https://nikbard.github.io/wood/ — второй макетик тут сверстал, но я бы конечно уже бы переделал его (Попробовал множественными бекграундами фон сделать), но пусть будет как будет.
    Ну и изображения не оптимизированны)

    Reply to Nikbard
  • Nikbard

    https://nikbard.github.io/creatives/ первый пошёл)
    Короче я так понял добавлять тег img это адище для адаптивной верстки.
    кто знает как реализовать функцию десктоп версии если мы вначале прописываем

    чтобы она была подвязана к тем же айфонам (когда там можно нажать в настройках сафари полная версия сайта)
    или же внизу разместить просто кнопку, которая бы удаляла этот мета тег.

    Reply to Nikbard
    • NickStojanovic

      Почему это тег img адище для адаптивной верстки? если вы хотите масштабировать его, то указывайте ширину 100% и высоту авто. Что касается вашего вопроса о том как сделать мобильную версию — почитайте про медиазапросы. Советую еще посмотреть в сторону grid и bootstrap (я лично предпочитаю гриды, но дело вкуса), а также на сайте бутстрап посмотрите в разделе сетки бутстрап категоризацию по размерам экранов. Можете по ней работать.

      Reply to NickStojanovic
    • Алесандр

      можешь рассказать как сделал кнопку Scroll down , так чтобы при наведение не только border цвет менял , но и стрелка?

      Reply to Алесандр
      • nIkbard

        .scroll a:hover i — мы наводим на а, где я падингами круг вроде чертил, ну а после меняем цвет стрелки которая у меня из шрифтов

        Reply to nIkbard
    • Типичный Верстальщик

      Несколько советов для вёрстки:
      1) Оптимизируй изображения, например, на сайте https://tinypng.com/
      2) Сделай плавный скролл по клику на стрелку в первом блоке
      3) Вставь любую интерактивную карту, а не просто её картинку.

      Reply to Типичный Верстальщик
  • Oleg

    Друзья, для того, чтобы было понятнее обязательно скачайте файлы уже готового шаблона. Так же в архив входит и PSD макет сайта. И конечно же Вы сможете посмотреть демо шаблона в действии.

    Reply to Oleg

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *