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.
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.
0 nhận xét: