Giáo trình Photoshop CS - Chương 18: Tạo hình động cho trang web

y đổi vị trí cho từng layer một. 
1. Trong Animation Palette, nhấp vào nút Duplicate Current Frame để tạo frame mới. 
2. Nếu cần, chọn frame 2 trong Animation Palette. Trong Layer Palette, bỏ chọn layer Text và chỉ để 
chọn layer Wave. 
3. Chọn công cụ Move trong hộp công cụ. 
4. Giữ phím Shift (để ép di chuyển) và kéo layer Wave trong cửa sổ hình ảnh, di chuyển nó xuống dưới 
cho đến khi đỉnh của hình con sóng nằm ngay trên đỉnh của chữ Text. (Khi bạn kéo, toàn bộ layer 
Wave được hiện ra cho nên bạn có thể thấy được vị trí của con sóng khi bạn di chuyển nó). 
5. Nhấn vào nút Play để xem hiệu ứng động. Con sóng di chuyển lên trên và xuống dưới bên trong 
Logo. Nhấn vào Stop để dừng lại. 
Làm mềm sự di chuyển của con sóng 
Để tạo cho sự chuyển động của con sóng được tự nhiên hơn, bạn sẽ sử dụng tính năng đã khá quen 
thuộc là Tweening để tạo thêm frame cho hình động. 
Trước khi bạn bắt đầu, hãy chọn frame thứ 2 trong Animation Palette. 
1. Trong menu của Animation Palette, chọn Tween để mở hộp thoại Tween và sau đó thiết lập thông số 
như hình sau: 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 29
Chương 18: Tạo hình động cho trang web Photoshop CS 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 30
Chương 18: Tạo hình động cho trang web Photoshop CS 
2. Trong Animation Palette, chọn Forever trong menu xổ xuống. 
3.Chọn Select > Deslect Layers, và sau dó nhấn vào nút Play trong Animation Palette để xem trước 
hiệu ứng động. 
Hình động vẫn hơi "cà tưng" một chút, cho nên bạn sẽ sửa chữa nó với những kỹ năng bạn đã học ở 
phần trên của bài học này. 
4. Chọn frame 2 và sau đó Shift-click frame 3 để chọ cả hai frame mới. Sau đó chọn Copy Frames từ 
menu Animation Palette. 
5. Chọn frame 4 và chọn Paste Frames trong menu Animation Palette để mở hộp thoại Paste Frame và 
chọn Paste After Selection. Sau đó nhấn OK 
6. Nhấn chuột vào frame 5, để nó là frame duy nhất được chọn, kéo nó sang phía tay phải để cho nó 
thành frame cuối cùng. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 31
Chương 18: Tạo hình động cho trang web Photoshop CS 
7. Với frame 6 được chọn, giữ phím Shift và nhấp vào frame 1 đê chọn tất cả các frame và sau đó chọn 
0.2 để đặt giờ cho hình. Chọn File > Save 
Xem trước và lưu lại hình động Vector Mask 
Nếu bạn muốn xem trước hình động hãy dùng những cách như học ở các phần trên như là 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 và chọn định dạng là Gif. 
Tạo hình động với Layer Mask 
Trong phần cuối cùng của bài học này, bạn sẽ tạo ra hình đuôi con cá heo nhô lên hụp xuống biển. 
Hình mà bạn sẽ làm việc trong phần này chỉ có 3 layer: một layer mặt biển như là hình nền trong cảnh, 
một cái đuôi con cá voi và một layer gradient chúng tôi tạo cho bạn trong Photoshop. 
Tạo và áp dụng Layer Mask 
Trong bài học này, bạn sẽ tạo một layer mask dựa trên sự khác nhau về tính trong suốt của gradient và 
sau đó áp dụng mặt nạ vào hình đuôi con cá voi. Bản thân Gradient không có chức năng gì trong kết 
quả cuối cùng, nhưng bạn sẽ sử dụng mặt nạ mà nó tạo ra để áp dụng cho một layer khác. 
Trước kh bắt đầu, hãy quan sát thật kỹ hình đuôi con cá voi trong cửa sổ hình ảnh để sau này bạn có 
thể so sanh kết quả và hình gốc. 
1. Chọn File > Open và mở tài liệu Whale.psd trong thư mục Lesson18 
2. Trong Layer Palette, nhấp chuột vào biểu tượng con mắt cho layer Gradient để hiển thị nó. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 32
Chương 18: Tạo hình động cho trang web Photoshop CS 
3. Chọn layer Gradient và chọn Layer > Add Layer Mask > From Transparency. 
Bạn hãy chú ý đến biểu tượng thu nhỏ của layer mới vừa được tạo trên Layer Palette - Layer Gradient, 
cho bạn thấy vùng trong suốt được thể hiện bằng màu trắng, và vùng được che bởi mặt nạ là vùng 
màu đen. 
4. Nhấp vào con mắt lần nữa để ẩn Layer Gradient 
5. Nhấp vào biểu tượng mắt xích giữa hình biểu tượng của layer Gradient và mặt nạ, do vậy bạn có thể 
sử dụng mặt nạ riêng rẽ với layer Gradient. 
6. Chọn biểu tượng thu nhỏ của mặt nạ (bên tay phải) và kéo nó đến layer Tail . 
Nếu bạn vẫn còn nhớ đuôi con cá voi khi ở hình gốc như thế nào trước khi bạn áp dụng mặt nạ, bây 
giờ bạn có thể nhận ra sự khác biệt trên cửa sổ hình ảnh. Phần dưới của chiếc đuôi mà dần như là nó 
chìm vào trong nước. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 33
Chương 18: Tạo hình động cho trang web Photoshop CS 
Tạo hình động của một tấm hình trong Layer Mask 
Cái hay của cách này là cho dù bạn có thay đổi vị trí của đối tượng thì mặt nạ vẫn nằm ở chỗ cũ. Ở 
phần này, bạn sẽ bắt đầu một giai đoạn mới của quá trình tạo hình động bằng cách di chuyển hình 
chiếc đuôi con cá voi. Khi bạn di chuyển, mặt nạ Gradient sẽ không thay đổi, cho nên nó sẽ có hiệu 
ứng tương tự cho toàn bộ đuôi con cá heo ngay cả khi nó trồi lên hoặc chìm xuống nước. 
1. Trong Animation Palette, nhấp vào nút Duplicate Current Frame. 
2. Chọn công cụ Move và trên thanh tuỳ biến chọn Layer Selection . 
4. Trong cửa sổ hình ảnh, kéo hình chiếc đuôi xuống dưới sao cho nó gần như biến mất khỏi mặt 
nước. 
4. Trong Animation Palette, kéo frame thứ 2 sang bên trái để nó trở thành frame 1 
Điều chỉnh hiệu ứng động của Layer Mask 
Tất cả những gì bạn còn phải làm là làm cho chuyển động của nó mịn hơn bằng cách thêm những 
frame trung gian và thời gian giữa các frame. Chắc bây giờ bạn đã khá quen thuộc với quá trình này 
rồi, do vậy bạn có thể tự làm được. Nhưng chúng tôi thêm một chút thay đổi mới mẻ trong phần này, 
do vậy bạn cũng nên xem qua để biết thêm. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 34
Chương 18: Tạo hình động cho trang web Photoshop CS 
1. Trong Animation Palette, chọn frame 1 và sau đó chọn Tween trong menu của Animation Palette. 
Hoặc chọn nút Tween ở phia dưới của Palette. 
2. Trong hộp thoại Tween, chọn Next Frame và gõ 3 cho ô Frame To Add. Đánh dấu vào hộp kiểm All 
Layers và Position và sau đó nhấn OK. 
3. Trong Animation Palette, Shift-click vào frame 2, 3, và 4. 
4. Trong menu Animation Palette, chọn Copy Frames. 
5. Chọn frame 5 sau đó chọn Paste Frames trong menu Animation Palette. 
6. Trong hộp thoại Paste Frame, chọn Paste After Selection và nhấn OK. 
7. Trong menu Animation Palette, chọn Reverse Frames. 
Bây giờ tất cả các frame cho bạn thấy chuyển động của chiếc đuôi khá là mịn màng. 
8. Chọn tổng cộng 8 frame và chọn 0.2 trong menu hẹn giờ để đặt thời gian cho tất cả các frame. 
Bạn đã kết thúc bài học về tạo hình động trong ImageReady. 
www.vietphotoshop.com - Dịch bởi 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 
1. Miêu tả một cách đơn giản để tạo hình động? 
2. Trong hoàn cảnh nào bạn có thể Tween và không thể Tween frame? 
3. Bạn làm thế nào để tối ưu hoá một tấm hình đông? 
4. Tối ưu hoá hình động bao gồm những gì? 
5. Frame Disposal là gì? phương pháp loại bỏ frame nào bạn thường hay dùng nhất? 
6. Bạn làm cách gì để chỉnh sửa một frame hình động đang có? 
7. Định dạng file nào bạn có thể dùng cho hình động? 
Đáp án 
1. Một cách đơn giản để tạo hình động là bắt đầu với một hình có nhiều layer trong Photoshop. Sử 
dụng nút Duplicate Current Frame trong Animation Palette để tạo một frame mới, sau đó sử dụng 
Layer Palette để thay đổi vị trí, mức Opacity hoặc hiệu ứng của một trong những frame được chọn. 
Sau đó, tạo ra những frame trung gian nằm giữa hai frame đầu và cuối bằng cách sử dụng nút 
Duplicate Current Frame hoặc sử dụng lệnh Tween để làm tự động. 
2. Bạn có thể hướng dẫn ImageReady Tween những frame trung gian nằm giữa hai layer kề nhau. 
Tweening có thể thay đổi mức Opacity của Layer hoặc vị trí giữa hai frame, hoặc thêm layer mới vào 
chuỗi các frame. Bạn không thể Tween hai frame không nằm kề nhau. 
3. Nhấp vào nút Show Option trong Optimize Palette, và sau đó chọn File > Save 
Optimized để tối ưu hoá hình động. Chọn Optimized Animation từ menu Animation Palette để tiến hành 
tối ưu hoá cho những hình động cụ thể bao gồm loại bỏ những Pixel dư và cắt frame dựa trên 
Bounding Box. 
4. Khi bạn tối ưu hoá hình Gif, ImageReady cũng tạo ra các Palette là AdAnimation Palettetive, 
Perceptual và Selective cho tấm hình, dựa trên tất cả các frame của nó. ImageReady áp dụng một kỹ 
thuật hoà sắc đặc biệt để đảm bảo rằng những mẫu màu hoà sắc có tính nhất quán trong tất cả các 
frame để tránh tình trạng bị "cà giựt" khi xem hình. ImageReady cũng tối ưu hoá frame do vậy chỉ 
những vùng thay đổi từ frame này sang frame khác được bao gồm, nó sẽ giúp giảm dung lượng của 
tấm hình động rất nhiều. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 36
Chương 18: Tạo hình động cho trang web Photoshop CS 
5. Phương pháp loại bỏ frame quyết định khi nào tềi loại bỏ một frame được chọn trước khi cho hiển thị 
frame kế tiếp khi tấm hình động có nền trong suốt. Lựa chọn này xác định khi nào frame được chọn 
xuất hiện xuyên qua những vùng trong suốt của frame kế tiếp. Nói chung, lựa chọn Automatic phù hợp 
với hầu hết các hình động. Tuỳ chọn này lựa chọn phương pháp loại bỏ frame dựa trên sự có hoặc 
vắng mặt tính trong suốt của frame kế tiếp, và loại bỏ frame hiện tại nếu frame kế tiếp có chứa layer 
trong suốt. 
6. Để chỉnh sửa một frame động đang có, bạn đầu tiên phải chọn frame đó bằng cách nhấp chuột vào 
biểu tượng của frame trong Animation Palette hoặc tìm đến frame đó bằng cách sử dụng những nút 
FImageReadyst Frame, Select Previous Frame, hoặc Select Next Frame trong Animation Palette hoặc 
Layer Palette. Sau đó chỉnh sửa layer trong tấm hình để cập nhật nội dung cho frame được chọn. 
7. Hình động phải được lưu lại dưới định dạng Gif hoặc QuickTime movie. Bạn không thể tạo hình 
động có định dạng là JPEG hoặc PNG. 
© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 
|Trang chủ| |Photoshop CS| |Chương 19| 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 37