Содержание

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

Совсем недавно я на блоге рассказывал как в 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;
 }

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

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

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

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

Сверстать сайт с psd макета на Tilda • freelance job for a specialist • category Web programming ≡ Client Artyom Jambazi

Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską weкrsję?

Tak

3 of 3

closed without completion

  1. publication

  2. open for proposals

  3. closed without completion


Приветствую!

Есть PSD макет данного дизайна (пк и моб версия) Ссылка на Behance

Нужно сверстать на Tilde. Все изображение, иконки, шрифты, ui элементы имеются.

Желательно на zero блоках с адаптивностью.

  • Proposals 18
  • Declined 6

date online rating cost time to complete


  1. proposal concealed by freelancer

  2. proposal concealed by freelancer

  3. 10 days10 200 UAH

    10 days10 200 UAH

    Добрый день.
    Реализую задачу на тильда, есть вопросы по некоторым блокам.

  4. 7 days3300 UAH

    7 days3300 UAH

    Приветствую, Артём !
    Сверстаю этот проект качественно, есть больший опыт в лендингах
    Обращайся в лс

  5. 7 days3500 UAH

    7 days3500 UAH

    Здравствуйте.
    Готов взяться за выполнение вашего задания.
    Мой стек технологий: HTML5, CSS3, SCSS, FlexBox, Grid, JS, PHP, Адаптивная верстка, Bootstrap, WordPress.
    Пример моей работы http://pkv-sheb.ru/DesignRepairCompany/ (ссылка на GitHub https://github.com/pkv1979/DesignRepairCompany).

  6. 7 days2000 UAH

    7 days2000 UAH

    Доброго времени суток
    Имеется большой опыт в работе с разными конструкторами, в том числе Tilda
    Выполню верстку на зероблоках с полным адаптивом
    С моими работами вы можете ознакомится у меня в профиле
    Буду рад сотрудничеству с:

  7. 3 days3500 UAH

    3 days3500 UAH

    Предлагаю лучше на ВП сделать. Если Тильда для экономии бюджета, то вы ошибаетесь

  8. 7 days2000 UAH

    7 days2000 UAH

    Сделаю всё быстро и качественно. Всегда на связи и любые правки буду исполнять вовремя. Можем обсудить в личке или тг. Жду от Вас ответа и по концовке работы позитивный отзыв Портфолио: https://cyrkan.github.io/modern_portfolio/

  9. 3 days2500 UAH

    3 days2500 UAH

    Здравствуйте, мои работы по ссылке:
    Behance
    Буду рад сотрудничеству с Вами.

  10.  freelancer isn’t working in the service any longer

  11. 2 days3000 UAH

    2 days3000 UAH

    Артем, здравствуйте!)

    Прочитал ваше задание и предлагаю вам свои услуги.

    Я занимаюсь разработкой сайтов под ключ.
    Готов максимально качественно и адаптивно сверстать и натянуть ваш макет.

    Вот несколько из примеров моих работ:

    … https://unitedesign.pro
    https://unitedesign.pro/p/stomat/
    http://bigduck.com.ua/
    http://volmage.com/
    http://ods.in.ua/
    https://newflatmoscow.ru/
    https://um-d.ru/
    http://www.lemberglogistic.com/
    http://predator-pod.ru/
    https://escaleraspb.ru/
    https://globe-agency.ru
    http://kattana.trade/
    https://nwgroup.kz/

    Мои отзывы: Freelancehunt

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

    Давайте все обсудим)

  12. 10 days6000 UAH

    10 days6000 UAH

    Здравствуйте, Артём. Верстала подобный дизайн на Tilde, с адаптивом и на zero блоках. Вот ссылка на сам сайт https://sevines.com/ Вот ссылка на мое портфолио Behance Если будет нужно, впишу HTML код для разной анимации. Давайте обсудим детали в личных?

  13. proposal concealed by freelancer

  14. 5 days3000 UAH

    5 days3000 UAH

    Здравствуйте !

    Обращайтесь в личку — обсудим детали. Работаю качественно и оперативно !

    Мой Портфолио: Behance

    С уважением, фрилансер
    Чиприан

  15. proposal concealed by freelancer

  16. 7 days6500 UAH

    7 days6500 UAH

    Артём, здравствуйте:)
    С тильдой работаю давно, отлично знаю функционал платформы. Являюсь UX/UI дизайнером, проектирую и рисую дизайн под Тильду, отлично знаю какие инструменты применить для создания качественного продукта на данной платформе, есть много успешных проектов реализованных на Тильде, работал с популярным украинским брендом https://oceanshoes.com.ua/women
    Хотелось бы уточнить детали проекта в личных сообщениях)
    Мое портфолио:
    Freelancehunt
    Behance (интернет-магазин для популярного украинского бренда одежды и обуви)
    Буду рад сотрудничеству, жду любой обратной связи😊

  17. 10 days3000 UAH

    10 days3000 UAH

    Добрый день!
    Одностраничный сайт у меня стоит 3000 грн, могу взять ваш проект в работу, срок выполнения до 10 дней. форма заявки с уведомлением в телеграмм подключу вам как бонус.
    Работаю на тильде уже более 3х лет.
    Свои работы отправлю по запросу заказчика.

  18. 6 days3000 UAH

    6 days3000 UAH

    Здравствуйте, вхожу в топ 150 создателей сайтов на фрилансханте.
    Опыт работы с Тильдой более 3-х лет. Работа через сейф.
    Легко выполню любую задачу, связанную с Тильдой))

    Примеры моих работ и отзывы можно найти тут Freelancehunt
    По требованию могу предоставить больше работ.
    P.S. Буду рад поработать с Вами)

  1. 7 days10 000 UAH

    7 days10 000 UAH

    Добрый день, посмотрела макет. Готова сделать вам оностраничник на тильде
    На связи 24/7

  2. 6 days3600 UAH

    6 days3600 UAH

    Доброго дня, готовий обсудити співпрацю) Досвід роботи з версткою 5+. Із технологій:
    — HTML
    — CSS3
    -SCSS
    -BOOTSTRAP
    — JavaScript (jQuery, Vue, wow.js)
    — Gulp
    — Photoshop
    — Figma
    … — WP
    — Tilda

    Буду радий співпраці

  3.  freelancer isn’t working in the service any longer

  4. 7 days26 500 UAH

    7 days26 500 UAH

    Здравствуйте!
    У Вас есть техническое задание? Какой дедлайн?
    Жду Вашего ответа!

  5.  freelancer isn’t working in the service any longer

  6. 3 days1900 UAH

    3 days1900 UAH

    Здравствуйте!
    Огромный опыт работы с Тильдой!
    Приступить к работе готов прямо сейчас!
    Мое огромное портфолио можно взглянуть в профиле.


