Како да креирате клизач слике користећи Пхотосхоп & јКуери

Без сумње, клизач слика је један од најчешће коришћених елемената у пословном веб дизајну, због његове релативно велике величине која је у стању да привуче пажњу посетиоца када стигну на сајт. Иако је веб почео да размишља о употребљивости клизача за слике, он се још увек сматра обавезним за новајлију индустрије веб дизајна.

У овом водичу за веб дизајн, научићемо да креирамо прилагођени клизач за слике изнад помоћу Пхотосхопа, одакле можете прегледати коначни резултат одавде. Не само да ћемо то илустровати у Пхотосхопу, већ ћемо га претворити у функционалан дизајн претварајући га у ХТМЛ / ЦСС и додајући јКуери за његов страшан ефекат клизања..

Звучи као много компликованих битова, али у ствари је прилично једноставно и лако разумљиво, почнимо онда!

Више сте заинтересовани за усвајање клизача слика и прилагодите га на путу? Ево постова посвецених вама.

• Клизач слике: 23 јКуери Слидерс
• Имаге Слидер: 18 ВордПресс Плугинс

Почетак

За овај туториал требате сљедеће ресурсе:

• 26 Репеатабле Пикел Паттернс из ПСДфреемиум.
• јКуери либрари
• Ниво Слидер плугин
• Модернизр
• Пронађене текстуре папира из ВанделаиПремиер
• (Алтернативе) 13 ХК Олд Папер Тектурес фром овердоссе
• Рињани би Циацииа
• Ступа би Агнес Сим
• Талли би Нино Сатриа
• Офферингс би Тимо Балк
• Улувату-Бали од Арис Вјаи

Део И - Дизајнирање клизача слике

Корак 1: Подешавање позадине

Почните са креирањем нове датотеке величине 1000 × 700 пк. Попуните позадину бојом # ефц89е.

Додајте преклапање узорка помоћу бесплатног узорка пиксела из ПСДфреемиум.

Корак 2: Клизна база

Активирајте правоугаоник. Направите правоугаоник величине 940 × 450 пк. Можете користити било коју боју, није важно.

Двапут кликните слој да бисте отворили дијалог Лаиер Стиле. Додајте Лаиер Стиле Дроп Схадов, Оутер Глов и Строке.

То је резултат. База клизача сада има леп оквир са меком сенком иза њега.

Корак 3

Додајте фотографију и поставите је изнад базе клизача. Притисните Цтрл + Алт + Г да бисте га претворили у Цлиппинг Маск и убаците фотографију у клизач.

Корак 4: Риббон

Нацртајте облик правоугаоника са бојом # ф4е1ае која ће се користити као врпца.

Двапут кликните на слој облика и активирајте Бевел анд Ембосс, Градиент Оверлаи и Паттерн Оверлаи са следећим подешавањима.

Ово је резултат након додавања Лаиер Стилес-а.

Корак 5

Додајте папирну текстуру на траку да би била реалнија. Ставите текстуру на врх врпце. Претворите га у Цлиппинг Маск притиском на Цтрл + Алт + Г.

Корак 6

Хајде да насликамо неке сенке и истакне на траку. Направите нови слој изнад траке. На доњем делу траке обојите црну боју. Претворите га у Цлиппинг Маск (Цтрл + Алт + Г), а затим смањите његову непрозирност на 10%.

Корак 7

Поновите претходни поступак у горњем дијелу врпце. Али овај пут, додајте осветљење белим бојама и затим смањите његову непрозирност на 50%.

Корак 8: Шавови

Активирајте алатку Пенцил Тоол. Притисните Ф5 да бисте отворили поставку Четка. Подесите величину киста на 1 пк и повећајте размак све док не добијемо тачкасту линију на подручју прегледа.

Корак 9

Нацртајте 1 пк црну линију на врху врпце. Смањите његову непрозирност на 20%. Дуплирајте слој притиском на Цтрл + Ј. Притисните Цтрл + И да бисте обрнули његову боју. Повећајте Опацити на 50%. Активирајте Мове Тоол и једном притисните стрелицу према доље и стрелицу улијево да бисте је гурнули.

Ево резултата приказаног на 100% увећању.

Корак 10

Поновите овај поступак да бисте нацртали друге шавове на другој страни врпце.

Корак 11: Додајте Обликован облик

Поставите боју предњег плана у сиво. Користите мекану четку величине 1 пк да бисте нацртали украшен облик. Будите креативни, можете користити било који облик који желите. Поред њега, нацртајте 1 пк линију и затим обришите њену спољну ивицу помоћу меког алата Ерасер. Дуплирајте линију, окрените је хоризонтално и поставите је на другу страну.

Корак 12

