Vai al contenuto principale

Come creare immagini "retina" per un blog WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Hai investito molto tempo nell'impostazione del design del tuo blog, ma perché le immagini non vengono visualizzate correttamente su Smartphone? Ti sei assicurato di utilizzare immagini di alta qualità, ma una cattiva condizione dell'immagine non corregge il display.

Molte persone non si rendono conto che i nuovi dispositivi (specialmente quelli di Apple) utilizzano una tecnologia di visualizzazione avanzata che influisce sul modo in cui le immagini vengono visualizzate, per garantire che vengano visualizzate correttamente su computer e smartphone.

In questo tutorial, cercheremo di introdurre la nozione di "retina pronto”E mostrarti come creare un'immagine Retina.

Ma prima di iniziare, prenditi il ​​tempo per dare un'occhiata Come installare un tema WordPressQuanti plugin dovrei installare su WordPress.

Allora mettiamoci al lavoro.

Spiegazione delle immagini Retina pronto

Gli schermi dei dispositivi hanno continuato a migliorare in termini di qualità negli ultimi anni e gli schermi di Apple in particolare hanno svolto molto lavoro per essere estremamente chiari e visibili. Tecnologia "Retina DisplayÈ un marchio di Apple utilizzato per descrivere un certo tipo di display con attitudini particolari.

Gli schermi Retina mirano a visualizzare testo e immagini nel modo più chiaro possibile, senza pixel visibili ad occhio nudo. La sfida per i progettisti è che il display varia a seconda delle dimensioni dello schermo del dispositivo e della vicinanza dell'utente allo schermo.

Dividendo la larghezza fisica dello schermo per il numero di pixel visualizzati orizzontalmente, abbiamo i pixel per pollice (ppi, chiamato anche ppp per punti per pollice). " alta DPI Viene utilizzato per fare riferimento a qualsiasi dispositivo con più di 200 pixel per pollice. Questo include tutti i dispositivi di visualizzazione " retina (Da Apple) e alcuni dispositivi di altri produttori.

Come creare immagini "Retina Ready" con Photoshop

Lavorare con immagini a risoluzione doppia o quadrupla significa che dovrai essere in grado di ingrandire per vedere tutti i piccoli dettagli, tuttavia i file estremamente pesanti causano un problema di prestazioni e una sfida di archiviazione dei file.

La soluzione per la maggior parte dei progettisti è stata quella di creare più livelli e raggrupparli insieme, attivandoli secondo necessità. usando la funzione "comps » Photoshop per lavorare alla risoluzione originale ed esportare i formati di cui hanno bisogno (usando un'azione come "retinizzare").

La sfida con questi due metodi è che non puoi vedere più immagini contemporaneamente. Se devi vedere le differenze nelle immagini con le dimensioni necessarie, devi passare da una all'altra o esportarle.

Fortunatamente per noi appassionati di Photoshop, Adobe ha aggiunto una funzionalità che semplifica la creazione di più immagini. Ora puoi creare più tele fianco a fianco utilizzando la caratteristica tavola da disegno e creare più dimensioni di immagine utilizzando il generatore. Vediamo come funziona.

1 - Crea la tua prima tavola da disegno

Il nuovo strumento tavola disegno, introdotta nel Photoshop CC 2015, è nascosto dietro lo strumento di movimento. Puoi fare clic sullo strumento nel menu o utilizzare Maiusc + V per passare da " déplacement "E" tavola da disegno "

Tavola da disegno-Tool1-photoshop dimostrativi-wordpress-creare immagini della retina-readyPer creare un piano di lavoro, fare clic e trascinare un'area. La nuova tavola da disegno verrà visualizzata nel pannello dei livelli con il nome predefinito "Tavola da disegno 1".

Leggi anche: Perché i liberi professionisti hanno bisogno di un programma giornaliero

2 - Configura la tua tavola da disegno

