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à http://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 http://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.
Ở đâ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à http://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 http://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.
Từ Khóa: 
0 nhận xét:
Đăng nhận xét