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

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

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.

​

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

​

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

​

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

​

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

​

​

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

​

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

​

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.

​

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

​

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,

​

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

​

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

​

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

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

​

Drop Shadow như dưới

​

Inner Shadow

​

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

​

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

​

Bước 7: Style

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

​

​

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

​

Với layer “Shine-Fading 2″

​

Với layer “Shine-Fading3″

​

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

​

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

​

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

​

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

​

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

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

​

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

​

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

​

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

​

Nguồn: Tutsplus.com​