Jak utworzyć suwak obrazu za pomocą Photoshopa i jQuery

Niewątpliwie suwak obrazu jest jednym z najczęściej używanych elementów w biznesowym projekcie stron internetowych, ze względu na jego stosunkowo duży rozmiar, który jest w stanie przyciągnąć uwagę odwiedzających po przybyciu na stronę. Chociaż sieć zaczęła ponownie zastanawiać się nad użytecznością suwaka obrazu, nadal jest uważana za obowiązkową naukę dla nowicjusza w branży projektowania stron internetowych.

W tym samouczku do projektowania stron internetowych nauczymy się tworzyć niestandardowy suwak obrazu powyżej za pomocą programu Photoshop, który można wyświetlić tutaj. Nie tylko zilustrujemy to w Photoshopie, ale także przekształcimy go w funkcjonalny projekt, przekształcając go w HTML / CSS i dodając jQuery ze względu na jego niesamowity efekt przesuwny.

Brzmi jak wiele skomplikowanych bitów, ale w rzeczywistości jest całkiem prosty i bardzo łatwy do zrozumienia, zacznijmy wtedy!

Bardziej zainteresowany przyjęciem suwaka obrazu i dostosowaniem go po drodze? Oto posty dedykowane dla Ciebie.

Suwak obrazu: 23 suwaki jQuery
Suwak obrazu: 18 wtyczek WordPress

Rozpoczęcie pracy

Do tego samouczka potrzebne są następujące zasoby:

26 powtarzalnych wzorów pikseli z PSDfreemium.
biblioteka jQuery
Wtyczka Nivo Slider
Modernizr
Znaleziono tekstury papieru od VandelayPremier
(Alternatywnie) 13 Stary papier HQ Tekstury z overdosse
Rinjani by Ciaciya
Stupa autorstwa Agnieszki Sim
Tally by Nino Satria
Ofiary Timo Balka
Uluwatu-Bali autorstwa Arisa Wjaya

Część I - Projektowanie suwaka obrazu

Krok 1: Konfigurowanie tła

Zacznij od utworzenia nowego pliku o rozmiarze 1000 × 700 px. Wypełnij tło kolorem # efc89e.

Dodaj nakładkę wzoru przy użyciu wzoru wolnego piksela z PSDfreemium.

Krok 2: Podstawa suwaka

Aktywuj narzędzie Prostokąt. Utwórz prostokąt o rozmiarze 940 × 450 px. Możesz użyć dowolnego koloru, to nie ma znaczenia.

Kliknij dwukrotnie warstwę, aby otworzyć okno dialogowe Styl warstwy. Dodaj styl warstwy Drop Shadow, Outer Glow i Stroke.

To jest wynik. Podstawa suwaka ma teraz ładną ramkę z miękkim cieniem za nią.

Krok 3

Dodaj zdjęcie i umieść je nad podstawą suwaka. Naciśnij Ctrl + Alt + G, aby przekształcić go w Maskę przycinającą i wstaw zdjęcie do suwaka.

Krok 4: Wstążka

Narysuj kształt prostokąta z kolorem # f4e1ae, który będzie używany jako wstążka.

Kliknij dwukrotnie warstwę kształtu i aktywuj fazowanie i płaskorzeźbę, nakładkę gradientu i nakładkę wzoru z następującymi ustawieniami.

Jest to wynik po dodaniu stylów warstw.

Krok 5

Dodajmy do wstążki teksturę papieru, aby była bardziej realistyczna. Umieść teksturę na wierzchu kształtu wstążki. Przekształć go w Maskę przycinającą, naciskając Ctrl + Alt + G.

Krok 6

Pomalujmy niektóre cienie i światła na wstążce. Utwórz nową warstwę nad wstążką. Pomaluj czerń na dolnej części wstążki. Przekonwertuj ją na Maskę przycinającą (Ctrl + Alt + G), a następnie zmniejsz jej krycie do 10%.

Krok 7

Powtórz poprzedni proces do górnej części wstążki. Ale tym razem dodaj podświetlenie, malując biel, a następnie zmniejsz jej krycie do 50%.

Krok 8: Ściegi

Aktywuj narzędzie Ołówek. Naciśnij F5, aby otworzyć ustawienie Pędzla. Ustaw rozmiar pędzla na 1 px i zwiększ odstępy, aż otrzymamy przerywaną linię na obszarze podglądu.

Krok 9

Narysuj czarną linię 1 px na wstążce. Zmniejsz jego krycie do 20%. Powiel warstwę naciskając Ctrl + J. Hit Ctrl + I, aby odwrócić jej kolor. Zwiększ krycie do 50%. Aktywuj narzędzie Przenieś, a następnie naciśnij raz strzałkę w dół i strzałkę w lewo, aby ją przesunąć.

Oto wynik oglądany przy powiększeniu 100%.

Krok 10

