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

1. Создадим новый документ в фотошопе размером 1200px на 700px. Заливаем фон цветом #e6f1e7. Далее идем в меню Filter – Noise – Add Noise и устанавливаем значение на 5% при выбранном значении Uniform.

Далее поставим две вертикальные направляющие: одну на значение 120px, вторую на значение 1080px. Таким образом получаем рабочую площадь в 960px.

2. Выбираем инструмент прямоугольного выделения и выделяем прямоугольную область вверху нашего документа шириной 1200px и высотой около 15px. Создаем новый слой под названием ‘Top bar’, переходим на данный слой и заливаем выделенную область цветом #199924. После чего сочетанием клавиш Ctrl+F присваиваем нашему выделенному слою то же значение Noise что и на основном фоне.

3. Из дополнительных материалов откроем в фотошопе pattern.jpg. Открываем Edit – Define Pattern. Нажимаем Ok.

Переходим в наш основной документ, создаем выделение так же как и в прошлый раз 1200px на 15px. Выбираем инструмент заливки, ему выбираем параметр pattern (В левом верхнем углу). Там же выбираем нашу картинку для заливки. Создадим новый слой и назовем его pattern. Перейдем на него и зальем нашу выделенную область. Поменяем непрозрачность(Opacity)на 25%.

4. Создаем надпись «Слайдер». Для этого выбираем инструмент текст. В данном примере использовались следующие параметры: размер 48px, шрифт – Segoe Script (жирный), цвет шрифта #6e6868. Далее применим к тексту эффект: Inner Shadow со следующими параметрами Distance и Size по 2px. И непрозрачность на 45%. У нас должен получиться эффект текста как бы вдавленного в станицу.

5. Теперь создадим вдавленную вертикальную линию. Выбираем инструмент Line Tool и на новом слое рисуем вертикальную линию высотой 30px с цветом #e0e0e0. Копируем данный слой и таким образом получаем вторую точно такую же линию, перемещаем ее на 1px правее первой и меняем ее цвет на #ffffff. После этого можно объединить 2 новых слоя с линиями(сначала растерезируем слои: щелкаем правой кнопкой мыши по каждому слою и выбираем Rasterize Layer, выделяем оба слоя с помощью Shift, щелкаем правой кнопкой мыши и выбираем Merge Layers) и назвaть слой «Разделитель».

6. После разделительной линии завершаем наш логотип надписью «на ваш сайт». В примере использован шрифт – Myriad Pro 18px курсив, цвета #7d7777. Вы можете эксперементировать со шрифтами, их цветами и стилями в зависимости от дизайна вашего сайта и от ваших предпочтений.

7. Создаем навигацию. Инструментом «Текст», используя тот же самый шрифт с теми же самыми параметрами что и в предыдущем шаге напишем названия страничек нашего сайта и поместим слои с текстом в папку «Навигация». Для того, чтобы текст был выровнен используем направляющую. Поставим горизонтальную напраляющую, разделив ею наш логотип примерно пополам, и по этой направляющей выровняем текст навигации. Создаем прямоугольное выделение вокруг первого пункта навигации. Создаем новый слой и заливаем выделение с помощью pattern (выбирая нашу картинку заливки точно так же как и в пункте 3). Присвоим слою непрозрачность в 25%. Новый слой назовем «Activ nav» и расположим его под слоем с первым пунктом навигации. После этого изменим цвет текста активного пункта на #199924. Таким образом мы создали стиль кнопке навигации активной страницы.

8. Приступим к созданию самого слайдера. Создадаим прямоугольное выделение, отступив от логотипа такое расстояние, чтобы он находился где-то примерно посередине между «Top bar» и новым выделением. Прямоугольное выделение должно иметь 960px в ширину и 370px в высоту. Создаем новый слой, назовем его «Slider Bg» и зальем выделение тем же цветом что и «Top bar». Присвоим Noise равный 5% так же как и в шаге 1.

9. Выберите Ваши фотографии для слайдера. Только убедитесь, чтобы их размер был более 1000px x 400px. Откройте их в Photoshop и разблокируйте слои. Далее переходим в наш основной документ и ставим 2 вертикальные направляющие. Каждая будет отстоять от главных вертикальных направляющих на 15px внутрь. Создаем новое прямоугольное выделение шириной равной расстоянию между нашими новыми направляющими и высотой 385px. Таким образом мы создали прямоугольное выделение внутри фона нашего слайдера выше, но уже его. При необходимости выровняйте его таким образом, чтобы оно смотрелось симметрично относительно фона нашего слайдера.

