Bạn đã đầu tư rất nhiều thời gian vào việc thiết lập thiết kế cho blog của mình nhưng tại sao hình ảnh lại hiển thị không chính xác trên Smartphone? Bạn đã đảm bảo sử dụng hình ảnh chất lượng cao, nhưng tình trạng hình ảnh kém không phù hợp với màn hình.
Nhiều người không nhận ra rằng các thiết bị mới (đặc biệt là những người từ Apple) sử dụng công nghệ hiển thị tiên tiến ảnh hưởng đến cách hiển thị hình ảnh, để đảm bảo rằng chúng được hiển thị cả chính xác trên máy tính, mà còn trên Điện thoại thông minh.
Trong hướng dẫn này, chúng tôi sẽ cố gắng giới thiệu một chút về khái niệm " võng mạc đã sẵn sàng Và hướng dẫn bạn cách tạo ảnh Retina.
Nhưng trước khi bắt đầu, hãy dành thời gian để xem xét Làm thế nào để cài đặt một theme WordPress, Làm thế nào nhiều plugins tôi nên cài đặt trên WordPress.
Sau đó, hãy đi làm.
Giải thích về các hình ảnh Retina Ready
Màn hình thiết bị đã tiếp tục được cải thiện về chất lượng trong vài năm qua, và màn hình của Apple nói riêng đã phải làm rất nhiều việc để hiển thị cực kỳ rõ ràng. Công nghệ "Retina DisplayLà một tên thương hiệu của Apple được sử dụng để mô tả một loại màn hình nhất định với những đặc điểm riêng biệt.
Màn hình võng mạc nhằm mục đích hiển thị văn bản và hình ảnh rõ ràng nhất có thể, không có pixel nào có thể nhìn thấy bằng mắt thường. Thách thức đối với các nhà thiết kế là màn hình hiển thị thay đổi tùy thuộc vào kích thước màn hình của thiết bị và khoảng cách của người dùng với màn hình.
Bằng cách chia chiều rộng vật lý của màn hình cho số pixel được hiển thị theo chiều ngang, chúng tôi có pixel trên mỗi inch (ppi, còn được gọi là ppp cho số chấm trên mỗi inch). " DPI cao Được sử dụng để chỉ bất kỳ thiết bị nào có hơn 200 pixel mỗi inch. Điều này bao gồm tất cả các thiết bị hiển thị " võng mạc (Của Apple), và một số thiết bị của các nhà sản xuất khác.
Cách tạo hình ảnh "Retina Ready" bằng Photoshop
Làm việc với hình ảnh ở độ phân giải gấp đôi hoặc gấp bốn có nghĩa là bạn sẽ phải phóng to để xem tất cả các chi tiết nhỏ, tuy nhiên các tệp cực nặng gây ra vấn đề về hiệu suất và thách thức lưu trữ tệp.
Giải pháp cho hầu hết các nhà thiết kế là tạo ra nhiều lớp và nhóm chúng lại với nhau, kích hoạt chúng khi cần thiết. sử dụng chức năng "comps » Photoshop hoặc để làm việc ở độ phân giải gốc và xuất các định dạng họ cần (sử dụng một hành động như "nghỉ hưu").
Thách thức với hai phương pháp này là bạn không thể xem nhiều hình ảnh cùng một lúc. Nếu bạn cần thấy sự khác biệt trong hình ảnh ở các kích thước cần thiết, bạn cần chuyển đổi giữa chúng hoặc xuất chúng.
Thật may mắn cho những người đam mê Photoshop, Adobe đã thêm một tính năng giúp tạo nhiều hình ảnh dễ dàng hơn. Giờ đây, bạn có thể tạo nhiều bức tranh sơn dầu cạnh nhau bằng cách sử dụng bảng vẽ đặc trưng và tạo nhiều kích thước hình ảnh bằng trình tạo. Hãy xem nó hoạt động như thế nào.
1 - Tạo Artboard đầu tiên của bạn
Công cụ Artboard mới, được giới thiệu trong Photoshop CC 2015, được ẩn sau công cụ chuyển động. Bạn có thể nhấp vào công cụ trong menu hoặc sử dụng Shift + V để chuyển đổi giữa " Vị trí "Và" artboard »:
Để tạo một mặt phẳng làm việc, hãy nhấp và kéo một khu vực. Artboard mới sẽ được hiển thị trong bảng điều khiển lớp với tên mặc định là "Artboard 1".
Đọc cũng: Tại sao dịch giả tự do cần một lịch trình hàng ngày
2 - Định cấu hình Artboard của bạn
Bạn có thể thêm các lớp bạn cần vào bản vẽ của mình và chúng sẽ được lồng vào nhau như các lớp (cho phép bạn tạo một cấu trúc lớp thích hợp). Chúng tôi khuyên bạn nên thêm các tệp khác nhau của bạn, chẳng hạn như hình dạng, để chúng được định vị như bạn muốn trước khi tiếp tục bước tiếp theo.
3 - Nhân bản Artboard của bạn
Sau khi bản vẽ đầu tiên của bạn được thiết lập để đáp ứng nhu cầu của bạn, bạn có thể sao chép nó bằng cách sử dụng menu ngữ cảnh. Nhấp chuột phải vào "Artboard 1" trong vùng các lớp và chọn "Duplicate Artboard". Điều này tạo ra một “Artboard” tương tự khác, có cùng cấu trúc với tất cả các thành phần của nó:
Để khám phá thêm: Làm thế nào để nhân bản một bài báo hay một trang trên WordPress
4 - Đặt mặt bàn của bạn (Artboard)
Lợi thế lớn của việc sử dụng bảng vẽ là có thể xem tất cả các hình ảnh của bạn cùng một lúc. Để làm điều này, chỉ cần định vị các mặt bàn làm việc theo nhu cầu của bạn. Có nhiều hướng khác nhau để làm điều đó:
Sử dụng bảng xuất hiện khi mặt phẳng làm việc được chọn để nhập tọa độ X và Y ở góc trên bên trái của mặt phẳng làm việc.
Kéo bản vẽ đã chọn vào bất kỳ vị trí nào trong Photoshop. Artboard được kích hoạt một cách thông minh, để bạn có thể tự động căn chỉnh nhiều artboard sao cho vị trí của chúng khớp với khoảng cách trước đó.
Sử dụng các phím mũi tên trên bàn phím để di chuyển mặt phẳng làm việc đã chọn.
Cũng xem hướng dẫn của chúng tôi về: Cách khắc phục thư viện phương tiện không còn hoạt động trên WordPress
5 - Thay đổi kích thước bảng vẽ của bạn (khi cần thiết)
Nếu bạn cần điều chỉnh kích thước của bảng vẽ, bạn lại có một số tùy chọn:
- Thay đổi kích thước bằng cách sử dụng các tay cầm xuất hiện khi bạn chọn một artboard.
- Sử dụng bảng tùy chọn ngay bên dưới menu "Tệp" để chọn kích thước đặt trước, chiều rộng hoặc chiều cao cố định hoặc chuyển đổi giữa dọc và ngang.
- Sử dụng bảng "Thuộc tính" xuất hiện khi một ngăn làm việc được chọn để thay đổi kích thước và truy cập các kích thước được xác định trước.
6 - Tạo tác phẩm của bạn
Giờ đây, bạn có thể làm việc với mặt bàn của mình, thay thế các thành phần và thực hiện các thay đổi nếu cần. Giả sử thiết lập ban đầu của bạn không thay đổi, bây giờ bạn sẽ có hình ảnh pixel hoàn hảo với tất cả các thành phần ở đúng vị trí.
Xem thêm danh sách của chúng tôi về 26 WordPress chủ đề với hệ thống kéo và thả để tạo ra các trang của bạn
7 - Thiết lập công cụ "Tạo"
« Tạo ra »Cho phép bạn xuất bảng vẽ, lớp hoặc nhóm bằng cách sử dụng cú pháp đặt tên đặc biệt. Đây là một phím tắt để lưu cho web. Để chắc rằng " Tạo ra Được bật cho PSD của bạn, đi đến " Tệp> Tạo> Nội dung Hình ảnh "(Tệp> Tạo> Hình ảnh Tài sản):
8 - Đổi tên bảng vẽ của bạn
Tạo « Nghệ thuật Dành cho lưu các thành phần hình ảnh bạn đang làm việc dựa trên các tùy chọn được đặt trong tập hợp lớp hoặc trong bản vẽ của bạn. Có một vài tùy chọn bạn có thể đặt:
- Định dạng của tệp tin. Thêm phần mở rộng (.jpg, .gif, hoặc .png ) để lưu tệp liên quan, ví dụ: header-main.png Các thành phần hình ảnh sẽ được lưu trong cùng thư mục với tệp PSD, nhưng với "-assets" làm hậu tố.
- Nén tệp. Sau phần mở rộng, bạn có thể thêm một số cho biết mức độ nén được sử dụng. Đối với " opt.jpg »Bạn có thể sử dụng tỷ lệ phần trăm và đối với png, hãy sử dụng các bit tương ứng: 8, 24 hoặc 32.
- Thang điểm thoát. Bạn có thể đặt tỷ lệ đầu ra bằng cách thêm phần trăm hoặc pixel (chiều rộng trên chiều cao) trước tên hình ảnh (ví dụ 100% header-main.png8 ).
- Vài hình ảnh. Bạn có thể xuất nhiều hình ảnh của cùng một bảng vẽ (artboard) bằng cách sử dụng dấu phẩy hoặc dấu cộng để phân tách tên hình ảnh. Do đó, mỗi hình ảnh có thể có các tùy chọn riêng miễn là mỗi tên của hình ảnh là duy nhất.
Sự kết hợp của các tùy chọn này cho phép bạn liên tục tạo các thành phần hình ảnh phức tạp cho bảng vẽ của mình:
Nếu cần hình ảnh tiêu chuẩn cho tất cả các mặt bàn làm việc của bạn, " Tạo ra Cho phép bạn tạo một tham số để áp dụng cho từng mặc định. Để tạo tham số này, hãy thêm một lớp trống ở đầu tài liệu của bạn với các tùy chọn sau:
- Từ khóa mặc định: Tên phải bắt đầu bằng chữ này để rời khỏi công cụ " Tạo ra »Quyền tự do sử dụng nó làm mặc định.
- Thang điểm thoát: Cho phép bạn đặt tỷ lệ đầu ra với phần trăm hoặc pixel (chiều rộng trên chiều cao).
- Thư mục / hậu tố: Xác định tên của thư mục mà hình ảnh sẽ được lưuvà một hậu tố để thêm vào tên của các tệp.
Tóm tắt
Đó là tất cả những gì bạn có ở đó, cố gắng phóng to hình ảnh để xem cách cư xử sau này. Nếu cần, bạn có thể kiểm tra hình ảnh trên blog WordPress của mình bằng cách tải nó lên thư viện phương tiện của bạn.
Hãy hỏi chúng tôi khi cần thiết.
Khám phá thêm một số plugin WordPress cao cấp
Bạn có thể sử dụng cái khác plugin WordPress để tạo ra một giao diện hiện đại và để tối ưu hóa việc xử lý blog hoặc trang web của bạn.
Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.
1. WP cuối cùng xã hội
Đây là một gói tối ưu của tất cả các tính năng mạng xã hội mà bạn có thể cần trên blog WordPress của mình.
Đọc cũng của chúng tôi 8 plugin WordPress để tích hợp một hệ thống giảm
Các tính năng chính của nó là: nhiều biểu tượng mạng xã hội, chia sẻ xã hội cho phép mọi người chia sẻ nội dung trang web của bạn (bài viết, trang, hình ảnh, phương tiện truyền thông) trên các mạng xã hội phổ biến (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, Bộ đệm, Reddit, Tumblr, Stumbleupon, Xing, Weibo, VK, Delicious), kết nối với trang web với thông tin truyền thông xã hội của bạn, một bộ đếm để hiển thị số lượng người theo dõi và chia sẻ của trang web của bạn và những người khác.
Tải về | Bản demo | Web hosting
2. WP Slick Slider hình ảnh Carousel Pro
Nếu bạn là người theo dõi cuồng nhiệt của bộ Visual Composer, sử dụng plugin WP Slick Slider là một tùy chọn bạn cần xem xét. Với hầu hết các mẫu được xác định trước 100, bạn chắc chắn sẽ tìm thấy những gì bạn đang tìm kiếm mà không cần mã hóa bất cứ điều gì.
Đây là một tùy chọn để thực sự nghiêm túc, đặc biệt đối với người dùng Trực quan Composer. Các tính năng của nó nằm trong số những tính năng khác: bố cục đáp ứng đầy đủ với hỗ trợ kéo và thả, shortcodes, Hỗ trợ RTL và đa ngôn ngữ, một thiết kế đẹp và nhiều hơn nữa
Tải về | Bản demo | Web hosting
3. WordPress Social Sidebar
Tên của cái này Plugin WordPress sẽ cho bạn biết đại khái cái sau dùng để làm gì. Nhưng chúng tôi sẽ nói rằng Plugin WordPress Social Sidebar sẽ giúp bạn tạo một thanh bên trên trang web của mình với mục đích giúp bạn làm nhanh chóng chia sẻ nội dung của bạn trên các mạng xã hội khác nhau.
Các chức năng của nó bao gồm: tích hợp tự động với theme WordPress, khả năng định cấu hình nó từ trên xuống dưới, khả năng tương thích với một số trình duyệt hiện đại và gần đây, khả năng đặt thanh bên của bạn từ trái sang phải, phía trên hoặc ở cuối trang của bạn, 4 bộ màu được cung cấp nguyên bản, bố cục đáp ứng và nhiều hơn nữa.
Tải về | Bản demo | Web hosting
Các tài nguyên được đề xuất khác
Tìm hiểu về các tài nguyên được đề xuất khác để giúp bạn xây dựng và quản lý trang web của mình.
- 7 WordPress plugin để tạo ra thiết kế cho các sản phẩm của bạn
- Các plugin 4 WordPress để lưu trên DropBox
- Cách thêm cuộn vô hạn vào blog WordPress
- Các plugin 10 WordPress để nhận quyên góp trên blog của bạn
Kết luận
Đây ! Đó là nó cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn tạo hình ảnh "Retina" cho blog WordPress của bạn.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.
Nếu bạn có đề xuất hoặc nhận xét, hãy để lại trong phần của chúng tôi ý kiến. Đừng ngần ngại chia sẻ với bạn bè của bạn trên các mạng xã hội yêu thích của bạn.
...