Puoi aggiungere i livelli necessari alla tavola da disegno e questi verranno nidificati man mano che i livelli sono (che consente di creare una struttura di livelli appropriata). Ti suggeriamo di aggiungere i tuoi vari file, come le forme, in modo che siano posizionati come desideri prima di procedere al passaggio successivo.

3 - Duplica la tua tavola da disegno

Una volta che la tua prima tavola da disegno è impostata per soddisfare le tue esigenze, puoi duplicarla utilizzando il menu contestuale. Fare clic con il tasto destro su "Tavola da disegno 1" nell'area dei livelli e selezionare "Duplica tavola da disegno". Questo crea un'altra "tavola da disegno" simile, contenente la stessa struttura con tutti i suoi componenti:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

photoshop duplicazione tavola da disegno

Per scoprire anche: Come duplicare un articolo o una pagina su WordPress

4 - Posiziona i tuoi piani di lavoro (tavola da disegno)

Il grande vantaggio dell'utilizzo delle tavole da disegno è la possibilità di vedere tutte le tue immagini contemporaneamente. Per fare ciò, è sufficiente posizionare i piani di lavoro in base alle proprie esigenze. Ci sono diversi modi per farlo:

Utilizzare il pannello che appare quando si seleziona un piano di lavoro per inserire le coordinate X e Y nell'angolo in alto a sinistra del piano di lavoro.

Trascina la tavola da disegno selezionata in qualsiasi posizione in Photoshop. La tavola da disegno attivata in modo intelligente, in modo da poter allineare automaticamente più tavole da disegno in modo che le loro posizioni si blocchino nella spaziatura precedente.

Utilizzare i tasti freccia sulla tastiera per spostare un piano di lavoro selezionato.

Vedi anche il nostro tutorial su: Come riparare la libreria multimediale che non funziona più su WordPress

5 - Ridimensiona le tue tavole da disegno (se necessario)

Se devi regolare le dimensioni delle tue tavole da disegno, hai di nuovo diverse opzioni:

  • Ridimensiona utilizzando le maniglie che appaiono quando selezioni una tavola da disegno.
  • Usa il pannello delle opzioni appena sotto il menu "File" per scegliere dimensioni preimpostate, larghezze o altezze fisse, o per alternare tra verticale e orizzontale.
  • Utilizzare il pannello "Proprietà" che appare quando si seleziona un piano di lavoro per modificare le dimensioni e accedere alle dimensioni predefinite.

Proprietà dell'area di lavoro di photohop

6 - Crea la tua arte

È ora possibile lavorare con i controsoffitti, sostituire i componenti e apportare le modifiche necessarie. Supponendo che la configurazione originale sia invariata, ora avrai immagini pixel perfette con tutti i componenti al posto giusto.

Vedi anche il nostro elenco di 26 WordPress temi con il drag and drop di sistema per creare le pagine

7 - Imposta lo strumento "Genera"

« Generare »Consente di esportare tavole da disegno, livelli o gruppi utilizzando una sintassi di denominazione speciale. Questa è una scorciatoia per salvare per il web. Per garantire che " Generare È abilitato per il tuo PSD, vai a " File> Genera> Risorse immagine "(File> Genera> Immagine Attività):

generare strumento di photoshopgenerare strumento di photoshop

8 - Rinomina le tue tavole da disegno

Genera « Arte Per salva i componenti dell'immagine stai lavorando in base alle opzioni impostate nel set di livelli o nella tavola da disegno. Ci sono alcune opzioni che puoi impostare:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • Il formato di file. Aggiungi un'estensione (.jpg, .gif o .png ) per salvare il file in questione, ad esempio: header-main.png I componenti dell'immagine verranno salvati nella stessa cartella del file PSD, ma con "-assets" come suffisso.
  • Compressione dei file.  Dopo l'estensione, è possibile aggiungere un numero che indica il livello di compressione utilizzato. Per " opt.jpg »È possibile utilizzare le percentuali e per png utilizzare i rispettivi bit: 8, 24 o 32.
  • Scala di uscita. È possibile impostare la scala di output aggiungendo percentuale o pixel (la larghezza di altezza) prima del nome dell'immagine (ad esempio 100% header-main.png8 ).
  • altre immagini. Puoi esportare più immagini della stessa tavola da disegno (tavola da disegno) utilizzando una virgola o un segno più per separare i nomi delle immagini. Ogni immagine può quindi avere le proprie opzioni purché ogni nome dell'immagine sia unico.

