Thiết kế bố cục blog sạch sẽ và thanh lịch trong Photoshop CS6

Trong hướng dẫn này tôi sẽ chỉ cho bạn quá trình làm một blog thiết kế đơn giản và sạch sẽ sử dụng Photoshop mới nhất. Chúng tôi sẽ sử dụng mới Phong cách nhân vật và Kiểu đoạn văn để giúp chúng tôi hợp lý hóa quy trình.

Để làm theo hướng dẫn này, bạn sẽ cần các tài nguyên sau:

• Phông chữ miễn phí từ Bernd Montag.
• 26 Mẫu pixel có thể lặp lại từ PSDfreemium.
• Biểu tượng truyền thông xã hội miễn phí từ Daniele Selvitella.

• Bản giới thiệu

Chuẩn bị Canvas

Bước 1

Trong thiết kế này, chúng tôi sẽ sử dụng 960 gs làm khung. Tải xuống mẫu từ trang chính của nó và bên trong tệp zip, tìm kiếm tệp photoshop. Mở tệp '12 Cột lưới 'trong Photoshop.

Nhấp vào biểu tượng con mắt cho lớp Lưới 12 Col để ẩn nó; bây giờ chúng ta sẽ không cần nó.

Bước 2

Kích thước vải hiện tại quá nhỏ. Nhấp chuột Hình ảnh> Kích thước Canvas (hoặc Ctrl + Alt + C). Thêm kích thước lớn hơn và đảm bảo đặt điểm neo của nó ở giữa.

Bước 3

Nhấn Ctrl + R để hiển thị thước kẻ. Nhấp chuột Xem> Mới Hướng dẫn làm hướng dẫn mới sẽ giúp chúng tôi thiết kế chính xác. Lựa chọn Theo chiều dọc và tại Vị trí: 185 px để tạo một hướng dẫn dọc 185 px từ góc trên cùng bên trái.

Bước 4

Vẽ một hướng dẫn dọc khác tại vị trí 150 px, 1095 px và 1130 px.

Dưới đây là hướng dẫn cuối cùng của chúng tôi bên trong khung vẽ.

Chuẩn bị chủ đề màu sắc

Bước 5

Đối với thiết kế này, chúng tôi sẽ sử dụng một sự kết hợp màu sắc đẹp từ Colorlodar. Nhấp vào liên kết Xem trước để mở tổ hợp màu dưới dạng tệp jpeg.

Lưu kết hợp màu sắc và đặt nó bên trong tệp Photoshop. Bằng cách đặt hình ảnh trực tiếp bên trong khung vẽ, chúng ta có thể lấy mẫu màu của nó nhanh hơn và dễ dàng hơn.

Chuẩn bị nền

Bước 6

Lựa chọn Lý lịch lớp và nhấp vào biểu tượng khóa trên đầu bảng điều khiển Lớp để mở khóa. Nhấp đúp vào hình thu nhỏ để thay đổi màu sắc của nó.

Nhấp vào màu thứ hai, # 948371, để chọn nó.

Bước 7

Vẽ một hình chữ nhật trên đầu của khung vẽ. Đây sẽ là nền tảng thứ hai.

Bước 8

Giữ hình dạng đã chọn. bên trong Thanh tùy chọn, mở Lấp đầy Màu và sau đó nhấp vào hộp biểu tượng bánh xe màu. Khi hộp thoại Color Picker được mở, nhấp vào màu đầu tiên để chọn nó. Cho mình Cú đánh chọn màu không ai.

Bước 9

Tạo một layer mới và sau đó chọn canvas phía trên bằng công cụ marquee hình chữ nhật. Kích hoạt công cụ gradient và điền vào nó với xuyên tâm dốc từ trắng sang đen. Hãy chắc chắn rằng gradient được căn giữa trên cùng của khung vẽ.

Thay đổi nó trộn chế độ đến Màn và giảm nó Độ mờ đục đến 37%.

