Bỏ qua đến nội dung chính

Cách tạo hình ảnh "Retina" cho blog WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

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 WordPressLà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 »:

Artboard-Tool1-photoshop-guide-wordpress-created-hình ảnh-retina đã sẵn sàngĐể 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ó:

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

sao chép artwork photoshop

Để 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.

Tài sản của khu vực làm việc photoshop

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):

công cụ photoshopcông cụ photoshop

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:

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • Đị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:

quản lý thành phần hình ả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ác plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của 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.wp-ultimate-xã hội

Đọ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ì.

Thanh trượt Wp mượt mà và băng chuyền hình ảnh chuyên nghiệp

Đâ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 plugin WordPress này sẽ cho bạn biết đại khái nó dùng để làm gì. Nhưng có vẻ như plugin Thanh công cụ xã hội WordPress sẽ giúp bạn tạo một thanh bên trên trang web của mình để 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.

Thanh bên xã hội của Wordpress

Các chức năng của nó nằm trong số các chức năng khác: tích hợp tự động vào chủ đề WordPress của bạn, khả năng định cấu hình từ trên xuống dưới, 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.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

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.

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

... 

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
10 cổ phiếu
cổ phiếu10
tweet
Enregistrer