LÀM SAO ĐỂ TRÌNH BÀY SHOWCASE UI/UX TRÔNG THẬT PRO?

‍

Thiết kế xong xuôi sản phẩm UI/UX của mình rồi, bước tiếp theo là gì đây? Cho LÊN THỚT lun chứ sao!!

Thế nhưng liệu bạn có còn đang lúng túng không biết tổng hợp các màn thiết kế sao cho đẹp mắt và hài hoà? Hay bạn vẫn còn phân vân không biết mẫu template showcase sẵn nào tone sur tone với sản phẩm của mình?

Tham khảo ngay cách làm sau để tự tạo cho mình một showcase UI/UX cực pro ngay phút mốt nha!

‍

• Đưa các màn hình thiết kế vào trong Frame

Điều đầu tiên cần làm chính là đưa các màn hình thiết kế của bạn vào cùng một hoặc nhiều Frame, kích cỡ Frame tùy chỉnh theo ý muốn của bạn. Đừng quên đặt màu trắng trơn cho Frame nha!

‍

2. Tạo nền cho phần trình bày Showcase

Tạo một hình vuông làm nền cho mỗi phần trình bày trong Frame Showcase của bạn. bạn có thể tạo nhiều khối nền khác nhau để làm đa dạng cách trình bày của bạn. Khóa layer nền lại để tránh di chuyển nó trong quá trình làm nhé!

‍

3. Chọn màu nền

Đặt màu nền bằng cách chọn màu chủ đạo trong thiết kế của bạn, giảm Opacity (độ trong suốt) xuống 30%.

‍

4. Tạo phần đổ bóng cho màn hình thiết kế

Đổ bóng mang lại hiệu ứng 3D, giúp Showcase của bạn thêm ấn tượng. Tạo hình khối có kích cỡ bằng với màn hình thiết kế của bạn muốn đổ bóng, chỉnh độ bo góc lên 120 px và đặt ở dưới màn đó.

‍

5. Chọn màu đổ bóng cho màn hình thiết kế

Chọn màu chủ đạo trong thiết kế của bạn cho lướp đổ bóng, di chuyển xuống dưới bảng màu để lấy màu trầm hơn, sau đó giảm Opacity (độ trong suốt) xuống 30%.

‍

6. Tạo hiệu ứng Layer Blur cho phần đổ bóng

Tạo hiệu ứng (Effects) cho lớp đổ bóng, chọn Layer Blur, điều chỉnh độ làm mờ (Blur) tầm 30 trở lên, hoặc tùy ý của bạn.

‍

7. Bo góc các màn hình thiết kế

Bo góc các màn hình thiết kế (tầm 50 px) sẽ khiến sản phẩm của bạn trông hiện đại và bắt mắt hơn đó!

‍

Tổng hợp bởi đội ngũ Capi Demy. 

Nếu bạn có câu hỏi nào đừng ngần ngại kết nối với đội ngũ Capi Demy nhé, chúng mình luôn ở đây và làm điểm tựa vững chắc cho các bạn!

Thông tin liên hệ tư vấn: 

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website:

Capidemy.com

Địa chỉ:

Cơ sở 1 HN: Tầng 6, số 35 Tô Vĩnh Diện, Khương Trung, Thanh Xuân, Hà Nội

Cơ sở 2 HN: Tầng 2 số 2 ngách 28, ngõ 93, Hoàng Văn Thái, Thanh Xuân, Hà Nội.