Thiết Kế Layout dựa trên Hướng Tự Nhiên của Ảnh

Thảo luận trong 'Advertising'

Lượt xem: 3,892

  1. Hôm nay, chúng ta sẽ cùng tìm hiểu thủ thuật thiết kế đơn giản bằng cách kết hợp giữa văn bản và hình ảnh. Tôi sẽ giới thiệu cho bạn 4 phương pháp sử dụng hướng của bức ảnh để xác định thiết kế layout tương ứng.

    Sẽ rất thú vị và chắc chắn chúng sẽ giúp ích cho bạn cho những thiết kế về sau.
    Không sử dụng bất kỳ quy tắc nào

    Đầu tiên, tôi thú nhận rằng những lời khuyên sau đây không đại diện cho một quy tắc nào mà bạn phải tuân theo. Nó đơn giản chỉ là một phương pháp giúp bạn thiết kế các yếu tố có liên quan đến phần text của hình ảnh.

    Rõ ràng, bạn cần chú ý đến khoảng trống để tạo hiệu ứng nơi bạn đặt text trên hình ảnh. Hãy nhớ rằng bạn hoàn toàn có thể xử lý hình ảnh theo những cách này.
    Tại sao cần thực hiện cả 4 phương pháp

    Mặc dù đây không phải là yêu cầu, tôi cũng khuyến khích bạn có một nhận định tốt về đường line trong hình ảnh mà bạn cố kết hợp phần text và đồ họa. Lặp lại là một trong những nguyên tắc thiết kế quan trọng nhất và điều này hoàn toàn tự nhiên. Bằng cách phân tích và sử dụng hướng riêng của hình ảnh, bạn sẽ dễ dàng phối hợp hình ảnh và text một cách hài hòa. Hình ảnh được tạo ra cho một mục đích sử dụng cụ thể và nó sẽ tuyệt vời hơn nếu bạn sử dụng hình ảnh như một gợi ý.

    Vì vậy công việc của tôi là gợi ý cho bạn sử dụng line sẵn có của hình ảnh. Chúng ta hãy cùng xem

    LINE ĐƠN GIẢN

    Phương pháp đầu tiên cực kỳ đơn giản và dễ hiểu là sử dụng line sẵn có trong hình ảnh này. Tất cả những gì bạn phải làm là sắp xếp nội dung hình ảnh và những đường line giúp phần nội dung minh họa thẳng hàng.

    Bước đầu tiên là tìm một góc bên phải hình. Không phải tất cả hình ảnh đều có thể sử dụng kỹ thuật này, bạn phải dùng hình ảnh nào đó đơn giản và có góc cạnh. Các hình sau đây của nhiếp ảnh gia Stephen Heron là một ví dụ tuyệt vời.
    [​IMG]
    Như bạn đã thấy, có rất nhiều khối màu sắc lớn riêng biệt. Framework các tòa nhà tạo một không gian đủ lớn để chứa phần nội dung.

    Trong phiên bản sau đây, tôi sẽ thêm một số đồ họa giúp bạn hình dung được các đường line nổi bật và có thể dễ dàng sử dụng.
    [​IMG]
    Thật dễ hiểu phải không? Bạn không cần hẳn một bài viết để biết cách đặt phần text ở một vị trí tự nhiên nhất trên hình ảnh. Đây chỉ là bước khởi đầu, chúng ta có thể dùng cách này hoặc nâng cao hơn trong một số trường hợp khác.

    MỞ RỘNG HƠN

    Trong ví dụ trước, chúng ta đã đặt hình ảnh và văn bản trên cùng line sẵn có và ở các cạnh của hình ảnh. Tuy nhiên, một số trường hợp sẽ không áp dụng được. Ví dụ trong bức ảnh của theklan, vị trí text nằm trên cầu thang sẽ rất khó để đọc.
    [​IMG]
    Cách tốt nhất là dùng khoảng trống bên phải- nơi có bức tường lớn. Bây giờ chúng ta có thể đặt văn bản vào khoảng trống này hoặc có thể thay đổi đôi chút bằng cách cân nhắc gợi ý từ phần hình ảnh.
    [​IMG]
    Chú ý cách tôi vẽ đường line trùng với các bậc cầu thang và không cần thiết phải vẽ dài toàn trang. Các bậc cầu thang như điểm nhấn của hình ảnh và chúng tạo các đường line khá đẹp. Nếu chúng ta sử dụng các đường line này, văn bản sẽ tự nhiên và phù hợp với hình ảnh hơn.
    [​IMG]
    Chú ý rằng từ trên xuống dưới, mỗi dòng text trùng với hướng có sẵng của hình ảnh. Những đường line này không những được đặt đúng vị trí mà còn đúng kích cỡ.

    Lần này, kết quả trông có vẻ tinh tế hơn. Hầu hết người xem không nghĩ bạn đã làm theo cách đó, kích thước văn bản trùng hợp với đường line của hình ảnh.
    [​IMG]

    SỰ LẶP LẠI

    Hãy luôn nhớ lặp lại là một ý tưởng tuyệt vời. Chúng ta sẽ tận dụng nguyên tắc này cho hình ảnh bên dưới.

    Tiếp theo là hình ảnh các chú chim trên dây điện, được chụp bởi Lali Masriera, một ví dụ hoàn hảo trong trường hợp này. Rõ ràng có những đường line ở khoảng trống bên phải mà chúng ta có thể dùng cho phần nội dung.
    [​IMG]
    Trong cách đặt đường line lần này, tôi đã thay đổi đôi chút. Tôi không dùng các đường thẳng, tôi sử dụng mô hình grid. Tôi thêm một số đường kẻ tự do cho tác phẩm của tôi nhưng lặp lại giống đường line sẵn có. Một lần nữa, tôi không dùng đường line thẳng đứng để tạo sự tự nhiên và phù hợp với hình ảnh.
    [​IMG]
    Với một số đường line như vậy, chúng ta có thể xoay văn bản song song theo đường line sẵn có.
    [​IMG]
    [​IMG]

    CẢM HỨNG ĐỐI XỨNG

    Trong ví dụ cuối cùng, chúng tôi sử dụng phương pháp hơi giống với sự lặp lại ở trên nhưng phức tạp hơn. Để bắt đầu, tôi chọn hình ảnh của nhiếp ảnh gia Daniel Zedda.
    [​IMG]
    Tôi thật sự thích bức ảnh này, cấu trúc vững chắc và sử dụng kỹ thuật thường thấy trong thời kỳ phục hưng Châu Âu. Nếu chúng ta dùng những đường line trong bức hình này, nó sẽ không phù hợp với bức ảnh. Thay vào đó, chúng ta sẽ xác định một hình kim tự tháp từ hình ảnh
    [​IMG]
    Chúng ta có thể dùng hình này như nguồn cảm hứng để đặt phần nội dung như chúng ta đã dùng với bức ảnh hình chú chim. Để làm điều này, vẽ đường line tam giác, sau đó đặt tam giác ở khoảng trống bên trái. Cuối cùng cho phần văn bản vào giữa line hình tam giác.
    [​IMG]
    Chú ý rằng tôi không dùng line hình kim tự tháp xung quanh phần nội dung bên dưới. Thay vào đó, đường line quanh nội dung sẽ trông tự nhiên hơn và có vẻ giống hình kim cương, và nó hoàn toàn có thể chấp nhận được. Một lần nữa, bạn làm cho các đường line tự nhiên phù hợp với hình ảnh hơn.
    [​IMG]

    KẾT LUẬN
    Mục tiêu ở đây không phải là làm chính xác theo những gì tôi gợi ý nhưng hãy đơn giản hóa và hướng phần nội dung cho phù hợp với bức ảnh để truyền cảm hứng cho những thiết kế độc đáo và không theo những khuôn mẫu sẵn có.

    Hãy để lại lời bình bên dưới và cho chúng tôi biết cảm nhận của bạn. Bạn có nghĩ việc chọn line trước khi thêm phần nội dung là một ý tưởng hay?

    Nguồn: Học Thiết kế: Thiết Kế Layout dựa trên Hướng Tự Nhiên của Ảnh | Học Thiết Kế Web
    ------------------------------------------------

    Không biết cho vào đây có đúng không. K đúng thì nhờ các mod chuyển hộ :D
    Cá nhân mình thì thấy bài này khá là hữu ích khi làm quảng cáo. Chia sẻ cho bạn nào có nhu cầu =))



  2. saytinh

    saytinh New Member

    Tham gia ngày:
    7/4/10
    Bài viết:
    11
    Đã được thích:
    0
    hay ......tốt.
  3. killer

    killer Đầy tớ nhân dân

    Tham gia ngày:
    16/11/04
    Bài viết:
    7,961
    Đã được thích:
    263
    là người thiết kế, bạn cần phải xem những bài như này :)
  4. pesicoca01

    pesicoca01 New Member

    Tham gia ngày:
    12/3/08
    Bài viết:
    8
    Đã được thích:
    0
    tuyệt vời
  5. in9x_hue

    in9x_hue Member

    Tham gia ngày:
    24/1/13
    Bài viết:
    366
    Đã được thích:
    0
    tốt quá :camon:
  6. peppy

    peppy Wanderer Staff Member Điều hành viên

    Tham gia ngày:
    29/7/12
    Bài viết:
    760
    Đã được thích:
    2
    Bài này có ích nè, cố gắng post thêm nhìu tài liệu hay nữa nha kid ^^
  7. Trẻ con

    Trẻ con . Người đưa tin

    Tham gia ngày:
    30/7/08
    Bài viết:
    780
    Đã được thích:
    63
    Có là share thôi. K cần phải cố gắng =))
  8. phongphupro

    phongphupro New Member

    Tham gia ngày:
    18/6/10
    Bài viết:
    120
    Đã được thích:
    0
    Cám ơn bạn Trẻ Con rất nhiều, chúc ngày mới tốt lành.
  9. c0ngit

    c0ngit New Member

    Tham gia ngày:
    5/1/10
    Bài viết:
    10
    Đã được thích:
    0
    rất đẹp! :D
  10. ldvietle

    ldvietle New Member

    Tham gia ngày:
    16/8/13
    Bài viết:
    7
    Đã được thích:
    0
    cam ơn thớt
  11. danton

    danton Member

    Tham gia ngày:
    8/8/08
    Bài viết:
    30
    Đã được thích:
    0
    rất có ích, cám ơn b nhiều
  12. nguyenhanh028

    nguyenhanh028 New Member

    Tham gia ngày:
    6/10/08
    Bài viết:
    5
    Đã được thích:
    0
    Một kinh nghiệm rất hay!
  13. trantieu

    trantieu New Member

    Tham gia ngày:
    31/8/13
    Bài viết:
    6
    Đã được thích:
    0
    bài viết hay quá!học hỏi dc nhiều thứ
  14. trchinh_it

    trchinh_it New Member

    Tham gia ngày:
    7/1/12
    Bài viết:
    1
    Đã được thích:
    0
    Rất sáng tạo, cảm ơn chủ thớt nhé :)
  15. anhngoc19793

    anhngoc19793 New Member

    Tham gia ngày:
    14/10/14
    Bài viết:
    24
    Đã được thích:
    0
    bài viết rất hữu ích, thanks chủ top nhé
  16. ngxuanthuan

    ngxuanthuan New Member

    Tham gia ngày:
    21/10/14
    Bài viết:
    5
    Đã được thích:
    1
    Thật là sáng tạo, đáng được ngưỡng mộ.
  17. domanhdung

    domanhdung . Điều hành viên

    Tham gia ngày:
    31/7/12
    Bài viết:
    878
    Đã được thích:
    211
    Tuyệt ! Một sự khai tâm, cám ơn em.
    sao mọi người cứ Khen mà không biết nhấn like để động viên nhỉ?
  18. hoakhatech

    hoakhatech New Member

    Tham gia ngày:
    20/10/14
    Bài viết:
    10
    Đã được thích:
    0
    tuyệt vời ông mặt trời
  19. luanknooc

    luanknooc New Member

    Tham gia ngày:
    6/9/13
    Bài viết:
    17
    Đã được thích:
    4
    Quá hay. Cái này đòi hỏi người thiết kế phải rất tinh tế...
  20. comaythangbay

    comaythangbay . Điều hành viên

    Tham gia ngày:
    14/11/11
    Bài viết:
    123
    Đã được thích:
    223
    Bài viết này rất hữu ích đó ạ!

Chia sẻ trang này