05
Aug
08

[ PS ứng dụng 1 ] Cách làm banner cho WordPress

Bài học đầu tiên của chuyên mục Photoshop ứng dụng là làm một banner cho wordpress. Như chúng ta đã biết, wordpress cho phép người dùng tự thiết kế themes tuy nhiên không phải ai cũng biết ngôn ngữ CSS dù vẫn muốn có một theme tương đối khác biệt so với những mẫu có sẵn. Có một cách đơn giản là dùng theme sẵn và chỉ thay header image của wordpress.

Ở đây, tôi sẽ hướng dẫn cách làm banner mà Học Photoshop đang sử dụng.

Hình được dùng trong bài có thể down ở đây tạm gọi là Hình 1.

Bước thứ nhất, bạn hãy vào mục My Dashboards -> Design -> Custom Image Header, sẽ xuất hiện những thông tin như hình sau :

Bạn hãy lưu ý dòng : “Images of exactly 730 x 180 pixels will be used as-is.”. “730 x 180” là chiều ngang (730) và chiều cao (180) của header image trong theme bạn đang sử dụng, đây cũng chính là kích thước văn bản ảnh bạn cần tạo trong PS. Tùy mẫu theme bạn chọn mà sẽ có các kích thước khác nhau. Do đó, hãy luôn kiểm tra thông số trước khi bắt tay vào làm.

Bây giờ chúng ta quay về với PS, bạn tạo một văn bản ảnh mới, nhớ chỉnh theo đúng kích thước header image bạn vừa thấy. Tôi thì tạo văn bản ảnh có kích thước 730 x 180 pixels, tạm đặt tên là HPS.

Nhấn phím tắt G hoặc icon Paint Bucket Tool , đổ màu cho nền. Tôi dùng màu đen, mã #000000.

Bước tiếp theo, bạn mở Hình 1 ra. Sử dụng công cụ Rectangular Marquee Tool (hoặc phím tắt M), giữ shift để vùng chọn có hình vuông, chọn một trong các ảnh nhỏ bất kì có trên Hình 1.

Dùng Move tool (hoặc phím tắt V) click vào vùng chọn, giữ chuột, di chuyển sang văn bản ảnh HPS đã có. Khi thả chuột, ta được kết quả như hình sau :

Vào Layer -> Layer Style hoặc click vào biểu tượng trên bảng layer như trong hình, chọn mục Stroke :

Khi hiện ra hộp thoại Layer Style, bạn hãy nhập các thông số sau :

Màu tôi sử dụng ở đây có mã : #342727. Để có màu như vậy, các bạn có thể click chuột vào ô màu (Color) trên hộp thoại để hiện ra bảng lựa chọn rồi nhập số trên vào ô mã :

Sau khi nhập các thông số, ta chọn OK và có kết quả là ảnh vừa ghép đã được viền bằng một đường màu xám sẫm :

