Ha invertido mucho tiempo en configurar el diseño de su blog, pero ¿por qué las imágenes no se muestran correctamente en el teléfono inteligente? Se aseguró de utilizar imágenes de alta calidad, pero las malas condiciones de la imagen no corrigen la visualización.
Muchas personas no se dan cuenta de que los nuevos dispositivos (especialmente los de Apple) utilizan una tecnología de visualización avanzada que afecta la forma en que se muestran las imágenes, para garantizar que se muestren correctamente tanto en las computadoras como en los teléfonos inteligentes.
En este tutorial intentaremos introducir un poco de la noción de " retina listo Y le mostrará cómo crear una imagen Retina.
Pero antes de comenzar, tómese el tiempo para echar un vistazo a Cómo instalar un tema de WordPress, ¿Cuántas plugins debería instalar en WordPress.
Entonces vamos a trabajar.
Explicación de las imágenes Retina Ready
Las pantallas de los dispositivos han seguido mejorando en calidad durante los últimos años, y las pantallas de Apple, en particular, han trabajado mucho para ser extremadamente claras y visibles. La tecnologia "Pantalla RetinaEs una marca de Apple que se utiliza para describir un cierto tipo de pantalla con aptitudes particulares.
Las pantallas de retina apuntan a mostrar texto e imágenes con la mayor claridad posible, sin píxeles visibles a simple vista. El desafío para los diseñadores es que la pantalla varía según el tamaño de pantalla del dispositivo y la proximidad del usuario a la pantalla.
Al dividir el ancho físico de la pantalla por el número de píxeles mostrados horizontalmente, tenemos los píxeles por pulgada (ppi, también llamado ppp para puntos por pulgada). " alta PPP Se utiliza para hacer referencia a cualquier dispositivo que tenga más de 200 píxeles por pulgada. Esto incluye todos los dispositivos de visualización " retina (De Apple) y algunos dispositivos de otros fabricantes.
Cómo crear imágenes "Retina Ready" con Photoshop
Trabajar con imágenes en resolución doble o cuádruple significa que tendrá que poder hacer zoom para ver todos los pequeños detalles, sin embargo, los archivos extremadamente pesados causan un problema de rendimiento y un desafío de almacenamiento de archivos.
La solución para la mayoría de los diseñadores ha sido crear varias capas y agruparlas, activándolas según sea necesario. utilizando la función "comps » Photoshop ya sea para trabajar con la resolución original y exportar los formatos que necesitan (usando una acción como "retinizar").
El desafío con estos dos métodos es que no puede ver varias imágenes al mismo tiempo. Si necesita ver las diferencias en las imágenes en los tamaños necesarios, debe cambiar entre ellas o exportarlas.
Por suerte para nosotros, los entusiastas de Photoshop, Adobe ha agregado una función que facilita la creación de varias imágenes. Ahora puede crear múltiples lienzos uno al lado del otro usando la mesa de trabajo característica y crear múltiples tamaños de imagen usando el generador. Vamos a ver cómo funciona.
1 - Crea tu primera mesa de trabajo
La nueva herramienta Mesa de trabajo, introducida en Photoshop CC 2015, está escondido detrás de la herramienta de movimiento. Puede hacer clic en la herramienta en el menú o usar Mayús + V para cambiar entre " Desplazamiento "Y" mesa de trabajo »:
Para crear un plano de trabajo, haga clic y arrastre un área. La nueva mesa de trabajo se mostrará en el panel de capas con el nombre predeterminado "Mesa de trabajo 1".
Lea también: ¿Por qué los trabajadores independientes necesitan un horario diario?
2 - Configura tu mesa de trabajo
Puede agregar las capas que necesita a su mesa de trabajo, y se anidarán como capas (permitiéndole crear una estructura de capa apropiada). Le sugerimos que agregue sus diversos archivos, como las formas, para que estén colocados como desee antes de continuar con el siguiente paso.
3 - Duplica tu mesa de trabajo
Una vez que su primera mesa de trabajo esté configurada para satisfacer sus necesidades, puede duplicarla usando el menú contextual. Haga clic derecho en "Mesa de trabajo 1" en el área de capas y seleccione "Duplicar mesa de trabajo". Esto crea otra "Mesa de trabajo" similar, que contiene la misma estructura con todos sus componentes:
Para descubrir también: Cómo duplicar un artículo o una página en WordPress
4 - Coloca tus encimeras (Artboard)
La gran ventaja de usar mesas de trabajo es poder ver todas sus imágenes al mismo tiempo. Para hacer esto, simplemente coloque sus encimeras de acuerdo a sus necesidades. Hay varias formas de hacerlo:
Use el panel que aparece cuando se selecciona un plano de trabajo para ingresar las coordenadas X e Y en la esquina superior izquierda del plano de trabajo.
Arrastre la mesa de trabajo seleccionada a cualquier posición en el Photoshop. La mesa de trabajo se activa de forma inteligente, por lo que puede alinear automáticamente varias mesas de trabajo para que sus posiciones se bloqueen en el espacio anterior.
Use las teclas de flecha en el teclado para mover un plano de trabajo seleccionado.
Vea también nuestro tutorial sobre: Cómo arreglar la biblioteca multimedia que ya no funciona en WordPress
5 - Cambie el tamaño de sus mesas de trabajo (cuando sea necesario)
Si necesita ajustar el tamaño de sus mesas de trabajo, nuevamente tiene varias opciones:
- Cambie el tamaño usando los controladores que aparecen cuando selecciona una mesa de trabajo.
- Utilice el panel de opciones que se encuentra debajo del menú "Archivo" para elegir tamaños preestablecidos, anchos o alturas fijas, o alternar entre vertical y horizontal.
- Utilice el panel "Propiedades" que aparece cuando se selecciona una encimera para cambiar el tamaño y acceder a tamaños predefinidos.
6 - Crea tu arte
Ahora puede trabajar con sus encimeras, reemplazar componentes y realizar los cambios necesarios. Suponiendo que su configuración original no haya cambiado, ahora tendrá imágenes perfectas en píxeles con todos los componentes en el lugar correcto.
Vea también nuestra lista de 26 sistema de Temas de WordPress con arrastrar y soltar para crear sus páginas
7 - Configurar la herramienta "Generar"
« Generar »Le permite exportar mesas de trabajo, capas o grupos utilizando una sintaxis de nomenclatura especial. Este es un atajo para guardar para la web. Para asegurar eso " Generar Está habilitado para su PSD, vaya a " Archivo> Generar> Activos de imagen "(Archivo> Generar> Imagen Activos):
8 - Cambie el nombre de sus mesas de trabajo
Generar « Arte 'Para guardar componentes de imagen está trabajando según las opciones establecidas en el conjunto de capas o en su mesa de trabajo. Hay algunas opciones que puede configurar:
- El formato de archivo. Agregue una extensión (.jpg, gif o png ) para guardar el archivo en cuestión, por ejemplo: header-main.png Los componentes de la imagen se guardarán en la misma carpeta que el archivo PSD, pero con "-assets" como sufijo.
- Compresión de archivo. Después de la extensión, puede agregar un número que indique el nivel de compresión utilizado. Para " opt.jpg »Puede usar porcentajes, y para png use los bits respectivos: 8, 24 o 32.
- Escala de salida. Puede establecer la escala de salida agregando porcentaje o píxeles (la anchura y la altura) antes del nombre de la imagen (por ejemplo 100% header-main.png8 ).
- más imágenes. Puede exportar varias imágenes de la misma mesa de trabajo (mesa de trabajo) utilizando una coma o un signo más para separar los nombres de las imágenes. Por tanto, cada imagen puede tener sus propias opciones siempre que cada nombre de la imagen sea único.
La combinación de estas opciones le permite crear constantemente componentes de imagen complejos para sus mesas de trabajo:
Si se necesitan imágenes estándar para todas sus encimeras, el " Generar Le permite crear un parámetro para aplicar a cada uno de forma predeterminada. Para crear este parámetro, agregue una capa vacía en la parte superior de su documento con las siguientes opciones:
- Palabra clave predeterminada: El nombre debe comenzar con esto para salir de la herramienta " Generar »La libertad de utilizarlo como predeterminado.
- Escala de salida: Le permite establecer la escala de salida con un porcentaje o píxeles (la anchura y la altura).
- Carpeta / sufijo: Defina el nombre de la carpeta en la que se guardarán las imágenes., y un sufijo para agregar a los nombres de los archivos.
Resumen
Eso es todo lo que tienes allí, intenta acercar la imagen para ver cómo se comporta este último. Si es necesario, puede probar la imagen en su blog de WordPress cargándola en su biblioteca de medios.
No dude en hacernos preguntas según sea necesario.
Descubre también algunos complementos premium de WordPress
Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.
Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.
1. WP Ultimate Social
Este es un paquete definitivo de todas las funciones de redes sociales que posiblemente pueda necesitar en su blog de WordPress.
Lea también nuestro 8 WordPress plugins para integrar un sistema de reducción
Sus características principales son: múltiples iconos de redes sociales, compartir en redes sociales que permite a cualquiera comparte el contenido de tu sitio web (artículos, páginas, imágenes, medios) en redes sociales populares (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, DiggTampón RedditTumblr Tropezar con, Xing, Weibo, VK, Delicious), conexión al sitio web con sus credenciales de redes sociales, un contador para mostrar los números de sus seguidores y compartir su sitio web y otros.
Descargar | Demo | alojamiento web
2. WP Slick Slider Image Carousel Pro
Si eres un seguidor ávido de la suite Visual Composer, usar el complemento WP Slick Slider es una opción que deberás considerar. Con casi plantillas predefinidas de 100, definitivamente encontrará lo que está buscando sin codificar nada.
Esta es una opción para tomar realmente en serio, especialmente para los usuarios de Visual Composer. Sus características son, entre otras: un diseño totalmente receptivo con soporte para arrastrar y soltar, un códigos cortos, RTL y soporte multilingüe, un hermoso diseño y mucho más
Descargar | Demo | alojamiento web
3. Barra lateral social de WordPress
El nombre de este Plugin de WordPress debería decirte más o menos para qué sirve este último. Pero diremos que el Plugin de WordPress Social Sidebar te ayudará a crear una barra lateral en tu sitio web con el objetivo de ayudarte a hacer comparte rápidamente tu contenido en diferentes redes sociales.
Sus funcionalidades incluyen: integración automática con su tema de WordPress, la capacidad de configurarlo de arriba a abajo, compatibilidad con varios navegadores recientes y modernos, la posibilidad de colocar tus barras laterales de izquierda a derecha, arriba o al final de sus páginas, se ofrecen 4 juegos de colores de forma nativa, un diseño receptivo y mucho más.
Descargar | Demo | alojamiento web
Otros recursos recomendados
Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.
- plugins de WordPress 7 para crear diseños para sus productos
- 4 WordPress plugins para guardar en DropBox
- Cómo agregar desplazamiento infinito a un blog de WordPress
- Los complementos de 10 WordPress para recibir donaciones en tu blog
Conclusión
Listo ! Eso es todo por este tutorial, espero que te permita crear imágenes "Retina" para tu blog de WordPress.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.
Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios. No dude en comparte con tus amigos en tus redes sociales favoritas.
...
