Как да създадете слайдер с помощта на Photoshop & jQuery

Без съмнение, слайдерът на изображението е един от най-често използваните елементи в бизнес уеб дизайна, поради сравнително големия си размер, който е в състояние да привлече вниманието на посетителите, щом пристигнат на сайта. Въпреки че мрежата започна да преосмисля използваемостта на плъзгача за изображения, тя все още се смята за задължителен за новодошлия в индустрията за уеб дизайн..

В този урок за уеб дизайн ще се научим да създаваме плъзгач за персонализирани изображения по-горе, използвайки Photoshop, който можете да прегледате крайния резултат от тук. Не само ще го илюстрираме във Photoshop, но също така ще го превърнем във функционален дизайн, като го конвертираме в HTML / CSS и добавим jQuery за неговия страхотен ефект на плъзгане..

Звучи като много сложни битове, но всъщност е доста лесно и лесно да се разбере, да започнем тогава!

Повече се интересувате от приемането на слайдер на изображението и го персонализирате по пътя? Тук са публикувани публикации за вас.

Плъзгач на изображението: 23 jQuery Плъзгачи
Плъзгач на изображението: 18 Plugins за WordPress

Приготвяме се да започнем

За този урок ще са ви необходими следните ресурси:

26 Повтарящи се пикселни шаблони от PSDfreemium.
библиотека jQuery
Плъзгач Nivo
Modernizr
Намерени са текстури от VandelayPremier
(Алтернатива) 13 HQ Old Textures Textures from overdosse
Rinjani by Ciaciya
Ступа от Агнес Сим
Tally от Nino Satria
Предложения от Тимо Балк
Улувату-Бали от Арис Вей

Част I - Проектиране на слайдер на изображението

Стъпка 1: Настройване на фона

Започнете с създаване на нов файл с размер 1000 × 700 px. Запълнете фона с цвят # efc89e.

Добавете наслагване на шаблон с помощта на свободен пикселен шаблон от PSDfreemium.

Стъпка 2: База на плъзгача

Активирайте инструмента с правоъгълник. Създайте правоъгълник с размер 940 × 450 px. Можете да използвате всеки цвят, няма значение.

Щракнете двукратно върху слоя, за да отворите диалоговия прозорец Layer Style. Добавете Layer Style Drop Shadow, Outer Glow и Stroke.

Това е резултатът. Базата с плъзгача сега има хубава рамка с мека сянка зад нея.

Стъпка 3

Добавете снимка и я поставете над базата на плъзгача. Натиснете Ctrl + Alt + G, за да го конвертирате в Clipping Mask и поставете снимката в плъзгача.

Стъпка 4: Лента

Начертайте правоъгълна форма с цвят # f4e1ae, който ще се използва като лента.

Щракнете двукратно върху слоя на формата и активирайте функцията Bevel and Emboss, Gradient Overlay и Pattern Overlay със следните настройки.

Това е резултатът от добавянето на Layer Styles.

Стъпка 5

Нека добавим хартиена текстура върху лентата, за да стане по-реалистична. Поставете текстурата върху формата на лентата. Конвертирайте го в Clipping Mask като натиснете Ctrl + Alt + G.

Стъпка 6

Нека нарисуваме сенки и акценти върху лентата. Създайте нов слой над лентата. Оцветете черно в долната част на лентата. Конвертирайте го в Clipping Mask (Ctrl + Alt + G) и след това намалете непрозрачността му до 10%.

Стъпка 7

Повторете предишния процес до горната част на лентата. Но този път, добавете осветеност чрез боядисване в бяло и след това намалете непрозрачността му до 50%.

Стъпка 8: Шевове

Активирайте инструмента за моливи. Натиснете F5, за да отворите настройката Brush. Задайте размера на четката на 1 px и увеличете разстоянието, докато не получим пунктирана линия в областта за преглед.

Стъпка 9

Начертайте 1 px черна линия върху лентата. Намалете нейната непрозрачност до 20%. Дублирайте слоя, като натиснете Ctrl + J. Натиснете Ctrl + I, за да обърнете цвета му. Увеличете непрозрачността до 50%. Активирайте Move Tool и след това натиснете стрелка надолу и стрелка наляво веднъж, за да го бутнете.

Ето резултатите, които се виждат при 100% увеличение.

Стъпка 10

Повторете този процес, за да нарисувате други шевове от другата страна на лентата.

Стъпка 11: Добавете орнаментирана форма

Задайте цвят на преден план в сиво. Използвайте мека четка с размер 1 px, за да начертаете орнаментирана форма. Бъдете креативни, можете да използвате всяка форма, която харесвате. До него начертайте 1 px линия и след това изтрийте външния й ръб с помощта на мекия Eraser Tool. Дублирайте линията, обърнете го хоризонтално и я поставете от другата страна.

Стъпка 12

Изберете всички богато украсени слоеве и ги съединете в един слой, като натиснете Ctrl + E. Дублирайте формата и я поставете под оригиналната орнаментирана форма. Натиснете Ctrl + I, за да обърнете цвета му. Активирайте Move Tool и след това натиснете стрелка надолу веднъж, за да го бутате с 1 px надолу.

Стъпка 13: Информация за снимката

Въведете снимка в лентата.

Стъпка 14: Навигация

След това ще нарисуваме няколко кръга за навигация в слайд. Начертайте форма на кръг с цвят: # 8d877c в долната част на лентата.

Добавете вътрешна сянка, като използвате следните настройки.

Това е резултатът. Кръгът се превръща в плитка дупка.

Стъпка 15

Задръжте Alt и след това плъзнете слой с форма на кръг, за да го дублирате.

Стъпка 16

Да зададем активно състояние на една от тези връзки. Изберете един от кръга и променете цвета му на # bebbb5. Добавете вътрешна сянка, наслагване с градиент и инсулт.

Стъпка 17

Задръжте Ctrl и след това кликнете върху иконата на лентата в панела Layers. Създайте нов слой под лентата и го напълнете с черно. Активирайте Move Tool и натиснете няколко пъти стрелка наляво и надолу.

Стъпка 18

Омекотете го, като изпълните филтър за Gaussian Blur. Кликнете върху Филтър> Размазване> Gaussian Blur.

Стъпка 19

Поставете сянката на лентата над слоя на плъзгача. Конвертирайте го в Clipping Mask като натиснете Ctrl + Alt + G.

Стъпка 20

Намаляване на непрозрачността на сянката на 40%.

Стъпка 21

Боя панделка сянка на фона. Намаляване на непрозрачността му до 20%.

Стъпка 22

Използвайте Pen Tool, за да изтеглите задната част на лентата. Задайте цвета му на # b68f63. Поставете я зад плъзгача.

Това е резултатът, който се вижда при 100% увеличение.

Стъпка 23

Дублирайте формата, която току-що създадохме и я поставете зад горната част на лентата. Обърнете го вертикално.

Стъпка 24: Краен резултат в Photoshop

Това е крайният ни резултат в Photoshop. След това ще продължим да го кодираме във функционален плъзгач.

Част II - Преобразуване в HTML / CSS

Стъпка 25 - Настройване на файлове

Създайте нова папка, наречена My-Photo-слайдер. Вътре в тази папка създайте нов празен HTML документ (index.html), празен лист за стилове (style.css) и папка за изображения (IMG). Също така трябва да включим в папката jQuery библиотеката и плъгина Nivo Slider. Тъй като ние използваме HTML5 маркиране, трябва да добавим IE рана, за да активираме HTML5 елементите на IE 8 или по-долу. Ще използваме скрипт, наречен Modernizr, за да приспособим IE.

Стъпка 26 - Основна HTML маркировка

отворено index.html в любимия си редактор на код. Определете DOCTYPE (използваме HTML5), глава елементи (където добавяме заглавието на документите и свързваме CSS и JavaScript (jQuery Library, Nivo Slider и Modernizr). Разделение обвивка (за центриране на оформлението), удар с глава елемент и обвивка на слайд.

      Моите фото слайдове

Стъпка 27 - Нарежете PSD

Отворете макета на PSD и изрежете всички необходими изображения. За снимката, да вземем следните снимки от sxc.hu (изисква се вход, ако все още нямате сметка, можете да се регистрирате безплатно). Преоразмерете всички изображения до 920 × 430 px. Поставете всички изображения в папката с изображения (IMG).

Rinjani by Ciaciya
Ступа от Агнес Сим
Tally от Nino Satria
Предложения от Тимо Балк
Улувату-Бали от Арис Вей

Стъпка 28 - Създаване на заглавие

Добавете тези следния код между

  Моите фото слайдове

Сега нека добавим стил към заглавката. Също така добавяме стила на тялото и елементите на обвивката. Поставете всички стилове в таблицата със стилове, style.css.

 / * Основен стил * / тяло фон: прозрачен url (img / bg.jpg); шрифт: 15px / 2 'Adobe Caslon Pro', Грузия, Сериф; марж: 0; подложка: 0;  a outline: 0 none #pagewrap margin: 120px auto; подложка: 0; позиция: относителна; височина: 100%; ширина: 960 пкс;  header display: block; плаваш: право; марж-надясно: 40px; ширина: 192px; Z-индекс: 52; позиция: относителна;  h1 фон: прозрачен url (img / separator.png) централно дъно без повторение; / * Добавете разделителна линия под заглавието * / font-size: 18px; шрифт тегло: удебелен шрифт; височина: 70px; линия височина: 1,1; марж: 55px 10px 0; текст-приравни: център; текст-трансформация: главни букви;

Стъпка 29 - Добавете Плъзгач за снимки

Сега ще добавим код към основната част на нашия документ - плъзгача за снимки. Нека първо да добавим снимките. Поставете следния код между тях

След това добавете лентата и надписа за снимките.

 
  Фотограф:
 Енрико Нунзиати
 местоположение:
 Пустинята Намиб
 Модел:
 Мъртъв Влей
 Дата:
 18 март, 2011 
  Фотограф:
 Лина Дхамманари
 местоположение:
 Остров Ломбок, Индонезия
 Модел:
 Планината Ринджани
 Дата:
 8 май 2008 г. 
  Фотограф:
 Агнес Сим
 местоположение:
 Боробудур, Индонезия
 Модел:
 Голямата ступа
 Дата:
 12 юни 2008 г. 
  Фотограф:
 Нино Сатрия
 местоположение:
 Taman Safari Индонезия
 Модел:
 Тали Жираф
 Дата:
 16 август 2009 г. 
  Фотограф:
 Тимо Балк
 местоположение:
 Убуд, Бали, Индонезия
 Модел:
 Предложения
 Дата:
 20 декември 2009 г. 
  Фотограф:
 Арис Вей
 местоположение:
 Uluwatu-в Бали
 Модел:
 Красив плаж
 Дата:
 20 юли 2011 година

Сега, ако отворим index.html в браузъра имаме нещо подобно:

Стъпка 30

Все още трябва да фиксираме външния вид на плъзгача с помощта на CSS.

 #slidewrap position: absolute; #slider position: relative; височина: автоматичен; ширина: 920px; граница: 10px твърдо #fff; box-shadow: 0 0 5px # 444; марж: 10px;  .ribbon фон: прозрачен url (img / info-bg.png) без повторение; височина: 482px; ширина: 192px; позиции: абсолютен; дясно: 40px; отгоре: -3px; Z-индекс: 50;  #slider img position: absolute; отгоре: 0px; лява: 0px; дисплей: няма;

Това е, което имаме сега.

В момента сме свързали плъзгача с плъзгача Nivo, но не сме свързали скрипта. Така че нека да свържем скрипта, като добавим между тях JavaScript функциите и елемент.

Стъпка 31: Стил на плъзгача

Последната стъпка е добавянето на стила на плъзгача.

 / * Стиловете на Nivo Slider * / .nivoSlider позиция: относителна;  .nivoSlider img позиция: абсолютна; отгоре: 0px; лява: 0px;  / * Ако изображението е опаковано във връзка * / .nivoSlider a.nivo-imageLink позиция: абсолютна; отгоре: 0px; лява: 0px; ширина: 100%; височина: 100%; граница: 0; подложка: 0; марж: 0; Z-индекс: 6; дисплей: няма;  / * Резени и кутии в Slider * / .nivo-slice display: block; позиции: абсолютен; Z-индекс: 5; височина: 100%;  .nivo-box display: block; позиции: абсолютен; Z-индекс: 5;  .nivo-directionNav display: none! important .nivo-html-надпис display: none;  .nivo-заглавие позиция: абсолютна; дясно: 20px; текст-приравни: център; отгоре: 130px; ширина: 192px; Z-индекс: 60;  .nivo-надпис p мард: 0 .nivo-caption .title шрифт-стил: курсив .nivo-controlNav позиция: абсолютна; надолу: 10px; дясно: 20px; височина: 15px; ширина: 192px; текст-приравни: център; езика: блок; Z-индекс: 51;  .nivo-controlNav a фон: прозрачен url (img / button.png) център без повторение; езика: вграден блок; височина: 14px; ширина: 14px; текст-тире: -9999px; курсора: указател;  .nivo-controlNav .active фон: прозрачен URL (img / button_active.png);

Краен резултат + изтегляне

Това е нашият краен резултат, кликнете тук, за да видите работната демонстрация.

Не можете да постигнете определена стъпка? Тук са PSD файл на резултатите и завършен проект, за да тествате и да играете.

Плъзгач на изображението Инструкция PSD файл
Плъзгач на изображението Пълен проект