Css — Посоветуйте простой psd макет магазина


Содержание

Что такое psd шаблон и как его правильно верстать?

Конечно, не обязательно знать, как сверстать шаблон из psd . Но эти знания могут пригодиться любому владельцу сайта. Всякое бывает в жизни!

Что такое psd шаблоны

Эти шаблоны являются исходным материалом для верстки сайта. Заготовка полностью отражает не только дизайн будущего ресурса, но и его размеры, схему расположения всех элементов. Создание psd шаблона для сайта является вторым этапом в цикле разработки веб-дизайна.

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

Разработка шаблона psd для сайта должна происходить с учетом возможностей воссоздания его дизайна с помощью языка html и css . Вот некоторые характеристики, которыми должен обладать качественный шаблон:

  • Каждый элемент дизайна должен быть выполнен на отдельном слое – структура шаблона становится видна при его раскрытии в Фотошопе. С помощью слоев все части дизайна можно редактировать независимо друг от друга.
  • Рисунок шаблона сохраняется в формате psd ( реже tiff ) – только эти графические форматы поддерживают многослойную структуру изображений. Остальные являются лишь алгоритмами сжатия графических объектов;
  • Вложенность – все слои должны быть сгруппированы по принадлежности к определенному структурному элементу дизайна ( подвал, шапка, меню );
  • Приоритет однородных тонов – для фона в шаблоне лучше использовать однородные повторяющиеся тона, которые можно легко отобразить с помощью html и css ;
  • Как можно меньше фоновых изображений – использование в качестве фона полновесных рисунков сильно увеличивает объем всей страницы. А, следовательно, и время загрузки сайта. Особенно критично это требование для шаблона мобильного ресурса;
  • Использование направляющих – использование направляющих при выравнивании элементов psd шаблонов для сайтов является обязательным. Это во многом облегчает процесс верстки, когда некоторые части дизайна вырезаются и используются как изображения для фона:
  • Приоритет стандартным шрифтам – надписи лучше наносить стандартным набором шрифтов. При использовании редкого шрифта его файл должен прилагаться к шаблону;
  • Меньше нестандартного форматирования – изменять можно лишь стандартные параметры текста ( размер, семейство, интервал ). Искажение текста с помощью инструментов графического редактора ( выгибание и другие эффекты ) приведут к тому, что надпись будет использована как фоновый рисунок. А это ведет к увеличению веса всего шаблона:
  • Оптимальные размеры – по ширине psd шаблон для сайта должен быть не менее 1000 пикселей. При этом ширина фонового рисунка не может превышать указанную величину. Иначе это может привести к искажению отображения шаблона в браузере.

Шаблоны для баннеров

Создаются заготовки не только для сайтов, но и для отдельных элементов его дизайна. Качественный шаблон баннера должен обладать большинством из выше перечисленных характеристик. При этом выбор его размеров зависит от места расположения баннера на сайте.

Структура psd шаблонов баннеров также состоит из слоев, сгруппированных по соответствующим папкам. То есть такой шаблон представляет собой не простой рисунок, а составное изображение.

Но создать шаблон баннера под силу не только профессионалу, но и обычному пользователю. Для этого можно использовать ряд специальных онлайн-сервисов. Одним из них является сайт bannerfans.com :

Основы верстки

Рассмотрим на упрощенном примере, как происходит верстка. Для этого возьмем простой двухколоночный шаблон. В его шапке размещен логотип сайта, который мы вырежем, и будем использовать как фоновое изображение. Остальные части шаблона будем верстать с помощью html , а стили и размеры установим классами css :

Вот структура сайта, которую можно сверстать с помощью тегов

Теперь рассмотрим стилевые настройки, заданные с помощью классов css :

Для каждого слоя в описании классов с помощью свойств width и height устанавливаются размеры. Цвет фона задается параметром background .

Позиционирование элементов осуществляется значениями нескольких полей:

  • margin-top – отступ от верхнего края окна браузера.
  • margin-left – от левого края.
  • margin-right – правого края.

Для шапки сразу устанавливается цвет и фоновое изображение. Рисунок вырезается из шаблона psd для сайта и помещается в отдельную папку. Путь к файлу указывается в поле background-image через url .

Однако совсем не обязательно всю тяжесть этих знаний и навыков тянуть на своем горбу. Легче всего скачать уже сверстанные шаблоны. Да и ходить далеко не надо, потому что у нас их ну просто завались. Так что добро пожаловать в нашу галерею шаблонов!

