Download miễn phí Giáo trình Photoshop CS - Tạo hình động cho trang web
Tweening vịtrí và mức Opacity của các layer
Tiếp theo, bạn sẽthêm những frame nằm giữa hai frame vừa tạo, những frame đó sẽchính là những
frame tạo ra sựbiến đổi giữa frame 1 và frame 2. Khi bạn thay đổi vịtrí, mức Opacity hay hiệu ứng
của bất cứlayer nào nằm trong hai frame của hình động, bạn có thểhướng dẫn ImageReady Tween
nó, và lệnh này sẽtự động tạo ra những frame trung gian với sốlượng do bạn quyết định.
1. Trong Animation Palette, chọn frame 1 và sau đó chọn Tween trên menu Animation Palette.
2. Trong hộp thoại Tween, đặt những thông sốsau:
• Ởtrong menu xổra Tween With chọn Next Frame.
• Ởô Frames to Add, gỗ4.
• Ởdưới Layers, chọn All Layers.
•Dưới Parameters, chọn Position và Opacity bằng cách đánh dấu kiểm vào ô trống nằm cạnh
nó. (bạn cũng có thểchọn Effects nếu bạn muốn thay đổi những thông sốcủa layer đểtác
động đến tất cảnhững frame nằm giữa hai frame đầu và frame cuối. Nhưng trong phần này,
bạn sẽkhông chọn lựa chọn này, vì bạn chưa áp dụng Layer Style cho frame nào cả)
•Nhấn OK để đóng hộp thoại lại
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Tóm tắt nội dung tài liệu:
b.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
1. Trong Animation Palette, bạn hãy chọn tuỳ chọn Forever trong menu xổ ra Looping ở phía bên trái
của palette.
2. Nhấn vào nút Select Previous Frame để di chuyển sang frame khác. (Bạn hãy thử lập lại nhiều lần
thao tác này thật nhanh để xem hiệu ứng động xuất hiện trên cửa sổ hình ảnh)
3. Trong Layer Palette, nhấp vào nút Backward hay Forward ở góc phía dưới bên trái của palette, và
bạn cũng có kết quả tương tự như ở bước trên.
A. Nút quay lại trên Layer Palette.
B. Nút tiến tới trên Layer Palette.
4. Nhấn vào nút Play trong Animation Palette để xem trước hiệu ứng động. Nút Play sẽ biến thành
nút Stop mà bạn có thể nhấn vào để dừng lại.
5. Chọn File > Preview In > và chọn trình duyệt web trong menu phụ Preview In. Khi bạn xem xong,
thoát khỏi trình duyệt và quay lại ImageReady.
Mẹo nhỏ: bạn cũng có thể dùng phím tắt Ctrl-Alt-P để mở nhanh trình duyệt hay nhấn vào nút trình
duyệt trong hộp công cụ.
6. Chọn file > Save Optimized As.
7. Trong hộp thoại Save As, mở thư mục Lesson 18 và nhấn vào biểu tượng Create New Folder. Gõ
My_gifs cho tên của thư mục, sau đó mở nó ra. Vẫn trong hộp thoại Save As, gõ chữ DoLayer
Palettehin.gif để đặt tên cho file và nhấn Save.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 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.
5. Chọn công cụ Move trong hộp công cụ
6. Giữ phím Alt và kéo quả bong bóng lên phía trên bên phải của tấm hình, và một layer mới chính là
layer copy của layer Bubble xuất hiện trong Layer Palette.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 11
Chương 18: Tạo hình động cho trang web Photoshop CS
7. Giữ phím Alt xuống lần nữa và kéo để tạo ra quả bong bóng thứ 3 xa hơn một chút về phía trên bên
phải của quả bong bóng thứ nhất.
Bây giờ bạn đã có 3 layer bong bóng trong cửa sổ hình ảnh và trong Layer Palette bạn có: Bubble,
Bubble copy và Bubble copy 2.
Chú ý: Tất cả những layer vừa được nhân đôi có thể được hiển thị trên các frame của Animation
Palette nếu New
Layers Visible in All States/Frames vẫn được chọn trong menu Animation Palette.
Bây giờ bạn đã chuẩn bị xong các bước copy layer trong file DoLayer Palettehin.psd, bây giờ bạn sẽ
áp dụng lệnh Transform để làm cho quả bong bóng lớn dần và bay về phía sau con cá heo.
1. Chọn công cụ Move và công cụ Layer Select được chọn trên thanh tuỳ biến công cụ.
2. Trong cửa sổ hình ảnh, chọn quả bong bóng ở giữa là layer Bubble copy trên Layer Palette.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 12
Chương 18: Tạo hình động cho trang web Photoshop CS
3. Chọn Edit > Transform > Scale.
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 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.
2. Trong Layer Palette, nhấn vào biểu tượng con mắt để ẩn nó đi, do vậy trên Layer Palette của bạn sẽ
còn layer Background, DoLayer Palettehin 1 và layer Bubble vẫn được hiển thị và những layer khác
được ẩn
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 14
Chương 18: Tạo hình động cho trang web Photoshop CS
Chú ý: khi bạn ẩn hay hiện một layer trong một frame thì sự thay đổi đó chỉ tác động đến frame đó mà
thôi.
3. Trong Animation Palette, nhấn vào nút Duplicate Current Frame để tạo frame 4. Vẫn để chọn frame
4
4. Trong Layer Comps Palette, chọn DoLayer Palettehin 2. Sau đó ở Layer Palette cho hiển thị con mắt
ở layer Bubble Coppy.
5. Nhấn vào nút Duplicate Current Frame 2 lần nữa và sau đó sử dụng Layer Comps và Layer Palette
như sau:
• Cho frame 5, chọn DoLayer Palettehin 1 layer comp và cho hiển thị layer Bubble Copy 2.
• Cho frame 6, chọn DoLayer Palettehin 2 layer comp và cho hiển thị layer Pop.
6. Chọn nút Play trên Animation Palette để xem trước kết quả. Khi xem xong bạn nhất nút Stop để
dừng lại.
Khi hiệu ứng động di chuyển từ frame này sang frame khác, thì đuôi của con cá heo di chuyển lên
xuống. Nếu bạn xem cả một vòng thì quả bong bóng hiện ra từ con cá, to lên dần và cuối cùng nổ ra ở
bước thứ 4.
Nếu kết quả của bạn khác với của chúng tôi, hãy xem lại những thiết lập layer trên Layer Palette ẩn và
hiện có đúng không cho từng frame một và chỉnh sửa nếu cần.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 15
Chương 18: Tạo hình động cho trang web Photoshop CS ...