Thiết Kế Giao Diện 2

- Mở một tài liệu mới với kích thước là 778x600 Px. Nền Trắng.

- Đổi màu nền trước thành mà #DEDEFF. Tô layer background với màu đó (Alt-Backspace)

- Nhấn Ctrl-R để mở Ruler (Thước kẻ, nếu chưa hiện ra). Chuyển sang công cụ Move và kéo các đường guideline như hình dưới. Kích thước các vùng được chỉ ra trong hình.



- Tạo một layer mới đặt tên là Banner Trên. Ở phần trên cùng tạo một vùng lựa chọn bằng công cụ Rectangular Marquee và tô với màu # CCCCFF.

- Tạo một layer mới và đặt tên là Banner Dưới. Tạo một vùng lựa chọn và tô với màu # 8282DA.

- Ở layer Banner Trên vào Layer Style > Dropshadow với thông số như hình bên. Làm tương tự với layer Banner Dưới bạn đựơc hình sau.





Chú ý: Vì giao diện thường bao gồm rất nhiều layer, cho nên một điều rất quan trọng là các bạn phải tạo những Layer set để sau này quản lý dễ hơn. Ở Layer Palette nhấn vào nút Create Layer Set và đặt tên cho set này là Banner. Sau đó kéo hết layer Banner Trên và Banner Dưới vào trong set này.



- Ở góc bên trái (hình ở bước 1) tạo một vùng lựa chọn bằng kích thước của các guideline đã thiết lập. Tạo một layer mới và tô với màu # CCCCFF.

- Tạo thêm một layer nữa, đặt tên là Navi Head, và dùng Rectangular Marquee vẽ một hình như hình bên. Sau đo tô với màu # 8282DA.



- Trên Layer Palette nhấn vào nut Layer Mask để tạo một mask cho nó. Sau đó bạn sẽ thấy trên layer Palette và ở layer Navi Head sẽ xuất hiện một biểu tượng của mask ở bên phải. Ctrl-click vào biểu tượng bên trái (Layer Navi Head) để load vùng lựa chọn.



- Nhấn D để trả lại màu mặc định của nền trước và nền sau. Chọn công cụ Gradient (G) với thông số là Fore to Trans, và Linear Gradient.

- Kéo theo hướng mũi tên để làm nhạt hai đầu đi.





- Bây giờ chúng ta sẽ tạo nội dung chính cho phần thân. Chọn Rounded Ractangular với giá trị Radius = 5 Px. Vẽ một vùng Path như hình dưới. Sau đó chuyển sang công cụ Pen và nhấp chuột phải vào hình, chọn Make Selection từ menu hiện ra. Tạo một layer mới đặt tên là Content Bar Tô nó với màu #9D9DEB



- Vẫn dùng Rounded Ractangular, giữ phím Shift và tạo một vùng path như hình dưới. Sau đó chuyển sang công cụ Pen và nhấp chuột phải vào hình, chọn Make Selection từ menu hiện ra. Tạo một layer mới đặt tên là Content Display Tô nó với màu #9D9DEB.

14. Select > Modify > Contract với giá trị là 2 Px. Sau đó tô với màu trắng.



- Tiếp theo chúng ta sẽ tạo thêm những icon để hoàn thành giao diện này. Vẫn dùng Rounded Ractangular tạo một vùng path như hình dưới. Sau đó chuyển sang công cụ Pen và nhấp chuột phải vào hình, chọn Make Selection từ menu hiện ra. Tạo một layer mới đặt tên là Icon Display Tô nó với màu #C5C4F6. Đừng bỏ vùng lựa chọn.



- Chuyển sang Polygonsal Lasso với tùy biên của công cụ là Subtract from Selection. Vẽ một đường như hình sau. Sau khi bạn quay về điểm đầu tiên, thì vùng lựa chọn sẽ còn lại một hình tam giác. Nhấn Ctrl-J để copy vùng lựa chọn đó lên một layer mới. Ctrl-D để bỏ chọn.





- Ở layer vừa được copy, bạn nhấn Ctrl-T để vào transform. Xoay nó ngược chiều kim đồng hồ và chỉnh sao cho được hình thứ 2.

- Ctrl-E để merge 2 layer đó lại với nhàu

- Copy nó lên và di chuyển nó để được hình dưới.



- Okie! vậy là xong! những chi tiết bạn có thể tự thêm vào ha! "Đánh thức trí sáng tạo của bạn" ke ke