WordPress.org

Русский

Поддержка → Темы и шаблоны → Посоветуйте шаблон для макета

Посоветуйте шаблон для макета

Разрабатываю сайт. Есть макет в фотошопе (psd), нужно его сверстать в WordPress. Скриншот: https://yadi.sk/i/FEWaVSrO3aMF47
Посоветуйте бесплатную тему, шаблон, theme (напишите как она называется) на который можно натянуть дизайн этого макета с минимальными потерями, то есть чтобы отличия в дизайне были минимальны.
Важно чтобы можно менять не только картинку в фоне и в шапке, но и в подвале.
Желательно чтобы виджеты были как слева, так и справа (хотя это не обязательное условие, можно и с одной стороны).
Заранее благодарю! ��

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

Все это можно сделать в подавляющем большинстве даже бесплатных тем. Разница только в том, что в одной это будет сделать проще, в другой сложнее.

В настоящее время в официальном каталоге тем для WP свыше 2000 тем. Так что «угодить» вам с первого раза не предоставляется возможным. Придётся вам самому потратить многие часы и даже дни на поиск, тестирование и настройку темы которая наиболее полно будет соответствовать вашему эскизу и другим хотелкам. Плюс нужно знание хотя бы азов css, php, html. Этот путь проходят все, кто хочет сделать по настоящему красивый и функциональный сайт, а не поделку по принципу тяп-ляп и готово. И ещё. Никогда не судите о темe только по её превью в каталоге. Порой весьма серенькая на первый взгляд тема таит в себе потрясающие возможности.

Вы правы что многое можно сделать во многих темах. Все кроме подвала.
Мне не нравится, что во многих темах, которые я посмотрел нельзя изменил картинку в подвале. Или это можно сделать как-то вручную? А как видите в подвале моего макета есть своя картинка.

  • Ответ изменён 1 year, 2 months назад пользователем Shmanich .

во многих темах, которые я посмотрел нельзя изменил картинку в подвале

В ВП нет нерешаемых задач. Я сказал чуть выше — нужно элементарное знание html и css и справиться с такой ерундой — это как 2х2. Вот первое что приходит в голову — просто напросто вставить картинку в Footer.php и это можно сделать не одним способом. Или если хотите это делать визуально — тогда можно это решить через виджеты подвала. Только надо немного подумать. Наконец с помощью какого либо плагина для настройки футера.

  • Ответ изменён 1 year, 2 months назад пользователем O .

В настоящее время в официальном каталоге тем для WP свыше 2000 тем.

Поправка. Свыше 6000 только свежих ��

Вы правы что многое можно сделать во многих темах. Все кроме подвала.

С чего бы? Такой же php-код как и везде.

С чего бы? Такой же php-код как и везде.

Я так понял ТС ведёт речь о визуальном редакторе. Действительно в них, независимо от темы, практические нет инструментов для футера.

Сколько я перелопатил тем на своём веку, но ни разу не встречал чтобы в кастомайзере можно было что либо изменить в футере кроме его цвета, виджетов и добавить текст типа копирайта. И то это все в лучшем случае.


Но это не значит, что футером можно делать всё что угодно иными способами, о чем уже сказал в предыдущем своём ответе.

Я так понял ТС ведёт речь о визуальном редакторе.

Я нигде не увидел упоминаний о редакторе.
Я вижу речь о настройках темы:

менять не только картинку в фоне и в шапке, но и в подвале.

Но такая задача не требуется регулярно. Поэтому поменять можно и в коде. Но при желании можно сделать такую настройку и в кастомайзере.

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

А что ещё надо? Фоновую картинку? Хотя это и ccs-ом можно сделать но ОК. А что еще?

Цукерберг рекомендует:  Идеальный программист

Вот что сегодня вышло у меня с помощью CSS на основе шаблона Forefront. ��
https://yadi.sk/i/d5QXuo8C3aNAsX
Завтра еще покапаюсь.

PS: Какой бы цвет вместо красного подобрать для горизонтального меню?

Вот что сегодня вышло у меня с помощью CSS на основе шаблона Forefront

Ну вот! А вы говорили нельзя, нельзя…. Только не шаблона, а темы. И это принципиально важно для дальнейшего правильного взаимопонимания на этом форуме. (См. терминологию WP)

