Thiết kế Form đăng nhập bằng photoshop. Bạn muốn tạo, Thiết kế Form đăng nhập bằng photoshop do chính tay mình làm theo ý nghĩ và sở thích của mình. Nhưng do kiến thức của bạn còn hạn hẹp nên bạn chưa thể Thiết kế Form đăng nhập bằng photoshop được. Vậy hôm nay dohoalaptrinh.com xin chia sẻ cách Thiết kế Form đăng nhập bằng photoshop cho các bạn cùng tham khảo nha. Làm theo bài hướng dẫn này đảm bảo bạn sẽ làm thành công một Form đăng nhập bằng photoshop tuyệt vời. Để biết thêm về kiến thức đồ họa có thể truy cập tài liệu đồ họa của chúng tôi.
Với chủ đề "học thiết kế giao diện website với photoshop" hôm nay, dohoalaptrinh.com xin chia sẻ với các bạn cách thiết kế Form đăng nhập bằng Photoshop.
Bước 1 : Tạo một văn bản mới (Ctrl + N) và ấn định kích thước theo thông số như sau :
 |
| Thiết kế Form đăng nhập bằng photoshop |
Bước 2 : Chọn công cụ Gradient tool (G) rồi chọn màu foreground là #6a86a5 và background color là #46607e. Sau đó kéo một đường từ trên xuống dưới như hình sau :
 |
| Thiết kế Form đăng nhập bằng photoshop |
Vào Filter -> Noise -> Add noise rồi ấn định Amount là 2%. Chọn Gaussian và Monochromatic.
 |
| Thiết kế Form đăng nhập bằng photoshop |
Tạo mới một layer, rồi nhấn “ D ” để chuyển màu về chế độ mặc định là đen và trắng. Rồi sau đó vào Filter -> Render -> Clouds. Kế tiếp là vàoFilter -> Disort -> Ocean Ripple và ấn định Ripple Size là 13 và Ripple Magnitude là 9. Nhấn OK và vào Filter -> Blur -> Motion blur. Ấn định angle là 90 và distance là 999. Việc cuối cùng là thay đổi Blend Mode là Overlay.
Bước 3 : Để các phần tử form được sắp xếp gọn gàng và chính xác, chúng ta sẽ cần chèn guides . Guides chỉ là những đường kẻ giúp chúng ta phân định vị trí rõ ràng hơn. Để tạo guides, các bạn vào View -> New Guide rồi chèn một số guides như sau :
Theo đường ngang (Horizontal) :
– 100px
– 150px
– 200px
– 250px
– 300px
– 350px
– 400px
– 450px
– 700px
– 730px
– 780px
Theo đường dọc (Vertical):
– 200px
– 250px
– 450px
– 600px
 |
| Thiết kế Form đăng nhập bằng photoshop |
Bước 4 : Bây giờ chúng ta sẽ tạo các phần tử nhập liệu (input fields), chọn công cụ Rounded Rectangle Tool, chọn radius là 6px và vẽ các hình như sau, nhớ là các bạn phải đảm bảo các hình này phải nằm trên các layer khác nhau.
 |
| Thiết kế Form đăng nhập bằng photoshop |
Chọn từng layer chứa các input fields, nhấp đúp chuột vào từng layer này để làm xuất hiện bảng Blending Options, rồi thiết lập các thông số như sau :
 |
| Thiết kế Form đăng nhập bằng photoshop |
Sau khi làm xong cho một layer, các bạn có thể click chuột phải trên layer này, rồi chọn Copy Layer Style , rồi sau đó chọn từng layer còn lại , cũng click chuột phải, nhưng lần này chúng ta sẽ chọn Past Layer Style. Với cách này, chúng ta sẽ áp dụng cho style cho tất cả các layer chứa thẻ input fields.
Tiếp theo, các bạn chọn layer chứa thẻ input fields đầu tiên để tiến hành thiết kế cho phần hover (tức ra khi rê chuột vào), rồi tại layer này, các bạn thiết lập thông số Blending Options như sau :
Bây giờ kết quả mà chúng ta nhận được sẽ tương tự như thế này :
Bước 5 : Giờ là lúc chúng ta sẽ chèn thêm icons và đặt nó nằm bên trái trong các thẻ input. Các bạn có thể tìm kiếm trên internet những icon phù hợp với nội dung từng thẻ (có thể tìm kiếm trên www.iconfinder.com ). Và nhớ là phải đảm bảo kích thước các icon khi đặt vào sẽ không có kích thước quá lớn. Nếu các bạn chưa biết cách giảm kích thước thì vào Edit -> Free Transform (hoặc nhấn Ctrl + T). Mẹo vặt là khi các bạn tăng giảm kích thước thì nhớ nhấn giữ nút Shift để có thể tăng giảm chính xác nhất. Sau khi chèn icon vào, các bạn chọn từng layer chứa icon rồi vào Image -> Adjustments -> Desaturate. Nhớ là thực hiện điều này cho từng icon bỏ vào.
Bước 6 : Chọn công cụ Horizontal Type Tool (T) rồi chèn các nhãn cho phù hợp với từng thẻ input như sau (các bạn có thể chọn bất kì font chữ nào , miễn sao phù hợp là được) :
Trên từng layer chữ, các bạn nhấp đúp chuột để làm xuất hiện bảng Blending Options, sau đó thiết lập các thông số như sau :
kết quả như sau:
Bước 7 : Việc cuối cùng của chúng ta bây giờ là tạo nút Send. Chọn công cụ Rounded Rectangle Tool với radius là 6px, sau đó các bạn vẽ một hình như ảnh minh họa bên dưới. Rồi ấn định opacity là 50%.
Kế tiếp nhấp đúp chuột vào layer này, rồi thiết lập Blending Options như sau :
Kế tiếp là chọn công cụ Horizontal Type Tool (T) và gõ chữ ” Send ” trên nút nhấn vừa tạo. Sau đó nhấp đúp chuột trên layer này , rồi thiết lập như sau :
Kết quả
Bây giờ chúng ta đã có một form nhập liệu đơn giản cho việc gửi nhận thông tin,
Làm thiết kế web không chỉ yêu cầu các bạn kỹ năng về code mà còn yêu cầu các kỹ năng thiết kế giao diện với photoshop. Mong rằng bài viết này sẽ chia sẻ cho các bạn kinh nghiệm trong học thiết kế giao diện website với photoshop.
Chúc các bạn học thiết kế giao diện website với photoshop thành công !
<<<< Xem thêm tại đây >>>>
Chương trình học
như đã nêu ở trên đó là một quy trình học đầy đủ nhất của việc thiết kế đồ họa
in ấn quảng cáo thực tế bạn có thể theo học từng phần hoặc bạn có thể học rời
Ví dụ như:
Tag: học thiết kế đồ họa, học thiết kế đồ họa tại hà nội, học
thiết kế đồ họa photoshop, học photoshop, học lập trình php, học wordpress tại
hà nội, học html css bootstrap tại hà nội, khóa học photoshop tại hà nội, khóa
học thiết kế đồ họa tại hà nội, khóa học lập trình php tại hà nội.
Mọi thông tin bạn có thể liên hệ:
Đào tạo lập trình và thiết kế đồ họa
Hotline:
0968.853.958 hoặc hỗ trợ Mr. trung: 0947.499.221
0 nhận xét:
Đăng nhận xét