Одаберите све слојеве који су богати и спојите их у један слој тако што ћете притиснути комбинацију тастера Цтрл + Е. Дупликат облика, а затим га поставити у оригинални орнамент. Притисните Цтрл + И да бисте обрнули његову боју. Активирајте Мове Тоол и једном притисните стрелицу надоле да бисте је померили за 1 пк.

Корак 13: Информације о фотографији

Упишите фото податке унутар траке.

Корак 14: Навигација

Затим ћемо нацртати неке кругове за слајд навигацију. Нацртајте облик круга с бојом: # 8д877ц на доњем дијелу врпце.

Додајте Иннер Схадов користећи следеће поставке.

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

Корак 15

Држите Алт, а затим повуците слој облика круга да бисте га дуплицирали.

Корак 16

Поставимо активно стање на једној од ових веза. Изаберите један од кругова и промените боју на # беббб5. Додајте Иннер Схадов, Градиент Оверлаи и Строке.

Корак 17

Држите Цтрл, а затим кликните на сличицу траке на траци у панелу Слојеви. Направите нови слој испод траке и напуните га црном бојом. Активирајте Мове Тоол и притисните стрелицу лево и десно неколико пута.

Корак 18

Омекшајте га извођењем Гауссиан Блур филтера. Кликните Филтер> Блур> Гауссиан Блур.

Корак 19

Поставите сенку траке изнад слоја оквира клизача. Претворите га у Цлиппинг Маск притиском на Цтрл + Алт + Г.

Корак 20

Смањите непрозирност сенке на 40%.

Корак 21

Сјенка рибље траке на позадини. Смањите његову непрозирност на 20%.

Корак 22

Користите алатку Пен да бисте повукли задњи део траке. Поставите боју на # б68ф63. Ставите га иза клизача.

То је резултат који се види при увећању од 100%.

Корак 23

Удвостручите облик који смо управо креирали и поставите га иза врха траке. Окрените га вертикално.

Корак 24: Коначни резултат у Пхотосхопу

Ово је наш коначни резултат у Пхотосхопу. Затим ћемо наставити да га кодирамо у функционални клизач.

Део ИИ - Претварање у ХТМЛ / ЦСС

Корак 25 - Подешавање датотека

Креирајте нову мапу Ми-Пхото-Слидер. У овој фасцикли направите нови празан ХТМЛ документ (индек.хтмл), празна листа стилова (стиле.цсс), и фолдер за слике (имг). Такође морамо да укључимо јКуери библиотеку и Ниво Слидер плугин у фасциклу. Како користимо ХТМЛ5 маркуп, морамо додати ИЕ хацк да омогућимо ХТМЛ5 елементе на ИЕ 8 или испод. Користићемо скрипту под називом Модернизр да бисмо прилагодили ИЕ.

Корак 26 - Основна ХТМЛ ознака

