Thiết kế web template (p1)

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...
Nội dung trích xuất từ tài liệu:
Thiết kế web template (p1) 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ố giaodiện website mà tôi đã tạo ra bằng Photoshop.Để giúp cácbạn sử dụng các công cụ của Photoshop thành thạohơ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ỉ trongphạm vi một bài viết nên tôi sẽ tách ra làm nhiềuphần.Trong bài này tôi sẽ trình bày cùng các bạn cách tạora phần header của một trong số các template đã giới thiệutrướ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àorằ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àolà 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ếmthông tin là một vấn đề đáng quan tâm.Ngày nay phần lơncá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ểntừ PSD template sang HTML,CSS thì chúng ta phải nénhình ảnh xuống đến một dung lượng nhỏ nhất có thể nhưngvẫn giữ được chất lượng hình ảnh là cao nhất để web pagecó thể hiển thị nhanh nhất đồng thời cũng tiết kiệm đượcbăng thông (cũng là tiết kiệm tiền).Dạo qua một số web sitegiới thiệu sản phẩm thấy có nhiều bức ảnh chụp sao upvậy không hề xử lý lại cho phù hợp.Có những file chỉ cầnxem trên trình duyệt (web browser) với kích thước nhỏ thôinhưng vẫn up lên full size,điều này ảnh hưởng khá lớn đếntốc độ hiển thị trang web cũng như lãng phí rất lớn về băngthông.Còn rất nhiều vấn đề khác cần phải quan tâm khithiết kế một website,nhưng thôi,đó là việc của những ngườilàm thiết kế, lập trình.Ở đây việc của chúng ta là dùngPhotoshop để 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 saophả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ànhì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ỏivùng hiển thị nội dung của trình duyệt web (webbrowser) thì trình duyệt sẽ tự sinh ra thanh trượt dọc chophép chúng ta xem hết nội dung của trang web.Nói chungkích thước của template chúng ta thiết kế khi vượt quá giớihạn 1024 x 768 thì trình duyệt sẽ tự sinh ra thanh trượtngang 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ạitrượ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 thanhtrượt khoảng 19px (không cố định cho tấc cả các trìnhduyệ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ơn1000px thì khoảng dư 2 bên phải và trái càng lớn,điềunày không cần thiết.2 - Tạo một layer mới,dùng công cụ Rectangular Marqueetạo vùng chọn (như hình minh họa).Trên thanh côngcụ,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 chovù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ọncông cụ Rounded Rectangle (U), trên thanh tùy chọn nhậpgiá 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 dichuyể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ùngchọ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,tuynhiên việc cung cấp cách sử dụng nhiều công cụ khác nhaulà 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ọnStroke 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.com9 - 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 stylechọn Gradient Overlay như sau:11 - Bấm phím V xong bấm giữ Alt-Shift và rê đối tượnghình tròn này sang phải để nhân bản thêm một nút trònnữa sau đó, trên bảng layer, giảm Opacity của nút nàyxuống còn khoảng 70%.Tiếp tục copy thêm một layer nữavà 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ỉnhsử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ượngchữ T ngay bên trái tên layer,xong chỉnh lại thông số màutrê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 ảnhnhư 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 sangvà đặ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ọnStroke như sau:14 - Mở file tư liệu cờ VN và cờ EN xong đặt vào filetemplate15 - 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 layerINTERIOR DECO chọn Rasterize Type để chuyển textthà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 đượcnữa vì nó đã được bitmap hóa rồi và biểu tượng chữ Ttrên layer cũng không còn nữa.17 - Phóng to file ảnh lên,dùng công cụ RectagularMarquee tạo v ...