Cum de a crea un cursor de imagine utilizând Photoshop & jQuery

Fără îndoială, sliderul de imagine este unul dintre elementele cele mai frecvent utilizate în designul web al afacerilor, datorită dimensiunilor sale relativ mari, care pot atrage atenția vizitatorilor odată ce ajung pe site. Deși web-ul a început să regândească gradul de utilizare al slider-ului de imagine, acesta este încă considerat un must-learn pentru nou-venitul industriei de web design.

În acest tutorial de design web, vom învăța să creăm glisorul de imagini personalizat de mai sus folosind Photoshop, pe care îl puteți previzualiza rezultatul final de aici. Nu numai ca il vom ilustra in Photoshop, vom transforma, de asemenea, intr-un design functional, transformandu-l in HTML / CSS si adaugand jQuery pentru efectul de alunecare extraordinar.

Sună ca o mulțime de biți complicați implicați, dar de fapt este destul de simplă și foarte ușor de înțeles, să începem atunci!

Mai interesat de adoptarea unui slider de imagine și de personalizarea acestuia pe drum? Iată postările dedicate pentru dvs..

• Glisor de imagine: 23 jQuery Sliders
• Slider pentru imagini: 18 pluginuri WordPress

Noțiuni de bază

Pentru acest tutorial veți avea nevoie de următoarele resurse:

• 26 modele de pixeli repetate din PSDfreemium.
• jQuery bibliotecă
• Nivo Slider plugin
• Modernizr
• S-au găsit texturi de hârtie de la VandelayPremier
• (Alternative) 13 Texte hârtie vechi HQ de la overdosse
• Rinjani de Ciaciya
• Stupa de Agnes Sim
• Tally de Nino Satria
• Ofertele lui Timo Balk
• Uluwatu-Bali de Aris Wjay

Partea I - Proiectarea cursorului de imagine

Pasul 1: Configurarea fundalului

Începeți prin a crea un fișier nou cu dimensiunea de 1000 × 700 px. Umpleți fundalul cu culoarea # efc89e.

Adăugați suprapunerea modelului utilizând modelul pixel gratuit din PSDfreemium.

Pasul 2: Baza cursorului

Activați instrumentul dreptunghiular. Creați un dreptunghi cu dimensiunea de 940 × 450 px. Puteți folosi orice culoare, nu contează.

Faceți dublu clic pe strat pentru a deschide caseta de dialog Stil de stil. Adăugați Shadow Drop Style, Strălucire exterioară și Stroke.

Acesta este rezultatul. Glisorul de bază are acum un cadru frumos cu umbra moale în spatele lui.

Pasul 3

Adăugați o fotografie și plasați-o deasupra glisorului. Apăsați Ctrl + Alt + G pentru al converti în Mască de tăiere și introduceți fotografia în cursor.

Pasul 4: Panglica

Desenați o formă dreptunghiulară cu culoarea # f4e1ae pentru a fi folosită ca o panglică.

Faceți dublu clic pe stratul formei și activați Bevel and Emboss, Gradient Overlay și Overlay cu următoarele setări.

Acesta este rezultatul după adăugarea stilurilor de strat.

Pasul 5

Să adăugăm textura hârtiei pe panglică pentru ao face mai realistă. Plasați textura pe partea superioară a formei panglicii. Conversați-o în Masca de Clipping apăsând pe Ctrl + Alt + G.

Pasul 6

Să picteze niște umbre și accente pe panglică. Creați un strat nou deasupra panglicii. Vopsea negru pe partea inferioară a panglicii. Convertiți-o în Mască de tăiere (Ctrl + Alt + G) și apoi reduceți Opacitatea la 10%.

Pasul 7

Repetați procesul anterior în partea superioară a panglicii. Dar de această dată, adăugați evidențiați prin pictura albă și apoi reduceți opacitatea la 50%.

Pasul 8: Cusaturi

Activați Instrumentul Creion. Apăsați F5 pentru a deschide setarea Perie. Setați dimensiunea periei la 1 px și măriți spațierea până când vom obține o linie punctată în zona de previzualizare.

Pasul 9

Desenați o linie negru de 1 pix pe partea superioară a panglicii. Reduceți opacitatea la 20%. Duplicați stratul apăsând pe Ctrl + J. Apăsați Ctrl + I pentru a inversa culoarea. Creșteți opacitatea la 50%. Activați Instrumentul de mutare, apoi apăsați o dată săgeata în jos și săgeata spre stânga o dată pentru al lovi.

Iată rezultatul vizualizat la mărire de 100%.

Pasul 10

Repetați acest proces pentru a desena alte cusături pe altă parte a panglicii.

Pasul 11: Adăugați forma ornată

