Đang tải... (xem toàn văn)
OpenGL Programming Guide (Addison-Wesley Publishing Company)
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 Trong Layer Palette, chọn layer Bubble nhấn vào biểu tượng mắt để hiển thị layer Vẫn để chọn layer Bubble Trong cửa sổ hình ảnh biểu tượng thu nhỏ frame 3, bạn thấy xuất bong bóng gần "mũi" cá heo Chọn View > SnAnimation Palette đánh vào dấu kiểm để bỏ chọn lệnh Chọn công cụ Move hộp cơng cụ Giữ phím Alt kéo bong bóng lên phía bên phải hình, layer layer copy layer Bubble xuất Layer Palette www.vietphotoshop.com - Dịch Bá tước Monte Cristo 11 Chương 18: Tạo hình động cho trang web Photoshop CS Giữ phím Alt xuống lần kéo để tạo bong bóng thứ xa chút phía bên phải bong bóng thứ Bây bạn có layer bong bóng cửa sổ hình ảnh Layer Palette bạn có: Bubble, Bubble copy Bubble copy Chú ý: Tất layer vừa nhân đơi hiển thị frame Animation Palette New Layers Visible in All States/Frames chọn menu Animation Palette Bây bạn chuẩn bị xong bước copy layer file DoLayer Palettehin.psd, bạn áp dụng lệnh Transform để làm cho bong bóng lớn dần bay phía sau cá heo Chọn công cụ Move công cụ Layer Select chọn tuỳ biến công cụ Trong cửa sổ hình ảnh, chọn bong bóng layer Bubble copy Layer Palette www.vietphotoshop.com - Dịch Bá tước Monte Cristo 12 Chương 18: Tạo hình động cho trang web Photoshop CS Chọn Edit > Transform > Scale Trong cửa sổ hình ảnh, đường viền màu đen có điểm điều khiển xuất bao quanh layer Bubble copy Trong tuỳ biến công cụ, chọn biểu tượng Constrain Aspect Ration gõ giá trị 24 Px vào ô Width (W) Nhấp vào vùng bên hộp văn Width bạn thấy bong bóng to lên đường biên màu đen xuất xung quanh layer Bubble copy Nhấn Enter để chấp nhận lệnh Transform Chọn bong bóng thứ lập lại bước 3-5, lần gõ vào 26 Px hai ô Width Height Vẫn sử dụng công cụ Move va lựa chọn Layer Select tuỳ biến, chỉnh sửa vị trí bong bóng cách kéo cửa sổ hình ảnh bạn thấy cần phải chỉnh sửa Bạn khơng nên để bóng thứ đằng sau đuôi cá heo khoảng cách bóng nên chia Xem hình sau để bạn dễ hình dung vị trí chúng www.vietphotoshop.com - Dịch Bá tước Monte Cristo 13
