Thứ Hai, ngày 13 tháng 9 năm 2010

Thiết kế web template (p1)

Trong bài trước tôi đã giới thiệu với các bạn một số giao diện website mà tôi đã tạo ra bằng Photoshop. Để giúp các bạn sử dụng các công cụ của Photoshop thành thạo hơn, chúng ta sẽ từng bước tạo lại các template đó.Thật khó có thể trình bày một cách cụ thể, chi tiết quá trình thiết kế hoàn chỉnh một giao diện website (web template) chỉ trong phạm vi một bài viết nên tôi sẽ tách ra làm nhiều phần.Trong bài này tôi sẽ trình bày cùng các bạn cách tạo ra phần header của một trong số các template đã giới thiệu trước đây.

header,thiet ke website
Theo thiển kiến của tôi, thực ra việc phân nhóm header, body, footer của một website nhằm để dể dàng quản trị, thiết kế hay lập trình chứ không có một sự bắt buộc nào rằng một website (gồm một hay nhiều web page) phải có đầy đủ các yếu tố đó.Việc thiết kế "bộ mặt" website thế nào là do người thiết kế, tuy nhiên bố trí các đối tượng thế nào để người vào xem web có ấn tượng tốt và dể dàng tìm kiếm thông tin là một vấn đề đáng quan tâm.Ngày nay phần lơn các kết nối internet là ADSL, chỉ còn một số ít sử dụng đường truyền Dial up nên tốc độ hiển thị một web page khá nhanh nên có thể thỏa sức sáng tạo.Tuy nhiên khi chuyển từ PSD template sang HTML, CSS thì chúng ta phải nén hình ảnh xuống đến một dung lượng nhỏ nhất có thể nhưng vẫn giữ được chất lượng hình ảnh là cao nhất để web page có thể hiển thị nhanh nhất đồng thời cũng tiết kiệm được băng thông (cũng là tiết kiệm tiền). Dạo qua một số web site giới thiệu sản phẩm thấy có nhiều bức ảnh "chụp sao up vậy" không hề xử lý lại cho phù hợp. Có những file chỉ cần xem trên trình duyệt (web browser) với kích thước nhỏ thôi nhưng vẫn up lên full size, điều này ảnh hưởng khá lớn đến tốc độ hiển thị trang web cũng như lãng phí rất lớn về băng thông. Còn rất nhiều vấn đề khác cần phải quan tâm khi thiết kế một website, nhưng thôi, đó là việc của những người làm thiết kế, lập trình.Ở đây việc của chúng ta là dùng Photoshop để thiết kế giao diện web, nhưng vì muốn tâm sự một vài ý kiến cá nhân nên tôi mới "nói nhiều" như thế,chúng ta cùng trở lại vấn đề của mình.

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:

template,thiet ke web template3 - 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:

template,thuoc ve thiet ke website4 - 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:

hinh minh hoa web template5 - 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:

hinh minh hoa phan header cua website
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:

add noise,minh hoa cho website7 - Trên bảng layer, nhấp vào nút "Add a layer style" chọn Stroke như sau:

tao stroke,thiet ke border cho website8 - 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

them text,tao giao dien website,thuoc ve thiet ke web9 - Trên bảng layer,nhấp nút "add a layer style" chọn Bevel & Emboss như sau:

them style,trang tri web10 - 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:

them style,thuoc ve tu hoc thiet ke website11 - 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:

giao dien web bang photoshop
Đế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:

hinh noi that,trang tri web13 - Trên bảng layer, nhấp nút "Add a layer style" chọn Stroke như sau:

tao stroke,tao border cho body14 - Mở file tư liệu cờ VN và cờ EN xong đặt vào file template

mau template,tao new template15 - Chọn công cụ Horizontal Type nhập vào dòng chữ INTERIOR DECO màu trắng như sau:

add text,tao van ban cho website16 - 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:

clone stamp,thuoc ve hoc photoshop18 - 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:

add picture,giao dien web depTrê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:

them text,bo sung chuc nang cho website19 - Trên bảng layer, nhấp vào nút "Add a layer style" chọn drop shadow như sau:

hinh minh hoa style moi cho website20 - 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:

add tect cho web pageĐể 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:

them text, tao noi dung cho website21 - 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:

text 7,tu hoc thiet ke web22 - Tiếp theo tạo dòng chữ About, Contact, Rigister như sau:

text 8,thuoc ve hoc photoshop thiet ke web23 - 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)

chuan thiet ke websitetao shape trong photoshop
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

shape 4,tao border tron cho object25 - 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:

tao shape moi,tao giao dien website26 - 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:

stroke,tao border bang photoshop27 - 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:

select,tao vung chon trong photoshop cs228 - 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:

zoom anh,tao footer cho website29 - 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:

tao shape photoshop30 - 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:

shape 2,tao web button31 - 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:

anh minh hoa,bai hoc thiet ke web layout32 - 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:

finish web layoutweb layout33 - Tiếp tục dùng công cụ T nhập vào dòng chữ "Home page Products My account...."

web template34 - 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:

pic 6,web footer35 - 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:

web final36 - Chọn lệnh Filter \ Blur \ Motion Blur như sau:

finish web template37 - Copy ra nhiều layer nữa ta được như sau:

website finishing38 - 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.

web final
Xem thêm hướng dẫn bằng Video (no sound) tại đây
Dowd load các file tư liệu dùng thiết kế template này tại đây

10 Ý kiến:

Snow bà già bé nói... [Reply]

Admin nè! Anh có thể up những bức hình dùng trong bài để mọi ng tải về và dùng trong bài thực hành đc k?

admin nói... [Reply]

Dĩ nhiên là được rồi BA GIA BE à, đã up rồi đó.

mrluan nói... [Reply]

Hay quá

Phuong Hai nói... [Reply]

anh admin ơi sao em làm cái chỗ cắt I và D xong dán lại mà ko được. nó biến đi đâu mất ý

admin nói... [Reply]

Nó không mất đâu em,nó nằm ở giữa file đó,em dùng công cụ Move rê nó sang nơi khác hay bấm Ctr ] để dời nó lên trên sẽ thấy thôi

CoXanh nói... [Reply]

website rất bổ ích. cảm ơn admin nhiều

Thành Công nói... [Reply]

Chào Admin, đây là lần đầu tiên mình ghé thăm trang web này, nên chưa tìm hiểu được gì nhiều, nhưng cho mình góp một vài ý kiến. Đầu tiên là cú pháp gõ văn bản của bạn có một lỗi rất căn bản là sau dấu phẩy "," không có dấu cách. Thứ hai là mình thấy giao diện này hơi lãng phí không gian, với một bài viết dài (như bài viết này chẳng hạn) 2 phần bên sẽ rất trống và phần main lại quá nhiều khiến cho người đọc phải kéo con trỏ rất nhiều lần.
Ngoài ra mình thấy trên trang web có một vài mục đặt banner for free, bạn có sẵn lòng cho mình gửi một banner được không?

Hoàng Anh Vũ nói... [Reply]

Rat hay ! cam on .

Nien Tran Phu nói... [Reply]

cảm ơn bạn, chúc diễn đàn sẽ lớn mạnh nhờ vào những bài viết chất lượng và những thành viên năng động, tích cực

thuốc lá điện tử nói... [Reply]

đã có p2 chưa vậy ad

ĐỂ LẠI Ý KIẾN CỦA BẠN:

Hãy để lại thắc mắc, ý kiến đóng góp của bạn, xin viết tiếng Việt có dấu để tôn trọng người xem và cũng đừng Spam.