Từng bước thiết kế mẫu Login Form bằng Photoshop

06/04/2015

Đã lâu rồi mình không chia sẻ cho các bạn một bài viết nào về Photoshop, hôm nay nhân ngày nghỉ lễ Phục Sinh, mình có chút thời gian rảnh rỗi nên quyết định viết một bài cho các bạn. Hôm nay, chúng ta sẽ tạo một form Log in mà hầu hết mọi website hay blog đều phải dùng. Với mẫu thiết kế này, ngoài việc các bạn có thể áp dụng vào trong thiết kế trang web của mình,các bạn còn học được nhiều cách sử dụng các công cụ có sẵn trong Photoshop, và có thể tự tay tạo cho mình một mẫu như ý.

Đây là kết quả mà chúng ta sẽ có được khi hoàn thành bài viết này.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 1 :
Tạo một file mới với kích thước 600 x600px, sau đó vào menu View > Show > Grid và tiếp tục vào menu View > Snap To > Grid . Nhấn Ctrl + K (Với windows) hoặc Control + K (Với OS), đi đến lựa chọn Guides, Grid & Slices rồi thay đổi thông số như hình bên dưới.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 2 :
Bây giờ chúng ta sẽ quay sang phần Layers panel, nhấp đúp chuột vào Background locked layer để thây đổi tên của nó là BG.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 3:

Từ Layer panel, nhấp chuột phải vào layer BG và chọn Blending Options , lúc này sẽ có một hộp thoại xuất hiện, các bạn chỉnh sửa các thông số như hình bên dưới.

Từng bước thiết kế mẫu Login Form bằng Photoshop Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 4 :
Giờ chúng ta lại quay trở lại Toolbar và đặt foreground color#F0F5FE. Chọn công cụ Rounded Rectangle Tool, các bạn nhìn vào các thông số nằm ở phía trên và chỉnh lại Radius10px rồi đưa vẽ một hình với kích thước vào khoảng 264 x190px .

Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 5 :
Trong bước này, các bạn sẽ học được cách tạo một pattern trong Photoshop. Nhấn Ctrl + N và tạo một file mới với kích thước là 5 x5px. Ấn định foreground color là #000000, chọn công cụ Pencil Tool và ấn định kích thước là 1px. Nhấp chuột trái để tạo điểm đen như hình bên dưới. Tiếp theo vào  Edit > Define Pattern và đặt tên cho Pattern mới tạo được là xong.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 6 :
Quay trở lại với hình vẽ mà chúng ta đã tạo ở bước 4, tại layer này nhấp chuột phải, chọn Blending Options, lần này chúng ta sẽ chọn Pattern Overlay và chọn mẫu Pattern mà chúng ta vừa tạo ở bước 5 .

Từng bước thiết kế mẫu Login Form bằng Photoshop

Từng bước thiết kế mẫu Login Form bằng Photoshop

Các bạn chọn tiếp Drop Shadow rồi thiết lập thông số như trong hình.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 7 :
Nhìn vào bên trong Layers panel, và các bạn phải đảm bảo là layer hình vẽ vẫn đang được chọn. Nhấp đúp layer này với phím tắt Ctrl + J. Nhấp chuột phải và chọn Clear Layer Style, giảm Fill xuống còn 0% . Tiếp theo nhấp chuột phải, chọn Blending Options từ layer copy này, và thiết lập thông số Drop Shadow như hình bên dưới.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Từng bước thiết kế mẫu Login Form bằng Photoshop Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 8 :
Tiếp tục nhấn Ctrl + J để tạo thêm một bản copy nữa, và cũng làm tương tự như ở bước 7, nhưng lần này chúng ta thiết lập thông số Drop Shadow như sau.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 9 : Thay đổi màu foreground color là #E5E9F2, chọn công cụ Rounded Rectangle Tool và ấn định Radius10px từ thanh điều chỉnh nằm bên trên. Sau đó các bạn vẽ một hình với kích thước vào khoảng 220 x 36px như hình bên dưới.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Bước 10 :

Tại layer hình mới vừa tạo, các bạn nhấp chuột phải , chọn Blending Options và thiết lập các thông sô như hình bên dưới.

Từng bước thiết kế mẫu Login Form bằng Photoshop

Từng bước thiết kế mẫu Login Form bằng Photoshop

Từng bước thiết kế mẫu Login Form bằng Photoshop

Pages: 1 2 3 4

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !