Як створити повзунок зображення за допомогою Photoshop & jQuery

Безсумнівно, слайдер зображень є одним з найбільш часто використовуваних елементів у веб-дизайні бізнесу, завдяки його відносно великим розмірам, який здатний привернути увагу відвідувачів, як тільки вони прибудуть на сайт. Незважаючи на те, що веб-сайт почав переосмислювати зручність використання слайдера зображення, він все ще вважається обов'язковим для новачків галузі веб-дизайну.

У цьому підручнику веб-дизайну ми навчимося створювати користувальницький слайдер зображення за допомогою Photoshop, який можна переглянути звідси. Мало того, що ми проілюструємо це у Photoshop, ми також перетворимо його на функціональний дизайн, перетворивши його у HTML / CSS і додавши jQuery для його приголомшливого ефекту ковзання..

Звучить як багато складних бітів, але насправді це досить просто і зрозуміло, давайте почнемо!

Більше зацікавлені у прийнятті повзунка зображення та його налаштування на шляху? Ось повідомлення, присвячені вам.

• Повзунок зображення: 23 повзунки jQuery
• Повзунок зображення: 18 плагінів WordPress

Починаємо

Для цього підручника знадобляться такі ресурси:

• 26 Повторювані шаблони пікселів з PSDfreemium.
• бібліотека jQuery
• Плагін Nivo Slider
• Modernizr
• Знайдено паперові текстури від VandelayPremier
• (Альтернатива) 13 HQ Стара текстура паперу від передозування
• Rinjani від Ciaciya
• Ступа Агнес Сім
• Tally від Nino Satria
• Пропозиції Тімо Балка
• Улувату-Балі від Аріса Wjay

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

Крок 1: Налаштування фону

Почніть з створення нового файлу розміром 1000 × 700 px. Заповніть фон кольором # efc89e.

Додайте накладення шаблону за допомогою шаблону вільного пікселя з PSDfreemium.

Крок 2: База слайдера

Активуйте інструмент "Прямокутник". Створіть прямокутник розміром 940 × 450 px. Ви можете використовувати будь-який колір, це не має значення.

Двічі клацніть шар, щоб відкрити діалогове вікно Стиль шару. Додати Тінь стилю шару, зовнішнє світіння та обведення.

Це результат. База слайдера тепер має гарну рамку з м'якою тіньою за ним.

Крок 3

Додайте фотографію та розмістіть її над базою слайдера. Натисніть Ctrl + Alt + G, щоб перетворити його в Clipping Mask і вставити фотографію в повзунок.

Крок 4: стрічка

Намалюйте форму прямокутника з кольором # f4e1ae для використання в якості стрічки.

Двічі клацніть на шарі форми та активуйте функцію Bevel and Emboss, накладання градієнта та накладання шаблону з наступними налаштуваннями.

Це результат після додавання стилів шарів.

Крок 5

Додамо текстуру паперу на стрічку, щоб зробити її більш реалістичною. Помістіть текстуру поверх форми стрічки. Перетворити його на маску відсікання, натиснувши Ctrl + Alt + G.

Крок 6

Давайте розфарбуємо тінь і світло на стрічку. Створіть новий шар над стрічкою. Фарба чорна на нижній частині стрічки. Перетворити його на відсічну маску (Ctrl + Alt + G), а потім зменшити її непрозорість до 10%.

Крок 7

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

Крок 8: Шви

Активуйте інструмент "Олівець". Натисніть F5, щоб відкрити налаштування пензля. Встановіть розмір пензля на 1 піксель і збільшіть інтервал, доки не з'явиться пунктирна лінія на області попереднього перегляду.

Крок 9

Намалюйте 1 px чорну лінію на верхній частині стрічки. Зменшіть її непрозорість до 20%. Дублюйте шар, натиснувши Ctrl + J. Натисніть Ctrl + I, щоб інвертувати його колір. Збільшити непрозорість до 50%. Активуйте Перемістити інструмент, а потім натисніть стрілку вниз і стрілку вліво один раз, щоб підштовхнути його.