Отвори индек.хтмл у свом омиљеном уређивачу кода. Дефинишите ДОЦТИПЕ (користимо ХТМЛ5), глава елементе (где додамо наслов докумената и линк ЦСС и ЈаваСцрипт (јКуери Либрари, Ниво Слидер и Модернизр). див омот (за центрирање изгледа), хеадер елемент и омот са слајдовима.

Корак 27 - Слице ПСД

Отворите ПСД макету и исеците све потребне слике. За слику, хајде да узмемо следеће слике са скц.ху (потребна је пријава, ако још увек немате налог, можете се бесплатно пријавити). Промените величину свих слика на 920 × 430 пк. Ставите све слике у фасциклу са сликама (имг).

1. Рињани би Циацииа
2. Ступа би Агнес Сим
3. Талли би Нино Сатриа
4. Офферингс би Тимо Балк
5. Улувату-Бали од Арис Вјаи

Корак 28 - Креирајте заглавље

Додајте ове следеће кодове између

и

.

 
 Моји фото слајдови 
 

Сада додајте стил у заглавље. Такође додајемо стил за тело и елементе омотача. Ставите све стилове у стилу, стиле.цсс.

 / * Басиц Стилинг * / боди позадина: транспарентни урл (имг / бг.јпг); фонт: 15пк / 2 'Адобе Цаслон Про', Грузија, Сериф; маргин: 0; паддинг: 0;  а оутлине: 0 ноне #пагеврап маргин: 120пк ауто; паддинг: 0; позиција: релативна; висина: 100%; видтх: 960пк;  хеадер дисплаи: блоцк; флоат: ригхт; маргин-ригхт: 40пк; видтх: 192пк; з-индекс: 52; позиција: релативна;  х1 бацкгроунд: транспарент урл (имг / сепаратор.пнг) централно дно без понављања; / * Додајте линију раздвајања испод наслова * / фонт-сизе: 18пк; фонт-веигхт: болд; хеигхт: 70пк; висина линије: 1.1; маргина: 55пк 10пк 0; тект-алигн: центар; тект-трансформ: велика слова;  

Корак 29 - Додајте фото клизач

Сада ћемо додати код главном делу нашег документа, клизачу за фотографије. Прво додамо фотографије. Ставите следећи код између

.

Затим додајте траку и натпис за фотографије.

 
 
 Фотограф:
 Енрицо Нунзиати
 Локација:
 Намиб десерт
 Модел:
 Деад Влеи
 Датум:
 Мар 18, 2011 
 
 Фотограф:
 Лина Дхамманари
 Локација:
 Ломбок Исланд, Индонесиа
 Модел:
 Моунт Рињани
 Датум:
 8. мај 2008 
 
 Фотограф:
 Агнес Сим
 Локација:
 Боробудур, Индонезија
 Модел:
 Биг Ступа
 Датум:
 Јун 12, 2008 
 
 Фотограф:
 Нино Сатриа
 Локација:
 Таман Сафари Индонезиа
 Модел:
 Талли Гираффе
 Датум:
 Авг 16, 2009 
 
 Фотограф:
 Тимо Балк
 Локација:
 Убуд, Бали, Индонезиа
 Модел:
 Офферингс
 Датум:
 Дец 20, 2009 
 
 Фотограф:
 Арис Вјаи
 Локација:
 Улувату-Бали
 Модел:
 Беаутифул Беацх
 Датум:
 Јул 20, 2011 
 

Сада, ако отворимо индек.хтмл у прегледачу имамо нешто слично овоме:

Корак 30

Још увек морамо да поправимо изглед клизача користећи ЦСС.

 #слидеврап поситион: абсолуте; #слидер поситион: релативе; хеигхт: ауто; видтх: 920пк; бордер: 10пк солид #ффф; бок-схадов: 0 0 5пк # 444; маргин: 10пк;  .риббон ​​бацкгроунд: транспарент урл (имг / инфо-бг.пнг) но-репеат; хеигхт: 482пк; видтх: 192пк; позиција: апсолутна; десно: 40пк; врх: -3пк; з-индекс: 50;  #слидер имг поситион: абсолуте; топ: 0пк; лево: 0пк; дисплаи: ноне;  

То је оно што сада имамо.

Тренутно смо повезали Ниво слидер плугин али нисмо повезали скрипту. Зато спојимо скрипту додајући ове ЈаваСцрипт функције између њих и елемент.

Корак 31: Стил клизача

Последњи корак је додавање стила клизача.

 / * Тхе Ниво Слидер стилови * / .нивоСлидер поситион: релативе;  .нивоСлидер имг поситион: абсолуте; топ: 0пк; лево: 0пк;  / * Ако је слика умотана у линк * / .нивоСлидер а.ниво-имагеЛинк поситион: абсолуте; топ: 0пк; лево: 0пк; ширина: 100%; висина: 100%; граница: 0; паддинг: 0; маргин: 0; з-индекс: 6; дисплаи: ноне;  / * Одсеци и поља у клизачу * / .ниво-слице дисплаи: блоцк; позиција: апсолутна; з-индекс: 5; висина: 100%;  .ниво-бок дисплаи: блоцк; позиција: апсолутна; з-индекс: 5;  .ниво-дирецтионНав дисплаи: ноне! импортант .ниво-хтмл-цаптион дисплаи: ноне;  .ниво-цаптион поситион: абсолуте; десно: 20пк; тект-алигн: центар; врх: 130пк; видтх: 192пк; з-индекс: 60;  .ниво-цаптион п маргина: 0 .ниво-цаптион .титле фонт-стиле: италиц .ниво-цонтролНав поситион: абсолуте; боттом: 10пк; десно: 20пк; хеигхт: 15пк; видтх: 192пк; тект-алигн: центар; дисплеј блок; з-индекс: 51;  .ниво-цонтролНав а бацкгроунд: транспарент урл (имг / буттон.пнг) центар без понављања; дисплеј: инлине-блоцк; хеигхт: 14пк; видтх: 14пк; тект-индент: -9999пк; курсор: показивач;  .ниво-цонтролНав .ацтиве бацкгроунд: транспарент урл (имг / буттон_ацтиве.пнг);  

Финал Ресулт + Довнлоад

Ово је наш коначни резултат, кликните овде да видите радни демо.

Не можете постићи одређени корак? Ево резултата ПСД фајла и комплетног пројекта за тестирање и играње.

• Имаге Слидер Туториал ПСД Филе
• Имаге Слидер Туториал Цомплете Пројецт