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.

[ Tut ] Thiết kế bản đồ 3D "P1 đồng bằng"

Chủ đề thuộc danh mục 'Thiết kế' được đăng bởi Hưng Trần Văn, 9/9/12.

Lượt xem: 18,728

  1. Hưng Trần Văn Cựu quản trị

    Cách thiết kế bản đồ 3D được tạo bởi tác giả với nick name Orange_Box, hiệu ứng này được bán tại graphicriver.net dưới dạng một Action. Ngoài ra đi kèm với hiệu ứng này là hai bộ nguyên liệu Map icon, chỉ tính riêng 1 bộ với 90 nguyên liệu phiên bản extended đã có giá trên 5 triệu. Đây là giá khá cao và không phải ai trong chúng ta cũng sẵn sàng bỏ ra mua.

    Sau một thời gian tìm hiểu và tham khảo từ action Hưng đã tìm được cách thiết kế loại bản đồ này, tuy cách làm có hơi khác nhưng kết quả so sánh là giống nhau hoàn toàn.
    Phần 1 Hưng sẽ hướng dẫn các bạn cách tạo bản đồ 3D địa hình đồng bằng, theo mẫu logo của diễn đàn.

    Bước 1: Mở ảnh cần làm, trong trường hợp này là logo của diễn đàn
    [​IMG]

    Bước 2: Sử dụng Pentool ( P ) để vẽ lại logo này, sau khi vẽ xong các bạn tô màu trắng Layer Background vì chúng ta đã có đường Path không cần đến mẫu logo ban đầu nữa
    [​IMG]

    Khi vẽ bằng Pentool các bạn cần lưu ý, phần Path bên ngoài các bạn chọn chế độ Add to path area ( + )
    [​IMG]

    Phần path bên trong chọn chế độ Subtract from path area ( - ) chế độ này khi load vùng chọn nó sẽ bỏ phần bên trong
    [​IMG]

    Bước 3: Chúng ta nên làm việc với kích thước lớn vì thế Hưng sẽ resize lên 2000x2000 pixels, ở đây toàn đường path nên khi resize sẽ không ảnh hưởng.
    [​IMG]

    Bước 4: Các bạn load vùng chọn cho đường path sau đó tạo layer mới tô màu đen cho layer này, tô xong nhấn Ctrl + D để bỏ vùng chọn.
    ( Cách load vùng chọn từ Path: mở bảng Paths > chuột phải vào layer chứa path > chọn Make selection > điền Feather radius = 0 > Ok )
    [​IMG]

    Bước 5: Thiết lập Gradient Editor như trong hình
    [​IMG]

    Bước 6: Các bạn chọn Layer Background và kéo 1 đường Gradient để làm nền
    [​IMG]

    Bước 7: Chọn layer 1 nhấn Ctrl + T để Transform, nhớ giữ thêm phím Ctrl khi kéo các điểm của logo.
    [​IMG]

    Bước 8: Chọn Layer 1 nhấn Ctrl + J bốn lần để tạo thêm 4 bản sao, layer cuối cùng các bạn đặt tên là Shadow các layer còn lại đặt theo thứ tự 1,2,3,4 cho dễ nhớ. Sau đó chọn tất cả layer nhấn Ctrl + G để gom toàn bộ vào 1 thư mục và đặt tên thư mục là Map
    [​IMG]

    Bước 9: Trước khi đến thao tác quan trọng chúng ta sẽ làm 1 mẹo nhỏ. Các bạn Giữ phím Ctrl và click vào layer 3 để load vùng chọn, sau đó tô vùng này bằng màu đỏ.
    [​IMG]

    Làm tương tự cho layer 2 nhưng tô nó với màu Xanh dương
    [​IMG]

    Và layer 1 là màu xanh lá
    [​IMG]

    Bước 10: Chúng ta sẽ chọn 1 góc nào đó của bản đồ, và tạo 1 đường Guide để xác định. ( Bước này các bạn có thể bỏ qua )
    [​IMG]

    Bước 11: Đây là thao tác quan trọng nhất của bài tut, chúng ta sẽ chọn layer 3 và kéo xuống 1 pixels.
    Chú ý : các bạn kéo theo chiều đi xuống đừng để lệch sang 2 bên, đường guide sẽ giúp chúng ta xác định kéo thẳng hay không
    [​IMG]

    Bước 12: Nhấn Ctrl + J để nhân đôi layer 3, sau đó tại Layer 3 copy các bạn lại tiếp tục kéo xuống dưới khoảng 1 đến 2 pixels. Các bạn cứ lặp lại bước này cho đến khi tạo được độ dày cần thiết.
    [​IMG]

    Bước 13: Sau khi lặp lại bước 12 nhiều lần và có được độ dày như trong hình các bạn chọn tất cả những layer đã copy nhấn Ctrl + E để gom vào 1 layer duy nhất. Hãy đặt lại tên Layer 3 để dễ nhớ[​IMG]

    Đây là hình tổng thế mà chúng ta vừa làm, logo đã bắt đầu ra dáng 3D
    [​IMG]

    Bước 14: Tiếp tục chọn Layer 2 và kéo xuống dưới khoảng 1 pixels
    [​IMG]

    Bước 15: Chúng ta cũng lại copy và lại kéo xuống để có độ dày của lớp thứ 2
    [​IMG]

    Bước 16: Đây là lớp trung tâm vì thế chúng ta phải làm dày hơn
    [​IMG]

    Đây là ảnh tổng thể
    [​IMG]

    Bước 17: Tạo độ dày tương tự với layer 1 chúng ta sẽ có 1 logo 3D hoàn hảo
    [​IMG]

    Bước 18: Giữ Ctrl và click vào Layer Shadow để load vùng chọn, hiện tại layer này nằm cùng vị trí với layer 4
    [​IMG]

    Bước 19: Kéo layer Shadow xuống sát mép Layer 1
    [​IMG]

    Bước 20: Nhấn chuột phải vào layer Shadow chọn Blending option tại mục Drop Shadow thiết lập như trong hình
    [​IMG]

    Kết quả
    [​IMG]

    Bước 21: Chúng ta nhấn chuột phải vào Layer 1 và thiết lập các thông số như sau
    [​IMG]

    [​IMG]

    [​IMG]

    Mã màu #282600
    [​IMG]

    Kết quả
    [​IMG]

    Bước 22: Tiếp tục nhấn chuột phải vào Layer 2 chon Blending option và thiết lập các thông số
    [​IMG]

    Mã màu #4e3c0e
    [​IMG]

    Kết quả
    [​IMG]

    Bước 23: Tiếp tục chọn Blending option cho Layer 3 với thông số
    [​IMG]

    [​IMG]

    Mã màu #222b08
    [​IMG]

    Kết quả
    [​IMG]

    Bước 24: Chúng ta cần có 1 Pattern, đầu tiên mở bức ảnh bên dưới sau đó vào Edit > Define pattern. Một bảng hiện ra các bạn đặt tên cho Pattern và nhấn ok

    [​IMG]


    Bước 25: Bây giờ chúng ta nhấn chuột phải vào Layer 4 thiết lập Blending option như sau
    [​IMG]

    Trong Inner Glow thiết lập màu từ Trắng > Trong suốt
    [​IMG]

    [​IMG]

    [​IMG]

    Trong Gradient Overlay chọn màu từ Đen > trong suốt
    [​IMG]

    Cuối cùng chọn Pattern vừa tạo
    [​IMG]

    Kết quả
    [​IMG]

    Bước 26: Nhân đôi thư mục Map. Tại thư mục Map copy các bạn xóa Layer Shadow và toàn bộ các thiết lập Blending option của layer 1,2,3,4
    [​IMG]

    Bước 27: Chọn thư mục Map copy nhấn chuột phảo chọn Merge Group để gom nó thành 1 layer
    [​IMG]

    Bước 28: Kéo Layer Map copy mà chúng ta vừa Merge xuống dưới Layer 4
    [​IMG]

    Bước 29: Chúng ta sẽ dùng hình này và tạo Pattern cho nó
    [​IMG]

    Bước 30: Nhấn chuột phải vào Layer Map copy chọn Blending option và thiết lập như sau
    [​IMG]

    Chọn Patern mà chúng ta vừa làm lúc nãy
    [​IMG]

    Kết quả
    [​IMG]
    Bước 31: Chọn công cụ Pentool vẽ như trong hình, nhớ đặt chế độ vẽ là Shape layers
    [​IMG]

    Bước 32: Các bạn thiết lập Blending Option cho Layer Shape 1 như sau
    [​IMG]

    [​IMG]

    Thiết lập màu từ Trắng > Trong suốt
    [​IMG]

    [​IMG]

    [​IMG]

    Mã màu #3fa1d2
    [​IMG]

    Màu Đen > Trong suốt
    [​IMG]

    Kết quả chúng ta đã có 1 cái hồ khá đẹp: Ở đây Hưng đã được đổi tên Layer Shape 1 thành Lake để dễ nhớ
    [​IMG]

    Bước 33: Các bạn vẽ 1 Shape mới để tạo con sông với các thiếp lập Blending option giống như bước 32. Sau đó cho 2 layer này vào 1 thư mục
    [​IMG]

    Bước 34: Tạo Layer mới sử dụng Brush Mây để tạo 1 đám mây như trong hình
    [​IMG]

    Bước 35: Nhấn chuột phải vào Layer Mây thiết lập Blending Option như sau. Bước này để tạo bóng cho mây
    [​IMG]

    Kết quả
    [​IMG]

    Làm thêm vài đám mây nữa, mặt trời bạn dùng Brush ánh sáng để tạo. Sau khi tạo xong nhớ gom tất cả vào 1 thư mục để dễ quản lí
    [​IMG]

    Bước 36: Các bạn lên mạng gõ từ khóa .PSD cây và down một số mẫu cây mình thích kéo nó vào tài liệu đang làm, nhớ thu nhỏ và tạo thêm chút bóng ( Các mẫu cây này sẽ được Hưng gửi kèm tại bộ nguyên liệu bên dưới )
    [​IMG]

    Bước 37: Nhân Layer cây này lên nhiều lần để tạo 1 rừng cây
    [​IMG]

    Bước 38: Thêm 1 vài mẫu cây và núi chúng ta sẽ có kết quả bên dưới. Ở đây Hưng sử dụng thêm 1 số nguyên liệu trong bộ Map icon
    [​IMG]

    Chúng ta sẽ cần thêm 1 số mẫu nhà cửa, bảng chỉ dẫn để hoàn thành nốt bản đồ. Đây là một vài nguyên liệu trong bộ xây dựng mà Hưng sưu tầm được
    [​IMG]

    Bước 39: Kéo các nguyên liệu mà các bạn thích vào bản đồ, cái nào chưa có bóng thì các bạn thêm chút Shadow cho nó. Sau khi xong gom vào 1 thư mục
    [​IMG]

    [​IMG]
    Bước 40: Tạo 1 hình Shape như sau[​IMG]

    Thiết lập Blending option cho Layer shape mới tạo
    [​IMG]

    [​IMG]

    [​IMG]

    [​IMG]

    Thêm 1 chút Text
    [​IMG]

    Và đây là kết quả cuối cùng
    [​IMG]

    Các bạn có thể tạo hiệu ứng này với nhiều dạng bản đồ khác nhau. Điều quan trọng của bài tut này đó thao tác chuyển từ dạng 2D sang 3D. Ngoài ra các bạn cũng cần có riêng cho mình 1 bộ nguyên liệu. Hưng sẽ cung cấp cho các bạn bộ nguyên liệu mà Hưng có được bao gồm Pattern, Brush và hơn 200 mẫu nhà cửa, xe cộ, cây cối v.v...

    Link download nguyên liệu của bài tut​
    ( 17.7 mb )​
    Chọn Tệp > Tải xuống để download file​
    Vậy là chúng ta đã hoàn thành xong phần 1 của bài tut thiết kế bản đồ 3D dạng đồng bằng. Và đương nhiên là sẽ có phần 2 với các dạng bản đồ như tuyết, đồng cỏ, sa mạc, v.v... Các bạn hãy tham gia diễn đàn thường xuyên để có thể cập nhật thêm nhiều bài tut hay từ Vietdesigner.net
    Dưới đây là một số mẫu bản đồ Hưng thiết kế với thao tác tương tự cũng như những bản đồ chúng ta sẽ học ở phần 2

    [​IMG]


    [​IMG]


    [​IMG]


    [​IMG]

    [​IMG]
    ________________________________________________________​
    Chúc các bạn thành công :)


    Đã có phần 2 các bạn có thể xem tại linh bên dưới​

    ___________________________________________

    Crocslee, 2ndFACE, A3ersxSOnes82 người khác thích bài viết này.
  2. Hổ Báo VietDesigner

    Hổ Báo VietDesigner Huyền Thoại VietDesigner

    Tem tem tem ....
    -Quá đẹp - Tuyệt vời - Kỳ công - Hướng dẫn rất chi tiết bằng Hình ảnh :D
    -Quá chuẩn luôn - có thể đưa vào Sách Giáo Khoa được :))
    Thank nhiệt tình Mod Hưng Trần Văn :x
  3. Valentino102a4

    Valentino102a4 Thành viên cấp 2

    bookmark khẩn cấp để nghiên cứu dần :D lâu lắm mới có bài tut hay như thế này
    Filbert Huynh thích bài viết này
  4. PichPich

    PichPich Thành viên cấp 2

    Tuyệt vời ông mặt trời :-bd
    Trần Thành Lợi thích bài viết này
  5. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Cái này nhất quyết là phải đăng lên trang chủ Việt Designer! 1 bài tut cực hay :)

    Đề nghị ấn nút Thích nhiệt tình để ủng hộ mod Hưng Trần Văn nào :-bd
  6. Night_Fury

    Night_Fury Mới đăng kí

    Trên cả toẹt vời :x
  7. b0yHN_96

    b0yHN_96 Thành viên tích cực

    bá đạo quá :)) tks bác phát
  8. TylerKid

    TylerKid Về hưu

    Tia chop xanh, Hưng Trần VănPhạm Hữu Dư thích bài viết này.
  9. hiroki

    hiroki Thành viên cấp 2

    good job :D
    Tia chop xanh thích bài viết này
  10. cuongbenki

    cuongbenki Thành viên cấp 2

    awesome, i can't stand anymore to shout "AWESOME". hihi
    Trần Đức HiềnTia chop xanh thích bài viết này.
  11. boyplay

    boyplay Thành viên cấp 2

    lên iconarchive.com để tìm thêm hàng ngàn icon free về thực hiện :D
    Vũ Tiến Hải, Tia chop xanhngttam thích bài viết này.
  12. Hưng Trần Văn

    Hưng Trần Văn Cựu quản trị

    Hưng đã lục tung trang web này với 2 trang nữa tuy số icon nhiều nhưng phù hợp cho map 3d thì rất ít. Tất cả đều nằm trong bộ nguyên liệu này, các bạn không cần mất công tìm lại đâu :)
    Tia chop xanh thích bài viết này
  13. boyplay

    boyplay Thành viên cấp 2

    Hj, thêm icon khác cho phong phú a. ^^!
    Tia chop xanhHưng Trần Văn thích bài viết này.
  14. Đoàn_Whinny

    Đoàn_Whinny Thành viên cấp 2

    Quá tuyệt,Mai thử thiết kế cái xóm mình coi :D
    Võ Duy KườngTia chop xanh thích bài viết này.
  15. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Chắc phải tổ chức 1 cái Battle dành riêng cho bài tutorial này quá :x
    Vũ Tiến Hải, Tia chop xanhvonmquocthai thích bài viết này.
  16. Hưng Trần Văn

    Hưng Trần Văn Cựu quản trị

    Còn phần 2 nữa với nhiều bất ngờ hãy cứ đợi đấy :))
    Tia chop xanh, PichPichPhạm Hữu Dư thích bài viết này.
  17. TylerKid

    TylerKid Về hưu

    Hưng thử iconfinder chưa :) nhiều icon 3D đẹp lắm
    Tia chop xanh thích bài viết này
  18. Hưng Trần Văn

    Hưng Trần Văn Cựu quản trị

    Trang đó Hưng cũng tìm hết rồi hầu như tất cả các trang web down icon đều giống nhau cả, tác giả họ up nguyên 1 bộ, lâu lâu mới có 1 mẫu mới
    Tia chop xanh thích bài viết này
  19. toanlove371

    toanlove371 Thành viên cấp 2

    Hay kinh lên được. Phải làm ngay và luôn:))
    Tia chop xanh thích bài viết này
  20. Nguyễn Tất Thắng

    Nguyễn Tất Thắng Rất là bình thường

    Trời ơi, quá đẹp luôn! Phải thử ngay mới đc!
    Tia chop xanh thích bài viết này

Ủng hộ diễn đàn