Cách tạo Thanh trượt hình ảnh bằng Photoshop & jQuery

Không còn nghi ngờ gì nữa, thanh trượt hình ảnh là một trong những yếu tố được sử dụng phổ biến nhất trong thiết kế web kinh doanh, do kích thước tương đối lớn có thể thu hút sự chú ý của khách truy cập khi họ đến trang web. Mặc dù web đã bắt đầu suy nghĩ lại về khả năng sử dụng của thanh trượt hình ảnh, nó vẫn được coi là phải học cho người mới của ngành thiết kế web.

Trong hướng dẫn thiết kế web này, chúng tôi sẽ tìm hiểu cách tạo thanh trượt hình ảnh tùy chỉnh ở trên bằng Photoshop, bạn có thể xem trước kết quả cuối cùng từ đây. Chúng tôi không chỉ minh họa nó trong Photoshop, chúng tôi cũng sẽ biến nó thành một thiết kế chức năng bằng cách chuyển đổi nó thành HTML / CSS và thêm jQuery cho hiệu ứng trượt tuyệt vời của nó.

Nghe có vẻ như có nhiều bit phức tạp liên quan, nhưng thực tế nó khá đơn giản và rất dễ hiểu, hãy bắt đầu sau đó!

Quan tâm hơn về việc áp dụng một thanh trượt hình ảnh và tùy chỉnh nó trên đường? Dưới đây là những bài viết dành riêng cho bạn.

Thanh trượt hình ảnh: 23 thanh trượt jQuery
Thanh trượt hình ảnh: 18 plugin WordPress

Bắt đầu

Đối với hướng dẫn này, bạn sẽ cần các tài nguyên sau:

26 mẫu pixel có thể lặp lại từ PSDfreemium.
Thư viện jQuery
Plugin Nivo Slider
Modernizr
Tìm thấy kết cấu giấy từ VandelayPremier
(Thay thế) 13 HQ Kết cấu giấy cũ từ quá liều
Rinigate của Ciaciya
Bảo tháp của Agnes Sim
Kiểm đếm bởi Nino Satria
Cung cấp bởi Timo Balk
Uluwatu-Bali của Aris Wjay

Phần I - Thiết kế thanh trượt hình ảnh

Bước 1: Thiết lập nền

Bắt đầu bằng cách tạo một tệp mới với kích thước 1000 × 700 px. Tô màu nền với màu # efc89e.

Thêm Lớp phủ mẫu bằng cách sử dụng mẫu pixel miễn phí từ PSDfreemium.

Bước 2: Cơ sở trượt

Kích hoạt công cụ hình chữ nhật. Tạo một hình chữ nhật với kích thước 940 × 450 px. Bạn có thể sử dụng bất kỳ màu nào, nó không thành vấn đề.

Nhấp đúp vào lớp để mở hộp thoại Layer Style. Thêm Shadow Style Drop Shadow, Outer Glow và Stroke.

Đây là kết quả. Các cơ sở trượt bây giờ có một khung hình đẹp với bóng mềm phía sau nó.

Bước 3

Thêm một bức ảnh và đặt nó trên cơ sở trượt. Nhấn Ctrl + Alt + G để chuyển đổi nó thành Clipping Mask và chèn ảnh vào thanh trượt.

Bước 4: Ribbon

Vẽ một hình chữ nhật với màu # f4e1ae được sử dụng làm ruy băng.

Nhấp đúp vào lớp của hình dạng và kích hoạt Bevel và Chạm nổi, Lớp phủ Gradient và Lớp phủ mẫu với các cài đặt sau.

Đây là kết quả sau khi thêm Layer Styles.

Bước 5

Hãy thêm họa tiết giấy lên ruy băng để làm cho nó chân thực hơn. Đặt kết cấu trên đầu của hình dạng ruy băng. Chuyển đổi nó thành Clipping Mask bằng cách nhấn Ctrl + Alt + G.

Bước 6

Hãy vẽ một số bóng và nổi bật lên ruy băng. Tạo lớp mới phía trên ruy băng. Sơn màu đen ở phần dưới của ruy băng. Chuyển đổi nó thành Clipping Mask (Ctrl + Alt + G) và sau đó giảm Opacity xuống 10%.