Bước 10

Tạo một layer mới và đặt tên là 'bóng'.

Vẽ một lựa chọn hình chữ nhật ở dưới cùng của nền thứ cấp như được hiển thị. Nhấp chuột Chỉnh sửa và điền. Bộ Sử dụng đến Đen. Nhấp chuột được để điền vào lựa chọn với màu đen.

Bước 11

Làm mềm nó bằng Gaussian Blur. Nhấp chuột Bộ lọc> Làm mờ> Làm mờ Gaussian.

Bước 12

Giữ phím Alt và sau đó đặt con trỏ ở giữa bóng và nền trên lớp. Không cần nhả phím Alt, bấm vào chuyển đổi lớp thành Clipping Mask. Bằng cách chuyển đổi nó thành Clipping Mask, bóng bây giờ đi vào bên trong nền phía trên.

Bước 13

Mang bóng xuống Độ mờ đục đến 50% để làm cho nó tinh tế. Dưới đây, bạn có thể thấy kết quả ở độ phóng đại 100%.

Bước 14

Luôn luôn là một ý tưởng tốt để đặt các lớp này trong một nhóm. Để làm điều này, chọn tất cả các lớp và sau đó nhấp Ctrl + G.

Tiêu đề

Bước 15

Vẽ một hình chữ nhật trên khung vẽ phía trên như hình.

Bước 16

bên trong Thanh tùy chọn, bộ Cú đánh màu để # af9f8e.

Bước 17

Cho mình Lấp đầy chọn màu độ dốc tuyến tính từ # d0c4b9 đến # a89c91.

Dưới đây là kết quả trong chế độ xem 100%.

Tên trang web

Bước 18

Thêm tên của trang web ở bên trái của thiết kế. Quan sát vị trí như hình dưới đây. Nhấp đúp chuột vào văn bản và thêm Thả bóng. Đối với phông chữ của nó, sử dụng Sansation.

Thực đơn

Bước 19

Vẽ các menu ở phía bên kia của thanh menu. Sử dụng phông chữ Sansation 14 pt. Một lần nữa, hãy chú ý các vị trí.

Bước 20

Đối với menu hoạt động, đặt loại phông chữ của nó thành đậm.

Bước 21

Kích hoạt Công cụ đa giác và thiết lập Bên đến 3. Vẽ một hình tam giác với Điền: # 3d3123 và Đột quỵ: Không. Thêm vào Kiểu lớp > Thả bóng.

Bước 22

Hãy nhấn mạnh menu hoạt động bằng cách thêm một dòng bên dưới nó. Kích hoạt Công cụ đường dây và đặt trọng lượng của nó thành 5 px. Lựa chọn # f76b6a cho Fill của nó, không có Stroke.

Đặt dòng ngay bên dưới menu hoạt động và thêm không gian 1 px vào dưới cùng của thanh menu.

Sử dụng kiểu ký tự

Bước 23

Hãy lưu cài đặt ký tự dưới dạng Kiểu ký tự. Tính năng này là phiên bản đơn giản của Kiểu ký tự trong InDesign. Để lưu nó, kích hoạt văn bản và sau đó nhấp vào biểu tượng 'Kiểu ký tự mới'.

Nhấp đúp vào Kiểu ký tự mới và sử dụng cài đặt sau.

Bước 24

Chọn menu khác và sau đó nhấp vào Kiểu ký tự để áp dụng nó. Nếu bạn tìm thấy một dấu cộng bên cạnh Kiểu ký tự, điều đó có nghĩa là nhân vật đó có một cài đặt khác. Để ghi đè cài đặt, nhấp vào biểu tượng mũi tên tròn.

Bước 25

Lặp lại bước trước để tạo Kiểu ký tự mới cho menu hoạt động.

Bước 26