Ось результат перегляду при 100% збільшенні.

Крок 10

Повторіть цей процес, щоб намалювати інші шви на іншій стороні стрічки.

Крок 11: Додайте орнаментальну форму

Встановіть колір переднього плану на сірий. Використовуйте м'яку щітку розміром 1 px, щоб намалювати витончену форму. Будьте творчими, ви можете використовувати будь-яку потрібну форму. Поруч з ним намалюйте лінію 1 px, а потім видаліть її зовнішній край за допомогою м'якого інструменту Eraser. Дублюйте рядок, переверніть його горизонтально і помістіть його на іншу сторону.

Крок 12

Виділіть всі багатошарові шари та об'єднайте їх у один шар, натиснувши Ctrl + E. Дублюючи форму, а потім помістіть її під оригінальну форму. Натисніть Ctrl + I, щоб інвертувати його колір. Активуйте Перемістити інструмент, а потім натисніть один раз стрілку вниз, щоб підштовхнути його до 1 пікселя вниз.

Крок 13. Інформація про фотографію

Введіть дані фотографій всередині стрічки.

Крок 14: Навігація

Далі ми намалюємо деякі кола для навігації за допомогою слайдів. Намалюйте форму кола за допомогою кольору: # 8d877c на нижній частині стрічки.

Додати внутрішню тінь за допомогою наступних налаштувань.

Це результат. Коло тепер перетворюється на неглибоку дірку.

Крок 15

Утримуйте клавішу Alt, а потім перетягніть шар форми кола, щоб повторити його.

Крок 16

Встановимо активний стан на одній з цих посилань. Виберіть одне коло і змініть його колір на # bebbb5. Додати внутрішню тінь, градієнтне накладання та обведення.

Крок 17

Натисніть і утримуйте Ctrl, а потім натисніть на мініатюрі стрічки на панелі "Шари". Створіть новий шар під стрічкою і заповніть його чорним. Активуйте Move Tool і натискайте стрілку ліворуч і вниз кілька разів.

Крок 18

Пом'якшити його, виконавши фільтр Gaussian Blur. Натисніть Фільтр> Розмиття> Розмивання по Гауссу.

Крок 19

Місце тіні стрічки над шаром рамки повзунка. Перетворити його на маску відсікання, натиснувши Ctrl + Alt + G.

Крок 20

Зменшити непрозорість тіней до 40%.

Крок 21

Фарба стрічки тінь на фоні. Зменшити його непрозорість до 20%.

Крок 22

Використовуйте інструмент "Перо", щоб намалювати задню частину стрічки. Встановіть його колір на # b68f63. Поставте його за повзунок.

Це результат перегляду зі збільшенням на 100%.

Крок 23

Дублюйте форму, яку ми тільки що створили, і помістіть її за верхню частину стрічки. Переверніть його вертикально.

Крок 24: Остаточний результат у Photoshop

Це наш кінцевий результат у Photoshop. Далі ми продовжимо кодувати його у функціональний слайдер.

Частина II - Перетворення в HTML / CSS

Крок 25 - Налаштування файлів

Створіть нову папку My-Photo-Slider. У цій папці створіть новий чистий HTML-документ (index.html), порожня таблиця стилів (style.css) і папку для зображень (img). Ми також повинні включити в папку бібліотеку jQuery і плагін Nivo Slider. Оскільки ми використовуємо розмітку HTML5, нам потрібно додати HE для увімкнення HTML5-елементів на IE 8 або нижче. Ми будемо використовувати сценарій під назвою Modernizr для розміщення IE.

Крок 26 - Основна HTML-розмітка

