Hướng dẫn thiết kế một bản đồ 3D

Nguyên liệu bao gồm: icon, file logo, pattern, brush Bước 1: Mở ảnh cần làm, trong trường hợp này là logo của Việt Designer Bước 2: Sử dụng Pentool P để vẽ lại logo này, sau khi vẽ xon

Hướng dẫn thiết kế một bản đồ 3D cực kì ấn tượng – Phần 1

01/10/2012

Design

Đã lâu lắm rồi mới thấy 1 bài tutorial hay và công phu đến như vậy, đây là đóng góp to lớn của Mod Hưng Trần Văn trêndiễn đàn Designer Việt Nam, chính vì thế mà mình không thể không chia sẻ lên trang chủ Việt Designer để mọi người có thể dễ dàng tham khảo bài tutorial tuyệt vời này

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 đượcbá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

Ở bài tutorial này, Hưng sẽ chia ra làm 2 phần, Phần 1 Hưng sẽ hướng dẫn các bạn cách tạobản đồ 3D địa hình đồng bằng, theo mẫu logo của Việt Designer

Đầu tiên các bạn download bộ nguyên liệu về để thực hành cho bài tutorial này nhé!

(Nguyên liệu bao gồm: icon, file logo, pattern, brush)

Bước 1: Mở ảnh cần làm, trong trường hợp này là logo của Việt Designer

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.

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 ( + )

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

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 2000×2000 pixels, ở đây toàn đường path nên khi resize sẽ không ảnh hưởng.

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ềnFeather radius = 0 > Ok)

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

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

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

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

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 đỏ

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

Và layer 1 là màu xanh lá.

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)

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

khoảng 1 đến 2 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

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

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ớ.

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

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

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.

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

Đây là ảnh tổng thể:

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.

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

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

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:

Kết quả:

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:

Mã màu #282600

Kết quả:

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ố:

Mã màu #4e3c0e

Kết quả:

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

Mã màu #222b08

Kết quả:

Bước 24: Chúng ta cần có 1 Pattern, đầu tiên mở bức ảnh bên dưới (có kèm trong nguyên

liệu), 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

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:

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

Trong Gradient Overlay chọn màu từ Đen > Trong suốt

Cuối cùng chọn Pattern vừa tạo.

Kết quả:

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

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

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

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

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:

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

Kết quả:

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

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

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

Mã màu #3fa1d2

Màu Đen > Trong suốt

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ớ.

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.

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

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)

Kết quả:

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í.

Bước 36: Các bạn lên mạng gõ từ khóa PSD cây và download 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 đã đượcHưng gửi kèm tại bộ nguyên liệu)

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

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

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ộtvài nguyên liệu trong bộ xây dựng mà Hưng sưu tầm được:

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

Bước 40: Tạo 1 hình Shape như sau:

Thiết lập Blending option cho Layer shape mới tạo:

Thêm 1 chút Text.

Và đây là kết quả cuối cùng:

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 tutnà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ồmPattern, Brush và hơn 200 mẫu nhà cửa, xe cộ, cây cối v.v…

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 Designer Việt Namthường xuyên để có thể cập nhật thêm nhiều bài

tut hay

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

Bổ sung thêm tác phẩm của thành viên: Bùi Ngọc Vinh

Chúc các bạn thành công!

Click xem tiếp phần 2 tại đây.

[quote] Hình ảnh đã được mình tối ưu hóa để giúp load nhanh cho nên kích thước và chất lượng có giảm, cho nên bạn nên vào bài viết gốc trên diễn đàn tại đây để có thể xem ảnh chất lượng hơn, cũng như dễ dàng đặt câu hỏi thắc mắc để mod Hưng Trần Văn có thể trả lời các

bạn dễ dàng hơn là hỏi tại đây, nhớ đăng ký thành viên trên diễn đàn để có thể gửi câu hỏi

nhé! Cảm ơn các bạn đã theo dõi bài tutorial này.[/quote]

H ướ ng d n thi t k m t b n ẫ ế ế ộ ả đồ 3D c c kì n t ự ấ ượ ng – Ph n 2 ầ

17/09/2013

Design

Gần 1 năm rồi mình mới đăng phần 2 của bài hướng dẫn thiết kế bản đồ 3D của Hưng Trần Văn Đây thực sự là 1 thiếu xót vô cùng lớn của mình vì quá bận rộn trong việc quản lý diễn đàn Mặc dù phần 2 đã có trên diễn đàn từ rất lâu rồi tuy nhiên để làm đúng nghĩa vụ, hôm nay mình xin đăng tiếp phần 2 lên trang chủ Việt Designer, mời các bạn theo dõi

Sau thành công của bài hướng dẫn tạo bản đồ 3D phần 1, như đã hứa Hưng sẽ tiếp tục hướngdẫn các bạn tạo ra các dạng địa hình mới Ở phần 2 này chúng ta sẽ tạo ra 4 dạng địa hìnhkhác nhau gồm có: băng tuyết, đồng cỏ, sa mạc và hoang mạc

Phần 2 này phải làm tới 4 dạng địa hình nên Hưng sẽ tóm tắt các thao tác cơ bản Chúng ta sẽkhông đi chi tiết như phần 1 chính vì thế muốn làm được phần 2 này thì các bạn có kiến thứccủa bài hướng dẫn đầu tiên Bạn nào chưa học phần 1 thì có thể xem tại linh bên dưới:

Nội dung bạn cần xem đã bị khóa!

Để xem được nội dung bên trong, bạn có thể ấn nút Facebook share, Google Share hay Youtube Subscribe để

mở khóa nhé!

Mong bạn thông cảm vì sự bất tiện này, nhưng thực ra cũng không mất thời gian hay tốn công sức của bạn đâu, nó góp

phần ủng hộ Việt Designer có động lực chia sẻ hơn thôi :D

Bước 2: Tạo thêm 3 bản sao cho layer “Đen” đồng thời chọn các layer đã copy và layer

“Đen” nhấn “Ctrl + G” để gom vào 1 thư mục Chúng ta sẽ đặt tên thư mục là “Map”

Bước 3: Tô màu cho các layer mới copy theo thứ tự “Đỏ” “Xanh dương” “Xanh lá” Ở đây

Hưng đã đổi tên layer theo màu cho dễ nhớ

( Bước 9 đến bước 10 của phần 1 )

Bước 4: Tạo hình dạng 3D cho bản đồ Thao tác này làm y chang như phần 1

( Bước 10 đến bước 17 của phần 1 )

Bước 5: Nhấn chuột phải vào layer ” Xanh lá “ chọn Blending option và thiết lập các thông

số như sau:

Mã màu #7b939e

Kết quả:

Bước 6: Nhấn chuột phải vào layer ” Xanh dương “ và thiết lập Layer Style với các thông

số

Mã màu #6d838c

Kết quả:

Bước 7: Chúng ta tiếp tục nhấn chuột phải vào layer ” Đỏ “ và thiết lập Layer Style với các

thông số

Mã màu #a2bcc7

Kết quả:

Bước 8: Các bạn mở bức ảnh này và tạo Pattern từ bức này ( Edit > Difine pattern )

Bước 9: Nhấn chuột phải vào layer ” Đen “ và thiết lập Layer Style với các thông số

Màu từ trắng đến trong suốt

Chọn Pattern mà chúng ta vừa tạo lúc nãy

Kết quả:

Bước 10: Nhân đôi thư mục “Map” chúng ta sẽ có thư mục “Map copy” Các bạn xóa thông

số layer style trong thư mục “Map copy” bằng cách nhấn chuột phải vào các layer và chọn ”

Clear Layer style”

Bước 11: Nhấn chuột phải vào thư mục “Map copy” và chọn “Merge Group” để chuyển nó

thành 1 layer, đồng thời kéo nó xuống dưới layer “Đen” của thư mục “Map”

Bước 12: Nhấn chuột phải vào layer “Map copy” và thiết lập Layer style như sau

Chúng ta sẽ chọn Pattern vân gỗ( Pattern này đã được tạo ở phần 1 các bạn có thể xem lại bước 29 của phần trước, hoặc ở cuốibài tut sẽ có link down cho các bạn )

Kết quả:

Thêm 1 chút nguyên liệu trang trí cho sinh động ( Nguyên liệu này đã được chia sẻ ở phần 1 )

Vậy là chúng ta đã biết cách tạo thêm 1 dạng địa hình mới khá dễ thương cho những ngàymùa đông Bây giờ chúng ta sẽ tiếp tục đến với dạng địa hình thứ 2

B: ĐỊA HÌNH SA MẠC

Bước 13: Để tiết kiệm thời gian chúng ta không cần phải tạo lại từ đầu Thay vào đó các bạn

chỉ cần thay đổi Layer style của các layer trong thư mục “Map” Để các bạn dễ nhìn thấy sự thay đổi Hưng sẽ xóa layer style của các layer “Đen” “Đỏ” “Xanh dương” và “Xanh

lá” Hưng tạm thời ẩn layer “Map copy” chúng ta vẫn sẽ dùng layer này cho dạng địa hình

mới

Bước 14: Nhấn chuột phải vào layer “Xanh lá” và thiết lập Layer style như sau

Mã màu #4d4531