La combinazione di queste opzioni ti consente di creare costantemente componenti di immagini complesse per le tue tavole da disegno:

gestione di componenti dell'immagine

Se sono necessarie immagini standard per tutti i tuoi piani di lavoro, il " Generare Consente di creare un parametro da applicare a ciascuno per impostazione predefinita. Per creare questo parametro, aggiungi un livello vuoto nella parte superiore del documento con le seguenti opzioni:

  • Parola chiave predefinita: Il nome deve iniziare con questo per lasciare lo strumento " Generare »La libertà di usarlo come predefinito.
  • Scala di uscita: Consente di impostare la scala di output con una percentuale o pixel (la larghezza di altezza).
  • Cartella / suffisso: Definire il nome della cartella in cui salvare le immaginie un suffisso da aggiungere ai nomi dei file.

Riassunto

Questo è tutto quello che hai lì, prova a farlo ingrandire l'immagine per vedere come si comporta quest'ultimo. Se necessario, puoi testare l'immagine sul tuo blog WordPress caricandola sul tuo catalogo multimediale.

Sentiti libero di farci domande se necessario.

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. WP Ultimate Social

Questo è un pacchetto definitivo di tutte le funzionalità di social networking di cui potresti aver bisogno sul tuo blog WordPress.wp-ultimate-sociali

Leggi anche il nostro 8 WordPress plugin per integrare un sistema di riduzione

Le sue caratteristiche principali sono: più icone di social network, condivisione sociale che consente a chiunque di condividere il contenuto del tuo sito Web (articoli, pagine, immagini, media) su social network popolari (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, tampone, Reddit, Tumblr, Stumbleupon, Xing, Weibo, VK, Delicious), connessione al sito Web con le credenziali dei social media, un contatore per visualizzare il numero dei tuoi follower e le condivisioni del tuo sito Web e di altri.

Download | Demo | Web hosting

2. WP Slick Slider Image Carousel Pro

Se sei un appassionato seguace della suite Visual Composer, l'utilizzo del plugin WP Slick Slider è un'opzione che devi considerare. Con quasi i modelli predefiniti 100, troverai sicuramente quello che stai cercando senza codificare nulla.

Wp slick slider e image carousel pro

Questa è un'opzione da prendere davvero sul serio, specialmente per gli utenti di Visuale Compositore. Le sue caratteristiche sono tra le altre: un layout completamente reattivo con supporto drag and drop, a shortcodes, RTL e supporto multilingue, un bel design e molto altro

Download | Demo | Web hosting

3. Barra laterale social di WordPress

Il nome di questo plugin di WordPress dovrebbe dirti a cosa serve. Ma sembra che il plug-in della sidebar sociale di WordPress ti aiuterà a creare una barra laterale sul tuo sito Web per aiutarti a farlo condividi rapidamente i tuoi contenuti su diversi social network.

Barra laterale sociale di Wordpress

Le sue funzionalità sono tra le altre: integrazione automatica nel tuo tema WordPress, possibilità di configurarlo dall'alto verso il basso, compatibilità con diversi browser recenti e moderni, la possibilità di posizionare le barre laterali da sinistra a destra, sopra o in fondo alle pagine, vengono offerti nativamente 4 set di colori, un layout reattivo e molto altro.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Download Demo | Web hosting

Altre risorse consigliate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti permetta di creare immagini "Retina" per il tuo blog WordPress. 

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

... 

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
10 azioni
quota10
Tweet
Enregistrer