Thiết kế & banner ChatGPT Gemini Tỉ lệ 16:9

Ảnh hero section website thương hiệu với logo 3D kim loại

Dựng nguyên một màn hình hero website cao cấp: logo 3D kim loại khổng lồ bên phải, chữ tiêu đề + nút CTA bên trái, cả ảnh một tông màu lấy từ màu thương hiệu - chuẩn Awwwards.

Đăng bởi Solovn · Cập nhật

Nội dung Prompt

[TÊN THƯƠNG HIỆU] | [TIÊU ĐỀ = tự nhập hoặc AUTO] | [PHỤ ĐỀ = tự nhập hoặc AUTO] | [CHỮ NÚT = tự nhập hoặc AUTO] | [MÀU = màu của bạn hoặc AUTO]

Đóng vai Giám đốc Nghệ thuật Web cao cấp kiêm nghệ sĩ CGI, tạo một ảnh hero section như thật của website thương hiệu cao cấp - một ảnh khổ ngang thể hiện toàn bộ phần "above-the-fold". Bố cục kết hợp một logo 3D điêu khắc kịch tính với typography editorial và vài yếu tố giao diện tối giản. Tham chiếu: trang ra mắt sản phẩm Apple, các hero section của agency sáng tạo cao cấp, website đoạt giải Awwwards.

GIAI ĐOẠN 0: GIẢI MÃ THƯƠNG HIỆU (TỰ ĐỘNG)
Giải mã [TÊN THƯƠNG HIỆU] trước khi tạo. Mọi quyết định thị giác bắt nguồn từ đây.
MÀU CHỦ ĐẠO: nếu [MÀU] do bạn nhập - dùng đúng màu đó làm màu chủ đạo. Nếu AUTO - nhận diện màu thương hiệu biểu tượng nhất của [TÊN THƯƠNG HIỆU]. Một màu duy nhất này điều khiển toàn bộ hệ màu ảnh: gradient nền, chất liệu vật thể 3D, ánh sáng không khí.
NỀN GRADIENT: từ màu chủ đạo suy ra 2 điểm dừng - điểm trong: phiên bản bão hoà rực nhất (vầng sáng sau vật thể); điểm ngoài: phiên bản tối nhất của cùng sắc đó (gần đen nhưng còn vương sắc màu). KHÔNG đen trung tính, KHÔNG xám.
CHẤT LIỆU 3D: kim loại suy từ màu chủ đạo - tối gần đen ở vùng bóng, rực sáng ở cạnh và điểm cao đón sáng. Cả khối cùng một họ màu, KHÔNG kim loại xám/bạc trung tính.
BIỂU TƯỢNG: nhận diện dạng logo rút gọn nhất của [TÊN THƯƠNG HIỆU] làm vật thể 3D (không có thì dùng chữ cái đầu).

GIAI ĐOẠN 1: NỀN
Nền tràn viền với gradient toả tròn từ vùng giữa-phải nơi vật thể 3D đặt - vầng sáng không khí tròn (không phải màu phẳng). Vùng trong: màu rực bão hoà (~40-50% diện tích nền). Vùng ngoài: đen ám sắc bao quanh các mép. Chuyển tiếp mềm, hữu cơ.

GIAI ĐOẠN 2: LOGO 3D - YẾU TỐ HERO
Biểu tượng dựng thành khối điêu khắc 3D khổng lồ, chiếm 55-65% chiều rộng ảnh bên phải, bị cắt một phần bởi mép phải và đáy (ngụ ý kéo dài ra ngoài khung). Xoay ~20-35° trục dọc và 10-20° trục ngang (góc 3/4 động). Góc máy thấp hơn tâm 5-10° tạo sự bề thế. Kim loại chải tối cao cấp: vân chải mảnh theo từng mặt, cạnh sắc bắt một đường sáng specular mảnh liền mạch viền trọn hình logo. Tương phản giữa mặt tối gần đen và cạnh sáng rực màu là đặc trưng cốt lõi. Cảm giác quy mô: hùng vĩ như cao 3-5 mét.

GIAI ĐOẠN 3: THANH ĐIỀU HƯỚNG
Navbar tối giản trên cùng (cao ~4-5%): nền tối bán trong; trái: wordmark/logo trắng nhỏ; giữa: 4-6 mục điều hướng in hoa nhỏ (tự suy theo ngành thương hiệu); phải: nút đổi ngôn ngữ + nút CTA "[CHỮ NÚT]" kèm mũi tên →.

GIAI ĐOẠN 4: KHỐI CHỮ - BÊN TRÁI
Đặt ở 35-40% bên trái, căn giữa dọc, căn trái. Dòng nhãn nhỏ trong ngoặc trên tiêu đề. [TIÊU ĐỀ]: chữ lớn (~8-10% chiều cao ảnh/dòng), trắng, tối đa 2-3 dòng. [PHỤ ĐỀ]: 1-2 câu nhỏ, trắng 70-80% độ mờ. Hai nút CTA cạnh nhau: nút chính tô tối viền trắng chữ "[CHỮ NÚT]" kèm →; nút phụ chỉ viền.

GIAI ĐOẠN 5: YẾU TỐ ĐÁY
Dưới-trái: "Scroll for more ↓" chữ trắng rất nhỏ. Dưới-phải: "Est. in [NĂM THÀNH LẬP]" cùng cỡ.

GIAI ĐOẠN 6: ÁNH SÁNG
Một nguồn sáng chính ấm phía sau và trên-phải vật thể 3D - màu chính là màu rực bão hoà, đồng thời tạo cả vầng sáng nền lẫn highlight trên kim loại (cùng một nguồn). Ambient lạnh rất nhẹ từ trên (~5%). Không fill, không rim. Giữ tương phản mạnh giữa mặt sáng và tối.

GIAI ĐOẠN 7: BỐ CỤC
Tỉ lệ 16:9. Trái 35-40%: vùng chữ (nền tối, UI). Phải 60-65%: vùng điêu khắc 3D. Chữ và vật thể KHÔNG đè nhau. Hướng đọc: chữ trái → điêu khắc phải.

THÔNG SỐ KỸ THUẬT: render Octane/Redshift kim loại chải chuẩn vật lý; mọi màu chất liệu suy từ màu chủ đạo (không xám trung tính); ray tracing bật; gradient nền là ánh sáng thể tích thật; chữ trắng phẳng sắc nét không bóng; tối thiểu 2048 samples; cảm giác đầu ra: ảnh chụp màn hình hero website cao cấp đoạt giải Awwwards.

Đã được sao chép lần.

Cách dùng

  1. Điền [TÊN THƯƠNG HIỆU], tiêu đề, phụ đề, chữ nút và màu - hoặc để AUTO cho AI tự suy theo thương hiệu.
  2. Dán prompt vào ChatGPT/Gemini - bạn nhận một ảnh hero website hoàn chỉnh (logo 3D + chữ + nút).
  3. Muốn khớp web thật, điền đúng màu thương hiệu của bạn vào [MÀU].
  4. Dùng làm ảnh mockup chào khách làm web, ảnh bìa portfolio, hoặc concept landing page.

Mockup web bán được dịch vụ

Một ảnh hero section trông như website thật đoạt giải giúp người làm dịch vụ thiết kế/lập trình web chốt khách nhanh: khách thấy ngay "web của tôi sẽ trông thế này". Điểm mạnh của prompt là cả ảnh chỉ dùng MỘT màu (lấy từ thương hiệu) nên luôn sang và đồng bộ.

Mẹo

Tạo 2-3 phương án đổi màu chủ đạo từ cùng prompt để chào khách nhiều lựa chọn - trông như đã thiết kế công phu nhiều bản.

Dịch vụ sản xuất nội dung

Solovn giúp bạn tiết kiệm thời gian sản xuất nội dung.

Tìm hiểu dịch vụ
Chat Telegram
Cookie & Quyền riêng tư

Shop dùng cookie để cải thiện trải nghiệm, ghi nhớ giỏ hàng và phân tích traffic. Xem chi tiết tại Chính sách Cookie.

Tìm hiểu thêm