Như các bạn đã biết, từ phiên bản CS3 (10.0) trở lên Photoshop và ImageReady đã được tích hợp lại làm một vì thế việc thực hiện thao tác tạo Animation cho ảnh đều được thực hiện tại giao diện của Photoshop. Trước đây khi muốn mở file ảnh động để edit trên Photoshop ta dễ dàng mở nó trên ImageReady, tuy nhiên từ CS3 ta không thể mở trực tiếp bằng Photoshop mà cần phải có sự hổ trợ của Apple QuickTime.

Cách mở ảnh động với định dạng .gif trong Photoshop CS3, CS4, CS5

Vì mình sử dụng Photoshop CS3 nên tutorial sẽ chỉ có ảnh minh họa của CS3, các phiên bản về sau này thực hiện tương tự.

Trước hết các bạn cần cài đặt phần mềm Quick Time Player, 1 phần mềm media của Apple, phiên bản 7.1 trở lên. Chi tiết download tại đây.

Sau khi hoàn tất cài đặt, các bạn mở Photoshop

Bước 1: File > Export > Video Frames to Layers

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Bước 2: Sau đó sẽ có 1 bảng được hiện ra như thế này:

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên
Look in: tìm đường dẫn tới Folder chứa file ảnh động
File name: các bạn gõ ký tự *.* (đây là ký tự để hiện theo chế độ All file)

Sau khi xong các bạn Load file ảnh vào

Bước 3: Các bạn chọn From Beginning to End để mở toàn bộ Frame của file ảnh:

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Bước 4: Windows > Animation để mở bảng Animation

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Kick vào đây để hiện chế độ Frame:

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Giao diện Animation sẽ như này:

Vì ở ảnh này chỉ có 1 frame nên ta chỉ thấy có 1 frame, nếu như ảnh có nhiều frame nó cũng sẽ xuất hiện nhìêu frame

Vì ở ảnh này chỉ có 1 frame nên ta chỉ thấy có 1 frame, nếu như ảnh có nhiều frame nó cũng sẽ xuất hiện nhìêu frame

Cách làm ảnh động

(Thật ra trước đây khi web còn hoạt động trên WeLovePhotoshop.Com đã có 1 bài tutorial hướng dẫn khá chi tiết về cách làm ảnh động, có kèm theo cả video rất dễ hiểu, bạn có thể vào tham khảo ở đây)

Còn sau đây mình sẽ thao tác lại bài tutorial và lấy chính logo của Việt Designer để làm

Chắc hẳn các bạn còn nhớ cách làm Animation bằng hình vẽ trên giấy. Ở mỗi trang giấy chúng ta sẽ vẽ một hành động rồi lật giở từng trang thật nhanh (tầm 5 – 24 hình/giây) và lúc đó chúng ra sẽ thấy hình vẽ như đang chuyển động

Làm ảnh động trong Photoshop cũng tương tự như vậy, mỗi Frame như một trang giấy và chúng ta sẽ có 1 dãy các Frame để tạo thành 1 ảnh động hoàn chỉnh.

Mỗi 1 Layer tương đương 1 Frame vì thế Layer nào hiện (ko tắt con mắt) thì sẽ có trong Frame mà bạn đang chọn.

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Ở box Layer mình có 8 Layers –> sẽ có 8 Frames. 

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Bước 5: Kick vào đây để nhân đôi Frame (nhưng trước khi nhân đôi layer bạn có thể set trước thời gian cho từng frame, ở đây mình chọn là 0,1s, tuy nhiên bạn có thể chỉnh sửa thời gian sau khi nhân đôi frame sao cho thích hợp với chuyển động của animation)

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Tại Frame 2, tắt con mắt Layer 1, bật con mắt của Layer 2 

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Cứ thế chúng ta lặp lại với các Layer và Frame còn lại…

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Tại bảng trong hình là 3 cách thiết lập số lần lặp lại của animation
Forever: mãi mãi

Once: 1 lần

Other: tùy chỉnh số lần lặp lại

Và đây là kết quả 😀

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Để có thể save ảnh động ta vào File > Save for Web & Devices (Ctrl + Alt + Shift + S)

Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Color Table: bảng màu hiển thị những màu có trong ảnh

Color: 256 đây là số lượng màu sẽ được hiển thị trong ảnh, càng nhiều màu chất lượng càng cao và ảnh càng nặng

Đây mới chỉ là cách cơ bản nhất của làm ảnh động, còn nhiều cái phức tạp hơn, chỉ cần các bạn làm tốt khâu thiết kế và lên ý tưởng thì ko có gì là ko thể.

10 Phản hồi

  1. sÔcÔlA

    s mình cài QT rồi…mà khi mở gif lên lại ko đk ???????

    Reply
    • Việt Designer

      Chưa rõ là bạn có làm đúng với hướng dẫn chưa? Chứ đã cài đặt QuickTime và làm theo hướng dẫn thì 100% là làm được 🙂

      Reply
    • Việt Designer

      Khi xuất ảnh động ra thì chất lượng đã bị tối ưu hóa (Save for web) rồi nên chất lượng cũng không thể nào đảm bảo 100% được bạn ạ

      Reply
  2. Mart

    S mình cài QuickTime 7.7.3 vào mà mở Video Frames to Layers nó báo là chưa cào QuickTime vây pác?

    Reply
  3. Thùy Anh

    lúc trước cài Quicktime có thể cut gif từ vid có đuôi *.mp4 nhg mà sao bh lại ko đc nữa, chỉ mở đc mov, avi, mpeg, mpg, là sao vậy ạ?

    Reply

Bình luận của bạn

Điền tên và email của bạn để có thể gửi trả lời