Nếu các bạn đã làm quen với Photoshop lâu rồi và nghĩ rằng Photoshop chỉ dùng để làm mấy hiệu ứng vớ vẩn mà không có ứng dụng thực tế. Cho nên hôm nay tôi sẽ hướng dẫn các bạn tạo một giao diện hoàn toàn trong Photoshop và sau đó sẽ kết hợp với một phần mềm thiết kế web để hoàn thiện giao diện của mình. Các thao tác trong bài này các bạn có thể theo dõi để biết thêm kinh nghiệm, còn về bạn quyết định giao diện của mình như thế nào thì tuỳ bạn. Riêng phần kết hợp với một phần mềm thiết kế web do "đại ca" của tôi chỉ cho tôi biết cách làm! cảm ơn "đại ca" đã giúp đỡ em rất nhiều từ ngày gặp "đại ca".
Phần 1: Tạo hình trong PhotoshopĐầu tiên bạn phải quyết định xem nội dung của trang web đó như thế nào và từ đó bạn sẽ chọn giao diện phù hợp cho nó. Kích thước chiều ngang chuẩn của một trang là 778 Px vì có thể hiển thị vừa vặn với hầu hết các loại màn hình nhỏ nhất là 800x600. Chiều cao không quan trọng vì sau này bạn có thể quyêt định sau khi bạn làm trong Frontpage hoặc Dreamweaver.
1. Mở một tài liệu mới với kích thước là 778 x 800 Px. Nền trắng.
2. Dùng Rounded Rectangular với thông số trên thanh tuỳ biến như hình sau.
- Vẽ một hình như hình dưới và chọn Pen Tool sau đó nhấp chuột phải vào hình và chọn Make Selection. Tạo một layer mới và đặt tên là Upper Head.
- Đặt màu nền trước là màu #E8E8E8 và màu nền sau là màu trắng. Dùng Gradient (Fore to Back) và kéo một đường từ trên xuống dưới. Bạn được hình ở bước 2.
Lập lại bước 1 đến bước 2 nhưng có chiều cao lớn hơn, đây sẽ là banner của bạn. Sau đó tô với màu Xanh hoặc bất cứ màu gì bạn muốn.
- Nhân đôi layer Upper Head lên và di chuyển nó xuống dưới banner như hình sau. Đặt lại tên cho nó là Under Banner
- Ctrl-Click vào layer Under Banner để load vùng lựa chọn và vào Select > modify > Contract với giá trị là 1 Px.
- Chọn Gradient Tool (Fore to Back) màu nền trước là màu #E8E8E8 và màu nền sau là màu Trắng. Kéo một đường từ dưới lên trên.
- Vào Layer Style > Stroke với thông số sau:
- Chọn Rounded Rectangular, trên thanh tuỳ biến (bước 2) đổi giá trị Radius thành 10 Px và vẽ một hình như hình sau.
- Chọn Pen Tool sau đó nhấp chuột phải vào hình và chọn Make Selection. Tạo một layer mới và đặt tên là Navigation.
- Dùng Gradient Tool (Fore to Back) màu nền trước là màu #E8E8E8 và màu nền sau là màu Trắng. Kéo một đường từ Trái sang Phải. Bạn được hình trên.
- Vào Layer Style (ở dưới cuối cùng của Layer Palette) chọn Outer Glow với thông số như hình sau:
- Vẫn ở layer Style chọn Stroke với thông số là:
Bạn được hình sau
- Chọn Rounded Rectangular, trên thanh tuỳ biến (bước 2) đổi giá trị Radius thành 10 Px và vẽ một hình như hình sau
- Chọn Pen Tool sau đó nhấp chuột phải vào hình và chọn Make Selection. Tạo một layer mới và đặt tên là Navigation Head.
- Chọn Gradient Tool và trên thanh tuỳ biến nhấn vào ô Gradient để mở một hộp thoại chọn Gradient. Chọn loại Orage, Yellow, Orage. Sau đó thiết lập thông số như hình số 3. Xem hình dưới.
- Kéo một đường từ trên xuống dưới bạn được hình ở bước 15.
- Tạo một layer mới đặt tên là Ball và dùng Eliptical Marquee vẽ một hình bằng hình dưới. Tô với màu bạn thích, tôi dùng # FA9200
- Vào Select > Modify > Contract với giá trị là 1 Px. Tạo một layer mới đặt tên là Highlight.
- Chọn Gradient Tool (Fore to Trans), đặt màu nền trước là màu trắng và kéo một đường từ trên xuống đến giữa của hình tròn. Bạn được hình ở dưới.
- Tạo một layer mới đặt tên là Tam Giác, Dùng Polygonsal Lasso và vẽ một hình tam giác như hình dưới. Tô nó với màu đen.
- Nhấn Ctrl-T để Transform và định lại kích thước của nó, sau đó di chuyển nó vào trong hình tròn. Bạn được hình này.
- Chọn Rounded Rectangular, trên thanh tuỳ biến (bước 1) đổi giá trị Radius thành 10 Px và vẽ một hình như hình sau.
- Chọn Pen Tool sau đó nhấp chuột phải vào hình và chọn Make Selection. Tạo một layer mới và đặt tên là Content 1.
- Vào Layer Style (ở dưới cuối cùng của Layer Palette) chọn Inner Glow với thông số như hình dưới, và chọn tiếp Drop shadow.
- Cuối cùng chọn tiếp Stroke với thông số là:
Bạn được hình ở bước 24.
- Lập lại từ bước 11 bạn sẽ được hình sau. Tôi thêm hình cô gái vào.
Sat Jan 12, 2008 10:12 pm