Верстка макета psd: Как сверстать шаблона сайта из PSD в HTML и CSS
Содержание
Как сверстать шаблона сайта из 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 макета для сайта: правила разработки
Разработка сайта это командная, многоэтапная работа. Один из первых, и наиболее важный, этап этой работы — это дизайн. После того как дизайн утвержден с заказчиком, нужно приступать к верстке psd макета. Поскольку работа дизайнера на этом практически закончена, и он на радостях передает свое творение верстальщику, в виде psd макетов, и смело идет отдыхать. Очень часто он не выполняет обязательные шаги по оптимизации макета для верстки. Это заставляет верстальщика делать двойную работу, затрачивая большее количество времени. Избежать подобных ситуаций не так уж сложно — достаточно соблюдать несколько простых правил:
1. Дизайн сайта — это не полиграфия
- Предоставляй макет в традиционном формате (.psd) в противном случае сайт будет отличаться от макета.
- Использую цветовое пространство rgb. Именно оно используется по умолчанию в веб. CMYK используется в полиграфии и для web никак не подходит.
- Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие величины.
2. Наведи порядок в слоях
- Группируй слои по папкам (смысловым блокам) с осмысленными названиями, а не “Группа 3 copy”. Тоже самое касается всех слоев. (Шапка, контент, подвал и т.п.) Придерживайся иерархии сверху в низ и слева на право.
- Удаляй все не нужные слои. Верстальщик может это сверстать.
3. Четкие размеры и отступы
- Используй родные направляющие photoshop или готовые модульные сетки чтобы точно определить расположение элемента на странице.
- Осознано выбирай пропорции и размеры объектов и делай их кратными, например, 1000px, а не 998px.
- Размер шрифта должен быть целыми числами без дробей.
- Никогда принудительно не растягивайте шрифт.
4. Проблемные моменты для верстальщика
- Не передавай в верстку работу, где какой-то эффект достигается режимами наложения слоев.
- Не спеши растрировать слои и их эффекты — верстальщик сможет посмотреть параметры градиента, теней или скругления углов.
5. Обязательные элементы макета
- Показывай состояния всех интерактивных элементов: нормальное, активное, не активное, при наведении, при клике и т.д.
- Показывай все оформления текста: заголовки, списки, таблицы, контент и т. д.
6. Исходные материалы макета
- Прикрепляй в отделенную папку все изображения в исходном качестве и дополнительные материалы, которые используются в макете.
- Все не стандартные шрифты копируй в туже папку. У верстальщика может не быть этого красивого шрифта. И на его поиски может уйти большое количество времени.
- Давай пояснения, к элементам, которые могут вызвать вопросы. Если есть особые задумки, которые не так просто показать в макете, то запиши их в отдельный текстовый файл. К тому моменту, когда верстальщик доберется к этому элементу макета, ты и сам можешь забыть, чего хотел, и придется вновь тратить время на то что бы вспомнить и объяснить идею верстальщику.
Соблюдая эти не очень сложные правила, вы ускорите не только работу верстальщика, но и свою так как вам не нужно будет отвлекаться от другого проекта и возвращаться к работе, которую уже проделали.
Понравилось? Репост!
пример нарезки макета для верстки – Zencoder
В Интернете существует (на момент написания статьи) мало материалов с примерами как нарезать макет в Photoshop. Для новичков-верстальщиков этот факт является камнем преткновения.
И хотя на форумах, посвященных web-дизайну, много говориться о том, что … да там все просто — нечего учитьcite>, … в сети полно информации по этому вопросуcite>, но на самом деле это не совсем так. Я могу судить об этом по самом себе. Мне потребовалось немало времени, чтобы самому разобраться и докопаться до процесса нарезки.
В этой статье я постараюсь описать нарезку макета на примере одного из его объектов и тем самым внести посильную помощь в процесс освоения верстки. Думаю, данная статья будет полезна для новичков, каким я был совсем недавно сам.
Итак, у нас имеется psd-макет, созданный неким “гением” web-дизайна:
Как и положено, макет представлен в формате psd (в исходном коде) со всеми слоями так, как нарисовал его дизайнер.
Нам необходимо вырезать логотип будущего сайта. В данном случае это красивая цветастая напись POLO360. Видим, что логотип состоит из двух текстов — самого POLO360 и нижней строки “My kind of business blog”. Также имеется некое графическое изображение (слева от надписи), которое также является частью логотипа. В сумме все эти объекты являются одним целым и представляют логотип сайта.
Вот нам и предстоит задача вырезать его. Первым и самым трудным делом является нахождение всех слоев, отвечающих за прорисовку логотипа. Для этого нужно выбрать инструмент “Move Tool (V)”. В панели инструментов Photoshop необходимо проверить, что стоит галочка в разделе “Auto — Select”:
Это необходимо для того, чтобы при выделении объекта на макете в Палитре слоев автоматически выделились все слои, отвечающие за отрисовку данного объекта. Другими словами — так проще искать нужные слои при нарезке.
Теперь начинается самое интересное. Если дизайнер человек ответственный и пунктуальный, то перед передачей макета на верстку он рассортирует все слои по папкам. Каждая из папок будет однозначно указывать и содержать в себе все слои, отвечающие за отрисовку только одного объекта. И жизнь верстальщика значительно упрощается.
Но такое бывает редко и слои разбросаны по палитре как попало. нам необходимо методом “научного тыка” найти нужные нам.
Для этого открываем (если еще не открыли) Палитру слоев и пробуем отключать или включать отображение слоя, щелкая мышью на значке “глаза” слева от названия слоя. Тем самым, мы проверяем, входит ли этот слой в состав нужного объекта или нет. Как только находим нужный слой, то отмечаем его цветом, чтобы потом не потерять.
Когда все слои найдены, картина в “Палитре слоев” будет примерно такой:
Теперь объединяем отмеченные нами слои. Для этого держим зажатой клавишу Ctrlkbd> и выделяем каждый из слоев одинарным щелчком мыши. Получаем следующую картину:
Далее необходимо объединить выделенные слои в один. Другими словами, мы сведем нужные нам слои в один и в результате изображение (в нашем случае — логотип) будет цельным. Только так мы можем вырезать его впоследствии. Для объединения слоев щелкаем правой кнопкой мыши на любом из выделенных слоев и в открывшемся контекстном меню выбираем “Merge Layers”:
Видим такую картину:
Несколько слоев слились в один. Все, теперь мы готовы к нарезке.
Выбираем в панели инструментов “Rectangular Marquee Tool(M)” и обводим логотип произвольным прямоугольником:
Теперь копируем выделенную нами область — нажимаем на клавиатуре комбинацию клавиш Ctrl+C.
Создаем в Photoshop новый документ — нажимаем Ctrl+N. Откроется новая вкладка с диалоговым окном настройки создаваемого документа:
Здесь самым важным является поле “Preset”. В его значении должно стоять “Clipboard (Буфер обмена)”. Если все было сделано правильно, то Photoshop автоматически создаст новый документ с размерами той области, которую мы скопировали. Размеры программа возмет из “Буфера обмена”, куда была помещена выделенная нами область. Остальные параметры для нас неважны. Нажимаем ОК.
Появится новая вкладка, но пока еще пустая. Точнее, в ней уже будет создан документ с указанными в диалоговом окне размерами. Но ничего, кроме белого фонового изображения, этот документ содержать не будет:
Нам осталось вставить в этот документ выделенную область, которая все еще находится в “Буфере обмена”. Для этого нажимаем на клавиатуре Ctrl+V. Результат:
Как видим, Photoshop автоматически обрезал изображение так, чтобы не было пустых областей вокруг него (ведь при выделении мы создали произвольный прямоугольник — лишь бы выделить логотип).
Однако, белый фон остался. А он нам совсем не нужен. Это делается очень просто. Переводим взгляд на “Палитру слоев”” и видим там всего два слоя: “Layer 1” и “Background”. Слой “Layer 1” — это вставленная нами область, а “Background” — фоновое изображение. Щелкаем мышью на значке “глазика” напротив слоя “Background”:
Само изображение в окне Photoshop изменилось — вместо белого фона появилась шахматная “доска”. Это говорит о том, что фоновый слой у нас теперь прозрачный.
Теперь нам осталось только сохранить отредактированное изображение. Переходим в меню “File — Save for Web”:
Здесь нам нужны два поля.
Верхнее — для выбора формата сохраняемого файла. В Интернете имеются подробные описания, как выбрать нужный формат. На самом деле все просто. Формат GIF имеет поддержку прозрачного фона, но не имеет поддержки передачи градиентов. Формат JPEG наоборот, хорошо передает плавные переходы цветов (градиент), но у него отсутствует прозрачный фон. Формат PNG-8 очень похож на GIF, только имеет лучший алгоритм сжатия. Формат PNG-24 имеет как поддержку градиентов, так и прозрачный фон (по другому называется — прозрачные пиксели). В нашем случае нам нужен как градиент, так и прозрачный фон, поэтому выбор однозначен — PNG-24.
Нижнее поле важно для контроля размера выходного файла. Photoshop автоматически подсчитывает размер, который получится, если сохранить файл в выбранном формате. В нашем случае это будет составлять 6Kb, что абсолютно приемлемо.
Все, сохраняем файл с выбранными настройками и задаем ему имя — logo.png.
На этом обзор примера нарезки макета в программе Photoshop заканчиваю. Думаю, он был достаточно полным и понятным.
photoshop
Раскройка PSD макета для сайта | Введение в HTML
У нас есть макет сайта, в формате PSD, мы хотим разрезать (раскроить) его на фрагменты для дальнейшей HTML верстки сайта.
Для этого мы будем использовать программу Photoshop
Шаг 1. Открытие PSD макета в Photoshop для раскройки
Скачать файлы с Yandex Диск
PSD — макет сайта для PS +готовые изображения, если у вас нет PS, либо вам лень это делать самим.
Разархивируйте файлы с архива в рабочую папку, если вы этого еще не сделали. Откройте файл с названием home-o.psd. Вид интерфейса самой программы Photoshop у вас будет отличаться от моего, так как у нас могут быть разные версии программы, и скорее всего сами окна программы у вас расположены, так как вам удобней.
На скриншоте показано расположение моего интерфейса окна Photoshop
Шаг 2. Инструмент раскройка
Найдите и выберите в панели инструментов (ToolBox) нужный нам инструмент «Раскройка» или он может называться «Нож», в зависимости от вашей версии программы. Находится рядом с инструментом «Рамка» или «Crop» в английской версии Photoshop.
Инструмент "Раскройка"
Шаг 3. Разрезаем PSD макет на фрагменты
Пользоваться инструментом «Раскройка» очень просто, всё что вам необходимо, это выделить все необходимые вам фрагменты шаблона для последующей верстки. Но помните золотое правило: «7 раз отмерь, один раз отрежь».
Выделение фрагмента
Если вы не можете отрезать ровно необходимый фрагмент, увеличьте изображение до нужного вам масштаба, тогда перемещение инструмента будет с более мелким шагом, что позволит вам выполнить раскройку шаблона более качественно.
Выделение мелких элементов шаблона
Шаг 4. Сохраняем выделенные фрагменты шаблона
Перед тем, как перейти к сохранению фрагментов шаблона в виде кусочков изображений, проверьте ещё раз, все ли нужные вам элементы были выделены. Если да, перейдите в раздел Файл – Сохранить для Web и устройств, или воспользуйтесь комбинацией клавиш Alt+Shift+Ctrl+S (Если хватит рук)
Сохранение выделенных фрагментов
Шаг 5. Настройка сохраняемых фрагментов
У вас должен открыться следующий интерфейс, в нем вы можете просмотреть ещё раз размеченные области. Так же вы можете изменить масштаб изображения и его качество как в целом, для всего шаблона, так и конкретно для каждого выделенного фрагмента.
Параметры сохранения выделенных фрагментов
Вы можете выделить фрагмент, просто кликнув по нему, но убедитесь что в качестве текущего инструмента у вас выбран «Выделитель». Когда нужный элемент выбран, он подсвечивается и становится более заметным на фоне остальных фрагментов.
Выделение фрагментов при раскройке в photoshop
Для каждого выделенного фрагмента, вы можете выбрать в каком формате его сохранять, в каком качестве, устанавливать уровень размытия и метод оптимизации.
Обратите внимание – что эти значения указываются для каждого выбранного элемента по отдельности, т.е. вы можете различные фрагменты одного шаблона сохранять в разных форматах и с разной степенью качества.
Выбор качества, уровня размытия, и метода сжатия изображения
Шаг 6. Сохранение изображений в папку
Когда вы выбрали все необходимые параметры, можно нажать «Сохранить», эта кнопка находится справа снизу. Именно «Сохранить», а не «Готово»! Дело в том, что этот инструмент позволяет нам сделать сразу множество вариантов раскроенного шаблона, на случай, если выбранные параметры качества нас не удовлетворяют, мы можем вернуться, произвести изменения и сохранить файлы заново.
Но не спешите продолжать. Здесь есть еще пара настроек, которые необходимо установит, если они не выбраны по умолчанию.
После того, как мы указали путь к папке в которую мы хотим сохранить наши нарезанные фрагменты, обратите внимание на поле «Формат» Photoshop позволяет создавать налету не только простые фрагменты, но и сразу верстку, но поверьте мне на слово, то что у вас получится в результате автоматической верстки, вам не понравиться. По этому проследите, что в качестве выбранного форматы было установлено значение «Только изображения»
Параметры сохранения результатов раскройки шаблона
А в поле «Фрагменты» должно стоять «Все фрагменты»
Настройки фрагментов
И только после этого всего можно нажимать «Сохранить».
Вам еще может выдать вот такое предупреждение.
Предупреждение Photoshop
Игнорируйте его!
Шаг 7. Удаляем лишнее, оставляем нужные фрагменты макета
В результате свой работы Photoshop создаст большое количество лишних изображений. Смело выделяем их и отправляем в корзину.
Результат
После этих операций у вас останется нужный вам набор фрагментов, используйте его в своем проекте.
Настоятельно рекомендую переименовывать названия фрагментов в соответствии с местом их применения, чтобы вам удобно было находить изображения по их названию.
Готовые файлы шаблона
Задействованные изображения были позаимствованы с сайтов:
http://quto.ru/Maserati/
http://www.maserati.com
Верстка PSD макетов умерла
Инструкции по верстке PSD макетов повсюду в интернете. На самом деле, многие люди спрашивают меня почему на Threehouse до сих пор нет инструкции по верстке PSD макетов. В добавок к инструкциям есть множество компаний, которые принимают PSD и отдают веб-страницу примерно за $100.
Google возвращает более 48 миллионов результатов на запрос «psd to html». Это популярный, но не самый лучший способ делать веб-сайты.
Если это так популярно, то как можно сказать, что это умерло? Что ж… Хотел бы я, чтоб каждая проблема веб дизайна уместилась бы в 140-символьный твит, но это нечеткий вопрос, который требует более членораздельного объяснения. Давайте зароемся поглубже.
Что такое верстка PSD макета?
В общем, верстка это рабочий процесс. Первым, веб-страница создается в Photoshop документе (PSD), а затем конвертируется в код (используя HTML, CSS и JavaScript). Вы можете заменить Photoshop любым другим редактором изображений (такими как Pixelmator, GIMP, и тд.), но принцип тот же. Вот немного более подробное пошаговое объяснение:
- Нарисуйте высоко четкий макет в Photoshop с точностью до пикселя так, как вы хотели бы видеть ваш сайт.
- Используйте инструмент нарезки изображений для экспорта макета в веб.
- Напишите HTML и CSS, которые используют стилистику экспортированного макета.
На первый взгляд, это может показаться хорошей идеей. Может быть трудным начать кодить, если вы не знаете как должен выглядеть финальный результат, по этому эксперементы сперва в Photoshop, а затем «экспорт» этого в HTML звучит разумно.
Принимая эту идею, многие веб-компании использовали верстки HTML в качестве шаблона для рабочих процессов команды. Другими словами, дизайнер создает макет Photoshop, а затем передает его разработчику, который пишет весь код. В наше время, работа веб-дизайнера, как правило, охватывают эстетику так же как и кодинг HTML и CSS.
Была лы вообще верстка PSD хорешей идеей?
Да, процесс верски PSD в HTML был одним из лучших способов создания веб-сайтов. Есть две больших причины почему верстка макетов была хорошей идеей.
Первая причина — ценные качества картинок. До того, как браузеры поддерживали все замечательные возможности CSS (тени, скругленные бока, градиенты, и другие) было очень тяжело создавать кросс-браузерные эффекты без использования картинок. Дизайнеры должны были создавать тени и скрунленные углы как картинки, когда хитрые хаки в коде использовались для размещения картинок на странице. Эти качества нужны были для создания чего угодно, по этому создание их как высоко точный макет экономило время.
Второе (и возможно самое важное) веб использовалось только на десктопных браузерах и не присутствовало на телефонах и планшетах так, как сегодня. Разработка под одно фиксированное разрешение 1024х768 был вполне рабочим вариантом.
По этим двум причинам становится понятно почему дизайнеры смотрели на Photoshop как на свой главный инструмент. Картинки нужны были для одного разрешения экрана.
Что не так с версткой PSD сейчас?
В сравнении с другими сферами искусства и технологий, веб относительно молодо и быстро развивается. Я сделал десятки веб-сайтов используя некоторые вариации верстки PSD в HTML и я уверен, что многие люди, читающее это делали то же самое. Вот главные причины почему я верю, что время верстки PSD в HTML умерло.
Адаптивный веб дизайн
Во-первых, сейчас существует множество способов серфинга в интернете. Телефоны, планшеты, настольные компьютеры, ноутбуки, телевизоры, и другие. Нет единого разрешения экрана, на ктором дизайнер может сосредоточится. Смотря на эту мысль, на самом деле уже не существует конкретного числа разрешений экранов, на которых может сосредоточится дизайнер.
Я не собираюсь углубляться в тонкости адаптивного дизайна, но дело в том, что Photoshop базируется на пикселях. Веб страницы подвижны и постоянно изменяются.
CSS дизайн
Во-торых, новые возможности CSS сейчас стали общедоступны. Есть еще несколько вопросов, оставшихся здесь, и там, но поддержка значительно выросла за последние несколько лет. Общие эффекты такие как тени, градиенты, скругленные углы могут быть выполнены в CSS и зачастую больше не требуют никаких картинок.
Завершеннось
В-третьих, веб индустрия сильно выросла. Мы имели достаточно времени, чтоб усовершенствовать наше нынешнее понимание того, что работает, а что нет. Нынешние компании скорее примут дизайнера, знающего CSS и HTML так же хорошо, как и эстетику.
Это так же означает, что на много лучше поддерживать современные процессы. CSS фреймворки как Bootstrap и Foundation дают больше возможностей для дизайна в браузере. Приложения такие как Balsamiq и Omnigraffle помогают быстро прототипировать сайт. Макеты, нарисованные на бумаге карандашем так же выдержали испытание временем так как позволяют очень быструю итерацию.
Означает ли это, что Photoshop умер?
Нет! И даже не близко! Photoshop остается очень важен для веб дизайна. Проблема возникает когда Photoshop используется для решения всего без мысли о более высоких задачах (дизайна сайтов). Photoshop прекрасен для редактирования и экспорта фотографий для веб. Еще остались ситуации, когда есть смысл в генерации полнодетального макета (в Photoshop, Illustrator, или других) как часть более законченных процессов. Вот несколько примеров:
- Макеты с высокой точностью могут быть критически важным средством при коммуникации с заказчиком дизайна. Может показаться, что быстрее пропустить создание высоко точного макета, но это может дать о себе знать позже, потому что не все заказчики могут понять как прототип (каркас) сайта потом может быть переведен в браузер. Макет может служить как инструмент во время дискуссии перед написанием кода (только исследовать это не то, что хочет клиент).
- Макеты могут быть очень важны, когда работа идет в средних или больших командах. Мы часто будем создавать макеты высокого разрешения на Threehouse, когда будем планировать новые курсы или дизайнить новые возможности сайта, потому что это мощный способ синхронизировать умственную модель каждого на том как будет выглядеть новый функционал или как будет выглядеть проект когда он будет закончен.
Эти два примера имеют ключевую разницу при мышлении когда верстается PSD макет. Высоко детализированные макеты еще продолжают иногда создаваться, но не то чтобы они стали преодолением преграды для команды разработчиков или как-то внедрены в код. Макеты Photoshop могут больше использоваться как визуальное дополнение для обсуждение идей. В процессе верстки PSD-макета, документ Photoshop представляет финальный вид сайта и он должен смотреться так же в браузере. Это тонкая, но важная разница.
Разные приемы
Рабочие процессы у всех разные, и никто не знает, как сделать идеальный веб-сайт. Вы всегда должны делать все, что является наиболее эффективным для Вас и Ваших коллег. Помыкать пиксели в Photoshop предоставляет массу удовольствия, но я могу признаться многих случаях, когда я помыкал пиксели слишком сильно. Ключ в том, что нужно знать себя и то, что заставляет вас работать в полную силу.
Автор: rodion_arr
Источник
Как научится верстать из PSD макетов в html+css
В этой небольшой статье, я поведаю вам как научится верстать сайты из PSD макетов и что нам для этого понадобится.
И первым делом, нам понадобится инструменты и программы которые нам помогут в этом деле.
- Adobe Photoshop — а как же без него!
- Ceron — для верстки сайтов
- Sublime text 3 — редактор кода
- Google Chrome — последний этап
Этап 1 — Экспорт картинок
Adobe Photoshop
Безусловно большая часть макетов выполнено именно в нем, фотошоп еще долго останется в тренде для веб-дизайнеров. Поэтому этот инструмент должен знать каждый верстальщик, но не стоит изучать его полностью, для нас необходимо только необходимое.
Все что нам нужно из макета, так это картинки и не более, а для их экспорта нам понадобится сделать всего 4 действия.
Первое, открываем нужный макет в фотошопе, справа мы увидим вкладку слои.
Второе, удерживаем клавишу CTRL и кликаем по нужной картинки, в качестве примера, я кликнул в область отмеченным (1)
Во вкладки слои фотошоп сам раскроит весь список и выделит слой, вот по нему и кликаем правой клавишей мыши. После чего, выскочит контекстное меню, в нем выбираем пункт (Export as PNG) или (Экспорт как PNG) если у вас русская версия.
Вот и все, выбираем куда сохранить и радуемся результату 🙂
Таким образом, экспортируем и другие картинки которые нужны, это могут быть иконки, фото и т.д. На этом работа с фотошопом заканчивается.
Этап 2 — Верстка
Вторым этапом у нас дальнейшая верстка сайта и самый лучший инструмент для этой цели — это программа CERON. В ней объединены все самые лучшие инструменты в один общий. Программа подойдет как для новичков, так и для опытных верстальщиков.
Сайт: https://ceron.pw
Что самое интересное, в CERON уже встроен инспектор макетов и фотошоп уже не понадобится. Помимо экспорта картинок, программа обладает рядом преимуществ которые обеспечат вам высокую скорость верстки и что немаловажно, удобство в использование.
Для закрепления результат, советую посмотреть небольшой урок как из PSD макета, сверстать лендинг за 1 час.
Этап 3 — Скрипты
Очень быстрый и удобный редактор кода, а изобилия тем поможет вам настроить цвет рабочий среды на любой вкус и цвет. Также наличия плагинов, поможет вам работать с такими синтексами как Sass и его разновидностями.
Сайт: https://www.sublimetext.com
Как вы знаете, верстка состоит не только из HTML/CSS но также и из Javascript. Написание скриптов отнимает много времени в верстке, особенно если вы пишете свой собственный скрипт.
Но свой скрипт не обязательно писать, есть много готовых решений, плагинов и фреймворков. Один из самых популярных и удобный на мой взгляд это Jquery.
Если вы в скриптах полный профан, то вам придется хоть немного его освоить, иначе вы не сможете завершить полностью верстку, так как каждый сайт не обходится без каких либо скриптов 🙂
Завершение
После всех пройденных этапов, остается последний! Проверить свою работу в браузере Google Chrome.
У этого браузера есть бесценный DevTools который отображает полностью все дерево html части сайта. Имеет консоль, которая позволит вам писать javascript код, отлавливать ошибки и всякое такое.
Браузер остается последним звеном перед финальным этапом, на нем вы проверяете ваш сайт и как он работает. После всех проверок, настает окончательный этап, завершение работы и отправка верстки заказчику.
В заключение
Это все программы которые использую лично я, возможно для кого-то могут показаться не новостью, а для кого-то новым открытием которое действительно ускорит и упростит работу. Моя цель научить каждого кому интересно верстать, и я очень надеюсь, что данные программы помогут и вам как помогают мне.
Что такое Pixel Perfect верстка
Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель. При наложении html-шаблона на макет PSD должно произойти полное совпадение графических элементов, изображений и текста.
Применение Pixel Perfect верстки
Техника работы с Pixel Perfect версткой осуществляется за счет применения особых плагинов, созданных специально для определенных браузеров, а также с помощью специализированных скриптов. Основные этапы работы с Pixel Perfect версткой включают в себя такие процедуры:
- Оригинальный PSD-макет необходимо сохранить в формате .png через программу Photoshop.
- Html-шаблон, сверстанный по данному макету, открывается в браузере, после чего с помощью применения плагина копию в формате .png необходимо наложить на сверстанную страницу.
- После наложения становится видна разница между расположением элементов на png-копии и html-макете. Далее проводится коррекция значений для точного совпадения.
Плагины и скрипты для Pixel Perfect верстки
Pixel Perfect верстка требует наличия определенных плагинов или скриптов для возможности осуществления точной корректировки картинок и настроек. Среди наиболее популярных и эффективных плагинов и скриптов для Pixel Perfect верстки стоит выделить:
- Pixel Perfect под Firefox;
- Pixel Perfect под Google Chrome;
- X-Precise;
- pixLayout и другие.
Все скрипты и плагины отличаются удобным и понятным интерфейсом, широкими функциональными возможностями, легкостью подключения и комфортными для работы настройками, позволяющими верстать коды быстрее и эффективнее.
Pixel Perfect верстка в email-рассылках
Pixel Perfect верстка активно применяется при создании email-рассылок. Основной целью рассылок является привлечение как можно большего количества потенциальных клиентов, а также качественное и своевременное информирование и удержание существующих.
В данном случае большое значение имеет не только содержание сообщения, но и способ его подачи. По этой причине Pixel Perfect верстка является идеальным решением для доведения качества контента до максимально возможного уровня.
Полное руководство по кодированию PSD в HTML от экспертов по интерфейсу
Наша команда в Mayven Studios работает над веб-проектами долгое время, более 15 с лишним лет. Вау, мы старые. Мы начали еще давным-давно, когда нарезка изображений из PSD для фонов все еще была делом, и теперь делаем все, от дизайна бренда до полнофункциональных приложений.
Front-end разработка намного сложнее, чем это было даже пять лет назад, с новыми требованиями к коду, стандартами дизайна и появлением мобильного и адаптивного Интернета.Только за последний год мы закодировали тысячи страниц и хотели бы поделиться некоторыми советами, которые мы выработали на основе собственного опыта проектирования и разработки интерфейса программирования для наших клиентов по всему миру.
Это полное руководство по преобразованию PSD в HTML можно совершенно бесплатно поделиться с друзьями и коллегами.
Совет : Для любого внешнего проекта совсем не обязательно иметь файл Photoshop или какой-либо файл дизайна, если на то пошло. Что наиболее важно, у вас есть приблизительный каркас или представление о том, какой контент и макет будут на каждой странице, которую вы создаете.Мы поможем вам взять это оттуда.
Для этого урока мы будем работать над этим файлом Figma:
Стоит ли использовать программный конвертер PSD в HTML?
У вас может возникнуть соблазн использовать программное обеспечение, которое обещает автоматизировать этот процесс. В Интернете есть несколько сайтов, которые предлагают конвертировать PSD в HTML с помощью приложений для автоматизации. Проблема с этими инструментами заключается в том, что вы не можете предоставить действительно настраиваемый код HTML / CSS с помощью программной автоматизации, и эти инструменты не всегда обеспечивают идеальное преобразование, которое может быть выполнено посредством ручного взаимодействия с файлом PSD и преобразованный файл.Если вы не умеете исправлять ошибки и не умеете писать интерфейсный код, программное обеспечение для преобразования может доставить больше хлопот, чем оно того стоит.
Это не означает, что автоматическим преобразованиям нет места в мире фронтенд-разработки. Некоторые владельцы сайтов извлекают выгоду из этих инструментов. Для некоторых примеров вы можете использовать программное обеспечение для автоматизации для:
- Простой магазин электронной коммерции Shopify
- Сайт для малого бизнеса на Squarespace или Basekit
- Cratejoy для абонентской коробки бизнес
Другими словами, если целью сайта является размещение на размещенном сайте-шаблоне, тогда использование программного обеспечения для преобразования может быть полезным.Для любого другого сайта дизайн требует индивидуального подхода от дизайнера.
Программное обеспечение, необходимое для преобразования PSD в HTML для фронтенд-разработки
Как и в любой другой работе, для начала вам понадобятся правильные инструменты. Вы можете поискать в Интернете и найти множество утилит, инструментов и программного обеспечения для автоматизации. К счастью, за эти годы мы испробовали довольно много из них, поэтому мы можем сузить круг вопросов для вас. Нет ничего хуже, чем создать сайт с громоздкими и неуклюжими инструментами, которые на самом деле не делают то, что вам нужно.
Вот инструменты, которые мы предлагаем вам загрузить и приобрести, прежде чем приступить к преобразованию PSD в HTML.
- Sublime Text: этот инструмент является шагом вперед по сравнению с популярным Notepad ++ (который является альтернативой, если вам не нравится Sublime). Этот инструмент кодирует ваш текст цветом в зависимости от языка, который вы используете, и он легче конвертирует между Apple и Windows, чем другие текстовые редакторы.
- Adobe Photoshop: Photoshop является создателем файлов PSD. Adobe Photoshop является частью их Creative Cloud Suite.Вы можете получить это программное обеспечение по фиксированной цене или заплатить всего 19 долларов в месяц за это программное обеспечение. Это намного доступнее, чем то, что дизайнерам переднего плана пришлось потратить много лет назад.
- Фигма
- Эскиз
- CSS Hat (надстройка Photoshop): сэкономьте время и получите это дополнение к Photoshop. Этот инструмент мгновенно превратит слой Photoshop в CSS.
- Avocode: в большинстве заданий по фронтенд-разработке вы будете работать в команде, даже если ваша команда — это вы и разработчик.Avocode позволяет экспортировать ресурсы и сотрудничать с другими разработчиками и дизайнерами.
- PNG Hat. Если вы игровой дизайнер, этот инструмент поможет вам нарезать ресурсы для игрового дизайна. Он также сжимает изображения во время экспорта для более быстрой загрузки, не вызывая ухудшения качества изображения.
- CSS3ps: похоже на CSS Hat, но это облачный инструмент, конвертирующий ваши слои Adobe Photoshop в CSS3.
Выберите фреймворк (или не делайте этого)
Фреймворки для фронтенд-разработки сейчас очень популярны.Эти фреймворки могут упростить разработку интерфейса пользователя без необходимости начинать с нуля. Это не означает, что вам нужно привязывать себя к определенной структуре для каждого проекта. Выбор без фреймворка также приемлем, если вы умеете работать без него.
У вас на рынке сотни фреймворков. Программные фреймворки зародились и наиболее распространены в серверном кодировании, например, Laravel (PHP), Ruby on Rails (Ruby), но интерфейсные фреймворки проникли в индустрию фронтенд-дизайна.Фреймворки внешнего интерфейса сосредоточены на трех основных областях дизайна: фреймворки HTML, CSS и JavaScript.
Вопрос, который вы должны задать себе, — хотите ли вы использовать фреймворк. Если вы не привыкли к тому, что выбираете, вам нужно научиться работать с ним при написании кода, что увеличивает временные рамки проекта. Большинство фреймворков сокращают объем кода для страницы, но они могут усложнить ваш проект, если вы не знакомы с их синтаксисом и «способом» работы фреймворка.
- Плюсы: Фреймворки сокращают объем кода, используемого на сайте, и даже могут сократить время написания кода, если вы знаете, как их использовать. При правильном использовании фреймворки могут повысить эффективность и улучшить дизайн.
- Минусы: при наличии на рынке сотен фреймворков вам, возможно, придется учиться во время проектирования, что обычно не дает лучшего кода. Фреймворк должен иметь хорошую поддержку сообщества, иначе вы можете на неопределенное время застрять с фреймворком, у которого нет никаких обновлений или поддержки.
Если вы решили привязать себя к фреймворку, вы можете сделать все возможное. Мы работали с несколькими фреймворками, но считаем, что следующие два являются лучшим выбором.
Twitter Bootstrap (или просто Bootstrap): Bootstrap значительно упрощает фронтенд-разработку. Подключите файлы CSS и JS и приступайте к работе. Он отлично подходит даже для бэкенд-кодеров, которые не очень хорошо разбираются в интерфейсной разработке. Bootstrap также полностью адаптивен, поэтому вы можете легко внедрить адаптивный дизайн в свои проекты.
Foundation: Foundation в основном делает то же самое, что и Bootstrap, но более настраиваемый и предлагает больше компонентов. Например, в Foundation есть проверка формы.
Выбираете ли вы Bootstrap или Foundation, вы не ошибетесь в любом случае. Оба они предоставят вам адаптивный дизайн и сеточную систему, необходимую для разработки.
Разработка макета для проекта
Прежде чем даже выполнять преобразование, нужно определиться с макетом.У вас есть четыре основных макета на выбор.
- Адаптивный: в индустрии дизайна нельзя уйти от термина «адаптивный». Адаптивный дизайн в основном сдвигает макет страницы под размер экрана. Этот макет является основой большинства веб-приложений, предназначенных для мобильных устройств.
- Только для мобильных устройств: некоторые приложения не предназначены для работы на настольных компьютерах. Этим мобильным приложениям нужен только дизайн, который поместится на планшете или смартфоне.
- Исправлено: фиксированные макеты полезны только для настольных дизайнов.Фиксированные дизайны имеют статическую ширину и высоту, а элементы, содержащиеся в макете, не меняются в зависимости от размера экрана или когда пользователь минимизирует окно.
- Fluid: гибкие конструкции удобны для мобильных и настольных компьютеров. Элементы в своих контейнерах смещаются, когда пользователь сворачивает браузер или использует меньший экран.
Вы могли заметить, что гибкий и отзывчивый веб-дизайн звучат одинаково. Они похожи, но отзывчивый гораздо полезнее для таргетинга на мобильные устройства.Fluid больше используется для браузеров разных размеров в настольных приложениях. В адаптивном дизайне используются медиа-запросы CSS для изменения размера и расположения элементов при изменении размера экрана. Плавный дизайн перемещает элементы при изменении размера экрана, но элементы по-прежнему имеют одинаковые проценты ширины и высоты независимо от размера экрана. В результате дизайн Fluid не всегда удобно перемещает элементы на экране, поэтому лучше придерживаться адаптивного дизайна для мобильных устройств.
Fixed — это гораздо более простой в использовании макет, но, как мы уже упоминали, макет не смещается в зависимости от размера экрана.Эти макеты заставляют пользователей выполнять прокрутку, если экран слишком мал, а на больших экранах отображается много белого пространства, когда макет слишком мал.
Начните с экспорта изображений из файла PSD
В любом файле PSD есть изображения, которые вам нужны, например фоновые изображения для заголовка или другие вещи, которые нельзя воспроизвести с помощью CSS. Это отправная точка для вашего обращения. Возьмите свой PSD-файл и вырежьте изображения, которые невозможно воссоздать с помощью стандартных инструментов экспорта CSS.Экспортируйте эти ресурсы в PNG или любой другой формат файла, который, по вашему мнению, необходим.
Раньше вам приходилось вырезать тени и аккуратно размещать их рядом с изображениями, но помните, что CSS3 имеет эффекты тени. Вам просто нужны изображения, а CSS3 сделает остальную часть затенения.
Напишите HTML для каждого раздела
Хороший дизайнер знает, что одну страницу можно разделить на несколько разделов. Чтобы ваши проекты были единообразными и легко отображались в терминах HTML-кода, вы должны писать разделы HTML сверху вниз.HTML5 сделал секционирование вашего кода намного более эффективным.
Заголовок : Самая верхняя часть страницы — это заголовок. Обычно он содержит логотип и любые пункты главного меню, расположенные горизонтально вверху страницы. Он также содержит разделительную линию между заголовком и основным содержимым.
Герой : Не на каждой странице есть раздел героя. Этот раздел представляет собой большую область вверху, которая выделяет конкретное изображение или предложение среди остальной части страницы. Он находится под заголовком.
Слайд-шоу : Некоторые владельцы сайтов предпочитают слайд-шоу вверху страницы. Вы кодируете этот раздел следующим, поскольку он также включает список изображений, которые скользят по странице.
Контент : Этот раздел является основной текстовой областью, которая содержит все содержимое, включая текст, изображения, кнопки и, в основном, любые компоненты, составляющие динамическую основу сайта.
Нижний колонтитул : Нижний колонтитул находится внизу страницы. Обычно он содержит контактную информацию, некоторые ссылки на контент, такой как блог или страницу с информацией о компании, а также любые ссылки на социальные сети для бизнеса, когда вы создаете маркетинговые страницы.
После того, как вы создадите свои HTML-разделы, вы должны проверить их на точность синтаксиса. Нет ничего хуже, чем создать сайт только для того, чтобы обнаружить, что в основном HTML отсутствует закрывающий тег. Устранение незначительной синтаксической ошибки в HTML может занять несколько часов, но это может вызвать серьезные проблемы с удобством использования для ваших пользователей. Найдите время, чтобы проверить код на наличие ошибок.
Чтобы ускорить проверку кода, используйте валидатор HTML.
Если вы не эксперт в кодировании HTML, вы можете прочитать несколько подробных руководств.Вот две ссылки, с которых можно начать.
Team Treehouse
Ларакасты
Затем добавьте свой стиль с помощью CSS
Теперь, когда у вас есть оболочка HTML, пришло время добавить немного стиля с помощью CSS. Если вы используете фреймворк, такой как Bootstrap, возможно, у вас уже есть некоторые настройки стилей, но пришло время добавить в код свои личные особенности дизайнера.
Учебное пособие по CSS само по себе является руководством, поэтому мы свяжем вас с несколькими местами, где вы можете изучить CSS.
Smashing Magazine: Интернет-журнал для дизайнеров и программистов.
Mozilla: руководство по CSS: изучите стили CSS у самих экспертов по браузерам.
CodeCademy: Кодируйте и практикуйтесь, изучая CSS.
Вы можете даже использовать компилятор CSS, также называемый препроцессором. Как и в случае с интерфейсными фреймворками, у вас также есть множество вариантов. Однако три основных препроцессора — это SASS, LESS и Stylus.
Препроцессоры в CSS аналогичны препроцессорам, используемым в интерпретируемых языках, таких как PHP и старый классический язык ASP.У препроцессоров есть несколько преимуществ, но одним из наиболее заметных является то, что вы можете использовать переменные. Традиционно CSS не позволял использовать переменные.
Единственным ограничением использования препроцессора является то, что ваш проект затем привязан непосредственно к этому препроцессору без опций. Им должна пользоваться вся ваша команда, а это значит, что если никто не знает, как им пользоваться, всем нужно учиться.
Лично мы предпочитаем SCSS и Bootstrap. SCSS — это препроцессор, созданный в Ruby, который генерирует CSS.Мы рассмотрели Bootstrap. Он позволяет быстро создать полностью адаптивный шаблон макета без каких-либо усилий с вашей стороны.
Добавить взаимодействие с JavaScript
Создав оболочку HTML и CSS, пора приступить к работе с JavaScript-частью сайта. Если вы не знакомы с jQuery, пора остановиться и узнать, как он работает. jQuery значительно упрощает работу с динамическим кодом переднего плана, чем с необработанным JavaScript. Это библиотека, которая организует DOM и добавляет некоторые дополнительные функции, упрощающие создание динамических макетов.
Даже если вы хорошо знаете jQuery, ничто не мешает вам получить небольшую помощь от некоторых фреймворков. Два самых популярных — vue.js и react.js. Эти две платформы упрощают привязку HTML-элементов к данным и функциям JavaScript.
Другой популярный вариант — AngularJs. Эта структура позволяет использовать стили MVC для динамической установки данных в макетах HTML. По мере того, как JavaScript становится все более широко используемым, появляется все больше и больше фреймворков стиля JavaScript MV *.
Какой бы фреймворк вы ни выбрали, просто помните, что вам нужно будет использовать его на протяжении всего жизненного цикла вашего приложения. Разрыв фреймворка для перехода на другой — это серьезная переделка кода, на выполнение которой могут уйти месяцы, поэтому убедитесь, что вы выбрали правильный, который вы можете легко изучить (если вы этого еще не знаете), имеет все необходимые вам параметры. для завершения проекта и не создает серьезных препятствий для удобства использования и опыта. Если вы потратите время на то, чтобы убедиться, что вы учитываете долгосрочное обслуживание, в конце концов, вы избавитесь от головной боли.
Как убедиться, что преобразование из PSD в HTML адаптивно на всех устройствах
На рынке есть несколько сайтов, которые тестируют ваш код на предмет полной адаптивной функциональности и поддержки. На таких сайтах, как MobileTest.me и Google Developer Tools, вы можете автоматизировать тестирование, но вам следует использовать эти инструменты только для небольших проектов, где не так много компонентов. Другими словами, вы должны проверять качество своих проектов для более крупных корпоративных проектов, прежде чем писать строку кода.
Невозможно купить все представленные на рынке смартфоны и планшеты, но вы можете использовать определенные стратегии, чтобы убедиться, что дизайн подходит для большинства устройств. У вас должен быть как минимум доступ к одному из самых маленьких поддерживаемых вами экранов и, желательно, к последней версии iPhone, так как это наиболее широко используемые устройства. Это гарантирует, что ваш макет будет работать при минимальном разрешении и на новейших телефонах. Затем вы хотите тестировать на постепенно увеличивающихся экранах, пока не достигнете размера планшета. Не забывайте о настольных компьютерах, но есть вероятность, что у вас под рукой есть рабочий стол для тестирования.
Вы также можете выполнить начальное тестирование с помощью эмуляторов. И iOS, и Android имеют эмуляторы, с которыми вы можете работать и которые позволяют просматривать ваше приложение в реальном размере экрана. Это не должно быть единственным усилием, которое вы вкладываете в QA, но это хорошее начало. Однако помните, что эмуляторы не очень хорошо воспроизводят события касания мобильных устройств и другие функции, специфичные для мобильных устройств, поэтому вам всегда следует проводить тестирование на реальных устройствах.
Проблема, с которой вы в конечном итоге столкнетесь, заключается в том, что существуют десятки размеров экранов, которые можно удовлетворить.Вы не можете купить их все как фрилансер. Когда вы работаете со своими клиентами, расставляйте приоритеты среди устройств, которые вы будете поддерживать. Сделайте ставку на размеры экрана и даже на бренды, которые вы будете поддерживать. Если приложение запускается, клиент может поддерживать и другие устройства. Если операционная система широко не используется (например, Windows phone), рассмотрите вариант отказа от ее поддержки, если для этого нет особых требований.
ProTip: Ускорьте свой CSS с помощью современного CSS и рабочего процесса переднего плана с Gulp и SCSS
Дизайн требует много практики, прежде чем вы создадите эффективный процесс.После наших первых 100 преобразований PSD в HTML мы заметили, что можем ускорить процесс, используя Gulp и SCSS. Вам нужно будет ознакомиться с системой Gulp, прежде чем внедрять ее, но это того стоит, если вы сможете эффективно внедрить ее в свои проекты.
Мы обсуждали некоторые препроцессоры для CSS в предыдущих разделах. Gulp — компилятор для этих препроцессоров. Мы упоминали, что предпочитаем SCSS, поэтому вы можете комбинировать препроцессор SCSS с Gulp для компиляции вашего кода (обычно написанного на JavaScript или CoffeeScript).
Gulp построен на Node.js, поэтому сначала необходимо загрузить библиотеку Node.js. Вы можете скачать установщик для Linux, Mac или Windows здесь.
После настройки Node.js можно переходить к установке и настройке Gulp. Где бы вы ни установили Node, введите следующее в свою любимую утилиту командной строки.
npm install -g gulp
Сам
Gulp не обходится без плагинов. SCSS — это плагин для Gulp. После установки Gulp запустите следующий оператор командной строки.
npm установить gulp-sass –save-dev
После этих команд все готово.
ProTip: Сделайте свою жизнь проще с BrowserSync (обновление не требуется!)
Любой дизайнер или разработчик знает этот сценарий: загрузить страницу в каждый браузер, найти ошибки, изменить какой-то код, а затем снова загрузить код в каждый браузер. Кодирование — это много проб и ошибок. Контроль качества запускает многочисленные тесты вашего кода, а затем снова запускается процесс проб и ошибок.
Весь процесс локального тестирования и исправления ошибок утомителен, и теперь этот интерфейс во многом зависит от совместимости браузера. Дизайнер и кодировщик вынуждены постоянно загружать новые версии своего кода. Это добавляет много времени на кодирование всего проекта и процессы контроля качества.
BrowserSync может сэкономить вам день программирования. Представьте, что ручное обновление больше не будет. Просто измените свой код, и BrowserSync автоматически обновит новую версию вашего кода в каждом браузере. Новые CSS и JS автоматически добавляются на обновленную страницу, поэтому вы экономите массу времени.
BrowserSync отражает ваш код во всех браузерах, что также полезно при тестировании мобильной совместимости. CSS и JS особенно деликатны на рынке мобильных устройств. Несколько пикселей в дизайне, и у вас могут возникнуть проблемы с удобством использования на конкретном устройстве.
BrowserSync также использует Node.js, поэтому для начала вам необходимо установить эту библиотеку. Используйте следующую командную строку для установки инструмента.
npm install browser-sync –g
После того, как вы установили его, вам нужно запустить его, чтобы привязать его к событиям браузера вашего сайта.Введите следующую команду в свою командную строку (убедитесь, что командная строка указывает на каталог, содержащий ваш проект):
browser-sync start –server –files «* .html, css / *. Css»
Приведенный выше оператор запускает BrowserSync на вашем сервере для всех файлов с расширениями HTML и CSS. Вы также можете указать расположение сервера, используя IP-адрес и номер порта.
Советы по кроссбраузерному тестированию
Несколько лет назад дизайнерам и разработчикам нужно было беспокоиться только о двух браузерах: Internet Explorer и Firefox.Google запустил Chrome, и он добавил еще один в кучу. Сейчас на рынке существует множество браузеров без названия, и у вас всегда есть группа клиентов, которые хотят обслуживать эти браузеры. Существуют не только личные предпочтения, но также необходимо учитывать мобильные браузеры, которые обычно имеют свои собственные требования к стилю. Это может быть огромной проблемой для фронтенд-разработчиков, особенно когда сайт в основном полагается на клиентские скрипты.
Первый шаг — собрать некоторую статистику для сайта.Это ответственность владельца сайта, но это может помочь сузить поддержку браузеров до тех, которые используются посетителями. Например, Google Analytics предоставляет владельцу сайта список браузеров, используемых для просмотра сайта. Если «Браузер без имени» нет даже в списке, значит, на это требуется слишком много времени и не стоит финансовых затрат на поддержку этого браузера. Этот шаг экономит деньги заказчика, а затем позволяет дизайнеру сэкономить время на разработку и тестирование.
Мы собрали несколько основных советов, которые помогут максимально повысить эффективность кроссбраузерности QA.
- Большинство корпоративных клиентов сообщают пользователям, что внутренние приложения поддерживаются только определенными браузерами. Получите эту информацию от своего клиента, чтобы сосредоточиться на его внутренне поддерживаемых требованиях к браузеру. Для небольших проектов вы можете сосредоточиться на большой четверке: Chrome, Internet Explorer (теперь Edge), Firefox и Safari.
- Мы упоминали сайты в Интернете, которые позволяют вам тестировать ваши проекты на экранах разных размеров. Вы можете сделать то же самое с поддержкой кроссбраузерности. Тем не менее, вам все равно следует провести ручное тестирование.Создавайте виртуальные машины, содержащие каждый браузер, или вы можете установить каждый браузер на локальную машину разработки для тестирования.
- Создать модульные тесты. Бэкэнд-кодеры обычно проводят модульные тесты, но и фронтенд-кодеры тоже могут. Некоторые дизайнеры предпочитают такие инструменты, как Selenium, для автоматизации процесса.
- Определите самую старую версию браузера, которую вы будете поддерживать. Вы не можете использовать новые CSS и JavaScript в очень старых версиях браузеров. Они его не поддерживают, поэтому вам нужно определить самую старую версию каждого браузера и протестировать с этими версиями.
Front End-разработчикам нужен дизайнерский взгляд
Front-end разработчикам нужен глаз к дизайну, чтобы улавливать те мелкие недостатки, которые другие не смогли бы уловить. Если вы их не поймаете, поймут ваши пользователи. Когда вы разрабатываете и кодируете сайт, сложно обнаружить мелкие ошибки и проблемы. Это еще сложнее, когда вы написали код и разработали сайт и просматриваете его по несколько часов в день.
Глаз дизайна не всегда приходит естественным образом, но некоторым процессам проектирования можно научиться через обучение и практику.Важно практиковать то, чему вы научились, чтобы отточить свое мастерство. Практика поможет вам развить взгляд на дизайн. Даже общение с другими дизайнерами поможет вам развить свои навыки и стать лучшим дизайнером.
Контрольный список из PSD в HTML
Если вы прочитали все это руководство, у вас есть хорошая основа для своих проектов. У нас все еще есть несколько советов для вас, когда вы погрузитесь в мир преобразования PSD в HTML.
- Хорошо ли скроены ваши изображения и отражают ли они качество бренда и сайта?
- Вы тестировали все аспекты кода, включая HTML, CSS и JavaScript (помните, что вы можете использовать валидатор)?
- Является ли код чистым, чтобы другие дизайнеры и разработчики могли продолжить с того места, где вы остановились? Корпоративные клиенты обычно привлекают к работе других фрилансеров или внутренних кодировщиков, поэтому код должен быть чистым и организованным.
- Дружественен ли код к SEO? Хотя всегда полезно писать код и писать для пользователей, важно, чтобы код был разработан таким образом, чтобы он был удобен для ботов. У Google есть инструмент «Просмотреть как Google», который помогает вам просматривать и визуализировать то, как сайт выглядит для ботов.
- А как насчет пользовательского опыта? Дизайнер должен хорошо разбираться в пользовательском опыте, чтобы создавать удобную навигацию и интуитивно понятные элементы управления.
- Не забывайте о специальных возможностях для пользователей со слабым подключением и пользователей с ограниченными возможностями.Ваши изображения и макеты должны учитывать более медленное соединение, особенно мобильные устройства.
- Проверить время загрузки страниц сайта. Это важно для мобильных устройств и показателей конверсии. Пользователи не будут долго ждать загрузки страницы, поэтому вам следует проверить производительность. У Google есть инструмент, который поможет вам проверить производительность сайта.
Службы PSD в HTML — интерфейс в коробке
Может быть, вы разработчик, который не разбирается в дизайне, или, может быть, вы просто не хотите конвертировать файл PSD в HTML.Именно для этого и существует сервис Mayven Studios из PSD в HTML! Мы преобразовали тысячи файлов и создали это руководство, потому что прошли через испытания и невзгоды, необходимые для обеспечения идеального процесса.
Мы уверены в наших услугах, но также хотим, чтобы у наших клиентов был выбор. Вот еще несколько сервисов PSD в HTML, из которых вы можете выбрать.
PSDtoHTML.com: Эта компания предоставляет несколько услуг, одна из которых — преобразование из PSD в HTML. Компания представляет собой конгломерат таких сервисов, как thesiteslinger.com и codemyconcept.com.
DesignToHTML.com: эта компания конвертирует в HTML не только файлы PSD. Они также предлагают преобразование в сайты-шаблоны, такие как WordPress, Joomla, Drupal и Magento.
xHTMLChop.com: этот сайт предлагает несколько вариантов преобразования, включая PSD в HTML.
Заключение
Надеемся, вам понравился этот подробный пост о преобразовании PSD в HTML! Это должно сэкономить ваше время на следующем дизайн-проекте или помочь вам начать процесс.
Преобразование PSD в HTML экспоненциально сложнее, чем несколько лет назад, потому что они должны быть кроссбраузерными и совместимыми с разными устройствами… а также легко реагировать.
Если вам когда-нибудь понадобится помощь в преобразовании, у нас есть глобальная команда в 17 городах по всему миру, которая может объединиться с вашими дизайнерами для создания идеального макета для преобразования вашего дизайна. Просто передайте нам файл, и всего через 2-3 дня мы передадим вам полнофункциональную версию, протестированную на всех платформах и устройствах.
Начните свой проект из PSD в HTML здесь.
Учебное пособие по преобразованию
PSD в HTML CSS | PSD в HTML
Важные ошибки, которых следует избегать
Навигация
Типографика
Содержание
HTML-теги
Когда вы пытаетесь создать свой веб-сайт из PSD в HTML, не забудьте сделать меню навигации как можно более простым. Здесь цель не в том, чтобы сделать ваш сайт сложным и, следовательно, интеллектуальным, но простота является ключевым моментом.Конечная цель состоит в том, чтобы пользователи или посетители вашего веб-сайта могли быстро получить доступ к информации, которую они ищут. То, что выглядит аккуратно и эффектно в дизайне при переводе в формат HTML, будет иметь практические трудности. Недостаточно сохранить эстетическую привлекательность вашего веб-сайта, но еще важнее то, что ваш дизайн учитывает необходимость удобства для пользователя. Все ссылки следует размещать аккуратно, чтобы посетители могли легко переходить по ссылкам по своему выбору и посещать нужные страницы без каких-либо сбоев.Здесь вы также должны учитывать небольшие дисплеи, которые, вероятно, будут использовать ваши посетители. Если ссылки или значки навигации слишком маленькие или если они неправильно заполнены, ваши посетители сочтут сам процесс навигации обременительной задачей. Это может заставить их покинуть ваш сайт, прежде чем они найдут то, что искали.
Пока мы обсуждаем удобство использования меню навигации, мы также сможем понять важность выбора правильной типографики.Необычные шрифты могут хорошо смотреться в вашем PSD-дизайне, но когда они перемещаются в формат HTML, они могут создать несколько проблем. Используемые шрифты должны быть из общедоступных шрифтов. Если вы не обращаете внимание на типографику своих веб-страниц при преобразовании дизайна, браузеры заменят шрифты доступными шрифтами. Это может сделать ваш сайт неуклюжим в браузере посетителя. Имена меню или названия навигации могут выходить за пределы значков изображений, внутри которых они должны содержаться, что приводит к наложению текста.Вы легко можете себе представить, насколько убогим будет выглядеть ваш веб-сайт, когда элементы меню навигации будут располагаться один над другим. Чтобы избежать проблем с типографикой меню навигации, некоторые дизайнеры веб-сайтов пытаются сделать навигационный текст частью изображения. Несмотря на то, что это решит проблему доступности шрифтов, вы сделаете свои страницы очень недружелюбными для поисковых систем. Меню навигации играет очень важную роль в SEO, и вы полностью сведете на нет это преимущество, сделав навигационные гиперссылки полностью визуализированными.
Небрежное обращение с областью содержимого — еще одна распространенная ошибка, которую вы видите среди новичков, которые пытаются самостоятельно преобразовать PSD в HTML. Ваши веб-страницы впечатляют не только дизайном, но и содержанием. Текстовое содержание вашего веб-сайта предназначено для продажи ваших продуктов или услуг. Когда вы создаете свой PSD, вы, скорее всего, будете использовать фиктивный текст. Когда вы перемещаете дизайн в HTML-файл с ручной кодировкой, вам нужно будет добавить фактический текст.Это требует особой тщательности. Если текстовые заполнители не выровнены правильно или не имеют хорошего расстояния, это может сделать дизайн неаккуратным.
Часто текстовая область, заданная в дизайне PSD, меньше по сравнению с фактической текстовой областью на веб-странице. Размещение длинных текстов в небольших текстовых заполнителях может привести к исчезновению нескольких строк текста или даже столкнуться с другими элементами дизайна. Плохое управление контентом — один из верных способов заставить посетителей вашего сайта быстро покинуть его.Когда вы размещаете контент в текстовой области своей HTML-страницы, просматривайте страницу в реальных браузерах столько раз, сколько вам нужно, чтобы вы знали, как именно контент отображается на ваших страницах. Здесь также важно протестировать страницы в разных браузерах, потому что текстовые области ведут себя по-разному в разных браузерах.
При перемещении текстового содержимого создайте соответствующие теги заголовков. Часто HTML-версия страницы не включает соответствующие теги h2, h3, h4….Недостаточно отформатировать текст, увеличив размер шрифта или изменив цвет шрифта. Вам нужно будет использовать правильные теги заголовков. Это повысит ценность вашего текстового контента с точки зрения SEO. Вот почему преобразование PSD в HTML не для всех. Вы должны быть знакомы со всеми HTML-тегами, а также иметь очень хорошие знания в области SEO, чтобы создавать высокопроизводительные HTML-страницы.
Сегодня стало очень распространенной практикой использовать несколько форматов содержимого на веб-странице.Сегодня это возможно благодаря высокоскоростному подключению к Интернету, которое доступно нам даже во время путешествий. Более того, было обнаружено, что использование нескольких форматов контента является высокоэффективным способом удержания посетителей на веб-сайте на более длительное время. Однако вопрос, когда вы конвертируете формат PSD в HTML, заключается в том, как обрабатываются эти многочисленные мультимедийные форматы. При создании HTML-страницы вы будете передавать не только дизайн, но и другие функции, которые необходимо передать.В связи с этим вы должны помнить о том, как мультимедийные элементы будут вести себя в браузере ваших пользователей.
Одна школа мысли считает, что лучше всего сделать эти элементы «автозапуском», как только посетители заходят на страницу, а другая школа говорит, что это не рекомендуется. Не думайте, что это не актуальное обсуждение здесь; Наша главная цель — успешно преобразовать PSD в HTML в целом и создать потрясающий и удобный веб-сайт. В соответствии с этим, нам необходимо адекватно подумать при переносе каждого компонента вашей веб-страницы в HTML.
Посетители вашего веб-сайта могут находиться у себя дома, в офисе, в библиотеке или даже в приемной больницы, когда они посещают ваш веб-сайт. Если медиафайлы на вашем веб-сайте будут воспроизводиться автоматически без какого-либо предупреждения, это может поставить посетителей в неловкое положение, и это будет достаточной причиной для ваших посетителей закрыть ваш веб-сайт и больше не возвращаться. Поэтому вы должны быть очень разумными, делая такой выбор. Вы всегда должны стараться занять место ваших посетителей, чтобы обеспечить лучший пользовательский опыт.
Как насчет размеров изображений и выбора изображений, которые вы здесь делаете? Как вы думаете, ваш выбор помогает улучшить пользовательский опыт? Вам нужно очень тщательно оптимизировать изображения, чтобы изображения были не только высокого качества, но и быстро загружались. При транспортировке изображений вам необходимо проверить, как каждое перенесенное изображение отображается в разных типах браузеров. Если вам не удастся проверить кроссбраузерность ваших изображений, то весь ваш сайт будет искажен.Тщательно решайте проблемы с выравниванием и другие проблемы, связанные с размером, с учетом различных браузеров. Ошибки оптимизации изображений могут дорого обойтись как с точки зрения дизайна, так и с точки зрения SEO.
Чрезмерное использование встроенного CSS может быть одной из грубых ошибок, которые вы можете совершить при преобразовании вашего PSD. Использование встроенного CSS сделает ваши HTML-страницы тяжелыми и увеличит время загрузки страницы. Кроме того, вы также должны помнить, что боты поисковых систем также не смогут полностью сканировать ваши страницы.Слишком много строк кода на ваших HTML-страницах означает большее время сканирования. Избыточные строки форматирования CSS заставят роботов поисковых систем прекратить процесс сканирования даже до того, как он достигнет конца страницы. В этом процессе наиболее важные разделы вашей страницы могут быть пропущены из индекса. Следовательно, важно, чтобы ваши HTML-страницы были свободны от кодов форматирования с помощью внешнего файла CSS. Это не только сделает ваши HTML-страницы удобными для поисковых систем, но и сэкономит много времени, поскольку вам не нужно вводить коды стиля для каждого случая, когда вам нужно применить один и тот же стиль.
Не проверять все ссылки и целевые страницы — еще одна большая ошибка, которую совершает здесь большинство людей. Если вы разрабатываете большой веб-сайт с множеством страниц, вам необходимо убедиться, что все ссылки на всех страницах работают нормально. Недостаточно проверять только ссылки на домашнюю страницу после перевода дизайна в формат HTML. Поисковые системы будут иметь плохое впечатление о вашем сайте, если на нем будут битые ссылки. Это, в свою очередь, повлияет на ваш рейтинг. Пользователи вашего сайта также будут разочарованы, если будут постоянно сталкиваться с неработающими ссылками.Каждая страница, которую вы конвертируете из PSD в HTML, должна быть проверена на непрерывность ссылок. Ручное тестирование важно, потому что именно тогда вы сможете определить, все ли ссылки ведут на правильную страницу. Если вы воспользуетесь программным инструментом для проверки ссылок, они смогут обнаружить только неработающие ссылки. Они не смогут оценить, ведет ли ссылка правильную страницу или нет. Вот почему ручное тестирование становится здесь критически важным, даже если это обременительный процесс для крупных веб-сайтов.
Даже самые опытные специалисты по кодированию HTML неизбежно совершают ошибки, если не обращают внимания на детали. Если вы торопитесь с процессом конверсии либо потому, что слишком уверены в своих навыках кодирования, либо из-за нехватки времени, вы, скорее всего, в конечном итоге сделаете ошибки, которые дорого обойдутся вашему бренду. Когда дело касается качества, нет никаких компромиссов. Поэтому вам следует пытаться преобразовать PSD в HTML только в том случае, если вы на 100% уверены в своих технических навыках и когда у вас есть необходимое терпение, чтобы сделать хорошую работу.
Когда вы настраиваете свою HTML-страницу, проверьте, все ли кнопки социальных сетей работают правильно. Кнопки ваших социальных сетей должны направлять ваших посетителей на соответствующие страницы социальных сетей. Это одна из наиболее часто упускаемых из виду областей. На HTML-страницы переносятся только изображения кнопок социальных сетей без ссылки на соответствующие страницы социальных сетей. Если вы не проведете полную проверку качества, вы не поймете, что кнопки социальных сетей не ведут вас на нужные страницы.
Что такое дизайн веб-шаблонов PSD? — Ломтики перца
Проработав год над своим бизнесом Uniquehorn Designs, я нашел свой фокус. Я обнаружил, что мои любимые проекты — это создание веб-шаблонов PSD. Мне нравится мгновенное удовлетворение, которое я получаю с помощью Adobe Illustrator или Photoshop для создания красивого макета.
Что такое PSD?
.PSD (Photoshop Document)… хранит изображение с поддержкой большинства параметров обработки изображений, доступных в Photoshop.К ним относятся слои с масками, цветовые пространства, профили ICC, прозрачность, текст, альфа-каналы и плашечные цвета, контуры обрезки и настройки дуплекса. — Википедия
Я уверен, что твои глаза просто потускнели, я знаю, что мои читали это, и я точно знаю, что там говорится.
В общих чертах, PSD — это файл Photoshops. Когда вы сохраняете файл в формате PSD, вы сохраняете каждый отдельный слой и различные аспекты этих слоев, включая прозрачность, специальные эффекты и многое другое. Вы можете создать дизайн, в котором каждая фигура, текстовый элемент и фотография находятся на отдельном слое, а с разделенными слоями вы можете быстро и легко редактировать каждый элемент.
В качестве примера я буду использовать одно из моих изображений из моих бесплатных распечаток ко дню Святого Валентина:
В PSD-файле этого изображения 3 слоя.
- Темно-розовый зубчатый фон
- Текстурированная розовая коробка для зажигалок
- XOs
Я мог быстро открыть файл PSD и изменить цвета каждого элемента, я мог изменить шрифт XO, я мог изменить текстуру на светло-розовом поле, или я мог изменить то, что изображено на картинке все вместе.Но если бы я попытался сделать это с файлом изображения JPG, мне пришлось бы начинать сначала, потому что все эти элементы были разбиты вместе.
Что такое веб-шаблон PSD?
Веб-шаблон PSD — это веб-сайт без кода. В нем есть все визуальные элементы веб-сайта, включая фон, изображения, макет, типографику и многое другое. Но здесь нет HTML или CSS.
На каждом слое будут разные элементы веб-сайта. У вас будет слой для логотипа, заголовка, содержимого, навигации (или несколько слоев в папке) и так далее.
Что мне нравится в дизайне веб-шаблонов PSD?
Я знаю, как писать HTML, CSS и немного PHP, но это не моя любимая часть разработки нового веб-сайта. На создание идеального кода на веб-сайте у меня могут уйти дни. Вы постоянно смотрите на код, а затем переключаетесь на визуальную интерпретацию кода, а затем снова возвращаетесь к коду.
С помощью веб-шаблонов PSD я могу просто сосредоточиться на дизайне, красоте и позволить кому-то еще позаботиться о коде.
Есть что-то чудесное в том, чтобы найти направление для своего бизнеса, точно знать, что я люблю, и уметь это делать: веб-шаблоны PSD!
Изображение значка Photoshop от Young Design
HTML и PSD шаблонов.Краткий обзор — BestWebSoft
Шаблоны
HTML и PSD — отличное решение для пользователей, у которых мало времени или небольшой бюджет, но которые хотят иметь отличный дизайн на своих сайтах. Многие рынки предлагают тонны этих шаблонов бесплатно или по номинальной цене. Но в чем разница и как ими пользоваться?
PSD шаблон — это графический проект, созданный в Adobe Photoshop. Это программное обеспечение идеально подходит для процесса от проектирования до кода. Папка с шаблоном содержит.Файлы PSD, которые можно открыть с помощью Adobe Photoshop, а иногда и Adobe Photoshop Elements.
На страницах шаблона есть все визуальные элементы сайта — макет, фон, изображения и многое другое, но не включены CSS или HTML.
Основная особенность файлов с таким расширением заключается в том, что при сохранении файлов вы сохраняете каждый отдельный слой со всеми их аспектами, такими как цветовые пространства, маски, прозрачность и многое другое. Вы можете работать с этими страницами, изменяя дизайн по своему усмотрению. В случае шаблонов PSD каждый слой каждого файла имеет отдельный элемент для веб-сайта — заголовок, навигацию, формы, логотип и т. Д.
Итак, проще говоря, PSD шаблон — это графический дизайн, который можно изменять в соответствии с вашими потребностями, но который не имеет функциональности. Чтобы дизайн функционировал как веб-сайт, необходимо закодировать его файлы в HTML.
HTML шаблон — это еще и графический проект с готовым дизайном, который содержит уже закодированные веб-страницы. Обычно страницы создаются с помощью кода HTML и CSS, поэтому изображения и другие объекты могут быть встроены в отображаемые страницы. Вы можете редактировать шаблон с помощью любого редактора кода, чтобы при необходимости изменить его структуру и упорядочить контент (ссылки, социальные сети, контактную информацию и т. Д.).
Когда все файлы отредактированы и контент добавлен, вы можете загрузить шаблон с помощью FTP в свой собственный размещенный домен.
Конечно, если вы хотите работать с этими шаблонами, вы должны иметь некоторые навыки программирования и понимать, как работает HTML / CSS.
Также вы должны отметить: с помощью шаблона HTML вы можете создать только статический веб-сайт (например, веб-сайт-визитку), поскольку эти шаблоны не имеют функций, таких как подключение к базам данных, отображение результатов поиска, отправка и обработка данных и т. Д.Так что, если вам нужен динамический сайт, необходимо дополнительно доработать его функционал.
Как видите, использование веб-шаблонов — отличное решение, если вы хотите иметь отличный дизайн и сэкономить деньги. Однако в обоих случаях необходимо иметь некоторое понимание области и навыков программирования. А если у вас возникнут трудности с этим, вы можете нанять специалиста и быть уверенным в стопроцентном результате.
Проверьте наши шаблоны здесь!
Есть вопрос? Связаться сейчас
Почему вы должны сначала создавать свой сайт в PSD, а не в HTML
Веб-сайт — жизненно важный параметр, необходимый для успеха в Интернете.Однако создание кода с нуля без какой-либо инфраструктуры может привести к долгой и утомительной задаче с множеством промежуточных проблем. Вот почему преобразование PSD в HTML является выдающимся подходом по сравнению с другими подходами к выделению сайтов с высоким уровнем визуализации. Это гарантирует, что весь макет будет разработан и настроен еще до того, как вы начнете писать код. После этого все, что вам нужно сделать, это преобразовать ваши элементы в коды. Процедура преобразования требует значительных навыков и знаний, которые должны быть выполнены экспертом для получения лучших и желаемых результатов.
Документы
PSD или Photoshop часто используются для создания дизайна веб-сайтов, который может быть несовместим с различными браузерами. HTML-код может быть расшифрован всеми доступными браузерами, такими как Firefox, Safari и Chrome. Процедура конвертации требует серьезного времени, а также знаний и навыков кодирования. Тем не менее, это очень важно, поскольку документы PSD не отражают ожидаемых результатов, поскольку их нет в Интернете.
- Что означает PSD в HTML?
Простыми словами «PSD в HTML» — это рабочий процесс.Первоначально страница составляется в документе Photoshop (PSD), а затем преобразуется в код (с использованием HTML, CSS и JavaScript). Вы можете заменить Photoshop другим программным обеспечением для редактирования изображений (например, Pixelmator, GIMP и т. Д.), Однако стандарт тот же. Вот несколько более упорядоченная разбивка:
1. Создайте в Photoshop точный макет до пикселя, который точно отражает то, что вам нужно для вашего сайта.
2. Используйте инструмент среза, чтобы выделить символику вашего сайта, а затем экспортировать ее в Интернет.
3. Составьте HTML и CSS, используя изображения, которыми вы обменялись в Photoshop.
На первый взгляд это может показаться легким и простым, но может быть трудно начать кодирование, если вы не знаете, на что будет напоминать последний результат, поэтому сначала проверьте в Photoshop, а затем «отправьте» свой дизайн в HTML звучит как подробный и разумный процесс. На изображении ниже эта функция для веб-диалога может быть важной частью для дизайнеров, которые сохраняют ресурсы из PSD.
- Psd To Html — Хорошая идея когда-нибудь?
Ну да! Рабочий процесс — отличный способ создания веб-сайтов. Основные причины, по которым это хорошая идея, описаны ниже: —
- Прежде всего, это изображения. Со временем браузеры поддержали все функции современного CSS, и чрезвычайно сложно реализовать кроссбраузерный эффект без использования изображений. Дизайнеры делали тени и корректировали углы как изображения, и тогда для размещения изображений на странице использовались хитрые приемы кодирования.Эти преимущества следует понимать, делая их тем временем, фактически сэкономив время.
- Во-вторых, (и, возможно, более существенно) Интернет был доступен только в браузерах настольных компьютеров, а не на мобильных телефонах и планшетах, как сегодня. Абсолютно целесообразно остановиться на одном фиксированном разрешении (1024 × 768).
В процессе конвертации документы PSD великолепно кодируются вручную, чтобы придать им законченный вид. Но по какой причине мы должны смотреть на трансформацию?
1.Трафик из поисковых систем
Правильное кодирование позволяет получать сайты без ошибок. Преобразование PSD в HTML понятно и семантично. Это гарантирует, что верстка сайта будет менее сложной и простой. Это изменение обеспечивает семантически кодированный сайт.
Преобразованный код помогает улучшить рейтинг веб-сайта в основных поисковых системах. Кроме того, поисковые роботы быстрее понимают код, что, в свою очередь, помогает ускорить загрузку сайтов.
2.Корректировка SEO
Поисковая оптимизация (SEO) — это жизнеспособная процедура, которая позволяет размещать сайты в топе поиска на основе ключевых слов, метатегов и описания среди прочего. Улучшить рейтинг можно, включив важные ключевые слова или удалив ошибки. В любом случае изменение файлов PSD занимает много времени по сравнению с документами HTML. Это одна из причин, которая добавляет веса преобразованию PSD в HTML.
3. Совместимость с несколькими браузерами
Страницы веб-сайтов, созданные с помощью HTML, обычно более читабельны, чем страницы с документами PSD.На страницах дополнительно поддерживаются крупномасштабные программы — от Opera до Firefox и Chrome, а также другие широко используемые программы.
- Ошибки, которых следует избегать при конвертации
Несмотря на то, что эксперты достаточно хорошо осведомлены о новых технологиях и инновациях, они не могут спланировать безошибочные и одобренные веб-решения. Это ошибки, которые совершаются при конвертации. Преобразование должно быть выполнено умело под наблюдением специалистов с использованием новейших устройств.Любая допущенная ошибка может привести к долгосрочным неблагоприятным последствиям для вашего сайта. Вам нужно искать способы избежать их в будущем.
1. Теги закрыты
Простое игнорирование закрытия тега в неправильном месте может привести к недоступности сайта. Это серьезная ошибка, о которой следует позаботиться, чтобы повысить доступность и простоту использования. Большинство неопытных дизайнеров не закрывают вкладки, которые должны быть закрыты, с помощью закрывающего тега.
2. Отсутствующие специальные символы
Символы следует использовать в небольших количествах, поскольку существуют возможности, когда поисковые системы не могут их распознать или прочитать.
3. Атрибут ALT
Если преобразование исключает тег ALT изображения, ваш веб-дизайн может работать некорректно.
Для создания привлекательного сайта необходимо найти опытного и заслуживающего доверия разработчика PSD для HTML. Без правильного преобразования поисковые системы не смогут разместить ваш сайт в списке, поэтому клиентам будет сложно найти вас в Интернете.
Имейте в виду, что для создания элегантного и функционального веб-сайта многое остается за кадром.Общие достижения бизнеса зависят от переменных, которые влияют на работу вашего сайта.
12 лучших руководств из PSD в HTML / CSS
Создание веб-сайта может быть довольно утомительной работой, но наличие макета в Photoshop определенно помогает. С Photoshop создать дизайн очень просто. Затем эти дизайны конвертируются в HTML / CSS, что позволяет сэкономить время и просто. Вот несколько руководств, которые помогут дизайнерам преобразовать файлы PSD в HTML / CSS:
1.Преобразование целевой страницы продукта из PSD в HTML [очень подробно]
Это отличное пошаговое руководство для начинающих, которые учатся конвертировать PSD в HTML / CSS. В руководстве подробно описан процесс проектирования, формирования файлов, добавления логотипов, меню и их преобразования в коды HTML / CSS.
2. Гладкий скоро появится Дизайн страницы
В этом руководстве скоро появятся страницы с привлекательным дизайном, чтобы сделать его более привлекательным для зрителей.
3. Преобразование PSD-шаблона Clean Magazine в HTML / CSS
Этот учебник упрощает создание макетов журналов.
4. Как создать код для веб-дизайна в стиле гранж с нуля
Вы когда-нибудь видели гранж-дизайн на веб-сайте? Просто выполнив эти шаги, любой дизайнер сможет его создать.
5. Кодирование веб-сайта группы, созданного в Photoshop
С помощью этого руководства создайте чистый рабочий код HTML / CSS из файлов в Photoshop.
6. Создайте красивый текстурированный веб-дизайн из Photoshop в HTML / CSS
Webgraphics Premium упрощает создание тщательно разработанных веб-сайтов от PSD до HTML / CSS.
7. PSD в XHTML: создание макета WordPress в стиле классной доски
Темы классной доски в стиле WordPress популярны. DeviseFunction имеет простой и легко адаптируемый учебник, чтобы показать дизайнерам, как создать один из этих макетов в HTML / CSS.
8. Создание высокопрофессионального веб-сайта от эскиза до кода
С этим уроком довольно легко создавать высокопрофессиональный дизайн в Photoshop.
9. Создайте отличный минималистичный дизайн от PSD до XHTML и CSS
Это руководство очень полезно для новичков.
10. Учебное пособие из PSD в HTML: закодируйте файл Photoshop для рабочего веб-сайта
Шаги в этом руководстве предлагают простые инструкции для блестящего и полностью функционального макета.
11. Макет блога Brilliante — Кодирование файла PSD в CSS и HTML
В этом руководстве подробно рассказывается о том, как дизайн Photoshop создается и классифицируется, нарезается и преобразуется в коды для чтения браузерами.
12. Преобразуйте теплый, веселый веб-дизайн в HTML и CSS
Учебник
Tuts + разбит на несколько глав, чтобы помочь дизайнерам в создании веб-сайтов.
20 отличных сайтов из PSD в HTML и CSS
Если вы веб-дизайнер, скорее всего, вы используете Photoshop для разработки своей работы. Но кодирование — это сложная часть процесса, которую не каждый дизайнер хочет или знает, как это сделать.
В этой статье вы найдете 20 веб-сайтов из PSD в HTML и CSS, которые могут воплотить ваши проекты в жизнь с помощью ручного кодирования.Если вы хотите сэкономить время на следующем проекте, вам нужна помощь экспертов с кодом или вам лень делать это самостоятельно, вам может понадобиться одна из этих услуг.
Сервис разметки
PSD2HTML
PSD слайсер
CMS Themer
PSD нарезки
CSSchopper
Код моей концепции
КачествоXHTML
PSD Шимпанзе
HTML Cut
PSD в HTML CSS
Мастер XHTML
CSS Ниндзя
Rapid XHTML
XHTML Ель
HTML Бургер
Нарежьте мой дизайн
W3 Разметка
Нарезать кубиками
Слайсер HTML5
.