Bước 7

Lặp lại quá trình trước đó đến phần trên của ruy băng. Nhưng lần này, thêm phần tô sáng bằng cách tô màu trắng và sau đó giảm Opacity xuống 50%.

Bước 8: Khâu

Kích hoạt công cụ bút chì. Nhấn F5 để mở cài đặt Brush. Đặt kích thước cọ thành 1 px và tăng khoảng cách cho đến khi chúng ta có một đường chấm chấm trên khu vực xem trước.

Bước 9

Vẽ 1 đường màu đen trên đầu ruy băng. Giảm Opacity của nó xuống 20%. Sao chép lớp bằng cách nhấn Ctrl + J. Nhấn Ctrl + I để đảo ngược màu của nó. Tăng Opacity lên 50%. Kích hoạt Move Tool và sau đó nhấn mũi tên xuống và mũi tên trái một lần để nhích nó.

Đây là kết quả được xem ở độ phóng đại 100%.

Bước 10

Lặp lại quy trình này để vẽ các mũi khâu khác trên một mặt khác của ruy băng.

Bước 11: Thêm hình dạng trang trí công phu

Đặt màu nền trước thành màu xám. Sử dụng cọ mềm với kích thước 1 px để vẽ hình trang trí công phu. Hãy sáng tạo, bạn có thể sử dụng bất kỳ hình dạng nào bạn thích. Bên cạnh nó, vẽ một đường 1 px và sau đó xóa cạnh ngoài của nó bằng Công cụ Eraser mềm. Nhân đôi dòng, lật nó theo chiều ngang và đặt nó ở phía bên kia.

Bước 12

Chọn tất cả các lớp trang trí công phu và hợp nhất nó thành một lớp bằng cách nhấn Ctrl + E. Hình dạng trùng lặp và sau đó đặt nó dưới hình dạng trang trí công phu ban đầu. Nhấn Ctrl + I để đảo ngược màu của nó. Kích hoạt Move Tool và sau đó nhấn mũi tên xuống một lần để đẩy nó xuống 1 px.

Bước 13: Thông tin hình ảnh

Nhập dữ liệu ảnh bên trong ruy băng.

Bước 14: Điều hướng

Tiếp theo, chúng tôi sẽ vẽ một số vòng tròn để điều hướng slide. Vẽ một hình tròn với màu sắc: # 8d877c ở phần dưới của dải ruy băng.

Thêm Bóng trong bằng các cài đặt sau.

Đây là kết quả. Vòng tròn đang biến thành một lỗ nông.

Bước 15

Giữ Alt và sau đó kéo lớp hình tròn để nhân đôi nó.

Bước 16

Hãy đặt điều kiện hoạt động trên một trong những liên kết này. Chọn một trong các vòng tròn và thay đổi màu của nó thành # bebbb5. Thêm Bóng trong, Lớp phủ Gradient và Stroke.

Bước 17

Giữ Ctrl và sau đó nhấp vào hình thu nhỏ cơ sở ruy băng trong Bảng điều khiển Lớp. Tạo lớp mới dưới ruy băng và tô màu đen. Kích hoạt Move Tool và nhấn mũi tên trái và xuống một vài lần.

Bước 18

Làm mềm nó bằng cách thực hiện bộ lọc Gaussian Blur. Nhấp vào Bộ lọc> Blur> Blur Gaussian.

Bước 19

Đặt bóng ruy băng trên lớp khung trượt. Chuyển đổi nó thành Clipping Mask bằng cách nhấn Ctrl + Alt + G.

Bước 20

Giảm độ mờ của bóng xuống 40%.

Bước 21

Vẽ bóng ruy băng trên nền. Giảm Opacity xuống 20%.

Bước 22

Sử dụng Pen Tool để vẽ lại một phần của ruy băng. Đặt màu của nó thành # b68f63. Đặt nó phía sau thanh trượt.

Đây là kết quả được xem ở độ phóng đại 100%.

Bước 23

Nhân đôi hình dạng mà chúng ta vừa tạo và đặt nó phía sau đỉnh của dải ruy băng. Lật nó theo chiều dọc.

Bước 24: Kết quả cuối cùng trong Photoshop