На вкус и цвет товарищей нет!

  • Ответ изменён 1 year, 2 months назад пользователем O .
  • Ответ изменён 1 year, 2 months назад пользователем O .

@shmanich Вам, как человеку адекватно реагирующему на замечания и советы, рекомендую обратить свой взор на темы этого автора. Они же все есть в оф. каталоге. Они имеют очень широкие настройки в кастомайзере, в которых можно настроить всё и вся. Начиная от создания страницы-лендинга до регулировки отступов абзацев и межстрочных интервалов.

Клондайк Программиста

ПИРАТСКАЯ БУХТА для РАЗРАБОТЧИКОВ

PSD МАКЕТЫ

Traveler — PSD макет сайта для туризма

Traveler это PSD макет веб-дизайна.
Сайт связан с некой онлайн програмкой, которая поможет вам в вашем путешествии.
Очень креативная и интересная задумка для сайта.

Bloom — PSD макет интернет магазина

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

Movie store — PSD макет киносайта

Довольно интересный макет киносайта, который можно (и нужно!) сверстать для практики.
Так как здесь используется новый принцип построения и вывода контента.
Опыт будет бесценным ��

Avenue Fashion — Макет крутого интернет магазина

Интересный PSD макет интернет магазина по продаже одежды.
Верстать такой должен уметь каждый!

Personal blog — PSD шаблон блога

Пожалуй, такие шаблоны из PSD должен уметь верстать любой верстальщик.
Здесь нет ничего сложного, но в то же время шаблон включает множество элементов и предлагает необычные решения.

MI Talent — PSD шаблон для студий/компаний

В меру сложный, но в то же время простой PSD шаблон вебсайта.
Как нельзя лучше подойдет для тренировки вёрстки из PSD и/или оттачивания своих навыков.

Sportshold — PSD шаблон интернет магазина

Довольно крутой шаблон для интернет магазинов.
Готовую верстку осталось только адаптировать под любимую CMS.

SeVenmag — PSD шаблон блога (премиум)

Верстка данного шаблона, насколько я помню, продаётся (или продавалась) на Envato Themeforest.

А потому он является премиум шаблоном в стиле Magazine (нечто круче блога).

Сверстать его правильно и точно — это довольно высокий скилл.

Blitz — PSD шаблон персонального сайта

Он выполнен в старом стиле, а значит будет крайне простым в верстке.

Новичкам уметь верстать такое — Must Have.

ILL-ustrator — PSD шаблон персонального сайта

Довольно креативный PSD шаблон, который имеет смысл сверстать ради опыта верстки из PSD.

> 30.12.2020 PSD Макеты 1,115 скачивание

Довольно интересный PSD шаблон портфолио в трёх цветовых решениях.

Желательно верстать в Pixel Perfect.

Surface1 — PSD шаблон спортивного лендинга

Простой, но тем не менее красивый PSD шаблон лендинга на тему спорта.

Его верстка даст Вам много полезного опыта, главное не забывать о контентной части и Pixel Pefect.

Kappe — PSD шаблон сайта портфолио


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

Главнное не забыть решить вопрос с контентной частью =)

Mars — PSD шаблон лендинга по продаже квадрокоптеров

Довольно креативный и в то же время простенький PSD шаблон лендинга по продаже квадрокоптеров.

Верстать в Pixel Perfect совсем не обязательно, но чем ближе к макету — тем лучше.

Furie — PSD шаблон лендинга на авто тематику

Достаточно интересный PSD шаблон лендинга, выполненный в интересной цветовой схеме, но в тоже время он довольно простой.

Желательно верстать в Pixel Perfect.

СТРАНИЦЫ

КАТЕГОРИИ

ОНЛАЙН ЧАТ

РЕКЛАМА

МЫ ВКОНТАКТЕ

Клондайк Программиста

ПИРАТСКАЯ БУХТА для РАЗРАБОТЧИКОВ

Проект «Клондайк Программиста» создан с целью коллекционирования наиболее интересных материалов из различных сфер деятельности.
Мы не преследуем цель незаконного распространения материалов, поэтому если Вы являетесь правообладателем, сообщите нам о нарушении по указанным здесь контактам.

15 бесплатных PSD-макетов сайтов

