Gốc > Kho Code, thiết kế website, học tin học > Thiết kế trang Web >

Làm banner trong suốt bằng Photoshop


Trông cái banner này thế nào? Cũng khá dễ thương đấy chứ nhỉ?=> Thế thì cùng bắt tay làm ra nó nha
Điều kiện cần: Photoshop cs đã được cài trong máy các bạn!
Bạn muốn có 1 banner thật độc đáo với nền trong suốt, nền mờ ảo hay 1 hình dạng banner thật độc đáo ...nhưng chưa biết gì cả về PTS cs cả? Điều đó không thành vấn đề nếu đọc kỹ và làm theo những bước đơn giản sau:

Bật PTS, nhấn tổ hợp phím "Ctr+N", tạo 1 file mới với kích thước (tùy theo kích cỡ banner bạn muốn) - ở đây Ruby chọn là: 800x230 px (hình 1)

(1)
=> banner mới xuất hiện như sau:

(2)

Bạn nhấn F7 để xuất hiện Palette: Layers, nhấp đôi vào ô được viền đỏ như hình sau:
(3)

=> Sẽ xuất hiện hộp thọai :"New layer", chọn OK
(4)
=> Kết quả:
(5)

Tiếp tục :Chọn công cụ bên trái (trên thanh công cụ tool):
(6)  (ô được viền xanh)

Chọn công cụ trên thanh công cụ ngang :(ô viền đỏ), chú ý các thông số thiết lập như hình (7), nhấn D (để
Foreground Color ở mặc định)

(7)

Nhấp vào biểu tượng hơi giống ngôi sao 5 cánh có góc bo tròn (để đưa ra danh sách) sát ô có hình tam giác nhỏ: => Xuất hiện 1 list các công cụ (chọn chế độ thumbail để nhìn rõ từng hình)
(8)

Sau khi chọn hình vừa ý (ở đây Ruby chọn hình bông tuyết), bạn vẽ 1 hình thật cân đối lên nền ảnh vừa tạo: (như hình vẽ 9):
Bên khung layer sẽ xuất hiện như sau:
(9)

Dùng công cụ chọn (Move tool), trên thanh công cụ bên trái, để di chuyển hình ảnh mới vẽ ra góc trái cho cân đối:
(10)

Tiếp tục nhấn vào thẻ "Paths" như hình dưới, sẽ nhìn thấy "Shape 1 vector Mask", bạn nhất chuột phải và ô viền đỏ (hình 11), chọn Make a selection:
(11)

Sau khi nhấn make selection: sẽ xuất hiện hộp thọai như sau:
(12)
Bạn chọn "New Selection" (thay vì "Add to Selection do hình R chụp lúc chưa chọn
"New Selection") và nhấn OK.

Sau khi đã tạo được vùng chọn (quan sát thấy 1 đường nhấp nháy bao quanh hình vừa vẽ lên, bạn nhấn thẻ "Paths" (13)
(13)
và nhấn phím Detele để xóa hình đó đi (chỉ để lại vùng chọn).

Sau đó, bạn chọn thẻ Layers, nhấp vào layer 0, vào "Edit" (thanh công cụ trên cùng), chọn "Fill", hộp thọai xuất hiện (bạn chọn Foreground Color để tô vùng chọn màu đen, đảm bảo là lúc này giá trị màu
Foreground Color để mặc định là đen)
(14)

Sau khi tô đen nền đã chọn xong, bạn copy hình vừa chọn ra thành 4 hình (nhấp vào thẻ Layers, sau đó nhấn Ctrl +J: khoảng 3 lần để tạo thêm nhiều Layers giống với hình đã vẽ - hình 15), dùng công cụ "Move Tools"(10) (hoặc nhấn V) như nói ở trên, di chuyển sắp xếp các hình sao cho hợp lý như hình (15)

(15)

Sau đó ta gộp các hình này lại vào 1 Layers bằng cách chọn layers trên cùng, rồi nhấn tổ hợp phím : Ctrl +E, lays gộp lại như sau:

(16)

Chọn công cụ Magic Wand Tools (hoặc nhấn W) trên thanh công cụ phía bên trái màn hình:
(17)
Dùng công cụ này, nhấp vào nền đen trên hình vừa chọn, sẽ tạo được 1 vùng chọn bao quanh các hình bông tuyết như sau:

(18)

Vào menu "Edit" trên thanh công cụ ngang rồi chọn "Fill" , hộp thọai xuất hiện bạn chọn White để tô trắng vùng chọn.
Bạn tiếp tục => nhấn tổ hợp phím Ctrl +shilf + I (để đảo ngược vùng chọn) sau đó => nhấn phím Detele (để xóa đi vùng chọn vừa bị đảo ngược): Kết quả như sau: (19)
(19)

Bạn có thể kéo giá trị Opacity (độ mờ đục) trên Palette layers xuống khoảng 50% để hình xuất hiện có độ mờ vừa đủ, hoặc kéo xuống 0 nếu muốn trong suốt hòan tòan (ở đây Ruby kéo xuống 50%):
(20)

Ta tiếp tục công việc trang trí thêm cho Banner, bằng cách viết chữ xác nhận bản quyền lên nó ():
(21)

Chọn công cụ Horizontal Type Tools (nhấn phím T) ở thang công cụ bên trái, kéo và tạo 1 khoảng trống trên nền bông tuyết:( có thể chỉnh kiểu chữ, màu sắc và độ lớn):
(22)
Viết xong 1 chữ, nhấp vào layer chữ mới tạo ra, chọn tiếp công cụ đó và viết chữ lên nền bông tuyết.
Bạn nhấp đôi vào layer type vừa mới tạo ra (hoặc nhấp vào biểu tượng fx: Add a layer style trên palette layers) => sẽ xuất hiện hộp thọai:
Nhấp vào ô viền đỏ chọn Style và nhấn OK, ở đây Ruby chọn Style như hình 23:
(23)
Kết quả sau đó:
(24)

Tiến hành save ảnh, bạn chọn File=> save as (hoặc nhấn Shilf + Ctrl+ S), xuất hiện hộp thoại:
(25)

Lưu ý: muốn áp dụng độ trong suốt cho banner, cần lưu dưới dạng file png hoặc gif.
(26)
(Ở đây Ruby lưu dạng png, xuất hiện hộp thọai trên (26), bạn chọn Interlaced và nhấn OK.
Vậy là bạn đã hòan thành việc tạo 1 banner thật dễ thương, bi giờ ta cùng chiêm ngưỡng sư xuất hiện của nó:



Hãy click vào  Rubylight
cùng chiêm ngưỡng cái banner này thực tế ra sao nào^^!

Theo Ruby's blog


Nhắn tin cho tác giả
Nguyễn Hữu Điệp @ 06:37 03/03/2012
Số lượt xem: 3558
Số lượt thích: 0 người
Avatar

Làm banner trong suốt bằng Photoshop

Avatar
TVM gia nhập trang, chúc thầy thật vui nhé!
Avatar
Chúc thầy buổi tối đầu tuần vui vẻ
Avatar
TVM xin gia nhâp trang
 
Gửi ý kiến