Phần 3: GIẢI PHÁP, ĐỊNH HƯỚNG PHÁT TRIỂN VÀ CÁC ĐỀ XUẤT VỀ CHỨC NĂNG HIỂN THỊ NỘI DUNG SỐ TRÊN
3.1.3.Thiết kế giao diện trên Photoshop ( Kết quả tham khảo phần phụ lục 1)
a) Bước 1. Vào File \ New. Hộp thoại New hiện ra cho phép tạo một File mới. Đặt tên là Home.
◦ Mục Width, đặt 320px
◦ Mục Height, đặt 2000px
◦ Resolution, chọn 72ppi.
Hình 2.7. Thiết kế giao diện trên Photoshop
b) Bước 2: Lần lượt tạo các Layer Group có tên Header, Featured, News, Testimonials, Events, Gallery, Ads, Footer bằng cách vào menu Layer / New / Group.
Tất cả các tham số đặt mặc định.
Sau khi tạo, tại mục Layer, sẽ hiện lên như sau:
c) Bước 3: Sử dụng các công cụ Text, Line Tool, Rounded Rectangle Tool để thiết kế các Layer trong phần Header, kết quả cuối như sau:
Hình 2.8. Thiết kế menu chính bằng Photoshop Trong đó:
Logo FPT Polytechnic được cung cấp sẵn.Khoảng cách tối thiểu giữa logo và các thành phần xung quanh là ½ kích thước Logo.
Font chữ sử dụng là Arial. Tại Top Menu
• Màu nền của Top Menu là #000
• Các link có màu #fff
d) Bước 4: Sử dụng các công cụ Text, Image và Layer để tạo các layer trong group Featured như sau:
Hình 2.9. Thiết kế menu đăng ký trực tuyến bằng Photoshop Trong đó:
Ảnh trong các đề mục có kích thước 60x60px
e) Bước 5: Sử dụng các công cụ Layer, Image Tool tạo các layer
Hình 2.10. Thiết kế phần tin tức bằng Photoshop
Trong đó: Kích thước layer này là 320x460px.
Kích thước ảnh là 300x150px
Cỡ chữ phần “Tin tức Poly” 16px đậm, màu chữ #21759B. Cữ chữ tiêu đề bài vết đầu tiên: 16px đậm, màu chữ #000 Cỡ chữ phần except 12px, màu chữ #333
Cỡ chữ 3 bài viết tiếp theo 11px, đậm, màu chữ #4c4c4c, màu bullet #c00
f) Bước 6. Copy các layer được tạo trong bước 5 vào layer group Testimonials, thay thế hình ảnh và chữ, ta được kết quả sau:
Hình 2.11.Thiết kế phần Poly góc nhìn bằng Photoshop
g) Bước 7: Sử dụng công cụ Text, Layer và Line Tool để tạo các layer trong group Events như sau
Hình 2.12. Thiết kế phần sự kiện bằng Photoshop Trong đó:
− Màu nền của Event: #FE3905
− Màu chữ: #fff
− Màu chữ phần ghi ngày: #000
− Kích thước text “SỰ KIỆN”: 16px, chữ hoa (adsbygoogle = window.adsbygoogle || []).push({});
− Đường kẻ phân cách: 1px, kiểu liền, màu #FF5807
h) Bước 8: Sử dụng các công cụ Image Tool, Text và Layer để tạo các layer trong group Gallery, ta được kết quả sau:
Hình 2.13. Thiết kế phần thư viện ảnh bằng Photoshop Trong đó:
- Phần chữ “Thư viện ảnh” cỡ 16px, màu #21759B, đậm, Kích thước mỗi ảnh là -
100x80px
- Khoảng trống giữa ảnh và đường viền : 4px, Độ cong của đường viền : 4px. - Màu đường viền là #ddd, kích thước chữ dưới mỗi ảnh là 13px, màu chữ #333
i) Bước 9: Sử dụng các công cụ Layer (Pattern), Text và Image để tạo các layer trong group Footer, kết quả cuối cùng như sau:
Hình 2.14. Thiết kế phàn liên hệ bằng Photoshop
Trong đó: Màu chữ: #fff Màu link: #FFB3B3
Pattern sử dụng trong layer có màu đậm, các icon sử dụng từ Google Plus và Facebook
Bước 10: Vào File / Save hoặc nhấn Ctrl + S để lưu file.