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ỹ thuật từ cơ bản cho đến trung 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 đầy đủ của layout mà chúng tôi sẽ thiết kế trong hướng dẫn này. Thiết lập document 1. Tạo một document mới trong Photoshop với kích thước 1200px x 1050px. 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 #a1e8fe 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. Tạo ra các container cho các logo và các navigation item 4. Bây giờ, chúng tôi sẽ tạo ra các container cho logo và các navigation item. Để tạo các container, sử dụng Rounded Rectangle Tool với Shape Layers đã được lựa chọn. Thiết lập bán kính 10px. 5. Tạo một hình chữ nhật tròn rộng 300px. Tạo một hình chữ nhật tròn thứ hai rộng 620px; chúng được đặt trên grid như sau: 6. Áp dụng các thiết lập Layer Style cho mỗi hình chữ nhật tròn: Bây giờ hình chữ nhật tròn của bạn trông như thế này: Thêm logo và text cho navigation 7. Để tạo các navigation items, sử dụng Type Tool (T). Sử dụng màu sắc #5f5f5f. Trong trường hợp này, tôi sử dụng font chữ Rockwell. Add các navigation items cho hình chữ nhật thứ hai và logo của công ty (hiện tại logo đang sử dụng chỉ là một cái tên hư cấu cho một tổ chức thiết kế). Tạo các ký hiệu phân cách cho các navigation items 8. Trên một layer mới, hãy add một ký hiệu phân cách ở giữa mỗi một navigation item. Ở đây tôi thêm một line với color #dedede. 9. sao chép ký hiệu ngăn cách. Sử dụng Layer> Layer Style> Blending Options> Color Overlay và thay đổi màu của bản sao #ffffff. Di chuyển bản sao một pixel qua bên phải. Điều này sẽ tạo ra một hiệu ứng chạm khắc tinh tế. Tạo header 10. Bây giờ hãy tạo header phía dưới logo và thanh navigation. Sử dụng Type Tool (T), và add khẩu hiệu công ty và một bài giới thiệu ngắn gọn phía dưới. Sau đó, hãy add một Drop Shadow nhẹ để làm cho kích thước của nó lớn hơn. 11. Để lấp đầy khoảng trống bên cạnh khẩu hiệu, add một hình ảnh của một máy tính hoặc một laptop. Bây giờ, đây là những gì bạn cần phải có: . 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 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 đầy đủ của layout mà chúng tôi sẽ thiết kế trong hướng dẫn này. Thiết lập document 1. Tạo một document mới trong. Thiết lập document 1. Tạo một document mới trong Photoshop với kích thước 1 20 0px x 105 0px. Creating the background (tạo background) 2. Bây giờ, chúng tôi sẽ tạo background. Chọn Gradient