Vậy, quan điểm của việc sử dụng Kiểu nhân vật là gì? Kiểu nhân vật giúp chúng ta tập trung cài đặt nhân vật. Chúng ta chỉ cần chỉnh sửa Kiểu ký tự để chỉnh sửa mọi văn bản bằng kiểu đó. Xem một ví dụ dưới đây. Nếu chúng tôi chỉnh sửa loại phông chữ bên trong Kiểu ký tự Menu trên cùng - Bình thường thành Corbel, tất cả các menu bình thường sẽ tự động được đổi thành Corbel.

Bước 27

Tạo một layer mới và đặt nó dưới thanh menu. Ctrl-bấm vào thanh menu để thực hiện lựa chọn mới dựa trên hình dạng của nó. Điền vào nó với đen.

Bước 28

Xóa lựa chọn bằng Ctrl + D. Làm mềm nó bằng cách thêm Gaussian Blur, Bộ lọc> Làm mờ> Làm mờ Gaussian.

Thanh trượt

Bước 29

Vẽ một hình chữ nhật với chiều rộng 10 cột (xem bên dưới).

Cho mình Tô màu lựa chọn # dfd1c2. Cho mình Cú đánh lựa chọn # c8baac với kích thước 10 pt. Nhấp vào mũi tên thả xuống nhỏ bên cạnh xem trước dòng và đảm bảo Căn chỉnh bên trong đã được chọn.

Bước 30

Dán một hình ảnh trên đầu khung. Chuyển đổi nó thành Clipping Mask bằng cách nhấn Ctrl + Alt + G. Ảnh sẽ tự động đi vào khung trượt. Nếu cần, bạn có thể di chuyển và thay đổi kích thước hình ảnh mà không ảnh hưởng đến khung hình của nó.

Bước 31

Vẽ một hình chữ nhật khác phía sau thanh trượt với cùng màu. Hãy chắc chắn để chụp nó vào hướng dẫn ngoài cùng. Thêm vào Kiểu lớp> Lớp phủ mẫu sử dụng mẫu pixel từ PSDfreemium. Giảm âm Độ mờ đục để làm cho nó tinh tế.

Bước 32

Vẽ một hình chữ nhật trên hình với Điền: # b3aca5 và không đột quỵ. Nhấn Ctrl + T và sau đó xoay nó 45 °. Chuyển đổi hình dạng lớp thành Clipping Mask.

Bước 33

Nhân đôi hình dạng và thay đổi kích thước của nó. Thay đổi nó Lấp đầy đến một màu tối hơn. Chuyển đổi hình dạng lớp thành Clipping Mask.

Bước 34

Lặp lại bước tương tự để vẽ một mũi tên khác ở phía bên kia.

Bước 35

Ctrl-click vào khung trượt để thực hiện lựa chọn mới. Tạo một layer mới và chuyển đổi nó thành một Clipping Mask. Điền vào lựa chọn với đen.

Bước 36

Bỏ chọn (Ctrl + D) rồi làm mềm nó sử dụng Gaussian Blur.

Bạn có thể giảm bóng Opacity nếu cần.

Bước 37

Vẽ một hình chữ nhật tròn trên góc của thanh trượt với Điền # c8baac.

Bước 38

Vẽ một vòng tròn bên trong hình. Đặt nó Cú đánh đến đen với kích thước 1 pt và loại bỏ điền.

Bước 39

Chọn vòng tròn đường dẫn sử dụng Lựa chọn đường dẫn dụng cụ. Shift + Alt-kéo đường dẫn để nhân đôi nó.

Lặp lại điều này để vẽ thêm vòng tròn.

Bước 40

Chọn một trong các đường dẫn vòng tròn. Nhấn Ctrl + Shift + J để cắt nó sang một lớp mới.

Bước 41

bên trong Thanh tùy chọn, loại bỏ nó Cú đánh và thay đổi nó Lấp đầy đến một xuyên tâm độ dốc từ # e38989 đến # bb5c5c. Thêm vào Kiểu lớp> Glow ngoài và Thả bóng.