9 months 11 days ago

241 views

  • верстка
  • адаптивная верстка
  • tilda
  • сайты на tilda
  • создание сайтов на tilda.cc
  • верстка сайтов на tilda
  • верстка на Tilda
  • дизайнер Tilda

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

Файл данных 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, iGlasse или на чем-то еще

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

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

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

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

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

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

И номер 2:

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

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

Независимо от того, получу ли я эту работу или нет, на этой неделе я узнал кое-что полезное:

— PSD в HTML — когда-то и до сих пор популярный рабочий процесс веб-дизайна и веб-разработки

— Меня не очень волнует PSD в HTML рабочий процесс

— Я непостоянный огурчик. У меня есть твердое мнение о вещах, о которых я даже не подозревал, что у меня есть мнение, и эти мнения могут легко измениться. Возможно, через неделю мне понравится рабочий процесс PSD в HTML. Неделю назад я даже не знал, что такое PSD в HTML. Люди странные и глупые существа, не так ли?

Спасибо за внимание! Теперь выйдите на улицу и обнимите дерево.

Hugatree

Пока.

Создание макета сайта в Photoshop – 50 пошаговых руководств

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

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

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

  • 40 руководств по Photoshop для разработчиков;
  • 31 бесплатный набор пользовательского интерфейса;
  • 100 бесплатных шрифтов;
  • 30 бесплатных тонких и легких шрифтов.

Макет портфолио в стиле Windows 8

Дизайн элегантного макета блога в Photoshop

Дизайн сайта портфолио в Photoshop

Дизайн стильной страницы портфолио с временной шкалой с помощью Photoshop

Дизайн макета микроблога Code Ready

Дизайн чистого макета корпоративного веб-сайта

Создание портфолио в стиле FabricTextured Web с использованием Photoshop

    02 Макет

    Создание шероховатого полупрозрачного веб-портфолио Дизайн

    Дизайн чистого интерфейса веб-сайта электронной коммерции в Photoshop

    Как создать профессиональный веб-макет в Photoshop

    Создать чистый и красочный макет электронной коммерции в Photoshop

    Создать современный и потрясающий веб-макет

    909003

    Как создать расширенный макет хостинга

    Как создать бизнес-шаблон в Photoshop

    Научитесь создавать игровой макет в Photoshop

    Design Профессиональный макет блога в Photoshop

    Design Grunge WordPress Тема

    Дизайн веб -сайта на открытом воздухе в Photoshop

    Создайте элегантный папорт -дизайн в блоге Photoshop

    .

    No related posts.