This tutorial is going to show you how to customize a logo on your WordPress theme using the source.psd file. Please, follow the steps below:
1. Open the “sources”\”psd” folder of your template package .
2. Open the .psd file you have there (usually its name includes the word “home”) in Adobe Photoshop by opening Photoshop, navigating to menu “File” ->“Open”and browsing for the .psd file. Or by dradding/dropping the .psd file into Photoshop.
If you see the following message
Please, install all fonts that come with your template included to the “sources”/”fonts”folder or download them using the links in the text file called “fonts.txt. That depends on the template number. Once you have them installed, re-open the file.
3. Click on the Slice tool or hit the “C” tab on your keyboard to see all slices.
4. Select the “Move Tool” (or hit the “V” tab) and holding Ctrl (or Commad for MAC users) click on the logo to select it.
5. To change the text, select the “Type Tool”or hit the “T”, tab and click on the logo text to select it and edit it.
6. To replace the logo image, select it with the “Move Tool”(see point 5) and click on the “eye” icon in the “Layers” window (under Window -> Layers) to disable the layer that keeps the image.
7. If the logo has a complicated structure, you may need to disable several layers this way, till it’s completely disabled. Then drag and drop your new logo image by holding the CTRL tab into Photoshop in place of the old logo.
8. When finished, go to the top menu “File” -> “Save for web and devices”. In the “Save for Web”window , select the Slice tool again (or hit the “C” tab), select the logo by clicking on it and click “Save”.
9. Navigate to the folder on your computer where you want to save the new logo. It may be your Desktop (when the desktop is selected, Photoshop will create a new “images” folder with your logo. In the “Save Optimized as” window that is going to pop up, you need to select the following: Images Only, Default Settings, Selected Slices. Then click on “Save”.
10. Open the “images” folder that Phptoshop has just created and check if the new logo image is there.
11. Login to your WordPress admin panel, go to “Apearance” -> “Themes” and click on the theme options menu where you can browse to the files on your computer and replace the logo. Its name, location or even availability depends on the template design.
12. If your template does not have the option to upload the logo image through the admin panel, login to your FTP server, go to the folder where your logo is located (usually it is /wp-content/themes/theme#/images/ – the directory depends on the template design, again) and replace the logo.png (the name depends on design) with the one you saved on your computer. If you are prompted to replace the existing one, that means you are doing it correctly.
Refresh your web browser window by hitting F5 or clearing the cache to see the changes.
Feel free to check the detailed video tutorial below: