Cách tạo chủ đề Tumblr với thiết kế PSD

Tumblr kết hợp sự nhấn mạnh vào tính sáng tạo trực quan với độ dài bài đăng nằm giữa độ ngắn gọn của Twitter và độ dài kết thúc mở của một mục blog truyền thống. Khi bạn sử dụng chủ đề Tumblr tùy chỉnh để mở rộng giao diện nhận dạng cả trên mạng và ngoại tuyến của bạn, một tumblelog phù hợp với chiến lược bao gồm các phương tiện truyền thông xã hội và trực tuyến khác. Các nhà thiết kế web thường bắt đầu phát triển các chủ đề tùy chỉnh trong Adobe Photoshop, sử dụng định dạng tệp PSD phân lớp của chương trình làm không gian làm việc trực quan của họ.

Thiết lập các thứ nguyên

Các hướng dẫn thước kẻ và khả năng phân lớp của Adobe Photoshop đơn giản hóa nhiệm vụ tạo nền tảng của chủ đề Tumblr, hoàn chỉnh với lưới bố cục xác định kích thước của các vùng nội dung. Nếu bạn thiết lập các nhóm lớp cho từng khía cạnh của thiết kế của mình, bao gồm cả khu vực nội dung chính và thanh bên, bạn có thể đặt tất cả các hướng dẫn cho từng phần tử trên một lớp duy nhất trong mỗi nhóm. Sự sắp xếp này cho phép bạn hiển thị các hướng dẫn của mình một cách có chọn lọc, thay vì chỉ hiển thị và ẩn tất cả chúng bằng phím tắt hoặc mục menu Photoshop và giữ các thành phần hướng dẫn liên quan lại với nhau. Đặt tên cho các nhóm và lớp của bạn để xác định chức năng của từng phần trong thiết kế của bạn. Những khoảnh khắc bạn đầu tư vào các tác vụ đặt tên gia tăng sẽ được đền đáp trong thời gian bạn không cần phải bật và tắt các lớp để xác định chúng chứa những gì. Để nhanh chóng tìm thấy kích thước của bất kỳ phần tử bố cục nào, hãy nhấn "F8" để mở bảng Thông tin và sau đó "Ctrl-nhấp" vào hình thu nhỏ của bảng điều khiển Lớp để tải một lựa chọn dựa trên các pixel trên lớp đó.

Lựa chọn màu sắc

Cho dù bạn sử dụng Công cụ chọn màu đã được kiểm tra theo thời gian để chọn màu sắc cho chủ đề của mình, tải các tùy chọn từ thư viện màu để phù hợp với một phần hoặc biểu trưng được in hoặc dựa vào công cụ Eyedropper để lấy mẫu các sắc thái từ tệp hoặc đồ họa khác, Adobe Photoshop cung cấp rất nhiều nhiều cách để chọn màu chủ đề. Khi bạn tô một lớp bằng màu đồng nhất để mô phỏng màu nền của chủ đề Tumblr hoặc các yếu tố khác trong thiết kế của bạn, bạn có thể sao chép công thức màu dưới dạng văn bản từ trình đọc hex của Bộ chọn màu và dán nhận dạng màu vào tên của lớp để tham khảo nhanh chóng. Sáu ký tự chữ và số trong một màu hex hiển thị trong mã Tumblr cũng như trong các thiết kế Web cho blog và các định dạng trực tuyến khác.

Tạo đồ họa

Tiêu đề xác định một tumblelog có thể sử dụng một đồ họa được ánh xạ bit làm đồ họa chuyên đề. Bạn có thể tạo phần tử quan trọng này bằng cách sử dụng kết hợp văn bản và các phần tử dựa trên pixel hoặc vector bên trong tệp PSD của mình. Nếu đồ họa bao gồm các yếu tố có thể tùy chỉnh mà bạn sắp chữ trong Photoshop, hãy để chúng ở dạng trực tiếp trong tệp chủ đề dựa trên PSD của bạn và chỉ phân loại chúng trong các bản sao của tệp mà bạn cung cấp cho những người khác không có giấy phép cho các tệp phông chữ được yêu cầu trong chủ đề của bạn. Khi bạn sử dụng các công cụ vectơ để vẽ trong Photoshop, bao gồm cả công cụ Bút và hình dạng, hãy vẽ bằng cách sử dụng các quy tắc hướng dẫn phù hợp với độ phân giải cơ bản của tệp mẫu của bạn. Kỹ thuật này giúp giữ cho tác phẩm nghệ thuật của bạn sắc nét nhất có thể khi bạn lưu hoặc xuất các phiên bản đã được phân loại của nó.

Bước tiếp theo

Nếu bạn biết cách viết mã HTML và CSS, đồng thời hiểu các biến chuyên biệt mà Tumblr sử dụng trong cấu trúc mã của nó, bạn có thể dịch các kích thước, thông số kỹ thuật màu và đồ họa bạn xây dựng trong PSD thành một chủ đề Tumblr tùy chỉnh đang hoạt động. Nếu mã hóa Web không nằm ngoài bộ kỹ năng của bạn, bạn có thể cung cấp PSD của mình cho một lập trình viên để tạo chủ đề cho bạn. Cùng với cách xử lý trực quan, một chủ đề Tumblr phải bao gồm các biến và khối. Các biến chấp nhận các giá trị động để tạo các phần tử hình ảnh Tumblr tiêu chuẩn. Các khối tạo thành các đoạn mã kết hợp các biến với HTML. Các khối thiết lập các bài đăng và liên kết cố định tiếp cận chúng, các liên kết di chuyển giữa các khối tài liệu và phần tử được sắp xếp theo thứ tự thời gian phù hợp với những người thích hoặc theo dõi một tumblelog riêng lẻ.

Thông tin phiên bản

Thông tin trong bài viết này áp dụng cho Adobe Photoshop CC và Adobe Photoshop CS6. Nó có thể khác một chút hoặc đáng kể với các phiên bản hoặc sản phẩm khác.