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ć WordPress, Ilu 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 »:
Aby 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:
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.
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 Aktywa):
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:
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 WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego 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.
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, Tumblrze, 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.
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.
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
3. Społeczny pasek boczny WordPress
Nazwa tego WordPress Plugin powinien powiedzieć z grubsza, do czego służy to drugie. Ale powiemy, że WordPress Plugin Social Sidebar pomoże Ci utworzyć pasek boczny w Twojej witrynie, aby pomóc Ci to szybko udostępniaj swoje treści w różnych sieciach społecznościowych.
Jego funkcjonalności obejmują: automatyczną integrację z Twoim 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.
Inne zalecane zasoby
Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.
- Wtyczki 7 WordPress do tworzenia projektów dla swoich produktów
- Wtyczki 4 WordPress, aby zapisać na DropBox
- Jak dodać nieskończone przewijanie do bloga WordPress
- Wtyczki 10 WordPress do otrzymywania darowizn na swoim blogu
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.
...
