Thiết kế web template (p1) doc

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. 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: 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 [...]... 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... đượ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 ...đâ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... 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 . 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. 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. 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