Tạo một thiết kế web theo chủ đề Comic Book, Photoshop thành HTML + CSS (Phần 1)

Cập nhật với Tut mã hóa! Lần này tôi đã cho bạn một hướng dẫn thú vị cho mọi người. Trong phần 1 chúng tôi sẽ tạo ra một thiết kế rất độc đáo cho tất cả những người hâm mộ truyện tranh trên mạng. Chúng tôi sẽ tạo bố cục blog này từ đầu bằng cách sử dụng một số thủ thuật trong Photoshop để làm cho nó trông tuyệt vời. Sau đó trong Phần 2 chúng ta sẽ tìm hiểu cách cắt nó, mã hóa nó và làm cho nó sẵn sàng để được chuyển đổi thành một chủ đề CMS blog. Bạn đã sẵn sàng chưa?

Giai đoạn mã hóa có sẵn

Giai đoạn mã hóa của hướng dẫn (Phần 2) hiện đã có sẵn tại trang web chị em của chúng tôi, Nettuts! Khi bạn đã hoàn thành giai đoạn thiết kế này, hãy chuyển sang Nettuts để cắt và mã hóa nó trong HTML / CSS. Cảm ơn tất cả các phản hồi và yêu cầu cho mọi người followup!

Trước khi bắt đầu

Bắt đầu thôi! Để tăng tốc độ đọc, tôi sẽ tránh một số giải thích cơ bản nhất (như cách tạo mặt nạ lớp hoặc cách chỉnh sửa trình xử lý hoặc Beziers của hình dạng vectơ). Bạn sẽ cần một số kiến ​​thức cơ bản về Layers, Guides, Vector và Layer Masks, Brushes, Pen Tool và làm việc với Typography (Character and Paragraphs).

Các tài sản cho hướng dẫn này là:

• Kết cấu giấy - mẩu tin lưu niệm
• Sunburst Shapes
• Phông chữ truyện tranh từ Font Squirrel (Tiêu đề Komika và Văn bản Komika)
• Gói biểu tượng truyền thông xã hội của Komodo Media

Bước đầu tiên là tạo ra một mô hình, doodle, hoặc thậm chí chỉ là một phác thảo bố trí trên một khăn ăn. Có một dự thảo sơ bộ về cấu trúc của trang web giúp dễ dàng đặt các yếu tố trên thiết kế. Dưới đây bạn sẽ thấy một phác thảo đơn giản cho thấy các yếu tố sau:

Tiêu đề, với biểu trưng, ​​thanh tìm kiếm và liên kết truyền thông xã hội, ngoài thanh điều hướng chính.
Biểu ngữ, với các bài đăng nổi bật, lưu ý cách văn bản bài đăng được đặt trên hình ảnh vào bong bóng trò chuyện để mô tả phong cách "truyện tranh".
Một khu vực nội dung, với một danh sách các bài viết được hiển thị trong hai cột, mỗi bài có một hình ảnh liên quan và văn bản được hiển thị vào một bong bóng nói chuyện là tốt.
Chân trang, với danh sách các danh mục blog, lưu trữ và bài đăng phổ biến cũng như nhận xét gần đây và thông tin bản quyền.

Bước 1: Thiết lập tài liệu

Mở Photoshop, tải xuống mẫu 12 cột Photoshop từ 960 Grid System hoặc tạo một tài liệu mới 960px và vẽ một số Hướng dẫn đến đường viền trái và phải.

