Chương 18: Tạo hình động cho trang web Photoshop CS
Nội dung của trang này thuộc bản quyền của © Bá tước Monte Cristo - Final Fantasy và www.vietphotoshop.com. Những bài viết
trong này có thể được in ra để dùng với mục đích cá nhân và phi thương mại. Nếu bạn muốn phát hành lại trong trang web của bạn làm
ơn liên lạc với tôi hoặc ít nhất phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Final Fantasy và www.vietphotoshop.comĐể cho nội dung trang web của bạn được sinh động hơn, bạn có thể dùng ImageReady để tạo những
hình Gif động từ một hình đơn. Với kích thước tệp tin được nén, hình Gif động có thể hiển thị trên hầu
hết các trình duyệt web. ImageReady cho phép bạn tạo những hình động rất sáng tạo với những công
cụ dễ sử dụng và tiện lợi.

Trong bài học này bạn sẽ học được những điều sau:

• Mở một hình gồm nhiều layer để sử dụng làm hình cơ bản cho hiệu ứng động

• Sử dụng cùng một lúc Layer Palette và Animation Palette để tạo ra những chuỗi động.

• Thay đổi một frame đơn, nhiều frame hoặc toàn bộ các frame của hình.

• Sử dụng lệnh Tween để tạo ra những bước chuyển hình mịn màng với thông số của Layer
Opacity và vị trí của nó.

• Xem trước một tấm hình động trong ImageReady và trong trình duyệt web.

• Lưu lại hình động bằng cách sử dụng Optimize Palette.

Tạo hình động trong ImageReady
Trong Adobe ImageReady, bạn tạo hình động từ một tấm hình đơng bằng cách sử dụng file động có
định dạng GIF. Một hình GIF động là một chuỗi hình ảnh hoặc các Frame. Mỗi frame hơi khác với
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
1

các frame trong một hình động bằng cách sử dụng những nút có trên Layer Palette.

Thay đổi toàn cục: Những thay đổi tác động đến tất cả các frame mà trong đó bao gồm cả layer.
Những thao tác gây ra những thay đổi cho các đơn vị pixel của một tấm hình như tô vẽ, lệnh chỉnh sửa
tông màu và độ sáng tối, bộ lọc, gõ chữ và các lệnh chỉnh sửa ảnh khác được gọi là thay đổi toàn cục.

Mỗi một frame mới khi được tạo ra là một bản copy của frame trước nó, bạn có thể chỉnh sửa frame
này bằng cách chỉnh sửa layer của nó. Bạn có thể áp dụng những thay đổi trên từng frame một, trên
một nhóm các frame và trên toàn bộ hình động.

www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
2
Chương 18: Tạo hình động cho trang web Photoshop CS
Bắt đầu
Trong bài học này bạn sẽ làm việc với một tập hợp các hình ảnh được thiết kế để xuất hiện trên trang
web của một công ty nước giải khát.

1. Tìm đến thư mục Lesson18 và nhấp đúp vào thư mục 18End.html để mở nó ra trong trình duyệt
web.
Trang web bao gồm 4 vùng có hình động: Chữ "Making Waves", đuôi con cá voi hiện lên và chui xuống
biển, công thức hoá học của nước di chuyển vào trong tấm hình và một con cá heo đang bơi đồng thời
nhả bong bóng ra phía trước. Chữ và nút trên trang web chỉ đề "làm cảnh" thôi.

2. Khi bạn đã xem xong, đóng trình duyệt lại để làm việc trong Photoshop.

3. Khởi động Adobe ImageReady bạn không cần dùng Photoshop trong bài học này.

Thiết lập môi trường làm việc cho bài học
Trước khi bạn bắt đầu với bài học này, bạn sẽ thiết lập vùng làm việc mới đặc biệt cho những công
việc liên quan đến hình động. Nếu bạn có một vùng làm việc phù hợp với công việc của bạn, bạn sẽ

con mắt của 2 layer trong Layer Palette. Ví dụ, bạn có thể tạo ra một hình động của đổi tượng thay đổi
tư thế hoặc cho đối tượng đó di chuyển lên phía trước và quay lại.
Hình DoLayer Palettehin.psd bao gồm 5 layer, bạn có thể bỏ ít giây để xem qua Layer Palette. Bạn sẽ
tiến hành với hiệu ứng động đơn giản với hai layer của DoLayer Palettehin

Chuẩn bị Layer Comp
Bạn đã làm việc với Layer Comp ở phần trước của cuốn sách này rồi. ImageReady cũng có tính năng
tương tự và làm cho công việc tạo hình động trở nên rất dễ dàng.

1. Trong Layer Palette, kiểm tra xem biểu tượng con mắt có xuất hiện ở gần layer Bacground và
DoLayer Palettehin 1 không và những ô vuông còn lại không có con mắt.

www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
4
Chương 18: Tạo hình động cho trang web Photoshop CS

2. Trong Layer Comps Palette, nhấp chuột chọn nút Create New Layer Comp .
3. Trong hộp thoại New Layer Comp gõ DoLayer Palettehin 1 và sau đó kiểm tra xem lựa chọn Visibility
có đang được chọn không trước khi bạn nhấn OK.
Một Layer Comp mới, DoLayer Palettehin 1, xuất hiện trong Layer Comps Palette. 4. Trong Layer Palette, nhấp vào biểu tượng con mắt của layer DoLayer Palettehin 1 để ẩn nó đi và
sau đó cho hiện con mắt của layer DoLayer Palettehin 2

