Chương 18. Tạo hình đồng hồ cho trang web

Tạo hình đồng hồ cho trang web

Chương 18: Tạo hình động cho trang web Photoshop CS Nội dung trang thuộc quyền © Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com Những viết in để dùng với mục đích cá nhân phi thương mại Nếu bạn muốn phát hành lại trang web bạn làm ơ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 - Final Fantasy www.vietphotoshop.com Để cho nội dung trang web bạn sinh động hơn, bạn dùng ImageReady để tạo 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 thị hầu 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ông cụ dễ sử dụng tiện lợi Trong học bạn học điều sau: • Mở hình gồm nhiều layer để sử dụng làm hình cho hiệu ứng động • Sử dụng lúc Layer Palette Animation Palette để tạo chuỗi động • Thay đổi frame đơn, nhiều frame toàn frame hình • Sử dụng lệnh Tween để tạo bước chuyển hình mịn màng với thơng số Layer Opacity vị trí • Xem trước hình động ImageReady trình duyệt web • Lưu lại hình động cách sử dụng Optimize Palette Tạo hình động ImageReady Trong Adobe ImageReady, bạn tạo hình động từ hình đơng cách sử dụng file động có định dạng GIF Một hình GIF động chuỗi hình ảnh Frame Mỗi frame khác với www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 18: Tạo hình động cho trang web Photoshop CS frame trước chút tạo ảo giác chuyển động cho mắt frame xem với tốc độ di chuyển nhanh Bạn tạo hình động cách sau: • Sử dụng nút Duplicate Current Frame Animation Palette để tạo frame, sau sử dụng Layer Palette để xác định hình Frame tương ứng • Bằng cách sử dụng lệnh Tween để tự tạo chuỗi hình nhiều layer có độ Opacity, vị trí hiệu ứng khác Bằng cách ImageReady giúp bạn tạo "giai đoạn" trình từ lúc đầu đến lúc cuối Những giai đoạn phần tạo ảo giác chuyển động mắt frame tạo cảm giác hình mờ dần rõ dần • Bằng cách mở hình gồm nhiều layer Photoshop ImageReady để tạo hình động với layer thành Frame Khi tạo chuỗi hình động, bạn nên chọn thẻ Original cửa sổ hình ảnh hì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 frame Một file hình động phải có phần mở rộng bắt buộc GIF Quicktime Bạn khơng thể tạo hình động có phần mở rộng JPEG PNG Thông tin thêm làm việc với layer hình động Làm việc với layer phần quan trọng việc tạo hình động ImageReady Bởi bạn đặt thành phần layer riêng biệt cho phép bạn thay đổi vị trí hình thức thành phần thông qua chuỗi frames Thay đổi frame riêng định nghĩa "Những thay đổi bạn tạo cho layer tác động đến frame chọn Bởi mặc định, thay đổi bạn tao cho layer sử dụng lệnh Layer Palette tuỳ chọn, bao gồm mức Opacity layer, chế độ hồ trộn, tính ẩn hiện, vị trí layer style gọi chung frame riêng Tuy nhiên bạn áp dụng thay đổi layer cho tất frame hình động cách sử dụng nút có Layer Palette Thay đổi toàn cục: Những thay đổi tác động đến tất frame mà bao gồm layer Những thao tác gây thay đổi cho đơn vị pixel tô vẽ, lệnh chỉnh sửa 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 toàn cục Mỗi frame tạo copy frame trước nó, bạn chỉnh sửa frame cách chỉnh sửa layer Bạn áp dụng thay đổi frame một, nhóm frame tồn hình động www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 18: Tạo hình động cho trang web Photoshop CS Bắt đầu Trong học bạn làm việc với tập hợp hình ảnh thiết kế để xuất trang web công ty nước giải khát Tìm đến thư mục Lesson18 nhấp đúp vào thư mục 18End.html để mở trình duyệt web Trang web bao gồm vùng có hình động: Chữ "Making Waves", cá voi lên chui xuống biển, cơng thức hố học nước di chuyển vào hình cá heo bơi đồng thời nhả bong bóng phía trước Chữ nút trang web đề "làm cảnh" Khi bạn xem xong, đóng trình duyệt lại để làm việc Photoshop Khởi động Adobe ImageReady bạn không cần dùng Photoshop học Thiết lập môi trường làm việc cho học 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 cơng 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 bạn, bạn thấy thoải mái tiết kiệm nhiều thời gian ImageReady có mơi trường làm việc thiết lập sẵn Interactivity Palette Locations, hẳn bạn biết tính bạn học chương trước có liên quan đến ImageReady Bởi giao diện học phạm vi hình động, bạn giảm số lượng Palette mở mặc định ImageReady 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ày) Chọn Color, Web Content Slice Palette Chọn Window > Animation để mở Animation Palette Kéo góc phía bên phải Animation Palette để mở rộng bạn tận dụng khoảng trống vùng làm việc (Tuỳ chọn) Bạn di chuyển Animation Palette vào gần cửa sổ hình ảnh để giữ 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 Monte Cristo Chương 18: Tạo hình động cho trang web Photoshop CS Chọn Window > Workspace > Save Workspace 6.Gõ chữ 18_Animation hộp thoại Save Workspace nhấn OK Bây bạn nhanh chóng quay lại kích thước ban đầu vị trí Palette lúc cách chọn Window > Workspace >18_Animation Tạo hình động cách ẩn layer Có lẽ cách thức đơn giản để tạo hình động bước cho ẩn biểu tượng mắt layer Layer Palette Ví dụ, bạn tạo hình động đổi tượng thay đổi tư cho đối tượng di chuyển lên phía trước quay lại Hình DoLayer Palettehin.psd bao gồm layer, bạn bỏ giây để xem qua Layer Palette Bạn tiến hành với hiệu ứng động đơn giản với hai layer DoLayer Palettehin Chuẩn bị Layer Comp Bạn làm việc với Layer Comp phần trước sách ImageReady có tính tương tự làm cho cơng việc tạo hình động trở nên dễ dàng Trong Layer Palette, kiểm tra xem biểu tượng mắt có xuất gần layer Bacground DoLayer Palettehin khơng vng cịn lại khơng có mắt www.vietphotoshop.com - Dịch Bá tước Monte Cristo 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 Comp Photoshop CS Trong hộp thoại New Layer Comp gõ DoLayer Palettehin sau kiểm tra xem lựa chọn Visibility có chọn không trước bạn nhấn OK Một Layer Comp mới, DoLayer Palettehin 1, xuất Layer Comps Palette Trong Layer Palette, nhấp vào biểu tượng mắt layer DoLayer Palettehin để ẩn sau cho mắt layer DoLayer Palettehin www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 18: Tạo hình động cho trang web Photoshop CS Tạo Layer Comp mới, DoLayer Palettehin 2, sử dụng cách bước 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ọn Bây bạn có Layer Comps mà bạn sử dụng để làm điểm bắt đầu cho frame bạn tạo hiệu ứng động Bắt đầu trình tạo hình động Khi bạn bắt đầu, frame mặc định xuất Animation Palette Frame hiển thị thiết lập ẩn layer Layer Palette, trường hợp bạn thấy có layer hiển thị DoLayer Palettehin Background Frame chọn, biểu đường viền màu www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 18: Tạo hình động cho trang web Photoshop CS xanh bao xung quanh, cho bạn biết bạn chỉnh sửa nội dung cách chỉnh sửa hình ảnh Trong Animation Palette, nhấp vào nút Duplicate Current Frame để tạo frame 2 Trong LCP, nhấp vào ô vuông hiển thị thẻ tên Animation Paletteply This Layer Comp cho Layer Comp DoLayer Palettehin Bạn ý đến Layer Palette bạn thấy layer DoLayer Palettehin bị ẩn layer DoLayer Palettehine hiển thị www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 18: Tạo hình động cho trang web Photoshop CS Trong Animation Palette, chọn frame Trong cửa sổ hình ảnh, cá heo quay lại tình trạng ban đầu có Layer hiển thị Chọn Frame sau frame để tự bạn xem trước hiệu ứng động hình ảnh Tìm đến frame xem trước hiệu ứng động Bạn sử dụng nhiều cách để xem trước kéo qua frame hiệu ứng động Hiểu chức điều khiển Animation Layer Palette điều quan trọng để nắm bắt trình tạo ảnh động Bạn thử xem hiệu ứng động cách tự chọn frame frame Trong phần này, bạn thử vài cách khác để xem trước hiệu ứng hình động ImageReady Bạn xem trước hiệu ứng động trình duyệt web A: Looping Menu B: Chọn frame C: Chọn frame trước D: Xem/ Dừng hiệu ứng động E: Chọn frame www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 18: Tạo hình động cho trang web Photoshop CS F: Nút Tween G: Tạo frame H: Xoá frame Trong Animation Palette, bạn chọn tuỳ chọn Forever menu xổ Looping phía bên trái palette Nhấn vào nút Select Previous Frame để di chuyển sang frame khác (Bạn thử lập lại nhiều lần thao tác thật nhanh để xem hiệu ứng động xuất cửa sổ hình ảnh) Trong Layer Palette, nhấp vào nút Backward Forward góc phía bên trái palette, bạn có kết tương tự bước A Nút quay lại Layer Palette B Nút tiến tới Layer Palette Nhấn vào nút Play Animation Palette để xem trước hiệu ứng động Nút Play biến thành nút Stop mà bạn nhấn vào để dừng lại Chọn File > Preview In > chọn trình duyệt web menu phụ Preview In Khi bạn xem xong, khỏi trình duyệt quay lại ImageReady Mẹo nhỏ: bạn dùng phím tắt Ctrl-Alt-P để mở nhanh trình duyệt nhấn vào nút trình duyệt hộp công cụ Chọn file > Save Optimized As Trong hộp thoại Save As, mở thư mục Lesson 18 nhấn vào biểu tượng Create New Folder Gõ My_gifs cho tên thư mục, sau mở Vẫn hộp thoại Save As, gõ chữ DoLayer Palettehin.gif để đặt tên cho file nhấn Save www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 18: Tạo hình động cho trang web Photoshop CS Chuẩn bị copy layer cho hiệu ứng động Bây bạn làm động thành phần khác hình cá heo, thêm vào hiệu ứng động có Trong phần này, bạn sử dụng kỹ ẩn layer cho frame khác để tạo hiệu ứng động, lần bạn tạo layer khác cách copy biến chuyến layer Trước thêm layer vào hình có chứa hiệu ứng động, bạn nên tạo frame Bước giúp bạn bảo vệ frame có khỏi bị ảnh hưởng thay đổi khơng mong đợi Trong Animation Palette, chọn frame nhấp vào nút Duplicate Current Frame để tạo frame (Frame 3) nằm kế sau frame Vẫn để chọn frame Mở menu Animation Palette chọn lệnh New Layer Visible in All States/Frame để bỏ chọn (bỏ dấu kiểm) www.vietphotoshop.com - Dịch Bá tước Monte Cristo 10 Chương 18: Tạo hình động cho trang web Photoshop CS Bạn ý đến đường viền màu sáng bao quanh layer số "2" Khi hộp thoại Layer Style mở ra, nhấn OK để chấp nhận giá trị mặc định Nhân đôi layer cách nhấn vào nút Duplicate Current Frame Trong Layer Palette, nhấp đúp vào hiệu ứng Outer Glow cho layer số "2" để mở hộp thoại Layer Style Đánh dấu vào hộp kiểm Preview sau thiết lập tuỳ chọn sau: • Ở Spread, kéo trượt đến giá trị 20% • Ở Size, kéo trượt xuống 49 Pixel Nhấn OK sau chọn File > Save Tweening frame cho thay đổi Layer Style Như bạn thấy học này, tính Tween giúp bạn tiết kiệm nhiều thời gian bạn phải dùng để làm công việc buồn tẻ yêu cầu độ xác cao Lần bạn sử dụng lại lệnh Tween để tạo hiệu ứng động cho thay đổi Layer Style Bạn hồn thiện hiệu ứng vịng sáng cách nhân đơi thêm frame di chuyển đến phía cuối hình động Kết hình động cho cảm giác vòng sáng đằng sau hình số "2" Trong Animation Palette, chọn frame Chọn Tween từ menu Animation Palette Trong hộpt hoại Tween, thiết lập thông số sau: www.vietphotoshop.com - Dịch Bá tước Monte Cristo 23 Chương 18: Tạo hình động cho trang web • Cho lựa chọn Tween With, chọn Next Frame • Ở Frame to Add, gõ vào • Dưới Layer, chọn All Layers • Photoshop CS Dưới Parameters, chọn Effects Nhấn OK để đóng hộp thoại lại Trong Animation Palette, chọn frame 6, sau chọn nút Duplicate Current Frame để tạo frame Kéo frame phia cuối Animation Palette cho phía bên phải Frame 11 Chọn File > Save Giữ vùng suốt chuẩn bị để tối ưu hoá 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 hiệu ứng động trình duyệt web Bạn nên nhớ có định dạng Gif hỗ trợ hình động Chúng tơi thêm layer Backdrop hình H2O.psd bạn quan sát kết dễ dàng www.vietphotoshop.com - Dịch Bá tước Monte Cristo 24 Chương 18: Tạo hình động cho trang web Photoshop CS Layer khơng cần thiết cho trang web bạn tối ưu hố hình với suốt Do việc mà bạn phải làm ẩn layer Backdrop Trong menu Animation Palette, chọn Select All Frames Trong Layer Palette, nhấp vào biểu tượng mắt layer Backdrop để ẩn tất frame Trong Optimize Palette, thiết lập thơng số sau: • Ở định dạng file chọn Gif • Dưới Color Talbe, chọn Perceptual cho Reduction 256 cho Colors • Dưới Transparency, đánh dấu hộp kiểm Transparency (để giữ vùng suốt cho hình gốc) • 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 Background Với tất frame chọn, sử dụng menu phía frame chọn 0.1 Sec Ở Menu Animation Palette, chọn Optimize Animation Trong hộpt hoại Optimize Animation, đánh dấu hai hộp kiểm Bounding Box Redundant Pixel Removal nhấn OK Lựa chọn Disposal - Restore to Background Automatic - xoá frame chọn trước frame thứ hiển thị Vì loại bỏ khả hiển thị "tàn dư chế độ cũ" frame Lựa chọn Do Not Dispose giữ lại frame Lựa chọn Automatic phù hợp với hầu hết hình động Tuỳ biến lựa chọn phương pháp loại bỏ dựa có vắng mặt độ suốt frame loại bỏ frame chọn frame có chứa layer suốt Thiết lập phương pháp frame disposal (loại bỏ frame) Phương pháp Frame Disposal xem xét có nên xố frame hay khơng trước cho hiển thị 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 hay không www.vietphotoshop.com - Dịch Bá tước Monte Cristo 25 Chương 18: Tạo hình động cho trang web Photoshop CS Biểu tượng Disposal Method cho bạn biết frame chọn phương pháp Do Not Dispose Restore to Background (Không có biểu tượng xuất phương pháp loại bỏ đặt Automatic) • Chọn lựa chọn Automatic để xác định phương pháp loại trừ tự động cho frame tại, loại bỏ frame frame có chứa layer suốt Hầu hết hình động, lựa chọn Automatic phù hợp với kết thiết lập mặc định • Chọn Do not Dispose để bảo vệ frame frame thêm vào hiển thị lúc Frame (và frame trước đó) hiển thị xuyên qua vùng suốt layer • Chọn Restore to Background để loại bỏ frame từ hình hiển thị trước cho frame Chỉ có frame hiển thị (và frame không hiển thị xuyên qua vùng suốt frame kế tiếp) Ngoài cách tối ưu hố áp dụng cho hình Gif chuẩn, vài cách khác dùng cho hình Gif động Nếu bạn tối ưu hố hình Gif động sử dụng Palette AdAnimation Palettetive (thích hợp), Perceptual (Cảm ứng) Selective (Lựa chọn), ImageReady tạo palette cho hình dựa tất frame hình động Một kỹ phối màu đặc biệt áp dụng để đảm bảo mẫu phối màu đồng tất frame, để tránh trường hợp nhảy "như cào cào" xem kết Hơn nữa, frame tối ưu hoá để vùng mà thay đổi từ frame sang frame khác bao gồm, cách giảm dung lượng hình Gif động nhiều Do vậy, ImageReady phải nhiều thời gian để tối ưu hố hình Gif động hình Gif tiêu chuẩn Lựa chọn Bounding Box hướng dẫn ImageReady cắt frame để bảo vệ vùng thay đổi từ frame trước Những hình động tạo sử dụng lựa chọn có dung lượng nhỏ lại khơng tương thích với trình chỉnh sửa hình Gif động khơng hỗ trợ lựa chọn Lựa chọn Optimize Redundant Pixel Removal làm cho tất đơn vị pixel frame mà có khơng thay đổi so với frame trước trở thành suốt Khi bạn chọn lựa chọn Redundant Pixel Removal Disposal Method phải đặt Automatic www.vietphotoshop.com - Dịch Bá tước Monte Cristo 26 Chương 18: Tạo hình động cho trang web Photoshop CS Xem hình Gif tối ưu hố Bạn gần hoàn thiện tài liệu H2O.psd bạn sử dụng lệnh Save As để lưu lại thành hình Gif động Trong cửa sổ hình ảnh, nhấp vào thẻ Optimized ImageReady xây dựng lại hình dựa tùy chọn mà bạn chọn Trong cửa sổ hình ảnh, nhấp vào thẻ 2-up so sánh thông tin phiên gốc phiên tối ưu hoá Chọn File > Save Optimized As, đặt tên cho H2O.gif, chọn thư mục My_gif lưu vào Nếu bạn muốn xem trước hình động trình duyệt, bạn nhấn vào nút Preview In Default Browser hộp công cụ Trong ImageReady, chọn File > Close để đóng hình gốc lại Bạn hoàn thiện với logo chữ H2O Sử dụng Vector Mask để tạo hình động Phần cịn lại học làm việc với mặt nạ mà áp dụng cho hình động Bạn làm việc với hai tập riêng biệt với kiểu mặt nạ khác nhau, Vector Mask sau Layer Mask Đầu tiên, bạn tạo hiệu ứng mặt biển sóng lên xuống chữ Waves Bạn tiến hành cách tạo Vector Mask để che phần layer Wave cho hình mặt biển xuất bên chữ sau thay đổi vị trí để tạo hình động Chọn File > Open mở hình Waves.psd từ thư mục Lesson18 www.vietphotoshop.com - Dịch Bá tước Monte Cristo 27 Chương 18: Tạo hình động cho trang web Photoshop CS Trong Layer Palette, kiểm tra xem tất layer có hiển thị không Nếu không nhấn vào biểu tượng mắt để hiển thị Trong Layer Palette, chọn layer Wave Giữ phím Alt di chuyển trỏ (không nhấp chuột) qua đường thẳng chia cắt hai layer Wave Text Layer Palette trỏ biến thành hai vòng tròn đè lên Sau nhấn vào đường chia cắt hai layer để liên kết hai layer lại với Hoặc bạn có kết tương tự cách chọn Layer > Group With Previous Bạn nhận thấy hình sóng che phủ layer chữ Một mũi tên xuống xuất bên cạnh layer Wave biểu tượng thu nhỏ Layer Palette cho bạn biết layer nhóm với layer www.vietphotoshop.com - Dịch Bá tước Monte Cristo 28 Chương 18: Tạo hình động cho trang web Photoshop CS Tạo hiệu ứng động cách thay đổi vị trí layer vector mask Mặc dù hai layer Wave Text liên kết, bạn thay đổi vị trí cho layer Trong Animation Palette, nhấp vào nút Duplicate Current Frame để tạo frame Nếu cần, chọn frame Animation Palette Trong Layer Palette, bỏ chọn layer Text để chọn layer Wave Chọn cơng cụ Move hộp cơng cụ Giữ phím Shift (để ép di chuyển) kéo layer Wave cửa sổ hình ảnh, di chuyển xuống đỉnh hình sóng nằm đỉnh chữ Text (Khi bạn kéo, toàn layer Wave bạn thấy vị trí sóng bạn di chuyển nó) Nhấn vào nút Play để xem hiệu ứng động Con sóng di chuyển lên xuống bên Logo Nhấn vào Stop để dừng lại Làm mềm di chuyển sóng Để tạo cho chuyển động sóng tự nhiên hơn, bạn sử dụng tính quen thuộc Tweening để tạo thêm frame cho hình động Trước bạn bắt đầu, chọn frame thứ Animation Palette Trong menu Animation Palette, chọn Tween để mở hộp thoại Tween sau thiết lập thơng số hình sau: www.vietphotoshop.com - Dịch Bá tước Monte Cristo 29 Chương 18: Tạo hình động cho trang web www.vietphotoshop.com - Dịch Bá tước Monte Cristo Photoshop CS 30 Chương 18: Tạo hình động cho trang web Photoshop CS Trong Animation Palette, chọn Forever menu xổ xuống 3.Chọn Select > Deslect Layers, sau dó nhấn vào nút Play Animation Palette để xem trước hiệu ứng động Hình động "cà tưng" chút, bạn sửa chữa với kỹ bạn học phần học Chọn frame sau Shift-click frame để chọ hai frame Sau chọn Copy Frames từ menu Animation Palette Chọn frame chọn Paste Frames menu Animation Palette để mở hộp thoại Paste Frame chọn Paste After Selection Sau nhấn OK Nhấn chuột vào frame 5, để frame chọn, kéo sang phía tay phải thành frame cuối www.vietphotoshop.com - Dịch Bá tước Monte Cristo 31 Chương 18: Tạo hình động cho trang web Photoshop CS Với frame chọn, giữ phím Shift nhấp vào frame đê chọn tất frame sau chọn 0.2 để đặt cho hình Chọn File > Save Xem trước lưu lại hình động Vector Mask Nếu bạn muốn xem trước hình động dùng cách học phần dùng nút Play, Preview in Browser Để lưu lại hình động bạn phải vào File > Save Optimized As chọn định dạng Gif Tạo hình động với Layer Mask Trong phần cuối học này, bạn tạo hình cá heo nhơ lên hụp xuống biển Hình mà bạn làm việc phần có layer: layer mặt biển hình cảnh, đuôi cá voi layer gradient tạo cho bạn Photoshop Tạo áp dụng Layer Mask Trong học này, bạn tạo layer mask dựa khác tính suốt gradient sau áp dụng mặt nạ vào hình cá voi Bản thân Gradient khơng có chức kết cuối cùng, bạn sử dụng mặt nạ mà tạo để áp dụng cho layer khác Trước kh bắt đầu, quan sát thật kỹ hình cá voi cửa sổ hình ảnh để sau bạn so sanh kết hình gốc Chọn File > Open mở tài liệu Whale.psd thư mục Lesson18 Trong Layer Palette, nhấp chuột vào biểu tượng mắt cho layer Gradient để hiển thị www.vietphotoshop.com - Dịch Bá tước Monte Cristo 32 Chương 18: Tạo hình động cho trang web Photoshop CS Chọn layer Gradient chọn Layer > Add Layer Mask > From Transparency Bạn ý đến biểu tượng thu nhỏ layer vừa tạo Layer Palette - Layer Gradient, cho bạn thấy vùng suốt thể màu trắng, vùng che mặt nạ vùng màu đen Nhấp vào mắt lần để ẩn Layer Gradient Nhấp vào biểu tượng mắt xích hình biểu tượng layer Gradient mặt nạ, bạn sử dụng mặt nạ riêng rẽ với layer Gradient Chọn biểu tượng thu nhỏ mặt nạ (bên tay phải) kéo đến layer Tail Nếu bạn cịn nhớ cá voi hình gốc trước bạn áp dụng mặt nạ, bạn nhận khác biệt cửa sổ hình ảnh Phần mà dần chìm vào nước www.vietphotoshop.com - Dịch Bá tước Monte Cristo 33 Chương 18: Tạo hình động cho trang web Photoshop CS Tạo hình động hình Layer Mask Cái hay cách cho dù bạn có thay đổi vị trí đối tượng mặt nạ nằm chỗ cũ Ở phần này, bạn bắt đầu giai đoạn trình tạo hình động cách di chuyển hình cá voi Khi bạn di chuyển, mặt nạ Gradient khơng thay đổi, có hiệu ứng tương tự cho tồn cá heo trồi lên chìm xuống nước Trong Animation Palette, nhấp vào nút Duplicate Current Frame Chọn công cụ Move tuỳ biến chọn Layer Selection Trong cửa sổ hình ảnh, kéo hình xuống cho gần biến khỏi mặt nước Trong Animation Palette, kéo frame thứ sang bên trái để trở thành frame Điều chỉnh hiệu ứng động Layer Mask Tất bạn cịn phải làm làm cho chuyển động mịn cách thêm frame trung gian thời gian frame Chắc bạn quen thuộc với trình rồi, bạn tự làm Nhưng thêm chút thay đổi mẻ phần này, bạn nên xem qua để biết thêm www.vietphotoshop.com - Dịch Bá tước Monte Cristo 34 Chương 18: Tạo hình động cho trang web Photoshop CS Trong Animation Palette, chọn frame sau chọn Tween menu Animation Palette Hoặc chọn nút Tween phia Palette Trong hộp thoại Tween, chọn Next Frame gõ cho ô Frame To Add Đánh dấu vào hộp kiểm All Layers Position sau nhấn OK Trong Animation Palette, Shift-click vào frame 2, 3, 4 Trong menu Animation Palette, chọn Copy Frames Chọn frame sau chọn Paste Frames menu Animation Palette Trong hộp thoại Paste Frame, chọn Paste After Selection nhấn OK Trong menu Animation Palette, chọn Reverse Frames Bây tất frame cho bạn thấy chuyển động đuôi mịn màng Chọn tổng cộng frame chọn 0.2 menu hẹn để đặt thời gian cho tất frame Bạn kết thúc học tạo hình động ImageReady www.vietphotoshop.com - Dịch Bá tước Monte Cristo 35 Chương 18: Tạo hình động cho trang web Photoshop CS Câu hỏi ôn tập Miêu tả cách đơn giản để tạo hình động? Trong hồn cảnh bạn Tween khơng thể Tween frame? Bạn làm để tối ưu hố hình đơng? Tối ưu hố hình động bao gồm gì? Frame Disposal gì? phương pháp loại bỏ frame bạn thường hay dùng nhất? Bạn làm cách để chỉnh sửa frame hình động có? Định dạng file bạn dùng cho hình động? Đáp án Một cách đơn giản để tạo hình động bắt đầu với hình có nhiều layer Photoshop Sử dụng nút Duplicate Current Frame Animation Palette để tạo frame mới, sau sử dụng Layer Palette để thay đổi vị trí, mức Opacity hiệu ứng frame chọn Sau đó, tạo frame trung gian nằm hai frame đầu cuối cách sử dụng nút Duplicate Current Frame sử dụng lệnh Tween để làm tự động Bạn hướng dẫn ImageReady Tween frame trung gian nằm hai layer kề Tweening thay đổi mức Opacity Layer vị trí hai frame, thêm layer vào chuỗi frame Bạn Tween hai frame không nằm kề Nhấp vào nút Show Option Optimize Palette, sau chọn File > Save Optimized để tối ưu hố hình động Chọn Optimized Animation từ menu Animation Palette để tiến hành tối ưu hố cho hình động cụ thể bao gồm loại bỏ Pixel dư cắt frame dựa Bounding Box Khi bạn tối ưu hố hình Gif, ImageReady tạo Palette AdAnimation Palettetive, Perceptual Selective cho hình, dựa tất frame ImageReady áp dụng kỹ thuật hoà sắc đặc biệt để đảm bảo mẫu màu hồ sắc có tính qn tất frame để tránh tình trạng bị "cà giựt" xem hình ImageReady tối ưu hố frame vùng thay đổi từ frame sang frame khác bao gồm, giúp giảm dung lượng hình động nhiều www.vietphotoshop.com - Dịch Bá tước Monte Cristo 36 Chương 18: Tạo hình động cho trang web Photoshop CS Phương pháp loại bỏ frame định tềi loại bỏ frame chọn trước cho hiển thị frame hình động có suốt Lựa chọn xác định frame chọn xuất xuyên qua vùng suốt frame Nói chung, lựa chọn Automatic phù hợp với hầu hết hình động Tuỳ chọn lựa chọn phương pháp loại bỏ frame dựa có vắng mặt tính suốt frame kế tiếp, loại bỏ frame frame có chứa layer suốt Để chỉnh sửa frame động có, bạn phải chọn frame cách nhấp chuột vào biểu tượng frame Animation Palette tìm đến frame cách sử dụng nút FImageReadyst Frame, Select Previous Frame, Select Next Frame Animation Palette Layer Palette Sau chỉnh sửa layer hình để cập nhật nội dung cho frame chọn Hình động phải lưu lại định dạng Gif QuickTime movie Bạn khơng thể tạo hình động có định dạng JPEG PNG © www.vietphotoshop.com - Dịch Bá tước Monte Cristo |Trang chủ| |Photoshop CS| |Chương 19| www.vietphotoshop.com - Dịch Bá tước Monte Cristo 37 ... Dịch Bá tước Monte Cristo 20 Chương 18: Tạo hình động cho trang web www.vietphotoshop.com - Dịch Bá tước Monte Cristo Photoshop CS 21 Chương 18: Tạo hình động cho trang web Photoshop CS Tweening... 35 Chương 18: Tạo hình động cho trang web Photoshop CS Câu hỏi ôn tập Miêu tả cách đơn giản để tạo hình động? Trong hồn cảnh bạn Tween Tween frame? Bạn làm để tối ưu hố hình đơng? Tối ưu hố hình. . .Chương 18: Tạo hình động cho trang web Photoshop CS frame trước chút tạo ảo giác chuyển động cho mắt frame xem với tốc độ di chuyển nhanh Bạn tạo hình động cách sau: • Sử