Thiết kế Layout Flat với PSD

Flat Website đang là một trong những xu hướng thiết kế web phổ biến nhất hiện nay, ngoài việc thân thiện với người dùng thi kiểu thiết kế này còn mang lại sự mới lạ và tính đơn giản cao.

Bây giờ chúng ta tự tay thiết kế 1 mẫu Flat đơn giản từng bước bằng PSD (Photoshop) nhé!!! Sẽ không tốn nhiều thời gian đâu 🙂

Note: Các bạn cần tải bộ Icons sau về máy. (Các bạn muốn xài bộ Icon này cần cài Adobe AI vào mày nhé)

 

NÀO BẮT ĐẦU THÔI!!!

 

Bước 1: Vào PSD (Cs4 hoặc hơn) -> Tạo file mới File > New (Khi hộp thoại xuất hiện chọn thông số như hình) -> Nhấn OK.

01

 

Bước 2: Tạo Background Color

  • Tạo Layer mới (Bằng cách nhấn Shift+Ctrl+N -> Nhấn OK) -> Chọn công cụ Paint Bucket Tool (G) và chọn màu là #d5bfc4 đổ màu vào Layer này để làm màu nền. Ta sẽ được:

02

Bước 3: Tạo Guidelines (Một trong những điều không thể thiếu trong thiết kế. Nói sơ qua đó là cách phân chia các phần trong bản thiết kế.)

  • Để chèn Guidelines bạn vào View > New Guide -> 1 Popup sẽ hiện ra và bạn hãy cài đặt thông số theo hình.

03-01

  • Làm lại 2 lần bước trên và lần lượt thay đổi thông số Position là 1163px1579px. Bạn sẽ được 3 vạch và chia thiết kế ra làm 4 phần như hình dưới.

03-02

 

Bước 4: Tạo Section Colors

  • Các bạn tạo layer ở phần thứ nhất và phần thứ 3 như đã chia sẵn trong thiết kế -> Lần lượt dùng Paint Bucket Tool (G) đổ màu #e62452 vào Layer tạo trong phần thứ nhất và #ffffff vào Layer tạo trong phần thứ 3. Ta được:

04

Bước 5: Phần chữ

  • Chúng ta sẽ chèn nội dung cho phần đầu tiên. Chọn công cụ Horizontal Type Tool (T) với màu là #ffffff, font: Arial, font-size: 60pt, các bạn gõ chữ như hình dưới.
  • Kế tiếp gõ dòng chữ nhỏ hơn như hình dưới với font-size: 30pt.

05-01

Bước 6: Button

  • Chọn công cụ Rectangle Tool (U) rồi vẽ một hình chữ nhật nhỏ nằm bên dưới đoạn chữ để làm nút bấm, nhớ là chọn màu foreground là  #fc2f60.

06-01

  •  Double-Click vào Layer vừa tạo nút bấm này sẽ hiện hộp thoại Blending Options. Chọn Stroke và thiết lập thông số theo hình -> Nhấn OK.

06-02

  •   Tiếp tục với Layer mode thành Darken, và chèn chữ “LUNCH” với font-size: 46pt ta được hình như sau:

 06-03

Bước 7: Tablet

  • Mở file download trong phần note chọn lấy icon về tablet -> Kéo Icon này vào rồi bấm Ctrl + T để chỉnh sửa kích thước sao cho tương xứng như hình dưới:

07-01

  •  Tạo Layer mới đổ màu #d99f9b vào bên trong Icon Tablet này. Dùng Rectangle Tool (U) bạn vẽ nhiều hình với màu sắc khác nhau bạn sẽ được hình dưới

07-02

 

Bước 8: Logo

  • Đầu tiên chúng ta sẽ chọn màu foreground là #ffffff, rồi chọn công cụ Custom Shape Tool, chọn hình 8 góc và thiết lập với thông số như sau:

08-01

  •  Lúc này chúng ta sẽ được kết quả như hình dưới:

08-02

  •  Tại Layer vừa tạo -> dùng công cụ Ellipptical Marquee Tool vẽ 1 vòng tròn nằm giữa Layer -> bấm Ctrl+Enter để chọn vòng tròn -> bấm Delete để xóa bỏ nó đi. Chúng ta sẽ được:

08-03

  •  Tiếp tục sử dụng công cụ Custom Shape Tool một lần nữa, rồi vẽ hình tương tự, nhưng lần này nhỏ hơn và đặt nó vào giữa như sau:

08-04

Bước 9: Services Box

  • Tiếp theo ta tiếp tục thiết kế tiếp phần thứ 2. Dùng công cụ Type Tool (T) nhập vào dòng chữ SERVICES” với font-size: 46pt và color: #ffffff. Chọn công cụ Ellipse Tool với color: #e62452 vẽ lần lượt 4 vòng tròn cách đều nhau bên dưới chữ “SERVICES” ta được hình như sau:

09-01

  •  Tiếp tục chọn công cụ Rectangle Tool và vẽ một hình chữ nhật nhỏ để làm thanh ngang và đặt nó nằm dưới các layer -> tiếp tục mở file download ở trên kéo Icon vào 4 vòng tròn như trong hình dưới

09-02

Bước 10: Testimonial Box

  • Tại phần này, chúng ta nhập vào dòng chữ “HAPPY CLIENTS” với công cụ Type Tool (T), font-size: 46pt và color: #e62452 -> tiếp tục nhập dòng chữ mô phỏng với font-size: 30pt và color: #111111 như trong hình:

10-01

  •  Kế tiếp chọn công cụ Ellipse Tool với màu #d5bfc4  , rồi vẽ 8 hình tròn nhỏ nằm bên dưới đoạn chữ như sau:

10-02

  •  Chọn Layer chứa hình tròn thứ 3, nhấp đúp vào Layer này để xuất hiện hộp thoại  Blending Options -> Chọn Stroke và thay đổi stroke size là 3px và stroke color là #e62452. Nhấp Ok xong đổi Layer mode của Layer này thành Lighten.

 

Bước 11: Newsletter Box

  • Chọn công cụ Type Tool ( T ) với font-size: 30pt, các bạn gõ đoạn chữ như sau:

 11-01

  •  Kế tiếp là vẽ form nhập liệu. Chọn Color: #efefef làm nền, rồi chọn công cụ Rectangle Tool để vẽ một hình chữ nhật và hình vuông nhỏ bên cạnh nó như sau:

 11-02

  •  Nhấp đúp vào Layer này,  tại hộp thoại Blending Option xuất hiện, chọn Stroke với size là 3px , Color: #ffffff, rồi nhấn Ok để hoàn thành. Sau đó chuyển chế độ Layer mode của Layer này về Darken. Lúc này chúng ta sẽ có một form với đường viền như sau:

11-03

  •  Kế tiếp là chèn biểu tượng mail từ bộ Flat icon set và gõ dòng chữ “your email” như hình sau:

11-04

 

VÀ KẾT QUẢ CUỐI CÙNG TA ĐƯỢC

 

All

Qua bài viết này mình hy vọng các bạn sẽ quen dần với kiểu thiết kế Flat.

Note: Nếu có thắc mắc hoặc không biết thực hiện thế nào Contact samset.smario (là tôi nhé)

5 thoughts on “Thiết kế Layout Flat với PSD

  1. Anh Dương Tiến Reply

    Cảm ơn vì một bài viết hay !
    Tuy nhiên , Tuấn có thể gợi ý để làm sao mà có thể phát thảo được ý tưởng trước khi vẽ được không. Tức là có phương pháp nào hay một qui tắc nào đó đối với kiểu layout flat này ko.
    Xin cám ơn !

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.