Vừa cho ra mắt bản beta của Google Web Designer hỗ trợ người dùng không chuyên về code HTML5/CSS3 có thể tạo ra các chuyển động website đẹp mắt.
Công cụ được download miễn phí tại địa chỉ http://www.google.com/webdesigner/. Phiên bản hiện tại vẫn đang beta.
Google Web Designer (GWD) beta được tải miễn phí phiên bản cho Windows và Mac với các công cụ dùng để xây dựng Website, quảng cáo HTML5/CSS3. GWD cung cấp cho người dùng 2 giao diện: Design View và Code View. Với giao diện Design View, người dùng có thể sử dụng các công cụ như Pen Tool, Text Tool, Rectangle Tool v.v. để xây dựng trang HTML5/CSS3, sau đó tạo chuyển động cho các đối tượng. Đồng thời GWD cũng cung cấp cho người dùng các tùy chọn để tùy chỉnh các thuộc tính CSS3 của từng đối tượng.
HƯỚNG DẪN TẠO BANNER
Chúng ta sẽ cùng tạo một banner HTML5/CSS3 với animation bằng Google Web Designer.Các bạn download Source tại đây.
Xem demo sản phẩm sau khi hoàn thành tại đây
Hocweb.com.vn – Hoc Web – HTML – CSS
TẠO MỚI MỘT FILE HTML VỚI GWD
Để tạo mới, các bạn vào menu File chọn New file hoặc bấm tổ hợp phím Ctrl + N. Thiết lập như hình sau và bấm OK
Hocweb.com.vn – Hoc Web – HTML – CSS
Hocweb.com.vn – Hoc Web – HTML – CSS
THÊM THÀNH PHẦN ĐẦU TIÊN
Đầu tiên chúng ta cùng nhau thêm vào banner là hình nền. Các bạn chọn công cụ Tag Tool nằm trên thanh công cụ, sau đó chọn nút Image Element nằm trên thanh công cụ bên dưới menu. Tiếp theo vẽ lên vùng trắng một hình chữ nhật, hình chữ nhật này chính là vùng dành riêng cho hình mà chúng ta sắp chèn vào.
Hocweb.com.vn – Hoc Web – HTML – CSS
Sau khi vẽ các bạn sẽ được một hình chữ nhật viền xanh, có nghĩa là vùng đó đang được chọn. Chọn công cụ Selection Tool và chọn vùng đã vẽ để đặt các thông số cho vùng đó hiển thị hình của chúng ta đã chuẩn bị sẵn.
Hocweb.com.vn – Hoc Web – HTML – CSS
Sau khi chọn vùng, các bạn thiết đặt các thông số trong panel Properties nằm bên tay phải như hình sau
Hocweb.com.vn – Hoc Web – HTML – CSS
Các thông số cần thiết đặt: “Position and Size” và “Image Properties”. Như vậy chúng ta đã tạo thành công thành phần đầu tiên trên banner của chúng ta.
THÊM CÁC THÀNH PHẦN
Chúng ta tiếp tục thêm các thành phần còn lại để hoàn thành banner của chúng ta. Các bước làm tương tự như thêm thành phần đầu tiên, chọn công cụ Tag Tool -> Image Element -> Vẽ một vùng như hình sau
Hocweb.com.vn – Hoc Web – HTML – CSS
Sau đó chọn công cụ Selection Tool -> Chọn vùng vừa vẽ -> Đặt các Properties cho vùng.
Hocweb.com.vn – Hoc Web – HTML – CSS
Các thành phần còn lại các bạn thêm vào các vị trí như hình sau
Hocweb.com.vn – Hoc Web – HTML – CSS
Lưu ý: Chúng ta phải đặt các thành phần (trừ background) ngoài vùng hiển thị để tạo các chuyển động bay vào phần hiển thị.
XOAY THÀNH PHẦN TRONG KHÔNG GIAN 3D
Chúng ta sẽ thực hiện xoay 2 thành phần là HTML5 và CSS3 nằm ở góc trên tay phải 180 độ theo 2 chiều x và y, có nghĩa là chúng ta sẽ lật ngược chúng lại theo chiều ngang và chiều dọc.Để xoay một thành phần, các bạn chọn công cụ 3D object rotate tool nằm trên thanh công cụ bên trái, sau đó click vào thành phần chúng ta muốn xoay. Với những bạn đã từng làm việc với các công cụ 3D như 3Ds Max, Blender thì ở GWD công cụ Rotate này tương tự. Nó sẽ xuất hiện các vòng tròn x, y, z xung quanh thành phần được chọn.
Xoay theo chiều x, y hoặc z chúng ta chỉ cần đưa chuột vào vòng tròn tương ứng, khi đó các vòng tròn còn lại sẽ mờ đi. Sau đó bấm giữ chuột và di chuyển chuột để thực hiện xoay theo chiều đã chọn.
Để xoay không theo một chiều nhất định ( xoay cả 3 chiều xyz một lượt ) chúng ta chỉ cần bấm giữ chuột vào vùng trống bên trong các vòng tròn ( cả 3 vòng tròn đều sáng ) và chi chuyển chuột để xoay hình.
Hocweb.com.vn – Hoc Web – HTML – CSS
Vì chúng ta quay ngược 2 thành phần HTML5 và CSS3 theo chiều x và y nên sẽ bấm giữ vào vòng tròn x và y, sau đó di chuyển chuột để xoay hình 180 độ. Kết quả sau khi xoay xong
Hocweb.com.vn – Hoc Web – HTML – CSS
TẠO HIỆU ỨNG CHUYỂN ĐỘNG
Đầu tiên để tạo chuyển động cho một hoặc nhiều thành phần, các bạn cần phải tạo một Frame mới bằng cách bấm vào nút dấu + nằm ở khung Time line dưới cùng. Sau đó chọn vào Frame mới được tạo ra.Để tạo chuyển động cho một hoặc nhiều thành phần, các bạn chỉ cần thay đổi các thuộc tính của nó về kích cỡ, vị trí, rotate, màu sắc, v.v
HIỆU ỨNG ĐẦU TIÊN
Chúng ta sẽ tạo hiệu ứng cho đám mây đầu tiên. Các bạn bấm nút dấu + ở khung Timeline để tạo Frame mới. Sau đó chọn vào đám mây và di chuyển đến vị trí sau khi chuyển động mà chúng ta mong muốn như hình sau
Hocweb.com.vn – Hoc Web – HTML – CSS
Sau khi hoàn thành, các bạn có thể bấm nút PLAY ở khung Timeline để xem thử chuyển động, hoặc bấm Preview ở trên khung Timeline để xem thử trên trình duyệt.
Tiếp theo tạo hiệu ứng cho dám mây còn lại với Frame mới.
Hocweb.com.vn – Hoc Web – HTML – CSS
Các bạn lần lượt tạo các hiệu ứng cho các thành phần còn lại như sau
Hocweb.com.vn – Hoc Web – HTML – CSS
Hocweb.com.vn – Hoc Web – HTML – CSS
Sau khi hoàn thành, các bạn có thể PLAY hoặc Preview trong trình duyệt để xem thử. Khi đã đồng ý với sản phẩm, chúng ta thực hiện việc Publish để có thể chèn vào website.
PUBLISH THÀNH PHẨM
Để Publish các bạn bấm vào nút Publish bên cạnh nút Preview. Đặt các thông số sau.
Hocweb.com.vn – Hoc Web – HTML – CSS
Bấm Publish để hoàn thành, sau khi publish chúng ta sẽ có được một file Zip với tên là tên file HTML mà chúng ta đã đặt khi tạo mới. Giải nén file Zip.
Hocweb.com.vn – Hoc Web – HTML – CSS
Mở file index.html bên trong thư mục banner bằng trình duyệt, chúng ta sẽ thấy rằng các thành phần đều hiển thị lên màn hình không như chúng ta mong đợi.
Hocweb.com.vn – Hoc Web – HTML – CSS
Để sản phẩm cuối cùng hiển thị như chúng ta muốn, các bạn mở file index.htm bằng code editor, chúng ta sẽ thêm thuộc tính CSS. Các bạn tìm
Hocweb.com.vn – Hoc Web – HTML – CSS
TỔNG KẾT
Qua bài hướng dẫn này, các bạn đã biết cách sử dụng GWD để thiết kế ra banner HTML5/CSS3. Sử dụng các công cụ Tag tool để vẽ hình ảnh. 3D object rotate tool để xoay ảnh trong không gian 3D, tạo các chuyển động về vị trí, 3D với chế độ Animation Mode là Quick. Hocweb.com.vn sẽ tiếp tục các bài hướng dẫn về GWD với các công cụ khác, và chế độ Animation Mode Advanced.Xem thêm tại : hocweb.com.vn/category/hocweb/photoshop-html-css/html-css/
----------------------------------------------------------------------------------------------------------------------------------------------------------
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!
Đăng nhận xét