Cách tạo biểu ngữ web hoạt hình trong Photoshop

Sep 12, 2025
Cách

Tạo các biểu ngữ web không phải là sự quyến rũ nhất về việc làm trên thế giới nhưng đó là điều mà mọi nhà thiết kế sẽ được yêu cầu làm tại một số điểm trong sự nghiệp của họ, có lẽ nhiều lần so với. Mặc dù không có quy tắc khó khăn và nhanh chóng khi tạo các biểu ngữ web, nhưng không cần phải nói rằng loại phải lớn và thông điệp đấm.

Vì chúng tôi cũng hoạt hình này, tôi sẽ đề xuất không quá ba slide hoặc các yếu tố hoạt hình vì mọi người chỉ đơn giản là không xem nó. Các yếu tố nhấp nháy cũng có thể giúp thu hút sự chú ý của người xem.

[số 8]

Make this animated banner for a website below…

Tạo biểu ngữ hoạt hình này cho một trang web bên dưới ...

Trong vài bước tiếp theo, tôi sẽ chứng minh cách thiết lập và tạo một biểu ngữ web hoạt hình đơn giản đã từng làm chủ sẽ là một làn gió để áp dụng cho bất kỳ công việc mới nào trong tương lai.

01. Thiết lập tài liệu của bạn

[số 8]

Khởi chạy Photoshop, điều hướng đến Tệp & GT; Mới và chọn Web từ menu thả xuống Preset. Từ bảng xếp hạng thả xuống Kích thước Chọn Bảng xếp hạng hoặc nếu kích thước của bạn thay đổi thì hãy chọn tùy chỉnh và nhập thủ công các kích thước pixel.

[số 8]

Với Snap to Document Bound được chọn từ menu Xem, hãy kéo hướng dẫn để chụp vào tất cả các giới hạn của tài liệu.

02. Thêm các yếu tố đồ họa

[số 8]

Bây giờ để đặt các yếu tố thiết kế thiết yếu của chúng tôi. Trong ví dụ trên, tôi đã dán trong logo vuông T3 và như tôi đã tạo các hướng dẫn có thể kích thước lại nó và làm cho nó chụp vào tài liệu bị ràng buộc dễ dàng. Dán trong một đồ họa mũi tên mà chúng ta sẽ sử dụng sau và sử dụng công cụ loại đặt tin nhắn của bạn cho slide đầu tiên. Dán vào bất kỳ hình ảnh nào bạn cần và sau đó đảm bảo rằng bạn đặt tên cho tất cả các lớp của bạn một cách thích hợp.

03. Tạo các slide thứ cấp

[số 8]

Bây giờ chỉ cần sao chép lớp loại của bạn, tắt lớp loại bên dưới và nhập vào giai đoạn tiếp theo của tin nhắn, trong trường hợp này "được bán ngay". Khi bạn hài lòng rằng bạn có tất cả các yếu tố tại chỗ, hãy hợp nhất càng nhiều lớp càng tốt. Là nền, logo và hình ảnh bìa sẽ vẫn tĩnh chúng ta có thể hợp nhất nó xuống để lại cho chúng ta bốn lớp, nền, các lớp loại và lớp mũi tên.

04. Tạo hoạt hình khung

[số 8]

Bây giờ chỉ cần nhấp vào tab Dòng thời gian ở dưới cùng của cửa sổ hoặc điều hướng đến Window & GT; Mốc thời gian. Nhấp vào mũi tên nhỏ ở giữa cửa sổ và chọn "Tạo hoạt hình khung" và sau đó nhấp vào nút. Bây giờ tắt tất cả các lớp ngoài lớp nền và lớp tin nhắn đầu tiên. Áp dụng độ trễ một giây vào khung từ menu thả xuống trên khung hình động nhỏ. Bây giờ chỉ cần nhấp vào nút "Sao chép các khung đã chọn" trong dòng thời gian nhưng tắt tin nhắn đầu tiên và bật tin nhắn thứ hai. Lặp lại quy trình này cho tất cả các lớp, hoàn thiện với lớp mũi tên.

  • 10 logo trò chơi Olympic tuyệt vời nhất mọi thời đại

05. Làm cho đèn flash mũi tên và điều chỉnh thời gian

[số 8]

Để làm cho mũi tên flash chỉ đơn giản là nhấn "trùng lặp khung đã chọn" từ dòng thời gian và tắt mũi tên. Điều chỉnh thời gian đến 0,5 giây và lặp lại quá trình biến mũi tên bật và tắt trong bảng các lớp để nó xuất hiện như thể nó nhấp nháy. Cuối cùng, bạn có thể muốn điều chỉnh một số thời gian cho đến khi bạn hoàn toàn hạnh phúc. Mọi người có những nhịp chú ý rất ngắn nên không có điểm nào chậm chạp với tốc độ khung hình, nhưng họ vẫn cần phải đọc nó.

06. Tiết kiệm cho web và thiết bị

[số 8]

Cuối cùng điều hướng đến "Lưu cho web" và chọn GIF từ menu thả xuống. Bạn cũng có thể giảm chất lượng một chút ở đây để có được kích thước tệp xuống. Khi bạn hài lòng hãy lưu gif và sau đó chỉ cần kéo nó vào trình duyệt web để kiểm tra nó.

Cách - Các bài báo phổ biến nhất

10 điều bạn không biết bạn có thể làm với Photoshop

Cách Sep 12, 2025

[số 8] Photoshop là một ví dụ hoàn hảo về tổng thể lớn hơn tổng số phần của nó, trong đó có nhiề..

Sử dụng túi công cụ Marmoset để trình bày các mô hình trong VR

Cách Sep 12, 2025

[số 8] Túi công cụ Marmoset không có nghĩa là mới đối với Nghệ thuật 3D. công nghiệp. Nó �..

Chuyển đổi trò chơi flash sang HTML5

Cách Sep 12, 2025

[số 8] Flash đang dần bị Adobe bị bỏ rơi có lợi cho HTML5 và JavaScript; Kết thúc chính thức của nó đư�..

Sơn nước gợn sóng trong dầu

Cách Sep 12, 2025

Khi bạn đang vẽ nước gợn sóng với một cái gì đó trong đó, bạn đang đảm nhận nhiệm vụ vẽ một sự phản ánh bị gián đoạn. Điều này có thể l�..

Cách tạo hiệu ứng tuyệt vời với hình dạng CSS

Cách Sep 12, 2025

[số 8] Các nhà phát triển frontend có xu hướng suy nghĩ trong các hình chữ nhật; Hình chữ nhật bên trong h..

Cách tạo Vải CG thực tế

Cách Sep 12, 2025

[số 8] Khi làm việc với vải và vải trong 3D, có thể khó đạt được cả độ phân giải tốt và một c�..

Bí mật để vẽ như Monet

Cách Sep 12, 2025

[số 8] Với lớp Master này, chúng tôi sẽ cố gắng vào trong đầu Monet một chút, để chúng ta có thể suy ..

Lời khuyên hàng đầu để điêu khắc một sinh vật trong Zbrush

Cách Sep 12, 2025

[số 8] Để chứng minh việc xây dựng một sinh vật trong Zbrush, tôi đang sử dụng mảnh này Nghệ th..

Thể loại