Bước 42

Vẽ một lựa chọn hình elip dưới thanh trượt. Tạo một layer mới và điền nó với đen.

Bước 43

Bỏ chọn (Ctrl + D). Làm mềm nó bằng cách sử dụng Gaussian Blur.

Nền dưới

Bước 44

Vẽ một hình chữ nhật khác cho nền dưới cùng. Sử dụng tương tự Lấp đầy và Cú đánh màu sắc như hình dạng thanh trượt.

Như mọi khi, hãy rất thận trọng với vị trí của nó. Chúng tôi muốn nó bao gồm mọi hướng dẫn trên vải.

Thêm vào Kiểu lớp> Lớp phủ mẫu.

Dưới đây là kết quả phóng đại 100%.

Bước 45

Chọn khu vực uper của nó bằng công cụ Ripse Marquee.

Bước 46

Tạo một layer mới, đặt nó phía sau hình dạng. Điền vào lựa chọn với đen. Nhấn Ctrl + T, nhấp chuột phải và chọn Phối cảnh.

Kéo các góc trên của nó ra ngoài.

Nhấp chuột phải lần nữa và chọn Tỉ lệ. Kéo tay cầm phía trên xuống.

Nhấp chuột phải và chọn Làm cong. Kéo phân đoạn trái và phải vào trong.

Làm mềm nó bằng cách sử dụng Gaussian Blur.

Giảm âm Độ mờ đục đến 20%.

Bước 47

Vẽ một chỉnh lưu màu trắng bên trong nền. Đây sẽ là nền tảng cho nội dung chính của trang web.

Thêm một không gian 10 px ở bên trái, bên phải và phía trên của nền. Khoảng cách nên dễ dàng vì chúng tôi đã thực hiện hướng dẫn trong các bước đầu. Thêm vào Kiểu lớp> Glow ngoài.

Bước 48

Thêm một hướng dẫn mới, 25 px từ phía trên của hình.

Mục tiêu đề

Bước 49

Thêm Kiểu ký tự mới cho tiêu đề của phần trang và mô tả của nó.

Thêm tiêu đề phần và mô tả của nó bằng cách sử dụng công cụ Type. Áp dụng các phong cách chúng tôi đã thực hiện trước đó. Đảm bảo thêm không gian 25 px từ phía trên của nền với sự trợ giúp từ hướng dẫn đã thực hiện trước đó.

Bước 50

Vẽ một dòng 5 px theo mô tả của trang web với Điền: # 938270 và Đột quỵ: Không.

Bài viết trên blog

Bước 51

Tạo kiểu nhân vật khác cho tiêu đề bài.

Bước 52

Thêm tiêu đề bài viết và áp dụng Kiểu nhân vật trước đó.

Bước 53

Vẽ một hình chữ nhật dưới tiêu đề với chiều rộng 4 cột. Bộ trắng cho mình Lấp đầy và #bebebe cho mình Cú đánh. Thêm vào Kiểu lớp> Stroke.

Bước 54

Dán một hình ảnh trên đầu của hình dạng. Chuyển đổi nó thành Clipping Mask (Ctrl + Alt + G).

Bước 55

Vẽ một hình chữ nhật tròn với Điền: # 8e8380 và Đột quỵ: Không. Chuyển đổi nó thành Clipping Mask.

Bước 56

Tạo kiểu ký tự mới cho siêu dữ liệu blog.

Bước 57

Thêm văn bản siêu dữ liệu trên đầu hình và áp dụng Kiểu ký tự mà chúng ta đã tạo trước đó.

Bước 58

Kích hoạt Kiểu công cụ và nhấp chuột kéo để tạo một hộp văn bản. Đặt chiều rộng của nó thành 4 cột. Nhấp chuột Loại> Dán Lorem Ipsum để lấp đầy nó với Lorem Ipsum được tạo tự động từ Photoshop.

