ĐỀ SỐ 1 TỰ LUẬN THIẾT KẾ WEB IT14.058 TRỞ NÊN CÓ FILE ĐỂ NỘP ĐỂ Ở ĐẦU TÀI LIỆU - SOẠN NGÀY 12.07.2025.docx ĐỀ SỐ 1 TỰ LUẬN THIẾT KẾ WEB IT14.058 TRỞ NÊN CÓ FILE ĐỂ NỘP ĐỂ Ở ĐẦU TÀI LIỆU - SOẠN NGÀY 12.07.2025.docx ĐỀ SỐ 1 TỰ LUẬN THIẾT KẾ WEB IT14.058 TRỞ NÊN CÓ FILE ĐỂ NỘP ĐỂ Ở ĐẦU TÀI LIỆU - SOẠN NGÀY 12.07.2025.docx
Trang 1ĐỀ SỐ 1 TỰ LUẬN THIẾT KẾ WEB IT14.058 TRỞ NÊN CÓ FILE ĐỂ NỘP
ĐỂ Ở ĐẦU TÀI LIỆU - SOẠN NGÀY 12.07.2025
• Số lượng trang web: 04 trang.
• Sử dụng Photoshop để thiết kế giao diện cho các trang sau:
Trang chủ:
Có đầy đủ các thành phần giao diện mô tả nội dung và chức năng của website (menu có tối thiểu 5 mục chọn).
Trang con chính:
Mô tả thông tin chi tiết về 1 danh mục sản phẩm.
Trang con chi tiết:
Mô tả thông tin chi tiết về một sản phẩm cụ thể thuộc danh mục nào đó.
Ghi chú: Sinh viên sẽ nhận điểm 0 nếu copy bài của nhau.
Bài làm:
Trang 2HƯỚNG DẪN CHI TIẾT LÀM BÀI
1 Hiểu Đề Tài
Đề tài: THIẾT KẾ WEBSITE KINH DOANH THỜI TRANG TRẺ EM
Công nghệ sử dụng: Photoshop (thiết kế giao diện web tĩnh, không cần code)
Số lượng trang web: 04 trang
2 Các Trang Cần Thiết Kế (Trình bày giao diện từng trang)
a) Trang chủ
Giao diện tổng quan, gồm:
Logo thương hiệu (tự sáng tạo hoặc tìm ảnh minh họa phù hợp).
Thanh menu (ví dụ: Trang chủ | Sản phẩm | Giới thiệu | Liên hệ).
Banner lớn giới thiệu về shop hoặc chương trình khuyến mãi.
Một số danh mục sản phẩm nổi bật (trình bày theo kiểu lưới/grid).
Footer (thông tin liên hệ, mạng xã hội, …).
b) Trang con chính
Thiết kế giao diện một trang hiển thị danh mục sản phẩm (ví dụ: Thời trang bé trai hoặc bé gái).
Yêu cầu:
Hiện danh sách các sản phẩm, mỗi sản phẩm có ảnh đại diện, tên, giá.
Có thể kèm bộ lọc tìm kiếm (theo giá, theo loại, …).
Bố cục rõ ràng, dễ nhìn, thể hiện nổi bật các sản phẩm.
c) Trang con chi tiết
Thiết kế giao diện chi tiết một sản phẩm.
Trang 3Thiết kế giao diện giỏ hàng (shopping cart).
Yêu cầu:
Hiển thị danh sách sản phẩm đã chọn (tối thiểu 2 sản phẩm).
Thông tin: ảnh, tên, số lượng, giá từng sản phẩm, tổng tiền, nút “Xóa”, “Cập nhật”, “Thanh toán”.
Bố cục rõ ràng, dễ thao tác.
3 Quy trình Làm Bài (Bằng Photoshop)
Bước 1: Lên ý tưởng và phác thảo bố cục trên giấy (hoặc bản nháp)
Vẽ bố cục sơ bộ từng trang.
Chọn tông màu phù hợp với trẻ em (màu tươi sáng: xanh, hồng, vàng,…) Quyết định các thành phần giao diện cần có.
Bước 2: Thiết kế từng trang trên Photoshop
Tạo file mới cho từng trang (kích thước phổ biến: 1440 x 1024px).
Sắp xếp các thành phần như đã phác thảo.
Sử dụng công cụ Text, Shape, Image trong Photoshop để thiết kế giao diện Chèn hình ảnh minh họa (có thể lấy từ internet hoặc tự vẽ).
Bước 3: Xuất file
Mỗi trang lưu thành 1 file psd (để GV chấm file gốc).
Xuất file ảnh (.png hoặc jpg) để minh họa báo cáo.
Bước 4: Viết báo cáo ngắn (nếu có yêu cầu nộp kèm)
Trình bày ý tưởng thiết kế.
Giải thích bố cục, lý do chọn màu, font chữ, điểm nhấn từng trang.
4 Lưu ý
Không copy ý tưởng/giao diện của bạn khác.
Bài phải có đủ 4 trang, trình bày rõ ràng.
Ưu tiên sáng tạo, phối màu dễ nhìn, thân thiện với trẻ em và phụ huynh Đảm bảo từng file psd gọn gàng, có đặt tên các layer hợp lý.
Trang 4Bạn có thể tham khảo ví dụ như sau (nếu bí ý tưởng):
Trang chủ: banner lớn, 3 ô giới thiệu danh mục (Bé trai, Bé gái, Phụ kiện), sản phẩm nổi bật.
Trang danh mục: lưới 3-4 cột sản phẩm, có filter bên trái.
Trang chi tiết sản phẩm: ảnh lớn, thông tin chi tiết, nút mua hàng.
Trang giỏ hàng: bảng danh sách sản phẩm, tổng tiền, nút thanh toán.
1 TRANG CHỦ (HOME PAGE)
Bố cục đề xuất:
markdown
Sao chép mã
[Logo] [Menu: Trang chủ | Sản phẩm | Giới thiệu | Liên hệ | Giỏ hàng]
-| [Banner lớn - Ảnh trẻ em mặc thời trang] -|
-| Bé Trai -| Bé Gái -| Phụ kiện -| (3 ô giới thiệu danh mục) -|
-| Sản phẩm nổi bật (3-6 sản phẩm grid) -|
-| Footer: Thông tin liên hệ, mạng xã hội, bản quyền -|
-Ý tưởng thiết kế:
Màu chủ đạo: xanh nhạt, hồng pastel, vàng nhẹ, dùng hình minh họa hoặc hình thật trẻ em.
Banner có thể ghi slogan của shop, hình ảnh thu hút.
3 ô danh mục là các hình tròn hoặc hình vuông, mỗi ô có icon hoặc ảnh minh họa (bé trai, bé gái, phụ kiện).
Sản phẩm nổi bật trình bày dạng lưới (grid), mỗi sản phẩm có ảnh, tên, giá.
2 TRANG DANH MỤC (TRANG CON CHÍNH) – Ví dụ: “Thời Trang Bé Trai”
Trang 5Bố cục đề xuất:
markdown
Sao chép mã
[Logo] [Menu]
-| Danh mục sản phẩm: Thời Trang Bé Trai -|
-| Bộ lọc: [Giá][Kích cỡ][Màu sắc][Sắp xếp] -|
-| Ảnh SP -| Tên SP -| Giá -| Nút "Xem chi tiết" -|
| Ảnh SP | Tên SP | Giá | Nút "Xem chi tiết" |
| Ảnh SP | Tên SP | Giá | Nút "Xem chi tiết" |
| (Hiển thị 6-8 sản phẩm/grid 3-4 cột) |
-| Footer -|
-Sản phẩm sắp xếp thành lưới, dưới mỗi ảnh là tên, giá Bên trái hoặc phía trên là bộ lọc (filter): theo giá, size, màu… 3 TRANG CHI TIẾT SẢN PHẨM Bố cục đề xuất: markdown Sao chép mã [Logo] [Menu]
-| Ảnh lớn sản phẩm -| Thông tin chi tiết -|
| (2-3 góc chụp sản phẩm) | - Tên sản phẩm |
| | - Giá |
Trang 6| | - Size, màu (chọn dropdown)|
| | - Mô tả sản phẩm |
| | - Số lượng, nút "Thêm vào giỏ hàng" | | | - Sản phẩm liên quan |
-| Đánh giá & Bình luận khách hàng -|
-| Footer -|
-Ảnh sản phẩm trình bày lớn, có thể thêm ảnh phụ nhỏ bên cạnh Thông tin chi tiết bố trí rõ ràng, dễ nhìn Có nút thêm vào giỏ hàng, hiển thị còn bao nhiêu sản phẩm Bên dưới có mục đánh giá, bình luận 4 TRANG GIỎ HÀNG (CART PAGE) Bố cục đề xuất: markdown Sao chép mã [Logo] [Menu]
-| GIỎ HÀNG CỦA BẠN -|
-| Ảnh SP -| Tên SP -| Đơn giá -| Số lượng -| Thành tiền -| Xóa -| | Ảnh SP | Tên SP | Đơn giá | Số lượng | Thành tiền | Xóa | | |
-| Tổng tiền: xx.xxx VND -|
| [Tiếp tục mua sắm] [Thanh toán] |
Trang 7Dưới cùng có tổng tiền và nút “Thanh toán”.
GỢI Ý VỀ PHỐI MÀU & PHONG CÁCH
Chọn tông màu dễ thương, tươi sáng, phù hợp trẻ em.
Nên dùng font chữ tròn, dễ đọc.
Các nút (button) nên bo góc, màu nổi bật (cam, xanh, hồng).
Hình ảnh rõ nét, ưu tiên ảnh thật sản phẩm hoặc minh họa dễ thương.
KẾT LUẬN – QUY TRÌNH LÀM
Phác họa bố cục từng trang ra giấy hoặc PowerPoint trước.
Mở Photoshop, tạo file mới cho từng trang (ví dụ: home.psd, category.psd, detail.psd, cart.psd).
Làm từng trang theo bố cục đã vẽ, chèn hình minh họa, icon, chọn màu sắc hài hòa.
Lưu file gốc psd, xuất file png/.jpg để báo cáo.
Bản vẽ
1 trang chủ
Trang 82 trang danh mục sản phẩm
Trang 93 Trang chi tiết sản phẩm
4 Trang giỏ hàng
Trang 101 Nếu bạn chỉ tải file ảnh PNG/JPG (file xuất bản) mình gửi về máy, sau đó mở lên rồi “lưu lại” thành file PSD trên Photopea/Photoshop thì sẽ thế nào?
File PSD tạo ra theo cách này CHỈ có 1 layer duy nhất (Background) giống như ảnh PNG/JPG gốc.
Không có layer text, không tách được hình, không chỉnh được từng phần!
Thầy/cô mở lên sẽ nhận ra ngay đây là file “giả PSD” (không phải file thiết kế thật) — không đạt yêu cầu nộp file gốc thiết kế.
Nhiều trường/cô sẽ cho 0 điểm vì phát hiện bạn chỉ đổi đuôi hoặc chuyển từ ảnh sang PSD, không có quá trình thiết kế.
2 File PSD chuẩn phải như thế nào?
Mỗi thành phần (logo, banner, menu, sản phẩm, text ) nằm trên một layer riêng.
Thầy/cô mở file PSD lên có thể bật tắt, chỉnh sửa từng layer.
Trang 11Đây mới là bằng chứng bạn tự làm bài, không copy của ai.
3 Tóm lại:
Không nên chỉ tải ảnh mình gửi, rồi lưu lại thành PSD — KHÔNG được tính là file gốc thiết kế.
Bạn cần tự thiết kế hoặc tối thiểu là tự bố trí, tách thành nhiều layer trên
Photopea/Photoshop rồi lưu file PSD đó.
Cách làm đúng để tránh 0 điểm:
Mở ảnh PNG/JPG mình gửi về chỉ làm nền mẫu (tham khảo bố cục).
Trên Photopea/Photoshop, tạo layer mới, vẽ lại (hoặc vẽ thêm, thêm text, shape, icon, ảnh ), sắp xếp thành từng lớp khác nhau cho đủ bố cục.
Lưu file lại thành PSD, đảm bảo nhiều layer.
Xuất file PNG/JPG là sản phẩm hoàn chỉnh.
Chốt lại:
File PSD gốc chỉ có 1 layer = không đạt yêu cầu (dễ bị điểm 0).
File PSD nhiều layer tự làm, tự bố cục = đạt chuẩn nộp bài.
Tuyệt vời, bạn đã có file PNG wireframe trang chủ!
Dưới đây là hướng dẫn chi tiết từng bước để mở file này lên Photopea, đặt kích thước chuẩn và bắt đầu thiết kế lại:
Bước 1: Truy cập Photopea
Mở trình duyệt, vào trang: https://www.photopea.com/
Bước 2: Tạo Dự Án Mới với kích thước chuẩn
Nhấn “Dự án mới” (hoặc File > New Project).
Cài đặt:
o Tên: (ví dụ: Trang Chu)
o Chiều rộng (Width): Đề xuất 1200 px (hoặc 1440 px nếu bạn muốn màn hình
rộng)
Trang 12o Chiều cao (Height): 1800 px (tùy chiều dài ảnh, hoặc bạn đo bằng
Paint/Photos xem ảnh PNG vừa lưu có chiều rộng/cao bao nhiêu thì nhập đúngnhư vậy)
o Background: White (nền trắng)
Nhấn Tạo (Create)
Bước 3: Đưa ảnh PNG trang chủ vào file
Trên Photopea, chọn File > Open & Place (Tệp > Mở và đặt).
Chọn file ảnh PNG bạn vừa lưu
Ảnh sẽ xuất hiện trên một layer mới, bạn có thể dùng chuột kéo các góc phóng to/thu nhỏ hoặc căn chỉnh cho vừa khít với khung dự án.
Bước 4: Khóa Layer Ảnh Mẫu Làm Nền (tuỳ chọn)
Trong bảng Layer (cột phải), chọn layer ảnh PNG vừa chèn
Nhấn vào biểu tượng ổ khóa để layer này cố định, không bị di chuyển khi bạn thiết kế
thêm
Bước 5: Thiết kế các phần mới trên các layer khác
Dùng Shape tool (phím U) để vẽ menu, banner, sản phẩm
Dùng Text tool (phím T) để thêm chữ.
Chèn ảnh thật hoặc phối màu, chỉnh sửa tuỳ ý trên các layer mới
Bước 6: Lưu file PSD gốc và xuất file PNG mới
Khi làm xong:
o File > Save as PSD để lưu file gốc.
o File > Export as > PNG để xuất file ảnh nộp báo cáo.
Tips nhỏ:
Nếu ảnh PNG bị lệch khung dự án, dùng chuột kéo cho vừa khít, hoặc cắt bớt phần
thừa bằng Crop tool (phím C).
Luôn làm mỗi thành phần (menu, banner, sản phẩm, text) trên layer mới để đạt chuẩn
bài nộp
Trang 13Nếu bạn chưa rõ chiều rộng/cao của ảnh PNG vừa tải, hãy chuột phải vào file >
"Properties" > "Details" để xem kích thước, nhập đúng vào bước tạo dự án mới là chuẩn nhất!
Nếu muốn hướng dẫn bằng ảnh hoặc video minh hoạ trực tiếp thao tác, bạn nhắn thêm nhé!
Đúng rồi!
Khi mình nói “Trong bảng Layer (cột phải), chọn layer ảnh PNG vừa chèn” nghĩa là:
Layer (hay "lớp") là từng “tấm” nằm chồng lên nhau trong file PSD.
Ở Photopea, bảng Layer nằm bên phải màn hình (có biểu tượng các hình vuông xếp
chồng)
Cách khóa layer nền (layer ảnh PNG) trong Photopea:
1 Tìm bảng Layer ở bên phải, bên dưới các icon (giống hệt ảnh minh họa bạn gửi).
2 Chọn đúng layer chứa ảnh PNG (thường có tên là “Layer 0” hoặc tên file ảnh).
3 Nhấn vào biểu tượng ổ khóa (🔒) ở dưới cùng bảng layer hoặc ngay trên layer đó.
→ Layer sẽ được khóa (không di chuyển/chỉnh sửa nhầm khi bạn vẽ/thêm phần mới)
Minh họa thao tác khóa layer:
Trang 14Nếu bạn chưa thấy bảng layer, nhấn phím F7 để bật/tắt bảng này trên Photopea nhé!
Nếu cần mình hướng dẫn bằng ảnh trực tiếp thao tác trên file của bạn, cứ gửi tiếp ảnh màn hình, mình chỉ cụ thể hơn!
o Ảnh PNG được mở thành file mới, chỉ có 1 layer "Background".
o Không thể tạo thêm layer ở ngoài, nếu chưa chuyển layer thành "Layer 0"
2 File > Open & Place (Mở và đặt):
o Ảnh PNG sẽ được chèn vào file dự án đang mở dưới dạng layer mới (tên là
Layer 1, Layer 0 hoặc tên file)
o Bạn có thể chỉnh sửa thoải mái, thêm layer khác phía trên hoặc dưới
Cách khắc phục (rất đơn giản!):
A Nếu bạn muốn làm tiếp trên file này (đang có 1 layer Background):
Bước 1: Nhấn đúp chuột vào tên "Background" trên bảng layer.
Bước 2: Một hộp thoại hiện ra, nhấn OK.
→ "Background" sẽ đổi thành "Layer 0" (bây giờ bạn có thể thêm layer khác phía trên
để thiết kế tiếp)
B Cách chuẩn nhất để làm bài:
1 Tạo một dự án mới (File > New Project) với kích thước phù hợp.
2 Chọn File > Open & Place, đặt ảnh PNG vào dự án vừa tạo
o Lúc này ảnh PNG thành một layer riêng, bạn tự do thêm layer mới, vẽ shape, chèn chữ, phối màu
3 Mỗi thành phần làm trên 1 layer khác nhau để đúng chuẩn file PSD nộp.
Tóm lại:
Chỉ có “Background”: do bạn mở file PNG bằng "Open".
Có “Layer 0”/tên file: do bạn dùng "Open & Place" vào 1 dự án mới (chuẩn nhất khi
thiết kế web)
Trang 15Bạn đã chèn thành công ảnh PNG vào dự án mới trên Photopea rồi, rất chuẩn!
Bây giờ, bạn sẽ thấy bên bảng Layer (phải màn hình) có 2 layer:
Layer tên "Trang Chủ" (ảnh PNG vừa chèn)
Layer "Background" (nền trắng)
Tiếp theo, bạn nên làm gì?
1 Khóa layer ảnh PNG (làm nền tham khảo)
Trong bảng Layer, chọn layer "Trang Chủ"
Nhấn vào biểu tượng ổ khóa để layer này không bị di chuyển nhầm.
2 Thêm các layer mới để thiết kế
Nhấn vào biểu tượng giấy gấp góc (bên dưới bảng Layer) để tạo layer mới.
Dùng Shape Tool (U) để vẽ khối menu, banner, các khung sản phẩm…
Dùng Text Tool (T) để thêm chữ, tiêu đề, mô tả, nút bấm
Có thể thêm ảnh thật, phối màu, thay đổi bố cục tùy ý – càng sáng tạo càng được
đánh giá cao
3 Mỗi thành phần nên để trên một layer khác nhau
Ví dụ: Menu = 1 layer, Banner = 1 layer, mỗi sản phẩm = 1 layer, các text = các layer riêng
Điều này giúp file PSD của bạn đúng chuẩn, không bị xem là copy, thầy/cô kiểm tra
dễ
Trang 164 Lưu file PSD và xuất file PNG khi hoàn thiện
File > Lưu dưới dạng PSD để nộp file gốc (giữ nguyên các layer).
File > Xuất dưới dạng > PNG để nộp file ảnh xuất bản.
Bạn đang làm rất đúng, cứ tiếp tục theo các bước trên! Nếu muốn minh họa thao tác vẽ shape, text hoặc chỉnh sửa từng phần, bạn nhắn tiếp nhé!
Rất nhiều bạn cũng hỏi về điểm này!
Trên Photopea, chỉ có layer Background mới hiện trực tiếp biểu tượng ổ khóa bên phải
1 Chọn layer cần khóa (ở đây là “Trang Chủ”) trong bảng Layer.
2 Ở ngay phía trên danh sách layer, bạn sẽ thấy dòng “Khóa:”
3 Tick vào ô có hình chiếc khóa (nằm cạnh các ô “khóa pixel”, “khóa vị trí” )
o Bạn có thể tick vào các ô sau:
Hình ô vuông: khóa pixel (không cho vẽ vào layer đó)
Hình mũi tên: khóa di chuyển (không kéo layer được)
Hình ổ khóa: khóa hoàn toàn layer (không chỉnh sửa gì được)
4 Sau khi tick vào, layer sẽ không di chuyển hoặc chỉnh sửa được nữa (giống như đã
“đóng băng” lại)
Lưu ý:
Layer “Background” có ổ khóa mặc định (bạn không cần thao tác gì thêm)
Layer thường (như “Trang Chủ”, “Layer 1”…): bạn phải tick vào ô “Khóa” phía
trên bảng Layer như hướng dẫn trên
Nếu vẫn không tìm thấy, bạn gửi ảnh màn hình phần “Khóa:” phía trên bảng Layer, mình sẽ chỉ vị trí chi tiết nhé!
Trang 17Tuyệt vời! Bây giờ mình sẽ hướng dẫn bạn cách phối màu cho giao diện trang chủ ngay trên Photopea từ cơ bản đến thực tế, đảm bảo dễ làm và đúng yêu cầu bài thiết kế.
A Các bước phối màu giao diện trong Photopea
Bước 1: Tạo layer mới để phối màu
Nhấn vào biểu tượng tờ giấy gấp góc ở dưới bảng Layer để tạo Layer mới (nên đặt
tên cho dễ nhớ, ví dụ: “Màu menu”, “Màu banner”, “Màu nút”…)
Kéo layer này nằm trên layer “Trang Chủ” để khi tô, màu sẽ che vùng cần phối mà
không làm mất wireframe mẫu
Bước 2: Chọn vùng cần tô màu
Dùng công cụ Marquee (M) hoặc Rectangular Selection Tool (hình ô vuông nét
đứt) để khoanh vùng menu, banner, nút bấm…
Hoặc dùng Polygonal Lasso Tool (L) nếu muốn vẽ vùng tự do.
Bước 3: Chọn màu và tô
Click vào ô màu phía dưới thanh công cụ trái (hình vuông màu đen/trắng) để mở
bảng chọn màu
Chọn màu mình thích (ví dụ: xanh, hồng pastel, vàng nhạt… cho trẻ em)
Để tô, vào Chỉnh sửa > Tô màu vùng chọn… (hoặc Edit > Fill).
Chọn “Màu đầu tiên” (Foreground) rồi OK
Bước 4: Bỏ vùng chọn (Deselect)
Ấn Ctrl + D (hoặc vào menu Chọn > Bỏ chọn) để bỏ vùng chọn vừa tô.
Bước 5: Thêm text, icon, hoặc phối nhiều màu
Dùng Text Tool (T) để ghi chữ, đặt menu, slogan trên lớp màu vừa tô.
Muốn phối gradient (chuyển màu): Dùng công cụ Gradient Tool (G), kéo chuột từ
màu này sang màu khác trên layer mới