Form liên hệ là một thành phần không thể thiếu cho một trang web, dù bạn có thiết kế web theo kiểu nào, hay phong cách nào đi chăng nữa, thì cuối cùng cũng phải có một form liên hệ dùng để lấy ý kiến khách hàng cũng như giúp kết nối giữa chủ website và khách viếng thăm tốt hơn. Hôm nay mình sẽ cùng các bạn thiết kế một form đăng nhập khá đẹp mắt và rất dễ thực hiện.
Trước khi bắt đầu, các bạn nên xem qua kết quả mà chúng ta sẽ nhận được khi hoàn thành bài viết này như sau :
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 :
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 :
Vào Filter -> Noise -> Add noise rồi ấn định Amount là 2%. Chọn Gaussian và Monochromatic.
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ào Filter -> 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
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.
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 :
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 icon và đặt nó nằm bên trái trong các thẻ inputs. 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 :
Lúc này, chúng ta sẽ có kết quả như thế này :
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 :
Bây giờ nút nhấn của chúng ta sẽ trông như thế này :
Thế là xong, 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, mình mong là qua bài viết này, các bạn sẽ có thêm ý tưởng cũng như nâng cao kỹ năng Photoshop của mình trong quá trình thiết kế web.Đừng ngần ngại để lại lời nhắn nếu các bạn gặp khó khăn ở bước nào trong bài viết này nhé. Ngoài ra các bạn còn có thể download file PSD của kết quả thiết kế form contact tại đây.
Chúc các bạn thành công !
photoshop tuts contact form form form liên hệ free psd
Tin Tức Liên Quan
Tạo icon RSS bóng bẩy
Trong bài viết này chúng ta sẽ tạo một biểu tượng rss đầy màu sắc và cực kỳ bóng bẩy cho blog của bạn
Tạo chữ màu bạc tỏa sáng bằng photoshop
Trong bài viết này bạn sẽ có thể tự tay làm một hiệu ứng chữ đẹp mắt cho website hay blog của bạn, với chữ màu bạc tỏa sáng cực kỳ đẹp mắt.
Tạo chữ phát sáng nhiều màu sắc
Với hướng dẫn này mình sẽ chỉ các bạn tạo hiệu ứng chữ phát sáng với nhiều màu sắc lấp lánh như hình dưới, chỉ với 5 bước đơn giản thui, nào bắt đầu bạn nhé
Mẹo ghép ảnh cực cool bằng Photoshop
Bài hướng dẫn giúp bạn có được những bức ảnh ghép ấn tượng với thao tác đơn giản
Tự tay làm danh thiếp cực pro bằng Photoshop
Thủ thuật này sẽ giúp bạn thiết kế danh thiếp có giao diện chuyên nghiệp, hiện đại mà không cần phải có quá nhiều kiến thức về đồ họa mà chỉ bằng Photoshop và vài bước thao tác đơn giản
Tạo button đơn giản cho web bằng Photoshop
Trong bài viết này chúng ta sẽ tự tay làm một button đơn giản cho website hay blog của bạn chỉ với vài bước đơn giản
Mẹo tạo chữ kim loại 3D
Chỉ với vài bước đơn giản mình sẽ giúp các bạn tạo logo chữ kim loại hiệu ứng 3D cho website của mình, rất chi là dễ dàng lun, cùng thực hiện theo nhé
Tạo Abstract Wormhole Background
Hôm nay, mình sẽ chỉ các bạn cách sử dụng brush và điều chỉnh các lớp trong photoshop cs5, bạn có thể bạo ra một hình nền trừu tượng
Hiệu ứng chữ băng
Hôm nay, hy vọng rằng những hướng dẫn sau đây sẽ truyền cảm hứng cho bạn để tạo thêm một số hiệu ứng ice cho thiết kế của bạn