Kết quả:( Xin lỗi các bạn do chụp quá nhiều ảnh nên có chút sơ xót, cái layer “Đen” Hưng vẫn bật conmắt nhưng các bạn không thấy layer đó là do Hưng đã thiết lập Opacity cho nó là 0% Cáinày không ảnh hưởng gì hết Hưng giải thích để các khỏi thắc mắc tại sao con mắt vẫn bật màkết quả lại không bị che bởi layer “Đen” )

Bước 15: Các bạn nhấn chuột phải vào layer “Xanh dương” và thiết lập Layer style

Mã màu #685627

Kết quả:

Bước 16: Tiếp tục thiết lập cho layer “Đỏ”

Kết quả:

Bước 17: Tạo Pattern từ bức hình này ( Edit > Difine pattern )

Bước 18: Nhấn chuột phải vào Layer “Đen” chọn blending option và thiết lập thông số

Màu từ trắng > trong suốt

Chọn Pattern mà chúng ta vừa tạo

Kết quả: Ở đây Hưng đã bật con mắt của layer “Map copy”.

Tiếp tục trang trí để hoàn thiện tác phẩm

C: ĐỊA HÌNH ĐỒNG CỎ

Bước 19: Chúng ta tiếp tục xóa layer style trong thư mục “Map” để thiết lập lại các thông số

cho dạng địa hình mới giống như bước 13 Ở đây chỉ có một chút khác biệt đó là Hưng đã

thay đổi nền Background sang ban đêm

Bước 20: Bắt đầu từ layer “Xanh lá” với các thông số

Mã màu #2d3a27

Kết quả:

Bước 21: Tiếp theo đến layer “Xanh dương”

Mã màu #6a531a

Kết quả :

Bước 22: Thiết lập cho layer “Đỏ” gồm

Mã màu #1f3d01

Kết quả:

Bước 23: Tạo Pattern từ bức này ( Edit > Difine pattern )

Bước 24: Cuối cùng là đặt thông số Blending option cho layer ” Đen “

Màu từ trắng > trong suốt

Màu: Đen > Trong suốt

Chọn Pattern vừa tạo

Mã màu: #557600

Kết quả: Ở đây chúng ta sẽ thay đổi Opacity cho layer ” Map copy “ lên 85%

Cuối cùng là bước trang trí

D: ĐỊA HÌNH HOANG MẠC

Bước 25: Chúng ta tiếp tục với dạng địa hình cuối cùng Vẫn như những thao tác trước các

bạn hãy xóa Layer style trong thư mục “Map”

Bước 26: Các bạn tiếp tục nhấn chuột phải vào layer ” Xanh lá ” chọn Blending option với

các thiết lập

Mã màu #4d4531

Kết quả mà chúng ta vừa tạo ra

Bước 27: Blending option cho layer ” Xanh dương “

Mã màu #685627

Với địa hình này thì chỉ cần thiết lập Color Overlay là đủ, và đây là kết quả

Bước 28: Tiếp tục thiết lập Color overlay cho layer “Đỏ”

Mã màu #776945

Kết quả cho layer “Đỏ”

Bước 29: Tạo Pattern từ tấm ảnh này

Bước 30: Bây giờ chúng ta sẽ thiết lập Blending option cho layer “Đen”

Màu từ trắng > trong suốt

Chọn Pattern chúng ta vừa tạo

Mở con mắt của layer “Map copy” và chỉnh Opacity 65%

Và đây là kết quả cuối cùng của chúng ta, một mảnh đất trơ trọi

Nếu thích chúng ta sẽ trang trí cho nó sinh động 1 tí

Vậy là cuối cùng chúng ta cũng hoàn thành 2 phần của bài tut thiết kế bản đồ 3D Qua nhữngbài tut này các bạn có thể thấy rằng chỉ cần kết hợp tốt các layer style là chúng ta sẽ tạo rađược nhiều hiệu ứng đẹp Thay đổi các layer style phù hợp là các bạn có thể sáng tạo thêmnhiều dạng địa hình khác nhau Hy vọng rằng qua bài hướng dẫn này các bạn sẽ có thêm chomình nhiều kinh nghiệm và yêu thích Photoshop hơn

Một phần nữa không thể thiếu đó chính là nguyên liệu cho các bạn gồm 1 bộ 5 Pattern đã sửdụng trong bài tut Còn nguyên liệu trang trí thì các bạn hãy down tại bài hướng dẫn đầu tiênhoặc có thể tự tìm thêm cho mình những nguyên liệu mới từ 1 số trang web icon bên dướinhưng có lẽ là không được bao nhiêu vì Hưng đã gom gần hết vào bộ nguyên liệu trướcrồi

Mọi thắc mắc về bài hướng dẫn này, các bạn click vào đây để gửi thắc mắc nhé!