Вы потратили много времени на настройку дизайна своего блога, но почему изображения не отображаются правильно на смартфоне? Вы использовали изображения высокого качества, но плохое состояние изображения не исправляет отображение.
Многие люди не понимают, что новые устройства (особенно те из Apple) использовать передовые технологии отображения, которые влияют на способ отображения изображений, чтобы обеспечить их правильное отображение на компьютерах и смартфонах.
В этом уроке мы попытаемся ввести немного понятия " Сетчатка готова И покажу вам, как создать изображение Retina.
Но прежде чем начать, найдите время, чтобы взглянуть на Как установить тему WordPress, Сколько плагинов я должен установить на WordPress.
Тогда давай приступим к работе.
Объяснение изображений Retina Ready
За последние несколько лет качество экранов устройств продолжало улучшаться, и экраны Apple, в частности, проделали большую работу, чтобы они были предельно четкими и видимыми. Технологии "Retina DisplayТорговая марка Apple, используемая для описания определенного типа дисплея с определенными характеристиками.
Сетчатки экрана направлены на отображать текст и изображения максимально четко, без пикселей, видимых невооруженным глазом. Проблема для дизайнеров состоит в том, что отображение меняется в зависимости от размера экрана устройства и близости пользователя к экрану.
Разделив физическую ширину экрана на количество пикселей, отображаемых по горизонтали, мы получим количество пикселей на дюйм (ppi, также называется ppp для точек на дюйм). " высокий DPI Используется для обозначения любого устройства с разрешением более 200 пикселей на дюйм. Сюда входят все устройства отображения " сетчатка (От Apple) и некоторых устройств от других производителей.
Как создать изображения "Retina Ready" с помощью Photoshop
Работа с изображениями с двойным или четырехкратным разрешением означает, что вам придется увеличивать масштаб, чтобы увидеть все мелкие детали, однако очень тяжелые файлы вызывают проблемы с производительностью и проблемы с хранением файлов.
Решением для большинства дизайнеров было либо создать несколько слоев, либо сгруппировать их вместе, активируя их по мере необходимости. используя функцию "comps » Photoshop либо работать в исходном разрешении и экспортировать нужные им форматы (используя действие типа "ретинизировать").
Проблема этих двух методов заключается в том, что вы не можете видеть несколько изображений одновременно. Если вам нужно увидеть различия в изображениях в необходимых размерах, вам нужно переключаться между ними или экспортировать их.
К счастью для нас, энтузиастов Photoshop, Adobe добавила функцию, которая упрощает создание нескольких изображений. Теперь вы можете создавать несколько холстов бок о бок с помощью характерной монтажной области и создавать изображения разных размеров с помощью генератора. Посмотрим, как это работает.
1 - Создайте свой первый артборд
Новый инструмент монтажной области, введенный в Photoshop CC 2015, скрыт за инструментом перемещения. Вы можете щелкнуть инструмент в меню или использовать Shift + V для переключения между " смещение "И" монтажная область '
Чтобы создать рабочую плоскость, щелкните и перетащите область. Новый артборд будет отображаться на панели слоев с именем по умолчанию «Artboard 1».
Читайте также: Почему фрилансерам нужен ежедневный график
2 - Настройте артборд
Вы можете добавить слои, которые вам нужны, в артборд, и они будут вложены как слои (позволяя вам создать соответствующую структуру слоя). Мы предлагаем добавить ваши различные файлы, такие как фигуры, так, чтобы они располагались так, как вы хотите, прежде чем переходить к следующему шагу.
3 - Дублируйте артборд
Как только ваш первый артборд настроен в соответствии с вашими потребностями, вы можете продублировать его с помощью контекстного меню. Щелкните правой кнопкой мыши «Artboard 1» в области слоев и выберите «Duplicate Artboard». Это создает еще один похожий «артборд», содержащий такую же структуру со всеми ее компонентами:
Чтобы узнать также: Как дублировать статью или страницу на WordPress
4 - Разместите ваши столешницы (Artboard)
Огромное преимущество использования артбордов - это возможность видеть все ваши изображения одновременно. Для этого просто разместите столешницу в соответствии с вашими потребностями. Есть несколько способов сделать это:
Используйте панель, которая появляется, когда рабочая плоскость выбрана, чтобы ввести координаты X и Y в верхнем левом углу рабочей плоскости.
Перетащите выбранный артборд в любую позицию на Photoshop. Монтажная область активирована интеллектуально, так что вы можете автоматически выровнять несколько монтажных областей, чтобы их положения совпадали с предыдущим интервалом.
Используйте клавиши со стрелками на клавиатуре, чтобы переместить выбранную рабочую плоскость.
Также смотрите наш учебник по: Как исправить медиа-библиотеку, которая больше не работает в WordPress
5 - Измените размер артбордов (при необходимости)
Если вам нужно отрегулировать размер артбордов, у вас снова есть несколько вариантов:
- Измените размер с помощью маркеров, которые появляются при выборе монтажной области.
- Используйте панель параметров чуть ниже меню «Файл», чтобы выбрать предустановленные размеры, фиксированную ширину или высоту или переключаться между портретной и альбомной ориентацией.
- Используйте панель «Свойства», которая появляется при выборе рабочей поверхности, чтобы изменить размер и получить доступ к заранее определенным размерам.
6 - Создайте свое искусство
Теперь вы можете работать со своими столешницами, заменять компоненты и вносить изменения по мере необходимости. Предполагая, что исходная настройка не изменилась, теперь у вас будут идеальные изображения со всеми компонентами в нужном месте.
Смотрите также наш список 26 WordPress тема с системой перетаскивания для создания страниц
7 - Настройте инструмент «Создать»
« Порождать »Позволяет экспортировать монтажные области, слои или группы с использованием специального синтаксиса именования. Это ярлык для сохранения в Интернете. Чтобы гарантировать, что " Порождать Включен для вашего PSD, перейдите к Файл> Создать> Активы изображения "(Файл> Создать> Изображение Активы):
8 - Переименуйте артборды
Создать « Искусство "Для того, чтобы сохранить компоненты изображения вы работаете на основе параметров, установленных в наборе слоев или в артборде. Есть несколько вариантов, которые вы можете установить:
- Формат файла. Добавьте расширение (.JPG, GIF или .png ), чтобы сохранить соответствующий файл, например: header-main.png Компоненты изображения будут сохранены в той же папке, что и файл PSD, но с суффиксом «-assets».
- Сжатие файлов. После расширения вы можете добавить число, обозначающее используемый уровень сжатия. За " opt.jpg »Вы можете использовать проценты, а для png используйте соответствующие биты: 8, 24 или 32.
- Масштаб выхода. Вы можете установить масштаб вывода, добавив проценты или пиксели (ширина к высоте) перед именем изображения (например 100% header-main.png8 ).
- другие изображения. Вы можете экспортировать несколько изображений одной монтажной области (монтажная область) используя запятую или знак плюса для разделения имен изображений. Таким образом, каждое изображение может иметь свои собственные параметры, если каждое имя изображения уникально.
Комбинация этих параметров позволяет постоянно создавать сложные компоненты изображения для монтажных областей:
Если стандартные изображения необходимы для всех ваших столешниц, отметьте " Порождать Позволяет создать параметр, который будет применяться к каждому по умолчанию. Чтобы создать этот параметр, добавьте пустой слой вверху документа со следующими параметрами:
- Ключевое слово по умолчанию: Имя должно начинаться с этого, чтобы покинуть инструмент " Порождать »Возможность использовать его по умолчанию.
- Масштаб выхода: Позволяет установить масштаб вывода в процентах или пикселях (ширина к высоте).
- Папка / суффикс: Определите имя папки, в которой должны быть сохранены изображенияи суффикс для добавления к именам файлов.
Резюме
Это все, что у вас есть, попробуйте увеличить изображение чтобы увидеть, как ведет себя последний. При необходимости вы можете проверить изображение в своем блоге WordPress, загрузив его в свою медиатеку.
Не стесняйтесь задавать нам вопросы по мере необходимости.
Откройте для себя также несколько премиальных плагинов WordPress
Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.
Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
1. WP Ultimate Social
Это полный пакет всех функций социальных сетей, которые могут вам понадобиться в вашем блоге WordPress.
Читайте также наш 8 WordPress плагинов для интеграции системы снижения
Его основными особенностями являются: несколько значков социальных сетей, социальный обмен, который позволяет любому поделиться контентом вашего сайта (статьи, страницы, изображения, медиа) в популярных социальных сетях (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, DiggБуфер, Reddit., тамблер, Stumbleupon, Xing, Weibo, VK, Delicious), подключение к сайту с вашими учетными данными в социальных сетях, счетчик для отображения номеров ваших подписчиков, а также доли вашего сайта и других.
скачать | Демонстрация | веб-хостинг
2. WP Slick Slider Image Carousel Pro
Если вы заядлый последователь пакета Visual Composer, то вам следует рассмотреть возможность использования плагина WP Slick Slider. С почти предопределенными шаблонами 100 вы обязательно найдете то, что ищете, ничего не кодируя.
Это вариант, к которому нужно относиться очень серьезно, особенно для пользователей Визуальный Композитор. Среди его функций: полностью адаптивный макет с поддержкой перетаскивания, шорткоды, RTL и многоязычная поддержка, красивый дизайн и многое другое
скачать | Демонстрация | веб-хостинг
3. Социальная боковая панель WordPress
Название этого Плагин Wordpress должен сказать вам примерно, для чего последний. Но мы скажем, что Плагин Wordpress Социальная боковая панель поможет вам создать боковую панель на вашем веб-сайте с целью помочь вам сделать быстро делиться своим контентом в разных социальных сетях.
Его функциональные возможности включают в себя: автоматическую интеграцию с вашим WordPress тема, возможность настройки сверху вниз, совместимость с несколькими последними и современными браузерами, возможность размещения боковых панелей слева направовыше или внизу ваших страниц предлагаются 4 набора цветов, адаптивный макет и многое другое.
скачать | Демонстрация | веб-хостинг
Другие рекомендуемые ресурсы
Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.
- 7 WordPress плагины для создания дизайна для ваших продуктов
- 4 WordPress плагины для сохранения на DropBox
- Как добавить бесконечную прокрутку в блог WordPress
- 10 WordPress плагины для получения пожертвований на ваш блог
Заключение
Вот ! Вот и все, что касается этого руководства, я надеюсь, что он позволит вам создавать изображения Retina для вашего блога WordPress.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.
Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии. Не стесняйся поделиться с друзьями в ваших любимых социальных сетях.
...