Lần lượt lập lại các bước trên để có kết quả tương tự đối với các ảnh ghép tiếp theo. Ở đây, tôi chọn từ trong Hình 1 ra 6 hình nhỏ xếp thành một hàng ngang. Từ trái qua phải, các ảnh ghép 1, 3, 5 được viền stroke màu xám (mã #342727), các hình còn lại gồm 2, 4, 6 thì viền bằng màu đỏ sẫm (mã #770014). Ta có kết quả :

Phần hình ảnh đã xong. Chúng ta bắt đầu vào phần chữ (text).

Chọn công cụ Horizontal Type Tool (phím tắt T), type vào chữ bạn muốn có. Tôi type dòng “HỌC PHOTOSHOP”, màu trắng (mã #ffffff), font Century Gothic, size 45,5. Font này không cho phép type tiếng Việt do đó cần vẽ thêm dấu nặng bằng brush tròn hoặc nhiều cách khác tùy ý bạn.

Text như trên cũng đã tạm ổn nhưng để nó trở nên khác biệt hơn, tôi quyết định thử thay đổi nó một chút. Đây chỉ là một ví dụ nhỏ về việc làm khác biệt text, trong quá trình ứng dụng PS, bạn hãy tự tìm ra thêm nhiều cách sáng tạo khác cho bản thân.

Tôi tạo một layer mới. Nhấn B chọn brush tròn, size 24, màu đỏ sẫm (mã #770014). Dùng brush, vẽ lên trên các chữ O như tôi đã làm :

Vẫn trên layer đó, chọn công cụ Eraser (phím tắt E), dạng brush tròn, size 20, xóa đè lên phần brush vừa vẽ, ta được như hình sau :

Bạn có thể thấy, với 4 hình bán nguyệt đỏ sẫm đơn giản ta đã có một dòng “HỌC PHOTOSHOP” nhìn khác lạ một chút so với mặc định. ^____^

Text chính đã xong, tôi lại nhấn phím T để type text phụ. Text phụ ở đây là https://hocps.wordpress.com, vẫn font Century Gothic, size 16, màu đỏ hồng (mã # cc0022).

Nhấn tổ hợp phím tắt Ctrl + Alt + J 2 lần để có thêm 2 layer giống hệt layer trên, như vậy chúng ta đang có 3 dòng text https://hocps.wordpress.com. Tiếp tục dùng Move tool (phím tắt V) để di chuyển 2 dòng text vừa tạo xuống. Sử dụng công cụ free transform Ctrl + T để kéo dãn lần lượt chúng như sau :

Giảm opacity của hai layer text phụ này lần lượt còn 50% và 27% :

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


Giờ thì bạn chỉ cần save nó dưới định dạng jpg và vào My Dashboards -> Design -> Custom Image Header trong wordpress để upload sản phẩm vừa hoàn thành.

Lưu ý : Các thông số trong bài học hôm nay đều dựa trên background có size 730 x 180 pixels phù hợp với theme đang dùng của Học Photoshop. Nếu bạn sử dụng theme khác, hãy xem xét cẩn thận size của header image trước khi làm và cần nhớ rằng, các thông số về kích cỡ (chữ, hình ảnh) trong bài học do đó cũng cần thay đổi linh hoạt theo cho phù hợp.

——————————————–

Mọi thắc mắc, góp ý về bài học các bạn hãy comment và chúng tôi sẽ hồi đáp sớm nhất khi có thể.

Dương. [ Photoshop Ứng dụng ]


28 Responses to “[ PS ứng dụng 1 ] Cách làm banner cho WordPress”


  1. 1 hhbgr126
    Tháng Chín 12, 2008 lúc 9:52 sáng

    Ủa sao KQ cuối cùng nó kì kì a ơi?

  2. 2 chiemphong
    Tháng Chín 12, 2008 lúc 11:22 sáng

    Cảm ơn em đã comt. Lỗi đó đã được sửa rồi. ^___^

  3. 3 hhbgr126
    Tháng Chín 13, 2008 lúc 2:52 sáng

    E hỏi thiệt nghen mục “My Dashboards” ở đâu dzậy a ???

  4. 4 khoanguyen
    Tháng Chín 19, 2008 lúc 4:13 chiều

    hay lam do… cam? cac anh nha… tui da tim dc thu minh can

  5. 5 pu
    Tháng Chín 23, 2008 lúc 3:56 chiều

    hay lắm a….làm dc ròy…cảm ơn a nha..^^..lâu lâu qên e cũg thườg hay jô xem lại cách a chỉ nà..^^…ths a nhìu nha..^^

  6. 6 chiemphong
    Tháng Chín 24, 2008 lúc 3:27 sáng

    Cảm ơn các bạn đã ủng hộ. ^ ^

    @hhbgr : Em nhìn lên trên cùng của trang wordpress em đang dùng sẽ thấy 1 thanh bar ghi lần lượt : My Account, My Dashboards, New Post, Edit Post.

  7. 7 quangkhanh297
    Tháng Chín 29, 2008 lúc 4:33 sáng

    Thanks ban nhieu lam…trang web nay that su bo ich va co tinh giao duc rat cao! nho cac ban ma nhieu nguoi co the tim toi va hoc hoi ve Photoshop! cam on rat nhieu

  8. 8 quangkhanh297
    Tháng Chín 29, 2008 lúc 4:39 sáng

    Toi hy vong thoi gian toi cac ban co the cho ra duoc chuong trinh hoc cua Photoshop cao cap danh cho nhung nguoi da qua phan co ban vi ben ngoai nhung quyen sach that kho hieu va khong thuc te

  9. 9 Hhbgr
    Tháng Mười 2, 2008 lúc 2:17 sáng

    Em biết rồi , xin lỗi a hen tại e nhầm , cái này làm trong wordpress mà.

  10. 10 baonguyen
    Tháng Tư 17, 2009 lúc 4:57 sáng

    lam sao de co duoc wordpress

  11. 11 chiemphong
    Tháng Tư 17, 2009 lúc 5:33 sáng

    Muốn có wordpress thì đăng kí ở trang chủ wordpress em ạ. Cái này không nằm trong phạm vi của Học Photoshop nên em tự tìm hiểu ở trang chủ của wordpress – http://wordpress.com nhé.

  12. 12 yonpil
    Tháng Tư 22, 2009 lúc 5:31 chiều

    giúp tôi 1 chút , tôi ko tìm thấy mục Design trong Dashboard của tôi , có phải nó bị ẩn ko ? hay phiên bản của tôi ko có , cảm ơn nhiều !

  13. 13 chiemphong
    Tháng Tư 23, 2009 lúc 5:04 sáng

    Có thể theme mặc định bạn chọn không cho phép tự làm banner :)

  14. Tháng Tư 25, 2009 lúc 7:39 sáng

    Bước thứ nhất, bạn hãy vào mục My Dashboards -> Design -> Custom Image Header, sẽ xuất hiện những thông tin như hình sau :

    >>>> Em k hề thấy có cái này mà :(

  15. 15 chiemphong
    Tháng Tư 25, 2009 lúc 11:11 sáng

    Có thể do theme bạn chọn không cho phép thay đổi banner sẵn có. :)

  16. 16 Sự thật và Ảo tưởng
    Tháng Tám 11, 2009 lúc 8:58 sáng

    Nói chung với mình là rất khó. Không phải dân IT nên lần mò lâu quá. Nếu bạn làm cho mình một cái thì hay quá, hihi!

  17. Tháng Mười 4, 2009 lúc 2:52 chiều

    Tại sao banner của bạn nó có chữ động đậy thế? cái banner tớ làm toàn bị cái tên của blog đè thôi, chán lắm, ko có cách nào bỏ cái tên có sẵn được hả bạn?

  18. 18 chiemphong
    Tháng Mười 5, 2009 lúc 2:14 sáng

    Banner hiện tại của Học PS có chữ động do được làm từ Image Ready. :)

    Còn chuyện ẩn tittle sẵn của wordpress thì nó có tùy chọn cho bạn ngay trong mục header đó mà. Bạn xem kĩ xem. :)

    Thân,
    Dương.

  19. 19 Tran Tan Anh
    Tháng Một 14, 2010 lúc 1:00 chiều

    Bài vẽ hình con gà trống đứng dưới ánh mặt trời, tạo một New với 500 rộng và 500 ngang (mode: Gray), sau đó vẽ hình tròn, rồi fill màu vàng, nhưng phần mềm chỉ chấp nhận 2 màu đen và trắng thôi, sau đó tôi tạo lại 1 cái New với mode là Bitmap, cũng như vậy.
    Tôi tạo lại lần nữa và lần lượt chọn 3 cái cuối thì tô màu được, nhưng nó không cho sử dụng bất kỳ công cụ nào cả (mặc dù thầy bảo phải dùng Burn tool hình cái bàn tay).Tôi đang sử dụng Adobe photoshop 7.0. Mong thầy có thể gửi bản Adobe photoshop cs3 (link mediafire) hoặc gửi mail câu trả lời cho tôi. Tôi đã tìm khắp nơi rồi mà không biết bị lỗi gì. Hy vọng thầy có thể giúp được. Cám ơn Thầy.

  20. 20 thanhtam
    Tháng Năm 16, 2010 lúc 3:16 chiều

    rất cảm ơn anh và rất vui vì chương trình này mà em biết thêm và thiết kế tốt hơn

  21. 21 thanhtam
    Tháng Năm 16, 2010 lúc 3:25 chiều

    em muốn hỏi anh thêm được không . em ko biết làm sao để cắt hình cô dâu sang file khác được vì tóc nhỏ nhiều quá.cảm ơn anh nhiều

  22. 22 Monkey
    Tháng Bảy 2, 2010 lúc 7:19 sáng


    Mong bạn có bài chỉ cho mình cách làm banner dạng này

  23. 24 mina
    Tháng Bảy 4, 2010 lúc 10:48 sáng

    nhưng ,bạn ơi! mình không tìm thấy cái phần Edit Post. trong cái wordpress của mình! mình phải làm sao?

  24. Tháng Mười Một 14, 2011 lúc 9:57 chiều

    Cảm ơn bạn rất nhiều, bài viết rầt hữu ích, thanks again!

  25. Tháng Bảy 26, 2012 lúc 2:06 chiều

    không biết có thể tạo banner bằng ảnh động gif không?

  26. Tháng Mười Hai 7, 2014 lúc 1:32 chiều

    mục My Dashboards -> Design -> Custom Image Header ở đâu vậy ad :( mem ko thấy

  27. Tháng Năm 20, 2015 lúc 4:58 chiều

    học PS này có cần phải tải gù về ko ạ??
    e mới vào lần đầu tiên do bạn chỉ cho nên ko rõ lắm ạ


Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s


LƯU Ý

Photobucket

Học Photoshop tại FACEBOOK

Blog Stats

  • 2,552,868 hits

%d bloggers like this: