UI/UX Design, Những điều cần biết .Part 1

Xin chào các bạn ! mình là Thắng

Hôm nay mình sẽ chia sẻ một vài điều cần biết khi thiết kế 1 mẫu template web hoặc mobi application, hoặc giao diện game,…

Phần mềm thiết kế: Photoshop ( nên dùng bản mới nhất photoshop CC)

1.Tạo File

Đầu tiên tất nhiên rồi, tạo một new file, Nhiều bạn sẽ mất chút thời gian ở bước này vì không biết nên tạo file với kích thước bao nhiêu là hợp lí, Đừng lo vì nếu chưa có kinh nghiệm và nhớ hết các con số thì photoshop đã giúp bạn điều đó khi bạn bắt đầu tạo file mới, có nhiều lựa chọn để các bạn quan tâm. web, mobile app hoặc US paper và mỗi lựa chọn đều có ghi sẵn kich thước , rất tiện phải không



Lưu ý khi các bạn design cho mobile , hãy luôn chọn kich thước màn hình lớn nhất, vì sau này nếu có kéo to thu nhỏ cũng ko lo vấn đề vỡ hình ảnh ( từ lớn thu nhỏ luôn nét, nhưng nếu ảnh từ nhỏ phóng lớn sẽ bị mờ ), Mình thường chọn độ phân giải 1080*1920,, màn hình iphone 6+ thì to hơn 1242*2208

Thiết kế gì cũng thế chúng ta phải đi từ tổng quán đến chi tiết sau, vì thế khi xây dựng giao diên 1 trang các bạn nên phác thảo ra trước những khu vực cần show nội dung gì, hình ảnh gì

Thường thì web cần có đầu tiên là header, đến phần content và phần footer,

app mobile cũng tương tụ như vậy nhưng có thể rút gọn đi thành 2 phần header và content, sẽ ko có footer, và phần header này có thể gọi nôm na là phần menu chứa các button chức năng, tùy thuộc sự sáng tạo của các bạn mà nó có thể nằm trên cùng, dưới cùng, trái hoặc phải

2. Ưu tiên dùng Shape

Khi thiết kế các khung hay button các bạn nên dùng Shape đẻ kẽ vẽ , như dưới hình

Dùng Rectangle tool, phim tắt là U

Dùng pen cũng thế nên để ở chế độ Shape, tránh đẻ chế độ path bời vì sao:

Vì shape cũng giống như vector ở Illustrator vậy, thoải mái phóng to thu nhỏ mà ko sợ vỡ hình

bên dưới có 2 hình mình để ở chế độ shape và chế độ layer bình thường sau khi phóng to thu nhỏ sẽ thấy nó khác liền

hình mới tạo chưa co kéo

Sau khi phóng to rồi thu nhỏ ( hình bị vỡ, tron khi layer Shape vẫn đẹp )

3. Chèn hình ảnh với Clipping Mask

Bạn có một ảnh rất đẹp và bạn muốn lấy làm banner, tất nhiên là hình ảnh đó vừa với khung banner mà bạn đã tính trước, bình thường bạn sẽ cần co kéo cắt dán sao cho nó vừa với màn hình thiết kế, như thế rất mất công,

Bạn đã có khung sẵn rồi và muốn hình ảnh bạn chỉ suất hiện trong khung đó thôi: di chuyển layer ảnh lên ngay trên layer khung: chuột phải layer ảnh chọn Create Clipping Mask



ta sẽ được hình ảnh gọn gàng trong khung



Các bạn để ý layer ảnh sẽ thụt vào phái trong và có một mũi tên chỉ xuống layer khung

Và giờ bạn muốn di chuyển , co kéo thoải mái bức ảnh với góc nhìn ưng ý thì nó vẫn chỉ xuất hiện trong khung đó thôi

4.Copy layer style

Click dupe vào layer sẽ xuất hiện bảng layer style, ở đây bạn tha hồ tao style cho riêng mình, chi tiết thế nào, mình sẽ có 1 bài giới thiệu sau, ở đây mình sẽ chỉ tao shadow thôi ( click dupe vào phần trắng của layer chứ đừng click dupe vào tên layer sẽ thành đổi tên layer đó )

copy layer style

Chuột phải lên layer chọn copy style

Chọn tất các các layer mà bạn muốn style giống thể , chuột phải và paste layer style lên chúng, tự động các layer đó sẽ có style giống với cái đầu tiên bạn tạo

5. Text

Khi thiết kế rất thường xuyên chúng ta muốn phần text chỉ hiển thị trong phạm vi nhất định, như title một nội dung , hay phần mô tả ngắn gọn vậy phải làm thế nào, rất dơn giản

Nhấn phím t chuyển qua chế độ gõ text, nhưng các bạn đừng vội click lên và viết vội, hãy ckick và kéo sang hoặc kéo xuống với kich thước vừa mắt trước, và gõ text vào đó, nếu bạn muốn chỉnh phạm vi chỉ việc nhấn phím t vào nó và chỉ chuột ra phần khung nét dứt và co kéo nó thôi, text sẽ tự động dàn dòng cho bạn



6. Smart guides

Nhiều bạn có thói quen dùng đường giude để dóng các dòng các hàng cho chuẩn, đó là cách tốt, nhưng nếu thiết kế 1 trang mà có quá nhiều chi tiết việc lạm dụng đường guide sẽ khến bạn trờ lên cực kì rối rắm và nhìn cũng ko thích mắt chút nào



Mình thường dùng Smart guide để dóng các đối tượng, rất gọn gàng mà vẫn chính xác



Bật hoặc tắt chế độ smart giudes: View -> Show -> Smart Guides

( phím tắt Ctrl + h : bật hoặc tắt tất cả các đường Guilde và Grid )

Bài tiếp theo mình sẽ nói cơ bản về phối màu để có một sự thông nhất về giao diện

Cảm ơn mọi người đã theo dõi

Đọc bài Khái niệm về UI/UX tại đây:
http://forum.vietdesigner.net/threads/ui-ux-khai-niem-y-nghia.89185/

Xem tiếp Phần 2 tại đây: http://forum.vietdesigner.net/threads/ui-ux-design-nhung-dieu-can-biet-part-2.89203/