Bài tập lớn môn thiết kế web || Hướng dẫn cách thiết kế Photoshop

Kỳ này chúng ta học môn thiết kế web. Với bài tập lớn là việc thiết kế ra một trang web thì những khái niệm cơ bản cần phải nắm vững để là...

Kỳ này chúng ta học môn thiết kế web. Với bài tập lớn là việc thiết kế ra một trang web thì những khái niệm cơ bản cần phải nắm vững để làm. 
Demo web bán sách

Đầu tiên, bạn có thể xem sản phẩm hoàn thiện của mình đã chuyển qua html

Bây giờ đi vào chi tiết, mình sẽ hướng dẫn các khái niệm cơ bản

1, Tỷ lệ thiết kế 

Với bản thiết kế dành cho máy tính, thì sẽ được thiết kế dựa trên màn hình HD, FULL HD.

Ở đây mình ví dụ trên trang tiki.vn
  • Viền đỏ trên là nội dung của trang web. Phần này là thiết kế (chiều rộng là 1200px)
  • Còn hai mũi tên là viền. Phần này để trống
Nếu vậy bản design của bạn phải có chiều rộng như sau:
Chiều rộng = nội dung (1200px)+ phần viền
  • Màn hình HD thì chiều rộng sẽ là 1366px
  • Màn hình FULL HD chiều rộng là 1920px
Với môn TKW, bạn chỉ cần xét tỷ lệ là màn hình HD thôi. Tỷ lệ chiều rộng cần là 1366px

 Tóm lại:

  • Chiều rộng: 1366px; 
  • Chiều Cao: Tối thiểu 768px ( Như trên mình để 1000px, vì web có thể có nhiều nội dung và kéo dài ra mà)

Chia sẻ mẫu PSD, tỷ lệ chuẩn (nội dung: 1200px) để ae thiết kế 

2, Căn nội dung trên photoshop

  • Nhiều bạn chắc bị nhận xét là nội dung chưa căn chỉnh chưa được thẳng hàng. Hoặc nội dung không được cân đối, cái ảnh thì to, lúc thì nhỏ.
  •  Để căn nội dung trong photoshop thì chúng ta dùng guide để căn.
  • Guide là thước trong photosohop: Bật bằng phím tắt "ctrl+;" trong photoshop
  • Xem hướng dẫn dùng guid: https://www.youtube.com/watch?v=l21qvUNT_hE

Ví dụ sau mình căn nội dung bằng guide

3, Một số lưu ý khác

4, Tạo logo

Một design không chuyên thì thiết kế ra một trang web cơ bản cũng không cần phải biết quá nhiều về tạo logo. Vì thế mình khuyên bạn dùng Canva để thiết kế logo.
Có rất nhiều logo trên canva


5, Chia sẻ bản thiết kế web mình

Hi vọng dựa vào bản thiết kế của mình, bạn sẽ học được kinh nghiệm nào đó. 

Tải thiết kế PSD trang con tin tức:



COMMENTS

BLOGGER: 7
  1. hay và bổ ích anh ơi :D

    Trả lờiXóa
  2. a hướng dẫn dùng CSS tạo hiệu ứng được không a! he.

    Trả lờiXóa
    Trả lời
    1. Kỳ này chưa dùng css đâu á. Kỳ sau học lập trình web làm luôn thể nha..

      Xóa
  3. yêu link lê mất rồi anh :D

    Trả lờiXóa
Tên bạn chỉ hiện unknown,đổi tên ở đây:
https://www.blogger.com/edit-profile.g

Tên

bài viết hay,4,Bài viết khác,1,cấu trúc dữ liệu và giải thuật,3,fithou,36,ghim,4,giải tích 2,1,Hướng dẫn,5,Lập trình C,1,lập trình hướng đối tượng,3,Lập trình java,1,phần mềm,2,phần mềm lập trình,2,sách,1,tác phẩm đồ họa,3,tản mạn,4,Thiết kế web,3,thực hành lập trình cơ sở,18,thực hành lập trình hướng đối tượng,16,
ltr
item
Blog NDanh: Bài tập lớn môn thiết kế web || Hướng dẫn cách thiết kế Photoshop
Bài tập lớn môn thiết kế web || Hướng dẫn cách thiết kế Photoshop
https://1.bp.blogspot.com/-yhNJZAV36No/Xp0pqpz_gOI/AAAAAAAAelw/pnDqDw9imQULlcKUUaBVMDFMhUMrt13GwCLcBGAsYHQ/s320/Screen%2BShot%2B2020-04-20%2Bat%2B11.48.27%2BAM.png
https://1.bp.blogspot.com/-yhNJZAV36No/Xp0pqpz_gOI/AAAAAAAAelw/pnDqDw9imQULlcKUUaBVMDFMhUMrt13GwCLcBGAsYHQ/s72-c/Screen%2BShot%2B2020-04-20%2Bat%2B11.48.27%2BAM.png
Blog NDanh
https://blog.ndanh.com/2020/04/thiet-ke-photoshop-mon-thiet-ke-web-fithou.html
https://blog.ndanh.com/
https://blog.ndanh.com/
https://blog.ndanh.com/2020/04/thiet-ke-photoshop-mon-thiet-ke-web-fithou.html
true
1596452775547375681
UTF-8
Tải tất cả bài viết Không tìm thấy bài viết nào XEM TẤT CẢ Đọc thêm Trả lời Hủy trả lời Xóa Bởi Trang chủ PAGES POSTS Xem tất cả Bài viết đề xuất CHỦ ĐỀ LƯU TRỮ SEARCH TẤT CẢ BÀI VIẾT Không tìm thấy nội dung của bạn Quay về trang chủ Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow CHIA SẺ ĐỂ XEM NỘI DUNG Bước 1: Chia sẻ lên facebook chế độ công khai Bước 2: Vào facebook, ấn vào bài đã chia sẻ công khai để hiện nội dung! Click Copy All Code Select All Code Code của bạn đã được copy Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content