Порой бывают ситуации, когда не требуется создавать сайт с нуля, тщательно прорабатывая его концепцию. Сегодня в интернете можно найти множество бесплатных шаблонов, используя которые можно быстро создать красивый и современный сайт. Проектирование веб-страниц не стоит на месте – в нем регулярно появляются новые тенденции, которые оказывают серьезное влияние на результаты работы дизайнеров. Очень радует, что многие дизайнеры не жадничают и делятся плодами своего труда, выкладывая мокапы и шаблоны в свободный доступ. FreelanceToday предлагает вашему вниманию 15 бесплатных PSD-макетов сайтов, которые можно использовать как в личных, так и в коммерческих проектах

Бесплатный шаблон лендинга для ресторана. Макет отличается смелым подходом к дизайну и отлично подойдет для сайта кафе или ресторана. Очень продуманный дизайн – в макете 37 блоков, которые расположены таким образом, чтобы посетителю сайта захотелось посетить ресторан.

Красивый и стильный шаблон, разработанный дизайнером Орканом Сепом. Главное отличие этого одностраничника – приятная цветовая гамма и использование шестиугольников как основного элемента дизайна.

Данный макет может использоваться как основа для создания сайта-портфолио для фотографов и иллюстраторов.

Макет со смелым и современным дизайном. Светлые блоки взаимодействуют с темными, что существенно упрощает взаимодействие с сайтом. Как ясно из названия, данный шаблон создавался с учетом потребностей креативных агентств, веб-студий и других творческих объединений.

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

Разработанный дизайнером Камилем Копервасом, этот удивительный шаблон можно использовать для создания сайта дизайн-агентства. При создании шаблона использовались только свободные шрифты, которые можно использовать как десктопной, так и в мобильной версии сайта.

Этот многоцелевой шаблон сайта создан студией PixelMustashe. Впечатляющая работа – шаблон можно использовать для создания современного многостраничного сайта. Всего в макете содержится 16 файлов, представляющих из себя послойные PSD-макеты. Хорошо продуманная сетка, простой и чистый дизайн – макет подойдет для создания самых разных сайтов.

Еще одна работа, которую выложила в свободный доступ студия PixelMustashe. Шаблон состоит из 8 легко редактируемых PSD-файлов – это макеты главной и внутренних страниц.

Созданный дизайнером Эрнестом Асановым, этот макет можно использовать в самых разных целях. Однако видно, что шаблон разрабатывался для создания коммерческого сайта, на котором продаются какие-либо товары. Это не интернет-магазин, а сайт для продажи двух или трех товаров, в данном случае – для фотокниг. Что, впрочем, не мешает использовать данный макет для своих нужд.

Этот бесплатный шаблон отлично подойдет для сайта-визитки гостиницы или, к примеру, курорта. Шаблон интересный, однако у него немного странная сетка, которая устроит далеко не всех.

Современный шаблон сайта-портфолио. Подойдет как агентствам, так и фрилансерам-одиночкам. Все, что нужно сделать – заменить текст и, если это необходимо, иллюстрации.

Хотите создать стильный блог? Скачайте этот бесплатный шаблон с уникальным дизайном, который произведет большое впечатление на посетителей.

Вы хотите создать сайт тату-салона, но не знаете, каким должен быть его дизайн? Можно покспериментировать с этим бесплатным шаблоном или использовать его как основу для собственного дизайна.

Шаблон cLand представляет собой посадочную страницу с очень простым и чистым дизайном. Идеально подойдет для создания лендинга с небольшим количеством контента.

Макет YukNgalam, созданный дизайнером Дэни Ризки, пригодится тем, кто хочет создать сайт-путеводитель. Макет бесплатный, его можно использовать в личных и коммерческих проектах.

Собранные требования к psd-макету веб-сайта

Привет, фрондэнд разработчики!

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

Если наш заказчик жутко внимательный, то часто принимая последнее решение, у нас возникают проблемы несоответствия того, что сверстано в итоге, с тем, что нарисовал дизайнер. Все эти факторы накладывают на нас — разработчиков темное пятно, в то время как дизайнер получил свою премию и уже пьет коктели, в нас кидают помидорами и обвиняют в некомпетентности, хотя проблема далеко не в нас, а в том, что дизайнер иногда не знаком даже с основами верстки и не знает, что некоторые вещи рисовать нельзя.

Немного набрал в весе мозга и статуса в компании, в какой-то момент я понял, что так дальше продолжаться не может и начал собирать свои требования в psd макетам.

Через какое-то время я смог оценить весь profit от введения этих стандартов и требований:

