Come progettare un intestazione WordPress con testo e grafica

Come progettare un colpo di testa di Wordpress utilizzando software di grafica gratuito. testo e la grafica è sempre meglio che usare lo stesso come tutti gli altri.

A+ A-

Se si sa come progettare un colpo di testa di WordPress allora si può personalizzare qualsiasi tema WordPress per soddisfare la vostra nicchia. È possibile utilizzare le proprie fotografie, se lo si desidera e progettare il proprio colpo di testa di testo. Non sarà più trovare altri blog WordPress che sembrano uguali ai suoi. Le intestazioni saranno unici nel testo e grafica.

Molte persone sanno come farlo utilizzando Photoshop, ma è davvero la pena spendere più di $ 500 se tutto quello che vogliamo fare è intestazioni di progettazione? Si potrebbe usare Photoshop Elements, che è molto meno costoso, ma perché non basta usare il software libero?

Graphics Software Libero

Ci sono vari tipi di software libero disponibile on-line, tra cui l'Open Source (ad esempio Apache, Linux, Firefox, e Android) e le applicazioni offerte dal Free Software Foundation. Ci sono anche freeware, che è libero di utilizzare, ma è in genere ancora 'closed source' o di proprietà, come Skype e il lettore Adobe PDF.

Qui ci sono due forme di freeware che è possibile utilizzare completamente gratuito, vale a dire Paint.net e XHeader. Saremo utilizzando sia di questi in questo tutorial.

Paint.net

Panit.net è un semplice ma potente editor di grafica di Windows che è stato originariamente progettato come una versione gratuita di Microsoft Paint, ma ha ora sviluppato in qualcosa che molti credono di competere con Photoshop per la maggior parte delle applicazioni.

Esso può essere scaricato dal www.getpaint.net

XHeader

Questo è un altro software gratuito che può essere utilizzato per convertire la grafica nelle intestazioni. Si può usare per aggiungere testo alle intestazioni progettati utilizzando Paint, e ridimensionarle per le dimensioni esatte richieste dal tuo tema WordPress.

Esso può essere scaricato dal www.download.cnet.com/XHeader/3000-2191_4-10900367.html

Se è vero che molte applicazioni di software libero sono inoltre dotate di malware, questi due pacchetti provengono da fonti attendibili e nessun adware, inseguitori o virus sono stati riportati con loro. Se questo vi preoccupa, è sufficiente scaricarli quindi eseguire il software antivirus in uso. CNet e paint.net sono generalmente buoni, fonti pulite per il software libero.

free

Al fine di creare il nuovo colpo di testa si sarà probabilmente bisogno di immagini - a meno che il disegno è tutto il testo. Le immagini possono essere il vostro logo aziendale, una fotografia di te stesso o la tua squadra, o altri tipi di clipart / fotografie. È possibile utilizzare le immagini memorizzate esistenti, scattare fotografie e utilizzare questi o scaricare immagini gratuite.

Se si utilizzano le immagini libere, fare in modo che si può legalmente usarli, e se è così allora che cosa attribuzione è necessario fornire se del caso. È possibile utilizzare Microsoft ClipArt, anche se ci sono anche una serie di fonti online per immagini senza filigrana. Una ricerca su Google dovrebbe darvi alcune buone fonti.

Uno di questi è 123RF, che offre un'eccellente selezione di immagini gratuite. È necessario prima registrarsi, e poi si può effettuare una ricerca. La maggior parte delle immagini sono pagati, ma le più piccole dimensioni delle immagini nella sezione 'libero' 'sono completamente gratuito, senza alcuna restrizione nel loro uso.

Le immagini libere 123RF non sono particolarmente piccole. Uno di questi viene utilizzato per questa dimostrazione, e è di 10,5 cm, x formato di output 15,9 centimetri. Più che sufficiente per una buona immagine di intestazione. È possibile sfogliare le immagini gratis qui: http://www.123rf.com/search_free.php?

Una volta scaricato il software e le immagini che si intende utilizzare nella vostra intestazione di WordPress, e hanno fatto una nota di dove li avete memorizzato, è tutto pronto per iniziare.

