Создание сайта из макета Photoshop

В первой части статьи мы шаг за шагом изучим как создание удивительных сайтов в Photoshop.

Во второй части мы научимся переносу PSD в чистый, рабочий XHTML/CSS код.

Рабочий пример сайта

Если пройти по ссылке то можно ознакомиться с результатом.

Создание сайта из макета Photoshop

Установка необходимых файлов

1 Создаем папку куда помещаем все необходимые файлы; Я назвал папку sixrevisionsband. Внутри создадим еще одну папку и назовем images; она будет содержать изображения, включая фон CSS.

Создание сайта из макета Photoshop

2 Теперь откроем наш любимый текстовый редактор (например Coda.) Создадим новый HTML файл в корневой папке и назовем его index.html — это будет шаблон главной страницы. Я люблю хранить все мои стили в одной папке, в случае, если мне нужно использовать несколько различных стилей. Таким образом все они аккуратно хранятся вместе. Добавим папку с именем css, и создадим CSS файл внутри нее с именем screen.css. screen.css будет главной таблицей стилей нашего шаблона.

Я начинаю написание HTML с добавления необходимых заголовков и подключения стилей:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<title>Six Revisions Band Website</title>
</head>
<body>

</body>
</html>

Создание сайта из макета Photoshop

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

/***** Global Settings *****/

html, body {
  border:0;
  margin:0;
  padding:0;
}

body {
  font:.9em/1.3em arial, helvetica, sans-serif;
  color:#403d3d;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
  font-weight:normal;
}

h1 {
  padding:30px 0 25px 0;
  letter-spacing:-1px;
  font:2em arial, helvetica, sans-serif;
}

h2 {
  padding:20px 0;
  letter-spacing:-1px;
  font:1.5em arial, helvetica, sans-serif;
}

h3 {
  font:1em arial, helvetica, sans-serif;
  font-weight:bold;
  padding:5px 0 10px 0;
}

p, ul, ol {
  margin:0;
  padding:0 0 18px 0;
}

ul, ol {
  list-style:disc;
  padding:0 0 18px 40px;
}

img {
  border:0;
  margin: 0 0 5px 0;
}

/***** Links *****/

a, a:visited {
  text-decoration:underline;
  color:#403d3d;
}

a:hover {
  text-decoration: none;
}

/***** Wrapper *****/

/***** Header Area *****/

/***** Homepage Content *****/

/***** Footer *****/

/***** Global Classes *****/

.clear { clear:both; }

Начнем с фона (в Photoshop)

3 Я решил начать с фона и постепенно послойно продвигаться ближе к экрану. Если вы скачали исходный файл, то заметите, что объекты в нем разбиты по папкам header, home, footer, и back. Это облегчает процесс разработки.

Если вы хотите, то можете выключить ненужные элементы и оставить только необходимые:

Создание сайта из макета Photoshop

4 Если необходимо, измените размер холста (Image > Canvas Size) до 1600px в ширину, таким образом фон займет всю ширину широкоформатного экрана. Как только мы это сделаем, мы видим, что сетка текстуры имеет резкие линии, от которых нам нужно избавиться.

Создание сайта из макета Photoshop

5 Создадим маску слоя. Выберем слой с сетчатой структурой с нажатой клавишей Cmd/Ctrl кликнув по иконке слоя в панели слоев.

6 Затем создадим маску слоя, нажав на кнопку Добавить маску слоя в нижней части панели слоев.

7 Выберем большую мягкую круглую кисть, типа Мягкая круглая 300 и изменим прозрачность и силу до 50%. Убедимся что цвет переднего плана меняется на черный (нажатием клавиши D для быстрого переключения). Мягко мажем кистью пока резкие линии не пропадут. Фон должен стать таким как на картинке ниже:

Создание сайта из макета Photoshop

5 Наш фон готов. Сохраним его File > Save for Web & Devices. Можно поэкспериментировать и найти наилучшие параметры для изображения при оптимальном размере файла. Для нашего фона выберем JPG 40%. При этом получим небольшой файл и приемлемое качество изображения. Сохраним его в папке изображений как background.jpg.

Добавление фона в web дизайне

6 Для того чтобы добавить фон, используем фоновые атрибуты CSS элемента body. Объявление стиля ниже показывает что фон не повторяется, находится по середине, на верхнем слое и, когда изображение заканчивается, то переходит в коричневый цвет #d5d4c2.

body {
  background: url(../images/background.jpg) no-repeat top center #d5d4c2;
}

Далее, убедимся что все другие наши объекты сосредоточены по центру 960-пиксельного (в ширину) контейнер. Добавим div в HTML:

<div id="wrap"></div>

Добавим некоторые стили для его центровки:

#wrap {
  width:960px;
  margin:0 auto;
}

Логотип сайта

7 Включим обратно все слои для того чтобы посмотреть что делать дальше. Мне нравиться кодить в том порядке, в котором элементы будут находится в HTML коде, поэтому логотип — следующий. Добавим несколько направляющих вокруг логотипа чтобы сделать все точно и обрежем точно по ним. Сохраним как JPG 40% качеством.

Создание сайта из макета Photoshop

8 Теперь добавим логотип в тег h1, который подскажет поисковым машинам, что это важный элемент на нашей странице. Теперь добавим внутрь тег ссылки на главную страницу.

<div id="logo"><h1><a href="index.html">Six Revisions</a></h1></div>

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

Теперь добавим фон в таблицы стилей. Нужно выровнять его по левому краю, т.к. вся навигация будет выровнена по правому краю. См. CSS ниже:

#logo h1 {
  float:left;
  display:block;
  padding:21px 0 0 23px;
  text-indent:-2000px;
  margin: 0;
}

#logo h1 a {
  width:293px;
  height:100px;
  display:block;
  background:url(../images/logo.jpg) no-repeat;
}

Навигация сайта

Создание сайта из макета Photoshop

9 Перейдем к навигации. Для начала вырежем фон активного элемента меню шириной 1px и 110px в высоту. сохраним как PNG-24. Прозрачность будет работать везде кроме Internet Explorer 6 и ниже. Но в нем это будет выглядеть просто как серый фон — так что все в порядке.

В качестве небольшого замечания: мои сайты работают и в Internet Explorer, но как я знаю IE6 имеет ряд проблем с отображением. Например он не поддерживает некоторые форматы изображений (PNG-24) и не правильно интерпретирует некоторые стили CSS. Существуют способы чтобы обойти эти проблемы, но как показывает статистика использования браузеров школы w3 на Октябрь 2009, только 10.6% пользователей сети использовали IE6 и их число быстро сокращается. Таким образом не смотря на то что серый фон менее стильный как прозрачный PNG-24, но он все же работает в IE6. Двигаемся дальше.

Мы будем использовать простой неупорядоченный список и наш HTML будет выглядеть следующим образом:

<div id="navigation">
  <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Songs</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Tours & Events</a></li>
  </ul>
</div>

Стили и их разбиение показано ниже:

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

#navigation li a {
  padding: 64px 14px 33px 14px;
}

#navigation li a:hover {
  background: url(../images/hover.png) repeat-x;
}

Выровняем навигацию по правому краю. Добавим некоторые стили чтобы получить верхний регистр текста, сделать его жирным и размером 1.1em. Так же изменим цвет ссылок на #706752 и скажем им что не нужны никакие подчеркивания при наведении.

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

Вернемся к нашему неупорядоченному списку. Для начала уберем все стили, и обнулим padding и margin, и добавим выравнивание по правому краю для корректного размещения.

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

Далее сдвинем li влево чтобы ссылки находились плотнее друг к другу, т.к. по умолчанию размещение идет по вертикали. Если сместить li вправо, то ссылки будут перечисляться в обратном направлении. Затем добавим, padding top и bottom для li с #navigation li чтобы получить ссылки в нужном месте.

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

В этом случае отступы padding li со всех сторон показывают изменение высоты при наведении.

#navigation li a {
padding: 64px 14px 33px 14px;
}

И, наконец, мы добавим фон для выделенной области, который будет повторяться по горизонтали.

#navigation li a:hover {
background: url(../images/hover.png) repeat-x;
}

Область содержимого

Создание сайта из макета Photoshop

10 Вернемся к области контента. В Photoshop, отключим следующие группы:home и footer, оставим фон и header включенными. добавим направляющие для верхней и нижней части контента чтобы решить где лучше обрезать их. я думаю что 960 pix в ширину и 710 pix в высоту то что надо. Обрежем и сохраним в нашу папку. И снова в JPG 40%.

Заполним это пространство следующим тегом:

<br />

Далее добавим div с вызовом #contentarea для области контента, затем и стиль для него. Здесь применим небольшую хитрость, т.к. IE6 не распознает min-height, добавим две линии min-height (height и _height) что позволит сообщить IE6 что нам необходим #contentarea div высотой 830px. Так же добавим padding чтобы выравнивать контент в право было проще.

#contentarea {
  background: url(../images/contentarea.jpg) no-repeat top center;
  width: 908px;
  min-height: 684px;
  height: auto;
  _height: 684px;
  margin: 18px 0 0 0;
  padding: 26px 26px 0 26px;
}

11 Далее, область содержимого. Можно разместить здесь слайдер используя слайд шоу jQuery или используя flash компонент. Чтобы не усложнять код данного учебного материала, мы просто заменим анимацию простым изображением.

Вызовем его как #flash:

<div id="flash"><img src="images3/flash.jpg" alt="flash" /></div>

И немного откорректируем размеры и края с помощью CSS:

#flash {
  width: 908px;
  height: 411px;
  margin: 0 0 35px 0;
}

Оставим пространство снизу чтобы было свободное место между #flash div и 3 колонками.

Колонки

12 Теперь вырежем следующую пару фотографий для того чтобы подготовить их для 3 колонок flash контента внизу. Нужно вырезать видео (которое мы эмулируем изображениями) и 6 иконок социальных сетей.

13 Далее напишем HTML для колонок. Тег br tag освободит пространство для подвала, который будет ниже этих колонок.

<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<br />

Этот простой CSS установит колонки на место:

#column1 {
  float: left;
  display: block;
  width: 233px;
  margin: 0 68px 0 0;
}

#column2 {
  float: left;
  display: block;
  width: 335px;
  margin: 0;
}

#column3 {
  float: right;
  display: block;
  width: 207px;
  margin: 0;
}

14 Добавим контент в первую колонку и наш html будет выглядеть следующим образом:

<div id="column1">
  <h3>Latest Videos</h3>
  <p><img src="images3/video.jpg" alt="video" /><br />
  <a href="#">Another video to watch here</a><br />
  <a href="#">And yet another video here</a></p>
</div>

15 Для статей блога в колонке 2, я могу использовать простую вставку текста или php script для вызова 3 последних статей, но для обучения нам достаточно пары простых статичных HTML в две колонки:

<div id="column2">
  <h3>Six Revisions blog</h3>
  <p><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a><br />
			Nunc eu mi risus, nec luctus justo.[...]</p>
  <p><a href="#">Bibendum est eu gravida cras dui sem</a><br />
			Venenatis a egestas id, consectetur faucibus nibh.[...]</p>
  <p><a href="#">Aliquam arcu nisi, sagittis at feugiat quis</a><br />
			Accumsan ut metus. Mauris rhoncus[...]</p>
</div>

16 Третья колонка будет использовать неупорядоченные списки, чтобы получить отступы без использования дополнительных div. Наш HTML код ниже:

<div id="column3">
  <h3>Connect with us</h3>
  <ul>
    <li><a href="#"><img src="images3/facebook.png" alt="facebook" /></a></li>
    <li><a href="#"><img src="images3/myspace.png" alt="myspace" /></a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="images3/twitter.png" alt="twitter" /></a></li>
    <li><a href="#"><img src="images3/linkedin.png" alt="linked in" /></a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="images3/flickr.png" alt="flickr" /></a></li>
    <li><a href="#"><img src="images3/rss.png" alt="rss" /></a></li>
  </ul>
</div>

Так же добавим CSS для контроля списка:

#column3 ul {
  list-style: none;
}

#column3 li {
  float: left;
  display: block;
  padding: 0 27px 10px 0;
}

Финал: подвал

17 Почти все готово! переходим к финальной части, к подвалу. Добавим простой HTML:

<div id="footer">
  copy; 2009 Six Revisions Band  |  <a href="#">contact us</a>
</div>

И CSS так же прост и хорош. Линия была добавлена шириной 6px и мне необходимо некоторое пространство над ней (которое мы получим с помощью margin) и некоторое пространство под ней над текстом (которое мы получим с помощью padding). Так же нам необходимо некоторое пространство под текстом над краем окна браузера, которое мы получим с помощью padding. Размер шрифта сделаем немного меньше чем у другого контента. Сделаем его .9em.

#footer {
  width: 960px;
  border-top: 6px solid #c4c2af;
  padding: 10px 0 30px 0;
  text-align: center;
  margin: 30px 0 0 0;
  font-size: .9em;
}

Все готово!

Создание сайта из макета Photoshop

Спасибо что дочитали до конца. Надеюсь вам пригодятся некоторые трюки по верстке из PSD в XHTML/CSS

Скачать исходные файлы можно здесь