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 макетов

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

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

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

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

Комментарии

  • Murad

    вообше круто как вы так верстаете я в шоке. Наверное большой опыт у вас. Я сам новечок и так хочется по быстрее набить руку уже обучаюсь почти 4 месяца и будто стою на месте

    Reply to Murad
  • 777abat777

    Сверстал шаблон Lucid https://777abat777.github.io/lucid/
    буду рад комментариям.

    Reply to 777abat777
  • Jonhson031

    Сверстал макет «Creative Design» . Жду критики

    https://jonhson031.github.io/CreativeDesign/

    https://github.com/Jonhson031/CreativeDesign.git

    Reply to Jonhson031
  • Ernest

    Доброго день. Сверстал макет хотелось бы получить критики со стороны.

    Ссылка на Waxom https://waxom-2.web.app/

    Reply to Ernest
    • Danil

      как ты сделал этот слайдер? с помощью java ?

      Reply to Danil
    • Диша

      Красавчик, чего тут критиковать!

      Reply to Диша
    • Ixii

      У меня нету слов, очень хорошо сверстал

      Reply to Ixii
  • Ernest

    Сверстал макет. Буду рад критике.

    Reply to Ernest
  • batya

    воу Марина, у вас отлично получилось, ни в коемо случае не оставляйте это дело, у вас отлично получается!!

    Reply to batya
  • Marina

    Привет всем!
    Вот, попробовала=)
    https://rnbwcat.github.io/creatives/

    Reply to Marina
    • Murad

      вообше круто ты дано в этой сфере ? обучалась где ?

      Reply to Murad
    • Skepy

      Привет. У тебя еще остался код? Если да, можно просмотреть?)

      Reply to Skepy
    • Анна Блок

      Отлично получилось, хорошо, что попробовали прикрутить анимацию ?

      Reply to Анна Блок
  • Marina

    https://rnbwcat.github.io/creatives/
    Пробую =)

    Reply to Marina
  • Sergio

    Скажите, а можно потом сверстанный сайт выложить у себя в портфолио?

    Reply to Sergio
  • Eduard

    Всем привет! Сделал вёрстку макета Creative Digital. Посмотреть можно здесь:

    https://lefhl.github.io/Creative-Digital-1.0/

    https://github.com/lefhl/Creative-Digital-1.0

    Reply to Eduard
  • 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
    • Alex

      Привет. Я сам новичок. Выглядит здорово. Адаптация не под все устройства. Начинает заезжать и текст и картинки на маленьких разрешениях. Нужно перестроить блоки, отцентровать, картинки, уменьшить отступы, шрифт и т. д. Подскажи, пожалуйста, каким способом рисовал изогнутые линии между блоками и пунктиры

      Reply to Alex
  • Дмитрий

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

    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 не будет опубликован. Обязательные поля помечены *