Setați culoarea primului la gri. Utilizați o perie moale cu dimensiunea de 1 px pentru a desena o formă ornamentată. Fii creativ, poți folosi orice formă doriți. Alături de aceasta, trageți o linie de 1 px și apoi ștergeți marginea exterioară utilizând un instrument Eraser moale. Duplicați linia, răsturnați-o orizontal și plasați-o pe cealaltă parte.

Pasul 12

Selectați toate straturile ornate și îmbinați-le într-un singur strat apăsând Ctrl + E. Duplicați forma și apoi plasați-o sub forma originală ornamentată. Apăsați Ctrl + I pentru a inversa culoarea. Activați Instrumentul de mutare și apoi apăsați o dată săgeata în jos pentru a lovi 1 pixeli în jos.

Pasul 13: Informații despre fotografie

Introduceți date de fotografie în interiorul panglicii.

Pasul 14: Navigare

Apoi, vom atrage câteva cercuri pentru navigarea pe diapozitive. Desenați o formă de cerc cu culoarea: # 8d877c pe partea inferioară a panglicii.

Adăugați Inner Shadow folosind următoarele setări.

Acesta este rezultatul. Cercul se transformă acum într-o gaură superficială.

Pasul 15

Țineți Alt și apoi trageți stratul de formă de cerc pentru al duplica.

Pasul 16

Să stabilim o condiție activă pe unul dintre aceste linkuri. Selectați unul din cerc și modificați culoarea lui la # bebbb5. Adăugați umbra interioară, suprapunerea cu gradient și stroke.

Pasul 17

Țineți apăsat Ctrl și apoi faceți clic pe miniatură de bază a panglicii din panoul Straturi. Creați un strat nou sub panglică și completați-l cu negru. Activați Instrumentul de mutare și apăsați săgeată stânga și în jos de câteva ori.

Pasul 18

Îndepărtați-l prin efectuarea unui filtru Gaussian Blur. Faceți clic pe Filter> Blur> Blur Gaussian.

Pasul 19

Plasați umbra panglicii deasupra stratului ramei glisante. Conversați-o în Masca de Clipping apăsând pe Ctrl + Alt + G.

Pasul 20

Reduceți umbra Opacitate la 40%.

Pasul 21

Vopsea umbra panglică pe fundal. Reduceți opacitatea la 20%.

Pasul 22

Utilizați instrumentul Pen pentru a retrage o parte a panglicii. Setați culoarea sa la # b68f63. Plasați-l în spatele glisorului.

Acesta este rezultatul vizualizat la mărire de 100%.

Pasul 23

Duplicați forma pe care tocmai am creat-o și plasați-o în partea de sus a panglicii. Rotiți-o vertical.

Pasul 24: Rezultatul final în Photoshop

Acesta este rezultatul nostru final în Photoshop. Apoi, vom continua să îl codificăm într-un slider funcțional.

Partea II - Conversia în HTML / CSS

Pasul 25 - Configurarea fișierelor

Creați un dosar nou numit My-foto-Slider. În interiorul acestui dosar, creați un nou document HTML gol (index.html), foaie de stil goală (style.css) și folderul pentru imagini (img). De asemenea, trebuie să includem biblioteca jQuery și pluginul Nivo Slider în dosar. Pe măsură ce folosim marcajul HTML5, trebuie să adăugăm un hack IE pentru a activa elementele HTML5 pe IE 8 sau mai jos. Vom folosi un script numit Modernizr pentru a găzdui IE.

Pasul 26 - Marcajul HTML de bază