Prima di iniziare a lavorare sul tuo intestazione si potrebbe desiderare di giocare con il software prima. Questo vi darà un'idea di ciò che è possibile, e forse anche alcune nuove idee sui tipi di abbellimenti e le dimensioni dei caratteri si consiglia di lavorare.

La sequenza di passi comprende:

  • Scarica i due pacchetti di software libero di cui sopra.
  • Determinare le dimensioni dell'intestazione per il vostro tema WordPress. Ad esempio, il tema del 2010 è 940px x 198px, mentre il tema il 2013 è 1600px x 230px.
  • Progetto di un disegno di massima di come si desidera che il colpo di testa a guardare.
  • Scarica le immagini o loghi richiesti.
  • Usare la vernice per progettare la parte grafica della testata.
  • Utilizzare XHeader di scrivere e inserire il testo.
  • Ripetere il passaggio 6 per qualsiasi testo aggiuntivo o abbellimento richiesto.

Come progettare una intestazione WordPress Utilizzando Paint.net

Fuoco su Paint, e impostare una tela di dimensioni alle esigenze del tuo tema WordPress. Stiamo usando 2010 Ecco, quindi è 940 x 198 pixel.

Dimensioni della tela

Clicca su 'Dimensione quadro' quindi impostare le dimensioni come illustrato di seguito:

Mantenere le proporzioni

Assicuratevi di fare clic per deselezionare la casella 'Mantieni proporzioni' come spettacolo, altrimenti non sarà in grado di impostare correttamente l'altezza. La tela si dovrà lavorare con sarà ora visualizzata al centro dello schermo.

Quello che il prossimo dipenderà da come avete progettato l'intestazione. Si può avere un logo con le immagini e il testo come mi accingo a fare qui. Qualunque sia il vostro disegno scelto assomiglia, si dovrebbe ora prendere ogni elemento e le dimensioni in modo appropriato.

A scopo dimostrativo dovremo progettare un colpo di testa WordPress per un parrucchiere. Tenete a mente che si tratta di una demo, e una volta a capire le basi si può lasciar perdere con il vostro talento artistico per produrre il proprio capolavoro. Sto usando due foto e un logo, le foto riprendendo l'intera altezza della testata - 198 pixel.

Il mio primo originale è di 450 x 373 px come potete vedere qui:

Misura originale

Voglio cambiare l'altezza di 198px, lo stesso che l'altezza intestazione standard. Per fare ciò, clicca su 'Immagine' nella barra dei menu in alto di vernice, poi su 'Resize' - vedrete la schermata qui sopra. Questa volta è necessario mantenere il rapporto di aspetto, di mantenere le dimensioni della testa corretta.

Basta ridurre l'altezza fino a quando è 198px, così:

ridurre l'altezza

Come si può vedere, la larghezza è cambiato insieme con l'altezza per mantenere la testa in proporzione. Ora fare clic su OK per salvare la nuova dimensione.

Fin qui tutto bene, ma voglio che la donna sia rivolto verso sinistra, non è giusto. Clicca una volta su 'Immagine' nella barra di navigazione in alto, quindi fare clic su 'Flip orizzontale' - ora abbiamo:

Rifletti orizzontale

Per salvare questo, fare clic su 'Salva' dal menu File, quindi fare clic su OK in basso a destra dello schermo rinfrescato.

Passiamo ora costruire l'intestazione. Se si guarda in alto a destra dello schermo, mentre in Paint, potrete vedere le immagini più recenti che avete lavorato con. Questo colpo include alcuni altri ho utilizzato:

Immagini recenti

L'immagine a sinistra è la tela correttamente dimensionato per 940 x 198. Ora dobbiamo cliccare su questo per portarlo alla zona di lavoro. Voglio colore che il nero, in modo da fare clic su 'Finestra' nel menu Pittura principale, e poi su 'Colori'. Ora cliccate sulla vernice-pot nel menu Strumenti per la sinistra:

Colori

Il cursore sarà ora assumere la forma della vernice-pot. Mettere questo sulla tela intestazione e il tasto sinistro del mouse. La tela deve essere nero. Ora siamo pronti a mettere la grafica sulla tela.

Posizionamento dei Graphics

Con la tela nera ora al centro dello schermo, andare fino al menu e fare clic su 'Layers'

Livelli

Ora cliccate su 'Importa da File' - quello che stiamo facendo ora è quello di recuperare le immagini formattate e metterli sulla tela dove li vogliamo. Clicca sulla prima immagine e apparirà nella parte sinistra della tela. Trascinarlo nella posizione corretta secondo il vostro disegno. Per me è verso l'estrema destra:

Regola posizione

Si può vedere come dimensione dell'immagine corrisponde l'altezza dell'intestazione. Le linee bianche scompariranno quando si salva. Ora fare la stessa cosa con altre immagini, quindi salvare l'intestazione.

Suggerimento Colore: Se si desidera far corrispondere esattamente il colore dello sfondo (nero qui) con lo sfondo delle immagini, è possibile utilizzare uno strumento gratuito chiamato ColorSpy. Questo mostra il codice esadecimale del colore per l'area che il cursore si trova su.

Si potrebbe vedere una leggera differenza nel buio tra le due aree di cui sopra: l'immagine è 0C0C0C mentre la tela è 000000. Se si fa clic sul menu Colore come indicato in precedenza, e poi su 'More', è possibile inserire il codice esadecimale. La vernice-piatto sarà quindi riempire la tela con la stessa tonalità dello sfondo dell'immagine. Si tratta di uno strumento molto utile da usare quando corrispondenza grafica come ho fatto qui di seguito.

Scarica qui: http://www.microtask.ca/colorspy.html

Ora aggiungere altri grafici che si desidera includere nel colpo di testa. Vorrei aggiungere solo un altro, l'essere risultato finale:

Risultato

Salva come un file JPG. Ora sei pronto per aggiungere il testo.

Aggiunta di testo con XHeader

Avviare XHeader e cliccare su Nuovo:

XHeader

Poi clicca su 'Carica Immagine dal disco rigido':

Carica immagini

e poi caricare il colpo di testa salvato. Sarà ora visualizzato sul XHeader schermo di lavoro, appena sopra il pannello di controllo qui:

Schermo XHeader lavoro

Selezionare 'Testo' poi scegliere il colore preferito del testo, il font e la dimensione. Iniziare a digitare, e apparirà nella finestra di lavoro e l'intestazione. È possibile trascinare il testo in qualsiasi posizione lo si desidera, e anche aggiungere un grado di trasparenza, se si desidera la grafica sia visibile dietro di esso.

Facciamo un po 'più elaborato e aggiungere un po' di abbellimento. Utilizzando lo strumento 'Circle', è possibile aggiungere cerchi e ovali. Aggiungiamo un ovale in rosso con un ombra blu. Il risultato finale è:

Risultati finali

Per aggiungere ulteriore testo, ad esempio il numero di telefono di cui sopra, si salva per la prima l'intestazione, e quindi ricaricare per aggiungere altro testo. Quando si salva, si ottiene la possibilità di salvare in formato JPG e PNG. Utilizzare JPG a meno che non si dispone di effetti di trasparenza o angoli arrotondati nell'intestazione, nel qual caso PNG riprodurrà fedelmente questi:

Salva Intestazione

Progettare un intestazione WordPress: Sommario

L'esempio fornito è abbastanza semplice forma di intestazione WordPress. Il testo è stato scelto in modo arbitrario e può o non può essere un nome di società vera e propria. Quello che è certo è che il design è unico come è il numero di telefono! È possibile aggiungere praticamente qualsiasi abbellimento che si desidera, tra cui loghi, immagini multiple e vari strati di testo. Salvare l'immagine con un nome diverso ogni volta (ad esempio, -1, -2, ecc) in modo facile da restituire se si apporta una modifica che non ti piace.

È possibile utilizzare entrambe le applicazioni software per modificare le intestazioni esistenti per soddisfare le vostre esigenze - non c'è bisogno di ripartire da zero. Entrambe le applicazioni software sono facili da usare una volta che ci si abitua a loro, e sono divertenti da giocare con chi vuole esplorare le loro capacità. Le intestazioni create sono facilmente integrabili nel tuo blog WP.

È possibile utilizzare lo stesso software per la progettazione di scatole di prodotti 3-D e copertine per libri, se si dispone di un modello di copertina con cui lavorare.

Ads

Condividere