Chương 18: Tạo hình động cho trang web Nội dung trang thuộc quyền © Bá tước Monte Cristo - Final Fantasy có thểđược in để dùng với mục đích cá nhân phi thương mại Nếu bạn muốn ơn liên lạc với tơi phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Để cho nội dung trang web bạn sinh động hơn, bạn dùng ImageReady để hình Gif động từ hình đơn Với kích thước tệp tin nén, hình Gif động hiển hết trình duyệt web ImageReady cho phép bạn tạo hình động sáng tạo với cụ dễ sử dụng tiện Trong học bạn học • Mở hình gồm nhiều layer để sử dụng làm hình cho hiệu ứng • Sử dụng lúc Layer Palette Animation Palette để tạo chuỗi • Thay đổi frame đơn, nhiều frame toàn frame • Sử dụng lệnh Tween để tạo bước chuyển hình mịn màng với thơng số Opacity vị trí • Xem trước hình động ImageReady trình duyệt • Lưu lại hình động cách sử dụng Optimize Tạo hình động Trong Adobe ImageReady, bạn tạo hình động từ hình đơng cách sử dụng file định dạng GIF Một hình GIF động chuỗi hình ảnh Frame Mỗi frame www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web frame trước chút tạo ảo giác chuyển động cho mắt xem với tốc độ di chuyển nhanh Bạn tạo hình động • Sử dụng nút Duplicate Current Frame Animation Palette để tạo frame, sau Layer Palette để xác định hình Frame • Bằng cách sử dụng lệnh Tween để tự tạo chuỗi hình nhiều layer có độ vị trí hiệu ứng khác Bằng cách ImageReady giúp bạn tạo đoạn" trình từ lúc đầu đến lúc cuối Những giai đoạn phần giác chuyển động mắt frame tạo cảm giác hình mờ dần d • Bằng cách mở hình gồm nhiều layer Photoshop ImageReady để tạo với layer thành Khi tạo chuỗi hình động, bạn nên chọn thẻ Original cửa sổ hình ảnh khơng u cầu ImageReady phải tái tối ưu hố hình bạn chỉnh sửa nội dung hình động phải có phần mở rộng bắt buộc GIF Quicktime Bạn tạo phần mở rộng JPEG Thơng tin thêm làm việc với layer hình Làm việc với layer phần quan trọng việc tạo hình động ImageReady bạn đặt thành phần layer riêng biệt cho phép bạn thay đổi vị trí thành phần thông qua chuỗi Thay đổi frame riêng định nghĩa "Những thay đổi bạn tạo cho layer đến frame chọn Bởi mặc định, thay đổi bạn tao cho layer sử dụng lệnh Palette tuỳ chọn, bao gồm mức Opacity layer, chếđộ hồ trộn, tính ẩn hiện, vị trí style gọi chung frame riêng Tuy nhiên bạn áp dụng thay đổi layer frame hình động cách sử dụng nút có Layer Thay đổi tồn cục: Những thay đổi tác động đến tất frame mà bao gồm Những thao tác gây thay đổi cho đơn vị pixel tơ vẽ, lệnh tơng màu độ sáng tối, lọc, gõ chữ lệnh chỉnh sửa ảnh khác gọi thay đổi Mỗi frame tạo copy frame trước nó, bạn chỉnh cách chỉnh sửa layer Bạn áp dụng thay đổi frame nhóm frame tồn hình www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web Bắt Trong học bạn làm việc với tập hợp hình ảnh thiết kếđể xuất web cơng ty nước giải Tìm đến thư mục Lesson18 nhấp đúp vào thư mục 18End.html để mở we Trang web bao gồm vùng có hình động: Chữ "Making Waves", cá voi lên biển, cơng thức hố học nước di chuyển vào hình cá heo bơi nhả bong bóng phía trước Chữ nút trang web chỉđề "làm Khi bạn xem xong, đóng trình duyệt lại để làm việc Khởi động Adobe ImageReady bạn không cần dùng Photoshop Thiết lập môi trường làm việc cho Trước bạn bắt đầu với học này, bạn thiết lập vùng làm việc đặc biệt cho việc liên quan đến hình động Nếu bạn có vùng làm việc phù hợp với công việc thấy thoải mái tiết kiệm nhiều thời ImageReady có mơi trường làm việc thiết lập sẵn Interactivity Palette Locations, biết tính bạn học chương trước có liên quan đến giao diện học phạm vi hình động, bạn giảm số Palette mở mặc định Chọn File > Open chọn DoLayer Palettehin.psd thư mục Lesson18 (Mọi thứ chuẩn bị cho bạn, bạn khơng cần phải phóng to mở rộng cửa sổ làm việc nà Chọn Color, Web Content Slice Chọn Window > Animation để mở Animation Palette Kéo góc phía bên phải Palette để mở rộng bạn tận dụng khoảng trống vùng làm (Tuỳ chọn) Bạn di chuyển Animation Palette vào gần cửa sổ hình ảnh để cửa sổ bạn phải làm việc gần thao tác bạn nhanh www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web Chọn Window > Workspace > Save 6.Gõ chữ 18_Animation hộp thoại Save Workspace Bây bạn nhanh chóng quay lại kích thước ban đầu vị trí Palette bất cách chọn Window > Workspace Tạo hình động cách ẩn Có lẽ cách thức đơn giản để tạo hình động bước cho ẩn mắt layer Layer Palette Ví dụ, bạn tạo hình động đổi tư cho đối tượng di chuyển lên phía trước Hình DoLayer Palettehin.psd bao gồm layer, bạn bỏ giây để xem qua Layer tiến hành với hiệu ứng động đơn giản với hai layer DoLayer Chuẩn bị Layer Bạn làm việc với Layer Comp phần trước sách ImageReady có tương tự làm cho cơng việc tạo hình động trở nên Trong Layer Palette, kiểm tra xem biểu tượng mắt có xuất gần layer DoLayer Palettehin không ô vuông cịn lại khơng có www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web Trong Layer Comps Palette, nhấp chuột chọn nút Create New Layer Trong hộp thoại New Layer Comp gõ DoLayer Palettehin sau kiểm tra xem lựa có chọn không trước bạn Một Layer Comp mới, DoLayer Palettehin 1, xuất Layer Trong Layer Palette, nhấp vào biểu tượng mắt layer DoLayer Palettehin đểẩn sau cho mắt layer DoLayer www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web Tạo Layer Comp mới, DoLayer Palettehin 2, sử dụng cách Nhấp vào ô vuông bên cạnh Layer Comp DoLayer Palettehin để áp dụng tình trạng Layer Palette Một thẻ tên xuất ô vuông cho bạn biết Layer Comp ch Bây bạn có Layer Comps mà bạn sử dụng để làm điểm bắt đầu cho tạo hiệu ứng động Bắt đầu trình tạo hình Khi bạn bắt đầu, frame mặc định xuất Animation Palette Frame hiển thiết lập ẩn layer Layer Palette, trường hợp bạn thấy có hiển thị DoLayer Palettehin Background Frame chọn, biểu đường www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web xanh bao xung quanh, cho bạn biết bạn chỉnh sửa nội dung cách hình Trong Animation Palette, nhấp vào nút Duplicate Current Frame để tạo Trong LCP, nhấp vào ô vuông hiển thị thẻ tên Animation Paletteply This Layer Layer Comp DoLayer Palettehin Bạn ý đến Layer Palette bạn thấy layer Palettehin bịẩn layer DoLayer Palettehine www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web Trong Animation Palette, chọn frame Trong cửa sổ hình ảnh, cá heo quay lại tình đầu có Layer Chọn Frame sau frame để tự bạn xem trước hiệu ứng động Tìm đến frame xem trước hiệu ứng Bạn sử dụng nhiều cách để xem trước kéo qua frame hiệu ứng động chức điều khiển Animation Layer Palette điều quan trọng để nắm trình tạo ảnh Bạn thử xem hiệu ứng động cách tự chọn frame frame Trong phần thử vài cách khác để xem trước hiệu ứng hình động ImageReady Bạn hiệu ứng động trình duyệt A: Looping B: Chọn frame đầu C: Chọn frame trước D: Xem/ Dừng hiệu ứng E: Chọn frame kế www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web F: Nút G: Tạo frame H: Xoá Trong Animation Palette, bạn chọn tuỳ chọn Forever menu xổ Looping Nhấn vào nút Select Previous Frame để di chuyển sang frame khác (Bạn thử lập lại thao tác thật nhanh để xem hiệu ứng động xuất cửa sổ Trong Layer Palette, nhấp vào nút Backward Forward góc phía bên trái bạn có kết tương tự nhưở bước A Nút quay lại Layer B Nút tiến tới Layer Nhấn vào nút Play Animation Palette để xem trước hiệu ứng động Nút Play nút Stop mà bạn nhấn vào để dừng Chọn File > Preview In > chọn trình duyệt web menu phụ Preview In Khi bạn khỏi trình duyệt quay lại Mẹo nhỏ: bạn dùng phím tắt Ctrl-Alt-P để mở nhanh trình duyệt nhấn duyệt hộp Chọn file > Save Trong hộp thoại Save As, mở thư mục Lesson 18 nhấn vào biểu tượng Create New My_gifs cho tên thư mục, sau mở Vẫn hộp thoại Save As, gõ chữ Palettehin.gif đểđặt tên cho file nhấn www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web Chuẩn bị copy layer cho hiệu ứng Bây bạn làm động thành phần khác hình cá heo, thêm vào hiệu có Trong phần này, bạn sử dụng kỹ ẩn layer cho khác để tạo hiệu ứng động, lần bạn tạo layer khác copy biến chuyến Trước thêm layer vào hình có chứa hiệu ứng động, bạn nên tạo Bước giúp bạn bảo vệ frame có khỏi bịảnh hưởng thay đổi không đ Trong Animation Palette, chọn frame nhấp vào nút Duplicate Current Frame để tạo (Frame 3) nằm kế sau frame Vẫn để chọn Mở menu Animation Palette chọn lệnh New Layer Visible in All States/Frame để (bỏ dấu www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web Bạn ý đến đường viền màu sáng bao quanh layer Khi hộp thoại Layer Style mở ra, nhấn OK để chấp nhận giá trị Nhân đôi layer cách nhấn vào nút Duplicate Trong Layer Palette, nhấp đúp vào hiệu ứng Outer Glow cho layer số "2" để mở hộp Style Đánh dấu vào hộp kiểm Preview sau thiết lập tuỳ • • Ở Spread, kéo trượt đến giá trị Ở Size, kéo trượt xuống cịn 49 Nhấn OK sau chọn File > Tweening frame cho thay đổi Layer Như bạn thấy học này, tính Tween giúp bạn tiết kiệm nhiều thời phải dùng để làm cơng việc buồn tẻ yêu cầu độ xác cao Lần dụng lại lệnh Tween để tạo hiệu ứng động cho thay đổi Bạn hoàn thiện hiệu ứng vịng sáng cách nhân đơi thêm frame di đến phía cuối hình động Kết hình động cho cảm giác vịng sáng hình số Trong Animation Palette, chọn Chọn Tween từ menu Animation Trong hộpt hoại Tween, thiết lập thông www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web • Cho lựa chọn Tween With, chọn Next • Ở Frame to Add, gõ vào • Dưới Layer, chọn All • Dưới Parameters, chọn Nhấn OK đểđóng hộp Trong Animation Palette, chọn frame 6, sau chọn nút Duplicate Current Frame để Kéo frame phia cuối Animation Palette cho phía bên phải Chọn File > Giữ vùng suốt chuẩn bịđể tối ưu Tiếp theo bạn tối ưu hố hình H20 ởđịnh dạng Gif với hình suốt xem trước động trình duyệt web Bạn nên nhớ có định dạng Gif hỗ trợ Chúng thêm layer Backdrop hình H2O.psd bạn quan sát kết dễ www.vietphotoshop.com - Dịch Bá tước Chương 18: Tạo hình động cho trang web Layer khơng cần thiết cho trang web bạn tối ưu hố hình với việc mà bạn phải làm ẩn layer Trong menu Animation Palette, chọn Select All Trong Layer Palette, nhấp vào biểu tượng mắt layer Backdrop đểẩn fra Trong Optimize Palette, thiết lập thơng • Ở định dạng file • Dưới Color Talbe, chọn Perceptual cho Reduction 256 cho • Dưới Transparency, đánh dấu hộp kiểm Transparency (để giữ vùng suốt cho • Cho Matte, chọn màu trắng từ palette Với tất frame chọn Animation Palette, nhấp chuột phải vào frame Animation Palette để mở menu chữ Disposal Method chọn Restore to Với tất frame chọn, sử dụng menu phía frame 0.1 Ở Menu Animation Palette, chọn Optimize Trong hộpt hoại Optimize Animation, đánh dấu hai hộp kiểm Bounding Box Removal nhấn Lựa chọn Disposal - Restore to Background Automatic - xoá frame chọn trước thứ hiển thị Vì loại bỏ khả hiển thị "tàn dư chếđộ cũ" Lựa chọn Do Not giữ lại frame Lựa chọn Automatic phù hợp với hầu hết động Tuỳ biến lựa chọn phương pháp loại bỏ dựa có vắng mặt độ frame loại bỏ frame chọn frame có chứa layer Thiết lập phương pháp frame disposal (loại bỏ Phương pháp Frame Disposal xem xét có nên xố frame hay không trước frame Bạn chọn phương pháp loại bỏ bạn làm việc với hình động bao gồm suốt để xác định có nên cho hiển thị layer thông qua vùng suốt frame khô www.vietphotoshop.com - Dịch Bá tước