Làm thế nào để tạo Parallax Scrolling bằng cách sử dụng Adobe Muse

Một trong những kỹ thuật “nóng nhất” trên web hiện nay là di chuyển sai. Tất cả chúng ta đã đến các trang web mà bạn xoay bánh xe cuộn trên chuột và nội dung trên trang di chuyển lên và xuống hoặc trên trang khi bạn xoay bánh xe chuột.

Đối với những người mới thiết kế web và thiết kế đồ họa, kỹ thuật này có thể cực kỳ khó khăn để đạt được do số lượng CSS cần thiết.

Nếu điều đó mô tả bạn, có một số ứng dụng có thể chỉ hấp dẫn các nghệ sĩ đồ họa. Về cơ bản, họ sử dụng một cách tiếp cận bố trí trang quen thuộc với các trang web, có nghĩa là không có nhiều, nếu có, mã hóa có liên quan. Một ứng dụng thực sự nổi bật là Adobe Muse.

Công việc được các chuyên gia đồ họa thực hiện bằng Muse khá tuyệt vời và bạn có thể thấy một mẫu về những gì bạn có thể làm bằng cách truy cập trang Muse của Ngày . Mặc dù các chuyên gia web có xu hướng coi Muse như là một loại đồ chơi “wind-up”, nó cũng được các nhà thiết kế sử dụng để tạo ra các nguyên mẫu web và thiết bị di động và cuối cùng sẽ được trao cho các nhà phát triển trong nhóm của họ.

Một kỹ thuật cực kỳ dễ thực hiện với Muse là di chuyển thị sai và, nếu bạn muốn xem phiên bản hoàn chỉnh của bài tập Chúng tôi sẽ hướng dẫn bạn, trỏ trình duyệt của bạn đến trang này. Khi bạn cuộn bánh xe cuộn của chuột, văn bản dường như di chuyển lên hoặc xuống trang và hình ảnh thay đổi.

Băt đâu nao.

01 trên 07

Tạo một trang web

Khi bạn khởi chạy Muse, nhấp vào liên kết New Site . Thao tác này sẽ mở Thuộc tính trang web mới . Dự án này sẽ được thiết kế cho ứng dụng dành cho máy tính để bàn và bạn có thể chọn nó trong trình đơn Bố cục ban đầu . Bạn cũng có thể đặt giá trị cho số cột, chiều rộng máng xối, lề và vùng đệm. Trong trường hợp này, chúng tôi không lo lắng về điều này và chỉ cần nhấp vào OK .

02 trên 07

Định dạng trang

Khi bạn thiết lập các thuộc tính của trang và nhấn OK, bạn đã được đưa đến cái được gọi là khung nhìn Plan . Có một trang chủ ở trên cùng và một trang chính ở dưới cùng của cửa sổ. Chúng tôi chỉ cần một trang. Để đến Design View, chúng tôi đã nhấp đúp vào Trang chủ đã mở giao diện.

Bên trái là một vài công cụ cơ bản và bên phải là một loạt các bảng được sử dụng để thao tác nội dung trên trang. Dọc trên cùng là các thuộc tính, có thể được áp dụng cho trang hoặc bất kỳ thứ gì được chọn trên trang. Trong trường hợp này, chúng tôi muốn có một nền đen. Để thực hiện điều này, chúng tôi nhấp vào chip màu của Trình duyệt điền và chọn màu đen từ Bộ chọn màu.

03 trên 07

Thêm văn bản vào trang

Bước tiếp theo là thêm một số văn bản vào trang. Chúng tôi đã chọn Công cụ Văn bản và đã vẽ ra một hộp văn bản. Chúng tôi đã nhập từ "Chào mừng" và, trong Thuộc tính đặt văn bản thành Arial, 120 pixel Trắng. Trung tâm liên kêt.

Sau đó, chúng tôi chuyển sang công cụ Selection, nhấp vào Textbox và đặt vị trí Y của nó là 168 pixel từ trên cùng. Khi hộp văn bản vẫn được chọn, chúng tôi đã mở bảng điều chỉnh Căn chỉnh và căn chỉnh hộp văn bản đến giữa.

Cuối cùng, với hộp văn bản được chọn, chúng tôi đã giữ phím Option / AltShift và tạo bốn bản sao của hộp văn bản. Chúng tôi đã thay đổi văn bản và vị trí Y của mỗi bản sao thành:

Bạn sẽ nhận thấy, khi bạn đặt vị trí của mỗi hộp văn bản, trang sẽ đổi kích thước để phù hợp với vị trí của văn bản.

04/07

Thêm trình giữ chỗ hình ảnh

Bước tiếp theo là đặt hình ảnh giữa các khối văn bản.

Bước đầu tiên là chọn công cụ Rectangle Tool và vẽ một hộp của chúng tôi trải dài từ một bên của trang này sang trang khác. Với hình chữ nhật được chọn, chúng tôi đặt chiều cao của nó là 250 pixelvị trí Y của nó là 425 pixel . Kế hoạch là để họ luôn luôn kéo dài hoặc ký hợp đồng với chiều rộng trang để phù hợp với chế độ xem trình duyệt của người dùng. Để thực hiện điều này, chúng tôi đã nhấp vào nút chiều rộng 100% trong Thuộc tính. Điều này có nghĩa là màu xám trong giá trị X và để đảm bảo hình ảnh luôn là 100% chiều rộng khung nhìn trong trình duyệt.

05/07

Thêm hình ảnh vào Trình giữ chỗ hình ảnh

Với Rectangle được chọn, chúng tôi đã nhấp vào liên kết Fill - không phải là Color Chip - và nhấp vào mực I mage để thêm hình ảnh vào hình chữ nhật. Trong vùng Lắp ghép , chúng tôi đã chọn Scale To Fit và nhấp vào tay cầm trung tâm trong khu vực Vị trí để đảm bảo hình ảnh được thu nhỏ từ trung tâm của hình ảnh.

Tiếp theo, chúng tôi đã sử dụng kỹ thuật Option / Alt-Shift-drag để tạo bản sao của hình ảnh giữa hai khối văn bản đầu tiên, mở bảng Fill và đổi hình ảnh cho một hình khác. Chúng tôi đã làm điều này cho hai hình ảnh còn lại là tốt.

Với hình ảnh tại chỗ, đã đến lúc thêm chuyển động.

06 trên 07

Thêm Parallax Scrolling

Có một số cách để thêm di chuyển thị sai trong Adobe Muse. Chúng tôi sẽ chỉ cho bạn một cách đơn giản để làm điều đó.

Với bảng Fill đang mở, hãy nhấp vào tab Cuộn và, khi nó mở ra, hãy nhấp vào hộp kiểm Chuyển động .

Bạn sẽ thấy các giá trị cho Khởi động ban đầucuối cùng . Điều này xác định tốc độ di chuyển của hình ảnh liên quan đến Scroll Wheel. Ví dụ, giá trị 1.5 sẽ di chuyển hình ảnh nhanh gấp 1,5 lần so với bánh xe. Chúng tôi đã sử dụng giá trị 0 để khóa hình ảnh tại chỗ.

Mũi tên ngang và dọc xác định hướng chuyển động. Nếu giá trị là 0, hình ảnh sẽ không nhúc nhích bất kể bạn bấm mũi tên nào.

Giá trị trung bình - Vị trí chính - cho biết điểm bắt đầu di chuyển hình ảnh. Dòng trên hình ảnh bắt đầu, đối với hình ảnh này, 325 pixel từ đầu trang. Khi cuộn đạt đến giá trị đó, hình ảnh bắt đầu di chuyển. Bạn có thể thay đổi giá trị này bằng cách thay đổi giá trị này trong hộp thoại hoặc bằng cách nhấp và kéo điểm ở đầu dòng lên hoặc xuống.

Lặp lại điều này cho các hình ảnh khác trên trang.

07/07

Kiểm tra trình duyệt

Tại thời điểm này, chúng tôi đã hoàn thành. Điều đầu tiên chúng tôi đã làm, vì lý do rõ ràng, là chọn File> Save Site . Để kiểm tra trình duyệt, chúng tôi chỉ cần chọn Tệp> Trang xem trước trong Trình duyệt . Thao tác này đã mở trình duyệt mặc định của máy tính của chúng tôi và khi trang được mở, chúng tôi đã bắt đầu cuộn.