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

Apps Mobile đang trở nên ngày càng phổ biến mỗi một ứng dụng mobile thông thường sẽ có 1 page giới thiệu về chính ứng dụng đó vì vậy trong một ngày valentine mưa gió này tôi sẽ dẫn bạn qua việc tạo ra phong cách bố trí các ứng dụng điện thoại di động của bạn rất riêng từ đầu bằng cách sử adobe photoshop.

Đây là một bài hướng dẫn được tôi Việt Hoá, các bạn xem nguồn ở cuối bài nhé (Tôi thấy bài viết rất hay và căn bản tại lười ngồi chụp màn hình với làm hình ảnh nên _ thôi không lan man nữa)

Kết quả cuối cùng (cool and clean)
​

Resource sử dụng trong bài :

• HTC Pad PSD File By Esintitasarim

Trước khi bắt tay vào công việc tôi cần các bạn lưu ý trong bài hướng dẫn này tôi sẽ sử dụng Grid 950px . Thường khi tôi làm tôi sẽ sử dụng (Grid 1170px 3 or 4 Colum or Fullsite ) - Thực tế các bạn làm với Grid nào cũng được 950 cũng được mà 1170 cũng được.

Step 1: Tạo Header cho website

Tạo một Document mới (Ctrl + N) với kích thước 1200 x 1150 pixel với một nền màu trắng #ffffff. Chọn "Rectangular Marquee Tool" (M) và kéo ra một hình chữ nhật ở phía trên cùng của khung hình 1200 pixels rộng và khoảng 220 pixels chiều cao.

​

Một khi bạn đã tạo nhãn hình chữ nhật và đặt tên cho nó (Layer) là "Header". Bây giờ chọn "Rounded Rectangle Tool" (U) với giá trị bo góc là 20 pixel.

​

Sau khi chọn "Rounded Rectangle Tool" (U) với giá trị bo góc là 20 pixel. Tôi kéo ra một hình chữ nhật tròn ngay phía trên đáy của cạnh của Header, hình chữ nhật này sẽ vào khoảng 950 pixels rộng và khoảng 60 pixel chiều cao.

​

Ta đặt tên cho Layer này là "Navigation" thanh điều hướng hay còn gọi là Top Menu. Tiếp tục ta sẽ vẽ Ô text Search Ta tiếp tục chọn lại "Rounded Rectangle Tool" (U) sau đó tao kéo từ lề bên phải sang bên trái với 220px chiều rộng và 38px chiều cao. và đặt tên cho layer này là "Tìm kiếm".

​

Chúng ta đã tạo ra được 1 Header hoàn chỉnh với các thành phần chính cần thiết . Top menu - Search Box và một khoảng trống bên trái để đưa Logo của mình vào . Nhưng hiện tại nó khá là thô sơ và thật sự xấu . Bước tiếp theo tôi sẽ hướng dẫn các bạn làm đẹp cho Header này (tôi thường làm tới đâu hoàn thiện luôn tới đó)

Step 2: Tạo Style cho Header

Các bạn hãy chọn Layer Header và làm theo các bước trong ảnh dưới đây. tôi sử dụng Layer Style để tạo Style cho Header . các bạn có thể dùng cách khác (Tôi khuyến khích sự sáng tạo)

​

Tạo một layer mới phía trên layer "Header" và đặt tên nhãn là "Header Glow" hiểu đơn giản là tạo sự bóng bảy cho Header. Tiếp theo ta tạo một vùng chọn xung quanh layer "Header" bằng cách vào "Layer> Load Selection" hoặc chỏ chuột trực tiếp vào ô vuồn trên layer " Header " và Click.

Sau đó chọn "Gradient Tool" (G) với một "Radial Gradient" các bạn xem hình để dễ hình dung. Gradient có một vài lựa chọn Gradient theo chiều dọc ngang- hình tròn từ trong ra ngoài từ ngoài vào thay đổi bằng việc tuỳ chọn màu sắc . Trong thanh tùy chọn fill thay đổi kiểu gradient để "Foreground to Transparent".

​

Kéo gradient từ vị trí phía trên và ở giữa của Header, Sau đó giảm Opacity của layer " Header Glow " này xuống còn 15%. Và đây là kết quả của tôi! các bạn thấy có hồn hơn không

​

Finish Step 2 - Làm đẹp cho Layer " Header "

Step 3 : Tạo Layer Style cho " Navigation " các bạn làm theo hình ảnh phía dưới. Số liệu của từng máy tính có thể khác nhau nên sẽ cho các kết quả khác nhau về hiệu ứng màu sắc (phần này thì dựa vào mắt thẩm mĩ của mỗi người thôi nhé)

​

Bên trong của thanh Navigation ta tạo nội dung Menu bằng cách sử dụng "công cụ Text Tool" (T). Font-size tôi sử dụng ở đây là 14px.

​

Font-size tôi sử dụng trong web thường là 13px - 14px, Content thì thường là 14px dĩ nhiên sẽ chia ra nhiều loai content và màu sắc của từng content cũng khác nhau ví dụ Link thì màu xanh da trời, text title thì thường Fontsize sẽ từ 15px-17px với màu #333 còn content và một vài nội dung khác text size giải từ 11px-14px với màu sắc từ #666 #999.

ở giữa mỗi danh mục trên navigation, ta tạo ra 1 đường line màu trắng với chiều rộng là 1px và chiều cao bằng với thanh Navigation sau đó chuyển Blen Mode của Line Layer đó thằng Overlay tao được kết quả như sau.

​

Then >>>

​

Ta thường thấy khi sử dụng Website ta bấm vào menu thấy các hiều ứng để ta nhận biết ta đang chọn mục nào trên thanh menu đó cái này gọi là trạng thái " Hover". Sau đây chúng ta sẽ tạo ra một trạng thái hover cho một trong các danh mục Menu. Chọn "Zoom Tool" (Z) sau đó phóng to vào một trong các danh mục điều hướng, vẽ một đường line trắng theo chiều dài khung của một danh mục bất kì tôi lấy vị dụ với mục Mobile Application.

​

Sau đó ta tiến hành tạo Layer Style cho đường Line vừa tạo này!

​

​

Sau khi tạo xong Layer Style của Hover ta được kết quả như sau (Đẹp đó chứ)

​

Step 4 - Tạo nội dung và Style cho ô text search.

Ta chọn Layer Text Search Double Click vào Layer này rôi làm theo hướng dẫn phái dưới !

​

​

​

Sau khi bạn đã tạo layer style cho ô text search, ta thêm một biểu tượng kính lúp với màu #ffffff nhỏ thôi nhé tôi thường sử dụng Font-Awesome Đây là Font icon tôi thường sử dụng. Sau đó, thêm vào chữ "Search here ..." vào bên trong bằng cách sử dụng "công cụ Text Tool" (T). các bạn có thể để text này màu trắng sau đó hạ Opacity xuống 60% - 70% để tạo trạng thái PlaceHolder cho dòng text này.

​

Step 5 - Hoàn thiện Header bằng cách thêm Logo hoặc một dòng Title nào đó bằng cách dùng công cụ Text Tools.

​

Bài Hướng dẫn khá dài nên tôi mạn phép được để phần còn lại ở Phần 2. Chúc các bạn thành công và xem lại kết quả sản phẩm của mình .

Qua bài hướng dẫn trên các bạn có thể học được một số điều cơ bản:

• Quy trình thiết kế một website, các bước tạo thành phần của một website
• Font-size và màu sắc của Font sử dụng khi thiết kế
• App dụng layer Style vào thiết kế !

Phần 2 được Update tại đây nhé