siriusblack
Admin
Tổng số bài gửi : 167
Join date : 18/08/2010
 |  Tiêu đề: thiết kế web template!!  Mon Jan 10 2011, 07:22 | |
| Lần trước mình đã post một bài hướng dẫn thiết kế web vs photoshop, hi vọng sẽ có bạn qua tâm. Hôm nay mình xin post tiếp một bài do mình sưu tầm đc vs nội dung tương đối hoàn chỉnh và dễ hiểu, nếu bạn đã đọc rồi thì mình ko nói còn nếu bạn chưa đọc thi mình hi vọng nó sẽ có ích. 
Mình xin trích nguyên văn:
1 - Tạo một file mới với kích thước width:1000px, height: 800px, độ phân giải 72pixels/inch, màu nền là trắng.Tại sao phải chọn bề rộng là 1000px mà không là 900 hay 1100? Ở đây chúng ta sẽ design một template theo độ phân giải màn hình là 1024 x 768.Chiều cao của trang trong khi thiết kế thì chúng ta không cần quan tâm vì nếu nó vượt ra khỏi "vùng hiển thị nội dung" của trình duyệt web (web browser) thì trình duyệt sẽ tự sinh ra thanh trượt dọc cho phép chúng ta xem hết nội dung của trang web.Nói chung kích thước của template chúng ta thiết kế khi vượt quá giới hạn 1024 x 768 thì trình duyệt sẽ tự sinh ra thanh trượt ngang và dọc để chúng ta có thể xem toàn bộ nội dung.Để tránh trường hợp khi xem web mà phải trượt ngang rồi lại trượt dọc chúng ta phải khống chế kích thước ngang (width) sao cho nó nhỏ hơn 1024px.Bề rộng của thanh trượt khoảng 19px (không cố định cho tấc cả các trình duyệt) vì vậy chúng ta dùng kích thước ngang 1000px là tương đối phù hợp rồi.Nếu kích thước ngang càng nhỏ hơn 1000px thì "khoảng dư" 2 bên phải và trái càng lớn,điều này không cần thiết.
2 - Tạo một layer mới,dùng công cụ Rectangular Marquee tạo vùng chọn (như hình minh họa).Trên thanh công cụ,nhấp chuột vào hộp màu Foreground chọn lại màu có mã là #814a07, sau đó bâm Alt-Delete để tô màu này cho vùng chọn,ta được như sau:
3 - Bấm Ctrl - D để hủy vùng chọn nếu nó vẫn còn.Chọn công cụ Rounded Rectangle (U), trên thanh tùy chọn nhập giá trị Radius khoảng 90 xong vẽ một shape như hình sau:
4 - Bấm Ctrl - Enter chuyển path thành vùng chọn xong di chuyển nó lên phía trên như sau:
5 - Tạo một layer mới (layer 2), chọn màu foreground là #3e2200 xong bấm Alt-Delete để tô màu này cho vùng chọn, cuối cùng bấm Ctrl - D để hủy chọn sẽ có kết quả như sau:
Bạn cũng có thể dùng Pen để tạo ra đối tượng như trên,tuy nhiên việc cung cấp cách sử dụng nhiều công cụ khác nhau là nhiệm vụ của tôi,còn sử dụng công cụ nào nhanh và phù hợp là do các bạn tự chọn.
6 - Chọn lệnh Filter \ Noise \ Add noise như sau:
7 - Trên bảng layer,nhấp vào nút "Add a layer style" chọn Stroke như sau:
8 - Chọn màu Foreground là #814a07,chọn công cụ Horizontal Type và nhập vào dòng text: ww.hocpsd.com
9 - Trên bảng layer,nhấp nút "add a layer style" chọn Bevel & Emboss như sau:
10 - Tạo một layer mới,dùng công cụ Eliptical Marquee vẽ vùng chọn hình tròn xong click nút "Add a layer style" chọn Gradient Overlay như sau:
11 - Bấm phím V xong bấm giữ Alt-Shift và rê đối tượng hình tròn này sang phải để nhân bản thêm một "nút tròn" nữa sau đó, trên bảng layer, giảm Opacity của nút này xuống còn khoảng 70%.Tiếp tục copy thêm một layer nữa và giảm Opacity xuống còn 50% ta được kết quả như sau:
Đến đây nếu thấy dòng chữ www.hocpsd.com (hay bất kỳ dòng chữ nào của bạn) hơi bị "chìm" chúng ta có thể chỉnh sửa màu lại ngay lập tức.Trên bảng layer,tìm đến layer có tên là www.hocpsd.com và nhấp đúp chuột vào biểu tượng chữ T ngay bên trái tên layer,xong chỉnh lại thông số màu trên thanh tùy chọn,có thể là màu #cd7102 chẳng hạn.
Trong khi thiết kế chắc chắn chúng ta phải cần những hình ảnh làm tư liệu,ở đây tôi đã chuẩn bị sẵn một số hình ảnh như cờ VN, cờ Anh, hình nội thất để làm tư liệu.
12 - Mở file hình nội thất lên,rê thả sang file template sang và đặt nó vào vị trí cân đối như sau:
13 - Trên bảng layer,nhấp nút "Add a layer style" chọn Stroke như sau:
14 - Mở file tư liệu cờ VN và cờ EN xong đặt vào file template
15 - Chọn công cụ Horizontal Type nhập vào dòng chữ INTERIOR DECO màu trắng như sau:
16 - Trên bảng layer,click chuột phải vào layer "INTERIOR DECO" chọn Rasterize Type để chuyển text thành "đối tượng text",kể từ bây giờ chúng ta không thể dùng công cụ Type (T) để chỉnh sửa lại dòng chữ này được nữa vì nó đã được "bitmap hóa" rồi và biểu tượng chữ T trên layer cũng không còn nữa.
17 - Phóng to file ảnh lên,dùng công cụ Rectagular Marquee tạo vùng chọn hình chữ nhật bao quanh ký tự I và D như sau:
18 - Bấm Ctrl - X để tách (cut) ký tự I và D ra khỏi layer,sau đó bấm Ctrl - V để paste trở lại,lúc này I và D sẽ nằm trên một layer riêng.Dùng công cụ Move (V) di chuyển I và D về vị trí cũ của nó.Nói thì dài dòng nhưng thực chất của bước này là tách 2 ký tự I và D ra một layer riêng để xử lý mà thôi.Bấm giữ Ctrl đồng thời nhấp chuột vào hình thumbnails của layer này trên bảng layer để load vùng chọn.Trên thanh công cụ chọn lại màu Foreground là #1777c1 xong bấm Alt - Delete để fill màu này cho vùng chọn,ta có hình sau:
Trên đây là một rong những cách làm và tôi cũng muốn giới thiệu thêm một lệnh dùng để chuyển text thành "đối tượng text",khi còn là text chúng ta có thể chỉnh sửa nội dung,font chữ,size chữ màu chữ.......bằng lệnh Type.Nhưng khi đã "bitmap hóa" rồi thì không thể chỉnh sữa bằng công cụ T được nữa mà chỉ có thể xử lý như một đối tượng mà thôi.
Chúng ta cũng có thể làm cách khác như sau:
Sau khi hoàn thành bước 15,ta có dòng chữ INTERIOR DECO màu trắng (tạm thời dùng font Arial,Bold,size 30). Sau khi nhập Text xong,dùng công cụ T chọn riêng ký tự đầu tiên I và đổi màu nó thành #1777c1,đổi size thành 48.Tiếp theo cũng đổi màu chữ và size của chữ D tương tự như trên sẽ có kết quả như sau:
19 - Trên bảng layer,nhấp vào nút "Add a layer style" chọn drop shadow như sau:
20 - Tạo thêm một layer mới,dùng công cụ Eliptical Marquee vẽ vòng tròn khoảng 18px,fill màu xanh #1777c1 cho vùng chọn này xong chọn lệnh Select \ Modify \ Contract và nhập vào giá trị Contrac by là 3px xong bấm phím Delete ta được hình sau:
Để tạo bóng đỗ cho đối tượng vừa tạo này giống hệt bóng đổ của dòng chữ"INTERIOR DECO" một cách nhanh chóng chúng ta dùng cách copy Layer Style.Trên bảng layer,chọn lại layer "INTERIOR DECO" xong click chuột phải vào tên layer và chọn Copy Layer style sau đó click chuột phải vào Layer 8 (layer chứa đối tượng dấu chấm của chữ I tạo ra trong bước 20) và chọn Paste Layer Style,ta được hình sau:
21 - Cũng làm tương tự như thế để tạo ra dòng chữ "interior decoration and design Co.,Ltd" như hình sau:
22 - Tiếp theo tạo dòng chữ About, Contact, Rigister như sau:
23 - Chọn công cụ Custom Shape và chọn một shape như hình minh họa,chọn màu foreground là màu trắng xong vẽ đối tượng như hình bên dưới (các bạn có thể vẽ bất cứ nơi đâu trong file template sau đó move nó về vị trí mong muốn)
24 - Chọn công cụ Move,bấm giữ Alt-Shift và rê đối tượng này xuống dưới để tạo ra thêm 2 bản copy nữa
25 - Chọn công cụ Rounded Rectangle (U) với các thông số trên thanh tùy chọn là Radius: 9px; color: #a65e07 vẽ đối tượng như hình sau:
26 - Nhấp nút "Add a layer style" trên bảng layer chọn Stroke với các thông số như sau:
27 - Tạo một layer mới, chọn màu foreground là #b97c2d,dùng công cụ Rectangular Marquee tạo vùng chọn hình chữ nhật và fill màu như sau:
28 - Mở file tư liệu hình kính lúp và rê đối tượng này sang file template đặt vào vị trí như hình minh họa:
29 - Tạo một layer mới,dùng công cụ Rounded Rectangle với các thông số trên thanh tùy chọn là Radius:25px; shape là Path (thay vì shape layers) rồi vẽ một shape như hình minh họa:
30 - Bấm Ctrl - Enter,chọn màu Foreground là #f0eeee và fill màu này cho vùng chọn,sẽ được hình như sau:
31 - Trong khi layer 11 vẫn đang được chọn (trong bài hướng dẫn này,layer 11 là layer chứa đối tượng đã được tô màu #f0eeee được tạo ra trong bước 29,30) bấm giữ Ctrl và click chuột vào hình thumbnail của layer 1 để load lại vùng chọn như hình sau:
32 - Bấm Ctrl - J để nhân bản layer,sẽ tạo ra layer 12.Nhấp chuột vào nút "Add alayer style" trên bảng layer chọn Radient Overlay với các thông số như hình minh họa bên dưới.Tạm thời ẩn layer 11 này đi (nhấp vào biểu tượng hình con mắt ngay bên trái layer 11) kết quả như sau:
33 - Tiếp tục dùng công cụ T nhập vào dòng chữ "Home page Products My account...."
34 - Mở các file tư liệu đã chuẩn bị sẵn sau đó lần lượt đặt vào file template các nút icon như sau:
35 - Tạo một layer mới,chọn công cụ Pencil với đường kính nét vẽ là 1px,bấm phím D sau đó vẽ một nét thẳng đứng như sau:
36 - Chọn lệnh Filter \ Blur \ Motion Blur như sau:
37 - Copy ra nhiều layer nữa ta được như sau:
38 - Cuối cùng nhập vào dòng chữ Bring back to you a morden space hay câu gì đó cũng được.Đến đây xem như chúng ta đã hoàn thành phần header của template.Lưu file lại dưới dạng .PSD để lần sau tiếp tục thực hiện phần còn lại của template.
hì, mới được có một nữa, hôm nào mình sẽ post tiếp....
| |
|
bosap
 Được thanks : 
Tổng số bài gửi : 51
Join date : 11/09/2010
Tuổi : 30
Đến từ : ToanK7.NET
| | Tiêu đề: Re: thiết kế web template!! Mon Jan 10 2011, 21:14 | |
| Tut cực kỳ chi tiết  Hôm nào dạy anh pts với :"> | |
|
Trang Chính 
Portal 
Đăng ký 
Đăng Nhập 
Calendar
