Содержание

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

292 647 любопытных

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

Так же по теме

  • Как сделать макет или дизайн сайта в Photoshop
  • Как простой HTML шаблон сверстать под WordPress

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

Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать 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;
 }

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

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

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

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

html — Вёрстка сайта из psd шаблонов

Вопрос задан

Изменён 5 лет 1 месяц назад

Просмотрен 2k раза

Здравствуйте. Возник такой вопрос (по большей части проблема). Очень хочется научиться верстать сайты из psd шаблонов. С фш проблем нет, там воплощаю в жизнь макет сайта, шаблон. Но как его из psd сверстать сайт — нет опыта. Знание html и css есть. Дайте, пожалуйста, пару советов в этом деле. Может, ресурс какой-нибудь для прочтения подкиньте. Заранее спасибо.

  • html
  • css

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

А так:

  1. В фотошопе разбиваешь сайт по частям, по которым легче всего сколотить сайт.
  2. Можно сохранять по отдельности каждый блок или элемент сайта в изображение, но рекомендуется все в один и уже из файла с помощью css вытаскивать нужные части.
  3. После, с помощью CSS играешься с позиционированием блоков и верстаешь сайт через html.
1

Мой небольшой опыт. Когда нарисовали сайт, вырезаете бэкграунды, кнопки и др. элементы сайта. Если бэкграунд — паттерн, вырезайте квадрат размером 20х20, меньше не делайте. Сохраняйте фалы для вэб. Потом, когда все вырезано, начинаете писать html разметку не обращая внимания на css. Соответственно вам надо уже знать, что и как будет у вас размечено. Когда разметка есть начинате писать стили. Отступы я лично мерю линейкой в фотошопе :). Получается довольно точно. После верстки пишите js скрипты и если надо создаете отдельный стиль для internet explorer.

Я тоже поделюсь своим небольшим опытом:

  1. Планирование. Смотрите на psd и мысленно себе рисуете в голове как будут располагаться блоки, где будет картинка, а где можно шрифтом заменить, как лучше фон сделать т.д. Планировать можно (и нужно) и на бумаге. Там где сплошной цвет, можно залить цветом через CSS (и даже там где не сплошной можно). В общем правило первое: если где-то можно обойтись без картинок, не используйте картинки. Это касается и прозрачных блоков и закруглений и теней.

  2. Раскройка. Берете ваш любимый режущий инструмент в фотошопе и аккуратно режете psd на те части, которые вы мысленно представляли себе при планировании. Сохранять можно в любые приемлемые форматы (главное, чтоб меньше весило при сохранении относительного качества).

  3. Строите каркас из html. Здесь нужно вспомнить, что вы там напланировали и немного поправить верстку по ситуации.

  4. А теперь самое главное. CSS. Здесь подходы могут быть разные, нужно выбрать оптимальный. Например, использовать ли reset.css и чем позиционировать: float-ом или position-ом. Или вообще таблицами где-то забацать. Главное правило: то, что можно сделать через CSS, делайте через CSS. Если возможностей CSS уже нехватает, оставляем это место для js.

  5. Далее по желанию можно добавить интерактивности через js и сделать то, что не вышло через CSS. Ну и не забывайте постоянно тестировать страницу в различных браузерах.

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как преобразовать PSD в HTML: полное руководство

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

Сначала вы создаете дизайн в Photoshop, популярном инструменте для редактирования изображений. Затем конвертируйте их в формат HTML. Нарезка изображений из PSD не является чем-то новым на цифровой арене сегодня. Но важно делать это с умом для достижения эффективных результатов.

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

Использование программного конвертера PSD в HTML

При преобразовании PSD в HTML целесообразно автоматизировать процесс с помощью соответствующего программного обеспечения. Как и другое программное обеспечение, оно также имеет недостаток, поскольку вы не можете получить действительно пользовательский код HTML/CSS с помощью автоматизации программного обеспечения.

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

Это не означает, что разработка внешнего интерфейса не зависит от автоматических преобразований. Их можно использовать в нескольких случаях, в том числе:

  • Базовый магазин электронной коммерции на основе Shopify
  • Бизнес-сайт на Basekit или Squarespace

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