www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
5
Chương 18: Tạo hình động cho trang web Photoshop CS

5. Tạo một Layer Comp mới, DoLayer Palettehin 2, sử dụng cách được chỉ ra ở bước 2 và 3.

7
Chương 18: Tạo hình động cho trang web Photoshop CS

3. Trong Animation Palette, chọn frame 1. Trong cửa sổ hình ảnh, con cá heo quay lại tình trạng ban
đầu khi chỉ có Layer 1 được hiển thị.

4. Chọn Frame 2 và sau đó frame 1 để tự bạn xem trước hiệu ứng động trên hình ảnh.

Tìm đến frame và xem trước hiệu ứng động
Bạn có thể sử dụng rất nhiều cách để xem trước và kéo qua các frame của hiệu ứng động. Hiểu được
những chức năng điều khiển trên Animation và Layer Palette là điều rất quan trọng để nắm bắt được
quá trình tạo ảnh động.

Bạn đã thử xem hiệu ứng động bằng cách tự chọn lần lượt frame 1 và frame 2. Trong phần này, bạn
sẽ thử vài cách khác để xem trước hiệu ứng hình động trong ImageReady. Bạn cũng có thể xem trước
hiệu ứng động trong trình duyệt web.A: Looping Menu
B: Chọn frame đầu tiên
C: Chọn frame trước đó.
D: Xem/ Dừng hiệu ứng động.
E: Chọn frame kế tiếp.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
8
Chương 18: Tạo hình động cho trang web Photoshop CS
F: Nút Tween.
G: Tạo một frame mới.
H: Xoá frame


9
Chương 18: Tạo hình động cho trang web Photoshop CS

Chuẩn bị những bản copy của layer cho hiệu ứng động
Bây giờ bạn sẽ làm động một thành phần khác của tấm hình con cá heo, và thêm vào hiệu ứng động
đang có. Trong phần này, bạn sẽ sử dụng cùng kỹ năng cơ bản là ẩn và hiện layer cho những frame
khác nhau để tạo ra hiệu ứng động, nhưng lần này bạn cũng sẽ tạo những layer khác nhau bằng cách
copy và biến chuyến một layer.
Trước khi thêm một layer vào tấm hình đã có chứa hiệu ứng động, thì bạn nên tạo một frame mới.
Bước này giúp bạn bảo vệ những frame đã có khỏi bị ảnh hưởng bởi những thay đổi không như mong
đợi.

1. Trong Animation Palette, chọn frame 2 và nhấp vào nút Duplicate Current Frame để tạo một frame
mới (Frame 3) nằm kế ngay sau frame 2. Vẫn để chọn frame 3

2. Mở menu của Animation Palette và chọn lệnh New Layer Visible in All States/Frame để bỏ chọn nó
(bỏ dấu kiểm).

www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
10
Chương 18: Tạo hình động cho trang web Photoshop CS

3. Trong Layer Palette, chọn layer Bubble và nhấn vào biểu tượng con mắt để hiển thị layer đó. Vẫn để
chọn layer Bubble.
Trong cửa sổ hình ảnh và trong biểu tượng thu nhỏ của frame 3, bạn sẽ thấy xuất hiện một quả bong
bóng ở gần "mũi" của con cá heo.4. Chọn View > SnAnimation Palette và đánh vào dấu kiểm để bỏ chọn lệnh này.


Trong cửa sổ hình ảnh, một đường viền màu đen có các điểm điều khiển xuất hiện bao quanh layer
Bubble copy.

4. Trong thanh tuỳ biến công cụ, chọn biểu tượng Constrain Aspect Ration và gõ giá trị là 24 Px vào ô
Width (W). Nhấp vào một vùng bất kỳ ở bên ngoài hộp văn bản Width và bạn sẽ thấy quả bong bóng
sẽ to lên nhưng đường biên màu đen vẫn xuất hiện xung quanh layer Bubble copy.

5. Nhấn Enter để chấp nhận lệnh Transform.

6. Chọn quả bong bóng thứ 3 và lập lại bước 3-5, nhưng lần này gõ vào là 26 Px ở cả hai ô Width và
Height.

7. Vẫn sử dụng công cụ Move va lựa chọn Layer Select trên thanh tuỳ biến, chỉnh sửa vị trí của 3 quả
bong bóng bằng cách kéo nó trong cửa sổ hình ảnh nếu bạn thấy cần phải chỉnh sửa.
Bạn không nên để quả bóng thứ 3 đằng sau đuôi của con cá heo và khoảng cách giữa 3 quả bóng nên
được chia đều nhau. Xem hình sau để bạn dễ hình dung ra vị trí của chúng.

www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
13
Chương 18: Tạo hình động cho trang web Photoshop CS

8. Chọn File > Save.

Tạo ra những hiệu ứng động cùng một lúc
Bây giờ bạn sẽ tạo ra hiệu ứng quả bóng đi từ dưới lên trên bằng cách lần lượt ẩn và hiện các layer
của tài liệu DoLayer Palettehin.psd. Bạn sẽ kết hợp hai hiệu ứng động là sự di chuyển của con cá heo
với sự lớn dần của những quả bong bóng bằng cách nhân đôi frame kết hợp với những thiết lập trên
Layer và Animation Palette.

1. Trong Animation Palette, chọn frame 3.