Các ứng dụng web được phổ biến do sự có mặt khắp nơi của các trình duyệt web. Khả năng cập nhật và duy trì các ứng dụng web mà không cần phân phối và cài đặt phần mềm trên có khả năng hàng ngàn máy tính của khách hàng là một lý do quan trọng cho sự nổi tiếng của họ.
Một quản trị giao diện người dùng hiện đại và dễ sử dụng là chìa khóa cho sự thành công của các ứng dụng web. Chúng tôi sẽ cho bạn thấy thế nào để tạo một ứng dụng Web quản trị giao diện người dùng trong Photoshop . Vì vậy mà bạn có thể dễ dàng tạo ra các giao diện người dùng quản trị của riêng bạn cho các ứng dụng web của bạn.
Kết quả cuối cùng
Web này Ứng dụng Quản trị giao diện người dùng là những gì chúng tôi muốn làm. Bạn có thể click vào hình ảnh để xem phiên bản đầy đủ quy mô.
Web này Ứng dụng Quản trị giao diện người dùng là những gì chúng tôi muốn làm. Bạn có thể click vào hình ảnh để xem phiên bản đầy đủ quy mô.
Background
Bước 1
Tạo một tài liệu mới trong Photoshop đó là 1200x1112px. Điền vào nền với màu đen ( # 000000 ).
Sử dụng một Linear Gradient và một màu xám đen ( # 333333 ), click và kéo nó từ trên xuống dưới. Bạn muốn gradient của bạn để kết thúc khoảng một nửa con đường xuống tài liệu.
Tiêu đề
Bước 2
Sử dụng công cụ marquee, chúng ta sẽ làm cho một hộp 1200x77px. Để làm điều này click vào công cụ Marquee Tool và thay đổi các cài đặt kiểu để cố định Kích. Thay đổi kích thước để 1200x77px và nhấp chuột vào góc trên bên trái của tài liệu cho một điểm khởi đầu. Điền với # 33CCCC .
Bước 2
Sử dụng công cụ marquee, chúng ta sẽ làm cho một hộp 1200x77px. Để làm điều này click vào công cụ Marquee Tool và thay đổi các cài đặt kiểu để cố định Kích. Thay đổi kích thước để 1200x77px và nhấp chuột vào góc trên bên trái của tài liệu cho một điểm khởi đầu. Điền với # 33CCCC .
Bước 3
Bây giờ chúng ta sẽ thêm một Gradient Overlay cho phần đầu của chúng tôi. Nhấp vào biểu tượng đầu tiên từ trái vào dưới cùng của bảng layer, và click vào Gradient Overlay.
Bây giờ chúng ta sẽ thêm một Gradient Overlay cho phần đầu của chúng tôi. Nhấp vào biểu tượng đầu tiên từ trái vào dưới cùng của bảng layer, và click vào Gradient Overlay.
Bước 4
Sử dụng công cụ trực tuyến, tạo ra một dòng 5px đi qua toàn bộ tài liệu. Điều này sẽ đi ở phía dưới tiêu đề của chúng tôi. Thay đổi màu sắc để #CCCCCC .
Sử dụng công cụ trực tuyến, tạo ra một dòng 5px đi qua toàn bộ tài liệu. Điều này sẽ đi ở phía dưới tiêu đề của chúng tôi. Thay đổi màu sắc để #CCCCCC .
Bây giờ chúng ta sẽ tạo ra một cái nhìn côn với nó. Click vào Single Row Marquee Tool, và tạo ra một dòng trên cùng của dòng 5px của chúng tôi, chúng tôi vừa tạo ra. Điền rằng khu vực được lựa chọn với màu #FFFFFF . Tạo dòng khác ở phía dưới và điền với # 999999
Cuối cùng thêm một Marquee Single Row để phần trên của tài liệu sử dụng # 009.999 .
Bước 5
Chúng tôi muốn tạo ra một hộp 950px ở giữa các tài liệu, mà chúng ta sẽ xây dựng giao diện của chúng tôi xung quanh. Để làm nhấp chuột đầu tiên này trên layer background sau đó đi đến View> Snap và chắc chắn rằng nó được kiểm tra. Bây giờ hãy nhấp và kéo một hướng dẫn ra khỏi thước giữa các tài liệu. Khi bạn nhận được để giữa hướng dẫn nên dính vào.
Chúng tôi muốn tạo ra một hộp 950px ở giữa các tài liệu, mà chúng ta sẽ xây dựng giao diện của chúng tôi xung quanh. Để làm nhấp chuột đầu tiên này trên layer background sau đó đi đến View> Snap và chắc chắn rằng nó được kiểm tra. Bây giờ hãy nhấp và kéo một hướng dẫn ra khỏi thước giữa các tài liệu. Khi bạn nhận được để giữa hướng dẫn nên dính vào.
Bây giờ sử dụng công cụ quảng trường Marquee tạo một layer mới ( Ctrl + Shift + N ), và tạo ra một hình vuông đó là 950px rộng và 1112px cao. Điền với #FFFFFF . Khi bạn sử dụng các công cụ chuyển đổi ( Control + T ) sẽ có neo mà đi lên trên góc và ở giữa, đường lên các điểm neo giữa trên và dưới như hướng dẫn. Đi mà hướng dẫn bạn tạo ra và kéo nó qua phía bên phải của hộp chúng tôi tạo ra (nó nên gắn vào vị trí). Ngoài ra, nhấp và kéo dẫn khác bên trái của hộp. Bây giờ hãy nhấp và kéo layer hộp vào thùng rác (biểu tượng cuối cùng bên phải ở dưới cùng của bảng layer).
Bước 6
Trong khi chúng tôi đang ở đó, chúng ta sẽ thêm một số hướng dẫn hơn để có được bố trí cơ bản của thiết kế của chúng tôi.
Trong khi chúng tôi đang ở đó, chúng ta sẽ thêm một số hướng dẫn hơn để có được bố trí cơ bản của thiết kế của chúng tôi.
Sử dụng công cụ marquee vuông của bạn tạo ra một 250x1112px hộp để cạnh trái là hướng bên trái. Nhấp và kéo một hướng dẫn người sang bên phải của vùng chọn.
Giữ phím shift, di chuyển hộp trên bên trái một lần với các mũi tên trái. Đặt một hướng dẫn ở phía bên phải của vùng chọn.
Giữ chuyển một lần nữa, và di chuyển hộp trên bên phải hai lần. Đặt một hướng dẫn ở phía bên trái của vùng chọn.
Di chuyển hộp hơn hai lần, giữ phím shift, và đưa dẫn khác ở phía bên phải của hộp.
Bây giờ chúng ta sẽ thực hiện một hộp đó là 950x113px. Đặt nó ở trên cùng và đặt một hướng dẫn ở dưới cùng của hộp.
Bước 7
Trước khi chúng tôi đi thêm nữa, chúng tôi muốn bắt đầu tổ chức các lớp của chúng tôi. Vì vậy, tạo một thư mục mới (biểu tượng thứ ba từ bên trái ở dưới cùng của bảng layer) và gọi nó là "Tiêu đề"
Trước khi chúng tôi đi thêm nữa, chúng tôi muốn bắt đầu tổ chức các lớp của chúng tôi. Vì vậy, tạo một thư mục mới (biểu tượng thứ ba từ bên trái ở dưới cùng của bảng layer) và gọi nó là "Tiêu đề"
Sử dụng công cụ hình chữ nhật tròn, tạo một hộp với một bán kính 10px mà đi từ hướng bên trái để hướng dẫn thứ tư trong, và xuống để hướng dẫn mà đi qua. Điền với #CCCCCC .
Bước 8
Sử dụng phong cách layer (biểu tượng đầu tiên ở dưới cùng của bảng layer) bấm vào Inner Shadow. Điều này sẽ cung cấp cho chúng ta một cái nhìn đen tối trên các cạnh.
Sử dụng phong cách layer (biểu tượng đầu tiên ở dưới cùng của bảng layer) bấm vào Inner Shadow. Điều này sẽ cung cấp cho chúng ta một cái nhìn đen tối trên các cạnh.
Tiếp theo chúng ta sẽ thêm một Bevel and Emboss. Điều này sẽ làm cho hộp pop của chúng ta, giống như chúng ta đã làm với biên giới trên tiêu đề.
Cuối cùng, chúng ta sẽ thêm một Gradient Overlay. Điều này sẽ cung cấp cho chúng tôi một cạnh đen tối trên dưới cùng của hộp của chúng tôi.
Bước 9
Bây giờ bạn có thể thêm vào logo của bạn, và cung cấp cho nó cùng một Bevel and Emboss như hộp. Bạn có thể làm điều này bằng cách kéo các kiểu từ lớp hộp layer logo.
Bây giờ bạn có thể thêm vào logo của bạn, và cung cấp cho nó cùng một Bevel and Emboss như hộp. Bạn có thể làm điều này bằng cách kéo các kiểu từ lớp hộp layer logo.
Để cung cấp cho nó một cái nhìn nổi thêm, trước tiên bạn có thể sao chép logo của bạn với Control + J . Control và nhấn vào biểu tượng và điền nó với #CCCCCC . Di chuyển layer đó xuống hai không gian.
Bước 10
Chúng tôi sẽ cung cấp cho các hộp kim loại một cái nhìn vào nó. Để làm điều này chúng ta sẽ tạo một layer mới, sau đó tạo ra một hộp bằng cách sử dụng công cụ Marquee Tool và điền nó với màu đen. Kích thước không quan trọng, miễn là nó lớn hơn hộp của chúng tôi.
Chúng tôi sẽ cung cấp cho các hộp kim loại một cái nhìn vào nó. Để làm điều này chúng ta sẽ tạo một layer mới, sau đó tạo ra một hộp bằng cách sử dụng công cụ Marquee Tool và điền nó với màu đen. Kích thước không quan trọng, miễn là nó lớn hơn hộp của chúng tôi.
Hãy chắc chắn rằng foreground và background màu sắc là đen và trắng, sau đó đi đến Filter> Noise> Add Noise . Thay đổi cài đặt của bạn để một cái gì đó giống như những gì tôi có.
Sử dụng Control + U thả bão hòa tất cả các con đường xuống đến -100.
Đừng Control + D để bỏ chọn khu vực, sau đó đi đến Filter> Blur> Motion Blur .
Di chuyển kim loại, chúng tôi đang tạo ra trong hộp ban đầu. Sau đó làm Control + bấm vào layer hộp gốc, làm Control + Shift + I để nghịch đảo và xóa.
Thay đổi chế độ hòa trộn thành Soft Light. Mở trình đơn cấp với Control + L và mang lại trong các mũi tên trái và phải hướng tới các cạnh của đồ thị.
Sau đó thả Opacity xuống cho đến khi bạn có được một cái gì đó mà bạn thích. Tôi đặt mỏ ở mức 20%.
Bước 11
Hãy thêm một số hướng. Để làm điều này, chúng tôi được đầu tiên sẽ thêm hướng dẫn khác. Sử dụng công cụ marquee vuông tạo một hình vuông đó là 120px rộng và đặt cạnh trái về hướng dẫn cuối cùng ở phía bên trái của tài liệu. Kéo một hướng về phía bên phải của hộp.
Hãy thêm một số hướng. Để làm điều này, chúng tôi được đầu tiên sẽ thêm hướng dẫn khác. Sử dụng công cụ marquee vuông tạo một hình vuông đó là 120px rộng và đặt cạnh trái về hướng dẫn cuối cùng ở phía bên trái của tài liệu. Kéo một hướng về phía bên phải của hộp.
Trong hộp thoại mà chúng ta sẽ mất Rounded Rectangle Tool và tạo ra một hộp trong khu vực đó, ngoại trừ chắc chắn rằng để trên cùng của hộp, bao gồm cả các góc tròn đi trên tiêu đề.
Tạo một thư mục mới và gọi nó là "Nav". Thay đổi màu sắc của hộp # 33CCCC , và kéo lớp vào thư mục. Di chuyển thư mục bên dưới tiêu đề.
Bước 12
Các nút đầu tiên sẽ là nút "Bảng điều khiển" của chúng tôi, do đó tạo ra một thư mục mới trong thư mục "Nav", và gọi nó là "Bảng điều khiển".
Các nút đầu tiên sẽ là nút "Bảng điều khiển" của chúng tôi, do đó tạo ra một thư mục mới trong thư mục "Nav", và gọi nó là "Bảng điều khiển".
Bây giờ chúng ta sẽ thêm một số phong cách lớp để nút của chúng tôi. Vì vậy, cho phép thêm một Inner Glow và Bevel and Emboss. Điều này thực sự sẽ làm cho nút pop của chúng tôi.
Bước 13
Hãy thêm một số văn bản để nút của chúng tôi. Sử dụng công cụ Type, gõ chữ "Bảng điều khiển". Tôi đang sử dụng các font chữ ITC Franklin Gothic Demi tại 16pt. Hãy chắc chắn rằng bạn thực hiện văn bản các bạn cùng chiều rộng như các nút điều hướng và tâm văn bản.
Hãy thêm một số văn bản để nút của chúng tôi. Sử dụng công cụ Type, gõ chữ "Bảng điều khiển". Tôi đang sử dụng các font chữ ITC Franklin Gothic Demi tại 16pt. Hãy chắc chắn rằng bạn thực hiện văn bản các bạn cùng chiều rộng như các nút điều hướng và tâm văn bản.
Bước 14
Nhân đôi layer text với Control + J và thay đổi màu sắc để #CCCCCC . Di chuyển nó xuống hai không gian. Điều này sẽ cung cấp cho chúng ta một góc xiên cho những lời hướng.
Nhân đôi layer text với Control + J và thay đổi màu sắc để #CCCCCC . Di chuyển nó xuống hai không gian. Điều này sẽ cung cấp cho chúng ta một góc xiên cho những lời hướng.
Cuối cùng chúng ta sẽ thêm một bóng ở đầu nút của chúng tôi. Để làm được điều này và click vào layer nút để có được những lựa chọn, sau đó tạo một layer mới với Control + Shift + N . Bây giờ hãy nhấp vào công cụ Gradient và chắc chắn rằng bạn đã Linear Gradient được chọn, cũng như màu đen như foreground của bạn. Nhấp và kéo gradient từ trên xuống dưới cho đến khi bạn có được một cái gì đó mà bạn thích.
Bước 15
Kích chuột phải vào thư mục "Bảng điều khiển" và click vào Duplicate Layer Set. Đổi tên thư mục "Users".
Kích chuột phải vào thư mục "Bảng điều khiển" và click vào Duplicate Layer Set. Đổi tên thư mục "Users".
Giữ phím Shift , di chuyển các nút hơn 13 gian. Điều này sẽ đặt nó chỉ cần ra khỏi nút gốc.
Thay đổi cả các lớp văn bản để nói "Người dùng" và thay đổi hình nền để #CCCCCC .
Lặp lại điều này với "trang" và "Cài đặt". Vì vậy, bạn nên kết thúc với tổng số bốn nút.
Bước 16
Bây giờ chúng ta sẽ thêm các thông tin đăng nhập ở bên phải của trang web của chúng tôi.
Bây giờ chúng ta sẽ thêm các thông tin đăng nhập ở bên phải của trang web của chúng tôi.
Sidebar
Bước 17
Bây giờ là lúc để bắt đầu trên thanh bên. Đầu tiên cho phép bắt đầu bằng cách dùng Rounded Rectangular Tool, nhấp và kéo một hình vuông chiều rộng tương tự như hộp logo và một cái gì đó chiều cao giống như những gì tôi có (nó không phải là một độ cao nhất định bởi vì chúng tôi đang đi để che dấu nó đi ). Hãy chắc chắn rằng đầu được nghỉ ngơi trên các hướng ngang. Điền nó với màu #FFFFFF cho bây giờ.
Bước 17
Bây giờ là lúc để bắt đầu trên thanh bên. Đầu tiên cho phép bắt đầu bằng cách dùng Rounded Rectangular Tool, nhấp và kéo một hình vuông chiều rộng tương tự như hộp logo và một cái gì đó chiều cao giống như những gì tôi có (nó không phải là một độ cao nhất định bởi vì chúng tôi đang đi để che dấu nó đi ). Hãy chắc chắn rằng đầu được nghỉ ngơi trên các hướng ngang. Điền nó với màu #FFFFFF cho bây giờ.
Click vào layer mask (biểu tượng thứ hai từ bên trái trên bảng layer). Nhấp chuột vào công cụ marquee vuông và tạo ra một hình vuông 250x35px và đặt nó trên các hướng dẫn bên trái và ngang. Lấy lựa chọn ngược với Control + Shift + I và điền vào khu vực với màu đen. Điều này sẽ giúp loại bỏ các khu vực chúng tôi không cần.
Chúng tôi sẽ bổ sung thêm tiêu đề, vì vậy sử dụng Type Tool, gõ "hệ thống tin nhắn". Di chuyển văn bản để hướng dẫn bên trái sau đó giữ shift, di chuyển nó sang một bên phải không gian.
Bước 18
Chúng ta sẽ thêm một số phong cách lớp để đầu thanh bên của chúng tôi, nhưng trước khi chúng tôi làm điều đó, chúng tôi muốn tạo ra một thư mục mới và gọi nó là "hệ thống tin nhắn".
Chúng ta sẽ thêm một số phong cách lớp để đầu thanh bên của chúng tôi, nhưng trước khi chúng tôi làm điều đó, chúng tôi muốn tạo ra một thư mục mới và gọi nó là "hệ thống tin nhắn".
Bây giờ đi vào phong cách layer và thêm một Bevel and Emboss, còn chúng tôi sẽ cung cấp cho nó một lớp phủ Gradient.
Đi trước và thay đổi màu sắc của hộp # 333333 . Giữ phím Shift , di chuyển hộp xuống ba lần.
Bước 19
Sử dụng công cụ Marquee Quảng trường, tạo ra một hình vuông, 250x435px. Dòng nó lên ở hướng dẫn bên trái và ngang. Tạo một layer mới với Control + Shift + N và điền nó với #CCCCCC .
Sử dụng công cụ Marquee Quảng trường, tạo ra một hình vuông, 250x435px. Dòng nó lên ở hướng dẫn bên trái và ngang. Tạo một layer mới với Control + Shift + N và điền nó với #CCCCCC .
Thêm một Bevel and Emboss và giữ phím shift, di chuyển hộp chìm bảy gian.
Bước 20
Lặp lại bước 17, thay đổi tiêu đề để "To Do List" và đặt các lớp vào một thư mục mới có tên gọi "To Do List".
Lặp lại bước 17, thay đổi tiêu đề để "To Do List" và đặt các lớp vào một thư mục mới có tên gọi "To Do List".
Bước 21
Chúng ta sẽ lặp lại bước 19, trừ hộp sẽ thẳng hàng với các hướng dẫn trái và dưới cùng của "To Do List" đầu. Thay đổi chiều cao 340px và di chuyển hộp xuống năm không gian từ chỗ đó.
Chúng ta sẽ lặp lại bước 19, trừ hộp sẽ thẳng hàng với các hướng dẫn trái và dưới cùng của "To Do List" đầu. Thay đổi chiều cao 340px và di chuyển hộp xuống năm không gian từ chỗ đó.
Bước 22
Bây giờ chúng ta có thể bắt đầu tạo ra các thông tin bên trong thanh bên đầu tiên. Hãy bắt đầu bằng cách lấy các biểu tượng nói chuyện bong bóng. Tôi đã tạo ra một PNG trong suốt của tất cả các biểu tượng để bạn có thể sử dụng chúng . Bản sao của "hệ thống tin nhắn" tiêu đề và thay đổi màu sắc để # 333333 . và thay đổi nó "Tin nhắn gần đây". Đặt bong bóng nói chuyện của bạn bên cạnh các văn bản và đường lên các biểu tượng với các hướng dẫn trái. Giữ phím Shift và di chuyển nó qua một chỗ.
Bây giờ chúng ta có thể bắt đầu tạo ra các thông tin bên trong thanh bên đầu tiên. Hãy bắt đầu bằng cách lấy các biểu tượng nói chuyện bong bóng. Tôi đã tạo ra một PNG trong suốt của tất cả các biểu tượng để bạn có thể sử dụng chúng . Bản sao của "hệ thống tin nhắn" tiêu đề và thay đổi màu sắc để # 333333 . và thay đổi nó "Tin nhắn gần đây". Đặt bong bóng nói chuyện của bạn bên cạnh các văn bản và đường lên các biểu tượng với các hướng dẫn trái. Giữ phím Shift và di chuyển nó qua một chỗ.
Bước 23
Chúng ta hãy đi vào và thêm vào một cách theo "Tin nhắn gần đây". Để làm điều này, bấm vào công cụ Line Tool và tạo ra một dòng 1px ở giữa hai hướng dẫn bên trong.
Chúng ta hãy đi vào và thêm vào một cách theo "Tin nhắn gần đây". Để làm điều này, bấm vào công cụ Line Tool và tạo ra một dòng 1px ở giữa hai hướng dẫn bên trong.
Bây giờ lấy biểu tượng "x" màu đỏ và thiết lập nó một Shift + không gian hơn từ phía bên trái của thanh bên.
Thêm một số văn bản dummy: ". Lorem ipsum dolor ngồi Amet, tempor labore sadipscing trong những năm qua, diam sed" Thay đổi font Verdana, cỡ chữ 10pt và màu # 333333 . Để gạch dưới nó (vì chúng sẽ được liên kết) đánh dấu văn bản và mở ra các tùy chọn văn bản với Control + T , sau đó chọn tùy chọn gạch dưới.
Đặt biểu tượng và bản sao dummy vào một thư mục có tên "Message 1".
Bước 24
Lặp lại bước 23, và đặt các lớp trong một thư mục có tên "Message 2".
Lặp lại bước 23, và đặt các lớp trong một thư mục có tên "Message 2".
Bước 25
Để thêm các hình thức thông điệp chúng tôi được đầu tiên sẽ tạo ra một tiêu đề. Bản sao của "Tin nhắn gần đây" thư mục và thay thế các biểu tượng nói chuyện bong bóng với bong bóng nói chuyện và biểu tượng "+" màu xanh lá cây. Giữ phím Shift và di chuyển nó xuống mười lăm gian.
Để thêm các hình thức thông điệp chúng tôi được đầu tiên sẽ tạo ra một tiêu đề. Bản sao của "Tin nhắn gần đây" thư mục và thay thế các biểu tượng nói chuyện bong bóng với bong bóng nói chuyện và biểu tượng "+" màu xanh lá cây. Giữ phím Shift và di chuyển nó xuống mười lăm gian.
Ngoài ra, bản sao các ngắt dòng và di chuyển nó một shift + không gian xuống từ dưới cùng của "New Message tạo" đầu.
Bước 26
Bây giờ để thêm các hình thức, tạo một thư mục mới có tên gọi "tin nhắn mẫu". Sử dụng công cụ Type Viết ra "Chủ đề:". Tôi đang sử dụng ITC Franklin Gothic Demi tại 13pt.
Bây giờ để thêm các hình thức, tạo một thư mục mới có tên gọi "tin nhắn mẫu". Sử dụng công cụ Type Viết ra "Chủ đề:". Tôi đang sử dụng ITC Franklin Gothic Demi tại 13pt.
Tạo một hộp 229x30px sử dụng các công cụ marquee vuông và điền với màu #FFFFFF .
Bước 27
Bây giờ, chúng tôi sẽ cung cấp cho hộp một góc xiên. Để làm điều này chúng ta sẽ lặp lại trong các hộp màu trắng với Control + J . Kiểm soát và click vào layer, sau đó điền với # 333333 .
Bây giờ, chúng tôi sẽ cung cấp cho hộp một góc xiên. Để làm điều này chúng ta sẽ lặp lại trong các hộp màu trắng với Control + J . Kiểm soát và click vào layer, sau đó điền với # 333333 .
Bây giờ chắc chắn rằng bạn có những công cụ marquee nhấp, và di chuyển xuống và mỗi bên phải một không gian. Sau đó, xóa vùng chọn.
Bước 28
Lặp lại bước 26 & 27 trừ hộp màu trắng sẽ là 229x100px và thay vì "Chủ đề:" nó sẽ nói "Thông báo:".
Lặp lại bước 26 & 27 trừ hộp màu trắng sẽ là 229x100px và thay vì "Chủ đề:" nó sẽ nói "Thông báo:".
Bước 29
Bây giờ chúng ta sẽ tạo một nút "Gửi". Bản sao của "Người dùng" thư mục từ các nút điều hướng, và mang nó xuống năm không gian dưới hình thức của chúng tôi. Nhấp và kéo các lớp bóng và các lớp văn bản màu xám ánh sáng từ hướng vào thùng rác.
Bây giờ chúng ta sẽ tạo một nút "Gửi". Bản sao của "Người dùng" thư mục từ các nút điều hướng, và mang nó xuống năm không gian dưới hình thức của chúng tôi. Nhấp và kéo các lớp bóng và các lớp văn bản màu xám ánh sáng từ hướng vào thùng rác.
Thay đổi màu sắc của các nút để # 333333 và các văn bản để # 33CCCC . Thay đổi văn bản để nói "Gửi". Thêm một layer mask cho nút. Bây giờ lấy công cụ marquee của bạn và tạo ra một hộp vậy phía dưới của hộp là ở dưới cùng của hình thức tin nhắn. Di chuyển hộp marquee xuống năm không gian và tô với màu đen.
Di chuyển văn bản xuống bốn không gian.
Bước 30
Lặp lại các bước từ 17-19, ngoại trừ thay đổi kích thước hộp 250x336px.
Lặp lại các bước từ 17-19, ngoại trừ thay đổi kích thước hộp 250x336px.
Bây giờ cho các thanh bên dưới, chúng tôi muốn lặp lại trong hai thư mục tin nhắn và đưa chúng vào "To Do List" thư mục của chúng tôi. Shift và di chuyển văn bản xuống bốn lần. Bỏ nhấp tùy chọn gạch chân vào văn bản và thay thế "x" biểu tượng với các biểu tượng "kiểm tra".
Bước 31
Chúng ta sẽ thêm "Để làm gì" và "Done" các tab ở trên cùng của phần này của các bên. Nhân đôi nút thư mục "Gửi" và thay đổi tên để "Để làm gì". Đi vào thư mục đó và tìm thấy những nút thực tế. Chúng tôi đang đi để xoay nó 180 độ.
Chúng ta sẽ thêm "Để làm gì" và "Done" các tab ở trên cùng của phần này của các bên. Nhân đôi nút thư mục "Gửi" và thay đổi tên để "Để làm gì". Đi vào thư mục đó và tìm thấy những nút thực tế. Chúng tôi đang đi để xoay nó 180 độ.
Mang tab xuống bên chúng tôi và di chuyển nó xuống năm không gian và nghỉ ngơi trên các hướng dẫn thứ hai từ bên trái.
Bước 32
Nhân đôi layer "để làm" thư mục và đổi tên nó "Xong". Thay đổi màu sắc để # 33CCCC và các văn bản để # 333333. Giữ phím Shift và di chuyển các nút "Done" chín lần.
Nhân đôi layer "để làm" thư mục và đổi tên nó "Xong". Thay đổi màu sắc để # 33CCCC và các văn bản để # 333333. Giữ phím Shift và di chuyển các nút "Done" chín lần.
Duplicate một trong ngắt dòng của bạn và di chuyển nó để nó được nghỉ ngơi trên dưới cùng của các tab.
Bước 33
Nhân đôi "Create New Message" thư mục và đổi tên nó "Add New Item". Thay đổi văn bản để "Add New Item" cũng có. Hãy chắc chắn rằng bạn lặp lại ngắt dòng cũng có. Giữ phím Shift và giữ tiêu đề này xuống mười bốn lần.
Nhân đôi "Create New Message" thư mục và đổi tên nó "Add New Item". Thay đổi văn bản để "Add New Item" cũng có. Hãy chắc chắn rằng bạn lặp lại ngắt dòng cũng có. Giữ phím Shift và giữ tiêu đề này xuống mười bốn lần.
Bước 34
Nhân đôi phần thông điệp của các hình thức và các nút gửi. Mang chúng vào "To Do List" thư mục của chúng tôi (trừ các "tin nhắn:"). Giữ phím Shift và di chuyển xuống hai không gian từ các ngắt dòng. Thay đổi nút từ "Gửi" để "Add".
Nhân đôi phần thông điệp của các hình thức và các nút gửi. Mang chúng vào "To Do List" thư mục của chúng tôi (trừ các "tin nhắn:"). Giữ phím Shift và di chuyển xuống hai không gian từ các ngắt dòng. Thay đổi nút từ "Gửi" để "Add".
Điều đó sẽ làm điều đó cho bên chúng tôi.
Main
Bước 35
Lặp lại steps17-19, ngoại trừ thay vì chiều rộng 250px làm cho nó 670px. Thay đổi tiêu đề "New Form".
Bước 35
Lặp lại steps17-19, ngoại trừ thay vì chiều rộng 250px làm cho nó 670px. Thay đổi tiêu đề "New Form".
Bước 36
Bây giờ, thêm các hình thức để phần chính của chúng tôi. Để làm điều này chúng ta sẽ lặp lại bước 26 và 27. Kích thước của phần đề của hình thức sẽ là 630x30px. Giữ phím Shift và di chuyển hộp xuống năm lần.
Bây giờ, thêm các hình thức để phần chính của chúng tôi. Để làm điều này chúng ta sẽ lặp lại bước 26 và 27. Kích thước của phần đề của hình thức sẽ là 630x30px. Giữ phím Shift và di chuyển hộp xuống năm lần.
Trên hộp, chúng tôi sẽ tạo ra một tiêu đề gọi là "chủ đề" bằng cách sao chép "Subject" từ thanh bên.
Bước 37
Chúng ta sẽ thêm hộp khác cho "Message". Một lần nữa, lặp lại bước 26 & 27. Hộp này sẽ là 630x260px. Bản sao của "tin nhắn:" từ thanh bên.
Chúng ta sẽ thêm hộp khác cho "Message". Một lần nữa, lặp lại bước 26 & 27. Hộp này sẽ là 630x260px. Bản sao của "tin nhắn:" từ thanh bên.
Nhân đôi nút "Gửi" từ thanh bên và dòng nó lên với phía bên phải của hộp.
Bước 38
Lặp lại các bước 17-19 để có được những tiêu đề và bảng. Bảng sẽ được 670x336px.
Lặp lại các bước 17-19 để có được những tiêu đề và bảng. Bảng sẽ được 670x336px.
Bước 39
Bây giờ chúng ta sẽ lặp lại vào nút "Add" từ thanh bên dưới và mang nó cho "Bàn" hộp của chúng tôi. Thay đổi các văn bản để nó nói "Apply". Đường dây lên các nút ở góc dưới bên phải, sau đó giữ Shift và di chuyển nút lên một và sang trái hai lần.
Bây giờ chúng ta sẽ lặp lại vào nút "Add" từ thanh bên dưới và mang nó cho "Bàn" hộp của chúng tôi. Thay đổi các văn bản để nó nói "Apply". Đường dây lên các nút ở góc dưới bên phải, sau đó giữ Shift và di chuyển nút lên một và sang trái hai lần.
Bước 40
Tạo một thư mục mới có tên gọi "Tên" và chúng tôi sẽ bổ sung thêm những dòng đầu tiên của bảng.
Tạo một thư mục mới có tên gọi "Tên" và chúng tôi sẽ bổ sung thêm những dòng đầu tiên của bảng.
Đầu tiên chúng ta sẽ thêm một hộp kiểm tra. Để làm điều này chúng ta sẽ lặp lại bước 26 & 27, ngoại trừ hộp sẽ là 12x12px.
Giữ phím Shift và di chuyển các hộp kiểm tra từ góc trên bên trái, qua ba gian và xuống hai.
Bước 41
Bây giờ đặt bất kỳ tên nào bạn muốn. Tôi sẽ đặt mìn tại 15pt với Verdana làm font. Giữ phím Shift và di chuyển nó qua ba gian từ hộp kiểm tra.
Bây giờ đặt bất kỳ tên nào bạn muốn. Tôi sẽ đặt mìn tại 15pt với Verdana làm font. Giữ phím Shift và di chuyển nó qua ba gian từ hộp kiểm tra.
Đi theo "+" biểu tượng và biểu tượng "x" và mang lại thành "Bàn" thư mục của chúng tôi. Thêm "Edit" để biểu tượng "+" và "Delete" để biểu tượng "x". Thay đổi màu sắc của văn bản để # 666666 .
Di chuyển mà cả nhóm hơn ba không gian từ cánh phải, giữ shift.
Thêm địa chỉ e-mail ở giữa tên và "Add" với một đậm # CC3333 Verdana.
Thêm một phá vỡ dưới dòng tên. Điều này sẽ có cùng kích thước như các hình thức trong các "mẫu mới" hộp.
Bước 42
Nhân đôi layer "Tên thư mục" gấp năm lần, trải chúng ra để cuối cùng kết thúc một không gian trên các tab.
Nhân đôi layer "Tên thư mục" gấp năm lần, trải chúng ra để cuối cùng kết thúc một không gian trên các tab.
Bước 43
Nhấn vào layer trên cùng, sau đó nhấn vào biểu tượng thứ tư từ bên trái ở dưới cùng của bảng layer. Mở Photo Filter và thay đổi bộ lọc để Sepia.
Nhấn vào layer trên cùng, sau đó nhấn vào biểu tượng thứ tư từ bên trái ở dưới cùng của bảng layer. Mở Photo Filter và thay đổi bộ lọc để Sepia.
Bước 44
Để tạo chân, chúng tôi chỉ đơn giản là đi lặp lại trong các "Header" thư mục và kéo tất cả mọi thứ vào thùng rác ngoại trừ # CC3333 và thanh trắng. Xoay thư mục 180 độ và mang lại cho nó tất cả các con đường xuống phía dưới cùng của tài liệu của chúng tôi.
Để tạo chân, chúng tôi chỉ đơn giản là đi lặp lại trong các "Header" thư mục và kéo tất cả mọi thứ vào thùng rác ngoại trừ # CC3333 và thanh trắng. Xoay thư mục 180 độ và mang lại cho nó tất cả các con đường xuống phía dưới cùng của tài liệu của chúng tôi.
Thêm thông tin Footer của bạn ở góc dưới bên trái.
Bước 45
Để cung cấp cho các trang web xem grungy chúng ta sẽ đi và tải về một kết cấu từ Zen Textures (http://www.unsigneddesign.com/film/4.jpg). Mang kết cấu thành kích thước quảng cáo tài liệu của chúng tôi nó để nó phù hợp với toàn bộ khu vực.
Để cung cấp cho các trang web xem grungy chúng ta sẽ đi và tải về một kết cấu từ Zen Textures (http://www.unsigneddesign.com/film/4.jpg). Mang kết cấu thành kích thước quảng cáo tài liệu của chúng tôi nó để nó phù hợp với toàn bộ khu vực.
Thay đổi chế độ hòa trộn thành Soft Light và giảm Opacity xuống 50%.
Giữ phím điều khiển và bấm vào nền và tiêu đề cho mỗi bên và phần chính, chuyển hướng và tiêu đề màu xanh lá cây. Lấy lựa chọn ngược với Control + Shift + I và xóa.
Kiểm soát và Nhấp chuột vào hộp xung quanh biểu tượng và điền vào các mặt nạ trên với màu đen. Điều này sẽ giúp loại bỏ các kết cấu trên hộp đó.
Cuối cùng, chúng tôi muốn được thoát khỏi các kết cấu trong các khoảng trống giữa các tiêu đề và các #CCCCCC nền.
Cuối cùng, chúng tôi muốn được thoát khỏi các kết cấu trong các khoảng trống giữa các tiêu đề và các #CCCCCC nền.
Kết quả cuối cùng
Nếu bạn theo throgh hướng dẫn, bạn nên kết thúc với một cái gì đó như thế này.
Nếu bạn theo throgh hướng dẫn, bạn nên kết thúc với một cái gì đó như thế này.
Hy vọng bạn thích hướng dẫn này. Xin vui lòng để lại comment và cho chúng tôi biết ý kiến của bạn. Bạn có muốn thêm các hướng dẫn Photoshop như thế này?
Download: PSD Source File
Về tác giả
Tyler Denis là một nhà thiết kế tự do bán thời gian từ Ashland, New Hampshire. Ông cũng là tác giả / nhà văn của blog thiết kế Denis Designs / blog , một trang web dành riêng để mang hướng dẫn chất lượng và cảm hứng. Bạn có thể theo anh ta trên Twitter hoặc tại trang web cá nhân của mình, Denis Designs .
Tyler Denis là một nhà thiết kế tự do bán thời gian từ Ashland, New Hampshire. Ông cũng là tác giả / nhà văn của blog thiết kế Denis Designs / blog , một trang web dành riêng để mang hướng dẫn chất lượng và cảm hứng. Bạn có thể theo anh ta trên Twitter hoặc tại trang web cá nhân của mình, Denis Designs .
Nguồn: webappers.com.
EmoticonEmoticon