Poświęciłeś dużo czasu na przygotowanie projektu swojego bloga, ale dlaczego obrazy nie są poprawnie wyświetlane na smartfonie? Upewniłeś się, że używasz obrazów wysokiej jakości, ale zły stan obrazu nie poprawia wyświetlania.

Wiele osób nie zdaje sobie sprawy, że nowe urządzenia (zwłaszcza te od Apple) używają zaawansowanej technologii wyświetlania, która wpływa na sposób wyświetlania obrazów, aby zapewnić ich prawidłowe wyświetlanie zarówno na komputerach, jak i na smartfonach.

W tym samouczku postaramy się wprowadzić pojęcie „ siatkówki gotowe I pokażę, jak stworzyć obraz siatkówki.

Ale zanim zaczniesz, nie spiesz się Jak zainstalować WordPressIlu wtyczki należy zainstalować na WordPress.

Więc chodźmy do pracy.

Objaśnienia dotyczące obrazów przygotowanych siatkówką

Jakość ekranów urządzeń stale się poprawiała w ciągu ostatnich kilku lat, a ekrany Apple w szczególności wykonały wiele pracy, aby były wyjątkowo wyraźne i widoczne. Technologia "Wyświetlacz RetinaJest marką Apple używaną do opisania określonego typu wyświetlacza o określonych umiejętnościach.

Ekrany siatkówki mają na celu wyświetlać tekst i obrazy tak wyraźnie, jak to możliwe, bez widocznych gołym okiem pikseli. Wyzwaniem dla projektantów jest to, że wyświetlacz zmienia się w zależności od rozmiaru ekranu urządzenia i odległości użytkownika od ekranu.

Dzieląc fizyczną szerokość ekranu przez liczbę pikseli wyświetlanych poziomo, otrzymujemy piksele na cal (ppi, zwany także ppp dla kropek na cal). " Wysoka DPI Jest używany w odniesieniu do dowolnego urządzenia, które ma więcej niż 200 pikseli na cal. Obejmuje to wszystkie urządzenia wyświetlające ” siatkówka (Od Apple) i niektóre urządzenia innych producentów.

Jak tworzyć obrazy „Retina Ready” w programie Photoshop

Praca z obrazami w rozdzielczości podwójnej lub poczwórnej oznacza, że ​​będziesz mógł powiększyć obraz, aby zobaczyć wszystkie małe szczegóły, jednak wyjątkowo ciężkie pliki powodują problemy z wydajnością i problemy z przechowywaniem plików.

Rozwiązaniem dla większości projektantów było utworzenie wielu warstw i zgrupowanie ich razem, aktywując je w razie potrzeby. używając funkcji „comps » Photoshop albo pracować w oryginalnej rozdzielczości i eksportować potrzebne formaty (używając akcji takiej jak „retinize”).

Wyzwaniem związanym z tymi dwiema metodami jest to, że nie można zobaczyć wielu obrazów jednocześnie. Jeśli chcesz zobaczyć różnice w obrazach w niezbędnych rozmiarach, musisz je przełączać lub eksportować.

Na szczęście dla nas, entuzjastów Photoshopa, Adobe dodał funkcję, która ułatwia tworzenie wielu obrazów. Teraz możesz tworzyć wiele płócien obok siebie, korzystając z charakterystycznego obszaru roboczego, i tworzyć obrazy o różnych rozmiarach za pomocą generatora. Zobaczmy, jak to działa.

1 - Utwórz swój pierwszy obszar roboczy

Nowe narzędzie Artboard, wprowadzone w Photoshop CC 2015, jest ukryty za narzędziem ruchu. Możesz kliknąć narzędzie w menu lub użyć Shift + V, aby przełączać się między „ przemieszczenie "A" obszar roboczy »:

Artboard-Tool1-photoshop-tutorial-wordpress-create-images-retina gotowyAby utworzyć płaszczyznę roboczą, kliknij i przeciągnij obszar. Nowy obszar roboczy zostanie wyświetlony w panelu warstw z domyślną nazwą „Obszar roboczy 1”.

Czytaj także: Dlaczego freelancerzy potrzebują codziennego harmonogramu

2 - Skonfiguruj swój obszar roboczy

Możesz dodać potrzebne warstwy do swojego obszaru roboczego, a zostaną one zagnieżdżone tak, jak warstwy (umożliwiając stworzenie odpowiedniej struktury warstw). Sugerujemy dodanie różnych plików, takich jak kształty, aby były ustawione tak, jak chcesz, zanim przejdziesz do następnego kroku.