Powtórz ten proces, aby narysować inne ściegi po drugiej stronie wstążki.

Krok 11: Dodaj ozdobny kształt

Ustaw kolor pierwszego planu na szary. Użyj miękkiej szczotki o rozmiarze 1 px, aby narysować ozdobny kształt. Bądź kreatywny, możesz użyć dowolnego kształtu. Obok narysuj linię 1 px, a następnie wymaż jej zewnętrzną krawędź za pomocą miękkiego narzędzia Gumka. Powiel linię, odwróć ją w poziomie i umieść po drugiej stronie.

Krok 12

Zaznacz wszystkie ozdobne warstwy i połącz je w jedną warstwę, naciskając Ctrl + E. Duplikat kształtu, a następnie umieść go pod oryginalnym ozdobnym kształtem. Naciśnij Ctrl + I, aby odwrócić kolor. Aktywuj narzędzie Przenieś, a następnie naciśnij raz strzałkę w dół, aby przesunąć go o 1 px w dół.

Krok 13: Informacje o zdjęciu

Wpisz dane zdjęcia na wstążce.

Krok 14: Nawigacja

Następnie narysujemy kilka okręgów do nawigacji po slajdach. Narysuj kształt okręgu z kolorem: # 8d877c na dolnej części wstążki.

Dodaj cień wewnętrzny za pomocą następujących ustawień.

To jest wynik. Okrąg zamienia się teraz w płytką dziurę.

Krok 15

Przytrzymaj Alt, a następnie przeciągnij warstwę kształtu okręgu, aby ją powielić.

Krok 16

Ustawmy warunek aktywny na jednym z tych łączy. Wybierz jeden z kół i zmień jego kolor na # bebbb5. Dodaj wewnętrzny cień, gradientową nakładkę i obrys.

Krok 17

Przytrzymaj klawisz Ctrl, a następnie kliknij miniaturę podstawy wstążki w panelu Warstwy. Utwórz nową warstwę pod wstążką i wypełnij ją czarną. Aktywuj narzędzie Przesuń i naciśnij kilka razy strzałkę w lewo iw dół.

Krok 18

Zmiękcz, wykonując filtr rozmycia Gaussa. Kliknij Filtr> Rozmycie> Rozmycie gaussowskie.

Krok 19

Umieść cień wstążki nad warstwą suwaka suwaka. Przekształć go w Maskę przycinającą, naciskając Ctrl + Alt + G.

Krok 20

Zmniejsz krycie cienia do 40%.

Krok 21

Maluj cień wstążki na tle. Zmniejsz jego krycie do 20%.

Krok 22

Użyj narzędzia Pióro, aby cofnąć część wstążki. Ustaw jego kolor na # b68f63. Umieść go za suwakiem.

Jest to wynik oglądany przy powiększeniu 100%.

Krok 23

Duplikuj właśnie utworzony kształt i umieść go za górną krawędzią wstążki. Odwróć go pionowo.

Krok 24: Wynik końcowy w Photoshopie

To jest nasz ostateczny wynik w Photoshopie. Następnie będziemy nadal kodować go do funkcjonalnego suwaka.

Część II - Konwersja do HTML / CSS

Krok 25 - Konfigurowanie plików

Utwórz nowy folder o nazwie My-Photo-Slider. W tym folderze utwórz nowy pusty dokument HTML (index.html), pusty arkusz stylów (style.css) i folder obrazów (img). Do folderu musimy także dołączyć bibliotekę jQuery i wtyczkę Nivo Slider. Gdy używamy znaczników HTML5, musimy dodać hack IE, aby włączyć elementy HTML5 na IE 8 lub poniżej. W celu dostosowania IE użyjemy skryptu o nazwie Modernizr.

Krok 26 - Podstawowy znacznik HTML