Tăng diện tích làm việc để xem nó trông như thế nào trên các độ phân giải rộng hơn và tăng chiều cao. Tôi đang đặt kích thước tài liệu thành chiều rộng 1420px và chiều cao 1200px. Cuối cùng, hãy vào Layer> New Fill Layer> Solid Color ... và thiết lập nền màu đen (# 000000) cho canvas.

Bước 2: Nền tiêu đề

Vẽ Hướng dẫn nằm ngang khoảng 450px từ đường viền trên cùng, chúng tôi sẽ sử dụng nó làm hướng dẫn tham khảo để thêm bóng râm ở đầu trang. Sử dụng công cụ Rectangle, vẽ một hình chữ nhật rộng sử dụng màu này như foreground (# AA0001). Sau đó, áp dụng một Gradient Layer Mask (đen trắng) vào hình chữ nhật để ẩn phần dưới cùng của nó.
Mẹo: không bao giờ sử dụng một lớp Gradient cho hình nền, bởi vì khi tăng chiều cao của canvas (một thực tế rất phổ biến trong thiết kế web) nền bị bóp méo.

Bước 1: Thêm họa tiết vào nền

Mở "Paper Texture" từ các phần tử Copy và Paste nó lên trên layer gradient màu đỏ. Quy mô nó để làm cho nó phù hợp với giới hạn của thiết kế và thay đổi Blending Mode của layer thành Linear Burn. Chúng ta sẽ cắt nó thành một nền ảnh lớn, nhưng đối với các độ phân giải rộng hơn, chúng ta cần tinh tế kết hợp các cạnh của giấy với nền đen, cho điều này, sử dụng Burn Tool, làm tối các khu vực gần các cạnh Trái và Phải của giấy kết cấu. Bạn có thể sử dụng Brush lớn và mềm (Độ cứng 0%).

Luôn giữ cho các lớp của bạn được sắp xếp, đặt cả hai lớp ("Giấy" và "Hình chữ nhật") vào một thư mục có tên "Tiêu đề Bg".

Bước 1: Sunbursts

Tiếp tục với phong cách truyện tranh, chúng ta hãy thêm một số sọc sunburst để tạo ra một nền tảng ấn tượng cho logo.

Mở hình dạng "Sunburst" từ nội dung. Trên công cụ Custom Shape, chọn hình dạng sunburst yêu thích của bạn vẽ nó trên layer gradient màu đỏ. Đặt hình để gần biên trái của mẫu 960 (hiển thị Hướng dẫn để xem các giới hạn). Áp dụng cho layer "Sunburst" một Radial Gradient Layer Mask (màu trắng ở giữa và màu đen ở bên ngoài). Thay đổi độ mờ lớp thành 50%. Tùy chọn: sử dụng Brush không đều, tô màu Đen trên Layer Mask để tạo ra một sự kết hợp giữa grunge và sunburst.

Bước 1: Halftone

Để thực thi phong cách truyện tranh, chúng ta sẽ thêm một số điểm Halftone trên nền tiêu đề. Tạo một layer mới phía trên layer "Sunburst", và render một số Black and White Clouds trong đó (Filter> Render> Clouds). Sau đó, chuyển đến Lọc> Pixelate> Màu sắc Halftone. Thay đổi Blending Mode của layer "Halftone" thành Multiply và thêm Layer Mask> Hide All vào nó. Sau đó, sử dụng một Brush lớn và mềm (Color: White và Opacity và Flow to 75%) vẽ một số vùng của layer mask để chỉ hiển thị một chút của pattern halftone.

Bước 1: Tiêu đề

Bây giờ bạn đã hoàn tất nền tiêu đề, hãy thêm Logo. Đầu tiên vẽ Hướng dẫn tham khảo khoảng 180 px bên dưới đường viền trên cùng, biểu tượng không được nằm bên dưới hướng dẫn đó. Sử dụng phông chữ "Komika Title" từ loại nội dung tiêu đề của trang web ("Comicastic") Cỡ chữ: 68pt và màu nền trước: # FFB401. Sau đó, thêm phần tử văn bản khác, như dấu chấm than hoặc khẩu hiệu màu trắng (cỡ chữ 16pt).

Sau đó, sử dụng Free Transform Tool xoay văn bản một vài độ trái để làm cho nó trông ít trang trọng hơn. Hãy thử để có được một cái gì đó giống như hình ảnh dưới đây, nhưng hãy nhớ không đặt bất kỳ yếu tố bên dưới hướng dẫn. Cuối cùng, đặt tất cả các lớp này vào một thư mục có nhãn "Logo".

Bước 7: Kiểu lớp biểu trưng

Thêm một Layer Style> Gradient Overlay (# EA9403 - # FFC501) một Stroke (Size: 1px, Inside, # FCB600) và Drop Shadow (Black, 50% Opacity, Distance và Size: 2px) vào layer "logo". Sử dụng một Style tương tự với khẩu hiệu, nhưng thay đổi màu của Gradient Overlay thành #EDEDED - #FFFFFF và Stroke to White (#FFFFFF). Nếu bạn đặt dấu chấm than cho logo, bạn có thể thử chuyển đổi nó thành một hình dạng (Layer> Type> Convert to shape) và bóp méo nó một chút như thể hiện phần dưới của hình ảnh bên dưới.

Bài viết nổi bật

Bước 8: Bối cảnh

Sử dụng công cụ Rounded Rectangle Tool (Radius 5px) để vẽ một hình chữ nhật rộng khắp biểu ngữ bên dưới logo như thể hiện hình ảnh bên dưới, chiều cao nếu hình chữ nhật tùy thuộc vào bạn, tôi đang đặt 250px. Sau đó áp dụng Gradient Overlay (Màu sắc: # DA7E00 - # F0AD00, Angle: 90 °) và Stroke (Màu: # F2AA00, Kích thước: 1px, Vị trí: Bên trong) .Layer Styles to it.

Bước 9: Thay đổi biểu ngữ trên cùng

Sử dụng công cụ Direct Selection Tool (A) trên hình chữ nhật tròn hoàn toàn mới của chúng tôi, lấy các điểm ở góc trên cùng bên trái và di chuyển chúng sang bên phải (bạn có thể sử dụng con trỏ để di chuyển chính xác). Sau đó di chuyển các điểm dưới cùng bên phải một vài điểm ảnh còn lại.

Bước 10: Thêm vùng chứa hình ảnh trượt

Bây giờ, sử dụng công cụ Rectangle Tool vẽ một hình chữ nhật màu xám bên trong biểu ngữ màu vàng (630px x 250px aprox.), Bạn có thể để phần dưới cùng của hình chữ nhật màu xám cách một vài pixel ở phía dưới của biểu ngữ màu vàng để tạo ra một out-of- hiệu ứng giới hạn. Thêm một Stroke (Size: 1px, Position: Inside, Color: #FFFFFF) và Drop Shadow (Color: # 000000, Opacity: 50%, Distance: 0px, Spread: 0px, Size: 5px) và cố gắng đặt hình chữ nhật như hiển thị hình ảnh bên dưới. Cuối cùng, đặt cả hai layer (hình chữ nhật Xám và Vàng) vào một thư mục có tên "Top Banner".

Bước 11: Điều hướng chính

Sử dụng họ phông chữ "Văn bản Komika" gõ điều hướng trang ở trên cùng bên phải của biểu ngữ trên cùng, đặt kích thước phông chữ thành 18px và màu: #FFFFFF. Đặt nó vào một thư mục có tên "Điều hướng trang", đảm bảo thư mục này nằm phía sau "Biểu ngữ đầu trang". Sau đó, sử dụng công cụ Rounded Rectangle Tool (Radius: 3px, Color: # EFA800), vẽ một hình chữ nhật ngay sau từ đầu tiên của điều hướng, đặt tên là "Selected Tab". Tiếp theo sử dụng công cụ Direct Selection Tool (A) di chuyển các điểm của phía dưới bên trái như hiển thị hình ảnh dưới đây. Tiếp theo, áp dụng Gradient Overlay cho layer "Selected Tab" (Màu sắc: # F0A900 - # FEBF00, Angle: 90 °). Nếu muốn, bạn có thể thêm một Drop Shadow rất tinh tế (Color: # 000000, Opacity: 25%) vào văn bản điều hướng.

Bước 12: Thêm hình ảnh biểu ngữ

Để hiển thị mẫu thực tế, hãy dán bất kỳ hình ảnh nào lên biểu ngữ. Nếu hình ảnh lớn hơn hình chữ nhật, bạn có thể sử dụng Clipping Mask, để dán hình ảnh lên trên hình chữ nhật màu xám, sau đó chọn Option / Alt - Click giữa hai lớp, điều này sẽ cắt hình ảnh bên trong hình chữ nhật mà không cần cắt xén.

Bước 13: Điều khiển biểu ngữ

Chọn Công cụ hình dạng tùy chỉnh và chọn một trong các mũi tên và vẽ một vài cái bên cạnh mũi tên kia, cả hai đều trỏ sang trái. Sau đó áp dụng cho cả một lớp phủ Gradient (# 6D0004 - # 980000) và một Stroke (Kích thước: 1px, Vị trí: Bên trong, Màu sắc: # B20002). Đặt cả hai mũi tên vào một thư mục có tên "Prev" và sử dụng Free Transform Controls và giữ phím Command / Ctrl, bóp méo các mũi tên một chút. Sau đó, sao chép thư mục và đổi tên nó thành "Tiếp theo", di chuyển nó sang bên phải của biểu ngữ và chuyển đến Chỉnh sửa> Chuyển đổi> Lật ngang để thay đổi hướng của nó. Cuối cùng đặt cả hai thư mục "Next" và "Prev" vào một thư mục mới có tên "Controls".

Bước 14: Điều khiển Hover

Bây giờ nhân đôi thư mục "Tiếp theo" và "Trước" và áp dụng một kiểu lớp khác cho các mũi tên để tạo hiệu ứng di chuột cho mỗi thư mục. Tôi đang sao chép Layer Style từ chữ chấm than của tiêu đề.

Bước 15: Chi tiết Halftone

Với quá trình tương tự của Bước 5, tạo một Layer Halftone phía trên biểu ngữ màu vàng. Với lớp "Halftone" được chọn làm Command / Ctrl - Nhấp vào biểu ngữ màu vàng, sau đó nhấn Command / Ctrl + Shift + I để đảo vùng chọn, sau đó xóa phần vượt quá. Thay đổi chế độ hòa trộn của layer "Halftone" thành Overlay và Opacity thành 25%. Cuối cùng, thêm một Layer Mask> Hide All và sử dụng một Brush trắng mềm lớn, tô màu trên một số vùng trên layer mask để chỉ hiển thị một vài phần của pattern.

Bước 16: Bài viết nổi bật nói về bong bóng

Bây giờ là lúc thêm trường để đặt nội dung của bài đăng nổi bật. Đối với điều này, bằng cách sử dụng Công cụ chỉnh sửa hình dạng tìm kiếm bong bóng nói chuyện hình tròn và hình chữ nhật. Vẽ nó trên biểu ngữ "Ảnh nổi bật" và đặt nó ở bên phải như hiển thị hình ảnh bên dưới. Trước khi thiết kế bất kỳ tính năng nào, bạn cần thực hiện một số nghiên cứu nếu có thể đạt được loại hiệu ứng này, ngay cả khi bạn không biết cách viết mã, bạn có thể tìm một số thư viện Ajax hiện có (JQuery / MooTools) và xem đã được thực hiện và hoạt động, sau đó điều chỉnh thiết kế của bạn với một thư viện hiện có.

Sau đó, sử dụng Direct Selection Tool (A) làm biến dạng hình dạng của bong bóng một chút. Cuối cùng, áp dụng Drop Shadow (Color: # 000000, Opacity: 25%, Distance: 5px, Spread: 0px, Size: 10px).

Bước 17: Văn bản bài đăng nổi bật

Đã đến lúc thêm tiêu đề và bản tóm tắt vào bài đăng nổi bật của chúng tôi. Đối với tiêu đề "Tiêu đề Komika", 18pt. # 680001. Đối với văn bản Nội dung, sử dụng "Văn bản chữ Komika", Kích thước: 16pt, Màu: # 1B1B1B. Đặt các lớp văn bản thẳng hàng như được hiển thị trên hình ảnh bên dưới.

Bước 18: Hộp nhận xét và bài đăng Meta

Bây giờ, thêm một bong bóng khác, nhưng nhỏ hơn thời gian này, sử dụng màu này như foreground: # 9C0001 và thêm một kiểu Stroke layer (Color: # D00000, Size: 1px, Position: Inside), giống như hiển thị hình ảnh bên dưới, sau đó thêm số nhận xét có phông chữ "Komika Title", Màu: #FFFFFF và Kích thước: 24pt. Và từ "Bình luận" với "Tiêu đề Komika", Kích thước: 12pt, Màu sắc: # FFB301.

Cuối cùng, thêm một Meta nhỏ (thông tin về bài viết) bên dưới bản tóm tắt bài viết với phông chữ "Tahoma", Size: 10pt, Color: # 1B1B1B. Nếu không có đủ không gian để đặt văn bản Meta, bạn có thể sử dụng Công cụ chọn trực tiếp để tăng chiều cao của ô bong bóng bài nổi bật một chút.

Mẹo: Đừng bao giờ chuyển đổi phần tử Vector Rounded Corner bằng Công cụ chuyển đổi miễn phí trong Photoshop, điều này sẽ làm biến dạng góc, chọn các điểm bạn muốn di chuyển bằng Công cụ chọn trực tiếp và sau đó thay thế chúng.

Bước 19: Nền của Tiêu đề bài đăng nổi bật

Nhân đôi bong bóng nền bài đăng nổi bật, ẩn bóng thả, thay đổi màu tô thành màu vàng (# FFC001) và rasterize nó. Sau đó, sử dụng Rectangular Marquee Selection Tool, chọn tất cả các bong bóng màu vàng bên dưới dòng tiêu đề, sau đó xóa vùng chọn. Tiếp theo, thêm một đường viền, với lớp "Bubble Title" được chọn, Command / Ctrl - Nhấp vào mặt nạ Vector "Bubble Background". Sau đó vào Edit> Modify> Contract và đặt giá trị thành 1px. Cuối cùng, nhấn Command / Ctrl + Shift + I để đảo vùng chọn và xóa nó.

Đây là thời điểm tốt để đặt mọi thứ liên quan đến biểu ngữ đầu được sắp xếp thành các thư mục và thêm chi tiết hơn nếu bạn muốn, tôi đang thêm một đường màu vàng giữa phần tóm tắt Bài đăng và Meta.

Nội dung chính

Bước 20: Nền nội dung

Bây giờ chúng ta hãy tiếp tục với nền nội dung chính, tạo một thư mục có tên là "Page Content" và vẽ một hình chữ nhật có góc tròn màu trắng (#FFFFFF) (bán kính 5 px) với chiều cao nhiều pixel (Nếu kích thước canvas ban đầu quá nhỏ tại thời điểm này) có thể tăng kích thước của nó, chỉ cần đảm bảo giữ đường viền trên cùng).

Bước 21: Đăng hình ảnh

Đã đến lúc bắt đầu thêm nội dung vào trang, theo mặc định trên blog, chúng tôi sẽ thiết kế danh sách các bài đăng mới nhất.

Vẽ hai hình vuông (3 cột chiều rộng aprox.) Và đặt chúng như hiển thị hình ảnh dưới đây. Làm quá trình tương tự như bước 12 thêm một số hình ảnh trên các ô vuông bằng cách sử dụng chúng như Clipping Masks. Cuối cùng chọn hình vuông và thêm một kiểu Stroke Layer vào nó (Color: # FFB801, Size: 1px, Position: Inside).

Chúng tôi sẽ làm việc trên một trong những hình ảnh này thêm nội dung xung quanh nó, và sau đó lặp lại nó nhiều lần như bài muốn hiển thị trên trang chủ.

Bước 22: Thêm tiêu đề và danh mục của bài đăng.

Vẽ hai hình chữ nhật rộng, một màu vàng (# F2AA00) và một màu trắng khác có đường viền màu vàng bên dưới (# FFB401). Trên dải màu vàng, nhập tiêu đề của bài đăng bằng "Tiêu đề Komika", Màu: # 670003, Kích thước: 18pt. Và trên dải màu trắng, hãy nhập tên Danh mục bằng cách sử dụng "Văn bản chữ Komika Tight" Kích thước: 13pt, Màu # 212121 cho các liên kết và # 670003 khi di chuột qua.

Bước 23: Đăng tóm tắt và Meta

Vẽ một bong bóng nói một lần nữa, trên hình ảnh và các sọc màu vàng, điền nó với màu này: # 333333 với một Stroke 1px (Color: # 696969) và cũng áp dụng các Drop bóng chúng tôi đã làm trước trên banner. Sau đó, thêm một đoạn văn bản mẫu bằng cách sử dụng "Komika Text Tight" Kích thước: 14pt, Color: #FFFFFF, một văn bản mẫu Meta sử dụng "Tahoma" 10pt Color # 979797 và nếu bạn muốn một dòng giữa cả hai văn bản (# 4B4B4B).

Bước 24: Hoàn thành nội dung chính

Để hoàn thành phần này thêm một bong bóng Bình luận, về cơ bản lặp lại quá trình của Bước 18. Sau đó đặt tất cả mọi thứ vào thư mục, tôi đặt tên cho thư mục bài "A post". Sau đó, sao chép nó (Command / Ctrl + Drag) và đặt nó ở bên phải. Lặp lại quy trình với hai hoặc ba hàng bài đăng như được hiển thị ở cuối hình ảnh bên dưới. Tăng chiều cao của nền trắng khi cần thiết để vừa với tất cả bài đăng.

Bước 25: Góc nội dung trang

Để tăng phong cách "truyện tranh", chúng tôi sẽ thêm một trang curl đơn giản ở góc dưới cùng bên phải của nền trắng.

Đầu tiên vẽ một hình tam giác màu đen ở góc dưới cùng bên phải (bạn có thể sử dụng công cụ Pen), sau đó nhân đôi nó và di chuyển hình tam giác làm cho nó là một "phản xạ" của màu đen, bạn có thể điền vào bản sao này với bất kỳ màu nào khác. Tiếp theo làm cong tam giác thứ hai làm cho nó một đường cong nhỏ. Sau đó, áp dụng cho tam giác biến dạng một Gradient Overlay bằng cách sử dụng một kết hợp tốt đẹp của màu sắc: (# 9C0001 - # FE0000 - # 9C0001) và thay đổi Angle cho bất cứ điều gì có vẻ tốt theo góc của curl, trong trường hợp này 108 độ. Tiếp theo sử dụng Soft Brush (Black, Opacity và Flow 50%) vẽ một số shadow trong một layer mới phía sau tam giác bị biến dạng. Nếu bạn muốn, hãy thêm một số điểm vào tam giác bị biến dạng để thêm góc tròn vào đầu giống như hiển thị phần dưới của hình ảnh bên dưới. Cuối cùng, đặt tất cả các lớp liên quan đến curl vào một thư mục có tên "Page Curl". Giữ tiện dụng vì chúng tôi đang sử dụng nó sau này.

Bước 26: Nền chân trang

Chúng ta sắp hoàn thành, trước tiên hãy tạo một thư mục có tên là "Footer" và đảm bảo bên dưới thư mục "Page Content", bên trong nó vẽ một vòng tròn màu đỏ (# 9C0001), sau đó áp dụng Gaussian Blur với bán kính tối thiểu 65px. Sau đó chuyển đổi vòng tròn mờ kết quả để làm cho nó phù hợp với các hướng dẫn giới hạn.

Bước 27: Sunburst nền

Bây giờ, với công cụ Custom Shape Tool, chọn một trong các hình dạng Sunburst và vẽ một màu đen ở giữa, sau đó giảm Opacity của nó xuống 50%. Sau đó, thêm mẫu Halftone trên vòng tròn phát sáng màu đỏ, ẩn nó bằng cách sử dụng một mặt nạ lớp và chỉ hiển thị một số phần của nó. Cuối cùng giảm opacity của vòng tròn màu đỏ xuống còn 50% ..

Bước 28: Nền nội dung chân trang

Chúng tôi sẽ thêm các yếu tố chung của một blog như Thể loại và Lưu trữ ở chân trang.

Bây giờ, chúng ta hãy thêm một nền cho các phần tử chân trang, vẽ một hình chữ nhật tròn (bán kính 5px) Màu: # 1A1A1A và đặt giá trị Fill của nó là 50%, làm cho nó rộng khoảng 3 cột. bạn có thể tạo bản sao của nó để làm cho 4 hộp phù hợp ở chân trang.

Bước 29: Nền nội dung chân trang - Curl

Chọn hình chữ nhật đầu tiên, (bạn có thể xóa những người khác vào thời điểm này). Sau đó, sao chép thư mục "Page Curl" và đặt nó vào thư mục "Footer", chuyển nó thành phù hợp với góc dưới cùng bên phải của hình chữ nhật, sau đó thay đổi màu của gradient thành tông màu xám khác nhau. Cuối cùng, thêm vào layer chữ nhật một kiểu Stroke (1px, Inside, # 242424).

Bước 30: Danh mục

Bây giờ, thêm tiêu đề của phần, trong trường hợp này là "Danh mục" sử dụng "Tiêu đề Komika", Kích thước: 14px Màu: # F2AA00. Sử dụng hướng dẫn để phân định đường cơ sở tiêu đề, giữ cho nó ít nhất 20 px bên dưới phần cuối của nền nội dung trang. Sau đó, thêm một số hàng làm danh mục mẫu, sử dụng "Văn bản chữ", Kích thước: 16px, Màu: #FFFFFF và Màu đỏ (# EC000A) làm hiệu ứng di chuột. Như một chi tiết bổ sung cho hiệu ứng di chuột, thêm một mũi tên nhỏ màu vàng (# FFB301) bằng Công cụ tạo hình tùy chỉnh. Đặt tất cả các lớp vào một thư mục có tên là "Footer Element".

Bước 31: Nhân đôi phần chân trang

Nhân đôi thư mục "Phần tử chân trang" và di chuyển nó sang phải, thay đổi từ để mô tả "Lưu trữ" lần này.

Sau đó, lặp lại thư mục lần nữa nhưng lần này mở rộng nền mờ để làm cho nó rộng hơn hai lần, trên cùng, nhập tiêu đề cho "Bài đăng phổ biến", "Bài đăng mới nhất" và "Nhận xét gần đây", sử dụng màu vàng cho phần đầu tiên và màu xám cho Hai loại khác. Như bạn đoán, điều này sẽ có một chức năng tương tự so với một ngăn tab. Sau đó, thêm một hình tam giác màu vàng nhỏ để đánh dấu tab đã chọn.

Bước 32: Nội dung khung được gắn thẻ

Vì phần này sẽ có hầu hết các danh sách bài viết, cho phép thêm chúng, về cơ bản là sự kết hợp của "Komika Title" và "Komika Text Tight" với các màu khác nhau (Xem ảnh chụp màn hình bên dưới). Hàng đầu tiên sẽ là một mẫu của mục được chọn (di chuột), trên đó, thêm một hình chữ nhật tròn màu đen (# 000000) phía sau văn bản và thêm một Mặt nạ Lớp ngang (Đen đến Trắng).

Cuối cùng, thêm một Pager nhỏ ở dưới cùng của phần này.

Bước 33: Thanh tìm kiếm

Đã đến lúc thêm một số chi tiết để hoàn thành đồ họa của chúng tôi. Hãy bắt đầu với thanh tìm kiếm. Tạo một thư mục có tên "Search Bar" trên đầu mọi thứ, tạo một hình chữ nhật tròn (3px Radius, Color: # 000000 với một hiệu ứng Stroke Size: 1px, Position: Inside, Color: # 7C0000) làm đầu vào tìm kiếm, và một hình chữ nhật cho nút tìm kiếm; Sao chép Layer Style của mục đã chọn trên điều hướng chính và dán nó vào nút tìm kiếm. Đối với nút thực tế, nhập từ "Go!" trên nó với màu trắng, và áp dụng cùng một Drop Shadow hơn so với văn bản điều hướng chính (tái chế phong cách lớp là một tiết kiệm thời gian tuyệt vời). Trên đầu vào Tìm kiếm, nhập từ "Tìm kiếm một cái gì đó" bằng cách sử dụng "Màu sắc văn bản Komika": # F9A600.

Sau đó, thêm một hình chữ nhật phía sau tất cả các lớp bên trong "Thanh tìm kiếm", tô màu nó bằng màu đỏ sậm # 380001 (Điền: 50%) và áp dụng một nét bằng màu này: # 890101. Chuyển đổi nó sang một đối tượng thông minh và áp dụng một Layer Mask> Hide All cho nó, điền vào mặt nạ với một Reflected Black - White Gradient để tạo hiệu ứng hiển thị ở dưới cùng của hình ảnh dưới đây.

Bước 34: Biểu tượng truyền thông xã hội

Lặp lại quá trình của nền thanh tìm kiếm nhưng lần này sử dụng thanh có độ cao thấp hơn và có màu Stroke khác nhau (# 860001). Sau đó nhập từ "Theo dõi chúng tôi" bằng cách sử dụng "tiêu đề Komika" và dán tất cả các biểu tượng bạn muốn thêm, bạn có thể sử dụng các biểu tượng nhỏ từ nội dung. Đừng quên giữ các lớp của bạn được sắp xếp theo thư mục.

Bước 35: Điều hướng chân trang và thông tin bản quyền

Kết thúc công việc hôm nay, hãy thêm điều hướng Chân trang. Phân tách phần bằng Đường màu trắng, được che bằng một gradient đen trắng được phản chiếu. Nhập liên kết điều hướng bằng Arial, Kích thước 10px, Màu: # 515151 và đánh dấu hiệu ứng di chuột với màu vàng: # F2AA00. Sau đó thêm văn bản bản quyền Căn phải.

Bước 36: Nó đây!

Cuối cùng, kiểm tra lại tất cả các layer nằm trong thư mục tương ứng.

Tổng kết

Chúng tôi đã hoàn thành phần đồ họa của quá trình, bây giờ là lúc để nhảy qua NetTuts + để xem cách chia nhỏ và biến nó thành HTML + CSS, bạn đã sẵn sàng chưa?

.