Как с psd шаблона сделать

Как с psd шаблона сделать

Как с psd шаблона сделать

Как с psd шаблона сделать

Как с psd шаблона сделать

Как с psd шаблона сделать

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

Так же по теме

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

Подготовка

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

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

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

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

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

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

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <meta charset="utf-8" /> <title>Макет</title> </head> <body> <!-- Начало хидер --> <header class="header"> <div id="headerInner"> </div> </header><!-- Конец хидер --> <!-- начало врапер --> <section id="wrapper"> <div id="middle"> <div id="content"> <div id="colLeft"> </div><!-- Конец коллефт --> <aside id="colRight"> </aside><!-- Конец колрайт --> </div><!-- Конец контент --> </div><!-- Конец мидл --> </section><!-- Конец врапер --> <!-- Начало футер --> <footer id="footer"> <div id="footerInner"> </div><!-- Конец футериннер --> </footer><!-- Конец футер --> </body> </html>

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

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

Шапка сайта

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

<!-- Начало хидер --> <header class="header"> <div id="headerInner"> </div> </header><!-- Конец хидер -->

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

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

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

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

<!— начало врапер —>

<section id="wrapper"> <div id="middle"> <div id="content"> <div id="colLeft"> </div><!-- Конец коллефт --> <aside id="colRight"> </aside><!-- Конец колрайт --> </div><!-- Конец контент --> </div><!-- Конец мидл --> </section><!-- Конец врапер -->
  • id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
  • id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
  • id=»colLeft» — левая сторона сайта (Посты)
  • id=»colRight» — правая сторона (Сайдбар)

Низ сайта

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

<!-- Начало футер --> <footer id="footer"> <div id="footerInner"> </div><!-- Конец футериннер --> </footer><!-- Конец футер -->

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

Вёрстка HTML и CSS

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

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

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

CSS

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

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