Bước 59

Tạo kiểu đoạn văn mới cho nội dung nhân vật. Nhấp vào biểu tượng mới trên bảng Kiểu đoạn văn.

Nhấp đúp vào Kiểu đoạn văn và sử dụng cài đặt sau đây.

Bước 60

Áp dụng phong cách này cho nội dung bài. Bạn cũng có thể thử nghiệm với các cài đặt thụt lề và Khoảng cách của nó.

Đối với thiết kế web, hủy kích hoạt Dấu gạch nối.

Bước 61

Vẽ một hình chữ nhật tròn với Điền: # 8e8380 và Đột quỵ: Không. Thêm vào Kiểu lớp> Lớp phủ mẫu. Để thống nhất, sử dụng cùng một mẫu như trong thanh trượt.

Bước 62

Thêm một nhãn nút. Tôi đề nghị bạn lưu nó như một phong cách nhân vật. Bằng cách này, chúng ta có thể sử dụng nó dễ dàng cho các nút khác.

Bước 63

Nút trước là cho điều kiện bình thường. Hãy nhân đôi nó và thay đổi màu sắc của nó thành # f76b6a. Ngoài ra, đặt loại nhãn của nó thành đậm.

Bước 64

Đặt bài đăng trong một nhóm và sau đó nhấn Ctrl + J để nhân đôi nó. Kéo và kéo để nhân đôi nhóm.

Lặp lại cùng một bước để tạo thêm bài viết. Nhớ thay đổi hình ảnh và tiêu đề của mỗi bài.

Bước 65

Bản sao Đọc thêm nút và thay đổi nhãn của nó thành số. Chúng tôi sẽ sử dụng nó để điều hướng trang. Nhớ đặt một trong các nút thành điều kiện di chuột.

Bước 66: Chân trang

Hãy bắt đầu làm việc trên chân trang. Thêm một tiêu đề widget và mô tả của nó.

Bước 67

Thêm liên kết và vẽ một dòng 1 px bên dưới nó. Bộ Điền: Không và Đột quỵ: # 8e8380.

Bước 68

Nhấp chuột Lựa chọn khác nút và chọn vạch đứt.

Bước 69

Thêm nhiều liên kết vào widget.

Bước 70

Sao chép widget.

Bước 71

Chúng ta cũng cần thêm điều kiện di chuột. Đặt một trong các liên kết thành đậm.

Bên dưới liên kết hoạt động đó, thêm một dòng 5 px. Đặt màu của nó thành # f76b6a. Để thống nhất, sự xuất hiện của liên kết này tương tự như menu hoạt động trên thanh menu.

Bước 72

Thêm một hình chữ nhật khác ở khu vực thấp hơn. Đặt nó Lấp đầy đến # 3d3123.

Thông tin chân trang

Bước 73

Thêm thông tin chân trang bằng cách sử dụng Kiểu dụng cụ. Cho nó một bóng tối Thả bóng để thêm độ tương phản với nền của nó.

Mạng xã hội

Bước 74

Thêm một số biểu tượng phương tiện truyền thông xã hội từ Daniele Selvitella. Thêm vào Kiểu lớp> Glow ngoài.

Bước 75

Giảm biểu tượng bình thường xuống 50%. Đối với điều kiện di chuột, hãy giữ nó Độ mờ đục tại 100%.

Bước 76

Lấy biểu tượng con trỏ bàn tay miễn phí và đặt con trỏ bàn tay nhỏ nhất phía trên liên kết hoạt động hoặc di chuột.

Kết quả cuối cùng

Đây là kết quả cuối cùng của chúng tôi. Bạn có thể thấy rằng phiên bản Photoshop mới nhất có một số tính năng thú vị để thiết kế bố cục web. Kiểu ký tự và Kiểu đoạn văn là một cải tiến đáng kể cho mỗi nhà thiết kế web.

• Bản giới thiệu
• Tải xuống nguồn