Học thiết kế giao diện website với photoshop

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 ), giữ chuột và kéo 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 các tài liệu.

Học thiết kế giao diện website với photoshop

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 Size. 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 để tiêu đề của chúng tôi. Nhấn 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ụ dòng, tạo ra một dòng 5px đi qua toàn bộ tài liệu. Điều này sẽ đi ở dưới cùng của phần đầ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 bevel để 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 chúng ta 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 Single Row Marquee để ngay trên đỉnh của các tài liệu sử dụng # 009999 .

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 được điều này trước tiên bấm vào 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 từ các thước giữa các tài liệu. Khi bạn nhận được để giữa các hướng dẫn nên dính vào.

Bây giờ sử dụng các công cụ quả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 cùng với các 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, hãy nhấp và kéo một hướng dẫn 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 nhiều 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 khu vực lựa chọn.

Giữ phím shift, di chuyển hộp sang 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ữ thay đổi 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 đề"

Sử dụng các công cụ hình chữ nhật bo 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) click 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ó giống Bevel and Emboss như hộp. Bạn có thể làm điều này bằng cách kéo các phong cách từ các 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ớiControl + 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 để xem 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à tô 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à màu nền của bạn là màu đen và màu trắng, sau đó đi đến Filter> Noise> Add Noise . Thay đổi các thiết lập 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 đó nhấn Control + trên lớp 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ở menu 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 bom mìn ở 20%.

Bước 11
Chúng ta hãy thêm một số hướng. Để làm được điều này, chúng tôi lần đầu tiên được đi để thêm hướng dẫn khác. Sử dụng các công cụ tạo ra một vùng chọn hình vuông vuông đó là 120px rộng và đặt cạnh trái trên 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 dẫn trên 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 một hộp ở khu vực đó, trừ chắc chắn rằng để trên cùng của hộp, trong đó có các góc bo 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 các lớp vào các 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 là có được 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 bên trong "Nav" thư mục, 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 layer để 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
Chúng ta 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ó 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.

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 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 đen như foreground . 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 "Bảng điều khiển" thư mục 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 nên đặt nó chỉ tắt nút gốc.

Thay đổi cả các lớp văn bản để nói "Người sử 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.

Sidebar
Bước 17
Bây giờ nó là thời gian để bắt đầu trên sidebar. Đầu tiên cho phép bắt đầu bằng cách lấy Rounded Rectangular Tool, nhấp và kéo một hình vuông có cùng chiều rộng như hộp logo và một chiều cao một cái gì đó 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 nó đi ). Hãy chắc chắn rằng đầu được nghỉ ngơi trên những hướng dẫn ngang. Tô nó với màu #FFFFFF cho bây giờ.

Nhấp chuột 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. Được sự lựa chọn ngược với Control + Shift + I và điền vào khu vực này với màu đen. Điều này nên được thoát khỏi những khu vực chúng tôi không cần.

Chúng tôi sẽ bổ sung thêm các tiêu đề, do đó sử dụng công cụ Type, gõ "hệ thống tin nhắn".Di chuyển văn bản để hướng dẫn bên trái sau đó giữ phím Shift, di chuyển nó sang bên phải một không gian.

Bước 18
Chúng ta sẽ thêm một số phong cách layer để đầu sidebar 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à "Tin nhắn của hệ thống".

Bây giờ đi vào phong cách layer và thêm một Bevel and Emboss, chúng tôi cũng 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 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 đề cho "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ừ các ô được sắp 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 sidebar đầu tiên. Hãy bắt đầu bằng cách lấy các biểu tượng bong bóng nói chuyện. 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 của bạn nói chuyệ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 lạ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.

Bây giờ lấy các 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 giả: ". Lorem ipsum dolor sit Amet, consetetur sadipscing elitr, sed diam nonumy" Thay đổi font Verdana, kích thước phông chữ 10pt và màu sắc để # 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 giả vào một thư mục có tên "Message 1".

Bước 24
Lặp lại bước 23, và đưa 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 bong bóng nói chuyện với các 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 "Tạo New Message" đầu.

Bước 26
Bây giờ, để thêm các hình thức, tạo ra một thư mục mới có tên gọi "Form Message". Sử dụng các công cụ loại Viết ra "Subject:". Tôi đang sử dụng ITC Franklin Gothic Demi tại 13pt.

Tạo một hộp 229x30px bằng 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 các 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 được chọn.

Bước 28
Lặp lại bước 26 & 27, ngoại trừ các hộp màu trắng sẽ là 229x100px và thay vì "Subject:" nó sẽ nói "tin nhắn:".

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à đưa nó xuống năm không gian dưới hình thức của chúng tôi. Click 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à văn bản để # 33CCCC . Thay đổi các văn bản để nói "Gửi". Thêm một layer mask cho các 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 các 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.

Bây giờ cho các 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 chúng tôi "Để làm Danh sách thư mục". Shift và di chuyển văn bản xuống bốn lần. Bỏ chọn các tùy chọn gạch chân vào văn bản và thay thế "x" biểu tượng với "kiểm tra" các biểu tượng.

Học thiết kế giao diện website với photoshop

Bước 31
Chúng ta sẽ phải thêm "Để làm gì" và "Done" tab ở phía trên cùng của phần này trong thanh bên. Bản sao của "Gửi" nút thư mục 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 theo tab xuống sidebar của chúng tôi và di chuyển nó xuống năm không gian 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ó "Done". Thay đổi màu sắc để # 33CCCC và các văn bản để # 333333. Giữ phím Shift và di chuyển 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 layer "Create New Message" thư mục và đổi tên nó "Add New Item". Thay đổi các văn bản để "Add New Item" cũng có. Hãy chắc chắn rằng bạn lặp lại các ngắt dòng cũng.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 chúng tôi "Để làm Danh sách thư mục" (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 sidebar của chúng tôi.

Main
Bước 35
Lặp lại steps17-19, ngoại trừ thay vì chiều rộng 250px make nó 670px. Thay đổi tiêu đề để "mẫu mới".

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 & 27. Kích thước của phần đề của biểu mẫu là có được 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 một 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ẽ được 630x260px. Bản sao của "tin nhắn:" từ thanh bên.

Bản sao của "Gửi" nút 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.

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à đưa nó cho "Bàn" của hộp.Thay đổi các văn bản để nó nói "Apply". Đường lên các nút ở góc dưới bên phải, sau đó giữ phím Shift và di chuyển các 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 là "Tên" và chúng tôi sẽ bổ sung thêm các 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 là có được 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 không gian và hạ 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 như các font. Giữ phím Shift và di chuyển nó qua ba không 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" của chúng tôi thư mục.Thêm "Edit" để các "+" 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 là có được kích thước giống 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" năm lần nhiều hơn, lan rộng chúng ra để cuối cùng kết thúc một không gian trên các tab.

Bước 43
Kích 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ở ra các hình ảnh Bộ lọc 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.

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 một cái nhìn 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à click lên màn hình và tiêu đề cho mỗi bên và phần chính, điều hướng và tiêu đề màu xanh lá cây. Được sự 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 logo và điền vào các mặt nạ trên các kết cấu với màu đen. Điều này sẽ loại bỏ được 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.