Đã 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.
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.
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.
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.
Bước 4 :
Giờ chúng ta lại quay trở lại Toolbar và đặt foreground color là #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 Radius là 10px rồi đưa vẽ một hình với kích thước vào khoảng 264 x190px .
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.
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 .
Các bạn chọn tiếp Drop Shadow rồi thiết lập thông số như trong hình.
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.
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.
Bước 9 : Thay đổi màu foreground color là #E5E9F2, chọn công cụ Rounded Rectangle Tool và ấn định Radius là 10px 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.
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.
\
Bước 11 :
Nhân bản hình vẽ vừa tạo với phím tắt Ctrl + J rồi nhấp chuột phải chọn Clear Layer Style. Sử dụng nút bấm Down trên bàn phím để di chuyển hình vẽ như minh họa bên dưới.
Bước 12 :
Vẫn tại layer copy , nhấp chuột phải rồi chọn Blending Options và thiết lập thông số như sau.
Bước 13 :
Trở lại với mẫu vẽ thẻ input đầu tiên, các bạn chọn công cụ Horizontal Type Tool từ thanh công cụ , rồi vào menu Window > Character sử dụng font Calibri Bold , chọn màu #CB7C6F và ấn định kích thước là 14px.
Bước 14 :
Tại layer chữ mới vừa nhập vào, click chuột phải -> Blending Options và thiết lập thông số như hình bên dưới.
Bước 15 :
Thay đổi foreground color là #848F93 và chọn công cụ Rectangle Tool. Tạo một hình vẽ với kích thước vào khoảng 2 x 14px. Sau đó các bạn chọn công cụ Add Anchor Point Tool để chèn vào một số điểm neo như hình minh họa bên dưới.
Bước 16 :
Sử dụng công cụ Direct Selection Tool để chọn các điểm neo mà chúng ta đã tạo ở bước trước. Nhấp vào nút Up trên bàn phím 3 lần để di chuyển chúng lên 3px.
Bây giờ các bạn chọn công cụ Convert Point Tool và click vào những điểm neo để xóa bỏ phần cung (curves).
Lúc này, kết quả mà chúng ta nhận được sẽ thế này :
Bước 17 :
Sử dụng công cụ Ellipse Tool để tạo một hình vẽ với kích thước vào khoảng 6 x 8px như hình minh họa sau.
Và kết quả :
Bước 18 :
Bây giờ, chúng ta sẽ quay trở lại với thẻ input thứ hai, rồi chọn công cụ Horizontal Type Tool. Vào menu Window > Character, sử dụng font Calibri Bold với màu #8D9799 và kích thước 16px. Rồi nhấp vào kí tự như hình bên dưới.
Nhấp chuột phải, chọn Blending Options và thiết lập thông số như sau:
Bước 19 :
Chuyển lại màu foreground là #4BB1FB và chọn công cụ Rectangle Tool tạo một hình vẽ với kích thước 2 x 16px và đặt nó vào như hình sau.
Bước 20:
Thay màu foreground color là #848F93, chọn công cụ Ellipse Tool và vẽ một hình tròn với kích thước vào khoảng 7 x 7px và một hình tròn nhỏ với kích thước 2 x 2px. Để tạo một hình tròn hoàn hảo, khi tạo, các bạn nhấn giữ nút Shift để vẽ.
Bước 21 :
Tại Layers panel, các bạn chọn cả 2 hình tròn vừa tạo , click chuột phải và chọn Merge Shapes. Bây giờ chọn công cụ Path Selection Tool, click vào bên trong hình tròn nhỏ (2 x 2px), các bạn để ý đến phần thanh điều chỉnh ở phía trên (top bar) và chọn Subtract Front Shape như hình minh họa bên dưới.
Bước 22 :
Chọn công cụ Pen Tool rồi vẽ chi tiết như sau .
Sau khi vẽ xong, click chọn các hình lại và nhấp chuột phải và chọn Merge Shapes. Nhấn Ctrl + T để quay xuống 45 độ, nhấn Enter khi các bạn thấy vừa đủ.
Bước 23 :
Chọn công cụ Rounded Rectangle Tool và ấn định Radius là 3px rồi vẽ một hình với kích thước vào khoảng 28 x 28px như sau:
Chọn công cụ Pen Tool và vẽ thêm như sau :
Bước 24 :
Chọn các hình vừa vẽ rồi click chuột phải và chọn Merge Shapes. Trên layer của hình này, click chuột phải, chọn Blending Options và thiết lập thông số như sau.
Bước 25 :
Thay đổi màu foregrocund là #22BE69, chọn công cụ Custom Shape Tool từ top bar . Rồi vẽ một hình với kích thước vào khoảng 16 x 16px. Nhấn giữ Shift để tạo hình chuẩn hơn.
Bước 26 :
Tại layer hình mới vừa vẽ, nhấp chuột phải chọn tiếp Blending Options và thiết lập như sau.
Bước 27 :
Chọn hình tooptip và nhấn Ctrl + J để nhân bản thêm một mẫu. Rồi kéo nó xuống phía dưới, click chuột phải layer này và chọn Clear Layer Styles.
Bước 28 :
Bây giờ chúng ta sẽ click chuột phải layer mới được nhân bản, chọn Blending Options và thiết lập thông số như sau.
Bước 29 :
Thay đổi màu foreground là #FFA2A1 và sử dụng công cụ Rectangle Tool để tạo hình dấu chấm than với kích thước lần lượt vào khoảng 2 x 7px và 2 x 2px như sau.
Bước 30 :
Chọn công cụ Rounded Rectangle Tool và ấn định Radius là 5px, rồi vẽ một hình và đặt nó đúng vào đúng vị trí như trong hình dưới.
Bước 31 :
Tại layer hình vẽ vừa mới tạo, click chuột phải và chọn Blending Options, sau đó thiết lập thông số như hình sau.
Bước 32 :
Thay đổi foreground là #FFFFFF, chọn công cụ Brush Tool, thiết lập Size là 80px và Hardness là 0%. Đồng thời trên Layers panel , nhấn vào nút Create a new layer.
Bước 33 :
Tại layer mới vừa tạo, sử dụng công cụ Brush Tool và click vào chính giữa button như hình sau.
Bước 34 :
Nhấn giữ nút Ctrl (Windows) hoặc Control (OS) rồi click chuột vào layer chứa hình button, lúc này sẽ xuất hiện vùng lựa chọn. Nhìn qua Layers panel, nhấn vào nút Add Layer Mask. Click chuột vào layer mà chúng ta tạo ở bước 32, thay đổi Blend Mode thành Soft Light và giảm Opacity xuống còn 80%.
Bước 35 :
Bây giờ chúng ta sẽ nhân bản button với phím tắt Ctrl + J.
Bước 36 :
Chọn công cụ Horizontal Type Tool , sử dụng font Calibri Bold , chọn màu #FFFFFF và kích thước là 14px .
Rồi gõ những chữ cần thiết như hình sau.
Và kết quả cuối cùng :
Chúc các bạn thành công !
login form photoshop tuts thiết kế
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
