Foxter.ru - Уроки Photoshop: Слайсы - нарезка графики для веб-дизайна

1. Первое условие - у вас уже есть готовый макет для нарезки, скажем такой -

==================================

2. Теперь берём Slice tool -

, именно при помощи него мы и будем нарезать наш макет

==================================

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

==================================

4. Теперь нарезаем меню. Первый слайс заканчиваем чуть-чуть не доходя кнопки "Home". Потом нарезаем все кнопки как показано на рисунке. Затем щёлкните правой кнопкой мыши по слайсу "Home", выберите Edit Slice Options (Редактировать свойства) и заполните это окошко как у меня.

После этого отредактируйте свойства остальных слайсов, меняя при этом адрес ссылки - для кнопки About в поле URL прописываем about.html и т.д.

==================================

5. Теперь нарезаем контент-часть нашего макета. Сначала выделите часть вверху центрального блока -

Затем выделите ещё три части, как показано на рисунке -

Теперь выделяем центральный блок -

Ещё выделим нижнюю часть центрально блока, оставив при этом небольшой зазор в самом низу макета

И, наконец, выделим и этот зазор -

==================================

6. Сохраняем нарезанный макет для последующего html-кодинга :)
File > Save for Web (Файл > Сохранить для Веб), в этом окне мы можем указать конечный формат графики и степень ужатия.

Далее жмём Save (Сохранить), в этом диалоговом окне указываем название файла (index.html), тип файла - HTML and images и в строке Slices (Слайсы) выставляем All Slices (Все слайсы). Жмём ОК! :D

==================================

Теперь мы переходим к работе с кодом. Знание HTML в данном случае безусловно необходимо!

7. Первые строки нашего кода такие -

Код HTML:

<table id="Table_01" width="750" height="401" border="0" cellpadding="0" cellspacing="0">

<tr>

<td colspan="11"><img src="images/index_01.gif" width="750" height="151" alt=""></td>

</tr>

Меняем их на такой код. (если вы сделали фон макета другим цветом, то, соответственно измените атрибут bgcolor

Код HTML:

<table width="750" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td valign="top" background="images/index_17.gif"><table width="750" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td colspan="11"><img src="images/index_01.gif" width="750" height="151" alt=""></td>

</tr>

8. Теперь чуть ниже найдите такие строчки кода -

Код HTML:

<td><img src="images/index_12.gif" width="81" height="40" alt=""></td>

<td colspan="9"><img src="images/index_13.gif" width="588" height="40" alt=""></td>

<td><img src="images/index_14.gif" width="81" height="40" alt=""></td>

И измените их на

Код HTML:

<td background="images/index_12.gif">&nbsp;</td>

<td background="images/index_13.gif" colspan="9">

<p>All content goes here</p></td>

<td background="images/index_14.gif">&nbsp;</td>

9. Дальше найдите и удалите

Код HTML:

<tr>

<td colspan="11"><img src="images/index_15.gif" width="750" height="116" alt=""></td>

</tr>

Всё! Мы получили готовый код для нашей странички, теперь он выглядит так -

Код HTML:

<table width="750" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td valign="top" background="images/index_17.gif"><table width="750" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td colspan="11"><img src="images/index_01.gif" width="750" height="151" alt=""></td>

</tr>

<tr>

<td colspan="2"><img src="images/index_02.gif" width="181" height="28" alt=""></td>

<td><a href="index.html"><img src="images/index_03.gif" width="40" height="28" border="0" alt=""></a></td>

<td><a href="about.html"><img src="images/index_04.gif" width="45" height="28" border="0" alt=""></a></td>

<td><a href="portfolio.html"><img src="images/index_05.gif" width="58" height="28" border="0" alt=""></a></td>

<td><a href="tutorials.html"><img src="images/index_06.gif" width="59" height="28" border="0" alt=""></a></td>

<td><a href="affiliates.html"><img src="images/index_07.gif" width="61" height="28" border="0" alt=""></a></td>

<td><a href="resources.html"><img src="images/index_08.gif" width="68" height="28" border="0" alt=""></a></td>

<td><a href="contact.html"><img src="images/index_09.gif" width="50" height="28" border="0" alt=""></a></td>

<td colspan="2"><img src="images/index_10.gif" width="188" height="28" alt=""></td>

</tr>

<tr>

<td colspan="11"><img src="images/index_11.gif" width="750" height="28" alt=""></td>

</tr>

<tr>

<td background="images/index_12.gif">&nbsp;</td>

<td background="images/index_13.gif" colspan="9">

<p>All content goes here.</p></td>

<td background="images/index_14.gif">&nbsp;</td>

</tr>

<tr>

<td colspan="11"><img src="images/index_16.gif" width="750" height="29" alt=""></td>

</tr>

<tr>

<td colspan="11"><img src="images/index_17.gif" width="750" height="8" alt=""></td>

</tr>

<tr>

<td><img src="images/spacer.gif" width="81" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="100" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="40" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="45" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="58" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="59" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="61" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="68" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="50" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="107" height="1" alt=""></td>

<td><img src="images/spacer.gif" width="81" height="1" alt=""></td>

</tr>

</table>

Собственно это всё - простой, но очень эффективный способ, чтобы сохранить время и превратить макет в готовую к работе html-страничку. Конечно, есть ещё такой очень важный вопрос как оптимизация графики, но эта тема будет рассмотрена в другом уроке :)

ЗЫ. Движок форума неадекватно спарсил html-код.
Само собой, двойные кавычки не должны быть экранированы, т.е. перед ними не должен стоять слеш - \

правильно - alt="" и т.д.
неправильно - alt=\"\" и т.д.