Зачем нужно конвертировать PSD в HTML?

Чтобы создать веб-сайт, вам придется поработать над многими вещами. И процесс преобразования PSD в HTML — это один из тех аспектов, с которыми вы столкнетесь для создания привлекательного и надежного веб-сайта. Это дает вам возможность создавать веб-сайты непревзойденного качества для вашего бизнеса. Поэтому предприятия выбирают этот процесс для создания уникальных веб-сайтов, которые выделяются среди других.

Ниже приведены некоторые преимущества преобразования дизайна PSD в HTML, которые показывают, почему это необходимо.

  • Пиксельный, соответствующий стандартам и качественный код.
  • Уникальные и персонализированные веб-сайты.
  • Отзывчивые и быстро загружаемые веб-сайты.
  • Оптимизированный код, обеспечивающий SEO-оптимизацию веб-сайтов.

Что необходимо учесть перед преобразованием PSD в HTML

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

  • Notepad++
  • Bootstrap
  • Adobe Photoshop
  • Avocode
  • PNG Hat
  • CSS3ps

Вы должны убедиться, что создаваемый вами код соответствует стандартам и подтвержден W3C. Кроме того, HTML-шаблон должен быть адаптивным и оптимизированным для SEO, чтобы обеспечить совместимость с различными устройствами и веб-браузерами и высокий рейтинг в поисковых системах.

Использование среды разработки переднего плана

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

Наиболее распространенными программными фреймворками для внутреннего кодирования являются Laravel (PHP) и Ruby on Rails (Ruby), а также интерфейсные фреймворки, которые проникли в индустрию внешнего интерфейса. Интерфейсные фреймворки в основном сосредоточены на трех основных областях дизайна: CSS, HTML и JavaScript.

Плюсы и минусы

  • Существует большая дилемма, какую структуру использовать. Если тот, который вы выбрали, для вас нов, то вам нужно научиться реализовывать его с помощью кода. Это увеличивает сроки реализации проекта.
  • Известно, что фреймворки сокращают объем кода на странице. Но они могут усложнить ваш проект, если у вас меньше знаний о синтаксисе и о том, как фреймворк работает в приложении.
  • Если обратить внимание на другую сторону медали, на рынке доступно множество фреймворков. Таким образом, сложно изучить каждый из них, а затем внедрить их в процесс проектирования.
  • Очевидно, что фреймворки сокращают объем кода, который необходимо использовать на веб-сайте. Параллельно с этим время кодирования также сведется к минимуму, если вы используете их надлежащим образом.
  • При эффективном использовании фреймворки могут повысить эффективность и, в свою очередь, упреждающе улучшить дизайн.

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

Использование различных типов макетов для преобразования PSD в HTML

Перед началом процесса преобразования необходимо определить макет. Обычно у вас есть 4 основных типа макета на выбор —

Адаптивный

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

Только для мобильных устройств

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

Фиксированный

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

Fluid

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

Перед началом преобразования важно проанализировать реальную структуру ваших веб-страниц.

В частности, они содержат разные компоненты-

Логотип

Как правило, вы можете разместить логотип в заголовке веб-страницы.

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

Body

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

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

Пошаговый процесс: как преобразовать PSD в HTML-код?

После того, как ваш PSD будет готов, вы можете перейти к следующему шагу — преобразованию PSD в HTML. Мы разбили процесс на несколько простых шагов. Вы можете выполнить эти шаги один за другим, чтобы преобразовать документы Photoshop в код HTML/CSS.

Когда вы готовы с проектами в формате PSD, пришло время выполнить преобразование, выполнив следующие шаги:

1. Разрежьте PSD

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

Для нарезки изображения можно использовать несколько инструментов для нарезки, доступных в Photoshop. Можно использовать различные параметры нарезки, а именно:

  • Обычный
  • Фиксированный размер
  • Фиксированное соотношение сторон
  • Нарезки из направляющих

Интернет меню. Эти изображения можно поместить в каталог «images».

2. Создание каталогов

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

  • Основная папка с названием веб-сайта
  • Папка с именем «Изображения» в основной папке для хранения всех изображений, которые вы будете делать позже на сайте
  • Папка с именем «Стили» для файлов CSS или таблиц стилей в главная папка