{ margin: 0; padding: 0; } body { width: 100%; height: 100%; color:#333; background: #fff; font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:0.94em; line-height:135%; } aside, nav, footer, header, section { display: block; } ul { list-style:none; } a { text-decoration:none; } a:hover { text-decoration: none; }

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

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

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

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

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

/ ------------------------------- Главные блоки ----------------------------------/ #wrapper { margin-top:40px; width: 1200px; margin: 0 auto; height: auto !important; } .header{ width:100%; background: #0dbfe5; height:57px; z-index: 4; } #headerInner { position:relative; border:0px solid #333; width:1200px; height:250px; margin:0 auto; margin-top:0px; } #content { margin-top:40px; } #content #colLeft { background: #fff; float:left; width:800px; margin-right:0px; } #content #colRight { margin-left:45px; float:left; width:350px; position:relative; } #middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; }

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

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

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

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav class="topMenuRight"> <ul> <li><a href="#">Страница 1</a></li> <li><a href="#">Страница 2</a></li> <li><a href="#">Страница 3</a></li> <li><a href="#">Страница 4</a></li> </ul> </nav>

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

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

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

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

/ Верхнее правое меню / .topMenuRight { height:57px; position:absolute; left:0px; top:0px; border: 0px solid #1FA2E1; } .topMenuRight ul li { background: url(images/line.png) 0px 0px no-repeat; float:left; height: 57px; } .topMenuRight ul { padding-left:0px; } .topMenuRight ul li a{ margin-top:0px; font-weight:100; border-right:0px solid #adadad; display:block; color:#fff; text-decoration:none; line-height:20px; font-size:18px; padding:16px 20px 21px 20px; } .topMenuRight ul li a:hover{ background: #fff; color:#555; }

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

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

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

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

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

<div class="share-new"> <a class="icon-twitter" href="#" title="Следить в Twitter!" target="_blank"></a> <a class="icon-rss" href="#" title="Подписаться на rss" target="_blank"></a> <a class="icon-mail" href="#" title="Подписаться по e-mail" target="_blank"></a> </div>

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

.share-new { z-index: 1; position:absolute; right:0px; top:14px; } .share-new a { display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; } .share-new .icon-twitter { background: url(images/twitter-variation.png) 0 center no-repeat; padding:4px 0px 0px 5px; font-size:17px; margin-right: 3px; } .share-new .icon-rss { background: url(images/rss-variation.png) 0 center no-repeat; padding:4px 0px 0px 5px; font-size:17px; margin-right: 0px; } .share-new .icon-mail { background: url(images/email-variation.png) 0 center no-repeat; padding:4px 0px 0px 5px; font-size:17px; margin-right: 0px; }

Вот результат:

Логотип

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

<div class="logo"> <a href="#"><img src="images/logo.png" alt="Блог" /></a> </div>

А вот и стили:

/---------------------------- Логотип ------------------------------/ .logo { position:absolute; left:0px; top:90px; }

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

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

<!-- Начало #bottomMenu --> <nav class="bottomMenu"> <ul id="dropdown_nav"> <li><a href="#">Категория</a> <ul class="sub_nav"> <li><a href="#">Подменю #1</a></li> <li><a href="#">Подменю #2</a></li> <li><a href="#">Подменю #3</a></li> <li><a href="#">Подменю #4</a></li> </ul> <li><a href="#">Категория 1</a></li> <li><a href="#">Категория 2</a></li> <li><a href="#">Категория 3</a></li> <li><a href="#">Категория 4</a></li> </ul> </nav><!-- конец #bottomMenu -->

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

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

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

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

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

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

.bottomMenu { width:1200px; height: 70px; position:absolute; left:0px; bottom:0px; background: url(images/bgmenu.png) 0px 0px repeat-x; } #dropdown_nav { font-weight:bold; display:inline-block; list-style:none; border-bottom:0px solid #777; margin-top:18px; } #dropdown_nav li { float:left; position:relative; display:inline-block; } #dropdown_nav li a { font-weight:100; font-size:18px; color:#fff; padding:15px 22px 20px 22px; background: url(images/linemenu.png) right no-repeat; -moz-transition: background-color 0.3s 0.01s ease; -o-transition: background-color 0.3s 0.01s ease; -webkit-transition: background-color 0.3s 0.01s ease; } #dropdown_nav li a:hover { background: #000; text-decoration:none; color:#0dbfe5; } #dropdown_nav li a.first { -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; } / Выпадающее меню / #dropdown_nav .sub_nav { z-index: 4; width:180px; padding:0px; position:absolute; top:42px; left:0px; border:0px solid #ddd; border-top:none; background: #000; } #dropdown_nav .sub_nav li { width:180px; padding:0px; } #dropdown_nav .sub_nav li a { background: none; font-weight: normal; font-size:15px; display:block; border-bottom:0px solid #e5e0b3; padding-left:10px; color:#fff; } #dropdown_nav .sub_nav li a:hover { background:#222; color:#0dbfe5; }

Результат:

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

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

<div id="lpblock"> <h2>Последние записи</h2> </div>

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

Теперь будем добавлять блоки с последними записями. После тега <div id=»colLeft»> пишем следующий код:

<!-- Начало .postBox --> <article class="postBox"> <div class="postThumb"><a href="#"><img width="800" height="300" src="images/tumb.png"/></a></div> <h2><a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a></h2> <div class="info"> Александр // <a href="#">Метки: метка, метка 2</a> // Апр.10.2012. // Комментариев: <a href="#">238</a> </div> <div class="textPreview"> <p>Приветствую Вас, уважаемые читатели блога. Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p> </div> <div class="more-link"><a href="#">Далее</a></div> </article> <!-- Конец .postBox --> <div class="raz"></div>

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

Самая последняя строчка в коде <div class=»raz»></div> отвечает за разделитель между постами.

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

.raz { margin:0 auto; border:0px solid #333; background: #fff; width:116px; height:29px; margin-bottom:50px; background: url(images/raz.png) 0px 0px no-repeat; } .postBox { border:0px solid #333; background: #fff; width:700px; margin-top:0px; margin-left:0px; margin-bottom:50px; } .postBox h2 a { font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif; color:#000; font-style:normal; font-weight:100; font-size:33px; line-height:35px; -moz-transition: all 0.3s 0.01s ease; -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } .postBox h2 a:hover { color:#0dbfe5; } .postBox .textPreview { border:0px solid #333; width:800px; margin-bottom:30px; } .postBox .textPreview p{ margin-top:0; } .postBox .postThumb{ margin:0px 0px 15px 0; } .postBox .postMeta { padding-bottom:15px; clear:left; overflow:hidden; } .more-link a { border-radius: 3px; background: #0dbfe5; margin-top:30px; font-weight:600; color:#fff; font-size:17px; padding:6px 25px 9px 25px; -moz-transition: all 0.3s 0.01s ease; -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } .more-link a:hover { background:#000; color:#0dbfe5; }

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

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

Добавляем поиск. После тега <aside id=»colRight»> вставляем следующее:

<form method="get" action="/search" target="_blank"> <input name="q" id="form-query" value="" placeholder="Поиск..."> <input id="form-querysub" type=submit value=""> </form>

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

#form-query { position:relative; background:#eeeeee; border:0px solid #e4e4e4; width:335px; height:31px; padding:8px 10px 7px; font-weight:100; font-size:18px; color:#000; margin-bottom: 30px; } #form-querysub { position:absolute; right:15px; top:15px; width:17px; height:17px; background:url(images/search.png) 0px 0px no-repeat; border:0px dashed #333; } #form-querysub:hover { cursor: pointer; }

Виджет

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

<div class="rightBox"> <h2>Виджет 2</h2> <ul> <li><a href="#" title="Плавная анимация объектов только с помощью CSS (5 примеров)">Плавная анимация объектов только с помощью CSS (5 примеров)</a></li> <li><a href="#" title="Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a></li> <li><a href="#" title="Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery">Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery</a></li> <li><a href="#" title="500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов">500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов</a></li> <li><a href="#" title="Бесплатные PSD и CSS3 меню для Вашего веб проекта">Бесплатные PSD и CSS3 меню для Вашего веб проекта</a></li> <li><a href="#" title="Примеры идеального сочетания цветов в веб &#8211; дизайне">Примеры идеального сочетания цветов в веб &#8211; дизайне</a></li> <li><a href="#" title="Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS">Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS</a></li> <li><a href="#" title="Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей">Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей</a></li> <li><a href="#" title="Примеры игр которые сделанные с помощью html5 canvas">Примеры игр которые сделанные с помощью html5 canvas</a></li> <li><a href="#" title="Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов">Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов</a></li> </ul> </div>

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

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

.rightBox { margin-top:0px; margin-left:0px; width:330px; margin-bottom:30px; } .rightBox h2 { width:335px; background:#f7f7f7 url(images/h2img.png) 320px 14px no-repeat; font-size:18px; font-family: "Segoe UI Semibold", Tahoma, Helvetica, Sans-Serif; color:#333; display:block; padding:10px 0 15px 20px; } .rightBox ul li{ width:350px; padding:10px 0px; border-bottom:1px solid #f6f6f6; font-size:14px; line-height: 16px; } .rightBox a { color:#333; } .rightBox a:hover { color: #0dbfe5; }

Футер

После тега <div id=»footerInner»> вставляем код для логотипа и нижнего меню:

<div id="footerlogo"> <a href="#"><img src="images/logo.png" alt="Блог" /></a> </div> <nav class="footernav"> <ul> <li><a href="#">Страница 1</a></li> <li><a href="#">Страница 2</a></li> <li><a href="#">Страница 3</a></li> <li><a href="#">Страница 4</a></li> </ul> </nav>

CSS

#footer { margin-top:50px; height:100px; width:100%px; background: #0dbfe5; } #footerInner { position:relative; border:0px solid #000; width:1200px; margin:0 auto; height:100px; } #footerlogo { position:absolute; left:0px; top:25px; } .footernav { position:absolute; right:0px; top:35px; } .footernav ul li { float:left; } .footernav ul li a{ margin-top:0px; font-weight:100; border-right:0px solid #adadad; display:block; color:#fff; text-decoration:none; line-height:20px; font-size:18px; padding:0px 0px 0px 25px; } .footernav ul li a:hover{ color:#333; }

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

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

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

До скорых встреч.


Источник: http://beloweb.ru/novichkam/kak-sverstat-shablona-sayta-iz-psd-v-html-i-css.html


Как с psd шаблона сделать

Как с psd шаблона сделать

Как с psd шаблона сделать

Как с psd шаблона сделать

Как с psd шаблона сделать

Как с psd шаблона сделать