— дизайнер становится более организованный, он помнит, что нужно соблюдать правила и как следствие psd макеты начинают меньше весить, в них отсутствуют неиспользуемые слои, структура становится понятна не только верстальщику, но и самому дизайнеру. В будущем когда ему нужно что-то дорисовать — ему не приходится искать слои блок по всему psd файлу, а он идет в папку в блоком и сразу же принимается за работу. Также в этом случае, есть возможность прямо в файле создать папку с предыдущей версией блока.

— верстальщик получая «правильный» макет может более точно оценить срок выполнения, так как точно понимает, что ему не придется никуда больше ходить и просить что-то переделывать, также сюда можно добавить и сокращение сроков выполнения. Так как в случае соблюдения правил, становится возможно пользоваться штуками типа csshat.com + lesshat.com

Цукерберг рекомендует:  Как сделать SVG адаптивным с помощью CSS

— результат на выходе получается более идентичный тому, что нарисовано, так как все что дизайнера «натворил» можно реализовать в браузере.
Итог: дизайнер счастлив(не надо ничего переделывать), верстальщик счастлив(все хорошо верстается и тратится ночь на доп.работу, чтоб успеть и нервы впорядке), заказчик (сверстаный макет соответствует утвержденному макету), в итоге все остаются в профите от введение этих правил.

Ниже привожу список требований:

1) Соблюдение сетки в макете, если знаешь что это такое и как ее «готовить».
Зачем? о_О:
— чисто эстетические наслаждение
— возможность быстро собирать каркас страницы и позиционировать элементы на
странице в соответствии с представленном макетом, чтобы верстка получалась более честной по отношению к тому, что ты нарисовал(а).

2) Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа »multiply, screen, overlay, и т.д.».
Плохо: joxi.ru/Md6l32D
Хорошо joxi.ru/M2w9Nwe и еще пример joxi.ru/11ndBHq

3) Нежелательно использовать «слой на слое» для создание различных эффектов, типа градиента, слой должен быть один.
Пример: joxi.ru/AGx4CQy

4) Никаких градиентных границ (бордеров, stroke).

5) Использование сложных режимов наложения (blend mode) касается любых свойств слоя (типа inner shadow, drop shadow и т.д.).

6) ОБЯЗАТЕЛЬНО прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF

7) По возможности — не использовать в макете больше 2-х не стандартных шрифтов, их кол-во сильно влияет на рендеринг страницы в браузере, что негативно сказывается на отношения пользователя к сайту.


8) Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты) joxi.ru/MKnCZQM

9) Если нарисовали типовую кнопку, ссылку, элемент, которые имеет состояние «наведения», нажатия — не заставляйте нас додумывать как это должно работать. Если есть ссылка, покажите ее цвет при наведении, если есть кнопка, покажите ее внешний вид при наведении или нажатии, а также при ее состоянии «неактивности». Это касается любых подобных элементов, стрелок в галереи и т.д. и т.п. joxi.ru/ZSmaLye

10) Каждый блок должен находится в своей папке и имеет правильное человеческое название, чтобы не собирать части блока по всему макету. joxi.ru/Agsfo3L

11) Если есть скрытые слои или папки, которые показывают какие-то части сайта (модальные окна, выпадающие панели и т.д.) — необходимо выделять папку / слой — цветом, чтобы его не пропустить, также он должен иметь название, которое близко по смыслу его функциональности. joxi.ru/G1h9LbN

Вывод: Соблюдение данных рекомендаций, поможет реализовать этап создания проекта — верстка, максимально точно к созданому макету и поможет избежать:
— несоответствие макета и сверстанного варианта;
— проблем с утверждением верстки;
— проблем с кроссбраузерность и работы верстки в целом.

Что такое psd шаблон и как его правильно верстать?

Конечно, не обязательно знать, как сверстать шаблон из psd . Но эти знания могут пригодиться любому владельцу сайта. Всякое бывает в жизни!

Что такое psd шаблоны

Эти шаблоны являются исходным материалом для верстки сайта. Заготовка полностью отражает не только дизайн будущего ресурса, но и его размеры, схему расположения всех элементов. Создание psd шаблона для сайта является вторым этапом в цикле разработки веб-дизайна.

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