10. Возвращаемся к нашей фотографии для слайдера. Выделяем ее сочетанием клавиш Ctrl+A, идем в Edit – Copy Merged. Возвращаемся на документ со слайдером Edit – Paste Special – Paste Into.

Изображение вставилось. При необходимосте подрегулируйте размер с помощью инструмента «Свободной Трансформации» Ctrl+T. Применим к слою эффект обводки в 1px, цвет: #999999. Назовем слой «Main image».

11. Создаем тень от фотографии. Для этого создадим новый слой с названием «Shadow». На этом слое создаем прямоугольное выделение размером: 945px x 338px. Расположим его примерно по центру и закрасим в черный цвет. Снимаем выделение (Ctrl+D). Далее размоем наш черный прямоугольник по Гаусу. Filter – Blur – Gaussian Blur. Выставляем значение на 7,4 и жмем Ok. Непрозрачность слоя выставляем на 70%.

12. Добавим текстуру полосок под наш слайдер такую же как и под «Top bar». Для этого создаем новый слой и размещаем его под всеми нашими слоями с элементами слайдера. Назовем слой «Strips» и создадим прямоугольное выделение по ширине всего документа и высотой немного выходящей за наш слайдер сверху и снизу. Выбираем инструмент заливки и заливаем выделение с помощью pattern как и в шаге 3. Ставим непрозрачность документа на 25%.

13. Теперь создадим нижнюю тень от картинки. Создаем прямоугольное выделение по ширине всей фотографии и высотой около 45px. Создаем новый слой и называем его «Down shadow». Слой расположим под слоями слайдера. Зальем наше выделение черным цветом. Снимим выделение и сочетанием клавиш Ctrl+T применим трансформацию. Нажимаем правой кнопкой мыши по прямоугольнику и выбираем Perspective. После чего двигаем левую верхнюю точку получившегося выделения к центру. У нас получится трапеция. Опять щелкаем правой кнопкой мыши по прямоугольнику и выбираем Warp. Теперь аккуратно сдвигаем центральные точки немного наверх пока не получится естестненный ровный прогиб. Нажимаем Enter для того, чтобы применить трансформацию. Далее делаем размытие по Гаусу точно так же как и в шаге 11. Но теперь непрозрачность слоя выставляем на 40%. Тень готова. Подрегулируйте ее положение так, чтобы она выглядела выходящей прямо из под фотографии.

14. Дизайн нашей странички закончен.

Теперь нам нужно нарезать изображения для верстки. Создадим на рабочем столе папку под названием images. В нее мы будем сохранять все нарезанные изображения. Теперь вернемся в Фотошоп и скроем все слои, оставив только слои: фона, top bar, pattern и strips. Далее с помощью прямоугольного выделения выделим область от верха до низа страницы, шириной 115px. Идем в Edit – Copy Merged, создаем новый документ(Ctrl+N), вставляем(Ctrl+V) и сохраняем для веб (File – Save for Web) в папку images как bg.jpg.
15. Чтобы выделить наш логотип, скрываем все слои кроме слоя с надписями самого логотипа и разделителем. Далее процедура та же: прямоугольным выделением выделяем область вокруг логотипа и точно так же его сохраняем, но только в формате png-24. У нас получится файл logo.png. Отправляем в ту же папку. По такому же принципу вырежим и сохраним слой activ nav. Slider bg сохраним в формате jpg. Down shadow выделим и сохраним в формате png-24. Убедитесь перед выделением, что слой с фоном скрыт.
Верстка страницы со слайдером
1. Теперь у нас все готово для того, чтобы приступить к этапу верстки нашей странички со слайдером. Откройте Adobe Dreamweaver или другой редактор, подходящий для верстки. Откройте новый HTML5 документ, либо вручную пропишите тип HTML5 документа. Между тегамисоздадим ссылку на таблицу стилей, которую мы будем создавать немного позже. Таблицу стилей назовем style.css. Сохраним документ под именем index.html.

<!DOCTYPE HTML><br />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

2. С помощью тега section создадим внутри тега контейнер и присвоим ему id=”wrapper”. Так мы сможем контролировать ширину нашей страницы.

<body>
<section id="wrapper">
</section>
</body>

3. Сейчас мы используем еще один HTML5 тег: тег хедера. Разместим его внутри нашего контейнера. Внутри него разместим пустой див с id=”logo”. Это позволит нам воздействовать на него через таблицу стилей, которую мы скоро создадим. Это позволит оставаться нашей страничке более легкой.

<header>
<div id="logo"></div>
</header>

