Đang tải... (xem toàn văn)
Tạo hình động cho trang web dùng photoshop
Chương 18: Tạo hình động cho trang web Photoshop CS Chọn File > Save Tạo hiệu ứng động lúc Bây bạn tạo hiệu ứng bóng từ lên cách ẩn layer tài liệu DoLayer Palettehin.psd Bạn kết hợp hai hiệu ứng động di chuyển cá heo với lớn dần bong bóng cách nhân đôi frame kết hợp với thiết lập Layer Animation Palette Trong Animation Palette, chọn frame Trong Layer Palette, nhấn vào biểu tượng mắt để ẩn đi, Layer Palette bạn layer Background, DoLayer Palettehin layer Bubble hiển thị layer khác ẩn www.vietphotoshop.com - Dịch Bá tước Monte Cristo 14 Chương 18: Tạo hình động cho trang web Photoshop CS Chú ý: bạn ẩn layer frame thay đổi tác động đến frame mà thơi Trong Animation Palette, nhấn vào nút Duplicate Current Frame để tạo frame Vẫn để chọn frame 4 Trong Layer Comps Palette, chọn DoLayer Palettehin Sau Layer Palette cho hiển thị mắt layer Bubble Coppy Nhấn vào nút Duplicate Current Frame lần sau sử dụng Layer Comps Layer Palette sau: • Cho frame 5, chọn DoLayer Palettehin layer comp cho hiển thị layer Bubble Copy • Cho frame 6, chọn DoLayer Palettehin layer comp cho hiển thị layer Pop Chọn nút Play Animation Palette để xem trước kết Khi xem xong bạn nút Stop để dừng lại Khi hiệu ứng động di chuyển từ frame sang frame khác, cá heo di chuyển lên xuống Nếu bạn xem vịng bong bóng từ cá, to lên dần cuối nổ bước thứ Nếu kết bạn khác với chúng tôi, xem lại thiết lập layer Layer Palette ẩn có không cho frame chỉnh sửa cần www.vietphotoshop.com - Dịch Bá tước Monte Cristo 15 Chương 18: Tạo hình động cho trang web Photoshop CS Thiết lập xem trước thời gian hình động Ở phần trên, bạn xem trước hình động bạn trình duyệt, bạn nhận cá heo di chuyển lên xuống "như điên" Bạn làm chậm lại cách đặt thời gian frame hiệu ứng động Sau bạn xem lại hình động lần để xem tốc độ Trong dự án bạn, bạn đặt khoảng dừng cho tất frame khoảng dừng có thời gian dài ngắn khác cho frame Trong hình này, bạn áp dụng thời gian giống cho frame cho hình Từ menu Animation Palette, chọn Select All Frames Nhấn vào nút thời gian (0 seconds, mặc định) nằm frame để mở menu Frame Delay, sau chọn 0.2 Seconds Giá trị xuất frame, cho bạn biết thời gian áp dụng cho tất frame Palette Nhấn vào nút Play Animation Palette để xem hiệu ứng động sau nhấn vào nút Stop để dừng lại Chọn File > Preview In chọn trình duyệt để xem hiệu ứng động với thời gian bạn vừa thiết lập Chọn File > Save Optimize As www.vietphotoshop.com - Dịch Bá tước Monte Cristo 16 Chương 18: Tạo hình động cho trang web Photoshop CS Trong hộp thoại Save As, đặt tên cho hình DoLayer Palettehin.gif đặt thư mục My_Gif Nhấn Save chọn Replace để thay file cũ Trong lệnh Save Optimized As lưu file định dạng Gif, JPEG PNG để sử dụng cho web Nhưng có định dạng Gif hỗ trợ hình động, định dạng bạn dùng chương Chọn File > Close để đóng hình gốc lại mà khơng cần lưu lại thay đổi Bạn hồn thành hình động cho cá heo Ở phần tới, bạn tiếp tục làm việc với loại hình động khác Tạo hình động với độ suốt vị trí layer Bạn sử dụng phương pháp khác để tạo hình động phần học Trong phần này, bạn tạo hình động cho đoạn chữ bay vào, sử dụng hình nhiều layer Photoshop Nhưng bạn tự tạo nhiều layer cho thay đổi vị trí bạn khơng phải điều chỉnh cho frame Một bạn tạo frame đầu frame kết thúc cho hình, bạn để ImageReady tự tạo tất frame cịn lại Mở hình bắt đầu trình tạo hình động Để bắt đầu, bạn mở tài liệu xem thiết lập Trong ImageReady, chọn File > Open chọn H2O.psd từ thư mục Lesson18 Logo bao gồm thành phần khác đặt layer riêng biệt Bạn tạo hình động frame cho chữ xuất di chuyển vào vị trí trung tâm từ vùng khác Trạng thái ban đầu hình hình bạn muốn hiển thị cuối trình Cho hiển thị hai Animation Palette Layer Palette cách chọn Window > Workspace > 8_Animation Trong Animation Palette, chọn nút Duplicate Current Frame để tạo frame Bây bạn có hai frame bạn tạo đường cho hiệu ứng hình động Nhiệm vụ tới bạn thay đổi tình trạng nhiều layer cho frame khác www.vietphotoshop.com - Dịch Bá tước Monte Cristo 17 Chương 18: Tạo hình động cho trang web Photoshop CS Thiết lập vị trí layer độ suốt Trong phần học, bạn điều chỉnh vị trí độ suốt layer hình để tạo frame đầu frame kết thúc cho hình bạn Để thay đổi thứ tự frame đơn giản, bạn cần kéo frame Animation Palette Trong Animation Palette, chọn frame sau Layer Palette chọn layer H Chọn cơng cụ Move, giữ phím Shift để ép di chuyển, kéo chữ "H" phía bên trái hình cho phần nhìn thấy Trong Layer Palette, chọn layer chữ "O", sau giữ phím shift kéo vị trí bên tay phải cửa sổ hình ảnh Lập lại bước 3, lần chọn layer số "2" kéo lên đường biên phía cửa sổ hình ảnh layer bạn có vị trí giống hình sau www.vietphotoshop.com - Dịch Bá tước Monte Cristo 18 Chương 18: Tạo hình động cho trang web Photoshop CS Trong Layer Palette, chọn layer chữ "H" kéo trượt Opacity xuống 20% Lập lại trình để đặt giá trị Opacity layer chữ "O" số "2" 20% Trong Animation Palette, bạn thấy frame cập nhật với thay đổi vị trí mà bạn vừa tạo Để cho frame trạng thái bắt đầu hình động, bạn thay đổi lại thứ tự hai frame Trong Animation Palette, kéo frame sang bên trái, nhả chuột đường viền màu đen xuất bên trái frame www.vietphotoshop.com - Dịch Bá tước Monte Cristo 19 Chương 18: Tạo hình động cho trang web Photoshop CS Tweening vị trí mức Opacity layer Tiếp theo, bạn thêm frame nằm hai frame vừa tạo, frame frame tạo biến đổi frame frame Khi bạn thay đổi vị trí, mức Opacity hiệu ứng layer nằm hai frame hình động, bạn hướng dẫn ImageReady Tween nó, lệnh tự động tạo frame trung gian với số lượng bạn định Trong Animation Palette, chọn frame sau chọn Tween menu Animation Palette Trong hộp thoại Tween, đặt thơng số sau: • Ở menu xổ Tween With chọn Next Frame • Ở Frames to Add, gỗ • Ở Layers, chọn All Layers • Dưới Parameters, chọn Position Opacity cách đánh dấu kiểm vào ô trống nằm cạnh (bạn chọn Effects bạn muốn thay đổi thông số layer để tác động đến tất frame nằm hai frame đầu frame cuối Nhưng phần này, bạn khơng chọn lựa chọn này, bạn chưa áp dụng Layer Style cho frame cả) • Nhấn OK để đóng hộp thoại lại ImageReady tạo frame biến đổi, dựa thông số độ suốt vị trí layer hai frame gốc ban đầu Ở menu xổ Looping, chọn Once Chú ý: Ở ví dụ tài liệu End học này, thơng số khác với bạn yêu cầu phần Ở tài liệu End, lựa chọn Forever chọn cho Looping hai hiệu ứng động khoảng thời gian dừng dài mà bạn chưa tạo thời điểm Trong Animation Palette, nhấn vào nút Play để xem trước hiệu ứng động ImageReady www.vietphotoshop.com - 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 frames Bạn sử dụng lệnh Tween để tự động thêm vào sửa đổi loạt frame nằm hai frame có sẵn - thay đổi thuộc tính (vị trí, độ suốt hiệu ứng) - để tạo hiệu ứng di chuyển cho đối tượng Ví dụ, bạn muốn làm mờ layer, đặt mức Opacity layer frame đầu 100%, sau đặt mức Opacity cho layer frame thứ - frame cuối - 0% Khi bạn Tween frame, mức Opacity layer giảm qua frame Thuật ngữ Tweening lấy từ chữ "In Betweening" (ở giữa), thuật ngữ cổ điển dùng để miêu tả trình Tweening giúp bạn tiết kiệm rất nhiều thời gian phải tạo hiệu ứng động dạng mờ đi, nhạt dần di chuyển đối tượng Bạn chỉnh sửa frame tạo lệnh Tween sau chúng tạo Nếu bạn chọn frame đơn, bạn chọn Tween với frame nằm trước hay nằm sau Nếu bạn chọn hai frame kề nahu, frame thêm vào hai frame Nếu bạn chọn hai frame, frame có nằm frame đầu frame cuối bị thay đổi lệnh Tween Nếu bạn chọn frame đầu frame cuối (chỉ đầu cuối, không bao gồm frame nằm chúng) hai frame coi hai frame nằm kề frame tạo lệnh Tween thêm vào sau frame cuối (cách hữu ích hình động bạn có nhiều đoạn Loop khác nhau) Chú ý: Bạn chọn hai frame không kề để Tween Tạo hình động cho Layer Style Khi bạn Tween để tạo frame phần trên, bạn không đánh dầu vào hộp kiểm Effect hộp thoại Tween Trong phần này, bạn tạo hiệu ứng động cho hiệu ứng Layer Layer Style Kết cuối hiệu ứng loé sáng xuất biến đằng sau số "2" Trong Animation Palette, chọn frame 6, sau nhấp chuột vào nút Duplicate Current Frame để tạo frame với thông số frame thứ Trong Layer Palette, chọn layer số "2" sau chọn Outer Glơ từ menu Layer Style cuối Layer Palette www.vietphotoshop.com - Dịch Bá tước Monte Cristo 22 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 • Dưới Parameters, chọn Effects Photoshop CS 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 ... 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 frames... động khác Tạo hình động với độ suốt vị trí layer Bạn sử dụng phương pháp khác để tạo hình động phần học Trong phần này, bạn tạo hình động cho đoạn chữ bay vào, sử dụng hình nhiều layer Photoshop. .. 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