Разработка шаблона psd для сайта должна происходить с учетом возможностей воссоздания его дизайна с помощью языка html и css . Вот некоторые характеристики, которыми должен обладать качественный шаблон:

  • Каждый элемент дизайна должен быть выполнен на отдельном слое – структура шаблона становится видна при его раскрытии в Фотошопе. С помощью слоев все части дизайна можно редактировать независимо друг от друга.
  • Рисунок шаблона сохраняется в формате psd ( реже tiff ) – только эти графические форматы поддерживают многослойную структуру изображений. Остальные являются лишь алгоритмами сжатия графических объектов;
  • Вложенность – все слои должны быть сгруппированы по принадлежности к определенному структурному элементу дизайна ( подвал, шапка, меню );
  • Приоритет однородных тонов – для фона в шаблоне лучше использовать однородные повторяющиеся тона, которые можно легко отобразить с помощью html и css ;
  • Как можно меньше фоновых изображений – использование в качестве фона полновесных рисунков сильно увеличивает объем всей страницы. А, следовательно, и время загрузки сайта. Особенно критично это требование для шаблона мобильного ресурса;
  • Использование направляющих – использование направляющих при выравнивании элементов psd шаблонов для сайтов является обязательным. Это во многом облегчает процесс верстки, когда некоторые части дизайна вырезаются и используются как изображения для фона:
  • Приоритет стандартным шрифтам – надписи лучше наносить стандартным набором шрифтов. При использовании редкого шрифта его файл должен прилагаться к шаблону;
  • Меньше нестандартного форматирования – изменять можно лишь стандартные параметры текста ( размер, семейство, интервал ). Искажение текста с помощью инструментов графического редактора ( выгибание и другие эффекты ) приведут к тому, что надпись будет использована как фоновый рисунок. А это ведет к увеличению веса всего шаблона:
  • Оптимальные размеры – по ширине psd шаблон для сайта должен быть не менее 1000 пикселей. При этом ширина фонового рисунка не может превышать указанную величину. Иначе это может привести к искажению отображения шаблона в браузере.

Шаблоны для баннеров

Создаются заготовки не только для сайтов, но и для отдельных элементов его дизайна. Качественный шаблон баннера должен обладать большинством из выше перечисленных характеристик. При этом выбор его размеров зависит от места расположения баннера на сайте.

Структура psd шаблонов баннеров также состоит из слоев, сгруппированных по соответствующим папкам. То есть такой шаблон представляет собой не простой рисунок, а составное изображение.

Но создать шаблон баннера под силу не только профессионалу, но и обычному пользователю. Для этого можно использовать ряд специальных онлайн-сервисов. Одним из них является сайт bannerfans.com :

Основы верстки

Рассмотрим на упрощенном примере, как происходит верстка. Для этого возьмем простой двухколоночный шаблон. В его шапке размещен логотип сайта, который мы вырежем, и будем использовать как фоновое изображение. Остальные части шаблона будем верстать с помощью html , а стили и размеры установим классами css :

Вот структура сайта, которую можно сверстать с помощью тегов

Теперь рассмотрим стилевые настройки, заданные с помощью классов css :

Для каждого слоя в описании классов с помощью свойств width и height устанавливаются размеры. Цвет фона задается параметром background .

Позиционирование элементов осуществляется значениями нескольких полей:

  • margin-top – отступ от верхнего края окна браузера.
  • margin-left – от левого края.
  • margin-right – правого края.

Для шапки сразу устанавливается цвет и фоновое изображение. Рисунок вырезается из шаблона psd для сайта и помещается в отдельную папку. Путь к файлу указывается в поле background-image через url .

Однако совсем не обязательно всю тяжесть этих знаний и навыков тянуть на своем горбу. Легче всего скачать уже сверстанные шаблоны. Да и ходить далеко не надо, потому что у нас их ну просто завались. Так что добро пожаловать в нашу галерею шаблонов!

Как сверстать сайт?

В предыдущей статье я наглядно показал, как создать макет сайта в программе Photoshop, и в итоге получился простой, но не режущий глаз шаблон.

В этой статье я покажу, как сверстать его из PSD-макета в готовую веб-страницу, используя инструменты HTML-разметки и каскадные таблицы стилей (CSS).

Вообще подходов к подготовке шаблонов существует множество: кто-то сначала досконально прорисовывает шаблон и только потом занимается вёрсткой, кто-то отрисовывает дизайн приблизительно, добавляя штрихи во время вёрстки; одни сначала рисуют, затем занимаются нарезкой, другие (как мы в прошлой статье) сохраняют графические объекты непосредственно в процессе создания дизайна. Даже инструменты вёрстки и рисования у каждого свои: одни ставят плагины и работают в визуальных редакторах, другие используют стандартный набор возможностей и верстают в простом редакторе… в общем, ниже будет приведён всего лишь один способ из многих.

