Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Thiết kế web bằng photoshop > Hướng dẫn tạo ảnh load động trong Photoshop
Hướng dẫn tạo ảnh load động trong Photoshop
Nguyễn Trung Hiếu
Share Code Web Company 2012

Hướng dẫn tạo ảnh load động trong Photoshop

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 nhé

create pre-load in 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
create pre-load in photoshop
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
create pre-load in photoshop
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
creat pre-load in photoshop
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
create pre-load in photoshop
create pre-load in photoshop
Sau đó nhân ba layer đó lên, và thực hiện transform bằng lệnh Ctrol+T
create pre-load in photoshop
Cuối cùng ta được như sau
create pre-load in photoshop
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.
create pre-load in photoshop
sau đó sử dụng công cụ Direct Selection Tool để được như bên dưới
create pre-load in photoshop
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,
create pre-load in photoshop
sau đó thực hiện quay góc 45 độ và duplicate nó lên ta được các layer như bên dưới
create pre-load in photoshop
Cuối cùng là gộp các layer đó lại ta được như sau
create pre-load in photoshop
Bước 5: Làm đẹp cho từng Tick Marks
Click chọn layer style -> Color Overlay #242424
create pre-load in photoshop
Drop Shadow như dưới
create pre-load in photoshop
Inner Shadow
create pre-load in photoshop
Thành quả sau bước 5 ta được như này
create pre-load in photoshop
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
create pre-load in photoshop
Bước 7: Style
Với layer “Shine active” ta chọn style như sau
create pre-load in photoshop
create pre-load in photoshop
Color overlay sử dụng màu #0087c6;
create pre-load in photoshop
Với layer “Shine-Fading 2”
create pre-load in photoshop
Với layer “Shine-Fading3”
create pre-load in photoshop
Cuối cùng ta được như sau
create pre-load in photoshop
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
create pre-load in photoshop
Sau đó duplicate nó lên, với mỗi lần duplicate bạn lại thực hiện xoay 45 độ
create pre-load in photoshop
Và giờ sản phẩm của chúng ta như này
create pre-load in photoshop
Bước 9: Tạo ảnh động
Bạn vào Window -> Animation để kích hoạt bảng này lên
create pre-load in photoshop
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
create pre-load in photoshop
Cuối cùng là save nó lại File -> Save for Website & Devices
create pre-load in photoshop
Cuối cùng là file dành cho những ai không làm được nhé

Download PSD

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}