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

[Tut] Dành cho bạn nào đang làm công việc thiết kế cho các ứng dụng cho OS như mình :)

Chủ đề thuộc danh mục 'Photoshop Tutorials - Hướng dẫn Photoshop' được đăng bởi Voòng A Bống, 29/1/13.

Lượt xem: 6,884

  1. Voòng A Bống Thành viên cấp 1

    Thiết kế giao diện trên iPhone như thế nào?
    Trong hướng dẫn này, chúng tôi sẽ sử dụng Adobe Photoshop, thiết kế 3 trang ứng dụng danh sách thư mục đơn giản cho iPhone. Bài viết này sẽ hướng dẫn bạn qua các bước, và bao gồm tất cả các nguyên tắc cơ bản của thiết kế ứng dụng iPhone bằng cách sử dụng Photoshop.

    Bắt đầu dự án của bạn bằng cách quyết định những gì là mục đích chính của ứng dụng của bạn. Và cách hiệu quả nhất đơn giản nhất để đạt được mục tiêu đó là những gì. Đối với dự án này, chúng tôi sẽ được thiết kế 3 trang ứng dụng danh sách thư mục đơn giản. Mục tiêu cuối cùng là tìm một doanh nghiệp gần người sử dụng, và cung cấp cho họ với các chi tiết liên lạc, hoặc hướng dẫn lái xe.

    Vì vậy, tôi quyết định trang 1 tính năng một thanh tìm kiếm, và sống cập nhật kết quả. Cũng cần có một popup cung cấp cho bạn một tùy chọn để lọc kết quả theo thể loại. 5 kết quả sẽ được hiển thị tại một thời điểm, và khi bạn di chuyển xuống trên trang web, thêm 5 được tự động tải.

    Trang 2 là trang thông tin cho người sử dụng lựa chọn kết quả, nó có tính năng một bức tranh lớn hơn, đánh giá, vị trí, và các chi tiết liên lạc. Trang 3 là trang cài đặt, với các tùy chọn chung cho các ứng dụng, và phân loại ưu đãi cho các kết quả.

    Một khi bạn biết các thông tin cần thiết nhu cầu ứng dụng của bạn, làm một số bản phác thảo trên giấy, để lên kế hoạch bố trí sơ bộ về ứng dụng của bạn. Hãy thử các Sheets Phác thảo Wireframe để tăng tốc độ những thứ lên một chút.

    Các thông số kỹ thuật cho thiết kế giao diện iPhone & iPad trong Photoshop

    iPhone 3.0
    Screen resolution: 72 ppi
    Screen size: 320 x 480 px
    Icon size: 57 x 57 px
    File format: PNG-24
    iPhone 4.0
    Screen resolution: 72 ppi
    Canvas size: 640 x 960 px
    Icon size: 114 x 114 px
    File format: PNG-24
    iPad
    Screen resolution: 72 ppi
    Canvas size: 768 x 1024 px
    Icon size: 72 x 72 px
    File format: PNG-24

    Graphics for the iTunes Store
    Icon: 512 x 512 px (.tif, .jpg or .png, 72dpi, RGB)
    iPhone Screenshots: 320 x 480 px or 640 x 860 px (.tif, .jpg or .png, 72dpi, RGB)
    iPad Screenshots: 1024 x 768 px (.tif, .jpg or .png, 72dpi, RGB)


    Wireframe để tăng tốc độ những thứ lên một chút.

    [​IMG]
    Trong hướng dẫn này, chúng tôi sẽ thiết kế màn hình đầu tiên của các ứng dụng iPhone.
    Bước 1: New Document

    Mở Photoshop và tạo một tài liệu mới. Thiết lập độ rộng 640 pixel và chiều cao là 960 pixel. Nếu bạn có kế hoạch để in ra các khái niệm của bạn, độ phân giải của màn hình iPhone Retina là 326 ppi.
    [​IMG]
    Đổ màu nền đen
    [​IMG]
    Bước 2: The Top Bar

    Thanh trên cùng với tín hiệu và thông tin pin nên luôn luôn vẫn là một liên tục trên các ứng dụng iPhone. Trừ khi ứng dụng của bạn là một trò chơi hoặc có một số lý do tốt để được toàn màn hình.
    Khi thanh luôn luôn giống nhau, bạn có thể tiết kiệm thời gian bằng cách sử dụng một hình ảnh trước khi thực hiện:
    [​IMG]
    Lưu hoặc copy các hình ảnh trên và dán nó vào tài liệu Photoshop của bạn.
    [​IMG]
    Bước 3: The Background

    Sử dụng công cụ Rounded Rectangle để vẽ một hình dạng màu trắng, lấp đầy phần còn lại của tài liệu. Bán kính góc là 10 pixels.
    [​IMG]

    Hãy áp dụng mẫu hình nền. Tải về miễn phí của một trong các mẫu hình nền tại gói ourSoft GrungeSeamless

    Áp dụng mẫu hình nền như một Pattern Overlay


    [​IMG]
    Bước 4: The Title Bar

    Vẽ một hình chữ nhật tròn, khoảng 640 điểm ảnh rộng và 94 điểm ảnh cao. Đặt nó ngay dưới thanh hàng đầu ..
    [​IMG]
    Xóa các điểm neo công cụ lựa chọn, loại bỏ hai điểm đánh dấu màu đỏ trong hình dưới đây.
    [​IMG]
    Với công cụ Convert Point lựa chọn, kích một lần vào mỗi điểm đánh dấu màu đỏ trong hình dưới đây.
    [​IMG]
    Hai hành động cuối cùng sẽ có kết quả trong một hình chữ nhật được làm tròn trên các góc đầu và thẳng vào góc dưới cùng.
    [​IMG]
    Tinh chỉnh các hình dạng nếu cần thiết để nó là chính xác 640 pixels rộng và cao 84 điểm ảnh. Sử dụng công cụ lựa chọn trực tiếp để lựa chọn và di chuyển các điểm neo. Và sử dụng công cụ chuyển đổi để kiểm tra kích thước của hình dạng.
    [​IMG]
    Bước 5: Áp dung mẫu này cho tiêu đề bar

    Mở Blending Options cho lớp thanh tiêu đề, và áp dụng một hiệu ứng bóng đổ với các cài đặt hiển thị dưới đây
    [​IMG]
    Áp dụng Inner Shadow:
    [​IMG]
    Cuối cùng tạo màu Gradient Overlay:
    [​IMG]
    Bước 6: The Title

    Sử dụng công cụ Type để tạo ra các danh hiệu. Trung tâm nó ở giữa của thanh tiêu đề, và áp dụng một bóng thả:
    [​IMG]
    Step 7: Nút tiêu đề thanh Bar

    Vẽ 56 x 56 điểm ảnh hình chữ nhật tròn, và sắp xếp phía bên phải của thanh tiêu đề, như hình dưới đây:
    [​IMG]
    Áp dụng bóng đổ Drop Shadow:
    [​IMG]
    Inner Shadow:
    [​IMG]
    Cuối cùng, Gradient Overlay:
    [​IMG]
    Đặt icon này từ các thiết lập các icon Thanh công cụ iPhone, ngay phía trên nút. Và cho nó mộtbóng đổ (Drop Shadow) tinh tế:
    [​IMG]
    Copy vào nút trên bên trái của thanh tiêu đề, như hình dưới đây:
    [​IMG]
    Sử dụng công cụ Rounded Rectangle để vẽ 3 hình dạng, mỗi 34 điểm ảnh và 7 điểm ảnh cao, như hình dưới đây. Cũng áp dụng một Drop Shadow tinh tế cho tất cả 3.
    [​IMG]
    Bước 8: The Leather Texture

    Nhân đôi layer Title Bar và di chuyển nó lên (Ctrl +]) cho đến khi nó là ở trên tiêu đề, và cả hai nút. Se Opacity Điền đến 0, và áp dụng mô hình này da liền mạch như một Pattern Overlay với các cài đặt sau đây:
    [​IMG]
    Bước 9: The Page Background

    Sử dụng công cụ Rounded Rectangle để vẽ một hình mà điền vào hầu hết các không gian còn lại. Để lại một lề mỏng, xung quanh hình dạng, như hình dưới đây:
    [​IMG]
    Áp dụng bóng đổ cho hình dạng
    [​IMG]
    Nhân đôi lớp hai lần, sau đó chọn lớp trung lưu và di chuyển các điểm dưới lên 10 pixels với công cụ lựa chọn trực tiếp. Sau đó lặp lại với các lớp trên, nhưng di chuyển nó lên 20 pixels.
    [​IMG]
    Bước 9: The Search Field

    Với công cụ Rectangle tròn chọn, thiết lập Radius là một cái gì đó cao, ví dụ 100px. Sau đó vẽ một hình ở trên cùng của trang, như hình dưới đây:
    [​IMG]
    Áp dụng một Inner Shadow với các thiết lập:
    [​IMG]
    Nơi này Icon Tìm kiếm từ bộ Vector những biểu tượng ứng dụng, ở phía bên trái của trường tìm kiếm.
    [​IMG]
    Và chút text

    [​IMG]
    Vẽ một chia dưới trường tìm kiếm, bằng cách sử dụng công cụ Line Tool.
    [​IMG]
    Bước 10: The Thumbnail

    Vẽ một hình chữ nhật tròn khoảng 100 x 100 pixel, và áp dụng một Drop Shadow như hình dưới đây:
    [​IMG]

    [​IMG]
    Bước 11: Listing Information

    Thêm một số văn bản cho tiêu đề niêm yết:
    [​IMG]
    Thêm một số văn bản cho vị trí của danh sách:
    [​IMG]
    Sử dụng công cụ Polygon để vẽ 5 hình sao:
    [​IMG]
    Áp dụng một Gradient Overlay cho một số ngôi sao để minh họa cho sự đánh giá của danh sách.
    [​IMG]
    Thêm một số văn bản liên kết "Nhận xét".
    [​IMG]
    Bước 12: The More Info Button

    Vẽ một hình chữ nhật tròn, chiều cao giống như hình ảnh thu nhỏ, ở phía bên phải của trang. Áp dụng một Gradient Overlay:
    [​IMG]

    [​IMG]
    Bước 13: Sắp xếp kết quả

    Vẽ một chia với công cụ Line Tool:
    [​IMG]
    Nhóm tất cả các lớp tạo nên kết quả niêm yết. Bản sao các nhóm 4 lần và sắp xếp chúng như hình dưới đây:
    [​IMG]

    Và có bạn có nó. Màn hình đầu tiên của ứng dụng iPhone của chúng tôi! Những kỹ thuật này có thể được áp dụng cho hầu hết các yếu tố thiết kế của iPhone ứng dụng trong Photoshop.

    ...
    Hàn Phong, James spamer, Fanytastic Sú13 người khác thích bài viết này.
  2. thuydx55

    thuydx55 Mới đăng kí

    Rất hữu ích, thanks bác nhé
    Mình là dân dev mà k phải lúc nào cũng có designer bên cạnh nên nhiều lúc cũng phải tự mày mò mà làm :3
  3. Nhocs

    Nhocs Thành viên cấp 1

    Bakemono.Kun thích bài viết này
  4. HSP

    HSP Thành viên cấp 4

    cho iêm hỏi tí , việc dựng mô phỏng trên PS khá dễ , nhưng làm sao để thiện thực hóa nó là đưa vào môi trường ios và các vấn đề liên quan . . . phải biết code à ?
  5. Voòng A Bống

    Voòng A Bống Thành viên cấp 1

    Tất nhiên, bạn phải code để đưa vào OS. Giống như website thôi bạn ;). Nhưng OS có đặc thù riêng :D
    HSP thích bài viết này
  6. khoiuehb

    khoiuehb Thành viên cấp 1

    nhiều bước mâu thuẫn quá, ví dụ như bước 10 là áp dụng drop shadow, nhưng dưới hình là inner shadow
  7. khoiuehb

    khoiuehb Thành viên cấp 1

    [​IMG]
    cám ơn tut của bác
  8. thaituan_boy_dt

    thaituan_boy_dt Thành viên vui tính

    Mấy cái này vẽ ra thì dễ, dưa vào máy để ứng dụng thì khó đấy
  9. mgr

    mgr Cựu quản trị

    :x cám ơn bác đã share tut ạ
  10. mrdamniit

    mrdamniit Thành viên cấp 1

    Bác có hay làm giao diện các app cho Android không share cho em ít kinh nghiệm với :)
  11. tydk2010

    tydk2010 Thành viên cấp 2

  12. thanhphung5394

    thanhphung5394 Mới đăng kí

Ủng hộ diễn đàn