Подготовительный этап

Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

  • back_all — подложка сайта.
  • header_top — фон шапки.
  • big_pic — логотип.
  • title — фон заголовков левой панели.
  • footer — заливка низа сайта.
  • 1mini — первое фото для основной части страницы.
  • 2mini — второе фото.

В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

Делим документ на блоки

Откройте документ index.html и впишите в него следующий код:

Сохраните файл. Все эти теги мы уже давно изучили и в пояснении они не нуждаются. Кодом выше мы создали основу HTML-страницы, теперь нужно разделить её на блоки — указать структуру документа, что за чем в нём будет идти.

Блоков у нас 7, перечислим их по идентификатору (значению атрибута >

1. content — блок, внутри которого будут храниться остальные блоки.

2. header — блок шапки, внутри которого будут:


2.1. menu — верхняя навигация.

2.2. logo — картинка с текстом.

3. right — основная часть страницы.

4. left — панель слева.

5. footer — низ сайта.

Так и запишем (в контейнер вставьте следующий код):

Цукерберг рекомендует:  7 вопросов для будущего фрилансера

В браузере страница будет по-прежнему пустой, но структуру документа уже можно понять, она готова.

Устанавливаем базовое форматирование

Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

Откройте style.css и добавьте туда строки кода, которые встретите ниже.

Убираем отступы и поля на странице по умолчанию:

Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:

Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

Определение блока content:

Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.

Оформляем горизонтальное меню

Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков.

Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.

Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:

Так мы получили своего рода пространство шапки: белый прямоугольник, на котором будут располагаться её элементы.

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

Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:

Страница в обозревателе тут же преобразится и будет выглядеть так.

Теперь можно добавить и само меню в файл index.html:

Обновив страницу можно увидеть, что оно действительно появилось.

Только вот вид ссылок оставляет желать лучшего. Установим для них свои правила (выравнивание, ширину, цвет, жирность и т. д.), а ссылкам при наведении зададим смену цвета и вернём убранное по всему шаблону подчёркивание:

Теперь форматирование меню можно сопоставить с PSD-шаблоном.

Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).

Настраиваем логотип

Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.

Логотип вставлен ровно по размеру.

Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:

Текст появился, но его тоже нужно оформлять.

Исходя из того, что логотип почти всегда бывает ссылкой, зададим оформление соответствующим классам.

Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

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

Заполним контейнер right. Изображения поместим в простую таблицу.

Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.

Создание левой панели

Во время вёрстки, но уже после отрисовки макета, выяснилось, что боковое меню ещё будет иметь подпункты, причём они должны появляться при наведении на главный пункт и исчезать, когда указателя на нём нет.

Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.

В файл CSS впишите следующий код.

Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно.

В контейнер left HTML-документа добавим сначала информационный блок без меню.

Белый фон распространился ещё ниже по странице.

Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.


Взгляните, как смотрится список. Многие могут подумать, что это таблица.

Подменю работает, надо только подвести мышку к пункту, его содержащему (у нас это Галерея, Прайс и Образцы).

Делаем ноги

Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.

Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).

На этом оформление сайта завершено. В результате мы получаем законченный, готовый к использованию шаблон, части которого можно вынести в отдельные PHP-файлы, сделав из статической страницы динамическую.

Получившийся код здесь приводить не буду — вы можете просто скачать весь шаблон.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

Category: Интернет-магазин

Шаблон сайта WordPress

Крутейшая тема для wordpress, абсолютно бесплатна для скачивания. Больше подойдет для сайта портфолио – дизайнерам, иллюстраторам, фотографам. Также неплоха как витрина магазина. Скачивайте и пользуйтесь наздоровье и для бизнеса! Скачать

Шаблон сайта магазина велосипедов

Онлайн магазин дело серьезно, небыстрое и достаточно дорогое. Цена интернет-магазина в России как правило колеблется от 100 000 рублей.

Shopia – бесплатный шаблон интернет магазина

В современном мире интернет-магазины не уступают почти обычным – они удобный, красивы, не нужно никуда ходит. Интернет-торговля развивается семимильными шагами. Если вы присматриваетесь как можно сделать свой интернет-магазин, то эта тема для вас. Вы можете скачать исходник и сверстать под любую платформу – битрикс, woocommerce, opencart, prestashop – выбор огромен. Просто навесьте туда свой шаблон […]