4. Внутри тега хедера разместим еще один HTML5 тег – тег навигации. Внутри него, с помощью ненумерованного списка размещаем кнопки навигации. Активной кнопке присвоим class=”current” для того, чтобы ее стиль отличался от остальных.

<nav>
<ul>
<li class="current"><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

5. Теперь после нашего тега с хедером разместим тег section и назовем его slider_wrap, в котором будет распологаться слайдер. Внутри создадим div id=”slider_bg” в нем будет расположен наш зеленый фон слайдера. Далее создадим div id=”shadow”, где и будет тень от слайдера:

<section id="slider_wrap">
<div id="slider_bg">
<div id="shadow"></div>
</div>
</section>

6. Пока мы не перешли к CSS свойствам давайте включим в наш <div id=”slider_bg”> еще один тег <div id=”wow_slider”>. Он будет использоваться для наших картинок, так как их размер больше зеленого фона. Он так же будет содержать наш сгенерированный HTML, который мы позже увидим.

<div id="slider_bg">
<div id="wow_slider">
</div>
<div id="shadow"></div>
</div>

Создаем css стили
1. Создадим новый css-файл с именем ‘style.css’, сохраним его и откроем в нашем редакторе.
Пропишем стили для тегов body wrapper и logo, указывая в качестве бэкграундов вырезанные из дизайна картинки. У меня получился следующий код:

body{
	background:#e7e7e6 url(images/bg.jpg) repeat-x;
	font-family:Verdana, Geneva, sans-serif; font-size:12px;
}
#wrapper{
	width:1000px;
	margin:0 auto;
}
#logo{
	background:url(images/logo.png) no-repeat;
	height:50px;
	width:350px;
	float:left;
	margin:52px 0 0 18px;
}

2. Теперь займемся стилями для навигационной панели. У меня получилось так (если вы делаете свой дизайн отличный от моего, то редактируйте цвета и все остальное так, как подходит Вам):

nav{
	float:right;
	margin-top: 55px;
}
nav li{ list-style:none; font-size:18px; font-family:Myrid Pro; font-weight:600;
float:left; width:80px; height:35px;
margin-left:10px; padding-right:10px;
}
nav li a{
	text-decoration:none;
	color:#7d7777;
	display:block;
	width:80px;
	height:30px;
	text-align:center;
}
nav li a:hover, nav li.current a{
	background:url(images/act_nav.png) no-repeat;
	display:block;
	color:#199924;
}

3. Зададим стили для слайдера:

#slider_wrap{
	float:left;
	height:428px;
	margin-top:50px;
}
#slider_bg{
	background:url(images/sliderBg.jpg) no-repeat;
	width:960px;
	height:367px;
	margin:20px 20px 0 20px;
	float:left;
}

Здесь мы опускаем его на 50px и выравниваем по левой стороне.
4. Wow_slider и тень.
В wow_slider будут располагаться наши картинки. Зададим стили для него и для нашей нижней тени:

#wow_slider{
	width:935px;
	height:388px;
	margin:-10px 10px;
}
#shadow{
	background:url(images/downShadow.png) no-repeat;
	width:952px;
	height:96px;
	float:left;
	margin:-10px 0 0 20px;
}

Теперь все выглядит именно так как и было задумано. Не хватает только картинок.
Загружаем WOW.
1. Теперь идем на сайт wowslider.com и загружаем плагин WOW-слайдера. Сайт на английском языке, но интуитивно все понятно. В крайнем случае воспользуйтесь переводчиком. Загруженный файл распакуйте, он установится у вас на компьютере.
2. Теперь нажимаем на зеленый плюсик и выбираем картинки для нашего слайдера. То колличество, которое вам нужно. В моем примере из 3.
3. Теперь нажимаем Properties —Images. Выбираем Custom size и прописываем значение 935 х 388, так же выбираем эффект, который нравится.
4. Теперь нажимаем Publish ——- Insert to page —-Browse —– Выбираем наш html-файл.В открывшемся окне слева сбоку выбираем самый последний div из структуры документа, нажимаем Insert before а потом Publish. Программа сама сгенерирует весь необходимый код и файлы и вставит код в документ.
Возвращаемся в наш редактор, находим вставленный код (он будет где-то почти в конце) и помещаем его а тег div id=”wow_slider”
5. Наш слайдер должен уже работать. Осталась пара мелочей. Найдите созданный программой файл style.css. Он находится в новой автоматически созданной папке. Зайдите в него и в #wowslider-container1 пропишите еще одну тень:
box-shadow: -1px 3px 10px #000;
Ну вот и все! Слайдер получается шикарный! Можете использовать у себя на сайте и радовать пользователей!