Banner và Navigator mềm mại
Loại interface này trông rất mềm mại nhẹ nhàng, nhìn cũng hay lắm, mà là banner kết hợp luôn với thanh điều hướng navigator đó, một công làm cả đôi việc luôn nha cả nhà 
1. Bắt đầu với file 700.170 px nền trắng ( cái này tuỳ thuộc mỗi người nha, mình không quan trọng chuyện kích thước chính xác trong tut này )
2. Tạo layer mới .Dùng công cụ Rounded rectangle với radius= 10 px ( bạn ấn Shift+U nhiều lần là sẽ hiện ra công cụ này – for newbie ^^ )
3. Tiếp theo tạo new lay, vẽ khung banner với kích thước, vị trí tương đối như sau :
4. Áp dụng style sau cho khung banner- header này nhé
Sẵn có con dấu cộp cộp vài phát cho nó mấu các bác nhể
Chú ý ở phần Gradient , dải màu từ xám nhạt > trắng các bạn tự chọn màu nha.
5. Xong rồi, bi giờ ta có style của header như sau, cũng mềm mại phết nhở ? ^^
Tiếp lại dùng công cụ Rounded rectangle với radius= 10 px như lúc nãy, vẽ khung navigator như hình minh hoạ
6. Bạn kick chọn layer banner, kick chuột phải vào layer đó trên bảng layer pallette rồi chọn Copy layer style
Xong rồi kick chọn layer Nav, kick chuột phải vào layer đó trên bảng layer pallette rồi chọn Paste layer style. Bạn sẽ có banner và Nav có style giống hệt nhau. Chính vì thế nên để tránh sự nhàm chán, bạn hãy kich đúp chuột vào bảng layer style cuộn ở dưới đó, thay đổi giá trị Gradient overlay, ví dụ như hình sau
Chú ý là tất cả giá trị của style cũ bạn giữ nguyên. chỉ trừ Gradient overlay thay đổi màu thôi. Bi giờ bạn được như sau
Trông cũng kul phết rùi đó nhỉ ! Giờ chỉ cần kẻ đường line phân cách giữa các ô thôi.
7.Bạn dùng công cụ Line tool ( hotkey : U ) với radius = 1 px, màu đen, kẻ 1 đường cơ bản như sau :
Lưu ý bạn khi kẻ bằng công cụ line tool, nhớ để chế độ Fill pixel để nó biến thành pixel luôn, không phải vertor nữa. Kẻ xong các đường phân chia đó, bạn đổi Blend mode thành overlay, và chúng ta được như sau
8.Giờ Ctrl+J để nhân đôi layer line này lên, rồi dùng Move tool và phím mũi tên >>> kéo đừòng line mới sang bên phải 1 px. Giữ Ctrl + click vào layer line copy rồi fill nó với màu trắng ( nếu bạn không hiểu đoạn này, có thể tham khảo tut navigator cool của mình đã post trong DCS )
9. Để blend mode cho layer line trắng là overlay. Đây là kết quả
Kul chứ ^^ Xong, công việc cuối cùng là add text vào và thêm các icon Web phù hợp. Đây là bản mẫu của mình
Tags:
photoshop
1. Bắt đầu với file 700.170 px nền trắng ( cái này tuỳ thuộc mỗi người nha, mình không quan trọng chuyện kích thước chính xác trong tut này )
2. Tạo layer mới .Dùng công cụ Rounded rectangle với radius= 10 px ( bạn ấn Shift+U nhiều lần là sẽ hiện ra công cụ này – for newbie ^^ )
3. Tiếp theo tạo new lay, vẽ khung banner với kích thước, vị trí tương đối như sau :
4. Áp dụng style sau cho khung banner- header này nhé
Sẵn có con dấu cộp cộp vài phát cho nó mấu các bác nhể
Chú ý ở phần Gradient , dải màu từ xám nhạt > trắng các bạn tự chọn màu nha.
5. Xong rồi, bi giờ ta có style của header như sau, cũng mềm mại phết nhở ? ^^
Tiếp lại dùng công cụ Rounded rectangle với radius= 10 px như lúc nãy, vẽ khung navigator như hình minh hoạ
6. Bạn kick chọn layer banner, kick chuột phải vào layer đó trên bảng layer pallette rồi chọn Copy layer style
Xong rồi kick chọn layer Nav, kick chuột phải vào layer đó trên bảng layer pallette rồi chọn Paste layer style. Bạn sẽ có banner và Nav có style giống hệt nhau. Chính vì thế nên để tránh sự nhàm chán, bạn hãy kich đúp chuột vào bảng layer style cuộn ở dưới đó, thay đổi giá trị Gradient overlay, ví dụ như hình sau
Chú ý là tất cả giá trị của style cũ bạn giữ nguyên. chỉ trừ Gradient overlay thay đổi màu thôi. Bi giờ bạn được như sau
Trông cũng kul phết rùi đó nhỉ ! Giờ chỉ cần kẻ đường line phân cách giữa các ô thôi.
7.Bạn dùng công cụ Line tool ( hotkey : U ) với radius = 1 px, màu đen, kẻ 1 đường cơ bản như sau :
Lưu ý bạn khi kẻ bằng công cụ line tool, nhớ để chế độ Fill pixel để nó biến thành pixel luôn, không phải vertor nữa. Kẻ xong các đường phân chia đó, bạn đổi Blend mode thành overlay, và chúng ta được như sau
8.Giờ Ctrl+J để nhân đôi layer line này lên, rồi dùng Move tool và phím mũi tên >>> kéo đừòng line mới sang bên phải 1 px. Giữ Ctrl + click vào layer line copy rồi fill nó với màu trắng ( nếu bạn không hiểu đoạn này, có thể tham khảo tut navigator cool của mình đã post trong DCS )
9. Để blend mode cho layer line trắng là overlay. Đây là kết quả
Kul chứ ^^ Xong, công việc cuối cùng là add text vào và thêm các icon Web phù hợp. Đây là bản mẫu của mình
Tin liên quan