Deschis index.html în editorul dvs. de cod preferat. Definiți DOCTYPE (folosim HTML5), cap (unde adăugăm titlul documentelor și link-ul CSS și JavaScript (jQuery Library, Nivo Slider și Modernizr). div înveliș (pentru a centra aspectul), antet element și înveliș diapozitiv.

Pasul 27 - PSD de felie

Deschideți macheta PSD și eliminați toate imaginile necesare. Pentru imagine, hai să luăm poze de la sxc.hu (trebuie să te autentifici, dacă nu ai încă un cont, poți să te înscrii gratuit). Redimensionați toate imaginile la 920 × 430 px. Puneți toate imaginile în folderul imagine (img).

1. Rinjani de Ciaciya
2. Stupa de Agnes Sim
3. Tally de Nino Satria
4. Ofertele lui Timo Balk
5. Uluwatu-Bali de Aris Wjay

Pasul 28 - Creați antet

Adăugați următorul cod între

și

.

 
 Fotografiile mele 
 

Acum, să adăugăm stil antetului. Adăugăm, de asemenea, stilul pentru corp și elemente de înfășurare. Puneți toate stilurile în foaia de stil, style.css.

 / * Styling de bază * / corp background: url transparent (img / bg.jpg); font: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; margin: 0; padding: 0;  a contur: 0 niciunul #pagewrap margin: 120px auto; padding: 0; Poziția: relativă; înălțime: 100%; lățime: 960 x;  header display: bloc; float: right; marja de-dreapta: 40px; lățime: 192px; z-index: 52; Poziția: relativă;  h1 fundal: url transparent (img / separator.png) fundul centrului nu se repetă; / * Adăugați un rând separator sub titlul * / font-size: 18px; font-weight: bold; înălțime: 70px; line-height: 1.1; margine: 55px 10px 0; text-align: center; text-transform: majuscule;  

Pasul 29 - Adăugați cursorul foto

Acum vom adăuga codul în partea principală a documentului nostru, sliderul de fotografie. Să adăugăm mai întâi fotografiile. Plasați următorul cod între

.

Apoi adăugați panglica și captura pentru fotografii.

 
 
 Fotograf:
 Enrico Nunziati
 Locație:
 Namib desert
 Model:
 Dead Vlei
 Data:
 18 martie 2011 
 
 Fotograf:
 Lina Dhammanari
 Locație:
 Insula Lombok, Indonezia
 Model:
 Muntele Rinjani
 Data:
 8 mai 2008 
 
 Fotograf:
 Agnes Sim
 Locație:
 Borobudur, Indonezia
 Model:
 Big Stupa
 Data:
 12 iunie 2008 
 
 Fotograf:
 Nino Satria
 Locație:
 Taman Safari Indonezia
 Model:
 Tally Giraffe
 Data:
 16 august 2009 
 
 Fotograf:
 Timo Balk
 Locație:
 Ubud, Bali, Indonezia
 Model:
 ofertele
 Data:
 20 decembrie 2009 
 
 Fotograf:
 Aris Wjay
 Locație:
 Uluwatu-Bali
 Model:
 Plaja frumoasa
 Data:
 20 iulie 2011 
 

Acum, dacă ne deschidem index.html în browser, avem ceva de genul:

Pasul 30

Încă trebuie să reparăm aspectul cursorului folosind CSS.

 #slidewrap poziție: absolut; #slider position: relative; înălțime: auto; lățime: 920px; frontieră: 10px solid #fff; box-shadow: 0 0 5px # 444; margin: 10px;  .ribbon background: adresa URL transparentă (img / info-bg.png) no-repeat; height: 482px; lățime: 192px; Poziția: absolută; dreapta: 40px; sus: -3px; z-index: 50;  #slider img poziție: absolută; top: 0px; stânga: 0px; display: none;  

Asta este ceea ce avem acum.

În prezent, am legat pluginul slider Nivo, dar nu am cuplat scenariul. Deci, haideți să conectați scriptul prin adăugarea acestor funcții JavaScript între și element.

Pasul 31: Stilul cursorului

Pasul final este adăugarea stilului cursorului.

 / * Stilurile Nivo Slider * / .nivoSlider poziție: relativă;  .nivoSlider img poziție: absolută; top: 0px; stânga: 0px;  / * Dacă o imagine este înfășurată într-o legătură * / .nivoSlider a.nivo-imageLink poziție: absolută; top: 0px; stânga: 0px; lățime: 100%; înălțime: 100%; de frontieră: 0; padding: 0; margin: 0; z-index: 6; display: none;  / * Feliile și cutiile din Slider * / .nivo-slice display: block; Poziția: absolută; z-index: 5; înălțime: 100%;  .nivo-box display: bloc; Poziția: absolută; z-index: 5;  .nivo-directionNav display: none! important .nivo-html-caption afișare: nici unul;  .nivo-caption poziție: absolută; dreapta: 20px; text-align: center; sus: 130 x; lățime: 192px; z-index: 60;  .nivo-caption p margine: 0 .nivo-caption.title font-style: italic .nivo-controlNav poziție: absolut; bottom: 10px; dreapta: 20px; înălțime: 15px; lățime: 192px; text-align: center; display: block; z-index: 51;  .nivo-controlNav fundal: centru urgent (img / button.png) transparent; display: inline-block; înălțime: 14px; lățime: 14px; text-liniuță: -9999px; cursor: pointer;  .nivo-controlNav.activ fond: adresa transparentă (img / button_active.png);  

Rezultat final + Descărcare

Acesta este rezultatul nostru final, faceți clic aici pentru a vedea demo-ul de lucru.

Nu puteți realiza un anumit pas? Iată fișierul PSD al rezultatului și proiectul complet pe care îl puteți testa și juca.

• Imagine Slider Tutorial PSD Fișier
• Image Slider Tutorial Proiect complet