3. Запись HTML

После создания необходимых папок пришло время создать HTML-страницу. Вы можете использовать конструкторы HTML-страниц, такие как Adobe Dreamweaver, и другие варианты, такие как Komposer или Amaya. Желательно создать новый файл в Dreamweaver как index.html и сохранить его в основной папке.

В HTML5 код легко разбивать на разделы, начиная сверху вниз-

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

4. Создание файлов стилей

Когда вы получаете HTML-оболочку, лучше поместить некоторые стили в CSS. С такой платформой, как BootStrap, существует широкий спектр стилей. Его можно дополнительно сформировать с помощью персонализации так, как вы хотите.

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

Вы можете подключить таблицу стилей CSS к странице HTML.

Читайте также: PSD в HTML мертв: миф это или правда?

5. Создание набора веб-дизайна

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

6. ​​Разрешить взаимодействие с JavaScript

Когда вы закончите с оболочкой HTML и CSS, вы должны принять во внимание JavaScript. Он использует jQuery и связанные с ним фреймворки, такие как react.js и vue.js. jQuery — это библиотека, которая упорядочивает DOM и добавляет дополнительные функции для создания динамических макетов.

Это упрощает кодирование динамического внешнего интерфейса по сравнению с необработанным JavaScript. Аналогично, две перечисленные платформы позволяют легко связывать элементы HTML с данными и функциями JavaScript.

Еще одно популярное имя в списке фреймворков — AngularJS. Это позволяет вам использовать стили MVC, чтобы вы могли динамически устанавливать данные в своих макетах HTML.

7. Сделайте его адаптивным

Для эффективного преобразования PSD в адаптивный HTML полезно использовать различные фреймворки, такие как Twitter Bootstrap, Less, Foundation и Fluid Baseline Grid. Медиа-запросы CSS хорошо работают при добавлении адаптивной функции в дизайн.

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

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

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

Использование интерфейсного фреймворка может дать много преимуществ при преобразовании PSD, Sketch, Figma, Zeplin или любого другого файла дизайна в HTML. Фронтенд-фреймворки могут упростить написание кода, поскольку они поставляются с готовыми компонентами и функциями.

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

Ниже перечислены преимущества интерфейсных сред:

  • Более быстрое время разработки
  • Кодирование на основе компонентов
  • Уменьшенная длина кода
  • Сопровождаемость
  • Быстрое тестирование и развертывание

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

Ниже приведены основные фреймворки CSS/интерфейсные фреймворки преобразования PSD в HTML, которые можно использовать для преобразования кода PSD в HTML.

Bootstrap

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

Предотвращает повторение в нескольких проектах. Более того, Bootstrap предлагает множество повторно используемых кодов на JavaScript, HTML и CSS. Это хорошо для создания адаптивных веб-сайтов, которые могут адаптироваться к разным размерам экрана. Фреймворк очень полезен для срочных проектов веб-разработки.

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

Tailwind CSS

Еще один полезный интерфейсный фреймворк, который вы можете выбрать для своего проекта PSD в HTML/CSS, — это Tailwind. Он стал популярной структурой CSS для разработки привлекательных веб-сайтов и веб-приложений. Его можно использовать для создания отзывчивых и интуитивно понятных веб-интерфейсов.

Tailwind CSS позиционируется как ориентированная на утилиты среда CSS, загруженная множеством полезных классов, включая text-center, pt-4, flex и другие. Это упрощает написание и поддержку кода для вашего веб-сайта или веб-приложения. Используя служебные классы, предлагаемые этой структурой, вы можете избавиться от необходимости создавать собственный CSS.

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

Zurb Foundation

Это также популярный интерфейсный фреймворк с множеством преимуществ, которые вы можете использовать для своего проекта преобразования PSD в HTML. Фреймворк предлагает набор кода JavaScript, HTML и CSS, а также хорошие шаблоны дизайна для разработки привлекательных веб-приложений и веб-сайтов.

Он подходит для разработки мобильных веб-сайтов и веб-приложений, которые можно настроить в соответствии с вашими потребностями. Как бесплатный набор инструментов, его можно легко использовать для различных проектов, и он предлагает конструкции макета на основе HTML и CSS.

