Hướng dẫn sử dụng Google Web Designer thiết kế quảng cáo HTML5

Chào các bạn, bài viết này Phúc sẽ hướng dẫn các bạn cách sử dụng Google Web Designer để thiết kế quảng cáo Google Ads với định dạng HTML5 hiệu quả.

Việc thiết kế quảng cáo HTML5 này không chỉ để thiết kế dành riêng cho Google Ads mà còn phục vụ cho nhiều dạng quảng cáo khác, bạn có thể up trực tiếp file .zip lên Google Ads hoặc bạn cũng có thể tự show code HTML5 để gán vào các widget… Mình giới thiệu qua một chút ở phần trên, bây giờ là bắt đầu vào phần chính của bài viết nào mọi người.

Let’s go!!

Đầu tiên, việc cần làm của các bạn là biết sử dụng Photoshop, nếu tốt hơn thì công việc sẽ nhanh hơn hoặc biết một vài phần mềm chỉnh sửa ảnh khác không riêng gì Photoshop, còn mình thì khuyên các bạn nên sử dụng PTS :)) Nếu không biết tí gì về PTS thì mình có nhận dạy thêm PTS cơ bản để sử dụng phục vụ cho việc làm ảnh đơn giản.

Bạn nào chưa có phần mềm thì tải tại đây nhé:  http://sinhvienit.net/forum/adobe-photoshop-cs6-full-crack.208139.html

Tiếp theo các bạn tải về cho mình phần mềm Google Web Designer tại đây: https://www.google.com/webdesigner/

Okey, vậy phần cài đặt chắc mình không cần chỉ thêm nữa phải không nhỉ?… các bạn cài như những phần mềm khác nhé… Tiếp theo mình vào phần giao diện hướng dẫn luôn, bạn nào có khó khăn cài đặt thì liên hệ mình qua facebook: fb.com/lamphucmmo ( Mình hỗ trợ từ 19:00 – 22:00 tất cả các ngày trong tuần )

Khi cài đặt và vào phần mềm, đầu tiên Google Web Design sẽ hỏi bạn lựa chọn thiết kế.

Creat New File: Tạo tập tin mới hoàn toàn cho việc thiết kế

Use Template: Sử dụng themes có sẵn của Google Web Designer

Find Help: Xem hướng dẫn

Ở bên Open File mình có nhiều tệp tin là vì mình đang làm thiết kế quảng cáo gạch ngói âm dương và ngói mediteriano cho công ty mình nên các bạn không cần thắc mắc nhé ^^. Với người sử dụng lần đầu file sẽ mới hoàn toàn :D.

Thường thì các bạn nên sử dụng Creat New File để tùy biến và sử dụng ý tưởng sáng tạo của mình một cách tối đa.Sau khi vào phần tạo tệp mới sẽ có giao diện như này

Ở đây mình tập trung vào phần thiết kế Banner, những phần khác mình không đề cập đến, ở trong phần Other có thiết kế HTML, HTML with pages, CSS, JavaScript, XML … với những bạn chuyên code thì có thể tìm hiểu và thiết kế tại đó. Dưới đây mình xin phép giải thích các tùy chọn:

Name: Đặt tên

Location: Đường dẫn lưu file

Environment bao gồm: Double Click, AdMob, AdWords, Non-Google ad.

Dimensions: Kích thước, độ phân giải có sẵn, click vào sẽ có các lựa chọn.

Animation mode: Hoạt ảnh, mình để mặc định.

Phần tiếp theo mình xin hướng dẫn AdWords vì mình sử dụng chủ yếu để thiết kế banner cho Google Ads.

Các thông số sẽ như sau:

Note 1: Element Tool (D): MÌnh focus vào tool này vì gần như các thao tác sẽ thực hiện trên tool này, khi click vào sẽ xuất hiện  “Note 2”.

Note 2: Có các tùy chọn thiết kế theo thứ tự như sau – div – image – video

Div: Khi bạn tạo bất cứ thứ gì trong option này thì sẽ hiển thị tại vị trí bạn đặt

Image: Hiển thị hình ảnh bạn add vào

Video: Hiển thị video bạn add vào

Note 3: Position and size – điều chỉnh kích thước của thành phần (element)

Note 4: Transtion, rotation và Scale – điều chỉnh tọa độ, độ nghiêng của thành phần

Note 5: Thay đổi cách theo dõi key frame

Ở bài viết này mình hướng dẫn cơ bản các thông số của phần mềm Google Web Designer beta, tuy đang ở bản thử nghiệm nhưng thiết kế rất ok. Sắp tới mình sẽ làm video hướng dẫn chi tiết, các bạn tìm hiểu trước để biết về các thông số và thành phần, để khi xem video hướng dẫn của mình sẽ hiểu nhanh hơn.