Thiết kế giao diện Web 2.0 trong Photoshop
Hiểu hướng dẫn dưới đây là hiểu kỹ thuật của nó, với nó, bạn có thể tự vẽ một số giao diện người dùng đồ họa cho một trang web. Điều hướng bên, nút, tiêu đề, ví dụ. Tất cả kiểu Web 2.0.
Ra mắt một bức tranh mới; bất cứ kích thước nào. Một cái gì đó lớn hơn 450x300px sẽ tốt. Chọn Công cụ hình chữ nhật tròn và vẽ một hình chữ nhật lớn như trong hình trên.
Nhấp đúp chuột vào lớp của Hình chữ nhật tròn để khởi chạy Tùy chọn trộn. Thay đổi cài đặt cho các kiểu sau.
Thả bóng
Độ mờ đục: 31% Khoảng cách: 1px Lây lan: 0% Kích thước: 5px
Vát và chạm nổi
Độ sâu: 100% Kích thước: 0px Làm mềm: 0px
Lớp phủ tốt nghiệp
Nhấp đúp vào Gradiant và đặt các điểm dừng sau. Vị trí: 0%, # 1378cd Vị trí: 100% # 4da5f0
Cú đánh
Kích thước: 5px Vị trí: Màu bên trong: # 54abf6
Hãy chèn một số văn bản, khẩu hiệu, URL hoặc một cái gì đó. Có nó ở giữa và căn phải để logo có thể nằm ở bên trái sau. Hãy tạo kiểu cho văn bản. Tôi đang sử dụng Lucida Sans Unicode; 55pt; trơn tru; -120 để theo dõi ký tự (khoảng cách chữ). Nhấp đúp chuột vào lớp văn bản và đặt như sau Tùy chọn trộn.
Lớp phủ Gradient
Nhấp đúp vào Gradiant và đặt các điểm dừng sau. Vị trí: 0%, # 9ec7eb Vị trí: 100% ecf6ff
Sau đó, bạn sẽ cần phải chèn logo ở bên trái của văn bản. Tôi sẽ sử dụng một hình chữ nhật tròn có bán kính 5px để thể hiện logo. Đây là Lựa chọn hài hòa cài đặt cho hình chữ nhật tròn.
Bóng tối bên trong
Độ mờ đục: 45% Khoảng cách: 0px Kích thước: 43px;
Vát và chạm nổi
Độ sâu: 100% Kích thước: 0px Làm mềm: 0px Chế độ nổi bật Độ mờ: 50% Độ mờ của ShadowMode: 100%
Lớp phủ tốt nghiệp
Nhấp đúp vào Gradiant và đặt các điểm dừng sau. Địa điểm: 0% # 0e2f4a Địa điểm: 47% # 001a31 Địa điểm: 48% # 002545 Địa điểm: 100% # 0f4b7f
Cú đánh
Kích thước: 5px Nhấp đúp vào Gradiant và đặt các điểm dừng sau. Địa điểm: 0% # 1468af Địa điểm: 100% # 50abf8
Hãy cho nó một chút hiệu ứng bóng. Giữ CTRL và nhấp chuột trái vào hình chữ nhật tròn Lớp hình thu nhỏ. Khi toàn bộ hình chữ nhật tròn được chọn, thay đổi thành Công cụ hình chữ nhật Marquee, giữ ALT và rút ra nửa sau của khu vực được chọn; giống như hình trên.
Tạo một lớp mới; Kéo nó lên để nó nằm trên cùng của tất cả các lớp; điền vào phần được chọn bằng màu trắng [#ffffff]; thay đổi độ mờ thành 15%.
Hướng dẫn sẽ kết thúc ở đây. Làm thế nào bạn sẽ sử dụng thiết kế này là hoàn toàn tùy thuộc vào bạn. Bằng cách thay đổi một chút kích thước và màu sắc, nó có thể được sử dụng làm tiêu đề hoặc nút trên web. Dưới đây là một số ví dụ.
Tiêu đề trang web
Nút trang web
