Đăng nhập

[Thiết kế web] – Thiết kế form liên hệ bằng Photoshop

  • 25/12/2014 - 9:10 PM
  • 2442 Views

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 liên hệ bằng photoshop 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:

thiet-ke-form-lien-he-bang-photoshop-1

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:

thiet-ke-form-lien-he-bang-photoshop-2

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:

thiet-ke-form-lien-he-bang-photoshop-3

Vào Filter -> Noise -> Add noise rồi ấn định Amount2%. Chọn Gaussian và Monochromatic.

thiet-ke-form-lien-he-bang-photoshop-4

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à 13Ripple Magnitude9. Nhấn OK và vào Filter -> Blur -> Motion blur. Ấn định angle90distance999. Việc cuối cùng là thay đổi Blend ModeOverlay.

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

thiet-ke-form-lien-he-bang-photoshop-5

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 radius6px 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.

thiet-ke-form-lien-he-bang-photoshop-6

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 :

thiet-ke-form-lien-he-bang-photoshop-7

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:

thiet-ke-form-lien-he-bang-photoshop-8

Bây giờ kết quả mà chúng ta nhận được sẽ tương tự như thế này:

thiet-ke-form-lien-he-bang-photoshop-9

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àoImage -> Adjustments -> Desaturate. Nhớ là thực hiện điều này cho từng icon bỏ vào.

thiet-ke-form-lien-he-bang-photoshop-10

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):

thiet-ke-form-lien-he-bang-photoshop-11

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:

thiet-ke-form-lien-he-bang-photoshop-12

Lúc này, chúng ta sẽ có kết quả như thế này:

thiet-ke-form-lien-he-bang-photoshop-13

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%.

thiet-ke-form-lien-he-bang-photoshop-14

Kế tiếp nhấp đúp chuột vào layer này, rồi thiết lập Blending Options như sau:

thiet-ke-form-lien-he-bang-photoshop-15

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:

thiet-ke-form-lien-he-bang-photoshop-16

Bây giờ nút nhấn của chúng ta sẽ trông như thế này:

thiet-ke-form-lien-he-bang-photoshop-17

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é.

Chúc các bạn thành công!