Hướng Dần Thiết Kế Trang Web 2.0 trong Photoshop (phần 1) Trong hướng dẫn này, bạn sẽ học từng bước, từng bước cách làm thế nào để tạo một layout web tuyệt đẹp và rõ ràng. Bạn sẽ sử dụng một số kỹ ứiuạt từ cơ ban cho đến trùng cấp để xây dựng “Web 2.0" kiểu dáng đẹp, sử dụng Grid System 960. Đây là một series cổ hai phần sẽ trình bày cho bạn cách làm thế nào để tạo layout trong Photoshop, sau đó làm thế nào để chuyển đổi các tiêu chuẩn phù hợp với (X) HTML của thiết kế web. Kết quả Nhấp vào hình ảnh dưới đây sẽ đưa bạn đến Phiên bản đầv đủ của layout mà chúng tôi sẽ thiết kế trong hướng dẫn này. HOME ÄBOUT WORK CONTACT ■ d"w«tSS£ •< ỈÌ. ■ ■ In IS. «Uni^-nr !*- JUU^ J N e e d w e S O 'V m o r e ? ỉmáMt m • Vwi ỦMtp. m Bal ■owoinr r t w n d naawjre rv^ijvuwitWi tx tfo n g rf* I . o w i r ftáM taqrmcni ‘Ifvtrrrn amạ HMoga l i Ễ B l i ó l l r ự i C Â Ỉ M ^ l l ^ l t M c r r a ỉ GW 4>auN3 MT* IB# IMM ar.raa<rwTi irvfi/anaiti” r S ig n U » f& r 0 MIT M M im iy u n w t s m r ■ ■ ■ GO ( $ 1 8 0 0 . 1 9 8 . 8 8 7 8 Thiết lap document 1. Tạo một document mới ừong Photoshop với kích thước 1200px X 105ỏpx. N in e ; ịư n trtle d - i Pre$ệt Size; W idth: 1 200 H él g ht: 1Ö50 Resoîucfcort: 72 B a ckground C ontenus: W hile ▼ A dvanced New jTJ ôtesls pixels Cofor Mode: RCB Color s bit pixeU/irtch jiü| g ti Delete Preset... Device C entral Im age Size 3.60M Creating the background ịtạo background) 2. Bây giờ, chúng tôi sẽ tạo background. Chọn Gradient Tool (G). Hãy chắc chắn đó là bộ Linear Gradient. Thiết lập foreground color #ale8fe và background color #59d3fa và tạo ra một gradient như dưới đây: Đặt Grid System vào document 3. Trên một layer mới, tạo một grid rộng 960px gồm 12 thanh, mỗi thanh rộng 60px. Đặt mỗi thanh cách nhau 20px. Đặt grid này ở chính giữa của document. Các grids này nên dùng như bảng chỉ dẫn của bạn và nên nhớ rằng các yếu tố thiết kế của bạn không được vượt quá chiều rộng của grid này. Vào trang 960 Grid System site để biết thêm thông tin, hoặc down￾load the Grid system here.