відчинено index.html у вашому улюбленому редакторі коду. Визначте DOCTYPE (ми використовуємо HTML5), керівник елементи (де ми додаємо заголовок документів і посилання CSS і JavaScript (jQuery Library, Nivo Slider і Modernizr). div обгортка (для центрування макета), заголовка елемент і обгортку слайдів.

Етап 27 - Нарізати PSD

Відкрийте макет PSD і виділіть всі необхідні зображення. Для картини, давайте захопимо наступні фотографії з sxc.hu (потрібно ввійти, якщо у вас ще немає облікового запису, ви можете зареєструватися безкоштовно). Змініть розмір зображення до 920 × 430 пікселів. Помістіть усі зображення в папку із зображеннями (img).

1. Rinjani від Ciaciya
2. Ступа Агнес Сім
3. Tally від Nino Satria
4. Пропозиції Тімо Балка
5. Улувату-Балі від Аріса Wjay

Крок 28 - Створити заголовок

Додайте ці наступні коди

і

.

 
 Мої фото слайди 
 

Тепер давайте додамо стиль до заголовка. Ми також додаємо стиль для тіла та елементів обгортки. Помістіть усі стилі в таблицю стилів, style.css.

 / * Базовий стиль * / тіло фон: прозорий url (img / bg.jpg); шрифт: 15px / 2 'Adobe Caslon Pro', Грузія, Serif; маржа: 0; заповнення: 0;  a outline: 0 none #pagewrap margin: 120px auto; заповнення: 0; позиція: відносна; висота: 100%; ширина: 960px;  header display: block; поплавок: праворуч; margin-right: 40px; ширина: 192px; z-індекс: 52; позиція: відносна;  h1 background: прозорий url (img / separator.png) центральне дно без повтору; / * Додати роздільну лінію під заголовком * / font-size: 18px; font-weight: bold; висота: 70px; лінія-висота: 1.1; маржа: 55px 10px 0; text-align: center; text-transform: верхній регістр;  

Крок 29 - Додати фото слайдер

Тепер ми додамо код до основної частини нашого документа - слайдера фотографій. Давайте спочатку додамо фотографії. Помістіть наступний код між ними

.

Потім додайте стрічку та підпис для фотографій.

 
 
 Фотограф:
 Енріко Нунзіаті
 Розташування:
 Пустеля Наміб
 Модель:
 Мертвий Влей
 Дата:
 18.03.2011 
 
 Фотограф:
 Ліна Дхамманарі
 Розташування:
 Острів Ломбок, Індонезія
 Модель:
 Гора Rinjani
 Дата:
 8 травня 2008 року 
 
 Фотограф:
 Агнес Сім
 Розташування:
 Боробудур, Індонезія
 Модель:
 Велика ступа
 Дата:
 12 червня 2008 
 
 Фотограф:
 Ніно Сатрія
 Розташування:
 Таманський сафарі Індонезія
 Модель:
 Tally Giraffe
 Дата:
 16 серпня 2009 
 
 Фотограф:
 Тімо Балк
 Розташування:
 Убуд, Балі, Індонезія
 Модель:
 Пропозиції
 Дата:
 20 грудня 2009 
 
 Фотограф:
 Аріс Вей
 Розташування:
 Улувату-Балі
 Модель:
 Прекрасний пляж
 Дата:
 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 * / .nivoSlider position: relative;  .nivoSlider img position: absolute; зверху: 0px; ліворуч: 0px;  / * Якщо зображення обертається в посиланні * / .nivoSlider a.nivo-imageLink position: absolute; зверху: 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-заголовок position: absolute; праворуч: 20px; text-align: center; зверху: 130px; ширина: 192px; z-індекс: 60;  .nivo-підпис p margin: 0 .nivo-caption .title стиль шрифту: курсив .nivo-controlNav position: absolute; знизу: 10px; праворуч: 20px; висота: 15px; ширина: 192px; text-align: center; дисплей: блок; z-індекс: 51;  .nivo-controlNav a фон: прозорий url (img / button.png) центр повтору без повтору; дисплей: вбудований блок; висота: 14px; ширина: 14px; text-indent: -9999px; курсор: покажчик;  .nivo-controlNav .active background: прозорий url (img / button_active.png);  

Кінцевий результат + завантаження

Це наш кінцевий результат, натисніть тут, щоб побачити робочу демонстрацію.

Неможливо досягти певного кроку? Ось PSD файл результату та повний проект для тестування та відтворення.

• Повзунок зображення Підручник PSD файлу
• Повзунок повзунка зображення Проекту