Шаблон интернет-магазина на WordPress Socute

Бесплатный шаблон интернет-магазина с достаточно стильным оформлением. Может подойти для магазина одежды и обуви, предметов интерьера, картин. Может быть даже техники. В бесплатной версии темы woocommerce есть все базовые функции вроде слайдера, товаров, настроек цветовой схемы и тд, но нет техподдержки, видеотуториалов, вариаций виджетов и поп-апов, хотя все это решается дополнительными плагинами для WordPress. Так […]

Шаблон интернет- магазина #11

Psd шаблон сайта – интернет-магазина в PSD файле в светлых тонах. В макете есть красивая корзина, выпадающщее меню, хлебные крошки, список товаров с обо значением распродажи и скидки, иконки соц сетей и способов оплаты. Все аккуратно разложено по папкам и названы слои. Подойдет для любой тематики интернет магазина, начиная от магазина одежды и заканчивая интернет-магазином […]

PSD шаблон интернет магазина Arvi от HEZY

Супер стильный шаблон интернет магазина с огромным количеством страниц на все случаб жизни – корзина, оформленная современно шапка, очень красиво оформленные товары и фильтры. Шаблон сайта отрисован для разных устройств – адаптивный. Стиль флэт Скачать шаблон интернет-магазина Скачать с Я.Диск> Автор: Hezy Themes [sociallocker] Скачать шаблон интернет-магазина Скачать с Я.Диск> [/sociallocker] Купить невероятно красивый постер […]

Шаблон интернет магазина

Бесплатный яркий шаблон интернет магазина в psd формате, во флэт стиле. Этот сайт можно из psd исходника сверстать под любую

psd шаблон интернет магазина бесплатно #4

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

Корзина интернет-магазина psd

Это простая симпатичная карточка товаров для интернет магазина. Есть список заказов, можете увидеть ваши товары, количество заказов, цены за единицу товаров, кнопку заказать, полная стоимость Скачать с Я.Диск купить дешевый интернет магазин

Интернет магазин psd

Сегодня мы отдаем Premium Quality Бесплатный интернет-магазин шаблон сайта PSD. Это полный, красивый и бесплатный шаблон интернет-магазина. Сегодняшний халява бесплатного psd шаблона сайта интернет-магазина. Вы можете увидеть на скриншоте ниже, что это профессиональный современный шаблон сайта электронной коммерции. Он был спроектирован как сайт интернет магазина модной одежды, но вы можете использовать его для любых видов […]

Лучшие бесплатные PSD макеты сайтов для верстки

Представляем вашему вниманию 20 бесплатных psd макетов сайтов. Эти psd макеты послужат хорошим примером, как нужно правильно рисовать дизайн сайта, вы сможете заглянуть в исходники, посмотреть как расположены и отсортированы слои в Фотошопе. А так же вы сможете потренировать свои способности верстки шаблонов, вам не нужно заморачиваться с дизайном, у вас есть готовый, красивый psd исходник шаблона. Узнайте как создать шаблон для WordPress, прочитав мой курс уроков. Ниже под каждым примером вы сможете перейти на страницу автора, чтобы скачать psd исходники.

Верстка страницы html + css из макета PSD или Figma

Об этом кворке

Выполню верстку сайта по Вашему макету в формате PSD (Фотошоп).

Внимание! Не занимаюсь версткой e-mail-писем. Если нужна нестандартная верстка для специфических нужд — уточняйте отдельно.

Объем услуги рассчитывается так:

1кворк = один тип страниц без дополнительных опций! С простым дизайном, без сложных функций. (Кроссбраузерность: Opera, Mozzilla Firefox, Google Chrome).

Простой дизайн — это:

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

Если нужны дополнительные решения на странице, такие как:

Много блоков (свыше 3), дополнительное меню, форма обратной связи, слайдер и т. п. , или страницы НЕ однотипные, пожалуйста, выберите необходимые опции при заказе кворка.

Структурированный, подписанный код.

Подключение нестандартных шрифтов.

Кроссбраузерность (Google Chrome, Firefox, Opera), валидность.

Адаптивность под мобильные устройства.

Расположенность к конструктивному разговору.

От вас — макет сайта плюс понятное ТЗ. Подробности и нюансы всегда можно уточнить отдельно, я полностью открыт для диалога.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих