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 proveremo a introdurre un po 'la nozione di " retina pronto E ti mostro come creare un'immagine Retina.
Ma prima di iniziare, prenditi il ​​tempo per dare un'occhiata Come installare un tema WordPress, Quanti 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 "retinizza").
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 "
Per 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:
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.
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à ):
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:
- 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:
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 usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione 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.
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, Reddittumblr, 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.
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 WordPress Plugin dovrebbe dirti all'incirca a cosa serve quest'ultimo. Ma diremo che il WordPress Plugin Social Sidebar ti aiuterà a creare una barra laterale sul tuo sito Web con l'obiettivo di aiutarti condividi rapidamente i tuoi contenuti su diversi social network.
Le sue funzionalità includono: integrazione automatica con il tuo tema WordPress, la possibilità di configurarlo dall'alto verso il basso, la 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.
Download | Demo | Web hosting
Altre risorse consigliate
Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.
- plugin 7 WordPress per creare disegni per i vostri prodotti
- Plugin 4 WordPress da salvare su DropBox
- Come aggiungere lo scrolling infinito a un blog WordPress
- Plugin 10 WordPress per ricevere donazioni sul tuo blog
Conclusione
Ecco ! Questo è tutto per questo tutorial, spero che ti permetterà 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.
...
