AD (728x60)

Thứ Ba, 24 tháng 3, 2015

Học thiết kế giao diện website với photoshop - Thiết kế Form đăng nhập

Share & Comment
Tự tay thiết kế Form đăng nhập tuyệt đẹp với Photoshop
Với chủ đề "học thiết kế giao diện website với photoshop" hôm nay, mình 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 :

hoc thiet ke giao dien website voi 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 :
hoc thiet ke giao dien website voi photoshop
Vào Filter -> Noise -> Add noise rồi ấn định Amount là 2%. Chọn Gaussian và Monochromatic.
hoc thiet ke giao dien website voi 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

hoc thiet ke giao dien website voi 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.
hoc thiet ke giao dien website voi 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 :
hoc thiet ke giao dien website voi 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 :

hoc thiet ke giao dien website voi photoshop
Bây giờ kết quả mà chúng ta nhận được sẽ tương tự như thế này :
hoc thiet ke giao dien website voi photoshop
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.
hoc thiet ke giao dien website voi photoshop
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) :
hoc thiet ke giao dien website voi photoshop
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 :
hoc thiet ke giao dien website voi photoshop
kết quả như sau:
hoc thiet ke giao dien website voi photoshop
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%.
hoc thiet ke giao dien website voi photoshop
Kế tiếp nhấp đúp chuột vào layer này, rồi thiết lập Blending Options như sau :
hoc thiet ke giao dien website voi photoshop
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 :
hoc thiet ke giao dien website voi photoshop


Kết quả
hoc thiet ke giao dien website voi photoshop

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 !




Tags:

0 nhận xét:

Đăng nhận xét

 
  • Khóa học Đồ học in ấn
  • Khóa học đồ họa báo chí
  • Khóa học Đồ họa kiến trúc
  • Khóa học Đồ họa thiết kế web
  • Khóa học Đồ họa theo yêu cầu
  • Khóa học đồ họa truyền thông
Bản quyền thuộc: CÔNG TY CỔ PHẦN THƯƠNG MẠI VÀ GIÁO DỤC VIỆT TÂM ĐỨC
Trụ sở chính:P1201-2C tầng 12 Tòa nhà Landmark 72 Keangnam Hanoi, khu E6, Mễ Trì - Q. Nam Từ Liêm - TP Hà Nội
VP1: Phòng 1114, Tòa nhà CT.A 789 Bộ Quốc Phòng, Mỹ đình, Hà Nội (sau bến xe mỹ đình, đối diện sân vận động quốc gia.)
VP2: Phòng 601, Tòa nhà C1+C2, Ngõ 106 Lê Trọng Tấn, Thanh Xuân, Hà Nội
VP3:Số 8 Ngõ 117 Thái Hà Đống Đa Hà Nội - Học viện IT
VP4:Số 50 Ngõ 91 Hoàng Quốc Việt Cầu Giấy Hà Nội
VP5:P2215 tầng 22 toà FLC 36 Phạm Hùng, Mỹ Đình
VP6:Số 47, TT6 KĐT Văn Phú, Hà Đông, Hà Nội
VP7:P.10 Lầu 5 toà Oriental Plaza số 685 Đường Âu Cơ, P. Tân Thành, Q. Tân Phú, T.P HCM

việt tâm đức,học đồ họa, học thiết kế đồ họa, học thiết kế web, dao tao do hoa in an,viet tam duc ha noi,hoc thiet ke do hoa in an bao chi,việt tâm đức hoc thiet ke do hoa truyen thong
Copyright © Học viện IT- Đồ họa và sáng tạo | Thiết kế web bởi việt tâm đức lừa đảo