Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Tut] Thiết kế 1 Website layout đơn giản mà chuyên nghiệp

Chủ đề thuộc danh mục 'Thiết kế' được đăng bởi Nguyễn Trung Hiếu, 12/7/12.

Lượt xem: 23,709

  1. Nguyễn Trung Hiếu Thành viên cấp 2

    Trong bài hướng dẫn này, chúng ta sẽ thiết kế 1 website kinh doanh với phong cách clean & professional bằng Photoshop. Bài hướng dẫn cũng khá dài nhưng rất chi tiết, nó giúp cho những bạn mới học về thiết kế Web có thể thiết kế được 1 layout cực chuyên nghiệp.​
    ....................................................................................................................... thiết kế website
    Kết quả đạt được

    [​IMG]
    Tài nguyên
    Bước 1

    Bật Photoshop và tạo document mới với kích thước 1200 x 1200 pixels, độ phân giải 72 dpi, và RGB Color. Fill layer với màu trắng. (Ctrl+Backspace)​
    [​IMG]
    Bước 2

    Và bây giờ tạo 1 hình chữ nhật (sử dụng rectangle tool) ở phía trên cùng và fill nó bằng màu ghi nhạt, rồi sử dụng “Gradient Overlay” trong Blending Options (Layer>Layer Style>Blending Options>Gradient Overlay). Điều chỉnh thông số giống trong ảnh. Bạn có thể chèn 1 logo nào đó tùy thích vào phần trên cùng này.​
    [​IMG]
    Bước 3

    Vẫn với layer này, tạo hiệu ứng đổ bóng bằng Drop Shadow với thông số như trong hình.​
    [​IMG]
    Bước 4

    Giờ chỉnh “Gradient Overlay” trong layer style với mã số màu như trong hình​
    [​IMG]
    Bước 5

    Vẫn trong Layer Style, thêm viền ngoài cho hình chữ nhật đó bằng Stroke. Chỉnh thông số giống trong hình.​
    [​IMG]
    Bước 6

    Tạo thêm 1 hình chữ nhật mới bằng Rectangle tool ở phía bên phải, và fill nó với màu trắng, tạo viền bằng Stroke giống trong hình – Đây chính là khung tìm kiếm của Webstie.​
    [​IMG]
    Bước 7

    Lại thêm 1 hình chữ nhật khác ở bên cạnh khung tìm kiếm vừa rồi, fill màu xanh. Điều chỉnh inner shadow trong layer style giống trong hình, đây chính là nút tìm kiếm. Màu xanh này sẽ kết hợp với màu ghi, trắng và ghi sáng. Màu xanh sẽ được dùng xuyên suốt trong quá trình ta thiết kế Website này.​
    [​IMG]
    Bước 8

    Sử dụng Gradient Overlay cho nút tìm kiếm như trong hình.​
    [​IMG]
    Bước 9

    Thêm Stroke như trong hình dưới, bằng việc sử dụng Layer Style qua các bước, ta đã tạo được 1 button hoàn toàn khác biệt.​
    [​IMG]
    Bước 10

    Thêm chữ vào button đó, điều chỉnh Drop Shadow cho chữ như trong hình, sử dụng font PT Sans Bold. Đó là bước cuối cùng để ta hoàn thành nút 'Search' này. Ngoài ra bạn còn có thể thử dùng font chữ khác, nhưng tôi thấy PT Sans Bold thực sự tốt đối với 1 button nhỏ.​
    [​IMG]
    Bước 11

    Tạo thêm 1 hình chữ nhật ở dưới header, đây chính là vùng Menu chính. Gradient Overlay như dưới.​
    [​IMG]
    Bước 12

    Thêm chữ vào đây với màu ghi xám, sau đó sử dụng “drop shadow” với màu trắng. Hiệu ứng cho chữ ở phần này giống với ở nút tìm kiếm phía trên.​
    [​IMG]
    Bước 13

    Vẽ những đường thẳng đứng 1px bằng Line tool, để chúng nằm giữa mỗi link.​
    [​IMG]
    Bước 14

    Vẽ 1 hình chữ nhật đè lên button đầu tiên, fill nó bằng màu xanh #223f8b rồi chỉnh Gradient Overlay cho Layer style như hình dưới.​
    [​IMG]
    Bước 15

    Cho layer này nằm dưới layer text, sau đó điều chính Drop Shadow như dưới. Chỉnh màu trắng cho chữ 'Home', Drop Shadow như hình dưới.​
    [​IMG]
    Bước 16

    Tạo 1 hình chữ nhật màu xám lớn ở dưới phần navigation, chiếm khoảng 30% diện tích layout. Fill nó với màu #eaeaea​
    [​IMG]
    Bước 17

    Bây giờ tạo 1 hình chữ nhật lớn, màu trắng và đổ bóng cho nó.​
    [​IMG]
    Step 18

    Chèn 1 tấm ảnh tùy thích tại đây. Để bức ảnh này chiếm khoảng 80% diện tích vùng hình vuông trắng. Bạn có thể chọn từ 1 website stock.​
    [​IMG]
    Bước 19

    Thêm 1 vài chữ, dùng PT SANS Bold font.​
    [​IMG]
    Bước 20

    Ở khoảng trắng còn lại, fill nó với màu #eeeeee, tại đây sẽ thêm một số chữ tùy thích.​
    [​IMG]
    Bước 21

    Thêm chữ tại vùng này. Sử dụng Drop Shadow style như dưới.​
    [​IMG]
    Bước 22

    Thêm vài dòng chữ demo, đoạn chữ này dùng để mô tả cho nội dung.​
    [​IMG]
    Bước 23

    Tạo thêm 1 vùng màu xám ở dưới, tại sẽ sẽ có 1 vài icon. Điêu chỉnh Drop Shadow cho vùng này như trong hình.​
    [​IMG]
    Step 24

    Tiếp tục điểu chỉnh Gradient Overlay
    [​IMG]
    Bước 25

    Và bây giờ, các bạn add thêm vài icon tại đây, kèm theo text ở dưới và nhớ có đường kẻ ngăn cách giữa các icon nhé.​
    [​IMG]
    Bước 26

    Vẽ 1 hình tròn nhỏ bằng Elip tool tại đây (giữ shift ghi kéo để được hình tròn). Điều chỉnh Drop Shadow.​
    [​IMG]
    Bước 27

    Tiếp tục điều chỉnh Inner Shardow như dưới.​
    [​IMG]
    Bước 28

    Điều chỉnh Gradient Overlay.​
    [​IMG]
    Bước 29

    Dùng Custom Shape Tool (U), tạo 1 hình mũi tên. Cũng điều chỉnh Drop Shadow như hình.​
    [​IMG]
    Bước 30

    Fill mũi tên đó bằng màu xanh, sử dụng Color overlay như hình.​
    [​IMG]
    Bước 31

    Thêm 1 video screenshoot tại khoảng trống phía dưới.Trong bài này, tôi chụp ảnh màn hình tại Youtube để chèn vào đây.​
    [​IMG]
    Bước 32

    Thêm nội dung tùy ý tại đây sao cho phù hợp, lưu ý phần này phải được phân chi, bố cục rõ ràng, tương tự như trong hình.​
    [​IMG]
    Bước 33

    Cuối cùng, tạo 1 khoảng ở phía dưới, thêm thông tin Webstie, thông tin liên hệ, Email ... tùy thích tại đây.​
    [​IMG]
    Bước 34

    Đừng quên 1 phần cực kì quan trọng của Website, đó là Bản quyền, tại vùng này điều chỉnh Gradient Overlay như trong hình.​
    [​IMG]
    Hoàn thành! Nếu bạn có gì thắc mặc về bài hướng dẫn này có thể Comment ở dưới, tôi sẽ giải đáp tận tình.​
    Để nghiên cứu dễ hơn, các bạn có thể download file PSD​
    (267 KB)​
    [​IMG]
    Cuối cùng, tôi mong các bạn sẽ thích bài hướng dẫn này!​
    Nguồn: 1stwebdesigner
    Thực hiện: Beta

    ...
    Hao Duong, thietkewebhoian, A3ersxSOnes22 người khác thích bài viết này.
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Rất like những bài viết như thế này em ạ :D nhưng mà form download chưa chuẩn nhé, edit lại nào :D
  3. Nguyễn Trung Hiếu

    Nguyễn Trung Hiếu Thành viên cấp 2

    e nghĩ là nên cho down file PSD ở cuối cùng vì nếu để ở trên đầu thì nếu là e e sẽ lấy file đó ra nghịch luôn chứ chả cần xem tut :))
  4. SilverRow1988

    SilverRow1988 Cựu quản trị

    Bài viết kì công lắm, nhưng mà có nên đem qua mục "Web design" thay vì PTS ko nhỉ?
    quoccuong1904 thích bài viết này
  5. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Thì a có bảo là đặt ở dưới là sai đâu, tại chưa thấy căn giữa vs ko thấy logo MF đâu, k biết có fải link MF k, với cả folder download bị unlink rồi kìa :D


    Cũng đang suy nghĩ :D ko biết nên cho vào mục Thiết kế web hay sao đây :D
  6. Nguyễn Trung Hiếu

    Nguyễn Trung Hiếu Thành viên cấp 2

    box web design làm gì có chỗ up tut hả bạn?
  7. Nguyễn Trung Hiếu

    Nguyễn Trung Hiếu Thành viên cấp 2

    e chèn link vs căn giữa rồi chả hiểu sao lại bị thế :)) e edit rồi :D
  8. Hàn Phong

    Hàn Phong Cựu quản trị

    Rất hữu ích, bookmark lại phát ;))
    Nguyễn Trung Hiếu thích bài viết này
  9. VLK1993

    VLK1993 Mới đăng kí

    nice :>
    Nguyễn Trung Hiếu thích bài viết này
  10. TungWoodboi

    TungWoodboi Thành viên cấp 1

    quả này làm sang html ngại phết đấy :D
  11. Nguyễn Trung Hiếu

    Nguyễn Trung Hiếu Thành viên cấp 2

  12. fancuongmu

    fancuongmu Thành viên cấp 1

    Ui trời ơi !
    thật sự cảm ơn bạn vì tôi đang rất cần tut như thế này :D . thanh you
    Nguyễn Trung Hiếu thích bài viết này
  13. fancuongmu

    fancuongmu Thành viên cấp 1

    nếu có free time thì bạn làm thêm tut chuyển sang html nữa nhé
  14. Nguyễn Trung Hiếu

    Nguyễn Trung Hiếu Thành viên cấp 2

    mình đang học html nên chắc chưa thể viết tut đc :))
  15. quoccuong1904

    quoccuong1904 Mới đăng kí

    Bài viết này hay lắm! Thanks!
    Nguyễn Trung Hiếu thích bài viết này
  16. Jardin IL

    Jardin IL Mới đăng kí

    bạn ơi . làm thế nào để style của layer này ko ảnh hưởng đến style của layer khác ? mình làm drop shadow cho phần ghi nhạt trên cùng là 90 độ, sau đó làm drop shadow cho layer text với chữ SEARCH để -60 độ, thì layer ghi nhạt cũng tự động chuyển về -60 độ T_T
  17. Nguyễn Trung Hiếu

    Nguyễn Trung Hiếu Thành viên cấp 2

    trong bảng drop shadow có phần Use global light thì bỏ tích đi nhé
    mầy mò chút đi chứ cái này dễ mà :D
  18. congnghethongtin_07

    congnghethongtin_07 Thành viên cấp 2

    Link tải bị lỗi rồi mong bạn fix link lại giúp mình nhé. Thanks bạn.
  19. Nguyễn Trung Hiếu

    Nguyễn Trung Hiếu Thành viên cấp 2

    đây bạn nhé DOWNLOAD
    chắc redirect bị lỗi
  20. Cris Tran

    Cris Tran Mới đăng kí

    Mấy bài TUT này rất hay và bổ ích, mình đang nghiên cứu design những web như vậy. Bạn có TUT nào tương tự cứ up lên nhé, mọi người sẽ ủng hộ hết mình. Tks
    Nguyễn Trung Hiếu thích bài viết này

Ủng hộ diễn đàn