Đây là kết quả cuối cùng của chúng tôi trong Photoshop. Tiếp theo, chúng tôi sẽ tiếp tục mã nó thành một thanh trượt chức năng.

Phần II - Chuyển đổi thành HTML / CSS

Bước 25 - Thiết lập tệp

Tạo một thư mục mới gọi là My-Photo-Slider. Trong thư mục này, tạo một tài liệu HTML trống mới (index.html), biểu định kiểu trống (style.css) và thư mục cho hình ảnh (img). Chúng tôi cũng cần bao gồm thư viện jQuery và plugin Nivo Slider vào thư mục. Khi chúng tôi sử dụng đánh dấu HTML5, chúng tôi cần thêm một bản hack IE để kích hoạt các phần tử HTML5 trên IE 8 trở xuống. Chúng tôi sẽ sử dụng tập lệnh có tên Modernizr để chứa IE.

Bước 26 - Đánh dấu HTML cơ bản

Mở index.html trong trình soạn thảo mã yêu thích của bạn. Xác định TÀI LIỆU (chúng tôi sử dụng HTML5), cái đầu các phần tử (nơi chúng tôi thêm tiêu đề của các tài liệu và liên kết CSS và JavaScript (Thư viện jQuery, Nivo Slider và Modernizr). Chúng tôi cũng thêm một div trình bao bọc (để căn giữa bố cục), tiêu đề phần tử và trình bao bọc slide.

      Trang trình bày ảnh của tôi

Bước 27 - Cắt lát PSD

Mở mockup PSD và cắt ra tất cả các hình ảnh cần thiết. Đối với hình ảnh, hãy lấy các bức ảnh sau từ sxc.hu (yêu cầu đăng nhập, nếu bạn chưa có tài khoản, bạn có thể đăng ký miễn phí). Thay đổi kích thước tất cả các hình ảnh thành 920 × 430 px. Đặt tất cả các hình ảnh vào thư mục hình ảnh (img).

Rinigate của Ciaciya
Bảo tháp của Agnes Sim
Kiểm đếm bởi Nino Satria
Cung cấp bởi Timo Balk
Uluwatu-Bali của Aris Wjay

Bước 28 - Tạo tiêu đề

Thêm các mã sau vào giữa

và

  Trang trình bày ảnh của tôi

Bây giờ hãy thêm phong cách vào tiêu đề. Chúng tôi cũng thêm phong cách cho các yếu tố cơ thể và bao bọc. Đặt tất cả các kiểu vào biểu định kiểu, style.css.

 / * Kiểu dáng cơ bản * / body nền: url trong suốt (img / bg.jpg); phông chữ: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; lề: 0; đệm: 0;  a phác thảo: 0 none #pagewrap lề: 120px tự động; đệm: 0; vị trí: tương đối; chiều cao: 100%; chiều rộng: 960px;  tiêu đề display: block; phao: phải; lề phải: 40px; chiều rộng: 192px; chỉ số z: 52; vị trí: tương đối;  h1 nền: url trong suốt (img / separator.png) đáy trung tâm không lặp lại; / * Thêm một dòng phân cách bên dưới tiêu đề * / font-size: 18px; font-weight: in đậm; chiều cao: 70px; chiều cao dòng: 1.1; lề: 55px 10px 0; văn bản-align: trung tâm; biến đổi văn bản: chữ hoa;

Bước 29 - Thêm thanh trượt ảnh

Bây giờ chúng tôi sẽ thêm mã vào phần chính của tài liệu của chúng tôi, thanh trượt ảnh. Trước tiên hãy thêm ảnh. Đặt các mã sau đây vào giữa

và

Và sau đó thêm ruy băng và chú thích cho ảnh.

 
  Nhiếp ảnh gia:
 Enrico Nunziati
 Vị trí:
 Sa mạc Namib
 Mô hình:
 Vlei chết
 Ngày:
 Ngày 18 tháng 3 năm 2011 
  Nhiếp ảnh gia:
 Lina Dhammanari
 Vị trí:
 Đảo Lombok, Indonesia
 Mô hình:
 Núi Rinigate
 Ngày:
 Ngày 8 tháng 5 năm 2008 
  Nhiếp ảnh gia:
 Sim Agnes
 Vị trí:
 Borobudur, Indonesia
 Mô hình:
 Bảo tháp lớn
 Ngày:
 Ngày 12 tháng 6 năm 2008 
  Nhiếp ảnh gia:
 Nino Satria
 Vị trí:
 Taman Safari Indonesia
 Mô hình:
 Hươu cao cổ
 Ngày:
 Ngày 16 tháng 8 năm 2009 
  Nhiếp ảnh gia:
 Timo Balk
 Vị trí:
 Ubud, Bali, Indonesia
 Mô hình:
 Chào hàng
 Ngày:
 Ngày 20 tháng 12 năm 2009 
  Nhiếp ảnh gia:
 Aris Wjay
 Vị trí:
 Uluwatu-Bali
 Mô hình:
 Bãi biển đẹp
 Ngày:
 Ngày 20 tháng 7 năm 2011

Bây giờ, nếu chúng ta mở index.html trong trình duyệt, chúng ta có một cái gì đó như thế này:

Bước 30

Chúng tôi vẫn cần sửa lỗi xuất hiện của thanh trượt bằng CSS.

 #slidewrap vị trí: tuyệt đối; #slider vị trí: tương đối; chiều cao: tự động; chiều rộng: 920px; viền: 10px solid #fff; bóng hộp: 0 0 5px # 444; lề: 10px;  .ribbon nền: url trong suốt (img / thông tin-bg.png) không lặp lại; chiều cao: 482px; chiều rộng: 192px; vị trí: tuyệt đối; phải: 40px; đầu trang: -3px; chỉ số z: 50;  #slider img vị trí: tuyệt đối; đầu trang: 0px; trái: 0px; không trưng bày;

Đây là những gì chúng ta có bây giờ.

Hiện tại, chúng tôi đã liên kết plugin trượt Nivo nhưng chúng tôi chưa kết nối được tập lệnh. Vì vậy, hãy kết nối tập lệnh bằng cách thêm các hàm JavaScript này vào giữa và thành phần.

Bước 31: Kiểu trượt

Bước cuối cùng là thêm kiểu dáng của thanh trượt.

 / * Các kiểu trượt của Nivo * / .nivoSlider vị trí: tương đối;  .nivoSlider img vị trí: tuyệt đối; đầu trang: 0px; trái: 0px;  / * Nếu một hình ảnh được bọc trong một liên kết * / .nivoSlider a.nivo-imageLink vị trí: tuyệt đối; đầu trang: 0px; trái: 0px; chiều rộng: 100%; chiều cao: 100%; viền: 0; đệm: 0; lề: 0; chỉ số z: 6; không trưng bày;  / * Các lát và hộp trong Thanh trượt * / .nivo-lát display: block; vị trí: tuyệt đối; chỉ số z: 5; chiều cao: 100%;  .nivo-box display: block; vị trí: tuyệt đối; chỉ số z: 5;  .nivo-directionNav display: none! Quan trọng .nivo-html-caption display: none;  .nivo-chú thích vị trí: tuyệt đối; phải: 20px; văn bản-align: trung tâm; đầu trang: 130px; chiều rộng: 192px; chỉ số z: 60;  .nivo-caption p lề: 0 .nivo-caption .title font-style: italic .nivo-controlNav vị trí: tuyệt đối; dưới cùng: 10px; phải: 20px; chiều cao: 15px; chiều rộng: 192px; văn bản-align: trung tâm; hiển thị: khối; chỉ số z: 51;  .nivo-controlNav a nền: url trong suốt (img / button.png) trung tâm trung tâm không lặp lại; hiển thị: khối nội tuyến; chiều cao: 14px; chiều rộng: 14px; văn bản thụt lề: -9999px; con trỏ: con trỏ;  .nivo-controlNav .active nền: url trong suốt (img / button_active.png);

Kết quả cuối cùng + Tải xuống

Đây là kết quả cuối cùng của chúng tôi, bấm vào đây để xem bản demo hoạt động.

Không thể đạt được bước nhất định? Dưới đây là tệp PSD & dự án hoàn chỉnh để bạn kiểm tra và chơi với.

Hướng dẫn trượt hình ảnh tập tin PSD
Hướng dẫn hoàn thành dự án Slider Image