otwarty index.html w ulubionym edytorze kodu. Zdefiniuj DOCTYPE (używamy HTML5), głowa elementy (gdzie dodajemy tytuł dokumentów i łączymy CSS i JavaScript (jQuery Library, Nivo Slider i Modernizr). Dodajemy również div wrapper (aby wyśrodkować układ), nagłówek element i opakowanie do slajdów.

      Moje zdjęcia slajdów

Krok 27 - Slice PSD

Otwórz makietę PSD i odetnij wszystkie niezbędne obrazy. Na zdjęciu spójrzmy na następujące zdjęcia z sxc.hu (wymagane logowanie, jeśli jeszcze nie masz konta, możesz zarejestrować się za darmo). Zmień rozmiar wszystkich obrazów do 920 × 430 px. Umieść wszystkie obrazy w folderze obrazów (img).

Rinjani by Ciaciya
Stupa autorstwa Agnieszki Sim
Tally by Nino Satria
Ofiary Timo Balka
Uluwatu-Bali autorstwa Arisa Wjaya

Krok 28 - Utwórz nagłówek

Dodaj następujące kody między

  Moje zdjęcia slajdów

Dodajmy teraz styl do nagłówka. Dodajemy również styl korpusu i elementów opakowania. Umieść wszystkie style w arkuszu stylów, style.css.

 / * Podstawowa stylizacja * / body background: transparent url (img / bg.jpg); czcionka: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; margines: 0; dopełnienie: 0;  a outline: 0 none #pagewrap margin: 120px auto; dopełnienie: 0; pozycja: względna; wysokość: 100%; szerokość: 960px;  header display: block; float: dobrze; margines prawy: 40px; szerokość: 192px; z-index: 52; pozycja: względna;  h1 background: transparent url (img / separator.png) środkowy dół bez powtórzenia; / * Dodaj linię separatora poniżej tytułu * / font-size: 18px; waga czcionki: pogrubiona; wysokość: 70px; line-height: 1.1; margines: 55px 10px 0; wyrównywanie tekstu: środek; text-transform: wielkie litery;

Krok 29 - Dodaj suwak zdjęcia

Teraz dodamy kod do głównej części naszego dokumentu, suwaka do zdjęć. Dodajmy najpierw zdjęcia. Umieść następujące kody między

Następnie dodaj wstążkę i podpis do zdjęć.

 
  Fotograf:
 Enrico Nunziati
 Lokalizacja:
 Pustynia Namib
 Model:
 Dead Vlei
 Data:
 18 marca 2011 r 
  Fotograf:
 Lina Dhammanari
 Lokalizacja:
 Wyspa Lombok, Indonezja
 Model:
 Góra Rinjani
 Data:
 8 maja 2008 
  Fotograf:
 Agnes Sim
 Lokalizacja:
 Borobudur, Indonezja
 Model:
 Wielka Stupa
 Data:
 12 czerwca 2008 
  Fotograf:
 Nino Satria
 Lokalizacja:
 Taman Safari Indonezja
 Model:
 Tally Giraffe
 Data:
 16 sierpnia 2009 r 
  Fotograf:
 Timo Balk
 Lokalizacja:
 Ubud, Bali, Indonezja
 Model:
 Oferty
 Data:
 20 grudnia 2009 
  Fotograf:
 Aris Wjay
 Lokalizacja:
 Uluwatu-Bali
 Model:
 Piękna plaża
 Data:
 20 lipca 2011 r

Teraz, jeśli otworzymy index.html w przeglądarce mamy coś takiego:

Krok 30

Nadal musimy poprawić wygląd suwaka za pomocą CSS.

 #slidewrap position: absolute; #slider position: relative; height: auto; szerokość: 920px; border: 10px solid #fff; box-shadow: 0 0 5px # 444; margines: 10px;  .ribbon background: transparent url (img / info-bg.png) no-repeat; wysokość: 482px; szerokość: 192px; pozycja: absolutna; prawo: 40px; top: -3px; indeks z: 50;  #slider img position: absolute; top: 0px; left: 0px; Nie wyświetla się;

Oto, co mamy teraz.

Obecnie połączyliśmy wtyczkę suwaka Nivo, ale nie podpięliśmy skryptu. Podłączmy więc skrypt, dodając funkcje JavaScript między i element.

Krok 31: Styl suwaka

Ostatnim krokiem jest dodanie stylu suwaka.

 / * Style Nivo Slider * / .nivoSlider position: relative;  .nivoSlider img position: absolute; top: 0px; left: 0px;  / * Jeśli obraz jest zawinięty w link * / .nivoSlider a.nivo-imageLink position: absolute; top: 0px; left: 0px; szerokość: 100%; wysokość: 100%; granica: 0; dopełnienie: 0; margines: 0; indeks z: 6; Nie wyświetla się;  / * Plasterki i pola w Sliderze * / .nivo-slice display: block; pozycja: absolutna; indeks z: 5; wysokość: 100%;  .nivo-box display: block; pozycja: absolutna; indeks z: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption position: absolute; right: 20px; wyrównywanie tekstu: środek; top: 130px; szerokość: 192px; z-index: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute; bottom: 10px; right: 20px; wysokość: 15px; szerokość: 192px; wyrównywanie tekstu: środek; Blok wyświetlacza; z-index: 51;  .nivo-controlNav a background: transparent url (img / button.png) centrum bez powtórzeń; wyświetlacz: blok śródliniowy; wysokość: 14px; szerokość: 14px; wcięcie tekstu: -9999px; cursor: pointer;  .nivo-controlNav .active background: transparent url (img / button_active.png);

Ostateczny wynik + Pobierz

To jest nasz ostateczny wynik, kliknij tutaj, aby zobaczyć działające demo.

Nie możesz osiągnąć określonego kroku? Oto wynik pliku PSD i kompletny projekt do przetestowania i zabawy.

Samouczek suwaka obrazu Plik PSD
Image Slider Tutorial Kompletny projekt