Лучшая часть Zurb Foundation заключается в том, что он объединяет глобальные CSS, общие элементы и плагины jQuery в единую структуру. Это несколько платформ, которые вы можете использовать для своего проекта разработки интерфейса. Кроме того, вы проверяете полный список лучших интерфейсных фреймворков с подробной информацией, чтобы выбрать правильный.

Сколько стоит преобразование PSD в HTML?

Не существует стандарта для определения стоимости преобразования PSD в HTML, поскольку она зависит от множества факторов. Таким образом, каждый поставщик услуг определяет стоимость в зависимости от факторов, которые на нее влияют. Тем не менее, они могут предоставить вам быструю оценку вероятной стоимости процесса. Ниже приведены ключевые факторы для определения стоимости преобразования файлов Photoshop в формат HTML:

  • Количество веб-страниц. Каждый веб-сайт имеет определенное количество веб-страниц в зависимости от потребностей владельца веб-сайта. Количество веб-страниц, которые вы хотите создать, влияет на стоимость процесса преобразования.
  • Характер веб-сайта: Рыночная ниша также важна для определения стоимости. Например, если конверсия предназначена для домена электронной коммерции, стоимость будет выше, чем для основных бизнес-сайтов.
  • Уровень сложности: уровень сложности кода на основе PSD-файла также является фактором, определяющим стоимость. Более сложный PSD приведет к сложному коду HTML, который будет стоить дороже.
  • Срок выполнения: Крайний срок проекта может повлиять на стоимость преобразования. Чем меньше время обработки, тем выше стоимость конверсии.

Суммировать

Итак, когда вы читали все вышеперечисленные шаги, вы столкнулись с несколькими техническими понятиями. Вам нужно позаботиться о каждой концепции преобразования PSD в HTML. Вам может не понадобиться все точно так, как показано выше. Главный девиз – выполнить процесс как можно быстрее. Это приводит нас к созданию базового HTML, необходимого для простых страниц. При этом мы хотим провести вас через весь процесс преобразования. Вы можете связаться с нами для любых отзывов, предложений или запросов.

Насколько полезен был этот пост?

Нажмите на звездочку, чтобы оценить!

Средняя оценка 2. 6 / 5. Всего голосов: 15

Голосов пока нет! Будьте первым, кто оценит этот пост.

PSD в HTML — глупый способ сделать веб-сайт (лучший способ? ручка и бумага) | Итан Райан

6 минут чтения

·

22 сентября 2017 г.

Файл данных Photoshop нарезан и преобразован в HTML и CSS

Интервью прошло хорошо.

Мне понравилось беседовать со своими интервьюерами о том, что их компания предлагает своим клиентам и с какими проблемами сталкивается их команда инженеров.

Интервью больше походило на разговор. У меня было столько же вопросов к ним, сколько и у них ко мне. Мы посмеялись. Я провел экскурсию по их офису, который показался мне потрясающим рабочим местом. Люди выглядели занятыми и счастливыми. Я мог представить себя там работающим. Дела шли хорошо.

Затем я получил вызов кода.

«Учитывая, что большинство наших проектов будут связаны со сборкой/управлением WordPress, как бы вы отнеслись к превращению PSD в WordPress в качестве домашнего задания — чего-то очень простого, что можно было бы сделать быстро?»

«Вызов кода не проблема», — ответил я. — Я могу начать это сегодня.

Он прислал мне PSD.

Я начал гуглить «конвертировать PSD в HTML» и «конвертировать PSD в WordPress».

Я начал читать о нарезке слоев в Photoshop и понял, что мне нужен Photoshop, чтобы действительно что-то сделать с этим PSD-файлом.

В интервью мы говорили о HTML, CSS и Javascript, а также о jQuery и React, а также о WordPress и PHP, с которыми у меня был небольшой опыт, хотя я больше работал с Ruby и Ruby. на рельсах. Но мы не говорили о фотошопе, с которым у меня было очень мало опыта.

