Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Vào ngày 25/11/2018 sắp tới đây sẽ diễn ra 1 buổi offline cả 4 miền Bắc - Trung - Nam - Tây nhân dịp Việt Designer tròn 7 tuổi với rất nhiều quà từ nhà tài trợ, dự là sẽ rất hấp dẫn. Chi tiết về buổi offline và cách thức đăng ký click xem tại đây nhé!
    Loại bỏ thông báo

Hướng dẫn làm ảnh động loading bằng Photoshop

Chủ đề thuộc danh mục 'Animation' được đăng bởi Phạm Hữu Dư, 24/10/12.

Lượt xem: 15,782

  1. Phạm Hữu Dư phamhuudu.com

    1 bài hướng dẫn làm ảnh động dạng loading (. gif) khá ấn tượng mà mình vừa đọc được trên mạng, chia sẻ đến các các bạn :D

    Bài viết này sẽ hướng dẫn bạn làm quen với ảnh động, cũng như tạo cho mình một hình ảnh pre-load cực đẹp bằng photoshop.

    [​IMG]

    Bước 1: Khởi động

    1. Mở 1 tài liệu mới (File -> New hoặc Control+N)
    2. Chọn kích cỡ của ảnh là 100px*100px
    3. Chuyển BG layer thành layer thường
    4. Đổ màu cho nền sử dụng chỉ số màu #3d3d3d

    [​IMG]

    Bước 2: Tạo Background Pattern

    Bước này chúng ta tạo ra một background pattern để làm nền cho sản phẩm của chúng ta. Bạn tạo một tài liệu với nền trong suốt kích thước 7×7. Vẽ một đường thẳng từ góc trên bên trái xuống góc dưới bên phải như hình

    [​IMG]

    Sau đó click Edit -> Define Pattern.

    Xong, quay lại sản phẩm của chúng ta, bạn click double vào layer background, để mở hộp thoại layer style sau đó chọn Pattern Overlay và chọn sản phẩm mà chúng ta vừa tạo bên trên

    [​IMG]

    Bước 3: Tạo thước để căn chỉnh cho dễ

    Đầu tiên là vẽ một đường thẳng, sau đó căn nó ra giữa

    [​IMG]
    [​IMG]

    Sau đó nhân ba layer đó lên, và thực hiện transform bằng lệnh Ctrl+T

    [​IMG]

    Cuối cùng ta được như sau

    [​IMG]

    Bước 4: Tạo hình Marks

    Tạo một vài thước để căn chỉnh cho dễ, sau đó tạo một hình chữ nhật biên tròn 1px.

    [​IMG]

    sau đó sử dụng công cụ Direct Selection Tool để được như bên dưới

    [​IMG]

    Tiếp theo lại sử dụng lệnh transform nhưng lần này tâm quay các bạn kéo xuống vị trí như bên dưới,

    [​IMG]

    sau đó thực hiện quay góc 45 độ và duplicate nó lên ta được các layer như bên dưới

    [​IMG]

    Cuối cùng là gộp các layer đó lại ta được như sau

    [​IMG]

    Bước 5: Làm đẹp cho từng Tick Marks

    Click chọn layer style -> Color Overlay #242424

    [​IMG]

    Drop Shadow như dưới

    [​IMG]

    Inner Shadow

    [​IMG]

    Thành quả sau bước 5 ta được như này

    [​IMG]

    Bước 6: Duplicate Layer

    Chúng ta duplicate layer bên trên ra, sau đó xóa bớt một vài thành phần, sau đó đổi tên các layer để được các layer như bên dưới

    [​IMG]

    Bước 7: Style

    Với layer “Shine active” ta chọn style như sau

    [​IMG]
    [​IMG]

    Color overlay sử dụng màu #0087c6;

    [​IMG]

    Với layer “Shine-Fading 2″

    [​IMG]

    Với layer “Shine-Fading3″

    [​IMG]

    Cuối cùng ta được như sau

    [​IMG]

    Bước 8: Nhóm chúng lại và duplicate lần nữa

    Trước tiên là cho vào 1 nhóm

    [​IMG]

    Sau đó duplicate nó lên, với mỗi lần duplicate bạn lại thực hiện xoay 45 độ

    [​IMG]

    Và giờ sản phẩm của chúng ta như này

    [​IMG]

    Bước 9: Tạo ảnh động

    Bạn vào Window -> Animation để kích hoạt bảng này lên

    [​IMG]

    sau đó chèn các layer vào các vị trí sao cho khi chuyển động chúng sẽ mượt mà là được. Và set cho tất cả các layer có độ trễ là 0.1s

    [​IMG]

    Cuối cùng là save nó lại File -> Save for Website & Devices

    [​IMG]

    Cuối cùng là download file PSD dành cho những ai không làm được nhé
    [​IMG]

    Nguồn: Tutsplus.com

    Luccaoni2584, Mononoke Hime, Katy230921 người khác thích bài viết này.
  2. hAckeZ

    hAckeZ Thành viên cấp 2

    bỏ cái bg ra làm ảnh loading website thì tuyệt :-bd
  3. lu3kchj

    lu3kchj Thành viên cấp 1

    Đơn giản rất toẹt vời :))
  4. trucit92

    trucit92 Thành viên cấp 2

    ad mới nhìn cứ tưởng là cho xem video chứ, ai ngờ đọc xong tut thì là ảnh động. tks ad nhìu :D
  5. tuankiet_nct

    tuankiet_nct Thành viên cấp 2

    mới vào tưởng đang load cái gì :D
  6. Kyuubi Yến Chù

    Kyuubi Yến Chù Thành viên cấp 2

    Mói nhìn tưởng video đang load :))
  7. MR KR

    MR KR Thành viên cấp 2

    ~X( link down die
  8. LoideGinji

    LoideGinji Thành viên cấp 1

    Quá hay, thanks bác chủ thread, đợt này em đang làm project web mà có đc cái này quá tiện :x
  9. Hồng Sơn

    Hồng Sơn Helper

    - :like:
    Chỉnh sửa lần cuối: 13/1/16
  10. Thanh Duyên

    Thanh Duyên Thành viên cấp 1

    Lại cứ tưởng ảnh đang load :)))
  11. baoquan287

    baoquan287 Thành viên cấp 2

    Đẹp lắm. Thanks thớt
  12. xiaolinh

    xiaolinh Thành viên cấp 1

    Quá hay !
  13. nguyenthai1990

    nguyenthai1990 Thành viên cấp 1

    hic sao em không thấy anh nhỉ
  14. noname_0

    noname_0 Thành viên cấp 4

    thaks, wáđẹp >:D<
  15. Katy2309

    Katy2309 Thành viên cấp 2

    Cái bước cuối cùng shock qá =))
  16. siukoi

    siukoi Thành viên cấp 2

    Sao bên mình load ảnh bị lỗi hết vậy nhỉ :v
  17. Thế Hùng

    Thế Hùng Thành viên cấp 2

    em là em thích nhất cái bước cuối cùng của anh Dư :))
  18. An Hoàng Văn

    An Hoàng Văn Thành viên cấp 1

    up lại file PSD đi a ơi, lỗi rồi :D

Ủng hộ diễn đàn