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. Vào ngày 25/11/2018 sắp tới đây sẽ diễn ra 1 buổi offline cả 4 miền Bắc - Trung - Nam - Tây nhân dịp Việt Designer tròn 7 tuổi với rất nhiều quà từ nhà tài trợ, dự là sẽ rất hấp dẫn. Chi tiết về buổi offline và cách thức đăng ký click xem tại đây nhé!
    Loại bỏ thông báo

[Tut-English] Hướng dẫn tạo biểu tượng Super Man bằng Ps + Ai

Chủ đề thuộc danh mục 'English tutorial' được đăng bởi Trần Thành Lợi, 15/8/13.

Lượt xem: 12,513

  1. Trần Thành Lợi Thành viên cấp 3

    Chào mọi người, lâu quá mình không post bài :)
    Hôm nay mình xin giới thiệu 1 tut của blog Abduzeedo, là 1 blog rất hay - Abduzeedo.com.
    Vì mình dỡ tiếng anh, và đây cũng là 1 tut hơi khó nên mình không dám dịch ra, mong mem nào rành về AI thì dịch cho các mem nhé>
    Vào đề luôn :
    Công cụ gồm có : IllustratorPhotoshop ( mình dùng CS5 )
    Thời gian : 2 tiếng ( mình dỡ nên 2 tiếng là phải các mem ạ :'( )

    Tutorial đã có người dịch rồi nhé, kéo xuống dưới xem nha :D

    Sản phẩm[​IMG]Và tiện thể khoe luôn cái sản phẩm của mình ^^ , như đã nói là mình dỡ nên đừng có ném đá, mình ném lại ráng chịu hihi
    [​IMG][ Vì đây là topic khoe sản phẩm và cũng là tut nên em không biết post vào đâu, mong mod xem và di chuyển giúp :), Thanks Mods ]

    Hồng Sơn, Radium, The_End6 người khác thích bài viết này.
  2. Phạm Hữu Dư

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

    Nếu e đã làm được thì sao ko dịch luôn đê, coi như đã chia sẻ thì chia sẻ cho chót nào :v :v
    Khánh T, RadiumTrần Thành Lợi thích bài viết này.
  3. Furin

    Furin Thành viên cấp 3

    Các TUT này quen quá:D
    Trần Thành Lợi thích bài viết này
  4. Desth

    Desth Thành viên cấp 1

    cái "pháo bông" ở hình dưới làm kiểu gì ấy ạ :D
  5. mgr

    mgr Cựu quản trị

    Uầy :D đẹp, ủng hộ cho em trai :like: dịch làm gì, em viết tut theo kiểu của em làm ra tác phẩm đi :v :v
    Trần Thành Lợi thích bài viết này
  6. JusTa Khôi

    JusTa Khôi Thành viên cấp 3

    Dịch tut luôn đê anh khói ơi =))
    Trần Thành Lợi thích bài viết này
  7. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

    Nếu vậy thì copy cả tut vào đây luôn,. post vào tut eng thì cần gì sub :-bd
    Trần Thành Lợi thích bài viết này
  8. Trần Thành Lợi

    Trần Thành Lợi Thành viên cấp 3

    :( Nhiều mem kêu mình dịch ra, nhưng có những bước trong tut mà mình ko làm được nên phải thủ công tô màu khá lâu ạ :)
    Hứa khi nào làm được hết thì dịch luôn hihi
    Cám ơn các mem ^^
    Desth : Cái đó mình tìm trên google từ khóa "hiệu ứng chữ tóe lữa" cũng trên 4rum mình nè, down file psd về lấy cái layer đó là dc :)
    Đoilơ ViệtDesignerDesth thích bài viết này.
  9. Thanh Hóa

    Thanh Hóa Thành viên cấp 1

    làm hẳn cái tut đi bác :3
    Trần Thành Lợi thích bài viết này
  10. Nguyễn Tuấn Anh

    Nguyễn Tuấn Anh Thành viên cấp 2

    Trần Thành Lợi thanks bạn share tut nhé. Mình đang vọc AI, c.chắn sẽ làm bài này của bán. Bạn không dịch à, mình xin phép bạn dịch bài này nhé :D.
    Trần Thành LợiBienspring thích bài viết này.
  11. The_End

    The_End Thành viên cấp 1

    *Ông ta - người viết tut - bảo là ổng vừa xem Super Man và nó làm ông nhớ về tuổi thơ tươi đẹp [​IMG]

    Tut dịch xong rồi nè ~

    nói trước là hơi bị dài nhá :v
    Bước 1. Illustrator
    Tạo 1 cái biểu tượng hình cái khiên với Pen Tool trong Illustrator, sử dụng viền màu đỏ với độ dày vừa phải và bo góc cho tròn tròn một xíu.
    [​IMG]

    Bước 2. Illustrator
    Bây giờ dùng Pen Tool để vẽ chữ S. Bạn cũng có thể xài luôn cái logo có sẵn dưới này
    [​IMG]

    Bước 3. Illustrator
    Nếu bạn chú ý thì sẽ thấy có vài chi tiết ở giữa chữ S, thiệt ra cũng không cần thiết lắm vì sau này sẽ vẽ thêm bằng Photoshop, nhưng nếu bạn rảnh thì có thể dùng Pen Tool.
    [​IMG]

    Bước 4. Illustrator
    Vào Effect > 3D > Extrue & Bevel Options.
    Chỉnh thông số của Angle -4 độ, 0 độ 0 độ.
    Của Perspective120 độ.
    Depth 35px.
    [​IMG]

    Bước 5. Illustrator
    Bỏ phần trên của khối đi (còn lại cái bóng thì phải), đổi nó thành màu xám, rồi vào Object > Expand.
    Vào tiếp Window > Pathfinder. Chọn Unite cho phần Shape Mode.
    Giờ thì nó đã gom lại thành một "cục" :v
    [​IMG]

    Bước 6. Photoshop
    Tạo 1 file mới, cỡ 2880 x 1800 pixels (bự ghê hen, tha hồ soi :v)
    Đổ nền Gradient với kiểu màu trắng ở giữa - màu đen ở ngoài (chế độ Radial)
    [​IMG]

    Bước 7. Photoshop
    Copy cái "cục" hồi nãy ở bên Illustrator qua bên này.
    Cái này quan trọng nè, nhớ bỏ những thứ này vào layer riêng :
    - 1 layer cho phần khối 3D
    - 1 layer cho phần logo màu đỏ
    - 2 layers cho cái đám vàng vàng
    nhìn như này...
    [​IMG]

    Bước 8. Photoshop
    Chọn 1 chi tiết màu vàng, vào Layer > Layer Styles.
    Trong phần Bevel & Emboss, điền thông số giống như trong hình :
    [​IMG]

    Bước 9. Photoshop
    Trong phần Inner Glow, chỉnh giống dưới này luôn
    [​IMG]

    Bước 10. Photoshop
    Cái cuối cùng (nhưng ít quan trọng nhất =="), chỉnh phần Drop Shadow như này
    [​IMG]

    Bước 11. Photoshop
    Giờ thì bạn có cái hình giống như này, chỉnh mấy thứ linh tinh như trên là để thêm mấy cái viền màu trắng "đầy tinh tế" với cái bóng ở dưới
    [​IMG]

    Bước 12. Photoshop
    Gom mỗi layer lại, bỏ vào trong 1 thư mục ("folder" - hình như ý tác giả là nhóm chúng vào 1 Group)
    Vào Layer > Layer Mask > Reveal All.
    Sử dụng Brush Tool, dùng brush màu đen, nhẹ để chấm vào vài chỗ như trong hình để xóa bớt vài chi tiết
    [​IMG]

    Bước 13. Photoshop
    Dùng 1 cái brush "cứng" hơn, vẽ vào giữa hình một chút nét đậm. Thoạt nhìn thì ta thấy có vài loại khác có chi tiết tựa tựa nhau.
    Cứ vẽ đi rồi chút nữa chỉnh sau.
    [​IMG]

    Bước 14. Photoshop
    Thêm 1 layer khác phía trên logo màu đỏ (có cả chữ S và hình cái khiên), gom vào chung 1 Group.
    Dùng tiếp 1 brush nhẹ, vẽ vài vùng đen đen (màu đen khoảng 20% thôi)
    [​IMG]

    Bước 15. Photoshop
    Chọn layer có logo màu đỏ, vào Layer > Layer Style. Chọn phần Bevel & Emboss, chỉnh giống thế này
    [​IMG]

    Bước 16. Photoshop
    Chỉnh cái Contour giống thế này
    [​IMG]

    Bước 17. Photoshop
    Chỉnh Inner Shadow để tăng độ "sáng chói" lên
    [​IMG]

    Bước 18. Photoshop
    Quất thêm cái radial gradient trong phần Gradient Overlay (ở chế độ Multiply)
    [​IMG]

    Bước 19. Photoshop
    Giờ bạn cũng có thể thêm vài mảng đen cho nó "ngầu", nhưng nếu đã làm xong hết mấy bước trên thì đại loại nó cũng tựa tựa thế này
    [​IMG]

    Bước 20. Photoshop
    Tới giờ thêm texture ròi. Chọn Layer 3D, vào Layer > Layer Style, chọn tiếp Color Overlay, chọn màu vàng.
    Tiếp theo cứ đặt texture kim loại lên trên layer này.
    (Texture kim loại thì lên Google tìm đại 1 cái bự bự về xài cho đã, chứ tác giả bảo vào Shutterstock mà mình thì chả có acc trong đó :3
    bạn nào có acc thì có thể tham khảo tìm Metal plate steel background. Hi res texture by R-studio nhá)

    Tiếp theo, nếu dùng MAC thì giữ phím Command, còn dùng Windows thì giữ phím Control, click chuột trái vào cái hình thumbnail nhỏ nhỏ chỗ layer 3D để nó tự chọn vùng.
    Sau đó chọn layer texture rồi bỏ vô group logo đỏ, chọn group đó rồi tiếp tục tới trình đơn Layer > Layer Mask > Reveal Selection.
    Lúc này thì chỉ nhìn thấy cái logo màu đỏ thôi.
    Chọn Blend Mode của group là Multiply
    [​IMG]

    Bước 21. Photoshop
    Thêm 1 layer mới nữa, bỏ nó vào group riêng, lặp lại bước hồi nãy nhưng phải chắc rằng làm xong thì chỉ thấy cái logo thôi.
    Đổi Blend Mode thành Color Dodge, sau đó chấm vài chấm trắng bằng brush nhẹ, độ trong suốt khoảng 30% để nó đừng "trắng quá nhìn không ra" :v
    [​IMG]

    Bước 22. Photoshop
    Trưa nóng dịch tới chỗ này thấy mệt rồi mà nhìn lại mới có 2 phần 3 [​IMG]
    Tiếp...
    Lặp lại công đoạn ở bước 21, nhưng lần này chúng ta sẽ thêm bóng vào.
    Blend Mode : Linear Burn cho cả group.
    Dùng Lasso Tool khoanh vùng tứ giác theo 1 - 2 - 3 - 4
    [​IMG]

    Bước 23. Photoshop
    Chọn cái layer 3D rồi nhân đôi nó lên (Ctrl + I), rồi trộn 2 đứa nó lại, đổ nền đen cho tụi nó, di chuyển nó xuống chút xíu để tạo bóng và đến Filter > Blur > Gaussian Blur, cho Radius10px, chế độ Multiply, độ trong suốt 80%.
    [​IMG]

    Bước 24. Photoshop
    Thêm 1 cái texture khác nữa (Google tiếp thôi, còn thích chơi sang thì lên Shutterstock tìm Metal background by Phiseksit)
    Blend Mode Soft Light
    [​IMG]

    Bước 25. Photoshop
    Nhân đôi cái layer texture lên, đem nó lên trên mấy cái layers khác, tạo một vùng khoanh tròn quanh logo thôi (Ctrl + click thumbnail), rồi vào Layer > Layer Mask > Reveal Selection. Để Blend Mode ở chế độ Overlay.
    [​IMG]

    Bước 26. Photoshop
    Giờ lại thêm 1 cái texture nữa, lần này tác giả Google sẵn cho mình rồi, đây, rất tiện http://www.texturex.com/Metal-Textures/TextureX steel texture shiney piece metal silver camo pattern Texture.jpg.php
    copy nó rồi để lên trên các layers khác, chỉnh Blend Mode thành Soft Lightopacity 70%
    [​IMG]

    Bước 27. Photoshop
    Xin thề đây là cái texture cuối cùng :v
    http://fc00.deviantart.net/fs50/f/2009/262/3/f/Scratched_Steel_Texture_by_AaronDesign.jpg
    lại giống cái trên, để trên cùng và Blend Mode Soft Light
    [​IMG]

    Cho chốt 1 phát cuối :
    Thêm 1 cái layer mới, để Blend Mode ở chế độ Linear Dodgeopacity80%
    Sau đó dùng brush vẽ 1 vùng sáng màu trắng trên đầu logo.
    Vậy là đã xong cái logo sịp đỏ của anh Super Man, nhìn rất đẹp, bỏ công ngồi lâu cũng đáng mà *chấm nước mắt ~
    [​IMG]

    Tác giả đã làm sẵn rồi nè, ai thích vọc vạch gì cứ tự nhiên (tại vì không phải của mình :v) :
    http://imgs.abduzeedo.com/files/tut...bol_in_Illustrator___Photoshop/Sample.psd.zip
    Runningman, Sun, Radium5 người khác thích bài viết này.
  12. Trần Thành Lợi

    Trần Thành Lợi Thành viên cấp 3

    The_End : Bạn có thể giải thích thêm về Bước 5 không ? Vì mỗi bước đó mà mình không dám dịch ra vì không làm được :)
    Bỏ phần khối đi bằng cách nào ?
  13. The_End

    The_End Thành viên cấp 1

    Trần Thành Lợi thật sự là mình chưa từng đụng tới Illustrator nhưng theo cách mình hiểu là như này :
    tới bước 5, bạn sẽ có 2 phần,
    - phần logo sịp đỏ 2D
    - phần nổi 3D
    trong bước này sẽ ẩn phần logo 2D,
    sau đó là làm phần nổi 3D chuyển thành màu xám đều (do khi tạo khối 3D nó đã tự đổ bóng đậm nhạt sẵn)
    và mở rộng phần này thêm (Expand)
    bạn test thử xem được không

    nhân dịp đây tải AI về phá mới được ;))

    Phạm Hữu Dư Admin có biết về Illustrator chỉ cho em với bạn ấy phần này phát đi :v nếu xác nhận đúng thì em sẽ sửa phần bài dịch lại.
    Trần Thành Lợi thích bài viết này
  14. Trần Thành Lợi

    Trần Thành Lợi Thành viên cấp 3

    The_End : mình vừa test, ko được.
    Nếu ẩn shape logo đi thì cái bóng đổ 3D cũng bị ẩn theo @@ thua luôn
  15. The_End

    The_End Thành viên cấp 1

    Chắc tối nay phải tải về vọc liền mới được :))

    Trần Thành Lợi mình nghĩ nó cũng khá đơn giản thôi... nếu không có Illustrator thì mình "fake" bằng Photoshop, vừa tiện lại vừa không hại não :v
    Trần Thành Lợi thích bài viết này
  16. Trần Thành Lợi

    Trần Thành Lợi Thành viên cấp 3

    The_End : Thì mình fake = pts chổ đó đó hehe, chỉ là nó ko giống lắm thôi ^^
  17. The_End

    The_End Thành viên cấp 1

    Haha... đạt được mục đích bằng mọi công cụ :))
    hôm qua tải AI rồi, mai vọc thử xem "lão" "khó tính" cỡ nào :D
    sẵn tiện dịch vài TUT lấy điểm với sếp :))
    Trần Thành Lợi thích bài viết này
  18. Trần Thành Lợi

    Trần Thành Lợi Thành viên cấp 3

  19. Hồng Sơn

    Hồng Sơn Helper

    The_End Sao không lập riêng một topic viết có phải không? Tut ngay trong topic của người khác mình thấy không hay 8-|
    Trần Thành Lợigoal thích bài viết này.
  20. The_End

    The_End Thành viên cấp 1

    Trần Thành Lợi thích bài viết này

Ủng hộ diễn đàn