Tìm hiểu Làm thế nào để tạo Layout cho một trang Giới thiệu App Mobile P2

Đến hẹn lại lên tôi mang tới cho mọi người Phần 2 của bài tut mà tôi việt hoá

• Link Phần 1

Step 6 - Tạo Slider background và nội dung của Slider

Tiếp theo chúng ta sẽ đi tới việc tạo Background cho Slider nhé. Ta tạo ra 1 Layer mới đặt tên là Background_Slider sau đó ta chọn "Rectangular Marquee Tool" (M) và tạo vùng chọn tương tự như hình dưới đây.

​

Khi đã tạo được vùng chọn ta thực hiên Fill màu cho vùng chọn đó trên Layer Background_Slider bất cứ màu sắc nào cũng được. Sau khi Tô màu xong ta sẽ dùng Layer Style (double click vào layer Background_Slider sẽ ra được bảng Layer Style như hình bên dưới) . Ta chọn Gradient Overlay và thiết lập thông số màu sắc như hình.

​

​

Ta để 1 khoảng không gian bên trái để đặt Text và để khoảng nhỏ hơn ở bên phải để đặt 1 hình ảnh sản phẩm. Đơn giản ta dùng công cụ Text tools để hoàn thành bước này (nhìn hình phía dưới)

​

Ta Tải về hình ảnh của chiếc "HTC Pad" từ link phía dưới.

• HTC Pad PSD file By Esintitasarim

Sau khi tải chiếc HTC PAD về ta mở lên và kéo chiếc HTC Pad này vào project của chúng ta vị trí bên phải màn hình. Nếu kích thước của chiếc HTC Pad quá lớn bạn có thể thay đổi kích thước HTC Pad với "Free Transform Tool" (Ctrl + T).

​

Tiếp theo, tải về "Loupe": cái này hiểu nôm na kiểu như 1 chiếc kinh lúp (làm màu thôi , cái này tự làm chắc 1 phút thì xong) cơ mà ai lười thì có thể tải ở link phía dưới . Sau khi tải về ta kéo kính lúp vào project của chúng ta (nên nhớ là đặt phía trên Layer HTC PAD).

• Loupe: Screenshot Magnifier

​

Trên kính lúp ta kéo thêm một phiên bản HTC Pad nữa từ file ta download về trước đó, kích chuột phải vào phiên bản ta vừa kéo của HTC Pad và chọn "Create Clipping Mask" nên nhớ Layer HTC Pad thứ 2 phải để ngay bên trên layer "Kính Lúp". Sau bước này bạn sẽ thấy chiếc HTC Pad thứ 2 đã nằm gọn trong cái Kính Lúp rồi nhé - tiếp theo chỉ việc dùng Phím V và kéo chiếc HTC Pad thứ 2 bên trong Kinh Lúp sao cho được như hình phía dưới. Vậy là bạn đã mô tả được việc Zoom vào chi tiết của ứng dụng rồi đó .

​

Step 7 - Tạo Thanh điều hướng thứ 2 (Thực ra là các Tab nội dung cho Slider)

Trên một layer mới bên dưới tất cả các layer khác các bạn chọn "Rectangle Tool" (U), sau đó kéo ra một hình chữ nhật bên dưới các khu vực đặc trưng.(màu xanh như hình)

​

Ta thêm một "Gradient Overlay" từ Layer Style với thông số sau đây:

​

Sau khi thiết lập các thông số các bạn có thể nhìn hình bên dưới để xem kết quả thu được bằng việc sử dụng Gradient Overlay. Bên trong thanh điều hướng thứ 2 ta thêm một vài Title với một mô tả nhỏ. Trong giữa từng nhóm phụ thêm những dòng chia nhỏ như chúng ta đã làm với Thanh điều hướng ở phần 1 của tôi. Ta được hình dưới đây.

​

Cuối cùng ở trên một tiêu đề bất kì mà ta chọn ta vẽ thêm một mũi tên nhỏ hướng lên (với tôi điều này khá đơn giản khi tôi sử dụng Pentools cho Shape layer). Nhưng ở đây các bạn có thể tạo ra bằng cách sử dụng "Polygonal Lasso Tool" (L) để vẽ một hình tam giác và Fill màu cho nó. kết quả như hình bên dưới.

​

Step 8 - Tạo Content chính

Ta chọn "Rectangular Marquee Tool" (M) sau đó tạo vùng chọn xung quanh khu vực cuối cùng, như hình dưới đây. (dĩ nhiên ta nên tạo 1 Layer mới và đặt tên để tiện cho việc sử lý sau này nếu có sửa đổi)

​

Sau đó ta sử dụng chọn "Gradient Fill Tool" (G) và thiết lâp "Foreground" màu #cecece và "Background" màu #ffffff, sau đó kéo một đường gradient từ đỉnh của vùng chọn xuống phía dưới vài pixel.

​

Bước tiếp theo ta chọn "Rectangular Marquee Tool" và tạo ra hai dòng với kích thước 1 pixel chiều cao và chiều ngang kéo dài hết cả project. fill màu cho chúng dòng trên #333 và dòng dưới #ddd. ta sẽ được như hính phía dưới.

​

Phần Nội dung của trang web tôi chỉ dùng vài đoạn Text đơn giản để mô tả, từ những kiến thức đã nắm được ở các bước trước dùng Text Tools để tạo ra và sắp xếp chúng giống hính phía dưới đây.

​

Tạo Footer: Footer của 1 trang web thường là các đoạn văn bản như cá đường Link, một đoạn mô tả ngắn về trang web đó, đôi khi kèm theo đó là Logo của trang web và các biểu tượng Social các bạn có thể tham khảo thêm trên internet.

Cám ơn các bạn đã theo dõi 2 phần của bài hướng dẫn này!​