Как сверстать сайт из PSD в HTML

Как сверстать шаблон сайта из PSD в HTML и CSS

Совсем недавно я на блоге рассказывал как в Photoshop сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.

Так же по теме

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

Демо ι Скачать

Подготовка

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

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

Всё. В принципе мы первый шаг уже сделали. 🙂 Переходим к добавлению кода HTML.

Добавляем разметку HTML

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

Открываем наш текстовый документ index и вставляем в него следующий код:

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

Середина сайта

За средний участок отвечает вот этот код:

• id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
• id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
• id=»colLeft» — левая сторона сайта (Посты)
• id=»colRight» — правая сторона (Сайдбар)

Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Вёрстка HTML и CSS

Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет 🙁 Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.

После того как Вы вставили код в наш текстовый документ index, его нужно сохранить. Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем.

Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

CSS

Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом ставим теги , а между ними, соответственно будет располагаться код CSS.

Добавляем вот этот код CSS

Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.

Для списков мы отключили точки, а для ссылок отменили подчеркивание.

Это так сказать стандартные стили, их можно изменять по собственному желанию.

Главные блоки (верх, середина и низ)

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

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content будет выравнивать сверху левую и правую сторону сайта.

#colLeft отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:

Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.

Переходим во вкладку «Файл» и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

А вот теперь мы можем смело добавить стили для нашего меню, вот они:

Вот, что должно получиться:

Иконки социальных закладок

Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.

Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.

Теперь под HTML кодом меню добавляем вот этот код:

А в стили CSS нужно добавить вот это:

Логотип

В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:

Главное, выпадающее меню

Под кодом логотипа добавляем код главного меню:

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

Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):

Выбираем инструмент «Рамка»

Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:

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

Ну а сейчас можно смело добавлять CSS:

Блок «Последние записи»

Сразу после тега нужно добавить HTML код, который будет отображать серый блок:

Левый блок с последними записями

Теперь будем добавлять блоки с последними записями. После тега

Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.

Самая последняя строчка в коде

И конечно же не забываем про CSS для постов:

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

Правая часть (Сайдбар)

Добавляем поиск. После тега вставляем следующее:

И стили для поиска:

Виджет

После кода поиска вставляем:

Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h2img и сохранить в папке images нашего шаблона.

CSS код виджетов:

Футер

В конечном итоге получаем вот такой шаблон:

Демо ι Скачать

Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂

В общем если у Вас будут вопросы спрашивайте в комментариях.

Что такое 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 .

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

5 Лучших легких PSD макетов для тренировочной верстки.

Лучший способ научиться чему либо – практика, особенно полезно это будет для начинающего верстальщика

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

ВНИМАНИЕ: Если вам нужен совет, вы хотите определиться со своим выбором, или у вас произошла какая-то ошибка, да и вообще если вы программист – подписывайтесь в нашу

открытую Telegram группу по программированию: [WebProgTeam] , мы вас ждем!

Ну что ж, погнали.

Большинство сайтов с psd макетами содержат хотя-бы несколько вот таких шаблонов для бизнеса. Часто их добавляют несколько, меняя только названия, картинки, места, в общем адаптируют для себя. Но их не так уж и трудно верстать!
Для продвинутого новичка это самое то, ведь они достаточно простые и небольшие. По сложности вышеприведенный макет – примерно 4/10.

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

Данный макет для менее опытных новичков, он очень простой, в нем почти нет интерактивных окон. Он отлично подойдет для вашей первой верстки из psd.
Я как-то, будучи еще новичком, сам с него верстал. Результатом кстати был доволен, на то время для меня это была вообще какая-то магия. Удачной работы!

Еще один простейший сайт, похожий на предыдущие. Подойдет, наверное, для всего, если его переделать. Для тестовой верстки по сложности: что-то среднее между первым и вторым. Опыт с этой верстки, какой-никакой, но будет.

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

Этот макет я тоже кое-когда верстал, только не полностью. Удачной работы!

Кажется, что макет сложный, но если учесть, что в psd есть все картинки, то уже другое дело.
У сайта есть свой стиль – это видно сразу, но передать в css его будет довольно легко. Для новичка это конечно не такая уж и простая работа, поэтому советуем начать со второго или предыдущего примера. А вот более опытным верстальщикам – самое то. Удачной работы!

Ну вот и все интересные шаблоны для новичков фронтенда. Если вам понравилось, то пишите ваше мнение в комментариях.

А также не забывайте, что у нас есть Telegram-сообщество: [WebProgTeam] , там вы сможете обсудить интересную вам тему, поделиться мнением с другими кодерами, узнать, почему же код не работает, помочь другим людям решить их проблему! В общем там будет круто, заходите!

Источники:

http://beloweb.ru/novichkam/kak-sverstat-shablona-sayta-iz-psd-v-html-i-css.html
http://www.internet-technologies.ru/articles/chto-takoe-psd-shablon-i-kak-ego-pravilno-verstat.html
http://pikabu.ru/story/5_luchshikh_legkikh_psd_maketov_dlya_trenirovochnoy_verstki_6892794