3 - Powiel swój obszar roboczy

Po skonfigurowaniu pierwszego obszaru roboczego zgodnie z Twoimi potrzebami możesz go powielić za pomocą menu kontekstowego. Kliknij prawym przyciskiem myszy „Obszar roboczy 1” w obszarze warstw i wybierz „Powiel obszar roboczy”. Tworzy to kolejny podobny „Obszar roboczy” zawierający tę samą strukturę ze wszystkimi jej komponentami:

duplikacja photoshopa

Aby odkryć również: Jak powielić artykuł lub stronę na WordPress

4 - Umieść swoje blaty (obszar roboczy)

Ogromną zaletą korzystania z obszarów roboczych jest możliwość jednoczesnego oglądania wszystkich obrazów. Aby to zrobić, po prostu ustaw blaty zgodnie ze swoimi potrzebami. Można to zrobić na kilka sposobów:

Użyj panelu, który pojawia się po wybraniu płaszczyzny roboczej, aby wprowadzić współrzędne X i Y w lewym górnym rogu płaszczyzny roboczej.

Przeciągnij wybrany obszar roboczy w dowolne miejsce w Photoshop. Obszar roboczy został inteligentnie aktywowany, dzięki czemu można automatycznie wyrównać wiele obszarów roboczych, tak aby ich pozycje zablokowały się w poprzednich odstępach.

Użyj klawiszy strzałek na klawiaturze, aby przesunąć wybraną płaszczyznę roboczą.

Zobacz także nasz samouczek na temat: Jak naprawić bibliotekę multimediów, która nie działa już na WordPress

5 - Zmień rozmiar obszarów roboczych (w razie potrzeby)

Jeśli chcesz dostosować rozmiar obszarów roboczych, ponownie masz kilka opcji:

  • Zmień rozmiar za pomocą uchwytów, które pojawiają się po wybraniu obszaru roboczego.
  • Skorzystaj z panelu opcji tuż pod menu „Plik”, aby wybrać gotowe rozmiary, stałe szerokości lub wysokości lub przełączać się między orientacją pionową i poziomą.
  • Użyj panelu „Właściwości”, który pojawia się po wybraniu blatu, aby zmienić rozmiar i uzyskać dostęp do wstępnie zdefiniowanych rozmiarów.

Własność obszaru roboczego Photohop

6 - Stwórz swoją sztukę

Możesz teraz pracować z blatami, wymieniać komponenty i wprowadzać zmiany w razie potrzeby. Zakładając, że Twoja oryginalna konfiguracja nie uległa zmianie, będziesz mieć teraz doskonałe obrazy w pikselach ze wszystkimi komponentami we właściwym miejscu.

Zobacz także naszą listę 26 WordPress tematy z systemu przeciągnij i upuść do tworzenia stron

7 - Skonfiguruj narzędzie „Generuj”

« Generuj swój »Umożliwia eksportowanie obszarów roboczych, warstw lub grup przy użyciu specjalnej składni nazewnictwa. To jest skrót do zapisywania w Internecie. Aby zapewnić, że „ Generuj swój Jest włączony na PSD, przejdź do „ Plik> Generuj> Zasoby obrazu "(Plik> Generuj> Obraz Majątek):

narzędzie generuje photoshopnarzędzie generuje photoshop

8 - Zmień nazwy obszarów roboczych

Generuj « sztuka Dla zapisz komponenty obrazu pracujesz w oparciu o opcje ustawione w zestawie warstw lub w obszarze roboczym. Istnieje kilka opcji, które możesz ustawić:

  • Format pliku. Dodaj rozszerzenie (.jpg, .gif lub .png ), aby zapisać odpowiedni plik, na przykład: header-main.png Komponenty obrazu zostaną zapisane w tym samym folderze co plik PSD, ale z przyrostkiem „-assets”.
  • Kompresja pliku.  Po rozszerzeniu możesz dodać liczbę wskazującą poziom zastosowanej kompresji. Dla " opt.jpg »Możesz użyć wartości procentowych, a dla png użyć odpowiednich bitów: 8, 24 lub 32.
  • Wyjdź ze skali. Możesz ustawić skalę wyjściową, dodając procent lub piksele (szerokość na wysokości) przed nazwą obrazu (na przykład 100% header-main.png8 ).
  • Wiele obrazów. Możesz wyeksportować wiele obrazów tego samego obszaru roboczego (obszar roboczy) używając przecinka lub znaku plusa do oddzielenia nazw obrazów. W ten sposób każdy obraz może mieć własne opcje, o ile każda nazwa obrazu jest niepowtarzalna.

Połączenie tych opcji umożliwia ciągłe tworzenie złożonych komponentów obrazu dla obszarów roboczych:

zarządzanie komponentami obrazu

Jeśli standardowe obrazy są wymagane dla wszystkich blatów roboczych, opcja „ Generuj swój Umożliwia utworzenie parametru, który będzie domyślnie stosowany do każdego z nich. Aby utworzyć ten parametr, dodaj pustą warstwę u góry dokumentu z następującymi opcjami:

  • Domyślne słowo kluczowe: Nazwa musi zaczynać się od tego, aby opuścić narzędzie " Generuj swój »Swoboda używania go jako domyślnego.
  • Wyjdź ze skali: Umożliwia ustawienie skali wyjściowej za pomocą wartości procentowej lub pikseli (szerokość na wysokości).
  • Folder / sufiksu: Określ nazwę folderu, w którym mają zostać zapisane obrazyi sufiks, który ma być dodawany do nazw plików.

streszczenie

To wszystko, co tam masz, spróbuj powiększyć obraz zobaczyć, jak zachowuje się ten drugi. W razie potrzeby możesz przetestować obraz na swoim blogu WordPress, przesyłając go do swojej biblioteki multimediów.

W razie potrzeby możesz zadawać nam pytania.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. WP Ultimate Social

To kompletny zestaw wszystkich funkcji sieci społecznościowych, których możesz potrzebować na swoim blogu WordPress.wp-ultimate-społeczny

Przeczytaj także nasze 8 WordPress Wtyczki zintegrować system redukcji

Jego główne cechy to: wiele ikon sieci społecznościowychudostępnianie społecznościowe, które pozwala każdemu udostępnij treść swojej witryny (artykuły, strony, obrazy, media) w popularnych sieciach społecznościowych (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, diggBufor Reddit, Tumblr, StumbleUpon, Xing, Weibo, VK, Delicious), połączenie z witryną przy użyciu poświadczeń w mediach społecznościowych, licznik do wyświetlania liczby obserwujących oraz udostępnienia witryny i innych osób.

Pobierz | Demo | hosting

2. WP Slick Slider Image Carousel Pro

Jeśli jesteś zapalonym zwolennikiem pakietu Visual Composer, skorzystanie z wtyczki WP Slick Slider jest opcją, którą musisz rozważyć. Dzięki prawie wstępnie zdefiniowanym szablonom 100 na pewno znajdziesz to, czego szukasz, bez kodowania czegokolwiek.

Zręczny suwak WP i karuzela obrazów Pro

Jest to opcja, którą należy traktować naprawdę poważnie, szczególnie dla użytkowników Program Visual Composer. Jego cechy to między innymi: w pełni responsywny układ z obsługą przeciągania i upuszczania, a shortcodes, Wsparcie RTL i wielojęzyczne, piękny design i wiele więcej

Pobierz | Demo | hosting

3. Społeczny pasek boczny WordPress

Nazwa tej wtyczki WordPress powinna z grubsza powiedzieć, po co jest. Wygląda jednak na to, że wtyczka WordPress Social Sidebar pomoże Ci stworzyć pasek boczny na twojej stronie internetowej, aby ci pomóc szybko udostępniaj swoje treści w różnych sieciach społecznościowych.

Społeczny pasek boczny Wordpress

Jego funkcjonalności to między innymi: automatyczna integracja z motywem WordPress, możliwość konfiguracji od góry do dołu, kompatybilność z kilkoma najnowszymi i nowoczesnymi przeglądarkami, możliwość umieszczenia pasków bocznych od lewej do prawej, powyżej lub na dole stron, oferowane są 4 zestawy kolorów, responsywny układ i wiele więcej.

Pobierz Demo | hosting

Inne zalecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

Wnioski

Tutaj! To wszystko w tym samouczku. Mam nadzieję, że pozwoli Ci on stworzyć obrazy „Retina” na swoim blogu WordPress. 

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na temat Tworzenie bloga WordPress.

Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych

... 

10 akcji
udział10
ćwierkanie
Enregistrer