Содержание
Как сверстать шаблона сайта из PSD в HTML и CSS
Совсем недавно я на блоге рассказывал как в 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> <div> </div> </header><!-- Конец хидер --> <!-- начало врапер --> <section> <div> <div> <div> </div><!-- Конец коллефт --> <aside> </aside><!-- Конец колрайт --> </div><!-- Конец контент --> </div><!-- Конец мидл --> </section><!-- Конец врапер --> <!-- Начало футер --> <footer> <div> </div><!-- Конец футериннер --> </footer><!-- Конец футер --> </body> </html>
Теперь давайте подробнее остановимся на коде.
Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.
Шапка сайта
За верх сайта у нас отвечает вот этот код:
<!-- Начало хидер --> <header> <div> </div> </header><!-- Конец хидер -->
В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.
А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.
Середина сайта
За средний участок отвечает вот этот код:
<!— начало врапер —>
<section> <div> <div> <div> </div><!-- Конец коллефт --> <aside> </aside><!-- Конец колрайт --> </div><!-- Конец контент --> </div><!-- Конец мидл --> </section><!-- Конец врапер -->
- id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
- id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
- id=»colLeft» — левая сторона сайта (Посты)
- id=»colRight» — правая сторона (Сайдбар)
Низ сайта
С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.
<!-- Начало футер --> <footer> <div> </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> <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> <a href="#" title="Следить в Twitter!" target="_blank"></a> <a href="#" title="Подписаться на rss" target="_blank"></a> <a 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> <a href="#"><img src="images/logo.png" alt="Блог" /></a> </div>
А вот и стили:
/*----------------------------
Логотип
------------------------------*/
.logo {
position:absolute;
left:0px;
top:90px;
}Главное, выпадающее меню
Под кодом логотипа добавляем код главного меню:
<!-- Начало #bottomMenu --> <nav> <ul> <li><a href="#">Категория</a> <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> <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> <h3>Последние записи</h3> </div>
Левый блок с последними записями
Теперь будем добавлять блоки с последними записями. После тега <div id=»colLeft»> пишем следующий код:
<!-- Начало .postBox --> <article> <div><a href="#"><img src="images/tumb.png"/></a></div> <h3><a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a></h3> <div> Александр // <a href="#">Метки: метка, метка 2</a> // Апр.10.2012. // Комментариев: <a href="#">238</a> </div> <div> <p>Приветствую Вас, уважаемые читатели блога. Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p> </div> <div><a href="#">Далее</a></div> </article> <!-- Конец .postBox --> <div></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 h3 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 h3 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" value="" placeholder="Поиск..."> <input 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> <h3>Виджет 2</h3> <ul> <li><a href="#" title="Плавная анимация объектов только с помощью CSS (5 примеров)">Плавная анимация объектов только с помощью CSS (5 примеров)</a></li> <li><a href="#" title="Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб – проектов">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб – проектов</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="Примеры идеального сочетания цветов в веб – дизайне">Примеры идеального сочетания цветов в веб – дизайне</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>
Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h3img и сохранить в папке images нашего шаблона.
CSS код виджетов:
.rightBox {
margin-top:0px;
margin-left:0px;
width:330px;
margin-bottom:30px;
}
.rightBox h3 {
width:335px;
background:#f7f7f7 url(images/h3img.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> <a href="#"><img src="images/logo.png" alt="Блог" /></a> </div> <nav> <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;
}В конечном итоге получаем вот такой шаблон:
Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂
В общем если у Вас будут вопросы спрашивайте в комментариях.
До скорых встреч.
Верстка сайта из PSD макета
В предыдущей статье я наглядно показал, как создать макет сайта в программе 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 и впишите в него следующий код:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Шаблон сайта</title> <meta name="keywords" content=""> <meta name="description" content=""> <link href="styles.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> </body> </html>
Сохраните файл. Все эти теги мы уже давно изучили и в пояснении они не нуждаются. Кодом выше мы создали основу HTML-страницы, теперь нужно разделить её на блоки — указать структуру документа, что за чем в нём будет идти.
Блоков у нас 7, перечислим их по идентификатору (значению атрибута id):
1. content — блок, внутри которого будут храниться остальные блоки.
2. header — блок шапки, внутри которого будут:
2.1. menu — верхняя навигация.
2.2. logo — картинка с текстом.
3. right — основная часть страницы.
4. left — панель слева.
5. footer — низ сайта.
Так и запишем (в контейнер <body> вставьте следующий код):
<div> <!-- Шапка --> <div> <div> </div> <div> </div> </div> <!-- Конец шапки --> <!-- Основной блок --> <div> </div> <!-- Конец основного блока --> <!-- Левая панель --> <div> <div> <!-- Конец левой панели --> <!-- Ноги сайта --> <div> </div> <!-- Конец --> </div>
В браузере страница будет по-прежнему пустой, но структуру документа уже можно понять, она готова.
Устанавливаем базовое форматирование
Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.
Откройте style.css и добавьте туда строки кода, которые встретите ниже.
Убираем отступы и поля на странице по умолчанию:
*
{
margin: 0px;
padding: 0px;
}Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:
a:link {
color: #D72020;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:visited {
color: #D72020;
}Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:
body {
background: #FFD723 url(images/back_all.jpg) repeat-x;
font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}Определение блока content:
#content {
margin: 0 auto;
background: #ffffff;
width: 786px;
text-align: left;
}Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.
Оформляем горизонтальное меню
Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков.
Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.
Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:
#header {
background: #ffffff;
height: 306px;
text-align: left;
}Так мы получили своего рода пространство шапки: белый прямоугольник, на котором будут располагаться её элементы.
Логично было бы прямо сейчас заняться горизонтальным меню. Так мы и поступим, но только прежде, чем вставлять его в HTML, нужно подготовить правила CSS, иначе смотреться в браузере это будет ужасно.
Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:
#menu
{
border-left: 2px solid #ffffff;
width: 779px;
height: 80px;
background: url(images/header_top.gif) repeat-x;
}Страница в обозревателе тут же преобразится и будет выглядеть так.
Теперь можно добавить и само меню в файл index.html:
<table> <tr> <td><a href="#" title="">Главная</a></td> <td><a href="#" title="">Галерея</a></td> <td><a href="#" title="">Договор</a></td> <td><a href="#" title="">Прайс</a></td> <td><a href="#" title="">Образцы</a></td> <td><a href="#" title="">Контакты</a></td> </tr> </table>
Обновив страницу можно увидеть, что оно действительно появилось.
Только вот вид ссылок оставляет желать лучшего. Установим для них свои правила (выравнивание, ширину, цвет, жирность и т. д.), а ссылкам при наведении зададим смену цвета и вернём убранное по всему шаблону подчёркивание:
#menu a {
float: left;
width: 99px;
height: 46px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
padding-top: 35px;
}
#menu a:hover {
color: #D72020;
text-decoration: underline;
}Теперь форматирование меню можно сопоставить с PSD-шаблоном.
Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).
Настраиваем логотип
Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.
#logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
}Логотип вставлен ровно по размеру.
Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:
<div> <h2><a href="#">Имя сайта</a></h2> <h3><a href="№">Слоган сайта</a></h3> </div>
Текст появился, но его тоже нужно оформлять.
Исходя из того, что логотип почти всегда бывает ссылкой, зададим оформление соответствующим классам.
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 36px;
color: #FFFFFF;
}
#logo h3 a
{
font-size: 24px;
}Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.
Верстаем основную часть страницы
Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).
#right
{
float: right;
width: 500px;
padding-right: 10px;
}
#right h5
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #D72020;
}
#right a
{
color: #D72020;
text-decoration: none;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#right h3 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #D72020;
}Так как мы зафиксировали только ширину блока, видимых изменений наблюдаться не будет до тех пор, пока мы не наполним его контентом — высота страницы будет меняться в зависимости от содержимого.
Заполним контейнер right. Изображения поместим в простую таблицу.
<h3>Галерея</h3><br /> <h3>Кухни</h3><br /> <table cellspacing = 40> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> </table>
Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.
Создание левой панели
Во время вёрстки, но уже после отрисовки макета, выяснилось, что боковое меню ещё будет иметь подпункты, причём они должны появляться при наведении на главный пункт и исчезать, когда указателя на нём нет.
Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.
В файл CSS впишите следующий код.
#left
{
padding: 10px;
width: 237px;
padding-right: 1em;
}
#left h4
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}
#left ul {
margin: 0;
padding: 10px;
list-style: none;
width: 100px;
font-size: 18px;
}
#left li ul {
position: absolute;
left: 90px;
top: 0;
display: none;
}
#left ul li {
position: relative;
margin-bottom:20px;
}
#left ul li a {
display: block;
text-decoration: none;
color: #ffffcc;
background: #ff9900;
padding: 5px;
border: 1px solid gold;
border-bottom: 0;
}
#left li:hover ul {
display: block;
}
#left li li {
margin-bottom:0px;
width: 150px;
}
#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно.
В контейнер left HTML-документа добавим сначала информационный блок без меню.
<h4>Информация</h4> <p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p><br /> <h4>Меню</h4>
Белый фон распространился ещё ниже по странице.
Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.
<ul> <li><a href="#">Галерея</a> <ul> <li><a href="#">Кухни</a></li> <li><a href="#">Кровати</a></li> <li><a href="#">Стенки</a></li> <li><a href="#">Прихожие</a></li> <li><a href="#">Шкафы-купе</a></li> <li><a href="#">Компьютерные столы</a></li> </ul> </li> <li><a href="#">Договор</a></li> <li><a href="#">Прайс</a> <ul> <li><a href="#">Кухни</a></li> <li><a href="#">Кровати</a></li> <li><a href="#">Стенки</a></li> <li><a href="#">Прихожие</a></li> <li><a href="#">Шкафы-купе</a></li> <li><a href="#">Компьютерные столы</a></li> </ul> </li> <li><a href="#">Образцы</a> <ul> <li><a href="#">Стекло</a></li> <li><a href="#">ДСП</a></li> <li><a href="#">Фурнитура</a></li> <li><a href="#">И т.д.</a></li> </ul> </li> <li><a href="#">Контакты</a> <li><a href="#">Важно</a> </li> </ul>
Взгляните, как смотрится список. Многие могут подумать, что это таблица.
Подменю работает, надо только подвести мышку к пункту, его содержащему (у нас это Галерея, Прайс и Образцы).
Делаем ноги
Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.
#footer {
height: 44px;
clear: both;
padding-top: 20px;
background: url(images/footer.gif) repeat-x;
border-top: 5px solid #A6640E;
}
#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #ffffff;
}
#footer a {
color: #ffffff;
}Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).
<p>Copyright © 2016. <a href="http://test1.ru/" title="Адрес сайта">Адрес сайта</a> | <a href="#">Слоган сайта</a></p> <p>+7-(777)-777-77-77 | <a href="#">Москва</a></p>
На этом оформление сайта завершено. В результате мы получаем законченный, готовый к использованию шаблон, части которого можно вынести в отдельные PHP-файлы, сделав из статической страницы динамическую.
Получившийся код здесь приводить не буду — вы можете просто скачать весь шаблон.
Полезные ссылки:
Заказать верстку сайта из PSD макета
Заказать верстку макета сайта вы можете в ближайшее время у исполнителя YouDo. Все, что нужно сделать, чтобы найти мастера – разместить на сайте YouDo задание. После публикации заявки вы начнете получать предложения о выполнении работы от заинтересованных специалистов. Изучите отклики и выберите подходящего программиста.
До оформления заказа у вас есть возможность узнать о профессиональном опыте верстальщика, прочесть на YouDo достоверные отзывы о мастере, а также увидеть примеры выполненных им работ.
Особенности оказания услуг
Обсудите с выбранным исполнителем YouDo условия заказа по телефону или лично. Детально расскажите мастеру о своих идеях, обрисуйте, каким вы видите дизайн и общую структуру будущей интернет-площадки. Специалист, зарегистрированный на YouDo, учтет все ваши требования и выполнит работы в точном соответствии с ними.
Условно верстка макета сайта делится на несколько этапов. Это:
- предоставление верстальщику технического задания
- создание исполнителем YouDo начального варианта в соответствии с ТЗ
- утверждение вами выполненной работы или внесение исправлений и коррективов (при необходимости)
С помощью сервиса YouDo вы в кратчайшие сроки найдете опытного или начинающего частного мастера, а также профильную компанию. Сведения о каждом специалисте, зарегистрированном на YouDo, подтвердила администрация сайта.
Поручите HTML-верстку ответственному профессионалу, не тратя время на длительный поиск надежного мастера. Исполнитель YouDo выполнит работу в строго условленный срок.
Сколько стоят услуги верстальщика?
У исполнителей YouDo можно заказать верстку макета сайта по выгодной цене. Стоимость в каждом случае рассчитывается индивидуально, но всегда остается приемлемой. Общие параметры, влияющие на тариф – это:
- объем работы
- сложность выполнения заказа
- необходимость вносить коррективы, дополнения в оформление сайтов, переделывать итоговый вариант по вашей инициативе (полностью или частично)
Если будет необходимо, программист, зарегистрированный на YouDo, недорого обработает изображения, подключит внешние модули и метрику, настроит работу форм. Вы также можете поручить исполнителю наполнение площадки уникальным графическим и текстовым материалом.
На YouDo зарегистрированы компании, создающие сайты за разумную плату. У вас также есть возможность обратиться к частному мастеру, который оказывает услуги без посредников. Исполнители, работающие на себя, часто ведут гибкое ценообразование услуг. За счет отсутствия фиксированных цен вы можете лично согласовать с мастером стоимость работы.
Почему стоит обратиться к исполнителям YouDo?
Все верстальщики, зарегистрированные на YouDo, заинтересованы в стабильном притоке заказов. Именно поэтому исполнителю важно профессионально выполнить работу, получив от вас хорошую рекомендацию. Опытный специалист создаст макеты для интернет-магазинов, блогов, корпоративных страниц и других web-сайтов, точно следуя ТЗ.
Воспользуйтесь квалифицированной помощью исполнителя YouDo и оцените высокое качество работы и индивидуальный подход к вашему заданию. В пользу заказа услуг на YouDo можно привести несколько доводов. Это:
- самостоятельный и удобный выбор компании или верстальщика на фрилансе по ряду критериев (расценки на услуги, квалификации исполнителя и т. д.)
- обсуждение рабочих моментов с мастером еще до оформления заказа
- возможность оценить портфолио специалиста и прочесть объективные рекомендации в его пользу
Исполнители YouDo гарантируют сдачу готового проекта точно в срок. Мастер, к которому вы обратитесь, профессионально разработает дизайн веб-страниц сайта, грамотно расположит на них текст, изображения и другой важный для посетителей материал.
Создать задание для специалистов, зарегистрированных на YouDo, можно в любой день недели 24 часа в сутки. Для удобной и быстрой подачи заявки на поиск мастера, которому будет доверена верстка сайта из PSD и создание контента, вы можете воспользоваться как ПК, так и смартфоном на базе Android и iOS. Отклики от мастеров, готовых приступить к работе, поступят достаточно быстро, что позволит вам срочно заказать верстку макета сайта для магазина или каталога.
Автоматическая HTML/CSS верстка сайта из Photoshop
Пошаговая инструкция для создания HTML5/CSS3 верстки сайта из PSD файла
Для автоматической верстки сайта из дизайна Photoshop вам не потребуется практически никаких усилий. Сервис сделает за вас почти все. Мы стремимся к полной автоматизации процесса CSS верстки, но полностью автоматизировать такой творческий процесс, как HTML верстка сайта, невозможно. Вы можете значительно улучшить автоматически создаваемую верстку сайта, если будете следовать нескольким простым правилам.
- Не препятствуйте генерации CSS3 стилей для слоев. При создании макета используйте ‘Shape’, ‘Layer mask’ и ‘Clipping Mask’, эффекты слоев. При этом используйте для слоев только те эффекты, которые возможно преобразовать в CSS3 (все, кроме: ‘Satin’, ‘Bevel & Emboss’). Ни в коем случае не растеризовывайте слои!
- Помечайте слои тегами в соответствии с документацией сервиса автоверстки. Если из слоя или группы слоев в Photoshop требуется получить в HTML верстке сайта такие элементы, как ссылка, форма ввода, таблица, список, и т.п., то следует пометить слой или группу соответствующим тегом. Все поддерживаемые теги смотрите на странице документации.
- Группируйте слои логически. Некоторые начинающие дизайнеры не следят за структурой слоев в Photoshop. Профессиональные дизайнеры всегда объединяют слои в логические группы и соблюдают строгую структуру в PSD макете. Настоятельно рекомендуем объединять все слои в логические группы (такие как заголовок, футер, основной контент, колонки и т.п.). Для этого используйте группы слоев (Layer Group) в Photoshop. Это поможет сервису автоматически создать ожидаемую структуру документа.
- Одно логическое изображение — один слой / Smart Object / группа с тегом #merge. Из каждого видимого слоя в Photoshop в создаваемой HTML вёрстке сайта получается отдельный HTML/CSS элемент. Если в макете для создания одного изображения (такого как логотип/бэкграунд/т.п.) используется несколько слоев — объедините слои в группу и пометьте группу тегом #merge. Либо создайте из этих слоев один Smart Object. В противном случае, в верстке сайта для представления одного логического изображения будет использовано несколько изображений, что ухудшит качество верстки.
И конечно, помогайте разработчикам улучшить сервис автоматической конвертации PSD в CSS верстку. Если вы загрузили PSD файл, но получили на ваш взгляд не то, что должны были получить, пожалуйста, сообщайте нам об этом на почту [email protected].
Верстка PSD макета по Bootstrap 4 сетке. Часть 1
На этом уроке мы подготовимся к верстке сайта по PSD макету, используя только сетку (Grid System) от фреймворка Bootstrap 4. Научившись такому методу верстки, вы избавляете себя от возможных проблем с адаптивностью сайта, особенно это хорошо для новичков.
Адаптивность сайта при верстке по сетке Bootstrap-а обеспечивают flexbox-сы, поддерживаемые всеми основными браузерами и даже Internet Explorer-ом, начиная с IE9+. Для более ранних версий, чем IE 9, подключаем скрипты, помогающие правильно отображать нашу верстку.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script
src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
И самое главное – PSD макет изначально должен быть нарисован с учетом дальнейшей Bootstrap верстки. А так, других нет причин, почему не верстать по бутстраповской сетке, как в своих проектах, так и на заказ. Постараюсь дать меньше теории, никакой воды и больше практики.
Подготовка к верстке
Откройте макет в Photoshop-е и убедитесь, что он имеет 12-ти колоночную разбивку по направляющим, а все элементы дизайна выровнены относительно этих направляющих. Расстояние между крайними направляющими как правило равняется 1170 пикселям.
Скачайте на сайте https://getbootstrap.com/ компилированный CSS и JS для легкой интеграции в ваш проект.
Скопируйте из раздела Introduction / Starter Template — стартовый шаблон страницы и вставьте в индексный HTML-файл вашего проекта. Мы создали заготовку для будущего HTML документа.
Скачивать
bootstrap.min.css или использовать ссылку на него?
Есть мнение, что файл bootstrap.min.css будет быстрее подгружаться, поскольку он находится на нескольких серверах, а не на одном вашем сервере. А значит и сайт будет быстрее открываться. Если вы все-же решите этот файл скачать себе, то указывайте правильный путь к папке с Bootstrap файлами. Создавать пустой CSS файл, куда вы будете писать свои стили, необходимо в любом случае.
Важно! Ваш CSS файл в индексном файле, должен быть подключен ниже, чем bootstrap.min.css.
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet">
Подключаем шрифты. Какие шрифты и иконки дизайнер использует в макете, можно увидеть в программе Photoshop или в расширении для браузера Chrome – WhatFont.
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic"
rel="stylesheet" type="text/css">
Зачем нужны два
CSS файла?
CSS файл bootstrap.min.css – это библиотека, в которую даже не надо заходить. Мы работаем только с одним файлом — main.css, только надо следить, чтобы названия новых классов для вашего CSS файла случайно не совпали с «библиотечным».
В файле bootstrap.min.css уже созданы стили для сетки на flexbox-ах и прописаны медиа-запросы, нам просто нужно прописать подходящие классы в нужные блоки на HTML странице. Названия классов можно найти на странице фреймворка в разделе Grid. Опытные верстальщики для Bootstrap верстки подключают плагины (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) к редактору кода Sublime Text.
Разбиваем
PSD макет на блоки
Мы видим, что сайт состоит из 8-ми блоков: шапка (header) с меню навигацией (nav), 6 секций (section) и подвал (footer).
В секциях (section: #services, #portfolio) появляются колонки, которые мы и будем верстать на основе главного компонента Bootstrap-а – сетке.
Делаем сначала HTML разметку основной структуры, детали будем добавлять по ходу верстки.
<nav></nav>
<header></header>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<footer></footer>
В следующей части, приступим к верстке, но не всего макета, а отдельных его блоков. Так как цель этих уроков – показать новичкам, как можно удачно совмещать обычную верстку макета с версткой по сетке Bootstrap.
-
Создано 15.02.2018 10:25:00 -
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
8 мировых лидеров в области вёрстки из PSD в HTML/CSS
Веб-дизайнеры бывают разные: одни предпочитают вести продукт от и до, занимаясь в том числе программированием, для других кодинг представляет определённую трудность. Однако конвертирование PSD в HTML/CSS — головная боль для всех: неприятные сюрпризы, различные ошибки на этом этапе не редкость. Облегчить задачу призваны ресурсы, речь о которых пойдёт ниже.
Компания, специализирующаяся на услугах конвертирования и известная на территории более чем 50 стран мира. Функционал не ограничен HTML — здесь также занимаются множеством иных типов разметки. Следует отметить, у этого проекта внушительная репутация: к настоящему времени в WordPress с его помощью имплементировано около 500 шаблонов.
Начать работу с этим проектом можно бесплатно: в рамках ограниченного доступа вам дано право на безвозмездную обратную связь и консультации от его авторов. Всё остальное влетит в копеечку, однако, по уверению самих разработчиков, PSDgator славится своим перфекционизмом в части программирования и гуманной техподдержкой.
Относительно молодая компания, но порядка полутысячи довольных клиентов не дадут соврать: эти ребята своё дело знают. Присылать в обработку можно исходник изображения любого стандартного формата — в кратчайшие сроки вы получите образчик кросс-браузерных, SEO-дружественных HTML/CSS-файлов.
В активе команды Direct Basing — более 10 тысяч реализованных проектов. Специалисты компании оказывают услуги по нарезке PSD-макетов, в том числе в рамках отзывчивого веб-дизайна. Для новых клиентов действует 10%-я скидка.
Не менее именитая организация, в сферу компетенций которой входит целый комплекс услуг по разработке, включая вёрстку из PSD в HTML и HTML5, создание адаптивного веб-дизайна. Готовый продукт предоставляется в течение 48 часов. Среди клиентов — Coca-Cola, Unilever, Vodafone и другие.
Front-end- и back-end-разработка, вёрстка из PSD в HTML, CSS, JavaScript, HTML Email — вот краткий список задач, которые решают разработчики XHTMLized. Специалисты компании также владеют языком CSS3, что позволяет им оперативно создавать анимированные элементы для сайтов и приложений.
Пусть название этой команды из Польши вас не смущает: если чёрный юмор кому и позволителен, то только профессионалам. Обратиться к ним имеет смысл, если вас интересует кросс-браузерная вёрстка из PSD в HTML, интеграция сайта с такими CMS, как WordPress, Drupal, Joomla!, Magneto, Email. Средний срок работы — 1 день.
Самый оптимальный вариант по соотношению цены-качества — так о нём отзываются сами представители компании. Действительно, вёрстка из PSD в XHTML 1.0 или CSS за $45 — это недорого, к тому же вся работа занимает около суток. Среди дополнительных услуг — адаптивные шрифты, два уровня выпадающих меню, footer stretch и другие.
Автор: Денис Стригун
Верстка сайта из psd — заказ услуг професионального верстальщика : Сайтобаза
Верстка – процесс перевода из фотошоповского PSD макета в понимаемый современными браузерами компьютеров и мобильных телефонов формат html/css.
После верстки вы получаете архив, но назвать это полнофункциональным сайтом нельзя: ведь сайт нужно как-то наполнять, обновлять, а делать это в коде не обученному довольно неудобно.
Поэтому после верстки макет нужно натянуть на какой-то движок – систему управления контентом. Большинство современных движков удобны в управлении, наполнении и не требуют каких-то специфических знаний.
Ниже я пропишу табличку с расценками на верстку макетов, интеграцию в CMS и технологии, которые я использую.
Каждый макет, каждый сайт уникален. Нельзя точно сказать сколько займет времени разработка. Соответственно и нельзя, без ознакомления с макетами, техзаданием, сказать сколько это станет по цене за работу. Ниже усредненные цены на услуги верстки.
| Что? | Сколько? | Как долго? |
Верстка главнойБольшинство главных страниц сайта наиболее функциональны, нагружены по сравнению с другими страницами. На такие страницы уходит больше времени, поэтому и стоят они дороже. | $15-25 | 2-3 часа |
Верстка второстепенных страницВторостепенные страницы менее захламленные, основная их задача – донести контент до посетителя. Они проще, некоторые элементы (шапка и подвал) могут использоваться с главной страницы. | $5-15 | 60-90 минут |
Верстка под мобильные устройстваОчень многое в адаптивной / респонсивной / мобильной верстки зависит от отличий макета от основной версии сайта. Разброс временных затрат довольно большой. Зачастую около 40-60% бюджета полного сайта | 50-60% $40-50 | – |
Добавление скриптовСовременные веб сайты ну никак не обходятся без использования JavaScipt – это и разнообразные галерейки, слайдшоу, слайдеры, модальные окна и прочее. В работе я использую как самописные простые вещи, так и плагины к Jquery. | $5-10 | 30-60 минут |
Верстка почтовых рассылокСпецифический тип верстки – почтовые клиенты развиваются медленней браузеров, приходится учитывать довольно старые технологии, разные форматы экранов. Инлайновые стили, невозможность нормальной работы с изображениями… | $20-40 | 2-4 часа минут |
Указанные цены – это то-то усредненное.
Как правило стоимость верстки с нуля и разработки под ключ простого сайта варьируется в пределах $70-90
Естественное добавление мобильной версии, какого-то дополнительного функционала удорожает проект, но все в разумных пределах.
[wpspoiler name=”HTML5/CCS3 верстка div’ами (табличная по желанию заказчика)”]
Табличная верстка хоть и устарела, но сейчас активно используется для некоторых элементов – отзывчивая верстка, верстка писем или pdf документов.
Во всех остальных случаях я активно использую последние тренды в разработке с помощью HTML5 и CSS3. Постоянно ставлю перед собой задачи минимизации основного html кода, использование псевдоэлементов – это упрощает дальнейшую поддержку кода сайта.
[/wpspoiler]
[wpspoiler name=”Верстка под мобильные устройства” ]
Сейчас уже поисковые системы ранжируют выше сайты, адаптированные под мобильные устройства. Да и количество мобильников / планшетов просто огромное количество. Поэтому все больше клиентов просят разрабатывать сайт учитывая возможность нормальной работы на телефонах.
[/wpspoiler]
[wpspoiler name=”Оптимизированный код, стили, скрипты и изображения”]
Мало просто порезать сайт на картинки и натянуть это на каркас. Правильно сверстанный сайт должен содержать минимум графики, минимальное количество загружаемых сторонних элементов, максимально пожатые (естественное без потери качества) изображения.
Все это есть у меня;)
[/wpspoiler]
[wpspoiler name=”Кроссбраузерно для всех популярных браузеров”]
Разработкой сайтов я занимаюсь с 2007 года и уже как-то вошло в привычку писать код учитывая возможность использования на устаревших устройствах. Поддерживаю все современные и не очень браузеры.
Естественное поддержка всяких IE6-IE8 обойдется дороже, но эти браузеры используют менее 0.5% посетителей – стоит ли на них обращать внимание? Лучше повешать для них заглушку, хотя возможны исключения.
Кросбраузерно – означает что ваш сайт будет одинаково работать на всех популярных браузерах. Ведь кто-то отдает предпочтение Opera, кто-то использует Chrome, а у кого-то на работе запрещено использовать всё кроме интернетэксплорера. У всех браузеров свои методы отображения страниц, и при верстке нужно учитывать все их пожелания.
[/wpspoiler]
[wpspoiler name=”Валидно согласно http://validator.w3.org/” ]Как и любой другой инструмент, язык разметки html должен соответствовать стандартам. Один из мощнейших сервисов проверки на соответствие правильности html кода – http://validator.w3.org/. Практически все вебмастера прислушиваются к его требованиям.[/wpspoiler]
[wpspoiler name=”Верстка seo-оптиммизированная, учитывая последние рекомендации Google и Яндекс” ]Что такое поисковая оптиммизация, я думаю вам говорить не нужно? На позиции вашего сайта влияют сотни факторов. И немаловажными являются правильная верстка сайта и разметка основных элементов. [/wpspoiler]
[wpspoiler name=”Домолнительно могу использовать микроразметку с рекомендациями от http://schema.org/” ]Это язык микроразметки. Используется в основном поисковой системой Google для буржуинов, но уже сейчас некоторые элементы применяются и в рунете. О поддержке микроформата schema.org заявил и Яндекс, и некоторые другие поисковые системы. [/wpspoiler]
[wpspoiler name=”Активно использую скрипты JavaScript” ]jQuery – библиотека JavaScript’a, которая улучшает работу html. С помощью этих красивостей сделаны множество современных сайтов – всякие карусельки, слайдеры, AJAX подгрузка страниц[/wpspoiler]
[wpspoiler name=”Верстка с нестандартными шрифтами” ]Есть множество разных вариантов верстки нестандартных шрифтов. Иногда используют тяжелые флешевые элементы, иногда изображение режут и каждую букву вставляют отдельно. Я же использую самый прогрессивный и понятный для всех браузеров метод – Cufón. Конечно это в том случае, если такие шрифты невозможного подключить через обычный font-face[/wpspoiler]
После того, как сайт сверстан – его нужно натянуть на какую-то систему управления контентом. На сегодня я отлично натягиваю верстку сайта на такие популярные CMS как WordPress и DLE, несколько раз работал с интернет-магазином PrestaShop и некоторыми другими. Вообщем при верстке практически нет преград, большинство современных движков имеют типичную шаблонизацию. Единственное что – я не люблю Joomla, и могу только отверстать шаблон, но натягивать я откажусь практически во всех случаях.
PSD в HTML — глупый способ создать веб-сайт (лучший способ? Ручка и бумага) | Автор: Итан Райан.
Файл данных Photoshop нарезан и преобразован в HTML и CSS.
Интервью прошло успешно.
Мне понравилось говорить со своими интервьюерами о том, что их компания предлагает своим клиентам, и с какими проблемами сталкивается их команда инженеров.
Интервью больше походило на беседу. У меня было к ним столько же вопросов, сколько и ко мне. Мы немного посмеялись. Я провел экскурсию по их офису, который показался мне отличным местом работы.Люди выглядели занятыми и счастливыми. Я мог представить себя работающим там. Все было хорошо.
Затем я получил вызов кода.
«Учитывая, что большинство наших проектов будут строить / управлять WordPress — как бы вы относились к превращению PSD в WordPress как своего рода домашнее задание — что-то очень простое, что можно сделать быстро?»
«С вызовом кода проблем не возникнет», — ответил я. «Я могу начать это сегодня».
Он прислал мне PSD.
Я начал поискать в Google «конвертировать PSD в HTML» и «конвертировать PSD в WordPress».
Я начал читать о нарезке слоев в Photoshop и понял, что мне понадобится Photoshop, чтобы действительно что-нибудь сделать с этим файлом PSD.
В интервью мы говорили о HTML, CSS и Javascript, а также о jQuery и React, и мы говорили о WordPress и PHP, с которыми у меня был небольшой опыт, хотя я делал больше бэкэнд-вещей с Ruby и Ruby. на рельсах. Но мы не говорили о Photoshop, с которым у меня было очень мало опыта.
Возможно, люди просто предполагают, что у всех есть опыт работы с Photoshop, как у всех есть опыт работы с Microsoft Word и Excel.Вероятно, это безопасное предположение. Но я не особо дизайнер. Однажды я сделал макеты с помощью Balsamiq, когда консультировал стартап, но для своих собственных приложений и веб-сайтов я всегда полагался на проверенный временем метод ручки и бумаги.
pen-and-paper.jpg
К счастью, Adobe предлагает 7-дневную бесплатную пробную версию Photoshop.
Мой опыт работы с PHP был ограничен, и хотя я любил WordPress несколько лет назад, потому что он предлагал хороший интерфейс для нетехнических людей, желающих создать веб-сайт, глядя на него сейчас, после создания некоторых веб-сайтов с нуля, все это казалось таким раздутый кодом.Разве я не могу просто использовать Bootstrap?
Но самой большой проблемой для меня был Photoshop. Я не знал, что, черт возьми, делаю. Все эти слои. Все эти инструменты для сортировки в левой части экрана. Кто делает сайты такими?
Мне потребовалось несколько дней, много копаний и поисков в гугле, чтобы воссоздать PSD в WordPress.
У меня также было еще несколько собеседований за это время, что заставило меня задуматься, стоит ли мне упоминать, когда я отправляю этот вызов кода, что я бы сделал это раньше, если бы я не готовился и не брал интервью с другими компаниями, дает мне проблемы с кодом для проверки моих способностей к программированию?
Я с нетерпением жду того дня, когда мне будут платить за кодирование, чтобы мне больше не пришлось выполнять какие-либо испытания кода, чтобы доказать, что я умею кодировать.Я понимаю, что это необходимо, но, черт возьми, на это уходит много времени.
В любом случае, вернемся к моему предыдущему вопросу «Кто делает сайты такими?»
Я нашел хороший пост в блоге Treehouse под названием «PSD в HTML мертв», который, как мне показалось, содержит несколько хороших моментов:
- PSD в HTML — это рабочий процесс, который выглядит следующим образом:
* создайте в Photoshop макет того, что вы хотите ваш сайт должен выглядеть как
* используйте инструмент фрагмента для разделения изображений сайта
* напишите HTML и CSS, включающие изображения, чтобы воссоздать «идеальную до пикселя» копию макета Photoshop - Раньше PSD в HTML рабочий процесс имел смысл, потому что браузеры не поддерживали все функции современного CSS, поэтому дизайнерам приходилось делать что-то с изображениями, например создавать тени и закругленные углы, а разработчики затем использовали эти изображения на веб-сайтах.Кроме того, Интернет был доступен только в браузерах для настольных ПК, поэтому никому не приходилось беспокоиться о том, что сайт хотел бы видеть на телефоне или iPad.
- Но в наши дни люди смотрят веб-сайты на iPhone, iWatches, iGlasses или что-то еще, поэтому «идеальный по пикселям» Photoshop не имеет значения. Сайты теперь адаптируются. Сайты выглядят по-разному на разных устройствах и должны хорошо выглядеть на всех устройствах. Если вы дизайнер, предоставьте разработчику все графические ресурсы заранее, а не PSD, чтобы они могли разрезать их.Затем позвольте разработчику сходить с ума, стилизуя изображения с помощью CSS и заставляя их правильно масштабироваться в браузерах на устройствах разного размера.
В наши дни люди смотрят веб-сайты на iPhone, iWatches, iGlasses или что-то еще.
Процитируем сообщение в блоге 99designs: «Адаптивный веб-дизайн подстраивает контент под экран устройства. … Гибкие сетки основаны на разработке макета веб-сайта на процентных значениях, а не на заданных пикселях ».
Что-то, что я узнал о себе, — это то, что я испытываю сильные чувства к вещам, о которых я даже не подозревал.Я впервые увижу славу и скажу: «Я не люблю славу! Глорп тупой! » А через неделю я скажу: «Я люблю славу! Glorp — лучший! » Я непостоянный огурчик. Ммм, соленья.
perfection — это поиск в Google
Мне не нравится термин «безупречный пиксель». Это термин, который я видел в последнее время в объявлениях о вакансиях, и каждый раз, когда я вижу его, я думаю, что это «отвратительно». Но я пристрастен. Я вообще не люблю совершенство. Совершенство — враг хорошего. Это чья-то цитата или неправильная цитата. Я не придумал.Но я полностью согласен с этим. Мне нравится стремиться к величию, но я предпочитаю практичность идеализму. Иногда хорошее лучше, чем лучшее.
Пиксельное преобразование веб-дизайна в HTML — это глупо. Разработчикам следует сосредоточиться на функциональности приложений и предоставлении пользователям данных, а не на перемещении пикселей.
Эта статья «PSD в HTML мертв» заканчивается рассказом о том, почему Photoshop все еще важен для веб-дизайна, который я процитирую здесь в большом отрывке:
Номер 1:
Высококачественные мокапы могут иметь решающее значение. инструмент коммуникации при работе с клиентами веб-дизайна…. Высококачественный макет может служить инструментом обсуждения перед написанием большого количества кода (только для того, чтобы обнаружить, что это не то, что хотел клиент).
И номер 2:
Высококачественные макеты могут быть очень важны при работе в командах среднего и большого размера. … Потому что это мощный способ синхронизировать ментальную модель каждого, как будет выглядеть функция или как проект может выглядеть после его завершения.
Эти причины мне понятны. Возможно, я буду больше работать с Photoshop, и мне он понравится.Я разработчик, а не дизайнер, но разработка крупномасштабных приложений и веб-сайтов означает работу с более сложными макетами, чем те макеты, которые я делал ручкой и бумагой.
Независимо от того, получу я эту работу или нет, на этой неделе я узнал кое-что полезное:
— PSD в HTML — это когда-то и все еще популярный рабочий процесс веб-дизайна и веб-разработки
— Мне не очень нравится PSD в HTML рабочий процесс
— Я непостоянный огородник. У меня есть твердое мнение о вещах, о которых я даже не подозревал, и это мнение легко может измениться.Возможно, через неделю мне понравится рабочий процесс из PSD в HTML. Неделю назад я даже не знал, что такое PSD в HTML. Люди — существа странные и глупые, не так ли?
Спасибо за чтение! Теперь выйди на улицу и обними дерево.
hugatree
Пока.
Преобразование PSD в HTML — Полное руководство для разработчиков
- 6 мин.
- 22765 Представления
Эпоха технической смекалки, в которой мы живем, заключается в ежедневном обновлении.Он требует от каждого предпринимателя оставаться самым быстрым в своей работе, используя новейшие технологии. Преобразование PSD в HTML — это быстрый способ добавить интерактивные функции в файлы статических изображений.
Сначала вы создаете дизайн в Photoshop, популярном инструменте для редактирования изображений. Затем преобразуйте их в формат HTML. Нарезка изображений из PSD — не новость на современной цифровой арене. Но главное — делать это с умом для получения эффективных результатов.
Можно использовать разные подходы, включая самокодирование, автоматизированные инструменты или наем специального специалиста из надежной компании по веб-разработке.Это поможет выполнить этот процесс самым профессиональным образом.
Использование программного конвертера PSD в HTML
При преобразовании PSD в HTML полезно автоматизировать процесс с помощью соответствующего программного обеспечения. Как и другое программное обеспечение, оно также имеет недостаток, поскольку вы не можете получить действительно настраиваемый код HTML / CSS с помощью программной автоматизации.
Более того, невозможно получить идеальное по пикселям преобразование с файлом PSD, которое он может получить посредством взаимодействия с ручным кодированием.
Это не означает, что фронтенд-разработка не полагается на автоматические преобразования.Их можно использовать в нескольких случаях, в том числе —
- Базовый магазин электронной коммерции на основе Shopify
- Бизнес-сайт на Basekit или Squarespace
Мораль истории — получить размещенный шаблон веб-сайта, и это программное обеспечение хорошо служит этой цели.
Интерфейсные инструменты для преобразования PSD в HTML
Давайте вместе начнем новый проект по конверсии! Начать
Использование внешней среды разработки
Фреймворки для фронтенд-разработки сегодня востребованы.Причина в том, что они упрощают разработку без необходимости начинать с нуля. Но вы не ограничены использованием определенной структуры для каждого проекта. Вполне приемлемо работать без какой-либо структуры, если вы не обладаете навыками, чтобы справиться с ней.
Самыми распространенными программными фреймворками для внутреннего программирования являются Laravel (PHP), Ruby on Rails (Ruby), а также интерфейсные фреймворки, которые проникли во фронтенд-индустрию. Фреймворки внешнего интерфейса в основном сосредоточены на трех основных областях дизайна, таких как фреймворки CSS, HTML и JavaScript.
Плюсы и минусы
- Существует большая дилемма, какой фреймворк использовать. Если тот, который вы выбрали, является новым для вас, вам нужно научиться реализовывать его с помощью кода. Это увеличивает временные рамки проекта.
- Фреймворки, как известно, уменьшают объем кода для страницы. Но они могут усложнить ваш проект, если у вас меньше знаний о синтаксисе и способах работы фреймворка в приложении.
- Если обратная сторона медали будет замечена, на рынке доступно множество фреймворков.Таким образом, сложно изучить каждую из них, а затем реализовать их в процессе проектирования.
- Очевидно, что фреймворки сокращают количество кода, необходимого для использования на веб-сайте. Параллельно с этим, время кодирования также сократится, если вы будете использовать их должным образом.
- При эффективном использовании каркасы могут повысить эффективность и, в свою очередь, проактивно улучшить дизайн.
И что самое сложное, не всегда гарантируется, что вы получите лучший код.Фреймворк должен иметь хорошую поддержку сообщества, чтобы оказывать вам непрерывную поддержку.
Использование различных типов макета для преобразования PSD в HTML
Перед тем, как начать процесс конвертации, сначала нужно определиться с макетом. Обычно у вас есть 4 основных типа макета на выбор —
Адаптивный
«Адаптивный» не может быть отделен от индустрии дизайна из-за красоты, которую он придает веб-сайту, когда он загружается на устройства разных размеров. Адаптивный дизайн сдвигает макет веб-страницы по размеру экрана.Этот макет можно использовать в качестве ядра для большинства веб-приложений, предназначенных для мобильных устройств.
Mobile Onl y
Некоторые приложения не работают на настольных компьютерах. Значит, им нужен только дизайн, который подойдет к планшету или смартфону.
Фиксированный
Эти макеты подходят только для настольных ПК со статической шириной и высотой. Элементы, существующие в макете, не сдвигаются в зависимости от размера экрана или когда пользователь минимизирует окно.
Жидкость
Дизайн
Fluid предназначен для мобильных и настольных компьютеров.Когда пользователь сворачивает браузер или использует меньший экран, элементы в их контейнерах имеют тенденцию смещаться.
Компоненты дизайна веб-сайта
Перед тем, как начать преобразование, важно проанализировать фактическую структуру ваших веб-страниц.
Подробно они содержат разные компоненты-
Логотип
Обычно вы можете разместить логотип в заголовке веб-страницы.
Заголовок
Это верхняя часть вашей веб-страницы, которая должна содержать логотип компании, изображение, слоган, слайдеры, флэш-анимацию и меню навигации в соответствии с макетом.
Кузов
Этот раздел веб-сайта содержит текстовое содержимое и модуль входа пользователя, если он сохраняется.
Когда вам нужно преобразовать дизайн веб-сайта на основе Photoshop, вы должны убедиться, что все эти компоненты собраны вместе в соответствующих положениях, не мешая внешнему виду страницы.
Пошаговый процесс преобразования PSD в HTML
Когда вы будете готовы с проектами в формате PSD, самое время выполнить преобразование, выполнив следующие шаги —
1.Нарезать PSD
В качестве первого шага нарежьте файл PSD на небольшие части с несколькими слоями. Преимущество использования нарезанной версии PSD на вашей HTML-странице заключается в том, что это поможет вашим страницам загружаться быстрее. Причина в том, что загрузка одного файла PSD займет много времени.
Для нарезки изображения можно использовать несколько инструментов нарезки, доступных в Photoshop. Можно использовать разные варианты нарезки, а именно:
- Нормальный
- Фиксированный размер
- Фиксированное соотношение сторон
- Ломтики из направляющих
После нарезки файла PSD обязательно сохраните нарезанную версию в меню «Сохранить для Интернета».Эти изображения можно поместить в каталог «images».
2. Создайте каталоги
Рекомендуется создать необходимые каталоги, чтобы можно было организованно управлять данными. Можно создать следующие каталоги:
- Основная папка с названием сайта
- Папка под названием «Изображения» в основной папке для хранения всех изображений, которые вы будете делать позже на сайте.
- Папка с именем «Стили» для файла CSS или таблиц стилей в основной папке
3.Напишите HTML
После создания необходимых папок самое время создать HTML-страницу. Вы можете использовать конструктор HTML-страниц, такой как Adobe Dreamweaver, и другие варианты, такие как Komposer или Amaya. Желательно создать новый файл в Dreamweaver как index.html и сохранить его в основной папке.
В HTML5 код легко разбивается сверху вниз —
- Заголовок- Верхняя часть любой страницы содержит логотип и другие пункты меню.
- Hero- Большой раздел вверху для выделения определенного изображения или какого-либо предложения.
- Slideshow- Удобное отображение списка изображений, которые скользят по странице.
- Content- Основная текстовая область, включая такие данные, как изображения, кнопки, текст и т. Д.
- Нижний колонтитул- Область в нижней части страницы с контактами, ссылками на блог и ссылками на социальные сети.
4. Создание файлов стилей
Когда вы получаете оболочку HTML, лучше добавить несколько стилей в CSS. В таких фреймворках, как BootStrap, существует множество стилей.Его можно придать индивидуальной форме по вашему желанию.
Вы можете создавать файлы стилей с помощью редактора HTML и сохранять их как styles.css в папке CSS. В таблице стилей может быть предоставлено несколько деталей о стилистических особенностях веб-страницы HTML, таких как размер шрифта, тип шрифта, положение изображения, цвет фона, поля и набор полей среди прочего.
Вы можете подключить таблицу стилей CSS к странице HTML.
Также читайте: PSD To HTML мертв: это миф или правда?
5.Создать набор веб-дизайна
Следующим шагом является создание набора дизайнов, собирая вместе все элементы. Для этого вам потребуется редактор кода, например Dreamweaver. После этого положитесь на быстрый макет HTML с помощью CSS, чтобы получить прочную основу. Теперь цвет фона тела и изображения устанавливаются, а основные элементы остаются в правильном положении.
6. Разрешить взаимодействие с JavaScript
Когда вы закончите работу с оболочкой HTML и CSS, вы должны принять во внимание JavaScript.Он использует jQuery и связанные с ним фреймворки, такие как react.js и vue.js. jQuery — это библиотека, которая организует DOM и добавляет дополнительные функции для создания динамических макетов.
Это упрощает программирование динамического интерфейса по сравнению с необработанным JavaScript. Точно так же две перечисленные платформы позволяют легко связывать элементы HTML с данными и функциями JavaScript.
Еще одно популярное имя в списке фреймворков — AngularJS. Он позволяет использовать стили MVC, чтобы вы могли динамически устанавливать данные в макетах HTML.
7. Сделайте его отзывчивым
Для эффективного преобразования PSD в адаптивный HTML хорошо использовать различные фреймворки, такие как Twitter Bootstrap, Less, Foundation и Fluid Baseline Grid. Медиа-запросы CSS хорошо подходят для добавления адаптивной функции в дизайн.
Кроме того, мы можем выполнить настройку каждого целевого экрана, чтобы персонализировать вывод для каждого экрана. для этого вы можете использовать разные теги экрана CSS для адаптивного экрана CSS по умолчанию.
Очевидным преимуществом здесь является широкий доступ пользователей через несколько платформ.Это, в свою очередь, увеличивает видимость в поисковых системах и органический трафик веб-сайта.
Подвести итог
Итак, читая все вышеперечисленные шаги, вы натолкнулись на несколько технических концепций. Вам нужно позаботиться о каждой концепции преобразования PSD в HTML. Возможно, вам не понадобится все в точности, как показано выше. Главный девиз — выполнить процесс как можно быстрее. Это приводит нас к созданию базового HTML, необходимого для простых страниц. Этим мы хотим направить вас на протяжении всего процесса преобразования.Вы можете связаться с нами для получения любых отзывов, предложений или запросов.
PSD в HTML мертв
Учебники
PSD в HTML есть во всем Интернете. На самом деле, многие люди спрашивали меня, почему на Treehouse нет учебника из PSD в HTML. В дополнение к учебным пособиям существует множество компаний, которые принимают PSD и конвертируют его в веб-страницу примерно за 100 долларов США.
Ознакомьтесь со всеми нашими курсами HTML в Treehouse.
Google возвращает более 48 миллионов результатов для поиска «psd в html».Это популярный, но не лучший способ создавать сайты.
Если он так популярен, то как я могу сказать, что он мертв? Что ж … Я бы хотел, чтобы каждая проблема веб-дизайна могла уместиться в поэтический твит из 140 символов, но это нечеткая проблема, требующая более четкого объяснения. Давайте копаться.
Бесплатная пробная версия Treehouse: Хотите узнать больше о HTML и стратегии дизайна? Щелкните здесь, чтобы попробовать бесплатную пробную версию Treehouse.
Что такое PSD в HTML?
В общем, «PSD в HTML» — это рабочий процесс.Сначала веб-страница создается в документе Photoshop (PSD), а затем преобразуется в код (с использованием HTML, CSS и JavaScript). Вы можете заменить Photoshop любым другим редактором изображений (например, Pixelmator, GIMP и т. Д.), Но принцип тот же. Вот несколько более подробная пошаговая разбивка:
- Создайте в Photoshop макет с высокой точностью до пикселя точно так, как вы хотите, чтобы ваш сайт выглядел.
- Используйте инструмент нарезки, чтобы разделить изображения своего веб-сайта, а затем экспортировать их в Интернет.
- Напишите HTML и CSS, используя изображения, экспортированные из Photoshop.
На первый взгляд это может показаться хорошей идеей. Может быть сложно начать кодирование, если вы не знаете, как будет выглядеть окончательный результат, поэтому сначала поэкспериментировать в Photoshop, а затем «экспортировать» его в HTML звучит как детальный и разумный процесс.
В Photoshop функция срезов в диалоговом окне «Сохранить для Интернета» раньше была важным инструментом для дизайнеров, сохраняющих ресурсы из PSD.Это позволило легко «нарезать» дизайн на изображения, а затем разместить его на веб-странице с помощью HTML и CSS.
Продолжая эту идею, многие веб-компании использовали PSD в HTML в качестве шаблона для командных рабочих процессов. Другими словами, дизайнер создает макет Photoshop, а затем передает его разработчику, который напишет весь код. В наше время рабочая роль веб-дизайнера, как правило, включает в себя эстетику, а также кодирование HTML и CSS.
Был ли PSD в HTML хорошей идеей?
Да, рабочие процессы из PSD в HTML были одним из лучших способов создания веб-сайтов.Есть две важные причины, по которым PSD to HTML имеет смысл использовать .
Первая причина — в изображениях. До того, как браузеры поддержали все замечательные функции современного CSS (тени, закругленные углы, градиенты и т. Д.), Было очень сложно создавать кроссбраузерные эффекты без использования изображений. Дизайнеры создавали тени и закругленные углы как изображения, а затем применяли хитрые приемы кодирования, чтобы разместить изображения на странице. Эти активы необходимо реализовать несмотря ни на что, поэтому создание их одновременно с макетом с высокой точностью фактически сэкономило время.
До разработки и широкого распространения CSS многие веб-сайты представляли собой набор графических ресурсов, которые выглядели примерно так. Одним из самых новаторских методов того времени была техника раздвижных дверей для создания вкладок еще в 2003 году.
Во-вторых (и, возможно, более важно) Интернет раньше был доступен только для настольных браузеров, а на самом деле не был на телефонах и планшетах, как сегодня. Когда-то разработка для одного фиксированного разрешения 1024 × 768 была вполне жизнеспособной.
По этим двум причинам понятно, почему дизайнер будет использовать Photoshop как свой основной инструмент веб-дизайна. Ресурсы изображений были необходимы для разрешения одного экрана.
Что не так с PSD в HTML сейчас?
Если сравнивать с другими областями искусства и технологий, Интернет является относительно молодой средой, и все быстро меняется. Я создал десятки веб-сайтов, используя некоторые варианты мышления PSD в HTML, и я уверен, что многие люди, читающие это, сделали то же самое, но пора двигаться дальше.Вот основные причины, по которым я считаю, что мышление в терминах PSD в HTML мертво.
Адаптивный веб-дизайн
Во-первых, сейчас существует множество способов просмотра веб-страниц. Телефоны, планшеты, настольные компьютеры, ноутбуки, телевизоры и многое другое. Не существует единого разрешения экрана, на которое мог бы ориентироваться дизайнер. Если продвинуться дальше этой идеи, то на самом деле больше не существует числа разрешений экрана, на которые можно было бы безопасно настроить таргетинг.
Screensiz.es предоставляет таблицы информации о популярных аппаратных устройствах.
Я не собираюсь вдаваться в подробности адаптивного веб-дизайна или масштабируемого дизайна, но дело в том, что Photoshop основан на пикселей и пикселей. Веб-страницы подвижны и меняются.
CSS Дизайн
Во-вторых, теперь стали общедоступными новые функции CSS. Здесь и там все еще есть несколько нерешенных проблем, но поддержка значительно улучшилась за последние несколько лет. Общие эффекты, такие как тени, градиенты и закругленные углы, могут быть выполнены с помощью CSS, и обычно даже не требуется резервное копирование на основе изображений.
Срок погашения
В-третьих, веб-индустрия сильно выросла. Вместе у нас было больше времени, чтобы уточнить наше нынешнее понимание того, что работает, а что нет. Большинство компаний ожидают, что дизайнер возьмет на себя ответственность за эстетику, а также за код HTML и CSS.
Это также означает, что существуют гораздо лучшие инструменты для поддержки современных рабочих процессов. CSS-фреймворки, такие как Bootstrap и Foundation, делают его более удобным для разработки в браузере. Такие приложения, как Balsamiq и Omnigraffle, помогают быстро создавать макеты сайтов.Карандашные и бумажные макеты выдержали испытание временем, потому что они допускают чрезвычайно быструю итерацию.
Означает ли это, что Photoshop мертв?
Нет! Даже не близко. Photoshop по-прежнему очень важен для веб-дизайна. Проблема возникает, когда мощный инструмент, такой как Photoshop, используется в качестве универсального решения, не думая о задаче более высокого уровня (разработка веб-сайтов). Photoshop отлично подходит для редактирования и экспорта фотографий для использования в Интернете. Также существует множество ситуаций, когда все же имеет смысл создавать макеты с полной детализацией (в Photoshop, Illustrator или другом) как часть более полного процесса.Вот пара примеров:
- Мокапы с высокой точностью могут быть важным инструментом коммуникации при работе с клиентами веб-дизайна. Может показаться, что быстрее , чтобы пропустить макет с высокой детализацией, но позже это может повредить, потому что многие клиенты не поймут, как каркас будет транслироваться в веб-браузер. Макет с высокой точностью может служить инструментом обсуждения перед написанием большого количества кода (только для того, чтобы обнаружить, что это не то, что хотел клиент).
- Высококачественные мокапы могут быть очень важны при работе в командах среднего и большого размера.Мы часто создаем макеты в высоком разрешении в Treehouse при планировании новых курсов или разработке новых функций нашего сайта, потому что это мощный способ синхронизировать ментальную модель каждого, как будет выглядеть функция или как проект может выглядеть после его завершения.
Эти два примера имеют ключевое отличие от образа мышления PSD и HTML. Мокапы с высокой детализацией все еще иногда создаются, но не для того, чтобы их можно было «перебросить через забор» команде разработчиков или нарезать на код.Скорее, макеты Photoshop можно использовать как наглядное пособие для обсуждения идей. В рабочем процессе PSD в HTML документ Photoshop представляет собой конечный сайт, и ожидается, что он будет выглядеть точно так же в браузере. Это тонкое, но важное отличие.
Различные штрихи
Рабочий процесс у всех разный, и никто не знает, как создать идеальный веб-сайт. Вы всегда должны делать то, что наиболее эффективно для вас и ваших коллег. Перемещать пиксели в Photoshop — это очень весело, но я могу признаться во многих случаях, когда зашел слишком далеко.Ключ в том, чтобы знать себя и то, что заставляет вас работать с максимальной эффективностью. Если у вас есть какие-либо вопросы или мнения, я хотел бы услышать о них в комментариях!
35 высококачественных уроков по веб-дизайну в Photoshop
Если вы хотите разобраться в создании веб-сайтов, одним из первых навыков, которые вам понадобятся, будет уметь создавать концептуальный дизайн веб-сайтов в Photoshop. В этом посте собраны 35 из лучших руководств по веб-дизайну в Photoshop в Интернете.Узнайте, как простые эффекты и методы используются для создания подробных макетов в различных стилях и как элементы страницы макетируются в законченные дизайны страниц.
Создайте стильную страницу портфолио с временной шкалой с помощью Photoshop
Благодаря этому руководству теперь вы можете создать стильную страницу портфолио с временной шкалой с помощью Photoshop. Этот пример имеет чистую страницу с тремя столбцами и покажет вам, как создавать собственные сетки, выбирать правильную типографику и как немного поиграть с цветами.
Создайте элегантный узорчатый веб-дизайн в Photoshop
Этот урок создан Эриком Хоффманом, который научит вас создавать элегантные узоры в Photoshop. Это только одно из его руководств, если вам интересно, посмотрите!
Создание элегантного макета блога в Photoshop
Если вы хотите, чтобы ваш проект имел элегантный вид, этот урок определенно поможет. Вам нужно будет найти изображение, которое будет сильным посланием и девизом.
Как создать веб-дизайн в стиле гранж с помощью Photoshop
Это простое руководство очень пригодится, если вам когда-либо понадобится запоминающийся веб-макет в стиле гранж, и вам даже не нужно иметь опыт работы с Photoshop.
Создайте текстурированный веб-сайт на открытом воздухе в Photoshop
Из этого туториала Вы узнаете, как создать текстурированный веб-сайт на открытом воздухе, используя только Photoshop. Это простое пошаговое руководство.
Создание простого портфолио на основе Instagram в Photoshop
Вы думали о разработке учебника по портфолио на основе Instagram для себя или своих клиентов? В этом руководстве вы научитесь использовать чистую цветовую палитру и несколько гладких шрифтов.
Как создать веб-сайт для чистого бизнеса с помощью Photoshop
Если вы пытаетесь создать веб-страницу, посвященную продвижению бизнеса, возможно, вам стоит взглянуть на это руководство и узнать о некоторых новых приемах на протяжении всего процесса.
Как сделать шаблон сайта
Из этого видеоурока вы узнаете, как создать шаблон веб-сайта с нуля с помощью Photoshop. Вас будут сопровождать на каждом этапе процесса.
Если у вас возникли проблемы с дизайном заголовка вашего веб-сайта, это руководство может прийти вам на помощь.
Самый подробный учебник из PSD в HTML
Этот подробный учебник охватывает почти все, что вам нужно знать, начиная с каркасной схемы и заканчивая преобразованием вашего PSD в рабочую и адаптивную HTML-страницу.
Создание простой сети для начинающих
Из этого простого урока вы научитесь создавать простую веб-страницу с помощью Photoshop. Под видео вы найдете все необходимые ресурсы.
Как создать профессиональный веб-сайт (часть 1)
И если вы ищете расширенное руководство, которое научит вас создавать профессионально выглядящий веб-сайт, возможно, вам стоит прекратить то, что вы делаете, и взглянуть на этот пример.
Простой дизайн шаблона веб-страницы в фотошопе
Для этого урока вам понадобятся только базовые знания Photoshop и веб-дизайна. Он научит вас создавать простой шаблон веб-страницы с нуля с помощью Photoshop.
Как создать веб-дизайн для одной страницы в Photoshop
Это еще один полезный урок, который покажет вам каждый шаг процесса, необходимый для создания одностраничного веб-дизайна в Photoshop.
Веб-дизайн Photoshop — Бронирование туристического сайта
Если ваш проект более конкретный, например, сайт для туристического агентства, вы можете взглянуть на этот пример, который научит вас создавать сайт бронирования путешествий.
Афро-портфолио Дизайн веб-сайтов в Photoshop — Урок Photoshop CC
Научитесь создавать крутой веб-сайт с помощью этого видеоурока. Этот шаблон сочетает в себе смелые цвета, огромную рукописную типографику и яркие изображения.
Создайте чистый и стильный веб-дизайн в Photoshop
Six Studios проведет нас через каждый этап создания чистого и стильного веб-дизайна в Photoshop. Вы также можете увидеть рабочую демонстрацию, которую можно скачать внизу страницы.
Создайте минимальный и современный макет портфолио с помощью Photoshop
Этот урок — именно то, что вам нужно для создания современного макета портфолио с помощью Photoshop. Вы также можете проверить некоторые из их других руководств, у них их много.
Создание макета веб-сайта магазина тем в Photoshop
Это еще одно простое пошаговое руководство, которое вам действительно пригодится. Он также поставляется с PSD, доступным для загрузки.
Стильное портфолио с зернистой текстурой
Посмотрите этот классный видеоурок и узнайте, сколько интересных вещей вы сможете узнать.Он использует темно-серые цвета и текстуру пленки, чтобы придать ему элегантный вид.
Упрощенный черно-белый макет портфолио в Photoshop
Если вам нравится монохромный чистый дизайн-макет, вам следует прочитать это руководство по Photoshop. Этот также поставляется с PSD, доступным для загрузки.
Красивый дизайн веб-сайтов для потоковой передачи музыки в Photoshop
Благодаря этому руководству стало еще проще передавать музыку на ваш сайт в потоковом режиме.Изучите это руководство для PS, чтобы узнать, как создать красивый дизайн для потоковой передачи музыки в Photoshop.
Дизайн портфолио с гладкой текстурой синего цвета
Улучшите свой проект с помощью этого урока Photoshop о том, как создать гладкое текстурированное портфолио синего цвета, и познакомьтесь с некоторыми новыми советами и приемами.
Как создать макет веб-сайта из каркаса в Photoshop
Перенесите рамку своей жены в Photoshop, чтобы вы могли сосредоточиться на мелких деталях, таких как кнопки и заголовки текста, и найти для них правильное положение и размер с помощью этого урока.
Урок по дизайну веб-сайтов в Photoshop
Это подробное руководство по Photoshop научит вас некоторым действительно хорошим трюкам. Он покажет вам, что вам нужно сделать для настройки, прежде чем вы начнете проектировать в Photoshop, вы познакомитесь с кистями, формами и многим другим.
Как сделать легкий и гладкий веб-макет в Photoshop
В этом уроке с использованием Photoshop и сетки 960 вы научитесь создавать легкий и элегантный веб-макет.
Веб-разработка Основы процесса и теории веб-дизайна
Это отличный видеоурок о процессе веб-разработки и дизайна для вас, особенно если вы только начинаете свою карьеру.
Создание веб-макета с 3D-элементами с помощью Photoshop
Если вы настроены изменить свой веб-сайт, ознакомьтесь с этим руководством, в котором вы узнаете, как создать элегантный и профессиональный веб-макет с 3D-элементами.
Создайте чистый современный дизайн веб-сайта в Photoshop
Это действительно полезный учебник, который научит вас создавать современный, четкий и чистый макет веб-страницы, готовый для программирования.
Создайте стильно элегантное портфолио Веб-дизайн в Photoshop
Это еще один полезный урок Photoshop от Six Studios, который научит создавать стильный и элегантный дизайн портфолио. Не стесняйтесь проверить это.
Создание элегантного веб-дизайна портфолио в Photoshop
Придайте своему портфолио элегантный вид с помощью этого урока Photoshop и узнайте несколько советов и приемов, которые прилагаются к нему.
PSD В WEB — Конвертировать.psd файлы в html онлайн.
PSD файл
- стандартный .psd файл
- несколько слоев с прозрачностью
- и корректирующие слои
необходимо растеризовать - 8-битный RGB поддерживается
- маски слоя в настоящее время не поддерживаются
и должны быть применены
к слоям - макс. 80 МБ px
- для оптимальной цветопередачи используйте цветовой профиль sRGB
Эффекты слоя
Только
HTML / CSS
- html файл с слоями div
- слой с изображениями png установлен на
абсолютных позиций - идентификаторы уровня div от имени уровня
- используйте стандартный HTML-редактор
, чтобы перейти отсюда
Не предназначен для создания тем!
Эта служба не может использоваться для создания готовых тем для любых CMS (систем управления контентом), таких как WordPress, Joomla, Drupal или торговых систем, таких как Magento, Shopware, Plentymarkets, OXID, xtCommerce или других! Эти системы полагаются на содержимое на основе текста HTML и увеличивают свои размеры с изменением содержимого.PSDTOWEB создает изображения небольшого размера для каждого элемента и не может использоваться в качестве темы.
Понравилась эта услуга? Пожалуйста, сделайте пожертвование, чтобы оно оставалось бесплатным!
Создание и поддержка этой службы требует много времени и денег.
Помогите нам сохранить ее бесплатной, рассмотрев вопрос о пожертвовании.
Почему именно webtopsd?
Как веб-агентство, большая часть нашей работы состоит из экспорта элементов изображения из фотошопа и ручного добавления каждого из них в файлы html, чтобы перестроить исходный макет фотошопа веб-сайтов . Чтобы сэкономить время, и ускоряют процесс. с мы создали этот сервис как быстрое решение для создания базового HTML, необходимого для простых страниц и больших проектов. Кроме того, это позволит любому, кто может использовать Adobe Photoshop , создавать веб-макеты с точностью до пикселей на одном дыхании.
Вам нужно больше, чем просто базовый HTML? Попробуйте нас!
Как упоминалось ранее, мы являемся веб-агентством и обслуживаем веб-проекта практически любого размера для наших клиентов.Базовые страницы, а также большие платформы являются частью нашего портфолио, которое вы можете найти на www.progressivedesign.de . Мы предлагаем сайты на основе базового html и большого количества различных вариантов CMS, включая WordPress и Drupal , а также технологий (PHP / SQL, AJAX / jQuery, HTML5, Web-Apps). Не стесняйтесь обращаться к нам.
Преобразование PSD в HTML5
Преобразование PSD в HTML5 за несколько кликов. Пакет Export Kit позволяет быстро, легко и безболезненно преобразовать веб-сайты PSD в HTML5 и CSS из любого PSD Photoshop, предоставляя расширенные функции HTML и CSS.За считанные минуты вы можете получить чистую и корректную конвертацию PSD в HTML5 из Photoshop с помощью Export Kit.
Вручную процесс экспорта PSD в HTML5 может занять пару дней для простого дизайна и до нескольких месяцев для сложного дизайна из PSD в HTML5 — кто хочет так много работать, когда вы можете работать с умом с Export Kit!
Экспорт из PSD в HTML5 имеет полную поддержку CSS с эффектами слоев как с текстом, так и с элементами формы. Вы можете напрямую преобразовать ваш Photoshop PSD в HTML и CSS с помощью Export Kit за несколько минут.Опытные пользователи также могут добавить поддержку JavaScript и PHP непосредственно в Photoshop с помощью наших тегов слоя.
Попробуйте нашу шпаргалку из PSD в HTML, чтобы быстро ознакомиться со многими уникальными функциями, которые поддерживает Export Kit с преобразованием PSD в HTML и CSS.
Попробуйте наше новое подробное руководство из PSD в HTML5 - Просмотреть сейчас
Мы рекомендуем вам прочитать об использовании Export Kit, Export Kit Pro и HTML5 Output перед преобразованием вашего PSD в HTML5.
Полное видеоурок — PSD в HTML (11 видео)
* Новые ОБНОВЛЕНО видео *
Это руководство научит вас переходить от базового экспорта PSD к HTML5 и CSS3 к полностью адаптивному веб-сайту HTML с 2 целевых экрана и динамическая высота страницы.
Учитывая, что вы хотите преобразовать свой PSD в HTML5, мы можем предположить, что у вас есть дизайн Photoshop под рукой. Обычно преобразование PSD в HTML5 может быть сложной задачей, требующей базового уровня знаний для чистого и достоверного кода. Export Kit избавит вас от головной боли при экспорте и сэкономит вам много времени и средств для ваших веб-проектов.
ВАЖНАЯ ИНФОРМАЦИЯ: Используйте настройки цвета RGB , это значение по умолчанию для большинства сред - узнайте больше.Тестируйте на ходу
Очень важно тестировать ваш дизайн на ходу — не вносите изменений во весь PSD — затем экспортируйте и задавайтесь вопросом, «что пошло не так». Это ничем не отличается от разработчика, который кодирует весь веб-сайт (без тестирования и компиляции), затем открывает браузер и задается вопросом: «Что пошло не так?»
ВАЖНО: ВЫ ДОЛЖНЫ ИСПЫТАТЬ, ИСПЫТАТЬ, ИСПЫТАТЬ! Загрузите шаблон PSD в HTML5, используемый в этом руководстве. Загрузите другие бесплатные шаблоны веб-сайтов Export Kit, чтобы начать работу!
WYSIWYG — Что видишь, то и получаешь
То, что видишь, то и получаешь, буквально! Если вы увеличите масштаб до 100%, то, что вы увидите в своем PSD — это то, что вы увидите на выходе.
ПРИМЕР: Если ширина вашего документа 2400 пикселей - ширина вашего вывода будет 2400 пикселей.
ПРИМЕР: Если ваш PSD-дизайн имеет поле содержимого в 500 пикселей - ваш выходной контент будет начинаться с 500 пикселей.
СОВЕТ: Обрежьте лишнее пустое пространство в PSD, чтобы избежать визуальных ошибок - узнайте больше.
Вы всегда должны сначала создавать свой экспорт по умолчанию (то, что вы ожидаете увидеть), а затем настраивать свой PSD с помощью параметров вывода и тегов слоя.
Прочтите наши правила проектирования PSD для получения дополнительной информации.
Использование бесплатных онлайн-шаблонов PSD
С Export Kit вы можете использовать любой бесплатный PSD-шаблон, который вы найдете в Интернете, для создания своего веб-сайта HTML5 и CSS3. Бесплатные онлайн-шаблоны PSD потребуют некоторых изменений, чтобы обеспечить правильный экспорт в HTML5, который визуально поддерживает согласованность с Photoshop.
Найдите в Google «бесплатные шаблоны PSD» или «бесплатные шаблоны веб-сайтов в формате PSD».
Бесплатно не всегда просто
Имейте в виду, что многие бесплатные шаблоны PSD представляют собой ТОЛЬКО ДИЗАЙН и не структурированы или организованы для экспорта в Интернет. невозможно сказать, как другой Дизайнер может разработать свой макет, но есть некоторые общие вещи, которые вы можете сделать, чтобы убедиться, что PSD можно использовать.
- Сначала заставьте вывод работать, если вы обнаружите предупреждения и ошибки
- Удалите пустые папки и пустые слои
- Не получайте
сложныйс бесплатным PSD, пока он не будет визуально стабильным -
Сгруппируйте похожее содержимоеи реорганизуйте их при необходимости - Повторно нарисуйте плохие текстовые слои с помощью инструмента «Текст», не дублируйте текст
Ожидаются изменения
Бесплатные онлайн-шаблоны PSD потребуют некоторых изменений, чтобы обеспечить правильный экспорт из PSD в HTML5, который визуально поддерживает согласованность с фотошопом.Скорее всего, вы также захотите включить теги слоя, чтобы сделать свой PSD-дизайн адаптивным, добавить несколько страниц и многое другое.
Используйте смарт-объекты часто
Используйте смарт-объекты часто, если вы обнаружите, что область в шаблоне PSD вызывает ошибки, преобразуйте элемент или родительскую папку в смарт-объект — избегайте головной боли . Если ваш элемент является смарт-объектом, вы можете ссылаться на его содержимое позже при экспорте с помощью тега смарт-объекта.
Узнайте больше о теге смарт-объекта. Прочтите наши советы по оптимизации для исправления распространенных ошибок с помощью бесплатных шаблонов PSD.
Импорт Illustrator .AI и объектов
Вы можете легко вырезать и вставить любой объект Illustrator в Photoshop, и он преобразуется в смарт-объект. Затем смарт-объекты будут отображаться на выходе как изображения Smart Ojbect.
Illustrator AI Document
Если вы конвертируете свой .AI-документ в .PSD с помощью скрипта, вполне вероятно, что ваш документ будет содержать много слоев с именами Clip, Group или Path . Это общие слои Illustrator, которые вам нужно будет преобразовать, чтобы документ отрисовывался должным образом.
ПРИМЕЧАНИЕ: После преобразования этих слоев в уважаемый смарт-объект, изображение или папку - экспорт будет отображен на 100%, как и ожидалось.
СОВЕТ: Вы можете (а) удалить маску ссылок элементов или (б) создать новую папку и перетащить содержимое группы в новую папку, а затем удалить старую группу.
Подробнее об импорте файлов Illustrator .AI.
HTML5 идет рука об руку с CSS3, обеспечивая полную поддержку слоев с веб-фигурами и текстом в вашем выводе.При работе с веб-контентом вы не всегда можете использовать изображение в качестве фона со сплошным цветом; так как это приведет к ненужному увеличению времени загрузки страницы. Вам может не потребоваться текстовое изображение, учитывая поддержку новых веб-шрифтов для CSS3.
Просмотрите шпаргалку по элементам, чтобы предварительно просмотреть нашу поддержку HTML5.
Export Kit имеет полную поддержку изображений, текста, фигур, папок и эффектов слоев в Photoshop без тегов слоя. Все функции встроены в Export Kit, так что… просто проявите творческий подход! Все поддерживаемые слои и эффекты работают в наиболее распространенных средах.
Мы рекомендуем прочитать наши Советы по оптимизации, чтобы гарантировать, что экспорт ваших дизайнов будет на 100% идеальным по пикселям!
Порядок вывода слоев
Процесс слоев (часть процесса экспорта) для комплекта экспорта — это процесс Bottom-Up . Это означает, что Export Kit работает так же, как вы естественным образом создавали бы дизайн в Photoshop без изменения стиля дизайна .
ПРИМЕЧАНИЕ: Каждый слой обрабатывается, начиная с последнего или нижнего слоя (обычно это «фоновый» слой), затем вверх.
Когда в Photoshop добавляются новые слои или папки, вновь созданный элемент будет вложен поверх текущего выбранного слоя. Итак, если бы вы создавали шаблон веб-сайта, вы бы начали с Заголовок , затем Контент , затем Нижний колонтитул . Вы, естественно, можете спроектировать, а Export Kit сделает все остальное.
Подробнее об организации папок и слоев.
Веб-сайты с фиксированной / статической высотой
Изменение порядка слоев не повлияет на визуальный результат, если динамическая высота не включена.
Веб-сайты с динамической высотой
Неправильный порядок слоев повлияет на визуальный результат, если включена динамическая высота. Это будет складывать ваш контент, аналогичный строкам таблицы, вам нужно будет иметь правильные папки контента в правильном порядке — иначе у вас будут ошибки отображения.
Используйте чистые имена слоев
Имена ваших слоев будут отражаться в вашем выводе. Поскольку Export Kit будет отображать WYSIWYG, вам потребуются четкие имена слоев для дальнейшей настройки HTML или CSS после экспорта.В процессе экспорта слои будут преобразованы независимо от их имен, но наличие четких имен слоев оптимизирует время, необходимое для поиска слоя в коде.
Для получения дополнительной информации ознакомьтесь с нашими Правилами именования слоев.
Используйте общие имена для элементов
Мы рекомендуем использовать общие имена для элементов, чтобы сохранить согласованность с практикой кодирования и упростить себе поиск элементов в выходных данных кода.
ВАЖНО: Если элементы четко помечены, вы можете легко добавлять сценарии для управления объектами в выводе.
- Заголовок
- Нижний колонтитул
- Контент
- Раздел
- Навигация
- Кнопка
- и т. Д.
Используйте допустимые имена слоев
Вы всегда должны использовать допустимые и общие имена слоев с вашим контентом для обеспечения читабельности выход. Когда вы используете неправильные имена слоев, в большинстве сред возникают ошибки, поскольку не все соглашения об именах действительны.
Подробнее об использовании допустимых имен слоев.
Используйте уникальные имена слоев
Все среды кода требуют элементов с уникальными именами для правильной визуализации.Export Kit сделает все возможное, чтобы добавить уникальный идентификатор к каждому элементу (если имя элемента использовалось ранее), но это не является стопроцентной гарантией .
Мы, , настоятельно рекомендуем , чтобы вы использовали уникальные имена в вашем PSD-файле Photoshop, иначе ваш результат, вероятно, будет содержать ошибки CSS — узнайте больше.
Export Kit всегда будет пытаться преобразовать имя каждого слоя в уникальное имя, но бывают ситуации, когда слои с именем SAME могут вызвать ошибки отображения на выходе.
Для получения дополнительной информации ознакомьтесь с нашими Правилами именования слоев.
Нет пустых слоев
В комплекте экспорта не может быть пустых слоев, иначе экспорт остановит на этом слое.
- Слой без имени
- Слой без изображения / формы
- Текстовый слой без текста
- Папка без дочерних слоев
Вам необходимо (1) удалить слой из вашего PSD или (2) добавить содержимое к слою.
Организация папок и слоев
Структура папок и слоев Photoshop является ключом ко всем проектам, поскольку разные среды предъявляют разные требования.Бывают ситуации, когда неправильные папки или слои могут вызвать нежелательные ошибки отображения на выходе. Организованный дизайн также обеспечивает организованный результат, чего и хочет ваш клиент!
ВАЖНО: Мы рекомендуем вам использовать как можно больше слоев и папок для создания PSD-файла. Чем больше слоев, тем лучше! Вы всегда должны группировать слои в папки, если они связаны.
Подробнее об организации папок и слоев.
Блоки содержимого
Вы всегда должны организовывать свой контент в отдельные контейнеры / группы.Если вы сгруппируете элементы в одну папку, то вывод будет отображаться именно так.
Узнайте больше об организации блоков содержимого.
Внутреннее содержимое
После того, как вы сгруппируете свои контейнеры, перейдите дальше, организовав свое внутреннее содержимое в дополнительные группы. Это приведет к более чистому коду.
HTML5 идет рука об руку с CSS3, обеспечивая полную поддержку слоев с веб-фигурами и текстом в вашем выводе. При работе с веб-контентом вы не всегда можете использовать изображение в качестве фона со сплошным цветом; так как это приведет к ненужному увеличению времени загрузки страницы.
Вам может не потребоваться текстовое изображение, учитывая поддержку новых веб-шрифтов для CSS3. Это примеры, когда фигуры и текст пригодятся, поскольку они «рисуют» на веб-странице, а не загружают внешний контент; например, большое изображение.
ВАЖНО: Невозможно создать веб-страницу без использования форм и текста на современном веб-сайте, с другой стороны, HTML5 НЕ МОЖЕТ обрабатывать формы или стили без CSS или SVG. Загрузите наши Формы и Поддержка текста, бесплатные шаблоны PSD.Посмотрите наш пример Cheat Sheet (Image, Text, Shape, Effects) для HTML5.
Поддержка изображений
Все слои изображения растеризованы и визуализированы, как показано в вашем PSD. На самом деле образ — это образ! Вы не экономите много, применяя тень к изображению во время выполнения, а не загружая PNG.
Узнайте больше о поддержке изображений.
Shape Support
Export Kit имеет отличную поддержку формы с дополнительными векторами. Для обработки форм не требуются специальные настройки, просто используйте инструмент «Форма» и выберите свою форму вместе с желаемыми параметрами формы; Все остальное сделает Export Kit.
ВАЖНО: Фигуры экономят трафик! Образы всегда должны загружаться на клиентский компьютер, что требует дополнительной полосы пропускания. Чтобы уменьшить это, по возможности используйте фигуры - узнайте больше.
СОВЕТ: Кодом все формы являются прямоугольниками! Очень часто можно принять визуальный дизайн фигуры за ее измеренную площадь. Во всех языках программирования элементы трактуются как прямоугольная область - подробнее. Подробнее о поддержке формы.
Прямоугольник
- Цвет заливки
- Цвет обводки
- Размер обводки
- Размер формы
Подробнее о прямоугольнике.
Прямоугольник со скругленными углами
- Цвет заливки
- Цвет обводки
- Размер обводки
- Размер формы
- Радиус угла
Подробнее о прямоугольнике со скругленными углами.
Эллипс
- Цвет заливки
- Цвет обводки
- Размер обводки
- Размер формы
Подробнее об эллипсе.
Shape Support (щелкните ссылки для получения дополнительной информации):
SVG Support
** Lightning Storm v128 Only **
SVG и Vectors используются для рендеринга сложной графики, которая не теряет качества при масштабировании, это означает, что вы можете изменить размер изображения до любых размеров, и он всегда будет выглядеть идеально в пикселях.
ПРЕДУПРЕЖДЕНИЕ: Для простых форм идеально подходят векторы, но при использовании векторов для сложной графики - выходной файл (например, HTML-файл) может быстро увеличиваться в размере = более длительное время загрузки. Вы должны включить SVG Paths для визуализации векторов.
Поддержка текста
Export Kit имеет отличную поддержку текста для выравнивания по левому, центральному и правому краям; включая различные стили символов и абзацы при использовании текстовых слоев.
ПРИМЕЧАНИЕ: Нет специальных настроек, необходимых для обработки текста, выберите текстовый инструмент, свой шрифт и настройки; Все остальное сделает Export Kit.Подробнее о поддержке текста и о том, как Export Kit обрабатывает текст.
Текст метки
Это отображение текстовых слоев по умолчанию при использовании инструмента «Текст». Label Text будет отображать содержимое текстового слоя на основе его рассчитанного размера в пикселях.
Подробнее о тексте метки.
Текст абзаца
Это вторичная визуализация текстовых слоев при использовании инструмента «Текст». Текст абзаца будет отображать содержимое текстового слоя в зависимости от размера, который вы рисуете в текстовом слое.
Подробнее о тексте абзаца.
Выравнивание текста
Вы можете выровнять / выровнять любой текстовый слой с помощью инструмента выравнивания текста.
Подробнее о выравнивании текста.
Стили символов
Стили символов поддерживаются во всех средах по умолчанию без дополнительных настроек или внешних файлов.
- Обычный
- Полужирный
- Курсив
- Подчеркнутый
-
Зачеркнутый - ЗАЧЕТКА
Подробнее о стилях символов.
Стили шрифтов
Стили шрифтов часто требуют дополнительных настроек или внешних файлов для правильной визуализации.
Узнайте больше о стилях шрифтов.
Используйте допустимые символы
Не вся среда поддерживает все символы. Если вы используете в выводе специальные символы, всегда безопаснее использовать значение ASCII .
Узнайте больше о допустимых текстовых символах.
Измените имя текстового слоя
Photoshop будет использовать текстовое содержимое слоев в качестве имени.В некоторых случаях дизайнер может использовать цену, номер телефона или адрес, что может привести к неверному имени слоя.
ВАЖНО: Ни одна среда не поддерживает слои, начинающиеся с цифр, а некоторые символы недопустимы в качестве идентификаторов слоев - узнайте больше.
Текст без масштабирования
Это, возможно, самая распространенная ошибка дизайнера. Если вы вносите изменения в дизайн и ваш текст должен стать больше — не масштабируйте текст, а измените размер шрифта.
ПРИМЕР: РазработчикНИКОГДАне будет создавать текстовый элемент с размером шрифта 16 пикселей, а затем масштабировать текст с помощью CSS до 187% - этоНЕ отраслевые стандарты, вы должны изменить размер шрифта!
Узнайте, почему мы предлагаем вам не масштабировать текст.
Использовать настройки правильного текста
Всегда используйте округленные значения. Учтите, что вам может потребоваться, чтобы разработчик использовал код после того, как НИКОГДА не будет использовать размер шрифта 20,05 пикселей . Кроме того, только Adobe поддерживает дробные пиксели.
ВАЖНО: Вы можете спроектировать что угодно, но если вы ожидаетеготовых к производству результатов- тогда вы должны создатьготовый к производству проект.
Подробнее о настройках правильного текста.
Text Support (щелкните ссылки для получения дополнительной информации):
CSS Font Support
CSS Fonts поддерживаются в Export Kit, но это будет зависеть от браузеров, в которых вы просматриваете экспорт HTML5.
ВАЖНО: Каждый браузер имеет индивидуальную поддержку шрифтов CSS, поэтому требуется тестирование желаемого шрифта и целевого браузера.
Подробнее о поддержке шрифтов CSS с помощью Export Kit.
Использование шрифтов Google
Export Kit упрощает добавление шрифтов Google в ваш дизайн PSD.Вы можете использовать шрифты Google с любым экспортом в Интернете, включая HTML5, CSS3, JavaScript, jQuery и WordPress.
Скрипт автозагрузки шрифтов Google v2
1 2 |
Скопируйте приведенный выше код и вставьте его в настраиваемую ГОЛОВУ.
У нас есть собственный JavaScript для добавления шрифтов Google в любой проект или веб-сайт без дополнительных зависимостей.Сценарий имеет открытый исходный код и бесплатен как воздух, поэтому используйте его как хотите. После добавления ссылок на скрипт других параметров для настройки нет. Шрифты Google теперь загружаются автоматически.
Узнайте больше о добавлении шрифтов Google в выходной файл.
Эффекты слоя улучшат ваш результат с помощью дополнительных функций рендеринга для использования с PSD в CSS3. Вы можете добавлять эффекты к любому элементу слоя Photoshop, и Export Kit отобразит эффект непосредственно в HTML5 и CSS3.
ПРИМЕЧАНИЕ. HTML5 и CSS3 НЕ поддерживает все эффекты слоев Photoshop.ВАЖНО: В зависимости от вашего эффекта и угла, размер вашего элемента может измениться, чтобы отразить эффект, примененный к элементу - узнайте больше.
Загрузите нашу поддержку эффектов слоя, бесплатные шаблоны PSD. Посмотрите наш пример шпаргалки (изображение, текст, форма, эффекты) для HTML5. Узнайте больше о нашей поддержке эффектов и стилей.
Падение и внутренняя тень
- Цвет тени
- Непрозрачность
- Угол
- Расстояние
- Дроссель / распространение
- Размер
Внешнее и внутреннее свечение
Наложение цвета
Наложение градиента
- Цвета градиента
- Угол
- Стиль
Обводка
Поддержка эффектов слоя (щелкните ссылки для получения дополнительной информации):
Просмотрите наш пример шпаргалки (изображение, текст, форма, эффекты) для HTML5.
Эффекты формы
Все эффекты слоя поддерживаются фигурами.
Эффекты SVG
Все эффекты SVG преобразуются в фильтры на выходе, когда включены пути SVG.
Вы должны включить SVG Paths для рендеринга фильтров.
Текстовые эффекты
HTML5 и CSS3 плохо поддерживают текстовые эффекты для свечения , обводки и градиентной заливки .
Эффекты изображения
Все слои изображения растрированы.
Теги слоя Теги - это настраиваемые имена, которые вы можете применять к элементам в документе, чтобы преобразовать их в соответствующие объекты в каждой среде. Теги слоя очень эффективны и позволяют улучшить интерактивный вывод с помощью стандартных элементов среды.
Подробнее об использовании тегов слоя с Export Kit. Загрузите нашу поддержку тегов слоев, бесплатные шаблоны PSD.
Пропустить тег
$ {skip} - ВСЕ СЛОИ Этот тег можно использовать как для слоев, так и для папок, чтобы пропустить элемент из обработки во время экспорта.Этот тег отлично подходит для хранения заметок или пользовательских элементов в вашем документе, используемых для справки, а не для вывода.
Подробнее об использовании Skip Tag.
Тег изображения
$ {img}или$ {image}- ТОЛЬКО СЛОИ (НЕ ПАПКИ)
Этот тег будет растрировать содержимое слоев и папок, преобразовывая элемент в изображение на выходе. Это сохранит изображение как тип изображения по умолчанию и отобразит элемент изображения собственной среды.
ПРИМЕЧАНИЕ: Чтобы отобразить папку как изображение, мы рекомендуем преобразовать папку в смарт-объект - узнайте больше.
Подробнее об использовании Image Tag.
Тег ссылки
$ {link: [URL_ADDRESS]} - ТОЛЬКО СЛОИ ТЕКСТА Этот тег создаст элемент веб-ссылки, соответствующий среде, для открытия новой страницы или вкладки браузера - с использованием веб-адреса в аргументы. Этот тег обрабатывается каждой средой индивидуально, чтобы открывать только веб-ссылку. Аргументы должны быть действующим URL-адресом, привязкой или веб-скриптом.
Подробнее об использовании Link Tag. Прочтите, как создать меню навигации с помощью тегов ссылок.Прочтите, как связать страницы со ссылками с помощью тегов страниц и тегов ссылок.
Тег абзаца
$ {p} - ТОЛЬКО ТЕКСТОВЫЕ СЛОИ При использовании этого тега все эффекты слоя визуализируются с каждым диапазоном текстового элемента как элемент span на выходе. Текстовые диапазоны преобразуются во встроенные стили HTML, а не в CSS. Стили в текстовом блоке - это всего лишь встроенные .
ПРИМЕЧАНИЕ. Добавление стилей span в файл CSS бессмысленно, так как вы, скорее всего, однажды воспользуетесь этим стилем.Подробнее об использовании тега абзаца.
Тег объекта
$ {object | [TYPE]: [URL_ADDRESS]} - ТОЛЬКО СЛОИ ФОРМЫ Этот тег позволит вам создавать элементы мультимедиа при экспорте. Все поддерживаемые теги объектов будут использовать собственные элементы управления HTML5 для визуализации мультимедиа. Аргументы должны быть действительным URL-адресом.
Типы объектов
- youtube
- wav
- mp4
- oog-video
- oog-audio
- webm
- swf
- wmv
Подробнее об использовании тега объекта.Прочтите, как добавить мультимедиа (аудио, видео, SWF) в HTML5 с помощью тегов объектов.
Тег формы
$ {form | [TYPE]: [URL_ADDRESS]} - ТОЛЬКО ПАПКИ Это позволит вам обернуть содержимое папки документа в элемент формы, соответствующий выходной среде. Элемент Form улучшит ваши интерактивные результаты, добавив возможность создавать управляемые данными интерактивные приложения из одного файла PSD.
Типы форм
Подробнее об использовании тегов формы.Узнайте больше о создании веб-форм с помощью тегов форм и тегов ввода. Просмотрите живой пример с помощью формы и тега ввода.
Входной тег
$ {input: [TYPE]} - ТОЛЬКО СЛОИ ТЕКСТА Это позволит вам определить множество элементов данных и экспортировать их прямо на вашу веб-страницу HTML5. Содержимое текстового слоя будет использоваться как значение элемента ввода при обработке формы.
Типы ввода
- флажок
- файл
- скрытый
- пароль
- радио
- сброс
- текст
- текстовое поле
- отправить
Подробнее об использовании тега ввода.Узнайте больше о создании веб-форм с помощью тегов форм и тегов ввода. Просмотрите живой пример с помощью формы и тега ввода.
Тег стиля слоя
$ {css | style: [name]} - ВСЕ СЛОИ Этот тег добавляет пользовательские стили классов CSS к вашему элементу PSD. Вы можете добавить любой стиль класса CSS или индивидуальные стили PSD, включенные в вашу папку $ {css | styles}.
Подробнее об использовании тегов стиля слоя. Узнайте больше о создании пользовательских стилей классов CSS для HTML5 с помощью тегов стилей CSS.
Тег стилей классов
$ {css | styles} - ТОЛЬКО ПАПКИ Этот тег сгруппирует все ваши пользовательские классы CSS, созданные с помощью элементов PSD.Все дочерние слои и папки преобразуются в классы CSS на выходе с использованием наших правил именования слоев.
Подробнее об использовании тега стилей классов. Узнайте больше о добавлении CSS-эффектов ролловера / наведения с помощью тегов папок стилей CSS.
Кодовый тег
$ {code} - ТОЛЬКО ТЕКСТОВЫЕ СЛОИ Этот тег позволит вам добавить необработанный код / скрипт в содержимое текстового слоя PSD. Вы можете нарисовать любой слой текста абзаца в вашем PSD, но вы должны стараться сохранить размер и положение вашего слоя кода относительно вашего дизайна.
Подробнее об использовании Code Tag.
Тег класса
$ {class | [CLASS_NAME]: [PROPERTIES]} - ТОЛЬКО ПАПКИ Этот тег позволяет добавлять динамические элементы в ваш вывод. Вы можете добавить любой необработанный элемент, например. х2 - вместе с недвижимостью. Эти элементы ТОЛЬКО будут использовать свойства, которые вы назначаете в аргументах.
Подробнее об использовании тега класса.
Тег страницы
$ {page: [PAGE_NAME]} - ТОЛЬКО ПАПКИ Этот тег позволяет вам создавать дополнительные страницы из вашего документа в зависимости от типа вывода.Тег Page примет значение args, которое он будет использовать для создания новой страницы. Отлично подходит для использования с тегом Link для подключения контента!
ПРИМЕЧАНИЕ: Вы можете экспортировать неограниченное количество страниц, но использование нескольких страниц увеличит время экспорта.
Подробнее об использовании тега страницы. Прочтите, как экспортировать несколько страниц и файлов с тегами страниц. Прочтите, как связать страницы со ссылками с помощью тегов страниц и тегов ссылок. Просмотрите живой пример с помощью тега страницы.
Тег экрана CSS
$ {css | screen: [SCREEN_SIZE]} - ТОЛЬКО ПАПКИ Теги экрана CSS позволяют создавать адаптивные веб-сайты HTML5 и CSS3 из файла PSD.Вы можете определить несколько размеров экрана для поддержки любого количества устройств, включая настольные, планшетные и мобильные.
Общие размеры экрана
- $ {css | screen: default} широкоформатный макет
- $ {css | screen: 1280} макет рабочего стола
- $ {css | screen: 760} макет планшета
- $ {css | screen: 320px} мобильный макет
ПРИМЕЧАНИЕ: Вы можете экспортировать экран неограниченного размера, но несколько размеров экрана увеличат время экспорта.
Подробнее об использовании тега экрана CSS.Прочтите, как экспортировать адаптивный CSS3 в HTML5 с помощью экранных тегов CSS. Просмотрите живой пример с помощью тега экрана CSS.
Справочная таблица тегов
| Тег | Пример | Поддержка уровня |
| Пропустить | $ {skip} | Все | Все |
| Ссылка | $ {link: //google.com} | Слои |
| Язык | $ {char} | Текст |
| Параграф | $ } | Текст абзаца |
| Медиа-объект | $ {object | mp4: / path / to / video.mp4} | Форма |
| Смарт-объект | $ {obj} | Смарт-объект |
| Форма | $ {form | post: //path/to/script.php} | Папка |
| Вход | $ {input: submit} или $ {input: text} | Текст |
| Стиль слоя | $ {css | style: mystyle my_style2} | Все |
| Class Style | $ { css | styles} | Папка |
| Код | $ {code} | Текст |
| Класс | $ {class | div: role = ”section”} | Папка |
| Страница | ||
| Страница | ||
| $ {page: index} | Папка | |
| Экран | $ {css | screen: default} | Папка |
Вы почти у цели - идеальный HTML5 - через несколько минут!
Убедитесь, что вы прочитали и поняли наши правила проектирования PSD и правила именования слоев, чтобы избежать визуальных ошибок в выходных данных.
Убедитесь, что вы прочитали и ознакомились с нашим Контрольным списком перед экспортом на , чтобы избежать функциональных ошибок в вашем выводе.
Photoshop против изображения и рендеринга в браузере
Все браузеры и устройства визуализируют шрифты, размеры и эффекты по-разному!
НЕ ПЫТАЙТЕСЬFORCEВыход для работы наВСЕХ браузерах и устройствах- этоНЕВОЗМОЖНО, поверьте нам - мы тестируем это все время!
Подробнее о поддерживаемых браузерах и версиях.
Выровняйте свой внешний вид и ощущения
Вы можете использовать «Выровнять вывод» и «Скрыть переполнение», чтобы настроить внешний вид с помощью макетов Flush и Fluid .
Прочтите, как создать полноэкранный фон для включения макетов Fluid .
Оптимизируйте свой CSS
Export Kit имеет мощный механизм рендеринга CSS, который поддерживает псевдо , селекторы, скины и темы . Вы можете управлять любой библиотекой CSS и настраиваемыми стилями Photoshop, чтобы повторно использовать изображения, создавать собственные шаблоны из одного файла PSD и добавлять состояния к элементам.
Export Kit позволяет создавать каркасные конструкции и пользовательские скины для элементов, которые генерируются на выходе.
Упаковка для клиентов
Если ваш PSD-дизайн предназначен для клиента, у нас есть несколько функций, которые могут сделать вашего клиента очень довольным предоставленным вами пакетом проекта. Export Kit может сгенерировать все ресурсы, которые потребуются вашему клиенту, чтобы почувствовать себя уполномоченным при использовании / изменении ваших файлов вывода.
Используйте Image Kit Pro, чтобы сохранить снимок или водяной знак вашей работы в процессе работы, а также веб-иконки для ваших HTML-страниц.
Включите «Сохранить ресурсы PSD» для создания шаблонов PSD, связанных с проектом. Каждая папка в вашем документе будет сохранена в виде файла [.psd] для удобства использования и редактирования.
ТОЛЬКО АКТИВНЫЙ ДИЗАЙН - Включите отзывчивые изображения для создания адаптивных графических ресурсов. Каждое изображение в папках экрана css будет сохранено как новое изображение с измененным размером. Export Kit Settings
Export Kit позволяет вам настроить ваш вывод с помощью параметров слоя и параметров вывода перед экспортом, чтобы персонализировать ваш проект.
Настройки, используемые с этим примером PSD:
- Откройте Export Kit Suite, выберите «Экспорт»
- Щелкните раскрывающийся список, выберите «HTML5»
- Установите флажок «Настроить»
- Снимите флажок «Скрыть переполнение»
- Проверить » Относительные позиции »
- Установите флажок« Эффекты слоя »
- Щелкните раскрывающийся список« Выровнять вывод »и выберите« Центр ».
Подробнее об использовании Export Kit и Export Kit Pro.
Готов к экспорту
После того, как все настройки будут готовы, нажмите «Экспортировать сейчас» - и наблюдайте за волшебством!
Presto, PSD в HTML5 и CSS3 всего за несколько кликов! Попробуйте сами!
Среднее время экспорта
2 - 5 секунд= Модуль (например,Навигационное меню)30-40 секунд= Базовая веб-страница1-2 мин.= Сложная веб-страница6–8 мин.= Одностраничный веб-сайт6-8 мин.= 3 адаптивных экрана8–10 мин.= 5-страничный веб-сайт20–25 мин.= 5 страниц адаптивного веб-сайта (3 экрана)
Если экспорт останавливается - вы останавливаетесь!
Export Kit отменит вывод, если обнаружит ошибку в слое Photoshop. Если Export Kit отменяет / останавливает вывод, вам следует сделать следующее:
НЕ сохраняйте документ .На данный момент слои были переименованы! - Обратите внимание на слой, на котором вывод отменен на
- . Это слой
, вызывающий проблему. НЕсохранять документ,ЗАКРЫТЬ,документ иОТКРЫТЬего - Устранить проблему,
СОХРАНИТЬи повторно экспортировать его
Все браузеры и устройства отображают контент, объекты и эффекты по-разному - это означает возможно, вам придется настроить вывод в соответствии с требованиями вашего проекта.
Тест с помощью: IE, Chrome, FireFox, смартфонов, планшетов и т. Д.
Это также помогает увидеть, как каждое устройство и браузер обрабатывают HTML и как каждое из них отображает его элементы.
Воспользуйтесь нашей шпаргалкой по HTML5 для быстрого ознакомления со многими уникальными функциями, которые Export Kit поддерживает с преобразованием PSD в HTML и CSS.
Вещи, которые мы обнаружили во время тестирования
- Export Kit - лучший плагин PSD… 😉
- IE имеет лучший рендеринг шрифтов
- IE имеет лучший рендеринг формы
- Chrome имеет лучшую поддержку шрифтов css
- IE имеет плохой CSS3 поддержка
- Шрифты IE меньше других
- Стили шрифтов Chorme шире других
- Стили символов FireFox шире других
Если вы хотите протестировать поддержку всех браузеров и устройств - посмотрите, загрузите наш Photoshop vs.Окружающая среда Рендеринг бесплатные шаблоны PSD. Это даст вам все инструменты, необходимые для тестирования всех устройств и браузеров.
Загрузите нашу оптимизацию экспорта, бесплатные шаблоны PSD для тестирования оптимизации PSD для Интернета.
Оптимизация ошибок отображения
Визуальные ошибки можно исправить, прочитав наши советы по оптимизации. Мы охватываем более 40 различных пользовательских случаев, поэтому вы можете быстро решить свою проблему с помощью наших советов.
Общие визуальные ошибки
Ошибка : Вы экспортируете стопы на слой формы
Исправление : Вы должны использовать цветовой режим RGB при экспорте
Ошибка : Ваша веб-страница содержит текста и НЕКОТОРЫЕ изображения , но не все Исправление : удалите папку вывода « ftml-www » и снова запустите экспорт.
Ошибка : на вашей веб-страницетекста и НЕТ изображений. пробел)символа из вашего имени PSDОшибка : ваш элемент HTML5 не отображался на 100%, как слой PSD.Исправление (только текст) : Добавьте Google Fonts для поддержки дополнительных шрифтов.
Исправление : добавьте
$ {img}к имени слоя, чтобы отобразить слой как изображение.Ошибка : вы застряли, и у вас есть вопросВы человек, мы тоже!
Исправление : общие ответы можно найти в разделе часто задаваемых вопросов или связаться с нами, и мы будем рады помочь.
Функциональные ошибки Easy Fix
Практически все функциональные ошибки можно исправить, прочитав контрольный список перед экспортом.
Редактировать и загружать с помощью Dreamweaver
После завершения вывода вы, скорее всего, захотите загрузить его сейчас на свой веб-хост. Это пошаговое видео покажет вам, как.Устройтесь поудобнее и расслабьтесь, Export Kit сэкономит вам недели, если не месяцы работы - практически без усилий. Спросите себя: «
Я, сколько это стоит?”Попробуйте Экспортный комплект БЕСПЛАТНО с вашим PSD!
Как создать веб-страницу в Photoshop для Dreamweaver | Small Business
Хотя Photoshop - это в первую очередь программа для создания эффектов и редактирования изображений, это также отличный инструмент для создания внешнего вида веб-страниц. Благодаря использованию встроенных инструментов Photoshop можно легко использовать для создания макетов профессионального вида, которые затем можно перенести в Dreamweaver для фактической работы с кодом.Когда фактическая работа по дизайну будет выполнена в Photoshop, вы обнаружите, что сделать веб-страницу реальностью с помощью Dreamweaver не так уж и сложно.
Создайте страницу в Photoshop
Откройте Photoshop, щелкните меню «Файл» и выберите «Создать». Выберите «пиксели» в качестве единицы измерения, а затем введите желаемую ширину и высоту своей веб-страницы. Для максимальной совместимости с конечным пользователем следует выбрать ширину менее 1100 пикселей. Оставьте фон белым, установите разрешение «72» и убедитесь, что для цветового режима установлено значение «RGB Color».»Нажмите« ОК ».
Щелкните на инструменте «Фигуры» на панели инструментов и выберите желаемый тип формы для вашего макета. После выбора щелкните документ и перетащите его, чтобы создать форму. При необходимости повторите это с разными формами, чтобы создать макет веб-страницы. Чтобы изменить цвет или стиль фигуры после ее создания, дважды щелкните фигуру в палитре «Слои» и внесите необходимые изменения.
Добавьте желаемый текст в макет веб-страницы с помощью инструмента «Текст» на панели инструментов.Если вы не делаете логотип, вы всегда должны использовать стандартный шрифт, который очень легко увидеть, например Verdana, Georgia или Times New Roman (и это лишь некоторые из них). Когда у вас есть все слои, которые вы хотите для своей веб-страницы, дважды щелкните слои по одному, чтобы переименовать их. Это поможет вам запомнить, для чего предназначен каждый слой.
Перенос дизайна в Dreamweaver
Дважды щелкните каждую фигуру и текстовый слой, для которых включен определенный цвет, и щелкните образец цвета, чтобы просмотреть HEX-код цвета.Эти коды понадобятся вам при переносе дизайна в Dreamweaver. Когда закончите, сохраните страницу в формате Photoshop по умолчанию (PSD), а затем сохраните копию в формате JPEG. JPEG будет использоваться в качестве эталонного изображения, и вы можете использовать PSD, если хотите внести изменения.
Откройте Dreamweaver и создайте новый документ HTML. Перейдите на вкладку «Вставка», вставьте новую таблицу или DIV и установите атрибуты элемента, соответствующие тем, которые используются в макете Photoshop (например, ширина / высота и цвет фона). Ссылаясь на изображение JPEG макета веб-страницы Photoshop, введите необходимый текст в нужные места и выровняйте различные элементы, чтобы они соответствовали дизайну Photoshop.