Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Thiết kế ứng dụng điện thoại - Mobile Apps' được đăng bởi bui manh thang, 25/6/15.

Lượt xem: 10,695

  1. bui manh thang Thành viên cấp 2

    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

    B3TK4dW.png

    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

    4T11PsC.png 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

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

    hLDIHIl.png 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

    puVh8Kl.png

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

    rhdbnvA.png

    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 đó )

    mzLCxbh.png 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

    vxedrGT.png

    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

    Y2CLKca.png

    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

    GR9zqXi.png

    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/

    ...
    Chỉnh sửa lần cuối: 25/6/15
    Thắng Phạm 357, Vimii, caodangtoi10 người khác thích bài viết này.
  2. nghiemthanhdung

    nghiemthanhdung Thành viên cấp 4

    :like:Rất mong chờ ở những phần tiếp sau
  3. Thành Lộc

    Thành Lộc Thành viên cấp 3

    Mình toàn dùng Ai để làm UI kể cả web với app, vì nó tiện hơn nhiều, Align nhanh và gọn gàng, không phải lo vỡ hình... gõ/thay text nhanh, có nhiều artboard để làm nhiều screen... vẽ icon nhanh.
    Không biết như vậy có sao không nhỉ. :)) Có khó khăn gì trong vấn đề cắt layout không? Hoặc vấn đề khác?
    Mà thật ra mình dùng quen Ai rồi nên cắt layout èo èo. Tại vì thấy nhiều người hay dùng Ps để cắt layout. :|
    Gurl thích bài viết này
  4. trustnet

    trustnet Thành viên cấp 2

    GR9zqXi.png

    làm sao chia khối đều như vậy với smart guide thế ad?
  5. Gurl

    Gurl Thành viên cấp 3

    Mình cũng quen dùng illus hơn, vậy ps hay illus thì soft nào thực hiện công việc xuất sắc và hiệu quả nhất?
  6. Jerryx8

    Jerryx8 Thành viên cấp 1

    - Làm trên Illus có cái hay là file sẽ nhẹ hơn, mỗi screen là 1 artboard, vẽ icon nhanh và nét hơn. Mỗi tội khi cắt slice thì hơi củ chuối, lại phải xuất sang pts.
    - Còn pts thì chỉnh sửa content dễ hơn, hiệu ứng này nọ cũng đơn giản hơn, nhưng khi co kéo shape có thể bị vỡ, nhòe cạnh. Pts CC2015 cho phép làm việc trên artboard như Illus, quick export img cũng siêu nhanh, smart guide cũng giống bên Ilus.... mỗi tội nặng như chì.
  7. DuyNt

    DuyNt Mới đăng kí

    trustnet: Copy 1 khối thành 5 khối. Chọn tất cả các khối , nhấn Ctrl+V. Nhìn trên thanh công cụ chọn distribute horizontal center
    trustnet: mình nghĩ là tùy thói quen thôi
  8. sonmarketer

    sonmarketer Thành viên cấp 1

    PS thông dụng hơn, đối với những trang sử dụng đồ hoạ nhiều thì thiết kế trên PS, ngày nay xu hướng clean thịnh hành, thấy có nhiều bạn thiết kế bằng AI thì dễ tao tác hơn. Ở nước ngoài thấy người ta đang dần chuyển qua sketch.

Ủng hộ diễn đàn