Возможно, люди просто предполагают, что у всех есть опыт работы с Photoshop, как у всех есть опыт работы с Microsoft Word и Excel. Вероятно, это безопасное предположение. Но я не очень дизайнер. Однажды я сделал каркасы с Balsamiq, когда консультировал стартап, но для своих собственных приложений и веб-сайтов я всегда полагался на проверенный и надежный метод ручки и бумаги.

pen-and-paper.jpg

К счастью, Adobe предлагает 7-дневную бесплатную пробную версию Photoshop.

Мой опыт работы с PHP был ограничен, и хотя несколько лет назад мне нравился WordPress, потому что он предлагал приятный интерфейс для нетехнических людей, желающих создать веб-сайт, глядя на него сейчас, после создания нескольких веб-сайтов с нуля, все казалось таким раздутый кодом. Разве я не могу просто использовать Bootstrap?

Самой большой проблемой для меня был Photoshop. Я не знал, что, черт возьми, я делаю. Все эти слои. Все эти инструменты для сортировки находятся в левой части экрана. Кто так делает сайты?

Мне потребовалось несколько дней, много головоломок и гугления, чтобы воссоздать PSD в WordPress.

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

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

В любом случае, вернемся к моему более раннему вопросу «Кто делает такие веб-сайты?»

Я нашел хороший пост в блоге Treehouse под названием «PSD to HTML is Dead», в котором, как мне кажется, есть несколько хороших моментов:

  1. PSD в HTML — это рабочий процесс, который выглядит следующим образом:
    * создайте макет в Photoshop того, что вы хотите ваш сайт будет выглядеть как
    * используйте инструмент среза, чтобы разделить изображения сайта
    * напишите HTML и CSS, которые включают изображения, чтобы воссоздать «точную до пикселя» копию макета Photoshop
  2. Когда-то рабочий процесс PSD в HTML имел смысл, потому что браузеры не поддерживали все функции современного CSS, поэтому дизайнерам приходилось делать с изображениями такие вещи, как создание теней и скругленных углов, а разработчики затем использовали эти изображения на веб-сайтах. Кроме того, Интернет был доступен только в настольных браузерах, поэтому никому не приходилось беспокоиться о том, каким будет сайт на телефоне или iPad.
  3. Но в наши дни люди просматривают веб-сайты с iPhone, iWatches, iGlasses или чего-то еще, так что «пиксельное совершенство» Photoshop не имеет значения. Сайты теперь отзывчивые. Сайты выглядят по-разному на разных устройствах и должны хорошо выглядеть на всех устройствах. Если вы дизайнер, предоставьте разработчику все графические ресурсы заранее, а не PSD, чтобы они могли их нарезать. Затем позвольте разработчику сходить с ума, стилизуя изображения с помощью CSS и заставляя их правильно масштабироваться в браузерах на устройствах разного размера.

в наши дни люди просматривают веб-сайты на iPhone, iWatches, iGlasses или на чем-то еще

Цитируя это сообщение в блоге 99designs: «Отзывчивый веб-дизайн адаптирует контент к экрану устройства. … Гибкие сетки основаны на разработке макета веб-сайта на процентных значениях, а не на заданных пикселях».

Кое-что, что я узнал о себе, это то, что я испытываю сильные чувства к вещам, о которых я понятия не имел, что у меня есть сильные чувства. Я увижу glorp в первый раз и скажу: «Мне не нравится glorp! Глорп тупой! А потом через неделю скажу: «Я люблю glorp! Глорп лучший!» Я непостоянный огурец. Ммм, огурчики.

perfection — это поиск в Google

Мне не нравится термин «pixel perfect». В последнее время я встречаю этот термин в объявлениях о вакансиях, и каждый раз, когда я его вижу, я думаю, что это «отвратительно». Но я предвзят. Я вообще не люблю совершенства. Совершенство — враг хорошего. Это цитата или неверная цитата кого-то. Я этого не придумал. Но я полностью с этим согласен. Мне нравится стремиться к величию, но я также предпочитаю практичность идеализму. Иногда хорошее лучше, чем лучшее.

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

Эта статья «От PSD к HTML мертва» заканчивается рассказом о том, почему Photoshop по-прежнему важен для веб-дизайна, который я процитирую здесь в большом отрывке: средство коммуникации при работе с клиентами веб-дизайна.

No related posts.