Viet' Library

Hơn tất cả những gì bạn có!

Thiết kế web template (p2)

1 – Mở lại file template header đã lưu lại trong phần 1,tìm layer 11 và cho nó hiện trở lại.Mở thêm file tư liệu ( hình phòng làm việc) đã chuẩn bị sẵn,dùng công cụ Move kéo file này thả vào file template và đặt lại vị trí như hình minh họa.Khi đặt file tư liệu “hình phòng làm việc” này vào file template thì Photoshop tự đặt tên cho layer.Trong bài hướng dẫn này,trước khi cho thêm file hình tư liệu vào thì trong bảng layer đã có layer 18 nên khi đặt vào nó sẽ tự động tạo ra layer 19.

 

2 – Nhấn giữ Ctrl đồng thời bấm vào hình thumbnail của layer 19 để load vùng chọn xong chọn Select \ Modify \ Expan với giá trị là 4px.Tiếp theo tạo thêm một layer mới mặc nhiên là layer 20 (layer này phải nằm dưới layer 19,nếu không thì phải bấm Ctrl-[ để chuyển xuống dưới) xong fill màu #f0eeee cho vùng chọn này.Tiếp tục bấm vào nút “Add a layer style” chọn Stroke với các thông số size:1px ; color:#c8c5c5 sẽ có kết quả như sau:

 

3 – Chọn cả hai layer 19 và 20,bấm giữ Alt-Shift đồng thời rê xuống dưới để copy thêm layer như hình minh họa.Vấn đề còn lại là thay hình vừa được copy thành một hình khác,ở đây chỉ là template nên việc đó không cần thiết.
4 – Mở một website ngoại quốc nào đó để copy một đoạn văn bản (ở đây tôi copy một đoạn tiếng Anh mà tôi không hiểu nó có nghĩa gì nữa) xong đặt vào file template đồng thời đặt icon dấu + vào luôn ta được hình như sau:

 

5 – Thực hiện tương tự như bước 2,3,4 để bố trí thêm những ảnh tư liệu khác vào trong template,giai đoạn này chủ yếu là bố cục sắp xếp đối tượng mà thôi,các công cụ cũng như kỷ thuật thì đã trình bày trong các phần trên.

 

6 – Tạo một layer mới,dùng Rectangular Marquee tạo vùng chọn hình chữ nhật xong fill màu #ed7b00 cho vùng chọn cuối cùng bấm Ctrl – D hủy chọn.

 

7 – Bấm Ctrl – T xong click chuột phải vào đối tượng vừa tô màu rồi chọn Skew xong nhấn chuột vào cạnh trên của khung bao chữ nhật và rê sang phải để kéo xiên đối tượng,cuối cùng Enter để thoát lệnh.

8 – Tạo vùng chọn hình chữ nhật như hình minh họa xong bấm phím Delete để xóa đi,sẽ được hình sau

 

Các bạn có thể giữ nguyên như thế hay thu nhỏ đối tượng này lại một ít là tùy ý nhé
9 – Tạo thêm một layer mới,tạo thêm đối tượng hình chữ nhật nhỏ và fill màu vàng #ed7b00 xong copy ra thêm 2 layer nữa,mỗi layer copy ta giảm Opacity xuống một ít sau đó nhập text vào sẽ được hình sau:

 

10 – Tạo thêm một layer mới (trong bài này là layer 30),dùng Rounded Rectangle với Radius :9px vẽ một shape như sau:

 

11 – Bấm Ctrl – Enter xong fill một màu bất kỳ.Tiếp tục chọn “Add a layer style” rồi chọn Radient Oveylay như sau:

12 – Dùng công cụ Text nhập vào các dòng chữ như sau:

13 – Chọn lại layer 30,xong vẽ vùng chọn như hình minh họa:

14 – Bấm Ctrl – J đối tượng sẽ được nhân bản và nằm trong layer 31.Trên bảng layer nhấp nút “create a new layer” sẽ mặc nhiên tạo ra layer 32,sau đó ta chọn cả hai layer 31 và 32 xong bấm Ctrl – E để gộp lại thành một layer sau đó bấm Ctrl – Shift – U.
15 – Dùng công cụ Custom shape và chọn một shape có dạng hình mũi tên xong vẽ một shape như sau:

 

16 – Bấm Ctrl – Enter chuyển path thành vùng chọn xong fill màu #8f8f8f.Bấm Ctrl đồng thời click vào hình thumbnails của layer 32 để load vùng chọn,tiếp theo chọn lại layer 31 và bấm Ctrl – J sẽ tạo ra layer 33,sau đó xòa bỏ layer 32.Tiếp theov tạo thêm một layer mới (layer 34) rồi chọn cả hai layer 33 và 34 xong bấm Ctrl – E và cuối cùng bấm Ctrl – Shift – U

 

17 – Tạo thêm một layer mới,dùng công cụ Pencil vẽ một nét thẳng đứng màu đen xong copy ra làm nhiều bản nữa sẽ được như sau:

 

18 – Cũng tương tự như đã làm ở các phần trên,đưa thêm vào những Logo,text, image để có được kết quả như sau:

cuối cùng chúng ta sẽ có template như sau:


Xem hướng dẫn bằng Video: part 2A Part 2B

Advertisements

Thứ Sáu, 10,Tháng Mười Hai, 2010 - Posted by | Thiết kế Web

Không có bình luận

Trả lờ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

%d bloggers like this: